Update public/index.html

public/index.html

@@ -14,21 +14,19 @@
     <style>
         :root {
             --bg-deep: #1e1b4b;       /* Deep Navy */
-            --bg-lighter: #262357;    /* Slightly lighter for cards */
             --text-yellow: #fbbf24;   /* Brand Yellow */
             --text-white: #ffffff;
             --text-mute: #94a3b8;
             
-            /* Buttons Gradients */
+            /* Gradients */
             --grad-blue: linear-gradient(90deg, #3b82f6, #0ea5e9);
-            --grad-yellow: linear-gradient(90deg, #eab308, #ca8a04);
+            --grad-red: linear-gradient(135deg, #ef4444, #f43f5e);
+            --grad-purple: linear-gradient(135deg, #6366f1, #8b5cf6);
+            --grad-orange: linear-gradient(135deg, #f97316, #fb923c);
+            --grad-green: linear-gradient(135deg, #22c55e, #10b981);
             
-            /* Hero Buttons */
-            --btn-red: #ef4444;
-            --btn-purple: #8b5cf6;
-            --btn-orange: #f97316;
-            --btn-blue: #3b82f6;
-            --btn-green: #22c55e;
+            --simba-navy: #0f172a;
+            --border-gold: #dca02a;
         }
 
         body {
@@ -90,7 +88,7 @@
             display: flex;
             align-items: center;
             max-width: 1400px;
-            margin: 60px auto 100px;
+            margin: 40px auto 80px;
             padding: 0 40px;
             position: relative;
         }
@@ -111,140 +109,139 @@
         }
         .conf-badge i { color: #cc0000; font-size: 18px; }
 
-        .hero h1 {
-            font-family: 'Rubik', sans-serif;
-            font-size: 64px;
-            font-weight: 800;
-            margin: 0;
-            line-height: 1.1;
-        }
-        .hero h2 {
-            font-family: 'Rubik', sans-serif;
-            font-size: 32px;
-            color: var(--text-yellow);
-            margin: 15px 0 30px;
-            font-weight: 700;
-        }
-        .hero p {
-            color: #cbd5e1;
-            font-size: 18px;
-            line-height: 1.6;
-            max-width: 650px;
-            margin-bottom: 50px;
-        }
+        .hero h1 { font-family: 'Rubik', sans-serif; font-size: 64px; font-weight: 800; margin: 0; line-height: 1.1; }
+        .hero h2 { font-family: 'Rubik', sans-serif; font-size: 32px; color: var(--text-yellow); margin: 15px 0 30px; font-weight: 700; }
+        .hero p { color: #cbd5e1; font-size: 18px; line-height: 1.6; max-width: 650px; margin-bottom: 50px; }
 
         .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
-        .action-btn {
-            display: flex; align-items: center; gap: 8px;
-            padding: 12px 24px;
-            border-radius: 30px;
-            color: white;
-            font-weight: 600;
-            font-size: 15px;
-            transition: transform 0.2s;
-        }
+        .action-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 30px; color: white; font-weight: 600; font-size: 15px; transition: transform 0.2s; }
         .action-btn:hover { transform: translateY(-3px); color: white; }
         
-        .bg-red { background: var(--btn-red); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }
-        .bg-purple { background: var(--btn-purple); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); }
-        .bg-orange { background: var(--btn-orange); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); }
-        .bg-blue { background: var(--btn-blue); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); }
-        .bg-green { background: var(--btn-green); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); }
+        .bg-red { background: var(--grad-red); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3); }
+        .bg-purple { background: var(--grad-purple); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3); }
+        .bg-orange { background: var(--grad-orange); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3); }
+        .bg-blue { background: var(--grad-blue); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); }
+        .bg-green { background: var(--grad-green); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); }
 
+        /* --- CSS AUDIO WAVE VISUALIZER --- */
         .hero-visual {
             flex: 1;
             display: flex;
             justify-content: flex-end;
             position: relative;
+            height: 400px;
+            align-items: center;
         }
-        .hero-visual img { max-width: 100%; height: auto; z-index: 1; }
-        
-        /* Wave */
-        .wave-container {
+        .hero-visual img { max-width: 100%; height: auto; z-index: 2; position: relative; }
+
+        .audio-wave {
             position: absolute;
-            top: 20%;
+            bottom: 50px;
             left: 0;
             right: 0;
-            height: 400px;
-            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjAzIiBkPSJNMCwxNjBMMzAsMTQ5LjNDNjAsMTM5LDEyMCwxMTcsMTgwLDExN0MyNDAsMTE3LDMwMCwxMzksMzYwLDE0NCxDNDIwLDE0OSw0ODAsMTM5LDU0MCwxMjIuN0M2MDAsMTA3LDY2MCw4NSw3MjAsODUuM0M3ODAsODUsODQwLDEwNyw5MDAsMTI4Qzk2MCwxNDksMTAyMCwxNzEsMTA4MCwxNzAuN0MxMTQwLDE3MSwxMjAwLDE0OSwxMjYwLDEzOC43QzEzMjAsMTI4LDEzODAsMTI4LDE0MTAsMTI4TDE0NDAsMTI4TDE0NDAsMzIwTDE0MTAsMzIwQzEzODAsMzIwLDEzMjAsMzIwLDEyNjAsMzIwQzEyMDAsMzIwLDExNDAsMzIwLDEwODAsMzIwQzEwMjAsMzIwLDk2MCwzMjAsOTAwLDMyMEM4NDAsMzIwLDc4MCwzMjAsNzIwLDMyMEM2NjAsMzIwLDYwMCwzMjAsNTQwLDMyMEM0ODAsMzIwLDQyMCwzMjAsMzYwLDMyMEMzMDAsMzIwLDI0MCwzMjAsMTgwLDMyMEMxMjAsMzIwLDYwLDMyMCwzMCwzMjBMMCwzMjBaIj48L3BhdGg+PC9zdmc+');
-            background-size: cover;
-            opacity: 0.5;
+            height: 150px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
             z-index: 0;
-            pointer-events: none;
+            opacity: 0.3;
+            mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
+        }
+        .bar {
+            width: 6px;
+            background: #ffffff;
+            border-radius: 99px;
+            animation: bounce 1.2s ease-in-out infinite;
+        }
+        /* Randomize animation delays for wave effect */
+        .bar:nth-child(odd) { animation-duration: 1.5s; }
+        .bar:nth-child(2n) { animation-duration: 1.1s; }
+        .bar:nth-child(3n) { animation-duration: 1.3s; }
+        .bar:nth-child(4n) { animation-duration: 0.9s; }
+
+        @keyframes bounce {
+            0%, 100% { height: 20px; }
+            50% { height: 120px; }
         }
 
         /* --- MAIN CONTENT AREA --- */
         .main-card {
             background: white;
             border-radius: 24px;
-            margin: 0 40px 60px;
+            margin: 0 40px;
             padding: 40px;
             color: #0f172a;
             min-height: 600px;
+            position: relative;
+            z-index: 10;
         }
 
+        /* Tabs */
         .tabs { display: flex; gap: 15px; border-bottom: 2px solid #e2e8f0; margin-bottom: 30px; padding-bottom: 10px; }
         .tab-btn {
-            background: none; border: none;
-            font-size: 16px; font-weight: 600; color: #64748b;
-            padding: 10px 20px; cursor: pointer;
-            transition: 0.3s;
-            border-radius: 8px;
+            background: none; border: none; font-size: 16px; font-weight: 600; color: #64748b;
+            padding: 10px 20px; cursor: pointer; transition: 0.3s; border-radius: 8px;
         }
         .tab-btn:hover { background: #f1f5f9; color: var(--bg-deep); }
         .tab-btn.active { background: var(--bg-deep); color: white; }
 
-        .view { display: none; animation: fadeIn 0.4s; }
-        .view.active { display: block; }
+        .view { display: none !important; animation: fadeIn 0.4s; }
+        .view.active { display: block !important; }
 
         /* Controls */
-        .controls { 
-            background: #f8fafc; padding: 20px; border-radius: 12px; 
-            display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap;
-        }
-        select { 
-            padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; 
-            font-size: 14px; min-width: 250px; 
-        }
+        .controls { background: #f8fafc; padding: 20px; border-radius: 12px; display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
+        select { padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; min-width: 250px; cursor:pointer;}
         
         /* Table */
         .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
         table { width: 100%; border-collapse: collapse; font-size: 14px; }
-        th { 
-            background: #f1f5f9; color: #0f172a; font-weight: 700; 
-            padding: 16px; text-align: center; border-bottom: 2px solid #e2e8f0; 
-            white-space: nowrap; vertical-align: middle;
-        }
-        td { 
-            padding: 14px; border-bottom: 1px solid #e2e8f0; text-align: center; color: #334155; 
-        }
+        th { background: #f1f5f9; color: #0f172a; font-weight: 700; padding: 16px; text-align: center; border-bottom: 2px solid #e2e8f0; white-space: nowrap; vertical-align: middle; }
+        td { padding: 14px; border-bottom: 1px solid #e2e8f0; text-align: center; color: #334155; }
         tr:hover td { background: #f8fafc; }
         
-        /* Sticky First Column */
-        th:first-child, td:first-child {
-            position: sticky; left: 0; background: white; z-index: 2;
-            text-align: left; font-weight: 700; color: #0f172a;
-            border-right: 2px solid #f1f5f9;
-        }
+        th:first-child, td:first-child { position: sticky; left: 0; background: white; z-index: 2; text-align: left; font-weight: 700; color: #0f172a; border-right: 2px solid #f1f5f9; }
         thead th:first-child { background: #f1f5f9; z-index: 3; }
         th:nth-child(2), td:nth-child(2) { text-align: left; }
 
-        /* Citation Box */
-        .citation-box {
+        /* --- SEPARATE CITATION SECTION --- */
+        .citation-section {
+            max-width: 1000px;
+            margin: 60px auto;
             background: #0f172a;
+            border: 1px solid #334155;
+            border-radius: 16px;
+            padding: 40px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+        }
+        .citation-section h3 {
+            color: var(--text-yellow);
+            font-family: 'Rubik', sans-serif;
+            font-size: 24px;
+            margin-top: 0;
+        }
+        .citation-box {
+            background: #1e293b;
             color: #cbd5e1;
             padding: 20px;
             border-radius: 12px;
             font-family: monospace;
             white-space: pre-wrap;
             margin-top: 20px;
-            text-align: left;
+            overflow-x: auto;
+            border: 1px solid #334155;
         }
 
-        /* Footer */
         .footer { text-align: center; padding-bottom: 40px; color: #94a3b8; font-size: 14px; }
         
         @keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
+        
+        /* Mobile */
+        @media (max-width: 900px) {
+            .hero { flex-direction: column; text-align: center; padding: 20px; }
+            .hero-visual { display: none; } /* Hide map on small screens */
+            .nav-links { display: none; }
+        }
     </style>
 </head>
 <body>
@@ -270,7 +267,6 @@
     </nav>
 
     <div class="hero">
-        <div class="wave-container"></div>
         <div class="hero-content">
             <div class="conf-badge">
                 <i class="fa-solid fa-location-dot"></i> EMNLP 2025 · Suzhou, China
@@ -303,7 +299,17 @@
                 </a>
             </div>
         </div>
+        
         <div class="hero-visual">
+            <div class="audio-wave">
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+            </div>
             <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Africa Map">
         </div>
     </div>
@@ -314,9 +320,9 @@
 
         <div id="app-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">
@@ -327,7 +333,12 @@
                     
                     <div style="flex-grow:1; text-align:right;">
                         <span style="font-weight:600; margin-right:10px;">Select:</span>
-                        <select id="asr-select" onchange="renderASR()"></select>
+                        <div id="grp-fam" style="display:inline-block;">
+                            <select id="asr-select-fam" onchange="renderASR()"></select>
+                        </div>
+                        <div id="grp-mod" style="display:none;">
+                            <select id="asr-select-mod" onchange="renderASR()"></select>
+                        </div>
                     </div>
                 </div>
                 
@@ -351,17 +362,17 @@
                 <div id="slid-table" class="table-wrap"></div>
             </div>
         </div>
+    </div>
 
-        <div id="citation" style="margin-top:60px;">
-            <h3>Citation</h3>
-            <p>If you use Simba, please cite our <a href="https://africa.dlnlp.ai/sahara/" style="color:#d97706; font-weight:bold;">ACL2025 paper</a>.</p>
-            <div class="citation-box">@inproceedings{simba2025,
+    <div class="citation-section" id="citation">
+        <h3>Citation</h3>
+        <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our <a href="https://africa.dlnlp.ai/sahara/" style="color:#fbbf24; font-weight:bold;">ACL2025 paper</a>.</p>
+        <div class="citation-box">@inproceedings{simba2025,
   title={Simba: A Unified Benchmark for Speech Tasks in African Languages},
   author={Put Authors Here},
   booktitle={ACL},
   year={2025}
 }</div>
-        </div>
     </div>
 
     <div class="footer">
@@ -371,21 +382,37 @@
     </div>
 
     <script>
+        // --- LOGIC ---
+        // Basic mapping for common ISO codes if missing from data
+        const NAME_TO_ISO = {
+            'Afrikaans': 'afr', 'Akuapim-twi': 'ak', 'Amharic': 'amh', 'Asante-twi': 'tw',
+            'Bemba': 'bem', 'Hausa': 'hau', 'Igbo': 'ibo', 'Yoruba': 'yor', 'Zulu': 'zul',
+            'Swahili': 'swa', 'Somali': 'som', 'Wolof': 'wol', 'Xhosa': 'xho'
+        };
+
         let DATA = null;
         let asrMode = 'family';
 
-        // Fetch Data
+        // Load Data
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
             document.getElementById('loader').style.display='none';
             document.getElementById('app-content').style.display='block';
             init();
+        }).catch(e=>{
+            document.getElementById('loader').innerHTML = `<span style="color:red">Failed to load data.</span>`;
         });
 
         function init() {
-            populate('asr-select', DATA.metadata.families); // Default family
+            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) {
@@ -393,24 +420,31 @@
             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); }
+        // Fallback to name-based ISO if data property missing
+        function getIso(name, dataIso) { return dataIso || NAME_TO_ISO[name] || name.substring(0,3).toLowerCase(); }
 
         // --- ASR ---
         function renderASR() {
-            const val = document.getElementById('asr-select').value;
             const div = document.getElementById('asr-table');
             const legend = document.getElementById('asr-legend');
             let html='';
 
             if(asrMode==='family'){
-                document.getElementById('asr-title').innerText = `Family: ${val}`;
+                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;
 
-                // Use the ISO from data directly (languages is array of {name, iso})
+                // Legend
                 legend.style.display = 'block';
-                legend.innerHTML = `<b>Codes:</b> ` + d.languages.map(l => `<span style="margin-right:12px"><b>${l.iso}</b>=${l.name}</span>`).join("");
+                legend.innerHTML = `<b>Codes:</b> ` + d.languages.map(l => {
+                    // l is object {name: 'Amharic', iso: 'amh'} from server.js
+                    return `<span style="margin-right:12px"><b>${l.iso}</b>=${l.name}</span>`;
+                }).join("");
 
-                html = `<table><thead><tr><th>Model</th><th>Avg WER/CER <i class="fa-solid fa-arrow-down" style="font-size:10px; color:#d97706"></i></th>`;
+                // 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>${l.iso}</th>`);
                 html += `</tr></thead><tbody>`;
 
@@ -423,10 +457,12 @@
                     html += `</tr>`;
                 });
             } else {
-                document.getElementById('asr-title').innerText = `Model: ${val}`;
+                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 (%)</th><th>CER (%)</th></tr></thead><tbody>`;
+                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>`;
                 });
@@ -437,23 +473,31 @@
         // --- TTS ---
         function renderTTS() {
             const val = document.getElementById('tts-select').value;
-            document.getElementById('tts-title').innerText = `Model: ${val}`;
+            document.getElementById('tts-title').innerText = `Results for Model: ${val}`;
+            
             const rows = DATA.tts[val];
             if(!rows) return;
 
             const metrics = [
-                {k:'wer', l:'WER', h:false}, {k:'mcd', l:'MCD', h:false}, {k:'logf0rmse', l:'LogF0', h:false},
-                {k:'pesq', l:'PESQ', h:true}, {k:'utmos', l:'UTMOS', h:true}, {k:'speechbleu', l:'BLEU', h:true}
+                {k:'wer', l:'WER', h:false}, {k:'mcd', l:'MCD', h:false},
+                {k:'logf0rmse', l:'LogF0', h:false}, {k:'speech_token_distance', l:'SpTokDist', h:false},
+                {k:'pesq', l:'PESQ', h:true}, {k:'utmos', l:'UTMOS', h:true},
+                {k:'speechbleu', l:'SpBLEU', h:true}, {k:'speechbert_score', l:'SpBERT', h:true}
             ];
 
             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 sumH = metrics.map(m=> `${m.l}: <b>${fmt(sums[m.k]/c)}</b>`).join(" | ");
-            document.getElementById('tts-summary').innerHTML = "Averages: " + sumH;
+            
+            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;
 
             let html = `<table><thead><tr><th>Language</th>`;
-            metrics.forEach(m => html += `<th>${m.l} <i class="fa-solid fa-arrow-${m.h?'up':'down'}" style="color:${m.h?'green':'orange'};font-size:10px"></i></th>`);
+            metrics.forEach(m => {
+                let icon = m.h ? 'up' : 'down';
+                let col = m.h ? 'green' : '#d97706';
+                html += `<th>${m.l} <i class="fa-solid fa-arrow-${icon}" style="color:${col}"></i></th>`;
+            });
             html += `</tr></thead><tbody>`;
             rows.forEach(r => {
                 html += `<tr><td>${r.language}</td>`;
@@ -465,36 +509,39 @@
 
         // --- SLID ---
         function renderSLID() {
-            let html = `<table><thead><tr><th>Language</th><th>MMS</th><th>Simba</th></tr></thead><tbody>`;
+            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 => {
                 let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
-                html += `<tr><td>${r.Language}</td>
-                    <td style="color:${m>s?'green':'#333'}; font-weight:${m>s?'bold':'normal'}">${fmt(m)}</td>
-                    <td style="color:${s>m?'green':'#333'}; font-weight:${s>m?'bold':'normal'}">${fmt(s)}</td></tr>`;
+                let mS = fmt(m), sS = fmt(s);
+                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>`;
             });
             document.getElementById('slid-table').innerHTML = html;
         }
 
-        // --- UI ---
-        window.setTab = (id, btn) => {
+        // --- UI 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';
             const b1 = document.getElementById('btn-fam');
             const b2 = document.getElementById('btn-mod');
             if(m==='family') {
-                b1.className="action-btn bg-blue"; b1.style.color="white"; b1.style.background="";
-                b2.className="action-btn"; b2.style.background="#e2e8f0"; b2.style.color="#334155";
-                populate('asr-select', DATA.metadata.families);
+                b1.className = "action-btn bg-blue"; b1.style.color="white"; b1.style.background="";
+                b2.className = "action-btn"; b2.style.background="#e2e8f0"; b2.style.color="#334155";
             } else {
-                b2.className="action-btn bg-blue"; b2.style.color="white"; b2.style.background="";
-                b1.className="action-btn"; b1.style.background="#e2e8f0"; b1.style.color="#334155";
-                populate('asr-select', DATA.metadata.models);
+                b2.className = "action-btn bg-blue"; b2.style.color="white"; b2.style.background="";
+                b1.className = "action-btn"; b1.style.background="#e2e8f0"; b1.style.color="#334155";
             }
             renderASR();
         }