Spaces:

imseldrith
/

Auto-Dubbing

Build error

App Files Files Community

imseldrith commited on Feb 11, 2023

Commit

4128a8b

1 Parent(s): c3eb0fd

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +42 -44

templates/index.html CHANGED Viewed

@@ -1,46 +1,44 @@
-<!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Video Dubbing Application</title>
-  </head>
-  <body>
-    <h1>Video Dubbing Application</h1>
-    <form action="/" method="post" enctype="multipart/form-data">
-      <div>
-        <label for="video_file">Upload Video:</label>
-        <input type="file" id="video_file" name="video_file">
-      </div>
-      <div>
-        <label for="video_url">Import Video URL:</label>
-        <input type="url" id="video_url" name="video_url">
-      </div>
-      <div>
-        <label for="language">Language:</label>
-        <select id="language" name="language">
-          <option value="hi">Hindi</option>
-        </select>
-      </div>
-      <div>
-        <input type="submit" value="Dub Video">
-      </div>
-    </form>
-    {% if video_url %}
-      <div>
-        <p>Dubbing Progress:</p>
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
-        </div>
-      </div>
-    {% endif %}
-    {% if result %}
-      <div>
-        <p>Dubbed Video:</p>
-        <video controls>
-          <source src="{{ result }}" type="video/mp4">
-          Your browser does not support the video tag.
-        </video>
-      </div>
-    {% endif %}
-  </body>
 </html>

 <html>
+    <head>
+        <title>Dubbing Video</title>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    </head>
+    <body>
+        <h1>Dubbing Video</h1>
+        <form action="{{ url_for('dub_video') }}" method="post" enctype="multipart/form-data">
+            <label for="video_file">Upload Video:</label>
+            <input type="file" name="video_file" id="video_file">
+            <br><br>
+            <label for="video_url">Import from URL:</label>
+            <input type="text" name="video_url" id="video_url">
+            <br><br>
+            <label for="language">Select Language:</label>
+            <select name="language" id="language">
+                <option value="hi">Hindi</option>
+            </select>
+            <br><br>
+            <input type="submit" value="Dub Video">
+        </form>
+        {% if result %}
+            <br><br>
+            <a href="{{ result }}" download>Download Dubbed Video</a>
+        {% endif %}
+        <br><br>
+        {% if progress %}
+            <div id="progress-bar" style="width: 500px; height: 20px; border: 1px solid #ccc;">
+                <div id="progress" style="height: 100%; width: {{ progress }}%; background-color: #4CAF50;"></div>
+            </div>
+        {% endif %}
+        <script>
+            function updateProgress(progress) {
+                $("#progress").css("width", progress + "%");
+            }
+            $(document).ready(function() {
+                var source = new EventSource("/progress");
+                source.onmessage = function(event) {
+                    updateProgress(event.data);
+                };
+            });
+        </script>
+    </body>
 </html>