Canva Ship Shape: Elle çizilmiş şekilleri vektöre dönüştüren Shape Assist

• Canva'nın Shape Assist özelliği, Draw tool içinde titrek şekilde çizilmiş tek vuruşlu şekilleri tarayıcı içinde tanıyıp temiz vektör grafiklere dönüştüren bir işlevdir
• Kurallara ve eşik değerlerine dayanan bilgisayarlı görü sezgiselleri kare, daire ve üçgen için kullanılabiliyordu; ancak bulut, yıldız, kalp gibi karmaşık şekillerde ve yeni şekil eklemede sınırlı kalıyordu
• Model, vuruşu bir görüntü olarak değil x·y koordinat dizisi olarak ele alıyor; istemci tarafında çalışması için CNN yerine RNN/LSTM tabanlı bir yapı ve özel çıkarım kodu seçildi
• Nihai model, P = 25, H = 100, N = 9 ayarlarına sahip tek bir LSTM katmanı ve Gemm katmanından oluşuyor; 64,109 parametreye ve yaklaşık 250KB boyuta sahip olup modern dizüstülerde 10ms'nin altında çalışıyor
• Sunucuya gidip gelmeden çalışacak, ancak kullanıcı şekli çizdikten sonra imleci 1 saniyeden uzun süre tuttuğunda ve önceden tanımlı bir şekille yeterince eşleştiğinde otomatik değiştirecek şekilde tasarlandı

---

Draw tool ve Shape Assist'in rolü

• Canva'nın Draw tool aracı, kullanıcıların tasarımlarına doğrudan çizdikleri görselleri eklemesini sağlar
• Shape Assist, el titremesi olan karalamaları daha pürüzsüz vektör grafiklere dönüştürmek için geliştirildi
• Sınıflandırma gecikmesi önemli bir koşul olduğu için sunucu tarafında işlem yapmak yerine tarayıcı içinde çalıştırma seçildi
  • Kullanıcılar şekli çizer çizmez geri bildirim alabilir
  • Sunucu tabanlı işlemede oluşan gecikmeden kaçınılabilir
  • Sürekli internet bağlantısı olmadan çevrimdışı da kullanılabilir

Sezgisellerden ML modeline geçişin nedeni

• İlk Shape Assist, kullanıcının çizdiği koordinatların geometrik özelliklerini analiz eden bilgisayarlı görü sezgiselleri kullanıyordu
  • Kare, daire ve üçgen gibi belirli şekilleri kurallar ve eşik değerleriyle algılıyordu
  • Koordinatlar Kartezyen koordinat sistemindeki noktalar olarak analiz ediliyordu
• Temel şekil tanımada çalışsa da yeni şekiller eklemek veya daha karmaşık şekilleri işlemek zordu
  • İlk uygulama, tek vuruşla çizilebilen şekillerle sınırlıydı
  • Önerilen şekil listesinde bulut, yıldız ve kalp gibi sezgisel yöntemlerle işlenmesi zor şekiller vardı
• ML modeli, kullanıcıların elle çizim veri kümesinden farklı stilleri ve varyasyonları öğrenebildiği için Shape Assist'i basit geometrik şekillerin ötesinde daha karmaşık şekillere genişletebildi

Elle çizim verileri ve koordinat tabanlı temsil

• Canva, tek vuruşlu şekiller çizmeye yönelik basit bir UI ile kullanıcıların elle çizim verilerini topladı
• Her vuruş x·y koordinat dizisi olarak kaydedildi
  • Bu yöntem, şekli ikili görüntü olarak saklamaya kıyasla ön işleme ve veri artırma açısından daha esnektir
  • Görüntü tabanlı olsaydı çevirme, döndürme ve kesme gibi uzamsal artırmalar uygulanabilirdi
  • Koordinat tabanlı olduğunda koordinatların rastgele silinmesi, nokta konumlarının rastgele titreştirilmesi ve nokta sırasının ters çevrilmesi gibi artırmalar da mümkündür
• Gönüllü verileriyle bile kayda değer bir veri kümesi toplandı, ancak mühendislerin ve tasarımcıların çizimleri ortalama Canva kullanıcısını iyi temsil etmiyordu
  • ML mühendisleri adversarial veri sağlama eğilimindeydi
  • Tasarımcıların çizimleri fazla iyiydi; bu nedenle bazılarına baskın olmayan elleriyle çizmeleri söylendi
  • Daha katı yönergeler ve beklentiler sağlandıktan sonra önemli bir veri kümesi elde edildi

Model tasarımı ve eğitim yöntemi

• Modelin istemcide çalışması gerekiyordu ve sayfa yükleme süresini olumsuz etkilememeliydi; bu yüzden boyutu en aza indirilmeliydi
• Canva, noktaları piksellere dönüştürmeyi gerektiren CNN yerine, vuruşun x·y koordinatlarını doğrudan kullanan RNN modellerini denedi
• En uygun model özelliklerini bulmak için hiperparametre araması yapıldı
  • Girdi boyutu, katman sayısı ve hidden state'in özellik sayısı gibi parametreler ayarlandı
• Her kullanıcının çizim hızı farklı olduğundan aynı şeklin nokta listesi uzunluğu da değişiyordu
  • Yavaş çizen kullanıcılar daha fazla nokta bırakıyordu
  • Hızlı çizen kullanıcılar daha az nokta bırakıyordu
• Nokta sayısını sabitlemek için eşit dağılımlı aralıklarda doğrusal interpolasyon kullanılabilirdi, ancak önemli noktalar kaldırıldığı için ayrıntı kaybı oluşuyordu
• Bunun yerine Canva, Ramer-Douglas-Peucker algoritmasının bir varyantını geliştirdi
  • RDP, eğrinin önemli ayrıntılarını korurken nokta sayısını azaltan bir eğri basitleştirme algoritmasıdır
  • Basitleştirilmiş eğriden anlamlı biçimde sapmayan noktaları yinelemeli olarak kaldırır

Hatalı otomatik değiştirmeleri azaltan sınıflandırma yöntemi

• Shape Assist, elle çizilen şekil önceden tanımlı sınıflardan biriyle yeterince benzer değilse otomatik değiştirme yapmamalıdır
• Yalnızca tek bir şekil doğru cevap olabileceği için softmax aktivasyonu ve cross-entropy kaybı doğal bir seçimdi
  • En yüksek olasılıklı sınıfın güven skoru eşik değerinden düşükse tahmini reddeden bir yöntemdir
• Ancak bu yaklaşımda modelin yanlış olduğu durumlarda bile yüksek güven göstermesi sorunu vardı
• Sonuçta her çıktı sınıfı için sigmoid aktivasyonu kullanan çok sınıflı, çok etiketli bir sınıflandırıcı olarak eğitildi
  • Hiçbir sınıf eşik değerini aşmazsa tahmin reddedilir

İstemci tarafı çıkarım yapısı

• ML modelleri genellikle büyük ve hesaplama açısından ağır olduğundan çoğu zaman buluttaki güçlü bilgisayarlarda çalıştırılır
• Shape Assist modeli küçük ve matematiksel işlem sayısı düşük olduğu için tüm işlem istemci uygulaması içinde çalıştırılabildi
• Bu yaklaşım sunucu bağlantısı ihtiyacını ortadan kaldırır, sunucuya gidiş geliş süresini silerek şekillerin neredeyse anında tanınmasını sağlar

Model mimarisi ve boyutu

• Nihai model, ardından Gemm katmanı gelen tek bir LSTM katmanından oluşur
  • Gemm, Dense veya Fully Connected katmanı olarak da adlandırılır
• Başlıca ayar değerleri şöyledir
  • İnterpole edilmiş nokta sayısı: P = 25
  • hidden size: H = 100
  • Önceden tanımlı şekil sayısı: N = 9
• Parametre sayısı şöyle hesaplanır
  • LSTM: 4H * 2 + 4H * H + 8H = 41,600
  • Gemm: P * H * N + N = 22,509
  • Toplam: 64,109
• IEEE754 32 bit kayan nokta formatında parametre başına 4 bayt kullanıldığında model boyutu yaklaşık 250KB olur
  • Sıkıştırılmamış tek bir 360p 16:9 görüntüyle benzer boyuttadır
  • Parametreler daha düşük hassasiyetle saklanırsa daha da küçültme olasılığı vardır
• Canva, genel amaçlı bir ML motoru yerine LSTM ve Gemm işlemlerini TypeScript ile doğrudan uyguladı
  • Daha karmaşık modellere iyi genellenmeyen bir yaklaşımdır
  • Uygulama 300 satırdan azdır
  • Modern dizüstülerde 10ms'nin altında çalışır

Şekil değiştirme ve hizalama

• Model elle çizilmiş şekli belirledikten sonra Canva, template matching yöntemiyle elle çizilmiş yolu vektör grafik temsiline uydurur
• Hizalama süreci, girdi şekli ve şablon şekil normalize edildikten sonra ilerler
  • Şablon şekil 15° aralıklarla döndürülerek denenir
  • Döndürülmüş koordinat uzayında girdi noktalarının birinci ve ikinci momentleri hesaplanır
  • Girdi noktaları ile şablon şekil arasındaki benzemezlik hesaplanır
  • Benzemezliğin en küçük olduğu dönüş, en iyi açı olarak seçilir
• Kullanıcı şekli çizdikten sonra imleci en az 1 saniye yerinde tutarsa, önceden tanımlı bir şekille yeterince eşleşmesi durumunda Shape Assist şekli değiştirir

[GN⁺]

Hacker News görüşleri

• Bu sorun için tekrarlayan sinir ağları (RNN) fazla kaçıyor gibi; basit ve zarif $1 unistroke recognizer daha uygun görünüyor
  Her jest için yalnızca tek bir örnekle eğitilse bile oldukça iyi çalışıyor; herhangi bir projeye bir öğleden sonra içinde ekleyip jest tanımayla arayüzü daha kullanıcı dostu hâle getirebilirsiniz
  Her harf tek çizgiden oluşuyorsa Palm tarzı Graffiti metin girişinde de oldukça kararlı çalışıyor; orijinal makale de okunması ve anlaşılması kolay yazılmış
  https://depts.washington.edu/acelab/proj/dollar/index.html

  • $1 recognizer’ın büyük sorunu, çizgiyi belirli bir şekilde çizmeniz gerekmesi
    Örneğin bir daire çizerken saat yönünün tersine çizmeniz gerekiyor; daha doğal hissettiren saat yönünde çizerseniz caret olarak algılanıyor
    Kullanıcının uygulama ayrıntılarını bilmediği serbest çizim bağlamında pratikte kullanması zor
  • Bu sayfadaki örneği test edip hataları bildirenlerin gözden kaçırdığı nokta, bu demonun yalnızca tek bir örnekle “eğitilmiş” olması
    Bağlantısı verilen makale[0] hata oranını ele alıyor; yalnızca birkaç örnek daha eklemek bile oldukça hızlı iyileşme sağlıyor
    [0]https://faculty.washington.edu/wobbrock/pubs/uist-07.01.pdf , sayfa 8
  • Kendim denedim; en azından eğitimsiz kullanmak için oldukça kötüydü
    Çizdiğim kare caret, zikzak ise süslü parantez olarak algılandı
    Ok gibi iki çizgiyle çizilen şekilleri de desteklemiyor
  • Kısa süre denedim, fazla basitti. Örnek şekli tam olarak izleyerek çizmezseniz birbirine karıştırıyor
    Örnek şekillerdeki “delete” ile “x”i karşılaştırmak, performansın ne kadar kötü olduğunu görmek için iyi bir yol
    Her seferinde şekli aynı şekilde çizmeyi bekleyen bir jest arayüzü için başlangıç noktası olarak fena olmayabilir; ama burada söz konusu olan diyagram oluşturma kullanımına pek uymuyor
  • Gerçekten çok basit olmasına kıyasla fazlasıyla iyi çalıştığına katılıyorum
    Üniversite projesi olarak bir ES6 implementasyonu yaptım; ilgileniyorsanız burada: https://github.com/gurgunday/onedollar-unistroke-es6

• “Fare veya trackpad ile çizilen basit düz bir çizgi bile sarhoş bir sincabın geçtiği yol gibi görünebilir” açıklamasını anlıyorum ama Canva’da kimin fareyle doğrudan şekil çizmesi gerektiğini bilmiyorum
  Eskiden Miro’da fareyle kabaca bir yıldız çizince onu geometrik olarak düzgün bir yıldıza, daireye, üçgene vb. dönüştüren bir özellik vardı; harika olduğunu düşünmüştüm ama gerçekte hiç ihtiyaç duymadım
  Diyagram hazırlarken hazır şekilleri kullanmak daha hızlı; ikon yaparken de boolean işlemler, nokta taşıma ve Pen aracı merkezli ayrı bir iş akışı kullanılıyor ve genelde Illustrator gibi özel bir program tercih ediliyor
  Gerçek illüstrasyon çizerken tableti çıkarıp kullandığım için, teknolojinin kendisi havalı olsa da kullanım senaryosunun ne olduğunu merak ediyorum

  • Canva bir diyagram aracı değil, kullanıcı kitlesi oldukça farklı olan bir görsel tasarım aracı
    Varlık kütüphanesi devasa; fotoğraflar ve vektör grafikler dâhil milyonlarca, hatta belki on milyonlarca görsel var
    Sınırlı kullanım deneyimime göre, istediğiniz basit şekli tam olarak bilseniz bile sonsuz bir kütüphanede arama yapmak özellikle can sıkıcıydı; bu araç muhtemelen o sıkıntıyı azaltmayı amaçlıyor
    Birkaç yıl önce Canva’da çalışmıştım
    İçeriden hiçbir bilgim yok; ancak Canva rekabetçi bir diyagram aracı da olmak istediği için bu kullanım senaryosu önemli olabilir. Yine de mevcut kullanıcıların %99’unun tasarım deneyimini temelden değiştirememe gibi bir kısıtları olacak gibi
  • Klavye kısayollarını öğrenmeyen tasarımcılar veya pazarlamacılar için “fareyle şekil çizmek” hızlıdır; “yarım düzine menüden geçip uygun şekli seçmek, yerleştirmek ve sonra boyutunu ayarlamak” ise daha yavaştır
    Şekil menüsüz şekilde hemen erişilebilir olsa bile, tek bir imleçle tamamını çizmek; birden fazla ikonu yerleştirip yeniden boyutlandırmaktan, ardından ok işlevine geçip ok eklemekten daha hızlı olabilir

• Canva’nın çizgi çizmek için kullandığı kütüphane de ilginç olabilir: https://github.com/steveruizok/perfect-freehand

  • Canva sponsor değilmiş gibi görünüyor

• “Ramer-Douglas-Peucker (RDP) algoritmasının bir varyantını geliştirdik” kısmı bana eski bir yan projeyi hatırlattı
  2018’deki Strange Loop sunumunda Douglas-Peucker’ı Picasso’ya uygulamıştım
  Picasso's Bulls: Deconstructing his design process with Python
  https://rrherr.github.io/picasso/

• 20 yıldan da çok önce Macromedia Flash'in benzer bir şeyi nasıl başardığını merak ettim
  O dönemde CPU performansı bugüne göre çok daha sınırlıydı; serbest eğri çizerken eğriyi pürüzsüzleştirip düzeltmesini gördüğümde ne kadar şaşırdığımı hâlâ canlı canlı hatırlıyorum

  • LeCun ve arkadaşları 1995'te el yazısı rakam tanımada %99'un üzerinde doğruluk elde etmişti; bu, şekil tanımaya epey benziyor
    Yine de bunun tarayıcıda hafif ve hızlı çalışmasını sağlamak hâlâ bir başarı. Sonuçta önemli olan her zaman kullanıcı deneyimi
  • 1993'te Apple Newton için bu özellik, 20 MHz ARM işlemciyle bile temel özelliklerden biriydi
    https://en.wikipedia.org/wiki/MessagePad#User_interface
  • Düzgünleştirme, Bezier eğrilerinde neredeyse yinelenen noktaları kaldırarak sadeleştiren ayrı bir işlemdir
    Neredeyse düz bir çizgi çizdiğinizde 100 kontrol noktası oluştuysa, yazılımın bunu yaklaşık 4 noktaya indirmesi gibi
  • Muhtemelen fare olaylarını alıp başta olayların arasını düz çizgilerle birleştirerek çiziyordu. 1990'ların donanımında düz çizgi çizmek hızlıydı ve hızlı çizmek gerektiği için buna ihtiyaç vardı
    Çizim bitince de aynı noktaları girdi olarak alıp spline eğri algoritması ile çizgiyi yeniden çizmiş olmalı
    Spline çizmenin hesaplaması başlı başına çok daha zor değil; ama sona tek bir nokta eklediğinizde, daha önce çizilmiş çizginin bir kısmının değişmesi kritik nokta
    Bu durumda o çizginin arkasındaki her şeyi yeniden çizmek gerekir; bu da hesaplama maliyetini artırır ve 60 fps'de kesin olarak işleneceğini garanti etmek zordur

• İyi bir yazı ve çalışma da çok ilginç
  Azınlıkta kalacak bir tercih olabilir ama tuhaf biçimde, pürüzsüz vektör grafiklerinden çok elle çizilmiş titrek karalama hissi bana daha hoş geliyor
  Elbette bağlama göre tercih değişebilir, bu yüzden özelliğin kendisi harika. Yapay mükemmelliğin fazlasıyla yaygın olduğu bir dünyada, gerçek el çizimi çıktılara özünde çekilen bir yan var

• Böyle bir özellik uygulanacaksa mutlaka seçilebilir yapılmasını ve açıkken bunun net biçimde görünür olmasını isterim
  Bir aracın fazla akıllıymış gibi davranıp sonra tam isabet ettirememesi insanı gerçekten öfkelendiriyor. Ben de böyle hatalar yaptım

• Son dönemdeki makine öğrenmesi/yapay zeka furyasından birkaç yıl önce, çocukların sevdiği Scribblenauts diye bir oyun vardı; çok kaba karalamaları şaşırtıcı derecede çeşitli nesnelere dönüştürüyordu
  Nasıl yaptığını bilmiyorum ama ben de hayran kalmıştım, çocuklar ise bunu sihir gibi görüyordu
  https://store.steampowered.com/app/218680/Scribblenauts_Unli...

  • Oynamıştım, gerçekten şaşırtıcıydı. Yanlış hatırlamıyorsam iOS'a da çıkmıştı

• Bunun açık kaynak olmasını isterdim
  Son zamanlarda küçük boyutlu birkaç model çıkıyor. Bu model 250 KB; büyük bir modeli ince ayarlama gibi basit işlerde yaklaşık 50 KB'lık modeller de vardı
  Küçük modelleri faydalı uygulamalarda yeniden gerçekten kullanabilir hâle geleceğimiz zamanı sabırsızlıkla bekliyorum

• Beş köşeli yıldız ile parıldayan yıldız aynı şey değil. Bu bir underfitting örneği mi?

  • https://en.wikipedia.org/wiki/Star_polygon