Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>AI Video Generator — GpsirEra</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; } | |
| body { background: #0a0e17; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; } | |
| .container { max-width: 700px; width: 100%; padding: 30px; background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border-radius: 24px; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } | |
| header h1 { font-size: 2.2rem; background: linear-gradient(45deg, #00d4ff, #e50914); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; } | |
| header p { text-align: center; color: #8899aa; margin: 8px 0 25px; } | |
| .form-group { margin-bottom: 18px; } | |
| .form-group label { display: block; color: #ccd6e0; font-weight: 500; margin-bottom: 5px; } | |
| .form-group textarea, .form-group select, .form-group input { | |
| width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); | |
| background: rgba(255,255,255,0.03); color: #fff; font-size: 1rem; outline: none; transition: 0.3s; | |
| } | |
| .form-group textarea:focus, .form-group select:focus, .form-group input:focus { border-color: #00d4ff; } | |
| .form-group select option { background: #0a0e17; color: #fff; } | |
| button { width: 100%; padding: 14px; border-radius: 50px; border: none; background: linear-gradient(45deg, #00d4ff, #0088cc); color: #fff; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: 0.3s; margin-top: 10px; } | |
| button:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,212,255,0.3); } | |
| #loading { text-align: center; padding: 30px 0; } | |
| .spinner { width: 50px; height: 50px; border: 4px solid #1a2332; border-top-color: #00d4ff; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 15px; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| #result { text-align: center; padding: 20px 0; } | |
| .btn-download { display: inline-block; margin-top: 15px; padding: 12px 30px; background: #4CAF50; color: #fff; border-radius: 30px; text-decoration: none; font-weight: 600; cursor: pointer; transition: 0.3s; } | |
| .btn-download:hover { background: #45a049; transform: scale(1.05); } | |
| footer { text-align: center; color: #334455; margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.03); font-size: 0.9rem; } | |
| @media (max-width: 600px) { .container { padding: 20px; } header h1 { font-size: 1.8rem; } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>🎬 AI Video Generator</h1> | |
| <p>Prompt to 60-Second Video — English/Hindi</p> | |
| </header> | |
| <main> | |
| <form id="videoForm"> | |
| <div class="form-group"> | |
| <label>📝 Enter Your Prompt</label> | |
| <textarea id="prompt" rows="4" placeholder="Describe your video... e.g., A cat walking on Mars"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label>🌐 Language</label> | |
| <select id="language"> | |
| <option value="en">English</option> | |
| <option value="hi">Hindi</option> | |
| </select> | |
| </div> | |
| <div class="form-group" id="voiceEnGroup"> | |
| <label>🎵 Voice (English)</label> | |
| <select id="voiceEn"> | |
| <option value="en-US-JennyNeural">Jenny (Female)</option> | |
| <option value="en-US-GuyNeural">Guy (Male)</option> | |
| <option value="en-GB-SoniaNeural">Sonia (British)</option> | |
| </select> | |
| </div> | |
| <div class="form-group" id="voiceHiGroup" style="display:none;"> | |
| <label>🎵 Voice (Hindi)</label> | |
| <select id="voiceHi"> | |
| <option value="hi-IN-SwaraNeural">Swara (Female)</option> | |
| <option value="hi-IN-MadhurNeural">Madhur (Male)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>⏱️ Video Duration (seconds)</label> | |
| <input type="number" id="duration" value="45" min="10" max="120" /> | |
| </div> | |
| <button type="submit">🚀 Generate Video</button> | |
| </form> | |
| <div id="loading" style="display:none;"> | |
| <div class="spinner"></div> | |
| <p>⏳ Generating your video... Please wait 1-2 minutes.</p> | |
| </div> | |
| <div id="result" style="display:none;"> | |
| <h3>✅ Video Ready!</h3> | |
| <video id="videoOutput" controls style="width:100%;max-width:600px;border-radius:12px;"></video> | |
| <a id="downloadBtn" class="btn-download">📥 Download Video</a> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2026 <strong>GpsirEra</strong> • AI Video Generator • ~#gpsirAI</p> | |
| </footer> | |
| </div> | |
| <script> | |
| document.getElementById('videoForm').addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const prompt = document.getElementById('prompt').value.trim(); | |
| const language = document.getElementById('language').value; | |
| const duration = parseInt(document.getElementById('duration').value) || 45; | |
| const voiceEn = document.getElementById('voiceEn').value; | |
| const voiceHi = document.getElementById('voiceHi').value; | |
| const loading = document.getElementById('loading'); | |
| const resultDiv = document.getElementById('result'); | |
| if (!prompt) { alert('❌ Please enter a prompt!'); return; } | |
| loading.style.display = 'block'; | |
| resultDiv.style.display = 'none'; | |
| try { | |
| const response = await fetch('/generate-video', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ prompt, language, duration, voice_en: voiceEn, voice_hi: voiceHi }) | |
| }); | |
| const data = await response.json(); | |
| if (data.error) { throw new Error(data.error); } | |
| loading.style.display = 'none'; | |
| resultDiv.style.display = 'block'; | |
| const videoEl = document.getElementById('videoOutput'); | |
| videoEl.src = data.video_url; | |
| videoEl.load(); | |
| document.getElementById('downloadBtn').href = data.video_url; | |
| } catch (error) { | |
| loading.style.display = 'none'; | |
| alert('❌ Error: ' + error.message); | |
| } | |
| }); | |
| document.getElementById('language').addEventListener('change', function() { | |
| const lang = this.value; | |
| document.getElementById('voiceEnGroup').style.display = lang === 'en' ? 'block' : 'none'; | |
| document.getElementById('voiceHiGroup').style.display = lang === 'hi' ? 'block' : 'none'; | |
| }); | |
| document.getElementById('language').dispatchEvent(new Event('change')); | |
| </script> | |
| </body> | |
| </html> |