Spaces:

UBC-NLP
/

SimbaBench

Running

App Files Files Community

elmadany commited on Nov 28, 2025

Commit

107ece8

verified ·

1 Parent(s): 6226dc5

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +168 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,168 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simba Benchmark</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Rubik:wght@400;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-navy: #282351;
+            --primary-orange: #D97706;
+            --secondary-navy: #2f3b7d;
+            --bg-cream: #FFFBF5;
+            --border-gold: #dca02a;
+        }
+        body { background: var(--bg-cream); font-family: 'Inter', sans-serif; color: #333; margin: 0; padding: 20px; }
+        .container { max-width: 1400px; margin: 0 auto; }
+        .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; }
+        /* 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.active { background: var(--primary-navy); color: white; }
+        .view { display: none; }
+        .view.active { display: block; }
+        /* Controls */
+        .controls { display: flex; gap: 10px; margin-bottom: 15px; align-items: center; }
+        .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; }
+        #loader { text-align: center; padding: 50px; font-size: 18px; color: var(--secondary-navy); }
+    </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="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 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>Model: </label><select id="tts-select" onchange="renderTTS()"></select></div>
+                <div id="tts-table" class="table-wrap"></div>
+            </div>
+            <div id="slid" class="view"><div id="slid-table" class="table-wrap"></div></div>
+        </div>
+    </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>`;
+                });
+                html+=`</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>
+</body>
+</html>