Spaces:

Athspi-ai
/

Translate

Running

App Files Files Community

Athspi commited on 5 days ago

Commit

93e0110

verified ·

1 Parent(s): 572dd26

Create templates/index.html

Browse files

Files changed (1) hide show

templates/templates/index.html +379 -0

templates/templates/index.html ADDED Viewed

	@@ -0,0 +1,379 @@

+<!-- templates/index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Video Dubbing</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #4361ee;
+            --primary-light: #4895ef;
+            --secondary: #3f37c9;
+            --dark: #1a1a2e;
+            --light: #f8f9fa;
+            --gray: #6c757d;
+            --success: #4cc9f0;
+            --error: #f72585;
+            --border-radius: 12px;
+            --shadow: 0 10px 30px rgba(0,0,0,0.1);
+            --transition: all 0.3s ease;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f5f7ff;
+            color: var(--dark);
+            line-height: 1.6;
+            padding: 20px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            overflow: hidden;
+        }
+        header {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            color: white;
+            padding: 2rem;
+            text-align: center;
+        }
+        h1 {
+            font-size: 2.2rem;
+            margin-bottom: 0.5rem;
+        }
+        .subtitle {
+            font-weight: 300;
+            opacity: 0.9;
+        }
+        .content {
+            padding: 2rem;
+        }
+        .upload-area {
+            border: 2px dashed var(--primary-light);
+            border-radius: var(--border-radius);
+            padding: 3rem 2rem;
+            text-align: center;
+            margin-bottom: 2rem;
+            transition: var(--transition);
+            cursor: pointer;
+            position: relative;
+        }
+        .upload-area:hover {
+            border-color: var(--primary);
+            background: rgba(67, 97, 238, 0.05);
+        }
+        .upload-icon {
+            font-size: 3rem;
+            color: var(--primary-light);
+            margin-bottom: 1rem;
+        }
+        .file-input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            cursor: pointer;
+        }
+        .file-info {
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            color: var(--gray);
+        }
+        .options {
+            background: #f8f9fe;
+            padding: 1.5rem;
+            border-radius: var(--border-radius);
+            margin-bottom: 2rem;
+        }
+        .option-group {
+            margin-bottom: 1.5rem;
+        }
+        .option-title {
+            font-weight: 600;
+            margin-bottom: 0.8rem;
+            color: var(--secondary);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .option-title i {
+            font-size: 1.1rem;
+        }
+        .radio-group, .checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .radio-option, .checkbox-option {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: white;
+            padding: 0.8rem 1.2rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            transition: var(--transition);
+        }
+        .radio-option:hover, .checkbox-option:hover {
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .radio-option input, .checkbox-option input {
+            accent-color: var(--primary);
+        }
+        .btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            font-size: 1.1rem;
+            font-weight: 500;
+            cursor: pointer;
+            width: 100%;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.8rem;
+        }
+        .btn:hover {
+            background: var(--secondary);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(63, 55, 201, 0.3);
+        }
+        .btn i {
+            font-size: 1.2rem;
+        }
+        .alert {
+            padding: 1rem;
+            border-radius: var(--border-radius);
+            margin-bottom: 1.5rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+        }
+        .alert-success {
+            background: rgba(76, 201, 240, 0.2);
+            color: #0a9396;
+            border: 1px solid rgba(76, 201, 240, 0.3);
+        }
+        .alert-error {
+            background: rgba(247, 37, 133, 0.1);
+            color: var(--error);
+            border: 1px solid rgba(247, 37, 133, 0.2);
+        }
+        .loader {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(67, 97, 238, 0.2);
+            border-top: 5px solid var(--primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        .loading-text {
+            font-weight: 500;
+            color: var(--dark);
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @media (max-width: 768px) {
+            body {
+                padding: 10px;
+            }
+            header {
+                padding: 1.5rem;
+            }
+            h1 {
+                font-size: 1.8rem;
+            }
+            .content {
+                padding: 1.5rem;
+            }
+            .radio-group, .checkbox-group {
+                flex-direction: column;
+                gap: 0.8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>AI Video Dubbing</h1>
+            <p class="subtitle">Transform your videos with AI-powered Tamil dubbing</p>
+        </header>
+        <div class="content">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        <div class="alert alert-{{ category }}">
+                            <i class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i>
+                            {{ message }}
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+            <form id="dubbing-form" action="/process" method="POST" enctype="multipart/form-data">
+                <div class="upload-area" id="upload-area">
+                    <div class="upload-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                    <h3>Drag & Drop Video File</h3>
+                    <p>or click to browse (MP4, MOV, WEBM, AVI)</p>
+                    <div id="file-info" class="file-info">No file selected</div>
+                    <input type="file" id="video" name="video" class="file-input" accept="video/*">
+                </div>
+                <div class="options">
+                    <div class="option-group">
+                        <div class="option-title">
+                            <i class="fas fa-microphone"></i>
+                            Voice Style
+                        </div>
+                        <div class="radio-group">
+                            {% for voice, value in voices.items() %}
+                                <label class="radio-option">
+                                    <input type="radio" name="voice" value="{{ value }}" {% if loop.first %}checked{% endif %}>
+                                    {{ voice }}
+                                </label>
+                            {% endfor %}
+                        </div>
+                    </div>
+                    <div class="option-group">
+                        <div class="option-title">
+                            <i class="fas fa-adjust"></i>
+                            Tone Options
+                        </div>
+                        <div class="checkbox-group">
+                            <label class="checkbox-option">
+                                <input type="checkbox" name="tone">
+                                Cheerful Tone
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <button type="submit" class="btn">
+                    <i class="fas fa-magic"></i>
+                    Generate Dubbed Video
+                </button>
+            </form>
+            <div class="loader" id="loader">
+                <div class="spinner"></div>
+                <p class="loading-text">Processing your video. Please wait...</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const form = document.getElementById('dubbing-form');
+        const loader = document.getElementById('loader');
+        const uploadArea = document.getElementById('upload-area');
+        const fileInput = document.getElementById('video');
+        const fileInfo = document.getElementById('file-info');
+        // Handle file selection
+        fileInput.addEventListener('change', function() {
+            if (this.files.length > 0) {
+                fileInfo.textContent = this.files[0].name;
+                uploadArea.style.borderColor = '#4361ee';
+                uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
+            }
+        });
+        // Drag and drop functionality
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.style.borderColor = '#4361ee';
+            uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.1)';
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.style.borderColor = fileInput.files.length > 0 ? '#4361ee' : '#4895ef';
+            uploadArea.style.backgroundColor = fileInput.files.length > 0 ? 'rgba(67, 97, 238, 0.05)' : 'transparent';
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.style.borderColor = '#4361ee';
+            uploadArea.style.backgroundColor = 'rgba(67, 97, 238, 0.05)';
+            if (e.dataTransfer.files.length) {
+                fileInput.files = e.dataTransfer.files;
+                fileInfo.textContent = e.dataTransfer.files[0].name;
+            }
+        });
+        // Form submission
+        form.addEventListener('submit', function(e) {
+            if (!fileInput.files.length) {
+                e.preventDefault();
+                alert('Please select a video file first.');
+            } else {
+                form.style.display = 'none';
+                loader.style.display = 'block';
+            }
+        });
+    </script>
+</body>
+</html>