Canva Ship Shape: Shape Assist biến hình vẽ tay thành vector

• Shape Assist của Canva là tính năng nhận diện các hình đơn nét được vẽ hơi run trong công cụ Draw ngay trong trình duyệt và chuyển chúng thành đồ họa vector gọn gàng
• Các heuristic thị giác máy tính dựa vào quy tắc và ngưỡng có thể dùng cho hình chữ nhật, hình tròn, hình tam giác, nhưng bị giới hạn với các hình phức tạp như đám mây, ngôi sao, trái tim cũng như khi thêm hình mới
• Mô hình xử lý nét vẽ không phải như ảnh mà như chuỗi tọa độ x·y, và để chạy phía client, Canva chọn kiến trúc dựa trên RNN/LSTM cùng mã suy luận tùy chỉnh thay vì CNN
• Mô hình cuối cùng gồm một lớp LSTM duy nhất với cấu hình P = 25, H = 100, N = 9 và một lớp Gemm; có 64,109 tham số, kích thước khoảng 250KB và chạy dưới 10ms trên laptop hiện đại
• Tính năng hoạt động không cần vòng khứ hồi tới máy chủ, nhưng được thiết kế để chỉ tự động thay thế khi người dùng vẽ xong một hình, giữ con trỏ ít nhất 1 giây và hình đó đủ khớp với một hình định nghĩa sẵn

---

Vai trò của công cụ Draw và Shape Assist

• Công cụ Draw của Canva cho phép người dùng thêm hình vẽ trực tiếp vào thiết kế
• Shape Assist được tạo ra để biến những nét nguệch ngoạc bị run tay thành đồ họa vector mượt hơn
• Vì độ trễ phân loại là điều kiện quan trọng, Canva chọn chạy trong trình duyệt thay vì xử lý trên máy chủ
  • Người dùng có thể nhận phản hồi ngay khi vẽ hình
  • Tránh được độ trễ phát sinh từ xử lý dựa trên máy chủ
  • Có thể dùng ngoại tuyến mà không cần kết nối Internet liên tục

Vì sao chuyển từ heuristic sang mô hình ML

• Shape Assist ban đầu dùng heuristic thị giác máy tính để phân tích các thuộc tính hình học của tọa độ do người dùng vẽ
  • Phát hiện một số hình nhất định như hình chữ nhật, hình tròn, hình tam giác bằng quy tắc và ngưỡng
  • Tọa độ được phân tích như các điểm trong hệ tọa độ Descartes
• Cách này hoạt động với nhận diện hình cơ bản, nhưng khó thêm hình mới hoặc xử lý hình phức tạp hơn
  • Triển khai ban đầu bị giới hạn ở các hình có thể vẽ bằng một nét duy nhất
  • Danh sách hình được đề xuất có các hình như đám mây, ngôi sao, trái tim, vốn khó xử lý bằng heuristic
• Mô hình ML có thể học nhiều phong cách và biến thể từ tập dữ liệu hình vẽ tay của người dùng, nhờ đó mở rộng Shape Assist ra ngoài các hình học đơn giản sang những hình phức tạp hơn

Dữ liệu hình vẽ tay và biểu diễn dựa trên tọa độ

• Canva thu thập dữ liệu hình vẽ tay của người dùng bằng một UI đơn giản để vẽ các hình một nét
• Mỗi nét được ghi lại dưới dạng chuỗi tọa độ x·y
  • Cách này linh hoạt hơn cho tiền xử lý và tăng cường dữ liệu so với lưu hình dưới dạng ảnh nhị phân
  • Nếu dựa trên ảnh, có thể áp dụng các phép tăng cường không gian như lật, xoay, cắt xiên
  • Nếu dựa trên tọa độ, cũng có thể tăng cường bằng cách xóa ngẫu nhiên tọa độ, làm rung ngẫu nhiên vị trí điểm, hoặc đảo ngược thứ tự điểm
• Chỉ với dữ liệu từ tình nguyện viên, Canva đã thu được một tập dữ liệu đáng kể, nhưng hình vẽ của kỹ sư và nhà thiết kế không đại diện tốt cho người dùng Canva trung bình
  • Kỹ sư ML có xu hướng cung cấp dữ liệu mang tính đối kháng
  • Hình vẽ của nhà thiết kế quá đẹp, nên một số người được yêu cầu vẽ bằng tay không thuận
  • Sau khi đưa ra hướng dẫn và kỳ vọng nghiêm ngặt hơn, Canva đã có được một tập dữ liệu đáng kể

Thiết kế mô hình và cách huấn luyện

• Mô hình phải chạy trên client và không được ảnh hưởng xấu đến thời gian tải trang, nên kích thước cần được tối thiểu hóa
• Thay vì dùng CNN vốn cần chuyển điểm thành pixel, Canva thử nghiệm RNN sử dụng trực tiếp tọa độ x·y của nét vẽ
• Canva thực hiện tìm kiếm siêu tham số để tìm các thuộc tính mô hình tối ưu
  • Điều chỉnh các tham số như kích thước đầu vào, số lớp, số đặc trưng của hidden state
• Mỗi người có tốc độ vẽ khác nhau, nên cùng một hình cũng có độ dài danh sách điểm khác nhau
  • Người vẽ chậm để lại nhiều điểm hơn
  • Người vẽ nhanh để lại ít điểm hơn
• Có thể dùng nội suy tuyến tính theo các đoạn phân bố đều để cố định số điểm, nhưng cách này loại bỏ các điểm quan trọng và làm mất chi tiết
• Thay vào đó, Canva phát triển một biến thể của thuật toán Ramer-Douglas-Peucker
  • RDP là thuật toán đơn giản hóa đường cong, giúp giảm số điểm trong khi vẫn giữ các chi tiết quan trọng của đường cong
  • Thuật toán đệ quy loại bỏ những điểm không lệch đáng kể khỏi đường cong đã được đơn giản hóa

Cách phân loại để giảm thay thế tự động sai

• Shape Assist không nên tự động thay thế nếu hình vẽ tay không đủ giống một trong các lớp định nghĩa sẵn
• Vì chỉ một hình có thể là đáp án đúng, lựa chọn tự nhiên là dùng kích hoạt softmax và hàm mất mát cross-entropy
  • Cách này từ chối dự đoán nếu độ tin cậy của lớp có xác suất cao nhất thấp hơn ngưỡng
• Tuy nhiên, cách tiếp cận này gặp vấn đề là mô hình vẫn thể hiện độ tin cậy cao ngay cả khi dự đoán sai
• Cuối cùng, Canva huấn luyện mô hình như một bộ phân loại đa lớp, đa nhãn dùng kích hoạt sigmoid cho từng lớp đầu ra
  • Nếu không lớp nào vượt ngưỡng, dự đoán sẽ bị từ chối

Kiến trúc suy luận phía client

• Mô hình ML thường lớn và tốn nhiều tính toán, nên hay được chạy trên các máy tính mạnh trong đám mây
• Mô hình Shape Assist nhỏ và có ít phép toán, nên toàn bộ xử lý có thể chạy trong ứng dụng client
• Cách này loại bỏ nhu cầu kết nối máy chủ và bỏ thời gian vòng khứ hồi tới máy chủ, giúp nhận diện hình gần như tức thì

Kiến trúc và kích thước mô hình

• Mô hình cuối cùng có cấu trúc gồm một lớp LSTM duy nhất, theo sau là lớp Gemm
  • Gemm cũng được gọi là lớp Dense hoặc Fully Connected
• Các giá trị cấu hình chính như sau
  • Số điểm được nội suy: P = 25
  • Kích thước hidden: H = 100
  • Số hình định nghĩa sẵn: N = 9
• Số tham số được tính như sau
  • LSTM: 4H * 2 + 4H * H + 8H = 41,600
  • Gemm: P * H * N + N = 22,509
  • Tổng cộng: 64,109
• Nếu dùng 4 byte cho mỗi tham số theo chuẩn số thực dấu phẩy động 32-bit IEEE754, kích thước mô hình vào khoảng 250KB
  • Tương đương kích thước một ảnh 360p 16:9 chưa nén
  • Có thể giảm thêm nếu lưu tham số với độ chính xác thấp hơn
• Canva tự triển khai trực tiếp các phép toán LSTM và Gemm bằng TypeScript thay vì dùng engine ML đa dụng
  • Đây là cách khó khái quát tốt cho các mô hình phức tạp hơn
  • Phần triển khai dưới 300 dòng
  • Chạy dưới 10ms trên laptop hiện đại

Thay thế và căn chỉnh hình

• Sau khi mô hình xác định hình vẽ tay, Canva dùng phương pháp khớp mẫu để khớp đường vẽ tay với biểu diễn đồ họa vector
• Quá trình căn chỉnh được thực hiện sau khi chuẩn hóa hình đầu vào và hình mẫu
  • Thử xoay hình mẫu theo từng bước 15°
  • Tính mô-men bậc nhất và bậc hai của các điểm đầu vào trong không gian tọa độ đã xoay
  • Tính độ khác biệt giữa điểm đầu vào và hình mẫu
  • Chọn góc xoay có độ khác biệt nhỏ nhất làm góc tối ưu
• Sau khi người dùng vẽ hình và giữ con trỏ tại chỗ tối thiểu 1 giây, Shape Assist sẽ thay thế hình nếu hình đó đủ khớp với một hình định nghĩa sẵn

[GN⁺]

Các ý kiến trên Hacker News

• Với vấn đề này, mạng nơ-ron hồi quy (RNN) có vẻ hơi quá tay; $1 unistroke recognizer đơn giản và thanh nhã có vẻ phù hợp hơn
  Chỉ cần huấn luyện một mẫu cho mỗi cử chỉ là đã hoạt động khá tốt, và với bất kỳ dự án nào, chỉ mất một buổi chiều là có thể tích hợp để làm UI thân thiện hơn bằng nhận diện cử chỉ
  Nếu mỗi chữ cái là một nét, nó cũng hoạt động khá ổn định với kiểu nhập văn bản Graffiti của Palm; bài báo gốc cũng được viết dễ đọc và dễ hiểu
  https://depts.washington.edu/acelab/proj/dollar/index.html

  • Vấn đề lớn của $1 recognizer là phải vẽ nét theo một cách cụ thể
    Ví dụ khi vẽ hình tròn thì phải vẽ ngược chiều kim đồng hồ; nếu vẽ theo chiều kim đồng hồ, vốn cảm giác tự nhiên hơn, nó sẽ bị nhận thành dấu mũ
    Trong bối cảnh vẽ tự do, nơi người dùng không biết chi tiết triển khai, thực tế rất khó dùng
  • Điều mà những người thử ví dụ trên trang này rồi báo lỗi thường bỏ qua là demo này chỉ được “huấn luyện” bằng đúng một ví dụ
    Bài báo được liên kết[0] bàn về tỷ lệ lỗi, và chỉ cần thêm vài ví dụ nữa là kết quả cải thiện khá nhanh
    [0]https://faculty.washington.edu/wobbrock/pubs/uist-07.01.pdf , trang 8
  • Tự thử thì thấy, ít nhất nếu dùng không huấn luyện thì khá tệ
    Hình vuông tôi vẽ bị nhận thành dấu mũ, còn đường zigzag bị nhận thành dấu ngoặc nhọn
    Nó cũng không hỗ trợ các hình vẽ bằng hai nét như mũi tên
  • Thử qua một chút thì thấy quá đơn giản. Nếu không vẽ thật giống hình mẫu, chúng sẽ dễ bị nhầm lẫn với nhau
    So sánh hai hình mẫu “delete” và “x” là cách hay để thấy hiệu năng tệ đến mức nào
    Có thể ổn làm điểm khởi đầu cho giao diện cử chỉ kỳ vọng người dùng luôn vẽ hình theo cùng một cách, nhưng không thật phù hợp với mục đích vẽ sơ đồ đang nói ở đây
  • Tôi đồng ý là nó hoạt động quá tốt so với mức độ đơn giản của nó
    Tôi từng làm một bản triển khai ES6 cho dự án đại học; nếu quan tâm thì ở đây: https://github.com/gurgunday/onedollar-unistroke-es6

• Tôi hiểu phần mô tả rằng “ngay cả một đường thẳng đơn giản vẽ bằng chuột hoặc trackpad cũng có thể trông như đường đi của một con sóc say rượu”, nhưng không rõ ai trong Canva lại cần tự vẽ hình bằng chuột
  Trước đây Miro có tính năng cho phép vẽ đại một ngôi sao bằng chuột rồi chuyển thành ngôi sao, hình tròn, tam giác v.v. chuẩn hình học, và tôi từng nghĩ nó rất hay nhưng thực tế chưa bao giờ cần dùng
  Khi tạo sơ đồ, dùng các hình có sẵn sẽ nhanh hơn; khi tạo icon thì lại dùng một quy trình riêng xoay quanh phép toán boolean, di chuyển điểm và công cụ Pen, thường là trong phần mềm chuyên dụng như Illustrator
  Khi vẽ minh họa thật sự thì tôi lấy tablet ra dùng, nên dù công nghệ này rất thú vị, tôi vẫn tò mò trường hợp sử dụng của nó là gì

  • Canva không phải công cụ vẽ sơ đồ, mà là công cụ thiết kế trực quan với nhóm người dùng khá khác
    Thư viện asset của họ cực lớn, có hàng triệu, thậm chí có thể hàng chục triệu hình ảnh, bao gồm ảnh chụp và đồ họa vector
    Theo trải nghiệm sử dụng hạn chế của tôi, điều đặc biệt phiền là dù đã biết chính xác hình đơn giản mình muốn, vẫn phải tìm trong thư viện vô tận; công cụ này có lẽ nhằm giảm nỗi đau đó
    Tôi từng làm ở Canva vài năm trước
    Tôi hoàn toàn không có thông tin nội bộ, nhưng vì Canva cũng muốn trở thành một công cụ vẽ sơ đồ có sức cạnh tranh, trường hợp sử dụng này có thể quan trọng. Tuy nhiên có lẽ họ bị ràng buộc bởi việc không thể thay đổi căn bản trải nghiệm thiết kế của 99% người dùng hiện tại
  • Với những nhà thiết kế hoặc marketer không học phím tắt, “vẽ hình bằng chuột” là nhanh, còn “đi qua một menu nửa vời để chọn hình phù hợp, đặt nó rồi chỉnh kích thước” thì chậm hơn
    Ngay cả khi hình có sẵn ngay không cần menu, việc vẽ toàn bộ bằng một con trỏ vẫn có thể nhanh hơn so với đặt và đổi kích thước nhiều icon, rồi chuyển sang chức năng mũi tên để thêm mũi tên

• Thư viện Canva dùng để vẽ nét cũng có thể thú vị: https://github.com/steveruizok/perfect-freehand

  • Có vẻ Canva không phải nhà tài trợ

• Đoạn “đã phát triển một biến thể của thuật toán Ramer-Douglas-Peucker (RDP)” làm tôi nhớ đến một dự án phụ ngày trước
  Trong bài nói tại Strange Loop năm 2018, tôi đã áp dụng Douglas-Peucker cho Picasso
  Picasso's Bulls: Deconstructing his design process with Python
  https://rrherr.github.io/picasso/

• Tôi chợt tò mò không biết Macromedia Flash đã làm được thứ tương tự như thế nào từ hơn 20 năm trước
  Hiệu năng CPU thời đó hạn chế hơn bây giờ rất nhiều, nhưng tôi vẫn nhớ rõ mình đã kinh ngạc khi thấy nó làm mượt các đường cong lúc vẽ đường tự do

  • Nhóm của LeCun đã đạt độ chính xác trên 99% trong nhận dạng chữ số viết tay vào năm 1995, và việc đó khá giống với nhận diện hình dạng
    Dù vậy, làm cho nó chạy nhẹ và nhanh trong trình duyệt vẫn là một thành tựu. Sau cùng, điều quan trọng luôn là trải nghiệm người dùng
  • Apple Newton năm 1993 cũng xem tính năng này là chức năng cốt lõi, dù chỉ dùng bộ xử lý ARM 20MHz
    https://en.wikipedia.org/wiki/MessagePad#User_interface
  • Làm mượt là một tác vụ riêng: đơn giản hóa đường cong Bézier bằng cách loại bỏ các điểm gần như trùng lặp
    Chẳng hạn khi bạn vẽ một đường gần như thẳng mà sinh ra 100 điểm điều khiển, phần mềm sẽ rút gọn chúng xuống còn khoảng 4 điểm
  • Có lẽ ban đầu nó nhận sự kiện chuột rồi vẽ bằng cách nối các sự kiện đó bằng các đoạn thẳng. Trên phần cứng thập niên 1990, vẽ đường thẳng rất nhanh, và vì cần vẽ nhanh nên chắc là cần cách đó
    Khi vẽ xong, có lẽ nó dùng chính các điểm đó làm đầu vào rồi vẽ lại đường bằng thuật toán đường cong spline
    Bản thân việc tính toán để vẽ spline không hẳn khó hơn nhiều, nhưng điểm quan trọng là chỉ cần thêm một điểm ở cuối thì một phần của đường đã vẽ sẽ thay đổi
    Khi đó phải vẽ lại mọi thứ nằm phía sau đường đó, nên chi phí tính toán lớn và khó bảo đảm chắc chắn xử lý được ở 60fps

• Bài viết hay và công việc này cũng rất thú vị
  Có lẽ là gu của số ít, nhưng kỳ lạ là tôi lại thấy thích cảm giác nguệch ngoạc rung tay của nét vẽ tay hơn đồ họa vector trơn tru
  Tất nhiên tùy ngữ cảnh mà sở thích có thể thay đổi, nên bản thân tính năng này vẫn rất tuyệt. Trong một thế giới tràn ngập sự hoàn hảo nhân tạo, có điều gì đó khiến ta bị cuốn hút một cách bản năng bởi kết quả vẽ tay thật

• Nếu triển khai tính năng kiểu này, tôi mong nhất định phải làm cho nó có thể chọn bật/tắt, và khi đang bật thì phải hiển thị thật rõ
  Công cụ mà tỏ ra quá thông minh nhưng lại không đoán đúng hoàn toàn thì thật sự rất bực. Tôi cũng từng mắc lỗi như vậy

• Vài năm trước làn sóng máy học/AI gần đây, có một trò chơi trẻ con rất thích tên là Scribblenauts, có thể biến những nét nguệch ngoạc rất thô thành đủ loại vật thể một cách đáng kinh ngạc
  Tôi không biết họ làm thế nào, nhưng bản thân tôi cũng thán phục, còn bọn trẻ thì xem như phép màu
  https://store.steampowered.com/app/218680/Scribblenauts_Unli...

  • Tôi đã chơi thử và thật sự rất ấn tượng. Nếu nhớ không nhầm thì hình như cũng từng có bản iOS

• Ước gì cái này là mã nguồn mở
  Gần đây đang có nhiều mô hình kích thước nhỏ xuất hiện. Mô hình này là 250KB, và trong các tác vụ đơn giản như tinh chỉnh mô hình lớn, tôi từng thấy có mô hình chỉ khoảng 50KB
  Tôi mong đến lúc các mô hình nhỏ thực sự có thể được dùng lại trong những ứng dụng hữu ích

• Ngôi sao năm cánh và ngôi sao lấp lánh không phải là cùng một thứ. Đây có phải là ví dụ về underfitting không?

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