Generador de infografías

Aplicación web estática que permite generar infografías mediante inteligencia artificial usando la API de Pollinations. Proporciona tres modos distintos de generación —Visual Educativa, Comparativa y Técnica Isométrica— cada uno con su propio prompt base, configuración de aspecto y opciones de personalización.

Modos de generación

La aplicación cuenta con tres pestañas que definen el tipo de infografía a generar:

1. Infografía Visual Educativa

Modo por defecto. Genera una infografía educativa vertical a partir de un tema y una plantilla visual.

Prompt base: Función buildFullInfographicPrompt() que construye un prompt detallado con estructura educativa: encabezado, paneles informativos (5–8 bloques), personaje experto y datos científicos.
Plantilla: Se usa la descripción textual de la plantilla (templateToPrompt) más el JSON completo de la misma al final del prompt.
Relación de aspecto: Seleccionable por el usuario (Vertical 9:16, Cuadrado 1:1, 4:3, 3:4, Panorámica 16:9).
Propósito: Campo de texto opcional para indicar la intención comunicativa (educar, persuadir, resumir, divulgar).
Estilo base: Cuando se selecciona una plantilla, se usa su descripción; adicionalmente se inyectan reglas de formato (bloques temáticos, frases cortas, viñetas, título impactante).

2. Infografía Comparativa

Genera una infografía comparativa enfrentando dos elementos bajo un tema principal.

Prompt base: Archivo comparativo.txt. Contiene una estructura completa para infografía comparativa: secciones de estilo, fondo, sujetos principales enfrentados, paneles comparativos, barra inferior de datos y sistema de color dual.
Placeholders reemplazados automáticamente:
- [tema] → se sustituye por el texto ingresado en "Tema de la infografía"
- [IMAGEN CENTRAL ELEMENTO 1] → "Elemento A"
- [IMAGEN CENTRAL ELEMENTO 2] → "Elemento B"
Plantilla: Se antepone Estilo de plantilla: {descripción} al inicio y se añade el JSON completo al final.
Relación de aspecto: Seleccionable por el usuario.
Propósito: Campo de texto opcional.

3. Infografía Técnica Isométrica

Genera una infografía técnica en perspectiva isométrica 45°, ideal para objetos, máquinas o dispositivos.

Prompt base: Archivo objetos.txt. Describe un render CGI hiperrealista con corte transversal, llamadas técnicas, leyenda de colores, dimensiones CAD, diagramas secundarios y checklist de calidad.
Placeholder: [tema] se sustituye por el texto ingresado.
Plantilla: Se antepone Estilo de plantilla: {descripción} al inicio y se añade el JSON completo al final.
Relación de aspecto: Fija en 16:9 (Panorámica). El selector aparece deshabilitado.
Propósito: Deshabilitado (no aplica para este modo).
Particularidades: El prompt exige que TODO el texto visible en la infografía esté en español, usa codificación de colores funcional (rojo=potencia, azul=datos, naranja=calor, verde= sensores) e incluye reglas estrictas de nomenclatura técnica.

Arquitectura de archivos

index.html              Interfaz principal con pestañas de 3 modos
styles.css              Estilos visuales, incluyendo barra de pestañas
script.js               Lógica completa de la aplicación
JSON.txt                Definiciones de las 50 plantillas visuales (paleta, tipografía, estilo, estructura, decoración, tono)
comparativo.txt         Prompt base para el modo Infografía Comparativa
objetos.txt             Prompt base para el modo Infografía Técnica Isométrica
modelos.txt             Instrucciones de análisis de modelos (uso interno)
images/                 Miniaturas de las plantillas (modelo1.png .. modeloN.png)
images_aippt/           Imágenes de ejemplo generadas con IA
Ejemplos/               Ejemplos adicionales (math/)
infografias_new_prompt/ Recursos adicionales (flipbook, prompt, imágenes)
README.md               Este archivo

Flujo de uso detallado

1. Configuración inicial

Abrir index.html en cualquier navegador moderno (no requiere servidor).
En la sección API Key, ingresar la clave de la API de Pollinations.
- Opcional: presionar "🔑 Obtener" para iniciar el flujo de autorización.
Seleccionar un Modelo de imagen del desplegable (se carga automáticamente desde los modelos disponibles en Pollinations).

2. Selección de modo

En la barra de pestañas justo debajo del título, elegir entre:

Infografía Visual Educativa (modo general)
Infografía Comparativa (comparación de dos elementos)
Infografía Técnica Isométrica (vista técnica en 3D isométrico)

Al cambiar de modo, se actualiza automáticamente el System prompt y se ajustan los controles habilitados/deshabilitados.

3. Elección de plantilla

En el panel izquierdo, la sección Plantilla muestra miniaturas numeradas (Modelo 1, Modelo 2, ..., Modelo N). Las imágenes se cargan desde la carpeta images/ (modelo1.png, modelo2.png, ...). Si una imagen no existe, se genera un placeholder SVG con el número de modelo.

Al hacer clic en una miniatura:

Se marca con un borde azul.
Se actualiza el System prompt para incluir la descripción textual y el JSON completo de la plantilla.

4. Campos de entrada

Tema de la infografía: texto libre. Define el asunto principal. En modo Comparativa, reemplaza [tema] y [COMPARATIVO IoT] en el prompt base.
Propósito (solo modos Educativa y Comparativa): texto libre para indicar la intención comunicativa. Se añade al System prompt como Indicar propósito: "...".
Relación de aspecto: desplegable con opciones. En modo Técnica Isométrica permanece fijo en 16:9 y deshabilitado.
System prompt (editable): área de texto que muestra el prompt completo generado. Se actualiza automáticamente al cambiar de plantilla, modo, tema, propósito o relación de aspecto. Puede editarse manualmente y copiarse con el botón "Copiar".

5. Generación de imagen

Presionar Generar imagen para enviar el System prompt a la API de Pollinations.
La imagen generada aparece en el panel derecho (Preview).
Usar Descargar imagen para guardar el resultado como PNG.

6. Idioma

Los botones Es / En permiten alternar entre español e inglés para los objetos parlantes (funcionalidad heredada, no afecta el prompt principal).

Personalización

Añadir o modificar plantillas

Editar JSON.txt. Cada plantilla sigue esta estructura:

"page_N": {
  "paleta_colores": ["#color1", "#color2", ...],
  "tipografia": {
    "principal": "Nombre tipografía",
    "secundaria": "Nombre tipografía",
    "estilo": "Descripción del estilo"
  },
  "estilo_ilustracion": "Descripción del estilo visual",
  "estructura": "Descripción del layout",
  "elementos_decorativos": ["elemento1", "elemento2"],
  "tono_visual": "Descripción del tono"
}

Modificar los prompts base

Comparativa: editar comparativo.txt o la constante DEFAULT_COMPARATIVO_PROMPT en script.js.
Técnica Isométrica: editar objetos.txt o la constante DEFAULT_OBJETOS_PROMPT en script.js.

Los valores por defecto están embebidos en script.js para garantizar funcionamiento incluso cuando el navegador no permite fetch() a archivos locales (protocolo file://).

Miniaturas

Colocar archivos PNG en images/modelo1.png, images/modelo2.png, etc., correspondientes a cada plantilla en JSON.txt.

Aspectos técnicos

API de generación: https://gen.pollinations.ai/image/ con parámetros key, model, width, height y seed.
Dimensiones por relación de aspecto:

Relación	Dimensiones
16:9	1920 × 1080
9:16 (vertical)	1152 × 2048
1:1 (cuadrado)	1024 × 1024
4:3	1024 × 768
3:4	768 × 1024

Carga de plantillas: script.js intenta cargar JSON.txt vía fetch(). Si falla (por ejemplo, en file://), usa el objeto DEFAULT_TEMPLATES embebido como respaldo.
Portapapeles: El botón "Copiar" usa navigator.clipboard.writeText() con fallback a document.execCommand('copy').

Notas

Las infografías se generan en español (el prompt base de Técnica Isométrica exige explícitamente que todo texto visible esté en castellano).
El System prompt es editable: cualquier cambio manual se conserva hasta que se modifique la plantilla, el modo o los campos de entrada.
Diseñado por Juan Guillermo Rivera Berrío.