Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Text-to-Video Generator</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container"> | |
| <h1 class="text-center mt-5">AI Text-to-Video Generator</h1> | |
| <div class="card mt-4 p-4 shadow mx-auto" style="max-width: 600px;"> | |
| <label for="prompt" class="form-label">Enter Your Prompt:</label> | |
| <input type="text" id="prompt" class="form-control" placeholder="E.g., Astronaut in a jungle..."> | |
| <button id="generateBtn" class="btn btn-primary mt-3">Generate Video</button> | |
| <div id="loading" class="text-center mt-3" style="display: none;"> | |
| <div class="spinner-border text-primary" role="status"></div> | |
| <p>Generating video...</p> | |
| </div> | |
| <div id="video-container" class="mt-4 text-center" style="display: none;"> | |
| <h3>Generated Video:</h3> | |
| <video id="generatedVideo" controls class="w-100"></video> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById("generateBtn").addEventListener("click", async function() { | |
| const prompt = document.getElementById("prompt").value; | |
| if (!prompt) { | |
| alert("Please enter a prompt."); | |
| return; | |
| } | |
| document.getElementById("loading").style.display = "block"; | |
| document.getElementById("video-container").style.display = "none"; | |
| try { | |
| const response = await fetch("/generate", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ prompt }) | |
| }); | |
| const data = await response.json(); | |
| if (data.error) { | |
| alert("Error: " + data.error); | |
| } else { | |
| document.getElementById("generatedVideo").src = data.video_url; | |
| document.getElementById("video-container").style.display = "block"; | |
| } | |
| } catch (error) { | |
| alert("Error generating video!"); | |
| } finally { | |
| document.getElementById("loading").style.display = "none"; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |