Introduction
- Les utilisateurs de Canva peuvent exprimer leur créativité en ajoutant à leurs designs des dessins personnalisés via le nouvel outil Draw.
- Comme les traits ou formes simples tracés par l’utilisateur à la souris ou au trackpad peuvent manquer de précision, la fonctionnalité Shape Assist a été développée pour y remédier.
- Shape Assist utilise le machine learning (ML) pour transformer des gribouillages imprécis en graphismes vectoriels lisses.
Considérations de conception
- Lors du développement de la fonctionnalité, la latence de classification a été considérée comme la priorité absolue afin de garantir une expérience utilisateur rapide et précise.
- La solution a été déployée dans le navigateur afin d’offrir une reconnaissance des formes et une assistance au dessin en temps réel.
- Aucune connexion Internet n’est nécessaire, ce qui garantit l’accessibilité même hors ligne.
Collecte de données
- La base d’un modèle de ML performant repose sur la collecte de données, et des données de dessin ont été recueillies auprès d’utilisateurs variés.
- Les traits dessinés par les utilisateurs ont été enregistrés sous forme de séquences de coordonnées x et y, ce qui a permis de constituer un jeu de données incluant différents styles et variations.
- En enregistrant les données à l’aide de coordonnées, une flexibilité a été assurée pour le prétraitement des données et l’application de diverses techniques d’augmentation de données.
Conception et entraînement du modèle
- Un modèle de ML capable de s’exécuter côté client a été conçu sans nuire au temps de chargement de la page.
- Au lieu d’un CNN, des expérimentations ont été menées avec un RNN utilisant directement les coordonnées afin de minimiser la taille du modèle.
- Divers hyperparamètres ont été ajustés pour identifier les caractéristiques optimales du modèle.
- Le nombre de points représentant chaque forme a été fixé afin de tenir compte des différences de vitesse de dessin entre les utilisateurs.
- Une version modifiée de l’algorithme Ramer-Douglas-Peucker (RDP) a été utilisée pour réduire le nombre de points tout en conservant les détails importants.
Considérations de déploiement
- Le modèle est petit et simple sur le plan computationnel, ce qui permet d’exécuter tout le traitement dans l’application cliente.
- La fonctionnalité fonctionne entièrement hors ligne, sans nécessiter de connexion à un serveur.
Architecture du modèle
- Le modèle se compose d’une architecture incluant une couche LSTM et un Gemm (couche dense ou entièrement connectée).
- Le modèle pèse environ 250 kilo-octets et a été implémenté directement en Typescript pour une exécution côté client.
Remplacement des formes
- Une fois la forme dessinée par l’utilisateur déterminée, une approche de template matching est utilisée afin d’aligner précisément la représentation vectorielle et le tracé de l’utilisateur.
Conclusion
- L’équipe est très heureuse de partager la fonctionnalité Shape Assist avec le monde entier et espère qu’elle plaira autant aux designers professionnels qu’aux amateurs de gribouillage.
L’avis de GN⁺
Le point le plus important de cet article est que Canva a développé la fonctionnalité Shape Assist, qui utilise un modèle de machine learning exécuté dans le navigateur pour reconnaître avec précision les formes dessinées par l’utilisateur et les convertir en graphismes vectoriels lisses. Cette fonctionnalité fournit un retour immédiat à l’utilisateur et peut être utilisée sans connexion Internet, ce qui améliore l’accessibilité. Cet article est intéressant parce qu’il montre comment les avancées technologiques peuvent rendre le travail créatif plus simple et plus agréable.
1 commentaires
Avis Hacker News
Au lieu d’un RNN, l’algorithme "$1 unistroke recognizer" est une solution simple et élégante au problème
Les ingénieurs d’ASML, de TSMC et d’autres entreprises fabriquent des puces plus petites et plus performantes en tirant chaque jour des lasers sur du plomb liquide pour produire une lumière à des longueurs d’onde extrêmement courtes
Même pour tracer une ligne droite avec une souris ou un trackpad, il est facile d’obtenir une forme irrégulière
Intérêt pour la bibliothèque utilisée par Canva pour tracer les lignes
Étonnement devant la fonction de lissage des courbes lors du dessin de courbes à main levée dans Macromedia Flash il y a plus de 20 ans
Mention du développement d’une variante de l’algorithme Ramer-Douglas-Peucker (RDP)
Une version "gribouillage tremblant" à l’aspect dessiné à la main peut être plus attrayante que des graphiques vectoriels lisses
Lors de l’implémentation de ce type de fonctionnalité, il faut laisser le choix à l’utilisateur et indiquer clairement quand elle est activée
Le modèle a été entraîné à reconnaître 9 formes prédéfinies
On aimerait que cette fonctionnalité soit open source