Update public/index.html

public/index.html

@@ -10,159 +10,333 @@
             --primary-navy: #282351;
             --primary-orange: #D97706;
             --secondary-navy: #2f3b7d;
-            --bg-cream: #FFFBF5;
+            --bg-body: #282351;  /* Deep Navy Background */
+            --bg-card: #ffffff;  /* White Card Background */
             --border-gold: #dca02a;
+            --text-dark: #333;
         }
-        body { background: var(--bg-cream); font-family: 'Inter', sans-serif; color: #333; 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; }
-        .card { background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 30px; }
+        .header img { 
+            max-width: 60%; 
+            height: auto; 
+            border-radius: 12px; /* Optional: Softens the image against the dark bg */
+        }
+        
+        /* 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; 
+        }
+        
+        h2 { font-family: "Rubik", sans-serif; color: var(--secondary-navy); font-size: 28px; margin-top: 0; }
         
         /* 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; }
+        .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;
+        }
         .tab-btn.active { background: var(--primary-navy); color: white; }
-        .view { display: none; }
+        .view { display: none; animation: fadeIn 0.4s; }
         .view.active { display: block; }
 
         /* Controls */
-        .controls { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
+        .controls { display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
         .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; min-width: 200px; }
-
-        /* Tables */
-        .table-wrap { overflow-x: auto; }
-        table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--border-gold); border-bottom: 2px solid var(--border-gold); font-size: 14px; }
-        th, td { padding: 10px; text-align: center; border-bottom: 1px solid #eee; white-space: nowrap; }
-        th { color: #7d3561; vertical-align: bottom; }
-        th:first-child, td:first-child { text-align: left; font-weight: bold; color: var(--primary-navy); }
-        .v-head { writing-mode: vertical-rl; transform: rotate(180deg); height: 130px; text-align: left; }
+        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 */
+        }
+
+        /* 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;
+        }
+        
+        /* 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;
+        }
+        
+        .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; 
+        }
+
+        /* Value Cells */
+        .val { white-space: nowrap; }
         
-        #loader { text-align: center; padding: 50px; font-size: 18px; color: var(--secondary-navy); }
+        /* Metric Arrow Colors */
+        .arrow-up { color: green; font-size: 0.9em; }
+        .arrow-down { color: #D97706; font-size: 0.9em; } /* Orange for lower-is-better */
+
+        #loader { text-align: center; padding: 40px; font-size: 18px; color: var(--secondary-navy); }
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
     </style>
 </head>
 <body>
 
-<div class="container">
-    <div class="header"><img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Simba"></div>
+    <div class="container">
+        <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)">ASR Leaderboard</button>
-                <button class="tab-btn" onclick="setTab('tts', this)">TTS Leaderboard</button>
-                <button class="tab-btn" onclick="setTab('slid', this)">SLID Leaderboard</button>
-            </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>
+                </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>
+                <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>
+                    </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>
+                    <div id="tts-table" class="table-wrap"></div>
                 </div>
-                <div id="asr-table" class="table-wrap"></div>
-            </div>
 
-            <div id="tts" class="view">
-                <div class="controls"><label>Model: </label><select id="tts-select" onchange="renderTTS()"></select></div>
-                <div id="tts-table" class="table-wrap"></div>
+                <div id="slid" class="view">
+                    <div id="slid-table" class="table-wrap"></div>
+                </div>
             </div>
+        </div>
 
-            <div id="slid" class="view"><div id="slid-table" class="table-wrap"></div></div>
+        <div class="card">
+            <h2>Citation</h2>
+            <p>If you use the Simba benchmark, please cite our <a href='https://africa.dlnlp.ai/sahara/' style="color:#D97706">ACL2025 paper</a>.</p>
         </div>
+        <center><img src='https://africa.dlnlp.ai/sahara//img/sahara_web_sponsers.jpg' width='25%'></center>
     </div>
-    <div class="card">
-        <h3>Citation</h3>
-        <p>If you use Simba, please cite our <a href='https://africa.dlnlp.ai/sahara/' style="color:#D97706">ACL2025 paper</a>.</p>
-    </div>
-</div>
-
-<script>
-    let DATA = null;
-    let asrMode = 'family';
-
-    fetch('/api/data').then(r=>r.json()).then(d=>{
-        DATA = d;
-        document.getElementById('loader').style.display='none';
-        document.getElementById('content').style.display='block';
-        init();
-    });
-
-    function init() {
-        populate('asr-select', DATA.metadata.families);
-        populate('tts-select', DATA.metadata.tts_models);
-        renderASR(); renderTTS(); renderSLID();
-    }
-    function populate(id, list) {
-        const s = document.getElementById(id); s.innerHTML='';
-        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 renderASR() {
-        const val = document.getElementById('asr-select').value;
-        const div = document.getElementById('asr-table');
-        let html='';
-        if(asrMode==='family'){
-            const d=DATA.asr.by_family[val];
-            if(!d) return;
-            html=`<table><thead><tr><th>Model</th><th>Avg WER/CER</th>`;
-            d.languages.forEach(l=>html+=`<th><div class="v-head">${l}</div></th>`);
-            html+=`</tr></thead><tbody>`;
-            d.data.forEach(r=>{
-                html+=`<tr><td>${r.Model}</td><td><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>${(w!=null)?fmt(w)+'/'+fmt(c):'-'}</td>`;
+
+    <script>
+        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('tts-select', DATA.metadata.tts_models);
+            renderASR(); renderTTS(); renderSLID();
+        }
+        function populate(id, list) {
+            const s = document.getElementById(id); s.innerHTML='';
+            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); }
+
+        // --- Render ASR ---
+        function renderASR() {
+            const val = document.getElementById('asr-select').value;
+            const div = document.getElementById('asr-table');
+            let html='';
+
+            if(asrMode==='family'){
+                const d=DATA.asr.by_family[val];
+                if(!d) return;
+                
+                // 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>`;
+                
+                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>`;
+                    });
+                    html+=`</tr>`;
                 });
-                html+=`</tr>`;
+            } else {
+                const rows=DATA.asr.by_model[val];
+                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>`);
+            }
+            html+=`</tbody></table>`;
+            div.innerHTML=html;
+        }
+
+        // --- Render TTS (All Metrics) ---
+        function renderTTS() {
+            const rows=DATA.tts[document.getElementById('tts-select').value];
+            if(!rows) return;
+            
+            // Calculate Average for Summary
+            let w=0, m=0, c=0;
+            rows.forEach(r=>{w+=r.wer;m+=r.mcd;c++;});
+            
+            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>`;
+            
+            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>`;
             });
-        } else {
-            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>`;
-            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;
-    }
-
-    function renderTTS() {
-        const rows=DATA.tts[document.getElementById('tts-select').value];
-        if(!rows) return;
-        let w=0,m=0,c=0;
-        rows.forEach(r=>{w+=r.wer;m+=r.mcd;c++;});
-        let html=`<p><b>Avg:</b> WER: ${fmt(w/c)} | MCD: ${fmt(m/c)}</p><table><thead><tr><th>Lang</th><th>WER</th><th>MCD</th><th>PESQ</th></tr></thead><tbody>`;
-        rows.forEach(r=>html+=`<tr><td>${r.language}</td><td>${fmt(r.wer)}</td><td>${fmt(r.mcd)}</td><td>${fmt(r.pesq)}</td></tr>`);
-        html+=`</tbody></table>`;
-        document.getElementById('tts-table').innerHTML=html;
-    }
-
-    function renderSLID() {
-        let html=`<table><thead><tr><th>Lang</th><th>MMS</th><th>Simba</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>${m>s?'<b>'+fmt(m)+'</b>':fmt(m)}</td><td>${s>m?'<b>'+fmt(s)+'</b>':fmt(s)}</td></tr>`;
-        });
-        html+=`</tbody></table>`;
-        document.getElementById('slid-table').innerHTML=html;
-    }
-
-    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';
-        populate('asr-select', m==='family'?DATA.metadata.families:DATA.metadata.models);
-        renderASR();
-    }
-</script>
+            html+=`</tbody></table>`;
+            document.getElementById('tts-table').innerHTML=html;
+        }
+
+        // --- Render SLID ---
+        function renderSLID() {
+            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
+                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>`;
+            });
+            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');
+        };
+        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);
+            renderASR();
+        }
+    </script>
 </body>
 </html>