Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Generate stunning videos from text using Open-Sora-v2 AI model"> | |
| <meta name="keywords" content="text to video, AI video generation, Open-Sora, video creation"> | |
| <title>Text to Video - Open-Sora-v2</title> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <span class="logo-icon">🎬</span> | |
| <span class="logo-text">Text2Video</span> | |
| </div> | |
| <nav class="nav"> | |
| <a href="#" class="nav-link">Generate</a> | |
| <a href="#" class="nav-link">Gallery</a> | |
| <a href="#" class="nav-link">About</a> | |
| </nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="nav-link credit-link">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1 class="hero-title">Transform Your Ideas into Videos</h1> | |
| <p class="hero-subtitle">Powered by Open-Sora-v2 - Create stunning videos from simple text descriptions</p> | |
| </div> | |
| </section> | |
| <section class="generator"> | |
| <div class="container"> | |
| <div class="generator-card"> | |
| <form id="videoForm" class="video-form"> | |
| <div class="form-group"> | |
| <label for="prompt" class="form-label">Describe your video</label> | |
| <textarea | |
| id="prompt" | |
| name="prompt" | |
| class="form-textarea" | |
| placeholder="A beautiful sunset over the ocean with waves gently crashing on the shore, cinematic quality, 4K resolution" | |
| rows="4" | |
| required | |
| ></textarea> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label for="duration" class="form-label">Duration (seconds)</label> | |
| <select id="duration" name="duration" class="form-select"> | |
| <option value="2">2 seconds</option> | |
| <option value="4" selected>4 seconds</option> | |
| <option value="8">8 seconds</option> | |
| <option value="16">16 seconds</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="quality" class="form-label">Quality</label> | |
| <select id="quality" name="quality" class="form-select"> | |
| <option value="720p">720p</option> | |
| <option value="1080p" selected>1080p</option> | |
| <option value="4k">4K</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="style" class="form-label">Style</label> | |
| <select id="style" name="style" class="form-select"> | |
| <option value="realistic">Realistic</option> | |
| <option value="cinematic">Cinematic</option> | |
| <option value="anime">Anime</option> | |
| <option value="artistic">Artistic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button type="submit" class="generate-btn" id="generateBtn"> | |
| <span class="btn-text">Generate Video</span> | |
| <span class="btn-loader" style="display: none;"> | |
| <span class="spinner"></span> | |
| Generating... | |
| </span> | |
| </button> | |
| </form> | |
| <div id="progressContainer" class="progress-container" style="display: none;"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <p class="progress-text" id="progressText">Initializing...</p> | |
| </div> | |
| <div id="resultContainer" class="result-container" style="display: none;"> | |
| <h3 class="result-title">Your Generated Video</h3> | |
| <div class="video-wrapper"> | |
| <video id="generatedVideo" controls autoplay muted class="generated-video"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| <div class="result-actions"> | |
| <button class="action-btn download-btn" id="downloadBtn"> | |
| <span class="btn-icon">⬇</span> | |
| Download | |
| </button> | |
| <button class="action-btn share-btn" id="shareBtn"> | |
| <span class="btn-icon">🔗</span> | |
| Share | |
| </button> | |
| <button class="action-btn regenerate-btn" id="regenerateBtn"> | |
| <span class="btn-icon">🔄</span> | |
| Regenerate | |
| </button> | |
| </div> | |
| </div> | |
| <div id="errorContainer" class="error-container" style="display: none;"> | |
| <div class="error-icon">⚠️</div> | |
| <h3 class="error-title">Generation Failed</h3> | |
| <p class="error-message" id="errorMessage">Something went wrong. Please try again.</p> | |
| <button class="retry-btn" id="retryBtn">Try Again</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="features"> | |
| <div class="container"> | |
| <h2 class="section-title">Why Choose Open-Sora-v2?</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon">⚡</div> | |
| <h3 class="feature-title">Fast Generation</h3> | |
| <p class="feature-description">Create videos in seconds with our optimized AI pipeline</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🎨</div> | |
| <h3 class="feature-title">High Quality</h3> | |
| <p class="feature-description">Crystal clear 4K resolution with cinematic quality output</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🚀</div> | |
| <h3 class="feature-title">Easy to Use</h3> | |
| <p class="feature-description">Simple text input - no technical skills required</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon">🔧</div> | |
| <h3 class="feature-title">Customizable</h3> | |
| <p class="feature-description">Adjust duration, quality, and style to match your needs</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="examples"> | |
| <div class="container"> | |
| <h2 class="section-title">Example Prompts</h2> | |
| <div class="examples-grid"> | |
| <div class="example-card" data-prompt="A serene mountain landscape at sunrise with mist rolling over the valleys, golden light filtering through the clouds"> | |
| <div class="example-image">🏔️</div> | |
| <p class="example-text">Mountain sunrise with mist</p> | |
| </div> | |
| <div class="example-card" data-prompt="A bustling city street at night with neon signs reflecting on wet pavement, cyberpunk aesthetic"> | |
| <div class="example-image">🌃</div> | |
| <p class="example-text">Cyberpunk city night</p> | |
| </div> | |
| <div class="example-card" data-prompt="Underwater coral reef with colorful fish swimming, sun rays penetrating through the water"> | |
| <div class="example-image">🐠</div> | |
| <p class="example-text">Underwater coral reef</p> | |
| </div> | |
| <div class="example-card" data-prompt="A magical forest with glowing mushrooms and fireflies, fantasy atmosphere"> | |
| <div class="example-image">🌲</div> | |
| <p class="example-text">Magical fantasy forest</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <p class="footer-text">© 2024 Text2Video. Powered by Open-Sora-v2</p> | |
| <div class="footer-links"> | |
| <a href="#" class="footer-link">Privacy</a> | |
| <a href="#" class="footer-link">Terms</a> | |
| <a href="#" class="footer-link">API</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script src="assets/js/script.js"></script> | |
| </body> | |
| </html> |