Logo de Keley Consulting
Menu burger à 3 traitsCroix blanche de fermeture du menu
EXPERTISE + LIBERTÉ
= OPINIONS
Filtrer

Sketch2code, l’IA de Microsoft qui convertit les dessins en code HTML

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.

Schéma explicatif du fonctionnement de Sketch2code
Schéma explicatif du fonctionnement de Sketch2code

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 :

  1. L’utilisateur télécharge sur l’interface https://sketch2code.azurewebsites.net/ un wireframe ou une maquette dessinée à la main.
  2. 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.
  3. 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.
  4. 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é.

Test de l’interface Sketch2Code de Microsoft
Test de l’interface Sketch2Code de Microsoft

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.

Le sujet vous intéresse ? Découvrez nos compétences dans le domaine :

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/

Commentaires

Cédric Roche

Consultant chez Keley Consulting

Passionné d'innovation et et de technologie, Cédric a rejoint Keley en 2017. Il a notamment accompagné Orange ou encore Système U.

Partager cet article :

Vous avez un projet digital ? Nous pouvons vous aider à définir et concrétiser rapidement votre stratégie.

Contactez-nous
Filtrer

Inscrivez-vous à la newsletter Keley

Recevez tous les mois nos paroles d'experts et l'actualité du digital dans notre newsletter.

Merci ! Votre message a bien été envoyé.
Désolé ! Votre message n'a pu être envoyé.

La collecte des informations demandées est nécessaire au traitement de votre demande par Keley, unique entité habilitée au traitement. Elle vous permettra de recevoir chaque mois la newsletter Keley, mais aussi de recevoir en avant-première des invitations à nos événements et de donner votre avis lors d'enquêtes. Pour tout autre type de contact, votre consentement sera au préalable recueilli. Vous disposez d’un droit d’accès, de rectification, d’opposition et de suppression des données vous concernant. Pour l'exercer, merci de nous en faire la demande par email à  communication@keley-consulting.com.