Story Generator
Editor web de historias interactivas con IA integrada, permitiendo crear libros visuales con texto, imágenes, audio y modelos 3D.
Descripción
Story Generator es un editor visual de historias que combina poder creativo con tecnología moderna. Permite crear libros interactivos con múltiples tipos de contenido sin escribir código.
Arquitectura y tecnología
El proyecto está estructurado como un monorepo con tres paquetes: generator (editor React), reader (visualizador), y shared (tipos TypeScript y utilidades). El editor utiliza Zustand con middleware de Immer para estado inmutable, permitiendo undo/redo sin costo de rendimiento usando Zundo.
Los bloques se posicionan en porcentajes (0-100) en lugar de píxeles, permitiendo layouts responsivos. El canvas soporta selección, arrastre, redimensionamiento y rotación con snap-to-grid opcional. Los estilos de texto incluyen fuente, tamaño, color, alineación, sombras y transformaciones; las imágenes soportan filtros CSS avanzados.
Integración con IA
La generación de contenido se integra con Cohere API (texto), HuggingFace FLUX (imágenes) y ElevenLabs (text-to-speech con 8 voces diferentes). El audio generado se almacena localmente en IndexedDB como blobs, asociándose a bloques para reproducción con click.
Persistencia y exportación
Dexie.js gestiona dos tablas en IndexedDB: books (metadatos y estructura) y blobs (imágenes, audio, video). La exportación genera un ZIP con pages.json más todos los activos embebidos, permitiendo compartir libros completos.
El lector soporta dos formatos: v1 (legacy, con templates predefinidos) y v2 (posicionamiento libre). Ambos se cargan dinámicamente desde PHP con fallback.
Características
- Canvas editor WYSIWYG: Posicionamiento libre de bloques, zoom, y selección de múltiples elementos
- Bloques de contenido: Texto (Tiptap + markdown), imágenes, audio (TTS), video (YouTube/local) y modelos 3D
- Filtros visuales avanzados: Opacidad, brillo, contraste, saturación, desenfoque en imágenes
- Generación con IA: Cohere (texto), HuggingFace FLUX (imágenes), ElevenLabs TTS (8 voces)
- Undo/redo ilimitado: Zundo + Zustand con estado inmutable y debouncing automático
- Exportación ZIP: Serialización con metadatos y archivos embebidos (imágenes, audio)
- IndexedDB local: Almacenamiento persistente de libros y blobs sin servidor
- Lector integrado: Visualización de libros v1 (legacy) y v2 con soporte de temas