"Ship Shape" teknolojisinin kullanıma alınmasıyla dönüşen şekil tasarımı

 (canva.dev)
2 puan yazan GN⁺ 2023-11-14 | 1 yorum | WhatsApp'ta paylaş

Giriş

  • Canva kullanıcıları, yeni Draw aracıyla yaratıcılıklarını ortaya koyup tasarımlarına özel çizimler ekleyebilir.
  • Kullanıcıların fare veya trackpad ile çizdiği basit çizgiler ya da şekiller kusurlu olabilir; bunu telafi etmek için Shape Assist özelliği geliştirildi.
  • Shape Assist, makine öğrenimini (ML) kullanarak düzensiz karalamaları pürüzsüz vektör grafiklere dönüştürür.

Tasarım açısından değerlendirmeler

  • Özellik geliştirilirken, kullanıcı deneyiminin hem hızlı hem doğru olması için sınıflandırma gecikmesi en yüksek öncelik olarak ele alındı.
  • Çözüm tarayıcı içinde dağıtılarak gerçek zamanlı şekil tanıma ve çizim desteği sağlandı.
  • İnternet bağlantısı gerektirmediği için çevrimdışı durumlarda da erişilebilirlik garanti edildi.

Veri toplama

  • Başarılı bir ML modelinin temeli veri toplamaya dayanır ve farklı kullanıcılardan çizim verileri toplandı.
  • Kullanıcıların çizdiği çizgiler, x ve y koordinatlarının dizileri olarak kaydedildi; böylece çeşitli stilleri ve varyasyonları içeren bir veri kümesi oluşturuldu.
  • Verilerin koordinatlarla kaydedilmesi, veri ön işleme ve çeşitli veri artırma tekniklerinin uygulanması açısından esneklik sağladı.

Model tasarımı ve eğitimi

  • Sayfa yükleme süresini olumsuz etkilemeden istemci tarafında çalışacak bir ML modeli tasarlandı.
  • CNN yerine koordinatları doğrudan kullanan RNN denemeleri yapılarak model boyutu en aza indirildi.
  • Çeşitli hiperparametreler ayarlanarak modelin en uygun özellikleri belirlendi.
  • Kullanıcıların çizim hızı farklarını dikkate almak için, her şekli temsil eden nokta sayısı sabitlendi.
  • Önemli ayrıntıları korurken nokta sayısını azaltmak için Ramer-Douglas-Peucker (RDP) algoritmasının değiştirilmiş bir sürümü kullanıldı.

Dağıtımda dikkat edilen noktalar

  • Model küçük ve hesaplama açısından basit olduğu için tüm işleme istemci uygulaması içinde yürütülebilir.
  • Sunucuya bağlanmaya gerek kalmadan özellik tamamen çevrimdışı çalışır.

Model mimarisi

  • Model, bir LSTM katmanı ile Gemm (yoğun ya da tam bağlantılı katman) içeren bir yapıdan oluşur.
  • Model yaklaşık 250 kilobayt boyutundadır ve istemcide çalıştırılmak üzere doğrudan Typescript ile uygulandı.

Şekil değiştirme

  • Kullanıcının çizdiği şekil belirlendikten sonra, vektör grafik gösterimi ile kullanıcının çizim yolunu hassas biçimde hizalamak için şablon eşleme yaklaşımı kullanılır.

Sonuç

  • Shape Assist özelliğini dünya ile paylaşmaktan büyük heyecan duyuluyor ve hem profesyonel tasarımcıların hem de karalama yapan kullanıcıların bu özelliği keyifle kullanması umuluyor.

GN⁺ görüşü

Bu yazıdaki en önemli nokta, Canva'nın tarayıcı içinde çalışan bir makine öğrenimi modeli kullanarak kullanıcıların çizdiği şekilleri doğru biçimde tanıyan ve bunları pürüzsüz vektör grafiklere dönüştüren Shape Assist özelliğini geliştirmiş olmasıdır. Bu özellik, kullanıcıya anında geri bildirim sunar ve internet bağlantısı olmadan da kullanılabildiği için erişilebilirliği artırır. Yazının ilgi çekici olmasının nedeni, teknolojideki ilerlemenin yaratıcı işleri nasıl daha kolay ve daha keyifli hale getirebildiğini göstermesidir.

İlgili okumalar

1 yorum

 
GN⁺ 2023-11-14
Hacker News görüşleri

  • RNN yerine "$1 unistroke recognizer" algoritması, sorun için basit ve zarif bir çözüm

    • "$1 unistroke recognizer", tek bir örnekle eğitildiğinde bile iyi çalışıyor
    • Kullanıcı arayüzünü daha tanıdık hale getirmek için projeye kolayca entegre edilebilir
    • "Graffiti" tarzı metin girişinde güvenilir biçimde çalışıyor ve her karakter tek vuruştan oluştuğunda etkili oluyor
    • Orijinal makale anlaşılması kolay ve akıcı bir şekilde yazılmış
    • unistroke recognizer proje bağlantısı

  • ASML, TSMC ve benzeri şirketlerdeki mühendisler, daha küçük ve daha güçlü çipler üretmek için her gün sıvı kalaya lazer atarak son derece kısa dalga boylarında ışık üretiyor

    • Web geliştiricileri ise yaptıkları işin fark edilmemesi için her gün uğraşıyor

  • Fare veya trackpad ile düz bir çizgi çizerken bile düzensiz bir şekil ortaya çıkması kolay

    • Canva'da fareyle şekil çizme ihtiyacı olup olmadığı sorgulanıyor
    • Miro'nun geçmişte fareyle çizilmiş bir yıldızı geometrik olarak doğru bir yıldıza dönüştüren bir özelliği vardı
    • Diyagram oluştururken hazır şekiller, ikon yaparken ise özel yazılımlar kullanılıyor
    • Gerçek çizim yapılacaksa tablet kullanılıyor
    • Teknolojinin kendisi havalı, ancak gerçek kullanım senaryoları soru işareti

  • Canva'nın çizgi çizmek için kullandığı kütüphaneye ilgi var

  • 20 yıldan uzun süre önce Macromedia Flash'ta serbest biçimli eğriler çizerken eğrileri yumuşatma özelliğine duyulan hayranlık

    • O dönemin sınırlı işlem gücü düşünüldüğünde etkileyici bir özellikti

  • Ramer-Douglas-Peucker (RDP) algoritmasının bir varyasyonunu geliştirmeye dair bir yorum

    • RDP, önemli ayrıntıları korurken bir eğrinin nokta sayısını azaltan bir eğri sadeleştirme algoritmasıdır
    • 2018 Strange Loop'ta Picasso'nun çalışmalarına Douglas-Peucker uygulanan bir örnek paylaşılmış
    • Picasso's Bulls proje bağlantısı

  • Elle çizilmiş gibi görünen "titrek karalama" sürümü, pürüzsüz vektör grafiklerden daha çekici olabilir

    • Yapay kusursuzluğun dünyasında gerçekten elle çizilmiş işlerin ayrı bir çekiciliği var

  • Böyle bir özellik uygulanırken kullanıcıya seçim hakkı verilmeli ve etkin olduğu açıkça anlaşılmalı

    • Araçlar fazla akıllı olmaya çalışıp kusursuz olmadığında sinir bozucu olabiliyor

  • Model, önceden tanımlanmış 9 şekli tanıyacak şekilde eğitilmiş

    • Modeli eğitmek yerine, şekil çizerken genel bir yumuşatma/yardımcı özellik geliştirilmesi gerektiği söyleniyor
    • Bu sayede daha "analog" tarzda, kendine özgü şekiller elde edilebilir

  • Bu özelliğin açık kaynak olması isteniyor

    • Son dönemde küçük boyutlu modeller yeniden ortaya çıkıyor (bu model 250kb)
    • Faydalı uygulamalar için küçük modellere geri dönebildiğimiz günlerin gelmesi umuluyor