Dashboard Interactivo con IA y Lector de PDF y Excel

Esta aplicación web es una herramienta de análisis que procesa documentos en formato PDF y archivos Excel (.xlsx, .xls y .csv) y genera dashboards interactivos personalizados mediante inteligencia artificial (Pollinations AI) y la librería de visualización Apache ECharts. Permite estructurar, visualizar y analizar información cuantitativa y cualitativa sin necesidad de bases de datos intermedias, funcionando de manera local y directa en el navegador.


Características Principales

Procesamiento Local de PDF: Extracción de texto estructurado, detección automática de tablas (por alineación de coordenadas) y filtrado de métricas (porcentajes, divisas) mediante expresiones regulares. Procesamiento Local de Excel: Lectura de libros Excel en el navegador mediante SheetJS, incluyendo todas sus hojas, encabezados, filas y métricas numéricas relevantes para el análisis. Generación de Contenido por IA: Conexión con los servicios de chat de Pollinations AI. Permite seleccionar diferentes modelos de lenguaje y flujos de autorización mediante clave de API (BYOP - Bring Your Own Key). 15 Estilos Visuales Intercambiables: Adaptación visual del dashboard mediante clases CSS que modifican tipografías, bordes, sombras y el aspecto general. Los estilos incluyen: 1. Moderno: Tarjetas suaves y tipografía limpia. 2. Corporativo: Estructura seria, esquinas rectas y títulos de estilo serif. 3. Creativo: Formas redondeadas amplias y colores más llamativos. 4. Minimalista: Líneas finas sin sombras y mucho aire. 5. Glassmorphism: Paneles translúcidos sobre fondos de gradiente. 6. Dark Neón: Interfaz oscura ideal para entornos de monitoreo. 7. Brutalista: Bordes negros gruesos y sombras duras sin redondeo. 8. Gradiente Vibrante: Encabezados y KPIs con esquemas de alto contraste. 9. Editorial / Revista: Estilo de prensa escrita y líneas clásicas. 10. Terminal / Tech: Estética de consola retro de tipo monoespaciado. 11. Infográfico Colorido: Diseño alegre con bordes discontinuos y colores cálidos. 12. Retro / Vintage: Apariencia de manual clásico sobre tonos crema. 13. Pastel Brutalista: Variación suave de brutalismo con paletas de color pastel. 14. Cyberpunk: Oscuridad con acentos de color rosa y azul neón. 15. Ecológico / Orgánico: Tonos verdes y formas que simulan hojas de naturaleza. Visualizaciones de Apache ECharts: Soporte para múltiples tipos de gráficos (barras, líneas, circulares, gauge, treemap, heatmap, sankey, scatter/bubble, sunburst) que se configuran automáticamente a partir del análisis del PDF. Interactividad de Gráficas: Tooltips al pasar el puntero para consultar categorías, series y valores exactos, resaltado visual del elemento activo y variaciones de color por categoría o serie. Zoom de Gráficos: Cada visualización cuenta con un botón para expandirla a pantalla completa (⛶) en un modal dedicado, facilitando la lectura de conjuntos de datos densos. Filtros Dinámicos por Etiquetas: Segmentación inmediata de KPIs, gráficos, hallazgos, riesgos, oportunidades y recomendaciones mediante etiquetas contextuales generadas por la IA. Exportación Independiente (Standalone): Opción para descargar el dashboard resultante en un único archivo .html autónomo que conserva todos los estilos seleccionados, las librerías CDN correspondientes, y las capacidades de filtrado y zoom interactivo de gráficos sin requerir conexión con el backend de generación.


Tecnologías Utilizadas

ECharts (v5.5.0): Para la renderización y gestión de la interactividad de los gráficos en el dashboard. PDF.js (v2.11.338): Para la lectura, estructuración y extracción del texto del PDF cargado en el navegador del usuario. SheetJS (v0.18.5): Para leer archivos Excel y convertir sus hojas en texto y tablas estructuradas. Pollinations AI (Chat Completions): Servicio utilizado para el procesamiento del contenido y la posterior estructuración de los datos en formato JSON apto para el dashboard.


Estructura del Proyecto

La aplicación se compone de un único archivo (index.html) que integra de manera autocontenida:

  1. HTML5: Marcador estructural para el formulario de configuración (zona de carga de archivos, selección de modelos, idioma y estilos) y la plantilla para el dashboard final.
  2. CSS3: Estilos responsivos, efectos de transición, animaciones de entrada progresiva y la definición de las variables personalizadas de estilo de las 15 maquetaciones disponibles.
  3. JavaScript (ES6):
    • Lógica para procesar la subida del PDF y de archivos Excel.
    • Comunicación secuencial con la API de IA (extracción en el paso 1 y estructuración del dashboard en el paso 2).
    • Instanciación, redimensión y destrucción de instancias de gráficos ECharts.
    • Sistemas de filtrado activo de elementos mediante tags.
    • Generador dinámico de plantillas para la exportación independiente del archivo HTML.

Instrucciones de Uso

Requisitos previos

Para ejecutar la aplicación, solo requiere de un navegador web moderno (Chrome, Firefox, Edge, Safari, etc.) con conexión a internet para descargar las librerías que actúan como CDN.

Pasos para usar localmente

  1. Guarde el archivo index.html en su ordenador.
  2. Haga doble clic sobre el archivo para abrirlo directamente en su navegador habitual (o sírvalo usando un servidor web local sencillo, por ejemplo, python -m http.server 8000).
  3. Establezca su configuración:
    • Seleccionar PDF: Cargue un documento de texto en formato PDF. El lector mostrará información de procesamiento en pantalla.
    • Seleccionar Excel: Cargue un libro .xlsx, .xls o .csv. Se procesan sus hojas localmente y se muestran las hojas y filas detectadas.
    • Idioma: Elija entre Español, Inglés o Francés.
    • Estilo Visual: Seleccione uno de los 15 temas que prefiera.
    • Modelo de Texto: Elija el modelo de inteligencia artificial de su preferencia (por ejemplo, openai u otras alternativas provistas por Pollinations).
    • API Key: Introduzca su clave de Pollinations AI. Si no dispone de una, puede pulsar el botón 🔑 Obtener para realizar el flujo de autorización.
  4. Haga clic en Generar dashboard. El sistema procesará el contenido del PDF o Excel seleccionado y creará el informe interactivo.
  5. Una vez generado, puede cambiar la paleta de colores sobre la marcha, pasar el puntero sobre las barras y demás elementos para consultar sus valores, expandir gráficos a pantalla completa o utilizar los filtros.
  6. Si desea conservar el resultado, haga clic en el botón Descargar Dashboard para almacenar una copia HTML interactiva localmente.