Hugging Face's logo

Spaces:
WiW-collab
/
wiw-prototype
Sleeping

App Files Community
1
annaaaddddd commited on
Commit
f984584
·
verified ·
1 Parent(s): b803392

Upload task_sucess_leaderboard.html

Browse files
Files changed (1) hide show
  1. task_sucess_leaderboard.html +661 -0
task_sucess_leaderboard.html ADDED
@@ -0,0 +1,661 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Video Generation Model Leaderboard</title>
7
+ <style>
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
10
+ background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
11
+ color: #ffffff;
12
+ margin: 0;
13
+ padding: 20px;
14
+ min-height: 100vh;
15
+ }
16
+
17
+ .container {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ background: rgba(0, 0, 0, 0.4);
21
+ border-radius: 16px;
22
+ padding: 40px;
23
+ backdrop-filter: blur(10px);
24
+ border: 1px solid rgba(255, 255, 255, 0.1);
25
+ }
26
+
27
+ .header {
28
+ text-align: center;
29
+ margin-bottom: 40px;
30
+ }
31
+
32
+ .title {
33
+ font-size: 3.5rem;
34
+ font-weight: 700;
35
+ margin: 0 0 16px 0;
36
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
37
+ background-clip: text;
38
+ -webkit-background-clip: text;
39
+ -webkit-text-fill-color: transparent;
40
+ text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
41
+ }
42
+
43
+ .subtitle {
44
+ font-size: 1.2rem;
45
+ color: #b0b0b0;
46
+ margin: 0;
47
+ font-weight: 300;
48
+ }
49
+
50
+ .chart-title {
51
+ font-size: 2rem;
52
+ font-weight: 600;
53
+ margin: 0 0 30px 0;
54
+ color: #ffffff;
55
+ }
56
+
57
+ .rankings {
58
+ background: rgba(255, 255, 255, 0.02);
59
+ border-radius: 12px;
60
+ padding: 20px;
61
+ border: 1px solid rgba(255, 255, 255, 0.05);
62
+ }
63
+
64
+ .model-item {
65
+ display: flex;
66
+ align-items: center;
67
+ margin-bottom: 12px;
68
+ padding: 16px;
69
+ background: rgba(255, 255, 255, 0.03);
70
+ border-radius: 8px;
71
+ transition: all 0.3s ease;
72
+ opacity: 0;
73
+ transform: translateY(20px);
74
+ border-left: 4px solid transparent;
75
+ }
76
+
77
+ .model-item:hover {
78
+ background: rgba(255, 255, 255, 0.08);
79
+ transform: translateX(4px) translateY(0);
80
+ }
81
+
82
+ .model-item.commercial { border-left-color: #ec4899; }
83
+ .model-item.research { border-left-color: #06b6d4; }
84
+ .model-item.open-source { border-left-color: #10b981; }
85
+
86
+ .rank {
87
+ background: rgba(255, 255, 255, 0.1);
88
+ width: 36px;
89
+ height: 36px;
90
+ border-radius: 8px;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ font-weight: 700;
95
+ margin-right: 20px;
96
+ font-size: 16px;
97
+ min-width: 36px;
98
+ }
99
+
100
+ .model-info {
101
+ flex: 1;
102
+ margin-right: 20px;
103
+ min-width: 200px;
104
+ }
105
+
106
+ .model-name {
107
+ font-weight: 600;
108
+ font-size: 1.1rem;
109
+ margin-bottom: 4px;
110
+ }
111
+
112
+ .model-category {
113
+ font-size: 0.85rem;
114
+ opacity: 0.7;
115
+ }
116
+
117
+ .metrics-section {
118
+ display: flex;
119
+ align-items: center;
120
+ gap: 20px;
121
+ margin-left: auto;
122
+ }
123
+
124
+ .metric-group {
125
+ text-align: center;
126
+ min-width: 120px;
127
+ }
128
+
129
+ .metric-label {
130
+ font-size: 0.75rem;
131
+ color: #888;
132
+ text-transform: uppercase;
133
+ letter-spacing: 0.5px;
134
+ margin-bottom: 4px;
135
+ }
136
+
137
+ .metric-value {
138
+ font-size: 1.2rem;
139
+ font-weight: 700;
140
+ }
141
+
142
+ .task-success {
143
+ color: #f59e0b;
144
+ }
145
+
146
+ .gen-quality {
147
+ color: #6366f1;
148
+ }
149
+
150
+ .progress-bars {
151
+ display: flex;
152
+ flex-direction: column;
153
+ gap: 8px;
154
+ width: 200px;
155
+ margin: 0 20px;
156
+ }
157
+
158
+ .progress-bar {
159
+ height: 6px;
160
+ background: rgba(255, 255, 255, 0.1);
161
+ border-radius: 3px;
162
+ overflow: hidden;
163
+ position: relative;
164
+ }
165
+
166
+ .progress-fill {
167
+ height: 100%;
168
+ border-radius: 3px;
169
+ transition: all 1.2s ease-in-out;
170
+ width: 0%;
171
+ }
172
+
173
+ .success-bar { background: linear-gradient(90deg, #10b981, #f59e0b); }
174
+ .quality-bar { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
175
+
176
+ .legend {
177
+ display: flex;
178
+ justify-content: center;
179
+ gap: 30px;
180
+ margin: 30px 0;
181
+ padding: 20px;
182
+ background: rgba(255, 255, 255, 0.02);
183
+ border-radius: 8px;
184
+ }
185
+
186
+ .legend-item {
187
+ display: flex;
188
+ align-items: center;
189
+ gap: 8px;
190
+ font-size: 0.9rem;
191
+ }
192
+
193
+ .legend-color {
194
+ width: 16px;
195
+ height: 16px;
196
+ border-radius: 3px;
197
+ }
198
+
199
+ .commercial-color { background: #ec4899; }
200
+ .research-color { background: #06b6d4; }
201
+ .open-source-color { background: #10b981; }
202
+
203
+ .footer {
204
+ text-align: center;
205
+ margin-top: 40px;
206
+ color: #666;
207
+ font-size: 0.9rem;
208
+ }
209
+
210
+ @keyframes fadeInUp {
211
+ from {
212
+ opacity: 0;
213
+ transform: translateY(30px);
214
+ }
215
+ to {
216
+ opacity: 1;
217
+ transform: translateY(0);
218
+ }
219
+ }
220
+
221
+ .model-item.animate {
222
+ animation: fadeInUp 0.6s ease-out forwards;
223
+ }
224
+
225
+ @media (max-width: 968px) {
226
+ .container {
227
+ padding: 20px;
228
+ }
229
+
230
+ .title {
231
+ font-size: 2.5rem;
232
+ }
233
+
234
+ .model-item {
235
+ flex-direction: column;
236
+ align-items: flex-start;
237
+ gap: 12px;
238
+ }
239
+
240
+ .metrics-section {
241
+ width: 100%;
242
+ justify-content: space-between;
243
+ }
244
+
245
+ .progress-bars {
246
+ width: 100%;
247
+ margin: 12px 0;
248
+ }
249
+ }
250
+ </style>
251
+ </head>
252
+ <body>
253
+ <div class="container">
254
+ <div class="header">
255
+ <h1 class="title">Video World Models Leaderboard</h1>
256
+ <p class="subtitle">Measuring performance on task success and generation quality</p>
257
+ </div>
258
+
259
+ <div class="legend">
260
+ <div class="legend-item">
261
+ <div class="legend-color commercial-color"></div>
262
+ <span>Zero-Shot Video Models</span>
263
+ </div>
264
+ <div class="legend-item">
265
+ <div class="legend-color research-color"></div>
266
+ <span>Post-Trained Video Models</span>
267
+ </div>
268
+ <!-- <div class="legend-item">
269
+ <div class="legend-color open-source-color"></div>
270
+ <span>Open Source Models</span>
271
+ </div> -->
272
+ </div>
273
+
274
+ <h2 class="chart-title">Performance Rankings</h2>
275
+
276
+ <div class="rankings">
277
+ <div class="model-item research" data-delay="0">
278
+ <div class="rank">1</div>
279
+ <div class="model-info">
280
+ <div class="model-name">Wan2.1†</div>
281
+ <div class="model-category">Alibaba • Video Generation</div>
282
+ </div>
283
+ <div class="progress-bars">
284
+ <div class="progress-bar">
285
+ <div class="progress-fill success-bar" data-width="100"></div>
286
+ </div>
287
+ <div class="progress-bar">
288
+ <div class="progress-fill quality-bar" data-width="79"></div>
289
+ </div>
290
+ </div>
291
+ <div class="metrics-section">
292
+ <div class="metric-group">
293
+ <div class="metric-label">Task Success</div>
294
+ <div class="metric-value task-success">62.6%</div>
295
+ </div>
296
+ <div class="metric-group">
297
+ <div class="metric-label">Gen Quality</div>
298
+ <div class="metric-value gen-quality">0.380</div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <div class="model-item research" data-delay="100">
304
+ <div class="rank">2</div>
305
+ <div class="model-info">
306
+ <div class="model-name">SVD†</div>
307
+ <div class="model-category">Stability AI • Video Generation</div>
308
+ </div>
309
+ <div class="progress-bars">
310
+ <div class="progress-bar">
311
+ <div class="progress-fill success-bar" data-width="97"></div>
312
+ </div>
313
+ <div class="progress-bar">
314
+ <div class="progress-fill quality-bar" data-width="76"></div>
315
+ </div>
316
+ </div>
317
+ <div class="metrics-section">
318
+ <div class="metric-group">
319
+ <div class="metric-label">Task Success</div>
320
+ <div class="metric-value task-success">61.0%</div>
321
+ </div>
322
+ <div class="metric-group">
323
+ <div class="metric-label">Gen Quality</div>
324
+ <div class="metric-value gen-quality">0.363</div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <div class="model-item research" data-delay="200">
330
+ <div class="rank">3</div>
331
+ <div class="model-info">
332
+ <div class="model-name">Cosmos†</div>
333
+ <div class="model-category">Nvidia • Video Generation</div>
334
+ </div>
335
+ <div class="progress-bars">
336
+ <div class="progress-bar">
337
+ <div class="progress-fill success-bar" data-width="96"></div>
338
+ </div>
339
+ <div class="progress-bar">
340
+ <div class="progress-fill quality-bar" data-width="75"></div>
341
+ </div>
342
+ </div>
343
+ <div class="metrics-section">
344
+ <div class="metric-group">
345
+ <div class="metric-label">Task Success</div>
346
+ <div class="metric-value task-success">60.3%</div>
347
+ </div>
348
+ <div class="metric-group">
349
+ <div class="metric-label">Gen Quality</div>
350
+ <div class="metric-value gen-quality">0.360</div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="model-item commercial" data-delay="300">
356
+ <div class="rank">4</div>
357
+ <div class="model-info">
358
+ <div class="model-name">Wan2.1</div>
359
+ <div class="model-category">Alibaba • Video Generation</div>
360
+ </div>
361
+ <div class="progress-bars">
362
+ <div class="progress-bar">
363
+ <div class="progress-fill success-bar" data-width="93"></div>
364
+ </div>
365
+ <div class="progress-bar">
366
+ <div class="progress-fill quality-bar" data-width="100"></div>
367
+ </div>
368
+ </div>
369
+ <div class="metrics-section">
370
+ <div class="metric-group">
371
+ <div class="metric-label">Task Success</div>
372
+ <div class="metric-value task-success">58.3%</div>
373
+ </div>
374
+ <div class="metric-group">
375
+ <div class="metric-label">Gen Quality</div>
376
+ <div class="metric-value gen-quality">0.478</div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="model-item commercial" data-delay="400">
382
+ <div class="rank">5</div>
383
+ <div class="model-info">
384
+ <div class="model-name">Hunyuan</div>
385
+ <div class="model-category">Tencent • Video Generation</div>
386
+ </div>
387
+ <div class="progress-bars">
388
+ <div class="progress-bar">
389
+ <div class="progress-fill success-bar" data-width="92"></div>
390
+ </div>
391
+ <div class="progress-bar">
392
+ <div class="progress-fill quality-bar" data-width="83"></div>
393
+ </div>
394
+ </div>
395
+ <div class="metrics-section">
396
+ <div class="metric-group">
397
+ <div class="metric-label">Task Success</div>
398
+ <div class="metric-value task-success">57.7%</div>
399
+ </div>
400
+ <div class="metric-group">
401
+ <div class="metric-label">Gen Quality</div>
402
+ <div class="metric-value gen-quality">0.396</div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="model-item commercial" data-delay="500">
408
+ <div class="rank">5</div>
409
+ <div class="model-info">
410
+ <div class="model-name">SVD</div>
411
+ <div class="model-category">Stability AI • Video Generation</div>
412
+ </div>
413
+ <div class="progress-bars">
414
+ <div class="progress-bar">
415
+ <div class="progress-fill success-bar" data-width="92"></div>
416
+ </div>
417
+ <div class="progress-bar">
418
+ <div class="progress-fill quality-bar" data-width="78"></div>
419
+ </div>
420
+ </div>
421
+ <div class="metrics-section">
422
+ <div class="metric-group">
423
+ <div class="metric-label">Task Success</div>
424
+ <div class="metric-value task-success">57.7%</div>
425
+ </div>
426
+ <div class="metric-group">
427
+ <div class="metric-label">Gen Quality</div>
428
+ <div class="metric-value gen-quality">0.371</div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="model-item open-source" data-delay="600">
434
+ <div class="rank">7</div>
435
+ <div class="model-info">
436
+ <div class="model-name">SE3DS</div>
437
+ <div class="model-category">Open Source • 3D Scene</div>
438
+ </div>
439
+ <div class="progress-bars">
440
+ <div class="progress-bar">
441
+ <div class="progress-fill success-bar" data-width="92"></div>
442
+ </div>
443
+ <div class="progress-bar">
444
+ <div class="progress-fill quality-bar" data-width="76"></div>
445
+ </div>
446
+ </div>
447
+ <div class="metrics-section">
448
+ <div class="metric-group">
449
+ <div class="metric-label">Task Success</div>
450
+ <div class="metric-value task-success">57.5%</div>
451
+ </div>
452
+ <div class="metric-group">
453
+ <div class="metric-label">Gen Quality</div>
454
+ <div class="metric-value gen-quality">0.365</div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="model-item research" data-delay="700">
460
+ <div class="rank">7</div>
461
+ <div class="model-info">
462
+ <div class="model-name">LTX†</div>
463
+ <div class="model-category">Lightricks • Video Generation</div>
464
+ </div>
465
+ <div class="progress-bars">
466
+ <div class="progress-bar">
467
+ <div class="progress-fill success-bar" data-width="92"></div>
468
+ </div>
469
+ <div class="progress-bar">
470
+ <div class="progress-fill quality-bar" data-width="71"></div>
471
+ </div>
472
+ </div>
473
+ <div class="metrics-section">
474
+ <div class="metric-group">
475
+ <div class="metric-label">Task Success</div>
476
+ <div class="metric-value task-success">57.5%</div>
477
+ </div>
478
+ <div class="metric-group">
479
+ <div class="metric-label">Gen Quality</div>
480
+ <div class="metric-value gen-quality">0.340</div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <div class="model-item open-source" data-delay="800">
486
+ <div class="rank">9</div>
487
+ <div class="model-info">
488
+ <div class="model-name">NWM</div>
489
+ <div class="model-category">Meta • World Models</div>
490
+ </div>
491
+ <div class="progress-bars">
492
+ <div class="progress-bar">
493
+ <div class="progress-fill success-bar" data-width="92"></div>
494
+ </div>
495
+ <div class="progress-bar">
496
+ <div class="progress-fill quality-bar" data-width="68"></div>
497
+ </div>
498
+ </div>
499
+ <div class="metrics-section">
500
+ <div class="metric-group">
501
+ <div class="metric-label">Task Success</div>
502
+ <div class="metric-value task-success">57.4%</div>
503
+ </div>
504
+ <div class="metric-group">
505
+ <div class="metric-label">Gen Quality</div>
506
+ <div class="metric-value gen-quality">0.325</div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="model-item open-source" data-delay="900">
512
+ <div class="rank">10</div>
513
+ <div class="model-info">
514
+ <div class="model-name">Pathdreamer</div>
515
+ <div class="model-category">Open Source • Pano Path Generation</div>
516
+ </div>
517
+ <div class="progress-bars">
518
+ <div class="progress-bar">
519
+ <div class="progress-fill success-bar" data-width="91"></div>
520
+ </div>
521
+ <div class="progress-bar">
522
+ <div class="progress-fill quality-bar" data-width="71"></div>
523
+ </div>
524
+ </div>
525
+ <div class="metrics-section">
526
+ <div class="metric-group">
527
+ <div class="metric-label">Task Success</div>
528
+ <div class="metric-value task-success">57.0%</div>
529
+ </div>
530
+ <div class="metric-group">
531
+ <div class="metric-label">Gen Quality</div>
532
+ <div class="metric-value gen-quality">0.339</div>
533
+ </div>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="model-item research" data-delay="1000">
538
+ <div class="rank">11</div>
539
+ <div class="model-info">
540
+ <div class="model-name">Wan2.2†</div>
541
+ <div class="model-category">Alibaba • Video Generation</div>
542
+ </div>
543
+ <div class="progress-bars">
544
+ <div class="progress-bar">
545
+ <div class="progress-fill success-bar" data-width="90"></div>
546
+ </div>
547
+ <div class="progress-bar">
548
+ <div class="progress-fill quality-bar" data-width="79"></div>
549
+ </div>
550
+ </div>
551
+ <div class="metrics-section">
552
+ <div class="metric-group">
553
+ <div class="metric-label">Task Success</div>
554
+ <div class="metric-value task-success">56.3%</div>
555
+ </div>
556
+ <div class="metric-group">
557
+ <div class="metric-label">Gen Quality</div>
558
+ <div class="metric-value gen-quality">0.380</div>
559
+ </div>
560
+ </div>
561
+ </div>
562
+
563
+ <div class="model-item commercial" data-delay="1100">
564
+ <div class="rank">12</div>
565
+ <div class="model-info">
566
+ <div class="model-name">Cosmos</div>
567
+ <div class="model-category">Nvida • Video Generation</div>
568
+ </div>
569
+ <div class="progress-bars">
570
+ <div class="progress-bar">
571
+ <div class="progress-fill success-bar" data-width="89"></div>
572
+ </div>
573
+ <div class="progress-bar">
574
+ <div class="progress-fill quality-bar" data-width="100"></div>
575
+ </div>
576
+ </div>
577
+ <div class="metrics-section">
578
+ <div class="metric-group">
579
+ <div class="metric-label">Task Success</div>
580
+ <div class="metric-value task-success">55.4%</div>
581
+ </div>
582
+ <div class="metric-group">
583
+ <div class="metric-label">Gen Quality</div>
584
+ <div class="metric-value gen-quality">0.480</div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+
590
+ <div class="footer">
591
+ <p>Task Success Rate measures completion of video generation objectives • Generation Quality measures visual fidelity and coherence</p>
592
+ </div>
593
+ </div>
594
+
595
+ <script>
596
+ // Animation controller
597
+ function initializeAnimations() {
598
+ const items = document.querySelectorAll('.model-item');
599
+
600
+ // Animate items on load
601
+ items.forEach((item, index) => {
602
+ const delay = parseInt(item.dataset.delay) || index * 100;
603
+ setTimeout(() => {
604
+ item.classList.add('animate');
605
+ animateProgressBars(item);
606
+ }, delay);
607
+ });
608
+ }
609
+
610
+ // Animate progress bars
611
+ function animateProgressBars(item) {
612
+ const progressFills = item.querySelectorAll('.progress-fill');
613
+
614
+ setTimeout(() => {
615
+ progressFills.forEach(fill => {
616
+ const targetWidth = fill.dataset.width;
617
+ fill.style.width = targetWidth + '%';
618
+ });
619
+ }, 300);
620
+ }
621
+
622
+ // Add hover effects
623
+ function addInteractivity() {
624
+ document.querySelectorAll('.model-item').forEach(item => {
625
+ item.addEventListener('mouseenter', function() {
626
+ const progressBars = this.querySelectorAll('.progress-fill');
627
+ progressBars.forEach(bar => {
628
+ bar.style.transform = 'scaleY(1.3)';
629
+ bar.style.boxShadow = '0 0 15px rgba(255, 255, 255, 0.2)';
630
+ });
631
+ });
632
+
633
+ item.addEventListener('mouseleave', function() {
634
+ const progressBars = this.querySelectorAll('.progress-fill');
635
+ progressBars.forEach(bar => {
636
+ bar.style.transform = 'scaleY(1)';
637
+ bar.style.boxShadow = 'none';
638
+ });
639
+ });
640
+ });
641
+ }
642
+
643
+ // Initialize everything when page loads
644
+ window.addEventListener('load', function() {
645
+ initializeAnimations();
646
+ addInteractivity();
647
+ });
648
+
649
+ // Click functionality for more details
650
+ document.querySelectorAll('.model-item').forEach(item => {
651
+ item.addEventListener('click', function() {
652
+ const modelName = this.querySelector('.model-name').textContent.trim();
653
+ const taskSuccess = this.querySelector('.task-success').textContent.trim();
654
+ const genQuality = this.querySelector('.gen-quality').textContent.trim();
655
+
656
+ alert(`${modelName}\nTask Success: ${taskSuccess}\nGeneration Quality: ${genQuality}`);
657
+ });
658
+ });
659
+ </script>
660
+ </body>
661
+ </html>