Spaces:

Athspi-ai
/

AutoSubGen

Runtime error

App Files Files Community

Athspi commited on 2 days ago

Commit

ac9beab

verified ·

1 Parent(s): e2954cc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +162 -203

templates/index.html CHANGED Viewed

@@ -3,242 +3,201 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AutoSubGen Pro - AI Video Subtitle Generator</title>
     <style>
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            line-height: 1.6;
-            background-color: #f7f7f7;
-            color: #333;
-            margin: 0;
-            padding: 20px;
         }
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            background-color: #fff;
-            padding: 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
-        h1, h2 {
-            text-align: center;
-            color: #444;
         }
-        h1 {
-            font-size: 2.5em;
-            margin-bottom: 5px;
         }
-        h2 {
-            font-size: 1.2em;
-            font-weight: 300;
-            margin-top: 0;
-            margin-bottom: 30px;
-        }
-        form {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-        .form-group {
-            border: 1px solid #ddd;
-            padding: 20px;
-            border-radius: 8px;
-        }
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: #555;
-        }
-        input[type="file"], select {
-            width: 100%;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            box-sizing: border-box;
-        }
-        .checkbox-group {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        input[type="checkbox"] {
-            width: 18px;
-            height: 18px;
-        }
-        button {
-            background-color: #007bff;
-            color: white;
-            padding: 12px 20px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 1.1em;
-            font-weight: 600;
-            transition: background-color 0.3s;
-        }
-        button:hover {
-            background-color: #0056b3;
-        }
-        #loader {
-            display: none;
-            text-align: center;
-            padding: 20px;
-            font-size: 1.2em;
-        }
-        #results {
-            margin-top: 30px;
-            border-top: 1px solid #eee;
-            padding-top: 20px;
-        }
-        .result-item {
-            background-color: #e9f5ff;
-            border: 1px solid #b3d7ff;
-            padding: 15px;
-            margin-bottom: 15px;
-            border-radius: 5px;
-        }
-        .result-item h3 {
-            margin-top: 0;
-            color: #0056b3;
-        }
-        .result-item a {
-            display: inline-block;
-            background-color: #28a745;
-            color: white;
-            padding: 8px 15px;
-            text-decoration: none;
-            border-radius: 5px;
-            transition: background-color 0.3s;
-        }
-        .result-item a:hover {
-            background-color: #218838;
-        }
-        .result-item video, .result-item audio {
-            width: 100%;
-            margin-top: 10px;
-            border-radius: 5px;
-        }
-        .error {
-            color: #D8000C;
-            background-color: #FFD2D2;
-            border: 1px solid #D8000C;
-            padding: 15px;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            text-align: center;
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <h1>🎥 AutoSubGen Pro</h1>
-        <h2>AI-Powered Video Subtitle Generator</h2>
         {% with messages = get_flashed_messages(with_categories=true) %}
-            {% if messages %}
-                {% for category, message in messages %}
-                    <div class="error">{{ message }}</div>
-                {% endfor %}
-            {% endif %}
         {% endwith %}
-        <form id="upload-form" action="{{ url_for('process') }}" method="post" enctype="multipart/form-data">
-            <div class="form-group">
-                <label for="video">1. Upload Your Video File</label>
-                <input type="file" id="video" name="video" accept="video/*" required>
-            </div>
-            <div class="form-group">
-                <label for="language_dropdown">2. Select Video Language (or let AI detect it)</label>
-                <select id="language_dropdown" name="source_language">
-                    {% for lang in supported_languages %}
-                        <option value="{{ lang }}">{{ lang }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="translate_to_dropdown">3. (Optional) Translate Subtitles To:</label>
-                <select id="translate_to_dropdown" name="translate_to">
-                    <option value="None">None</option>
-                     {% for lang in supported_languages[1:] %}
-                        <option value="{{ lang }}">{{ lang }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div class="form-group">
-                <label>4. (Optional) Additional Outputs</label>
-                <div class="checkbox-group">
-                    <input type="checkbox" id="tts_checkbox" name="add_tts">
-                    <label for="tts_checkbox">Generate Text-to-Speech Audio of Subtitles</label>
                 </div>
-                <div class="checkbox-group">
-                    <input type="checkbox" id="subtitles_checkbox" name="add_subtitles">
-                    <label for="subtitles_checkbox">Add Subtitles to Video (burn-in)</label>
                 </div>
-            </div>
-            <button type="submit">Process Video</button>
-        </form>
-        <div id="loader">
-            <p>Processing your video... This may take a few minutes.</p>
-            <img src="https://i.gifer.com/ZKZg.gif" alt="Loading..." width="50">
         </div>
         {% if results %}
-        <div id="results">
-            <h2>Processing Complete!</h2>
-            {% if results.detected_language %}
-                <div class="result-item">
-                    <h3>Detected Language</h3>
-                    <p>{{ results.detected_language }}</p>
-                </div>
-            {% endif %}
-            {% if results.original_srt_file %}
-                <div class="result-item">
-                    <h3>Original Subtitles (SRT)</h3>
-                    <a href="{{ url_for('download_file', session_id=session_id, filename=results.original_srt_file) }}" download>Download Original SRT</a>
                 </div>
-            {% endif %}
-            {% if results.translated_srt_file %}
-                <div class="result-item">
-                    <h3>Translated Subtitles (SRT)</h3>
-                     <a href="{{ url_for('download_file', session_id=session_id, filename=results.translated_srt_file) }}" download>Download Translated SRT</a>
-                </div>
-            {% endif %}
-             {% if results.tts_audio_file %}
-                <div class="result-item">
-                    <h3>Text-to-Speech Audio</h3>
-                    <audio controls src="{{ url_for('download_file', session_id=session_id, filename=results.tts_audio_file) }}"></audio>
-                    <br>
-                    <a href="{{ url_for('download_file', session_id=session_id, filename=results.tts_audio_file) }}" download>Download TTS Audio (MP3)</a>
-                </div>
-            {% endif %}
-            {% if results.output_video_file %}
-                 <div class="result-item">
-                    <h3>Video with Subtitles</h3>
-                    <video controls src="{{ url_for('download_file', session_id=session_id, filename=results.output_video_file) }}"></video>
-                     <br>
-                    <a href="{{ url_for('download_file', session_id=session_id, filename=results.output_video_file) }}" download>Download Final Video (MP4)</a>
                 </div>
-            {% endif %}
         </div>
         {% endif %}
     </div>
     <script>
-        document.getElementById('upload-form').addEventListener('submit', function() {
-            document.getElementById('loader').style.display = 'block';
         });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Translator & Dubber</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Inter', sans-serif;
         }
+        .loader {
+            border-top-color: #3498db;
+            -webkit-animation: spin 1s linear infinite;
+            animation: spin 1s linear infinite;
         }
+        @-webkit-keyframes spin {
+            0% { -webkit-transform: rotate(0deg); }
+            100% { -webkit-transform: rotate(360deg); }
         }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .form-container {
+            transition: opacity 0.5s ease-in-out;
         }
     </style>
 </head>
+<body class="bg-gray-100 text-gray-800">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl">
+        <header class="text-center mb-8">
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">Video Translator & Dubber</h1>
+            <p class="mt-2 text-md text-gray-600">Powered by Gemini & MoviePy</p>
+        </header>
         {% with messages = get_flashed_messages(with_categories=true) %}
+          {% if messages %}
+            <div class="mb-6">
+              {% for category, message in messages %}
+                <div class="p-4 rounded-md {% if category == 'error' %} bg-red-100 text-red-700 {% elif category == 'warning' %} bg-yellow-100 text-yellow-800 {% else %} bg-blue-100 text-blue-700 {% endif %}" role="alert">
+                  <strong class="font-bold">{% if category == 'error' %}Error!{% elif category == 'warning' %}Warning:{% else %}Info:{% endif %}</strong>
+                  <span class="block sm:inline">{{ message }}</span>
+                </div>
+              {% endfor %}
+            </div>
+          {% endif %}
         {% endwith %}
+        {% if not api_key_set %}
+        <div class="p-4 mb-6 rounded-md bg-red-100 text-red-700" role="alert">
+            <strong class="font-bold">Configuration Error!</strong>
+            <span class="block sm:inline">The `GEMINI_API_KEY` environment variable is not set. This application will not work until it is configured correctly on the server.</span>
+        </div>
+        {% endif %}
+        {% if imagemagick_missing %}
+        <div class="p-4 mb-6 rounded-md bg-yellow-100 text-yellow-800" role="alert">
+            <strong class="font-bold">Configuration Warning!</strong>
+            <span class="block sm:inline">ImageMagick is not detected. The feature to add burned-in subtitles to the final video is disabled. The rest of the features will work normally.</span>
+        </div>
+        {% endif %}
+        <div id="form-container" class="form-container bg-white p-6 sm:p-8 rounded-xl shadow-lg">
+            <form action="{{ url_for('process') }}" method="post" enctype="multipart/form-data" id="video-form">
+                <!-- File Upload -->
+                <div class="mb-6">
+                    <label for="video" class="block text-lg font-medium text-gray-700 mb-2">1. Upload Your Video</label>
+                    <input type="file" name="video" id="video" accept="video/*" required class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition duration-150">
+                </div>
+                <!-- Language Selection -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+                    <div>
+                        <label for="source_language" class="block text-lg font-medium text-gray-700 mb-2">2. Original Language</label>
+                        <select name="source_language" id="source_language" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                            {% for lang in supported_languages %}
+                                <option value="{{ lang }}">{{ lang }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div>
+                        <label for="translate_to" class="block text-lg font-medium text-gray-700 mb-2">3. Translate To (Optional)</label>
+                        <select name="translate_to" id="translate_to" class="w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500">
+                            <option value="None">None</option>
+                            {% for lang in supported_languages %}
+                                {% if lang != 'Auto Detect' %}
+                                    <option value="{{ lang }}">{{ lang }}</option>
+                                {% endif %}
+                            {% endfor %}
+                        </select>
+                    </div>
                 </div>
+                <!-- Processing Options -->
+                <div class="mb-8">
+                    <label class="block text-lg font-medium text-gray-700 mb-3">4. Choose Output Options</label>
+                    <div class="space-y-3">
+                        <div class="flex items-center">
+                            <input id="add_subtitles" name="add_subtitles" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" {% if imagemagick_missing %}disabled{% endif %}>
+                            <label for="add_subtitles" class="ml-3 block text-sm font-medium text-gray-700">Add burned-in subtitles to video</label>
+                        </div>
+                        <div class="flex items-center">
+                            <input id="add_tts" name="add_tts" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
+                            <label for="add_tts" class="ml-3 block text-sm font-medium text-gray-700">Replace audio with AI-generated voice (dubbing)</label>
+                        </div>
+                    </div>
                 </div>
+                <!-- Submit Button -->
+                <div class="text-center">
+                    <button type="submit" id="submit-btn" class="w-full sm:w-auto inline-flex justify-center items-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 disabled:opacity-50" {% if not api_key_set %}disabled{% endif %}>
+                        Process Video
+                    </button>
+                </div>
+            </form>
+        </div>
+        <!-- Loading Spinner -->
+        <div id="loader-container" class="text-center my-10 hidden">
+            <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 h-32 w-32 mx-auto"></div>
+            <h2 class="text-2xl font-semibold mt-6 text-gray-700">Processing your video...</h2>
+            <p class="text-gray-500 mt-2">This may take several minutes depending on the video length.</p>
         </div>
+        <!-- Results Section -->
         {% if results %}
+        <div id="results-section" class="mt-10 bg-white p-6 sm:p-8 rounded-xl shadow-lg">
+            <h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">Processing Complete!</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {% if results.output_video_file %}
+                <div class="md:col-span-2 bg-gray-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-lg text-gray-700 mb-3">Final Processed Video</h3>
+                    <video class="w-full rounded-lg shadow-md" controls>
+                        <source src="{{ url_for('download_file', session_id=session_id, filename=results.output_video_file) }}" type="video/mp4">
+                        Your browser does not support the video tag.
+                    </video>
+                    <a href="{{ url_for('download_file', session_id=session_id, filename=results.output_video_file) }}" class="mt-4 inline-block w-full text-center px-6 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">Download Final Video (.mp4)</a>
                 </div>
+                {% endif %}
+                {% if results.original_srt_file or results.translated_srt_file or results.tts_audio_file %}
+                <div class="md:col-span-2">
+                    <h3 class="font-semibold text-lg text-gray-700 mb-3">Downloadable Assets</h3>
+                    <div class="space-y-3">
+                        {% if results.original_srt_file %}
+                        <a href="{{ url_for('download_file', session_id=session_id, filename=results.original_srt_file) }}" class="block bg-blue-50 hover:bg-blue-100 p-3 rounded-md transition duration-150">
+                           <span class="font-medium text-blue-800">Original Subtitles (.srt)</span>
+                        </a>
+                        {% endif %}
+                        {% if results.translated_srt_file %}
+                        <a href="{{ url_for('download_file', session_id=session_id, filename=results.translated_srt_file) }}" class="block bg-purple-50 hover:bg-purple-100 p-3 rounded-md transition duration-150">
+                            <span class="font-medium text-purple-800">Translated Subtitles (.srt)</span>
+                        </a>
+                        {% endif %}
+                        {% if results.tts_audio_file %}
+                        <a href="{{ url_for('download_file', session_id=session_id, filename=results.tts_audio_file) }}" class="block bg-teal-50 hover:bg-teal-100 p-3 rounded-md transition duration-150">
+                            <span class="font-medium text-teal-800">Generated Audio (Dub) (.mp3)</span>
+                        </a>
+                        {% endif %}
+                    </div>
                 </div>
+                {% endif %}
+            </div>
+            <div class="text-center mt-8">
+                <a href="{{ url_for('index') }}" class="text-blue-600 hover:text-blue-800 font-medium">Process another video &rarr;</a>
+            </div>
         </div>
         {% endif %}
     </div>
+    <footer class="text-center p-4 mt-8">
+        <p class="text-sm text-gray-500">A project by the open-source community. Please use responsibly.</p>
+    </footer>
     <script>
+        const form = document.getElementById('video-form');
+        const submitBtn = document.getElementById('submit-btn');
+        const formContainer = document.getElementById('form-container');
+        const loaderContainer = document.getElementById('loader-container');
+        form.addEventListener('submit', function() {
+            // Check if form is valid before proceeding
+            if(form.checkValidity()){
+                submitBtn.disabled = true;
+                submitBtn.innerHTML = 'Processing...';
+                formContainer.style.opacity = '0';
+                setTimeout(() => {
+                    formContainer.classList.add('hidden');
+                    loaderContainer.classList.remove('hidden');
+                }, 500);
+            }
         });
     </script>
 </body>
+</html>