Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/failure_analysis.png filter=lfs diff=lfs merge=lfs -text
+assets/games_overview_updated.png filter=lfs diff=lfs merge=lfs -text
+assets/tier_overview.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,18 @@
 ---
-title: LudoBench
-emoji: 💻
-colorFrom: indigo
-colorTo: gray
+title: "LudoBench: Board Game Reasoning Benchmark"
+emoji: "\U0001F3B2"
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LudoBench
+
+A multimodal board-game reasoning benchmark evaluating LLM/VLM reasoning across 5 strategy games and 3 difficulty tiers.
+
+- 638 annotated QA pairs
+- 5 games: Kingdomino, Res Arcana, Pax Renaissance, Carcassonne, Catan
+- 3 tiers: Environment Perception, Rules Integration, Short-Horizon Optimization
+- 9 models benchmarked across 3 modalities (None, Text, Image)

css/leaderboard.css

@@ -0,0 +1,175 @@
+/* ---- Filter controls ---- */
+#leaderboard-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.filter-label {
+  font-size: 0.85rem;
+  color: #666;
+  font-weight: 600;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 4px;
+}
+
+.filter-btn {
+  background: #f0f2f5;
+  border: 1px solid #ccc;
+  color: #555;
+  font-size: 0.8rem;
+  padding: 5px 12px;
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+  width: auto;
+  height: auto;
+  display: inline-flex;
+}
+
+.filter-btn:hover { background: #e4e6ea; color: #333; }
+.filter-btn.active { background: #2563b1; color: #fff; border-color: #2563b1; }
+
+/* ---- Table wrapper ---- */
+#leaderboard-table-wrap {
+  overflow-x: auto;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: #fff;
+}
+
+/* ---- Table ---- */
+#leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
+
+#leaderboard-table th,
+#leaderboard-table td {
+  padding: 8px 12px;
+  text-align: center;
+  border-bottom: 1px solid #eee;
+}
+
+/* Game group header row */
+#leaderboard-table thead tr.game-header th {
+  background: #f5f6f8;
+  color: #333;
+  font-size: 0.82rem;
+  font-weight: 700;
+  border-bottom: 2px solid #ddd;
+  border-left: 1px solid #ddd;
+}
+
+#leaderboard-table thead tr.game-header th:first-child {
+  border-left: none;
+}
+
+/* Sub-header row (modalities) */
+#leaderboard-table thead tr.mod-header th {
+  background: #fafbfc;
+  color: #666;
+  font-size: 0.78rem;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  border-left: 1px solid #eee;
+}
+
+#leaderboard-table thead tr.mod-header th:hover {
+  color: #222;
+  background: #f0f1f3;
+}
+
+.sort-arrow {
+  font-size: 0.7rem;
+  margin-left: 3px;
+  color: #bbb;
+}
+
+.sort-arrow.active { color: #2563b1; }
+
+/* Model name column */
+#leaderboard-table thead tr.mod-header th:first-child {
+  text-align: left;
+  cursor: default;
+  border-left: none;
+}
+
+#leaderboard-table td.model-cell {
+  text-align: left;
+  font-weight: 600;
+  color: #1a1a1a;
+  background: #fafbfc;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  border-right: 1px solid #ddd;
+}
+
+/* Tier label within model cell */
+.tier-tag {
+  font-size: 0.72rem;
+  color: #999;
+  font-weight: 400;
+  margin-left: 6px;
+}
+
+/* Heatmap cell */
+#leaderboard-table td.score-cell {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  border-left: 1px solid #f0f0f0;
+}
+
+#leaderboard-table td.score-cell.null-cell {
+  color: #ccc;
+  background: #fafafa;
+}
+
+/* Average column */
+#leaderboard-table th.avg-col,
+#leaderboard-table td.avg-col {
+  border-right: 2px solid #ccc;
+  font-weight: 700;
+}
+
+/* Tier group separator row */
+#leaderboard-table tbody tr.tier-separator td {
+  background: #e8edf3;
+  color: #2563b1;
+  font-weight: 700;
+  font-size: 0.82rem;
+  text-align: left;
+  padding: 6px 12px;
+  border-bottom: 2px solid #c0cfe0;
+  border-top: 1px solid #c0cfe0;
+  letter-spacing: 0.02em;
+}
+
+#leaderboard-table tbody tr.tier-separator:first-child td {
+  border-top: none;
+}
+
+/* Row hover */
+#leaderboard-table tbody tr:hover:not(.tier-separator) td {
+  filter: brightness(0.96);
+}
+
+/* ---- Responsive ---- */
+@media (max-width: 700px) {
+  #leaderboard-filters { gap: 10px; }
+  .filter-buttons { flex-wrap: wrap; }
+}

css/main.css

@@ -0,0 +1,328 @@
+/* Global reset */
+* { box-sizing: border-box; }
+html { font-size: 16px; }
+
+body {
+  margin: 0;
+  padding: 0;
+  background: #f8f9fa;
+  color: #1a1a1a;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* ---- Navigation ---- */
+#topNav {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 24px;
+  height: 54px;
+  background: #fff;
+  border-bottom: 1px solid #ddd;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+}
+
+.nav-brand {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin-right: 12px;
+  white-space: nowrap;
+}
+
+.nav-tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.tab-btn {
+  background: transparent;
+  border: none;
+  color: #666;
+  font-size: 0.9rem;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  width: auto;
+  height: auto;
+  display: inline-flex;
+}
+
+.tab-btn:hover { background: #f0f0f0; color: #333; }
+.tab-btn.active { background: #e8e8e8; color: #111; }
+
+.nav-links {
+  display: flex;
+  gap: 8px;
+}
+
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: #444;
+  text-decoration: none;
+  font-family: inherit;
+  font-size: 0.82rem;
+  font-weight: 500;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid #ddd;
+  background: #f8f9fa;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.nav-badge:hover {
+  background: #eef0f3;
+  border-color: #bbb;
+}
+
+.nav-icon {
+  height: 16px;
+  width: auto;
+}
+
+/* ---- Tab panels ---- */
+main { padding: 24px 32px; }
+
+.tab-panel { display: none; }
+.tab-panel.active { display: block; }
+
+.tab-subtitle {
+  color: #666;
+  margin-top: 0;
+  margin-bottom: 20px;
+  font-size: 0.95rem;
+}
+
+/* ---- About / Overview page ---- */
+.about-content {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.about-content h2 {
+  text-align: center;
+  margin-top: 0;
+  font-size: 1.5rem;
+  color: #1a1a1a;
+}
+
+.venue-tag {
+  font-size: 0.75em;
+  font-weight: 600;
+  color: #2563b1;
+  white-space: nowrap;
+}
+
+.about-badges {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+
+.about-section {
+  margin-bottom: 32px;
+}
+
+.about-section h3 {
+  text-align: center;
+  font-size: 1.15rem;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.about-section p,
+.about-section li {
+  line-height: 1.7;
+  color: #444;
+}
+
+.about-section ul {
+  padding-left: 20px;
+}
+
+.about-section a {
+  color: #2563b1;
+}
+
+.tier-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 12px;
+}
+
+.tier-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.tier-card h4 {
+  margin: 0 0 6px;
+  font-size: 0.95rem;
+  color: #1a1a1a;
+}
+
+.tier-card p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #555;
+}
+
+.game-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 10px;
+}
+
+.game-card {
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 14px;
+}
+
+.game-card strong { color: #1a1a1a; }
+
+.game-card p {
+  margin: 4px 0 0;
+  font-size: 0.85rem;
+  color: #555;
+}
+
+.overview-img {
+  display: block;
+  width: 100%;
+  max-width: 900px;
+  height: auto;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  margin: 12px auto;
+}
+
+.overview-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  margin: 12px auto;
+}
+
+.overview-table th,
+.overview-table td {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  text-align: left;
+}
+
+.overview-table th {
+  background: #f0f2f5;
+  font-weight: 600;
+  color: #333;
+}
+
+.overview-table td {
+  color: #444;
+}
+
+.citation-block {
+  background: #f0f2f5;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  font-size: 0.85rem;
+  color: #333;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* ---- BibTeX button & modal ---- */
+.bibtex-modal {
+  display: none;
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.4);
+  z-index: 200;
+  justify-content: center;
+  align-items: center;
+}
+
+.bibtex-modal.open {
+  display: flex;
+}
+
+.bibtex-modal-content {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
+  padding: 24px;
+  max-width: 640px;
+  width: 90%;
+}
+
+.bibtex-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  font-weight: 600;
+  font-size: 1rem;
+  color: #1a1a1a;
+}
+
+.bibtex-close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #666;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.bibtex-close:hover { color: #111; }
+
+.bibtex-code {
+  background: #f0f2f5;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  font-size: 0.82rem;
+  color: #333;
+  overflow-x: auto;
+  white-space: pre;
+  margin: 0 0 12px;
+}
+
+.bibtex-copy-btn {
+  display: block;
+  margin: 0 auto;
+  padding: 8px 20px;
+  background: #2563b1;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.bibtex-copy-btn:hover { background: #1d4f91; }
+
+/* ---- Responsive ---- */
+@media (max-width: 700px) {
+  #topNav { flex-wrap: wrap; height: auto; padding: 10px 16px; }
+  .nav-tabs { width: 100%; justify-content: center; }
+  .nav-links { width: 100%; justify-content: center; }
+  main { padding: 16px; }
+}

css/viewer.css

@@ -0,0 +1,177 @@
+/* Dataset browser styles — light theme */
+
+/* Top controls */
+#tab-browser #controls {
+  margin-bottom: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+#tab-browser label {
+  font-size: 1rem;
+}
+
+#tab-browser select,
+#tab-browser input {
+  font-size: 1rem;
+  background: #fff;
+  color: #1a1a1a;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  padding: 8px 12px;
+}
+
+#navButtons {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+#tab-browser button {
+  font-size: 1rem;
+  width: 100px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: #e8e8e8;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+#tab-browser button:hover { background: #ddd; }
+
+/* Layout (2 columns) */
+#layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: 15px;
+}
+
+/* Question section */
+#questionCard {
+  font-size: 1.2rem;
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
+
+.id-tag {
+  font-size: 0.8em;
+  color: #888;
+}
+
+.question-label {
+  font-weight: bold;
+  color: #c0392b;
+  font-size: 1.2rem;
+}
+
+.question-text {
+  font-size: 1.2rem;
+  line-height: 1.8;
+}
+
+/* Answer block */
+#answerBlock {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+}
+
+.answer-info { margin-top: 8px; }
+.answer-info.correct { color: #27ae60; }
+.answer-info.wrong { color: #c0392b; }
+
+details { margin-top: 10px; }
+
+/* Right side image container */
+#imageContainer {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#imageContainer.hidden { display: none; }
+
+/* Multi-image layout */
+#multiImages {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.multi-img-block {
+  background: #f8f9fa;
+  padding: 12px;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.multi-img-block img {
+  width: 900px;
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  border-radius: 10px;
+  border: 1px solid #ccc;
+  display: block;
+}
+
+.multi-img-caption {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #888;
+}
+
+/* Spinner */
+.spinner {
+  margin: 10px auto;
+  width: 38px;
+  height: 38px;
+  border: 4px solid #ddd;
+  border-top-color: #2563b1;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Preformatted JSON */
+#tab-browser pre {
+  background: #f0f2f5;
+  padding: 15px;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.full-img-link {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #2563b1;
+  text-decoration: none;
+}
+.full-img-link:hover { text-decoration: underline; }
+
+/* Responsive */
+@media (max-width: 700px) {
+  #layout {
+    grid-template-columns: 1fr;
+  }
+}

index.html

@@ -1,19 +1,296 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>LudoBench: Board Game Reasoning Benchmark</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="stylesheet" href="css/main.css" />
+  <link rel="stylesheet" href="css/leaderboard.css" />
+  <link rel="stylesheet" href="css/viewer.css" />
+</head>
+<body>
+
+  <nav id="topNav">
+    <div class="nav-brand">LudoBench</div>
+    <div class="nav-tabs">
+      <button class="tab-btn active" data-tab="about">LudoBench Overview</button>
+      <button class="tab-btn" data-tab="leaderboard">Leaderboard</button>
+      <button class="tab-btn" data-tab="browser">Dataset Browser</button>
+    </div>
+    <div class="nav-links">
+      <a href="https://openreview.net/forum?id=TOgQ00DEek" target="_blank" class="nav-badge">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/ArXiv_logo_2022.svg" alt="arXiv" class="nav-icon" />
+        Paper
+      </a>
+      <a href="https://huggingface.co/datasets/launch/LudoBench" target="_blank" class="nav-badge">
+        <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="HF" class="nav-icon" />
+        Dataset
+      </a>
+      <a href="https://github.com/jpeper/LudoBench" target="_blank" class="nav-badge">
+        <svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        GitHub
+      </a>
+      <button class="nav-badge bibtex-btn" onclick="toggleBibtex()">
+        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+        BibTeX
+      </button>
+    </div>
+  </nav>
+
+  <!-- BibTeX Modal -->
+  <div id="bibtexModal" class="bibtex-modal" onclick="if(event.target===this)toggleBibtex()">
+    <div class="bibtex-modal-content">
+      <div class="bibtex-modal-header">
+        <span>BibTeX Citation</span>
+        <button class="bibtex-close" onclick="toggleBibtex()">&times;</button>
+      </div>
+      <pre id="bibtexCode" class="bibtex-code">@inproceedings{peper2026ludobench,
+  title={{LLMs} as Rules Oracles: Exploring Real-World Multimodal Reasoning in Tabletop Strategy Game Environments},
+  author={Peper, Joseph J. and Gandra, Sai Krishna and Zhang, Yunxiang and Chennareddy, Vaibhav and Jha, Shloki and Payani, Ali and Wang, Lu},
+  booktitle={Proceedings of the Fourteenth International Conference on Learning Representations (ICLR)},
+  year={2026},
+  address={Rio de Janeiro, Brazil}
+}</pre>
+      <button class="bibtex-copy-btn" onclick="copyBibtex()">Copy to Clipboard</button>
+    </div>
+  </div>
+
+  <main>
+
+    <!-- ==================== LEADERBOARD TAB ==================== -->
+    <section id="tab-leaderboard" class="tab-panel">
+      <h2>Leaderboard</h2>
+      <p class="tab-subtitle">
+        Accuracy of multimodal models across <strong>5 board games</strong>,
+        <strong>3 reasoning tiers</strong>, and <strong>3 rulebook modalities</strong>.
+        Click any column header to sort.
+      </p>
+
+      <div id="leaderboard-filters">
+        <div class="filter-group">
+          <span class="filter-label">Tier:</span>
+          <div class="filter-buttons" data-filter="tier">
+            <button class="filter-btn active" data-value="all">All</button>
+            <button class="filter-btn" data-value="T1">T1</button>
+            <button class="filter-btn" data-value="T2">T2</button>
+            <button class="filter-btn" data-value="T3">T3</button>
+          </div>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">Game:</span>
+          <div class="filter-buttons" data-filter="game">
+            <button class="filter-btn active" data-value="all">All</button>
+            <button class="filter-btn" data-value="KingD">Kingdomino</button>
+            <button class="filter-btn" data-value="Res Arcana">Res Arcana</button>
+            <button class="filter-btn" data-value="Pax Ren.">Pax Ren.</button>
+            <button class="filter-btn" data-value="Carca.">Carcassonne</button>
+            <button class="filter-btn" data-value="Catan">Catan</button>
+          </div>
+        </div>
+        <div class="filter-group">
+          <span class="filter-label">Rules Modality:</span>
+          <div class="filter-buttons" data-filter="modality">
+            <button class="filter-btn active" data-value="all">All</button>
+            <button class="filter-btn" data-value="None">None</button>
+            <button class="filter-btn" data-value="Text">Text</button>
+            <button class="filter-btn" data-value="Image">Image</button>
+          </div>
+        </div>
+      </div>
+
+      <div id="leaderboard-table-wrap">
+        <table id="leaderboard-table">
+          <thead id="leaderboard-thead"></thead>
+          <tbody id="leaderboard-tbody"></tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- ==================== DATASET BROWSER TAB ==================== -->
+    <section id="tab-browser" class="tab-panel">
+      <h2>Dataset Browser</h2>
+      <p class="tab-subtitle">Browse 638 annotated QA examples across 5 games and 3 difficulty tiers.</p>
+
+      <div id="controls">
+        <label>
+          Folder:
+          <select id="folderSelect"></select>
+        </label>
+        <label>
+          Example:
+          <select id="fileSelect"></select>
+        </label>
+        <div id="navButtons">
+          <button id="prevBtn"><span class="icon">&laquo;</span> Prev</button>
+          <button id="nextBtn">Next <span class="icon">&raquo;</span></button>
+        </div>
+      </div>
+
+      <div id="layout">
+        <div>
+          <div id="questionCard">Loading&hellip;</div>
+          <div id="answerBlock">
+            <label for="answerInput">Your answer:</label>
+            <input id="answerInput" type="text" />
+            <button id="checkButton">Check</button>
+            <div id="answerInfo" class="answer-info"></div>
+            <details>
+              <summary>Show solution</summary>
+              <div id="solutionText"></div>
+            </details>
+          </div>
+        </div>
+        <div>
+          <div id="imageContainer" class="image-wrapper hidden">
+            <h3>Game state</h3>
+            <div id="multiImages"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ==================== ABOUT TAB ==================== -->
+    <section id="tab-about" class="tab-panel active">
+      <div class="about-content">
+        <h2>LLMs as Rules Oracles: Exploring Real-World Multimodal Reasoning in Tabletop Strategy Game Environments <span class="venue-tag">[ICLR 2026]</span></h2>
+
+        <div class="about-badges">
+          <a href="https://openreview.net/forum?id=TOgQ00DEek" target="_blank" class="nav-badge">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/ArXiv_logo_2022.svg" alt="arXiv" class="nav-icon" />
+            Paper
+          </a>
+          <a href="https://huggingface.co/datasets/launch/LudoBench" target="_blank" class="nav-badge">
+            <img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="HF" class="nav-icon" />
+            Dataset
+          </a>
+          <a href="https://github.com/jpeper/LudoBench" target="_blank" class="nav-badge">
+            <svg class="nav-icon" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+            GitHub
+          </a>
+          <button class="nav-badge bibtex-btn" onclick="toggleBibtex()">
+            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+            BibTeX
+          </button>
+        </div>
+
+        <div class="about-section">
+          <h3>Abstract</h3>
+          <p>
+            We introduce <strong>LudoBench</strong>, a multimodal reasoning benchmark that evaluates whether vision-enabled large language models (LMs) can acquire, integrate, and reason over heterogeneous game knowledge in <strong>mainstream analog tabletop games</strong>. Unlike prior works that emphasize deep strategic mastery, LudoBench targets an initial reasoning challenge uninitiated gamers face: <strong>correctly comprehending a new tabletop strategy game for the first time</strong>. We examine whether, given a visual depiction of a tabletop scene and a corresponding ruleset, a model can correctly answer grounded questions about the pictured scenario.
+          </p>
+          <p>Concretely, LudoBench tests three cumulative situated game-comprehension capabilities:</p>
+          <ul>
+            <li><strong>Tier 1: Environment Perception</strong> &mdash; recognizing objects, counting components, and identifying basic game state features</li>
+            <li><strong>Tier 2: Heterogeneous Rules Integration</strong> &mdash; applying multimodal rulebook knowledge to answer grounded questions</li>
+            <li><strong>Tier 3: Short-Horizon Optimization</strong> &mdash; planning optimal moves requiring strategic reasoning over game mechanics</li>
+          </ul>
+          <p>These progressively stress-test the foundational reasoning required for real-world game comprehension.</p>
+          <p>
+            Evaluating frontier LMs on five diverse strategy games, we find that even the strongest models achieve only <strong>~76% accuracy</strong> on simple T1 environment perception tasks and fall below <strong>13%</strong> on situated T3 multi-step comprehension puzzles that hobbyist gamers can routinely solve. Our extensive failure analysis and knowledge-ablation experiments reveal that models largely <strong>fail to comprehend rich cross-modal reference knowledge</strong> and are subsequently unable to apply this knowledge to messy and unfamiliar situated environments. Our findings highlight the many steps remaining for current methods to succeed on complex multimodal reasoning in the real world.
+          </p>
+        </div>
+
+        <div class="about-section">
+          <h3>Games Overview</h3>
+          <p>
+            The dataset consists of five tabletop strategy games that vary widely in complexity, components, and rule structure. The details of each game&mdash;along with representative sample game states&mdash;are shown below.
+          </p>
+          <img src="assets/games_overview_updated.png" alt="Games Overview" class="overview-img" />
+          <table class="overview-table">
+            <thead>
+              <tr>
+                <th>Game</th>
+                <th>Rulebook</th>
+                <th>Diff.</th>
+                <th>Unique Game Properties</th>
+                <th># Rules</th>
+                <th># Figs.</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr><td><em>Kingdomino</em></td><td>4 pg.</td><td>1.2</td><td>tile-laying, spatial scoring, individual player areas</td><td>35</td><td>6</td></tr>
+              <tr><td><em>Carcassonne</em></td><td>8 pg.</td><td>1.9</td><td>shared tile-laying, dynamic board topology, position-coded roles</td><td>39</td><td>30</td></tr>
+              <tr><td><em>Catan</em></td><td>16 pg.</td><td>2.3</td><td>network building, connectivity constraints, action chaining</td><td>44</td><td>19</td></tr>
+              <tr><td><em>Res Arcana</em></td><td>12 pg.</td><td>2.6</td><td>card-based interactions, heavy symbol usage, card orientation, action sequencing</td><td>112</td><td>31</td></tr>
+              <tr><td><em>Pax Ren. (2e)</em></td><td>44 pg.</td><td>4.6</td><td>shared map, private cards/tableau, large number of components, intricate ruleset</td><td>247</td><td>58</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="about-section">
+          <h3>Tiers Overview</h3>
+          <p>
+            The benchmark evaluates models across three tiered reasoning levels that progressively increase in difficulty, from basic visual perception to rule integration and short-horizon planning. An example of how questions differ for each tier in Kingdomino is shown below:
+          </p>
+          <img src="assets/tier_overview.png" alt="Tier-wise Q&A Example" class="overview-img" />
+        </div>
+
+        <div class="about-section">
+          <h3>Knowledge Ablation: Rules Modalities</h3>
+          <p>
+            A central question in LudoBench is whether models can acquire and apply game rules from different knowledge sources.
+            To investigate this, every question is evaluated under three <strong>rules modality</strong> conditions that vary what reference knowledge is provided alongside the game-state image and question:
+          </p>
+          <div class="tier-cards">
+            <div class="tier-card">
+              <h4>None (Parametric)</h4>
+              <p>No rulebook is provided. The model must rely entirely on <strong>parametric knowledge</strong> &mdash; whatever it has internalized about the game from pretraining. This baseline reveals how much a model already "knows" about a game's rules.</p>
+            </div>
+            <div class="tier-card">
+              <h4>Text Rules</h4>
+              <p>The game's rulebook is provided as <strong>extracted text</strong> in the prompt context. This tests whether explicit textual rule descriptions improve situated reasoning, and whether models can ground text-based rules against a visual game state.</p>
+            </div>
+            <div class="tier-card">
+              <h4>Image Rules</h4>
+              <p>The rulebook is provided as <strong>images of the original pages</strong>, including diagrams, icons, and annotated examples. This tests the model's ability to extract and apply rules from rich, cross-modal visual documents &mdash; the format real players actually encounter.</p>
+            </div>
+          </div>
+          <p>
+            Across all three conditions, models consistently struggle to comprehend cross-modal reference knowledge. Notably, providing rulebook content &mdash; whether as text or images &mdash; does not uniformly improve performance, revealing fundamental gaps in how models integrate heterogeneous knowledge with situated visual environments.
+          </p>
+        </div>
+
+        <div class="about-section">
+          <h3>Failure Analysis</h3>
+          <p>
+            We analyze where models go wrong by collecting common failure cases across multiple models and organizing them for visualization on Kingdomino. The table below summarizes the relevant rulebook rules, supporting annotations, and the observed model errors for each failure pattern.
+          </p>
+          <img src="assets/failure_analysis.png" alt="Failure Analysis" class="overview-img" />
+        </div>
+
+        <div class="about-section">
+          <h3>Citation</h3>
+          <pre class="citation-block">@inproceedings{peper2026ludobench,
+  title={{LLMs} as Rules Oracles: Exploring Real-World Multimodal Reasoning in Tabletop Strategy Game Environments},
+  author={Peper, Joseph J. and Gandra, Sai Krishna and Zhang, Yunxiang and Chennareddy, Vaibhav and Jha, Shloki and Payani, Ali and Wang, Lu},
+  booktitle={Proceedings of the Fourteenth International Conference on Learning Representations (ICLR)},
+  year={2026},
+  address={Rio de Janeiro, Brazil}
+}</pre>
+        </div>
+
+      </div>
+    </section>
+
+  </main>
+
+  <script src="js/leaderboard-data.js"></script>
+  <script src="js/leaderboard.js"></script>
+  <script src="js/viewer.js"></script>
+  <script src="js/app.js"></script>
+  <script>
+    function toggleBibtex() {
+      var m = document.getElementById("bibtexModal");
+      m.classList.toggle("open");
+    }
+    function copyBibtex() {
+      var text = document.getElementById("bibtexCode").textContent;
+      navigator.clipboard.writeText(text).then(function() {
+        var btn = document.querySelector(".bibtex-copy-btn");
+        btn.textContent = "Copied!";
+        setTimeout(function() { btn.textContent = "Copy to Clipboard"; }, 2000);
+      });
+    }
+  </script>
+</body>
 </html>

js/app.js

@@ -0,0 +1,31 @@
+// Tab navigation and initialization controller.
+
+document.addEventListener("DOMContentLoaded", () => {
+  const tabs = document.querySelectorAll(".tab-btn");
+  const panels = document.querySelectorAll(".tab-panel");
+
+  tabs.forEach(btn => {
+    btn.addEventListener("click", () => {
+      const target = btn.dataset.tab;
+
+      tabs.forEach(t => t.classList.remove("active"));
+      panels.forEach(p => p.classList.remove("active"));
+
+      btn.classList.add("active");
+      document.getElementById("tab-" + target).classList.add("active");
+
+      // Lazy-init on first access
+      if (target === "browser" && typeof initViewer === "function") {
+        initViewer();
+      }
+      if (target === "leaderboard" && typeof initLeaderboard === "function") {
+        initLeaderboard();
+      }
+    });
+  });
+
+  // Initialize leaderboard on page load
+  if (typeof initLeaderboard === "function") {
+    initLeaderboard();
+  }
+});

js/leaderboard-data.js

@@ -0,0 +1,50 @@
+// Auto-generated from figure3_master_heatmap.csv
+// Structure: array of { model, tier, scores: { "Game|Modality": value } }
+
+const GAMES = ["KingD", "Res Arcana", "Pax Ren.", "Carca.", "Catan"];
+const GAME_LABELS = {
+  "KingD": "Kingdomino",
+  "Res Arcana": "Res Arcana",
+  "Pax Ren.": "Pax Renaissance",
+  "Carca.": "Carcassonne",
+  "Catan": "Catan"
+};
+const MODALITIES = ["None", "Text", "Image"];
+const TIERS = ["T1", "T2", "T3"];
+const TIER_LABELS = {
+  "T1": "Tier 1: Environment Perception",
+  "T2": "Tier 2: Rules Integration",
+  "T3": "Tier 3: Short-Horizon Optimization"
+};
+
+const BENCHMARK_DATA = [
+  { model: "GPT-4o", tier: "T1", scores: { "KingD|None": 0.381, "KingD|Text": 0.571, "KingD|Image": 0.429, "Res Arcana|None": 0.650, "Res Arcana|Text": 0.650, "Res Arcana|Image": 0.575, "Pax Ren.|None": 0.375, "Pax Ren.|Text": 0.475, "Pax Ren.|Image": 0.600, "Carca.|None": 0.425, "Carca.|Text": 0.350, "Carca.|Image": 0.400, "Catan|None": 0.450, "Catan|Text": 0.450, "Catan|Image": 0.450 } },
+  { model: "o1", tier: "T1", scores: { "KingD|None": 0.524, "KingD|Text": 0.429, "KingD|Image": 0.429, "Res Arcana|None": 0.675, "Res Arcana|Text": 0.525, "Res Arcana|Image": 0.600, "Pax Ren.|None": 0.450, "Pax Ren.|Text": 0.550, "Pax Ren.|Image": 0.475, "Carca.|None": 0.450, "Carca.|Text": 0.450, "Carca.|Image": 0.375, "Catan|None": 0.475, "Catan|Text": 0.550, "Catan|Image": 0.550 } },
+  { model: "GPT-4.1", tier: "T1", scores: { "KingD|None": 0.619, "KingD|Text": 0.524, "KingD|Image": 0.619, "Res Arcana|None": 0.775, "Res Arcana|Text": 0.725, "Res Arcana|Image": 0.750, "Pax Ren.|None": 0.525, "Pax Ren.|Text": 0.575, "Pax Ren.|Image": 0.600, "Carca.|None": 0.575, "Carca.|Text": 0.400, "Carca.|Image": 0.475, "Catan|None": 0.575, "Catan|Text": 0.450, "Catan|Image": 0.650 } },
+  { model: "o3", tier: "T1", scores: { "KingD|None": 0.750, "KingD|Text": 0.675, "KingD|Image": 0.650, "Res Arcana|None": 0.775, "Res Arcana|Text": 0.775, "Res Arcana|Image": 0.700, "Pax Ren.|None": 0.475, "Pax Ren.|Text": 0.675, "Pax Ren.|Image": 0.650, "Carca.|None": 0.450, "Carca.|Text": 0.500, "Carca.|Image": 0.575, "Catan|None": 0.600, "Catan|Text": 0.575, "Catan|Image": 0.550 } },
+  { model: "GPT-5.1", tier: "T1", scores: { "KingD|None": 0.750, "KingD|Text": 0.650, "KingD|Image": 0.675, "Res Arcana|None": 0.775, "Res Arcana|Text": 0.800, "Res Arcana|Image": 0.800, "Pax Ren.|None": 0.600, "Pax Ren.|Text": 0.600, "Pax Ren.|Image": 0.650, "Carca.|None": 0.725, "Carca.|Text": 0.525, "Carca.|Image": 0.550, "Catan|None": 0.600, "Catan|Text": 0.575, "Catan|Image": 0.575 } },
+  { model: "Gemini 2.5 Flash", tier: "T1", scores: { "KingD|None": 0.524, "KingD|Text": 0.476, "KingD|Image": 0.381, "Res Arcana|None": 0.675, "Res Arcana|Text": 0.775, "Res Arcana|Image": 0.500, "Pax Ren.|None": 0.550, "Pax Ren.|Text": 0.400, "Pax Ren.|Image": 0.375, "Carca.|None": 0.450, "Carca.|Text": 0.400, "Carca.|Image": 0.350, "Catan|None": 0.625, "Catan|Text": 0.500, "Catan|Image": 0.325 } },
+  { model: "Gemini 2.5 Pro", tier: "T1", scores: { "KingD|None": 0.524, "KingD|Text": 0.524, "KingD|Image": 0.333, "Res Arcana|None": 0.650, "Res Arcana|Text": 0.700, "Res Arcana|Image": 0.525, "Pax Ren.|None": 0.650, "Pax Ren.|Text": 0.725, "Pax Ren.|Image": 0.375, "Carca.|None": 0.425, "Carca.|Text": 0.350, "Carca.|Image": 0.450, "Catan|None": 0.575, "Catan|Text": 0.650, "Catan|Image": 0.425 } },
+  { model: "Gemini 3 Pro", tier: "T1", scores: { "KingD|None": 0.825, "KingD|Text": 0.800, "KingD|Image": 0.850, "Res Arcana|None": 0.875, "Res Arcana|Text": 0.850, "Res Arcana|Image": 0.775, "Pax Ren.|None": 0.775, "Pax Ren.|Text": 0.750, "Pax Ren.|Image": 0.800, "Carca.|None": 0.825, "Carca.|Text": 0.750, "Carca.|Image": 0.650, "Catan|None": 0.525, "Catan|Text": 0.625, "Catan|Image": 0.700 } },
+  { model: "Claude 4.5 Sonnet", tier: "T1", scores: { "KingD|None": 0.571, "KingD|Text": 0.619, "KingD|Image": 0.524, "Res Arcana|None": 0.650, "Res Arcana|Text": 0.800, "Res Arcana|Image": 0.800, "Pax Ren.|None": 0.600, "Pax Ren.|Text": 0.650, "Pax Ren.|Image": null, "Carca.|None": 0.375, "Carca.|Text": 0.325, "Carca.|Image": 0.300, "Catan|None": 0.600, "Catan|Text": 0.625, "Catan|Image": null } },
+
+  { model: "GPT-4o", tier: "T2", scores: { "KingD|None": 0.300, "KingD|Text": 0.433, "KingD|Image": 0.300, "Res Arcana|None": 0.225, "Res Arcana|Text": 0.400, "Res Arcana|Image": 0.350, "Pax Ren.|None": 0.125, "Pax Ren.|Text": 0.525, "Pax Ren.|Image": 0.475, "Carca.|None": 0.125, "Carca.|Text": 0.150, "Carca.|Image": 0.225, "Catan|None": 0.225, "Catan|Text": 0.200, "Catan|Image": 0.200 } },
+  { model: "o1", tier: "T2", scores: { "KingD|None": 0.200, "KingD|Text": 0.400, "KingD|Image": 0.267, "Res Arcana|None": 0.350, "Res Arcana|Text": 0.350, "Res Arcana|Image": 0.350, "Pax Ren.|None": 0.250, "Pax Ren.|Text": 0.400, "Pax Ren.|Image": 0.450, "Carca.|None": 0.225, "Carca.|Text": 0.250, "Carca.|Image": 0.300, "Catan|None": 0.150, "Catan|Text": 0.250, "Catan|Image": 0.225 } },
+  { model: "GPT-4.1", tier: "T2", scores: { "KingD|None": 0.333, "KingD|Text": 0.433, "KingD|Image": 0.300, "Res Arcana|None": 0.400, "Res Arcana|Text": 0.500, "Res Arcana|Image": 0.475, "Pax Ren.|None": 0.275, "Pax Ren.|Text": 0.400, "Pax Ren.|Image": 0.375, "Carca.|None": 0.175, "Carca.|Text": 0.200, "Carca.|Image": 0.150, "Catan|None": 0.325, "Catan|Text": 0.225, "Catan|Image": 0.325 } },
+  { model: "o3", tier: "T2", scores: { "KingD|None": 0.350, "KingD|Text": 0.400, "KingD|Image": 0.375, "Res Arcana|None": 0.325, "Res Arcana|Text": 0.625, "Res Arcana|Image": 0.475, "Pax Ren.|None": 0.300, "Pax Ren.|Text": 0.550, "Pax Ren.|Image": 0.575, "Carca.|None": 0.275, "Carca.|Text": 0.275, "Carca.|Image": 0.275, "Catan|None": 0.375, "Catan|Text": 0.275, "Catan|Image": 0.275 } },
+  { model: "GPT-5.1", tier: "T2", scores: { "KingD|None": 0.300, "KingD|Text": 0.325, "KingD|Image": 0.275, "Res Arcana|None": 0.325, "Res Arcana|Text": 0.525, "Res Arcana|Image": 0.525, "Pax Ren.|None": 0.200, "Pax Ren.|Text": 0.600, "Pax Ren.|Image": 0.467, "Carca.|None": 0.250, "Carca.|Text": 0.250, "Carca.|Image": 0.325, "Catan|None": 0.275, "Catan|Text": 0.275, "Catan|Image": 0.300 } },
+  { model: "Gemini 2.5 Flash", tier: "T2", scores: { "KingD|None": 0.167, "KingD|Text": 0.300, "KingD|Image": 0.267, "Res Arcana|None": 0.225, "Res Arcana|Text": 0.300, "Res Arcana|Image": 0.300, "Pax Ren.|None": 0.250, "Pax Ren.|Text": 0.300, "Pax Ren.|Image": 0.375, "Carca.|None": 0.250, "Carca.|Text": 0.300, "Carca.|Image": 0.200, "Catan|None": 0.250, "Catan|Text": 0.275, "Catan|Image": 0.125 } },
+  { model: "Gemini 2.5 Pro", tier: "T2", scores: { "KingD|None": 0.367, "KingD|Text": 0.367, "KingD|Image": 0.267, "Res Arcana|None": 0.375, "Res Arcana|Text": 0.475, "Res Arcana|Image": 0.375, "Pax Ren.|None": 0.100, "Pax Ren.|Text": 0.400, "Pax Ren.|Image": 0.250, "Carca.|None": 0.225, "Carca.|Text": 0.275, "Carca.|Image": 0.150, "Catan|None": 0.275, "Catan|Text": 0.350, "Catan|Image": 0.175 } },
+  { model: "Gemini 3 Pro", tier: "T2", scores: { "KingD|None": 0.725, "KingD|Text": 0.675, "KingD|Image": 0.750, "Res Arcana|None": 0.550, "Res Arcana|Text": 0.625, "Res Arcana|Image": 0.650, "Pax Ren.|None": 0.325, "Pax Ren.|Text": 0.475, "Pax Ren.|Image": 0.425, "Carca.|None": 0.425, "Carca.|Text": 0.425, "Carca.|Image": 0.325, "Catan|None": 0.500, "Catan|Text": 0.325, "Catan|Image": 0.500 } },
+  { model: "Claude 4.5 Sonnet", tier: "T2", scores: { "KingD|None": 0.300, "KingD|Text": 0.333, "KingD|Image": 0.233, "Res Arcana|None": 0.433, "Res Arcana|Text": 0.633, "Res Arcana|Image": 0.400, "Pax Ren.|None": 0.300, "Pax Ren.|Text": 0.533, "Pax Ren.|Image": null, "Carca.|None": 0.275, "Carca.|Text": 0.275, "Carca.|Image": 0.375, "Catan|None": 0.225, "Catan|Text": 0.275, "Catan|Image": null } },
+
+  { model: "GPT-4o", tier: "T3", scores: { "KingD|None": 0.000, "KingD|Text": 0.000, "KingD|Image": 0.000, "Res Arcana|None": 0.020, "Res Arcana|Text": 0.060, "Res Arcana|Image": 0.000, "Pax Ren.|None": 0.053, "Pax Ren.|Text": 0.053, "Pax Ren.|Image": 0.018, "Carca.|None": 0.040, "Carca.|Text": 0.000, "Carca.|Image": 0.040, "Catan|None": 0.065, "Catan|Text": 0.000, "Catan|Image": 0.032 } },
+  { model: "o1", tier: "T3", scores: { "KingD|None": 0.000, "KingD|Text": 0.020, "KingD|Image": 0.000, "Res Arcana|None": 0.040, "Res Arcana|Text": 0.060, "Res Arcana|Image": 0.040, "Pax Ren.|None": 0.105, "Pax Ren.|Text": 0.018, "Pax Ren.|Image": 0.053, "Carca.|None": 0.080, "Carca.|Text": 0.040, "Carca.|Image": 0.040, "Catan|None": 0.032, "Catan|Text": 0.065, "Catan|Image": 0.032 } },
+  { model: "GPT-4.1", tier: "T3", scores: { "KingD|None": 0.040, "KingD|Text": 0.080, "KingD|Image": 0.100, "Res Arcana|None": 0.020, "Res Arcana|Text": 0.020, "Res Arcana|Image": 0.020, "Pax Ren.|None": 0.123, "Pax Ren.|Text": 0.123, "Pax Ren.|Image": 0.088, "Carca.|None": 0.020, "Carca.|Text": 0.000, "Carca.|Image": 0.060, "Catan|None": 0.194, "Catan|Text": 0.065, "Catan|Image": 0.032 } },
+  { model: "o3", tier: "T3", scores: { "KingD|None": 0.060, "KingD|Text": 0.120, "KingD|Image": 0.040, "Res Arcana|None": 0.000, "Res Arcana|Text": 0.060, "Res Arcana|Image": 0.060, "Pax Ren.|None": 0.070, "Pax Ren.|Text": 0.175, "Pax Ren.|Image": 0.211, "Carca.|None": 0.120, "Carca.|Text": 0.060, "Carca.|Image": 0.100, "Catan|None": 0.194, "Catan|Text": 0.226, "Catan|Image": 0.258 } },
+  { model: "GPT-5.1", tier: "T3", scores: { "KingD|None": 0.160, "KingD|Text": 0.060, "KingD|Image": 0.060, "Res Arcana|None": 0.080, "Res Arcana|Text": 0.080, "Res Arcana|Image": 0.080, "Pax Ren.|None": 0.123, "Pax Ren.|Text": 0.088, "Pax Ren.|Image": 0.211, "Carca.|None": 0.020, "Carca.|Text": 0.100, "Carca.|Image": 0.100, "Catan|None": 0.129, "Catan|Text": 0.161, "Catan|Image": 0.161 } },
+  { model: "Gemini 2.5 Flash", tier: "T3", scores: { "KingD|None": 0.000, "KingD|Text": 0.020, "KingD|Image": 0.000, "Res Arcana|None": 0.000, "Res Arcana|Text": 0.080, "Res Arcana|Image": 0.080, "Pax Ren.|None": 0.018, "Pax Ren.|Text": 0.053, "Pax Ren.|Image": 0.000, "Carca.|None": 0.020, "Carca.|Text": 0.060, "Carca.|Image": 0.040, "Catan|None": 0.032, "Catan|Text": 0.000, "Catan|Image": 0.065 } },
+  { model: "Gemini 2.5 Pro", tier: "T3", scores: { "KingD|None": 0.040, "KingD|Text": 0.020, "KingD|Image": 0.000, "Res Arcana|None": 0.120, "Res Arcana|Text": 0.300, "Res Arcana|Image": 0.080, "Pax Ren.|None": 0.123, "Pax Ren.|Text": 0.053, "Pax Ren.|Image": 0.088, "Carca.|None": 0.060, "Carca.|Text": 0.060, "Carca.|Image": 0.040, "Catan|None": 0.129, "Catan|Text": 0.097, "Catan|Image": 0.161 } },
+  { model: "Gemini 3 Pro", tier: "T3", scores: { "KingD|None": 0.160, "KingD|Text": 0.160, "KingD|Image": 0.140, "Res Arcana|None": 0.200, "Res Arcana|Text": 0.260, "Res Arcana|Image": 0.180, "Pax Ren.|None": 0.053, "Pax Ren.|Text": 0.105, "Pax Ren.|Image": 0.193, "Carca.|None": 0.060, "Carca.|Text": 0.020, "Carca.|Image": 0.040, "Catan|None": 0.129, "Catan|Text": 0.161, "Catan|Image": 0.032 } },
+  { model: "Claude 4.5 Sonnet", tier: "T3", scores: { "KingD|None": 0.020, "KingD|Text": 0.040, "KingD|Image": 0.040, "Res Arcana|None": 0.040, "Res Arcana|Text": 0.060, "Res Arcana|Image": 0.080, "Pax Ren.|None": 0.053, "Pax Ren.|Text": 0.088, "Pax Ren.|Image": null, "Carca.|None": 0.040, "Carca.|Text": 0.020, "Carca.|Image": 0.060, "Catan|None": 0.000, "Catan|Text": 0.032, "Catan|Image": null } }
+];

js/leaderboard.js

@@ -0,0 +1,281 @@
+// Leaderboard: interactive heatmap table with sorting and filtering.
+// Depends on BENCHMARK_DATA, GAMES, MODALITIES, TIERS from leaderboard-data.js.
+
+(function () {
+  "use strict";
+
+  // ---- State ----
+  let activeFilters = { tier: "all", game: "all", modality: "all" };
+  let sortCol = "avg";  // column key or "avg"
+  let sortAsc = false;  // descending by default
+
+  // ---- Color scale (light theme, bolder) ----
+  function heatColor(val, min, max) {
+    if (val === null || val === undefined) return null;
+    const range = max - min;
+    const t = range > 0 ? (val - min) / range : 0.5;
+
+    let r, g, b;
+    if (t < 0.5) {
+      const s = t / 0.5;
+      r = 220 + (240 - 220) * s;
+      g = 130 + (210 - 130) * s;
+      b = 120 + (130 - 120) * s;
+    } else {
+      const s = (t - 0.5) / 0.5;
+      r = 240 - (240 - 130) * s;
+      g = 210 - (210 - 195) * s;
+      b = 130 - (130 - 100) * s;
+    }
+    return `rgb(${Math.round(r)},${Math.round(g)},${Math.round(b)})`;
+  }
+
+  function textColorForBg() {
+    return "#1a1a1a";
+  }
+
+  // ---- Compute visible columns ----
+  function getVisibleColumns() {
+    const cols = [];
+    const games = activeFilters.game === "all" ? GAMES : [activeFilters.game];
+    const mods = activeFilters.modality === "all" ? MODALITIES : [activeFilters.modality];
+    for (const g of games) {
+      for (const m of mods) {
+        cols.push({ game: g, modality: m, key: g + "|" + m });
+      }
+    }
+    return cols;
+  }
+
+  // ---- Compute visible rows ----
+  function getVisibleRows() {
+    const tiers = activeFilters.tier === "all" ? TIERS : [activeFilters.tier];
+    return BENCHMARK_DATA.filter(d => tiers.includes(d.tier));
+  }
+
+  // ---- Compute row average ----
+  function rowAvg(row, cols) {
+    let sum = 0, n = 0;
+    for (const c of cols) {
+      const v = row.scores[c.key];
+      if (v !== null && v !== undefined) { sum += v; n++; }
+    }
+    return n > 0 ? sum / n : null;
+  }
+
+  // ---- Build and render table ----
+  function renderLeaderboard() {
+    const cols = getVisibleColumns();
+    let rows = getVisibleRows();
+
+    // Pre-compute averages
+    const avgMap = new Map();
+    for (const r of rows) avgMap.set(r, rowAvg(r, cols));
+
+    // Sort: always group by tier first, then by selected column within each tier
+    rows = rows.slice().sort((a, b) => {
+      const tierA = TIERS.indexOf(a.tier);
+      const tierB = TIERS.indexOf(b.tier);
+      if (tierA !== tierB) return tierA - tierB;
+
+      if (sortCol) {
+        let va, vb;
+        if (sortCol === "avg") {
+          va = avgMap.get(a);
+          vb = avgMap.get(b);
+        } else {
+          va = a.scores[sortCol];
+          vb = b.scores[sortCol];
+        }
+        if (va === null || va === undefined) va = -Infinity;
+        if (vb === null || vb === undefined) vb = -Infinity;
+        return sortAsc ? va - vb : vb - va;
+      }
+      return 0;
+    });
+
+    // Find min/max for heatmap scaling
+    let allVals = [];
+    for (const r of rows) {
+      for (const c of cols) {
+        const v = r.scores[c.key];
+        if (v !== null && v !== undefined) allVals.push(v);
+      }
+      const avg = avgMap.get(r);
+      if (avg !== null) allVals.push(avg);
+    }
+    const minVal = allVals.length > 0 ? Math.min(...allVals) : 0;
+    const maxVal = allVals.length > 0 ? Math.max(...allVals) : 1;
+
+    // --- Build header ---
+    const thead = document.getElementById("leaderboard-thead");
+    thead.innerHTML = "";
+
+    // Game header row (only if showing multiple modalities per game)
+    const showGameRow = activeFilters.modality === "all";
+    if (showGameRow) {
+      const gameRow = document.createElement("tr");
+      gameRow.className = "game-header";
+
+      // Model corner
+      const corner = document.createElement("th");
+      corner.textContent = "";
+      corner.rowSpan = 2;
+      gameRow.appendChild(corner);
+
+      // Avg column header (left-most after model)
+      const avgTh = document.createElement("th");
+      avgTh.className = "avg-col";
+      avgTh.rowSpan = 2;
+      avgTh.style.cursor = "pointer";
+      avgTh.onclick = () => { toggleSort("avg"); };
+      avgTh.innerHTML = 'Avg ' + sortIndicator("avg");
+      gameRow.appendChild(avgTh);
+
+      const visibleGames = activeFilters.game === "all" ? GAMES : [activeFilters.game];
+      for (const g of visibleGames) {
+        const th = document.createElement("th");
+        th.textContent = GAME_LABELS[g] || g;
+        th.colSpan = MODALITIES.length;
+        gameRow.appendChild(th);
+      }
+
+      thead.appendChild(gameRow);
+    }
+
+    // Modality header row
+    const modRow = document.createElement("tr");
+    modRow.className = "mod-header";
+
+    if (!showGameRow) {
+      const corner = document.createElement("th");
+      corner.textContent = "Model";
+      modRow.appendChild(corner);
+
+      // Avg header (left-most after model)
+      const avgTh = document.createElement("th");
+      avgTh.className = "avg-col";
+      avgTh.innerHTML = 'Avg ' + sortIndicator("avg");
+      avgTh.style.cursor = "pointer";
+      avgTh.onclick = () => { toggleSort("avg"); };
+      modRow.appendChild(avgTh);
+    }
+
+    for (const c of cols) {
+      const th = document.createElement("th");
+      const label = showGameRow ? c.modality : (GAME_LABELS[c.game] || c.game) + " / " + c.modality;
+      th.innerHTML = label + " " + sortIndicator(c.key);
+      th.onclick = () => { toggleSort(c.key); };
+      modRow.appendChild(th);
+    }
+
+    thead.appendChild(modRow);
+
+    // --- Build body ---
+    const tbody = document.getElementById("leaderboard-tbody");
+    tbody.innerHTML = "";
+
+    const showTierGroups = activeFilters.tier === "all";
+    let lastTier = null;
+    const totalCols = 2 + cols.length; // model + avg + score columns
+
+    for (const r of rows) {
+      // Insert tier group header row when tier changes
+      if (showTierGroups && r.tier !== lastTier) {
+        const sepTr = document.createElement("tr");
+        sepTr.className = "tier-separator";
+        const sepTd = document.createElement("td");
+        sepTd.colSpan = totalCols;
+        sepTd.textContent = TIER_LABELS[r.tier] || r.tier;
+        sepTr.appendChild(sepTd);
+        tbody.appendChild(sepTr);
+        lastTier = r.tier;
+      }
+
+      const tr = document.createElement("tr");
+
+      // Model cell
+      const modelTd = document.createElement("td");
+      modelTd.className = "model-cell";
+      modelTd.textContent = r.model;
+      tr.appendChild(modelTd);
+
+      // Avg cell (left-most after model)
+      const avgTd = document.createElement("td");
+      avgTd.className = "score-cell avg-col";
+      const avg = avgMap.get(r);
+      if (avg === null) {
+        avgTd.textContent = "\u2014";
+        avgTd.classList.add("null-cell");
+      } else {
+        avgTd.textContent = (avg * 100).toFixed(1);
+        const bg = heatColor(avg, minVal, maxVal);
+        if (bg) {
+          avgTd.style.backgroundColor = bg;
+          avgTd.style.color = textColorForBg();
+        }
+      }
+      tr.appendChild(avgTd);
+
+      // Score cells
+      for (const c of cols) {
+        const td = document.createElement("td");
+        td.className = "score-cell";
+        const v = r.scores[c.key];
+        if (v === null || v === undefined) {
+          td.textContent = "\u2014";
+          td.classList.add("null-cell");
+        } else {
+          td.textContent = (v * 100).toFixed(1);
+          const bg = heatColor(v, minVal, maxVal);
+          if (bg) {
+            td.style.backgroundColor = bg;
+            td.style.color = textColorForBg();
+          }
+        }
+        tr.appendChild(td);
+      }
+
+      tbody.appendChild(tr);
+    }
+  }
+
+  // ---- Sort helpers ----
+  function sortIndicator(key) {
+    if (sortCol !== key) return '<span class="sort-arrow">\u2195</span>';
+    const arrow = sortAsc ? "\u2191" : "\u2193";
+    return `<span class="sort-arrow active">${arrow}</span>`;
+  }
+
+  function toggleSort(key) {
+    if (sortCol === key) {
+      sortAsc = !sortAsc;
+    } else {
+      sortCol = key;
+      sortAsc = false; // default descending for scores
+    }
+    renderLeaderboard();
+  }
+
+  // ---- Filter button wiring ----
+  function initFilters() {
+    document.querySelectorAll("#leaderboard-filters .filter-buttons").forEach(group => {
+      const filterType = group.dataset.filter;
+      group.querySelectorAll(".filter-btn").forEach(btn => {
+        btn.addEventListener("click", () => {
+          group.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
+          btn.classList.add("active");
+          activeFilters[filterType] = btn.dataset.value;
+          sortCol = null; // reset sort on filter change
+          renderLeaderboard();
+        });
+      });
+    });
+  }
+
+  // ---- Public init ----
+  window.initLeaderboard = function () {
+    initFilters();
+    renderLeaderboard();
+  };
+})();

js/viewer.js

@@ -0,0 +1,263 @@
+// Dataset browser (adapted from anon-submission-2026/docs/viewer.js)
+// Wrapped in lazy-init so it only loads when the Dataset Browser tab is opened.
+
+let _viewerInitialized = false;
+
+// Base URL for images hosted in the HF dataset repo
+const IMAGE_BASE_URL = "https://huggingface.co/datasets/launch/LudoBench/resolve/main/images";
+
+// -----------------------
+// Manifest loader
+// -----------------------
+async function loadManifest() {
+  const res = await fetch("manifest.json");
+  if (!res.ok) throw new Error("Failed to load manifest: " + res.status);
+  const manifest = await res.json();
+  return manifest.files;
+}
+
+// -----------------------
+// Folder handling
+// -----------------------
+function buildFolderIndex(files) {
+  const set = new Set();
+  for (const f of files) set.add(f.folder);
+  return Array.from(set).sort();
+}
+
+function populateFolderSelect(folders) {
+  const sel = document.getElementById("folderSelect");
+  sel.innerHTML = "";
+  for (const f of folders) {
+    const opt = document.createElement("option");
+    opt.textContent = f;
+    opt.value = f;
+    sel.appendChild(opt);
+  }
+}
+
+function filterFiles(files, folder) {
+  return files.filter(f => f.folder === folder);
+}
+
+function populateFileSelect(files) {
+  const sel = document.getElementById("fileSelect");
+  sel.innerHTML = "";
+  for (const f of files) {
+    const opt = document.createElement("option");
+    opt.value = f.json_path;
+    opt.textContent = f.name;
+    sel.appendChild(opt);
+  }
+}
+
+// -----------------------
+// Load one JSON annotation
+// -----------------------
+async function loadJson(path) {
+  const res = await fetch(path);
+  if (!res.ok) throw new Error("Error loading " + path);
+  return await res.json();
+}
+
+// -----------------------
+// Rendering question + answer
+// -----------------------
+function normalizedAnswers(raw) {
+  return new Set(
+    String(raw || "")
+      .split(/,|\/|\bor\b/i)
+      .map(s => s.trim().toLowerCase())
+      .filter(Boolean)
+  );
+}
+
+function isNumber(s) {
+  return s !== "" && !Number.isNaN(Number(s));
+}
+
+function renderQuestion(data) {
+  const card = document.getElementById("questionCard");
+  card.innerHTML = `
+    <h2>${data.Game} <span class="id-tag">(ID ${data.ID})</span></h2>
+    <p class="question-label">Question:</p>
+    <p class="question-text">${data.Question}</p>
+  `;
+
+  const info = document.getElementById("answerInfo");
+  info.textContent = "";
+  info.className = "answer-info";
+}
+
+function attachAnswerLogic(data) {
+  const raw = String(data.Answer || "").trim();
+  const accepted = normalizedAnswers(raw);
+
+  const input = document.getElementById("answerInput");
+  const button = document.getElementById("checkButton");
+  const info = document.getElementById("answerInfo");
+
+  const sol = document.getElementById("solutionText");
+  sol.innerHTML = `<strong>Expected:</strong> ${raw || "\u2014"}`;
+
+  button.onclick = () => {
+    const user = input.value.trim().toLowerCase();
+    let ok = false;
+
+    if (accepted.has(user)) ok = true;
+    else if (isNumber(user)) {
+      for (const a of accepted)
+        if (isNumber(a) && Math.abs(Number(a) - Number(user)) < 1e-9)
+          ok = true;
+    }
+
+    info.textContent = ok ? "Correct!" : "Not quite. Try again.";
+    info.className = "answer-info " + (ok ? "correct" : "wrong");
+  };
+}
+
+// -----------------------
+// Render images (local paths)
+// -----------------------
+function renderImage(data) {
+  const container = document.getElementById("imageContainer");
+  const multi = document.getElementById("multiImages");
+
+  multi.innerHTML = "";
+  container.classList.add("hidden");
+
+  let urls = data.game_state_url;
+  if (!urls) return;
+  if (!Array.isArray(urls)) urls = [urls];
+
+  const folder = data.Game.toLowerCase().replace(/\s+/g, "_");
+
+  urls.forEach(url => {
+    const file = url.split("/").pop();
+    const localPath = `${IMAGE_BASE_URL}/${folder}/${file}`;
+
+    const block = document.createElement("div");
+    block.className = "multi-img-block";
+
+    const spinner = document.createElement("div");
+    spinner.className = "spinner";
+    block.appendChild(spinner);
+
+    const img = document.createElement("img");
+    img.style.display = "none";
+    img.src = localPath;
+
+    img.onload = () => {
+      spinner.style.display = "none";
+      img.style.display = "block";
+    };
+
+    img.onerror = () => {
+      spinner.style.display = "none";
+      const err = document.createElement("div");
+      err.textContent = "Failed to load " + localPath;
+      err.style.color = "#d44";
+      block.appendChild(err);
+    };
+
+    const link = document.createElement("a");
+    link.href = localPath;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.appendChild(img);
+    block.appendChild(link);
+
+    const caption = document.createElement("div");
+    caption.className = "multi-img-caption";
+    caption.textContent = file;
+    block.appendChild(caption);
+
+    const full = document.createElement("a");
+    full.href = localPath;
+    full.target = "_blank";
+    full.rel = "noopener noreferrer";
+    full.className = "full-img-link";
+    full.textContent = "View full image";
+    block.appendChild(full);
+
+    multi.appendChild(block);
+  });
+
+  container.classList.remove("hidden");
+}
+
+// -----------------------
+// Navigation (prev / next)
+// -----------------------
+let GLOBAL_FILES = [];
+let GLOBAL_CURRENT_FOLDER = "";
+let loadAndRenderRef = null;
+
+function goRelative(offset) {
+  const fileSelect = document.getElementById("fileSelect");
+  const options = Array.from(fileSelect.options);
+  if (options.length === 0) return;
+
+  const values = options.map(o => o.value);
+  const current = fileSelect.value;
+  let idx = values.indexOf(current);
+  if (idx === -1) return;
+
+  let next = idx + offset;
+  if (next < 0) next = values.length - 1;
+  if (next >= values.length) next = 0;
+
+  fileSelect.value = values[next];
+  if (loadAndRenderRef) loadAndRenderRef(values[next]);
+}
+
+// -----------------------
+// Lazy initialization
+// -----------------------
+async function initViewer() {
+  if (_viewerInitialized) return;
+  _viewerInitialized = true;
+
+  document.getElementById("prevBtn").onclick = () => goRelative(-1);
+  document.getElementById("nextBtn").onclick = () => goRelative(1);
+
+  const questionCard = document.getElementById("questionCard");
+
+  try {
+    const files = await loadManifest();
+    GLOBAL_FILES = files;
+
+    const folders = buildFolderIndex(files);
+    populateFolderSelect(folders);
+
+    const folderSel = document.getElementById("folderSelect");
+    const fileSel = document.getElementById("fileSelect");
+
+    async function loadAndRender(path) {
+      const data = await loadJson(path);
+      renderQuestion(data);
+      attachAnswerLogic(data);
+      renderImage(data);
+    }
+
+    loadAndRenderRef = loadAndRender;
+
+    function refresh() {
+      GLOBAL_CURRENT_FOLDER = folderSel.value;
+      const filtered = filterFiles(files, GLOBAL_CURRENT_FOLDER);
+      populateFileSelect(filtered);
+      if (filtered.length > 0)
+        loadAndRender(filtered[0].json_path);
+    }
+
+    folderSel.onchange = refresh;
+    fileSel.onchange = () => loadAndRender(fileSel.value);
+
+    folderSel.value = "kingdomino_tier1";
+    refresh();
+
+  } catch (err) {
+    console.error(err);
+    questionCard.innerHTML = `<p style="color:#f55;">Init error: ${err}</p>`;
+  }
+}