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,36 +208,65 @@
             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);
+        }
+
+        .time-estimate {
+            margin-top: 0.5rem;
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            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;
@@ -242,30 +278,13 @@
             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); }
+        .duration-notice {
+            margin-top: 1rem;
+            padding: 0.8rem;
+            background: #fff8e1;
+            border-radius: 8px;
+            border-left: 4px solid #ffc107;
+            font-size: 0.9rem;
         }
 
         @media (max-width: 768px) {
@@ -300,18 +319,7 @@
         </header>
 
         <div class="content">
-            {% with messages = get_flashed_messages(with_categories=true) %}
-                {% if messages %}
-                    {% for category, message in messages %}
-                        <div class="alert alert-{{ category }}">
-                            <i class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i>
-                            {{ message }}
-                        </div>
-                    {% endfor %}
-                {% endif %}
-            {% endwith %}
-
-            <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
+            <div id="upload-container">
                 <div class="upload-area" id="upload-area">
                     <div class="upload-icon">
                         <i class="fas fa-cloud-upload-alt"></i>
@@ -319,7 +327,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">
@@ -328,7 +336,7 @@
                             <i class="fas fa-microphone"></i>
                             Voice Style
                         </div>
-                        <div class="radio-group">
+                        <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 %}>
@@ -345,80 +353,122 @@
                         </div>
                         <div class="checkbox-group">
                             <label class="checkbox-option">
-                                <input type="checkbox" name="tone">
+                                <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 id="duration-notice" class="duration-notice" style="display: none;">
+                    <i class="fas fa-clock"></i>
+                    Note: Processing time is approximately 1.5x the video duration
+                </div>
             </div>
 
-            {% if result_video %}
-            <div class="result-section" id="result-section" style="display: block;">
-                <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>
-                <video controls class="result-video">
-                    <source src="{{ result_video }}" type="video/mp4">
+                <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 class="time-estimate">
+                    <span id="elapsed-time">Elapsed: 0s</span>
+                    <span id="remaining-time">Remaining: Calculating...</span>
+                </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
+                <h2>Generated Script</h2>
+                <div class="script-container" id="script-container"></div>
+                
+                <div class="btn-container" style="margin-top: 1.5rem;">
+                    <button id="new-video-btn" class="btn">
+                        <i class="fas fa-sync-alt"></i>
+                        Process Another Video
+                    </button>
                 </div>
-                <div class="script-box">{{ script }}</div>
             </div>
-            {% endif %}
         </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');
-
-        // Handle file selection
-        fileInput.addEventListener('change', function() {
+        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 scriptContainer = document.getElementById('script-container');
+        const elapsedTimeDisplay = document.getElementById('elapsed-time');
+        const remainingTimeDisplay = document.getElementById('remaining-time');
+        const durationNotice = document.getElementById('duration-notice');
+        const newVideoBtn = document.getElementById('new-video-btn');
+
+        // State
+        let currentTaskId = null;
+        let statusCheckInterval = null;
+        let processingStartTime = 0;
+        let videoDuration = 0;
+        let elapsedTimer = null;
+
+        // Event Listeners
+        fileInput.addEventListener('change', handleFileSelect);
+        uploadArea.addEventListener('dragover', handleDragOver);
+        uploadArea.addEventListener('dragleave', handleDragLeave);
+        uploadArea.addEventListener('drop', handleDrop);
+        processBtn.addEventListener('click', startProcessing);
+        newVideoBtn.addEventListener('click', resetForm);
+
+        // 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)';
+                processBtn.disabled = false;
+                durationNotice.style.display = 'block';
                 
                 // Hide any previous results
-                if (resultSection) {
-                    resultSection.style.display = 'none';
-                }
+                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)';
@@ -426,24 +476,148 @@
             if (e.dataTransfer.files.length) {
                 fileInput.files = e.dataTransfer.files;
                 fileInfo.textContent = e.dataTransfer.files[0].name;
+                processBtn.disabled = false;
+                durationNotice.style.display = 'block';
                 
                 // Hide any previous results
-                if (resultSection) {
-                    resultSection.style.display = 'none';
-                }
+                resultContainer.style.display = 'none';
             }
-        });
+        }
 
-        // Form submission
-        form.addEventListener('submit', function(e) {
+        function startProcessing() {
             if (!fileInput.files.length) {
-                e.preventDefault();
                 alert('Please select a video file first.');
-            } else {
-                form.style.display = 'none';
-                loader.style.display = 'block';
+                return;
+            }
+
+            // 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...';
+            processingStartTime = Date.now();
+            
+            // Start elapsed timer
+            startElapsedTimer();
+
+            // 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;
+                videoDuration = data.video_duration || 0;
+                startStatusChecking();
+            })
+            .catch(error => {
+                showError(error.message);
+            });
+        }
+
+        function startStatusChecking() {
+            // Clear any existing interval
+            if (statusCheckInterval) {
+                clearInterval(statusCheckInterval);
+            }
+
+            // 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 startElapsedTimer() {
+            if (elapsedTimer) {
+                clearInterval(elapsedTimer);
+            }
+            
+            elapsedTimer = setInterval(() => {
+                const elapsedSeconds = Math.floor((Date.now() - processingStartTime) / 1000);
+                elapsedTimeDisplay.textContent = `Elapsed: ${formatTime(elapsedSeconds)}`;
+            }, 1000);
+        }
+
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+
+        function updateStatus(status) {
+            if (status.error) {
+                showError(status.error);
+                clearInterval(statusCheckInterval);
+                return;
             }
-        });
+
+            // Update progress
+            progressFill.style.width = `${status.progress}%`;
+            progressMessage.textContent = status.message;
+            
+            // Update ETA if available
+            if (status.eta) {
+                etaDisplay.textContent = `ETA: ${status.eta}`;
+                remainingTimeDisplay.textContent = `Remaining: ${status.eta}`;
+            }
+
+            // Handle completion
+            if (status.status === 'complete') {
+                clearInterval(statusCheckInterval);
+                clearInterval(elapsedTimer);
+                progressMessage.textContent = 'Processing complete!';
+                
+                // Show results
+                resultVideo.src = status.result_url;
+                scriptContainer.textContent = status.script;
+                progressContainer.style.display = 'none';
+                resultContainer.style.display = 'block';
+            } else if (status.status === 'error') {
+                showError(status.message);
+                clearInterval(statusCheckInterval);
+                clearInterval(elapsedTimer);
+            }
+        }
+
+        function showError(message) {
+            progressContainer.style.display = 'none';
+            uploadContainer.style.display = 'block';
+            alert(`Error: ${message}`);
+            clearInterval(elapsedTimer);
+        }
+
+        function resetForm() {
+            // Reset all elements
+            fileInput.value = '';
+            fileInfo.textContent = 'No file selected';
+            resultVideo.src = '';
+            scriptContainer.textContent = '';
+            resultContainer.style.display = 'none';
+            uploadContainer.style.display = 'block';
+            processBtn.disabled = true;
+            uploadArea.style.borderColor = '#4895ef';
+            uploadArea.style.backgroundColor = 'transparent';
+            durationNotice.style.display = 'none';
+        }
     </script>
 </body>
 </html>