Spaces:

UBC-NLP
/

SimbaBench

Running

App Files Files Community

elmadany commited on Nov 28, 2025

Commit

0289280

verified ·

1 Parent(s): b27609b

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +322 -325

public/index.html CHANGED Viewed

@@ -3,389 +3,394 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simba Benchmark Leaderboard</title>
     <link rel="icon" type="image/jpeg" href="https://africa.dlnlp.ai/simba/images/favicon.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Rubik:wght@500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            /* Simba Brand Colors */
-            --simba-navy: #0f172a;       /* Deep Slate Navy */
-            --simba-blue: #1e293b;       /* Lighter Navy for Cards */
-            --simba-gold: #d97706;       /* Primary Action Color */
-            --simba-gold-light: #f59e0b; /* Hover State */
-            --bg-cream: #f8fafc;         /* Very Light Grey/Cream for body */
-            --text-main: #334155;
-            --text-dark: #0f172a;
-            --border-color: #e2e8f0;
         }
         body {
-            background-color: var(--bg-cream);
             font-family: 'Inter', sans-serif;
             color: var(--text-main);
             margin: 0;
-            padding-top: 80px; /* Space for fixed navbar */
         }
-        /* --- NAVIGATION BAR --- */
-        .navbar {
-            background-color: var(--simba-navy);
-            position: fixed;
-            top: 0;
             width: 100%;
-            z-index: 1000;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         }
-        .nav-container {
-            max-width: 1280px;
-            margin: 0 auto;
-            padding: 0 20px;
-            height: 70px;
             display: flex;
-            align-items: center;
             justify-content: space-between;
         }
         .nav-logo {
             color: white;
             font-family: 'Rubik', sans-serif;
             font-weight: 700;
-            font-size: 24px;
-            text-decoration: none;
             display: flex;
             align-items: center;
             gap: 10px;
         }
-        .nav-logo img { height: 40px; border-radius: 5px; }
-        .nav-links { display: flex; gap: 25px; }
-        .nav-link {
             color: #cbd5e1;
             text-decoration: none;
             font-weight: 500;
-            font-size: 15px;
             transition: color 0.2s;
         }
-        .nav-link:hover, .nav-link.active { color: var(--simba-gold); }
-        .nav-btn {
-            background-color: var(--simba-gold);
             color: white !important;
-            padding: 8px 16px;
-            border-radius: 9999px; /* Pill shape */
-            transition: background-color 0.2s;
         }
-        .nav-btn:hover { background-color: var(--simba-gold-light); }
         /* --- HERO SECTION --- */
         .hero {
-            text-align: center;
-            padding: 40px 20px;
-            background: white;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        .hero img { max-width: 600px; width: 90%; height: auto; }
-        .hero h1 {
-            font-family: 'Rubik', sans-serif;
-            color: var(--simba-navy);
-            margin-top: 20px;
-            font-size: 32px;
         }
-        /* --- MAIN CONTAINER --- */
-        .container { max-width: 1280px; margin: 0 auto; padding: 0 20px 60px; }
-        /* --- CARDS --- */
-        .card {
             background: white;
-            border-radius: 16px;
-            border: 1px solid var(--border-color);
-            padding: 30px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
-            margin-bottom: 30px;
-        }
-        h2 {
-            font-family: 'Rubik', sans-serif;
-            color: var(--simba-navy);
-            font-size: 24px;
-            margin-top: 0;
-            border-bottom: 2px solid var(--simba-gold);
             display: inline-block;
-            padding-bottom: 8px;
             margin-bottom: 20px;
         }
-        /* --- TABS --- */
-        .tabs {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 25px;
-            background: #f1f5f9;
-            padding: 5px;
-            border-radius: 12px;
-            width: fit-content;
         }
-        .tab-btn {
-            background: transparent;
-            border: none;
-            padding: 10px 20px;
-            font-family: 'Inter', sans-serif;
-            font-weight: 600;
-            color: #64748b;
-            cursor: pointer;
-            border-radius: 8px;
-            transition: all 0.2s ease;
         }
-        .tab-btn:hover { color: var(--simba-navy); }
-        .tab-btn.active {
-            background-color: white;
-            color: var(--simba-gold);
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
-        .view { display: none; animation: fadeIn 0.3s; }
-        .view.active { display: block; }
-        /* --- CONTROLS --- */
-        .controls-bar {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: #f8fafc;
-            padding: 15px;
-            border-radius: 10px;
-            border: 1px solid var(--border-color);
-            margin-bottom: 20px;
             flex-wrap: wrap;
             gap: 15px;
         }
-        .btn-group { display: flex; gap: 10px; }
-        .btn {
-            padding: 8px 20px;
-            border-radius: 8px;
             font-weight: 600;
             font-size: 14px;
-            cursor: pointer;
-            border: 1px solid transparent;
-            transition: all 0.2s;
         }
-        .btn-primary {
-            background-color: var(--simba-navy);
-            color: white;
         }
-        .btn-primary:hover { background-color: #334155; }
-        .btn-secondary {
-            background-color: white;
-            color: var(--simba-navy);
-            border: 1px solid #cbd5e1;
         }
-        .btn-secondary:hover { border-color: var(--simba-navy); }
-        select {
-            padding: 8px 32px 8px 12px;
-            border-radius: 8px;
-            border: 1px solid #cbd5e1;
-            background-color: white;
-            font-size: 14px;
-            min-width: 220px;
-            cursor: pointer;
         }
-        /* --- TABLES --- */
-        .table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid var(--border-color); }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 14px;
-            background: white;
-        }
-        thead { background-color: #f8fafc; }
-        th {
-            text-align: center;
-            padding: 16px 12px;
-            font-weight: 600;
-            color: var(--simba-navy);
-            border-bottom: 2px solid #e2e8f0;
-            white-space: nowrap;
-        }
-        td {
-            padding: 12px;
-            border-bottom: 1px solid #e2e8f0;
-            text-align: center;
-            color: #475569;
         }
-        tr:last-child td { border-bottom: none; }
-        tr:hover td { background-color: #f8fafc; }
-        /* Sticky Columns */
-        th:first-child, td:first-child {
-            position: sticky;
-            left: 0;
-            background-color: inherit;
-            z-index: 1;
-            text-align: left;
-            font-weight: 600;
-            color: var(--simba-navy);
-            border-right: 2px solid #e2e8f0;
         }
-        thead th:first-child { z-index: 2; background-color: #f8fafc; }
-        /* Left Align Text */
         th:nth-child(2), td:nth-child(2) { text-align: left; }
-        /* Metrics & Arrows */
-        .metric-good { color: #16a34a; font-weight: 600; } /* Green */
-        .metric-neutral { color: #d97706; } /* Orange */
-        .val { white-space: nowrap; }
-        /* Rotated Headers Override */
-        .vertical-head { font-size: 12px; color: #64748b; }
-        /* --- FOOTER --- */
-        .footer { text-align: center; margin-top: 40px; color: #64748b; font-size: 14px; }
-        .footer a { color: var(--simba-gold); text-decoration: none; }
-        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
-        /* Loading */
-        #loader { padding: 60px; text-align: center; font-size: 18px; color: var(--simba-navy); font-weight: 500; }
     </style>
 </head>
 <body>
     <nav class="navbar">
-        <div class="nav-container">
-            <a href="https://africa.dlnlp.ai/simba/" class="nav-logo">
-                <i class="fa-solid fa-paw" style="color: var(--simba-gold);"></i>
-                SimbaBench
-            </a>
-            <div class="nav-links">
-                <a href="https://africa.dlnlp.ai/simba/" class="nav-link">Home</a>
-                <a href="https://arxiv.org/abs/2510.17998" class="nav-link" target="_blank">Paper</a>
-                <a href="https://github.com/UBC-NLP/simba" class="nav-link" target="_blank">Code</a>
-                <a href="https://huggingface.co/datasets/UBC-NLP/simba" class="nav-link" target="_blank">Dataset</a>
-                <a href="#" class="nav-link active nav-btn">Leaderboard</a>
-            </div>
         </div>
     </nav>
     <div class="hero">
-        <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Simba Header">
-        <h1>Official Benchmark Leaderboard</h1>
     </div>
-    <div class="container">
-        <div class="card">
-            <div id="loader"><i class="fa-solid fa-circle-notch fa-spin"></i> Loading Leaderboard Data...</div>
-            <div id="content" style="display:none;">
-                <div class="tabs">
-                    <button class="tab-btn active" onclick="setTab('asr', this)">
-                        <i class="fa-solid fa-microphone-lines"></i> ASR
-                    </button>
-                    <button class="tab-btn" onclick="setTab('tts', this)">
-                        <i class="fa-solid fa-volume-high"></i> TTS
-                    </button>
-                    <button class="tab-btn" onclick="setTab('slid', this)">
-                        <i class="fa-solid fa-language"></i> SLID
-                    </button>
                 </div>
-                <div id="asr" class="view active">
-                    <div class="controls-bar">
-                        <div class="btn-group">
-                            <button id="btn-fam" class="btn btn-primary" onclick="setASRMode('family')">By Language Family</button>
-                            <button id="btn-mod" class="btn btn-secondary" onclick="setASRMode('model')">By Model</button>
                         </div>
-                        <div id="grp-fam">
-                            <span style="font-weight: 600; margin-right: 10px; color: var(--simba-navy);">Select Family:</span>
-                            <select id="asr-select-fam" onchange="renderASR()"></select>
-                        </div>
-                        <div id="grp-mod" style="display:none;">
-                            <span style="font-weight: 600; margin-right: 10px; color: var(--simba-navy);">Select Model:</span>
-                            <select id="asr-select-mod" onchange="renderASR()"></select>
-                        </div>
                     </div>
-                    <div id="asr-legend" style="margin-bottom: 15px; font-size: 13px; color: #64748b; background: #f8fafc; padding: 10px; border-radius: 6px; display:none;"></div>
-                    <div id="asr-table" class="table-wrap"></div>
-                </div>
-                <div id="tts" class="view">
-                    <div class="controls-bar">
-                        <div>
-                            <span style="font-weight: 600; margin-right: 10px; color: var(--simba-navy);">Select Model:</span>
-                            <select id="tts-select" onchange="renderTTS()"></select>
                         </div>
                     </div>
-                    <div id="tts-summary" style="margin-bottom: 15px; font-weight:500; color:var(--simba-navy);"></div>
-                    <div id="tts-table" class="table-wrap"></div>
-                </div>
-                <div id="slid" class="view">
-                    <h3 style="color:var(--simba-navy); font-size:18px; margin-top:0;">Spoken Language Identification</h3>
-                    <div id="slid-table" class="table-wrap"></div>
-                </div>
             </div>
-        </div>
-        <div class="card" style="text-align: center;">
-            <h2>Citation</h2>
-            <p style="color: #64748b; line-height: 1.6;">
-                If you use the Simba benchmark for your scientific publication, please cite our
-                <a href='https://africa.dlnlp.ai/sahara/' style="color:var(--simba-gold); font-weight:bold;">ACL2025 paper</a>.
-            </p>
-            <div class="citation-block" style="background:#1e293b; color:#cbd5e1; padding:15px; border-radius:8px; text-align:left; font-family:monospace; margin-top:20px; font-size:12px; overflow-x:auto;">
-@inproceedings{simba2025,
-  title={Simba: A Unified Benchmark for Speech Tasks in African Languages},
-  author={Put Authors Here},
-  booktitle={ACL},
-  year={2025}
-}
             </div>
-        </div>
-        <div class="footer">
-            <img src="https://africa.dlnlp.ai/sahara//img/sahara_web_sponsers.jpg" width="300px" style="opacity: 0.8;">
-            <p>&copy; 2025 Simba Benchmark Team</p>
         </div>
     </div>
     <script>
-        // --- DATA 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'
-            // Add remaining ISO mappings here as needed
         };
         let DATA = null;
@@ -397,8 +402,7 @@
             document.getElementById('content').style.display='block';
             init();
         }).catch(e=>{
-            document.getElementById('loader').innerHTML = `<span style="color:red">Error loading data. Please refresh.</span>`;
-            console.error(e);
         });
         function init() {
@@ -412,68 +416,59 @@
             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 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;
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
                 // Legend
                 legend.style.display = 'block';
-                legend.innerHTML = `<b>Languages in ${val}:</b> ` + d.languages.map(l => `<span style="margin-left:10px; color:var(--simba-navy)"><b>${getIso(l)}</b>: ${l}</span>`).join("");
                 // Table
-                html = `<table><thead><tr><th>Model</th><th>Avg WER/CER <i class="fa-solid fa-arrow-down" style="font-size:10px"></i></th>`;
                 d.languages.forEach(l => html += `<th>${getIso(l)}</th>`);
                 html += `</tr></thead><tbody>`;
                 d.data.forEach(r => {
-                    html += `<tr>
-                        <td style="font-weight:600; color:var(--simba-navy)">${r.Model}</td>
-                        <td style="background:#f1f5f9; font-weight:bold;">${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;
                 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" style="font-size:10px"></i></th>
-                    <th>CER (%) <i class="fa-solid fa-arrow-down" style="font-size:10px"></i></th>
-                </tr></thead><tbody>`;
                 rows.forEach(r => {
-                    html += `<tr>
-                        <td style="font-weight:600;">${r.Language}</td>
-                        <td>${r.Family}</td>
-                        <td>${fmt(r.WER)}</td>
-                        <td>${fmt(r.CER)}</td>
-                    </tr>`;
                 });
             }
             html += `</tbody></table>`;
             div.innerHTML = html;
         }
-        // --- RENDER TTS ---
         function renderTTS() {
             const val = document.getElementById('tts-select').value;
             const rows = DATA.tts[val];
             if(!rows) return;
@@ -485,24 +480,23 @@
             ];
             // Averages
-            let sums = {}, count = 0;
-            metrics.forEach(m => sums[m.k] = 0);
-            rows.forEach(r => { metrics.forEach(m => sums[m.k] += (r[m.k]||0)); count++; });
-            let sumHtml = metrics.map(m => `<span style="margin-right:15px">${m.l}: <b>${fmt(sums[m.k]/count)}</b></span>`).join("");
-            document.getElementById('tts-summary').innerHTML = sumHtml;
             // Table
             let html = `<table><thead><tr><th>Language</th>`;
             metrics.forEach(m => {
                 let icon = m.h ? 'up' : 'down';
-                let color = m.h ? 'green' : 'orange';
-                html += `<th>${m.l} <i class="fa-solid fa-arrow-${icon}" style="color:${color}; font-size:10px"></i></th>`;
             });
             html += `</tr></thead><tbody>`;
             rows.forEach(r => {
-                html += `<tr><td style="font-weight:600;">${r.language}</td>`;
                 metrics.forEach(m => html += `<td>${fmt(r[m.k])}</td>`);
                 html += `</tr>`;
             });
@@ -510,26 +504,20 @@
             document.getElementById('tts-table').innerHTML = html;
         }
-        // --- RENDER SLID ---
         function renderSLID() {
-            let html = `<table><thead><tr>
-                <th>Language</th>
-                <th>MMS-LID-1024 <i class="fa-solid fa-arrow-up" style="color:green; font-size:10px"></i></th>
-                <th>Simba-SLID <i class="fa-solid fa-arrow-up" style="color:green; font-size:10px"></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 style="font-weight:600;">${r.Language}</td><td>${mS}</td><td>${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'));
@@ -539,10 +527,19 @@
         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('grp-fam').style.display = m==='family'?'block':'none';
-            document.getElementById('grp-mod').style.display = m==='model'?'block':'none';
             renderASR();
         }
     </script>

 <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">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Rubik:wght@500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            /* Brand Colors from Image */
+            --bg-deep: #1e1b4b;       /* Deep Navy Background */
+            --text-yellow: #fbbf24;   /* "Mapping Africa" text */
+            --text-white: #ffffff;
+            --text-mute: #94a3b8;     /* Description text */
+            /* Button 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);
+            /* Layout Colors */
+            --card-bg: #ffffff;
+            --simba-navy: #0f172a;
+            --border-gold: #dca02a;
         }
         body {
+            background-color: var(--bg-deep);
             font-family: 'Inter', sans-serif;
             color: var(--text-main);
             margin: 0;
+            padding: 0;
+            overflow-x: hidden;
         }
+        /* --- BACKGROUND 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;
+        }
+        .wave-bar {
+            position: absolute;
+            bottom: 0;
+            width: 4px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 4px;
+            animation: bounce 2s infinite ease-in-out;
         }
+        /* --- 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 SECTION --- */
         .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;
         }
+        .conference-tag img { height: 25px; }
+        .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 --- */
+        .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); }
+        .h-btn i { font-size: 16px; }
+        .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 IMAGE (Map) --- */
+        .hero-visual {
+            flex: 1;
+            display: flex;
+            justify-content: flex-end;
+            position: relative;
         }
+        .hero-visual img {
+            max-width: 100%;
+            height: auto;
+            /* Simple fade animation */
+            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;
         }
+        /* Controls & Tables (Reusing refined styles) */
+        .controls { display: flex; gap: 15px; margin-bottom: 20px; align-items: center; flex-wrap: wrap; background: #f1f5f9; padding: 15px; border-radius: 12px; }
+        .tabs { display: flex; gap: 10px; margin-bottom: 25px; }
+        .tab-btn {
+            padding: 10px 20px; border-radius: 8px; border: none; background: transparent;
+            font-weight: 600; color: #64748b; cursor: pointer; transition: 0.2s;
         }
+        .tab-btn.active { background: var(--simba-navy); color: white; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); }
+        /* Table Styles */
+        .table-wrap { overflow-x: auto; }
+        table { width: 100%; border-collapse: collapse; font-size: 14px; }
+        th { text-align: center; padding: 15px; color: var(--simba-navy); border-bottom: 2px solid #e2e8f0; vertical-align: bottom; }
+        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; }
         th:nth-child(2), td:nth-child(2) { text-align: left; }
+        .arrow-up { color: #16a34a; } .arrow-down { color: #d97706; }
+        .val { white-space: nowrap; }
+        /* Animations */
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes bounce { 0%, 100% { height: 10px; } 50% { height: 40px; } }
+        /* Mobile */
+        @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; } /* Simplified for mobile */
+        }
     </style>
 </head>
 <body>
     <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">Paper</a>
+            <a href="https://github.com/UBC-NLP/simba">Pipeline</a>
+            <a href="https://huggingface.co/datasets/UBC-NLP/simba">Dataset</a>
+            <a href="#">Models</a>
+            <a href="#">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 driving the future of speech technology.
+            </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 Map 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" 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:600; color:#0f172a;">View Mode:</span>
+                            <button id="btn-fam" class="h-btn btn-models" style="padding:6px 15px; font-size:12px;" onclick="setASRMode('family')">By Family</button>
+                            <button id="btn-mod" class="h-btn" style="background:#cbd5e1; color:#334155; padding:6px 15px; font-size:12px;" 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>
+        // --- DATA & 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;
             document.getElementById('content').style.display='block';
             init();
         }).catch(e=>{
+            document.getElementById('loader').innerHTML = `<span style="color:red">Failed to load data.</span>`;
         });
         function init() {
             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 getIso(name) { return NAME_TO_ISO[name] || name.substring(0,3); }
+        // --- 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
                 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("");
                 // Table
+                html = `<table><thead><tr><th>Model</th><th>Avg WER/CER <i class="fa-solid fa-arrow-down arrow-down"></i></th>`;
                 d.languages.forEach(l => html += `<th>${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>`;
                 });
             }
             html += `</tbody></table>`;
             div.innerHTML = html;
         }
+        // --- 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;
             ];
             // Averages
+            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;
             // Table
             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>`;
                 metrics.forEach(m => html += `<td>${fmt(r[m.k])}</td>`);
                 html += `</tr>`;
             });
             document.getElementById('tts-table').innerHTML = html;
         }
+        // --- 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>`;
             });
             html += `</tbody></table>`;
             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'));
         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';
+            // Update button styles
+            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();
         }
     </script>