Show HN : screenshot-to-code - convertir des captures d’écran en code HTML propre avec GPT Vision (outil OSS)

• Un outil qui utilise l’IA pour convertir des captures d’écran, maquettes, designs Figma et enregistrements d’écran en code propre et fonctionnel
• Les stacks pris en charge sont HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap et Ionic + Tailwind
• Il prend aussi en charge la conversion d’enregistrements d’écran montrant le comportement d’un site web en prototype fonctionnel
• Les modèles d’IA par défaut sont Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6 et Claude Opus 4.8, et la génération d’images utilise z-image-turbo basé sur Replicate
• L’exécution en local nécessite des clés API ainsi qu’une configuration backend/frontend, et l’architecture de l’application repose sur un frontend React/Vite et un backend FastAPI
  • Au moins une clé de fournisseur de modèle parmi OpenAI, Anthropic ou Gemini est requise
  • Gemini extrait les vrais logos et images depuis les captures d’écran, et est nécessaire pour le mode vidéo
  • Replicate active l’édition d’images, la suppression d’arrière-plan et la génération d’images basée sur Replicate
• Plus vous ajoutez de clés, plus l’outil sélectionne automatiquement des combinaisons de modèles plus puissantes selon les variantes ; avec une seule clé, seuls les modèles de ce fournisseur sont utilisés
• La fonctionnalité optionnelle de screenshot preview effectue un rendu visuel de la page générée dans un navigateur headless après l’installation de Chromium ; si Chromium n’est pas installé, cette étape est ignorée
• Les modes d’exécution pris en charge sont le développement local, l’utilisation de l’application hébergée et l’exécution via Docker ; avec Docker, l’application fonctionne sur http://localhost:5173

[GN⁺]

Avis de Hacker News

• Ça ressemble vraiment à de la magie, et je ne sais pas où le placer dans mon modèle mental de la façon dont le calcul fonctionne.
  J’avais compris qu’un réseau de neurones est un approximateur universel de fonctions, au sens où il modélise un ensemble de fonctions qui associent des entrées à des sorties dans un domaine donné ; des exemples comme MNIST me semblent conceptuellement compréhensibles.
  Mais ici, je me demande si l’apprentissage général de GPT implémente une correspondance de valeurs allant des intensités de pixels vers des tokens texte HTML+Tailwind, dont l’interprétation et le rendu par le navigateur produisent une approximation de l’image d’entrée.
  Si c’est le cas, GPT modélise non seulement la transformation pixels→HTML/CSS, mais aussi la manière dont un navigateur rend du HTML/CSS. Je peux accepter qu’une telle correspondance existe, mais je trouve stupéfiant que GPT l’ait déduite tout en écrivant aussi sur quantité d’autres sujets.
  Plus concrètement, je me demande aussi si l’on peut voir ce type d’outil comme un compilateur de diagrammes, et s’il pourrait un jour faire partie d’un pipeline de build qui prend des livrables Sketch/Figma et produit du HTML/CSS/JS.

  • Pour l’expliquer à ma façon, un LLM est en fait un espace latent et un moyen de l’explorer.
    L’espace latent est un espace à n dimensions où les idées et les concepts sont d’autant plus proches qu’ils se ressemblent ; cet agencement étant construit à partir des données d’entraînement pendant l’apprentissage, le processus d’entraînement revient à créer l’espace latent.
    On peut imaginer une grille 2D où « house » et « mansion » sont proches, tandis que « growling » se trouve dans un tout autre coin. Un espace latent comme celui de GPT-4 est similaire, mais avec des centaines voire des milliers de dimensions, et cette différence d’échelle permet d’organiser utilement une masse énorme de connaissances.
    Pour revenir à la lecture d’images, les données d’entraînement contenaient des images de pages web et le code correspondant, et ce code a indiqué au processus d’apprentissage où placer les paires code-image. Les labels et les légendes permettent aussi de placer les images dans l’espace latent, comme du texte.
    Donc, si l’on donne à GPT-4 l’image d’un nouveau site web et qu’on lui demande le HTML correspondant, il peut placer cette image dans l’espace latent et récupérer le HTML correspondant situé à proximité.
  • L’expression approximateur universel de fonctions signifie seulement qu’un réseau de neurones multicouche peut approximer n’importe quelle fonction continue bornée avec la précision souhaitée.
    Mais elle ne dit rien sur la possibilité de l’entraîner ni sur l’architecture nécessaire, qui pourrait être irréaliste par sa taille.
    L’algorithme d’apprentissage utilisé, la rétropropagation par descente de gradient stochastique, n’est pas un apprenant universel et ne garantit pas de trouver le minimum global.
  • Le processus est plus simple. GPT lit l’image et en produit une description complète, puis l’utilisateur utilise cette description pour construire un prompt demandant une implémentation Tailwind.
    Cela semble aller directement vers un prototype exécutable, en sautant l’étape Sketch/Figma.
  • Ce genre de curiosité est rafraîchissant, après des mois à ne voir que des querelles sémantiques sans intérêt.
    Le point de vue selon lequel « on peut ajuster n’importe quelle fonction » est correct, mais il ne dit pas si l’on peut vraiment le faire avec des ressources finies ; en soi, je ne le trouve donc pas très utile.
    Ce qui est étonnant aujourd’hui, ce n’est pas l’approximateur universel qui existe depuis longtemps, mais le fait qu’il approxime aussi bien des concepts abstraits, et la réponse tient à l’échelle des données.
    Il existe une vision selon laquelle la compression est l’intelligence, et ces modèles peuvent être vus comme de bons compresseurs. Pendant l’entraînement, les poids ont une taille fixe et sont bien plus petits que les données à ajuster ; si l’objectif est de reconstruire le texte original, c’est-à-dire de prédire le token suivant, il n’y a pas d’autre moyen que de très bien compresser les données.
    Plus on est intelligent, mieux on prédit et compresse ; et si l’on est forcé à compresser, on est en pratique forcé d’acquérir de l’intelligence. C’est un peu comme un examen : on peut mémoriser les réponses, mais s’il y a des milliers de questions et qu’on ne peut pas tout apprendre par cœur, la meilleure stratégie est d’apprendre la matière et de déduire les réponses pendant l’épreuve.
    Cette dualité compression/intelligence est controversée chez ceux qui contestent la capacité de généralisation des LLM, mais c’est actuellement mon modèle mental, et je ne l’ai pas encore réfuté.
    Si l’on adopte cette perspective, les capacités multimodales relèvent plutôt d’un problème d’ingénierie. Je ne sais pas exactement comment GPT-4V fonctionne en interne, mais on peut l’inférer à partir de la recherche publique sur le multimodal.
    Avec des paires composées d’une image et d’un texte décrivant cette image, on tokenise/embarque l’image comme on le fait pour le texte. Comme avec un ViT (Visual Transformer), on peut transformer l’image en caractéristiques visuelles par patchs afin d’obtenir une longue séquence.
    Si l’on fournit cet embedding à un LLM préentraîné et qu’on le force à prédire le texte descriptif de l’image, il n’a pas d’autre choix que d’acquérir une compréhension générale des images à partir des embeddings d’images.
    Une fois qu’il est capable de comprendre les informations d’une image donnée et de les exprimer en langage naturel, il suffit de faire du tuning par instructions pour lui faire utiliser cette compréhension.
    Les modèles génératifs d’images comme Stable Diffusion fonctionnent de manière similaire : ils entraînent un modèle contrastif comme CLIP pour rapprocher les embeddings d’images et de textes représentant le même concept, puis utilisent cette double information pour guider la génération.
    Ce qui est stupéfiant, c’est qu’ils disposent déjà de capacités à cette échelle, et qu’on peut obtenir encore plus de capacités simplement avec davantage de calcul. Si la perte finale actuelle de GPT-4 est de 1, alors s’il devient possible de la faire descendre à 0,1 d’une manière ou d’une autre, il deviendra probablement beaucoup plus compétent.
    Pour ta deuxième question, cela semble aller dans ce sens, et c’est probablement déjà possible aujourd’hui.
  • Si le fait que GPT l’ait déduit te surprend, il suffit de penser au nombre de dimensions dont on parle et à la vitesse de calcul.

• L’essentiel est ici : https://github.com/abi/screenshot-to-code/blob/main/backend/...
  Le prompt demande d’agir comme un expert Tailwind au service de l’utilisateur et, à partir d’une capture d’écran, de créer une application monopage en Tailwind, HTML et JS.
  Il contient des consignes comme faire correspondre précisément la couleur de fond, la couleur du texte, la taille des polices, les paddings, les marges, les bordures, etc., reprendre tel quel le texte de la capture, « écrire tout le code », respecter le nombre d’éléments répétés, ne pas remplacer par des commentaires, utiliser des images placehold.co et mettre une description détaillée dans alt.
  Tailwind peut être chargé via https://cdn.tailwindcss.com, ainsi que Google Fonts et Font Awesome ; il est demandé de ne renvoyer que le code complet à l’intérieur des balises, sans clôtures de code Markdown.
  Personnellement, je ne pense pas que le prompting défensif soit la voie à suivre, mais le fait que ça marche est vraiment impressionnant. On a l’impression que ce dont je rêvais ado est désormais possible avec relativement peu d’efforts.

  • Les ordinateurs fonctionnent enfin comme nous l’avons toujours cru :
    ils suivent les ordres de manière instable, créent des bugs, et on les répare en leur criant dessus.
  • Je déteste à quel point c’est devenu naturel de crier sur GPT en majuscules. Maintenant qu’on a même 128k tokens, j’ai juste envie qu’il fasse le boulot et donne la réponse.
    Si je vois encore une fois « c’est un défi complexe », je crois que je vais craquer. Parfois, un modèle moins « paresseux » est préférable, même s’il n’a que 60 % des performances. Pour lui faire utiliser les 40 % restants de ses capacités, il faut ajouter du prompt engineering, et ça donne moins l’impression d’une limite technique que d’un affaiblissement volontaire.
    Cela dit, la demande reste difficile pour les concurrents, donc pour l’instant OpenAI gagne.
    Bien sûr, c’est toujours incroyablement cool et utile ; si une concurrence apparaît en réussissant vraiment au lieu de seulement se plaindre, les prochaines années seront intéressantes.
  • Je ne savais pas que les formulations qui menacent les LLM marchaient aussi bien :D
  • Je me demande si ça fonctionnerait mieux en commençant par lancer un outil d’identification de stack technique, puis en adaptant le prompt à cette technologie au lieu de partir systématiquement sur Tailwind.

• Ce serait bien d’ajouter « bien réussir cela est très important pour ma carrière ».
  Je ne le retrouve pas maintenant, mais d’après une vidéo de recherche sur YouTube, la qualité des sorties s’améliorait nettement sur plusieurs tâches.

  • « Vous êtes un expert qui réfléchit étape par étape à l’importance de cette tâche pour ma carrière. »
  • C’est assez drôle, et tout ce qui touche à l’IA continue de surprendre. En cherchant vite fait, je suis tombé sur ceci : https://www.businessinsider.com/chatgpt-llm-ai-responds-bett...
    Selon l’étude, les prompts contenant un langage émotionnel ont entraîné globalement une amélioration de 8 % des performances sur des tâches comme « transformer une phrase en langage formel » ou « trouver les caractéristiques communes d’objets donnés ».

• Je ne sais plus comment réfléchir à ce qu’il faut construire maintenant.
  Je ne veux absolument pas dénigrer ce projet, et je suis reconnaissant que le code source soit publié, mais on a désormais toute une famille de problèmes qui semblent assez faciles à résoudre, au point de se demander : « pourquoi s’embêter ? »
  Il va falloir recalibrer la formulation des problèmes, à la fois sur ce qui mérite d’être résolu et sur la manière de le résoudre.

  • Si la sortie est assez bonne, ne pas avoir à écrire tout le HTML à la main permet de gagner du temps.
    Si ce genre d’outil peut produire du « code assez bon » qui ne nécessite qu’un peu de finition, c’est un gros gain de temps.
    S’il sort juste du code en vrac, c’est moins utile.
  • Il suffit de construire quelque chose qui résout un problème pénible ou intéressant. Créer du nouveau, et pousser l’état actuel des choses un peu plus vers quelque chose de sensé, équilibré et meilleur.
    Les technologues ont tendance à se focaliser excessivement sur les outils qu’ils utilisent. Je ne sais pas combien de fois j’ai vu des projets « hello world » vides et parfaitement banals mis en vitrine simplement parce qu’ils forçaient l’assemblage de Framework A avec Toolkit B ; c’est vraiment ennuyeux.
    Les technologies basées sur les LLM sont difficiles dans ce contexte parce qu’elles obligent à repenser les possibilités elles-mêmes. Si l’outil est généraliste, produire une simple vitrine n’a pas grand intérêt.

• Ce qui est étonnant, bien sûr, c’est que cela fonctionne avec un modèle généraliste, mais générer des données d’apprentissage supervisé pour cette tâche semble assez facile.
  Générer du HTML → le rendre et prendre une capture d’écran → utiliser ces données à rebours pour l’entraînement.

• La page GitHub indique qu’une version hébergée sera proposée via Pico, et je me demande pourquoi Pico a été choisi.
  Je viens de découvrir Pico grâce à cette page, et il semble que Pico ne verse que 30 % du chiffre d’affaires. C’est la moitié de la part habituelle des app stores, qui est de 60 %, et si j’ai bien lu, le paiement ne se fait que lorsqu’un utilisateur gratuit essaie l’app puis s’inscrit ; les utilisateurs déjà présents sur la plateforme qui utilisent l’app ne semblent pas être rémunérés.
  Les conditions paraissent donc bien moins bonnes que celles des plateformes traditionnelles, avec une base d’utilisateurs plus petite, d’où ma curiosité sur ce choix.

  • Je suis la personne qui a créé Pico :) Ce que je voulais dire ici, c’est que ces fonctionnalités seront intégrées à Pico.
    Et Pico est une plateforme générale de création d’apps web. La partie des 30 % du chiffre d’affaires ne concerne que les affiliés, pas les paiements intégrés aux apps. Pico ne prend pas encore en charge les paiements in-app.

• Je ne comprends pas trop l’intérêt. Si l’objectif est de copier un site web existant, pourquoi ne pas utiliser Httrack ?
  Le site d’origine sera toujours plus ressemblant, et on économise le coût de l’API GPT. Là où cette technique brille, c’est pour passer d’un croquis à un site web.

  • On n’est pas obligé de lui fournir un site web existant ; on peut sans doute lui donner une capture d’écran ou un design.
  • Réécrire l’interface à partir de zéro est mieux que ce que fait Httrack.

• J’ai vraiment aimé la manière dont la démo du site généré s’affiche immédiatement pendant sa génération, dans un iframe avec srcdoc.
  Simple et élégant.

  • C’est plus amusant que d’attendre une minute que l’IA ait terminé sans aucun retour.

• Si l’on fait abstraction des détails d’implémentation de l’« IA », cela revient à générer du HTML dans le même sens que convertir une image raster en SVG qui aura un rendu médiocre si on l’agrandit et fera dessiner et remplir au moteur de rendu des lignes inutiles.
  Autrement dit, le résultat ne semble pas assez propre pour être confié à un développeur web. Celui-ci devra probablement presque tout réécrire, à part la structure de haut niveau la plus évidente, pour laquelle il n’a de toute façon pas besoin d’outils avancés et où un plugin de snippets dans un éditeur de texte fait mieux l’affaire.
  Une grande partie du développement web n’est même pas visible. L’accessibilité est une métadonnée qu’on ne peut pas déduire d’une capture d’écran, et le CSS responsive nécessiterait sans doute une vidéo contenant absolument tous les comportements, animations, etc.
  JavaScript semble quasiment impossible à déduire, quelle que soit la quantité de reconnaissance d’images utilisée.
  Ne vaudrait-il pas mieux copier directement le HTML réel depuis les outils de développement ?

• Ça va probablement accélérer fortement la création de sites de phishing.

  • J’ai peut-être mal compris, mais je ne vois pas en quoi ce serait plus rapide que d’utiliser directement le HTML et le CSS du site original.