Hugging Face's logo

Spaces:
ChetanSaifsAi
/
ai-text-to-video-template
Running

App Files Community
ChetanSaifsAi commited on
Commit
37d7c88
·
verified ·
1 Parent(s): fcf287f

updated commit

Browse files
Files changed (3) hide show
  1. app.js +60 -0
  2. index.html +90 -19
  3. styles.css +306 -0
app.js ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ const { createApp } = Vue
2
+
3
+ const app = createApp({
4
+ data() {
5
+ return {
6
+ videoDescription: '',
7
+ charCount: 0,
8
+ selectedStyle: null,
9
+ showProModal: false,
10
+ generationCount: 0,
11
+ videoStyles: [
12
+ { id: 'mountain', name: 'Mountain Landscape' },
13
+ { id: 'city', name: 'City Timelapse' },
14
+ { id: 'ocean', name: 'Ocean Waves' },
15
+ { id: 'dance', name: 'Dancing Performance' },
16
+ { id: 'nature', name: 'Nature Wildlife' },
17
+ { id: 'space', name: 'Space Journey' }
18
+ ]
19
+ }
20
+ },
21
+ methods: {
22
+ updateCharCount() {
23
+ this.charCount = this.videoDescription.length
24
+ if (this.charCount > 1000) {
25
+ this.videoDescription = this.videoDescription.slice(0, 1000)
26
+ this.charCount = 1000
27
+ }
28
+ },
29
+ selectStyle(styleId) {
30
+ this.selectedStyle = styleId
31
+ },
32
+ enhanceText() {
33
+ if (this.generationCount >= 3) {
34
+ this.showProModal = true
35
+ return
36
+ }
37
+ // Placeholder for text enhancement functionality
38
+ console.log('Enhancing text...')
39
+ },
40
+ generateVideo() {
41
+ if (this.generationCount >= 3) {
42
+ this.showProModal = true
43
+ return
44
+ }
45
+ this.generationCount++
46
+ if (this.generationCount >= 3) {
47
+ this.showProModal = true
48
+ } else {
49
+ // Placeholder for video generation functionality
50
+ console.log('Generating video...')
51
+ window.location.href = 'https://saifs.ai/text-to-video'
52
+ }
53
+ },
54
+ closeProModal() {
55
+ this.showProModal = false
56
+ }
57
+ }
58
+ })
59
+
60
+ app.mount('#app')
index.html CHANGED
@@ -1,19 +1,90 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Transform text into engaging videos with AI - Try our powerful text-to-video conversion tool">
7
+ <meta name="keywords" content="AI text to video, video generation, content creation, artificial intelligence">
8
+ <title>AI Text to Video Converter | Transform Text to Engaging Videos</title>
9
+ <link rel="stylesheet" href="styles.css">
10
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ </head>
13
+ <body>
14
+ <div id="app">
15
+ <main class="main-container">
16
+ <h1 class="main-title">Text to Video Generator</h1>
17
+ <p class="subtitle">Create stunning videos from your descriptions in seconds</p>
18
+
19
+ <div class="video-generator">
20
+ <div class="input-section">
21
+ <div class="text-input-container">
22
+ <div class="input-header">
23
+ <div class="input-title">Describe your video</div>
24
+ <button class="enhance-btn" @click="enhanceText">
25
+ <i class="fas fa-wand-magic-sparkles"></i>
26
+ Enhance
27
+ </button>
28
+ </div>
29
+ <textarea
30
+ v-model="videoDescription"
31
+ placeholder="Example: A serene mountain landscape at sunset, with clouds drifting over snow-capped peaks..."
32
+ @input="updateCharCount"
33
+ class="video-input"
34
+ ></textarea>
35
+ <div class="char-count">{{ charCount }}/1000</div>
36
+ </div>
37
+
38
+ <div class="style-buttons">
39
+ <button
40
+ v-for="style in videoStyles"
41
+ :key="style.id"
42
+ :class="['style-btn', { active: selectedStyle === style.id }]"
43
+ @click="selectStyle(style.id)"
44
+ >
45
+ {{ style.name }}
46
+ </button>
47
+ </div>
48
+
49
+ <button class="generate-btn" @click="generateVideo">
50
+ <i class="fas fa-wand-magic-sparkles"></i>
51
+ Generate Video
52
+ </button>
53
+ </div>
54
+
55
+ <div class="preview-section">
56
+ <div class="video-preview">
57
+ <i class="fas fa-video preview-icon"></i>
58
+ <p>Your generated video will appear here</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </main>
63
+
64
+ <!-- Pro Upgrade Modal -->
65
+ <div v-if="showProModal" class="modal-overlay" @click="closeProModal"></div>
66
+ <div v-if="showProModal" class="upgrade-modal">
67
+ <h2>Upgrade to Pro</h2>
68
+ <p>Get access to advanced features and create unlimited videos</p>
69
+
70
+ <ul class="features-list">
71
+ <li><i class="fas fa-check"></i> Unlimited video generations</li>
72
+ <li><i class="fas fa-check"></i> Higher resolution output</li>
73
+ <li><i class="fas fa-check"></i> Priority processing</li>
74
+ <li><i class="fas fa-check"></i> Advanced customization options</li>
75
+ <li><i class="fas fa-check"></i> Commercial usage rights</li>
76
+ </ul>
77
+
78
+ <div class="modal-buttons">
79
+ <a href="https://saifs.ai/text-to-video" class="upgrade-btn">
80
+ Upgrade to Pro
81
+ </a>
82
+ <button class="continue-free-btn" @click="closeProModal">
83
+ Continue with Free
84
+ </button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ <script src="app.js"></script>
89
+ </body>
90
+ </html>
styles.css ADDED
@@ -0,0 +1,306 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #6366f1;
3
+ --secondary-color: #2c3e50;
4
+ --accent-color: #4f46e5;
5
+ --background-color: #ffffff;
6
+ --text-color: #333;
7
+ --border-color: #e5e7eb;
8
+ --hover-color: #4f46e5;
9
+ }
10
+
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ body {
18
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19
+ line-height: 1.6;
20
+ color: var(--text-color);
21
+ background-color: var(--background-color);
22
+ min-height: 100vh;
23
+ }
24
+
25
+ /* Main Container */
26
+ .main-container {
27
+ min-height: 100vh;
28
+ padding: 2rem 5%;
29
+ max-width: 1400px;
30
+ margin: 0 auto;
31
+ width: 100%;
32
+ display: flex;
33
+ flex-direction: column;
34
+ justify-content: center;
35
+ }
36
+
37
+ .main-title {
38
+ font-size: 2.5rem;
39
+ color: var(--text-color);
40
+ text-align: center;
41
+ margin-bottom: 0.5rem;
42
+ }
43
+
44
+ .subtitle {
45
+ text-align: center;
46
+ color: #6b7280;
47
+ margin-bottom: 2rem;
48
+ }
49
+
50
+ /* Video Generator */
51
+ .video-generator {
52
+ display: grid;
53
+ grid-template-columns: 1fr 1fr;
54
+ gap: 2rem;
55
+ background-color: white;
56
+ padding: 2rem;
57
+ border-radius: 12px;
58
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
59
+ margin-bottom: 2rem;
60
+ }
61
+
62
+ .input-section {
63
+ display: flex;
64
+ flex-direction: column;
65
+ gap: 1.5rem;
66
+ }
67
+
68
+ .text-input-container {
69
+ position: relative;
70
+ background: #f9fafb;
71
+ border-radius: 8px;
72
+ padding: 1rem;
73
+ border: 1px solid var(--border-color);
74
+ }
75
+
76
+ .video-input {
77
+ width: 100%;
78
+ min-height: 120px;
79
+ padding: 0;
80
+ background: transparent;
81
+ border: none;
82
+ resize: none;
83
+ font-size: 0.9rem;
84
+ line-height: 1.5;
85
+ color: var(--text-color);
86
+ }
87
+
88
+ .video-input:focus {
89
+ outline: none;
90
+ }
91
+
92
+ .video-input::placeholder {
93
+ color: #9ca3af;
94
+ }
95
+
96
+ .input-header {
97
+ display: flex;
98
+ justify-content: space-between;
99
+ align-items: center;
100
+ margin-bottom: 0.5rem;
101
+ }
102
+
103
+ .input-title {
104
+ font-size: 1rem;
105
+ color: var(--text-color);
106
+ font-weight: 500;
107
+ }
108
+
109
+ .enhance-btn {
110
+ padding: 0.5rem 1rem;
111
+ background-color: transparent;
112
+ border: 1px solid var(--border-color);
113
+ border-radius: 6px;
114
+ cursor: pointer;
115
+ display: flex;
116
+ align-items: center;
117
+ gap: 0.5rem;
118
+ font-size: 0.9rem;
119
+ color: var(--text-color);
120
+ transition: all 0.3s ease;
121
+ }
122
+
123
+ .enhance-btn:hover {
124
+ background-color: #f3f4f6;
125
+ }
126
+
127
+ .char-count {
128
+ position: absolute;
129
+ bottom: 1rem;
130
+ right: 1rem;
131
+ font-size: 0.8rem;
132
+ color: #6b7280;
133
+ }
134
+
135
+ .style-buttons {
136
+ display: grid;
137
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
138
+ gap: 0.5rem;
139
+ }
140
+
141
+ .style-btn {
142
+ padding: 0.5rem 1rem;
143
+ background-color: white;
144
+ border: 1px solid var(--border-color);
145
+ border-radius: 6px;
146
+ cursor: pointer;
147
+ font-size: 0.9rem;
148
+ color: var(--text-color);
149
+ transition: all 0.3s ease;
150
+ }
151
+
152
+ .style-btn:hover, .style-btn.active {
153
+ background-color: var(--primary-color);
154
+ color: white;
155
+ border-color: var(--primary-color);
156
+ }
157
+
158
+ .generate-btn {
159
+ padding: 1rem;
160
+ background-color: var(--primary-color);
161
+ color: white;
162
+ border: none;
163
+ border-radius: 8px;
164
+ cursor: pointer;
165
+ font-size: 1rem;
166
+ font-weight: 500;
167
+ display: flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ gap: 0.5rem;
171
+ transition: background-color 0.3s ease;
172
+ }
173
+
174
+ .generate-btn:hover {
175
+ background-color: var(--hover-color);
176
+ }
177
+
178
+ .preview-section {
179
+ display: flex;
180
+ align-items: center;
181
+ justify-content: center;
182
+ background-color: #f9fafb;
183
+ border-radius: 8px;
184
+ border: 2px dashed var(--border-color);
185
+ min-height: 300px;
186
+ }
187
+
188
+ .video-preview {
189
+ text-align: center;
190
+ color: #6b7280;
191
+ }
192
+
193
+ .preview-icon {
194
+ font-size: 3rem;
195
+ margin-bottom: 1rem;
196
+ }
197
+
198
+ /* Pro Upgrade Modal */
199
+ .upgrade-modal {
200
+ position: fixed;
201
+ top: 50%;
202
+ left: 50%;
203
+ transform: translate(-50%, -50%);
204
+ background: white;
205
+ padding: 2rem;
206
+ border-radius: 12px;
207
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
208
+ max-width: 500px;
209
+ width: 90%;
210
+ z-index: 1000;
211
+ text-align: center;
212
+ }
213
+
214
+ .modal-overlay {
215
+ position: fixed;
216
+ top: 0;
217
+ left: 0;
218
+ right: 0;
219
+ bottom: 0;
220
+ background: rgba(0, 0, 0, 0.5);
221
+ z-index: 999;
222
+ }
223
+
224
+ .upgrade-modal h2 {
225
+ font-size: 1.5rem;
226
+ margin-bottom: 1rem;
227
+ color: var(--text-color);
228
+ }
229
+
230
+ .upgrade-modal p {
231
+ color: #6b7280;
232
+ margin-bottom: 1.5rem;
233
+ }
234
+
235
+ .features-list {
236
+ text-align: left;
237
+ margin: 1.5rem 0;
238
+ }
239
+
240
+ .features-list li {
241
+ display: flex;
242
+ align-items: center;
243
+ gap: 0.5rem;
244
+ margin-bottom: 0.75rem;
245
+ color: var(--text-color);
246
+ }
247
+
248
+ .features-list i {
249
+ color: var(--primary-color);
250
+ }
251
+
252
+ .modal-buttons {
253
+ display: flex;
254
+ gap: 1rem;
255
+ justify-content: center;
256
+ margin-top: 2rem;
257
+ }
258
+
259
+ .upgrade-btn {
260
+ padding: 0.75rem 1.5rem;
261
+ background-color: var(--primary-color);
262
+ color: white;
263
+ border: none;
264
+ border-radius: 6px;
265
+ cursor: pointer;
266
+ font-weight: 500;
267
+ transition: background-color 0.3s ease;
268
+ }
269
+
270
+ .upgrade-btn:hover {
271
+ background-color: var(--hover-color);
272
+ }
273
+
274
+ .continue-free-btn {
275
+ padding: 0.75rem 1.5rem;
276
+ background-color: transparent;
277
+ color: var(--text-color);
278
+ border: 1px solid var(--border-color);
279
+ border-radius: 6px;
280
+ cursor: pointer;
281
+ font-weight: 500;
282
+ transition: all 0.3s ease;
283
+ }
284
+
285
+ .continue-free-btn:hover {
286
+ background-color: #f3f4f6;
287
+ }
288
+
289
+ /* Responsive Design */
290
+ @media (max-width: 768px) {
291
+ .video-generator {
292
+ grid-template-columns: 1fr;
293
+ }
294
+
295
+ .style-buttons {
296
+ grid-template-columns: repeat(2, 1fr);
297
+ }
298
+
299
+ .preview-section {
300
+ min-height: 200px;
301
+ }
302
+
303
+ .modal-buttons {
304
+ flex-direction: column;
305
+ }
306
+ }