UI2HTML es una herramienta innovadora que convierte imágenes de interfaces de usuario en código HTML. Utilizando la API de OpenAI, esta aplicación analiza y describe detalladamente la interfaz de usuario y genera el código HTML correspondiente, asegurando que el diseño sea receptivo y fiel al original.

Con UI2HTML, puedes transformar imágenes de interfaces de usuario en código HTML de manera sencilla y eficiente. La aplicación utiliza la API de OpenAI para analizar y describir la interfaz de usuario, generando un código HTML preciso y estilizado con librerías modernas como Tailwind CSS, DaisyUI y otras. Para desarrollar esta aplicación necesitaremos:

• API de OpenAI
• Streamlit

1. Carga una imagen de la interfaz de usuario.
2. La imagen se analiza y se describe detalladamente utilizando modelos avanzados de visión.
3. Se genera un código HTML basado en la descripción de la interfaz de usuario.
4. El código HTML se refina para mejorar la precisión y la capacidad de respuesta.
5. Se utiliza una plantilla base con librerías modernas para garantizar un resultado visualmente atractivo.

• 🖼️ Convertir imagen a HTML: Transforma imágenes de interfaces de usuario en código HTML funcional.
• 🔄 Refinamiento de HTML: Mejora la precisión y la capacidad de respuesta del código HTML generado.
• 💾 Descarga de HTML: Permite descargar el código HTML generado para su uso inmediato.
• 🎨 Plantillas modernas: Utiliza librerías como Tailwind CSS, DaisyUI y otras para resultados visualmente atractivos.
• 📱 Diseño responsive: Genera código que se adapta a diferentes tamaños de pantalla.

1. Asegúrate de tener Python 3.8 o superior instalado en tu máquina.
2. Clona este repositorio usando:

   git clone https://github.com/bladealex9848/UI2HTML.git

3. Navega al directorio del proyecto:

   cd UI2HTML

4. Instala las dependencias necesarias:

   pip install -r requirements.txt

5. Configura tu clave API de OpenAI en un archivo .env o como variable de entorno:

   OPENAI_API_KEY=tu_clave_api_aqui
   

6. Ejecuta la aplicación:

   streamlit run app.py

1. Carga una imagen de la interfaz de usuario que deseas convertir.
2. Selecciona el framework CSS que prefieras utilizar (Bootstrap, Tailwind, etc.).
3. Haz clic en "Convertir en código HTML".
4. Espera a que se genere y refine el código HTML.
5. Previsualiza el resultado en tiempo real.
6. Descarga el archivo HTML generado para usarlo en tu proyecto.

• Puedes ajustar los parámetros de generación para obtener resultados más precisos.
• Selecciona entre diferentes plantillas base según el tipo de interfaz que estés convirtiendo.
• Edita el código generado directamente en la aplicación si necesitas hacer ajustes.

Si deseas contribuir a este proyecto, por favor:

1. Realiza un fork de este repositorio
2. Crea una nueva rama para tu funcionalidad (git checkout -b feature/nueva-funcionalidad)
3. Realiza tus cambios y commitea (git commit -am 'Añade nueva funcionalidad')
4. Sube los cambios a tu fork (git push origin feature/nueva-funcionalidad)
5. Crea un nuevo Pull Request

UI2HTML/
├── app.py                     # Archivo principal de la aplicación
├── requirements.txt           # Dependencias del proyecto
├── template-modern.html       # Plantilla base con Tailwind y DaisyUI
├── template-chat.html         # Plantilla para interfaces de chat
├── template-dashboard.html    # Plantilla para interfaces de dashboard
├── README.md                  # Documentación principal
├── LICENSE                    # Licencia del proyecto
├── CHANGELOG.md               # Registro de cambios
├── .gitignore                 # Archivos ignorados por git
└── Demos/                     # Ejemplos de interfaces convertidas
    ├── README.md              # Documentación de los ejemplos
    └── ChatGPT-Clone/         # Ejemplo de clon de ChatGPT
        ├── original.txt       # Descripción de la imagen original
        ├── generado.html      # Código HTML generado
        └── README.md          # Documentación del ejemplo

Si te gusta este proyecto, también puedes estar interesado en:

Expert Nexus es un sistema avanzado de asistentes virtuales especializados que permite cambiar entre diferentes expertos durante una misma conversación, manteniendo siempre el contexto completo.

Este proyecto está bajo la licencia MIT. Consulta el archivo LICENSE para obtener más detalles.

Creado con ❤️ por Alexander Oviedo Fadul

GitHub | Website | LinkedIn | Instagram | Twitter | Facebook | WhatsApp