Hugging Face's logo

Spaces:
raphaelmansuy
/
anycoder-0f176898
Running

App Files Community
raphaelmansuy commited on
Commit
0253288
·
verified ·
1 Parent(s): d75856c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1031 -19
index.html CHANGED
@@ -1,19 +1,1031 @@
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
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>AI Models Marketplace - Compare & Choose</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
+ --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
19
+ --success-gradient: linear-gradient(135deg, #13f1fc 0%, #0470dc 100%);
20
+ --card-bg: #ffffff;
21
+ --text-primary: #2d3748;
22
+ --text-secondary: #4a5568;
23
+ --border-color: #e2e8f0;
24
+ --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
25
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
26
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
27
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
28
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
29
+ }
30
+
31
+ body {
32
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
33
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
34
+ min-height: 100vh;
35
+ color: var(--text-primary);
36
+ position: relative;
37
+ }
38
+
39
+ body::before {
40
+ content: '';
41
+ position: fixed;
42
+ top: 0;
43
+ left: 0;
44
+ right: 0;
45
+ bottom: 0;
46
+ background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
47
+ pointer-events: none;
48
+ }
49
+
50
+ header {
51
+ background: rgba(255, 255, 255, 0.95);
52
+ backdrop-filter: blur(10px);
53
+ padding: 1.5rem 0;
54
+ box-shadow: var(--shadow-lg);
55
+ position: sticky;
56
+ top: 0;
57
+ z-index: 100;
58
+ animation: slideDown 0.5s ease-out;
59
+ }
60
+
61
+ @keyframes slideDown {
62
+ from {
63
+ transform: translateY(-100%);
64
+ opacity: 0;
65
+ }
66
+
67
+ to {
68
+ transform: translateY(0);
69
+ opacity: 1;
70
+ }
71
+ }
72
+
73
+ .header-content {
74
+ max-width: 1400px;
75
+ margin: 0 auto;
76
+ padding: 0 2rem;
77
+ display: flex;
78
+ justify-content: space-between;
79
+ align-items: center;
80
+ flex-wrap: wrap;
81
+ gap: 1rem;
82
+ }
83
+
84
+ .logo-section {
85
+ display: flex;
86
+ align-items: center;
87
+ gap: 1rem;
88
+ }
89
+
90
+ .logo {
91
+ width: 45px;
92
+ height: 45px;
93
+ background: var(--primary-gradient);
94
+ border-radius: 12px;
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ color: white;
99
+ font-size: 1.5rem;
100
+ animation: pulse 2s infinite;
101
+ }
102
+
103
+ @keyframes pulse {
104
+
105
+ 0%,
106
+ 100% {
107
+ transform: scale(1);
108
+ }
109
+
110
+ 50% {
111
+ transform: scale(1.05);
112
+ }
113
+ }
114
+
115
+ h1 {
116
+ font-size: 1.8rem;
117
+ background: var(--primary-gradient);
118
+ -webkit-background-clip: text;
119
+ -webkit-text-fill-color: transparent;
120
+ background-clip: text;
121
+ }
122
+
123
+ .header-actions {
124
+ display: flex;
125
+ align-items: center;
126
+ gap: 1.5rem;
127
+ }
128
+
129
+ .stats {
130
+ display: flex;
131
+ gap: 2rem;
132
+ align-items: center;
133
+ }
134
+
135
+ .stat-item {
136
+ text-align: center;
137
+ }
138
+
139
+ .stat-value {
140
+ font-size: 1.5rem;
141
+ font-weight: bold;
142
+ background: var(--primary-gradient);
143
+ -webkit-background-clip: text;
144
+ -webkit-text-fill-color: transparent;
145
+ background-clip: text;
146
+ }
147
+
148
+ .stat-label {
149
+ font-size: 0.875rem;
150
+ color: var(--text-secondary);
151
+ }
152
+
153
+ .search-container {
154
+ position: relative;
155
+ max-width: 400px;
156
+ flex: 1;
157
+ }
158
+
159
+ .search-input {
160
+ width: 100%;
161
+ padding: 0.75rem 1rem 0.75rem 3rem;
162
+ border: 2px solid var(--border-color);
163
+ border-radius: 50px;
164
+ font-size: 1rem;
165
+ transition: var(--transition);
166
+ background: white;
167
+ }
168
+
169
+ .search-input:focus {
170
+ outline: none;
171
+ border-color: #667eea;
172
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
173
+ }
174
+
175
+ .search-icon {
176
+ position: absolute;
177
+ left: 1rem;
178
+ top: 50%;
179
+ transform: translateY(-50%);
180
+ color: var(--text-secondary);
181
+ }
182
+
183
+ .filter-section {
184
+ max-width: 1400px;
185
+ margin: 2rem auto;
186
+ padding: 0 2rem;
187
+ display: flex;
188
+ gap: 1rem;
189
+ flex-wrap: wrap;
190
+ align-items: center;
191
+ }
192
+
193
+ .filter-chips {
194
+ display: flex;
195
+ gap: 0.75rem;
196
+ flex-wrap: wrap;
197
+ flex: 1;
198
+ }
199
+
200
+ .chip {
201
+ padding: 0.5rem 1.25rem;
202
+ background: white;
203
+ border: 2px solid var(--border-color);
204
+ border-radius: 25px;
205
+ cursor: pointer;
206
+ transition: var(--transition);
207
+ font-size: 0.9rem;
208
+ font-weight: 500;
209
+ position: relative;
210
+ overflow: hidden;
211
+ }
212
+
213
+ .chip::before {
214
+ content: '';
215
+ position: absolute;
216
+ top: 0;
217
+ left: -100%;
218
+ width: 100%;
219
+ height: 100%;
220
+ background: var(--primary-gradient);
221
+ transition: left 0.3s ease;
222
+ z-index: -1;
223
+ }
224
+
225
+ .chip:hover::before,
226
+ .chip.active::before {
227
+ left: 0;
228
+ }
229
+
230
+ .chip:hover,
231
+ .chip.active {
232
+ color: white;
233
+ border-color: transparent;
234
+ transform: translateY(-2px);
235
+ box-shadow: var(--shadow-md);
236
+ }
237
+
238
+ .sort-dropdown {
239
+ padding: 0.5rem 1rem;
240
+ background: white;
241
+ border: 2px solid var(--border-color);
242
+ border-radius: 10px;
243
+ cursor: pointer;
244
+ font-size: 0.9rem;
245
+ transition: var(--transition);
246
+ }
247
+
248
+ .sort-dropdown:hover {
249
+ border-color: #667eea;
250
+ }
251
+
252
+ .cards-container {
253
+ max-width: 1400px;
254
+ margin: 2rem auto;
255
+ padding: 0 2rem 3rem;
256
+ display: grid;
257
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
258
+ gap: 2rem;
259
+ animation: fadeIn 0.8s ease-out;
260
+ }
261
+
262
+ @keyframes fadeIn {
263
+ from {
264
+ opacity: 0;
265
+ transform: translateY(20px);
266
+ }
267
+
268
+ to {
269
+ opacity: 1;
270
+ transform: translateY(0);
271
+ }
272
+ }
273
+
274
+ .model-card {
275
+ background: white;
276
+ border-radius: 20px;
277
+ padding: 1.5rem;
278
+ box-shadow: var(--shadow-md);
279
+ transition: var(--transition);
280
+ position: relative;
281
+ overflow: hidden;
282
+ cursor: pointer;
283
+ animation: slideUp 0.5s ease-out backwards;
284
+ }
285
+
286
+ .model-card:nth-child(1) {
287
+ animation-delay: 0.1s;
288
+ }
289
+
290
+ .model-card:nth-child(2) {
291
+ animation-delay: 0.2s;
292
+ }
293
+
294
+ .model-card:nth-child(3) {
295
+ animation-delay: 0.3s;
296
+ }
297
+
298
+ .model-card:nth-child(4) {
299
+ animation-delay: 0.4s;
300
+ }
301
+
302
+ .model-card:nth-child(5) {
303
+ animation-delay: 0.5s;
304
+ }
305
+
306
+ .model-card:nth-child(6) {
307
+ animation-delay: 0.6s;
308
+ }
309
+
310
+ @keyframes slideUp {
311
+ from {
312
+ opacity: 0;
313
+ transform: translateY(30px);
314
+ }
315
+
316
+ to {
317
+ opacity: 1;
318
+ transform: translateY(0);
319
+ }
320
+ }
321
+
322
+ .model-card::before {
323
+ content: '';
324
+ position: absolute;
325
+ top: 0;
326
+ left: 0;
327
+ right: 0;
328
+ height: 4px;
329
+ background: var(--primary-gradient);
330
+ transform: scaleX(0);
331
+ transition: transform 0.3s ease;
332
+ }
333
+
334
+ .model-card:hover::before {
335
+ transform: scaleX(1);
336
+ }
337
+
338
+ .model-card:hover {
339
+ transform: translateY(-5px);
340
+ box-shadow: var(--shadow-xl);
341
+ }
342
+
343
+ .card-header {
344
+ display: flex;
345
+ justify-content: space-between;
346
+ align-items: flex-start;
347
+ margin-bottom: 1rem;
348
+ }
349
+
350
+ .model-info {
351
+ flex: 1;
352
+ }
353
+
354
+ .model-name {
355
+ font-size: 1.25rem;
356
+ font-weight: 600;
357
+ color: var(--text-primary);
358
+ margin-bottom: 0.25rem;
359
+ }
360
+
361
+ .model-provider {
362
+ display: inline-flex;
363
+ align-items: center;
364
+ gap: 0.5rem;
365
+ padding: 0.25rem 0.75rem;
366
+ background: rgba(102, 126, 234, 0.1);
367
+ border-radius: 20px;
368
+ font-size: 0.875rem;
369
+ color: #667eea;
370
+ font-weight: 500;
371
+ }
372
+
373
+ .favorite-btn {
374
+ background: none;
375
+ border: none;
376
+ color: #cbd5e0;
377
+ font-size: 1.25rem;
378
+ cursor: pointer;
379
+ transition: var(--transition);
380
+ }
381
+
382
+ .favorite-btn:hover,
383
+ .favorite-btn.active {
384
+ color: #f56565;
385
+ transform: scale(1.2);
386
+ }
387
+
388
+ .model-description {
389
+ color: var(--text-secondary);
390
+ font-size: 0.9rem;
391
+ line-height: 1.5;
392
+ margin-bottom: 1.5rem;
393
+ }
394
+
395
+ .pricing-section {
396
+ background: linear-gradient(135deg, #f6f8fb 0%, #f1f5f9 100%);
397
+ border-radius: 12px;
398
+ padding: 1rem;
399
+ margin-bottom: 1.5rem;
400
+ }
401
+
402
+ .price-row {
403
+ display: flex;
404
+ justify-content: space-between;
405
+ align-items: center;
406
+ margin-bottom: 0.5rem;
407
+ }
408
+
409
+ .price-row:last-child {
410
+ margin-bottom: 0;
411
+ }
412
+
413
+ .price-label {
414
+ font-size: 0.875rem;
415
+ color: var(--text-secondary);
416
+ }
417
+
418
+ .price-value {
419
+ font-weight: 600;
420
+ color: var(--text-primary);
421
+ }
422
+
423
+ .price-value.highlight {
424
+ font-size: 1.25rem;
425
+ background: var(--primary-gradient);
426
+ -webkit-background-clip: text;
427
+ -webkit-text-fill-color: transparent;
428
+ background-clip: text;
429
+ }
430
+
431
+ .specs-grid {
432
+ display: grid;
433
+ grid-template-columns: 1fr 1fr;
434
+ gap: 1rem;
435
+ margin-bottom: 1.5rem;
436
+ }
437
+
438
+ .spec-item {
439
+ display: flex;
440
+ align-items: center;
441
+ gap: 0.5rem;
442
+ }
443
+
444
+ .spec-icon {
445
+ width: 32px;
446
+ height: 32px;
447
+ background: rgba(102, 126, 234, 0.1);
448
+ border-radius: 8px;
449
+ display: flex;
450
+ align-items: center;
451
+ justify-content: center;
452
+ color: #667eea;
453
+ }
454
+
455
+ .spec-details {
456
+ flex: 1;
457
+ }
458
+
459
+ .spec-label {
460
+ font-size: 0.75rem;
461
+ color: var(--text-secondary);
462
+ text-transform: uppercase;
463
+ letter-spacing: 0.5px;
464
+ }
465
+
466
+ .spec-value {
467
+ font-size: 0.9rem;
468
+ font-weight: 600;
469
+ color: var(--text-primary);
470
+ }
471
+
472
+ .card-footer {
473
+ display: flex;
474
+ gap: 0.75rem;
475
+ }
476
+
477
+ .btn {
478
+ flex: 1;
479
+ padding: 0.75rem;
480
+ border: none;
481
+ border-radius: 10px;
482
+ font-size: 0.9rem;
483
+ font-weight: 600;
484
+ cursor: pointer;
485
+ transition: var(--transition);
486
+ text-align: center;
487
+ text-decoration: none;
488
+ display: inline-block;
489
+ }
490
+
491
+ .btn-primary {
492
+ background: var(--primary-gradient);
493
+ color: white;
494
+ }
495
+
496
+ .btn-primary:hover {
497
+ transform: translateY(-2px);
498
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
499
+ }
500
+
501
+ .btn-secondary {
502
+ background: white;
503
+ color: var(--text-primary);
504
+ border: 2px solid var(--border-color);
505
+ }
506
+
507
+ .btn-secondary:hover {
508
+ background: #f7fafc;
509
+ border-color: #667eea;
510
+ }
511
+
512
+ .floating-action {
513
+ position: fixed;
514
+ bottom: 2rem;
515
+ right: 2rem;
516
+ width: 60px;
517
+ height: 60px;
518
+ background: var(--primary-gradient);
519
+ border-radius: 50%;
520
+ display: flex;
521
+ align-items: center;
522
+ justify-content: center;
523
+ color: white;
524
+ font-size: 1.5rem;
525
+ cursor: pointer;
526
+ box-shadow: var(--shadow-xl);
527
+ transition: var(--transition);
528
+ z-index: 50;
529
+ }
530
+
531
+ .floating-action:hover {
532
+ transform: scale(1.1) rotate(90deg);
533
+ }
534
+
535
+ .badge {
536
+ position: absolute;
537
+ top: 1rem;
538
+ right: 1rem;
539
+ padding: 0.25rem 0.75rem;
540
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
541
+ color: white;
542
+ border-radius: 20px;
543
+ font-size: 0.75rem;
544
+ font-weight: 600;
545
+ text-transform: uppercase;
546
+ letter-spacing: 0.5px;
547
+ }
548
+
549
+ @media (max-width: 768px) {
550
+ .header-content {
551
+ flex-direction: column;
552
+ text-align: center;
553
+ }
554
+
555
+ .stats {
556
+ order: 3;
557
+ width: 100%;
558
+ justify-content: space-around;
559
+ }
560
+
561
+ .search-container {
562
+ order: 2;
563
+ width: 100%;
564
+ }
565
+
566
+ .cards-container {
567
+ grid-template-columns: 1fr;
568
+ padding: 0 1rem 2rem;
569
+ }
570
+
571
+ .filter-section {
572
+ padding: 0 1rem;
573
+ }
574
+ }
575
+
576
+ .loading-skeleton {
577
+ background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
578
+ background-size: 200% 100%;
579
+ animation: loading 1.5s infinite;
580
+ }
581
+
582
+ @keyframes loading {
583
+ 0% {
584
+ background-position: 200% 0;
585
+ }
586
+
587
+ 100% {
588
+ background-position: -200% 0;
589
+ }
590
+ }
591
+
592
+ .tooltip {
593
+ position: relative;
594
+ }
595
+
596
+ .tooltip::after {
597
+ content: attr(data-tooltip);
598
+ position: absolute;
599
+ bottom: 125%;
600
+ left: 50%;
601
+ transform: translateX(-50%);
602
+ background: #2d3748;
603
+ color: white;
604
+ padding: 0.5rem 1rem;
605
+ border-radius: 8px;
606
+ font-size: 0.875rem;
607
+ white-space: nowrap;
608
+ opacity: 0;
609
+ pointer-events: none;
610
+ transition: opacity 0.3s;
611
+ }
612
+
613
+ .tooltip:hover::after {
614
+ opacity: 1;
615
+ }
616
+ </style>
617
+ </head>
618
+
619
+ <body>
620
+ <header>
621
+ <div class="header-content">
622
+ <div class="logo-section">
623
+ <div class="logo">
624
+ <i class="fas fa-brain"></i>
625
+ </div>
626
+ <div>
627
+ <h1>AI Models Marketplace</h1>
628
+ <p style="color: var(--text-secondary); font-size: 0.875rem;">Compare and choose the best AI models
629
+ for your needs</p>
630
+ </div>
631
+ </div>
632
+ <div class="header-actions">
633
+ <div class="stats">
634
+ <div class="stat-item">
635
+ <div class="stat-value" id="modelCount">12</div>
636
+ <div class="stat-label">Models</div>
637
+ </div>
638
+ <div class="stat-item">
639
+ <div class="stat-value" id="providerCount">8</div>
640
+ <div class="stat-label">Providers</div>
641
+ </div>
642
+ </div>
643
+ <div class="search-container">
644
+ <i class="fas fa-search search-icon"></i>
645
+ <input type="text" class="search-input" id="searchInput" placeholder="Search AI models...">
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </header>
650
+
651
+ <div class="filter-section">
652
+ <div class="filter-chips">
653
+ <button class="chip active" data-filter="all">All Models</button>
654
+ <button class="chip" data-filter="text">Text Generation</button>
655
+ <button class="chip" data-filter="image">Image Generation</button>
656
+ <button class="chip" data-filter="code">Code Generation</button>
657
+ <button class="chip" data-filter="multimodal">Multimodal</button>
658
+ </div>
659
+ <select class="sort-dropdown" id="sortDropdown">
660
+ <option value="price-low">Price: Low to High</option>
661
+ <option value="price-high">Price: High to Low</option>
662
+ <option value="tokens">Max Tokens</option>
663
+ <option value="name">Name: A-Z</option>
664
+ </select>
665
+ </div>
666
+
667
+ <div class="cards-container" id="cardsContainer">
668
+ <!-- Cards will be generated here -->
669
+ </div>
670
+
671
+ <div class="floating-action tooltip" data-tooltip="Compare Models">
672
+ <i class="fas fa-balance-scale"></i>
673
+ </div>
674
+
675
+ <script>
676
+ const aiModels = [
677
+ {
678
+ id: 1,
679
+ name: "GPT-4 Turbo",
680
+ provider: "OpenAI",
681
+ description: "Most capable model, optimized for chat, with improved instruction following and lower latency.",
682
+ category: "text",
683
+ pricePerInput: "$0.01",
684
+ pricePerOutput: "$0.03",
685
+ maxTokens: "128k",
686
+ contextWindow: "128,000",
687
+ modelType: "Text Generation",
688
+ badge: "Popular",
689
+ isFavorite: false
690
+ },
691
+ {
692
+ id: 2,
693
+ name: "Claude 3 Opus",
694
+ provider: "Anthropic",
695
+ description: "Most powerful Claude model for complex tasks that require top-tier performance.",
696
+ category: "text",
697
+ pricePerInput: "$0.015",
698
+ pricePerOutput: "$0.075",
699
+ maxTokens: "200k",
700
+ contextWindow: "200,000",
701
+ modelType: "Text Generation",
702
+ badge: "New",
703
+ isFavorite: false
704
+ },
705
+ {
706
+ id: 3,
707
+ name: "Gemini Pro",
708
+ provider: "Google",
709
+ description: "Multimodal model that can understand text, images, audio, and video simultaneously.",
710
+ category: "multimodal",
711
+ pricePerInput: "$0.0005",
712
+ pricePerOutput: "$0.0015",
713
+ maxTokens: "32k",
714
+ contextWindow: "32,000",
715
+ modelType: "Multimodal",
716
+ badge: "Value",
717
+ isFavorite: false
718
+ },
719
+ {
720
+ id: 4,
721
+ name: "DALL-E 3",
722
+ provider: "OpenAI",
723
+ description: "State-of-the-art image generation model with unparalleled photorealism.",
724
+ category: "image",
725
+ pricePerInput: "$0.04",
726
+ pricePerOutput: "$0.08",
727
+ maxTokens: "N/A",
728
+ contextWindow: "N/A",
729
+ modelType: "Image Generation",
730
+ badge: "Premium",
731
+ isFavorite: false
732
+ },
733
+ {
734
+ id: 5,
735
+ name: "GPT-3.5 Turbo",
736
+ provider: "OpenAI",
737
+ description: "Fast and efficient model optimized for chat completions and API usage.",
738
+ category: "text",
739
+ pricePerInput: "$0.0005",
740
+ pricePerOutput: "$0.0015",
741
+ maxTokens: "16k",
742
+ contextWindow: "16,000",
743
+ modelType: "Text Generation",
744
+ badge: null,
745
+ isFavorite: false
746
+ },
747
+ {
748
+ id: 6,
749
+ name: "Claude 3 Sonnet",
750
+ provider: "Anthropic",
751
+ description: "Balanced performance and speed, ideal for enterprise workloads.",
752
+ category: "text",
753
+ pricePerInput: "$0.003",
754
+ pricePerOutput: "$0.015",
755
+ maxTokens: "200k",
756
+ contextWindow: "200,000",
757
+ modelType: "Text Generation",
758
+ badge: null,
759
+ isFavorite: false
760
+ },
761
+ {
762
+ id: 7,
763
+ name: "CodeLlama 34B",
764
+ provider: "Meta",
765
+ description: "Specialized model for code generation, debugging, and programming assistance.",
766
+ category: "code",
767
+ pricePerInput: "$0.0008",
768
+ pricePerOutput: "$0.0024",
769
+ maxTokens: "16k",
770
+ contextWindow: "16,000",
771
+ modelType: "Code Generation",
772
+ badge: "Developer",
773
+ isFavorite: false
774
+ },
775
+ {
776
+ id: 8,
777
+ name: "Midjourney v6",
778
+ provider: "Midjourney",
779
+ description: "Advanced AI art generator with stunning visual quality and style diversity.",
780
+ category: "image",
781
+ pricePerInput: "$0.03",
782
+ pricePerOutput: "$0.06",
783
+ maxTokens: "N/A",
784
+ contextWindow: "N/A",
785
+ modelType: "Image Generation",
786
+ badge: "Artist",
787
+ isFavorite: false
788
+ },
789
+ {
790
+ id: 9,
791
+ name: "Llama 3 70B",
792
+ provider: "Meta",
793
+ description: "Open-source large language model with strong reasoning capabilities.",
794
+ category: "text",
795
+ pricePerInput: "$0.0007",
796
+ pricePerOutput: "$0.0021",
797
+ maxTokens: "8k",
798
+ contextWindow: "8,000",
799
+ modelType: "Text Generation",
800
+ badge: "Open Source",
801
+ isFavorite: false
802
+ },
803
+ {
804
+ id: 10,
805
+ name: "Stable Diffusion XL",
806
+ provider: "Stability AI",
807
+ description: "High-quality image generation with fine-grained control and customization.",
808
+ category: "image",
809
+ pricePerInput: "$0.02",
810
+ pricePerOutput: "$0.04",
811
+ maxTokens: "N/A",
812
+ contextWindow: "N/A",
813
+ modelType: "Image Generation",
814
+ badge: null,
815
+ isFavorite: false
816
+ },
817
+ {
818
+ id: 11,
819
+ name: "Copilot Enterprise",
820
+ provider: "Microsoft",
821
+ description: "AI-powered coding assistant integrated with Microsoft ecosystem.",
822
+ category: "code",
823
+ pricePerInput: "$0.003",
824
+ pricePerOutput: "$0.009",
825
+ maxTokens: "8k",
826
+ contextWindow: "8,000",
827
+ modelType: "Code Generation",
828
+ badge: "Business",
829
+ isFavorite: false
830
+ },
831
+ {
832
+ id: 12,
833
+ name: "Claude 3 Haiku",
834
+ provider: "Anthropic",
835
+ description: "Fast and compact model for near-instant responsiveness.",
836
+ category: "text",
837
+ pricePerInput: "$0.00025",
838
+ pricePerOutput: "$0.00125",
839
+ maxTokens: "200k",
840
+ contextWindow: "200,000",
841
+ modelType: "Text Generation",
842
+ badge: "Fast",
843
+ isFavorite: false
844
+ }
845
+ ];
846
+
847
+ let currentFilter = 'all';
848
+ let currentSort = 'price-low';
849
+ let favorites = new Set();
850
+
851
+ function renderCards(models) {
852
+ const container = document.getElementById('cardsContainer');
853
+ container.innerHTML = '';
854
+
855
+ models.forEach(model => {
856
+ const card = document.createElement('div');
857
+ card.className = 'model-card';
858
+ card.innerHTML = `
859
+ ${model.badge ? `<div class="badge">${model.badge}</div>` : ''}
860
+ <div class="card-header">
861
+ <div class="model-info">
862
+ <h3 class="model-name">${model.name}</h3>
863
+ <div class="model-provider">
864
+ <i class="fas fa-building"></i>
865
+ ${model.provider}
866
+ </div>
867
+ </div>
868
+ <button class="favorite-btn ${favorites.has(model.id) ? 'active' : ''}" data-id="${model.id}">
869
+ <i class="${favorites.has(model.id) ? 'fas' : 'far'} fa-heart"></i>
870
+ </button>
871
+ </div>
872
+ <p class="model-description">${model.description}</p>
873
+
874
+ <div class="pricing-section">
875
+ <div class="price-row">
876
+ <span class="price-label">Input Tokens</span>
877
+ <span class="price-value">${model.pricePerInput}/1K</span>
878
+ </div>
879
+ <div class="price-row">
880
+ <span class="price-label">Output Tokens</span>
881
+ <span class="price-value highlight">${model.pricePerOutput}/1K</span>
882
+ </div>
883
+ </div>
884
+
885
+ <div class="specs-grid">
886
+ <div class="spec-item">
887
+ <div class="spec-icon">
888
+ <i class="fas fa-database"></i>
889
+ </div>
890
+ <div class="spec-details">
891
+ <div class="spec-label">Max Tokens</div>
892
+ <div class="spec-value">${model.maxTokens}</div>
893
+ </div>
894
+ </div>
895
+ <div class="spec-item">
896
+ <div class="spec-icon">
897
+ <i class="fas fa-window-maximize"></i>
898
+ </div>
899
+ <div class="spec-details">
900
+ <div class="spec-label">Context</div>
901
+ <div class="spec-value">${model.contextWindow}</div>
902
+ </div>
903
+ </div>
904
+ </div>
905
+
906
+ <div class="card-footer">
907
+ <button class="btn btn-primary" onclick="selectModel(${model.id})">
908
+ Select Model
909
+ </button>
910
+ <button class="btn btn-secondary" onclick="viewDetails(${model.id})">
911
+ Details
912
+ </button>
913
+ </div>
914
+ `;
915
+ container.appendChild(card);
916
+ });
917
+
918
+ // Add favorite button listeners
919
+ document.querySelectorAll('.favorite-btn').forEach(btn => {
920
+ btn.addEventListener('click', function(e) {
921
+ e.stopPropagation();
922
+ const modelId = parseInt(this.dataset.id);
923
+ toggleFavorite(modelId, this);
924
+ });
925
+ });
926
+ }
927
+
928
+ function toggleFavorite(modelId, button) {
929
+ if (favorites.has(modelId)) {
930
+ favorites.delete(modelId);
931
+ button.classList.remove('active');
932
+ button.innerHTML = '<i class="far fa-heart"></i>';
933
+ } else {
934
+ favorites.add(modelId);
935
+ button.classList.add('active');
936
+ button.innerHTML = '<i class="fas fa-heart"></i>';
937
+ }
938
+ }
939
+
940
+ function filterModels(category) {
941
+ if (category === 'all') {
942
+ return aiModels;
943
+ }
944
+ return aiModels.filter(model => model.category === category);
945
+ }
946
+
947
+ function sortModels(models, sortBy) {
948
+ const sorted = [...models];
949
+ switch(sortBy) {
950
+ case 'price-low':
951
+ return sorted.sort((a, b) => parseFloat(a.pricePerOutput.slice(1)) - parseFloat(b.pricePerOutput.slice(1)));
952
+ case 'price-high':
953
+ return sorted.sort((a, b) => parseFloat(b.pricePerOutput.slice(1)) - parseFloat(a.pricePerOutput.slice(1)));
954
+ case 'tokens':
955
+ return sorted.sort((a, b) => parseInt(b.maxTokens) - parseInt(a.maxTokens));
956
+ case 'name':
957
+ return sorted.sort((a, b) => a.name.localeCompare(b.name));
958
+ default:
959
+ return sorted;
960
+ }
961
+ }
962
+
963
+ function selectModel(modelId) {
964
+ const model = aiModels.find(m => m.id === modelId);
965
+ console.log('Selected model:', model);
966
+ // Add animation effect
967
+ event.target.style.transform = 'scale(0.95)';
968
+ setTimeout(() => {
969
+ event.target.style.transform = '';
970
+ }, 200);
971
+ }
972
+
973
+ function viewDetails(modelId) {
974
+ const model = aiModels.find(m => m.id === modelId);
975
+ console.log('View details for:', model);
976
+ // Add animation effect
977
+ event.target.style.transform = 'scale(0.95)';
978
+ setTimeout(() => {
979
+ event.target.style.transform = '';
980
+ }, 200);
981
+ }
982
+
983
+ // Filter chips
984
+ document.querySelectorAll('.chip').forEach(chip => {
985
+ chip.addEventListener('click', function() {
986
+ document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
987
+ this.classList.add('active');
988
+ currentFilter = this.dataset.filter;
989
+ const filtered = filterModels(currentFilter);
990
+ const sorted = sortModels(filtered, currentSort);
991
+ renderCards(sorted);
992
+ });
993
+ });
994
+
995
+ // Sort dropdown
996
+ document.getElementById('sortDropdown').addEventListener('change', function() {
997
+ currentSort = this.value;
998
+ const filtered = filterModels(currentFilter);
999
+ const sorted = sortModels(filtered, currentSort);
1000
+ renderCards(sorted);
1001
+ });
1002
+
1003
+ // Search functionality
1004
+ document.getElementById('searchInput').addEventListener('input', function(e) {
1005
+ const searchTerm = e.target.value.toLowerCase();
1006
+ const filtered = aiModels.filter(model =>
1007
+ model.name.toLowerCase().includes(searchTerm) ||
1008
+ model.provider.toLowerCase().includes(searchTerm) ||
1009
+ model.description.toLowerCase().includes(searchTerm)
1010
+ );
1011
+ renderCards(filtered);
1012
+ });
1013
+
1014
+ // Floating action button
1015
+ document.querySelector('.floating-action').addEventListener('click', function() {
1016
+ console.log('Compare selected models');
1017
+ this.style.transform = 'scale(1.1) rotate(180deg)';
1018
+ setTimeout(() => {
1019
+ this.style.transform = '';
1020
+ }, 300);
1021
+ });
1022
+
1023
+ // Initialize
1024
+ document.addEventListener('DOMContentLoaded', function() {
1025
+ const sorted = sortModels(aiModels, currentSort);
1026
+ renderCards(sorted);
1027
+ });
1028
+ </script>
1029
+ </body>
1030
+
1031
+ </html>