draw a ui

dibujo-a-ui

Esta es una aplicación que usa TLDRAW y la API de visión GPT-4 para generar HTML en función de una estructura de alambre que dibuja.

Actualmente estoy trabajando en una versión alojada de Draw-A-Ui. Puede unirse a la lista de espera en sorth-a-ui.com. El núcleo siempre será de código abierto y estará disponible aquí.

Esto funciona simplemente tomando el lienzo actual SVG, convirtiéndolo en un PNG y enviando ese PNG a GPT-4-Vision con instrucciones para devolver un solo archivo HTML con Tailwind.

Descargo de responsabilidad: esta es una demostración y no está destinada al uso de producción. No tiene ninguna autenticación, por lo que te romperás si lo implementa.

Empezando

Esta es una aplicación Next.js. Para comenzar, ejecute los siguientes comandos en el directorio raíz del proyecto. Necesitará una tecla API OpenAI con acceso a la API de visión GPT-4.

Nota Esto usa Next.js 14 y requiere una versión de node superior a 18.17. Lea más aquí.

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

Abra http: // localhost: 3000 con su navegador para ver el resultado.