Giới thiệu
- Người dùng Canva có thể phát huy sự sáng tạo thông qua công cụ Draw mới để thêm các hình vẽ tùy chỉnh vào thiết kế.
- Những nét hoặc hình đơn giản do người dùng vẽ bằng chuột hoặc trackpad có thể không chính xác, vì vậy tính năng Shape Assist đã được phát triển để khắc phục điều này.
- Shape Assist sử dụng học máy (ML) để chuyển các nét vẽ nguệch ngoạc chưa ổn định thành đồ họa vector mượt mà.
Các cân nhắc trong thiết kế
- Khi phát triển tính năng, độ trễ phân loại được ưu tiên hàng đầu để đảm bảo trải nghiệm người dùng vừa nhanh vừa chính xác.
- Giải pháp được triển khai ngay trong trình duyệt để cung cấp khả năng nhận diện hình dạng và hỗ trợ vẽ theo thời gian thực.
- Không cần kết nối Internet, bảo đảm khả năng truy cập ngay cả trong môi trường ngoại tuyến.
Thu thập dữ liệu
- Nền tảng của một mô hình ML thành công nằm ở việc thu thập dữ liệu, và dữ liệu hình vẽ đã được thu thập từ nhiều người dùng khác nhau.
- Các nét do người dùng vẽ được ghi lại dưới dạng chuỗi tọa độ x và y, từ đó xây dựng bộ dữ liệu bao gồm nhiều phong cách và biến thể khác nhau.
- Việc ghi dữ liệu bằng tọa độ giúp bảo đảm tính linh hoạt cho tiền xử lý dữ liệu và áp dụng nhiều kỹ thuật tăng cường dữ liệu khác nhau.
Thiết kế và huấn luyện mô hình
- Mô hình ML được thiết kế để chạy phía client mà không gây ảnh hưởng tiêu cực đến thời gian tải trang.
- Thay vì CNN, nhóm đã thử nghiệm RNN sử dụng trực tiếp các tọa độ để giảm kích thước mô hình xuống mức tối thiểu.
- Nhiều siêu tham số đã được điều chỉnh để xác định các đặc tính tối ưu của mô hình.
- Có tính đến sự khác biệt về tốc độ vẽ của người dùng bằng cách cố định số lượng điểm biểu diễn mỗi hình.
- Thuật toán Ramer-Douglas-Peucker (RDP) được biến đổi để giảm số lượng điểm trong khi vẫn giữ lại các chi tiết quan trọng.
Các cân nhắc khi triển khai
- Mô hình nhỏ và tính toán đơn giản, nên toàn bộ quá trình xử lý có thể chạy bên trong ứng dụng client.
- Tính năng hoạt động hoàn toàn ngoại tuyến mà không cần kết nối đến máy chủ.
Kiến trúc mô hình
- Mô hình gồm một lớp LSTM và Gemm (lớp dense hoặc fully connected).
- Mô hình có kích thước khoảng 250 kilobyte và được hiện thực trực tiếp bằng Typescript để chạy trên client.
Thay thế hình dạng
- Sau khi xác định hình mà người dùng đã vẽ, nhóm sử dụng phương pháp template matching để căn chỉnh chính xác giữa biểu diễn đồ họa vector và đường vẽ của người dùng.
Kết luận
- Nhóm rất vui khi được chia sẻ tính năng Shape Assist với toàn thế giới và hy vọng cả các nhà thiết kế chuyên nghiệp lẫn những người thích vẽ nguệch ngoạc đều sẽ yêu thích tính năng này.
Ý kiến của GN⁺
Điểm quan trọng nhất của bài viết này là Canva đã phát triển tính năng Shape Assist sử dụng mô hình học máy chạy ngay trong trình duyệt để nhận diện chính xác các hình do người dùng vẽ và chuyển chúng thành đồ họa vector mượt mà. Tính năng này mang lại phản hồi tức thì cho người dùng và có thể sử dụng ngay cả khi không có kết nối Internet, từ đó nâng cao khả năng truy cập. Lý do bài viết này thú vị là vì nó cho thấy sự tiến bộ của công nghệ có thể giúp công việc sáng tạo trở nên dễ dàng và thú vị hơn như thế nào.
1 bình luận
Ý kiến Hacker News
Thay vì RNN, thuật toán "$1 unistroke recognizer" là một lời giải đơn giản và thanh nhã cho vấn đề này
Các kỹ sư tại ASML, TSMC và những nơi tương tự mỗi ngày bắn laser vào chì lỏng để tạo ra ánh sáng có bước sóng cực ngắn, từ đó làm ra những con chip nhỏ hơn và mạnh hơn
Ngay cả khi vẽ đường thẳng bằng chuột hoặc trackpad, rất dễ tạo thành hình méo mó
Quan tâm đến thư viện mà Canva dùng để vẽ nét
Ngạc nhiên trước tính năng làm mượt đường cong khi vẽ đường tự do trong Macromedia Flash hơn 20 năm trước
Nhắc đến việc phát triển một biến thể của thuật toán Ramer-Douglas-Peucker (RDP)
Phiên bản "nét nguệch ngoạc rung tay" trông như vẽ tay có thể hấp dẫn hơn đồ họa vector mượt mà
Khi triển khai những tính năng như vậy, nên cho phép người dùng lựa chọn và phải hiển thị rõ trạng thái đang bật
Huấn luyện mô hình để nhận diện 9 hình dạng được định nghĩa sẵn
Mong tính năng này là mã nguồn mở