Update templates/index.html

templates/index.html

@@ -300,18 +300,12 @@
         </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 %}
+            <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" action="/process" method="POST" enctype="multipart/form-data">
+            <form id="dubbing-form">
                 <div class="upload-area" id="upload-area">
                     <div class="upload-icon">
                         <i class="fas fa-cloud-upload-alt"></i>
@@ -329,12 +323,14 @@
                             Voice Style
                         </div>
                         <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 %}>
-                                    {{ voice }}
-                                </label>
-                            {% endfor %}
+                            <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>
                     </div>
 
@@ -345,7 +341,7 @@
                         </div>
                         <div class="checkbox-group">
                             <label class="checkbox-option">
-                                <input type="checkbox" name="tone">
+                                <input type="checkbox" name="cheerful">
                                 Cheerful Tone
                             </label>
                         </div>
@@ -363,14 +359,12 @@
                 <p class="loading-text">Processing your video. Please wait...</p>
             </div>
 
-            {% if result_video %}
-            <div class="result-section" id="result-section" style="display: block;">
+            <div class="result-section" id="result-section">
                 <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">
+                <video controls class="result-video" id="result-video">
                     Your browser does not support the video tag.
                 </video>
                 
@@ -378,9 +372,8 @@
                     <i class="fas fa-scroll"></i>
                     Generated Script
                 </div>
-                <div class="script-box">{{ script }}</div>
+                <div class="script-box" id="script-box"></div>
             </div>
-            {% endif %}
         </div>
     </div>
 
@@ -391,6 +384,10 @@
         const fileInput = document.getElementById('video');
         const fileInfo = document.getElementById('file-info');
         const resultSection = document.getElementById('result-section');
+        const resultVideo = document.getElementById('result-video');
+        const scriptBox = document.getElementById('script-box');
+        const alertBox = document.getElementById('alert');
+        const alertMessage = document.getElementById('alert-message');
 
         // Handle file selection
         fileInput.addEventListener('change', function() {
@@ -398,11 +395,7 @@
                 fileInfo.textContent = this.files[0].name;
                 uploadArea.style.borderColor = '#4361ee';
                 uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
-                
-                // Hide any previous results
-                if (resultSection) {
-                    resultSection.style.display = 'none';
-                }
+                resultSection.style.display = 'none';
             }
         });
 
@@ -426,24 +419,62 @@
             if (e.dataTransfer.files.length) {
                 fileInput.files = e.dataTransfer.files;
                 fileInfo.textContent = e.dataTransfer.files[0].name;
-                
-                // Hide any previous results
-                if (resultSection) {
-                    resultSection.style.display = 'none';
-                }
+                resultSection.style.display = 'none';
             }
         });
 
         // Form submission
-        form.addEventListener('submit', function(e) {
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            
             if (!fileInput.files.length) {
-                e.preventDefault();
-                alert('Please select a video file first.');
-            } else {
+                showAlert('Please select a video file first.', 'error');
+                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);
+
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Processing failed');
+                }
+
+                const data = await response.json();
+                
+                resultVideo.src = data.video_url;
+                scriptBox.textContent = data.script;
+                resultSection.style.display = 'block';
+                
+            } catch (error) {
+                showAlert(error.message, 'error');
+                console.error('Processing error:', error);
+            } finally {
+                form.style.display = 'block';
+                loader.style.display = 'none';
             }
         });
+
+        function showAlert(message, type) {
+            alertMessage.textContent = message;
+            alertBox.className = `alert alert-${type}`;
+            alertBox.style.display = 'flex';
+            
+            // Scroll to alert
+            alertBox.scrollIntoView({ behavior: 'smooth' });
+        }
     </script>
 </body>
 </html>