Update benchmark leaderboard

index.html

@@ -130,6 +130,27 @@
       padding: 5px 10px; margin-bottom: 14px; cursor: pointer; width: 100%;
     }
     .model-select:focus { outline: none; border-color: #38bdf8; }
+    .dist-wrap {
+      overflow-x: auto; border-radius: 10px;
+      border: 1px solid #1e2a3a; margin-bottom: 16px;
+    }
+    .dist-wrap table { border-collapse: collapse; width: auto; min-width: 100%; font-size: 12px; }
+    .dist-wrap thead tr { background: #111827; border-bottom: 2px solid #1e2a3a; }
+    .dist-wrap th {
+      padding: 10px 10px; white-space: nowrap; font-size: 10px;
+      text-transform: uppercase; letter-spacing: 0.07em; color: #475569; font-weight: 700;
+    }
+    .dist-wrap th.lang-h  { text-align: left; width: 140px; padding-left: 14px; color: #64748b; }
+    .dist-wrap th.score-h { width: 70px; text-align: center; }
+    .dist-wrap th.total-h { width: 80px; text-align: center; color: #94a3b8; }
+    .dist-wrap td { padding: 8px 10px; border-bottom: 1px solid #0f1520; white-space: nowrap; }
+    .dist-wrap td.lang-d  { padding-left: 14px; color: #cbd5e1; font-weight: 600; font-size: 12px; }
+    .dist-wrap td.count-d { text-align: center; font-size: 12px; }
+    .dist-wrap td.total-d { text-align: center; font-weight: 700; font-size: 12px; color: #94a3b8; }
+    .dist-bar {
+      display: inline-block; height: 6px; border-radius: 3px;
+      background: #2563eb; vertical-align: middle; margin-left: 4px; opacity: 0.7;
+    }
     .footer { margin-top: 20px; font-size: 11px; color: #2d3748; text-align: right; }
     ::-webkit-scrollbar { width: 6px; height: 6px; background: #0d1117; }
     ::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 3px; }
@@ -180,6 +201,15 @@
     <canvas id="globalChart"></canvas>
   </div>
 
+  <p class="section-title" style="margin-top:52px">Dataset Distribution</p>
+  <p class="subtitle" style="margin-bottom:20px">Number of unique texts per rating score (1–6) for each language — sourced from original files</p>
+  <div class="dist-wrap">
+    <table id="dist-table">
+      <thead id="dist-head"></thead>
+      <tbody id="dist-body"></tbody>
+    </table>
+  </div>
+
   <p class="section-title" style="margin-bottom:4px;margin-top:52px">Model Error Analysis</p>
   <p class="subtitle" style="margin-bottom:20px">Bias, critical misclassifications and confusion patterns</p>
 
@@ -226,6 +256,7 @@
   const ALL_LANGS   = ["ar", "az", "be", "bg", "bo", "ca", "cn", "cs", "da", "el", "es", "et", "eu", "fa", "fi", "fr", "gl", "hu", "hv", "is", "it", "ka", "la", "li", "lv", "mk", "mt", "nl", "no", "pt", "ro", "ru", "sk", "sl", "sq", "sr", "stack", "sv", "tr", "uk"];
   const LANG_NAMES  = {"af": "Afrikaans", "ab": "Arabic", "az": "Azerbaijani", "be": "Belarusian", "bo": "Bosnian", "bg": "Bulgarian", "bn": "Brunei", "ca": "Catalan", "cs": "Czech", "cn": "Chinese", "cy": "Welsh", "da": "Danish", "de": "German", "el": "Greek", "en": "English", "eo": "Esperanto", "es": "Spanish", "et": "Estonian", "eu": "Basque", "fa": "Faroese", "fi": "Finnish", "fr": "French", "ga": "Irish", "gl": "Galician", "gu": "Gujarati", "he": "Hebrew", "hi": "Hindi", "hr": "Croatian", "hu": "Hungarian", "ar": "Armenian", "hv": "Croatia", "id": "Indonesian", "is": "Icelandic", "it": "Italian", "ja": "Japanese", "ka": "Georgian", "kk": "Kazakh", "km": "Khmer", "kn": "Kannada", "ko": "Korean", "la": "Latin", "li": "Lithuanian", "lv": "Latvian", "mk": "Macedonian", "ml": "Malayalam", "mn": "Mongolian", "mr": "Marathi", "ms": "Malay", "mt": "Maltese", "my": "Burmese", "ne": "Nepali", "nl": "Dutch", "no": "Norwegian", "pa": "Punjabi", "pe": "Persian", "pl": "Polish", "pt": "Portuguese", "ro": "Romanian", "ru": "Russian", "si": "Sinhala", "sk": "Slovak", "sl": "Slovenian", "sq": "Albanian", "sr": "Serbian", "sv": "Swedish", "sw": "Swahili", "ta": "Tamil", "te": "Telugu", "th": "Thai", "tl": "Filipino", "tr": "Turkish", "uk": "Ukrainian", "ur": "Urdu", "uz": "Uzbek", "vi": "Vietnamese", "zh": "Chinese", "zu": "Zulu"};
   const LANG_COUNTS = {"ar": 1790, "az": 1795, "be": 1794, "bg": 1721, "bo": 1795, "ca": 1712, "cn": 2686, "cs": 1779, "da": 1784, "el": 1794, "es": 1652, "et": 1788, "eu": 2684, "fa": 2697, "fi": 1784, "fr": 1761, "gl": 2698, "hu": 1796, "hv": 1796, "is": 1790, "it": 1791, "ka": 1629, "la": 2522, "li": 1793, "lv": 1795, "mk": 1799, "mt": 1797, "nl": 1795, "no": 1799, "pt": 1795, "ro": 1790, "ru": 1424, "sk": 1784, "sl": 1788, "sq": 1793, "sr": 1798, "stack": 2590, "sv": 1797, "tr": 1799, "uk": 1747};
+  const LANG_DIST   = {"ar": {"1": 100, "2": 100, "5": 100, "6": 100}, "az": {"1": 100, "2": 100, "5": 100, "6": 100}, "be": {"1": 100, "2": 100, "5": 100, "6": 100}, "bg": {"1": 100, "2": 100, "5": 100, "6": 62}, "bo": {"1": 100, "2": 100, "5": 100, "6": 100}, "ca": {"1": 73, "2": 100, "5": 100, "6": 86}, "cn": {"1": 100, "2": 100, "3": 100, "4": 100, "5": 100, "6": 100}, "cs": {"1": 100, "2": 100, "5": 100, "6": 100}, "da": {"1": 100, "2": 100, "5": 100, "6": 100}, "el": {"1": 100, "2": 100, "5": 100, "6": 100}, "es": {"1": 100, "2": 100, "5": 100, "6": 33}, "et": {"1": 100, "2": 100, "5": 100, "6": 100}, "eu": {"1": 97, "2": 100, "3": 100, "4": 100, "5": 100, "6": 100}, "fa": {"1": 100, "2": 100, "3": 100, "4": 100, "5": 100, "6": 100}, "fi": {"1": 100, "2": 100, "5": 100, "6": 100}, "fr": {"1": 100, "2": 100, "5": 100, "6": 82}, "gl": {"1": 100, "2": 100, "3": 100, "4": 100, "5": 100, "6": 100}, "hu": {"1": 100, "2": 100, "5": 100, "6": 100}, "hv": {"1": 100, "2": 100, "5": 100, "6": 100}, "is": {"1": 100, "2": 100, "5": 100, "6": 100}, "it": {"1": 100, "2": 100, "5": 100, "6": 100}, "ka": {"1": 18, "2": 100, "5": 100, "6": 100}, "la": {"1": 100, "2": 96, "3": 17, "4": 100, "5": 100, "6": 100}, "li": {"1": 100, "2": 100, "5": 100, "6": 100}, "lv": {"1": 100, "2": 100, "5": 100, "6": 100}, "mk": {"1": 100, "2": 100, "5": 100, "6": 100}, "mt": {"1": 100, "2": 100, "5": 100, "6": 100}, "nl": {"1": 100, "2": 100, "5": 100, "6": 100}, "no": {"1": 100, "2": 100, "5": 100, "6": 100}, "pt": {"1": 100, "2": 100, "5": 100, "6": 100}, "ro": {"1": 100, "2": 100, "5": 100, "6": 100}, "ru": {"1": 100, "2": 100, "5": 100, "6": 3}, "sk": {"1": 100, "2": 100, "5": 100, "6": 100}, "sl": {"1": 100, "2": 100, "5": 100, "6": 100}, "sq": {"1": 100, "2": 100, "5": 100, "6": 100}, "sr": {"1": 100, "2": 100, "5": 100, "6": 100}, "stack": {"1": 49, "2": 100, "3": 100, "4": 100, "5": 100, "6": 100}, "sv": {"1": 100, "2": 100, "5": 100, "6": 100}, "tr": {"1": 100, "2": 100, "5": 100, "6": 100}, "uk": {"1": 100, "2": 100, "5": 100, "6": 74}};
 
   function langName(c) { return LANG_NAMES[c] || c.toUpperCase(); }
 
@@ -374,6 +405,50 @@
       `75922 predictions · ${ALL_LANGS.length} languages · ${ALL_ROWS.length} models`;
   }
 
+  // ── dataset distribution ──
+  function renderDist() {
+    const scores = [1, 2, 3, 4, 5, 6];
+    const langs  = [...ALL_LANGS];
+
+    if (!LANG_DIST || Object.keys(LANG_DIST).length === 0) {
+      document.getElementById('dist-head').innerHTML =
+        '<tr><th class="lang-h" colspan="8" style="color:#475569;text-align:center;padding:20px">No source directory provided — run with --source-dir to enable this section.</th></tr>';
+      return;
+    }
+
+    let maxCount = 0;
+    langs.forEach(l => {
+      const d = LANG_DIST[l] || {};
+      scores.forEach(s => { if ((d[s] || 0) > maxCount) maxCount = d[s] || 0; });
+    });
+
+    document.getElementById('dist-head').innerHTML = `<tr>
+      <th class="lang-h">Language</th>
+      ${scores.map(s => `<th class="score-h">Rating ${s}</th>`).join('')}
+      <th class="total-h">Total</th>
+    </tr>`;
+
+    document.getElementById('dist-body').innerHTML = langs.map(lang => {
+      const d     = LANG_DIST[lang] || {};
+      const total = Object.values(d).reduce((a, b) => a + b, 0);
+      if (total === 0) return '';
+      const cells = scores.map(s => {
+        const n   = d[s] || 0;
+        const bar = maxCount > 0 ? Math.round((n / maxCount) * 48) : 0;
+        return `<td class="count-d">${
+          n > 0
+            ? `${n}<span class="dist-bar" style="width:${bar}px"></span>`
+            : '<span style="color:#2d3748">—</span>'
+        }</td>`;
+      }).join('');
+      return `<tr>
+        <td class="lang-d">${langName(lang)}</td>
+        ${cells}
+        <td class="total-d">${total.toLocaleString()}</td>
+      </tr>`;
+    }).join('');
+  }
+
   // ── bias lollipop ──
   function renderBias() {
     const sorted = [...ALL_ROWS].sort((a, b) => a.avg_bias - b.avg_bias);
@@ -573,6 +648,7 @@
 
   render();
   renderChart();
+  renderDist();
   renderBias();
   renderCritical();
   populateConfSelect();