Update templates/index.html

templates/index.html

@@ -175,6 +175,13 @@
             box-shadow: 0 5px 15px rgba(63, 55, 201, 0.3);
         }
 
+        .btn:disabled {
+            background: var(--gray);
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
         .btn i {
             font-size: 1.2rem;
         }
@@ -201,71 +208,63 @@
             border: 1px solid rgba(247, 37, 133, 0.2);
         }
 
-        .result-section {
-            margin-top: 2rem;
-            padding: 1.5rem;
-            background: #f8f9fe;
-            border-radius: var(--border-radius);
+        .progress-container {
+            margin: 2rem 0;
             display: none;
         }
 
-        .result-title {
-            font-size: 1.3rem;
-            margin-bottom: 1rem;
-            color: var(--secondary);
+        .progress-header {
             display: flex;
-            align-items: center;
-            gap: 0.5rem;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
         }
 
-        .result-title i {
-            font-size: 1.2rem;
+        .progress-bar {
+            height: 10px;
+            background: #e9ecef;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: var(--primary);
+            width: 0%;
+            transition: width 0.3s ease;
+        }
+
+        .progress-details {
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            color: var(--gray);
+        }
+
+        .result-container {
+            display: none;
+            margin-top: 2rem;
+            animation: fadeIn 0.5s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
 
         .result-video {
             width: 100%;
             border-radius: var(--border-radius);
             margin-bottom: 1.5rem;
-            aspect-ratio: 16 / 9;
+            aspect-ratio: 16/9;
             background: black;
         }
 
-        .script-box {
+        .script-container {
             background: var(--dark);
             color: white;
             padding: 1.5rem;
             border-radius: var(--border-radius);
             max-height: 300px;
             overflow-y: auto;
-            font-family: monospace;
-            white-space: pre-wrap;
-            line-height: 1.6;
-        }
-
-        .loader {
-            display: none;
-            text-align: center;
-            padding: 2rem;
-        }
-
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(67, 97, 238, 0.2);
-            border-top: 5px solid var(--primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 1rem;
-        }
-
-        .loading-text {
-            font-weight: 500;
-            color: var(--dark);
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
         }
 
         @media (max-width: 768px) {
@@ -300,12 +299,7 @@
         </header>
 
         <div class="content">
-            <div id="alert" class="alert" style="display: none;">
-                <i class="fas fa-info-circle"></i>
-                <span id="alert-message"></span>
-            </div>
-
-            <form id="dubbing-form">
+            <div id="upload-container">
                 <div class="upload-area" id="upload-area">
                     <div class="upload-icon">
                         <i class="fas fa-cloud-upload-alt"></i>
@@ -313,7 +307,7 @@
                     <h3>Drag & Drop Video File</h3>
                     <p>or click to browse (MP4, MOV, WEBM, AVI)</p>
                     <div id="file-info" class="file-info">No file selected</div>
-                    <input type="file" id="video" name="video" class="file-input" accept="video/*">
+                    <input type="file" id="video-input" class="file-input" accept="video/*">
                 </div>
 
                 <div class="options">
@@ -322,15 +316,13 @@
                             <i class="fas fa-microphone"></i>
                             Voice Style
                         </div>
-                        <div class="radio-group">
-                            <label class="radio-option">
-                                <input type="radio" name="voice" value="male" checked>
-                                Male Voice
-                            </label>
-                            <label class="radio-option">
-                                <input type="radio" name="voice" value="female">
-                                Female Voice
-                            </label>
+                        <div class="radio-group" id="voice-options">
+                            {% for voice, value in voices.items() %}
+                                <label class="radio-option">
+                                    <input type="radio" name="voice" value="{{ value }}" {% if loop.first %}checked{% endif %}>
+                                    {{ voice }}
+                                </label>
+                            {% endfor %}
                         </div>
                     </div>
 
@@ -341,77 +333,97 @@
                         </div>
                         <div class="checkbox-group">
                             <label class="checkbox-option">
-                                <input type="checkbox" name="cheerful">
+                                <input type="checkbox" name="tone" id="tone-option">
                                 Cheerful Tone
                             </label>
                         </div>
                     </div>
                 </div>
 
-                <button type="submit" class="btn">
+                <button id="process-btn" class="btn" disabled>
                     <i class="fas fa-magic"></i>
                     Generate Dubbed Video
                 </button>
-            </form>
-
-            <div class="loader" id="loader">
-                <div class="spinner"></div>
-                <p class="loading-text">Processing your video. Please wait...</p>
             </div>
 
-            <div class="result-section" id="result-section">
-                <div class="result-title">
-                    <i class="fas fa-video"></i>
-                    Your Dubbed Video
+            <div class="progress-container" id="progress-container">
+                <div class="progress-header">
+                    <span>Processing your video</span>
+                    <span id="eta">Estimating time...</span>
+                </div>
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress-fill"></div>
                 </div>
+                <div class="progress-details" id="progress-message">
+                    Preparing to process your video...
+                </div>
+            </div>
+
+            <div class="result-container" id="result-container">
+                <h2>Your Dubbed Video</h2>
                 <video controls class="result-video" id="result-video">
                     Your browser does not support the video tag.
                 </video>
                 
-                <div class="result-title">
-                    <i class="fas fa-scroll"></i>
-                    Generated Script
-                </div>
-                <div class="script-box" id="script-box"></div>
+                <h2>Generated Script</h2>
+                <div class="script-container" id="script-container"></div>
             </div>
         </div>
     </div>
 
     <script>
-        const form = document.getElementById('dubbing-form');
-        const loader = document.getElementById('loader');
+        // DOM Elements
         const uploadArea = document.getElementById('upload-area');
-        const fileInput = document.getElementById('video');
+        const fileInput = document.getElementById('video-input');
         const fileInfo = document.getElementById('file-info');
-        const resultSection = document.getElementById('result-section');
+        const processBtn = document.getElementById('process-btn');
+        const uploadContainer = document.getElementById('upload-container');
+        const progressContainer = document.getElementById('progress-container');
+        const progressFill = document.getElementById('progress-fill');
+        const progressMessage = document.getElementById('progress-message');
+        const etaDisplay = document.getElementById('eta');
+        const resultContainer = document.getElementById('result-container');
         const resultVideo = document.getElementById('result-video');
-        const scriptBox = document.getElementById('script-box');
-        const alertBox = document.getElementById('alert');
-        const alertMessage = document.getElementById('alert-message');
+        const scriptContainer = document.getElementById('script-container');
+
+        // State
+        let currentTaskId = null;
+        let statusCheckInterval = null;
+
+        // Event Listeners
+        fileInput.addEventListener('change', handleFileSelect);
+        uploadArea.addEventListener('dragover', handleDragOver);
+        uploadArea.addEventListener('dragleave', handleDragLeave);
+        uploadArea.addEventListener('drop', handleDrop);
+        processBtn.addEventListener('click', startProcessing);
 
-        // Handle file selection
-        fileInput.addEventListener('change', function() {
+        // Functions
+        function handleFileSelect() {
             if (this.files.length > 0) {
                 fileInfo.textContent = this.files[0].name;
                 uploadArea.style.borderColor = '#4361ee';
                 uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
-                resultSection.style.display = 'none';
+                processBtn.disabled = false;
+                
+                // Hide any previous results
+                resultContainer.style.display = 'none';
             }
-        });
+        }
 
-        // Drag and drop functionality
-        uploadArea.addEventListener('dragover', (e) => {
+        function handleDragOver(e) {
             e.preventDefault();
             uploadArea.style.borderColor = '#4361ee';
             uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.1)';
-        });
+        }
 
-        uploadArea.addEventListener('dragleave', () => {
+        function handleDragLeave() {
             uploadArea.style.borderColor = fileInput.files.length > 0 ? '#4361ee' : '#4895ef';
-            uploadArea.style.backgroundColor = fileInput.files.length > 0 ? 'rgba(67, 97, 238, 0.05)' : 'transparent';
-        });
+            uploadArea.style.backgroundColor = fileInput.files.length > 0 
+                ? 'rgba(67, 97, 238, 0.05)' 
+                : 'transparent';
+        }
 
-        uploadArea.addEventListener('drop', (e) => {
+        function handleDrop(e) {
             e.preventDefault();
             uploadArea.style.borderColor = '#4361ee';
             uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
@@ -419,61 +431,116 @@
             if (e.dataTransfer.files.length) {
                 fileInput.files = e.dataTransfer.files;
                 fileInfo.textContent = e.dataTransfer.files[0].name;
-                resultSection.style.display = 'none';
+                processBtn.disabled = false;
+                
+                // Hide any previous results
+                resultContainer.style.display = 'none';
             }
-        });
+        }
 
-        // Form submission
-        form.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            
+        function startProcessing() {
             if (!fileInput.files.length) {
-                showAlert('Please select a video file first.', 'error');
+                alert('Please select a video file first.');
                 return;
             }
 
-            try {
-                form.style.display = 'none';
-                loader.style.display = 'block';
-                alertBox.style.display = 'none';
-
-                const formData = new FormData();
-                formData.append('file', fileInput.files[0]);
-                formData.append('voice', document.querySelector('input[name="voice"]:checked').value);
-                formData.append('cheerful', document.querySelector('input[name="cheerful"]').checked);
+            // Get processing options
+            const voice = document.querySelector('input[name="voice"]:checked').value;
+            const cheerful = document.getElementById('tone-option').checked;
+
+            // Prepare form data
+            const formData = new FormData();
+            formData.append('video', fileInput.files[0]);
+            formData.append('voice', voice);
+            formData.append('cheerful', cheerful);
+
+            // Show progress UI
+            uploadContainer.style.display = 'none';
+            progressContainer.style.display = 'block';
+            progressFill.style.width = '0%';
+            progressMessage.textContent = 'Preparing to process your video...';
+
+            // Start processing
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) {
+                    throw new Error(data.error);
+                }
+                currentTaskId = data.task_id;
+                startStatusChecking();
+            })
+            .catch(error => {
+                showError(error.message);
+            });
+        }
+
+        function startStatusChecking() {
+            // Clear any existing interval
+            if (statusCheckInterval) {
+                clearInterval(statusCheckInterval);
+            }
 
-                const response = await fetch('/process', {
-                    method: 'POST',
-                    body: formData
-                });
+            // Check status every 3 seconds
+            statusCheckInterval = setInterval(() => {
+                fetch(`/status/${currentTaskId}`)
+                    .then(response => response.json())
+                    .then(updateStatus)
+                    .catch(error => {
+                        console.error('Status check failed:', error);
+                    });
+            }, 3000);
+        }
+
+        function updateStatus(status) {
+            if (status.error) {
+                showError(status.error);
+                clearInterval(statusCheckInterval);
+                return;
+            }
 
-                if (!response.ok) {
-                    const error = await response.json();
-                    throw new Error(error.detail || 'Processing failed');
-                }
+            // Update progress
+            progressFill.style.width = `${status.progress}%`;
+            progressMessage.textContent = status.message;
+            
+            // Update ETA if available
+            if (status.eta) {
+                etaDisplay.textContent = `ETA: ${status.eta}`;
+            }
 
-                const data = await response.json();
+            // Handle completion
+            if (status.status === 'complete') {
+                clearInterval(statusCheckInterval);
+                progressMessage.textContent = 'Processing complete!';
                 
-                resultVideo.src = data.video_url;
-                scriptBox.textContent = data.script;
-                resultSection.style.display = 'block';
+                // Show results
+                resultVideo.src = status.result_url;
+                scriptContainer.textContent = status.script;
+                progressContainer.style.display = 'none';
+                resultContainer.style.display = 'block';
                 
-            } catch (error) {
-                showAlert(error.message, 'error');
-                console.error('Processing error:', error);
-            } finally {
-                form.style.display = 'block';
-                loader.style.display = 'none';
+                // Reset for next upload
+                setTimeout(() => {
+                    uploadContainer.style.display = 'block';
+                    fileInput.value = '';
+                    fileInfo.textContent = 'No file selected';
+                    processBtn.disabled = true;
+                    uploadArea.style.borderColor = '#4895ef';
+                    uploadArea.style.backgroundColor = 'transparent';
+                }, 5000);
+            } else if (status.status === 'error') {
+                showError(status.message);
+                clearInterval(statusCheckInterval);
             }
-        });
+        }
 
-        function showAlert(message, type) {
-            alertMessage.textContent = message;
-            alertBox.className = `alert alert-${type}`;
-            alertBox.style.display = 'flex';
-            
-            // Scroll to alert
-            alertBox.scrollIntoView({ behavior: 'smooth' });
+        function showError(message) {
+            progressContainer.style.display = 'none';
+            uploadContainer.style.display = 'block';
+            alert(`Error: ${message}`);
         }
     </script>
 </body>