Hugging Face's logo

Spaces:
orderlymirror
/
exp1
Running

App Files Community
orderlymirror commited on
Commit
ee7e6d0
·
verified ·
1 Parent(s): f2308d5

Upload 3 files

Browse files
Files changed (3) hide show
  1. app.js +60 -0
  2. index.html +117 -0
  3. styles.css +430 -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 ADDED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>SAIFS AI - Text to Video Converter</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
+ <header class="site-header">
16
+ <a href="https://saifs.ai/text-to-video" target="_blank" class="logo-link">
17
+ <div class="logo-icon">
18
+ <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
19
+ <rect width="40" height="40" rx="8" fill="#6366f1"/>
20
+ <path d="M12 14.5C12 13.1193 13.1193 12 14.5 12H25.5C26.8807 12 28 13.1193 28 14.5V25.5C28 26.8807 26.8807 28 25.5 28H14.5C13.1193 28 12 26.8807 12 25.5V14.5Z" fill="white"/>
21
+ <path d="M20 16L16 18.5L20 21L24 18.5L20 16Z" fill="#6366f1"/>
22
+ <path d="M16 22.5L20 25L24 22.5V18.5L20 21L16 18.5V22.5Z" fill="#6366f1"/>
23
+ </svg>
24
+ </div>
25
+ <span class="logo-text">SAIFS AI</span>
26
+ </a>
27
+ <a href="https://saifs.ai/text-to-video" target="_blank" class="website-link">Visit Our Website</a>
28
+ </header>
29
+
30
+ <main class="main-container">
31
+ <h1 class="main-title">Text to Video Generator</h1>
32
+ <p class="subtitle">Create stunning videos from your descriptions in seconds</p>
33
+
34
+ <div class="video-generator">
35
+ <div class="input-section">
36
+ <div class="text-input-container">
37
+ <div class="input-header">
38
+ <div class="input-title">Describe your video</div>
39
+ <button class="enhance-btn" @click="enhanceText">
40
+ <i class="fas fa-wand-magic-sparkles"></i>
41
+ Enhance
42
+ </button>
43
+ </div>
44
+ <textarea
45
+ v-model="videoDescription"
46
+ placeholder="Example: A serene mountain landscape at sunset, with clouds drifting over snow-capped peaks..."
47
+ @input="updateCharCount"
48
+ class="video-input"
49
+ ></textarea>
50
+ <div class="char-count">{{ charCount }}/1000</div>
51
+ </div>
52
+
53
+ <div class="style-buttons">
54
+ <button
55
+ v-for="style in videoStyles"
56
+ :key="style.id"
57
+ :class="['style-btn', { active: selectedStyle === style.id }]"
58
+ @click="selectStyle(style.id)"
59
+ >
60
+ {{ style.name }}
61
+ </button>
62
+ </div>
63
+
64
+ <button class="generate-btn" @click="generateVideo">
65
+ <i class="fas fa-wand-magic-sparkles"></i>
66
+ Generate Video
67
+ </button>
68
+ </div>
69
+
70
+ <div class="preview-section">
71
+ <div class="video-preview">
72
+ <i class="fas fa-video preview-icon"></i>
73
+ <p>Your generated video will appear here</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </main>
78
+
79
+ <!-- Pro Upgrade Modal -->
80
+ <div v-if="showProModal" class="modal-overlay" @click="closeProModal"></div>
81
+ <div v-if="showProModal" class="upgrade-modal">
82
+ <h2>Upgrade to Pro</h2>
83
+ <p>Get access to advanced features and create unlimited videos</p>
84
+
85
+ <ul class="features-list">
86
+ <li><i class="fas fa-check"></i> Unlimited video generations</li>
87
+ <li><i class="fas fa-check"></i> Higher resolution output</li>
88
+ <li><i class="fas fa-check"></i> Priority processing</li>
89
+ <li><i class="fas fa-check"></i> Advanced customization options</li>
90
+ <li><i class="fas fa-check"></i> Commercial usage rights</li>
91
+ </ul>
92
+
93
+ <div class="modal-buttons">
94
+ <a href="https://saifs.ai/text-to-video" target="_blank" class="upgrade-btn">
95
+ Upgrade to Pro
96
+ </a>
97
+ <button class="continue-free-btn" @click="closeProModal">
98
+ Continue with Free
99
+ </button>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Footer -->
104
+ <footer class="site-footer">
105
+ <div class="footer-content">
106
+ Created with <i class="fas fa-heart"></i> by
107
+ <a href="https://saifs.ai/text-to-video" target="_blank" class="footer-link">SAIFS AI</a>
108
+ </div>
109
+ <div class="footer-subtext">
110
+ Experience more AI solutions at
111
+ <a href="https://saifs.ai/text-to-video" target="_blank" class="footer-link">saifs.ai/text-to-video</a>
112
+ </div>
113
+ </footer>
114
+ </div>
115
+ <script src="app.js"></script>
116
+ </body>
117
+ </html>
styles.css ADDED
@@ -0,0 +1,430 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ padding-top: 5rem;
36
+ }
37
+
38
+ .main-title {
39
+ font-size: 2.5rem;
40
+ color: var(--text-color);
41
+ text-align: center;
42
+ margin-bottom: 0.5rem;
43
+ }
44
+
45
+ .subtitle {
46
+ text-align: center;
47
+ color: #6b7280;
48
+ margin-bottom: 2rem;
49
+ }
50
+
51
+ /* Video Generator */
52
+ .video-generator {
53
+ display: grid;
54
+ grid-template-columns: 1fr 1fr;
55
+ gap: 2rem;
56
+ background-color: white;
57
+ padding: 2rem;
58
+ border-radius: 12px;
59
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
60
+ margin-bottom: 2rem;
61
+ }
62
+
63
+ .input-section {
64
+ display: flex;
65
+ flex-direction: column;
66
+ gap: 1.5rem;
67
+ }
68
+
69
+ .text-input-container {
70
+ position: relative;
71
+ background: #f9fafb;
72
+ border-radius: 8px;
73
+ padding: 1rem;
74
+ border: 1px solid var(--border-color);
75
+ }
76
+
77
+ .video-input {
78
+ width: 100%;
79
+ min-height: 120px;
80
+ padding: 0;
81
+ background: transparent;
82
+ border: none;
83
+ resize: none;
84
+ font-size: 0.9rem;
85
+ line-height: 1.5;
86
+ color: var(--text-color);
87
+ }
88
+
89
+ .video-input:focus {
90
+ outline: none;
91
+ }
92
+
93
+ .video-input::placeholder {
94
+ color: #9ca3af;
95
+ }
96
+
97
+ .input-header {
98
+ display: flex;
99
+ justify-content: space-between;
100
+ align-items: center;
101
+ margin-bottom: 0.5rem;
102
+ }
103
+
104
+ .input-title {
105
+ font-size: 1rem;
106
+ color: var(--text-color);
107
+ font-weight: 500;
108
+ }
109
+
110
+ .enhance-btn {
111
+ padding: 0.5rem 1rem;
112
+ background-color: transparent;
113
+ border: 1px solid var(--border-color);
114
+ border-radius: 6px;
115
+ cursor: pointer;
116
+ display: flex;
117
+ align-items: center;
118
+ gap: 0.5rem;
119
+ font-size: 0.9rem;
120
+ color: var(--text-color);
121
+ transition: all 0.3s ease;
122
+ }
123
+
124
+ .enhance-btn:hover {
125
+ background-color: #f3f4f6;
126
+ }
127
+
128
+ .char-count {
129
+ position: absolute;
130
+ bottom: 1rem;
131
+ right: 1rem;
132
+ font-size: 0.8rem;
133
+ color: #6b7280;
134
+ }
135
+
136
+ .style-buttons {
137
+ display: grid;
138
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
139
+ gap: 0.5rem;
140
+ }
141
+
142
+ .style-btn {
143
+ padding: 0.5rem 1rem;
144
+ background-color: white;
145
+ border: 1px solid var(--border-color);
146
+ border-radius: 6px;
147
+ cursor: pointer;
148
+ font-size: 0.9rem;
149
+ color: var(--text-color);
150
+ transition: all 0.3s ease;
151
+ }
152
+
153
+ .style-btn:hover, .style-btn.active {
154
+ background-color: var(--primary-color);
155
+ color: white;
156
+ border-color: var(--primary-color);
157
+ }
158
+
159
+ .generate-btn {
160
+ padding: 1rem;
161
+ background-color: var(--primary-color);
162
+ color: white;
163
+ border: none;
164
+ border-radius: 8px;
165
+ cursor: pointer;
166
+ font-size: 1rem;
167
+ font-weight: 500;
168
+ display: flex;
169
+ align-items: center;
170
+ justify-content: center;
171
+ gap: 0.5rem;
172
+ transition: background-color 0.3s ease;
173
+ }
174
+
175
+ .generate-btn:hover {
176
+ background-color: var(--hover-color);
177
+ }
178
+
179
+ .preview-section {
180
+ display: flex;
181
+ align-items: center;
182
+ justify-content: center;
183
+ background-color: #f9fafb;
184
+ border-radius: 8px;
185
+ border: 2px dashed var(--border-color);
186
+ min-height: 300px;
187
+ }
188
+
189
+ .video-preview {
190
+ text-align: center;
191
+ color: #6b7280;
192
+ }
193
+
194
+ .preview-icon {
195
+ font-size: 3rem;
196
+ margin-bottom: 1rem;
197
+ }
198
+
199
+ /* Pro Upgrade Modal */
200
+ .upgrade-modal {
201
+ position: fixed;
202
+ top: 50%;
203
+ left: 50%;
204
+ transform: translate(-50%, -50%);
205
+ background: white;
206
+ padding: 2rem;
207
+ border-radius: 12px;
208
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
209
+ max-width: 500px;
210
+ width: 90%;
211
+ z-index: 1000;
212
+ text-align: center;
213
+ }
214
+
215
+ .modal-overlay {
216
+ position: fixed;
217
+ top: 0;
218
+ left: 0;
219
+ right: 0;
220
+ bottom: 0;
221
+ background: rgba(0, 0, 0, 0.5);
222
+ z-index: 999;
223
+ }
224
+
225
+ .upgrade-modal h2 {
226
+ font-size: 1.5rem;
227
+ margin-bottom: 1rem;
228
+ color: var(--text-color);
229
+ }
230
+
231
+ .upgrade-modal p {
232
+ color: #6b7280;
233
+ margin-bottom: 1.5rem;
234
+ }
235
+
236
+ .features-list {
237
+ text-align: left;
238
+ margin: 1.5rem 0;
239
+ }
240
+
241
+ .features-list li {
242
+ display: flex;
243
+ align-items: center;
244
+ gap: 0.5rem;
245
+ margin-bottom: 0.75rem;
246
+ color: var(--text-color);
247
+ }
248
+
249
+ .features-list i {
250
+ color: var(--primary-color);
251
+ }
252
+
253
+ .modal-buttons {
254
+ display: flex;
255
+ gap: 1rem;
256
+ justify-content: center;
257
+ margin-top: 2rem;
258
+ }
259
+
260
+ .upgrade-btn {
261
+ padding: 0.75rem 1.5rem;
262
+ background-color: var(--primary-color);
263
+ color: white;
264
+ border: none;
265
+ border-radius: 6px;
266
+ cursor: pointer;
267
+ font-weight: 500;
268
+ transition: background-color 0.3s ease;
269
+ }
270
+
271
+ .upgrade-btn:hover {
272
+ background-color: var(--hover-color);
273
+ }
274
+
275
+ .continue-free-btn {
276
+ padding: 0.75rem 1.5rem;
277
+ background-color: transparent;
278
+ color: var(--text-color);
279
+ border: 1px solid var(--border-color);
280
+ border-radius: 6px;
281
+ cursor: pointer;
282
+ font-weight: 500;
283
+ transition: all 0.3s ease;
284
+ }
285
+
286
+ .continue-free-btn:hover {
287
+ background-color: #f3f4f6;
288
+ }
289
+
290
+ /* Responsive Design */
291
+ @media (max-width: 768px) {
292
+ .video-generator {
293
+ grid-template-columns: 1fr;
294
+ }
295
+
296
+ .style-buttons {
297
+ grid-template-columns: repeat(2, 1fr);
298
+ }
299
+
300
+ .preview-section {
301
+ min-height: 200px;
302
+ }
303
+
304
+ .modal-buttons {
305
+ flex-direction: column;
306
+ }
307
+ }
308
+
309
+ .site-header {
310
+ position: fixed;
311
+ top: 0;
312
+ left: 0;
313
+ right: 0;
314
+ background: white;
315
+ padding: 1rem 2rem;
316
+ display: flex;
317
+ justify-content: space-between;
318
+ align-items: center;
319
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
320
+ z-index: 100;
321
+ }
322
+
323
+ .logo-link {
324
+ display: flex;
325
+ align-items: center;
326
+ gap: 0.75rem;
327
+ text-decoration: none;
328
+ color: var(--text-color);
329
+ padding: 0.25rem;
330
+ }
331
+
332
+ .logo-icon {
333
+ width: 40px;
334
+ height: 40px;
335
+ display: flex;
336
+ align-items: center;
337
+ justify-content: center;
338
+ }
339
+
340
+ .logo-icon svg {
341
+ width: 100%;
342
+ height: 100%;
343
+ }
344
+
345
+ .logo-link:hover .logo-icon svg rect {
346
+ fill: var(--hover-color);
347
+ transition: fill 0.3s ease;
348
+ }
349
+
350
+ .logo-text {
351
+ font-size: 1.25rem;
352
+ font-weight: 700;
353
+ color: var(--text-color);
354
+ letter-spacing: 0.5px;
355
+ text-transform: uppercase;
356
+ }
357
+
358
+ .website-link {
359
+ padding: 0.5rem 1rem;
360
+ background-color: var(--primary-color);
361
+ color: white;
362
+ text-decoration: none;
363
+ border-radius: 6px;
364
+ font-size: 0.9rem;
365
+ transition: background-color 0.3s ease;
366
+ }
367
+
368
+ .website-link:hover {
369
+ background-color: var(--hover-color);
370
+ }
371
+
372
+ .site-footer {
373
+ text-align: center;
374
+ padding: 2rem 1rem;
375
+ color: #6b7280;
376
+ font-size: 0.9rem;
377
+ background-color: white;
378
+ box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.05);
379
+ position: relative;
380
+ margin-top: 2rem;
381
+ border-top: 1px solid var(--border-color);
382
+ }
383
+
384
+ .footer-content {
385
+ max-width: 1400px;
386
+ margin: 0 auto;
387
+ margin-bottom: 0.5rem;
388
+ }
389
+
390
+ .footer-content .fa-heart {
391
+ color: #ef4444;
392
+ margin: 0 0.25rem;
393
+ animation: heartbeat 1.5s ease infinite;
394
+ }
395
+
396
+ .footer-link {
397
+ color: var(--primary-color);
398
+ text-decoration: none;
399
+ font-weight: 500;
400
+ transition: color 0.3s ease;
401
+ }
402
+
403
+ .footer-link:hover {
404
+ color: var(--hover-color);
405
+ }
406
+
407
+ .footer-subtext {
408
+ color: #9ca3af;
409
+ font-size: 0.85rem;
410
+ max-width: 1400px;
411
+ margin: 0 auto;
412
+ }
413
+
414
+ @keyframes heartbeat {
415
+ 0% {
416
+ transform: scale(1);
417
+ }
418
+ 14% {
419
+ transform: scale(1.3);
420
+ }
421
+ 28% {
422
+ transform: scale(1);
423
+ }
424
+ 42% {
425
+ transform: scale(1.3);
426
+ }
427
+ 70% {
428
+ transform: scale(1);
429
+ }
430
+ }