Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"/> | |
| <title>AX Diagnostic Leaderboard</title> | |
| <style> | |
| :root{--bg:#f6f8fc;--card:#ffffff;--line:#e6ebf3;--txt:#1a2233;--sub:#667089;--acc:#3b6ef5;--acc-bg:#eaf1ff;--good:#12b76a;--warn:#e8a800;--bad:#ef4444;--shadow:0 1px 3px rgba(20,40,80,.06),0 6px 24px rgba(20,40,80,.05)} | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6} | |
| .wrap{max-width:1080px;margin:0 auto;padding:36px 20px 72px} | |
| header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px} | |
| h1{font-size:28px;font-weight:750;letter-spacing:-.02em} | |
| .sub{color:var(--sub);font-size:15px;margin-bottom:26px} | |
| .lang{border:1px solid var(--line);background:var(--card);color:var(--acc);border-radius:9px;padding:7px 14px;cursor:pointer;font-size:13px;font-weight:600;box-shadow:var(--shadow)} | |
| .lang:hover{background:var(--acc-bg)} | |
| .flow{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 30px} | |
| .step{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);position:relative} | |
| .step .n{color:var(--acc);font-size:12px;font-weight:750;background:var(--acc-bg);display:inline-block;padding:2px 9px;border-radius:20px} | |
| .step .t{font-size:16px;font-weight:700;margin-top:8px} | |
| .step .d{color:var(--sub);font-size:12.5px} | |
| h2{font-size:18px;font-weight:700;margin:30px 0 14px} | |
| .axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px} | |
| .ax{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow);transition:transform .12s} | |
| .ax:hover{transform:translateY(-2px)} | |
| .ax .code{color:#fff;background:var(--acc);font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px} | |
| .ax .nm{font-size:15px;font-weight:700;margin:8px 0 6px} | |
| .ax .mx{color:var(--sub);font-size:12.5px} | |
| .ax .std{color:#98a2b8;font-size:11px;margin-top:8px} | |
| .tablecard{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;margin-top:6px} | |
| table{width:100%;border-collapse:collapse;font-size:14px} | |
| th,td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)} | |
| tr:last-child td{border-bottom:none} | |
| th{background:#fafbfe;color:var(--sub);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em} | |
| tbody tr:hover{background:#fafcff} | |
| td.model{text-align:left;font-weight:700} | |
| td.rank{color:var(--sub);font-weight:700} | |
| .idx{font-weight:750} | |
| .pill{display:inline-block;min-width:26px;padding:2px 9px;border-radius:20px;font-weight:700;font-size:13px} | |
| .g-S,.g-A{background:#e7f8f0;color:var(--good)} .g-B{background:var(--acc-bg);color:var(--acc)} | |
| .g-C{background:#fdf4e0;color:var(--warn)} .g-D,.g-F{background:#fdecec;color:var(--bad)} | |
| .seedtag{color:#98a2b8;font-size:12px;margin-top:10px} | |
| .foot{color:#98a2b8;font-size:12px;margin-top:40px;border-top:1px solid var(--line);padding-top:18px} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <header> | |
| <h1>🩺 <span data-i="title">AX Diagnostic Leaderboard</span></h1> | |
| <button class="lang" onclick="toggle()">한국어</button> | |
| </header> | |
| <div class="sub" data-i="sub">Diagnose LLMs like a clinical exam — then publish the scores. Model quality and serving level, measured.</div> | |
| <div class="flow" id="flow"></div> | |
| <h2 data-i="axesH">Evaluation axes (7)</h2> | |
| <div class="axes" id="axes"></div> | |
| <h2 data-i="lbH">Leaderboard — AX Index</h2> | |
| <div class="tablecard"> | |
| <table id="lb"><thead><tr> | |
| <th>#</th><th data-i="cModel">Model</th><th>AX Index</th><th data-i="cGrade">Grade</th> | |
| <th>trap_rate ↓</th><th data-i="cHealth">Health</th><th>tok/s ↑</th> | |
| </tr></thead><tbody id="lbBody"></tbody></table> | |
| </div> | |
| <div class="seedtag" data-i="seed">◦ Seed data (metacognition trap_rate & serving from live measurements; other axes populate as diagnostics run).</div> | |
| <div class="foot" data-i="foot">Operated by FINAL-Bench (neutral benchmark operator) · Aligned with HELM · TrustLLM · MLPerf · NIST AI RMF · Korea AI Framework Act · Results public, diagnostic methods proprietary.</div> | |
| </div> | |
| <script> | |
| const T={ | |
| en:{title:"AX Diagnostic Leaderboard",sub:"Diagnose LLMs like a clinical exam — then publish the scores. Model quality and serving level, measured.",axesH:"Evaluation axes (7)",lbH:"Leaderboard — AX Index",cModel:"Model",cGrade:"Grade",cHealth:"Health",seed:"◦ Seed data (metacognition trap_rate & serving from live measurements; other axes populate as diagnostics run).",foot:"Operated by FINAL-Bench (neutral benchmark operator) · Aligned with HELM · TrustLLM · MLPerf · NIST AI RMF · Korea AI Framework Act · Results public, diagnostic methods proprietary.", | |
| steps:[["01","Visualize","show the vitals"],["02","Diagnose","score each axis"],["03","Report","write the findings"],["04","Remediate","prescribe fixes"]]}, | |
| ko:{title:"AX 진단 리더보드",sub:"모델을 병원 데려가듯 진단하고 점수를 공개한다. 모델 품질과 서빙 수준을 측정.",axesH:"평가 축 (7개)",lbH:"리더보드 — AX Index",cModel:"모델",cGrade:"등급",cHealth:"건강",seed:"◦ 시드 데이터 (메타인지 trap_rate·서빙은 실측, 나머지 축은 진단 진행 시 채워짐).",foot:"FINAL-Bench 중립 벤치마크 운영 · HELM·TrustLLM·MLPerf·NIST·한국 AI기본법 정합 · 결과 공개, 진단 방법 비공개.", | |
| steps:[["01","시각화","바이탈을 보여주고"],["02","자동 진단","축별로 점수 매기고"],["03","분석 보고","리포트를 쓰고"],["04","대응 방안","고칠 법을 준다"]]} | |
| }; | |
| let lang="en"; | |
| const AXN_KO=["신뢰성·메타인지","지능·역량","구조 건강 (XRAY)","서빙 성능","규제 컴플라이언스","견고성·안전","공정성·프라이버시"]; | |
| function toggle(){lang=lang==="en"?"ko":"en";document.querySelector(".lang").textContent=lang==="en"?"한국어":"English";render();} | |
| function render(){ | |
| const t=T[lang]; | |
| document.querySelectorAll("[data-i]").forEach(e=>{if(t[e.dataset.i])e.textContent=t[e.dataset.i];}); | |
| document.getElementById("flow").innerHTML=t.steps.map(s=>`<div class="step"><span class="n">${s[0]}</span><div class="t">${s[1]}</div><div class="d">${s[2]}</div></div>`).join(""); | |
| if(window._ax) document.getElementById("axes").innerHTML=window._ax.map((a,i)=>`<div class="ax"><span class="code">${a.code}</span><div class="nm">${lang==="ko"?AXN_KO[i]:a.name_en}</div><div class="mx">${a.metrics.join(" · ")}</div><div class="std">${a.std}</div></div>`).join(""); | |
| } | |
| async function load(){ | |
| window._ax=await (await fetch("/api/axes")).json(); | |
| const lb=(await (await fetch("/api/leaderboard")).json()).rows; | |
| document.getElementById("lbBody").innerHTML=lb.map((r,i)=>`<tr><td class="rank">${i+1}</td><td class="model">${r.model}</td><td class="idx">${r.ax_index}</td><td><span class="pill g-${r.grade}">${r.grade}</span></td><td>${r.trap_rate}</td><td><span class="pill g-${r.health_grade}">${r.health_grade}</span></td><td>${r.decode_tps}</td></tr>`).join(""); | |
| render(); | |
| } | |
| load(); | |
| </script> | |
| </body> | |
| </html> | |