Update public/index.html

public/index.html

@@ -66,8 +66,24 @@
         .bar:nth-child(odd) { animation-duration: 1.5s; } .bar:nth-child(2n) { animation-duration: 1.1s; }
         @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
 
+        /* --- WIDTH CONTROLLER --- */
+        .content-container {
+            width: 80%; /* Fixed 80% width for both cards */
+            max-width: 1600px; /* Optional cap for very large screens */
+            margin: 0 auto;
+        }
+
         /* --- MAIN BOARD --- */
-        .main-card { background: white; border-radius: 24px; margin: 0 40px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; }
+        .main-card { 
+            background: white; 
+            border-radius: 24px; 
+            padding: 40px; 
+            color: #0f172a; 
+            min-height: 600px; 
+            position: relative; 
+            z-index: 10;
+            margin-bottom: 60px; /* Space between card and citation */
+        }
         
         .tabs { display: flex; gap: 10px; border-bottom: 2px solid #e2e8f0; margin-bottom: 30px; padding-bottom: 10px; overflow-x: auto; }
         .tab-btn { background: none; border: none; font-size: 15px; font-weight: 600; color: #64748b; padding: 10px 20px; cursor: pointer; transition: 0.3s; border-radius: 8px; white-space: nowrap; }
@@ -93,7 +109,15 @@
         h4 { color: var(--text-yellow); font-family: 'Rubik', sans-serif; font-size: 18px; margin: 0 0 15px 0; border-bottom: 1px solid #eee; padding-bottom: 10px; }
 
         /* Citations */
-        .citation-section { width: 100%; margin: 60px 0 0 0; background: #0f172a; border: 1px solid #334155; border-radius: 16px; padding: 40px; box-sizing: border-box; box-shadow: 0 20px 40px rgba(0,0,0,0.3); position: relative; }
+        .citation-section { 
+            background: #0f172a; 
+            border: 1px solid #334155; 
+            border-radius: 16px; 
+            padding: 40px; 
+            box-sizing: border-box; 
+            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-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; 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; }
@@ -144,76 +168,76 @@
         </div>
     </div>
 
-    <div class="main-card" id="board">
-        <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">
-                <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>
-                <button class="tab-btn" id="tab-btn-lang" onclick="setTab('lang')">Language Analysis</button>
+    <div class="content-container">
+        <div class="main-card" id="board">
+            <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="asr" class="view active">
-                <div class="controls">
-                    <span style="font-weight:700;">View Mode:</span>
-                    <button id="btn-over" class="action-btn bg-blue" style="padding:8px 16px; font-size:12px; box-shadow:none;" onclick="setASRMode('overview')">Overview</button>
-                    <button id="btn-fam" class="action-btn" style="padding:8px 16px; font-size:12px; background:#e2e8f0; color:#334155;" 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 id="app-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>
+                    <button class="tab-btn" id="tab-btn-lang" onclick="setTab('lang')">Language Analysis</button>
+                </div>
+
+                <div id="asr" class="view active">
+                    <div class="controls">
+                        <span style="font-weight:700;">View Mode:</span>
+                        <button id="btn-over" class="action-btn bg-blue" style="padding:8px 16px; font-size:12px; box-shadow:none;" onclick="setASRMode('overview')">Overview</button>
+                        <button id="btn-fam" class="action-btn" style="padding:8px 16px; font-size:12px; background:#e2e8f0; color:#334155;" 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;">
+                            <div id="grp-fam" style="display:none;"><label>Select Family: </label><select id="asr-select-fam" onchange="renderASR()"></select></div>
+                            <div id="grp-mod" style="display:none;"><label>Select Model: </label><select id="asr-select-mod" onchange="renderASR()"></select></div>
+                        </div>
+                    </div>
                     
-                    <div style="flex-grow:1; text-align:right;">
-                        <div id="grp-fam" style="display:none;"><label>Select Family: </label><select id="asr-select-fam" onchange="renderASR()"></select></div>
-                        <div id="grp-mod" style="display:none;"><label>Select Model: </label><select id="asr-select-mod" onchange="renderASR()"></select></div>
+                    <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:10px;">
+                        <h3 id="asr-title" style="color:#d97706; margin:0;">Results Overview</h3>
+                        <div id="asr-rank-info" class="rank-info">Ranking: WER (↓) then CER (↓)</div>
                     </div>
+                    <div id="asr-table" class="table-wrap"></div>
                 </div>
-                
-                <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:10px;">
-                    <h3 id="asr-title" style="color:#d97706; margin:0;">Results Overview</h3>
-                    <div id="asr-rank-info" class="rank-info">Ranking: WER (↓) then CER (↓)</div>
-                </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 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>
-                <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">
-                <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 id="slid" class="view">
+                    <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 id="slid-table" class="table-wrap"></div>
-            </div>
 
-            <div id="lang" class="view">
-                <div class="controls">
-                    <span style="font-weight:600;">Select Language:</span>
-                    <select id="lang-select" onchange="renderLanguageView()"></select>
-                </div>
-                
-                <h4>ASR Results <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓)</span></h4>
-                <div id="lang-asr-table" class="table-wrap"></div>
+                <div id="lang" class="view">
+                    <div class="controls">
+                        <span style="font-weight:600;">Select Language:</span>
+                        <select id="lang-select" onchange="renderLanguageView()"></select>
+                    </div>
+                    
+                    <h4>ASR Results <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓)</span></h4>
+                    <div id="lang-asr-table" class="table-wrap"></div>
 
-                <h4>TTS Results</h4>
-                <div id="lang-tts-table" class="table-wrap"></div>
+                    <h4>TTS Results</h4>
+                    <div id="lang-tts-table" class="table-wrap"></div>
 
-                <h4>SLID Results <span class="rank-info" style="font-weight:normal;">(Ranked by Score ↑)</span></h4>
-                <div id="lang-slid-table" class="table-wrap"></div>
+                    <h4>SLID Results <span class="rank-info" style="font-weight:normal;">(Ranked by Score ↑)</span></h4>
+                    <div id="lang-slid-table" class="table-wrap"></div>
+                </div>
             </div>
         </div>
-    </div>
 
-    <div class="lb-container">
         <div class="citation-section" id="citation">
             <h3>Citation</h3>
             <button class="copy-btn" onclick="copyCitation()"><i class="fa-regular fa-copy"></i> Copy</button>
@@ -258,17 +282,9 @@
             populate('asr-select-mod', DATA.metadata.models);
             populate('tts-select', DATA.metadata.tts_models);
             
-            // --- POPULATE LANGUAGES FROM ACTUAL DATA ---
             const allLangs = new Set();
-            // Scan ASR by model data to find every single language present
-            Object.values(DATA.asr.by_model).forEach(rows => {
-                rows.forEach(r => allLangs.add(r.Language));
-            });
-            // Scan TTS as well
-            Object.values(DATA.tts).forEach(rows => {
-                rows.forEach(r => allLangs.add(r.language));
-            });
-            
+            Object.values(DATA.asr.by_model).forEach(rows => rows.forEach(r => allLangs.add(r.Language)));
+            Object.values(DATA.tts).forEach(rows => rows.forEach(r => allLangs.add(r.language)));
             populate('lang-select', Array.from(allLangs).sort());
 
             renderASR(); renderTTS(); renderSLID();
@@ -303,11 +319,17 @@
                     if(n>0) modelStats.push({ name: modName, wer: sW/n, cer: sC/n });
                 });
                 
+                // Tie-Aware Ranking
                 modelStats.sort((a,b) => a.wer - b.wer);
+                let rank=1;
 
                 html = `<table><thead><tr><th>Model</th><th>Simba ASR Score (WER/CER) <i class="fa-solid fa-arrow-down arrow-down"></i></th></tr></thead><tbody>`;
                 modelStats.forEach((m, i) => {
-                    let icon = (i<3) ? ['🥇','🥈','🥉'][i] + ' ' : '';
+                    if (i > 0 && Math.abs(m.wer - modelStats[i-1].wer) > 0.001) rank = i + 1;
+                    
+                    let icon = '';
+                    if(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+                    
                     html += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${m.name}</td><td><b>${fmt(m.wer)} / ${fmt(m.cer)}</b></td></tr>`;
                 });
 
@@ -321,13 +343,17 @@
                 if(!d) return;
                 
                 d.data.sort((a,b) => a.Avg_WER - b.Avg_WER);
+                let rank=1;
 
                 html = `<table><thead><tr><th>Model</th><th>Simba ASR Family Score <i class="fa-solid fa-arrow-down arrow-down"></i></th>`;
                 d.languages.forEach(l => html += `<th>${getIso(l.name, l.iso)}</th>`);
                 html += `</tr></thead><tbody>`;
 
                 d.data.forEach((r, idx) => {
-                    let icon = (idx<3) ? ['🥇','🥈','🥉'][idx] + ' ' : '';
+                    if (idx > 0 && Math.abs(r.Avg_WER - d.data[idx-1].Avg_WER) > 0.001) rank = idx + 1;
+                    let icon = '';
+                    if(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+
                     html += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${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}`];
@@ -342,7 +368,7 @@
                 document.getElementById('grp-mod').style.display='inline-block';
                 
                 const rows = DATA.asr.by_model[val];
-                html = `<table><thead><tr><th>Language (iso)</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 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>${getIso(r.Language, r.ISO)}</td><td>${r.Family}</td><td>${fmt(r.WER)}</td><td>${fmt(r.CER)}</td></tr>`;
                 });
@@ -396,7 +422,7 @@
         function renderLanguageView() {
             const lang = document.getElementById('lang-select').value;
             
-            // 1. ASR
+            // 1. ASR (Tie-Aware)
             let asrRows = [];
             Object.keys(DATA.asr.by_model).forEach(modName => {
                 const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
@@ -404,12 +430,17 @@
             });
             asrRows.sort((a,b) => a.wer - b.wer);
             
-            let h1 = `<table><thead><tr><th>Model</th><th>WER (%)</th><th>CER (%)</th></tr></thead><tbody>`;
+            let h1 = `<table><thead><tr><th>Model</th><th>WER</th><th>CER</th></tr></thead><tbody>`;
             if(asrRows.length === 0) h1 += `<tr><td colspan="3">No ASR data for this language.</td></tr>`;
-            else asrRows.forEach((r, i) => {
-                let icon = (i<3) ? ['🥇','🥈','🥉'][i] + ' ' : '';
-                h1 += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${r.model}</td><td>${fmt(r.wer)}</td><td>${fmt(r.cer)}</td></tr>`;
-            });
+            else {
+                let rank = 1;
+                asrRows.forEach((r, i) => {
+                    if (i > 0 && Math.abs(r.wer - asrRows[i-1].wer) > 0.001) rank = i + 1;
+                    let icon = '';
+                    if(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+                    h1 += `<tr><td style="font-weight:600; color:var(--simba-navy)">${icon}${r.model}</td><td>${fmt(r.wer)}</td><td>${fmt(r.cer)}</td></tr>`;
+                });
+            }
             h1 += `</tbody></table>`;
             document.getElementById('lang-asr-table').innerHTML = h1;
 
@@ -429,16 +460,19 @@
 
             // 3. SLID
             let h3 = `<table><thead><tr><th>Model</th><th>F1-Score</th></tr></thead><tbody>`;
-            // Fuzzy match language name in SLID data (handle "Edo" vs "Edo (bin)")
+            // Fuzzy match logic
             const slidRow = DATA.slid.find(r => r.Language === lang) || 
                             DATA.slid.find(r => r.Language.startsWith(lang + " (")) ||
                             DATA.slid.find(r => r.Language.includes(lang));
             
             if(slidRow) {
                 let m = slidRow['MMS-LID-1024'], s = slidRow['Simba-SLID'];
+                // Sort Descending
                 let scores = [{n:'Simba-SLID', v:s}, {n:'MMS-LID-1024', v:m}].sort((a,b)=>b.v - a.v);
+                let rank = 1;
                 scores.forEach((sc, i) => {
-                    let icon = (i==0) ? '🥇 ' : '';
+                    if (i > 0 && Math.abs(sc.v - scores[i-1].v) > 0.001) rank = i + 1;
+                    let icon = (rank==1) ? '🥇 ' : '';
                     h3 += `<tr><td style="font-weight:600;">${icon}${sc.n}</td><td>${fmt(sc.v)}</td></tr>`;
                 });
             } else {