draw a ui

Draw-a-ui

Il s'agit d'une application qui utilise TLDRAW et l'API GPT-4-Vision pour générer du HTML basé sur un wireframe que vous dessinez.

Je travaille actuellement sur une version hébergée de Draw-A-UI. Vous pouvez rejoindre la liste d'attente sur Draw-a-Ui.com. Le cœur de celui-ci sera toujours open source et disponible ici.

Cela fonctionne en prenant simplement le canevas SVG actuel, en le convertissant en PNG et en envoyant ce PNG à GPT-4-Vision avec des instructions pour renvoyer un seul fichier HTML avec Tailwind.

Avertissement: il s'agit d'une démo et n'est pas destiné à l'utilisation de la production. Il n'a pas d'autant, vous allez donc faire faillite si vous le déploiez.

Commencer

Ceci est une application suivante.js. Pour commencer, exécutez les commandes suivantes dans le répertoire racine du projet. Vous aurez besoin d'une clé API OpenAI avec accès à l'API Vision GPT-4.

Remarque Ceci utilise Next.js 14 et nécessite une version de node supérieure à 18.17. Lisez la suite ici.

 echo " OPENAI_API_KEY=sk-your-key " > .env.local
npm install
npm run dev

Ouvrez http: // localhost: 3000 avec votre navigateur pour voir le résultat.