Update public/index.html

public/index.html

@@ -13,21 +13,19 @@
 
     <style>
         :root {
-            /* Brand Colors from Image */
-            --bg-deep: #1e1b4b;       /* Deep Navy Background */
-            --text-yellow: #fbbf24;   /* "Mapping Africa" text */
+            /* Brand Colors */
+            --bg-deep: #1e1b4b;       
+            --text-yellow: #fbbf24;   
             --text-white: #ffffff;
-            --text-mute: #94a3b8;     /* Description text */
+            --text-mute: #94a3b8;     
             
-            /* Button Gradients */
+            /* Gradients */
             --grad-red: linear-gradient(135deg, #ef4444, #f43f5e);
             --grad-purple: linear-gradient(135deg, #6366f1, #8b5cf6);
             --grad-orange: linear-gradient(135deg, #f97316, #fb923c);
             --grad-blue: linear-gradient(135deg, #3b82f6, #0ea5e9);
             --grad-green: linear-gradient(135deg, #22c55e, #10b981);
             
-            /* Layout Colors */
-            --card-bg: #ffffff;
             --simba-navy: #0f172a;
             --border-gold: #dca02a;
         }
@@ -35,229 +33,97 @@
         body {
             background-color: var(--bg-deep);
             font-family: 'Inter', sans-serif;
-            color: var(--text-main);
+            color: #334155;
             margin: 0;
             padding: 0;
             overflow-x: hidden;
         }
 
-        /* --- BACKGROUND WAVE ANIMATION --- */
+        /* --- VISIBILITY CLASSES (FIXED) --- */
+        .view {
+            display: none !important; /* Force hide by default */
+            animation: fadeIn 0.4s ease-in-out;
+        }
+        .view.active {
+            display: block !important; /* Force show if active */
+        }
+
+        /* --- WAVE ANIMATION --- */
         .wave-bg {
-            position: absolute;
-            top: 150px;
-            left: 0;
-            width: 100%;
-            height: 300px;
-            background: repeating-linear-gradient(
-                90deg,
-                transparent,
-                transparent 10px,
-                rgba(255, 255, 255, 0.05) 10px,
-                rgba(255, 255, 255, 0.05) 12px
-            );
+            position: absolute; top: 150px; left: 0; width: 100%; height: 300px;
+            background: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 12px);
             mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-            z-index: 0;
-            pointer-events: none;
-        }
-        
-        .wave-bar {
-            position: absolute;
-            bottom: 0;
-            width: 4px;
-            background: rgba(255,255,255,0.1);
-            border-radius: 4px;
-            animation: bounce 2s infinite ease-in-out;
+            z-index: 0; pointer-events: none;
         }
 
         /* --- NAVBAR --- */
-        .navbar {
-            padding: 20px 40px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            z-index: 10;
-            position: relative;
-        }
-        .nav-logo {
-            color: white;
-            font-family: 'Rubik', sans-serif;
-            font-weight: 700;
-            font-size: 20px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            text-decoration: none;
-        }
+        .navbar { padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 10; position: relative; }
+        .nav-logo { color: white; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 20px; display: flex; align-items: center; gap: 10px; text-decoration: none; }
         .nav-logo img { height: 35px; }
-        
         .nav-links { display: flex; gap: 30px; align-items: center; }
-        .nav-links a {
-            color: #cbd5e1;
-            text-decoration: none;
-            font-size: 14px;
-            font-weight: 500;
-            transition: color 0.2s;
-        }
+        .nav-links a { color: #cbd5e1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
         .nav-links a:hover { color: white; }
-        
-        .nav-btn-action {
-            background: var(--grad-blue);
-            padding: 8px 20px;
-            border-radius: 20px;
-            color: white !important;
-            font-weight: 600;
-            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
-        }
-        
-        .login-btn {
-            background: var(--text-yellow);
-            color: var(--bg-deep) !important;
-            padding: 8px 20px;
-            border-radius: 20px;
-            font-weight: 700;
-        }
-
-        /* --- HERO SECTION --- */
-        .hero {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            max-width: 1300px;
-            margin: 40px auto 80px;
-            padding: 0 40px;
-            position: relative;
-            z-index: 2;
-        }
+        .nav-btn-action { background: var(--grad-blue); padding: 8px 20px; border-radius: 20px; color: white !important; font-weight: 600; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
+        .login-btn { background: var(--text-yellow); color: var(--bg-deep) !important; padding: 8px 20px; border-radius: 20px; font-weight: 700; }
 
+        /* --- HERO --- */
+        .hero { display: flex; align-items: center; justify-content: space-between; max-width: 1300px; margin: 40px auto 80px; padding: 0 40px; position: relative; z-index: 2; }
         .hero-content { flex: 1; max-width: 650px; }
+        .conference-tag { background: white; display: inline-block; padding: 5px 15px; border-radius: 8px; margin-bottom: 20px; }
+        .hero h1 { font-family: 'Rubik', sans-serif; font-size: 56px; font-weight: 800; color: white; margin: 0; line-height: 1.1; }
+        .hero h2 { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-yellow); margin: 10px 0 20px; letter-spacing: 1px; }
+        .hero p { color: var(--text-mute); font-size: 16px; line-height: 1.6; margin-bottom: 40px; max-width: 90%; }
         
-        .conference-tag {
-            background: white;
-            display: inline-block;
-            padding: 5px 15px;
-            border-radius: 8px;
-            margin-bottom: 20px;
-        }
-        .conference-tag img { height: 25px; }
-
-        .hero h1 {
-            font-family: 'Rubik', sans-serif;
-            font-size: 56px;
-            font-weight: 800;
-            color: white;
-            margin: 0;
-            line-height: 1.1;
-        }
-
-        .hero h2 {
-            font-family: 'Rubik', sans-serif;
-            font-size: 28px;
-            font-weight: 700;
-            color: var(--text-yellow);
-            margin: 10px 0 20px;
-            letter-spacing: 1px;
-        }
-
-        .hero p {
-            color: var(--text-mute);
-            font-size: 16px;
-            line-height: 1.6;
-            margin-bottom: 40px;
-            max-width: 90%;
-        }
-
-        /* --- HERO BUTTONS --- */
-        .hero-buttons {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-        }
-
-        .h-btn {
-            text-decoration: none;
-            color: white;
-            padding: 12px 24px;
-            border-radius: 30px;
-            font-family: 'Rubik', sans-serif;
-            font-weight: 600;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-        
+        .hero-buttons { display: flex; flex-wrap: wrap; gap: 15px; }
+        .h-btn { text-decoration: none; color: white; padding: 12px 24px; border-radius: 30px; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: transform 0.2s, box-shadow 0.2s; }
         .h-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
-        .h-btn i { font-size: 16px; }
-
         .btn-paper { background: var(--grad-red); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4); }
         .btn-pipeline { background: var(--grad-purple); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); }
         .btn-dataset { background: var(--grad-orange); box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4); }
         .btn-models { background: var(--grad-blue); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); }
         .btn-leaderboard { background: var(--grad-green); box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4); }
 
-        /* --- HERO IMAGE (Map) --- */
-        .hero-visual {
-            flex: 1;
-            display: flex;
-            justify-content: flex-end;
-            position: relative;
-        }
-        .hero-visual img {
-            max-width: 100%;
-            height: auto;
-            /* Simple fade animation */
-            animation: fadeIn 1.5s ease-out;
-        }
+        .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; }
+        .hero-visual img { max-width: 100%; height: auto; animation: fadeIn 1.5s ease-out; }
 
         /* --- LEADERBOARD SECTION --- */
-        .leaderboard-section {
-            background: #f8fafc;
-            border-radius: 24px 24px 0 0;
-            padding: 60px 40px;
-            min-height: 100vh;
-        }
-        
+        .leaderboard-section { background: #f8fafc; border-radius: 24px 24px 0 0; padding: 60px 40px; min-height: 100vh; }
         .lb-container { max-width: 1300px; margin: 0 auto; }
         
-        .content-card {
-            background: white;
-            border-radius: 16px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
-            margin-bottom: 40px;
-        }
+        .content-card { background: white; border-radius: 16px; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-bottom: 40px; }
 
-        /* Controls & Tables (Reusing refined styles) */
-        .controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; background: #f1f5f9; padding: 15px; border-radius: 12px; }
-        .tabs { display: flex; gap: 10px; margin-bottom: 25px; }
+        /* Tabs Style */
+        .tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }
         .tab-btn { 
-            padding: 10px 20px; border-radius: 8px; border: none; background: transparent; 
-            font-weight: 600; color: #64748b; cursor: pointer; transition: 0.2s;
+            padding: 12px 24px; border-radius: 8px; border: none; background: transparent; 
+            font-weight: 600; color: #64748b; cursor: pointer; transition: 0.2s; font-size: 15px;
         }
+        .tab-btn:hover { background: #f1f5f9; color: var(--simba-navy); }
         .tab-btn.active { background: var(--simba-navy); color: white; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); }
-        
-        /* Table Styles */
-        .table-wrap { overflow-x: auto; }
-        table { width: 100%; border-collapse: collapse; font-size: 14px; }
-        th { text-align: center; padding: 15px; color: var(--simba-navy); border-bottom: 2px solid #e2e8f0; vertical-align: bottom; }
+
+        /* Controls */
+        .controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; background: #f1f5f9; padding: 15px; border-radius: 12px; }
+        select { padding: 8px; border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer; font-size: 14px; min-width: 220px; }
+
+        /* Tables */
+        .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 8px; }
+        table { width: 100%; border-collapse: collapse; font-size: 14px; background: white; }
+        th { text-align: center; padding: 15px; color: var(--simba-navy); border-bottom: 2px solid #e2e8f0; vertical-align: bottom; background: #f8fafc; white-space: nowrap; }
         td { text-align: center; padding: 12px; border-bottom: 1px solid #f1f5f9; color: #334155; }
-        th:first-child, td:first-child { text-align: left; font-weight: 700; position: sticky; left: 0; background: white; z-index: 2; }
-        th:nth-child(2), td:nth-child(2) { text-align: left; }
         
-        .arrow-up { color: #16a34a; } .arrow-down { color: #d97706; }
-        .val { white-space: nowrap; }
+        th:first-child, td:first-child { text-align: left; font-weight: 700; position: sticky; left: 0; background: white; z-index: 2; border-right: 2px solid #f1f5f9; }
+        thead th:first-child { z-index: 3; background: #f8fafc; }
+        th:nth-child(2), td:nth-child(2) { text-align: left; }
 
-        /* Animations */
+        .arrow-up { color: #16a34a; } .arrow-down { color: #d97706; }
         @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        @keyframes bounce { 0%, 100% { height: 10px; } 50% { height: 40px; } }
-
-        /* Mobile */
+        
+        /* Mobile Resp */
         @media (max-width: 900px) {
             .hero { flex-direction: column; text-align: center; }
             .hero-visual { margin-top: 40px; justify-content: center; }
             .hero-buttons { justify-content: center; }
-            .nav-links { display: none; } /* Simplified for mobile */
+            .nav-links { display: none; } 
         }
     </style>
 </head>
@@ -269,11 +135,11 @@
             Voice of a Continent
         </a>
         <div class="nav-links">
-            <a href="https://arxiv.org/abs/2510.17998">Paper</a>
-            <a href="https://github.com/UBC-NLP/simba">Pipeline</a>
-            <a href="https://huggingface.co/datasets/UBC-NLP/simba">Dataset</a>
+            <a href="https://arxiv.org/abs/2510.17998" target="_blank">Paper</a>
+            <a href="https://github.com/UBC-NLP/simba" target="_blank">Pipeline</a>
+            <a href="https://huggingface.co/datasets/UBC-NLP/simba" target="_blank">Dataset</a>
             <a href="#">Models</a>
-            <a href="#">Leaderboard</a>
+            <a href="#leaderboard-anchor" style="color:white; font-weight:bold;">Leaderboard</a>
             <a href="#">Citation</a>
             <a href="#" class="nav-btn-action">Submit New Results</a>
             <a href="#" class="login-btn">Login</a>
@@ -282,67 +148,51 @@
 
     <div class="hero">
         <div class="wave-bg"></div>
-
         <div class="hero-content">
             <div class="conference-tag">
                 <span style="font-weight:800; color:#cc0000;">EMNLP 2025</span> 
                 <span style="font-size:12px; color:#555;">Suzhou, China</span>
             </div>
-            
             <h1>Voice of a Continent</h1>
             <h2>Mapping Africa’s Speech Technology</h2>
-            
             <p>
                 SimbaBench bridges the digital divide with a unified suite for African AI: the largest 
                 open-source speech benchmark covering 61 languages, best-in-class multilingual models, 
-                and an interactive leaderboard driving the future of speech technology.
+                and an interactive leaderboard.
             </p>
-
             <div class="hero-buttons">
-                <a href="https://arxiv.org/abs/2510.17998" target="_blank" class="h-btn btn-paper">
-                    <i class="fa-regular fa-file-pdf"></i> Read Paper
-                </a>
-                <a href="https://github.com/UBC-NLP/simba" target="_blank" class="h-btn btn-pipeline">
-                    <i class="fa-solid fa-code-branch"></i> Pipeline
-                </a>
-                <a href="https://huggingface.co/datasets/UBC-NLP/simba" target="_blank" class="h-btn btn-dataset">
-                    <i class="fa-solid fa-database"></i> Dataset
-                </a>
-                <a href="#" class="h-btn btn-models">
-                    <i class="fa-solid fa-bolt"></i> Models
-                </a>
-                <a href="#leaderboard-anchor" class="h-btn btn-leaderboard">
-                    <i class="fa-solid fa-trophy"></i> Leaderboard
-                </a>
+                <a href="https://arxiv.org/abs/2510.17998" target="_blank" class="h-btn btn-paper"><i class="fa-regular fa-file-pdf"></i> Read Paper</a>
+                <a href="https://github.com/UBC-NLP/simba" target="_blank" class="h-btn btn-pipeline"><i class="fa-solid fa-code-branch"></i> Pipeline</a>
+                <a href="https://huggingface.co/datasets/UBC-NLP/simba" target="_blank" class="h-btn btn-dataset"><i class="fa-solid fa-database"></i> Dataset</a>
+                <a href="#" class="h-btn btn-models"><i class="fa-solid fa-bolt"></i> Models</a>
+                <a href="#leaderboard-anchor" class="h-btn btn-leaderboard"><i class="fa-solid fa-trophy"></i> Leaderboard</a>
             </div>
         </div>
-
         <div class="hero-visual">
-            <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Africa Map Graphic">
+            <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Africa Graphic">
         </div>
     </div>
 
     <div class="leaderboard-section" id="leaderboard-anchor">
         <div class="lb-container">
-            
             <div class="content-card">
+                
                 <div id="loader" style="text-align:center; padding:40px; color:#64748b;">
                     <i class="fa-solid fa-circle-notch fa-spin fa-2x"></i><br><br>Loading Leaderboard Data...
                 </div>
 
                 <div id="content" style="display:none;">
-                    
                     <div class="tabs">
-                        <button class="tab-btn active" onclick="setTab('asr', this)">Automatic Speech Recognition (ASR)</button>
-                        <button class="tab-btn" onclick="setTab('tts', this)">Text-to-Speech (TTS)</button>
-                        <button class="tab-btn" onclick="setTab('slid', this)">Spoken Language Identification (SLID)</button>
+                        <button class="tab-btn active" id="tab-btn-asr" onclick="setTab('asr')">Automatic Speech Recognition (ASR)</button>
+                        <button class="tab-btn" id="tab-btn-tts" onclick="setTab('tts')">Text-to-Speech (TTS)</button>
+                        <button class="tab-btn" id="tab-btn-slid" onclick="setTab('slid')">Spoken Language Identification (SLID)</button>
                     </div>
 
                     <div id="asr" class="view active">
                         <div class="controls">
                             <span style="font-weight:600; color:#0f172a;">View Mode:</span>
-                            <button id="btn-fam" class="h-btn btn-models" style="padding:6px 15px; font-size:12px;" onclick="setASRMode('family')">By Family</button>
-                            <button id="btn-mod" class="h-btn" style="background:#cbd5e1; color:#334155; padding:6px 15px; font-size:12px;" onclick="setASRMode('model')">By Model</button>
+                            <button id="btn-fam" class="h-btn btn-models" style="padding:6px 15px; font-size:12px; cursor:pointer;" onclick="setASRMode('family')">By Family</button>
+                            <button id="btn-mod" class="h-btn" style="background:#cbd5e1; color:#334155; padding:6px 15px; font-size:12px; cursor:pointer;" onclick="setASRMode('model')">By Model</button>
                             
                             <div style="flex-grow:1; text-align:right;">
                                 <div id="grp-fam" style="display:inline-block;">
@@ -355,7 +205,6 @@
                                 </div>
                             </div>
                         </div>
-                        
                         <h3 id="asr-title" style="color:#d97706; font-size:18px;"></h3>
                         <div id="asr-legend" style="background:#f1f5f9; padding:10px; font-size:13px; border-radius:6px; margin-bottom:15px; display:none;"></div>
                         <div id="asr-table" class="table-wrap"></div>
@@ -374,19 +223,17 @@
                     <div id="slid" class="view">
                         <div id="slid-table" class="table-wrap"></div>
                     </div>
-
                 </div>
             </div>
 
             <div style="text-align:center; color:#64748b; margin-top:40px;">
                 <p>&copy; 2025 Simba Benchmark. <a href="https://africa.dlnlp.ai/simba/" style="color:#d97706;">Official Website</a></p>
             </div>
-
         </div>
     </div>
 
     <script>
-        // --- DATA & LOGIC ---
+        // --- LOGIC ---
         const NAME_TO_ISO = {
             'Afrikaans': 'afr', 'Akuapim-twi': 'ak', 'Amharic': 'amh', 'Asante-twi': 'tw',
             'Bemba': 'bem', 'Hausa': 'hau', 'Igbo': 'ibo', 'Yoruba': 'yor', 'Zulu': 'zul',
@@ -396,6 +243,7 @@
         let DATA = null;
         let asrMode = 'family';
 
+        // Load Data
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
             document.getElementById('loader').style.display='none';
@@ -409,7 +257,12 @@
             populate('asr-select-fam', DATA.metadata.families);
             populate('asr-select-mod', DATA.metadata.models);
             populate('tts-select', DATA.metadata.tts_models);
-            renderASR(); renderTTS(); renderSLID();
+            
+            // Set Initial State Explicitly
+            setTab('asr');
+            renderASR(); 
+            renderTTS(); 
+            renderSLID();
         }
 
         function populate(id, list) {
@@ -417,9 +270,9 @@
             list.forEach(i=>{ let o=document.createElement('option'); o.value=i; o.text=i; s.add(o); });
         }
         function fmt(n) { return (n==null)?'N/A':n.toFixed(2); }
-        function getIso(name) { return NAME_TO_ISO[name] || name.substring(0,3); }
+        function getIso(name) { return NAME_TO_ISO[name] || name.substring(0,3).toLowerCase(); }
 
-        // --- ASR ---
+        // --- RENDER ASR ---
         function renderASR() {
             const div = document.getElementById('asr-table');
             const legend = document.getElementById('asr-legend');
@@ -428,15 +281,12 @@
             if(asrMode==='family'){
                 const val = document.getElementById('asr-select-fam').value;
                 document.getElementById('asr-title').innerText = `Results for Family: ${val}`;
-                
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
 
-                // Legend
                 legend.style.display = 'block';
                 legend.innerHTML = `<b>Codes:</b> ` + d.languages.map(l => `<span style="margin-right:10px"><b>${getIso(l)}</b>=${l}</span>`).join("");
 
-                // Table
                 html = `<table><thead><tr><th>Model</th><th>Avg WER/CER <i class="fa-solid fa-arrow-down arrow-down"></i></th>`;
                 d.languages.forEach(l => html += `<th>${getIso(l)}</th>`);
                 html += `</tr></thead><tbody>`;
@@ -453,22 +303,19 @@
                 const val = document.getElementById('asr-select-mod').value;
                 document.getElementById('asr-title').innerText = `Results for Model: ${val}`;
                 legend.style.display = 'none';
-                
                 const rows = DATA.asr.by_model[val];
                 html = `<table><thead><tr><th>Language</th><th>Family</th><th>WER (%) <i class="fa-solid fa-arrow-down arrow-down"></i></th><th>CER (%) <i class="fa-solid fa-arrow-down arrow-down"></i></th></tr></thead><tbody>`;
                 rows.forEach(r => {
                     html += `<tr><td>${r.Language}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
                 });
             }
-            html += `</tbody></table>`;
             div.innerHTML = html;
         }
 
-        // --- TTS ---
+        // --- RENDER TTS ---
         function renderTTS() {
             const val = document.getElementById('tts-select').value;
             document.getElementById('tts-title').innerText = `Results for Model: ${val}`;
-            
             const rows = DATA.tts[val];
             if(!rows) return;
 
@@ -479,15 +326,12 @@
                 {k:'speechbleu', l:'SpBLEU', h:true}, {k:'speechbert_score', l:'SpBERT', h:true}
             ];
 
-            // Averages
             let sums={}, c=0;
             metrics.forEach(m=>sums[m.k]=0);
             rows.forEach(r=>{ metrics.forEach(m=>sums[m.k]+=(r[m.k]||0)); c++; });
-            
             let sumHTML = metrics.map(m => `<span>${m.l}: <b>${fmt(sums[m.k]/c)}</b></span>`).join(" | ");
             document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + sumHTML;
 
-            // Table
             let html = `<table><thead><tr><th>Language</th>`;
             metrics.forEach(m => {
                 let icon = m.h ? 'up' : 'down';
@@ -500,11 +344,10 @@
                 metrics.forEach(m => html += `<td>${fmt(r[m.k])}</td>`);
                 html += `</tr>`;
             });
-            html += `</tbody></table>`;
             document.getElementById('tts-table').innerHTML = html;
         }
 
-        // --- SLID ---
+        // --- RENDER SLID ---
         function renderSLID() {
             let html = `<table><thead><tr><th>Language</th><th>MMS <i class="fa-solid fa-arrow-up arrow-up"></i></th><th>Simba <i class="fa-solid fa-arrow-up arrow-up"></i></th></tr></thead><tbody>`;
             DATA.slid.forEach(r => {
@@ -513,24 +356,24 @@
                 if(m > s) mS = `<b style="color:green">${mS}</b>`; else if(s > m) sS = `<b style="color:green">${sS}</b>`;
                 html += `<tr><td>${r.Language}</td><td>${mS}</td><td>${sS}</td></tr>`;
             });
-            html += `</tbody></table>`;
             document.getElementById('slid-table').innerHTML = html;
         }
 
-        // --- UI ---
-        window.setTab = (id, btn) => {
+        // --- INTERACTION ---
+        window.setTab = (id) => {
+            // Hide all views
             document.querySelectorAll('.view').forEach(e => e.classList.remove('active'));
             document.querySelectorAll('.tab-btn').forEach(e => e.classList.remove('active'));
-            document.getElementById(id).classList.add('active'); 
-            btn.classList.add('active');
+            
+            // Show selected
+            document.getElementById(id).classList.add('active');
+            document.getElementById(`tab-btn-${id}`).classList.add('active');
         };
 
         window.setASRMode = (m) => {
             asrMode = m;
             document.getElementById('grp-fam').style.display = m==='family'?'inline-block':'none';
             document.getElementById('grp-mod').style.display = m==='model'?'inline-block':'none';
-            
-            // Update button styles
             const b1 = document.getElementById('btn-fam');
             const b2 = document.getElementById('btn-mod');
             if(m==='family') {