Spaces:

CamoAiLab
/

InferenceNet-Leaderboard

Running

App Files Files Community

zsss0316 commited on 9 days ago

Commit

8797a2f

verified ·

1 Parent(s): 76f044d

Update index.html

Browse files

Files changed (1) hide show

index.html +726 -136

index.html CHANGED Viewed

@@ -2,109 +2,636 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Infernet Econometrics Benchmark Leaderboard</title>
     <style>
         * {
             box-sizing: border-box;
         }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans‑serif;
-            max-width: 1160px;
-            margin: 40px auto;
-            padding: 0 24px;
-            background-color: #f5f7fa;
-        }
-        .container {
-            background: #ffffff;
-            padding: 32px;
-            border-radius: 14px;
-            box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
-        }
-        h1 {
-            color: #111827;
             text-align: center;
-            margin-top:0;
-        }
-        .header-desc {
-            text-align:center;
-            color:#4b5563;
-            margin-bottom:28px;
-        }
-        table {
-            width:100%;
-            border-collapse: collapse;
-            margin:16px 0 36px;
-        }
-        th,td {
-            border:1px solid #d1d5db;
-            padding:12px 14px;
-            text-align:left;
-        }
-        th {
-            background:#2563eb;
-            color:#ffffff;
-        }
-        tr:nth-child(even){
-            background-color:#f9fafb;
-        }
-        .tab-wrap{
-            margin-bottom:12px;
-        }
-        .tab{
-            margin:6px 4px;
-            padding:10px 20px;
-            border:1px solid #cbd5e1;
-            background:#e2e8f0;
-            border-radius:8px;
-            cursor:pointer;
-            font-size:15px;
-        }
-        .tab.active{
-            background:#2563eb;
-            color:white;
-            border-color:#2563eb;
-        }
-        .panel{
-            display:none;
-        }
-        .panel.show{
-            display:block;
-        }
-        .metric-block{
-            margin-top:30px;
-            padding:20px;
-            background-color:#f8fafc;
-            border-radius:10px;
         }
     </style>
 </head>
 <body>
-<div class="container">
-    <h1>🏆 Infernet Econometrics Benchmark Leaderboard</h1>
-    <div class="header-desc">
-        <strong>CamoAiLab | HKU CAMO</strong><br>
-        Dataset: <a target="_blank" href="https://huggingface.co/datasets/CamoAiLab/Infernet">CamoAiLab/Infernet</a>
     </div>
-    <div class="tab-wrap">
-        <button class="tab active" onclick="switchTab(0)">1. Compilation Success Rate</button>
-        <button class="tab" onclick="switchTab(1)">2. Partial Replication Rate</button>
-        <button class="tab" onclick="switchTab(2)">3. Correct Coefficient Direction</button>
     </div>
-    <div class="panel show" id="panel-compile"></div>
-    <div class="panel" id="panel-rep"></div>
-    <div class="panel" id="panel-dir"></div>
-    <div class="metric-block">
-        <h3>📌 Metric Definition</h3>
-        <ul style="padding‑left:20px;margin:0;">
             <li><strong>Compilation Success:</strong> Generated code runs without runtime errors.</li>
             <li><strong>Partial Replication:</strong> Partially reproduce target estimation results.</li>
             <li><strong>Correct Coefficient Direction:</strong> Correct sign of estimated coefficients.</li>
         </ul>
-        <p style="margin‑top:12px;font‑size:14px;color:#475569;">
-        Native Hugging Face Community Evals leaderboard pending official allowlist.
         </p>
     </div>
 </div>
@@ -112,79 +639,142 @@
 <script>
 const panels = document.querySelectorAll(".panel");
 const tabs = document.querySelectorAll(".tab");
-function switchTab(idx){
-    panels.forEach(p=>p.classList.remove("show"));
-    tabs.forEach(t=>t.classList.remove("active"));
-    panels[idx].classList.add("show");
-    tabs[idx].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 buildTable(title, data, sortKey){
-    const sorted = [...data].sort((a,b)=> Number(b[sortKey]) - Number(a[sortKey]));
-    let html = `<h3>${title}</h3><table><tr><th>Rank</th><th>Model</th><th>${sortKey}</th></tr>`;
-    sorted.forEach((row,i)=>{
-        html += `<tr>
-            <td>${i+1}</td>
-            <td>${row["Model ID"]}</td>
-            <td>${row[sortKey]}%</td>
-        </tr>`;
-    })
-    html += "</table>";
-    return html;
 }
-//读取space本地csv
 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){
-            document.body.insertAdjacentHTML("beforeend",`<p style="color:red">Warning: CSV parsed zero rows</p>`);
-            return;
-        }
-        document.getElementById("panel-compile").innerHTML = buildTable(
-            "Ranked by Code Compilation Success",
-            data,
-            "Compilation Success (%)"
-        );
-        document.getElementById("panel-rep").innerHTML = buildTable(
-            "Ranked by Partial Replication Rate",
-            data,
-            "Partial Replication (%)"
-        );
-        document.getElementById("panel-dir").innerHTML = buildTable(
-            "Ranked by Correct Coefficient Direction",
-            data,
-            "Correct Coefficient Direction (%)"
-        );
-    } catch(err){
-        console.error("load csv error",err);
-        document.body.insertAdjacentHTML("beforeend",`<p style='color:red;text‑align:center'>Failed to load ranking data: ${err.message}</p>`);
     }
 }
 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 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;
+        }
+        .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;
+        }
+        /* Tags */
+        .tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-bottom: 24px;
+        }
+        .tag {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 5px 12px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 999px;
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+        .tag.benchmark {
+            background: rgba(251, 191, 36, 0.1);
+            border-color: rgba(251, 191, 36, 0.3);
+            color: var(--accent-gold);
+        }
+        .tag .dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: var(--accent-blue);
+        }
+        .tag .dot.green { background: var(--accent-green); }
+        .tag .dot.orange { background: #f97316; }
+        /* 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-rank .trophy {
+            font-size: 16px;
+        }
+        .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>
+            </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>
+        <div class="tags">
+            <span class="tag benchmark">🏆 Benchmark</span>
+            <span class="tag"><span class="dot"></span> Tasks: Econometrics</span>
+            <span class="tag"><span class="dot green"></span> Modalities: Code</span>
+            <span class="tag"><span class="dot orange"></span> Formats: CSV</span>
+            <span class="tag">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+                Open
+            </span>
+        </div>
+    </header>
+    <div class="tab-bar">
+        <button class="tab active" data-idx="0">Compilation Success</button>
+        <button class="tab" data-idx="1">Partial Replication</button>
+        <button class="tab" data-idx="2">Coefficient Direction</button>
+    </div>
+    <div class="panel show" 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-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-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 code runs without runtime errors.</li>
             <li><strong>Partial Replication:</strong> Partially reproduce target estimation results.</li>
             <li><strong>Correct Coefficient Direction:</strong> Correct sign of estimated coefficients.</li>
         </ul>
+        <p class="metric-note">
+            Native Hugging Face Community Evals leaderboard pending official allowlist.
+            Dataset: <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">CamoAiLab/Infernet</a>
         </p>
     </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);
+            html += `
+                <div class="lb-row${isTop ? " top-1" : ""}">
+                    <div class="lb-rank">
+                        ${isTop ? '<span class="trophy">🏆</span>' : rank}
+                    </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 ${isTop ? "verified" : "self-reported"}">
+                                    ${isTop ? "✓ verified" : "self-reported"}
+                                </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, "Compilation Success (%)", "rows-compile");
+        buildRows(data, "Partial Replication (%)", "rows-rep");
+        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-compile", "rows-rep", "rows-dir"].forEach(id => {
+            document.getElementById(id).innerHTML = '<div class="loading">Unable to load data</div>';
+        });
     }
 }
 loadData();
 </script>
 </body>
+</html>