Hugging Face's logo

Spaces:
WiW-collab
/
wiw-prototype
Sleeping

App Files Community
1
annaaaddddd commited on
Commit
37ec966
·
verified ·
1 Parent(s): 283abbb

Update src/leaderboard/task_sucess_leaderboard.html

Browse files
Files changed (1) hide show
  1. src/leaderboard/task_sucess_leaderboard.html +236 -361
src/leaderboard/task_sucess_leaderboard.html CHANGED
@@ -259,403 +259,278 @@
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>
 
259
  <div class="legend">
260
  <div class="legend-item">
261
  <div class="legend-color commercial-color"></div>
262
+ <span>Zero-Shot Models</span>
263
  </div>
264
  <div class="legend-item">
265
  <div class="legend-color research-color"></div>
266
+ <span>Post-Trained 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
+ <div class="rankings" id="rankings-container"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
276
 
277
+ <div class="footer">
278
+ <p>Task Success Rate measures completion of video generation objectives • Generation Quality measures visual fidelity and coherence</p>
279
+ </div>
280
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
 
282
+ <script>
283
+ const models = [
284
+ {
285
+ name: "Wan2.1†",
286
+ category: "Alibaba • Video Generation • Panoroma",
287
+ type: "research",
288
+ success: 62.6,
289
+ quality: 0.380
290
+ },
291
+ {
292
+ name: "SVD†",
293
+ category: "Stability AI • Video Generation • Panoroma",
294
+ type: "research",
295
+ success: 61.0,
296
+ quality: 0.363
297
+ },
298
+ {
299
+ name: "Cosmos†",
300
+ category: "Nvidia • Video Generation • Panoroma",
301
+ type: "research",
302
+ success: 60.3,
303
+ quality: 0.360
304
+ },
305
+ {
306
+ name: "Runway",
307
+ category: "Runway • Video Generation",
308
+ type: "commercial",
309
+ success: 64.8,
310
+ quality: 0.360 //placeholder
311
+ },
312
+ {
313
+ name: "Wan2.2 14B†",
314
+ category: "Alibaba • Video Generation • Front",
315
+ type: "research",
316
+ success: 62.4,
317
+ quality: 0.360 // placeholder
318
+ },
319
+ {
320
+ name: "Wan2.1†",
321
+ category: "Alibaba • Video Generation • Front",
322
+ type: "research",
323
+ success: 62.3,
324
+ quality: 0.380 //placeholder
325
+ },
326
+ {
327
+ name: "Wan2.2 A14B",
328
+ category: "Alibaba • Video Generation",
329
+ type: "commercial",
330
+ success: 59.5,
331
+ quality: 0.469
332
+ },
333
+ {
334
+ name: "Cosmos†",
335
+ category: "Nvidia • Video Generation • Front",
336
+ type: "research",
337
+ success: 59.0,
338
+ quality: 0.360 //placeholder
339
+ },
340
+ {
341
+ name: "Wan2.1",
342
+ category: "Alibaba • Video Generation",
343
+ type: "commercial",
344
+ success: 58.3,
345
+ quality: 0.478
346
+ },
347
+ {
348
+ name: "SVD†",
349
+ category: "Stability AI • Video Generation • Front",
350
+ type: "research",
351
+ success: 57.9,
352
+ quality: 0.363 //placeholder
353
+ },
354
+ {
355
+ name: "SVD",
356
+ category: "Stability AI • Video Generation",
357
+ type: "commercial",
358
+ success: 57.7,
359
+ quality: 0.371
360
+ },
361
+ {
362
+ name: "Hunyuan",
363
+ category: "Hunyuan • Video Generation",
364
+ type: "commercial",
365
+ success: 57.7,
366
+ quality: 0.396
367
+ },
368
+ {
369
+ name: "SE3DS",
370
+ category: "Open Source • Image Generation",
371
+ type: "open-source",
372
+ success: 57.5,
373
+ quality: 0.365
374
+ },
375
+ {
376
+ name: "LTX†",
377
+ category: "Lightricks • Image Generation • Panorama", //check
378
+ type: "research",
379
+ success: 57.5,
380
+ quality: 0.340
381
+ },
382
+ {
383
+ name: "NWM",
384
+ category: "Meta • Image Generation",
385
+ type: "open-source",
386
+ success: 57.4,
387
+ quality: 0.325
388
+ },
389
+ {
390
+ name: "Wan2.2 5B†",
391
+ category: "Alibaba • Video Generation • Front",
392
+ type: "research",
393
+ success: 57.2,
394
+ quality: 0.325 //placeholder
395
+ },
396
+ {
397
+ name: "PathDreamer",
398
+ category: "Open Source • Image Generation",
399
+ type: "open-source",
400
+ success: 57.0,
401
+ quality: 0.339
402
+ },
403
+ {
404
+ name: "LTX",
405
+ category: "Lightricks • Image Generation",
406
+ type: "commercial",
407
+ success: 56.1,
408
+ quality: 0.382
409
+ },
410
+ {
411
+ name: "Wan2.2 5B†",
412
+ category: "Alibaba • Video Generation • Panorama",
413
+ type: "research",
414
+ success: 56.3,
415
+ quality: 0.380
416
+ },
417
+ {
418
+ name: "Wan2.2 5B",
419
+ category: "Alibaba • Video Generation",
420
+ type: "commercial",
421
+ success: 55.4,
422
+ quality: 0.393
423
+ },
424
+ {
425
+ name: "Cosmos",
426
+ category: "Nvidia • Video Generation",
427
+ type: "commercial",
428
+ success: 55.4,
429
+ quality: 0.482
430
+ },
431
+ ];
432
+
433
+ function renderModels() {
434
+ const container = document.getElementById("rankings-container");
435
+ models.sort((a, b) => b.success - a.success);
436
+
437
+
438
+ models.forEach((model, index) => {
439
+ const rank = index + 1;
440
+ const delay = rank * 100;
441
+
442
+
443
+ let type;
444
+ if (model.name.includes("†")) {
445
+ type = "research"; // 蓝色
446
+ } else if (model.category.includes("Open Source")) {
447
+ type = "open-source"; // 绿色
448
+ } else {
449
+ type = "commercial"; // 红色
450
+ }
451
+
452
+
453
+ const item = document.createElement("div");
454
+ item.className = `model-item ${type}`;
455
+ item.dataset.delay = delay;
456
+
457
+
458
+ item.innerHTML = `
459
+ <div class="rank">${rank}</div>
460
+ <div class="model-info">
461
+ <div class="model-name">${model.name}</div>
462
+ <div class="model-category">${model.category}</div>
463
+ </div>
464
+ <div class="progress-bars">
465
  <div class="progress-bar">
466
+ <div class="progress-fill success-bar" data-width="${Math.round(model.success * 1.6)}"></div>
467
  </div>
468
  <div class="progress-bar">
469
+ <div class="progress-fill quality-bar" data-width="${Math.round((model.quality || 0) * 200)}"></div>
470
  </div>
 
 
 
 
 
471
  </div>
472
+ <div class="metrics-section">
473
  <div class="metric-group">
474
+ <div class="metric-label">Task Success</div>
475
+ <div class="metric-value task-success">${model.success.toFixed(1)}%</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
476
  </div>
 
 
477
  <div class="metric-group">
478
+ <div class="metric-label">Gen Quality</div>
479
+ <div class="metric-value gen-quality">${model.quality ? model.quality.toFixed(3) : "–"}</div>
480
  </div>
 
 
 
481
  </div>
482
+ `;
 
 
483
 
484
+ container.appendChild(item);
485
+ });
486
+ }
 
487
 
 
 
488
  function initializeAnimations() {
489
+ const items = document.querySelectorAll('.model-item');
490
+ items.forEach((item, index) => {
491
+ const delay = parseInt(item.dataset.delay) || index * 100;
492
+ setTimeout(() => {
493
+ item.classList.add('animate');
494
+ animateProgressBars(item);
495
+ }, delay);
496
+ });
 
 
497
  }
498
 
 
499
  function animateProgressBars(item) {
500
+ const progressFills = item.querySelectorAll('.progress-fill');
501
+ setTimeout(() => {
502
+ progressFills.forEach(fill => {
503
+ const targetWidth = fill.dataset.width;
504
+ fill.style.width = targetWidth + '%';
505
+ });
506
+ }, 300);
 
507
  }
508
 
 
509
  function addInteractivity() {
510
+ document.querySelectorAll('.model-item').forEach(item => {
511
+ item.addEventListener('mouseenter', function() {
512
+ const progressBars = this.querySelectorAll('.progress-fill');
513
+ progressBars.forEach(bar => {
514
+ bar.style.transform = 'scaleY(1.3)';
515
+ bar.style.boxShadow = '0 0 15px rgba(255, 255, 255, 0.2)';
516
+ });
517
+ });
518
+
519
+ item.addEventListener('mouseleave', function() {
520
+ const progressBars = this.querySelectorAll('.progress-fill');
521
+ progressBars.forEach(bar => {
522
+ bar.style.transform = 'scaleY(1)';
523
+ bar.style.boxShadow = 'none';
524
+ });
525
+ });
526
+ });
527
  }
528
 
 
529
  window.addEventListener('load', function() {
530
+ renderModels();
531
  initializeAnimations();
532
  addInteractivity();
533
  });
 
 
 
 
 
 
 
 
 
 
 
534
  </script>
535
  </body>
536
  </html>