Spaces:

salomonsky
/

news2

Runtime error

App Files Files Community

salomonsky commited on 12 days ago

Commit

b656836

verified ·

1 Parent(s): 523bce6

Update index.html

Browse files

Files changed (1) hide show

index.html +170 -25

index.html CHANGED Viewed

@@ -304,11 +304,37 @@
 </head>
 <body>
     <div class="container">
-        <h1 class="section-title">✨ Creador de Noticias en Video ✨</h1>
-        <!-- Sección de Configuración de Opciones Generales (anteriormente Sección 0) -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
-            <h2 class="text-2xl font-semibold mb-4 text-gray-700">1. Configuración de Opciones Generales</h2>
             <div class="input-group mb-4">
                 <label class="block text-gray-700 text-sm font-bold mb-2">Relación de Aspecto del Video:</label>
@@ -330,7 +356,7 @@
                 <label for="imageDuration" class="block text-gray-700 text-sm font-bold mb-2">Duración de cada imagen (segundos):</label>
                 <input type="number" id="imageDuration" value="3" min="1" step="0.5" class="py-2 px-3 rounded-lg">
                 <div id="imageDurationMessage" class="message-box mt-2"></div>
-                <p class="text-sm text-gray-500 mt-1">Define cuánto tiempo cada imagen aparecerá en el video. La duración del audio se sincronizará con la imagen.</p>
             </div>
             <div class="input-group mb-4">
@@ -343,7 +369,36 @@
             </div>
         </div>
-        <!-- Sección de Carga de Fotos (anteriormente Sección 2) -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">2. Sube tus Fotos (Máx. 10)</h2>
             <div class="input-group mb-4">
@@ -357,17 +412,21 @@
             <div id="imageErrorMessage" class="message-box error-message mt-4 rounded-lg"></div>
         </div>
-        <!-- Sección de Escritura del Guion (anteriormente Sección 3) -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">3. Escribe el Guion de tu Noticia</h2>
             <div class="input-group mb-4">
                 <label for="scriptTextarea" class="block text-gray-700 text-sm font-bold mb-2">Tu guion aquí (un párrafo por cada foto):</label>
                 <textarea id="scriptTextarea" rows="8" placeholder="Ej: Hola, hoy exploraremos el fascinante mundo de El Principito. En nuestra primera imagen, vemos al Principito en su pequeño asteroide, cuidando su rosa. Esta escena evoca la ternura y la responsabilidad..." class="rounded-lg"></textarea>
             </div>
             <div id="llmMessage" class="message-box mt-4 rounded-lg"></div>
         </div>
-        <!-- Sección de Selección de Voz (anteriormente Sección 4) -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">4. Elige la Voz de tu Narrador</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -389,7 +448,7 @@
             <div id="voiceTestMessage" class="message-box mt-4 rounded-lg"></div>
         </div>
-        <!-- Sección de Generación de Video (anteriormente Sección 5) -->
         <div class="mb-8 text-center p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">5. Generar Video</h2>
             <button id="generateVideoBtn" class="btn-primary w-full max-w-xs rounded-xl">Crear Noticia en Video</button>
@@ -399,7 +458,7 @@
             <div id="generateVideoMessage" class="message-box mt-4 rounded-lg"></div>
         </div>
-        <!-- Sección de Video Resultante (anteriormente Sección 6) -->
         <div class="p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">6. Tu Video está Listo</h2>
             <div id="videoOutput" class="video-placeholder">
@@ -420,20 +479,33 @@
     </div>
     <script>
-        // Referencias a elementos del DOM (actualizadas)
         const aspectRatio16_9Radio = document.getElementById('aspectRatio16_9');
         const aspectRatio9_16Radio = document.getElementById('aspectRatio9_16');
         const imageDurationInput = document.getElementById('imageDuration');
         const imageDurationMessage = document.getElementById('imageDurationMessage');
         const voiceServiceSelect = document.getElementById('voiceService');
         const photoUpload = document.getElementById('photoUpload');
         const thumbnailsContainer = document.getElementById('thumbnails');
         const photoCountDisplay = document.getElementById('photoCount');
         const imageErrorMessage = document.getElementById('imageErrorMessage');
         const scriptTextarea = document.getElementById('scriptTextarea');
-        const llmMessage = document.getElementById('llmMessage'); // Todavía usado para mensajes generales
         const voiceLanguageSelect = document.getElementById('voiceLanguage');
         const testVoiceBtn = document.getElementById('testVoiceBtn');
@@ -519,6 +591,39 @@
             }
         }
         // Validación en tiempo real para la duración de la imagen
         imageDurationInput.addEventListener('input', () => {
             const value = parseFloat(imageDurationInput.value);
@@ -649,51 +754,84 @@
             // Limpiar mensajes y resetear el área de video
             hideMessage(generateVideoMessage);
             hideMessage(imageErrorMessage);
-            hideMessage(llmMessage); // Sigue siendo útil para mensajes generales
             videoOutput.innerHTML = '<p>El video generado aparecerá aquí.</p>';
             resultVideo.classList.add('hidden');
             resultVideo.src = '';
             downloadVideoLink.classList.add('hidden');
-            // Recolectar valores de los inputs del usuario (simplificados)
             const selectedAspectRatio = document.querySelector('input[name="aspectRatio"]:checked').value;
             const imageDuration = parseFloat(imageDurationInput.value);
             const selectedVoiceService = voiceServiceSelect.value;
             const selectedLanguage = voiceLanguageSelect.value;
             const script = scriptTextarea.value.trim();
-            // Validaciones de entrada del usuario con modal personalizado (simplificadas)
-            if (uploadedFiles.length === 0) {
-                showCustomModal('Faltan Imágenes', 'Por favor, sube al menos una foto.');
                 return;
             }
-            if (!script) {
-                showCustomModal('Falta el Guion', 'Por favor, escribe un guion para tu noticia.');
                 return;
             }
             if (isNaN(imageDuration) || imageDuration <= 0) {
                 showCustomModal('Duración de Imagen Inválida', 'Por favor, introduce una duración de imagen válida (un número positivo) para cada segmento de video.');
                 return;
             }
             // Mostrar spinner de carga y deshabilitar el botón
             loadingSpinner.style.display = 'block';
             loadingText.style.display = 'block';
             generateVideoBtn.disabled = true;
             try {
-                loadingText.textContent = 'Generando tu video: combinando fotos, audio y componiendo... esto puede tardar unos minutos.';
                 // Crear objeto FormData para enviar datos y archivos al backend
                 const formData = new FormData();
                 formData.append('script', script);
                 formData.append('aspectRatio', selectedAspectRatio);
                 formData.append('imageDuration', imageDuration);
                 formData.append('voiceService', selectedVoiceService);
                 formData.append('voiceLanguage', selectedLanguage);
                 // Añadir archivos subidos al FormData
                 uploadedFiles.forEach((file, index) => {
                     formData.append(`photos`, file);
@@ -739,6 +877,13 @@
                 thumbnailsContainer.innerHTML = 'Arrastra y suelta tus imágenes aquí o usa el botón de "Seleccionar imágenes".';
                 thumbnailsContainer.classList.remove('has-files');
                 photoCountDisplay.textContent = '0/10 fotos seleccionadas';
             } catch (error) {
                 console.error('Error al generar el vídeo:', error);

 </head>
 <body>
     <div class="container">
+        <h1 class="section-title">✨ Creador de Noticias en Video con IA ✨</h1>
+        <!-- Sección 0: Configuración de API y Opciones Avanzadas -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
+            <h2 class="text-2xl font-semibold mb-4 text-gray-700">0. Configuración de API y Opciones Avanzadas</h2>
+            <div class="input-group mb-4">
+                <label for="llmService" class="block text-gray-700 text-sm font-bold mb-2">Servicio de LLM para Guion:</label>
+                <select id="llmService" class="rounded-lg">
+                    <option value="gemini">Google Gemini</option>
+                    <option value="gpt">OpenAI GPT</option>
+                    <option value="anthropic">Anthropic Claude</option>
+                    <option value="bing">Microsoft Bing (Copilot)</option>
+                    <option value="custom">Mi LLM Personalizado</option>
+                    <option value="none">No usar LLM (solo mi guion)</option>
+                </select>
+            </div>
+            <div id="customLlmEndpointGroup" class="input-group mb-4 hidden">
+                <label for="customLlmEndpoint" class="block text-gray-700 text-sm font-bold mb-2">URL del Endpoint de mi LLM Personalizado:</label>
+                <input type="text" id="customLlmEndpoint" placeholder="Ej: https://mi-modelo-personalizado.huggingface.app/generate" class="rounded-lg">
+                <p class="text-sm text-gray-500 mt-1">Tu backend será el encargado de comunicarse con esta URL.</p>
+            </div>
+            <div class="input-group mb-4">
+                <label for="genericApiKey" class="block text-gray-700 text-sm font-bold mb-2">Clave de API (Para pruebas locales):</label>
+                <input type="text" id="genericApiKey" placeholder="Ingresa tu clave de API aquí" class="rounded-lg">
+                <div id="apiKeyWarning" class="message-box warning-message mt-2 show">
+                    <strong>Advertencia de Seguridad:</strong> Para despliegues (ej. Hugging Face), tu clave de API debe cargarse de forma segura desde variables de entorno/secretos del servidor (ej. `gemini_api`). Si no se introduce aquí, el backend intentará usar las variables de entorno de tu Space.
+                </div>
+            </div>
             <div class="input-group mb-4">
                 <label class="block text-gray-700 text-sm font-bold mb-2">Relación de Aspecto del Video:</label>
                 <label for="imageDuration" class="block text-gray-700 text-sm font-bold mb-2">Duración de cada imagen (segundos):</label>
                 <input type="number" id="imageDuration" value="3" min="1" step="0.5" class="py-2 px-3 rounded-lg">
                 <div id="imageDurationMessage" class="message-box mt-2"></div>
+                <p class="text-sm text-gray-500 mt-1">Define cuánto tiempo cada imagen aparecerá en el video. Si el guion tiene audio, la duración de la imagen se ajustará a la duración del audio para ese segmento.</p>
             </div>
             <div class="input-group mb-4">
             </div>
         </div>
+        <!-- Sección 1: Generación de Imágenes (si no se suben fotos) -->
+        <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
+            <h2 class="text-2xl font-semibold mb-4 text-gray-700">1. Generación de Imágenes (si no subes fotos)</h2>
+            <div class="flex items-center mb-4">
+                <input type="checkbox" id="generateImagesWithAI" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+                <label for="generateImagesWithAI" class="text-gray-700 text-sm">Generar imágenes con IA si no subo fotos</label>
+            </div>
+            <div id="imageGenerationOptions" class="hidden">
+                <div class="input-group mb-4">
+                    <label for="imageGenerationService" class="block text-gray-700 text-sm font-bold mb-2">Servicio de Generación de Imágenes:</label>
+                    <select id="imageGenerationService" class="rounded-lg">
+                        <option value="google_imagen" selected>Google Imagen (Imagen 3.0)</option>
+                        <option value="dalle">OpenAI DALL-E (No implementado en backend)</option>
+                        <option value="custom_image_gen">Mi Servicio Personalizado (No implementado en backend)</option>
+                    </select>
+                </div>
+                <div id="customImageGenEndpointGroup" class="input-group mb-4 hidden">
+                    <label for="customImageGenEndpoint" class="block text-gray-700 text-sm font-bold mb-2">URL del Endpoint de mi Servicio Personalizado:</label>
+                    <input type="text" id="customImageGenEndpoint" placeholder="Ej: https://mi-generador-ia.huggingface.app/generate" class="rounded-lg">
+                </div>
+                <div class="input-group mb-4">
+                    <label for="imageGenerationPrompt" class="block text-gray-700 text-sm font-bold mb-2">Prompt para generar imágenes (ej. "paisajes de El Principito, estilo acuarela"):</label>
+                    <textarea id="imageGenerationPrompt" rows="3" placeholder="Describe las imágenes que quieres generar..." class="rounded-lg"></textarea>
+                    <p class="text-sm text-gray-500 mt-1">Se generarán entre 1 y 10 imágenes (según tu guion) basadas en este prompt. Est. 1.5 minutos por imagen.</p>
+                </div>
+            </div>
+            <div id="imageGenMessage" class="message-box mt-4 rounded-lg"></div>
+        </div>
+        <!-- Sección 2: Carga de Fotos -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">2. Sube tus Fotos (Máx. 10)</h2>
             <div class="input-group mb-4">
             <div id="imageErrorMessage" class="message-box error-message mt-4 rounded-lg"></div>
         </div>
+        <!-- Sección 3: Escritura del Guion -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">3. Escribe el Guion de tu Noticia</h2>
             <div class="input-group mb-4">
                 <label for="scriptTextarea" class="block text-gray-700 text-sm font-bold mb-2">Tu guion aquí (un párrafo por cada foto):</label>
                 <textarea id="scriptTextarea" rows="8" placeholder="Ej: Hola, hoy exploraremos el fascinante mundo de El Principito. En nuestra primera imagen, vemos al Principito en su pequeño asteroide, cuidando su rosa. Esta escena evoca la ternura y la responsabilidad..." class="rounded-lg"></textarea>
             </div>
+            <div class="flex items-center mb-4">
+                <input type="checkbox" id="useLlmForScript" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2">
+                <label for="useLlmForScript" class="text-gray-700 text-sm">Usar LLM para generar/mejorar el guion (basado en fotos y en mi texto)</label>
+            </div>
             <div id="llmMessage" class="message-box mt-4 rounded-lg"></div>
         </div>
+        <!-- Sección 4: Selección de Voz -->
         <div class="mb-8 p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">4. Elige la Voz de tu Narrador</h2>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
             <div id="voiceTestMessage" class="message-box mt-4 rounded-lg"></div>
         </div>
+        <!-- Sección 5: Generación de Video -->
         <div class="mb-8 text-center p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">5. Generar Video</h2>
             <button id="generateVideoBtn" class="btn-primary w-full max-w-xs rounded-xl">Crear Noticia en Video</button>
             <div id="generateVideoMessage" class="message-box mt-4 rounded-lg"></div>
         </div>
+        <!-- Sección 6: Video Resultante -->
         <div class="p-4 bg-gray-50 rounded-xl shadow-inner">
             <h2 class="text-2xl font-semibold mb-4 text-gray-700">6. Tu Video está Listo</h2>
             <div id="videoOutput" class="video-placeholder">
     </div>
     <script>
+        // Referencias a elementos del DOM
+        const llmServiceSelect = document.getElementById('llmService');
+        const genericApiKeyInput = document.getElementById('genericApiKey');
+        const customLlmEndpointGroup = document.getElementById('customLlmEndpointGroup');
+        const customLlmEndpointInput = document.getElementById('customLlmEndpoint');
         const aspectRatio16_9Radio = document.getElementById('aspectRatio16_9');
         const aspectRatio9_16Radio = document.getElementById('aspectRatio9_16');
         const imageDurationInput = document.getElementById('imageDuration');
         const imageDurationMessage = document.getElementById('imageDurationMessage');
         const voiceServiceSelect = document.getElementById('voiceService');
+        const generateImagesWithAICheckbox = document.getElementById('generateImagesWithAI');
+        const imageGenerationOptionsDiv = document.getElementById('imageGenerationOptions');
+        const imageGenerationServiceSelect = document.getElementById('imageGenerationService');
+        const customImageGenEndpointGroup = document.getElementById('customImageGenEndpointGroup');
+        const customImageGenEndpointInput = document.getElementById('customImageGenEndpoint');
+        const imageGenerationPromptTextarea = document.getElementById('imageGenerationPrompt');
+        const imageGenMessage = document.getElementById('imageGenMessage');
         const photoUpload = document.getElementById('photoUpload');
         const thumbnailsContainer = document.getElementById('thumbnails');
         const photoCountDisplay = document.getElementById('photoCount');
         const imageErrorMessage = document.getElementById('imageErrorMessage');
         const scriptTextarea = document.getElementById('scriptTextarea');
+        const useLlmForScriptCheckbox = document.getElementById('useLlmForScript');
+        const llmMessage = document.getElementById('llmMessage');
         const voiceLanguageSelect = document.getElementById('voiceLanguage');
         const testVoiceBtn = document.getElementById('testVoiceBtn');
             }
         }
+        // Event listener para mostrar/ocultar el campo de endpoint de LLM personalizado
+        llmServiceSelect.addEventListener('change', () => {
+            if (llmServiceSelect.value === 'custom') {
+                customLlmEndpointGroup.classList.remove('hidden');
+            } else {
+                customLlmEndpointGroup.classList.add('hidden');
+                customLlmEndpointInput.value = '';
+            }
+        });
+        // Event listener para mostrar/ocultar las opciones de generación de imagen por IA
+        generateImagesWithAICheckbox.addEventListener('change', () => {
+            if (generateImagesWithAICheckbox.checked) {
+                imageGenerationOptionsDiv.classList.remove('hidden');
+            } else {
+                imageGenerationOptionsDiv.classList.add('hidden');
+                imageGenerationPromptTextarea.value = '';
+                imageGenerationServiceSelect.value = 'google_imagen';
+                customImageGenEndpointGroup.classList.add('hidden');
+                customImageGenEndpointInput.value = '';
+            }
+        });
+        // Event listener para mostrar/ocultar el campo de endpoint de generación de imagen personalizado
+        imageGenerationServiceSelect.addEventListener('change', () => {
+            if (imageGenerationServiceSelect.value === 'custom_image_gen') {
+                customImageGenEndpointGroup.classList.remove('hidden');
+            } else {
+                customImageGenEndpointGroup.classList.add('hidden');
+                customImageGenEndpointInput.value = '';
+            }
+        });
         // Validación en tiempo real para la duración de la imagen
         imageDurationInput.addEventListener('input', () => {
             const value = parseFloat(imageDurationInput.value);
             // Limpiar mensajes y resetear el área de video
             hideMessage(generateVideoMessage);
             hideMessage(imageErrorMessage);
+            hideMessage(llmMessage);
             videoOutput.innerHTML = '<p>El video generado aparecerá aquí.</p>';
             resultVideo.classList.add('hidden');
             resultVideo.src = '';
             downloadVideoLink.classList.add('hidden');
+            // Recolectar valores de los inputs del usuario
+            const selectedLlmService = llmServiceSelect.value;
+            const genericApiKey = document.getElementById('genericApiKey').value.trim(); // Se recoge por si el backend lo requiere para local
+            const customLlmEndpoint = document.getElementById('customLlmEndpoint').value.trim(); // Se recoge por si el backend lo requiere para custom
             const selectedAspectRatio = document.querySelector('input[name="aspectRatio"]:checked').value;
             const imageDuration = parseFloat(imageDurationInput.value);
             const selectedVoiceService = voiceServiceSelect.value;
             const selectedLanguage = voiceLanguageSelect.value;
+            const shouldGenerateImages = generateImagesWithAICheckbox.checked;
+            const imageGenService = document.getElementById('imageGenerationService').value; // Se recoge por si el backend lo requiere
+            const customImageGenEndpoint = document.getElementById('customImageGenEndpoint').value.trim(); // Se recoge por si el backend lo requiere
+            const imageGenPrompt = imageGenerationPromptTextarea.value.trim();
             const script = scriptTextarea.value.trim();
+            const useLlmForScript = useLlmForScriptCheckbox.checked;
+            // Validaciones de entrada del usuario con modal personalizado
+            if (uploadedFiles.length === 0 && !shouldGenerateImages) {
+                showCustomModal('Faltan Imágenes', 'Por favor, sube al menos una foto O marca la opción "Generar imágenes con IA" y proporciona un prompt.');
                 return;
             }
+            if (uploadedFiles.length > 0 && shouldGenerateImages) {
+                showCustomModal('Conflicto de Imágenes', 'Has subido fotos Y activado la generación de imágenes con IA. Por favor, elige solo una opción.');
+                return;
+            }
+            if (shouldGenerateImages && !imageGenPrompt) {
+                showCustomModal('Prompt de Imagen Requerido', 'Para generar imágenes con IA, debes proporcionar un prompt descriptivo.');
+                return;
+            }
+            if (!script && !useLlmForScript) {
+                showCustomModal('Falta el Guion', 'Por favor, escribe un guion para tu noticia O marca la opción "Usar LLM para generar/mejorar el guion".');
                 return;
             }
             if (isNaN(imageDuration) || imageDuration <= 0) {
                 showCustomModal('Duración de Imagen Inválida', 'Por favor, introduce una duración de imagen válida (un número positivo) para cada segmento de video.');
                 return;
             }
+            // Aunque el backend Python solo usará Gemini, estas validaciones son para el UI
+            if (useLlmForScript && selectedLlmService === 'custom' && !customLlmEndpoint) {
+                showCustomModal('URL de LLM Personalizado Requerida', 'Por favor, introduce la URL del endpoint de tu LLM Personalizado.');
+                return;
+            }
+            if (shouldGenerateImages && imageGenService === 'custom_image_gen' && !customImageGenEndpoint) {
+                showCustomModal('URL de Servicio Personalizado Requerida', 'Para usar un servicio de generación de imágenes personalizado, debes proporcionar su URL de endpoint.');
+                return;
+            }
             // Mostrar spinner de carga y deshabilitar el botón
             loadingSpinner.style.display = 'block';
             loadingText.style.display = 'block';
             generateVideoBtn.disabled = true;
             try {
+                loadingText.textContent = 'Generando tu video con IA: texto, imágenes, audio y composición... esto puede tardar unos minutos.';
                 // Crear objeto FormData para enviar datos y archivos al backend
                 const formData = new FormData();
                 formData.append('script', script);
+                formData.append('useLlmForScript', useLlmForScript);
+                formData.append('llmService', selectedLlmService);
+                formData.append('customLlmEndpoint', customLlmEndpoint);
                 formData.append('aspectRatio', selectedAspectRatio);
                 formData.append('imageDuration', imageDuration);
+                formData.append('shouldGenerateImages', shouldGenerateImages);
+                formData.append('imageGenerationPrompt', imageGenPrompt);
                 formData.append('voiceService', selectedVoiceService);
                 formData.append('voiceLanguage', selectedLanguage);
+                // Si el genericApiKey se proporciona en el frontend, se envía.
+                // En despliegues de HF, el backend debe obtenerlo de los secrets.
+                if (genericApiKey) {
+                    formData.append('genericApiKey', genericApiKey);
+                }
                 // Añadir archivos subidos al FormData
                 uploadedFiles.forEach((file, index) => {
                     formData.append(`photos`, file);
                 thumbnailsContainer.innerHTML = 'Arrastra y suelta tus imágenes aquí o usa el botón de "Seleccionar imágenes".';
                 thumbnailsContainer.classList.remove('has-files');
                 photoCountDisplay.textContent = '0/10 fotos seleccionadas';
+                imageGenerationPromptTextarea.value = '';
+                generateImagesWithAICheckbox.checked = false;
+                imageGenerationOptionsDiv.classList.add('hidden');
+                llmServiceSelect.value = 'gemini';
+                customLlmEndpointGroup.classList.add('hidden');
+                customLlmEndpointInput.value = '';
+                useLlmForScriptCheckbox.checked = false;
             } catch (error) {
                 console.error('Error al generar el vídeo:', error);