Spaces:

Athspi-ai
/

Translate

Running

App Files Files Community

Athspi commited on 5 days ago

Commit

2faebb6

verified ·

1 Parent(s): 74d8a08

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +269 -45

templates/index.html CHANGED Viewed

@@ -3,63 +3,287 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Video Dubbing</title>
     <style>
-        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-        .container { background-color: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); width: 100%; max-width: 600px; }
-        h1 { text-align: center; color: #1c1e21; }
-        form { display: flex; flex-direction: column; gap: 1.5rem; }
-        .form-group { display: flex; flex-direction: column; }
-        label { margin-bottom: 0.5rem; font-weight: 600; color: #4b4f56; }
-        input[type="file"] { border: 1px solid #dddfe2; padding: 0.75rem; border-radius: 6px; }
-        .radio-group label { display: inline-block; margin-right: 1rem; }
-        input[type="submit"] { background-color: #1877f2; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
-        input[type="submit"]:hover { background-color: #166fe5; }
-        .result-section { margin-top: 2rem; border-top: 1px solid #dddfe2; padding-top: 2rem; }
-        h2 { color: #1c1e21; }
-        video { width: 100%; border-radius: 8px; }
-        .script-box { background-color: #f0f2f5; border: 1px solid #dddfe2; padding: 1rem; border-radius: 6px; white-space: pre-wrap; font-family: "Courier New", Courier, monospace; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>AI Single-Speaker Video Dubbing</h1>
-        <form action="/process" method="POST" enctype="multipart/form-data">
-            <div class="form-group">
-                <label for="video">Upload Video File:</label>
-                <input type="file" id="video" name="video" accept="video/*" required>
-            </div>
-            <div class="form-group radio-group">
-                <label>Select Narrator Voice:</label>
-                <div>
-                    <label><input type="radio" name="voice_choice" value="Male (Charon)" checked> Male (Charon)</label>
-                    <label><input type="radio" name="voice_choice" value="Female (Zephyr)"> Female (Zephyr)</label>
-                </div>
-            </div>
-            <div class="form-group">
-                <label><input type="checkbox" name="cheerful"> Enable Cheerful Tone</label>
-            </div>
-            <input type="submit" value="Generate Dubbed Video">
-        </form>
-        {% if result_video %}
-        <div class="result-section">
-            <h2>Dubbed Video</h2>
-            <video controls>
-                <source src="{{ result_video }}" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
-            <h2>Generated Script</h2>
-            <div class="script-box">
-                {{ script }}
             </div>
         </div>
-        {% endif %}
     </div>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Video Dubbing Studio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            --bg-color: #121212;
+            --surface-color: #1e1e1e;
+            --primary-color: #3498db;
+            --primary-hover-color: #2980b9;
+            --text-color: #e0e0e0;
+            --text-secondary-color: #a0a0a0;
+            --border-color: #333;
+            --error-bg: #4e3434;
+            --error-border: #d32f2f;
+        }
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
+            padding: 2rem;
+        }
+        .container {
+            width: 100%;
+            max-width: 1200px;
+        }
+        header h1 {
+            font-size: 2.5rem;
+            font-weight: 700;
+            text-align: center;
+            margin-bottom: 0.5rem;
+            color: #fff;
+        }
+        header p {
+            text-align: center;
+            color: var(--text-secondary-color);
+            margin-bottom: 2.5rem;
+            max-width: 600px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .main-content {
+            display: flex;
+            gap: 2rem;
+        }
+        .form-container, .result-container {
+            background-color: var(--surface-color);
+            padding: 2rem;
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+        }
+        .form-container {
+            flex: 1;
+        }
+        .result-container {
+            flex: 1.5;
+            display: {% if result_video or get_flashed_messages() %}block{% else %}none{% endif %};
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: var(--text-secondary-color);
+        }
+        /* Custom File Input */
+        .file-input-wrapper {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+            cursor: pointer;
+        }
+        .file-input-button {
+            background-color: var(--primary-color);
+            color: white;
+            padding: 0.75rem 1rem;
+            border-radius: 6px;
+            text-align: center;
+            transition: background-color 0.2s;
+        }
+        .file-input-wrapper:hover .file-input-button {
+            background-color: var(--primary-hover-color);
+        }
+        .file-input-wrapper input[type="file"] {
+            position: absolute;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+        }
+        #file-name {
+            margin-top: 0.5rem;
+            font-style: italic;
+            color: var(--text-secondary-color);
+        }
+        .radio-group label {
+            display: inline-block;
+            margin-right: 1.5rem;
+            color: var(--text-color);
+        }
+        .submit-button {
+            width: 100%;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            padding: 0.85rem;
+            border-radius: 6px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .submit-button:hover { background-color: var(--primary-hover-color); }
+        .submit-button:disabled { background-color: #555; cursor: not-allowed; }
+        .spinner {
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 3px solid #fff;
+            width: 16px;
+            height: 16px;
+            animation: spin 1s linear infinite;
+            display: none; /* Hidden by default */
+        }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .result-container h2 {
+            margin-bottom: 1rem;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 0.5rem;
+        }
+        .result-container video {
+            width: 100%;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+        }
+        .script-box {
+            background-color: var(--bg-color);
+            border: 1px solid var(--border-color);
+            padding: 1rem;
+            border-radius: 6px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            font-family: "Courier New", Courier, monospace;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+        /* Flash Messages (Errors) */
+        .flash-error {
+            padding: 1rem;
+            margin-bottom: 1rem;
+            border-radius: 6px;
+            background-color: var(--error-bg);
+            border: 1px solid var(--error-border);
+            color: #fdd835;
+        }
+        /* Responsive Design */
+        @media (max-width: 900px) {
+            .main-content { flex-direction: column; }
+            .result-container { margin-top: 2rem; }
+        }
     </style>
 </head>
 <body>
     <div class="container">
+        <header>
+            <h1>AI Video Dubbing Studio</h1>
+            <p>Upload a video, choose a voice, and let the AI generate a new, expressive Tamil voiceover. The original audio will be replaced entirely.</p>
+        </header>
+        <div class="main-content">
+            <div class="form-container">
+                <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
+                    <div class="form-group">
+                        <label>1. Upload Video File</label>
+                        <div class="file-input-wrapper">
+                            <div class="file-input-button">Choose Video...</div>
+                            <input type="file" id="video" name="video" accept="video/*" required>
+                        </div>
+                        <div id="file-name">No file selected.</div>
+                    </div>
+                    <div class="form-group radio-group">
+                        <label>2. Select Narrator Voice</label>
+                        <div>
+                            <label><input type="radio" name="voice_choice" value="Male (Charon)" checked> Male (Charon)</label>
+                            <label><input type="radio" name="voice_choice" value="Female (Zephyr)"> Female (Zephyr)</label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label><input type="checkbox" name="cheerful"> 3. Enable Cheerful Tone</label>
+                    </div>
+                    <button type="submit" class="submit-button" id="submit-btn">
+                        <span id="button-text">Generate Dubbed Video</span>
+                        <div class="spinner" id="spinner"></div>
+                    </button>
+                </form>
+            </div>
+            <div class="result-container">
+                {% with messages = get_flashed_messages(with_categories=true) %}
+                    {% if messages %}
+                        {% for category, message in messages %}
+                            <div class="flash-{{ category }}">{{ message }}</div>
+                        {% endfor %}
+                    {% endif %}
+                {% endwith %}
+                {% if result_video %}
+                <h2>Dubbed Video</h2>
+                <video controls autoplay>
+                    <source src="{{ result_video }}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+                <h2>Generated Script</h2>
+                <div class="script-box">
+                    {{ script }}
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>
+    <script>
+        const form = document.getElementById('dubbing-form');
+        const submitBtn = document.getElementById('submit-btn');
+        const buttonText = document.getElementById('button-text');
+        const spinner = document.getElementById('spinner');
+        const fileInput = document.getElementById('video');
+        const fileNameDisplay = document.getElementById('file-name');
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files.length > 0) {
+                fileNameDisplay.textContent = fileInput.files[0].name;
+            } else {
+                fileNameDisplay.textContent = 'No file selected.';
+            }
+        });
+        form.addEventListener('submit', () => {
+            // Check if a file is selected
+            if (fileInput.files.length === 0) {
+                // The 'required' attribute will handle the alert
+                return;
+            }
+            submitBtn.disabled = true;
+            buttonText.textContent = 'Processing...';
+            spinner.style.display = 'block';
+        });
+    </script>
 </body>
 </html>