Hugging Face's logo

Spaces:
Athspi-ai
/
Translate
Running

App Files Community
Athspi commited on
Commit
b87a68d
·
verified ·
1 Parent(s): d6208ae

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +129 -216
templates/index.html CHANGED
@@ -3,286 +3,199 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Video Dubbing Studio</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com">
8
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
 
 
11
  :root {
12
- --bg-color: #121212;
13
- --surface-color: #1e1e1e;
14
- --primary-color: #3498db;
15
- --primary-hover-color: #2980b9;
16
- --text-color: #e0e0e0;
17
- --text-secondary-color: #a0a0a0;
18
- --border-color: #333;
19
- --error-bg: #4e3434;
20
- --error-border: #d32f2f;
21
  }
22
 
23
- * { box-sizing: border-box; margin: 0; padding: 0; }
24
-
25
  body {
26
- font-family: 'Poppins', sans-serif;
27
- background-color: var(--bg-color);
28
- color: var(--text-color);
29
  display: flex;
30
  justify-content: center;
31
- align-items: flex-start;
32
- min-height: 100vh;
33
  padding: 2rem;
 
34
  }
35
-
36
  .container {
 
 
 
 
37
  width: 100%;
38
- max-width: 1200px;
 
39
  }
40
-
41
- header h1 {
42
- font-size: 2.5rem;
43
- font-weight: 700;
44
  text-align: center;
 
 
45
  margin-bottom: 0.5rem;
46
- color: #fff;
47
  }
48
-
49
- header p {
50
  text-align: center;
51
- color: var(--text-secondary-color);
52
- margin-bottom: 2.5rem;
53
- max-width: 600px;
54
- margin-left: auto;
55
- margin-right: auto;
56
  }
57
-
58
- .main-content {
59
  display: flex;
60
- gap: 2rem;
 
61
  }
62
-
63
- .form-container, .result-container {
64
- background-color: var(--surface-color);
65
- padding: 2rem;
66
- border-radius: 12px;
67
- border: 1px solid var(--border-color);
68
- }
69
-
70
- .form-container {
71
- flex: 1;
72
- }
73
-
74
- .result-container {
75
- flex: 1.5;
76
- display: {% if result_video or get_flashed_messages() %}block{% else %}none{% endif %};
77
- }
78
-
79
- .form-group {
80
- margin-bottom: 1.5rem;
81
- }
82
-
83
- label {
84
  display: block;
85
- font-weight: 500;
86
  margin-bottom: 0.5rem;
87
- color: var(--text-secondary-color);
88
- }
89
-
90
- /* Custom File Input */
91
- .file-input-wrapper {
92
- position: relative;
93
- display: inline-block;
94
- width: 100%;
95
- cursor: pointer;
96
- }
97
- .file-input-button {
98
- background-color: var(--primary-color);
99
- color: white;
100
- padding: 0.75rem 1rem;
101
- border-radius: 6px;
102
- text-align: center;
103
- transition: background-color 0.2s;
104
  }
105
- .file-input-wrapper:hover .file-input-button {
106
- background-color: var(--primary-hover-color);
 
 
 
107
  }
108
- .file-input-wrapper input[type="file"] {
109
- position: absolute;
110
- left: 0;
111
- top: 0;
112
- opacity: 0;
113
- width: 100%;
114
- height: 100%;
115
  cursor: pointer;
116
  }
117
- #file-name {
118
- margin-top: 0.5rem;
119
- font-style: italic;
120
- color: var(--text-secondary-color);
121
  }
122
-
123
- .radio-group label {
124
- display: inline-block;
125
- margin-right: 1.5rem;
126
- color: var(--text-color);
127
- }
128
-
129
- .submit-button {
130
- width: 100%;
131
- background-color: var(--primary-color);
132
  color: white;
133
  border: none;
134
- padding: 0.85rem;
135
- border-radius: 6px;
136
  font-size: 1.1rem;
137
  font-weight: 600;
138
  cursor: pointer;
139
- transition: background-color 0.2s;
140
- display: flex;
141
- justify-content: center;
142
- align-items: center;
143
- gap: 0.5rem;
144
  }
145
- .submit-button:hover { background-color: var(--primary-hover-color); }
146
- .submit-button:disabled { background-color: #555; cursor: not-allowed; }
147
-
148
- .spinner {
149
- border: 3px solid rgba(255, 255, 255, 0.3);
150
- border-radius: 50%;
151
- border-top: 3px solid #fff;
152
- width: 16px;
153
- height: 16px;
154
- animation: spin 1s linear infinite;
155
- display: none; /* Hidden by default */
156
  }
157
- @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
158
-
159
- .result-container h2 {
160
- margin-bottom: 1rem;
161
- border-bottom: 1px solid var(--border-color);
 
 
 
162
  padding-bottom: 0.5rem;
 
163
  }
164
- .result-container video {
165
  width: 100%;
166
- border-radius: 8px;
167
- margin-bottom: 1.5rem;
 
168
  }
169
  .script-box {
170
- background-color: var(--bg-color);
171
  border: 1px solid var(--border-color);
172
- padding: 1rem;
173
- border-radius: 6px;
174
  white-space: pre-wrap;
175
  word-wrap: break-word;
176
- font-family: "Courier New", Courier, monospace;
 
 
177
  max-height: 200px;
178
  overflow-y: auto;
179
  }
180
-
181
- /* Flash Messages (Errors) */
182
- .flash-error {
183
  padding: 1rem;
184
  margin-bottom: 1rem;
185
- border-radius: 6px;
186
- background-color: var(--error-bg);
187
- border: 1px solid var(--error-border);
188
- color: #fdd835;
189
  }
190
-
191
- /* Responsive Design */
192
- @media (max-width: 900px) {
193
- .main-content { flex-direction: column; }
194
- .result-container { margin-top: 2rem; }
195
  }
 
196
  </style>
197
  </head>
198
  <body>
199
  <div class="container">
200
- <header>
201
- <h1>AI Video Dubbing Studio</h1>
202
- <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>
203
- </header>
204
 
205
- <div class="main-content">
206
- <div class="form-container">
207
- <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
208
- <div class="form-group">
209
- <label>1. Upload Video File</label>
210
- <div class="file-input-wrapper">
211
- <div class="file-input-button">Choose Video...</div>
212
- <input type="file" id="video" name="video" accept="video/*" required>
213
- </div>
214
- <div id="file-name">No file selected.</div>
215
- </div>
216
 
217
- <div class="form-group radio-group">
218
- <label>2. Select Narrator Voice</label>
219
- <div>
220
- <label><input type="radio" name="voice_choice" value="Male (Charon)" checked> Male (Charon)</label>
221
- <label><input type="radio" name="voice_choice" value="Female (Zephyr)"> Female (Zephyr)</label>
222
- </div>
223
- </div>
224
 
225
- <div class="form-group">
226
- <label><input type="checkbox" name="cheerful"> 3. Enable Cheerful Tone</label>
227
- </div>
 
 
 
 
228
 
229
- <button type="submit" class="submit-button" id="submit-btn">
230
- <span id="button-text">Generate Dubbed Video</span>
231
- <div class="spinner" id="spinner"></div>
232
- </button>
233
- </form>
234
  </div>
 
 
 
235
 
236
- <div class="result-container">
237
- {% with messages = get_flashed_messages(with_categories=true) %}
238
- {% if messages %}
239
- {% for category, message in messages %}
240
- <div class="flash-{{ category }}">{{ message }}</div>
241
- {% endfor %}
242
- {% endif %}
243
- {% endwith %}
244
-
245
- {% if result_video %}
246
- <h2>Dubbed Video</h2>
247
- <video controls autoplay>
248
- <source src="{{ result_video }}" type="video/mp4">
249
- Your browser does not support the video tag.
250
- </video>
251
 
252
- <h2>Generated Script</h2>
253
- <div class="script-box">
254
- {{ script }}
255
- </div>
256
- {% endif %}
 
 
 
 
 
 
257
  </div>
258
  </div>
 
 
259
  </div>
260
 
261
  <script>
262
- const form = document.getElementById('dubbing-form');
263
- const submitBtn = document.getElementById('submit-btn');
264
- const buttonText = document.getElementById('button-text');
265
- const spinner = document.getElementById('spinner');
266
- const fileInput = document.getElementById('video');
267
- const fileNameDisplay = document.getElementById('file-name');
268
-
269
- fileInput.addEventListener('change', () => {
270
- if (fileInput.files.length > 0) {
271
- fileNameDisplay.textContent = fileInput.files[0].name;
272
- } else {
273
- fileNameDisplay.textContent = 'No file selected.';
274
- }
275
- });
276
-
277
- form.addEventListener('submit', () => {
278
- // Check if a file is selected
279
- if (fileInput.files.length === 0) {
280
- // The 'required' attribute will handle the alert
281
- return;
282
- }
283
- submitBtn.disabled = true;
284
- buttonText.textContent = 'Processing...';
285
- spinner.style.display = 'block';
286
  });
287
  </script>
288
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Video Dubbing</title>
 
 
 
7
  <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
9
+
10
  :root {
11
+ --primary-color: #007bff;
12
+ --primary-hover: #0056b3;
13
+ --background-color: #f8f9fa;
14
+ --card-background: #ffffff;
15
+ --text-color: #333;
16
+ --heading-color: #000;
17
+ --border-color: #dee2e6;
18
+ --box-shadow: 0 4px 20px rgba(0,0,0,0.05);
 
19
  }
20
 
 
 
21
  body {
22
+ font-family: 'Inter', sans-serif;
23
+ margin: 0;
24
+ background-color: var(--background-color);
25
  display: flex;
26
  justify-content: center;
27
+ align-items: center;
 
28
  padding: 2rem;
29
+ min-height: 100vh;
30
  }
 
31
  .container {
32
+ background-color: var(--card-background);
33
+ padding: 2.5rem;
34
+ border-radius: 16px;
35
+ box-shadow: var(--box-shadow);
36
  width: 100%;
37
+ max-width: 700px;
38
+ transition: all 0.3s ease;
39
  }
40
+ h1 {
 
 
 
41
  text-align: center;
42
+ color: var(--heading-color);
43
+ font-weight: 700;
44
  margin-bottom: 0.5rem;
 
45
  }
46
+ p.subtitle {
 
47
  text-align: center;
48
+ color: #6c757d;
49
+ margin-bottom: 2rem;
 
 
 
50
  }
51
+ form {
 
52
  display: flex;
53
+ flex-direction: column;
54
+ gap: 1.5rem;
55
  }
56
+ .form-group label {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
57
  display: block;
 
58
  margin-bottom: 0.5rem;
59
+ font-weight: 600;
60
+ color: #495057;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  }
62
+ input[type="file"] {
63
+ border: 1px solid var(--border-color);
64
+ padding: 0.75rem;
65
+ border-radius: 8px;
66
+ width: calc(100% - 1.5rem);
67
  }
68
+ .radio-group label, .checkbox-group label {
69
+ display: inline-flex;
70
+ align-items: center;
71
+ margin-right: 1.5rem;
 
 
 
72
  cursor: pointer;
73
  }
74
+ input[type="radio"], input[type="checkbox"] {
75
+ margin-right: 0.5rem;
 
 
76
  }
77
+ .submit-btn {
78
+ background: linear-gradient(90deg, #007bff, #0056b3);
 
 
 
 
 
 
 
 
79
  color: white;
80
  border: none;
81
+ padding: 1rem 1.5rem;
82
+ border-radius: 8px;
83
  font-size: 1.1rem;
84
  font-weight: 600;
85
  cursor: pointer;
86
+ transition: all 0.3s ease;
87
+ text-align: center;
 
 
 
88
  }
89
+ .submit-btn:hover {
90
+ transform: translateY(-2px);
91
+ box-shadow: 0 6px 25px rgba(0,123,255,0.3);
 
 
 
 
 
 
 
 
92
  }
93
+ .result-section {
94
+ margin-top: 2.5rem;
95
+ border-top: 1px solid var(--border-color);
96
+ padding-top: 2.5rem;
97
+ }
98
+ h2 {
99
+ color: var(--heading-color);
100
+ border-bottom: 2px solid var(--primary-color);
101
  padding-bottom: 0.5rem;
102
+ display: inline-block;
103
  }
104
+ video {
105
  width: 100%;
106
+ border-radius: 12px;
107
+ margin-top: 1rem;
108
+ box-shadow: var(--box-shadow);
109
  }
110
  .script-box {
111
+ background-color: #e9ecef;
112
  border: 1px solid var(--border-color);
113
+ padding: 1.5rem;
114
+ border-radius: 8px;
115
  white-space: pre-wrap;
116
  word-wrap: break-word;
117
+ font-family: "SF Mono", "Fira Code", "Courier New", monospace;
118
+ line-height: 1.6;
119
+ margin-top: 1rem;
120
  max-height: 200px;
121
  overflow-y: auto;
122
  }
123
+ .flash-message {
 
 
124
  padding: 1rem;
125
  margin-bottom: 1rem;
126
+ border-radius: 8px;
127
+ background-color: #f8d7da;
128
+ color: #721c24;
129
+ border: 1px solid #f5c6cb;
130
  }
131
+ .loader {
132
+ text-align: center;
133
+ display: none; /* Hidden by default */
134
+ padding: 2rem;
 
135
  }
136
+ .loader p { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); }
137
  </style>
138
  </head>
139
  <body>
140
  <div class="container">
141
+ <h1>AI Video Narrator</h1>
142
+ <p class="subtitle">Upload a video, choose a voice, and let AI create a new, expressive narration.</p>
 
 
143
 
144
+ {% with messages = get_flashed_messages() %}
145
+ {% if messages %}
146
+ <div class="flash-message">
147
+ {{ messages[0] }}
148
+ </div>
149
+ {% endif %}
150
+ {% endwith %}
 
 
 
 
151
 
152
+ <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
153
+ <div class="form-group">
154
+ <label for="video">1. Upload Your Video File:</label>
155
+ <input type="file" id="video" name="video" accept="video/mp4,video/mov,video/webm" required>
156
+ </div>
 
 
157
 
158
+ <div class="form-group">
159
+ <label>2. Select Narrator Voice:</label>
160
+ <div class="radio-group">
161
+ <label><input type="radio" name="voice_choice" value="Male (Charon)" checked> Male</label>
162
+ <label><input type="radio" name="voice_choice" value="Female (Zephyr)"> Female</label>
163
+ </div>
164
+ </div>
165
 
166
+ <div class="form-group checkbox-group">
167
+ <label><input type="checkbox" name="cheerful"> Use a more cheerful tone</label>
 
 
 
168
  </div>
169
+
170
+ <button type="submit" class="submit-btn">Generate Dubbed Video</button>
171
+ </form>
172
 
173
+ <div id="loader" class="loader">
174
+ <p>Processing your video... This may take a few minutes.</p>
175
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
176
 
177
+ {% if result_video %}
178
+ <div class="result-section">
179
+ <h2>Your Dubbed Video</h2>
180
+ <video controls>
181
+ <source src="{{ result_video }}" type="video/mp4">
182
+ Your browser does not support the video tag.
183
+ </video>
184
+
185
+ <h2>Generated Script</h2>
186
+ <div class="script-box">
187
+ {{ script }}
188
  </div>
189
  </div>
190
+ {% endif %}
191
+
192
  </div>
193
 
194
  <script>
195
+ document.getElementById('dubbing-form').addEventListener('submit', function() {
196
+ // Hide form and show loader on submit
197
+ document.getElementById('dubbing-form').style.display = 'none';
198
+ document.getElementById('loader').style.display = 'block';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  });
200
  </script>
201
  </body>