Desain bentuk yang direvolusi dengan penerapan teknologi "Ship Shape"

 (canva.dev)
2 poin oleh GN⁺ 2023-11-14 | 1 komentar | Bagikan ke WhatsApp

Pengantar

  • Pengguna Canva dapat mengekspresikan kreativitas mereka melalui alat Draw baru untuk menambahkan gambar kustom ke dalam desain.
  • Garis atau bentuk sederhana yang digambar pengguna dengan mouse atau trackpad bisa saja tidak presisi, sehingga fitur Shape Assist dikembangkan untuk mengatasinya.
  • Shape Assist menggunakan machine learning (ML) untuk mengubah coretan yang tidak stabil menjadi grafis vektor yang halus.

Pertimbangan desain

  • Saat mengembangkan fitur, latensi klasifikasi diprioritaskan agar pengalaman pengguna tetap cepat sekaligus akurat.
  • Solusi diterapkan di dalam browser untuk menyediakan pengenalan bentuk dan bantuan menggambar secara real-time.
  • Tidak memerlukan koneksi internet sehingga aksesibilitas tetap terjamin bahkan saat offline.

Pengumpulan data

  • Fondasi model ML yang sukses terletak pada pengumpulan data, dan data gambar dikumpulkan dari beragam pengguna.
  • Garis yang digambar pengguna dicatat sebagai urutan koordinat x dan y untuk membangun set data yang mencakup berbagai gaya dan variasi.
  • Dengan merekam data menggunakan koordinat, diperoleh fleksibilitas untuk melakukan prapemrosesan data dan menerapkan berbagai teknik augmentasi data.

Perancangan dan pelatihan model

  • Dirancang model ML yang dapat berjalan di sisi klien tanpa berdampak negatif pada waktu pemuatan halaman.
  • Alih-alih CNN, dilakukan eksperimen dengan RNN yang langsung menggunakan koordinat untuk meminimalkan ukuran model.
  • Berbagai hyperparameter disesuaikan untuk mengidentifikasi karakteristik model yang optimal.
  • Jumlah titik yang merepresentasikan tiap bentuk dibuat tetap dengan mempertimbangkan perbedaan kecepatan menggambar pengguna.
  • Algoritma Ramer-Douglas-Peucker (RDP) dimodifikasi untuk mengurangi jumlah titik sambil mempertahankan detail penting.

Pertimbangan deployment

  • Modelnya kecil dan sederhana secara komputasi, sehingga seluruh pemrosesan dapat dijalankan di dalam aplikasi klien.
  • Fitur dapat berfungsi sepenuhnya secara offline tanpa perlu terhubung ke server.

Arsitektur model

  • Model terdiri dari satu layer LSTM dan Gemm (layer padat atau fully connected).
  • Ukuran model sekitar 250 kilobyte, dan diimplementasikan langsung dalam Typescript untuk dijalankan di klien.

Penggantian bentuk

  • Setelah bentuk yang digambar pengguna ditentukan, pendekatan template matching digunakan untuk menyelaraskan secara akurat representasi grafis vektor dengan jalur gambar pengguna.

Kesimpulan

  • Mereka sangat senang dapat membagikan fitur Shape Assist kepada seluruh dunia, dan berharap baik desainer profesional maupun para pencoret-coret dapat menikmati fitur ini.

Opini GN⁺

Hal terpenting dari artikel ini adalah bahwa Canva mengembangkan fitur Shape Assist yang menggunakan model machine learning yang berjalan di dalam browser untuk mengenali bentuk yang digambar pengguna secara akurat dan mengubahnya menjadi grafis vektor yang halus. Fitur ini memberikan umpan balik instan kepada pengguna dan dapat digunakan tanpa koneksi internet, sehingga meningkatkan aksesibilitas. Artikel ini menarik karena menunjukkan bagaimana kemajuan teknologi dapat membuat pekerjaan kreatif menjadi lebih mudah dan menyenangkan.

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-14
Komentar Hacker News

  • Dibandingkan RNN, algoritma "$1 unistroke recognizer" adalah solusi yang sederhana dan elegan untuk masalah ini

    • "$1 unistroke recognizer" bekerja dengan baik bahkan jika dilatih hanya dengan satu sampel
    • Dapat dengan mudah diintegrasikan ke dalam proyek untuk membuat antarmuka pengguna terasa lebih familier
    • Bekerja andal untuk input teks gaya "Graffiti", dan efektif ketika tiap huruf terdiri dari satu goresan
    • Makalah aslinya ditulis dengan cara yang mudah dipahami dan nyaman dibaca
    • Tautan proyek unistroke recognizer

  • Insinyur di ASML, TSMC, dan perusahaan sejenis setiap hari menembakkan laser ke timbal cair untuk menghasilkan cahaya dengan panjang gelombang yang sangat pendek demi membuat chip yang lebih kecil dan lebih bertenaga

    • Pengembang web setiap hari berusaha agar hasil kerja mereka tidak terlalu mencolok

  • Bahkan saat menggambar garis lurus dengan mouse atau trackpad, bentuknya mudah menjadi tidak beraturan

    • Mempertanyakan apakah memang perlu menggambar bentuk di Canva dengan mouse
    • Miro dulu memiliki fitur yang mengubah bintang yang digambar dengan mouse menjadi bintang yang akurat secara geometris
    • Saat membuat diagram, lebih baik memakai bentuk yang sudah tersedia; saat membuat ikon, memakai program khusus
    • Saat benar-benar menggambar, memakai tablet
    • Teknologinya sendiri keren, tetapi ada pertanyaan soal kasus penggunaan nyatanya

  • Tertarik dengan library yang digunakan Canva untuk menggambar garis

  • Kagum pada fitur penghalusan kurva saat menggambar kurva bebas di Macromedia Flash lebih dari 20 tahun lalu

    • Itu adalah fitur yang mengesankan dibandingkan kemampuan pemrosesan yang terbatas pada masa itu

  • Menyebut pernah mengembangkan varian algoritma Ramer-Douglas-Peucker (RDP)

    • RDP adalah algoritma penyederhanaan kurva yang mengurangi jumlah titik pada kurva sambil mempertahankan detail penting
    • Membagikan contoh penerapan Douglas-Peucker pada karya Picasso di Strange Loop 2018
    • Tautan proyek Picasso's Bulls

  • Versi "coretan gemetar" yang terlihat seperti digambar dengan tangan bisa terasa lebih menarik daripada grafik vektor yang mulus

    • Di dunia dengan kesempurnaan buatan, ada daya tarik tersendiri pada karya yang benar-benar digambar tangan

  • Saat menerapkan fitur seperti ini, pengguna harus diberi pilihan, dan status aktifnya harus jelas

    • Bisa terasa menjengkelkan ketika alat berusaha terlalu pintar tetapi tidak benar-benar sempurna

  • Model dilatih untuk mengenali 9 bentuk yang telah ditentukan sebelumnya

    • Saat melatih model, lebih baik membuat fitur penghalus/pembantu umum untuk menggambar bentuk
    • Dengan begitu, bisa dihasilkan bentuk-bentuk unik dengan gaya yang lebih "analog"

  • Akan menyenangkan jika fitur ini open source

    • Belakangan ini mulai muncul model-model berukuran kecil (model ini berukuran 250kb)
    • Menantikan hari ketika kita bisa kembali ke model kecil untuk aplikasi yang berguna