Spaces:
Running
Running
| <html lang="en"> | |
| <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 →</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> | |