Spaces:

hologramicon
/

yt

Paused

App Files Files Community

hologramicon commited on Oct 16, 2025

Commit

5b9138f

verified ·

1 Parent(s): 28cf732

Update index.html

Browse files

Files changed (1) hide show

index.html +46 -36

index.html CHANGED Viewed

@@ -5,78 +5,88 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unir Videos</title>
     <style>
-        body { font-family: sans-serif; max-width: 800px; margin: auto; padding: 20px; }
-        textarea { width: 100%; min-height: 150px; margin-bottom: 10px; }
-        button { padding: 10px 20px; font-size: 16px; }
-        #status-container { margin-top: 20px; border: 1px solid #ccc; padding: 10px; background: #f9f9f9; }
-        #log { white-space: pre-wrap; font-family: monospace; max-height: 300px; overflow-y: auto; }
-        progress { width: 100%; }
     </style>
 </head>
 <body>
     <h1>Unir Videos desde URLs</h1>
-    <p>Pega una URL por línea. Se descargarán y unirán en un solo video WebM.</p>
-    <textarea id="urls" placeholder="https://www.youtube.com/watch?v=...\nhttps://vimeo.com/..."></textarea>
-    <button onclick="startProcess()">Iniciar Proceso</button>
-    <div id="status-container" style="display:none;">
         <h2>Estado del Proceso</h2>
-        <p>Task ID: <b id="taskId"></b></p>
-        <p>Estado: <b id="status"></b></p>
-        <progress id="progress" value="0" max="100"></progress>
-        <h3>Log:</h3>
         <pre id="log"></pre>
-        <div id="download-link-container"></div>
     </div>
     <script>
-        let taskId = null;
         let intervalId = null;
         async function startProcess() {
-            const urlsText = document.getElementById('urls').value;
-            const urls = urlsText.split('\n').filter(url => url.trim() !== '');
             if (urls.length === 0) {
                 alert('Por favor, ingresa al menos una URL.');
                 return;
             }
-            document.getElementById('status-container').style.display = 'block';
-            document.getElementById('status').innerText = 'Enviando...';
-            document.getElementById('download-link-container').innerHTML = '';
             const response = await fetch('/api/process', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ urls: urls })
             });
             const data = await response.json();
-            taskId = data.taskId;
-            document.getElementById('taskId').innerText = taskId;
-            intervalId = setInterval(checkStatus, 2000); // Revisar estado cada 2 segundos
         }
-        async function checkStatus() {
-            if (!taskId) return;
             const response = await fetch(`/api/status/${taskId}`);
             const data = await response.json();
-            document.getElementById('status').innerText = data.status;
-            document.getElementById('progress').value = data.progress;
-            document.getElementById('log').innerText = data.log;
             if (data.status === 'completed' || data.status === 'failed') {
                 clearInterval(intervalId);
-                if(data.fileUrl) {
                     const link = document.createElement('a');
                     link.href = data.fileUrl;
-                    link.textContent = 'Descargar Video Final';
                     link.setAttribute('download', '');
-                    document.getElementById('download-link-container').appendChild(link);
                 }
             }
         }

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unir Videos</title>
     <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; background-color: #f8f9fa; color: #333; }
+        h1 { color: #007bff; }
+        textarea { width: 100%; min-height: 120px; margin-bottom: 1rem; padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-size: 16px; }
+        button { display: block; width: 100%; padding: 12px 20px; font-size: 18px; font-weight: bold; color: white; background-color: #007bff; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
+        button:disabled { background-color: #6c757d; cursor: not-allowed; }
+        #status-container { margin-top: 1.5rem; border: 1px solid #e9ecef; border-radius: 8px; padding: 1.5rem; background: #fff; display: none; }
+        #log { white-space: pre-wrap; font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace; background-color: #e9ecef; padding: 1rem; border-radius: 4px; max-height: 300px; overflow-y: auto; }
+        progress { width: 100%; height: 12px; margin: 0.5rem 0; }
+        #download-link a { font-weight: bold; color: #28a745; text-decoration: none; }
     </style>
 </head>
 <body>
     <h1>Unir Videos desde URLs</h1>
+    <p>Pega una URL por línea. Se descargarán y unirán en un solo video en formato WebM.</p>
+    <textarea id="urls" placeholder="https://www.youtube.com/watch?v=..."></textarea>
+    <button id="process-btn" onclick="startProcess()">✨ Iniciar Proceso</button>
+    <div id="status-container">
         <h2>Estado del Proceso</h2>
+        <p>Progreso: <b id="status-text">En cola...</b></p>
+        <progress id="progress-bar" value="0" max="100"></progress>
+        <h3>Registro (Log):</h3>
         <pre id="log"></pre>
+        <div id="download-link"></div>
     </div>
     <script>
+        const processBtn = document.getElementById('process-btn');
+        const urlsTextarea = document.getElementById('urls');
+        const statusContainer = document.getElementById('status-container');
+        const statusText = document.getElementById('status-text');
+        const progressBar = document.getElementById('progress-bar');
+        const logPre = document.getElementById('log');
+        const downloadLinkDiv = document.getElementById('download-link');
         let intervalId = null;
         async function startProcess() {
+            const urls = urlsTextarea.value.split('\n').filter(url => url.trim() !== '');
             if (urls.length === 0) {
                 alert('Por favor, ingresa al menos una URL.');
                 return;
             }
+            // Deshabilitar botón y mostrar estado
+            processBtn.disabled = true;
+            processBtn.textContent = 'Procesando... ⏳';
+            statusContainer.style.display = 'block';
+            downloadLinkDiv.innerHTML = '';
             const response = await fetch('/api/process', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ urls })
             });
             const data = await response.json();
+            intervalId = setInterval(() => checkStatus(data.taskId), 2000);
         }
+        async function checkStatus(taskId) {
             const response = await fetch(`/api/status/${taskId}`);
             const data = await response.json();
+            statusText.textContent = data.status;
+            progressBar.value = data.progress;
+            logPre.textContent = data.log;
             if (data.status === 'completed' || data.status === 'failed') {
                 clearInterval(intervalId);
+                processBtn.disabled = false;
+                processBtn.textContent = '✨ Iniciar Proceso';
+                if (data.status === 'completed' && data.fileUrl) {
                     const link = document.createElement('a');
                     link.href = data.fileUrl;
+                    link.textContent = '✅ Descargar Video Final';
                     link.setAttribute('download', '');
+                    downloadLinkDiv.appendChild(link);
+                } else {
+                    downloadLinkDiv.innerHTML = '<p style="color:red;">❌ El proceso ha fallado.</p>';
                 }
             }
         }