• Skip to main content
  • Skip to header right navigation
  • Skip to after header navigation
  • Skip to site footer
  • Facebook
  • Twitter
  • Instagram
Lesjeudis

Blog Les Jeudis

Actualité Informatique et Digital

  • Annonces
    • Par région
    • Par métier
    • Par technologies
    • Par entreprise
    • Fiche métiers
  • Entreprises
  • News
  • Se connecter
  • Déposer CV
  • Recruteur
    • Connexion Recruteurs
    • Employeurs
    • Trouvez des CVs
    • Postez des offres
  • Categories du Blog
    • Développement
    • Réseaux et Systèmes
    • Digital
    • E-commerce
    • Marché de l’emploi
    • Conseils
    • Evénements
    • Design
    • Marketing
    • Interviews
    • —-
  • Annonces
    • Toutes nos offres d’emploi
    • par région
    • par métier
    • par technologies
    • par sociétés
    • Par Industries
    • Fiches Métiers
  • Entreprises
  • Tests
  • offres recommandées
  • Se connecter
  • Déposez CV
  • Employeurs
    • Connexion recruteurs
    • Employeurs
    • Trouvez des CVs
    • Postez des offres
  • Développement
  • Réseaux et Systèmes
  • Digital
  • E-commerce
  • Marché de l’emploi
  • Conseils
  • Evénements
  • Design

Pix2Code par UIzard : transformer vos images en code

24/10/2017 par Team LesLeudis

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 ?

A lire aussi :
> En savoir plus surPix2Code by UIzard
> Toutes les offres d’emploi Dev sur LesJeudis

 

Categorie: Développement, Design, Web

About Team LesLeudis

Lesjeudis est fier de compter sur une équipe multidisciplinaire de professionnels techniques et du marketing. Ensemble, nous couvrons de vastes domaines informatiques et de développement, ainsi que du marketing et du numérique. De Rails à .net, de la conception graphique à l’interface utilisateur et au référencement, vous bénéficierez de nos connaissances et de notre expertise dans chaque article que nous écrivons dans ce blog.

Previous Post:Ineat Groupe, Lille’s Digital success story
Next Post:« Plus de 100 postes de consultants IT sont proposés actuellement chez Modis »

Reader Interactions

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Sidebar

Rechercher

Nos Meilleurs Articles

Bannière Securité PHP

Découvrez 9 importantes failles de sécurité de PHP ainsi que les moyens de les corriger

Bannière Langages de Programmation

Langages de programmation les mieux payés en 2023 : Top 10

Gatsby JS

JAMstack avec Gatsby, Netlify et Netlify CMS

Modeles React JS

10 modèles React gratuits que vous pouvez utiliser pour vos projets

les couches ou layers de la blockchain

Les layers de blockchain (L0, L1, L2, L3)

bannière Ingénieur développement

Ingénieur développement

un développeur de crypto devant l'ordinateur et le globe terrestre montrant différents symboles de crypto-monnaies

Le rapport sur l’activité des développeurs crypto

Des équipes de développeurs écoutent le MOE (Maîtrise d'œuvre) et la maîtrise d’ouvrage (MOA) valide les developpements informatiques menés par la maîtrise d’œuvre

MOA MOE : Quelles sont les différences ?

bases de données et tableaux de pagination sql

Pagination SQL : problèmes et solutions

ordinateur portable pro montrant code de programmation, services cloud et des charts statistiques

Le développement web et les développeurs web

Le processus du RPA (Robotic Process Automation)

La Robotic Process automation, aux frontières du machine learning et de l’IA

la jamstack: Javascript, APIs et code markup

La promesse de la Jamstack

Categories

  • Blockchain (11)
  • Conseils (51)
  • Design (39)
  • Développement (148)
  • Digital (305)
  • Divers (6)
  • E-commerce (12)
  • Evénements (24)
  • Fiche métier (1)
  • Formation (7)
  • Interviews (36)
  • Marché de l'emploi (59)
  • Marketing (127)
  • Méthodologie (9)
  • Réseaux et Systèmes (25)
  • Web (149)

Nos Categories

Blockchain

Conseils

Méthodologies

Design

Développement 

Digital

E-commerce

Evénements

Formation

interview

Marché de l’emploi

Marketing

Réseaux et Systèmes

Website

Candidats

Employment by region

Employment by profession

Emploi par technologie

Emploi par type de contrat

Tous les emplois

Fiches métiers informatiques

Nos Services

S’inscrire

Annonces

Magazine

Salon LesJeudis

Support

Nous contacter

Vous êtes recruteur ?

A Propos

Conditions générales d’utilisation

Politique de confidentialité

Droit d’accès aux données 

Personnelles

Social

Facebook

Twitter

Linkedi

Les Jeudis

© 2021 Groupe Les Jeudis