xaman4

Sleeping

App Files Files Community

salomonsky commited on Jun 21

Commit

3357bcb

verified ·

1 Parent(s): bf386f8

Create index.html

Browse files

Files changed (1) hide show

index.html +664 -0

index.html ADDED Viewed

	@@ -0,0 +1,664 @@

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generador de Noticias en Video</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Google Fonts - Inter -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f0f4f8;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            background-color: #ffffff;
+            border-radius: 1rem; /* rounded-xl */
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
+            padding: 2.5rem; /* p-10 */
+            width: 100%;
+            max-width: 960px;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        .section-title {
+            font-size: 1.5rem; /* text-2xl */
+            font-weight: 600; /* font-semibold */
+            color: #1a202c; /* text-gray-900 */
+            margin-bottom: 1rem;
+            border-bottom: 2px solid #edf2f7; /* border-b-2 border-gray-200 */
+            padding-bottom: 0.5rem;
+        }
+        .button-primary {
+            background-color: #4f46e5; /* indigo-600 */
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem; /* rounded-lg */
+            font-weight: 500; /* font-medium */
+            transition: background-color 0.3s ease;
+            cursor: pointer;
+            border: none;
+        }
+        .button-primary:hover {
+            background-color: #4338ca; /* indigo-700 */
+        }
+        .button-secondary {
+            background-color: #e2e8f0; /* gray-200 */
+            color: #4a5568; /* gray-700 */
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem; /* rounded-lg */
+            font-weight: 500; /* font-medium */
+            transition: background-color 0.3s ease;
+            cursor: pointer;
+            border: none;
+        }
+        .button-secondary:hover {
+            background-color: #cbd5e0; /* gray-300 */
+        }
+        .button-danger {
+            background-color: #ef4444; /* red-500 */
+            color: white;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.5rem;
+            font-weight: 500;
+            transition: background-color 0.3s ease;
+            cursor: pointer;
+            border: none;
+        }
+        .button-danger:hover {
+            background-color: #dc2626; /* red-600 */
+        }
+        .input-field {
+            border: 1px solid #cbd5e0; /* border-gray-300 */
+            border-radius: 0.5rem; /* rounded-lg */
+            padding: 0.75rem 1rem;
+            width: 100%;
+            transition: border-color 0.3s ease, box-shadow 0.3s ease;
+        }
+        .input-field:focus {
+            outline: none;
+            border-color: #6366f1; /* indigo-500 */
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); /* ring-indigo-200 */
+        }
+        .loading-spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-left-color: #4f46e5;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            animation: spin 1s linear infinite;
+            display: inline-block;
+            vertical-align: middle;
+            margin-left: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Message box styles */
+        .message-box {
+            padding: 1rem;
+            border-radius: 0.5rem;
+            margin-top: 1rem;
+            font-weight: 500;
+        }
+        .message-box.info {
+            background-color: #feebc8; /* yellow-100 */
+            border: 1px solid #fbd38d; /* yellow-400 */
+            color: #975a16; /* yellow-800 */
+        }
+        .message-box.success {
+            background-color: #d1fae5; /* green-100 */
+            border: 1px solid #34d399; /* green-400 */
+            color: #065f46; /* green-800 */
+        }
+        .message-box.error {
+            background-color: #fee2e2; /* red-100 */
+            border: 1px solid #f87171; /* red-400 */
+            color: #991b1b; /* red-800 */
+        }
+        canvas {
+            border: 1px solid #cbd5e0;
+            border-radius: 0.5rem;
+            background-color: #f7fafc;
+            max-width: 100%;
+            height: auto;
+        }
+        /* Video container aspect ratio styling */
+        .video-container-16-9 {
+            width: 100%;
+            padding-bottom: 56.25%; /* 9 / 16 * 100% */
+            position: relative;
+        }
+        .video-container-9-16 {
+            width: 100%;
+            max-width: 300px; /* Limit width for portrait */
+            padding-bottom: 177.77%; /* 16 / 9 * 100% */
+            position: relative;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .video-container-inner {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
+    <div class="container" role="main">
+        <h1 class="text-3xl font-bold text-center text-gray-800" aria-label="Generador de Noticias en Video">Generador de Noticias en Video</h1>
+        <!-- Sección 1: Imagen (Cargar o Generar) -->
+        <div class="flex flex-col gap-4">
+            <h2 class="section-title">1. Imágenes para la Noticia</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                    <label for="imageUpload" class="block text-gray-700 font-medium mb-2">Cargar Nueva Imagen:</label>
+                    <input type="file" id="imageUpload" accept="image/*" class="input-field py-2" aria-label="Cargar nueva imagen">
+                </div>
+                <div>
+                    <label for="imagePrompt" class="block text-gray-700 font-medium mb-2">O Generar con IA (Prompt):</label>
+                    <input type="text" id="imagePrompt" placeholder="Ej: Un coche volando por la ciudad" class="input-field" aria-label="Prompt para generar imagen">
+                    <button id="generateImageBtn" class="button-primary mt-3 w-full" aria-label="Generar imagen con inteligencia artificial">
+                        Generar Imagen
+                        <span id="imageLoading" class="loading-spinner hidden" role="status" aria-label="Cargando imagen"></span>
+                    </button>
+                </div>
+            </div>
+            <div class="mt-4">
+                <label class="block text-gray-700 font-medium mb-2">Proporción de Aspecto para Nueva Imagen:</label>
+                <div class="flex gap-4" role="radiogroup" aria-labelledby="aspectRatioLabel">
+                    <div class="flex items-center">
+                        <input type="radio" id="aspectRatio16-9" name="aspectRatio" value="16:9" class="form-radio h-4 w-4 text-indigo-600" checked aria-label="Relación de aspecto 16:9">
+                        <label for="aspectRatio16-9" class="ml-2 text-gray-700">16:9 (Horizontal)</label>
+                    </div>
+                    <div class="flex items-center">
+                        <input type="radio" id="aspectRatio9-16" name="aspectRatio" value="9:16" class="form-radio h-4 w-4 text-indigo-600" aria-label="Relación de aspecto 9:16">
+                        <label for="aspectRatio9-16" class="ml-2 text-gray-700">9:16 (Vertical)</label>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-4 text-center border p-4 rounded-lg bg-gray-50">
+                <p class="text-sm text-gray-600 mb-2">La imagen cargada/generada aquí será procesada y añadida a la secuencia.</p>
+                <img id="currentImageEditorPreview" src="https://placehold.co/400x225/E2E8F0/4A5568?text=Imagen+Nueva" alt="Previsualización de imagen a añadir" class="mx-auto rounded-lg shadow-md max-w-full h-auto object-contain" style="max-height: 300px;">
+                <canvas id="imageCanvas" class="hidden mt-4 mx-auto" aria-hidden="true"></canvas>
+                <button id="addImageToSequenceBtn" class="button-secondary mt-4 w-full" aria-label="Añadir imagen a la secuencia de video">Añadir Imagen a Secuencia</button>
+            </div>
+            <div class="mt-6">
+                <h3 class="font-semibold text-lg text-gray-800 mb-3">Imágenes en Secuencia para el Video:</h3>
+                <div id="imageThumbnailsContainer" class="flex flex-wrap gap-3 p-3 border border-dashed border-gray-300 rounded-lg bg-gray-50 min-h-[100px] items-center justify-center">
+                    <p id="noImagesMessage" class="text-gray-500 text-sm">No hay imágenes en la secuencia aún.</p>
+                </div>
+                <p class="text-sm text-gray-500 mt-2">Haz clic en una imagen para removerla de la secuencia.</p>
+                <button id="clearImagesBtn" class="button-danger mt-4 w-full" aria-label="Limpiar todas las imágenes de la secuencia">Limpiar Imágenes</button>
+            </div>
+        </div>
+        <!-- Sección 2: Texto de la Noticia -->
+        <div class="flex flex-col gap-4">
+            <h2 class="section-title">2. Texto de la Noticia</h2>
+            <div>
+                <label for="newsText" class="block text-gray-700 font-medium mb-2">Escribe tu noticia o genera una:</label>
+                <textarea id="newsText" rows="6" placeholder="Escribe aquí el contenido de tu noticia..." class="input-field resize-y" aria-label="Contenido de la noticia"></textarea>
+            </div>
+            <button id="generateNewsTextBtn" class="button-primary w-full" aria-label="Generar texto de noticia con inteligencia artificial">
+                Generar Texto de Noticia con IA
+                <span id="textLoading" class="loading-spinner hidden" role="status" aria-label="Cargando texto"></span>
+            </button>
+        </div>
+        <!-- Sección 3: Generar y Previsualizar Audio (TTS) -->
+        <div class="flex flex-col gap-4">
+            <h2 class="section-title">3. Audio de la Noticia (TTS)</h2>
+            <button id="playAudioBtn" class="button-primary w-full" aria-label="Reproducir audio de la noticia">
+                Reproducir Audio de Noticia
+            </button>
+            <div id="audioWarning" class="message-box info">
+                <strong>Nota:</strong> La generación de un archivo MP3 directamente en el navegador no es posible sin un servicio externo. Esta función reproducirá el texto usando la voz del navegador.
+            </div>
+        </div>
+        <!-- Sección 4: Crear y Previsualizar Video (Simulado) -->
+        <div class="flex flex-col gap-4">
+            <h2 class="section-title">4. Previsualizar Noticia en Video</h2>
+            <button id="createVideoBtn" class="button-primary w-full" aria-label="Previsualizar noticia con imagen y audio">
+                Previsualizar Noticia (Imagen + Audio)
+            </button>
+            <div id="videoContainerWrapper" class="mt-4 relative" style="width: 100%; max-width: 640px; margin-left: auto; margin-right: auto;">
+                <div id="videoContainer" class="relative bg-black rounded-lg overflow-hidden flex items-center justify-center">
+                    <div id="videoContainerInner" class="video-container-inner">
+                        <img id="videoImageDisplay" class="w-full h-full object-contain" src="" alt="Noticia en Video" style="display: none;">
+                        <p id="videoPlaceholder" class="text-gray-400 text-center text-lg">Haz clic en 'Previsualizar Noticia'</p>
+                        <div id="videoPlayingIndicator" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white text-xl hidden">
+                            <span class="loading-spinner mr-3"></span> Reproduciendo Noticia...
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <audio id="videoAudioPlayback" src="" style="display: none;"></audio>
+            <div id="videoWarning" class="message-box info">
+                <strong>Importante:</strong> La creación de un archivo de video real (.mp4) a partir de una imagen y audio es una tarea compleja que normalmente requiere procesamiento en el lado del servidor (por ejemplo, con FFmpeg) o librerías muy grandes y específicas para el navegador (como ffmpeg.wasm). Esta previsualización simula la noticia mostrando la imagen y reproduciendo el audio.
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        const imageUpload = document.getElementById('imageUpload');
+        const imagePromptInput = document.getElementById('imagePrompt');
+        const generateImageBtn = document.getElementById('generateImageBtn');
+        const currentImageEditorPreview = document.getElementById('currentImageEditorPreview');
+        const imageLoading = document.getElementById('imageLoading');
+        const addImageToSequenceBtn = document.getElementById('addImageToSequenceBtn');
+        const imageThumbnailsContainer = document.getElementById('imageThumbnailsContainer');
+        const noImagesMessage = document.getElementById('noImagesMessage');
+        const clearImagesBtn = document.getElementById('clearImagesBtn'); // New button
+        const newsTextarea = document.getElementById('newsText');
+        const generateNewsTextBtn = document.getElementById('generateNewsTextBtn');
+        const textLoading = document.getElementById('textLoading');
+        const playAudioBtn = document.getElementById('playAudioBtn');
+        const createVideoBtn = document.getElementById('createVideoBtn');
+        const videoImageDisplay = document.getElementById('videoImageDisplay');
+        const videoAudioPlayback = document.getElementById('videoAudioPlayback');
+        const videoPlaceholder = document.getElementById('videoPlaceholder');
+        const videoPlayingIndicator = document.getElementById('videoPlayingIndicator'); // New indicator
+        const videoContainer = document.getElementById('videoContainer'); // Main video display div
+        const videoContainerWrapper = document.getElementById('videoContainerWrapper'); // Wrapper for aspect ratio
+        const imageCanvas = document.getElementById('imageCanvas');
+        const ctx = imageCanvas.getContext('2d');
+        const aspectRatioRadios = document.querySelectorAll('input[name="aspectRatio"]');
+        let newsImages = []; // Array to store base64 images for the video sequence
+        let currentProcessedImageBase64 = null; // Stores the base64 of the image currently in the editor preview
+        let currentAudioSynthesizer = null; // Will store the SpeechSynthesisUtterance
+        let imageInterval = null; // To store the interval ID for image cycling
+        // Function to show a temporary message
+        function showMessage(element, message, type = 'info', duration = 3000) {
+            let messageDiv = document.createElement('div');
+            messageDiv.className = `message-box ${type}`; // Use type for class
+            messageDiv.textContent = message;
+            // Remove existing messages of the same type under the same parent for cleanliness
+            const existingMessage = element.parentNode.querySelector(`.message-box.${type}`);
+            if (existingMessage) {
+                existingMessage.remove();
+            }
+            element.parentNode.insertBefore(messageDiv, element.nextSibling);
+            setTimeout(() => {
+                messageDiv.remove();
+            }, duration);
+        }
+        // Function to update the images display
+        function updateImageThumbnails() {
+            imageThumbnailsContainer.innerHTML = ''; // Clear existing thumbnails
+            if (newsImages.length === 0) {
+                noImagesMessage.style.display = 'block';
+                clearImagesBtn.classList.add('hidden'); // Hide clear button if no images
+            } else {
+                noImagesMessage.style.display = 'none';
+                clearImagesBtn.classList.remove('hidden'); // Show clear button if images exist
+                newsImages.forEach((imgBase64, index) => {
+                    const thumbDiv = document.createElement('div');
+                    thumbDiv.className = 'relative group w-24 h-24 rounded-lg overflow-hidden shadow-md cursor-pointer';
+                    thumbDiv.setAttribute('role', 'button');
+                    thumbDiv.setAttribute('aria-label', `Imagen ${index + 1} en secuencia, clic para remover.`);
+                    thumbDiv.innerHTML = `
+                        <img src="${imgBase64}" alt="Imagen ${index + 1}" class="w-full h-full object-cover">
+                        <button class="absolute top-0 right-0 bg-red-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-200" data-index="${index}" aria-label="Remover imagen ${index + 1}"></button>
+                    `;
+                    thumbDiv.querySelector('button').addEventListener('click', (e) => {
+                        e.stopPropagation(); // Prevent click from bubbling to thumbDiv itself
+                        const idx = parseInt(e.target.dataset.index);
+                        newsImages.splice(idx, 1); // Remove image from array
+                        updateImageThumbnails(); // Redraw thumbnails
+                        showMessage(thumbDiv.parentNode, "Imagen removida.", 'info');
+                    });
+                    imageThumbnailsContainer.appendChild(thumbDiv);
+                });
+            }
+        }
+        // --- Image Handling ---
+        // Handle image upload
+        imageUpload.addEventListener('change', (event) => {
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    loadImageToCanvas(e.target.result); // Load to canvas first for cropping
+                };
+                reader.onerror = () => {
+                    showMessage(imageUpload, "Error al leer el archivo de imagen.", 'error');
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        // Event listener for aspect ratio changes
+        aspectRatioRadios.forEach(radio => {
+            radio.addEventListener('change', () => {
+                if (currentProcessedImageBase64) {
+                    loadImageToCanvas(currentProcessedImageBase64); // Reload image to apply new aspect ratio
+                }
+                // Update video container aspect ratio class
+                setVideoContainerAspectRatio();
+            });
+        });
+        // Function to set the video container aspect ratio class dynamically
+        function setVideoContainerAspectRatio() {
+            const selectedRatio = document.querySelector('input[name="aspectRatio"]:checked').value;
+            if (selectedRatio === '16:9') {
+                videoContainerWrapper.classList.remove('video-container-9-16');
+                videoContainerWrapper.classList.add('video-container-16-9');
+            } else { // 9:16
+                videoContainerWrapper.classList.remove('video-container-16-9');
+                videoContainerWrapper.classList.add('video-container-9-16');
+            }
+        }
+        // Function to load image onto canvas and apply selected aspect ratio
+        function loadImageToCanvas(imageUrl) {
+            const img = new Image();
+            img.onload = () => {
+                const selectedRatio = document.querySelector('input[name="aspectRatio"]:checked').value;
+                let targetWidth, targetHeight;
+                if (selectedRatio === '16:9') {
+                    targetWidth = 640;
+                    targetHeight = targetWidth / (16 / 9);
+                } else { // 9:16
+                    targetHeight = 640; // Max height for portrait
+                    targetWidth = targetHeight * (9 / 16);
+                }
+                const imgAspectRatio = img.width / img.height;
+                const targetAspectRatio = targetWidth / targetHeight;
+                let sx, sy, sWidth, sHeight;
+                let dx, dy, dWidth, dHeight;
+                dx = 0; dy = 0; dWidth = targetWidth; dHeight = targetHeight;
+                if (imgAspectRatio > targetAspectRatio) {
+                    sHeight = img.height;
+                    sWidth = img.height * targetAspectRatio;
+                    sx = (img.width - sWidth) / 2;
+                    sy = 0;
+                } else {
+                    sWidth = img.width;
+                    sHeight = img.width / targetAspectRatio;
+                    sx = 0;
+                    sy = (img.height - sHeight) / 2;
+                }
+                imageCanvas.width = targetWidth;
+                imageCanvas.height = targetHeight;
+                ctx.clearRect(0, 0, imageCanvas.width, imageCanvas.height);
+                ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+                currentProcessedImageBase64 = imageCanvas.toDataURL('image/png');
+                currentImageEditorPreview.src = currentProcessedImageBase64;
+                addImageToSequenceBtn.disabled = false;
+            };
+            img.onerror = () => {
+                showMessage(currentImageEditorPreview, "Error al cargar la imagen. Asegúrate de que es un formato válido.", 'error');
+                currentProcessedImageBase64 = null;
+                currentImageEditorPreview.src = "https://placehold.co/400x225/E2E8F0/4A5568?text=Imagen+Nueva";
+                addImageToSequenceBtn.disabled = true;
+            };
+            img.src = imageUrl;
+        }
+        // Generate image using Imagen API via Flask backend
+        generateImageBtn.addEventListener('click', async () => {
+            const prompt = imagePromptInput.value.trim();
+            if (!prompt) {
+                showMessage(generateImageBtn, "Por favor, introduce un prompt para generar la imagen.", 'error');
+                return;
+            }
+            imageLoading.classList.remove('hidden');
+            generateImageBtn.disabled = true;
+            try {
+                const response = await fetch('/generate_image', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt: prompt })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json(); // Assume JSON error from backend
+                    throw new Error(`Error del backend: ${errorData.error || response.statusText}`);
+                }
+                const result = await response.json();
+                if (result.imageUrl) {
+                    loadImageToCanvas(result.imageUrl);
+                    showMessage(generateImageBtn, "Imagen generada con éxito.", 'success');
+                } else {
+                    showMessage(generateImageBtn, "No se recibió una imagen válida del backend.", 'error');
+                }
+            } catch (error) {
+                console.error('Error generating image:', error);
+                showMessage(generateImageBtn, `Error al generar la imagen: ${error.message}`, 'error');
+            } finally {
+                imageLoading.classList.add('hidden');
+                generateImageBtn.disabled = false;
+            }
+        });
+        // Add processed image to the sequence
+        addImageToSequenceBtn.addEventListener('click', () => {
+            if (currentProcessedImageBase64) {
+                newsImages.push(currentProcessedImageBase64);
+                updateImageThumbnails();
+                showMessage(addImageToSequenceBtn, "Imagen añadida a la secuencia.", 'success');
+                currentProcessedImageBase64 = null; // Clear processed image for next one
+                currentImageEditorPreview.src = "https://placehold.co/400x225/E2E8F0/4A5568?text=Imagen+Nueva"; // Reset preview
+                addImageToSequenceBtn.disabled = true;
+            } else {
+                showMessage(addImageToSequenceBtn, "No hay imagen para añadir. Carga o genera una primero.", 'error');
+            }
+        });
+        // Clear all images from the sequence
+        clearImagesBtn.addEventListener('click', () => {
+            if (newsImages.length > 0) {
+                newsImages = []; // Clear array
+                updateImageThumbnails(); // Redraw
+                showMessage(clearImagesBtn, "Todas las imágenes han sido eliminadas de la secuencia.", 'info');
+            } else {
+                showMessage(clearImagesBtn, "No hay imágenes para eliminar.", 'info');
+            }
+        });
+        // --- Text Handling ---
+        // Generate news text using Gemini-Flash via Flask backend
+        generateNewsTextBtn.addEventListener('click', async () => {
+            const userPrompt = "Escribe una noticia corta y concisa, ideal para un reportaje de video. Céntrate en un evento reciente o un tema interesante. El texto debe ser natural y apto para ser leído. No incluyas títulos, solo el cuerpo de la noticia. Aquí tienes una idea de la noticia: " + newsTextarea.value.trim();
+            if (!newsTextarea.value.trim()) {
+                showMessage(generateNewsTextBtn, "Por favor, introduce una idea para la noticia en el cuadro de texto.", 'info');
+                return;
+            }
+            textLoading.classList.remove('hidden');
+            generateNewsTextBtn.disabled = true;
+            try {
+                const response = await fetch('/generate_text', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt: userPrompt })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json(); // Assume JSON error from backend
+                    throw new Error(`Error del backend: ${errorData.error || response.statusText}`);
+                }
+                const result = await response.json();
+                if (result.text) {
+                    newsTextarea.value = result.text; // Set the generated text
+                    showMessage(generateNewsTextBtn, "Texto de noticia generado con éxito.", 'success');
+                } else {
+                    showMessage(generateNewsTextBtn, "No se recibió texto válido del backend.", 'error');
+                }
+            } catch (error) {
+                console.error('Error generating text:', error);
+                showMessage(generateNewsTextBtn, `Error al generar el texto: ${error.message}`, 'error');
+            } finally {
+                textLoading.classList.add('hidden');
+                generateNewsTextBtn.disabled = false;
+            }
+        });
+        // --- Audio (TTS) Handling ---
+        playAudioBtn.addEventListener('click', () => {
+            const textToSpeak = newsTextarea.value.trim();
+            if (!textToSpeak) {
+                showMessage(playAudioBtn, "Por favor, introduce texto para reproducir el audio.", 'error');
+                return;
+            }
+            // Stop any ongoing speech
+            if (speechSynthesis.speaking) {
+                speechSynthesis.cancel();
+            }
+            currentAudioSynthesizer = new SpeechSynthesisUtterance(textToSpeak);
+            currentAudioSynthesizer.lang = 'es-ES'; // Set language to Spanish
+            currentAudioSynthesizer.onstart = () => {
+                showMessage(playAudioBtn, "Reproduciendo audio...", 'info', 5000);
+                playAudioBtn.disabled = true;
+            };
+            currentAudioSynthesizer.onend = () => {
+                showMessage(playAudioBtn, "Reproducción de audio finalizada.", 'success');
+                playAudioBtn.disabled = false;
+            };
+            currentAudioSynthesizer.onerror = (event) => {
+                console.error('SpeechSynthesisUtterance.onerror', event);
+                showMessage(playAudioBtn, `Error al reproducir audio: ${event.error}`, 'error');
+                playAudioBtn.disabled = false;
+            };
+            speechSynthesis.speak(currentAudioSynthesizer);
+        });
+        // --- Video Simulation (Updated) ---
+        createVideoBtn.addEventListener('click', () => {
+            if (newsImages.length === 0) {
+                showMessage(createVideoBtn, "Por favor, añade al menos una imagen a la secuencia.", 'error');
+                return;
+            }
+            const textToSpeak = newsTextarea.value.trim();
+            if (!textToSpeak) {
+                showMessage(createVideoBtn, "Por favor, genera o escribe el texto de la noticia primero.", 'error');
+                return;
+            }
+            // Stop any existing audio playback or image intervals
+            if (speechSynthesis.speaking) {
+                speechSynthesis.cancel();
+            }
+            if (imageInterval) {
+                clearInterval(imageInterval);
+                imageInterval = null;
+            }
+            // Show video elements
+            videoPlaceholder.style.display = 'none';
+            videoImageDisplay.style.display = 'block';
+            videoPlayingIndicator.classList.remove('hidden'); // Show playing indicator
+            // Set the video container's aspect ratio based on the selected radio button
+            setVideoContainerAspectRatio();
+            // Start audio playback
+            const videoUtterance = new SpeechSynthesisUtterance(textToSpeak);
+            videoUtterance.lang = 'es-ES';
+            let currentImageIndex = 0;
+            videoImageDisplay.src = newsImages[currentImageIndex]; // Display first image
+            videoUtterance.onstart = () => {
+                showMessage(createVideoBtn, "Simulando noticia en video...", 'info', 5000);
+                createVideoBtn.disabled = true;
+                // Estimate duration and set interval for image switching
+                const words = textToSpeak.split(/\s+/).filter(word => word.length > 0).length;
+                const estimatedDurationSeconds = Math.max(1, words / 2.67);
+                const imageDisplayDuration = estimatedDurationSeconds / newsImages.length;
+                console.log(`Text: ${textToSpeak.length} characters, ${words} words`);
+                console.log(`Estimated audio duration: ${estimatedDurationSeconds.toFixed(2)} seconds`);
+                console.log(`Duration per image: ${imageDisplayDuration.toFixed(2)} seconds`);
+                if (newsImages.length > 1) {
+                    imageInterval = setInterval(() => {
+                        currentImageIndex = (currentImageIndex + 1) % newsImages.length;
+                        videoImageDisplay.src = newsImages[currentImageIndex];
+                    }, imageDisplayDuration * 1000);
+                }
+            };
+            videoUtterance.onend = () => {
+                showMessage(createVideoBtn, "Simulación de noticia en video finalizada.", 'success');
+                createVideoBtn.disabled = false;
+                videoPlayingIndicator.classList.add('hidden'); // Hide playing indicator
+                if (imageInterval) {
+                    clearInterval(imageInterval);
+                    imageInterval = null;
+                }
+            };
+            videoUtterance.onerror = (event) => {
+                console.error('Video Utterance onerror', event);
+                showMessage(createVideoBtn, `Error en la simulación de video: ${event.error}`, 'error');
+                createVideoBtn.disabled = false;
+                videoPlayingIndicator.classList.add('hidden'); // Hide playing indicator
+                if (imageInterval) {
+                    clearInterval(imageInterval);
+                    imageInterval = null;
+                }
+            };
+            speechSynthesis.speak(videoUtterance);
+        });
+        // Initial setup
+        updateImageThumbnails(); // Display any pre-existing images (none initially)
+        addImageToSequenceBtn.disabled = true; // Initially disable add button as no image is processed
+        setVideoContainerAspectRatio(); // Set initial video container aspect ratio
+    </script>
+</body>
+</html>