Update templates/index.html

templates/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Video Narrator</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
         
         :root {
             --primary-color: #0d6efd;
@@ -14,116 +14,55 @@
             --card-background: #ffffff;
             --heading-color: #212529;
             --border-color: #dee2e6;
-            --shadow: 0 8px 30px rgba(0,0,0,0.1);
-        }
-
-        *, *::before, *::after {
-            box-sizing: border-box;
+            --shadow: 0 8px 30px rgba(0,0,0,0.08);
         }
 
+        *, *::before, *::after { box-sizing: border-box; }
         body {
-            font-family: 'Inter', sans-serif;
-            margin: 0;
-            background-color: var(--background-color);
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            padding: 2rem;
-            min-height: 100vh;
+            font-family: 'Poppins', sans-serif; margin: 0; background-color: var(--background-color);
+            display: flex; justify-content: center; align-items: flex-start; padding: 2rem; min-height: 100vh;
         }
         .container {
-            background-color: var(--card-background);
-            padding: 2.5rem 3rem;
-            border-radius: 20px;
-            border: 1px solid var(--border-color);
-            box-shadow: var(--shadow);
-            width: 100%;
-            max-width: 700px;
-            transition: all 0.3s ease;
+            background-color: var(--card-background); padding: 2.5rem 3rem; border-radius: 20px;
+            border: 1px solid var(--border-color); box-shadow: var(--shadow); width: 100%; max-width: 700px;
         }
         header { text-align: center; margin-bottom: 2.5rem; }
-        h1 {
-            color: var(--heading-color);
-            font-weight: 700;
-            margin-bottom: 0.5rem;
-        }
+        h1 { color: var(--heading-color); font-weight: 700; margin-bottom: 0.5rem; }
         p.subtitle { color: var(--secondary-color); }
         
-        .form-step {
-            margin-bottom: 1.5rem;
-            padding: 1.5rem;
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-        }
-        .form-step legend {
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: var(--primary-color);
-            padding: 0 0.5rem;
-            margin-left: 0.5rem;
+        .tab-container { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 1.5rem; }
+        .tab {
+            padding: 0.75rem 1.5rem; cursor: pointer; font-weight: 600; color: var(--secondary-color);
+            border-bottom: 3px solid transparent; transition: all 0.2s;
         }
+        .tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
         
-        .file-upload-label {
-            display: block;
-            border: 2px dashed var(--border-color);
-            padding: 2rem;
-            border-radius: 8px;
-            text-align: center;
-            cursor: pointer;
-            transition: background-color 0.2s, border-color 0.2s;
-        }
-        .file-upload-label:hover {
-            background-color: #f1f3f5;
-            border-color: var(--primary-color);
-        }
-        input[type="file"] { display: none; }
-        #file-name {
-            margin-top: 1rem;
-            font-style: italic;
-            color: var(--secondary-color);
-        }
+        .form-content { display: none; }
+        .form-content.active { display: block; }
+
+        .form-step { margin-bottom: 1.5rem; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 12px; }
+        .form-step legend { font-size: 1.1rem; font-weight: 600; color: var(--primary-color); padding: 0 0.5rem; margin-left: 0.5rem; }
         
-        .radio-group, .checkbox-group {
-            display: flex;
-            gap: 1.5rem;
-            justify-content: center;
-            padding-top: 0.5rem;
-        }
-        .radio-group label, .checkbox-group label {
-            display: inline-flex;
-            align-items: center;
-            cursor: pointer;
-        }
+        input[type="url"], .file-upload-label { width: 100%; border: 2px dashed var(--border-color); padding: 2rem; border-radius: 8px; text-align: center; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
+        input[type="url"] { padding: 0.75rem; text-align: left; cursor: text; }
+        .file-upload-label:hover, input[type="url"]:focus { background-color: #f1f3f5; border-color: var(--primary-color); }
+        input[type="file"] { display: none; }
+        #file-name { margin-top: 1rem; font-style: italic; color: var(--secondary-color); }
         
         .submit-btn {
-            width: 100%;
-            background-image: linear-gradient(45deg, #0d6efd, #0dcaf0);
+            width: 100%; background-image: linear-gradient(45deg, #0d6efd, #0dcaf0);
             color: white; border: none; padding: 1rem; border-radius: 12px;
-            font-size: 1.2rem; font-weight: 600; cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
-        }
-        .submit-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 7px 20px rgba(13, 110, 253, 0.4);
+            font-size: 1.2rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3); margin-top: 1rem;
         }
+        .submit-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(13, 110, 253, 0.4); }
         
-        .result-section { margin-top: 2.5rem; border-top: 2px solid var(--border-color); padding-top: 2.5rem; }
-        h2 { color: var(--heading-color); border-bottom: 3px solid var(--primary-color); padding-bottom: 0.5rem; display: inline-block; margin-bottom: 1.5rem; }
+        .result-section, .flash-message, #loader { margin-top: 2.5rem; text-align: center; }
+        h2 { border-bottom: 3px solid var(--primary-color); padding-bottom: 0.5rem; display: inline-block; margin-bottom: 1.5rem; }
         video { width: 100%; border-radius: 12px; box-shadow: var(--shadow); }
-        .script-box {
-            background-color: #212529; color: #f8f9fa; border: 1px solid #343a40; padding: 1.5rem;
-            border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; font-family: "SF Mono", "Fira Code", monospace;
-            line-height: 1.7; margin-top: 1rem; max-height: 250px; overflow-y: auto;
-        }
-        
-        .flash-message {
-            padding: 1rem; margin-bottom: 1.5rem; border-radius: 8px;
-            background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
-            text-align: center; font-weight: 600;
-        }
-        
-        #loader { text-align: center; display: none; padding: 2rem; }
+        .script-box { background-color: #212529; color: #f8f9fa; padding: 1.5rem; border-radius: 8px; text-align: left; white-space: pre-wrap; word-wrap: break-word; font-family: "SF Mono", monospace; line-height: 1.7; margin-top: 1rem; max-height: 250px; overflow-y: auto; }
+        .flash-message { padding: 1rem; border-radius: 8px; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; font-weight: 600; }
+        #loader { display: none; }
         #loader p { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); }
     </style>
 </head>
@@ -131,29 +70,33 @@
     <div class="container">
         <header>
             <h1>AI Video Narrator</h1>
-            <p class="subtitle">Upload a video, choose a voice, and let AI create a new, expressive narration.</p>
+            <p class="subtitle">Dub your video by uploading a file or pasting a YouTube link.</p>
         </header>
 
         {% with messages = get_flashed_messages() %}
-            {% if messages %}
-                <div class="flash-message">
-                    {{ messages[0] }}
-                </div>
-            {% endif %}
+            {% if messages %}<div class="flash-message">{{ messages[0] }}</div>{% endif %}
         {% endwith %}
 
         <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
-            <fieldset class="form-step">
-                <legend>1. Upload Video</legend>
+            <div class="tab-container">
+                <div class="tab active" data-tab="upload">Upload File</div>
+                <div class="tab" data-tab="youtube">From YouTube URL</div>
+            </div>
+
+            <div id="upload" class="form-content active">
                 <label for="video" class="file-upload-label">
                     <span>Click to select a video file</span>
                     <div id="file-name">No file chosen</div>
                 </label>
-                <input type="file" id="video" name="video" accept="video/mp4,video/mov,video/webm" required>
-            </fieldset>
+                <input type="file" id="video" name="video" accept="video/mp4,video/mov,video/webm">
+            </div>
 
-            <fieldset class="form-step">
-                <legend>2. Configure Voice</legend>
+            <div id="youtube" class="form-content">
+                <input type="url" name="youtube_url" placeholder="Paste YouTube video link here...">
+            </div>
+
+            <fieldset class="form-step" style="padding-top: 0.5rem;">
+                <legend>Configure Voice</legend>
                 <div class="radio-group">
                     <label><input type="radio" name="voice_choice" value="Male (Charon)" checked> Male Voice</label>
                     <label><input type="radio" name="voice_choice" value="Female (Zephyr)"> Female Voice</label>
@@ -166,17 +109,12 @@
             <button type="submit" class="submit-btn">Generate Dubbed Video</button>
         </form>
 
-        <div id="loader">
-            <p>Processing your video... This may take a few minutes.</p>
-        </div>
+        <div id="loader"><p>Processing your video... This may take a few minutes.</p></div>
 
         {% if result_video %}
         <div class="result-section">
             <h2>Your Dubbed Video</h2>
-            <video controls>
-                <source src="{{ result_video }}" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
+            <video controls src="{{ result_video }}"></video>
             <h2>Generated Script</h2>
             <div class="script-box">{{ script }}</div>
         </div>
@@ -184,24 +122,39 @@
     </div>
 
     <script>
+        const tabs = document.querySelectorAll('.tab');
+        const contents = document.querySelectorAll('.form-content');
         const form = document.getElementById('dubbing-form');
         const loader = document.getElementById('loader');
         const videoInput = document.getElementById('video');
+        const urlInput = document.querySelector('input[name="youtube_url"]');
         const fileNameDisplay = document.getElementById('file-name');
 
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                tabs.forEach(item => item.classList.remove('active'));
+                contents.forEach(item => item.classList.remove('active'));
+                tab.classList.add('active');
+                document.getElementById(tab.dataset.tab).classList.add('active');
+                
+                // Clear the other input when switching tabs
+                if (tab.dataset.tab === 'upload') {
+                    urlInput.value = '';
+                } else {
+                    videoInput.value = '';
+                    fileNameDisplay.textContent = 'No file chosen';
+                }
+            });
+        });
+
         videoInput.addEventListener('change', function() {
-            if (this.files && this.files.length > 0) {
-                fileNameDisplay.textContent = this.files[0].name;
-            } else {
-                fileNameDisplay.textContent = 'No file chosen';
-            }
+            fileNameDisplay.textContent = this.files.length > 0 ? this.files[0].name : 'No file chosen';
         });
 
         form.addEventListener('submit', function(event) {
-            if (!videoInput.value) {
-                // Prevent form submission if no file is selected
+            if (!videoInput.value && !urlInput.value) {
                 event.preventDefault();
-                alert('Please select a video file before submitting.');
+                alert('Please either select a video file or enter a YouTube URL.');
             } else {
                 form.style.display = 'none';
                 loader.style.display = 'block';