📄 Generador de Páginas Web Interactivas desde PDF

Aplicación web avanzada que transforma cualquier documento PDF (informes técnicos, artículos científicos, libros o presentaciones) en una página web interactiva completa, estructurada y visualmente atractiva, enriquecida con análisis en profundidad, métricas, cuestionario interactivo, glosario, navegación temática e ilustraciones generadas por Inteligencia Artificial.

🌟 Características Principales

1. Transformación Exhaustiva y Estructurada

A diferencia de los resúmenes genéricos o fragmentados, esta aplicación analiza todo el documento y genera una experiencia digital completa:

Resumen Ejecutivo: Síntesis profunda con los antecedentes, tesis principal y alcance del documento.
Panel de Métricas Clave: Indicadores cuantitativos extraídos del PDF (número de páginas, palabras, tiempo estimado de lectura y estadísticas numéricas relevantes).
Gráficos SVG y barras de progreso: Hasta dos comparativas generadas desde cifras del documento, sin dependencias de visualización externas.
Matriz de análisis opcional: Síntesis visual de fortalezas, riesgos, retos y soluciones cuando el contenido lo permite.
Hallazgos y Destacados (Key Insights): Tarjetas temáticas con iconos y etiquetas que destacan las conclusiones cruciales.
Desarrollo Temático por Capítulos: Artículos extensos con párrafos detallados, citas destacadas (blockquotes), listas de análisis y conclusiones clave por sección.
Test de Comprensión Interactivo (Quiz): Cuestionario de autoevaluación de opción múltiple con validación en tiempo real, retroalimentación explicativa y cálculo dinámico de puntuación.
Glosario de estudio: Flashcards giratorias, seguimiento del dominio de términos y definiciones emergentes enlazadas desde los capítulos.
Galería Visual e Infográfica con IA: Ilustraciones temáticas generadas a partir de prompts optimizados, con visor a pantalla completa (Lightbox) y opción de descarga directa.
Preguntas Frecuentes (FAQ): Respuestas claras a las dudas más representativas que surgen de la lectura.
Tres proveedores de IA: API Pollinations (predeterminado), Libre y OpenRouter. Al cambiar, se actualizan los catálogos de texto e imagen correspondientes.

2. Modos de Generación Flexibles

Completo & Exhaustivo: Capítulos detallados, análisis profundo, métricas, glosario y quiz interactivo.
Guía Didáctica de Estudio: Resúmenes orientados al aprendizaje, conceptos esenciales y preguntas de evaluación.
Informe Ejecutivo Visual: Enfoque en indicadores, artículos dinámicos e infografías de impacto.

3. Sistema de Diseño y 8 Estilos Visuales en Vivo

Incluye un selector de temas dinámico que adapta instantáneamente la tipografía, paletas de color y contrastes:

Moderno & Tecnológico: Interfaz limpia en tonos azul zafiro y pizarra con micro-animaciones.
Editorial / Revista: Tipografía serif clásica, tonalidades cálidas de papel y acentos terracota.
Glassmorphism Pulido: Efecto de cristal translúcido con desenfoque de fondo (backdrop-filter).
Dark Mode Futurista: Fondo oscuro de alto contraste con acentos neón azul y violeta.
Brutalismo Neo: Bordes negros marcados, sombras sólidas de desplazamiento y estilo directo.
Cyberpunk Neón: Atmósfera nocturna de ciencia ficción con resplandores cian y magenta.
Ecológico / Orgánico: Paleta natural verde bosque, salvia y piedra cálida.
Vibrante & Creativo: Tonos enérgicos naranja coral, melocotón y púrpura.

4. Interactividad de Lectura y Navegación

Barra de herramientas superior fija (Sticky Toolbar): Búsqueda global en tiempo real que filtra al instante cualquier capítulo, término del glosario o pregunta frecuente.
Control de tamaño de texto: Botones A- y A+ para escalar el tamaño de fuente según la preferencia del lector.
Filtros temáticos por etiquetas (Chips): Permite explorar el contenido según el tema o categoría de interés.
Controles de acordeón: Botones para expandir o colapsar todos los capítulos con un solo clic.
Lectura multimodal: Síntesis de voz del resumen y de cada capítulo mediante Web Speech API.
Orientación de lectura: Progreso de desplazamiento, tabla de contenidos con ScrollSpy y modo presentación manejable con las flechas del teclado.

5. Motor de Resiliencia y Fallback Inteligente

Algoritmo de reparación y tolerancia de respuestas JSON que evita fallos por truncamiento de tokens de los modelos de lenguaje.
Motor analítico local profundo: Si no se dispone de conexión o falla la API externa, la app procesa internamente la totalidad del PDF para estructurar capítulos, glosario, estadísticas y quiz de manera autónoma, garantizando que nunca se produzca una página incompleta.

6. Exportación a HTML Autónomo e Independiente

Con el botón "📥 Descargar Web HTML"* se genera un único archivo .html autónomo, preparado para consultarse sin conexión.
Incorpora los estilos CSS y los scripts interactivos internamente para abrirse sin necesidad de servidores ni dependencias locales.
Incrusta las ilustraciones disponibles como JPEG Base64 y omite las fuentes web externas; si el proveedor de imágenes bloquea CORS, avisa qué imágenes podrían requerir conexión.
La versión descargada excluye automáticamente los logotipos institucionales animados internos (gifanimadoRedProyecto.gif) para una distribución limpia y profesional.

🛠️ Tecnologías Empleadas

HTML5 Semántico: Estructura accesible con <main>, <section>, <header>, <article>, <details> y <summary>.
CSS3 Vanilla: Variables personalizadas (CSS Custom Properties), Grid, Flexbox, desenfoque de cristal (backdrop-filter) y diseño adaptable (Mobile First y reglas @media print).
JavaScript Moderno (ES6+): Programación asíncrona, promesas, manipulación eficiente del DOM y generador de blobs descargables.
Proveedores de IA: Pollinations usa sus endpoints de chat e imagen; Libre usa el proxy de texto de Proyecto Descartes y los modelos libres de imagen; OpenRouter usa Chat Completions para texto e imágenes multimodales. Pollinations y OpenRouter requieren su propia API key; Libre no requiere clave.
Selector de Modelo por Tarjeta y Mitigación de Políticas: Cada tarjeta de imagen en la aplicación principal cuenta con su propio selector desplegable de modelo y el botón «🔄 Regenerar»* Esto permite cambiar de proveedor de IA al instante si un modelo particular (como OpenAI) rechaza la generación debido a políticas estrictas sobre temas pediátricos, clínicos o médicos, aplicando además una sanitización conceptual automática. En la página descargada estos controles de edición se eliminan, pero se conserva la interactividad de lectura.

🚀 Puesta en Marcha Local

La aplicación no requiere compilación previa ni instalación de paquetes pesados; funciona directamente sobre cualquier navegador moderno sirviendo los archivos estáticos:

Opción A: Con Python

# Navegar a la carpeta del proyecto
cd 194_Web_interactiva

# Iniciar servidor local
python -m http.server 8080

Abre tu navegador en: http://localhost:8080

Opción B: Con Node.js

npx serve -p 8080

Opción C: Extensión Live Server de VS Code

Haz clic derecho sobre index.html y selecciona "Open with Live Server".

📖 Guía Rápida de Uso

Cargar documento: Arrastra o selecciona tu archivo .pdf en la zona de carga (dropzone).
Configuración:
- Selecciona el Modo de generación (Completo, Didáctico o Ejecutivo).
- Elige el Idioma de salida (Español, Inglés o Francés).
- Escoge el Estilo visual inicial y la cantidad de imágenes deseadas.
- Selecciona el proveedor de IA. Después elige los modelos de texto e imagen que correspondan a ese proveedor.
- Introduce la clave de Pollinations u OpenRouter cuando la solicite; cada clave se guarda por separado. El proveedor Libre no requiere clave.
Generar: Pulsa el botón "⚡ Generar Página Web Interactiva" y observa la barra de progreso en vivo.
Leer y estudiar: Escucha el resumen o un capítulo con los controles de audio; gira las tarjetas del glosario y marca los conceptos que ya dominas. La voz depende de las voces disponibles en el navegador.
Navegar o presentar: Responde el cuestionario, filtra conceptos, amplía las imágenes y sigue el progreso de lectura. El índice lateral aparece en pantallas amplias. Pulsa Modo Diapositivas para presentar el resumen, los hallazgos y los capítulos con ←, → y Esc.
Descargar: Haz clic en "📥 Descargar Web HTML"*para obtener la página interactiva lista para publicar o compartir. Las imágenes se convierten a Base64 cuando el servidor permite acceso CORS; si alguna no se puede incrustar, la aplicación lo indica y esa imagen requerirá conexión.

👤 Créditos y Autoría

Diseñado por Juan Guillermo Rivera Berrío con tecnología Gemini 3.8 Flash y asistencia de Antigravity.