• 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

 

Category: 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

Un programmeur en t-shirt 'code master' fait semblant d'utiliser des langages informatiques sur un panneau interactif

Comment se former au métier de développeur informatique ?

un développeur des jeux video

Comment trouver le job de ses rêves dans le gaming ?

illustration montre trois interfaces (UI) de dévelopeur front-end, mobile, et back-end: le développeur full stack

Le développeur full stack, un métier à tout faire

un développeur travaille sur son ordinateur

Comment devenir Développeur frontend – une feuille de route

outils de développement React JS

Top 10 des meilleurs outils de développement React de 2022

React.js vs Vue.js

React vs Vue – Qui est le meilleur ?

banniere pour l'article 'Formation développeur Web'

Quelle formation pour devenir développeur web ?

Les systèmes embarqués, l'Internet of Things - banniere

Les systèmes embarqués

smartphone avec l'appli de CB et les textes: iOS, Android et windows

Développer une application mobile pas à pas

Le data scientist et le data analyst

Data Scientist ou Data Analyst ? On vous explique tout !

Les couches de design mobile, UX et UI

UI et UX Design : quelle différence ?

15 moteurs de recherche alternatifs à Google

Categories

  • Blockchain (9)
  • Conseils (52)
  • Design (40)
  • Développement (136)
  • Digital (305)
  • Divers (5)
  • E-commerce (12)
  • Evénements (26)
  • Fiche métier (1)
  • Formation (6)
  • Interviews (38)
  • Marché de l'emploi (60)
  • Marketing (128)
  • Méthodologie (8)
  • Réseaux et Systèmes (23)
  • Web (148)

Nos Categories

Blockchain

Conseils

Méthodologies

Design

Développement 

Digital

E-commerce

Evénements

Formation

Interviews

Marché de l’emploi

Marketing

Réseaux et Systèmes

Web

Candidats

Emploi par région

Emploi par métier

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

Nos Categories

Blockchain

Conseils

Contenu Top

Design

Digital

E-commerce

Evénements

Interviews

Marché de l’emploi

Marketing

Réseaux et Systèmes

SEO

Web

Candidats

Emploi par région

Emploi par métier

Emploi par technologie

Emploi par industrie

Emploi par type de contrat

Tous les emplois

Fiches métiers informatiques

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

Nos Services

S’inscrire

Annonces

Évènements

Tests

Magazine

Salon LesJeudis

Les Jeudis

© 2021 Groupe Les Jeudis