{"id":20229061,"url":"https://github.com/bladealex9848/ui2html","last_synced_at":"2026-04-13T05:47:08.452Z","repository":{"id":251381809,"uuid":"837251738","full_name":"bladealex9848/UI2HTML","owner":"bladealex9848","description":"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.","archived":false,"fork":false,"pushed_at":"2024-08-02T21:04:08.000Z","size":176,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T23:45:03.908Z","etag":null,"topics":["gpt-4o-mini","openai-api","python","streamlit","ui","ui-design"],"latest_commit_sha":null,"homepage":"https://ui2html.streamlit.app/","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bladealex9848.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-02T14:34:09.000Z","updated_at":"2024-08-08T14:47:16.000Z","dependencies_parsed_at":"2024-11-14T07:34:11.384Z","dependency_job_id":"d9f22a28-c3f4-4fb5-8655-299d2f97b609","html_url":"https://github.com/bladealex9848/UI2HTML","commit_stats":null,"previous_names":["bladealex9848/ui2htm"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladealex9848%2FUI2HTML","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladealex9848%2FUI2HTML/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladealex9848%2FUI2HTML/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bladealex9848%2FUI2HTML/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bladealex9848","download_url":"https://codeload.github.com/bladealex9848/UI2HTML/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241670165,"owners_count":20000344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gpt-4o-mini","openai-api","python","streamlit","ui","ui-design"],"created_at":"2024-11-14T07:34:07.646Z","updated_at":"2025-12-31T01:03:19.671Z","avatar_url":"https://github.com/bladealex9848.png","language":"Python","readme":"![Logo de UI2HTML](https://github.com/bladealex9848/UI2HTM/blob/main/logo.jpg)\n\n# UI2HTML: Convierte Interfaces en Código 🖼️➡️💻\n\n[![Version](https://img.shields.io/badge/versión-1.0.0-darkgreen.svg)](https://github.com/bladealex9848/UI2HTML)\n[![Python](https://img.shields.io/badge/Python-3.8%2B-blue.svg)](https://www.python.org/)\n[![Streamlit](https://img.shields.io/badge/Streamlit-1.30.0-ff4b4b.svg)](https://streamlit.io/)\n[![OpenAI](https://img.shields.io/badge/OpenAI_API-v2-00C244.svg)](https://platform.openai.com/)\n[![Licencia](https://img.shields.io/badge/Licencia-MIT-yellow.svg)](LICENSE)\n[![Visitantes](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Fbladealex9848%2FUI2HTML\u0026label=Visitantes\u0026labelColor=%235d5d5d\u0026countColor=%231e7ebf\u0026style=flat)](https://github.com/bladealex9848/UI2HTML)\n\n## 📝 Descripción\n\nUI2HTML 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.\n\n## 🚀 Introducción\n\nCon 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:\n\n- API de OpenAI\n- Streamlit\n\n## 🔍 ¿Cómo funciona?\n\n1. **Carga una imagen** de la interfaz de usuario.\n2. La imagen se **analiza y se describe detalladamente** utilizando modelos avanzados de visión.\n3. Se genera un **código HTML** basado en la descripción de la interfaz de usuario.\n4. El código HTML se **refina para mejorar la precisión** y la capacidad de respuesta.\n5. Se utiliza una **plantilla base con librerías modernas** para garantizar un resultado visualmente atractivo.\n\n## ✨ Funcionalidades\n\n- **🖼️ Convertir imagen a HTML**: Transforma imágenes de interfaces de usuario en código HTML funcional.\n- **🔄 Refinamiento de HTML**: Mejora la precisión y la capacidad de respuesta del código HTML generado.\n- **💾 Descarga de HTML**: Permite descargar el código HTML generado para su uso inmediato.\n- **🎨 Plantillas modernas**: Utiliza librerías como Tailwind CSS, DaisyUI y otras para resultados visualmente atractivos.\n- **📱 Diseño responsive**: Genera código que se adapta a diferentes tamaños de pantalla.\n\n## 🛠️ Instalación\n\n1. Asegúrate de tener **Python 3.8 o superior** instalado en tu máquina.\n2. Clona este repositorio usando:\n   ```bash\n   git clone https://github.com/bladealex9848/UI2HTML.git\n   ```\n3. Navega al directorio del proyecto:\n   ```bash\n   cd UI2HTML\n   ```\n4. Instala las dependencias necesarias:\n   ```bash\n   pip install -r requirements.txt\n   ```\n5. Configura tu clave API de OpenAI en un archivo `.env` o como variable de entorno:\n   ```\n   OPENAI_API_KEY=tu_clave_api_aqui\n   ```\n6. Ejecuta la aplicación:\n   ```bash\n   streamlit run app.py\n   ```\n\n## 📋 Uso\n\n### Convertir imagen a HTML\n\n1. **Carga una imagen** de la interfaz de usuario que deseas convertir.\n2. Selecciona el **framework CSS** que prefieras utilizar (Bootstrap, Tailwind, etc.).\n3. Haz clic en **\"Convertir en código HTML\"**.\n4. Espera a que se genere y refine el código HTML.\n5. **Previsualiza** el resultado en tiempo real.\n6. **Descarga** el archivo HTML generado para usarlo en tu proyecto.\n\n### Personalización\n\n- Puedes **ajustar los parámetros** de generación para obtener resultados más precisos.\n- Selecciona entre diferentes **plantillas base** según el tipo de interfaz que estés convirtiendo.\n- **Edita el código generado** directamente en la aplicación si necesitas hacer ajustes.\n\n## 👥 Contribuciones\n\nSi deseas contribuir a este proyecto, por favor:\n\n1. Realiza un **fork** de este repositorio\n2. Crea una **nueva rama** para tu funcionalidad (`git checkout -b feature/nueva-funcionalidad`)\n3. Realiza tus cambios y **commitea** (`git commit -am 'Añade nueva funcionalidad'`)\n4. **Sube** los cambios a tu fork (`git push origin feature/nueva-funcionalidad`)\n5. Crea un nuevo **Pull Request**\n\n## 📂 Estructura del Proyecto\n\n```\nUI2HTML/\n├── app.py                     # Archivo principal de la aplicación\n├── requirements.txt           # Dependencias del proyecto\n├── template-modern.html       # Plantilla base con Tailwind y DaisyUI\n├── template-chat.html         # Plantilla para interfaces de chat\n├── template-dashboard.html    # Plantilla para interfaces de dashboard\n├── README.md                  # Documentación principal\n├── LICENSE                    # Licencia del proyecto\n├── CHANGELOG.md               # Registro de cambios\n├── .gitignore                 # Archivos ignorados por git\n└── Demos/                     # Ejemplos de interfaces convertidas\n    ├── README.md              # Documentación de los ejemplos\n    └── ChatGPT-Clone/         # Ejemplo de clon de ChatGPT\n        ├── original.txt       # Descripción de la imagen original\n        ├── generado.html      # Código HTML generado\n        └── README.md          # Documentación del ejemplo\n```\n\n## 📚 Proyectos Relacionados\n\nSi te gusta este proyecto, también puedes estar interesado en:\n\n### Expert Nexus 🧠🔄\n\n[Expert Nexus](https://github.com/bladealex9848/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.\n\n## 📄 Licencia\n\nEste proyecto está bajo la licencia MIT. Consulta el archivo `LICENSE` para obtener más detalles.\n\n## 👤 Autor\n\nCreado con ❤️ por [Alexander Oviedo Fadul](https://github.com/bladealex9848)\n\n[GitHub](https://github.com/bladealex9848) | [Website](https://alexanderoviedofadul.dev) | [LinkedIn](https://www.linkedin.com/in/alexander-oviedo-fadul/) | [Instagram](https://www.instagram.com/alexander.oviedo.fadul) | [Twitter](https://twitter.com/alexanderofadul) | [Facebook](https://www.facebook.com/alexanderof/) | [WhatsApp](https://api.whatsapp.com/send?phone=573015930519\u0026text=Hola%20!Quiero%20conversar%20contigo!%20)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbladealex9848%2Fui2html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbladealex9848%2Fui2html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbladealex9848%2Fui2html/lists"}