xaman4

Running

App Files Files Community

salomonsky commited on Jun 23

Commit

df80175

verified ·

1 Parent(s): eb00a38

Delete index.html

Browse files

Files changed (1) hide show

index.html +0 -664

index.html DELETED Viewed

@@ -1,664 +0,0 @@
-<!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>