Hugging Face's logo

Spaces:
sky-meilin
/
anycoder-saas_ai
No application file

App Files Community
sky-meilin commited on
Commit
9c54a45
·
verified ·
1 Parent(s): 00975d9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +870 -19
index.html CHANGED
@@ -1,19 +1,870 @@
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
+ <title>SaaS AI Application</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #4361ee;
11
+ --primary-hover: #3a56d4;
12
+ --secondary-color: #3f37c9;
13
+ --accent-color: #4cc9f0;
14
+ --light-color: #f8f9fa;
15
+ --dark-color: #212529;
16
+ --success-color: #4bb543;
17
+ --warning-color: #ffcc00;
18
+ --danger-color: #f94144;
19
+ --border-radius: 12px;
20
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
21
+ --transition: all 0.3s ease;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ }
30
+
31
+ body {
32
+ background-color: #f5f7fa;
33
+ color: var(--dark-color);
34
+ line-height: 1.6;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1200px;
39
+ margin: 0 auto;
40
+ padding: 0 20px;
41
+ }
42
+
43
+ /* Header */
44
+ header {
45
+ background-color: white;
46
+ box-shadow: var(--box-shadow);
47
+ position: sticky;
48
+ top: 0;
49
+ z-index: 100;
50
+ }
51
+
52
+ .header-container {
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ padding: 15px 0;
57
+ }
58
+
59
+ .logo {
60
+ display: flex;
61
+ align-items: center;
62
+ font-size: 24px;
63
+ font-weight: 700;
64
+ color: var(--primary-color);
65
+ text-decoration: none;
66
+ }
67
+
68
+ .logo i {
69
+ margin-right: 10px;
70
+ font-size: 30px;
71
+ }
72
+
73
+ .nav-links {
74
+ display: flex;
75
+ list-style: none;
76
+ }
77
+
78
+ .nav-links li {
79
+ margin-left: 30px;
80
+ }
81
+
82
+ .nav-links a {
83
+ text-decoration: none;
84
+ color: var(--dark-color);
85
+ font-weight: 500;
86
+ transition: var(--transition);
87
+ position: relative;
88
+ }
89
+
90
+ .nav-links a:hover {
91
+ color: var(--primary-color);
92
+ }
93
+
94
+ .nav-links a::after {
95
+ content: '';
96
+ position: absolute;
97
+ width: 0;
98
+ height: 2px;
99
+ bottom: -5px;
100
+ left: 0;
101
+ background-color: var(--primary-color);
102
+ transition: var(--transition);
103
+ }
104
+
105
+ .nav-links a:hover::after {
106
+ width: 100%;
107
+ }
108
+
109
+ .auth-buttons {
110
+ display: flex;
111
+ gap: 10px;
112
+ }
113
+
114
+ .btn {
115
+ padding: 8px 16px;
116
+ border-radius: var(--border-radius);
117
+ font-weight: 500;
118
+ text-decoration: none;
119
+ transition: var(--transition);
120
+ border: none;
121
+ cursor: pointer;
122
+ display: inline-flex;
123
+ align-items: center;
124
+ gap: 5px;
125
+ }
126
+
127
+ .btn-primary {
128
+ background-color: var(--primary-color);
129
+ color: white;
130
+ }
131
+
132
+ .btn-primary:hover {
133
+ background-color: var(--primary-hover);
134
+ }
135
+
136
+ .btn-secondary {
137
+ background-color: transparent;
138
+ color: var(--primary-color);
139
+ border: 1px solid var(--primary-color);
140
+ }
141
+
142
+ .btn-secondary:hover {
143
+ background-color: rgba(67, 97, 238, 0.1);
144
+ }
145
+
146
+ /* Hero Section */
147
+ .hero {
148
+ padding: 80px 0;
149
+ text-align: center;
150
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
151
+ }
152
+
153
+ .hero h1 {
154
+ font-size: 3rem;
155
+ margin-bottom: 20px;
156
+ color: var(--dark-color);
157
+ }
158
+
159
+ .hero p {
160
+ font-size: 1.2rem;
161
+ max-width: 700px;
162
+ margin: 0 auto 30px;
163
+ color: #6c757d;
164
+ }
165
+
166
+ .hero-buttons {
167
+ display: flex;
168
+ justify-content: center;
169
+ gap: 15px;
170
+ flex-wrap: wrap;
171
+ }
172
+
173
+ /* Features Section */
174
+ .features {
175
+ padding: 60px 0;
176
+ background-color: white;
177
+ }
178
+
179
+ .section-title {
180
+ text-align: center;
181
+ margin-bottom: 50px;
182
+ }
183
+
184
+ .section-title h2 {
185
+ font-size: 2.5rem;
186
+ color: var(--dark-color);
187
+ margin-bottom: 15px;
188
+ }
189
+
190
+ .section-title p {
191
+ color: #6c757d;
192
+ max-width: 600px;
193
+ margin: 0 auto;
194
+ }
195
+
196
+ .features-grid {
197
+ display: grid;
198
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
199
+ gap: 30px;
200
+ }
201
+
202
+ .feature-card {
203
+ background-color: white;
204
+ border-radius: var(--border-radius);
205
+ padding: 30px;
206
+ box-shadow: var(--box-shadow);
207
+ transition: var(--transition);
208
+ text-align: center;
209
+ }
210
+
211
+ .feature-card:hover {
212
+ transform: translateY(-5px);
213
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
214
+ }
215
+
216
+ .feature-icon {
217
+ font-size: 2.5rem;
218
+ color: var(--primary-color);
219
+ margin-bottom: 20px;
220
+ }
221
+
222
+ .feature-card h3 {
223
+ margin-bottom: 15px;
224
+ color: var(--dark-color);
225
+ }
226
+
227
+ .feature-card p {
228
+ color: #6c757d;
229
+ }
230
+
231
+ /* AI Interaction Section */
232
+ .ai-interaction {
233
+ padding: 60px 0;
234
+ background-color: #f8f9fa;
235
+ }
236
+
237
+ .interaction-container {
238
+ display: flex;
239
+ flex-direction: column;
240
+ gap: 30px;
241
+ }
242
+
243
+ .interaction-card {
244
+ background-color: white;
245
+ border-radius: var(--border-radius);
246
+ padding: 30px;
247
+ box-shadow: var(--box-shadow);
248
+ }
249
+
250
+ .model-selector {
251
+ display: flex;
252
+ flex-direction: column;
253
+ gap: 15px;
254
+ margin-bottom: 20px;
255
+ }
256
+
257
+ .model-selector label {
258
+ font-weight: 500;
259
+ color: var(--dark-color);
260
+ }
261
+
262
+ .model-options {
263
+ display: grid;
264
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
265
+ gap: 10px;
266
+ }
267
+
268
+ .model-option {
269
+ padding: 10px 15px;
270
+ border: 1px solid #dee2e6;
271
+ border-radius: var(--border-radius);
272
+ cursor: pointer;
273
+ transition: var(--transition);
274
+ display: flex;
275
+ align-items: center;
276
+ justify-content: space-between;
277
+ }
278
+
279
+ .model-option:hover {
280
+ border-color: var(--primary-color);
281
+ }
282
+
283
+ .model-option input[type="radio"] {
284
+ margin-right: 10px;
285
+ }
286
+
287
+ .prompt-area {
288
+ display: flex;
289
+ flex-direction: column;
290
+ gap: 15px;
291
+ }
292
+
293
+ .prompt-input {
294
+ width: 100%;
295
+ padding: 15px;
296
+ border: 1px solid #dee2e6;
297
+ border-radius: var(--border-radius);
298
+ font-size: 16px;
299
+ resize: vertical;
300
+ min-height: 100px;
301
+ font-family: inherit;
302
+ }
303
+
304
+ .prompt-input:focus {
305
+ outline: none;
306
+ border-color: var(--primary-color);
307
+ box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
308
+ }
309
+
310
+ .response-area {
311
+ min-height: 200px;
312
+ padding: 20px;
313
+ border: 1px solid #dee2e6;
314
+ border-radius: var(--border-radius);
315
+ background-color: #f8f9fa;
316
+ white-space: pre-wrap;
317
+ overflow-y: auto;
318
+ max-height: 400px;
319
+ }
320
+
321
+ .response-area h4 {
322
+ margin-bottom: 15px;
323
+ color: var(--dark-color);
324
+ }
325
+
326
+ .response-content {
327
+ padding: 15px;
328
+ background-color: white;
329
+ border-radius: var(--border-radius);
330
+ border-left: 4px solid var(--primary-color);
331
+ }
332
+
333
+ /* Pricing Section */
334
+ .pricing {
335
+ padding: 60px 0;
336
+ background-color: white;
337
+ }
338
+
339
+ .pricing-grid {
340
+ display: grid;
341
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
342
+ gap: 30px;
343
+ }
344
+
345
+ .pricing-card {
346
+ background-color: white;
347
+ border-radius: var(--border-radius);
348
+ padding: 30px;
349
+ box-shadow: var(--box-shadow);
350
+ text-align: center;
351
+ transition: var(--transition);
352
+ border: 1px solid #dee2e6;
353
+ }
354
+
355
+ .pricing-card:hover {
356
+ transform: translateY(-5px);
357
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
358
+ }
359
+
360
+ .pricing-card.popular {
361
+ border-color: var(--primary-color);
362
+ transform: scale(1.05);
363
+ }
364
+
365
+ .pricing-card.popular .plan-name {
366
+ color: var(--primary-color);
367
+ }
368
+
369
+ .plan-name {
370
+ font-size: 1.5rem;
371
+ margin-bottom: 10px;
372
+ color: var(--dark-color);
373
+ }
374
+
375
+ .plan-price {
376
+ font-size: 3rem;
377
+ font-weight: 700;
378
+ margin-bottom: 10px;
379
+ color: var(--dark-color);
380
+ }
381
+
382
+ .plan-price span {
383
+ font-size: 1rem;
384
+ font-weight: 400;
385
+ color: #6c757d;
386
+ }
387
+
388
+ .plan-features {
389
+ list-style: none;
390
+ margin: 20px 0;
391
+ text-align: left;
392
+ }
393
+
394
+ .plan-features li {
395
+ padding: 8px 0;
396
+ display: flex;
397
+ align-items: center;
398
+ }
399
+
400
+ .plan-features li i {
401
+ color: var(--success-color);
402
+ margin-right: 10px;
403
+ }
404
+
405
+ /* Footer */
406
+ footer {
407
+ background-color: var(--dark-color);
408
+ color: white;
409
+ padding: 50px 0 20px;
410
+ }
411
+
412
+ .footer-container {
413
+ display: grid;
414
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
415
+ gap: 30px;
416
+ margin-bottom: 30px;
417
+ }
418
+
419
+ .footer-column h3 {
420
+ font-size: 1.2rem;
421
+ margin-bottom: 20px;
422
+ position: relative;
423
+ padding-bottom: 10px;
424
+ }
425
+
426
+ .footer-column h3::after {
427
+ content: '';
428
+ position: absolute;
429
+ width: 50px;
430
+ height: 2px;
431
+ bottom: 0;
432
+ left: 0;
433
+ background-color: var(--primary-color);
434
+ }
435
+
436
+ .footer-column ul {
437
+ list-style: none;
438
+ }
439
+
440
+ .footer-column ul li {
441
+ margin-bottom: 10px;
442
+ }
443
+
444
+ .footer-column ul li a {
445
+ color: #adb5bd;
446
+ text-decoration: none;
447
+ transition: var(--transition);
448
+ }
449
+
450
+ .footer-column ul li a:hover {
451
+ color: var(--primary-color);
452
+ }
453
+
454
+ .social-links {
455
+ display: flex;
456
+ gap: 15px;
457
+ }
458
+
459
+ .social-links a {
460
+ display: flex;
461
+ align-items: center;
462
+ justify-content: center;
463
+ width: 40px;
464
+ height: 40px;
465
+ border-radius: 50%;
466
+ background-color: rgba(255, 255, 255, 0.1);
467
+ color: white;
468
+ transition: var(--transition);
469
+ }
470
+
471
+ .social-links a:hover {
472
+ background-color: var(--primary-color);
473
+ transform: translateY(-3px);
474
+ }
475
+
476
+ .copyright {
477
+ text-align: center;
478
+ padding-top: 20px;
479
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
480
+ color: #adb5bd;
481
+ font-size: 0.9rem;
482
+ }
483
+
484
+ /* Responsive Design */
485
+ @media (max-width: 768px) {
486
+ .header-container {
487
+ flex-direction: column;
488
+ gap: 20px;
489
+ }
490
+
491
+ .nav-links {
492
+ flex-direction: column;
493
+ align-items: center;
494
+ gap: 15px;
495
+ }
496
+
497
+ .nav-links li {
498
+ margin: 0;
499
+ }
500
+
501
+ .hero h1 {
502
+ font-size: 2.5rem;
503
+ }
504
+
505
+ .hero p {
506
+ font-size: 1rem;
507
+ }
508
+
509
+ .interaction-container {
510
+ flex-direction: column;
511
+ }
512
+ }
513
+
514
+ /* Loading Spinner */
515
+ .loading-spinner {
516
+ display: inline-block;
517
+ width: 20px;
518
+ height: 20px;
519
+ border: 3px solid rgba(255, 255, 255, 0.3);
520
+ border-radius: 50%;
521
+ border-top-color: white;
522
+ animation: spin 1s ease-in-out infinite;
523
+ margin-left: 10px;
524
+ }
525
+
526
+ @keyframes spin {
527
+ to { transform: rotate(360deg); }
528
+ }
529
+
530
+ /* Built with anycoder */
531
+ .built-with {
532
+ position: fixed;
533
+ bottom: 20px;
534
+ right: 20px;
535
+ background-color: white;
536
+ padding: 5px 10px;
537
+ border-radius: var(--border-radius);
538
+ box-shadow: var(--box-shadow);
539
+ font-size: 0.8rem;
540
+ color: var(--dark-color);
541
+ text-decoration: none;
542
+ display: flex;
543
+ align-items: center;
544
+ gap: 5px;
545
+ z-index: 1000;
546
+ }
547
+
548
+ .built-with:hover {
549
+ background-color: var(--light-color);
550
+ }
551
+ </style>
552
+ </head>
553
+ <body>
554
+ <header>
555
+ <div class="container header-container">
556
+ <a href="#" class="logo">
557
+ <i class="fas fa-robot"></i>
558
+ SaaS AI App
559
+ </a>
560
+ <nav>
561
+ <ul class="nav-links">
562
+ <li><a href="#features">Features</a></li>
563
+ <li><a href="#pricing">Pricing</a></li>
564
+ <li><a href="#docs">Documentation</a></li>
565
+ <li><a href="#contact">Contact</a></li>
566
+ </ul>
567
+ </nav>
568
+ <div class="auth-buttons">
569
+ <a href="#" class="btn btn-secondary">
570
+ <i class="fas fa-user"></i> Login
571
+ </a>
572
+ <a href="#" class="btn btn-primary">
573
+ <i class="fas fa-sign-in-alt"></i> Sign Up
574
+ </a>
575
+ </div>
576
+ </div>
577
+ </header>
578
+
579
+ <section class="hero">
580
+ <div class="container">
581
+ <h1>Powerful AI Solutions for Your Business</h1>
582
+ <p>Leverage cutting-edge AI models from Google Vertex AI and Hugging Face to transform your workflows and drive innovation.</p>
583
+ <div class="hero-buttons">
584
+ <a href="#ai-interaction" class="btn btn-primary">
585
+ <i class="fas fa-play"></i> Try AI Demo
586
+ </a>
587
+ <a href="#pricing" class="btn btn-secondary">
588
+ <i class="fas fa-dollar-sign"></i> View Pricing
589
+ </a>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <section class="features" id="features">
595
+ <div class="container">
596
+ <div class="section-title">
597
+ <h2>Powerful AI Features</h2>
598
+ <p>Our platform integrates with the most advanced AI models to provide you with cutting-edge capabilities.</p>
599
+ </div>
600
+ <div class="features-grid">
601
+ <div class="feature-card">
602
+ <div class="feature-icon">
603
+ <i class="fas fa-brain"></i>
604
+ </div>
605
+ <h3>Advanced AI Models</h3>
606
+ <p>Access state-of-the-art AI models from Google Vertex AI and Hugging Face with simple API calls.</p>
607
+ </div>
608
+ <div class="feature-card">
609
+ <div class="feature-icon">
610
+ <i class="fas fa-cogs"></i>
611
+ </div>
612
+ <h3>Easy Integration</h3>
613
+ <p>Seamlessly integrate AI capabilities into your existing applications with our well-documented APIs.</p>
614
+ </div>
615
+ <div class="feature-card">
616
+ <div class="feature-icon">
617
+ <i class="fas fa-chart-line"></i>
618
+ </div>
619
+ <h3>Scalable Solutions</h3>
620
+ <p>Our infrastructure scales with your needs, from small projects to enterprise-level applications.</p>
621
+ </div>
622
+ <div class="feature-card">
623
+ <div class="feature-icon">
624
+ <i class="fas fa-lock"></i>
625
+ </div>
626
+ <h3>Secure & Private</h3>
627
+ <p>Your data is protected with enterprise-grade security and privacy measures.</p>
628
+ </div>
629
+ <div class="feature-card">
630
+ <div class="feature-icon">
631
+ <i class="fas fa-bolt"></i>
632
+ </div>
633
+ <h3>Fast Responses</h3>
634
+ <p>Get AI-powered results in milliseconds with our optimized infrastructure.</p>
635
+ </div>
636
+ <div class="feature-card">
637
+ <div class="feature-icon">
638
+ <i class="fas fa-headset"></i>
639
+ </div>
640
+ <h3>24/7 Support</h3>
641
+ <p>Our team is available around the clock to help you with any questions or issues.</p>
642
+ </div>
643
+ </div>
644
+ </div>
645
+ </section>
646
+
647
+ <section class="ai-interaction" id="ai-interaction">
648
+ <div class="container">
649
+ <div class="section-title">
650
+ <h2>Interact with AI Models</h2>
651
+ <p>Try our AI models directly in your browser. Select a model and enter your prompt to see the AI in action.</p>
652
+ </div>
653
+ <div class="interaction-container">
654
+ <div class="interaction-card">
655
+ <div class="model-selector">
656
+ <label for="model-select">Select AI Model:</label>
657
+ <div class="model-options">
658
+ <label class="model-option">
659
+ <input type="radio" name="model" value="meta-llama/Llama-2-7b-chat-hf" checked>
660
+ <span>Llama 2 (7B)</span>
661
+ </label>
662
+ <label class="model-option">
663
+ <input type="radio" name="model" value="google/flan-t5-xxl">
664
+ <span>Flan T5 (XXL)</span>
665
+ </label>
666
+ <label class="model-option">
667
+ <input type="radio" name="model" value="mistralai/Mistral-7B-Instruct-v0.1">
668
+ <span>Mistral (7B)</span>
669
+ </label>
670
+ <label class="model-option">
671
+ <input type="radio" name="model" value="google/gemini-pro">
672
+ <span>Gemini Pro</span>
673
+ </label>
674
+ </div>
675
+ </div>
676
+ <div class="prompt-area">
677
+ <label for="prompt-input">Enter your prompt:</label>
678
+ <textarea id="prompt-input" class="prompt-input" placeholder="Ask me anything..."></textarea>
679
+ <button id="submit-btn" class="btn btn-primary">
680
+ <i class="fas fa-paper-plane"></i> Send Prompt
681
+ </button>
682
+ </div>
683
+ </div>
684
+ <div class="interaction-card">
685
+ <div class="response-area">
686
+ <h4>AI Response:</h4>
687
+ <div id="response-content" class="response-content">
688
+ <p>Your AI response will appear here...</p>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </section>
695
+
696
+ <section class="pricing" id="pricing">
697
+ <div class="container">
698
+ <div class="section-title">
699
+ <h2>Simple, Transparent Pricing</h2>
700
+ <p>Choose the plan that fits your needs. No hidden fees, no surprises.</p>
701
+ </div>
702
+ <div class="pricing-grid">
703
+ <div class="pricing-card">
704
+ <div class="plan-name">Starter</div>
705
+ <div class="plan-price">$9<span>/month</span></div>
706
+ <ul class="plan-features">
707
+ <li><i class="fas fa-check"></i> 1,000 API calls/month</li>
708
+ <li><i class="fas fa-check"></i> Basic AI models</li>
709
+ <li><i class="fas fa-check"></i> Email support</li>
710
+ <li><i class="fas fa-check"></i> 1 project</li>
711
+ </ul>
712
+ <a href="#" class="btn btn-secondary">Get Started</a>
713
+ </div>
714
+ <div class="pricing-card popular">
715
+ <div class="plan-name">Professional</div>
716
+ <div class="plan-price">$49<span>/month</span></div>
717
+ <ul class="plan-features">
718
+ <li><i class="fas fa-check"></i> 10,000 API calls/month</li>
719
+ <li><i class="fas fa-check"></i> All AI models</li>
720
+ <li><i class="fas fa-check"></i> Priority support</li>
721
+ <li><i class="fas fa-check"></i> 5 projects</li>
722
+ <li><i class="fas fa-check"></i> Advanced analytics</li>
723
+ </ul>
724
+ <a href="#" class="btn btn-primary">Get Started</a>
725
+ </div>
726
+ <div class="pricing-card">
727
+ <div class="plan-name">Enterprise</div>
728
+ <div class="plan-price">$199<span>/month</span></div>
729
+ <ul class="plan-features">
730
+ <li><i class="fas fa-check"></i> Unlimited API calls</li>
731
+ <li><i class="fas fa-check"></i> All AI models</li>
732
+ <li><i class="fas fa-check"></i> 24/7 dedicated support</li>
733
+ <li><i class="fas fa-check"></i> Unlimited projects</li>
734
+ <li><i class="fas fa-check"></i> Custom integrations</li>
735
+ <li><i class="fas fa-check"></i> SLAs</li>
736
+ </ul>
737
+ <a href="#" class="btn btn-secondary">Contact Sales</a>
738
+ </div>
739
+ </div>
740
+ </div>
741
+ </section>
742
+
743
+ <footer>
744
+ <div class="container footer-container">
745
+ <div class="footer-column">
746
+ <h3>Product</h3>
747
+ <ul>
748
+ <li><a href="#features">Features</a></li>
749
+ <li><a href="#pricing">Pricing</a></li>
750
+ <li><a href="#ai-interaction">Demo</a></li>
751
+ <li><a href="#">Documentation</a></li>
752
+ </ul>
753
+ </div>
754
+ <div class="footer-column">
755
+ <h3>Company</h3>
756
+ <ul>
757
+ <li><a href="#">About Us</a></li>
758
+ <li><a href="#">Careers</a></li>
759
+ <li><a href="#">Blog</a></li>
760
+ <li><a href="#">Contact</a></li>
761
+ </ul>
762
+ </div>
763
+ <div class="footer-column">
764
+ <h3>Legal</h3>
765
+ <ul>
766
+ <li><a href="#">Privacy Policy</a></li>
767
+ <li><a href="#">Terms of Service</a></li>
768
+ <li><a href="#">Cookie Policy</a></li>
769
+ <li><a href="#">GDPR</a></li>
770
+ </ul>
771
+ </div>
772
+ <div class="footer-column">
773
+ <h3>Connect</h3>
774
+ <div class="social-links">
775
+ <a href="#"><i class="fab fa-github"></i></a>
776
+ <a href="#"><i class="fab fa-twitter"></i></a>
777
+ <a href="#"><i class="fab fa-linkedin"></i></a>
778
+ <a href="#"><i class="fab fa-discord"></i></a>
779
+ </div>
780
+ <p style="margin-top: 20px;">Built with ❤️ for developers</p>
781
+ </div>
782
+ </div>
783
+ <div class="copyright">
784
+ <p>&copy; 2023 SaaS AI App. All rights reserved.</p>
785
+ </div>
786
+ </footer>
787
+
788
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">
789
+ <i class="fas fa-code"></i> Built with anycoder
790
+ </a>
791
+
792
+ <script>
793
+ document.addEventListener('DOMContentLoaded', function() {
794
+ const submitBtn = document.getElementById('submit-btn');
795
+ const promptInput = document.getElementById('prompt-input');
796
+ const responseContent = document.getElementById('response-content');
797
+
798
+ submitBtn.addEventListener('click', async function() {
799
+ const prompt = promptInput.value.trim();
800
+ if (!prompt) {
801
+ alert('Please enter a prompt');
802
+ return;
803
+ }
804
+
805
+ // Get selected model
806
+ const selectedModel = document.querySelector('input[name="model"]:checked').value;
807
+
808
+ // Disable button and show loading state
809
+ submitBtn.disabled = true;
810
+ submitBtn.innerHTML = '<i class="fas fa-spinner loading-spinner"></i> Processing...';
811
+
812
+ // Clear previous response
813
+ responseContent.innerHTML = '<p>Generating response...</p>';
814
+
815
+ try {
816
+ // Simulate API call (in a real app, this would be a fetch call to your backend)
817
+ const response = await simulateAIResponse(prompt, selectedModel);
818
+
819
+ // Display response
820
+ responseContent.innerHTML = `
821
+ <p><strong>Model:</strong> ${selectedModel}</p>
822
+ <p><strong>Prompt:</strong> ${prompt}</p>
823
+ <hr>
824
+ <p>${response}</p>
825
+ `;
826
+ } catch (error) {
827
+ responseContent.innerHTML = `<p style="color: var(--danger-color)">Error: ${error.message}</p>`;
828
+ } finally {
829
+ // Reset button
830
+ submitBtn.disabled = false;
831
+ submitBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Prompt';
832
+ }
833
+ });
834
+
835
+ // Simulate AI response (replace with actual API call in production)
836
+ function simulateAIResponse(prompt, model) {
837
+ return new Promise((resolve, reject) => {
838
+ // Simulate network delay
839
+ setTimeout(() => {
840
+ // Simple response based on prompt
841
+ if (prompt.toLowerCase().includes('hello')) {
842
+ resolve(`Hello! I'm an AI model (${model}) powered by SaaS AI App. How can I assist you today?`);
843
+ } else if (prompt.toLowerCase().includes('how are you')) {
844
+ resolve(`I'm just a bunch of code, but I'm functioning perfectly! How about you?`);
845
+ } else if (prompt.toLowerCase().includes('ai')) {
846
+ resolve(`Artificial Intelligence is transforming industries by automating processes, providing insights from data, and enabling new capabilities. The ${model} model is particularly good at understanding and generating human-like text.`);
847
+ } else {
848
+ resolve(`I received your prompt: "${prompt}". This is a simulated response from the ${model} model. In a real application, this would be an actual AI-generated response from either Google Vertex AI or Hugging Face, depending on your backend configuration.`);
849
+ }
850
+ }, 1500);
851
+ });
852
+ }
853
+
854
+ // Smooth scrolling for anchor links
855
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
856
+ anchor.addEventListener('click', function(e) {
857
+ e.preventDefault();
858
+ const target = document.querySelector(this.getAttribute('href'));
859
+ if (target) {
860
+ target.scrollIntoView({
861
+ behavior: 'smooth',
862
+ block: 'start'
863
+ });
864
+ }
865
+ });
866
+ });
867
+ });
868
+ </script>
869
+ </body>
870
+ </html>