Update index.html

index.html

@@ -226,41 +226,43 @@
     </section>
   </main>
 
-  <footer class="site-footer">
-    <small>&copy; <span id="year"></span> Grets. Rendered by Hugging Face Spaces.</small>
-  </footer>
+<footer class="site-footer">
+  <small>&copy; <span id="year"></span> Grets. Rendered by Hugging Face Spaces.</small>
+</footer>
 
-  <script>
-    // Mobile nav toggle
-    const navToggle = document.querySelector('.nav-toggle');
-    const nav = document.getElementById('site-nav');
-    if (navToggle && nav) {
-      navToggle.addEventListener('click', () => {
-        const open = nav.classList.toggle('open');
-        navToggle.setAttribute('aria-expanded', String(open));
-      });
-    }
-    // Year in footer
-    const y = document.getElementById('year');
-    if (y) y.textContent = new Date().getFullYear();
+<!-- 1) Basis-Skripte (Nav & Jahr) -->
+<script>
+  // Mobile nav toggle
+  const navToggle = document.querySelector('.nav-toggle');
+  const nav = document.getElementById('site-nav');
+  if (navToggle && nav) {
+    navToggle.addEventListener('click', () => {
+      const open = nav.classList.toggle('open');
+      navToggle.setAttribute('aria-expanded', String(open));
+    });
+  }
+  // Year in footer
+  const y = document.getElementById('year');
+  if (y) y.textContent = new Date().getFullYear();
+</script>
 
+<!-- 2) Leaderboard-Renderer (nur deine inline-JSON rows) -->
 <script>
-  // Leaderboard: rendert NUR deine inline JSON-rows
   (function renderLeaderboard(){
     const el = document.getElementById('leaderboard-body');
     const dataEl = document.getElementById('leaderboard-data');
     if (!el || !dataEl) return;
 
-    // JSON aus dem <script id="leaderboard-data"> holen
+    // JSON laden
     let rows = [];
     try {
       const parsed = JSON.parse(dataEl.textContent.trim());
       rows = Array.isArray(parsed.rows) ? parsed.rows : [];
     } catch (_) {}
 
-    // Sortierung: erst Model, dann Modality in Reihenfolge AV, V, A
+    // Sortierung: Model (A–Z) -> Modality in Reihenfolge AV, V, A
     const order = ['AV', 'V', 'A'];
-    rows.sort((a, b) =>
+    rows.sort((a,b) =>
       String(a.model).localeCompare(String(b.model)) ||
       order.indexOf(a.modality) - order.indexOf(b.modality)
     );
@@ -268,21 +270,23 @@
     const today = new Date().toISOString().slice(0,10);
     const fmtPct = v => (v==null || v==='') ? '—' : (Number(v).toFixed(1) + '%');
 
+    // Spalten: Model | Modality | N | Top-1 | Top-5 | Updated
     el.innerHTML = rows.map(r => `
       <tr>
         <td>${r.model}</td>
         <td>${r.modality}</td>
+        <td>${r.N ?? '—'}</td>
         <td>${fmtPct(r.Top1AccuracyinPercent)}</td>
         <td>${fmtPct(r.Top5AccuracyinPercent)}</td>
-        <td>${r.N ?? '—'}</td>
         <td>${r.updated ?? today}</td>
       </tr>
     `).join('');
   })();
 </script>
 
-
-    // Example video version toggles
+<!-- 3) Example video toggles -->
+<script>
+  (function(){
     const video = document.getElementById('sampleVideo');
     const verButtons = document.querySelectorAll('.ver');
     const verStatus = document.getElementById('verStatus');
@@ -302,6 +306,8 @@
         }
       });
     });
-  </script>
+  })();
+</script>
+    
 </body>
 </html>