Update public/index.html

public/index.html

@@ -16,17 +16,14 @@
             --bg-deep: #1e1b4b;       /* Deep Navy */
             --text-yellow: #fbbf24;   /* Brand Yellow */
             --text-white: #ffffff;
-            --text-mute: #94a3b8;
-            
+            --simba-navy: #0f172a;
+            --border-gold: #dca02a;
             /* Gradients */
             --grad-blue: linear-gradient(90deg, #3b82f6, #0ea5e9);
             --grad-red: linear-gradient(135deg, #ef4444, #f43f5e);
             --grad-purple: linear-gradient(135deg, #6366f1, #8b5cf6);
             --grad-orange: linear-gradient(135deg, #f97316, #fb923c);
             --grad-green: linear-gradient(135deg, #22c55e, #10b981);
-            
-            --simba-navy: #0f172a;
-            --border-gold: #dca02a;
         }
 
         body {
@@ -42,18 +39,11 @@
         /* --- NAVBAR --- */
         .navbar {
             padding: 20px 40px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: transparent;
-            z-index: 100;
-            position: relative;
+            display: flex; justify-content: space-between; align-items: center;
+            position: relative; z-index: 100;
         }
         .nav-logo {
-            color: white;
-            font-family: 'Rubik', sans-serif;
-            font-weight: 700;
-            font-size: 22px;
+            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; }
@@ -65,48 +55,17 @@
         .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);
+            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);
+            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: 40px auto 80px;
-            padding: 0 40px;
-            position: relative;
-        }
-        
+        .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 { 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; }
@@ -123,66 +82,27 @@
         .bg-blue { background: var(--grad-blue); box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); }
         .bg-green { background: var(--grad-green); box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3); }
 
-        /* --- CSS AUDIO WAVE VISUALIZER --- */
-        .hero-visual {
-            flex: 1;
-            display: flex;
-            justify-content: flex-end;
-            position: relative;
-            height: 400px;
-            align-items: center;
-        }
+        .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; height: 400px; align-items: center; }
         .hero-visual img { max-width: 100%; height: auto; z-index: 2; position: relative; }
 
+        /* Audio Wave Animation */
         .audio-wave {
-            position: absolute;
-            bottom: 50px;
-            left: 0;
-            right: 0;
-            height: 150px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            z-index: 0;
-            opacity: 0.3;
+            position: absolute; bottom: 50px; left: 0; right: 0; height: 150px;
+            display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 0; opacity: 0.3;
             mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
         }
-        .bar {
-            width: 6px;
-            background: #ffffff;
-            border-radius: 99px;
-            animation: bounce 1.2s ease-in-out infinite;
-        }
-        /* Randomize animation delays for wave effect */
+        .bar { width: 6px; background: #ffffff; border-radius: 99px; animation: bounce 1.2s ease-in-out infinite; }
         .bar:nth-child(odd) { animation-duration: 1.5s; }
         .bar:nth-child(2n) { animation-duration: 1.1s; }
-        .bar:nth-child(3n) { animation-duration: 1.3s; }
-        .bar:nth-child(4n) { animation-duration: 0.9s; }
+        @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
 
-        @keyframes bounce {
-            0%, 100% { height: 20px; }
-            50% { height: 120px; }
-        }
-
-        /* --- MAIN CONTENT AREA --- */
+        /* --- MAIN BOARD --- */
         .main-card {
-            background: white;
-            border-radius: 24px;
-            margin: 0 40px;
-            padding: 40px;
-            color: #0f172a;
-            min-height: 600px;
-            position: relative;
-            z-index: 10;
+            background: white; border-radius: 24px; margin: 0 40px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10;
         }
 
-        /* Tabs */
         .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 { 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; }
 
@@ -191,8 +111,10 @@
 
         /* 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; cursor:pointer;}
+        select { padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; min-width: 250px; cursor:pointer; }
         
+        .rank-info { font-size: 13px; color: #64748b; margin-top: 5px; font-style: italic; }
+
         /* Table */
         .table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
         table { width: 100%; border-collapse: collapse; font-size: 14px; }
@@ -200,48 +122,37 @@
         td { padding: 14px; border-bottom: 1px solid #e2e8f0; text-align: center; color: #334155; }
         tr:hover td { background: #f8fafc; }
         
-        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; }
+        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; min-width: 200px; }
         thead th:first-child { background: #f1f5f9; z-index: 3; }
         th:nth-child(2), td:nth-child(2) { text-align: left; }
 
-        /* --- SEPARATE CITATION SECTION --- */
+        /* Citations */
         .citation-section {
-            max-width: 1000px;
-            margin: 60px auto;
+            width: 100%; /* Full Width */
+            margin: 60px 0;
             background: #0f172a;
             border: 1px solid #334155;
             border-radius: 16px;
             padding: 40px;
+            box-sizing: border-box; /* Ensure padding doesn't overflow width */
             box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+            position: relative;
         }
-        .citation-section h3 {
-            color: var(--text-yellow);
-            font-family: 'Rubik', sans-serif;
-            font-size: 24px;
-            margin-top: 0;
-        }
+        .citation-section h3 { color: var(--text-yellow); font-family: 'Rubik', sans-serif; font-size: 24px; margin-top: 0; }
         .citation-box {
-            background: #1e293b;
-            color: #cbd5e1;
-            padding: 20px;
-            border-radius: 12px;
-            font-family: monospace;
-            white-space: pre-wrap;
-            margin-top: 20px;
-            overflow-x: auto;
-            border: 1px solid #334155;
+            background: #1e293b; color: #cbd5e1; padding: 20px; border-radius: 12px;
+            font-family: monospace; white-space: pre-wrap; margin-top: 20px;
+            overflow-x: auto; border: 1px solid #334155; font-size: 13px; line-height: 1.5;
         }
+        .copy-btn {
+            position: absolute; top: 40px; right: 40px;
+            background: var(--text-yellow); border: none; padding: 8px 16px;
+            border-radius: 6px; font-weight: bold; cursor: pointer; color: #0f172a;
+        }
+        .copy-btn:active { transform: scale(0.95); }
 
         .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)} }
-        
-        /* Mobile */
-        @media (max-width: 900px) {
-            .hero { flex-direction: column; text-align: center; padding: 20px; }
-            .hero-visual { display: none; } /* Hide map on small screens */
-            .nav-links { display: none; }
-        }
     </style>
 </head>
 <body>
@@ -249,17 +160,14 @@
     <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>
+            <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="#board" 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>
@@ -267,56 +175,34 @@
     </nav>
 
     <div class="hero">
+        <div class="wave-bg"></div>
         <div class="hero-content">
-            <div class="conf-badge">
-                <i class="fa-solid fa-location-dot"></i> EMNLP 2025 · Suzhou, China
-            </div>
-            
+            <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>
-
+            <p>SimbaBench bridges the digital divide with a unified suite for African AI: the largest open-source speech benchmark covering 61 languages.</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>
+                <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">
             <div class="audio-wave">
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
-                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
             </div>
             <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="loader" style="text-align:center; padding:60px; color:#64748b;">
+            <i class="fa-solid fa-circle-notch fa-spin fa-3x"></i><br><br>Loading Leaderboard Data...
+        </div>
 
         <div id="app-content" style="display:none;">
             <div class="tabs">
@@ -333,17 +219,17 @@
                     
                     <div style="flex-grow:1; text-align:right;">
                         <span style="font-weight:600; margin-right:10px;">Select:</span>
-                        <div id="grp-fam" style="display:inline-block;">
-                            <select id="asr-select-fam" onchange="renderASR()"></select>
-                        </div>
-                        <div id="grp-mod" style="display:none;">
-                            <select id="asr-select-mod" onchange="renderASR()"></select>
-                        </div>
+                        <div id="grp-fam" style="display:inline-block;"><select id="asr-select-fam" onchange="renderASR()"></select></div>
+                        <div id="grp-mod" style="display:none;"><select id="asr-select-mod" onchange="renderASR()"></select></div>
                     </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 style="display:flex; justify-content:space-between; align-items:end; margin-bottom:10px;">
+                    <h3 id="asr-title" style="color:#d97706; margin:0;"></h3>
+                    <div id="asr-rank-info" class="rank-info" style="display:none;">Ranking: WER (↓) then CER (↓)</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>
 
@@ -358,61 +244,63 @@
             </div>
 
             <div id="slid" class="view">
-                <h3 style="color:#d97706;">Spoken Language Identification Leaderboard</h3>
+                <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:15px;">
+                    <h3 style="color:#d97706; margin:0;">Spoken Language Identification</h3>
+                    <div class="rank-info">Ranking: F1-Macro (↑)</div>
+                </div>
                 <div id="slid-table" class="table-wrap"></div>
             </div>
         </div>
-    </div>
 
-    <div class="citation-section" id="citation">
-        <h3>Citation</h3>
-        <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our <a href="https://africa.dlnlp.ai/sahara/" style="color:#fbbf24; 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 class="citation-section" id="citation">
+            <h3>Citation</h3>
+            <button class="copy-btn" onclick="copyCitation()"><i class="fa-regular fa-copy"></i> Copy</button>
+            <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our <a href="https://aclanthology.org/2025.emnlp-main.559/" style="color:#fbbf24; font-weight:bold;">EMNLP 2025 paper</a>.</p>
+            <div class="citation-box" id="bibtex">@inproceedings{elmadany-etal-2025-voice,
+    title = "Voice of a Continent: Mapping {A}frica{'}s Speech Technology Frontier",
+    author = "Elmadany, AbdelRahim A.  and Kwon, Sang Yun  and Toyin, Hawau Olamide  and Alcoba Inciarte, Alcides  and Aldarmaki, Hanan  and Abdul-Mageed, Muhammad",
+    editor = "Christodoulopoulos, Christos  and Chakraborty, Tanmoy  and Rose, Carolyn  and Peng, Violet",
+    booktitle = "Proceedings of the 2025 Conference on Empirical Methods in Natural Language Processing",
+    month = nov,
+    year = "2025",
+    address = "Suzhou, China",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/2025.emnlp-main.559/",
+    doi = "10.18653/v1/2025.emnlp-main.559",
+    pages = "11039--11061",
+    ISBN = "979-8-89176-332-6",
 }</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.
+        <br>&copy; 2025 Simba Benchmark.
     </div>
 
     <script>
         // --- LOGIC ---
-        // Basic mapping for common ISO codes if missing from data
         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'
+            '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', 'Lingala':'ln', 'Oromo':'om'
         };
 
         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('app-content').style.display='block';
             init();
-        }).catch(e=>{
-            document.getElementById('loader').innerHTML = `<span style="color:red">Failed to load data.</span>`;
-        });
+        }).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();
+            setTab('asr'); renderASR(); renderTTS(); renderSLID();
         }
 
         function populate(id, list) {
@@ -420,131 +308,145 @@
             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); }
-        // Fallback to name-based ISO if data property missing
-        function getIso(name, dataIso) { return dataIso || NAME_TO_ISO[name] || name.substring(0,3).toLowerCase(); }
+        function getIso(name, dataIso) { 
+            let iso = dataIso || NAME_TO_ISO[name] || name.substring(0,3).toLowerCase();
+            return `${name} (${iso})`;
+        }
 
-        // --- ASR ---
+        // --- RENDER ASR ---
         function renderASR() {
             const div = document.getElementById('asr-table');
             const legend = document.getElementById('asr-legend');
+            const rankInfo = document.getElementById('asr-rank-info');
             let html='';
 
             if(asrMode==='family'){
                 const val = document.getElementById('asr-select-fam').value;
                 document.getElementById('asr-title').innerText = `Results for Family: ${val}`;
+                rankInfo.style.display = 'block';
                 
                 const d = DATA.asr.by_family[val];
                 if(!d) return;
 
-                // Legend
-                legend.style.display = 'block';
-                legend.innerHTML = `<b>Codes:</b> ` + d.languages.map(l => {
-                    // l is object {name: 'Amharic', iso: 'amh'} from server.js
-                    return `<span style="margin-right:12px"><b>${l.iso}</b>=${l.name}</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>${l.iso}</th>`);
+                // Sort By WER ascending
+                d.data.sort((a,b) => a.Avg_WER - b.Avg_WER);
+
+                html = `<table><thead><tr><th>Model</th><th>Avg WER/CER <i class="fa-solid fa-arrow-down" style="color:#d97706; font-size:10px"></i></th>`;
+                d.languages.forEach(l => html += `<th>${getIso(l.name, 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.data.forEach((r, idx) => {
+                    // Ranking Icons
+                    let rankIcon = '';
+                    if(idx === 0) rankIcon = '🥇 ';
+                    else if(idx === 1) rankIcon = '🥈 ';
+                    else if(idx === 2) rankIcon = '🥉 ';
+
+                    html += `<tr><td>${rankIcon}${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>`;
                 });
+                // Legend
+                legend.style.display='none'; // Hiding legend as we show (iso) in header now
             } else {
                 const val = document.getElementById('asr-select-mod').value;
                 document.getElementById('asr-title').innerText = `Results for Model: ${val}`;
-                legend.style.display = 'none';
+                legend.style.display='none'; rankInfo.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>`;
+                html = `<table><thead><tr><th>Language (iso)</th><th>Family</th><th>WER (%) <i class="fa-solid fa-arrow-down" style="color:#d97706; font-size:10px"></i></th><th>CER (%) <i class="fa-solid fa-arrow-down" style="color:#d97706; font-size:10px"></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 += `<tr><td>${getIso(r.Language, r.ISO)}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
                 });
             }
             div.innerHTML = html;
         }
 
-        // --- TTS ---
+        // --- RENDER TTS ---
         function renderTTS() {
             const val = document.getElementById('tts-select').value;
-            document.getElementById('tts-title').innerText = `Results for Model: ${val}`;
-            
+            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:'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}
+                {k:'wer', l:'WER(↓)', h:false}, {k:'mcd', l:'MCD(↓)', h:false}, 
+                {k:'logf0rmse', l:'LogF0RMSE(↓)', h:false}, {k:'speech_token_distance', l:'SpeechTokenDistance(↓)', h:false},
+                {k:'pesq', l:'PESQ(↑)', h:true}, {k:'utmos', l:'UTMOS(↑)', h:true},
+                {k:'speechbleu', l:'SpeechBLEU(↑)', h:true}, {k:'speechbert_score', l:'SpeechBERTScore(↑)', 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>`;
-            });
+            document.getElementById('tts-summary').innerHTML = "<b>Averages: </b>" + 
+                metrics.map(m=> `${m.l.replace('(↓)','').replace('(↑)','')}: ${fmt(sums[m.k]/c)}`).join(" | ");
+
+            let html = `<table><thead><tr><th>Language (iso)</th>`;
+            metrics.forEach(m => html += `<th>${m.l}</th>`);
             html += `</tr></thead><tbody>`;
             rows.forEach(r => {
-                html += `<tr><td>${r.language}</td>`;
+                html += `<tr><td>${getIso(r.language, r.iso)}</td>`;
                 metrics.forEach(m => html += `<td>${fmt(r[m.k])}</td>`);
                 html += `</tr>`;
             });
             document.getElementById('tts-table').innerHTML = html;
         }
 
-        // --- SLID ---
+        // --- 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>`;
+            // Sort by F1-macro (assuming Simba is the primary metric to sort by, or generally by Best Score)
+            // Here we sort alphabetically by language as it's a comparison view
+            DATA.slid.sort((a,b) => a.Language.localeCompare(b.Language));
+
+            let html = `<table><thead><tr><th>Language (iso)</th><th>MMS-LID-1024 (↑)</th><th>Simba-SLID (↑)</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>`;
+                // Highlight winner
+                if(m > s) mS = `<b>${mS} 🥇</b>`; 
+                else if(s > m) sS = `<b>${sS} 🥇</b>`;
+                
+                html += `<tr><td>${getIso(r.Language)}</td><td>${mS}</td><td>${sS}</td></tr>`;
             });
             document.getElementById('slid-table').innerHTML = html;
         }
 
-        // --- UI INTERACTION ---
+        // --- UI ---
         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(id).classList.add('active'); 
             document.getElementById(`tab-btn-${id}`).classList.add('active');
         };
 
         window.setASRMode = (m) => {
             asrMode = m;
+            const b1 = document.getElementById('btn-fam'), b2 = document.getElementById('btn-mod');
             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 = "action-btn bg-blue"; b1.style.color="white"; b1.style.background="";
-                b2.className = "action-btn"; b2.style.background="#e2e8f0"; b2.style.color="#334155";
+                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";
             } 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";
+                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";
             }
             renderASR();
         }
+
+        window.copyCitation = () => {
+            const text = document.getElementById('bibtex').innerText;
+            navigator.clipboard.writeText(text).then(() => {
+                const btn = document.querySelector('.copy-btn');
+                btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
+                setTimeout(() => btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy', 2000);
+            });
+        }
     </script>
 </body>
 </html>