Pix2Code par UIzard : transformer vos images en code | Les Jeudis

De nombreux développeurs transcrivent des interfaces utilisateur en lignes de code. Beaucoup de temps consacré à une tâche pas toujours vécue comme très épanouissante. Et si ces interfaces graphiques front-end jusqu’alors programmées manuellement pouvaient désormais être transformées automatiquement en code ? C’est en tout cas le défi que s’est fixé UIzard. Un simple screenshot UI suffit et la magie opère : le code généré automatiquement est utilisable tel quel. Ce genre d’inventions impensables hier (indispensables demain ?), ça n’arrive pas tous les jours et ça mérite bien un focus LesJeudis !

Le développement front-end, c’est un métier ! Et rassurez-vous, UIzard n’a pas l’intention de le supprimer ! Traduire des conceptions UI en code peut effectivement être fastidieux sans être passionnant, ce qui explique qu’elle soit jugée mûre pour l’automatisation. Mais leur invention ne se destine pas uniquement aux devs. Leur credo : “Code less, create more”. S’adressant aussi aux designers et aux développeurs, UIzard a souhaité faire en sorte que le temps de développement pour les uns, et la complexité de la tâche pour les autres, ne soit plus un frein à la création.

Pix2Code crée en fait une passerelle, notamment entre développeurs et designers UI/graphiques, afin que chacun puisse avancer dans son domaine, avec ses propres méthodes, dans l’univers de l’autre. Le développeur peut, via un simple screenshot, transformer une interface utilisateur en code, tandis que le graphiste n’est plus contraint à travailler sur tel ou tel éditeur graphique : tant qu’il y a du pixel, il y aura du code !

Comment ça marche ?

C’est essentiellement grâce à l’intelligence artificielle, et plus précisément aux progrès du deep learning, que Pix2Code a pu voir le jour. L’équipe a également énormément tiré profit de son environnement académique : en gros, ils ont profité d’un accès privilégié aux dernières recherches en la matière pour peaufiner leur outil.

Pix2Code n’a besoin que d’un screenshot d’une interface utilisateur graphique (GUI) pour fonctionner. Il entraîne une combinaison de trois réseaux d’apprentissage automatique pour pouvoir, non pas générer des images à partir d’images ou du code à partir de texte, mais bien partir d’une image à l’entrée pour aboutir à du code. Le processus se fait donc en trois étapes : le programme doit à la fois analyser l’image, comprendre ses différents composants (mise en page, boutons, icônes, etc.), mais aussi faire preuve d’intelligence sémantique, comprendre différents langages et du texte, et enfin faire le lien entre le code, le texte et les images correspondantes pour pouvoir associer l’image décomposée à une recomposition codée prête à l’emploi. Encore en mode bêta mais déjà disponible sur leur site (qui propose aussi, à des fins éducatives, une explication en vidéo du principe dans les grandes lignes ici).

Et ça marche ?

La solution, vouée en principe à devenir toujours plus performante et précise, offre déjà des résultats plutôt impressionnants ! Le code généré, s’il n’est pas vraiment compilable, fonctionne indifféremment sur iOS, Android et les interfaces Web. A ce stade précoce de la recherche, l’algorithme fonctionne avec une précision de 77%. En pratique, il faut le prendre comme un traducteur automatique linguistique et c’est pour ça qu’on aime : ça peut effectivement permettre de gagner du temps pour les développeurs qui peuvent y entrer des fichiers JPEG d’une interface conçue et produire du code qui peut ensuite être affiné et manipulé. Ca facilite également le travail de designers UI ou de graphistes possédant une connaissance moins avancée du code. Mais ça ne remplace personne, tout comme les traducteurs en ligne sont encore bien loin d’égaler des traducteurs professionnels.

La véritable inquiétude, c’est plutôt au niveau des dérives potentielles : cela pourrait largement faciliter la copie du code d’un autre site Web. Bien que l’esprit parmi les devs et programmeurs soit largement collaboratif et éthique, nombreux sont ceux qui mettent leur talent au service de clients de tous horizons, et il est à espérer qu’il ne soit pas un jour possible de “copier/coller” des sites comme on copie maintenant facilement des textes.

Quoi qu’il en soit, UIzard, qui propose avec Pix2Code sa toute première application, compte bien nourrir un maximum son outil pour en accroître la précision. Et vous, que vous inspire ce wizard du code ? Magicien ou sorcier ?