Hugging Face's logo

Spaces:
AverageAiLiker
/
bot-tks1p3jy
Running

App Files Community
bot-tks1p3jy
File size: 10,624 Bytes 
cb8aa6e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
 
<!DOCTYPE html>
<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>