| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>InferenceNet Econometrics Benchmark Leaderboard</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg-primary: #0b0f19; |
| --bg-secondary: #111827; |
| --bg-tertiary: #1a2234; |
| --bg-hover: #1e293b; |
| --border: #1f2937; |
| --border-light: #374151; |
| --text-primary: #f9fafb; |
| --text-secondary: #9ca3af; |
| --text-muted: #6b7280; |
| --accent-blue: #3b82f6; |
| --accent-blue-dim: rgba(59, 130, 246, 0.15); |
| --accent-gold: #fbbf24; |
| --accent-green: #22c55e; |
| --accent-green-dim: rgba(34, 197, 94, 0.12); |
| --radius: 10px; |
| --radius-sm: 6px; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.5; |
| min-height: 100vh; |
| } |
| |
| a { |
| color: var(--accent-blue); |
| text-decoration: none; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| |
| .page { |
| max-width: 980px; |
| margin: 0 auto; |
| padding: 28px 24px 64px; |
| } |
| |
| |
| .breadcrumb { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 14px; |
| color: var(--text-secondary); |
| margin-bottom: 20px; |
| } |
| |
| .breadcrumb svg { |
| opacity: 0.6; |
| } |
| |
| .breadcrumb span { |
| color: var(--text-muted); |
| } |
| |
| |
| .header { |
| margin-bottom: 24px; |
| } |
| |
| .title-row { |
| display: flex; |
| align-items: flex-start; |
| gap: 12px; |
| margin-bottom: 12px; |
| } |
| |
| .title-icon { |
| width: 40px; |
| height: 40px; |
| background: linear-gradient(135deg, #fbbf24, #f59e0b); |
| border-radius: var(--radius-sm); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 20px; |
| flex-shrink: 0; |
| } |
| |
| .title-block h1 { |
| font-size: 22px; |
| font-weight: 600; |
| letter-spacing: -0.02em; |
| line-height: 1.3; |
| } |
| |
| .title-block .subtitle { |
| font-size: 14px; |
| color: var(--text-secondary); |
| margin-top: 4px; |
| } |
| .intro-desc { |
| margin-top:14px; |
| font-size:14px; |
| color:var(--text-secondary); |
| line-height:1.6; |
| } |
| .header-links { |
| margin-top:12px; |
| font-size:14px; |
| } |
| .like-btn { |
| margin-left: auto; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 6px 14px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| color: var(--text-secondary); |
| font-size: 13px; |
| cursor: default; |
| flex-shrink: 0; |
| } |
| |
| |
| .tab-bar { |
| display: flex; |
| gap: 0; |
| border-bottom: 1px solid var(--border); |
| margin-bottom: 0; |
| overflow-x: auto; |
| } |
| |
| .tab { |
| padding: 12px 18px; |
| background: none; |
| border: none; |
| color: var(--text-muted); |
| font-family: inherit; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| white-space: nowrap; |
| position: relative; |
| transition: color 0.15s; |
| } |
| |
| .tab:hover { |
| color: var(--text-secondary); |
| } |
| |
| .tab.active { |
| color: var(--text-primary); |
| } |
| |
| .tab.active::after { |
| content: ""; |
| position: absolute; |
| bottom: -1px; |
| left: 0; |
| right: 0; |
| height: 2px; |
| background: var(--text-primary); |
| border-radius: 2px 2px 0 0; |
| } |
| |
| |
| .panel { |
| display: none; |
| } |
| |
| .panel.show { |
| display: block; |
| } |
| |
| |
| .leaderboard-card { |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| overflow: hidden; |
| margin-top: 24px; |
| } |
| |
| .leaderboard-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 16px 20px; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .leaderboard-header h2 { |
| font-size: 15px; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .badge-official { |
| display: inline-flex; |
| align-items: center; |
| gap: 4px; |
| padding: 3px 10px; |
| background: var(--accent-blue-dim); |
| border: 1px solid rgba(59, 130, 246, 0.3); |
| border-radius: 999px; |
| font-size: 11px; |
| font-weight: 500; |
| color: var(--accent-blue); |
| } |
| |
| |
| .lb-columns { |
| display: grid; |
| grid-template-columns: 48px 1fr 100px; |
| padding: 10px 20px; |
| font-size: 11px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.06em; |
| color: var(--text-muted); |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .lb-columns .col-score { |
| text-align: right; |
| } |
| |
| |
| .lb-row { |
| display: grid; |
| grid-template-columns: 48px 1fr 100px; |
| align-items: center; |
| padding: 14px 20px; |
| border-bottom: 1px solid var(--border); |
| transition: background 0.12s; |
| } |
| |
| .lb-row:last-child { |
| border-bottom: none; |
| } |
| |
| .lb-row:hover { |
| background: var(--bg-hover); |
| } |
| |
| .lb-row.top-1 { |
| background: rgba(251, 191, 36, 0.04); |
| } |
| |
| .lb-rank { |
| font-size: 14px; |
| color: var(--text-muted); |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| } |
| |
| .lb-model { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| min-width: 0; |
| } |
| |
| .model-avatar { |
| width: 28px; |
| height: 28px; |
| border-radius: var(--radius-sm); |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-light); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 11px; |
| font-weight: 700; |
| color: var(--text-secondary); |
| flex-shrink: 0; |
| text-transform: uppercase; |
| } |
| |
| .model-info { |
| min-width: 0; |
| } |
| |
| .model-name { |
| font-size: 14px; |
| font-weight: 500; |
| color: var(--text-primary); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .model-meta { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| margin-top: 3px; |
| } |
| |
| .status-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 3px; |
| padding: 1px 8px; |
| border-radius: 999px; |
| font-size: 11px; |
| font-weight: 500; |
| } |
| |
| .status-badge.verified { |
| background: var(--accent-green-dim); |
| color: var(--accent-green); |
| border: 1px solid rgba(34, 197, 94, 0.25); |
| } |
| |
| .status-badge.self-reported { |
| background: var(--bg-tertiary); |
| color: var(--text-muted); |
| border: 1px solid var(--border); |
| } |
| |
| .lb-score { |
| text-align: right; |
| font-size: 15px; |
| font-weight: 600; |
| color: var(--text-primary); |
| font-variant-numeric: tabular-nums; |
| } |
| |
| .lb-score-bar { |
| margin-top: 4px; |
| height: 3px; |
| background: var(--bg-tertiary); |
| border-radius: 999px; |
| overflow: hidden; |
| } |
| |
| .lb-score-bar-fill { |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent-blue), #6366f1); |
| border-radius: 999px; |
| transition: width 0.4s ease; |
| } |
| |
| .lb-row.top-1 .lb-score-bar-fill { |
| background: linear-gradient(90deg, var(--accent-gold), #f59e0b); |
| } |
| |
| |
| .show-more { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| padding: 14px; |
| color: var(--text-secondary); |
| font-size: 13px; |
| cursor: pointer; |
| border-top: 1px solid var(--border); |
| transition: color 0.15s, background 0.15s; |
| } |
| |
| .show-more:hover { |
| color: var(--text-primary); |
| background: var(--bg-hover); |
| } |
| |
| |
| .metric-card { |
| margin-top: 32px; |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 20px 24px; |
| } |
| |
| .metric-card h3 { |
| font-size: 14px; |
| font-weight: 600; |
| margin-bottom: 14px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| color: var(--text-primary); |
| } |
| |
| .metric-list { |
| list-style: none; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
| |
| .metric-list li { |
| font-size: 13px; |
| color: var(--text-secondary); |
| padding-left: 16px; |
| position: relative; |
| } |
| |
| .metric-list li::before { |
| content: ""; |
| position: absolute; |
| left: 0; |
| top: 8px; |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--accent-blue); |
| } |
| |
| .metric-list strong { |
| color: var(--text-primary); |
| font-weight: 500; |
| } |
| |
| .metric-note { |
| margin-top: 16px; |
| padding-top: 14px; |
| border-top: 1px solid var(--border); |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
| |
| |
| .loading { |
| padding: 48px 20px; |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 14px; |
| } |
| |
| .loading-spinner { |
| width: 24px; |
| height: 24px; |
| border: 2px solid var(--border); |
| border-top-color: var(--accent-blue); |
| border-radius: 50%; |
| animation: spin 0.7s linear infinite; |
| margin: 0 auto 12px; |
| } |
| |
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
| |
| .error-banner { |
| margin-top: 16px; |
| padding: 12px 16px; |
| background: rgba(239, 68, 68, 0.1); |
| border: 1px solid rgba(239, 68, 68, 0.3); |
| border-radius: var(--radius-sm); |
| color: #fca5a5; |
| font-size: 13px; |
| text-align: center; |
| } |
| |
| .hidden { display: none !important; } |
| |
| @media (max-width: 600px) { |
| .page { padding: 16px 16px 48px; } |
| .title-row { flex-wrap: wrap; } |
| .like-btn { margin-left: 0; } |
| .lb-columns, .lb-row { |
| grid-template-columns: 36px 1fr 72px; |
| padding-left: 14px; |
| padding-right: 14px; |
| } |
| .model-name { font-size: 13px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="page"> |
| <nav class="breadcrumb"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/> |
| </svg> |
| <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">Datasets</a> |
| <span>/</span> |
| <span>CamoAiLab/Infernet</span> |
| </nav> |
|
|
| <header class="header"> |
| <div class="title-row"> |
| <div class="title-icon">🏆</div> |
| <div class="title-block"> |
| <h1>Infernet Econometrics Benchmark</h1> |
| <p class="subtitle">CamoAiLab · HKU CAMO</p> |
| <p class="intro-desc"> |
| An evaluation benchmark for large‑language‑model agents, measuring the capability to reproduce real‑world econometric empirical studies: generating executable code, replicating regression outputs, and recovering correct treatment‑effect coefficient signs. |
| </p> |
| <div class="header-links"> |
| 🔗 <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">Dataset</a> |
| | |
| 📄 <a href="https://arxiv.org/abs/2506.00856" target="_blank">Paper</a> |
| | |
| 🐙 <a href="https://github.com/HKU-Business-AI-Center/Econometrics-Agent" target="_blank">GitHub</a> |
| </div> |
| </div> |
| <div class="like-btn"> |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/> |
| </svg> |
| Leaderboard |
| </div> |
| </div> |
| </header> |
|
|
| <div class="tab-bar"> |
| <button class="tab active" data-idx="0">Partial Replication</button> |
| <button class="tab" data-idx="1">Compilation Success</button> |
| <button class="tab" data-idx="2">Coefficient Direction</button> |
| <button class="tab" data-idx="3">Significant Level Correctness</button> |
| </div> |
|
|
| <div class="panel show" id="panel-rep"> |
| <div class="leaderboard-card"> |
| <div class="leaderboard-header"> |
| <h2> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg> |
| Leaderboard |
| </h2> |
| <span class="badge-official">Official Benchmark</span> |
| </div> |
| <div class="lb-columns"> |
| <span>#</span> |
| <span>Model</span> |
| <span class="col-score">Score (0‑100)</span> |
| </div> |
| <div id="rows-rep"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div> |
| </div> |
| </div> |
|
|
| <div class="panel" id="panel-compile"> |
| <div class="leaderboard-card"> |
| <div class="leaderboard-header"> |
| <h2> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg> |
| Leaderboard |
| </h2> |
| <span class="badge-official">Official Benchmark</span> |
| </div> |
| <div class="lb-columns"> |
| <span>#</span> |
| <span>Model</span> |
| <span class="col-score">Score (0‑100)</span> |
| </div> |
| <div id="rows-compile"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div> |
| </div> |
| </div> |
|
|
| <div class="panel" id="panel-dir"> |
| <div class="leaderboard-card"> |
| <div class="leaderboard-header"> |
| <h2> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg> |
| Leaderboard |
| </h2> |
| <span class="badge-official">Official Benchmark</span> |
| </div> |
| <div class="lb-columns"> |
| <span>#</span> |
| <span>Model</span> |
| <span class="col-score">Score (0‑100)</span> |
| </div> |
| <div id="rows-dir"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel" id="panel-sig"> |
| <div class="leaderboard-card"> |
| <div class="leaderboard-header"> |
| <h2> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 20V10M12 20V4M6 20v-6"/></svg> |
| Leaderboard |
| </h2> |
| <span class="badge-official">Official Benchmark</span> |
| </div> |
| <div class="lb-columns"> |
| <span>#</span> |
| <span>Model</span> |
| <span class="col-score">Score (0‑100)</span> |
| </div> |
| <div id="rows-sig"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div> |
| </div> |
| </div> |
|
|
| <div id="error-banner" class="error-banner hidden"></div> |
|
|
| <div class="metric-card"> |
| <h3> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg> |
| Metric Definitions |
| </h3> |
| <ul class="metric-list"> |
| <li><strong>Compilation Success:</strong> Generated econometric code executes completely without runtime or syntax errors.</li> |
| <li><strong>Partial Replication:</strong> The target treatment coefficient can be reproduced within a 5% relative error threshold.</li> |
| <li><strong>Correct Coefficient Direction:</strong> The sign (positive/negative) of the treatment‑effect coefficient matches ground‑truth results.</li> |
| <li><strong>Significant Level Correctness:</strong> The model correctly reproduces the statistical significance level of the treatment‑effect coefficient.</li> |
| </ul> |
| <div class="metric-note"> |
| <em>Note:</em> Codex serves as a strong code‑specialized upper‑bound baseline with high overall metrics across all four evaluation dimensions. However, it only supports one‑shot code generation without agent‑level interactive planning or multi‑round revision capabilities, and its public API is no longer available. MetricsAI outperforms vanilla‑LLM and general‑purpose‑agent baselines for interactive real‑world econometric‑research workflows. |
| <br><br> |
| Dataset: <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">CamoAiLab/Infernet</a> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const panels = document.querySelectorAll(".panel"); |
| const tabs = document.querySelectorAll(".tab"); |
| const INITIAL_SHOW = 10; |
| |
| tabs.forEach(tab => { |
| tab.addEventListener("click", () => { |
| const idx = Number(tab.dataset.idx); |
| panels.forEach(p => p.classList.remove("show")); |
| tabs.forEach(t => t.classList.remove("active")); |
| panels[idx].classList.add("show"); |
| tab.classList.add("active"); |
| }); |
| }); |
| |
| function parseCSV(text) { |
| text = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n"); |
| const lines = text.trim().split("\n").filter(line => line.trim() !== ""); |
| const headers = lines[0].split(",").map(h => h.trim()); |
| const rows = []; |
| for (let i = 1; i < lines.length; i++) { |
| const vals = lines[i].split(",").map(v => v.trim()); |
| const obj = {}; |
| headers.forEach((h, idx) => { obj[h] = vals[idx]; }); |
| rows.push(obj); |
| } |
| return rows; |
| } |
| |
| function getAvatarLetter(modelId) { |
| const parts = modelId.split("/"); |
| const name = parts.length > 1 ? parts[1] : parts[0]; |
| return name.charAt(0).toUpperCase(); |
| } |
| |
| function getOrgColor(modelId) { |
| return "#3b82f6"; |
| } |
| |
| function buildRows(data, sortKey, containerId) { |
| const sorted = [...data].sort((a, b) => Number(b[sortKey]) - Number(a[sortKey])); |
| const container = document.getElementById(containerId); |
| |
| if (sorted.length === 0) { |
| container.innerHTML = '<div class="loading">No data available</div>'; |
| return; |
| } |
| |
| function renderRows(limit) { |
| let html = ""; |
| sorted.slice(0, limit).forEach((row, i) => { |
| const rank = i + 1; |
| const score = Number(row[sortKey]); |
| const modelId = row["Model ID"] || "Unknown"; |
| const isTop = rank === 1; |
| const avatarColor = getOrgColor(modelId); |
| |
| |
| let rankDisplay = rank; |
| if(rank ===1) rankDisplay = "🥇"; |
| else if(rank ===2) rankDisplay = "🥈"; |
| else if(rank ===3) rankDisplay = "🥉"; |
| |
| html += ` |
| <div class="lb-row${isTop ? " top-1" : ""}"> |
| <div class="lb-rank">${rankDisplay}</div> |
| <div class="lb-model"> |
| <div class="model-avatar" style="background:${avatarColor}22;border-color:${avatarColor}44;color:${avatarColor}"> |
| ${getAvatarLetter(modelId)} |
| </div> |
| <div class="model-info"> |
| <div class="model-name" title="${modelId}">${modelId}</div> |
| <div class="model-meta"> |
| </div> |
| </div> |
| </div> |
| <div> |
| <div class="lb-score">${score.toFixed(1)}</div> |
| <div class="lb-score-bar"> |
| <div class="lb-score-bar-fill" style="width:${Math.min(score, 100)}%"></div> |
| </div> |
| </div> |
| </div>`; |
| }); |
| container.innerHTML = html; |
| |
| const existingBtn = container.parentElement.querySelector(".show-more"); |
| if (existingBtn) existingBtn.remove(); |
| |
| if (sorted.length > limit) { |
| const btn = document.createElement("div"); |
| btn.className = "show-more"; |
| btn.innerHTML = `Show all ${sorted.length} models <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>`; |
| btn.addEventListener("click", () => { |
| renderRows(sorted.length); |
| }); |
| container.parentElement.appendChild(btn); |
| } |
| } |
| |
| renderRows(INITIAL_SHOW); |
| } |
| |
| const csvUrl = "./results.csv"; |
| |
| async function loadData() { |
| try { |
| const res = await fetch(csvUrl); |
| if (!res.ok) throw new Error(`HTTP ${res.status}`); |
| const csvText = await res.text(); |
| const data = parseCSV(csvText); |
| |
| if (data.length === 0) { |
| throw new Error("CSV parsed zero rows"); |
| } |
| |
| buildRows(data, "Partial Replication (%)", "rows-rep"); |
| buildRows(data, "Compilation Success (%)", "rows-compile"); |
| buildRows(data, "Correct Coefficient Direction (%)", "rows-dir"); |
| buildRows(data, "Significant Level Correctness (%)", "rows-sig"); |
| } catch (err) { |
| console.error("load csv error", err); |
| const banner = document.getElementById("error-banner"); |
| banner.textContent = `Failed to load ranking data: ${err.message}`; |
| banner.classList.remove("hidden"); |
| ["rows-rep","rows-compile", "rows-dir","rows-sig"].forEach(id => { |
| document.getElementById(id).innerHTML = '<div class="loading">Unable to load data</div>'; |
| }); |
| } |
| } |
| |
| loadData(); |
| </script> |
| </body> |
| </html> |
|
|
