Update public/index.html

public/index.html

@@ -10,138 +10,74 @@
             --primary-navy: #282351;
             --primary-orange: #D97706;
             --secondary-navy: #2f3b7d;
-            --bg-body: #282351;  /* Deep Navy Background */
-            --bg-card: #ffffff;  /* White Card Background */
+            --bg-body: #282351;
+            --bg-card: #ffffff;
             --border-gold: #dca02a;
             --text-dark: #333;
         }
         
-        body { 
-            background-color: var(--bg-body); 
-            font-family: 'Inter', sans-serif; 
-            color: var(--text-dark); 
-            margin: 0; 
-            padding: 20px; 
-        }
-        
+        body { background-color: var(--bg-body); font-family: 'Inter', sans-serif; color: var(--text-dark); margin: 0; padding: 20px; }
         .container { max-width: 1400px; margin: 0 auto; }
         
-        /* Header Image */
         .header { text-align: center; margin-bottom: 30px; }
-        .header img { 
-            max-width: 60%; 
-            height: auto; 
-            border-radius: 12px; /* Optional: Softens the image against the dark bg */
-        }
+        .header img { max-width: 60%; height: auto; border-radius: 12px; }
         
-        /* Content Card */
-        .card { 
-            background: var(--bg-card); 
-            border-radius: 12px; 
-            padding: 40px; 
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
-            margin-bottom: 30px; 
-        }
+        .card { background: var(--bg-card); border-radius: 12px; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 30px; }
         
         h2 { font-family: "Rubik", sans-serif; color: var(--secondary-navy); font-size: 28px; margin-top: 0; }
-        
+        h3.section-title { font-family: "Rubik", sans-serif; color: var(--primary-orange); font-size: 20px; margin-bottom: 15px; margin-top: 20px;}
+
         /* Tabs */
         .tabs { display: flex; border-bottom: 2px solid var(--primary-navy); margin-bottom: 20px; }
         .tab-btn { 
             background: none; border: none; padding: 12px 20px; 
             font-size: 16px; font-weight: 600; color: var(--secondary-navy); 
-            cursor: pointer; border-radius: 8px 8px 0 0; 
-            transition: 0.3s;
+            cursor: pointer; border-radius: 8px 8px 0 0; transition: 0.3s;
         }
         .tab-btn.active { background: var(--primary-navy); color: white; }
         .view { display: none; animation: fadeIn 0.4s; }
         .view.active { display: block; }
 
         /* Controls */
-        .controls { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
+        .controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; background: #f9f9f9; padding: 15px; border-radius: 8px;}
+        .control-group { display: flex; align-items: center; gap: 10px; }
+        .control-group label { font-weight: bold; color: var(--primary-navy); }
+        
         .btn { padding: 8px 16px; border-radius: 6px; cursor: pointer; border: none; font-weight: bold; }
         .btn-primary { background: var(--primary-navy); color: white; }
         .btn-secondary { background: #eee; color: var(--primary-navy); }
         select { padding: 8px; border-radius: 6px; border: 1px solid #ccc; min-width: 200px; }
-        
-        /* --- TABLE STYLING --- */
-        .table-wrap { overflow-x: auto; padding-bottom: 50px; /* Space for rotated headers */ }
-        
-        table { 
-            width: 100%; 
-            border-collapse: collapse; 
-            font-size: 14px; 
-            border-top: 2px solid var(--border-gold); 
-            /* We remove the bottom border from table to let rows define it, or keep it */
-            border-bottom: 2px solid var(--border-gold);
-        }
-        
-        th, td { 
-            padding: 12px 10px; 
-            text-align: center; 
-            vertical-align: middle; 
-            border-bottom: 1px solid #eee; 
-        }
 
-        /* Header Row Styling */
-        thead tr { 
-            /* Make header bottom border match the top border color */
-            border-bottom: 2px solid var(--border-gold); 
-        }
-        
-        th { 
-            color: #7d3561; 
-            font-weight: bold; 
-            vertical-align: bottom; /* Align text to bottom for rotated headers */
+        /* Legend */
+        .legend-box {
+            font-size: 13px;
+            background: #fffbf5;
+            border: 1px solid #eee;
+            padding: 10px;
+            margin-bottom: 15px;
+            border-radius: 6px;
+            color: #555;
+            line-height: 1.6;
         }
+        .legend-item { display: inline-block; margin-right: 15px; }
+        .legend-item b { color: var(--primary-navy); }
 
-        /* Left Align First Column (Languages/Models) */
-        th:first-child, td:first-child { 
-            text-align: left; 
-            font-weight: bold; 
-            color: var(--primary-navy);
-            min-width: 180px;
-        }
+        /* Table */
+        .table-wrap { overflow-x: auto; }
+        table { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 2px solid var(--border-gold); border-bottom: 2px solid var(--border-gold); }
+        th, td { padding: 12px 10px; text-align: center; vertical-align: middle; border-bottom: 1px solid #eee; }
         
-        /* Left Align Second Column (Often Family) */
-        th:nth-child(2), td:nth-child(2) {
-            text-align: left;
-        }
-
-        /* 45 Degree Rotated Headers */
-        .rotate-wrapper {
-            height: 120px;
-            white-space: nowrap;
-            position: relative;
-        }
+        /* Header Styling */
+        thead tr { border-bottom: 2px solid var(--border-gold); }
+        th { color: #7d3561; font-weight: bold; vertical-align: bottom; }
         
-        .rotate-wrapper > div {
-            transform: translate(0px, 40px) rotate(-45deg);
-            width: 30px;
-            position: absolute;
-            bottom: 10px;
-            left: 50%;
-            text-align: left;
-            transform-origin: bottom left;
-        }
-        .rotate-wrapper span {
-            border-bottom: 1px solid #ccc;
-            padding-bottom: 2px;
-        }
-        .sub-header {
-            font-size: 10px; 
-            color: #666; 
-            font-weight: normal; 
-            display: block; 
-            margin-top: 2px; 
-        }
+        /* Left Alignments */
+        th:first-child, td:first-child { text-align: left; font-weight: bold; color: var(--primary-navy); min-width: 180px; }
+        th:nth-child(2), td:nth-child(2) { text-align: left; } /* For Family Column or WER/CER combo */
 
-        /* Value Cells */
         .val { white-space: nowrap; }
-        
-        /* Metric Arrow Colors */
         .arrow-up { color: green; font-size: 0.9em; }
-        .arrow-down { color: #D97706; font-size: 0.9em; } /* Orange for lower-is-better */
+        .arrow-down { color: #D97706; font-size: 0.9em; }
 
         #loader { text-align: center; padding: 40px; font-size: 18px; color: var(--secondary-navy); }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -150,36 +86,51 @@
 <body>
 
     <div class="container">
-        <div class="header">
-            <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Simba">
-        </div>
+        <div class="header"><img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Simba"></div>
 
         <div class="card">
             <div id="loader">🦁 Loading Data...</div>
             
             <div id="content" style="display:none;">
                 <div class="tabs">
-                    <button class="tab-btn active" onclick="setTab('asr', this)">Automatic Speech Recognition</button>
-                    <button class="tab-btn" onclick="setTab('tts', this)">Text-to-Speech</button>
-                    <button class="tab-btn" onclick="setTab('slid', this)">Language ID</button>
+                    <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>
                 </div>
 
                 <div id="asr" class="view active">
                     <div class="controls">
                         <button id="btn-fam" class="btn btn-primary" onclick="setASRMode('family')">By Family</button>
                         <button id="btn-mod" class="btn btn-secondary" onclick="setASRMode('model')">By Model</button>
+                        
                         <div style="flex-grow:1; text-align:right;">
-                            <select id="asr-select" onchange="renderASR()"></select>
+                            <div class="control-group" id="grp-fam">
+                                <label for="asr-select-fam">Select Family:</label>
+                                <select id="asr-select-fam" onchange="renderASR()"></select>
+                            </div>
+                            <div class="control-group" id="grp-mod" style="display:none;">
+                                <label for="asr-select-mod">Select Model:</label>
+                                <select id="asr-select-mod" onchange="renderASR()"></select>
+                            </div>
                         </div>
                     </div>
+                    
+                    <h3 id="asr-title" class="section-title"></h3>
+                    <div id="asr-legend" class="legend-box" style="display:none;"></div>
+                    
                     <div id="asr-table" class="table-wrap"></div>
                 </div>
 
                 <div id="tts" class="view">
                     <div class="controls">
-                        <label>Select Model: </label>
-                        <select id="tts-select" onchange="renderTTS()"></select>
+                        <div class="control-group">
+                            <label for="tts-select">Select Model:</label>
+                            <select id="tts-select" onchange="renderTTS()"></select>
+                        </div>
                     </div>
+                    
+                    <h3 id="tts-title" class="section-title"></h3>
+                    <div id="tts-summary" class="legend-box"></div>
                     <div id="tts-table" class="table-wrap"></div>
                 </div>
 
@@ -197,22 +148,37 @@
     </div>
 
     <script>
+        // --- CONSTANTS ---
+        // Static mapping based on dataset metadata to ensure correct ISO codes
+        const NAME_TO_ISO = {
+            'Afrikaans': 'afr', 'Akuapim-twi': 'Akuapim-twi', 'Amharic': 'amh', 'Asante-twi': 'Asante-twi',
+            'Basaa': 'bas', 'Bemba': 'bem', 'Central Atlas Tamazight': 'tzm', 'Dyula': 'dyu', 'Edo': 'bin',
+            'Ewe': 'ewe', 'Fanti': 'fat', 'Fon': 'fon', 'Ga': 'gaa', 'Ganda': 'lug', 'Guerze/Kpelle': 'kpe',
+            'Hausa': 'hau', 'Ibibio': 'ibb', 'Igbo': 'ibo', 'Kabyle': 'kab', 'Kalenjin': 'kln',
+            'Kinyarwanda': 'kin', 'Kisi': 'kss', 'Konyanka Maninka': 'mku', 'Lingala': 'lin', 'Lozi': 'loz',
+            'Lunda': 'lun', 'Luo (Kenya and Tanzania)': 'luo', 'Malagasy': 'mlg', 'Mandinka': 'mnk',
+            'Nigerian Pidgin': 'pcm', 'North Ndebele': 'nde', 'Northern Sotho': 'nso', 'Nyanja': 'nya',
+            'Oromo': 'orm', 'Pulaar': 'fuc', 'Pular': 'fuf', 'Serer': 'srr', 'Shona': 'sna', 'Somali': 'som',
+            'South Ndebele': 'nbl', 'Southern Sotho': 'sot', 'Standard Moroccan Tamazight': 'zgh', 'Susu': 'sus',
+            'Susuami': 'ssu', 'Swahili': 'swa', 'Swati': 'ssw', 'Taita': 'dav', 'Tem': 'kdh', 'Tigre': 'tig',
+            'Tigrinya': 'tir', 'Tiv': 'tiv', 'Tonga (Zambia)': 'toi', 'Tsonga': 'tso', 'Tswana': 'tsn',
+            'Twi': 'twi', 'Venda': 'ven', 'Western Maninkakan': 'mlq', 'Wolof': 'wol', 'Xhosa': 'xho',
+            'Yoruba': 'yor', 'Zulu': 'zul'
+        };
+
         let DATA = null;
         let asrMode = 'family';
 
-        // Fetch Data
         fetch('/api/data').then(r=>r.json()).then(d=>{
             DATA = d;
             document.getElementById('loader').style.display='none';
             document.getElementById('content').style.display='block';
             init();
-        }).catch(e => {
-            document.getElementById('loader').innerHTML = "Error loading data.";
-            console.error(e);
         });
 
         function init() {
-            populate('asr-select', DATA.metadata.families);
+            populate('asr-select-fam', DATA.metadata.families);
+            populate('asr-select-mod', DATA.metadata.models);
             populate('tts-select', DATA.metadata.tts_models);
             renderASR(); renderTTS(); renderSLID();
         }
@@ -221,120 +187,153 @@
             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); }
 
-        // --- Render ASR ---
+        // --- RENDER ASR ---
         function renderASR() {
-            const val = document.getElementById('asr-select').value;
             const div = document.getElementById('asr-table');
-            let html='';
+            const title = document.getElementById('asr-title');
+            const legend = document.getElementById('asr-legend');
+            let html = '';
 
-            if(asrMode==='family'){
-                const d=DATA.asr.by_family[val];
-                if(!d) return;
+            if(asrMode === 'family'){
+                const val = document.getElementById('asr-select-fam').value;
+                title.innerText = `Results based on Family: ${val}`;
                 
-                // Rotated Headers for Languages
-                html=`<table><thead><tr>
-                        <th>Model</th>
-                        <th>Avg WER/CER <span class="arrow-down">↓</span></th>`;
-                d.languages.forEach(l=>html+=`<th><div class="rotate-wrapper"><div>${l}<br><span class="sub-header">WER/CER</span></div></div></th>`);
-                html+=`</tr></thead><tbody>`;
+                const d = DATA.asr.by_family[val];
+                if(!d) return;
+
+                // Build Legend & Headers
+                let legendHtml = "<b>Legend:</b> ";
+                let headerHtml = `<th>Model</th><th>Avg WER/CER <span class="arrow-down">↓</span></th>`;
                 
-                d.data.forEach(r=>{
-                    html+=`<tr>
+                d.languages.forEach(l => {
+                    const iso = getIso(l);
+                    legendHtml += `<span class="legend-item"><b>${iso}</b>: ${l}</span>`;
+                    // Normal direction (not 45 degrees)
+                    headerHtml += `<th>${iso}</th>`;
+                });
+
+                legend.style.display = 'block';
+                legend.innerHTML = legendHtml;
+
+                html = `<table><thead><tr>${headerHtml}</tr></thead><tbody>`;
+                d.data.forEach(r => {
+                    html += `<tr>
                         <td>${r.Model}</td>
                         <td class="val"><b>${fmt(r.Avg_WER)} / ${fmt(r.Avg_CER)}</b></td>`;
-                    d.languages.forEach(l=>{
-                        let w=r[`WER_${l}`], c=r[`CER_${l}`];
-                        html+=`<td class="val">${(w!=null)?fmt(w)+'/'+fmt(c):'-'}</td>`;
+                    d.languages.forEach(l => {
+                        let w = r[`WER_${l}`], c = r[`CER_${l}`];
+                        html += `<td class="val">${(w!=null)?fmt(w)+'/'+fmt(c):'-'}</td>`;
                     });
-                    html+=`</tr>`;
+                    html += `</tr>`;
                 });
             } else {
-                const rows=DATA.asr.by_model[val];
-                html=`<table><thead><tr>
+                const val = document.getElementById('asr-select-mod').value;
+                title.innerText = `Results based on Model: ${val}`;
+                legend.style.display = 'none';
+
+                html = `<table><thead><tr>
                     <th>Language</th>
                     <th>Family</th>
                     <th>WER (%) <span class="arrow-down">↓</span></th>
                     <th>CER (%) <span class="arrow-down">↓</span></th>
                 </tr></thead><tbody>`;
-                rows.forEach(r=>html+=`<tr><td>${r.Language}</td><td>${r.Family}</td><td class="val">${fmt(r.WER)}</td><td class="val">${fmt(r.CER)}</td></tr>`);
+                
+                const rows = DATA.asr.by_model[val];
+                rows.forEach(r => {
+                    html += `<tr><td>${r.Language}</td><td>${r.Family}</td><td class="val">${fmt(r.WER)}</td><td class="val">${fmt(r.CER)}</td></tr>`;
+                });
             }
-            html+=`</tbody></table>`;
-            div.innerHTML=html;
+            html += `</tbody></table>`;
+            div.innerHTML = html;
         }
 
-        // --- Render TTS (All Metrics) ---
+        // --- RENDER TTS ---
         function renderTTS() {
-            const rows=DATA.tts[document.getElementById('tts-select').value];
-            if(!rows) return;
+            const val = document.getElementById('tts-select').value;
+            const rows = DATA.tts[val];
             
-            // Calculate Average for Summary
-            let w=0, m=0, c=0;
-            rows.forEach(r=>{w+=r.wer;m+=r.mcd;c++;});
+            document.getElementById('tts-title').innerText = `Results for Model: ${val}`;
             
-            let html=`<p><b>Average Metrics:</b> WER: ${fmt(w/c)} | MCD: ${fmt(m/c)}</p>
-            <table><thead><tr>
-                <th>Language</th>
-                <th>WER <span class="arrow-down">↓</span></th>
-                <th>MCD <span class="arrow-down">↓</span></th>
-                <th>LogF0 <span class="arrow-down">↓</span></th>
-                <th>SpTokDist <span class="arrow-down">↓</span></th>
-                <th>PESQ <span class="arrow-up">↑</span></th>
-                <th>UTMOS <span class="arrow-up">↑</span></th>
-                <th>SpBLEU <span class="arrow-up">↑</span></th>
-                <th>SpBERT <span class="arrow-up">↑</span></th>
-            </tr></thead><tbody>`;
+            if(!rows) return;
+
+            // Metrics configuration
+            // key: json key, label: col header, higherBetter: bool
+            const metrics = [
+                {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}
+            ];
+
+            // Compute Averages
+            let sums = {}, count = 0;
+            metrics.forEach(m => sums[m.k] = 0);
             
-            rows.forEach(r=>{
-                html+=`<tr>
-                    <td>${r.language}</td>
-                    <td class="val">${fmt(r.wer)}</td>
-                    <td class="val">${fmt(r.mcd)}</td>
-                    <td class="val">${fmt(r.logf0rmse)}</td>
-                    <td class="val">${fmt(r.speech_token_distance)}</td>
-                    <td class="val">${fmt(r.pesq)}</td>
-                    <td class="val">${fmt(r.utmos)}</td>
-                    <td class="val">${fmt(r.speechbleu)}</td>
-                    <td class="val">${fmt(r.speechbert_score)}</td>
-                </tr>`;
+            rows.forEach(r => {
+                metrics.forEach(m => sums[m.k] += (r[m.k] || 0));
+                count++;
+            });
+
+            let summaryHtml = "<b>Average Metrics: </b>";
+            metrics.forEach((m, idx) => {
+                if(idx > 0) summaryHtml += " | ";
+                summaryHtml += `${m.l}: ${fmt(sums[m.k]/count)}`;
             });
-            html+=`</tbody></table>`;
-            document.getElementById('tts-table').innerHTML=html;
+            document.getElementById('tts-summary').innerHTML = summaryHtml;
+
+            // Build Table
+            let html = `<table><thead><tr><th>Language</th>`;
+            metrics.forEach(m => {
+                const arrow = m.h ? '<span class="arrow-up">↑</span>' : '<span class="arrow-down">↓</span>';
+                html += `<th>${m.l} ${arrow}</th>`;
+            });
+            html += `</tr></thead><tbody>`;
+
+            rows.forEach(r => {
+                html += `<tr><td>${r.language}</td>`;
+                metrics.forEach(m => html += `<td class="val">${fmt(r[m.k])}</td>`);
+                html += `</tr>`;
+            });
+            html += `</tbody></table>`;
+            document.getElementById('tts-table').innerHTML = html;
         }
 
-        // --- Render SLID ---
+        // --- RENDER SLID ---
         function renderSLID() {
-            let html=`<table><thead><tr>
+            let html = `<table><thead><tr>
                 <th>Language</th>
                 <th>MMS-LID-1024 <span class="arrow-up">↑</span></th>
                 <th>Simba-SLID <span class="arrow-up">↑</span></th>
             </tr></thead><tbody>`;
             
-            DATA.slid.forEach(r=>{
-                let m=r['MMS-LID-1024'], s=r['Simba-SLID'];
-                // Highlight highest score
+            DATA.slid.forEach(r => {
+                let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
                 let mS = fmt(m), sS = fmt(s);
-                if(m > s) mS = `<b>${mS}</b>`;
-                else if(s > m) sS = `<b>${sS}</b>`;
-                
-                html+=`<tr><td>${r.Language}</td><td class="val">${mS}</td><td class="val">${sS}</td></tr>`;
+                if(m > s) mS = `<b>${mS}</b>`; else if(s > m) sS = `<b>${sS}</b>`;
+                html += `<tr><td>${r.Language}</td><td class="val">${mS}</td><td class="val">${sS}</td></tr>`;
             });
-            html+=`</tbody></table>`;
-            document.getElementById('slid-table').innerHTML=html;
+            html += `</tbody></table>`;
+            document.getElementById('slid-table').innerHTML = html;
         }
 
-        // Interaction
-        window.setTab=(id,btn)=>{
-            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');
+        // --- INTERACTIONS ---
+        window.setTab = (id, btn) => {
+            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');
         };
-        window.setASRMode=(m)=>{
-            asrMode=m;
-            document.getElementById('btn-fam').className=m==='family'?'btn btn-primary':'btn btn-secondary';
-            document.getElementById('btn-mod').className=m==='model'?'btn btn-primary':'btn btn-secondary';
-            document.getElementById('asr-select').style.display = m==='family' ? 'inline-block' : 'inline-block'; // Actually toggle dropdown contents via populate
-            populate('asr-select', m==='family'?DATA.metadata.families:DATA.metadata.models);
+
+        window.setASRMode = (m) => {
+            asrMode = m;
+            // Toggle Buttons
+            document.getElementById('btn-fam').className = m==='family'?'btn btn-primary':'btn btn-secondary';
+            document.getElementById('btn-mod').className = m==='model'?'btn btn-primary':'btn btn-secondary';
+            // Toggle Dropdown Groups
+            document.getElementById('grp-fam').style.display = m==='family'?'flex':'none';
+            document.getElementById('grp-mod').style.display = m==='model'?'flex':'none';
             renderASR();
         }
     </script>