Update benchmark leaderboard

index.html

@@ -89,6 +89,27 @@
       background: #111827; border: 1px solid #1e2a3a;
       border-radius: 10px; padding: 24px 20px;
     }
+    .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 { height: 5px; background: #0d1117; }
     ::-webkit-scrollbar-thumb { background: #2d3748; border-radius: 3px; }
@@ -119,7 +140,16 @@
     </table>
   </div>
 
-  <p class="section-title">Global Model Comparison</p>
+  <p class="section-title">Dataset Distribution</p>
+  <p class="subtitle" style="margin-bottom:20px">Number of unique texts per rating score (1–6) for each language</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-top:52px">Global Model Comparison</p>
   <p class="subtitle" style="margin-bottom:20px">Weighted Score vs Exact Accuracy — all languages combined, sorted by Weighted Score</p>
   <div class="chart-wrap">
     <canvas id="globalChart"></canvas>
@@ -133,6 +163,7 @@
   const ALL_LANGS   = ["ar", "az", "be", "bg", "bo", "ca", "cn", "cs", "da", "de", "el", "en", "es", "et", "eu", "fa", "fi", "fr", "gl", "hu", "hv", "is", "it", "ka", "la", "li", "lv", "mk", "mt", "nl", "no", "pl", "pt", "ro", "ru", "sk", "sl", "sq", "sr", "stack", "sv", "tr", "uk"];
   const LANG_NAMES  = {"af": "Afrikaans", "ar": "Arabic", "az": "Azerbaijani", "be": "Belarusian", "bo": "Bosnian", "bg": "Bulgarian", "bn": "Bengali", "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": "Persian", "fi": "Finnish", "fr": "French", "ga": "Irish", "gl": "Galician", "gu": "Gujarati", "he": "Hebrew", "hi": "Hindi", "hr": "Croatian", "hu": "Hungarian", "hy": "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", "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": 1388, "az": 1395, "be": 1394, "bg": 1359, "bo": 1395, "ca": 1353, "cn": 2086, "cs": 1379, "da": 1384, "de": 688, "el": 1394, "en": 1391, "es": 1319, "et": 1388, "eu": 2087, "fa": 2097, "fi": 1384, "fr": 1379, "gl": 2098, "hu": 1396, "hv": 1396, "is": 1390, "it": 1391, "ka": 1311, "la": 2009, "li": 1393, "lv": 1395, "mk": 1399, "mt": 1397, "nl": 1395, "no": 1399, "pl": 2066, "pt": 1395, "ro": 1390, "ru": 1121, "sk": 1384, "sl": 1388, "sq": 1393, "sr": 1398, "stack": 2041, "sv": 1397, "tr": 1399, "uk": 1370};
+  const LANG_DIST   = {"ar": {"1": 347, "2": 345, "5": 347, "6": 349}, "az": {"1": 349, "2": 349, "5": 349, "6": 348}, "be": {"1": 347, "2": 348, "5": 350, "6": 349}, "bg": {"1": 349, "2": 349, "5": 349, "6": 312}, "bo": {"1": 350, "2": 349, "5": 349, "6": 347}, "ca": {"1": 322, "2": 348, "5": 347, "6": 336}, "cn": {"1": 342, "2": 349, "3": 348, "4": 349, "5": 349, "6": 349}, "cs": {"1": 341, "2": 344, "5": 348, "6": 346}, "da": {"1": 348, "2": 346, "5": 343, "6": 347}, "de": {"1": 346, "5": 342}, "el": {"1": 349, "2": 347, "5": 350, "6": 348}, "en": {"1": 347, "3": 347, "4": 350, "5": 347}, "es": {"1": 347, "2": 346, "5": 347, "6": 279}, "et": {"1": 347, "2": 347, "5": 346, "6": 348}, "eu": {"1": 345, "2": 348, "3": 347, "4": 348, "5": 349, "6": 350}, "fa": {"1": 349, "2": 350, "3": 349, "4": 350, "5": 349, "6": 350}, "fi": {"1": 344, "2": 347, "5": 346, "6": 347}, "fr": {"1": 349, "2": 348, "5": 350, "6": 332}, "gl": {"1": 350, "2": 349, "3": 350, "4": 349, "5": 350, "6": 350}, "hu": {"1": 350, "2": 349, "5": 347, "6": 350}, "hv": {"1": 350, "2": 348, "5": 348, "6": 350}, "is": {"1": 346, "2": 348, "5": 349, "6": 347}, "it": {"1": 346, "2": 349, "5": 348, "6": 348}, "ka": {"1": 265, "2": 349, "5": 348, "6": 349}, "la": {"1": 350, "2": 344, "3": 267, "4": 350, "5": 349, "6": 349}, "li": {"1": 347, "2": 350, "5": 348, "6": 348}, "lv": {"1": 349, "2": 350, "5": 348, "6": 348}, "mk": {"1": 350, "2": 350, "5": 349, "6": 350}, "mt": {"1": 350, "2": 348, "5": 349, "6": 350}, "nl": {"1": 348, "2": 350, "5": 349, "6": 348}, "no": {"1": 350, "2": 350, "5": 349, "6": 350}, "pl": {"1": 348, "2": 350, "3": 350, "4": 349, "5": 348, "6": 321}, "pt": {"1": 348, "2": 349, "5": 349, "6": 349}, "ro": {"1": 348, "2": 346, "5": 347, "6": 349}, "ru": {"1": 348, "2": 349, "5": 349, "6": 75}, "sk": {"1": 346, "2": 348, "5": 346, "6": 344}, "sl": {"1": 347, "2": 350, "5": 344, "6": 347}, "sq": {"1": 347, "2": 348, "5": 348, "6": 350}, "sr": {"1": 349, "2": 350, "5": 350, "6": 349}, "stack": {"1": 298, "2": 347, "3": 349, "4": 349, "5": 349, "6": 349}, "sv": {"1": 349, "2": 350, "5": 348, "6": 350}, "tr": {"1": 349, "2": 350, "5": 350, "6": 350}, "uk": {"1": 350, "2": 350, "5": 349, "6": 321}};
 
   function langName(c) { return LANG_NAMES[c] || c.toUpperCase(); }
 
@@ -267,6 +298,46 @@
     });
   }
 
+  // distribution table
+  function renderDist() {
+    const scores = [1, 2, 3, 4, 5, 6];
+    const langs  = [...ALL_LANGS];
+
+    // max count for bar scaling
+    let maxCount = 0;
+    langs.forEach(l => {
+      const d = LANG_DIST[l] || {};
+      scores.forEach(s => { if ((d[s]||0) > maxCount) maxCount = d[s]||0; });
+    });
+
+    // header
+    const head = document.getElementById('dist-head');
+    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 texts</th>
+    </tr>`;
+
+    // body
+    const body = document.getElementById('dist-body');
+    body.innerHTML = langs.map(lang => {
+      const d     = LANG_DIST[lang] || {};
+      const total = Object.values(d).reduce((a,b) => a+b, 0);
+      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('');
+  }
+
   // table
   function render() {
     renderChips();
@@ -334,6 +405,7 @@
 
   render();
   renderChart();
+  renderDist();
 })();
 </script>
 </body>