Update templates/index.html

templates/index.html

@@ -16,7 +16,6 @@
             --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;
@@ -119,25 +118,38 @@
             font-weight: 600;
             margin-bottom: 0.8rem;
             color: var(--secondary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
-        select, .radio-group {
-            width: 100%;
-            padding: 0.8rem;
-            border-radius: 8px;
-            border: 1px solid #dee2e6;
-            margin-bottom: 1rem;
-            background: white;
+        .option-title i {
+            font-size: 1.1rem;
         }
 
-        .radio-option {
+        .radio-group, .checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .radio-option, .checkbox-option {
             display: flex;
             align-items: center;
-            margin-bottom: 0.5rem;
+            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);
         }
 
-        .radio-option input {
-            margin-right: 0.5rem;
+        .radio-option input, .checkbox-option input {
+            accent-color: var(--primary);
         }
 
         .btn {
@@ -163,95 +175,97 @@
             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;
         }
 
-        .progress-container {
-            margin: 2rem 0;
-            display: none;
-        }
-
-        .progress-header {
+        .alert {
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-bottom: 1.5rem;
+            font-weight: 500;
             display: flex;
-            justify-content: space-between;
-            margin-bottom: 0.5rem;
+            align-items: center;
+            gap: 0.8rem;
         }
 
-        .progress-bar {
-            height: 10px;
-            background: #e9ecef;
-            border-radius: 5px;
-            overflow: hidden;
+        .alert-success {
+            background: rgba(76, 201, 240, 0.2);
+            color: #0a9396;
+            border: 1px solid rgba(76, 201, 240, 0.3);
         }
 
-        .progress-fill {
-            height: 100%;
-            background: var(--primary);
-            width: 0%;
-            transition: width 0.3s ease;
+        .alert-error {
+            background: rgba(247, 37, 133, 0.1);
+            color: var(--error);
+            border: 1px solid rgba(247, 37, 133, 0.2);
         }
 
-        .progress-details {
-            margin-top: 1rem;
-            font-size: 0.9rem;
-            color: var(--gray);
+        .result-section {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background: #f8f9fe;
+            border-radius: var(--border-radius);
+            display: none;
         }
 
-        .result-container {
-            display: none;
-            margin-top: 2rem;
-            animation: fadeIn 0.5s ease;
+        .result-title {
+            font-size: 1.3rem;
+            margin-bottom: 1rem;
+            color: var(--secondary);
+            display: flex;
+            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;
         }
 
-        .notice {
-            padding: 1rem;
-            border-radius: var(--border-radius);
-            margin-bottom: 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.8rem;
+        .loader {
+            display: none;
+            text-align: center;
+            padding: 2rem;
         }
 
-        .notice-api {
-            background: rgba(67, 97, 238, 0.1);
-            border-left: 4px solid var(--primary);
+        .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;
         }
 
-        .notice-gtts {
-            background: rgba(255, 193, 7, 0.1);
-            border-left: 4px solid var(--warning);
+        .loading-text {
+            font-weight: 500;
+            color: var(--dark);
         }
 
-        .notice-error {
-            background: rgba(247, 37, 133, 0.1);
-            border-left: 4px solid var(--error);
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
 
         @media (max-width: 768px) {
@@ -270,6 +284,11 @@
             .content {
                 padding: 1.5rem;
             }
+            
+            .radio-group, .checkbox-group {
+                flex-direction: column;
+                gap: 0.8rem;
+            }
         }
     </style>
 </head>
@@ -277,170 +296,129 @@
     <div class="container">
         <header>
             <h1>AI Video Dubbing</h1>
-            <p class="subtitle">Professional Video Dubbing with AI</p>
+            <p class="subtitle">Transform your videos with AI-powered Tamil dubbing</p>
         </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>
                     </div>
                     <h3>Drag & Drop Video File</h3>
-                    <p>Supported formats: MP4, MOV, WEBM, AVI</p>
+                    <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">
                     <div class="option-group">
-                        <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 %}
-                        </select>
-                    </div>
-
-                    <div class="option-group">
-                        <div class="option-title">Voice Type</div>
-                        <select id="voice-type">
-                            {% for voice_type in voice_types %}
-                                <option value="{{ voice_type }}">{{ voice_type }}</option>
+                        <div class="option-title">
+                            <i class="fas fa-microphone"></i>
+                            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 %}
-                        </select>
+                        </div>
                     </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 class="option-title">
+                            <i class="fas fa-adjust"></i>
+                            Tone Options
                         </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 class="checkbox-group">
+                            <label class="checkbox-option">
+                                <input type="checkbox" name="tone">
+                                Cheerful Tone
+                            </label>
                         </div>
-                        {% endif %}
                     </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 Status</span>
-                    <span id="progress-percent">0%</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>
-                
-                <button id="new-video-btn" class="btn" style="margin-top: 1.5rem;">
-                    <i class="fas fa-redo"></i>
-                    Process Another Video
-                </button>
+                <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 progressPercent = document.getElementById('progress-percent');
-        const resultContainer = document.getElementById('result-container');
-        const resultVideo = document.getElementById('result-video');
-        const scriptContainer = document.getElementById('script-container');
-        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;
-
-        // 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() {
+        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 previous results
-                resultContainer.style.display = 'none';
+                // Hide any previous results
+                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)';
@@ -448,117 +426,24 @@
             if (e.dataTransfer.files.length) {
                 fileInput.files = e.dataTransfer.files;
                 fileInfo.textContent = e.dataTransfer.files[0].name;
-                processBtn.disabled = false;
                 
-                // Hide previous results
-                resultContainer.style.display = 'none';
-            }
-        }
-
-        function startProcessing() {
-            if (!fileInput.files.length) {
-                alert('Please select a video file first');
-                return;
-            }
-
-            // Get processing options
-            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('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%';
-            progressPercent.textContent = '0%';
-            progressMessage.textContent = 'Starting processing...';
-
-            // Start processing
-            fetch('/upload', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.error) {
-                    throw new Error(data.error);
+                // Hide any previous results
+                if (resultSection) {
+                    resultSection.style.display = 'none';
                 }
-                currentTaskId = data.task_id;
-                startStatusChecking();
-            })
-            .catch(error => {
-                showError(error.message);
-            });
-        }
-
-        function startStatusChecking() {
-            // Clear any existing interval
-            if (statusCheckInterval) {
-                clearInterval(statusCheckInterval);
-            }
-
-            // Check status every 2 seconds
-            statusCheckInterval = setInterval(() => {
-                fetch(`/status/${currentTaskId}`)
-                    .then(response => response.json())
-                    .then(updateStatus)
-                    .catch(error => {
-                        console.error('Status check failed:', error);
-                    });
-            }, 2000);
-        }
-
-        function updateStatus(status) {
-            if (status.error) {
-                showError(status.error_details || status.message);
-                return;
             }
+        });
 
-            // Update progress
-            const progress = status.progress || 0;
-            progressFill.style.width = `${progress}%`;
-            progressPercent.textContent = `${progress}%`;
-            progressMessage.textContent = status.message;
-
-            // Handle completion
-            if (status.status === 'complete') {
-                clearInterval(statusCheckInterval);
-                progressContainer.style.display = 'none';
-                
-                // Show results
-                resultVideo.src = status.result_url;
-                scriptContainer.textContent = status.script;
-                resultContainer.style.display = 'block';
+        // Form submission
+        form.addEventListener('submit', function(e) {
+            if (!fileInput.files.length) {
+                e.preventDefault();
+                alert('Please select a video file first.');
+            } else {
+                form.style.display = 'none';
+                loader.style.display = 'block';
             }
-        }
-
-        function showError(message) {
-            alert(`Error: ${message}`);
-            uploadContainer.style.display = 'block';
-            progressContainer.style.display = 'none';
-            resultContainer.style.display = 'none';
-        }
-
-        function resetForm() {
-            // Reset all elements
-            fileInput.value = '';
-            fileInfo.textContent = 'No file selected';
-            resultVideo.src = '';
-            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';
-        }
+        });
     </script>
 </body>
 </html>