Experto HTML5 - Generador Inteligente 🚀

Experto HTML5 es una potente herramienta de autoría asistida por Inteligencia Artificial diseñada para crear aplicaciones web modernas, interactivas y visualmente impresionantes en segundos. Utiliza tecnología de lenguaje natural y generación de imágenes por IA para transformar ideas en código HTML5, CSS3 y JavaScript funcional.

✨ Características Principales

Generación Multi-Modelo: Soporte para diversos modelos de IA como Gemini, OpenAI, DeepSeek y Mistral.
Motor de Imágenes IA: Integración transparente con APIs de generación de imágenes (Pollinations/Flux) mediante atributos descriptivos.
Vista Previa en Vivo: Entorno seguro de ejecución para previsualizar las aplicaciones generadas al instante.
Exportación Versátil: Descarga proyectos como archivos HTML autónomos (con imágenes convertidas a Base64) o exporta la conversación completa a PDF.
Diseño Premium: Interfaz moderna basada en Glassmorphism, animaciones fluidas y una experiencia de usuario de alta gama.

🔮 El Prompt Mágico: Tu Guía de Aprendizaje

Una de las funcionalidades más destacadas de este proyecto es el Prompt Mágico (accesible mediante el icono de la varita ✨). Esta herramienta no solo genera ideas, sino que sirve como un recurso de enseñanza y aprendizaje.

¿Cómo funciona?

Al hacer clic en el botón de la varita, el sistema selecciona aleatoriamente uno de los 35 escenarios prediseñados y lo coloca en el área de texto. Estos prompts han sido redactados en lenguaje natural, evitando tecnicismos complejos, para que cualquier usuario pueda entender cómo describir una idea a la IA de manera efectiva.

📝 Cómo Personalizarlo

El sistema es completamente flexible. Puedes editar, añadir o eliminar prompts para adaptar la herramienta a tus necesidades específicas (por ejemplo, para un aula de clase o un nicho de diseño particular).

Para editar los prompts mágicos:

Abre el archivo script.js.
Busca la constante magicPrompts.
Modifica los textos existentes o añade nuevos elementos al array.

// Ejemplo de edición en script.js
const magicPrompts = [
    "Crea una página de inicio para una cafetería con un diseño elegante...",
    "Diseña un cuestionario sobre historia...",
    // Agrega aquí tu propio prompt personalizado en lenguaje natural
];

La IA está entrenada para interpretar estas descripciones naturales y convertirlas automáticamente en código técnico profesional (usando atributos como data-image-prompt internamente).

🛠️ Estructura del Proyecto

El proyecto está organizado de forma modular para facilitar su mantenimiento:

index.html: La estructura principal de la aplicación y la interfaz de chat.
styles.css: El sistema de diseño, variables de color y animaciones.
script.js: La lógica central, integración con APIs y motor de ejecución.

🚀 Instalación y Uso

Clona o descarga este repositorio.
Asegúrate de que los tres archivos (index.html, styles.css, script.js) estén en la misma carpeta.
Abre index.html en cualquier navegador web moderno.
¡Empieza a crear!

👨‍💻 Créditos

Diseñado por Juan Guillermo Rivera Berrío con tecnología Gemini y asistencia de Antigravity. Imágenes generadas mediante la API de Pollinations.

Este proyecto es parte de la iniciativa de herramientas de autoría inteligente para el desarrollo de contenidos educativos interactivos.