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

Une application pour convertir des captures d’écran en code

• Une application simple qui convertit des captures d’écran en HTML/Tailwind CSS
• Génère du code avec GPT-4 Vision et crée des images similaires avec DALL-E 3
• Voir la section d’exemples ci-dessous pour une démo

Mises à jour

• Ajout d’un réglage pour désactiver la génération d’images DALL-E lorsqu’elle n’est pas nécessaire
• Possibilité de consulter directement le code dans l’application
• Possibilité d’indiquer à l’IA de mettre à jour le code si elle applique mal les styles ou oublie des sections

Pour commencer

• Application composée d’un frontend React/Vite et d’un backend FastAPI
• Nécessite une clé API OpenAI avec accès à l’API GPT-4 Vision
• Les instructions pour lancer le backend et le frontend sont fournies, et l’application peut être utilisée en local

Foire aux questions (FAQ)

• Fournit des solutions en cas d’erreurs lors de la configuration du backend
• Explique comment obtenir une clé API OpenAI incluant le modèle GPT4 Vision
• Indique comment envoyer des retours, demander des fonctionnalités et signaler des bugs

Exemples

• Fournit des exemples d’originaux et de reproductions de pages comme le NYTimes, Instagram et Hacker News

Version hébergée

• Vous devez disposer d’une clé OpenAI et avoir accès à GPT-4 Vision
• Les instructions d’installation locale sont disponibles dans la section Pour commencer

L’avis de GN⁺

Cette application est un outil innovant qui convertit des captures d’écran en code web, en s’appuyant avant tout sur des technologies d’IA récentes comme GPT-4 Vision et DALL-E 3. Elle est intéressante et attrayante, car elle permet aux développeurs web et aux designers de gagner du temps et de se concentrer davantage sur le travail créatif. De plus, la possibilité pour l’utilisateur de donner directement des instructions à l’IA pour modifier le code améliore l’expérience utilisateur et contribue à accroître la précision de l’IA.

[GN⁺]

Commentaires Hacker News

• Un avis souligne que cette technologie semble magique : même si l’idée qu’un réseau de neurones modélise un ensemble de fonctions qui associent une entrée à une sortie est compréhensible, il est étonnant que GPT parvienne à modéliser le processus qui convertit une image en tokens de texte HTML+Tailwind, puis que le navigateur les rende.

  Exprime son étonnement face au fait que GPT modélise la conversion de l’intensité des pixels d’une image en tokens de texte HTML et Tailwind, puis le processus par lequel le navigateur interprète et affiche ces tokens.

• Une question se demande si l’on peut considérer cet outil comme un compilateur de diagrammes, et s’il pourrait faire partie d’un pipeline de build transformant en HTML/CSS/JS les artefacts générés par des outils comme Sketch ou Figma.

  Réflexion sur la possibilité que l’outil joue le rôle de compilateur de diagrammes et sur son usage potentiel dans un pipeline de build.

• Un exemple de prompt est donné pour construire une application monopage à partir d’une capture d’écran de page web fournie par l’utilisateur avec Tailwind, HTML et JS, en insistant sur la reproduction fidèle du design.

  Exemple de prompt demandant une reproduction précise du design d’une page web avec Tailwind, HTML et JS.

• Un avis personnel estime qu’une meilleure direction pourrait exister que le defensive prompting, mais que le simple fait que cette technologie fonctionne reste en soi impressionnant.

  Point de vue sceptique sur le defensive prompting, tout en admirant le fait que la technologie fonctionne.

• Une personne mentionne une vidéo de recherche sur YouTube affirmant que l’ajout de la formule « c’est très important pour ma carrière » améliore la qualité des résultats, et estime que cette phrase améliore les sorties dans diverses tâches.

  Mention de l’effet d’une formule particulière sur l’amélioration de la qualité des résultats.

• Un commentaire explique que cette technologie élargit l’éventail des problèmes désormais solvables, ce qui amène à se demander quoi construire et à repenser la manière d’aborder et de résoudre les problèmes.

  Réflexion sur l’évolution des méthodes de résolution de problèmes et sur une nouvelle manière d’identifier les problèmes avec les progrès technologiques.

• Un avis note qu’il est impressionnant d’accomplir cette tâche avec un modèle généraliste, tout en ajoutant qu’il serait facile de générer des données pour un apprentissage supervisé.

  Remarque sur la facilité de générer des données pour un apprentissage supervisé.

• Une information indique qu’une version hébergée via Pico sera proposée via une page GitHub, accompagnée d’une question sur les raisons du choix de Pico.

  Information sur le projet de proposer un service hébergé via Pico et question sur les raisons de ce choix.

• Un commentaire félicite la simplicité et l’élégance de la démonstration en temps réel du site généré à l’aide de iframe et de srcdoc.

  Éloge de la simplicité et de l’élégance de l’affichage en direct de la démo du site généré.

• Un avis suggère que, si l’on veut copier un site web existant, utiliser Httrack permettrait d’obtenir un résultat plus proche tout en économisant les coûts de l’API GPT.

  Opinion sur l’efficacité de l’usage de Httrack pour copier un site web existant.

• Une inquiétude est exprimée : cette technologie pourrait accélérer considérablement la création de sites de phishing.

  Préoccupation concernant l’accélération de la création de sites de phishing.

• Un commentaire estime que cet outil est parfait pour répondre aux demandes constamment changeantes des chefs de projet, et demande s’il fonctionne aussi avec des consignes vagues comme « Make it pop ».

  Question sur l’adéquation de l’outil aux changements fréquents de demandes et sur son fonctionnement face à des instructions ambiguës.