Update public/index.html

public/index.html

@@ -67,23 +67,10 @@
         @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;
-        }
+        .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
 
         /* --- MAIN BOARD --- */
-        .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 */
-        }
+        .main-card { background: white; border-radius: 24px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; margin-bottom: 60px; }
         
         .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; }
@@ -109,15 +96,7 @@
         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 { 
-            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; }
@@ -226,13 +205,13 @@
                         <select id="lang-select" onchange="renderLanguageView()"></select>
                     </div>
                     
-                    <h4>ASR Results <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓)</span></h4>
+                    <h4>Automatic Speech Recognition (ASR) Results <span class="rank-info" style="font-weight:normal;">(Ranked by WER ↓, then CER ↓)</span></h4>
                     <div id="lang-asr-table" class="table-wrap"></div>
 
-                    <h4>TTS Results</h4>
+                    <h4>Text-to-Speech (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>
+                    <h4>Spoken Language Identification (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>
@@ -319,16 +298,25 @@
                     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;
+                modelStats.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer)); // Sorting by WER then CER
 
                 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 rank = 1;
                     if (i > 0 && Math.abs(m.wer - modelStats[i-1].wer) > 0.001) rank = i + 1;
+                    else if (i > 0) rank = 1; // Actually logic needs to track currentRank variable, but simplifying for medals
                     
+                    // Simple medal logic: if tied with prev, use prev medal.
+                    // Accurate Ranking:
                     let icon = '';
-                    if(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+                    // Re-evaluate rank based on index isn't enough for ties.
+                    // Let's just use top 3 logic based on sorted order for simplicity or strict rank variable.
+                    // Strict Rank Variable:
+                    if(i===0) m.rank=1;
+                    else if(Math.abs(m.wer - modelStats[i-1].wer) < 0.001) m.rank = modelStats[i-1].rank;
+                    else m.rank = i+1;
+
+                    if(m.rank === 1) icon = '🥇 '; else if(m.rank === 2) icon = '🥈 '; else if(m.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>`;
                 });
@@ -343,16 +331,19 @@
                 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) => {
-                    if (idx > 0 && Math.abs(r.Avg_WER - d.data[idx-1].Avg_WER) > 0.001) rank = idx + 1;
+                    // Rank Logic
+                    if(idx===0) r.rank=1;
+                    else if(Math.abs(r.Avg_WER - d.data[idx-1].Avg_WER) < 0.001) r.rank = d.data[idx-1].rank;
+                    else r.rank = idx+1;
+
                     let icon = '';
-                    if(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+                    if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.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 => {
@@ -422,43 +413,58 @@
         function renderLanguageView() {
             const lang = document.getElementById('lang-select').value;
             
-            // 1. ASR (Tie-Aware)
+            // 1. ASR (Tie-Aware, WER then CER)
             let asrRows = [];
             Object.keys(DATA.asr.by_model).forEach(modName => {
                 const row = DATA.asr.by_model[modName].find(r => r.Language === lang);
                 if(row) asrRows.push({model: modName, wer: row.WER, cer: row.CER});
             });
-            asrRows.sort((a,b) => a.wer - b.wer);
+            
+            // Sort: Primary WER ASC, Secondary CER ASC
+            asrRows.sort((a,b) => (a.wer - b.wer) || (a.cer - b.cer));
             
             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 {
-                let rank = 1;
                 asrRows.forEach((r, i) => {
-                    if (i > 0 && Math.abs(r.wer - asrRows[i-1].wer) > 0.001) rank = i + 1;
+                    // Calculate Rank
+                    if(i===0) r.rank=1;
+                    else if(Math.abs(r.wer - asrRows[i-1].wer) < 0.001) r.rank = asrRows[i-1].rank; // Tie
+                    else r.rank = i+1;
+
                     let icon = '';
-                    if(rank === 1) icon = '🥇 '; else if(rank === 2) icon = '🥈 '; else if(rank === 3) icon = '🥉 ';
+                    if(r.rank === 1) icon = '🥇 '; else if(r.rank === 2) icon = '🥈 '; else if(r.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;
 
-            // 2. TTS
-            let h2 = `<table><thead><tr><th>Model</th><th>WER</th><th>MCD</th><th>PESQ</th></tr></thead><tbody>`;
+            // 2. TTS (All Metrics)
+            let h2 = `<table><thead><tr><th>Model</th>
+                <th>WER(↓)</th><th>MCD(↓)</th><th>LogF0(↓)</th><th>SpTok(↓)</th>
+                <th>PESQ(↑)</th><th>UTMOS(↑)</th><th>SpBLEU(↑)</th><th>SpBERT(↑)</th>
+                </tr></thead><tbody>`;
+                
             let ttsFound = false;
             Object.keys(DATA.tts).forEach(mod => {
                 const row = DATA.tts[mod].find(r => r.language === lang);
                 if(row) {
                     ttsFound = true;
-                    h2 += `<tr><td style="font-weight:600;">${mod}</td><td>${fmt(row.wer)}</td><td>${fmt(row.mcd)}</td><td>${fmt(row.pesq)}</td></tr>`;
+                    h2 += `<tr>
+                        <td style="font-weight:600;">${mod}</td>
+                        <td>${fmt(row.wer)}</td><td>${fmt(row.mcd)}</td>
+                        <td>${fmt(row.logf0rmse)}</td><td>${fmt(row.speech_token_distance)}</td>
+                        <td>${fmt(row.pesq)}</td><td>${fmt(row.utmos)}</td>
+                        <td>${fmt(row.speechbleu)}</td><td>${fmt(row.speechbert_score)}</td>
+                    </tr>`;
                 }
             });
-            if(!ttsFound) h2 += `<tr><td colspan="4">No TTS data.</td></tr>`;
+            if(!ttsFound) h2 += `<tr><td colspan="9">No TTS data.</td></tr>`;
             h2 += `</tbody></table>`;
             document.getElementById('lang-tts-table').innerHTML = h2;
 
-            // 3. SLID
+            // 3. SLID (Dynamic Models)
             let h3 = `<table><thead><tr><th>Model</th><th>F1-Score</th></tr></thead><tbody>`;
             // Fuzzy match logic
             const slidRow = DATA.slid.find(r => r.Language === lang) || 
@@ -466,13 +472,19 @@
                             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;
+                // Extract models dynamically (exclude Language key)
+                const models = Object.keys(slidRow).filter(k => k !== 'Language' && k !== 'ISO');
+                const scores = models.map(m => ({n: m, v: slidRow[m]})).sort((a,b) => b.v - a.v); // Descending
+                
                 scores.forEach((sc, i) => {
-                    if (i > 0 && Math.abs(sc.v - scores[i-1].v) > 0.001) rank = i + 1;
-                    let icon = (rank==1) ? '🥇 ' : '';
+                    // Rank logic for SLID
+                    if(i===0) sc.rank=1;
+                    else if(Math.abs(sc.v - scores[i-1].v) < 0.001) sc.rank = scores[i-1].rank;
+                    else sc.rank = i+1;
+
+                    let icon = '';
+                    if(sc.rank === 1) icon = '🥇 '; else if(sc.rank === 2) icon = '🥈 '; else if(sc.rank === 3) icon = '🥉 ';
+                    
                     h3 += `<tr><td style="font-weight:600;">${icon}${sc.n}</td><td>${fmt(sc.v)}</td></tr>`;
                 });
             } else {