Spaces:

UBC-NLP
/

SimbaBench

Running

App Files Files Community

elmadany commited on Nov 28, 2025

Commit

8e652c5

verified ·

1 Parent(s): 4d3a843

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +329 -216

public/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SimbaBench - Voice of a Continent</title>
     <link rel="icon" type="image/jpeg" href="https://africa.dlnlp.ai/simba/images/favicon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -13,118 +13,238 @@
     <style>
         :root {
-            /* Brand Colors */
-            --bg-deep: #1e1b4b;
-            --text-yellow: #fbbf24;
             --text-white: #ffffff;
-            --text-mute: #94a3b8;
-            /* 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);
-            --simba-navy: #0f172a;
-            --border-gold: #dca02a;
         }
         body {
             background-color: var(--bg-deep);
             font-family: 'Inter', sans-serif;
-            color: #334155;
-            margin: 0;
-            padding: 0;
             overflow-x: hidden;
         }
-        /* --- 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);
-            mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
-            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; }
-        .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: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 --- */
-        .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%; }
-        .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); }
-        .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-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; }
-        .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; }
-        /* Tabs Style */
-        .tabs { display: flex; gap: 10px; margin-bottom: 25px; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }
-        .tab-btn {
-            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); }
         /* 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; 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; }
-        .arrow-up { color: #16a34a; } .arrow-down { color: #d97706; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
-        /* 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; }
         }
     </style>
 </head>
 <body>
@@ -132,137 +252,140 @@
     <nav class="navbar">
         <a href="#" class="nav-logo">
             <img src="https://africa.dlnlp.ai/simba/images/favicon.png" alt="Logo">
-            Voice of a Continent
         </a>
         <div class="nav-links">
-            <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-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>
         </div>
     </nav>
     <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.
             </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>
             </div>
         </div>
         <div class="hero-visual">
-            <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" 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; 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;">
-                                    <label>Select Family: </label>
-                                    <select id="asr-select-fam" onchange="renderASR()" style="padding:6px; border-radius:6px;"></select>
-                                </div>
-                                <div id="grp-mod" style="display:none;">
-                                    <label>Select Model: </label>
-                                    <select id="asr-select-mod" onchange="renderASR()" style="padding:6px; border-radius:6px;"></select>
-                                </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>
-                    </div>
-                    <div id="tts" class="view">
-                        <div class="controls">
-                            <label>Select Model: </label>
-                            <select id="tts-select" onchange="renderTTS()" style="padding:6px; border-radius:6px; min-width:250px;"></select>
-                        </div>
-                        <h3 id="tts-title" style="color:#d97706; font-size:18px;"></h3>
-                        <div id="tts-summary" style="margin-bottom:15px; font-weight:500;"></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 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>
-        // --- 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',
-            'Swahili': 'swa', 'Somali': 'som', 'Wolof': 'wol', 'Xhosa': 'xho'
-        };
         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';
-            document.getElementById('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-fam', DATA.metadata.families);
-            populate('asr-select-mod', DATA.metadata.models);
             populate('tts-select', DATA.metadata.tts_models);
-            // Set Initial State Explicitly
-            setTab('asr');
-            renderASR();
-            renderTTS();
-            renderSLID();
         }
         function populate(id, list) {
@@ -270,41 +393,40 @@
             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).toLowerCase(); }
-        // --- RENDER ASR ---
         function renderASR() {
             const div = document.getElementById('asr-table');
             const legend = document.getElementById('asr-legend');
             let html='';
             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.style.display = 'block';
-                legend.innerHTML = `<b>Codes:</b> ` + d.languages.map(l => `<span style="margin-right:10px"><b>${getIso(l)}</b>=${l}</span>`).join("");
-                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>`;
                 d.data.forEach(r => {
                     html += `<tr><td>${r.Model}</td><td style="font-weight:bold; background:#f8fafc">${fmt(r.Avg_WER)} / ${fmt(r.Avg_CER)}</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 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>`;
                 });
@@ -312,32 +434,26 @@
             div.innerHTML = html;
         }
-        // --- 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;
             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}
             ];
             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;
             let html = `<table><thead><tr><th>Language</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>`;
@@ -347,41 +463,38 @@
             document.getElementById('tts-table').innerHTML = html;
         }
-        // --- 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 => {
                 let m = r['MMS-LID-1024'], s = r['Simba-SLID'];
-                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;
         }
-        // --- 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'));
-            // 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 = "h-btn btn-models"; b1.style.background = "var(--grad-blue)"; b1.style.color="white";
-                b2.className = "h-btn"; b2.style.background = "#cbd5e1"; b2.style.color="#334155";
             } else {
-                b2.className = "h-btn btn-models"; b2.style.background = "var(--grad-blue)"; b2.style.color="white";
-                b1.className = "h-btn"; b1.style.background = "#cbd5e1"; b1.style.color="#334155";
             }
             renderASR();
         }

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voice of a Continent | SimbaBench</title>
     <link rel="icon" type="image/jpeg" href="https://africa.dlnlp.ai/simba/images/favicon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <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 */
+            --grad-blue: linear-gradient(90deg, #3b82f6, #0ea5e9);
+            --grad-yellow: linear-gradient(90deg, #eab308, #ca8a04);
+            /* Hero Buttons */
+            --btn-red: #ef4444;
+            --btn-purple: #8b5cf6;
+            --btn-orange: #f97316;
+            --btn-blue: #3b82f6;
+            --btn-green: #22c55e;
         }
         body {
             background-color: var(--bg-deep);
             font-family: 'Inter', sans-serif;
+            color: var(--text-white);
+            margin: 0; padding: 0;
             overflow-x: hidden;
         }
+        a { text-decoration: none; transition: 0.2s; }
+        /* --- NAVBAR --- */
+        .navbar {
+            padding: 20px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: transparent;
+            z-index: 100;
+            position: relative;
+        }
+        .nav-logo {
+            color: white;
+            font-family: 'Rubik', sans-serif;
+            font-weight: 700;
+            font-size: 22px;
+            display: flex; align-items: center; gap: 12px;
+        }
+        .nav-logo img { height: 40px; }
+        .nav-text { display: flex; flex-direction: column; line-height: 1.1; }
+        .nav-text span:first-child { font-size: 14px; color: var(--text-yellow); }
+        .nav-links { display: flex; gap: 25px; align-items: center; }
+        .nav-link { color: #e2e8f0; font-size: 15px; font-weight: 500; }
+        .nav-link:hover { color: var(--text-yellow); }
+        .btn-submit {
+            background: var(--grad-blue);
+            color: white !important;
+            padding: 10px 24px;
+            border-radius: 30px;
+            font-weight: 600;
+            font-size: 14px;
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
         }
+        .btn-login {
+            background: var(--text-yellow);
+            color: var(--bg-deep) !important;
+            padding: 10px 24px;
+            border-radius: 30px;
+            font-weight: 700;
+            font-size: 14px;
+            box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
         }
+        /* --- HERO --- */
+        .hero {
+            display: flex;
+            align-items: center;
+            max-width: 1400px;
+            margin: 60px auto 100px;
+            padding: 0 40px;
+            position: relative;
+        }
+        .hero-content { flex: 1; z-index: 2; }
+        .conf-badge {
+            background: white;
+            color: black;
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            padding: 6px 16px;
+            border-radius: 8px;
+            margin-bottom: 30px;
+            font-weight: 700;
+            font-size: 14px;
         }
+        .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-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: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); }
+        .hero-visual {
+            flex: 1;
+            display: flex;
+            justify-content: flex-end;
+            position: relative;
+        }
+        .hero-visual img { max-width: 100%; height: auto; z-index: 1; }
+        /* Wave */
+        .wave-container {
+            position: absolute;
+            top: 20%;
+            left: 0;
+            right: 0;
+            height: 400px;
+            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIwLjAzIiBkPSJNMCwxNjBMMzAsMTQ5LjNDNjAsMTM5LDEyMCwxMTcsMTgwLDExN0MyNDAsMTE3LDMwMCwxMzksMzYwLDE0NCxDNDIwLDE0OSw0ODAsMTM5LDU0MCwxMjIuN0M2MDAsMTA3LDY2MCw4NSw3MjAsODUuM0M3ODAsODUsODQwLDEwNyw5MDAsMTI4Qzk2MCwxNDksMTAyMCwxNzEsMTA4MCwxNzAuN0MxMTQwLDE3MSwxMjAwLDE0OSwxMjYwLDEzOC43QzEzMjAsMTI4LDEzODAsMTI4LDE0MTAsMTI4TDE0NDAsMTI4TDE0NDAsMzIwTDE0MTAsMzIwQzEzODAsMzIwLDEzMjAsMzIwLDEyNjAsMzIwQzEyMDAsMzIwLDExNDAsMzIwLDEwODAsMzIwQzEwMjAsMzIwLDk2MCwzMjAsOTAwLDMyMEM4NDAsMzIwLDc4MCwzMjAsNzIwLDMyMEM2NjAsMzIwLDYwMCwzMjAsNTQwLDMyMEM0ODAsMzIwLDQyMCwzMjAsMzYwLDMyMEMzMDAsMzIwLDI0MCwzMjAsMTgwLDMyMEMxMjAsMzIwLDYwLDMyMCwzMCwzMjBMMCwzMjBaIj48L3BhdGg+PC9zdmc+');
+            background-size: cover;
+            opacity: 0.5;
+            z-index: 0;
+            pointer-events: none;
+        }
+        /* --- MAIN CONTENT AREA --- */
+        .main-card {
+            background: white;
+            border-radius: 24px;
+            margin: 0 40px 60px;
+            padding: 40px;
+            color: #0f172a;
+            min-height: 600px;
+        }
+        .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;
         }
+        .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; }
         /* 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;
+        }
+        /* 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;
+        }
+        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;
+        }
+        thead th:first-child { background: #f1f5f9; z-index: 3; }
         th:nth-child(2), td:nth-child(2) { text-align: left; }
+        /* Citation Box */
+        .citation-box {
+            background: #0f172a;
+            color: #cbd5e1;
+            padding: 20px;
+            border-radius: 12px;
+            font-family: monospace;
+            white-space: pre-wrap;
+            margin-top: 20px;
+            text-align: left;
         }
+        /* 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)} }
     </style>
 </head>
 <body>
     <nav class="navbar">
         <a href="#" class="nav-logo">
             <img src="https://africa.dlnlp.ai/simba/images/favicon.png" alt="Logo">
+            <div class="nav-text">
+                <span>Voice of a</span>
+                Continent
+            </div>
         </a>
         <div class="nav-links">
+            <a href="https://arxiv.org/abs/2510.17998" class="nav-link">Paper</a>
+            <a href="https://github.com/UBC-NLP/simba" class="nav-link">Pipeline</a>
+            <a href="https://huggingface.co/datasets/UBC-NLP/simba" class="nav-link">Dataset</a>
+            <a href="#" class="nav-link">Models</a>
+            <a href="#" class="nav-link" style="color:var(--text-yellow)">Leaderboard</a>
+            <a href="#citation" class="nav-link">Citation</a>
+            <a href="#" class="btn-submit">Submit New Results</a>
+            <a href="#" class="btn-login">Login</a>
         </div>
     </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
             </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.
             </p>
+            <div class="hero-actions">
+                <a href="https://arxiv.org/abs/2510.17998" target="_blank" class="action-btn bg-red">
+                    <i class="fa-regular fa-file-pdf"></i> Read Paper
+                </a>
+                <a href="https://github.com/UBC-NLP/simba" target="_blank" class="action-btn bg-purple">
+                    <i class="fa-solid fa-code-branch"></i> Pipeline
+                </a>
+                <a href="https://huggingface.co/datasets/UBC-NLP/simba" target="_blank" class="action-btn bg-orange">
+                    <i class="fa-solid fa-database"></i> Dataset
+                </a>
+                <a href="#" class="action-btn bg-blue">
+                    <i class="fa-solid fa-bolt"></i> Models
+                </a>
+                <a href="#board" class="action-btn bg-green">
+                    <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">
         </div>
     </div>
+    <div class="main-card" id="board">
+        <div id="loader"><i class="fa-solid fa-circle-notch fa-spin fa-2x" style="color:#0f172a"></i><br>Loading Data...</div>
+        <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>
+            </div>
+            <div id="asr" class="view active">
+                <div class="controls">
+                    <span style="font-weight:700;">View Mode:</span>
+                    <button id="btn-fam" class="action-btn bg-blue" style="padding:8px 16px; font-size:12px; box-shadow:none;" onclick="setASRMode('family')">By Family</button>
+                    <button id="btn-mod" class="action-btn" style="padding:8px 16px; font-size:12px; background:#e2e8f0; color:#334155;" onclick="setASRMode('model')">By Model</button>
+                    <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>
+                </div>
+                <h3 id="asr-title" style="color:#d97706; margin-bottom:15px;"></h3>
+                <div id="asr-legend" style="margin-bottom:15px; font-size:13px; color:#64748b; line-height:1.6;"></div>
+                <div id="asr-table" class="table-wrap"></div>
+            </div>
+            <div id="tts" class="view">
+                <div class="controls">
+                    <span style="font-weight:600;">Select Model:</span>
+                    <select id="tts-select" onchange="renderTTS()"></select>
                 </div>
+                <h3 id="tts-title" style="color:#d97706; margin-bottom:10px;"></h3>
+                <div id="tts-summary" style="margin-bottom:20px; font-weight:600; color:#0f172a;"></div>
+                <div id="tts-table" class="table-wrap"></div>
             </div>
+            <div id="slid" class="view">
+                <h3 style="color:#d97706;">Spoken Language Identification Leaderboard</h3>
+                <div id="slid-table" class="table-wrap"></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,
+  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">
+        <img src="https://africa.dlnlp.ai/sahara//img/sahara_web_sponsers.jpg" width="250" style="opacity:0.8; margin-bottom:15px;">
+        <br>
+        &copy; 2025 Simba Benchmark.
+    </div>
+    <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('app-content').style.display='block';
             init();
         });
         function init() {
+            populate('asr-select', DATA.metadata.families); // Default family
             populate('tts-select', DATA.metadata.tts_models);
+            renderASR(); renderTTS(); renderSLID();
         }
         function populate(id, list) {
             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); }
+        // --- 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 d = DATA.asr.by_family[val];
                 if(!d) return;
+                // Use the ISO from data directly (languages is array of {name, iso})
                 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("");
+                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>`;
+                d.languages.forEach(l => html += `<th>${l.iso}</th>`);
                 html += `</tr></thead><tbody>`;
                 d.data.forEach(r => {
                     html += `<tr><td>${r.Model}</td><td style="font-weight:bold; background:#f8fafc">${fmt(r.Avg_WER)} / ${fmt(r.Avg_CER)}</td>`;
                     d.languages.forEach(l => {
+                        let w=r[`WER_${l.name}`], c=r[`CER_${l.name}`];
                         html += `<td>${(w!=null)?fmt(w)+'/'+fmt(c):'-'}</td>`;
                     });
                     html += `</tr>`;
                 });
             } else {
+                document.getElementById('asr-title').innerText = `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>`;
                 rows.forEach(r => {
                     html += `<tr><td>${r.Language}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
                 });
             div.innerHTML = html;
         }
+        // --- TTS ---
         function renderTTS() {
             const val = document.getElementById('tts-select').value;
+            document.getElementById('tts-title').innerText = `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}
             ];
             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 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>`);
             html += `</tr></thead><tbody>`;
             rows.forEach(r => {
                 html += `<tr><td>${r.language}</td>`;
             document.getElementById('tts-table').innerHTML = html;
         }
+        // --- SLID ---
         function renderSLID() {
+            let html = `<table><thead><tr><th>Language</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 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>`;
             });
             document.getElementById('slid-table').innerHTML = html;
         }
+        // --- UI ---
+        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;
             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);
             } 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);
             }
             renderASR();
         }