Update templates/index.html

templates/index.html

@@ -16,6 +16,7 @@
             --gray: #6c757d;
             --success: #4cc9f0;
             --error: #f72585;
+            --warning: #ffc107;
             --border-radius: 12px;
             --shadow: 0 10px 30px rgba(0,0,0,0.1);
             --transition: all 0.3s ease;
@@ -118,38 +119,25 @@
             font-weight: 600;
             margin-bottom: 0.8rem;
             color: var(--secondary);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .option-title i {
-            font-size: 1.1rem;
         }
 
-        .radio-group, .checkbox-group {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
+        select, .radio-group {
+            width: 100%;
+            padding: 0.8rem;
+            border-radius: 8px;
+            border: 1px solid #dee2e6;
+            margin-bottom: 1rem;
+            background: white;
         }
 
-        .radio-option, .checkbox-option {
+        .radio-option {
             display: flex;
             align-items: center;
-            gap: 0.5rem;
-            background: white;
-            padding: 0.8rem 1.2rem;
-            border-radius: 8px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-            transition: var(--transition);
-        }
-
-        .radio-option:hover, .checkbox-option:hover {
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            margin-bottom: 0.5rem;
         }
 
-        .radio-option input, .checkbox-option input {
-            accent-color: var(--primary);
+        .radio-option input {
+            margin-right: 0.5rem;
         }
 
         .btn {
@@ -182,32 +170,6 @@
             box-shadow: none;
         }
 
-        .btn i {
-            font-size: 1.2rem;
-        }
-
-        .alert {
-            padding: 1rem;
-            border-radius: var(--border-radius);
-            margin-bottom: 1.5rem;
-            font-weight: 500;
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
-        }
-
-        .alert-success {
-            background: rgba(76, 201, 240, 0.2);
-            color: #0a9396;
-            border: 1px solid rgba(76, 201, 240, 0.3);
-        }
-
-        .alert-error {
-            background: rgba(247, 37, 133, 0.1);
-            color: var(--error);
-            border: 1px solid rgba(247, 37, 133, 0.2);
-        }
-
         .progress-container {
             margin: 2rem 0;
             display: none;
@@ -239,14 +201,6 @@
             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;
@@ -273,18 +227,31 @@
             border-radius: var(--border-radius);
             max-height: 300px;
             overflow-y: auto;
-            font-family: monospace;
             white-space: pre-wrap;
-            line-height: 1.6;
         }
 
-        .duration-notice {
-            margin-top: 1rem;
-            padding: 0.8rem;
-            background: #fff8e1;
-            border-radius: 8px;
-            border-left: 4px solid #ffc107;
-            font-size: 0.9rem;
+        .notice {
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+
+        .notice-api {
+            background: rgba(67, 97, 238, 0.1);
+            border-left: 4px solid var(--primary);
+        }
+
+        .notice-gtts {
+            background: rgba(255, 193, 7, 0.1);
+            border-left: 4px solid var(--warning);
+        }
+
+        .notice-error {
+            background: rgba(247, 37, 133, 0.1);
+            border-left: 4px solid var(--error);
         }
 
         @media (max-width: 768px) {
@@ -303,11 +270,6 @@
             .content {
                 padding: 1.5rem;
             }
-            
-            .radio-group, .checkbox-group {
-                flex-direction: column;
-                gap: 0.8rem;
-            }
         }
     </style>
 </head>
@@ -315,7 +277,7 @@
     <div class="container">
         <header>
             <h1>AI Video Dubbing</h1>
-            <p class="subtitle">Transform your videos with AI-powered Tamil dubbing</p>
+            <p class="subtitle">Professional Video Dubbing with AI</p>
         </header>
 
         <div class="content">
@@ -325,38 +287,64 @@
                         <i class="fas fa-cloud-upload-alt"></i>
                     </div>
                     <h3>Drag & Drop Video File</h3>
-                    <p>or click to browse (MP4, MOV, WEBM, AVI)</p>
+                    <p>Supported formats: 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/*">
                 </div>
 
                 <div class="options">
                     <div class="option-group">
-                        <div class="option-title">
-                            <i class="fas fa-microphone"></i>
-                            Voice Style
-                        </div>
-                        <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>
+                        <div class="option-title">Target Language</div>
+                        <select id="language-select">
+                            {% for language in languages %}
+                                <option value="{{ language }}" 
+                                    {% if language == default_language %}selected{% endif %}>
+                                    {{ language }}
+                                </option>
                             {% endfor %}
-                        </div>
+                        </select>
                     </div>
 
                     <div class="option-group">
-                        <div class="option-title">
-                            <i class="fas fa-adjust"></i>
-                            Tone Options
-                        </div>
-                        <div class="checkbox-group">
-                            <label class="checkbox-option">
-                                <input type="checkbox" name="tone" id="tone-option">
-                                Cheerful Tone
+                        <div class="option-title">Voice Type</div>
+                        <select id="voice-type">
+                            {% for voice_type in voice_types %}
+                                <option value="{{ voice_type }}">{{ voice_type }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <div class="option-group">
+                        <div class="option-title">TTS Provider</div>
+                        <div class="radio-group">
+                            <label class="radio-option">
+                                <input type="radio" name="tts_provider" value="gtts" checked>
+                                gTTS (Free)
+                            </label>
+                            {% if tts_api_available %}
+                            <label class="radio-option">
+                                <input type="radio" name="tts_provider" value="api">
+                                Premium TTS API
                             </label>
+                            {% endif %}
+                        </div>
+                        {% if tts_api_available %}
+                        <div class="notice notice-api">
+                            <i class="fas fa-info-circle"></i>
+                            <div>
+                                <strong>Premium TTS API</strong>
+                                <p>Higher quality with expressive narration</p>
+                            </div>
                         </div>
+                        {% else %}
+                        <div class="notice notice-gtts">
+                            <i class="fas fa-info-circle"></i>
+                            <div>
+                                <strong>gTTS</strong>
+                                <p>Basic text-to-speech with clean narration</p>
+                            </div>
+                        </div>
+                        {% endif %}
                     </div>
                 </div>
 
@@ -364,17 +352,12 @@
                     <i class="fas fa-magic"></i>
                     Generate Dubbed Video
                 </button>
-                
-                <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>
 
             <div class="progress-container" id="progress-container">
                 <div class="progress-header">
-                    <span>Processing your video</span>
-                    <span id="eta">Estimating time...</span>
+                    <span>Processing Status</span>
+                    <span id="progress-percent">0%</span>
                 </div>
                 <div class="progress-bar">
                     <div class="progress-fill" id="progress-fill"></div>
@@ -382,10 +365,6 @@
                 <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">
@@ -397,12 +376,10 @@
                 <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>
+                <button id="new-video-btn" class="btn" style="margin-top: 1.5rem;">
+                    <i class="fas fa-redo"></i>
+                    Process Another Video
+                </button>
             </div>
         </div>
     </div>
@@ -417,21 +394,17 @@
         const progressContainer = document.getElementById('progress-container');
         const progressFill = document.getElementById('progress-fill');
         const progressMessage = document.getElementById('progress-message');
-        const etaDisplay = document.getElementById('eta');
+        const progressPercent = document.getElementById('progress-percent');
         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 languageSelect = document.getElementById('language-select');
+        const voiceTypeSelect = document.getElementById('voice-type');
         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);
@@ -448,9 +421,8 @@
                 uploadArea.style.borderColor = '#4361ee';
                 uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
                 processBtn.disabled = false;
-                durationNotice.style.display = 'block';
                 
-                // Hide any previous results
+                // Hide previous results
                 resultContainer.style.display = 'none';
             }
         }
@@ -477,38 +449,36 @@
                 fileInput.files = e.dataTransfer.files;
                 fileInfo.textContent = e.dataTransfer.files[0].name;
                 processBtn.disabled = false;
-                durationNotice.style.display = 'block';
                 
-                // Hide any previous results
+                // Hide previous results
                 resultContainer.style.display = 'none';
             }
         }
 
         function startProcessing() {
             if (!fileInput.files.length) {
-                alert('Please select a video file first.');
+                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;
+            const language = languageSelect.value;
+            const voiceType = voiceTypeSelect.value;
+            const ttsProvider = document.querySelector('input[name="tts_provider"]:checked').value;
 
             // Prepare form data
             const formData = new FormData();
             formData.append('video', fileInput.files[0]);
-            formData.append('voice', voice);
-            formData.append('cheerful', cheerful);
+            formData.append('language', language);
+            formData.append('voice_type', voiceType);
+            formData.append('tts_provider', ttsProvider);
 
             // 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();
+            progressPercent.textContent = '0%';
+            progressMessage.textContent = 'Starting processing...';
 
             // Start processing
             fetch('/upload', {
@@ -521,7 +491,6 @@
                     throw new Error(data.error);
                 }
                 currentTaskId = data.task_id;
-                videoDuration = data.video_duration || 0;
                 startStatusChecking();
             })
             .catch(error => {
@@ -535,7 +504,7 @@
                 clearInterval(statusCheckInterval);
             }
 
-            // Check status every 3 seconds
+            // Check status every 2 seconds
             statusCheckInterval = setInterval(() => {
                 fetch(`/status/${currentTaskId}`)
                     .then(response => response.json())
@@ -543,66 +512,38 @@
                     .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')}`;
+            }, 2000);
         }
 
         function updateStatus(status) {
             if (status.error) {
-                showError(status.error);
-                clearInterval(statusCheckInterval);
+                showError(status.error_details || status.message);
                 return;
             }
 
             // Update progress
-            progressFill.style.width = `${status.progress}%`;
+            const progress = status.progress || 0;
+            progressFill.style.width = `${progress}%`;
+            progressPercent.textContent = `${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!';
+                progressContainer.style.display = 'none';
                 
                 // 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);
+            uploadContainer.style.display = 'block';
+            progressContainer.style.display = 'none';
+            resultContainer.style.display = 'none';
         }
 
         function resetForm() {
@@ -613,10 +554,10 @@
             scriptContainer.textContent = '';
             resultContainer.style.display = 'none';
             uploadContainer.style.display = 'block';
+            progressContainer.style.display = 'none';
             processBtn.disabled = true;
             uploadArea.style.borderColor = '#4895ef';
             uploadArea.style.backgroundColor = 'transparent';
-            durationNotice.style.display = 'none';
         }
     </script>
 </body>