📋 Hoja Técnica: Agente Generador de Presentaciones IA

Versión del Documento: 1.0

Fecha: 26 de Julio, 2025

Proyecto: Desarrollo de un agente PHP para la creación automática de presentaciones web interactivas utilizando la API de Google Gemini.

🎯1. Objetivo del Proyecto

Modificar el script agente_creador_presentacion.php para que genere presentaciones web interactivas y de múltiples diapositivas. El agente utilizará la API de Google Gemini para procesar texto de una base de datos, estructurarlo en un formato de presentación y enriquecerlo con elementos visuales y de contenido adicionales.

🛠️2. Componentes y Tecnologías

Capa	Componente	Descripción
Frontend	HTML5 / CSS3	Estructura y estilo base de la presentación final.
	JavaScript (ES6)	Lógica de interactividad de la presentación.
	Reveal.js	Librería principal para crear la experiencia de presentación tipo "PowerPoint".
	Font Awesome	Librería de íconos para elementos visuales.
Backend	PHP 8+	Lenguaje principal para la lógica del agente.
Backend	MySQL / MariaDB	Base de datos para almacenar la información fuente.
Servicios Externos	API Google Gemini	Servicio de IA para la generación de contenido y estructura.

🗃️3. Modificaciones a la Base de Datos

Se requiere añadir un nuevo campo a la tabla subtemas_curso para almacenar el contenido base de la presentación.

Comando SQL:

ALTER TABLE `subtemas_curso` 
ADD `contenido_presentacion` TEXT NULL DEFAULT NULL 
COMMENT 'Contenido fuente completo para la generación de presentaciones IA' 
AFTER `charla`;

🏗️4. Arquitectura del Agente (`agente_creador_presentacion.php`)

El agente funcionará como un script de backend que se invoca vía AJAX. Su flujo de trabajo ha sido rediseñado para ser modular y robusto.

4.1. Flujo de Ejecución

Recepción y Validación: Recibe un subtema_id vía $_GET. Valida que sea un entero positivo.

Recopilación de Datos: Ejecuta una consulta SQL para obtener toda la información necesaria.

-- Consulta SQL conceptual
SELECT 
    sc.titulo, 
    sc.contenido_presentacion,
    p.nombre,
    p.paterno,
    p.materno,
    p.especialidad,
    p.foto_perfil
FROM 
    subtemas_curso sc
JOIN 
    profesores p ON sc.profesor_id = p.id
WHERE 
    sc.id = ?;

Generación Secuencial de Diapositivas: Realiza múltiples llamadas a la API de Gemini, cada una con un objetivo específico, para construir las diapositivas.
Ensamblaje Final: Concatena todas las respuestas HTML de la IA dentro de la plantilla maestra de Reveal.js.
Guardado de Archivo: Guarda el archivo HTML final en la ruta: presentaciones/presentacion_subtema_{subtema_id}.html.
Respuesta JSON: Devuelve una respuesta JSON al frontend con el estado del proceso y la URL del archivo generado.

4.2. Estructura de la Presentación y Prompts

El agente seguirá esta secuencia para generar el contenido:

Diapositiva 1: Portada
(No requiere IA, se construye con datos de la BD)
Diapositiva 2: Introducción y Objetivos
Prompt para la IA: "Analiza el inicio del siguiente texto y genera una diapositiva de introducción y una lista de 3-5 objetivos de aprendizaje. Texto: [primeros 1000 caracteres de contenido_presentacion]..."
Diapositivas 3-28: Desarrollo
Prompt para la IA: "Divide el siguiente texto en [N] secciones lógicas. Para cada sección, crea 2-4 diapositivas que desarrollen el contenido. Usa listas y párrafos cortos. Para cada diapositiva de contenido, sugiere una imagen insertando una etiqueta <img> con un 'alt' text descriptivo y un 'src' con el formato 'presentacion/imagenes/{id_subtema}/imagen_diapo_X.jpg'. Texto: [contenido_presentacion completo]..."
Diapositiva ~29: Fuentes
Prompt para la IA: "Busca en el texto una sección de 'Fuentes' o 'Bibliografía' y formátéala como una diapositiva de bibliografía. Texto: [contenido_presentacion completo]..."
Diapositiva ~30: Glosario
Prompt para la IA: "Identifica 5-7 términos técnicos clave en el texto y crea una diapositiva de glosario con sus definiciones. Texto: [contenido_presentacion completo]..."
Diapositiva ~31: Resumen
Prompt para la IA: "Crea una diapositiva que resuma los puntos más importantes de todo el texto. Texto: [contenido_presentacion completo]..."
Diapositiva ~32: Cierre
(No requiere IA, es una plantilla estándar)

🎨5. Especificaciones de la Plantilla de Presentación

5.1. Librerías y Dependencias

El archivo HTML final debe incluir las siguientes dependencias desde un CDN en su <head>.

<!-- Framework Reveal.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/black.min.css" id="theme">

<!-- Iconos Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Tipografía Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

Y los scripts al final del <body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.js"></script>
<script>
    Reveal.initialize({
        hash: true,
        plugins: [] // Aquí se podrían añadir plugins de Reveal.js si se desea
    });
</script>

5.2. Estilo Visual (CSS Personalizado)

Se añadirá un bloque <style> para personalizar el tema.

Tema General: Oscuro (Tema `black` de Reveal.js).
Paleta de Colores:
- Fondo Principal: #2c3e50 (Azul oscuro).
- Texto Principal: #ecf0f1 (Blanco roto).
- Color de Acento (Títulos, Enlaces): #3498db (Azul claro).
Tipografía:
- Títulos: Montserrat, 700.
- Cuerpo de Texto: Open Sans, 400.
Cabecera con Logo: Se implementará una cabecera fija con CSS (position: fixed) en la parte superior.
- Logo Path: logo/isotipo.png.
- Alineación: Izquierda.
- Tamaño y Márgenes: Configurables.

🖼️6. Flujo de Trabajo de Imágenes (Fase 1 - Manual)

El proceso para añadir imágenes a la presentación será manual inicialmente, para garantizar control y calidad.

El agente IA generará etiquetas <img> en el HTML con una ruta predefinida.
Ejemplo de Etiqueta Generada:
<img src="presentacion/imagenes/123/imagen_diapo_5.jpg" alt="Un diagrama de flujo explicando el ciclo de vida de un proyecto.">
Tarea Manual: El administrador deberá:
1. Leer el `alt` text para entender qué imagen se necesita.
2. Crear o conseguir la imagen apropiada.
3. Subir la imagen al servidor, asegurándose de que la ruta y el nombre del archivo coincidan exactamente con lo especificado en el atributo `src`.

⚙️7. Resumen de Configuraciones

El script agente_creador_presentacion.php deberá tener una sección de configuración al inicio para facilitar ajustes futuros.

Parámetro	Variable Sugerida	Valor Ejemplo
API Key de Google Gemini	`GOOGLE_AI_API_KEY`	`"AIzaSy..."`
Ruta del Logo	`$logo_path`	`"../logo/isotipo.png"`
Ancho del Logo	`$logo_width`	`"150px"`
Margen de la Cabecera	`$header_padding`	`"15px"`