Update templates/index.html

templates/index.html

@@ -175,13 +175,6 @@
             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;
         }
@@ -208,63 +201,71 @@
             border: 1px solid rgba(247, 37, 133, 0.2);
         }
 
-        .progress-container {
-            margin: 2rem 0;
+        .result-section {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background: #f8f9fe;
+            border-radius: var(--border-radius);
             display: none;
         }
 
-        .progress-header {
+        .result-title {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: var(--secondary);
             display: flex;
-            justify-content: space-between;
-            margin-bottom: 0.5rem;
-        }
-
-        .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;
+            align-items: center;
+            gap: 0.5rem;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
+        .result-title i {
+            font-size: 1.2rem;
         }
 
         .result-video {
             width: 100%;
             border-radius: var(--border-radius);
             margin-bottom: 1.5rem;
-            aspect-ratio: 16/9;
+            aspect-ratio: 16 / 9;
             background: black;
         }
 
-        .script-container {
+        .script-box {
             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) {
@@ -299,7 +300,18 @@
         </header>
 
         <div class="content">
-            <div id="upload-container">
+            {% 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 class="upload-area" id="upload-area">
                     <div class="upload-icon">
                         <i class="fas fa-cloud-upload-alt"></i>
@@ -307,7 +319,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-input" class="file-input" accept="video/*">
+                    <input type="file" id="video" name="video" class="file-input" accept="video/*">
                 </div>
 
                 <div class="options">
@@ -316,7 +328,7 @@
                             <i class="fas fa-microphone"></i>
                             Voice Style
                         </div>
-                        <div class="radio-group" id="voice-options">
+                        <div class="radio-group">
                             {% for voice, value in voices.items() %}
                                 <label class="radio-option">
                                     <input type="radio" name="voice" value="{{ value }}" {% if loop.first %}checked{% endif %}>
@@ -333,97 +345,80 @@
                         </div>
                         <div class="checkbox-group">
                             <label class="checkbox-option">
-                                <input type="checkbox" name="tone" id="tone-option">
+                                <input type="checkbox" name="tone">
                                 Cheerful Tone
                             </label>
                         </div>
                     </div>
                 </div>
 
-                <button id="process-btn" class="btn" disabled>
+                <button type="submit" class="btn">
                     <i class="fas fa-magic"></i>
                     Generate Dubbed Video
                 </button>
-            </div>
+            </form>
 
-            <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 class="loader" id="loader">
+                <div class="spinner"></div>
+                <p class="loading-text">Processing your video. Please wait...</p>
             </div>
 
-            <div class="result-container" id="result-container">
-                <h2>Your Dubbed Video</h2>
-                <video controls class="result-video" id="result-video">
+            {% 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>
+                <video controls class="result-video">
+                    <source src="{{ result_video }}" type="video/mp4">
                     Your browser does not support the video tag.
                 </video>
                 
-                <h2>Generated Script</h2>
-                <div class="script-container" id="script-container"></div>
+                <div class="result-title">
+                    <i class="fas fa-scroll"></i>
+                    Generated Script
+                </div>
+                <div class="script-box">{{ script }}</div>
             </div>
+            {% endif %}
         </div>
     </div>
 
     <script>
-        // DOM Elements
+        const form = document.getElementById('dubbing-form');
+        const loader = document.getElementById('loader');
         const uploadArea = document.getElementById('upload-area');
-        const fileInput = document.getElementById('video-input');
+        const fileInput = document.getElementById('video');
         const fileInfo = document.getElementById('file-info');
-        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');
-
-        // 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);
-
-        // Functions
-        function handleFileSelect() {
+        const resultSection = document.getElementById('result-section');
+
+        // Handle file selection
+        fileInput.addEventListener('change', function() {
             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;
                 
                 // Hide any previous results
-                resultContainer.style.display = 'none';
+                if (resultSection) {
+                    resultSection.style.display = 'none';
+                }
             }
-        }
+        });
 
-        function handleDragOver(e) {
+        // Drag and drop functionality
+        uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
             uploadArea.style.borderColor = '#4361ee';
             uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.1)';
-        }
+        });
 
-        function handleDragLeave() {
+        uploadArea.addEventListener('dragleave', () => {
             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';
+        });
 
-        function handleDrop(e) {
+        uploadArea.addEventListener('drop', (e) => {
             e.preventDefault();
             uploadArea.style.borderColor = '#4361ee';
             uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
@@ -431,117 +426,24 @@
             if (e.dataTransfer.files.length) {
                 fileInput.files = e.dataTransfer.files;
                 fileInfo.textContent = e.dataTransfer.files[0].name;
-                processBtn.disabled = false;
                 
                 // Hide any previous results
-                resultContainer.style.display = 'none';
+                if (resultSection) {
+                    resultSection.style.display = 'none';
+                }
             }
-        }
+        });
 
-        function startProcessing() {
+        // Form submission
+        form.addEventListener('submit', function(e) {
             if (!fileInput.files.length) {
+                e.preventDefault();
                 alert('Please select a video file first.');
-                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...';
-
-            // 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);
-            }
-
-            // 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;
-            }
-
-            // Update progress
-            progressFill.style.width = `${status.progress}%`;
-            progressMessage.textContent = status.message;
-            
-            // Update ETA if available
-            if (status.eta) {
-                etaDisplay.textContent = `ETA: ${status.eta}`;
+            } else {
+                form.style.display = 'none';
+                loader.style.display = 'block';
             }
-
-            // Handle completion
-            if (status.status === 'complete') {
-                clearInterval(statusCheckInterval);
-                progressMessage.textContent = 'Processing complete!';
-                
-                // Show results
-                resultVideo.src = status.result_url;
-                scriptContainer.textContent = status.script;
-                progressContainer.style.display = 'none';
-                resultContainer.style.display = 'block';
-                
-                // 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 showError(message) {
-            progressContainer.style.display = 'none';
-            uploadContainer.style.display = 'block';
-            alert(`Error: ${message}`);
-        }
+        });
     </script>
 </body>
 </html>