Fabulador

Fabulador es una aplicación educativa para componer fábulas originales ilustradas y generar una ficha didáctica de comprensión lectora. La aplicación permite elegir el público destinatario, el estilo visual y los modelos de texto e imagen.

Funciones

• Generación de fábulas en español a partir de un tema.
• Adaptación del léxico y la complejidad para infancia, juventud o adultez.
• Generación de una ilustración coherente con los personajes de la fábula.
• Ficha didáctica con vocabulario, estructura narrativa, preguntas y propuesta de escritura.
• Cuestionario de comprensión interactivo con retroalimentación inmediata.
• Lectura en voz alta en la aplicación principal.
• Lectura en voz alta también en el HTML descargado.
• Descarga de un documento autónomo con la fábula, la imagen, la ficha y el cuestionario.
• Regeneración de la ilustración y de la ficha didáctica.
• Controles de tamaño de texto, alto contraste y lectura por voz.

Arquitectura

El proyecto tiene dos partes:

• index.html: aplicación autónoma principal. Contiene la interfaz, la lógica del navegador y la plantilla del HTML descargable.
• cliente/: cliente React alternativo para el servidor de orquestación.
• servidor/: servidor Express con rutas de catálogo, generación, moderación y control de presupuesto.
• modelo.html: aplicación de referencia para el flujo de Pollinations y la autorización de la API key.
• docs/manual-tecnico-fabulador.html: documentación técnica ampliada.

Requisitos

• Node.js 20 o posterior para el servidor.
• Un navegador moderno con fetch, ReadableStream y, para la lectura de voz, speechSynthesis.
• Una API key de Pollinations con formato plln_sk_... para utilizar los modelos desde index.html.

Uso directo

1. Abra index.html en un navegador.
2. En Ajustes avanzados, introduzca una API key de Pollinations o pulse Obtener para iniciar el flujo de autorización.
3. Escriba el tema de la fábula.
4. Seleccione el público, el estilo artístico y los modelos.
5. Pulse Componer la fábula.
6. Responda las preguntas de comprensión en la ficha.
7. Use Leer en voz alta para escuchar la fábula desde la aplicación.
8. Pulse Descargar la fábula para obtener un HTML autónomo.

La clave se guarda en localStorage del navegador para no tener que escribirla en cada composición. No introduzca una clave compartida en un equipo público y elimínela del almacenamiento del navegador cuando termine.

Pollinations

La aplicación principal usa los endpoints de Pollinations directamente desde el navegador:

• Texto: POST https://gen.pollinations.ai/v1/chat/completions.
• Imagen: https://enter.pollinations.ai/api/generate/image/....
• Autorización: https://enter.pollinations.ai/authorize.

La clave se envía en la cabecera Authorization: Bearer plln_sk_... para texto y como parámetro key para imágenes, siguiendo el flujo de modelo.html.

El campo de modelos de texto incluye openai, openai-fast, gemini-fast, gpt-5.4-mini, qwen3.7-flash, gpt-5.6-luna, llama-scout y grok. El campo de modelos de imagen incluye zimage, klein, gptimage, krea, grok-imagine, gpt-image-2, ideogram-v4-turbo y qwen-image.

Servidor Express

El servidor es una alternativa para despliegues que prefieran mantener las claves en backend. No es necesario para el flujo directo de index.html con Pollinations.

Instalación:

npm install

Configuración:

1. Copie .env.example como .env.
2. Complete las claves del proveedor que vaya a utilizar.
3. Revise ORIGENES_PERMITIDOS antes de publicar el servicio.

Arranque:

npm run inicio

El servidor escucha por defecto en http://localhost:3001 y expone:

• GET /api/catalogo
• POST /api/fabula
• GET /api/salud

Cliente React

El cliente alternativo se encuentra en cliente/.

cd cliente
npm install
npm run desarrollo

La variable VITE_API_URL permite cambiar la URL del servidor Express. Si no se define, el cliente usa http://localhost:3001.

Estilos visuales

El catálogo incluye estilos generales y estilos específicamente vinculados a la tradición de la fábula:

• Acuarela de cuento de hadas.
• Óleo clásico.
• Grabado en madera.
• Renderizado 3D animado.
• Ilustración plana vectorial.
• Arte digital cyberpunk.
• Bestiario medieval.
• Teatro de títeres.
• Litografía de cuento.
• Collage de papel.
• Cómic de fábula.
• Cerámica pintada.

Lectura en voz alta

La aplicación principal utiliza la API Web Speech del navegador. El documento descargado incorpora su propio botón Leer en voz alta, por lo que funciona sin conexión con el servidor de Fabulador después de descargarlo. El texto se divide en fragmentos encadenados para evitar el límite práctico que algunos navegadores aplican a locuciones largas.

Si el navegador no implementa speechSynthesis, el botón se desactiva y muestra un aviso. El audio depende de las voces instaladas en el sistema operativo y de las políticas del navegador.

Accesibilidad

• Foco visible en los controles.
• Mensajes de estado con aria-live.
• Botones de respuesta operables con teclado.
• Estados de respuesta correcta e incorrecta diferenciados visualmente.
• Control de tamaño de texto.
• Modo de alto contraste.
• Lectura mediante síntesis de voz.

Seguridad y costos

Una API key introducida en index.html queda disponible para el código del navegador y no debe considerarse un secreto de backend. Para producción, utilice el servidor Express o un proxy propio si necesita ocultar credenciales, aplicar límites y registrar el consumo.

La aplicación incluye moderación local, límites de tiempo y controles de presupuesto en el servidor. Revise siempre el contenido generado antes de utilizarlo en el aula.

Licencia y autoría

Fabulador se distribuye bajo licencia CC BY-NC-SA 4.0.

Autoría y diseño didáctico: José M. Fernández.

Autoría y código base: Juan Guillermo Rivera Berrío.

Investigación de arquitectura: Gemini Pro (Google).

Arquitectura y desarrollo: Claude (Anthropic).