Hugging Face's logo

Spaces:
CamoAiLab
/
InferenceNet-Leaderboard
Running

App Files Community
zsss0316 commited on
Commit
73d8c8d
·
verified ·
1 Parent(s): bf3c602

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +706 -156
index.html CHANGED
@@ -2,190 +2,740 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial‑scale=1.0">
6
- <title>Infernet‑Leaderboard</title>
 
 
 
7
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  * {
9
  box-sizing: border-box;
10
  margin: 0;
11
  padding: 0;
12
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans‑serif;
13
  }
 
14
  body {
15
- background-color: #12151c;
16
- color: #e4e7ec;
17
- padding: 32px 16px;
18
- max-width: 820px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  margin: 0 auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
21
- .page‑header {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
22
  display: flex;
23
- align‑items: center;
24
- gap:12px;
25
- margin‑bottom:24px;
26
- }
27
- .badge‑official {
28
- font‑size:13px;
29
- background‑color:#1e293b;
30
- color:#60a5fa;
31
- padding:4px 10px;
32
- border‑radius:999px;
33
- }
34
- .lb‑container {
35
- background:#1a202c;
36
- border‑radius:12px;
37
- overflow:hidden;
38
- border:1px solid #2d3748;
39
- }
40
- .lb‑header‑row {
41
- display:grid;
42
- grid‑template‑columns:52px 1fr 160px;
43
- padding:14px 18px;
44
- background:#222b3b;
45
- font‑size:13px;
46
- color:#a0aec0;
47
- font‑weight:500;
48
- }
49
- .lb‑row {
50
- display:grid;
51
- grid‑template‑columns:52px 1fr 160px;
52
- padding:14px 18px;
53
- align‑items:center;
54
- border‑bottom:1px solid #242c3a;
55
- }
56
- .lb‑row.top‑1 {
57
- background‑color:#202a3d;
58
- }
59
- .lb‑rank {
60
- font‑weight:bold;
61
- font‑size:15px;
62
- }
63
- .lb‑model {
64
- display:flex;
65
- align‑items:center;
66
- gap:12px;
67
- }
68
- .model‑avatar {
69
- width:36px;
70
- height:36px;
71
- border‑radius:8px;
72
- display:flex;
73
- align‑items:center;
74
- justify‑content:center;
75
- font‑weight:bold;
76
- font‑size:15px;
77
- }
78
- .model‑info {
79
- display:flex;
80
- flex‑direction:column;
81
- gap:3px;
82
- }
83
- .model‑name {
84
- font‑size:14.5px;
85
- }
86
- .lb‑score {
87
- text‑align:right;
88
- font‑weight:bold;
89
- font‑size:15px;
90
- margin‑bottom:4px;
91
- }
92
- .lb‑score‑bar {
93
- width:100%;
94
- height:5px;
95
- background‑color:#2a3446;
96
- border‑radius:3px;
97
- overflow:hidden;
98
- }
99
- .lb‑score‑bar‑fill {
100
- height:100%;
101
- background‑color:#60a5fa;
102
- border‑radius:3px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
  </style>
105
  </head>
106
  <body>
107
- <div class="page‑header">
108
- <h2>Leaderboard</h2>
109
- <span class="badge‑official">Official Benchmark</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  </div>
111
 
112
- <div class="lb‑container">
113
- <div class="lb‑header‑row">
114
- <div>#</div>
115
- <div>MODEL</div>
116
- <div style="text‑align:right">SCORE</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
  </div>
118
- <div id="lb‑body"></div>
119
  </div>
 
120
 
121
  <script>
122
- // ====================== 配置区 ======================
123
- // 样例数据，你替换成你的csv解析出来的数据格式
124
- const rawData = [
125
- {model:"GPT 5.5‑Codex", score:26.4},
126
- {model:"GPT 4o‑MetaGPT", score:22.0},
127
- {model:"DeepSeek v4 Pro‑MetaGPT", score:14.4},
128
- {model:"GPT 5.5‑MetricsAI", score:14.2},
129
- {model:"GPT 5.5‑Python", score:12.1},
130
- {model:"GPT 5.5‑MetaGPT", score:11.4},
131
- {model:"GPT 5.5‑Stata", score:6.5},
132
- {model:"GPT 4o‑Python", score:3.4},
133
- ];
134
-
135
- // 【已修改】写死统一蓝色头像，不再区分厂商颜色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  function getOrgColor(modelId) {
137
  return "#3b82f6";
138
  }
139
 
140
- function getAvatarLetter(name){
141
- return name.charAt(0).toUpperCase();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  }
143
 
144
- function buildRows(data){
145
- // 分数降序排序
146
- const sorted = [...data].sort((a,b)=> b.score‑a.score);
147
- let html = "";
148
- sorted.forEach((item, idx)=>{
149
- const rank = idx+1;
150
- const isTop = rank<=3;
151
- const color = getOrgColor(item.model);
152
- const letter = getAvatarLetter(item.model);
153
- html += `
154
- <div class="lb‑row ${isTop?" top‑1":""}">
155
- <div class="lb‑rank">${rank}</div>
156
- <div class="lb‑model">
157
- <div class="model‑avatar" style="background‑color:${color}22; color:${color}; border:1px solid ${color}44">
158
- ${letter}
159
- </div>
160
- <div class="model‑info">
161
- <div class="model‑name" title="${item.model}">${item.model}</div>
162
- <!-- verified徽章已完全移除 -->
163
- </div>
164
- </div>
165
- <div>
166
- <div class="lb‑score">${item.score.toFixed(1)}%</div>
167
- <div class="lb‑score‑bar">
168
- <div class="lb‑score‑bar‑fill" style="width:${Math.min(item.score,100)}%"></div>
169
- </div>
170
- </div>
171
- </div>
172
- `
173
- })
174
- document.querySelector("#lb‑body").innerHTML = html;
175
  }
176
 
177
- // 渲染榜单
178
- buildRows(rawData);
179
-
180
- /*
181
- 如果你原本是读取远程csv，把上面rawData替换成你的csv加载逻辑，示例伪代码：
182
- fetch("./leaderboard.csv")
183
- .then(r=>r.text())
184
- .then(csvText=>{
185
- // 你的csv解析逻辑，得到 [{model,score},...] 数组，传给 buildRows(parsedList)
186
- })
187
- */
188
  </script>
189
-
190
  </body>
191
  </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Infernet Econometrics Benchmark Leaderboard</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
  <style>
11
+ :root {
12
+ --bg-primary: #0b0f19;
13
+ --bg-secondary: #111827;
14
+ --bg-tertiary: #1a2234;
15
+ --bg-hover: #1e293b;
16
+ --border: #1f2937;
17
+ --border-light: #374151;
18
+ --text-primary: #f9fafb;
19
+ --text-secondary: #9ca3af;
20
+ --text-muted: #6b7280;
21
+ --accent-blue: #3b82f6;
22
+ --accent-blue-dim: rgba(59, 130, 246, 0.15);
23
+ --accent-gold: #fbbf24;
24
+ --accent-green: #22c55e;
25
+ --accent-green-dim: rgba(34, 197, 94, 0.12);
26
+ --radius: 10px;
27
+ --radius-sm: 6px;
28
+ }
29
+
30
  * {
31
  box-sizing: border-box;
32
  margin: 0;
33
  padding: 0;
 
34
  }
35
+
36
  body {
37
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
38
+ background: var(--bg-primary);
39
+ color: var(--text-primary);
40
+ line-height: 1.5;
41
+ min-height: 100vh;
42
+ }
43
+
44
+ a {
45
+ color: var(--accent-blue);
46
+ text-decoration: none;
47
+ }
48
+
49
+ a:hover {
50
+ text-decoration: underline;
51
+ }
52
+
53
+ .page {
54
+ max-width: 980px;
55
  margin: 0 auto;
56
+ padding: 28px 24px 64px;
57
+ }
58
+
59
+ /* Breadcrumb */
60
+ .breadcrumb {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 8px;
64
+ font-size: 14px;
65
+ color: var(--text-secondary);
66
+ margin-bottom: 20px;
67
+ }
68
+
69
+ .breadcrumb svg {
70
+ opacity: 0.6;
71
+ }
72
+
73
+ .breadcrumb span {
74
+ color: var(--text-muted);
75
+ }
76
+
77
+ /* Header */
78
+ .header {
79
+ margin-bottom: 24px;
80
+ }
81
+
82
+ .title-row {
83
+ display: flex;
84
+ align-items: flex-start;
85
+ gap: 12px;
86
+ margin-bottom: 12px;
87
+ }
88
+
89
+ .title-icon {
90
+ width: 40px;
91
+ height: 40px;
92
+ background: linear-gradient(135deg, #fbbf24, #f59e0b);
93
+ border-radius: var(--radius-sm);
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ font-size: 20px;
98
+ flex-shrink: 0;
99
+ }
100
+
101
+ .title-block h1 {
102
+ font-size: 22px;
103
+ font-weight: 600;
104
+ letter-spacing: -0.02em;
105
+ line-height: 1.3;
106
+ }
107
+
108
+ .title-block .subtitle {
109
+ font-size: 14px;
110
+ color: var(--text-secondary);
111
+ margin-top: 4px;
112
+ }
113
+ .intro-desc {
114
+ margin-top:14px;
115
+ font-size:14px;
116
+ color:var(--text-secondary);
117
+ line-height:1.6;
118
+ }
119
+ .header-links {
120
+ margin-top:12px;
121
+ font-size:14px;
122
+ }
123
+ .like-btn {
124
+ margin-left: auto;
125
+ display: flex;
126
+ align-items: center;
127
+ gap: 6px;
128
+ padding: 6px 14px;
129
+ background: var(--bg-secondary);
130
+ border: 1px solid var(--border);
131
+ border-radius: 999px;
132
+ color: var(--text-secondary);
133
+ font-size: 13px;
134
+ cursor: default;
135
+ flex-shrink: 0;
136
+ }
137
+
138
+ /* Tabs */
139
+ .tab-bar {
140
+ display: flex;
141
+ gap: 0;
142
+ border-bottom: 1px solid var(--border);
143
+ margin-bottom: 0;
144
+ overflow-x: auto;
145
+ }
146
+
147
+ .tab {
148
+ padding: 12px 18px;
149
+ background: none;
150
+ border: none;
151
+ color: var(--text-muted);
152
+ font-family: inherit;
153
+ font-size: 14px;
154
+ font-weight: 500;
155
+ cursor: pointer;
156
+ white-space: nowrap;
157
+ position: relative;
158
+ transition: color 0.15s;
159
+ }
160
+
161
+ .tab:hover {
162
+ color: var(--text-secondary);
163
+ }
164
+
165
+ .tab.active {
166
+ color: var(--text-primary);
167
+ }
168
+
169
+ .tab.active::after {
170
+ content: "";
171
+ position: absolute;
172
+ bottom: -1px;
173
+ left: 0;
174
+ right: 0;
175
+ height: 2px;
176
+ background: var(--text-primary);
177
+ border-radius: 2px 2px 0 0;
178
+ }
179
+
180
+ /* Panels */
181
+ .panel {
182
+ display: none;
183
+ }
184
+
185
+ .panel.show {
186
+ display: block;
187
+ }
188
+
189
+ /* Leaderboard card */
190
+ .leaderboard-card {
191
+ background: var(--bg-secondary);
192
+ border: 1px solid var(--border);
193
+ border-radius: var(--radius);
194
+ overflow: hidden;
195
+ margin-top: 24px;
196
+ }
197
+
198
+ .leaderboard-header {
199
+ display: flex;
200
+ align-items: center;
201
+ gap: 10px;
202
+ padding: 16px 20px;
203
+ border-bottom: 1px solid var(--border);
204
+ }
205
+
206
+ .leaderboard-header h2 {
207
+ font-size: 15px;
208
+ font-weight: 600;
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 8px;
212
+ }
213
+
214
+ .badge-official {
215
+ display: inline-flex;
216
+ align-items: center;
217
+ gap: 4px;
218
+ padding: 3px 10px;
219
+ background: var(--accent-blue-dim);
220
+ border: 1px solid rgba(59, 130, 246, 0.3);
221
+ border-radius: 999px;
222
+ font-size: 11px;
223
+ font-weight: 500;
224
+ color: var(--accent-blue);
225
+ }
226
+
227
+ /* Table header row */
228
+ .lb-columns {
229
+ display: grid;
230
+ grid-template-columns: 48px 1fr 100px;
231
+ padding: 10px 20px;
232
+ font-size: 11px;
233
+ font-weight: 600;
234
+ text-transform: uppercase;
235
+ letter-spacing: 0.06em;
236
+ color: var(--text-muted);
237
+ border-bottom: 1px solid var(--border);
238
+ }
239
+
240
+ .lb-columns .col-score {
241
+ text-align: right;
242
+ }
243
+
244
+ /* Leaderboard rows */
245
+ .lb-row {
246
+ display: grid;
247
+ grid-template-columns: 48px 1fr 100px;
248
+ align-items: center;
249
+ padding: 14px 20px;
250
+ border-bottom: 1px solid var(--border);
251
+ transition: background 0.12s;
252
+ }
253
+
254
+ .lb-row:last-child {
255
+ border-bottom: none;
256
+ }
257
+
258
+ .lb-row:hover {
259
+ background: var(--bg-hover);
260
+ }
261
+
262
+ .lb-row.top-1 {
263
+ background: rgba(251, 191, 36, 0.04);
264
+ }
265
+
266
+ .lb-rank {
267
+ font-size: 14px;
268
+ color: var(--text-muted);
269
+ font-weight: 500;
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 4px;
273
+ }
274
+
275
+ .lb-model {
276
+ display: flex;
277
+ align-items: center;
278
+ gap: 10px;
279
+ min-width: 0;
280
+ }
281
+
282
+ .model-avatar {
283
+ width: 28px;
284
+ height: 28px;
285
+ border-radius: var(--radius-sm);
286
+ background: var(--bg-tertiary);
287
+ border: 1px solid var(--border-light);
288
+ display: flex;
289
+ align-items: center;
290
+ justify-content: center;
291
+ font-size: 11px;
292
+ font-weight: 700;
293
+ color: var(--text-secondary);
294
+ flex-shrink: 0;
295
+ text-transform: uppercase;
296
+ }
297
+
298
+ .model-info {
299
+ min-width: 0;
300
+ }
301
+
302
+ .model-name {
303
+ font-size: 14px;
304
+ font-weight: 500;
305
+ color: var(--text-primary);
306
+ white-space: nowrap;
307
+ overflow: hidden;
308
+ text-overflow: ellipsis;
309
+ }
310
+
311
+ .model-meta {
312
+ display: flex;
313
+ align-items: center;
314
+ gap: 6px;
315
+ margin-top: 3px;
316
+ }
317
+
318
+ .status-badge {
319
+ display: inline-flex;
320
+ align-items: center;
321
+ gap: 3px;
322
+ padding: 1px 8px;
323
+ border-radius: 999px;
324
+ font-size: 11px;
325
+ font-weight: 500;
326
+ }
327
+
328
+ .status-badge.verified {
329
+ background: var(--accent-green-dim);
330
+ color: var(--accent-green);
331
+ border: 1px solid rgba(34, 197, 94, 0.25);
332
  }
333
+
334
+ .status-badge.self-reported {
335
+ background: var(--bg-tertiary);
336
+ color: var(--text-muted);
337
+ border: 1px solid var(--border);
338
+ }
339
+
340
+ .lb-score {
341
+ text-align: right;
342
+ font-size: 15px;
343
+ font-weight: 600;
344
+ color: var(--text-primary);
345
+ font-variant-numeric: tabular-nums;
346
+ }
347
+
348
+ .lb-score-bar {
349
+ margin-top: 4px;
350
+ height: 3px;
351
+ background: var(--bg-tertiary);
352
+ border-radius: 999px;
353
+ overflow: hidden;
354
+ }
355
+
356
+ .lb-score-bar-fill {
357
+ height: 100%;
358
+ background: linear-gradient(90deg, var(--accent-blue), #6366f1);
359
+ border-radius: 999px;
360
+ transition: width 0.4s ease;
361
+ }
362
+
363
+ .lb-row.top-1 .lb-score-bar-fill {
364
+ background: linear-gradient(90deg, var(--accent-gold), #f59e0b);
365
+ }
366
+
367
+ /* Show more */
368
+ .show-more {
369
  display: flex;
370
+ align-items: center;
371
+ justify-content: center;
372
+ gap: 6px;
373
+ padding: 14px;
374
+ color: var(--text-secondary);
375
+ font-size: 13px;
376
+ cursor: pointer;
377
+ border-top: 1px solid var(--border);
378
+ transition: color 0.15s, background 0.15s;
379
+ }
380
+
381
+ .show-more:hover {
382
+ color: var(--text-primary);
383
+ background: var(--bg-hover);
384
+ }
385
+
386
+ /* Metric definition card */
387
+ .metric-card {
388
+ margin-top: 32px;
389
+ background: var(--bg-secondary);
390
+ border: 1px solid var(--border);
391
+ border-radius: var(--radius);
392
+ padding: 20px 24px;
393
+ }
394
+
395
+ .metric-card h3 {
396
+ font-size: 14px;
397
+ font-weight: 600;
398
+ margin-bottom: 14px;
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 8px;
402
+ color: var(--text-primary);
403
+ }
404
+
405
+ .metric-list {
406
+ list-style: none;
407
+ display: flex;
408
+ flex-direction: column;
409
+ gap: 10px;
410
+ }
411
+
412
+ .metric-list li {
413
+ font-size: 13px;
414
+ color: var(--text-secondary);
415
+ padding-left: 16px;
416
+ position: relative;
417
+ }
418
+
419
+ .metric-list li::before {
420
+ content: "";
421
+ position: absolute;
422
+ left: 0;
423
+ top: 8px;
424
+ width: 6px;
425
+ height: 6px;
426
+ border-radius: 50%;
427
+ background: var(--accent-blue);
428
+ }
429
+
430
+ .metric-list strong {
431
+ color: var(--text-primary);
432
+ font-weight: 500;
433
+ }
434
+
435
+ .metric-note {
436
+ margin-top: 16px;
437
+ padding-top: 14px;
438
+ border-top: 1px solid var(--border);
439
+ font-size: 12px;
440
+ color: var(--text-muted);
441
+ }
442
+
443
+ /* Loading & error states */
444
+ .loading {
445
+ padding: 48px 20px;
446
+ text-align: center;
447
+ color: var(--text-muted);
448
+ font-size: 14px;
449
+ }
450
+
451
+ .loading-spinner {
452
+ width: 24px;
453
+ height: 24px;
454
+ border: 2px solid var(--border);
455
+ border-top-color: var(--accent-blue);
456
+ border-radius: 50%;
457
+ animation: spin 0.7s linear infinite;
458
+ margin: 0 auto 12px;
459
+ }
460
+
461
+ @keyframes spin {
462
+ to { transform: rotate(360deg); }
463
+ }
464
+
465
+ .error-banner {
466
+ margin-top: 16px;
467
+ padding: 12px 16px;
468
+ background: rgba(239, 68, 68, 0.1);
469
+ border: 1px solid rgba(239, 68, 68, 0.3);
470
+ border-radius: var(--radius-sm);
471
+ color: #fca5a5;
472
+ font-size: 13px;
473
+ text-align: center;
474
+ }
475
+
476
+ .hidden { display: none !important; }
477
+
478
+ @media (max-width: 600px) {
479
+ .page { padding: 16px 16px 48px; }
480
+ .title-row { flex-wrap: wrap; }
481
+ .like-btn { margin-left: 0; }
482
+ .lb-columns, .lb-row {
483
+ grid-template-columns: 36px 1fr 72px;
484
+ padding-left: 14px;
485
+ padding-right: 14px;
486
+ }
487
+ .model-name { font-size: 13px; }
488
  }
489
  </style>
490
  </head>
491
  <body>
492
+ <div class="page">
493
+ <nav class="breadcrumb">
494
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
495
+ <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"/>
496
+ </svg>
497
+ <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">Datasets</a>
498
+ <span>/</span>
499
+ <span>CamoAiLab/Infernet</span>
500
+ </nav>
501
+
502
+ <header class="header">
503
+ <div class="title-row">
504
+ <div class="title-icon">🏆</div>
505
+ <div class="title-block">
506
+ <h1>Infernet Econometrics Benchmark</h1>
507
+ <p class="subtitle">CamoAiLab · HKU CAMO</p>
508
+ <p class="intro-desc">
509
+ 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.
510
+ </p>
511
+ <div class="header-links">
512
+ 🔗 <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">Dataset</a>
513
+ &nbsp;|&nbsp;
514
+ 📄 <a href="#" target="_blank">Paper</a>
515
+ &nbsp;|&nbsp;
516
+ 🐙 <a href="#" target="_blank">GitHub</a>
517
+ </div>
518
+ </div>
519
+ <div class="like-btn">
520
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
521
+ <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"/>
522
+ </svg>
523
+ Leaderboard
524
+ </div>
525
+ </div>
526
+ </header>
527
+
528
+ <div class="tab-bar">
529
+ <button class="tab active" data-idx="0">Partial Replication</button>
530
+ <button class="tab" data-idx="1">Compilation Success</button>
531
+ <button class="tab" data-idx="2">Coefficient Direction</button>
532
+ </div>
533
+
534
+ <div class="panel show" id="panel-rep">
535
+ <div class="leaderboard-card">
536
+ <div class="leaderboard-header">
537
+ <h2>
538
+ <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>
539
+ Leaderboard
540
+ </h2>
541
+ <span class="badge-official">Official Benchmark</span>
542
+ </div>
543
+ <div class="lb-columns">
544
+ <span>#</span>
545
+ <span>Model</span>
546
+ <span class="col-score">Score</span>
547
+ </div>
548
+ <div id="rows-rep"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="panel" id="panel-compile">
553
+ <div class="leaderboard-card">
554
+ <div class="leaderboard-header">
555
+ <h2>
556
+ <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>
557
+ Leaderboard
558
+ </h2>
559
+ <span class="badge-official">Official Benchmark</span>
560
+ </div>
561
+ <div class="lb-columns">
562
+ <span>#</span>
563
+ <span>Model</span>
564
+ <span class="col-score">Score</span>
565
+ </div>
566
+ <div id="rows-compile"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div>
567
+ </div>
568
  </div>
569
 
570
+ <div class="panel" id="panel-dir">
571
+ <div class="leaderboard-card">
572
+ <div class="leaderboard-header">
573
+ <h2>
574
+ <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>
575
+ Leaderboard
576
+ </h2>
577
+ <span class="badge-official">Official Benchmark</span>
578
+ </div>
579
+ <div class="lb-columns">
580
+ <span>#</span>
581
+ <span>Model</span>
582
+ <span class="col-score">Score</span>
583
+ </div>
584
+ <div id="rows-dir"><div class="loading"><div class="loading-spinner"></div>Loading rankings…</div></div>
585
+ </div>
586
+ </div>
587
+
588
+ <div id="error-banner" class="error-banner hidden"></div>
589
+
590
+ <div class="metric-card">
591
+ <h3>
592
+ <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>
593
+ Metric Definitions
594
+ </h3>
595
+ <ul class="metric-list">
596
+ <li><strong>Compilation Success:</strong> Generated econometric code executes completely without runtime or syntax errors.</li>
597
+ <li><strong>Partial Replication:</strong> The target treatment coefficient can be reproduced within a 10% relative error threshold.</li>
598
+ <li><strong>Correct Coefficient Direction:</strong> The sign (positive/negative) of the treatment‑effect coefficient matches ground‑truth results.</li>
599
+ </ul>
600
+ <div class="metric-note">
601
+ <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.
602
+ <br><br>
603
+ Dataset: <a href="https://huggingface.co/datasets/CamoAiLab/Infernet" target="_blank">CamoAiLab/Infernet</a>
604
  </div>
 
605
  </div>
606
+ </div>
607
 
608
  <script>
609
+ const panels = document.querySelectorAll(".panel");
610
+ const tabs = document.querySelectorAll(".tab");
611
+ const INITIAL_SHOW = 10;
612
+
613
+ tabs.forEach(tab => {
614
+ tab.addEventListener("click", () => {
615
+ const idx = Number(tab.dataset.idx);
616
+ panels.forEach(p => p.classList.remove("show"));
617
+ tabs.forEach(t => t.classList.remove("active"));
618
+ panels[idx].classList.add("show");
619
+ tab.classList.add("active");
620
+ });
621
+ });
622
+
623
+ function parseCSV(text) {
624
+ text = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
625
+ const lines = text.trim().split("\n").filter(line => line.trim() !== "");
626
+ const headers = lines[0].split(",").map(h => h.trim());
627
+ const rows = [];
628
+ for (let i = 1; i < lines.length; i++) {
629
+ const vals = lines[i].split(",").map(v => v.trim());
630
+ const obj = {};
631
+ headers.forEach((h, idx) => { obj[h] = vals[idx]; });
632
+ rows.push(obj);
633
+ }
634
+ return rows;
635
+ }
636
+
637
+ function getAvatarLetter(modelId) {
638
+ const parts = modelId.split("/");
639
+ const name = parts.length > 1 ? parts[1] : parts[0];
640
+ return name.charAt(0).toUpperCase();
641
+ }
642
+
643
  function getOrgColor(modelId) {
644
  return "#3b82f6";
645
  }
646
 
647
+ function buildRows(data, sortKey, containerId) {
648
+ const sorted = [...data].sort((a, b) => Number(b[sortKey]) - Number(a[sortKey]));
649
+ const container = document.getElementById(containerId);
650
+
651
+ if (sorted.length === 0) {
652
+ container.innerHTML = '<div class="loading">No data available</div>';
653
+ return;
654
+ }
655
+
656
+ function renderRows(limit) {
657
+ let html = "";
658
+ sorted.slice(0, limit).forEach((row, i) => {
659
+ const rank = i + 1;
660
+ const score = Number(row[sortKey]);
661
+ const modelId = row["Model ID"] || "Unknown";
662
+ const isTop = rank === 1;
663
+ const avatarColor = getOrgColor(modelId);
664
+
665
+ // 金银铜奖牌
666
+ let rankDisplay = rank;
667
+ if(rank ===1) rankDisplay = "🥇";
668
+ else if(rank ===2) rankDisplay = "🥈";
669
+ else if(rank ===3) rankDisplay = "🥉";
670
+
671
+
672
+ html += `
673
+ <div class="lb-row${isTop ? " top-1" : ""}">
674
+ <div class="lb-rank">${rankDisplay}</div>
675
+ <div class="lb-model">
676
+ <div class="model-avatar" style="background:${bgColor};border-color:${borderColor};color:${txtColor}">
677
+ ${getAvatarLetter(modelId)}
678
+ </div>
679
+ <div class="model-info">
680
+ <div class="model-name" title="${modelId}">${modelId}</div>
681
+ <!-- verified徽章已全部移除 -->
682
+ </div>
683
+ </div>
684
+ <div>
685
+ <div class="lb-score">${score.toFixed(1)}%</div>
686
+ <div class="lb-score-bar">
687
+ <div class="lb-score-bar-fill" style="width:${Math.min(score, 100)}%"></div>
688
+ </div>
689
+ </div>
690
+ </div>`;
691
+ });
692
+ container.innerHTML = html;
693
+
694
+ const existingBtn = container.parentElement.querySelector(".show-more");
695
+ if (existingBtn) existingBtn.remove();
696
+
697
+ if (sorted.length > limit) {
698
+ const btn = document.createElement("div");
699
+ btn.className = "show-more";
700
+ 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>`;
701
+ btn.addEventListener("click", () => {
702
+ renderRows(sorted.length);
703
+ });
704
+ container.parentElement.appendChild(btn);
705
+ }
706
+ }
707
+
708
+ renderRows(INITIAL_SHOW);
709
  }
710
 
711
+ const csvUrl = "./results.csv";
712
+
713
+ async function loadData() {
714
+ try {
715
+ const res = await fetch(csvUrl);
716
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
717
+ const csvText = await res.text();
718
+ const data = parseCSV(csvText);
719
+
720
+ if (data.length === 0) {
721
+ throw new Error("CSV parsed zero rows");
722
+ }
723
+
724
+ buildRows(data, "Partial Replication (%)", "rows-rep");
725
+ buildRows(data, "Compilation Success (%)", "rows-compile");
726
+ buildRows(data, "Correct Coefficient Direction (%)", "rows-dir");
727
+ } catch (err) {
728
+ console.error("load csv error", err);
729
+ const banner = document.getElementById("error-banner");
730
+ banner.textContent = `Failed to load ranking data: ${err.message}`;
731
+ banner.classList.remove("hidden");
732
+ ["rows-rep","rows-compile", "rows-dir"].forEach(id => {
733
+ document.getElementById(id).innerHTML = '<div class="loading">Unable to load data</div>';
734
+ });
735
+ }
 
 
 
 
 
 
736
  }
737
 
738
+ loadData();
 
 
 
 
 
 
 
 
 
 
739
  </script>
 
740
  </body>
741
  </html>