AutoSubGen / templates /index.html
Athspi's picture
Update templates/index.html
ac9beab verified
<!DOCTYPE html>
<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 &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>