Spaces:

WukLab
/

SourceBench-Leaderboard

Running

App Files Files Community

Kristinx0351 commited on about 1 month ago

Commit

f0a2927

0 Parent(s):

Initialize SourceBench leaderboard Space

Browse files

Files changed (5) hide show

README.md +21 -0
index.html +1308 -0
leaderboard_data.js +0 -0
leaderboard_data.json +0 -0
wuklab_logo.png +0 -0

README.md ADDED Viewed

	@@ -0,0 +1,21 @@

+---
+title: SourceBench Leaderboard
+emoji: 📚
+colorFrom: amber
+colorTo: orange
+sdk: static
+app_file: index.html
+pinned: false
+---
+# SourceBench Leaderboard
+This Hugging Face Space hosts the public-facing SourceBench leaderboard frontend.
+Official leaderboard entries are validated and judged by the SourceBench team.
+Resources:
+- Benchmark repo: https://github.com/WukLab/SourceBench
+- arXiv: https://arxiv.org/abs/2602.16942
+- blog: https://mlsys.wuklab.io/posts/sourcebench/

index.html ADDED Viewed

	@@ -0,0 +1,1308 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SourceBench Leaderboard</title>
+  <style>
+    :root {
+      --bg: #f6efe4;
+      --paper: rgba(255, 251, 244, 0.92);
+      --paper-solid: #fff8ef;
+      --ink: #172033;
+      --muted: #6d7382;
+      --line: rgba(23, 32, 51, 0.12);
+      --accent: #b24a1f;
+      --accent-deep: #7c2d12;
+      --gold: #e9a23b;
+      --green: #206a5d;
+      --blue: #255a8f;
+      --shadow: 0 18px 40px rgba(23, 32, 51, 0.09);
+      --radius: 22px;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html {
+      scroll-behavior: smooth;
+    }
+    body {
+      margin: 0;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at 0% 0%, rgba(233, 162, 59, 0.18), transparent 28%),
+        radial-gradient(circle at 100% 10%, rgba(178, 74, 31, 0.14), transparent 22%),
+        radial-gradient(circle at 80% 100%, rgba(37, 90, 143, 0.09), transparent 22%),
+        linear-gradient(180deg, #f8f2e8 0%, #f4ebdf 100%);
+      font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
+      font-size: 17px;
+    }
+    .shell {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 26px 32px 72px;
+    }
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 18px;
+      flex-wrap: wrap;
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .brand-mark {
+      width: 84px;
+      height: 66px;
+      border-radius: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      color: var(--ink);
+      font-weight: 700;
+      overflow: hidden;
+      border: none;
+    }
+    .brand-mark img {
+      width: 84px;
+      height: auto;
+      display: block;
+    }
+    .brand-copy strong {
+      display: block;
+      font-size: 1rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+    .brand-copy span {
+      color: var(--muted);
+      font-size: 0.92rem;
+    }
+    .nav {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .nav a,
+    button {
+      appearance: none;
+      border: 1px solid rgba(23, 32, 51, 0.18);
+      background: rgba(255, 255, 255, 0.65);
+      color: var(--ink);
+      padding: 10px 14px;
+      border-radius: 999px;
+      text-decoration: none;
+      font: inherit;
+      cursor: pointer;
+      transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
+    }
+    .nav a:hover,
+    button:hover {
+      transform: translateY(-1px);
+      background: white;
+      border-color: rgba(23, 32, 51, 0.28);
+    }
+    .hero {
+      display: block;
+      margin-bottom: 18px;
+    }
+    .panel {
+      background: var(--paper);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      backdrop-filter: blur(8px);
+    }
+    .plain-section {
+      padding: 8px 8px 2px;
+      margin-bottom: 22px;
+    }
+    .hero-main {
+      padding: 34px 30px 30px;
+      min-height: 300px;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+      background:
+        linear-gradient(150deg, rgba(255,255,255,0.42), rgba(255,248,239,0.2)),
+        linear-gradient(135deg, rgba(178,74,31,0.035), rgba(37,90,143,0.02));
+    }
+    h1, h2, h3 {
+      margin: 0;
+      line-height: 1.05;
+    }
+    .hero-label {
+      display: block;
+      margin-bottom: 12px;
+      color: var(--accent);
+      font-size: 1.52rem;
+      font-weight: 700;
+      letter-spacing: 0.01em;
+      text-align: center;
+    }
+    h1 {
+      font-family: Georgia, "Times New Roman", serif;
+      font-size: clamp(2rem, 3.1vw, 3.2rem);
+      letter-spacing: -0.05em;
+      margin-bottom: 18px;
+      max-width: none;
+      white-space: nowrap;
+      text-align: center;
+    }
+    .hero-text {
+      max-width: 1040px;
+      font-size: 1.1rem;
+      line-height: 1.72;
+      color: #374151;
+      margin-bottom: 24px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .resource-links {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 20px;
+      justify-content: center;
+    }
+    .resource-links a {
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+      color: var(--blue);
+      text-decoration: none;
+      font-size: 0.96rem;
+      border-bottom: 1px solid rgba(37, 90, 143, 0.25);
+      padding-bottom: 1px;
+    }
+    .resource-links a:hover {
+      color: var(--accent);
+      border-bottom-color: rgba(178, 74, 31, 0.35);
+    }
+    .resource-links svg {
+      width: 15px;
+      height: 15px;
+      display: block;
+      flex: 0 0 auto;
+      fill: currentColor;
+    }
+    .hero-points {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 14px;
+      padding-top: 10px;
+      border-top: 1px solid rgba(23, 32, 51, 0.08);
+    }
+    .study-section {
+      margin: 24px 0 28px;
+    }
+    .study-copy {
+      max-width: 860px;
+      color: var(--muted);
+      line-height: 1.65;
+      margin: 0 0 14px;
+    }
+    .study-list {
+      display: grid;
+      gap: 10px;
+      margin: 0 0 16px;
+    }
+    .study-item {
+      padding-left: 18px;
+      position: relative;
+      color: var(--muted);
+      line-height: 1.6;
+    }
+    .study-item::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0.55rem;
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+    .study-item strong {
+      color: var(--ink);
+    }
+    .hero-point {
+      padding: 10px 6px 0 0;
+    }
+    .hero-point strong {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 1rem;
+    }
+    .hero-point span {
+      color: var(--muted);
+      font-size: 0.98rem;
+      line-height: 1.55;
+    }
+    .section-kicker {
+      font-size: 0.88rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--accent);
+      margin-bottom: 8px;
+    }
+    .micro {
+      color: var(--muted);
+      font-size: 0.98rem;
+      line-height: 1.58;
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: 12px;
+      margin: 18px 0;
+    }
+    .stat {
+      padding: 20px;
+    }
+    .stat-label {
+      display: block;
+      color: var(--muted);
+      font-size: 0.84rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      margin-bottom: 8px;
+    }
+    .stat-value {
+      font-family: Georgia, "Times New Roman", serif;
+      font-size: 2rem;
+      line-height: 1;
+      margin-bottom: 6px;
+    }
+    .stat-sub {
+      color: var(--muted);
+      font-size: 0.96rem;
+    }
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 18px;
+      margin-bottom: 18px;
+    }
+    .section {
+      padding: 24px;
+    }
+    .section-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 12px;
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+    }
+    .section-head p {
+      margin: 0;
+      color: var(--muted);
+      max-width: 720px;
+      line-height: 1.55;
+    }
+    .metric-intro {
+      margin: 0 0 16px;
+      color: var(--muted);
+      max-width: none;
+      line-height: 1.65;
+    }
+    .metric-core {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px 18px;
+      margin: 0 0 14px;
+      padding: 0;
+      list-style: none;
+    }
+    .metric-core li {
+      padding-left: 16px;
+      position: relative;
+      color: var(--muted);
+      line-height: 1.55;
+      font-size: 0.97rem;
+    }
+    .metric-core li::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0.58rem;
+      width: 7px;
+      height: 7px;
+      border-radius: 999px;
+      background: var(--blue);
+    }
+    .metric-core strong {
+      color: var(--ink);
+    }
+    .metric-defs {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 12px 18px;
+      margin: 0 0 18px;
+      padding: 0;
+      list-style: none;
+    }
+    .metric-defs li {
+      padding-left: 16px;
+      position: relative;
+      color: var(--muted);
+      line-height: 1.55;
+      font-size: 0.97rem;
+    }
+    .metric-defs li::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0.58rem;
+      width: 7px;
+      height: 7px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+    .metric-defs strong {
+      color: var(--ink);
+    }
+    .findings,
+    .plain-list {
+      display: grid;
+      gap: 12px;
+    }
+    .finding,
+    .plain-item {
+      padding: 0 0 0 18px;
+      position: relative;
+    }
+    .finding::before,
+    .plain-item::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0.5rem;
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+    .finding strong,
+    .plain-item strong {
+      display: block;
+      margin-bottom: 6px;
+      font-size: 1.06rem;
+    }
+    .finding span,
+    .plain-item span {
+      color: var(--muted);
+      line-height: 1.55;
+      font-size: 0.98rem;
+    }
+    .mini-table {
+      overflow-x: auto;
+      border-radius: 18px;
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,0.72);
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 760px;
+    }
+    th, td {
+      text-align: left;
+      padding: 12px 14px;
+      border-bottom: 1px solid rgba(23, 32, 51, 0.08);
+      white-space: nowrap;
+      font-size: 0.93rem;
+    }
+    th {
+      background: rgba(255,248,239,0.97);
+      color: var(--accent);
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .stage-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 12px;
+    }
+    .stage {
+      padding: 16px;
+      border-radius: 18px;
+      background: rgba(255,255,255,0.72);
+      border: 1px solid var(--line);
+      position: relative;
+      overflow: hidden;
+    }
+    .stage::before {
+      content: "";
+      position: absolute;
+      inset: 0 auto 0 0;
+      width: 5px;
+      background: linear-gradient(180deg, var(--gold), var(--accent));
+    }
+    .stage small {
+      display: block;
+      color: var(--accent);
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      margin-bottom: 8px;
+      font-size: 0.78rem;
+    }
+    .stage h3 {
+      font-size: 1.18rem;
+      margin-bottom: 8px;
+    }
+    .stage p {
+      margin: 0 0 10px;
+      color: var(--muted);
+      line-height: 1.58;
+      font-size: 1rem;
+    }
+    .stage code {
+      display: block;
+      white-space: pre-wrap;
+      font-size: 0.84rem;
+      color: #2b3240;
+      background: rgba(23,32,51,0.04);
+      padding: 10px;
+      border-radius: 12px;
+    }
+    .two-col {
+      display: grid;
+      grid-template-columns: 1.1fr 0.9fr;
+      gap: 18px;
+      margin-bottom: 18px;
+    }
+    .policy-list,
+    .guide-list {
+      display: grid;
+      gap: 12px;
+    }
+    .policy-item,
+    .guide-item {
+      padding-left: 18px;
+      position: relative;
+    }
+    .policy-item strong,
+    .guide-item strong {
+      display: block;
+      margin-bottom: 6px;
+    }
+    .policy-item::before,
+    .guide-item::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0.5rem;
+      width: 8px;
+      height: 8px;
+      border-radius: 999px;
+      background: var(--accent);
+    }
+    .policy-item span,
+    .guide-item span {
+      color: var(--muted);
+      line-height: 1.55;
+      font-size: 0.98rem;
+    }
+    .controls {
+      display: grid;
+      gap: 12px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      padding: 16px;
+      margin-bottom: 14px;
+    }
+    .toggle-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      margin: 4px 0 14px;
+      flex-wrap: wrap;
+    }
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--muted);
+      font-size: 0.97rem;
+    }
+    .toggle input {
+      width: 18px;
+      height: 18px;
+      margin: 0;
+      accent-color: var(--ink);
+    }
+    label {
+      display: grid;
+      gap: 6px;
+      color: var(--muted);
+      font-size: 0.98rem;
+    }
+    select,
+    input[type="search"] {
+      width: 100%;
+      padding: 11px 12px;
+      border-radius: 12px;
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,0.94);
+      color: var(--ink);
+      font: inherit;
+    }
+    .tabs {
+      display: inline-flex;
+      gap: 8px;
+      margin-bottom: 14px;
+      flex-wrap: wrap;
+    }
+    .tab.active {
+      background: var(--ink);
+      color: white;
+      border-color: var(--ink);
+    }
+    .table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      border-radius: 20px;
+      background: rgba(255,255,255,0.72);
+    }
+    .table-wrap table {
+      min-width: 980px;
+    }
+    tbody tr:hover {
+      background: rgba(233, 162, 59, 0.09);
+    }
+    code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    }
+    .footer-note {
+      color: var(--muted);
+      font-size: 1rem;
+      line-height: 1.55;
+      margin-top: 14px;
+    }
+    .load-status {
+      color: var(--muted);
+      font-size: 0.95rem;
+      line-height: 1.5;
+      margin-top: 10px;
+    }
+    .markdown-note {
+      color: var(--muted);
+      font-size: 1rem;
+      line-height: 1.7;
+    }
+    .markdown-note p {
+      margin: 0 0 10px;
+    }
+    .markdown-note ul {
+      margin: 0;
+      padding-left: 20px;
+    }
+    .markdown-note li {
+      margin: 0 0 8px;
+    }
+    .markdown-note pre {
+      margin: 12px 0 16px;
+      padding: 14px 16px;
+      overflow-x: auto;
+      border-radius: 14px;
+      border: 1px solid rgba(23, 32, 51, 0.08);
+      background: rgba(255, 255, 255, 0.68);
+      color: #223049;
+      font-size: 0.92rem;
+      line-height: 1.55;
+    }
+    .markdown-note code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    }
+    @media (max-width: 1120px) {
+      .hero,
+      .grid-2,
+      .two-col,
+      .stats,
+      .controls,
+      .stage-grid,
+      .hero-points,
+      .metric-core,
+      .metric-defs {
+        grid-template-columns: 1fr;
+      }
+      h1 {
+        white-space: normal;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="shell">
+    <header class="topbar">
+      <div class="brand">
+        <div class="brand-mark" aria-hidden="true">
+          <img src="./wuklab_logo.png" alt="WukLab logo">
+        </div>
+        <div class="brand-copy">
+          <strong>SourceBench</strong>
+          <span>Leaderboard for cited source quality in generative engines</span>
+        </div>
+      </div>
+      <nav class="nav">
+        <a href="#leaderboard">Leaderboard</a>
+        <a href="#findings">Findings</a>
+        <a href="#deepseek-study">Study</a>
+        <a href="#policy">Policy</a>
+      </nav>
+    </header>
+    <section class="hero">
+      <article class="panel hero-main">
+        <div class="hero-label">SourceBench</div>
+        <h1>Can AI answers cite high-quality web sources?</h1>
+        <div class="resource-links">
+          <a href="https://arxiv.org/abs/2602.16942" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 1.8 7.5v9L12 22l10.2-5.5v-9L12 2Zm0 2.3 7.8 4.2-2.4 1.3L12 6.8 6.6 9.8 4.2 8.5 12 4.3Zm-6 5.5 4.8 2.6v5.5L6 15.3V9.8Zm6 9.1v-5.5l4.8-2.6v5.5L12 18.9Z"/></svg>
+            <span>arXiv</span>
+          </a>
+          <a href="https://github.com/WukLab/SourceBench" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.6 2 12.26c0 4.52 2.87 8.36 6.84 9.71.5.1.68-.22.68-.49 0-.24-.01-1.05-.01-1.9-2.78.62-3.37-1.22-3.37-1.22-.45-1.19-1.11-1.5-1.11-1.5-.91-.64.07-.63.07-.63 1 .08 1.53 1.06 1.53 1.06.9 1.57 2.35 1.12 2.92.86.09-.67.35-1.12.64-1.38-2.22-.26-4.55-1.14-4.55-5.08 0-1.12.39-2.04 1.03-2.76-.1-.26-.45-1.3.1-2.71 0 0 .84-.28 2.75 1.05A9.3 9.3 0 0 1 12 7.64c.85 0 1.71.12 2.51.35 1.91-1.33 2.75-1.05 2.75-1.05.55 1.41.2 2.45.1 2.71.64.72 1.03 1.64 1.03 2.76 0 3.95-2.33 4.82-4.56 5.07.36.32.68.95.68 1.92 0 1.39-.01 2.5-.01 2.84 0 .27.18.6.69.49A10.27 10.27 0 0 0 22 12.26C22 6.6 17.52 2 12 2Z"/></svg>
+            <span>GitHub</span>
+          </a>
+          <a href="https://mlsys.wuklab.io/posts/sourcebench/" target="_blank" rel="noopener noreferrer">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h10l6 6v10H4V4Zm10 1.5V10h4.5L14 5.5ZM7 13h10v1.5H7V13Zm0 3h10v1.5H7V16Zm0-6h5v1.5H7V10Z"/></svg>
+            <span>Blog</span>
+          </a>
+        </div>
+        <p class="hero-text">
+          SourceBench focuses on a different evaluation target from standard answer-quality benchmarks.
+          Instead of only asking whether a model answered well, it asks whether the model cited sources that are
+          relevant, accurate, fresh, transparent, authoritative, and usable. This Space hosts the public-facing
+          leaderboard frontend. Official leaderboard entries are validated and judged by the SourceBench team.
+        </p>
+        <div class="hero-points">
+          <div class="hero-point">
+            <strong>Benchmark target</strong>
+            <span>Quality of cited sources, not just final answer correctness.</span>
+          </div>
+          <div class="hero-point">
+            <strong>Current scope</strong>
+            <span>Generative engines with built-in web search, plus official validation for leaderboard inclusion.</span>
+          </div>
+          <div class="hero-point">
+            <strong>Official policy</strong>
+            <span>Official leaderboard entries are validated and judged by the SourceBench team using fixed hidden evaluation settings.</span>
+          </div>
+        </div>
+      </article>
+    </section>
+    <section class="stats" id="summary">
+      <article class="panel stat">
+        <span class="stat-label">Models in current board</span>
+        <div class="stat-value" id="stat-models">0</div>
+        <div class="stat-sub">Current leaderboard snapshot</div>
+      </article>
+      <article class="panel stat">
+        <span class="stat-label">Query types</span>
+        <div class="stat-value" id="stat-query-types">0</div>
+        <div class="stat-sub">Benchmark query slices</div>
+      </article>
+      <article class="panel stat">
+        <span class="stat-label">Top model</span>
+        <div class="stat-value" id="stat-top-model">-</div>
+        <div class="stat-sub">Highest weighted content score</div>
+      </article>
+      <article class="panel stat">
+        <span class="stat-label">Top weighted score</span>
+        <div class="stat-value" id="stat-top-score">-</div>
+        <div class="stat-sub">Weighted source-quality metric</div>
+      </article>
+      <article class="panel stat">
+        <span class="stat-label">Generated at</span>
+        <div class="stat-value" id="stat-generated">-</div>
+        <div class="stat-sub">Artifact timestamp in Pacific Time</div>
+      </article>
+    </section>
+    <section class="grid-2 plain-section" id="findings">
+      <article>
+        <div class="section-head">
+          <div>
+            <div class="section-kicker">Work overview</div>
+            <h2 style="font-size:1.45rem;">What this work measures</h2>
+          </div>
+        </div>
+        <div class="plain-list">
+          <div class="plain-item">
+            <strong>Source quality dimensions</strong>
+            <span>Each cited source is judged on semantic relevance, factual accuracy, freshness, objectivity, layout/ad density, accountability, transparency, and authority.</span>
+          </div>
+          <div class="plain-item">
+            <strong>Main leaderboard target</strong>
+            <span>The leaderboard emphasizes quality of referenced web sources, because a model can produce fluent answers while still relying on weak or misleading citations.</span>
+          </div>
+          <div class="plain-item">
+            <strong>Why this matters</strong>
+            <span>For web-grounded assistants, citation quality is a first-class property. A stronger source profile should make answers more trustworthy and auditable.</span>
+          </div>
+        </div>
+      </article>
+      <article>
+        <div class="section-head">
+          <div>
+            <div class="section-kicker">Simple conclusions</div>
+            <h2 style="font-size:1.45rem;">Current board highlights</h2>
+          </div>
+        </div>
+        <div class="findings" id="findings-list">
+          <div class="finding">
+            <strong>Load leaderboard data to see findings</strong>
+            <span>The page will summarize the top models, hardest query types, and search-overlap patterns from the current artifact.</span>
+          </div>
+        </div>
+      </article>
+    </section>
+    <section class="panel section" id="leaderboard">
+      <div class="section-head">
+        <div>
+          <div class="section-kicker">Leaderboard</div>
+          <h2 style="font-size:1.6rem;">Ranking Table</h2>
+        </div>
+      </div>
+      <p class="metric-intro">
+        SourceBench reports one overall score together with eight source-quality dimensions used by the judge model.
+        The overall weighted score is the main ranking target; the dimension columns below make it easier to see
+        whether a system is strong because it cites more relevant, more accurate, fresher, more transparent, or more authoritative sources.
+      </p>
+      <ul class="metric-core">
+        <li><strong>Weighted Score.</strong> The main leaderboard score, combining the judged dimensions into one overall source-quality metric.</li>
+        <li><strong>Unweighted Mean.</strong> The simple average across the judged dimension scores, without weighting.</li>
+        <li><strong>% In SE.</strong> The percentage of cited GE sources that also appear in the matched search-engine source set.</li>
+      </ul>
+      <ul class="metric-defs">
+        <li><strong>Semantic Relevance.</strong> Whether the cited source is directly relevant to the query and answer.</li>
+        <li><strong>Factual Accuracy.</strong> Whether the cited source appears reliable and factually correct.</li>
+        <li><strong>Freshness.</strong> Whether the source is timely for the topic being answered.</li>
+        <li><strong>Objectivity / Tone.</strong> Whether the source is balanced rather than sensational or biased.</li>
+        <li><strong>Layout / Ad Density.</strong> Whether the page is usable and not overwhelmed by ads or clutter.</li>
+        <li><strong>Accountability.</strong> Whether the source clearly indicates ownership, responsibility, or editorial control.</li>
+        <li><strong>Transparency.</strong> Whether the source clearly presents provenance, disclosure, or supporting context.</li>
+        <li><strong>Authority.</strong> Whether the source appears credible and institutionally trustworthy for the topic.</li>
+      </ul>
+      <div class="tabs">
+        <button class="tab active" data-view="overall" type="button">Overall</button>
+        <button class="tab" data-view="by_query_type" type="button">By Query Type</button>
+      </div>
+      <section class="panel controls">
+        <label>
+          View
+          <select id="view-select">
+            <option value="overall">Overall</option>
+            <option value="by_query_type">By query type</option>
+          </select>
+        </label>
+        <label>
+          Sort by
+          <select id="sort-key">
+            <option value="weighted_total_content_score">Weighted score</option>
+            <option value="unweighted_mean_score">Unweighted mean</option>
+            <option value="percentage_ge_sources_in_se_sources">% In SE</option>
+          </select>
+        </label>
+        <label>
+          Filter model
+          <input id="search-input" type="search" placeholder="Search model name">
+        </label>
+      </section>
+      <div class="toggle-row">
+        <label class="toggle">
+          <input id="show-dimensions" type="checkbox">
+          <span>Show dimension scores</span>
+        </label>
+      </div>
+      <div class="section-head" style="margin-top:10px;">
+        <h3 id="table-title" style="font-size:1.1rem;">Overall ranking</h3>
+        <div class="micro" id="table-count">0 rows</div>
+      </div>
+      <div class="table-wrap">
+        <table id="leaderboard-table">
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+      <div class="footer-note" id="board-note">
+        Official leaderboard entries are validated and judged by the SourceBench team. The benchmark codebase and public evaluation pipeline are maintained separately in the SourceBench repository.
+      </div>
+      <div class="load-status" id="load-status">Loading leaderboard data...</div>
+    </section>
+    <section class="plain-section study-section" id="deepseek-study">
+      <div class="section-head">
+        <div>
+          <div class="section-kicker">DeepSeek Tool Study</div>
+          <h2 style="font-size:1.5rem;">DeepSeek variants with different search backends</h2>
+        </div>
+      </div>
+      <p class="study-copy">
+        SourceBench also includes a focused comparison of DeepSeek variants paired with different retrieval setups.
+        This is a separate study rather than part of the main model family ranking: the purpose is to isolate how
+        search backend choice and reasoning mode change citation quality, overlap with search results, and the final weighted source score.
+      </p>
+      <div class="study-list" id="deepseek-findings">
+        <div class="study-item"><strong>Load leaderboard data to see the DeepSeek tool study.</strong></div>
+      </div>
+      <div class="table-wrap">
+        <table id="deepseek-table">
+          <thead></thead>
+          <tbody></tbody>
+        </table>
+      </div>
+    </section>
+    <section class="plain-section" id="policy">
+      <div class="section-head">
+        <div>
+          <div class="section-kicker">Official Policy</div>
+          <h2 style="font-size:1.7rem;">How official leaderboard evaluation works</h2>
+        </div>
+      </div>
+      <div class="markdown-note">
+        <p><strong>Local self-check</strong> can be run with the public SourceBench benchmark code and the fixed public query split.</p>
+        <p><strong>Official leaderboard entries</strong> are not accepted from participant-computed final scores alone. Instead, entries are validated and judged by the SourceBench team.</p>
+        <p>For official evaluation, SourceBench uses hidden holdout queries, the fixed judging setup, and the fixed metric computation pipeline so that leaderboard rows remain comparable across systems.</p>
+      </div>
+    </section>
+    <section class="plain-section">
+      <div class="section-head">
+        <div>
+          <div class="section-kicker">Submission</div>
+          <h2 style="font-size:1.65rem;">What participants should submit</h2>
+        </div>
+      </div>
+      <div class="markdown-note">
+        <p><strong>Preferred submission: endpoint access.</strong> Submit the model endpoint, API key, model name, API format, and optional generation settings. The SourceBench team will run hidden queries, source collection, scraping, judging, and metric computation on our side.</p>
+        <p><strong>Fallback submission: answer + cited URL bundle.</strong> If endpoint access cannot be shared, submit per-query answer text together with cited URLs. The SourceBench team will run scraping, post-processing, judging, and metric computation server-side.</p>
+        <p><strong>Why these boundaries?</strong> They keep the standardized parts of the benchmark under SourceBench control. Official leaderboard entries are validated and judged by the SourceBench team, rather than accepted from participant-provided final scores.</p>
+        <p><strong>Benchmark repository and submission examples:</strong></p>
+        <ul>
+          <li><a href="https://github.com/WukLab/SourceBench" target="_blank" rel="noopener noreferrer">SourceBench benchmark repository</a></li>
+          <li><code>leaderboard/examples/endpoint_submission.example.json</code> in the benchmark repo</li>
+          <li><code>leaderboard/examples/answer_url_bundle.example.json</code> in the benchmark repo</li>
+        </ul>
+      </div>
+    </section>
+  </main>
+  <script src="./leaderboard_data.js"></script>
+  <script>
+    const state = {
+      payload: null,
+      currentView: "overall",
+      showDimensions: false,
+    };
+    const baseColumns = [
+      "model_name",
+      "query_type",
+      "weighted_total_content_score",
+      "unweighted_mean_score",
+      "percentage_ge_sources_in_se_sources",
+    ];
+    const dimensionColumns = [
+      "semantic_relevance",
+      "factual_accuracy",
+      "freshness",
+      "objectivity_tone",
+      "layout_ad_density",
+      "accountability",
+      "transparency",
+      "authority",
+    ];
+    const labels = {
+      model_name: "Model",
+      query_type: "Query Type",
+      weighted_total_content_score: "Weighted Score",
+      unweighted_mean_score: "Unweighted Mean",
+      percentage_ge_sources_in_se_sources: "% In SE",
+      semantic_relevance: "Semantic Relevance",
+      factual_accuracy: "Factual Accuracy",
+      freshness: "Freshness",
+      objectivity_tone: "Objectivity / Tone",
+      layout_ad_density: "Layout / Ad Density",
+      accountability: "Accountability",
+      transparency: "Transparency",
+      authority: "Authority",
+    };
+    const viewSelect = document.getElementById("view-select");
+    const sortKey = document.getElementById("sort-key");
+    const searchInput = document.getElementById("search-input");
+    const showDimensionsInput = document.getElementById("show-dimensions");
+    const tableTitle = document.getElementById("table-title");
+    const tableCount = document.getElementById("table-count");
+    const tableHead = document.querySelector("#leaderboard-table thead");
+    const tableBody = document.querySelector("#leaderboard-table tbody");
+    const findingsList = document.getElementById("findings-list");
+    const deepseekFindings = document.getElementById("deepseek-findings");
+    const deepseekTableHead = document.querySelector("#deepseek-table thead");
+    const deepseekTableBody = document.querySelector("#deepseek-table tbody");
+    const boardNote = document.getElementById("board-note");
+    const loadStatus = document.getElementById("load-status");
+    function formatNumber(value, digits = 2) {
+      if (value === null || value === undefined || value === "") return "-";
+      if (typeof value === "number") return value.toFixed(digits);
+      const parsed = Number(value);
+      if (!Number.isNaN(parsed)) return parsed.toFixed(digits);
+      return String(value);
+    }
+    function formatPacificTimestamp(value) {
+      if (!value) return "-";
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) return value;
+      return new Intl.DateTimeFormat("en-US", {
+        timeZone: "America/Los_Angeles",
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        timeZoneName: "short",
+      }).format(date);
+    }
+    function setLoadStatus(message, isError = false) {
+      loadStatus.textContent = message;
+      loadStatus.style.color = isError ? "#b91c1c" : "var(--muted)";
+    }
+    function updateTopStats(payload) {
+      const overall = payload.overall || [];
+      const byType = payload.by_query_type || [];
+      const top = overall[0];
+      document.getElementById("stat-models").textContent = overall.length;
+      document.getElementById("stat-query-types").textContent = new Set(byType.map((row) => row.query_type)).size;
+      document.getElementById("stat-top-model").textContent = top ? top.model_name : "-";
+      document.getElementById("stat-top-score").textContent = top ? formatNumber(top.weighted_total_content_score) : "-";
+      document.getElementById("stat-generated").textContent = formatPacificTimestamp(payload.metadata?.generated_at);
+    }
+    function computeFindings(payload) {
+      const overall = payload.overall || [];
+      const byType = payload.by_query_type || [];
+      if (!overall.length || !byType.length) {
+        return [{
+          title: "No findings available",
+          body: "Load a leaderboard artifact to generate summary findings."
+        }];
+      }
+      const top = overall[0];
+      const bestFreshness = [...overall].sort((a, b) => (b.freshness || 0) - (a.freshness || 0))[0];
+      const bestOverlap = [...overall]
+        .filter((row) => row.percentage_ge_sources_in_se_sources !== null && row.percentage_ge_sources_in_se_sources !== undefined)
+        .sort((a, b) => b.percentage_ge_sources_in_se_sources - a.percentage_ge_sources_in_se_sources)[0];
+      const qualityLeaders = {
+        transparency: [...overall].sort((a, b) => (b.transparency || 0) - (a.transparency || 0))[0],
+        authority: [...overall].sort((a, b) => (b.authority || 0) - (a.authority || 0))[0],
+        accountability: [...overall].sort((a, b) => (b.accountability || 0) - (a.accountability || 0))[0],
+      };
+      const groupedByType = new Map();
+      for (const row of byType) {
+        if (!groupedByType.has(row.query_type)) groupedByType.set(row.query_type, []);
+        groupedByType.get(row.query_type).push(row);
+      }
+      const typeAverages = Array.from(groupedByType.entries()).map(([queryType, rows]) => {
+        const avg = rows.reduce((sum, row) => sum + (row.weighted_total_content_score || 0), 0) / rows.length;
+        return { queryType, avg };
+      }).sort((a, b) => a.avg - b.avg);
+      const hardest = typeAverages[0];
+      const easiest = typeAverages[typeAverages.length - 1];
+      return [
+        {
+          title: "Overall source quality remains meaningfully separated across systems",
+          body: `${top.model_name} is the current overall leader with a weighted score of ${formatNumber(top.weighted_total_content_score)}. The spread across the current board suggests that citation quality is not saturated: systems still differ substantially once source relevance, accuracy, transparency, and authority are scored directly.`
+        },
+        {
+          title: "Question type matters, and multi-hop fact synthesis is still the hardest slice",
+          body: `Across the current artifact, ${hardest.queryType} has the lowest average weighted score (${formatNumber(hardest.avg)}), while ${easiest.queryType} is the easiest (${formatNumber(easiest.avg)}). This matches the broader SourceBench framing that harder query types expose source-selection weaknesses even when answers may still look fluent.`
+        },
+        {
+          title: "High search overlap is not the same thing as high source quality",
+          body: bestOverlap
+            ? `${bestOverlap.model_name} has the highest visible search overlap at ${formatNumber(bestOverlap.percentage_ge_sources_in_se_sources)}% In SE, but the best overall weighted score still belongs to ${top.model_name}. This mirrors the paper's emphasis that leaderboard quality should not be reduced to overlap with search results alone.`
+            : "The current artifact includes quality metrics beyond simple overlap with search-engine results, which is one of the main design points of SourceBench."
+        },
+        {
+          title: "Dimension scores reveal different strengths behind similar overall rankings",
+          body: `${bestFreshness.model_name} currently leads freshness at ${formatNumber(bestFreshness.freshness)}, while ${qualityLeaders.transparency.model_name}, ${qualityLeaders.authority.model_name}, and ${qualityLeaders.accountability.model_name} lead key trust-related dimensions such as transparency, authority, and accountability. These per-dimension columns make it easier to see why two systems with similar overall scores can still have very different citation profiles.`
+        }
+      ];
+    }
+    function renderFindings(payload) {
+      const findings = computeFindings(payload);
+      findingsList.innerHTML = "";
+      for (const finding of findings) {
+        const div = document.createElement("div");
+        div.className = "finding";
+        div.innerHTML = `<strong>${finding.title}</strong><span>${finding.body}</span>`;
+        findingsList.appendChild(div);
+      }
+    }
+    function renderDeepSeekStudy(payload) {
+      const rows = (payload.overall || [])
+        .filter((row) => typeof row.model_name === "string" && row.model_name.startsWith("deepseek"));
+      if (!rows.length) {
+        deepseekFindings.innerHTML = '<div class="study-item"><strong>No DeepSeek study rows found in the current artifact.</strong></div>';
+        deepseekTableHead.innerHTML = "";
+        deepseekTableBody.innerHTML = "";
+        return;
+      }
+      const sorted = [...rows].sort((a, b) => b.weighted_total_content_score - a.weighted_total_content_score);
+      const best = sorted[0];
+      const genseeRows = sorted.filter((row) => row.model_name.includes("gensee"));
+      const tavilyRows = sorted.filter((row) => row.model_name.includes("tavily"));
+      const avg = (items, key) => items.length ? items.reduce((sum, item) => sum + (item[key] || 0), 0) / items.length : null;
+      const genseeAvg = avg(genseeRows, "weighted_total_content_score");
+      const tavilyAvg = avg(tavilyRows, "weighted_total_content_score");
+      const reasoningRows = sorted.filter((row) => row.model_name.includes("reasoning"));
+      const chatRows = sorted.filter((row) => row.model_name.includes("chat-"));
+      const reasoningAvg = avg(reasoningRows, "weighted_total_content_score");
+      const chatAvg = avg(chatRows, "weighted_total_content_score");
+      deepseekFindings.innerHTML = `
+        <div class="study-item"><strong>Best DeepSeek variant in the current artifact: ${best.model_name}</strong> with a weighted score of ${formatNumber(best.weighted_total_content_score)} and % In SE of ${formatNumber(best.percentage_ge_sources_in_se_sources)}.</div>
+        <div class="study-item"><strong>Backend choice changes citation quality materially.</strong> The Gensee-backed variants average ${formatNumber(genseeAvg)} weighted score, while the Tavily-backed variants average ${formatNumber(tavilyAvg)}.</div>
+        <div class="study-item"><strong>Reasoning mode does not dominate by itself.</strong> In this artifact, reasoning variants average ${formatNumber(reasoningAvg)} weighted score versus ${formatNumber(chatAvg)} for chat variants, suggesting that retrieval setup and source selection quality still matter directly.</div>
+      `;
+      const cols = ["model_name", "weighted_total_content_score", "unweighted_mean_score", "percentage_ge_sources_in_se_sources"];
+      deepseekTableHead.innerHTML = `<tr>${cols.map((key) => `<th>${labels[key] || key}</th>`).join("")}</tr>`;
+      deepseekTableBody.innerHTML = sorted.map((row) => `
+        <tr>
+          ${cols.map((key) => `<td>${typeof row[key] === "number" ? formatNumber(row[key]) : (row[key] ?? "-")}</td>`).join("")}
+        </tr>
+      `).join("");
+    }
+    function getRows() {
+      if (!state.payload) return [];
+      let rows = state.currentView === "overall"
+        ? [...(state.payload.overall || [])]
+        : [...(state.payload.by_query_type || [])];
+      const q = searchInput.value.trim().toLowerCase();
+      if (q) {
+        rows = rows.filter((row) => String(row.model_name || "").toLowerCase().includes(q));
+      }
+      const metric = sortKey.value;
+      rows.sort((a, b) => {
+        const av = Number(a[metric]);
+        const bv = Number(b[metric]);
+        const aa = Number.isNaN(av) ? -Infinity : av;
+        const bb = Number.isNaN(bv) ? -Infinity : bv;
+        if (bb !== aa) return bb - aa;
+        return String(a.model_name || "").localeCompare(String(b.model_name || ""));
+      });
+      return rows;
+    }
+    function renderTable() {
+      const rows = getRows();
+      const cols = [
+        ...(state.currentView === "overall" ? baseColumns.filter((key) => key !== "query_type") : baseColumns),
+        ...(state.showDimensions ? dimensionColumns : []),
+      ];
+      tableTitle.textContent = state.currentView === "overall" ? "Overall ranking" : "Ranking by query type";
+      tableCount.textContent = `${rows.length} rows`;
+      tableHead.innerHTML = `<tr>${cols.map((key) => `<th>${labels[key] || key}</th>`).join("")}</tr>`;
+      tableBody.innerHTML = rows.map((row) => `
+        <tr>
+          ${cols.map((key) => {
+            const val = row[key];
+            const rendered = typeof val === "number" ? formatNumber(val) : (val ?? "-");
+            return `<td>${rendered}</td>`;
+          }).join("")}
+        </tr>
+      `).join("");
+    }
+    function applyPayload(payload) {
+      state.payload = payload;
+      updateTopStats(payload);
+      renderFindings(payload);
+      renderDeepSeekStudy(payload);
+      renderTable();
+      setLoadStatus("Leaderboard data loaded.");
+    }
+    async function autoLoad() {
+      if (window.SOURCEBENCH_PAYLOAD) {
+        applyPayload(window.SOURCEBENCH_PAYLOAD);
+        return;
+      }
+      try {
+        const response = await fetch("./leaderboard_data.json", { cache: "no-store" });
+        if (!response.ok) throw new Error("No local leaderboard_data.json found next to index.html");
+        const payload = await response.json();
+        applyPayload(payload);
+      } catch (error) {
+        console.error(error);
+        setLoadStatus("Could not load leaderboard data.", true);
+      }
+    }
+    for (const tab of document.querySelectorAll(".tab")) {
+      tab.addEventListener("click", () => {
+        state.currentView = tab.dataset.view;
+        viewSelect.value = state.currentView;
+        document.querySelectorAll(".tab").forEach((node) => node.classList.toggle("active", node === tab));
+        renderTable();
+      });
+    }
+    viewSelect.addEventListener("change", (event) => {
+      state.currentView = event.target.value;
+      document.querySelectorAll(".tab").forEach((node) => node.classList.toggle("active", node.dataset.view === state.currentView));
+      renderTable();
+    });
+    sortKey.addEventListener("change", renderTable);
+    searchInput.addEventListener("input", renderTable);
+    showDimensionsInput.addEventListener("change", (event) => {
+      state.showDimensions = event.target.checked;
+      renderTable();
+    });
+    autoLoad();
+  </script>
+</body>
+</html>

leaderboard_data.js ADDED Viewed

The diff for this file is too large to render. See raw diff

leaderboard_data.json ADDED Viewed

The diff for this file is too large to render. See raw diff

wuklab_logo.png ADDED Viewed