Mercredi, un créateur d’applications de tableau blanc collaboratif appelé « tldraw » a fait des vagues en ligne en publiant 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 grâce à l’IA. La fonctionnalité utilise l’API GPT-4V d’OpenAI pour interpréter visuellement un dessin vectoriel en code Web Tailwind CSS et JavaScript fonctionnel qui peut reproduire des interfaces utilisateur ou même 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 objets et un jeu fonctionnel de tic-tac. Tac-toe. Bientôt, d’autres suivirent avec des démonstrations de dessin d’un clone de Éclatercréer une horloge à cadran fonctionnelle qui tourne, dessiner le jeu du serpent, créer un Pong jeu, interprétation d’un tableau d’état visuel et bien plus encore.

Les utilisateurs peuvent expérimenter 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 facture en fonction de 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 a reçu 2,7 millions de dollars de 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é « draw-a-ui » créé par Sawyer Hood 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. Comme l’explique l’expert en IA Simon Willison sur X, Make it Real fonctionne en « générant un PNG encodé 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. Comme l’a écrit le développeur Michael Dubakov en présentant 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. »