Este proyecto utiliza Next.js para construir una aplicación web que genera código fuente a partir de imágenes utilizando la API de OpenAI con el nuevo modelo GPT-4 Vision. Está inspirado en el proyecto de código abierto "screenshot-to-code".
Generación de Código desde Imágenes en local o desde una URL: Utiliza el poder del modelo GPT-4 Vision de OpenAI para transformar imágenes de código en texto funcional.
Interfaz de Usuario Intuitiva: Desarrollado con Next.js, la aplicación proporciona una interfaz de usuario fácil de usar para cargar imágenes y obtener resultados de código.
- Clona el repositorio:
git clone https://github.com/leox182/image-to-code.git
cd image-to-code
- Instala las dependencias:
npm install or pnpm install
- Configura las variables de entorno: Crea un archivo .env.local en la raíz del proyecto y agrega tu clave de API de OpenAI:
OPENAI_API_KEY=[AQUI_TU_API_KEY]
- Inicia la aplicación:
npm run dev or pnpm run dev
- Accede a la aplicación en tu navegador: http://localhost:3000
- Sube una imagen que contenga elementos de UI o pega una URL y espera a que la magia suceda.
- La generación de codigo funciona mejor usando la combinación de HTML vanilla + Tailwindcss (por defecto)
- Funciona mejor generando componentes especificos, por ejemplo un boton y sus variantes
¡Las contribuciones son bienvenidas! Si encuentras algún problema o tienes una mejora, por favor crea un problema o envía una solicitud de extracción.
Este proyecto se basa en el trabajo del proyecto de código abierto "screenshot-to-code". Agradecemos a la comunidad por sus contribuciones.
Este proyecto está bajo la Licencia MIT - consulta el archivo LICENSE.md para obtener más detalles.