Spaces:

CamoAiLab
/

InferenceNet-Leaderboard

Running

App Files Files Community

zsss0316 commited on 7 days ago

Commit

bf3c602

verified ·

1 Parent(s): 4095a80

Update index.html

Browse files

Files changed (1) hide show

index.html +157 -717

index.html CHANGED Viewed

@@ -2,750 +2,190 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Infernet 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 */
-        .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 */
-        .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;
-        }
-        /* Tabs */
-        .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;
-        }
-        /* Panels */
-        .panel {
-            display: none;
-        }
-        .panel.show {
-            display: block;
-        }
-        /* Leaderboard card */
-        .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);
-        }
-        /* Table header row */
-        .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;
-        }
-        /* Leaderboard rows */
-        .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 */
-        .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 definition card */
-        .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 & error states */
-        .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>
-                    &nbsp;|&nbsp;
-                    📄 <a href="#" target="_blank">Paper</a>
-                    &nbsp;|&nbsp;
-                    🐙 <a href="#" 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>
-    </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</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</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</span>
-            </div>
-            <div id="rows-dir"><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 10% relative error threshold.</li>
-            <li><strong>Correct Coefficient Direction:</strong> The sign (positive/negative) of the treatment‑effect coefficient matches ground‑truth results.</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 three 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) {
-    const colors = {
-        meta: "#0668E1", openai: "#10a37f", google: "#4285f4",
-        anthropic: "#d4a574", mistral: "#ff7000", qwen: "#6366f1",
-        deepseek: "#4f46e5", microsoft: "#00a4ef", camo: "#3b82f6"
-    };
-    const org = (modelId.split("/")[0] || "").toLowerCase();
-    for (const [key, color] of Object.entries(colors)) {
-        if (org.includes(key)) return color;
-    }
-    return "#6b7280";
 }
-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">
-                                <span class="status-badge verified">✓ verified</span>
-                            </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");
-    } 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"].forEach(id => {
-            document.getElementById(id).innerHTML = '<div class="loading">Unable to load data</div>';
-        });
-    }
 }
-loadData();
 </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial‑scale=1.0">
+    <title>Infernet‑Leaderboard</title>
     <style>
         * {
             box-sizing: border-box;
             margin: 0;
             padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans‑serif;
         }
         body {
+            background-color: #12151c;
+            color: #e4e7ec;
+            padding: 32px 16px;
+            max-width: 820px;
             margin: 0 auto;
         }
+        .page‑header {
             display: flex;
+            align‑items: center;
+            gap:12px;
+            margin‑bottom:24px;
+        }
+        .badge‑official {
+            font‑size:13px;
+            background‑color:#1e293b;
+            color:#60a5fa;
+            padding:4px 10px;
+            border‑radius:999px;
+        }
+        .lb‑container {
+            background:#1a202c;
+            border‑radius:12px;
+            overflow:hidden;
+            border:1px solid #2d3748;
+        }
+        .lb‑header‑row {
+            display:grid;
+            grid‑template‑columns:52px 1fr 160px;
+            padding:14px 18px;
+            background:#222b3b;
+            font‑size:13px;
+            color:#a0aec0;
+            font‑weight:500;
+        }
+        .lb‑row {
+            display:grid;
+            grid‑template‑columns:52px 1fr 160px;
+            padding:14px 18px;
+            align‑items:center;
+            border‑bottom:1px solid #242c3a;
+        }
+        .lb‑row.top‑1 {
+            background‑color:#202a3d;
+        }
+        .lb‑rank {
+            font‑weight:bold;
+            font‑size:15px;
+        }
+        .lb‑model {
+            display:flex;
+            align‑items:center;
+            gap:12px;
+        }
+        .model‑avatar {
+            width:36px;
+            height:36px;
+            border‑radius:8px;
+            display:flex;
+            align‑items:center;
+            justify‑content:center;
+            font‑weight:bold;
+            font‑size:15px;
+        }
+        .model‑info {
+            display:flex;
+            flex‑direction:column;
+            gap:3px;
+        }
+        .model‑name {
+            font‑size:14.5px;
+        }
+        .lb‑score {
+            text‑align:right;
+            font‑weight:bold;
+            font‑size:15px;
+            margin‑bottom:4px;
+        }
+        .lb‑score‑bar {
+            width:100%;
+            height:5px;
+            background‑color:#2a3446;
+            border‑radius:3px;
+            overflow:hidden;
+        }
+        .lb‑score‑bar‑fill {
+            height:100%;
+            background‑color:#60a5fa;
+            border‑radius:3px;
         }
     </style>
 </head>
 <body>
+    <div class="page‑header">
+        <h2>Leaderboard</h2>
+        <span class="badge‑official">Official Benchmark</span>
     </div>
+    <div class="lb‑container">
+        <div class="lb‑header‑row">
+            <div>#</div>
+            <div>MODEL</div>
+            <div style="text‑align:right">SCORE</div>
         </div>
+        <div id="lb‑body"></div>
     </div>
 <script>
+// ====================== 配置区 ======================
+// 样例数据，你替换成你的csv解析出来的数据格式
+const rawData = [
+    {model:"GPT 5.5‑Codex", score:26.4},
+    {model:"GPT 4o‑MetaGPT", score:22.0},
+    {model:"DeepSeek v4 Pro‑MetaGPT", score:14.4},
+    {model:"GPT 5.5‑MetricsAI", score:14.2},
+    {model:"GPT 5.5‑Python", score:12.1},
+    {model:"GPT 5.5‑MetaGPT", score:11.4},
+    {model:"GPT 5.5‑Stata", score:6.5},
+    {model:"GPT 4o‑Python", score:3.4},
+];
+// 【已修改】写死统一蓝色头像，不再区分厂商颜色
 function getOrgColor(modelId) {
+    return "#3b82f6";
 }
+function getAvatarLetter(name){
+    return name.charAt(0).toUpperCase();
 }
+function buildRows(data){
+    // 分数降序排序
+    const sorted = [...data].sort((a,b)=> b.score‑a.score);
+    let html = "";
+    sorted.forEach((item, idx)=>{
+        const rank = idx+1;
+        const isTop = rank<=3;
+        const color = getOrgColor(item.model);
+        const letter = getAvatarLetter(item.model);
+        html += `
+        <div class="lb‑row ${isTop?" top‑1":""}">
+            <div class="lb‑rank">${rank}</div>
+            <div class="lb‑model">
+                <div class="model‑avatar" style="background‑color:${color}22; color:${color}; border:1px solid ${color}44">
+                    ${letter}
+                </div>
+                <div class="model‑info">
+                    <div class="model‑name" title="${item.model}">${item.model}</div>
+                    <!-- verified徽章已完全移除 -->
+                </div>
+            </div>
+            <div>
+                <div class="lb‑score">${item.score.toFixed(1)}%</div>
+                <div class="lb‑score‑bar">
+                    <div class="lb‑score‑bar‑fill" style="width:${Math.min(item.score,100)}%"></div>
+                </div>
+            </div>
+        </div>
+        `
+    })
+    document.querySelector("#lb‑body").innerHTML = html;
 }
+// 渲染榜单
+buildRows(rawData);
+/*
+如果你原本是读取远程csv，把上面rawData替换成你的csv加载逻辑，示例伪代码：
+fetch("./leaderboard.csv")
+.then(r=>r.text())
+.then(csvText=>{
+    // 你的csv解析逻辑，得到 [{model,score},...] 数组，传给 buildRows(parsedList)
+})
+*/
 </script>
 </body>
 </html>