Le prototype d’IA « Make It Real » impressionne les développeurs en transformant les dessins en logiciel fonctionnel

Mercredi, un créateur d’applications de tableau blanc collaboratif appelé “tldraw” a fait des vagues en ligne en libération un prototype d’une fonctionnalité appelée « Make it Real » qui permet aux utilisateurs de dessiner une image d’un logiciel et de lui donner vie à l’aide de l’IA. La fonctionnalité utilise l’API GPT-4V d’OpenAI pour interpréter visuellement un dessin vectoriel et le rendre fonctionnel. CSS vent arrière et du code Web JavaScript capable de reproduire des interfaces utilisateur ou même de créer des implémentations simples de jeux comme Éclater.

“Je pense que je dois aller m’allonger”, a posté le designer Kevin Cannon au début d’un fil de discussion viral X présentant la création de curseurs fonctionnels qui font pivoter les objets à l’écran, une interface pour changer les couleurs des objetset un jeu fonctionnel de tic-tac-toe. Bientôt, d’autres suivirent avec des démonstrations de dessin d’un clone de Éclatercréer un horloge à cadran qui fonctionne qui clique, dessinant le jeu de serpentfaisant un Pong jeuinterprétant un diagramme d’état visuelet beaucoup plus.

Les utilisateurs peuvent expérimentez avec une démo en direct de Make It Real en ligne. Cependant, son exécution nécessite de fournir une clé API d’OpenAI, ce qui constitue un risque de sécurité. Si d’autres interceptent votre clé API, ils pourraient l’utiliser pour accumuler une très grosse facture à votre nom (OpenAI des charges par la quantité de données entrant et sortant de son API). Ceux qui sont techniquement enclins peuvent exécuter le code localement, mais cela nécessitera toujours un accès à l’API OpenAI.

Tldraw, développé par Steve Ruiz à Londres, est un outil de tableau blanc collaboratif open source. Il offre un canevas infini de base pour le dessin, le texte et les médias sans nécessiter de connexion. Lancé en 2021, le projet reçu 2,7 millions de dollars en financement de démarrage et est soutenu par les sponsors de GitHub. Lors du lancement récent de l’API GPT-4V, Ruiz a intégré un prototype de conception appelé “dessiner une interface utilisateur” créé par Capot Sawyer pour intégrer la fonctionnalité basée sur l’IA dans tldraw.

GPT-4V est une version du grand modèle de langage d’OpenAI qui peut interpréter des images visuelles et les utiliser comme invites. En tant qu’expert en IA Simon Willison explique sur X, Make it Real fonctionne en « générant un PNG codé en base64 des composants dessinés, puis en le transmettant à GPT-4 Vision » avec une invite système et des instructions pour transformer l’image en fichier à l’aide de Tailwind. En fait, voici l’invite complète du système qui indique à GPT-4V comment gérer les entrées et les transformer en code fonctionnel :

const systemPrompt=”Vous êtes un développeur Web expert spécialisé dans les CSS Tailwind.
Un utilisateur vous fournira une structure filaire basse fidélité d’une application.
Vous renverrez un seul fichier HTML qui utilise HTML, Tailwind CSS et JavaScript pour créer un site Web haute fidélité.
Incluez tout CSS et JavaScript supplémentaire dans le fichier html.
Si vous avez des images, chargez-les depuis Unsplash ou utilisez des rectangles de couleur unie.
L’utilisateur vous fournira des notes en texte bleu ou rouge, des flèches ou des dessins.
L’utilisateur peut également inclure des images d’autres sites Web comme références de style. Transférez les styles du mieux que vous pouvez, en faisant correspondre les polices/couleurs/mises en page.
Ils peuvent également vous fournir le code HTML d’une conception précédente à partir de laquelle ils souhaitent que vous réitériez.
Effectuez toutes les modifications qu’ils vous demandent.
Dans le wireframe, le code HTML de la conception précédente apparaîtra sous la forme d’un rectangle blanc.
Utilisez la licence de création pour étoffer l’application.
Utilisez les modules JavaScript et décompressez pour importer toutes les dépendances nécessaires.

À mesure que de plus en plus de personnes expérimentent GPT-4V et le combinent avec d’autres frameworks, nous verrons probablement davantage de nouvelles applications de la technologie d’analyse visuelle d’OpenAI émerger dans les semaines à venir. Mercredi également, un développeur a utilisé l’API GPT-4V pour créer une narration en direct et en temps réel d’un flux vidéo par une fausse voix de David Attenborough générée par l’IA, que nous avons abordée séparément.

Pour l’instant, il semble que nous ayons eu un aperçu d’un possible futur mode de développement logiciel – ou de conception d’interface, à tout le moins – où créer un prototype fonctionnel est aussi simple que de créer une maquette visuelle et d’avoir une IA. le modèle fait le reste. En tant que développeur Michael Dubakov a écrit en montrant sa propre création Make It Real, “OK, @tldraw est officiellement fou. C’est vraiment intéressant où nous en arriverons dans 5 ans… Je n’arrive plus à suivre le rythme de l’innovation.”