Spaces:

freshstack
/

leaderboard

Sleeping

nthakur commited on Apr 7

Commit

26aa131

1 Parent(s): 5921ea4

Refine leaderboard labels, controls, and plots.

Update metric labels and grouped header alignment, add metric details toggle, highlight Avg(5) scores, and embed FreshStack metric-vs-params plots below the table.

Made-with: Cursor

Files changed (3) hide show

index.html +17 -1
main.js +104 -4
style.css +13 -0

index.html CHANGED Viewed

@@ -9,6 +9,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="./style.css">
 </head>
 <body>
   <div class="bg-blobs">
@@ -25,13 +26,20 @@
     </p>
     <div class="top-actions">
-      <a href="https://arxiv.org/abs/2504.13128" target="_blank" class="action-btn"><i class="fa-solid fa-file-lines"></i> Paper</a>
       <a href="https://github.com/fresh-stack/freshstack" target="_blank" class="action-btn"><i class="fa-brands fa-github"></i> Code</a>
       <a href="https://huggingface.co/freshstack" target="_blank" class="action-btn"><i class="fa-solid fa-database"></i> Dataset</a>
       <a href="https://fresh-stack.github.io/" target="_blank" class="action-btn"><i class="fa-solid fa-house"></i> Project Home</a>
       <button class="action-btn" id="toggle-submit"><i class="fa-solid fa-paper-plane"></i> Submit Here</button>
     </div>
     <div id="submit-panel" class="panel hidden">
       <p>Submit your results by adding a new row to <code>leaderboard_data.json</code> and opening a PR.</p>
       <p><a href="https://github.com/fresh-stack/fresh-stack.github.io/blob/master/leaderboard_data.json" target="_blank">Open leaderboard_data.json</a></p>
@@ -77,6 +85,14 @@
       </div>
     </div>
     <section class="citation">
       <div class="citation-head">
         <h3>Cite FreshStack</h3>

   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
   <link rel="stylesheet" href="./style.css">
+  <script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
 </head>
 <body>
   <div class="bg-blobs">
     </p>
     <div class="top-actions">
+      <a href="https://openreview.net/forum?id=54TTgXlS2U" target="_blank" class="action-btn"><i class="fa-solid fa-file-lines"></i> Paper</a>
+      <button class="action-btn" id="toggle-metrics"><i class="fa-solid fa-chart-line"></i> Metric Details</button>
       <a href="https://github.com/fresh-stack/freshstack" target="_blank" class="action-btn"><i class="fa-brands fa-github"></i> Code</a>
       <a href="https://huggingface.co/freshstack" target="_blank" class="action-btn"><i class="fa-solid fa-database"></i> Dataset</a>
       <a href="https://fresh-stack.github.io/" target="_blank" class="action-btn"><i class="fa-solid fa-house"></i> Project Home</a>
       <button class="action-btn" id="toggle-submit"><i class="fa-solid fa-paper-plane"></i> Submit Here</button>
     </div>
+    <div id="metrics-panel" class="panel hidden">
+      <p><b>alpha-nDCG@10 (α@10)</b>: diversity-aware ranking quality in top results.</p>
+      <p><b>Coverage@20 (C@20)</b>: fraction of nuggets supported by top-20 retrieved chunks.</p>
+      <p><b>Recall@50 (R@50)</b>: fraction of relevant chunks recovered in top-50.</p>
+    </div>
     <div id="submit-panel" class="panel hidden">
       <p>Submit your results by adding a new row to <code>leaderboard_data.json</code> and opening a PR.</p>
       <p><a href="https://github.com/fresh-stack/fresh-stack.github.io/blob/master/leaderboard_data.json" target="_blank">Open leaderboard_data.json</a></p>
       </div>
     </div>
+    <section class="plots">
+      <h3>FreshStack Metrics vs. Model Parameters</h3>
+      <p class="plot-sub">Average scores across 5 domains vs model parameter size; points are colored by model family.</p>
+      <div id="plot-avg-alpha10" class="plot-box"></div>
+      <div id="plot-avg-c20" class="plot-box"></div>
+      <div id="plot-avg-r50" class="plot-box"></div>
+    </section>
     <section class="citation">
       <div class="citation-head">
         <h3>Cite FreshStack</h3>

main.js CHANGED Viewed

@@ -16,7 +16,7 @@ const GROUPS = [
 ];
 const METRICS = [
-  { id: 'a10', label: 'alpha@10' },
   { id: 'c20', label: 'C@20' },
   { id: 'r50', label: 'R@50' }
 ];
@@ -24,6 +24,11 @@ const METRICS = [
 let rows = [];
 let sortKey = 'avg_r50';
 let sortAsc = false;
 function num(v) {
   return typeof v === 'number' ? v.toFixed(3) : '-';
@@ -38,6 +43,45 @@ function typeBadge(type) {
   return `<span class="type-pill type-${type}">${labels[type] || type}</span>`;
 }
 function mapRow(item) {
   return {
     name: item.info.name,
@@ -73,7 +117,7 @@ function renderHeaders() {
     <th rowspan="2" data-key="type">Type</th>
     <th rowspan="2" data-key="size">Params</th>
     <th rowspan="2" data-key="date">Date</th>
-    ${GROUPS.map(g => `<th colspan="3">${g.label}</th>`).join('')}
   `;
   headerRowSub.innerHTML = GROUPS.map(g =>
@@ -123,7 +167,7 @@ function renderBody() {
       <td>${typeBadge(r.type)}</td>
       <td>${r.size || '-'}</td>
       <td>${r.date || '-'}</td>
-      <td>${num(r.avg_a10)}</td><td>${num(r.avg_c20)}</td><td>${num(r.avg_r50)}</td>
       <td>${num(r.lc_a10)}</td><td>${num(r.lc_c20)}</td><td>${num(r.lc_r50)}</td>
       <td>${num(r.yolo_a10)}</td><td>${num(r.yolo_c20)}</td><td>${num(r.yolo_r50)}</td>
       <td>${num(r.laravel_a10)}</td><td>${num(r.laravel_c20)}</td><td>${num(r.laravel_r50)}</td>
@@ -133,19 +177,75 @@ function renderBody() {
   `).join('');
 }
 async function init() {
   const resp = await fetch('./leaderboard_data.json');
   const data = await resp.json();
   rows = data.leaderboardData.map(mapRow);
   renderHeaders();
   renderBody();
 }
 searchInput.addEventListener('input', renderBody);
-typeFilters.forEach(cb => cb.addEventListener('change', renderBody));
 document.getElementById('toggle-submit').addEventListener('click', () => {
   document.getElementById('submit-panel').classList.toggle('hidden');
 });
 copyCitationBtn.addEventListener('click', async () => {
   try {

 ];
 const METRICS = [
+  { id: 'a10', label: 'α@10' },
   { id: 'c20', label: 'C@20' },
   { id: 'r50', label: 'R@50' }
 ];
 let rows = [];
 let sortKey = 'avg_r50';
 let sortAsc = false;
+const PLOT_METRICS = [
+  { id: 'alpha_ndcg_10', key: 'avg_a10', plotId: 'plot-avg-alpha10', yLabel: 'α@10 (Avg. 5)', yMin: 0.1, yMax: 0.541 },
+  { id: 'coverage_20', key: 'avg_c20', plotId: 'plot-avg-c20', yLabel: 'C@20 (Avg. 5)', yMin: 0.25, yMax: 0.868 },
+  { id: 'recall_50', key: 'avg_r50', plotId: 'plot-avg-r50', yLabel: 'R@50 (Avg. 5)', yMin: 0.15, yMax: 0.755 }
+];
 function num(v) {
   return typeof v === 'number' ? v.toFixed(3) : '-';
   return `<span class="type-pill type-${type}">${labels[type] || type}</span>`;
 }
+function parseSizeToBillions(sizeStr) {
+  if (!sizeStr || sizeStr === '-') return null;
+  const m = String(sizeStr).trim().match(/^([\d.]+)\s*([BMK])$/i);
+  if (!m) return null;
+  const numValue = parseFloat(m[1]);
+  const unit = m[2].toUpperCase();
+  if (Number.isNaN(numValue)) return null;
+  if (unit === 'B') return numValue;
+  if (unit === 'M') return numValue / 1000;
+  if (unit === 'K') return numValue / 1e6;
+  return null;
+}
+function inferFamily(name) {
+  const n = String(name || '').toLowerCase();
+  if (n.includes('stella') || n.includes('jasper')) return 'Stella';
+  if (n.includes('harrier')) return 'Harrier OSS';
+  if (n.includes('voyage')) return 'Voyage';
+  if (n.includes('jina')) return 'Jina';
+  if (n.includes('qwen3')) return 'Qwen3';
+  if (n.includes('granite')) return 'IBM Granite';
+  if (n.includes('arctic embed')) return 'Arctic Embed';
+  if (n.includes('perplexity embed')) return 'Perplexity Embed';
+  if (n.includes('nomic embed') || n.includes('coderankembed')) return 'Nomic Embed';
+  if (n.includes('bge')) return 'BGE';
+  if (n.includes('e5')) return 'E5';
+  if (n.includes('gte')) return 'GTE';
+  if (n.includes('bm25')) return 'BM25';
+  if (n.includes('fusion')) return 'Fusion';
+  return 'Other';
+}
+const FAMILY_COLORS = {
+  'Stella': '#1f77b4', 'Harrier OSS': '#ff7f0e', 'Voyage': '#009688', 'Jina': '#d62728',
+  'Qwen3': '#9467bd', 'IBM Granite': '#8c564b', 'Arctic Embed': '#e377c2', 'Perplexity Embed': '#17becf',
+  'Nomic Embed': '#6a1b9a', 'BGE': '#7f7f7f', 'E5': '#393b79', 'GTE': '#bcbd22',
+  'BM25': '#969696', 'Fusion': '#e6550d', 'Other': '#9e9e9e'
+};
 function mapRow(item) {
   return {
     name: item.info.name,
     <th rowspan="2" data-key="type">Type</th>
     <th rowspan="2" data-key="size">Params</th>
     <th rowspan="2" data-key="date">Date</th>
+    ${GROUPS.map(g => `<th colspan="3" class="group-name">${g.label}</th>`).join('')}
   `;
   headerRowSub.innerHTML = GROUPS.map(g =>
       <td>${typeBadge(r.type)}</td>
       <td>${r.size || '-'}</td>
       <td>${r.date || '-'}</td>
+      <td class="avg-score">${num(r.avg_a10)}</td><td class="avg-score">${num(r.avg_c20)}</td><td class="avg-score">${num(r.avg_r50)}</td>
       <td>${num(r.lc_a10)}</td><td>${num(r.lc_c20)}</td><td>${num(r.lc_r50)}</td>
       <td>${num(r.yolo_a10)}</td><td>${num(r.yolo_c20)}</td><td>${num(r.yolo_r50)}</td>
       <td>${num(r.laravel_a10)}</td><td>${num(r.laravel_c20)}</td><td>${num(r.laravel_r50)}</td>
   `).join('');
 }
+function renderPlots() {
+  if (typeof Plotly === 'undefined') return;
+  const active = activeTypes();
+  const filtered = rows.filter(r => active.includes(r.type));
+  PLOT_METRICS.forEach(metric => {
+    const grouped = {};
+    filtered.forEach(r => {
+      const x = parseSizeToBillions(r.size);
+      const y = r[metric.key];
+      if (x === null || typeof y !== 'number') return;
+      const fam = inferFamily(r.name);
+      if (!grouped[fam]) grouped[fam] = { x: [], y: [], text: [] };
+      grouped[fam].x.push(x);
+      grouped[fam].y.push(y);
+      grouped[fam].text.push(r.name);
+    });
+    const traces = Object.keys(grouped).sort().map(fam => ({
+      type: 'scatter',
+      mode: 'markers',
+      name: fam,
+      x: grouped[fam].x,
+      y: grouped[fam].y,
+      text: grouped[fam].text,
+      marker: { color: FAMILY_COLORS[fam] || '#9e9e9e', size: 11, line: { width: 1, color: '#fff' } },
+      hovertemplate: '<b>%{text}</b><br>Params: %{x:.3f}B<br>Score: %{y:.3f}<extra></extra>'
+    }));
+    const bm25 = filtered.find(r => String(r.name).toLowerCase() === 'bm25');
+    const fusion = filtered.find(r => String(r.name).toLowerCase() === 'fusion (bm25, bge, e5, voyage)');
+    const xs = traces.flatMap(t => t.x || []);
+    if (xs.length) {
+      const xmin = Math.min(...xs);
+      const xmax = Math.max(...xs);
+      if (bm25 && typeof bm25[metric.key] === 'number') {
+        traces.push({ type: 'scatter', mode: 'lines', name: 'BM25', x: [xmin, xmax], y: [bm25[metric.key], bm25[metric.key]], line: { color: 'rgba(97,97,97,0.55)', width: 1.1, dash: 'dash' } });
+      }
+      if (fusion && typeof fusion[metric.key] === 'number') {
+        traces.push({ type: 'scatter', mode: 'lines', name: 'Fusion', x: [xmin, xmax], y: [fusion[metric.key], fusion[metric.key]], line: { color: 'rgba(106,27,154,0.55)', width: 1.1, dash: 'dot' } });
+      }
+    }
+    Plotly.newPlot(metric.plotId, traces, {
+      margin: { t: 20, r: 12, b: 76, l: 56 },
+      xaxis: { title: { text: 'Model Parameters (Billions)', standoff: 18 }, type: 'log', showgrid: true },
+      yaxis: { title: metric.yLabel, range: [metric.yMin, metric.yMax], tickformat: '.2f', showgrid: true },
+      legend: { orientation: 'h', y: -0.26, x: 0.5, xanchor: 'center' },
+      hovermode: 'closest'
+    }, { responsive: true, displaylogo: false });
+  });
+}
 async function init() {
   const resp = await fetch('./leaderboard_data.json');
   const data = await resp.json();
   rows = data.leaderboardData.map(mapRow);
   renderHeaders();
   renderBody();
+  renderPlots();
 }
 searchInput.addEventListener('input', renderBody);
+typeFilters.forEach(cb => cb.addEventListener('change', () => { renderBody(); renderPlots(); }));
 document.getElementById('toggle-submit').addEventListener('click', () => {
   document.getElementById('submit-panel').classList.toggle('hidden');
 });
+document.getElementById('toggle-metrics').addEventListener('click', () => {
+  document.getElementById('metrics-panel').classList.toggle('hidden');
+});
 copyCitationBtn.addEventListener('click', async () => {
   try {

style.css CHANGED Viewed

@@ -98,11 +98,13 @@ thead th {
 }
 #header-row-top th { top: 0; font-weight: 700; border-bottom: 1px solid #dbe3f0; }
 #header-row-sub th { top: 38px; font-weight: 600; color: #374151; }
 .metric-header { cursor: pointer; }
 tbody tr:hover { background: #f8fbff; }
 .model-cell { font-weight: 600; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
 .model-cell a { color: #1d4ed8; text-decoration: none; }
 .model-cell a:hover { text-decoration: underline; }
 .type-pill {
   display: inline-flex;
   align-items: center;
@@ -121,6 +123,17 @@ tbody tr:hover { background: #f8fbff; }
   border-radius: 14px;
   padding: 14px;
 }
 .citation-head {
   display: flex;
   align-items: center;

 }
 #header-row-top th { top: 0; font-weight: 700; border-bottom: 1px solid #dbe3f0; }
 #header-row-sub th { top: 38px; font-weight: 600; color: #374151; }
+.group-name { text-align: center !important; }
 .metric-header { cursor: pointer; }
 tbody tr:hover { background: #f8fbff; }
 .model-cell { font-weight: 600; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
 .model-cell a { color: #1d4ed8; text-decoration: none; }
 .model-cell a:hover { text-decoration: underline; }
+.avg-score { color: #1d4ed8; font-weight: 700; }
 .type-pill {
   display: inline-flex;
   align-items: center;
   border-radius: 14px;
   padding: 14px;
 }
+.plots {
+  margin-top: 20px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  padding: 14px;
+}
+.plots h3 { margin: 0 0 6px; }
+.plot-sub { margin: 0 0 12px; color: #475569; }
+.plot-box { width: 100%; height: 390px; margin-bottom: 12px; }
+.plot-box:last-child { margin-bottom: 0; }
 .citation-head {
   display: flex;
   align-items: center;