Update templates/index.html

templates/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Video Dubbing</title>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         :root {
             --primary: #4361ee;
@@ -13,9 +14,9 @@
             --secondary: #3f37c9;
             --dark: #1a1a2e;
             --light: #f8f9fa;
-            --success: #4cc9f0;
-            --warning: #f72585;
             --gray: #6c757d;
+            --success: #4cc9f0;
+            --error: #f72585;
             --border-radius: 12px;
             --shadow: 0 10px 30px rgba(0,0,0,0.1);
             --transition: all 0.3s ease;
@@ -32,31 +33,37 @@
             background-color: #f5f7ff;
             color: var(--dark);
             line-height: 1.6;
+            padding: 20px;
         }
 
         .container {
             max-width: 800px;
-            margin: 2rem auto;
-            padding: 2rem;
+            margin: 0 auto;
             background: white;
             border-radius: var(--border-radius);
             box-shadow: var(--shadow);
+            overflow: hidden;
         }
 
         header {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            padding: 2rem;
             text-align: center;
-            margin-bottom: 2rem;
         }
 
         h1 {
-            color: var(--primary);
-            font-size: 2.5rem;
+            font-size: 2.2rem;
             margin-bottom: 0.5rem;
         }
 
         .subtitle {
-            color: var(--gray);
-            font-size: 1.1rem;
+            font-weight: 300;
+            opacity: 0.9;
+        }
+
+        .content {
+            padding: 2rem;
         }
 
         .upload-area {
@@ -67,6 +74,7 @@
             margin-bottom: 2rem;
             transition: var(--transition);
             cursor: pointer;
+            position: relative;
         }
 
         .upload-area:hover {
@@ -81,13 +89,19 @@
         }
 
         .file-input {
-            display: none;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            cursor: pointer;
         }
 
-        .file-name {
+        .file-info {
             margin-top: 1rem;
-            color: var(--gray);
             font-size: 0.9rem;
+            color: var(--gray);
         }
 
         .options {
@@ -103,32 +117,57 @@
 
         .option-title {
             font-weight: 600;
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.8rem;
             color: var(--secondary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
-        .radio-options, .checkbox-options {
+        .option-title i {
+            font-size: 1.1rem;
+        }
+
+        .radio-group, .checkbox-group {
             display: flex;
-            gap: 1.5rem;
+            flex-wrap: wrap;
+            gap: 1rem;
         }
 
         .radio-option, .checkbox-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);
+        }
+
+        .radio-option input, .checkbox-option input {
+            accent-color: var(--primary);
         }
 
         .btn {
             background: var(--primary);
             color: white;
             border: none;
-            padding: 1rem 2rem;
+            padding: 1rem;
             border-radius: var(--border-radius);
             font-size: 1.1rem;
             font-weight: 500;
             cursor: pointer;
             width: 100%;
             transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.8rem;
         }
 
         .btn:hover {
@@ -137,39 +176,30 @@
             box-shadow: 0 5px 15px rgba(63, 55, 201, 0.3);
         }
 
-        .result {
-            margin-top: 2rem;
-            animation: fadeIn 0.5s ease;
+        .btn i {
+            font-size: 1.2rem;
         }
 
-        .result-title {
-            color: var(--primary);
-            margin-bottom: 1rem;
-            text-align: center;
-        }
-
-        .video-container {
-            width: 100%;
+        .alert {
+            padding: 1rem;
             border-radius: var(--border-radius);
-            overflow: hidden;
-            margin-bottom: 2rem;
-            box-shadow: var(--shadow);
+            margin-bottom: 1.5rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
         }
 
-        video {
-            width: 100%;
-            display: block;
+        .alert-success {
+            background: rgba(76, 201, 240, 0.2);
+            color: #0a9396;
+            border: 1px solid rgba(76, 201, 240, 0.3);
         }
 
-        .script-container {
-            background: var(--dark);
-            color: var(--light);
-            padding: 1.5rem;
-            border-radius: var(--border-radius);
-            max-height: 300px;
-            overflow-y: auto;
-            font-family: 'Courier New', monospace;
-            white-space: pre-wrap;
+        .alert-error {
+            background: rgba(247, 37, 133, 0.1);
+            color: var(--error);
+            border: 1px solid rgba(247, 37, 133, 0.2);
         }
 
         .loader {
@@ -188,23 +218,9 @@
             margin: 0 auto 1rem;
         }
 
-        .alert {
-            padding: 1rem;
-            border-radius: var(--border-radius);
-            margin-bottom: 1.5rem;
+        .loading-text {
             font-weight: 500;
-        }
-
-        .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(--warning);
-            border: 1px solid rgba(247, 37, 133, 0.2);
+            color: var(--dark);
         }
 
         @keyframes spin {
@@ -212,24 +228,26 @@
             100% { transform: rotate(360deg); }
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
         @media (max-width: 768px) {
-            .container {
-                margin: 1rem;
+            body {
+                padding: 10px;
+            }
+            
+            header {
                 padding: 1.5rem;
             }
             
             h1 {
-                font-size: 2rem;
+                font-size: 1.8rem;
+            }
+            
+            .content {
+                padding: 1.5rem;
             }
             
-            .radio-options, .checkbox-options {
+            .radio-group, .checkbox-group {
                 flex-direction: column;
-                gap: 0.5rem;
+                gap: 0.8rem;
             }
         }
     </style>
@@ -238,129 +256,122 @@
     <div class="container">
         <header>
             <h1>AI Video Dubbing</h1>
-            <p class="subtitle">Upload your video to generate a Tamil dubbed version</p>
+            <p class="subtitle">Transform your videos with AI-powered Tamil dubbing</p>
         </header>
 
-        {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                {% for category, message in messages %}
-                    <div class="alert alert-{{ category }}">{{ message }}</div>
-                {% endfor %}
-            {% endif %}
-        {% endwith %}
-
-        <form id="dub-form" action="/process" method="POST" enctype="multipart/form-data">
-            <label class="upload-area" id="upload-label">
-                <div class="upload-icon">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                        <polyline points="17 8 12 3 7 8"></polyline>
-                        <line x1="12" y1="3" x2="12" y2="15"></line>
-                    </svg>
-                </div>
-                <h3>Click to upload video</h3>
-                <p>MP4, MOV, or WebM (Max 100MB)</p>
-                <div id="file-name" class="file-name">No file selected</div>
-                <input type="file" id="video" name="video" class="file-input" accept="video/*">
-            </label>
-
-            <div class="options">
-                <div class="option-group">
-                    <div class="option-title">Voice Style</div>
-                    <div class="radio-options">
-                        {% for voice, value in VOICE_CHOICES.items() %}
-                        <label class="radio-option">
-                            <input type="radio" name="voice_choice" value="{{ voice }}" {% if loop.first %}checked{% endif %}>
-                            {{ voice }}
-                        </label>
-                        {% endfor %}
+        <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 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>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/*">
                 </div>
 
-                <div class="option-group">
-                    <div class="option-title">Tone Options</div>
-                    <div class="checkbox-options">
-                        <label class="checkbox-option">
-                            <input type="checkbox" name="cheerful">
-                            Cheerful tone
-                        </label>
+                <div class="options">
+                    <div class="option-group">
+                        <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 %}
+                        </div>
                     </div>
-                </div>
-            </div>
 
-            <button type="submit" class="btn">Generate Dubbed Video</button>
-        </form>
+                    <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">
+                                Cheerful Tone
+                            </label>
+                        </div>
+                    </div>
+                </div>
 
-        <div class="loader" id="loader">
-            <div class="spinner"></div>
-            <p>Processing your video. This may take a few minutes...</p>
-        </div>
+                <button type="submit" class="btn">
+                    <i class="fas fa-magic"></i>
+                    Generate Dubbed Video
+                </button>
+            </form>
 
-        {% if result_video %}
-        <div class="result">
-            <h2 class="result-title">Your Dubbed Video</h2>
-            <div class="video-container">
-                <video controls>
-                    <source src="{{ result_video }}" type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
+            <div class="loader" id="loader">
+                <div class="spinner"></div>
+                <p class="loading-text">Processing your video. Please wait...</p>
             </div>
-
-            <h2 class="result-title">Generated Script</h2>
-            <div class="script-container">{{ script }}</div>
         </div>
-        {% endif %}
     </div>
 
     <script>
-        const form = document.getElementById('dub-form');
+        const form = document.getElementById('dubbing-form');
         const loader = document.getElementById('loader');
-        const uploadLabel = document.getElementById('upload-label');
+        const uploadArea = document.getElementById('upload-area');
         const fileInput = document.getElementById('video');
-        const fileName = document.getElementById('file-name');
+        const fileInfo = document.getElementById('file-info');
 
         // Handle file selection
         fileInput.addEventListener('change', function() {
             if (this.files.length > 0) {
-                fileName.textContent = this.files[0].name;
-                uploadLabel.style.borderColor = '#4361ee';
-            } else {
-                fileName.textContent = 'No file selected';
-                uploadLabel.style.borderColor = '#4895ef';
-            }
-        });
-
-        // Form submission
-        form.addEventListener('submit', function(e) {
-            if (fileInput.files.length === 0) {
-                e.preventDefault();
-                alert('Please select a video file to upload.');
-            } else {
-                form.style.display = 'none';
-                loader.style.display = 'block';
+                fileInfo.textContent = this.files[0].name;
+                uploadArea.style.borderColor = '#4361ee';
+                uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
             }
         });
 
         // Drag and drop functionality
-        uploadLabel.addEventListener('dragover', (e) => {
+        uploadArea.addEventListener('dragover', (e) => {
             e.preventDefault();
-            uploadLabel.style.borderColor = '#4361ee';
-            uploadLabel.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
+            uploadArea.style.borderColor = '#4361ee';
+            uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.1)';
         });
 
-        uploadLabel.addEventListener('dragleave', () => {
-            uploadLabel.style.borderColor = fileInput.files.length > 0 ? '#4361ee' : '#4895ef';
-            uploadLabel.style.backgroundColor = 'transparent';
+        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';
         });
 
-        uploadLabel.addEventListener('drop', (e) => {
+        uploadArea.addEventListener('drop', (e) => {
             e.preventDefault();
-            uploadLabel.style.borderColor = '#4361ee';
-            uploadLabel.style.backgroundColor = 'transparent';
+            uploadArea.style.borderColor = '#4361ee';
+            uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
             
             if (e.dataTransfer.files.length) {
                 fileInput.files = e.dataTransfer.files;
-                fileName.textContent = e.dataTransfer.files[0].name;
+                fileInfo.textContent = e.dataTransfer.files[0].name;
+            }
+        });
+
+        // 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';
             }
         });
     </script>