Transformer un dessin ou un croquis en une réelle interface web sans compétences techniques, est-ce désormais possible ? C’est en tout cas la promesse de Sketch2code, le service online de l’IA de Microsoft qui convertit des dessins en code HTML. Est-ce un gadget ? Est-ce une révolution des relations entre designer et développeurs ? Nous avons testé l’outil pour vous.
Sketch2Code : du croquis au code HTML
Le processus de conception d’un service web ou d’une application commence usuellement par le partage d’idées entre les concepteurs sur un « white board ». Une fois le concept validé, il est généralement traduit manuellement par des développeurs en un wireframe HTML fonctionnel. Cette étape prend souvent du temps et demande beaucoup d’efforts aux équipes de développement.
Émanent de ce constat, les équipes de Microsoft se sont donc penchées sur la simplification de cette étape grâce à l’IA. Sketch2code met ainsi à disposition d’un service de reconnaissance visuelle basé sur la combinaison des API Custom Vision et Computer Vision pour la détection d'objets, et OCR (Optical Character Recognition) pour la reconnaissance de l'écriture manuscrite. De cette façon, Sketch2code permet de générer du code HTML directement à partir d'une image dessinée à la main.
Fonctionnement de l’Intelligence Artificielle
L’API Custom Vision entraîne des modèles prédictifs pour détecter les différents objets du dessin, puis utilise la reconnaissance de texte pour extraire le texte manuscrit dans la conception. En combinant l'objet et le texte, il peut générer des extraits HTML. Le modèle de vision personnalisé de Microsoft a été formé avec des images de différentes conceptions manuscrites balisant les informations des éléments HTML les plus courants tels que les boutons, les zones de texte et les images. Un service de vision par ordinateur permet d’identifier le texte manuscrit dans un élément de conception.
Le stockage de l’ensemble des éléments est centralisé dans Blob Azure (stockage Cloud de Microsoft) : toutes les étapes impliquées dans le processus de génération de du fichier HTML y sont stockées, y compris l'image d'origine, les résultats de prédiction et les informations de regroupement de disposition. La fonction d’AI Orchestrator sert de point d'entrée dans le backend qui coordonne le processus de génération du code HTML en interagissant avec l’ensemble des services. L’application Web Azure permet d’activer le téléchargement des résultats et de générer le fichier HTML.
Retour sur l’interface Sketch2Code
L’interface utilisateur est épurée et ergonomique. Microsoft a fait le choix de la simplicité au travers de son outil, l’affordance de l’interface est entièrement respectée.
Les étapes de génération du fichier HTML sont les suivantes :
- L’utilisateur télécharge sur l’interface https://sketch2code.azurewebsites.net/ un wireframe ou une maquette dessinée à la main.
- Les informations spatiales de tous les objets des éléments prédits sont utilisées par un algorithme de mise en page pour générer une structure qui va héberger l’ensemble des éléments.
- La génération du code HTML utilise toutes les informations qui lui sont données et génère un code de balisage HTML reflétant le résultat le plus proche de la maquette téléchargée initialement.
- Le temps de la génération du code dépend de la simplicité ou non de la conception. Une fois cela fait, l'utilisateur peut télécharger le code HTML généré.
Grâce aux algorithmes de prédiction, le service détermine les résultats des éléments en combinant les structures, les textes et les objets du dessin puis il génère un fichier HTML en fonction du seuil de probabilité de chaque élément.
Sketch2Code : l’application miracle ?
Sketch2Code constitue une véritable innovation technologique puisque le service combine plusieurs outils d’IA et qu’il répond à un besoin latent de la part des équipes de conception et des équipes métiers. Cependant, après différents tests réalisés, le service est capable de générer des balises HTML simples (boutons, étiquettes et zones de texte) mais il a dû mal à identifier correctement les zones de textes manuscrites (cf. illustration ci-dessus).
On est donc encore loin de l’outil miracle. Et l’avenir des designers est encore dégagés. L’outil semble plutôt convenir aux entreprises qui ont des petites équipes, pluridisciplinaires de la conception au développement et qui souhaite réaliser des petits projets en interne. Ce qui ne correspond pas forcément à la cible habituelle de Microsoft, qui vise avant tout les grands groupes avec des outils puissants mais chers – rappelons que Sketch2Code est gratuit.
Cet effort technologique est donc plus à ranger du côté de la stratégie de vulgarisation et de mises à disposition d’outils de conception/productivité de Microsoft. L’entreprise a en effet pris le virage du low-code et du no-code et tend à offrir aux équipes métiers la possibilité de développer des services ou des applications sans connaissances techniques. La plateforme Power Apps reste aujourd’hui le plus bel étendard low-code de Microsoft, mais les évolutions de Sketch2Code sont à suivre, afin de voir si à moyen terme, il sera encore utile de savoir écrire du HTML.
Sources :
31/01/2020 : https://siecledigital.fr/2020/01/31/sketch2code-microsoft-croquis-hmtl/
10/01/2020 : https://analyticsindiamag.com/whiteboard-to-html-how-sketch2code-reduces-need-to-cod
30/05/2019 : https://github.com/microsoft/ailab/blob/master/Sketch2Code/README.md
https://www.microsoft.com/en-us/ai/ai-lab-sketch2code
https://www.groundai.com/project/sketch2code-generating-a-website-from-a-paper-m
https://powerapps.microsoft.com/fr-fr/
