screenshot-to-code

Source

Esta es una simple aplicación que convierte una captura de pantalla a HTML/Tailwind CSS. Utiliza GPT-4 Vision para generar el código y DALL-E 3 para generar imágenes de aspecto similar.

Empezando

La aplicación tiene un frontend React/Vite y un backend FastAPI. Necesitarás una clave API OpenAI con acceso a la API GPT-4 Vision.

Ejecuta el backend (yo uso Poetry para la gestión de paquetes - pip install poetry si no lo tienes):

cd backend
echo "OPENAI_API_KEY=sk-tu-clave" > .env
instalar poetry
shell poetry
poetry run uvicorn main:app --reload --port 7000

Ejecuta el frontend

cd frontend
yarn
yarn dev

Abre http://localhost:5173 para utilizar la aplicación. Si prefieres ejecutar el backend en un puerto diferente, actualiza VITE_WS_BACKEND_URL en frontend/.env.local.

Versión alojada

🆕 Pruébalo aquí (trae tu propia llave OpenAI - tu llave debe tener acceso a GPT-4 Vision. Vea la sección FAQ para más detalles). O consulta Getting Started para instrucciones de instalación local.