Spaces:

FINAL-Bench
/

leadboard

Running

App Files Files Community

SeaWolf-AI commited on 1 day ago

Commit

45fe5ce

verified ·

1 Parent(s): 66e787f

UI: noise-floor axis visualization, drag-drop submit, polished shell

Browse files

Signature visual puts the experimental noise band on the MAE axis so a method sitting inside the measurement limit is visible at a glance. Adds file drop for predictions, CSV parsing, rank medals, leakage chips.

Files changed (1) hide show

index.html +424 -236

index.html CHANGED Viewed

@@ -4,118 +4,223 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>LEADBOARD — 신약 예측 도구 시험대</title>
 <!-- <head> 는 선택이 아니다: 플랫폼이 자기 태그를 문서에 주입하는데, 받을 head 가 없으면
      그것들이 doctype 앞에 놓이고 페이지 전체가 쿼크 모드로 떨어진다. -->
 <style>
   :root{
-    --bg:#f6f7f9;--card:#fff;--ink:#15171c;--muted:#68707d;--line:#e3e6ea;
-    --accent:#2a4d8f;--soft:#e9eff9;--edge:#c8d4e8;--warn:#8a5a00;--warnbg:#fff6e0;
-    --good:#1d7a4d;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
   }
   @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
-    --bg:#0f1115;--card:#171a20;--ink:#e7eaee;--muted:#98a0ac;--line:#282d36;
-    --accent:#7aa2e8;--soft:#161e2c;--edge:#2f3a4d;--warn:#e0b23c;--warnbg:#282112;--good:#4cc98a;}}
   :root[data-theme="dark"]{
-    --bg:#0f1115;--card:#171a20;--ink:#e7eaee;--muted:#98a0ac;--line:#282d36;
-    --accent:#7aa2e8;--soft:#161e2c;--edge:#2f3a4d;--warn:#e0b23c;--warnbg:#282112;--good:#4cc98a;}
   *{box-sizing:border-box}
-  body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;
     font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",
-    "Malgun Gothic",Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
-  .wrap{max-width:960px;margin:0 auto;padding:0 20px 90px}
-  a{color:var(--accent);text-decoration:none}
-  .mono,code{font-family:var(--mono)}
-  /* nav */
-  nav{position:sticky;top:0;z-index:9;background:color-mix(in srgb,var(--bg) 88%,transparent);
-      backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
-  nav .in{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
-  nav .lg{font-weight:800;letter-spacing:-.03em;font-size:18px}
-  nav .lg span{color:var(--accent)}
-  nav .sp{flex:1}
-  nav .u{font-size:13px;color:var(--muted)}
-  .btn{display:inline-block;padding:7px 14px;border-radius:8px;background:var(--accent);
-       color:#fff;font-size:13px;font-weight:600;border:0;cursor:pointer}
-  .btn.g{background:transparent;color:var(--accent);border:1px solid var(--edge)}
-  .crumb{font-size:13px;color:var(--muted);margin:22px 0 4px}
-  header.hero{padding:52px 0 30px;border-bottom:1px solid var(--line);margin-bottom:26px}
-  .brand{font-size:clamp(34px,7vw,54px);font-weight:800;letter-spacing:-.035em;margin:0 0 4px;line-height:1.05}
-  .brand span{color:var(--accent)}
-  .tag{font-size:clamp(17px,3vw,22px);font-weight:700;margin:16px 0 6px;letter-spacing:-.015em}
-  .sub{font-size:14px;color:var(--muted);margin:0}
-  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:24px 0 8px}
-  .stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
-  .stat b{display:block;font-size:24px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em}
-  .stat span{font-size:12px;color:var(--muted)}
-  h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
-     color:var(--accent);margin:44px 0 14px}
-  h3{font-size:19px;font-weight:700;margin:26px 0 8px;letter-spacing:-.01em}
-  p{margin:0 0 14px}
-  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
-  .cc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;
-      cursor:pointer;transition:border-color .15s,transform .1s;display:block}
-  .cc:hover{border-color:var(--edge);transform:translateY(-1px)}
-  .cc.off{opacity:.62;cursor:default}
-  .cc .ico{font-size:22px}
-  .cc .nm{font-weight:700;font-size:16px;margin:6px 0 2px}
-  .cc .ds{font-size:13px;color:var(--muted);line-height:1.55;min-height:42px}
-  .cc .mt{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
-          font-family:var(--mono);font-size:12px;color:var(--muted);
           display:flex;justify-content:space-between;gap:8px}
-  .pill{display:inline-block;font-size:11px;font-family:var(--mono);padding:2px 7px;
-        border-radius:20px;background:var(--soft);color:var(--accent);font-weight:700}
-  .pill.gr{background:transparent;border:1px solid var(--line);color:var(--muted)}
-  .tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:18px 0 0}
-  .tab{padding:9px 15px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
        border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
-  .tab.on{color:var(--accent);border-bottom-color:var(--accent)}
-  .tabs.sub{border-bottom:0;margin:14px 0 6px}
-  .tabs.sub .tab{font-size:13px;padding:6px 12px;border-radius:7px;border-bottom:0}
-  .tabs.sub .tab.on{background:var(--soft)}
-  table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0}
-  th{text-align:right;font-weight:600;color:var(--muted);font-size:11px;letter-spacing:.05em;
-     text-transform:uppercase;padding:8px 9px;border-bottom:1px solid var(--line)}
-  th:first-child,td:first-child{text-align:left}
-  th:nth-child(2),td:nth-child(2){text-align:left}
-  td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono)}
-  td:nth-child(2){font-family:inherit;font-weight:600}
-  .tw{overflow-x:auto}
   tr.base td{color:var(--muted)}
-  tr.nb td{background:color-mix(in srgb,var(--warn) 7%,transparent)}
   .fig{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
-       margin:16px 0;font-family:var(--mono);font-size:13px;line-height:1.95;overflow-x:auto}
-  .fig .n{color:var(--accent);font-weight:700}.fig .dim{color:var(--muted)}
-  .note{background:var(--warnbg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
-        border-radius:10px;padding:13px 16px;font-size:14px;margin:16px 0}
-  .kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:14px;margin:14px 0}
   .kv dt{color:var(--muted)}
-  .kv dd{margin:0;font-family:var(--mono);font-size:13px}
-  textarea,input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line);
-    border-radius:8px;background:var(--card);color:var(--ink);font-family:var(--mono);font-size:13px}
-  label{display:block;font-size:13px;font-weight:600;margin:14px 0 5px}
   .hint{font-size:12px;color:var(--muted);font-weight:400}
-  footer{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);
-    font-size:13px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
 </style>
 </head>
 <body>
 <nav><div class="in">
-  <a class="lg" href="#/">LEAD<span>BOARD</span></a>
-  <span class="pill gr" id="spec">v1.1</span>
   <span class="sp"></span>
-  <span class="u" id="who"></span>
 </div></nav>
-<div class="wrap" id="app"></div>
-<footer class="wrap" style="padding-bottom:40px">
   <span>LEADBOARD · FINAL-Bench / VIDRAFT</span>
   <a href="/api/health">API</a>
   <a href="https://huggingface.co/spaces/FINAL-Bench/open-discovery-challenge">ODC</a>
@@ -123,229 +228,312 @@
 </footer>
 <script>
-const $ = s => document.querySelector(s);
-const app = $("#app");
-const f = (x,d=3) => (x==null||isNaN(x)) ? "—" : Number(x).toFixed(d);
-const esc = s => String(s??"").replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
-let CATS=null, ME=null;
-async function j(u,o){ const r=await fetch(u,o); if(!r.ok) throw new Error(await r.text()); return r.json(); }
 async function boot(){
-  try{ ME = await j("/api/me"); }catch(e){ ME={user:null}; }
   $("#who").innerHTML = ME.user
     ? `${esc(ME.user.user)} · <a href="/logout">로그아웃</a>`
-    : (ME.login_enabled ? `<a href="/login?next=${encodeURIComponent(location.hash||"#/")}">HF 로그인</a>` : "");
-  CATS = await j("/api/categories");
-  $("#spec").textContent = CATS.spec;
   route();
 }
-window.addEventListener("hashchange", route);
 function route(){
-  const p = (location.hash||"#/").slice(2).split("/").filter(Boolean);
-  window.scrollTo(0,0);
-  if(!p.length) return hub();
-  if(p[0]==="c") return category(p[1]);
-  if(p[0]==="b") return board(p[1], p[2]||"rank");
   hub();
 }
-/* ---------------- 허브 ---------------- */
 function hub(){
-  const t = CATS.totals;
-  app.innerHTML = `
-  <header class="hero">
-    <h1 class="brand">LEAD<span>BOARD</span></h1>
     <p class="sub">리드보드 · AI 신약 예측 도구 시험대</p>
-    <p class="tag">신약 예측 도구를, 분야별로, 같은 잣대로 잰다.</p>
-    <p class="sub">정답은 나눠주지 않는다. 대신 기준선과 실험 오차를 먼저 공개한다.</p>
-  </header>
-  <div class="stats">
-    <div class="stat"><b>${t.open}</b><span>개설 부문</span></div>
-    <div class="stat"><b>${t.planned}</b><span>계획 부문</span></div>
-    <div class="stat"><b>${CATS.categories.length}</b><span>카테고리</span></div>
-    <div class="stat"><b>8</b><span>규격 조항</span></div>
   </div>
   <h2>카테고리</h2>
   <div class="grid">${CATS.categories.map(cardHTML).join("")}</div>
-  <h2>이 표를 믿을 이유</h2>
-  <p>채점자인 우리가 <b>먼저</b> 공개합니다 — 아무것도 학습하지 않은 <b>기준선</b>,
-  그 분야의 <b>실험 오차 범위</b>, 점수마다 각인된 <b>데이터 지문</b>.
-  <b>우리 점수를 믿어달라고 하지 않습니다. 확인해보라고 합니다.</b></p>
-  <div class="fig">
-1 정답 비배포 <span class="dim">— 부문마다 분할 등급·정답 등급을 공시</span><br>
-2 점수마다 데이터·채점기 지문<br>
-3 기준선은 표에서 내려가지 않는다<br>
-4 잡음 바닥을 먼저 공시한다 <span class="dim">— 그 안에 든 차이는 순위로 안 친다</span><br>
-5 누출은 매 제출마다 검사한다<br>
-6 결과 제출과 모델 제출을 구분한다<br>
-7 미산출은 0점이 아니다<br>
-8 되풀이 제출로는 순위가 오르지 않는다 <span class="dim">— Ladder, ICML 2015</span>
-  </div>`;
 }
 function cardHTML(c){
-  const on = c.open>0;
-  const best = (c.board_cards||[]).sort((a,b)=>b.n_test-a.n_test)[0];
-  const inner = `
-    <div class="ico">${c.icon}</div>
-    <div class="nm">${esc(c.name)} <span class="pill ${on?"":"gr"}">${on?c.open+" 개설":"준비 중"}</span></div>
     <div class="ds">${esc(c.desc)}</div>
     <div class="mt"><span>부문 ${c.planned}</span>
-      <span>${best?`${esc(best.board)} 잡음 ${f(best.noise_floor.sd_single)}`:"—"}</span></div>`;
-  return on ? `<a class="cc" href="#/c/${c.id}">${inner}</a>`
-            : `<div class="cc off">${inner}</div>`;
 }
-/* ---------------- 카테고리 ---------------- */
 function category(id){
-  const c = CATS.categories.find(x=>x.id===id);
-  if(!c) return hub();
-  const bs = c.board_cards||[];
-  app.innerHTML = `
     <div class="crumb"><a href="#/">전체</a> › ${esc(c.name)}</div>
-    <h1 style="font-size:30px;margin:0 0 4px;letter-spacing:-.02em">${c.icon} ${esc(c.name)}</h1>
-    <p class="sub">${esc(c.desc)} · 계획 ${c.planned}부문 · 개설 ${c.open}</p>
-    ${bs.length ? `<div class="tabs">${bs.map(b=>
-        `<a class="tab" href="#/b/${encodeURIComponent(b.board)}">${esc(b.board)}</a>`).join("")}</div>
-       <div class="grid" style="margin-top:18px">${bs.map(boardMini).join("")}</div>`
-      : `<div class="note">이 카테고리는 아직 개설된 부문이 없습니다.
-         홀드아웃과 잡음 바닥이 준비되는 대로 엽니다.</div>`}`;
 }
 function boardMini(b){
   return `<a class="cc" href="#/b/${encodeURIComponent(b.board)}">
-    <div class="nm">${esc(b.board)}
-      <span class="pill">${b.split_grade}/${b.answer_grade}</span></div>
     <div class="ds">테스트 ${b.n_test.toLocaleString()}개 · 잡음 바닥 ${f(b.noise_floor.sd_single)}<br>
-      최선 기준선 ${esc(b.best_baseline)} ${f((b.baselines[b.best_baseline]||{}).mae)}</div>
     <div class="mt"><span>${esc(b.source)}</span><span>오차÷잡음 ${f(b.error_over_noise,2)}×</span></div></a>`;
 }
-/* ---------------- 부문 ---------------- */
-async function board(name, tab){
-  const b = await j("/api/board/"+encodeURIComponent(name));
-  const cat = CATS.categories.find(c=>(c.boards||[]).includes(name));
-  const T = [["rank","순위"],["submit","제출"],["info","부문 정보"]];
-  app.innerHTML = `
     <div class="crumb"><a href="#/">전체</a> › <a href="#/c/${cat?cat.id:""}">${esc(cat?cat.name:"")}</a> › ${esc(b.board)}</div>
-    <h1 style="font-size:30px;margin:0 0 4px;letter-spacing:-.02em">${esc(b.board)}
-      <span class="pill">${b.split_grade}/${b.answer_grade}</span></h1>
-    <p class="sub">${esc(b.source)} · ${esc(b.target)} · ${esc(b.type)} ·
-       테스트 ${b.n_test.toLocaleString()}개 · 잡음 바닥 ${f(b.noise_floor.sd_single)} log</p>
-    <div class="tabs sub">${T.map(([k,l])=>
-      `<a class="tab ${k===tab?"on":""}" href="#/b/${encodeURIComponent(name)}/${k}">${l}</a>`).join("")}</div>
-    <div id="pane">불러오는 중…</div>`;
-  if(tab==="rank") return paneRank(b);
-  if(tab==="submit") return paneSubmit(b);
   paneInfo(b);
 }
 async function paneRank(b){
-  const d = await j(`/api/board/${encodeURIComponent(b.board)}/leaderboard`);
-  const nf = d.noise_floor;
-  const rows = d.rows.map(r=>`<tr class="${r.kind==="baseline"?"base":""} ${r.within_noise?"nb":""}">
-      <td>${r.rank??"—"}</td><td>${esc(r.method)}</td><td>${esc(r.user)}</td>
       <td>${f(r.mae)}</td><td>${f(r.auroc)}</td><td>${f(r.prauc)}</td>
-      <td>${r.kind==="baseline"?'<span class="pill gr">기준선</span>':
-          (r.verified?'<span class="pill">검증됨</span>':'<span class="pill gr">제출됨</span>')}</td></tr>`).join("");
-  $("#pane").innerHTML = `
     <div class="tw"><table>
-      <thead><tr><th>#</th><th>방법</th><th>제출자</th><th>MAE</th><th>AUROC</th><th>PR-AUC</th><th>등급</th></tr></thead>
       <tbody>${rows}</tbody></table></div>
-    <div class="note"><b>잡음 바닥 ${f(nf)} log.</b> 최고 성적에서 이 폭 안에 든 항목은
-      노란 바탕으로 표시했고, <b>순위 차이로 주장하지 않습니다</b> (4조).
       기준선 3종은 표에서 내려가지 않습니다 (3조).</div>
-    ${d.updated?`<p class="sub">순위 갱신 ${new Date(d.updated*1000).toLocaleString("ko-KR")}</p>`:
-      `<p class="sub">아직 참가 제출이 없습니다. 표에 있는 것은 기준선뿐입니다.</p>`}`;
 }
 function paneInfo(b){
-  const nf=b.noise_floor, bl=b.baselines;
-  $("#pane").innerHTML = `
     <h3>등급</h3>
     <dl class="kv">
-      <dt>분할 등급</dt><dd>${b.split_grade} — ${esc(b.split_grade_note||"")}</dd>
-      <dt>정답 등급</dt><dd>${b.answer_grade} — ${esc(b.answer_grade_note||"")}</dd>
     </dl>
     <h3>홀드아웃</h3>
     <dl class="kv">
       <dt>출처</dt><dd>${esc(b.source)} · ${esc(b.target)} · ${esc(b.type)}</dd>
-      <dt>분할 기준일</dt><dd>${b.cut} (최초 보고 연도)</dd>
       <dt>훈련 / 테스트</dt><dd>${b.n_train.toLocaleString()} / ${b.n_test.toLocaleString()}</dd>
       <dt>구조 겹침</dt><dd>0 (시간분할 정의상)</dd>
       <dt>분류 임계</dt><dd>p &gt; ${b.threshold} · 양성 ${(b.positive_rate*100).toFixed(1)}%</dd>
       <dt>데이터 지문</dt><dd>${esc(b.dataset_sha)}</dd>
     </dl>
-    <h3>잡음 바닥 (4조)</h3>
     <div class="fig">
-비교쌍 <span class="n">${nf.pairs.toLocaleString()}</span> · 화합물 <span class="n">${nf.compounds.toLocaleString()}</span>
- <span class="dim">— 같은 화합물을 서로 다른 논문에서 잰 차이</span><br>
 중앙값 ${f(nf.median)} · 평균 ${f(nf.mean)} · 90분위 ${f(nf.p90)}<br>
 <b>단일 측정 SD 추정 <span class="n">${f(nf.sd_single)}</span> log</b>
     </div>
-    <div class="note">분류 임계선에서 실험 오차 한 칸 안에 있는 테스트 화합물이
-      <b>${b.near_pct}%</b> 입니다. ${b.near_pct>45?"절반 가까이가 재측정하면 라벨이 뒤집힐 수 있어 <b>회귀를 주지표</b>로 둡니다.":"분류 지표를 함께 씁니다."}</div>
-    <h3>기준선 (3조)</h3>
-    <div class="tw"><table><thead><tr><th>기준선</th><th>MAE</th><th>AUROC</th><th>PR-AUC</th></tr></thead>
-      <tbody>${Object.entries(bl).map(([k,v])=>
-        `<tr><td>${esc(k)}</td><td>${f(v.mae)}</td><td>${f(v.auroc)}</td><td>${f(v.prauc)}</td></tr>`).join("")}
-        <tr class="base"><td>(실험 잡음 바닥)</td><td>${f(nf.sd_single)}</td><td>—</td><td>—</td></tr>
       </tbody></table></div>
-    <p class="sub">${b.beats_constant
       ? "학습 기준선�� 상수 예측을 넘었습니다."
-      : "<b>학습 기준선이 상수 예측을 넘지 못했습니다.</b> 3조가 없었다면 이 사실은 표에 나타나지 않습니다."}</p>`;
 }
 function paneSubmit(b){
-  const url = `/api/board/${encodeURIComponent(b.board)}/testset`;
-  $("#pane").innerHTML = `
-    <h3>① 테스트셋 받기</h3>
-    <p>화합물 <b>${b.n_test.toLocaleString()}개</b>의 구조(SMILES)만 들어 있습니다. 라벨은 없습니다.</p>
-    <p><a class="btn" href="${url}" download>테스트셋 내려받기</a>
-       <span class="hint">&nbsp;${esc(b.board)}_test.json</span></p>
-    <h3>② 예측 올리기</h3>
-    ${ME.user ? `
-      <label>방법 이름 <span class="hint">순위표에 이렇게 표시됩니다</span></label>
-      <input type="text" id="m" placeholder="예: my-gnn-ensemble-v2" maxlength="60">
-      <label>학습에 쓴 데이터 <span class="hint">5조 누출 검사에 씁니다</span></label>
-      <input type="text" id="td" placeholder="예: ChEMBL34 + 사내 데이터">
-      <label>예측값 JSON <span class="hint">{"LB-XXXX": 6.42, ...} — p 스케일 (−log10 M)</span></label>
-      <textarea id="p" rows="7" placeholder='{"LB-A1B2C3D4E5F6": 6.42, "...": 5.10}'></textarea>
-      <p style="margin-top:14px"><button class="btn" id="go">제출</button>
-         <span class="hint" id="msg"></span></p>
-      <div class="note"><b>8조.</b> 되풀이 제출로는 순위가 오르지 않습니다.
-        직전 최고점을 잡음 바닥 <b>${f(b.noise_floor.sd_single)}</b> 이상으로 넘었을 때만 새 점수가 공개됩니다.
-        하루 제출 한도 ${ME.daily_cap}회.</div>`
-      : `<div class="note">제출하려면 HF 계정으로 로그인해야 합니다.
-         <a href="/login?next=${encodeURIComponent(location.hash)}">로그인</a></div>`}
-    <h3>③ 컨테이너까지 올리면 (선택)</h3>
-    <p>모델과 추론 환경을 함께 제출하면 <b>우리가 직접 돌려</b> 같은 숫자가 나오는지 확인하고
-       <span class="pill">검증됨</span> 표시를 붙입니다 (6조).</p>`;
-  const go = $("#go");
-  if(go) go.onclick = async () => {
-    const msg = $("#msg");
-    let preds;
-    try{ preds = JSON.parse($("#p").value); }
-    catch(e){ msg.textContent = "예측값이 올바른 JSON 이 아닙니다."; return; }
-    msg.textContent = "보내는 중…"; go.disabled = true;
     try{
-      const r = await j("/api/submit",{method:"POST",headers:{"Content-Type":"application/json"},
-        body:JSON.stringify({board:b.board, method:$("#m").value.trim(),
-          predictions:preds, training_data:$("#td").value.trim()})});
-      msg.innerHTML = `접수됐습니다. 제출 번호 <code>${esc(r.submission_id)}</code> · 채점은 워커가 합니다.`;
-    }catch(e){
-      let t = String(e.message||e);
-      try{ t = JSON.parse(t).detail || t; }catch(_){}
-      msg.textContent = t;
-    }
-    go.disabled = false;
   };
 }
-boot().catch(e => { app.innerHTML =
-  `<div class="note">화면을 불러오지 못했습니다. ${esc(e.message||e)}</div>`; });
 </script>
 </body>
 </html>

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <title>LEADBOARD — 신약 예측 도구 시험대</title>
+<meta name="description" content="신약 예측 도구를 분야별로 같은 잣대로 잰다. 정답은 나눠주지 않고, 기준선과 실험 오차를 먼저 공개한다.">
 <!-- <head> 는 선택이 아니다: 플랫폼이 자기 태그를 문서에 주입하는데, 받을 head 가 없으면
      그것들이 doctype 앞에 놓이고 페이지 전체가 쿼크 모드로 떨어진다. -->
 <style>
   :root{
+    --bg:#f7f8fa; --bg2:#eef1f5; --card:#fff; --ink:#12141a; --ink2:#3c4351;
+    --muted:#6b7280; --line:#e4e7ec; --line2:#d3d8e0;
+    --acc:#2a4d8f; --acc2:#4d7fd6; --soft:#e8eff9;
+    --warn:#9a6a00; --warnbg:#fff5dc; --good:#15794c; --goodbg:#e4f5ec;
+    --bad:#a8352a; --badbg:#fdeceb;
+    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
+    --r:14px; --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
+    --sh2:0 4px 6px -1px rgba(16,24,40,.06),0 12px 20px -4px rgba(16,24,40,.08);
   }
   @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
+    --bg:#0d0f13; --bg2:#12151b; --card:#161a21; --ink:#e9ecf1; --ink2:#c2c8d2;
+    --muted:#8d95a3; --line:#242932; --line2:#2f3540;
+    --acc:#7fa6ea; --acc2:#5b86d4; --soft:#141d2d;
+    --warn:#e2b451; --warnbg:#251f10; --good:#4ecb92; --goodbg:#0f2419;
+    --bad:#f08a7e; --badbg:#2a1512;
+    --sh:0 1px 2px rgba(0,0,0,.3); --sh2:0 8px 24px rgba(0,0,0,.4);}}
   :root[data-theme="dark"]{
+    --bg:#0d0f13;--bg2:#12151b;--card:#161a21;--ink:#e9ecf1;--ink2:#c2c8d2;
+    --muted:#8d95a3;--line:#242932;--line2:#2f3540;--acc:#7fa6ea;--acc2:#5b86d4;
+    --soft:#141d2d;--warn:#e2b451;--warnbg:#251f10;--good:#4ecb92;--goodbg:#0f2419;
+    --bad:#f08a7e;--badbg:#2a1512;--sh:0 1px 2px rgba(0,0,0,.3);--sh2:0 8px 24px rgba(0,0,0,.4);}
   *{box-sizing:border-box}
+  html{scroll-behavior:smooth}
+  body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;font-size:15px;
     font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",
+    "Malgun Gothic",Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;
+    text-rendering:optimizeLegibility}
+  .wrap{max-width:1000px;margin:0 auto;padding:0 22px}
+  a{color:var(--acc);text-decoration:none}
+  a:hover{text-decoration:underline}
+  .mono,code{font-family:var(--mono);font-variant-numeric:tabular-nums}
+  .dim{color:var(--muted)}
+  /* ── nav ── */
+  nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);
+      backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
+  nav .in{max-width:1000px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:12px}
+  .lg{font-weight:800;letter-spacing:-.035em;font-size:17px;color:var(--ink)}
+  .lg:hover{text-decoration:none}
+  .lg i{color:var(--acc);font-style:normal}
+  .sp{flex:1}
+  .chip{font-size:11px;font-family:var(--mono);padding:3px 9px;border-radius:99px;
+        background:var(--soft);color:var(--acc);font-weight:700;letter-spacing:.02em}
+  .chip.g{background:transparent;border:1px solid var(--line2);color:var(--muted)}
+  .chip.ok{background:var(--goodbg);color:var(--good)}
+  .chip.wr{background:var(--warnbg);color:var(--warn)}
+  .chip.bd{background:var(--badbg);color:var(--bad)}
+  .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:10px;
+       background:var(--acc);color:#fff;font-size:13.5px;font-weight:600;border:0;cursor:pointer;
+       transition:filter .15s,transform .1s}
+  .btn:hover{filter:brightness(1.08);text-decoration:none}
+  .btn:active{transform:translateY(1px)}
+  .btn:disabled{opacity:.5;cursor:default}
+  .btn.g{background:transparent;color:var(--acc);border:1px solid var(--line2)}
+  /* ── hero ── */
+  .hero{padding:66px 0 40px;position:relative;overflow:hidden}
+  .hero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:340px;
+    background:radial-gradient(ellipse at 30% 40%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 62%);
+    pointer-events:none}
+  .hero > *{position:relative}
+  .brand{font-size:clamp(40px,8.5vw,68px);font-weight:850;letter-spacing:-.042em;
+         margin:0 0 2px;line-height:1}
+  .brand i{color:var(--acc);font-style:normal}
+  .sub{font-size:13.5px;color:var(--muted);margin:0;letter-spacing:.01em}
+  .tag{font-size:clamp(20px,3.6vw,28px);font-weight:700;margin:26px 0 8px;
+       letter-spacing:-.022em;line-height:1.38;max-width:18em}
+  .lede{font-size:16px;color:var(--ink2);margin:0;max-width:34em}
+  /* ── stats ── */
+  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin:36px 0 0}
+  .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
+        box-shadow:var(--sh)}
+  .stat b{display:block;font-size:27px;font-weight:800;font-family:var(--mono);
+          letter-spacing:-.03em;line-height:1.15}
+  .stat span{font-size:11.5px;color:var(--muted);letter-spacing:.01em}
+  h2{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
+     color:var(--acc);margin:56px 0 6px}
+  h2 + .h2s{font-size:14px;color:var(--muted);margin:0 0 20px}
+  h3{font-size:18px;font-weight:700;margin:30px 0 8px;letter-spacing:-.015em}
+  p{margin:0 0 15px}
+  /* ── noise band (서명 시각화) ── */
+  .band{background:var(--card);border:1px solid var(--line);border-radius:12px;
+        padding:16px 18px 12px;margin:12px 0;box-shadow:var(--sh)}
+  .band .hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
+  .band .hd b{font-size:15px}
+  .band .hd .r{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted)}
+  .axis{position:relative;height:46px;margin:0 4px}
+  .axis .line{position:absolute;left:0;right:0;top:22px;height:2px;background:var(--line2);border-radius:2px}
+  .axis .floor{position:absolute;left:0;top:12px;height:22px;border-radius:4px;
+    background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--warn) 22%,transparent) 0 5px,transparent 5px 10px);
+    border-right:2px solid color-mix(in srgb,var(--warn) 65%,transparent)}
+  .axis .mk{position:absolute;top:9px;width:2px;height:28px;background:var(--acc);border-radius:2px;
+            transform:translateX(-1px)}
+  .axis .mk.b{background:var(--muted);opacity:.75}
+  .axis .mk::after{content:attr(data-l);position:absolute;top:31px;left:50%;transform:translateX(-50%);
+    font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap}
+  .axis .mk.top::after{top:-16px}
+  .bandnote{font-size:12px;color:var(--muted);margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}
+  .bandnote i{font-style:normal;display:inline-flex;align-items:center;gap:5px}
+  .swatch{width:22px;height:9px;border-radius:2px;display:inline-block;
+    background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--warn) 30%,transparent) 0 4px,transparent 4px 8px);
+    border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
+  /* ── cards ── */
+  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
+  .cc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:19px;
+      display:block;box-shadow:var(--sh);transition:box-shadow .18s,transform .12s,border-color .18s}
+  a.cc:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-color:var(--line2);text-decoration:none}
+  .cc.off{opacity:.55}
+  .cc .ico{font-size:23px;line-height:1}
+  .cc .nm{font-weight:700;font-size:16.5px;margin:9px 0 3px;color:var(--ink);
+          display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+  .cc .ds{font-size:13px;color:var(--muted);line-height:1.55;min-height:40px}
+  .cc .mt{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);
+          font-family:var(--mono);font-size:11.5px;color:var(--muted);
           display:flex;justify-content:space-between;gap:8px}
+  /* ── tabs ── */
+  .crumb{font-size:13px;color:var(--muted);margin:26px 0 10px}
+  .ttl{font-size:clamp(26px,4.4vw,34px);font-weight:800;letter-spacing:-.028em;margin:0 0 5px;
+       display:flex;align-items:center;gap:11px;flex-wrap:wrap}
+  .tabs{display:flex;gap:5px;flex-wrap:wrap;margin:22px 0 4px;border-bottom:1px solid var(--line)}
+  .tab{padding:10px 16px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
        border:0;background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
+  .tab:hover{color:var(--ink2);text-decoration:none}
+  .tab.on{color:var(--acc);border-bottom-color:var(--acc)}
+  .pills{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 2px}
+  .pilltab{padding:7px 14px;border-radius:9px;font-size:13px;font-weight:600;
+           color:var(--muted);border:1px solid var(--line);background:var(--card)}
+  .pilltab:hover{text-decoration:none;color:var(--ink2)}
+  .pilltab.on{background:var(--acc);color:#fff;border-color:var(--acc)}
+  /* ── table ── */
+  .tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card);
+      box-shadow:var(--sh);margin:16px 0}
+  table{width:100%;border-collapse:collapse;font-size:13.5px}
+  th{text-align:right;font-weight:600;color:var(--muted);font-size:10.5px;letter-spacing:.07em;
+     text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
+  th:first-child,td:first-child{text-align:center;width:44px}
+  th:nth-child(2),td:nth-child(2),th:nth-child(3),td:nth-child(3){text-align:left}
+  td{padding:12px;border-bottom:1px solid var(--line);text-align:right;
+     font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
+  td:nth-child(2){font-family:inherit;font-weight:650}
+  tbody tr:last-child td{border-bottom:0}
+  tbody tr:hover td{background:var(--bg2)}
   tr.base td{color:var(--muted)}
+  tr.base td:nth-child(2){font-weight:600}
+  .rk{display:inline-flex;width:23px;height:23px;align-items:center;justify-content:center;
+      border-radius:7px;background:var(--bg2);font-size:11.5px;font-weight:700}
+  .rk.g1{background:#f5c84c22;color:#a8820f}
+  .rk.g2{background:#b9c2cf22;color:#7a8698}
+  .rk.g3{background:#cd8a5a22;color:#9b6234}
   .fig{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
+       margin:16px 0;font-family:var(--mono);font-size:13px;line-height:1.95;overflow-x:auto;
+       box-shadow:var(--sh)}
+  .fig .n{color:var(--acc);font-weight:700}
+  .note{background:var(--warnbg);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
+        border-radius:11px;padding:14px 17px;font-size:14px;margin:16px 0;color:var(--ink2)}
+  .note.ok{background:var(--goodbg);border-color:color-mix(in srgb,var(--good) 30%,transparent)}
+  .kv{display:grid;grid-template-columns:160px 1fr;gap:9px 16px;font-size:14px;margin:14px 0}
   .kv dt{color:var(--muted)}
+  .kv dd{margin:0;font-family:var(--mono);font-size:13px;word-break:break-word}
+  label{display:block;font-size:13.5px;font-weight:650;margin:16px 0 6px}
   .hint{font-size:12px;color:var(--muted);font-weight:400}
+  input[type=text],textarea{width:100%;padding:11px 13px;border:1px solid var(--line2);
+    border-radius:10px;background:var(--card);color:var(--ink);font-family:var(--mono);font-size:13px}
+  input[type=text]:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--acc) 45%,transparent);
+    outline-offset:-1px;border-color:var(--acc)}
+  .drop{border:2px dashed var(--line2);border-radius:12px;padding:26px;text-align:center;
+        color:var(--muted);font-size:14px;cursor:pointer;transition:border-color .15s,background .15s}
+  .drop:hover,.drop.hot{border-color:var(--acc);background:var(--soft);color:var(--acc)}
+  .steps{counter-reset:s;list-style:none;padding:0;margin:16px 0}
+  .steps li{counter-increment:s;position:relative;padding:0 0 22px 42px;border-left:2px solid var(--line);
+            margin-left:14px}
+  .steps li:last-child{border-left-color:transparent;padding-bottom:0}
+  .steps li::before{content:counter(s);position:absolute;left:-15px;top:-2px;width:28px;height:28px;
+    border-radius:50%;background:var(--soft);color:var(--acc);font-weight:700;font-size:13px;
+    display:flex;align-items:center;justify-content:center;font-family:var(--mono);
+    border:2px solid var(--bg)}
+  .steps b{display:block;font-size:15.5px;margin-bottom:3px}
+  ol.cl{list-style:none;counter-reset:c;padding:0;margin:18px 0;
+        display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0}
+  ol.cl li{counter-increment:c;position:relative;padding:15px 15px 15px 50px;border-top:1px solid var(--line)}
+  ol.cl li::before{content:counter(c);position:absolute;left:8px;top:15px;width:28px;height:28px;
+    border-radius:8px;background:var(--soft);color:var(--acc);font-weight:700;font-size:12.5px;
+    display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
+  ol.cl b{display:block;font-size:15px;margin-bottom:2px}
+  ol.cl span{font-size:13px;color:var(--muted);line-height:1.5}
+  .skel{height:120px;border-radius:12px;background:linear-gradient(90deg,var(--bg2),var(--card),var(--bg2));
+        background-size:200% 100%;animation:sh 1.3s infinite}
+  @keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
+  footer{margin-top:76px;padding:26px 0 60px;border-top:1px solid var(--line);
+    font-size:13px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}
+  @media(max-width:640px){.kv{grid-template-columns:1fr}.kv dt{margin-top:8px}}
 </style>
 </head>
 <body>
 <nav><div class="in">
+  <a class="lg" href="#/">LEAD<i>BOARD</i></a>
+  <span class="chip g" id="spec">v1.1</span>
   <span class="sp"></span>
+  <span id="who" style="font-size:13px;color:var(--muted)"></span>
 </div></nav>
+<div id="app"><div class="wrap"><div class="skel" style="margin-top:60px"></div></div></div>
+<footer class="wrap">
   <span>LEADBOARD · FINAL-Bench / VIDRAFT</span>
   <a href="/api/health">API</a>
   <a href="https://huggingface.co/spaces/FINAL-Bench/open-discovery-challenge">ODC</a>
 </footer>
 <script>
+const $=s=>document.querySelector(s), app=$("#app");
+const f=(x,d=3)=>(x==null||isNaN(x))?"—":Number(x).toFixed(d);
+const esc=s=>String(s??"").replace(/[&<>"]/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));
+let CATS=null, ME={user:null}, BOARDS={};
+async function j(u,o){const r=await fetch(u,o);if(!r.ok)throw new Error(await r.text());return r.json();}
+const W=h=>`<div class="wrap">${h}</div>`;
+/* ══════ 서명 시각화 · 잡음 바닥 축 ══════
+   MAE 축 위에 실험 오차 구간을 빗금으로 깔고 방법들을 점으로 찍는다.
+   빗금 안쪽은 "실험보다 정밀" = 측정으로 확인할 수 없는 영역이다.        */
+function bandHTML(title, floor, marks, right){
+  const hi = Math.max(floor*1.35, ...marks.map(m=>m.v)) * 1.12;
+  const pc = v => Math.min(100, 100*v/hi);
+  return `<div class="band">
+    <div class="hd"><b>${esc(title)}</b>
+      <span class="chip wr">잡음 ${f(floor)}</span>
+      <span class="r">${esc(right||"")}</span></div>
+    <div class="axis">
+      <div class="line"></div>
+      <div class="floor" style="width:${pc(floor)}%"></div>
+      ${marks.map((m,i)=>`<div class="mk ${m.base?"b":""} ${i%2?"top":""}"
+          style="left:${pc(m.v)}%" data-l="${esc(m.l)} ${f(m.v)}"></div>`).join("")}
+    </div>
+    <div class="bandnote">
+      <i><span class="swatch"></span> 실험 오차 구간 — 이 안쪽은 측정으로 확인할 수 없다</i>
+      <i style="margin-left:auto">MAE (log) →</i>
+    </div></div>`;
+}
 async function boot(){
+  try{ME=await j("/api/me");}catch(e){}
   $("#who").innerHTML = ME.user
     ? `${esc(ME.user.user)} · <a href="/logout">로그아웃</a>`
+    : (ME.login_enabled?`<a href="/login?next=${encodeURIComponent(location.hash||"#/")}">HF 로그인</a>`:"");
+  CATS=await j("/api/categories");
+  $("#spec").textContent=CATS.spec;
+  CATS.categories.forEach(c=>(c.board_cards||[]).forEach(b=>BOARDS[b.board]=b));
   route();
 }
+addEventListener("hashchange",route);
 function route(){
+  const p=(location.hash||"#/").slice(2).split("/").filter(Boolean);
+  scrollTo(0,0);
+  if(!p.length)return hub();
+  if(p[0]==="c")return category(p[1]);
+  if(p[0]==="b")return board(decodeURIComponent(p[1]),p[2]||"rank");
   hub();
 }
+/* ══════ 허브 ══════ */
 function hub(){
+  const t=CATS.totals, bs=Object.values(BOARDS).sort((a,b)=>b.n_test-a.n_test);
+  const lost=bs.filter(b=>b.beats_constant===false).length;
+  app.innerHTML=W(`
+  <div class="hero">
+    <h1 class="brand">LEAD<i>BOARD</i></h1>
     <p class="sub">리드보드 · AI 신약 예측 도구 시험대</p>
+    <p class="tag">신약 예측 도구를,<br>분야별로, 같은 잣대로 잰다.</p>
+    <p class="lede">정답은 나눠주지 않습니다. 대신 <b>아무것도 학습하지 않은 기준선</b>과
+      <b>그 분야의 실험 오차</b>를 먼저 공개합니다. 믿어달라고 하지 않고, 확인하게 합니다.</p>
+    <div class="stats">
+      <div class="stat"><b>${t.open}</b><span>개설 부문</span></div>
+      <div class="stat"><b>${t.planned}</b><span>계획 부문</span></div>
+      <div class="stat"><b>${CATS.categories.length}</b><span>카테고리</span></div>
+      <div class="stat"><b>8</b><span>규격 조항</span></div>
+    </div>
   </div>
+  <h2>측정 한계</h2>
+  <p class="h2s">각 부문에서 <b>실험을 다시 해도 이만큼은 흔들린다</b>는 폭(빗금)과,
+    현재 기준선이 어디에 서 있는지입니다.</p>
+  ${bs.map(b=>bandHTML(b.board,b.noise_floor.sd_single,
+      Object.entries(b.baselines).map(([k,v])=>({l:k,v:v.mae,base:true})),
+      `${b.split_grade}/${b.answer_grade} · 테스트 ${b.n_test.toLocaleString()}`)).join("")}
+  ${lost?`<div class="note"><b>${lost}개 부문에서 학습 기준선이 상수 예측을 넘지 못했습니다.</b>
+    아무것도 배우지 않은 쪽이 더 정확했다는 뜻입니다.
+    기준선을 표에 상주시키지 않으면(3조) 이 사실은 어디에도 나타나지 않습니다.</div>`:""}
   <h2>카테고리</h2>
+  <p class="h2s">분야를 고르면 그 안의 부문과 순위·제출로 들어갑니다.</p>
   <div class="grid">${CATS.categories.map(cardHTML).join("")}</div>
+  <h2>채점자가 스스로에게 부과하는 8개 조항</h2>
+  <p class="h2s">참가자에게 요구하는 것이 아니라, 우리가 지키는 것입니다.</p>
+  <ol class="cl">
+    ${[["정답은 배포하지 않는다","부문마다 분할 등급과 정답 등급을 공시한다"],
+       ["점수마다 두 개의 지문","데이터 판본과 채점 코드의 SHA-256"],
+       ["기준선은 표에서 내려가지 않는다","상수 예측 · 최근접 이웃 · Morgan+LightGBM 영구 등재"],
+       ["잡음 바닥을 먼저 공시한다","같은 화합물을 다른 논문에서 잰 차이로 산출한다"],
+       ["누출은 매 제출마다 검사한다","정답과 소수점까지 같은 항목이 무더기면 표에 적는다"],
+       ["결과 제출과 모델 제출을 구분한다","우리가 직접 돌려본 것만 [검증됨]"],
+       ["미산출은 0점이 아니다","측정하지 못한 것과 측정해서 나쁜 것은 다르다"],
+       ["되풀이 제출로는 순위가 오르지 않는다","Ladder · Blum &amp; Hardt, ICML 2015"]]
+      .map(([a,b])=>`<li><b>${a}</b><span>${b}</span></li>`).join("")}
+  </ol>`);
 }
 function cardHTML(c){
+  const on=c.open>0, best=(c.board_cards||[]).sort((a,b)=>b.n_test-a.n_test)[0];
+  const inner=`<div class="ico">${c.icon}</div>
+    <div class="nm">${esc(c.name)}
+      <span class="chip ${on?"ok":"g"}">${on?c.open+" 개설":"준비 중"}</span></div>
     <div class="ds">${esc(c.desc)}</div>
     <div class="mt"><span>부문 ${c.planned}</span>
+      <span>${best?`${esc(best.board)} · 잡음 ${f(best.noise_floor.sd_single)}`:"—"}</span></div>`;
+  return on?`<a class="cc" href="#/c/${c.id}">${inner}</a>`:`<div class="cc off">${inner}</div>`;
 }
+/* ══════ 카테고리 ══════ */
 function category(id){
+  const c=CATS.categories.find(x=>x.id===id); if(!c)return hub();
+  const bs=c.board_cards||[];
+  app.innerHTML=W(`
     <div class="crumb"><a href="#/">전체</a> › ${esc(c.name)}</div>
+    <h1 class="ttl">${c.icon} ${esc(c.name)}</h1>
+    <p class="lede">${esc(c.desc)}</p>
+    <div class="stats" style="margin-top:22px">
+      <div class="stat"><b>${c.open}</b><span>개설 부문</span></div>
+      <div class="stat"><b>${c.planned}</b><span>계획 부문</span></div>
+      <div class="stat"><b>${bs.reduce((s,b)=>s+b.n_test,0).toLocaleString()}</b><span>테스트 화합물</span></div>
+    </div>
+    ${bs.length?`<h2>부문</h2><div class="grid">${bs.map(boardMini).join("")}</div>
+      <h2>측정 한계</h2>
+      ${bs.map(b=>bandHTML(b.board,b.noise_floor.sd_single,
+        Object.entries(b.baselines).map(([k,v])=>({l:k,v:v.mae,base:true})),
+        `테스트 ${b.n_test.toLocaleString()}`)).join("")}`
+     :`<div class="note">이 카테고리는 아직 개설된 부문이 없습니다.
+        홀드아웃과 잡음 바닥이 준비되는 대로 엽니다.</div>`}`);
 }
 function boardMini(b){
+  const bl=b.baselines[b.best_baseline]||{};
   return `<a class="cc" href="#/b/${encodeURIComponent(b.board)}">
+    <div class="nm">${esc(b.board)}<span class="chip">${b.split_grade}/${b.answer_grade}</span></div>
     <div class="ds">테스트 ${b.n_test.toLocaleString()}개 · 잡음 바닥 ${f(b.noise_floor.sd_single)}<br>
+      최선 기준선 <b>${esc(b.best_baseline)}</b> ${f(bl.mae)}</div>
     <div class="mt"><span>${esc(b.source)}</span><span>오차÷잡음 ${f(b.error_over_noise,2)}×</span></div></a>`;
 }
+/* ══════ 부문 ══════ */
+async function board(name,tab){
+  const b=BOARDS[name]||await j("/api/board/"+encodeURIComponent(name));
+  const cat=CATS.categories.find(c=>(c.boards||[]).includes(name));
+  const T=[["rank","순위"],["submit","제출"],["info","부문 정보"]];
+  app.innerHTML=W(`
     <div class="crumb"><a href="#/">전체</a> › <a href="#/c/${cat?cat.id:""}">${esc(cat?cat.name:"")}</a> › ${esc(b.board)}</div>
+    <h1 class="ttl">${esc(b.board)}<span class="chip">${b.split_grade}/${b.answer_grade}</span></h1>
+    <p class="lede">${esc(b.source)} · ${esc(b.target)} · ${esc(b.type)} ·
+      테스트 <b>${b.n_test.toLocaleString()}</b>개 · 잡음 바닥 <b>${f(b.noise_floor.sd_single)}</b> log</p>
+    <div class="pills">${T.map(([k,l])=>
+      `<a class="pilltab ${k===tab?"on":""}" href="#/b/${encodeURIComponent(name)}/${k}">${l}</a>`).join("")}</div>
+    <div id="pane"><div class="skel" style="margin-top:18px"></div></div>`);
+  if(tab==="rank")return paneRank(b);
+  if(tab==="submit")return paneSubmit(b);
   paneInfo(b);
 }
 async function paneRank(b){
+  const d=await j(`/api/board/${encodeURIComponent(b.board)}/leaderboard`);
+  const nf=d.noise_floor, ent=d.rows.filter(r=>r.kind!=="baseline");
+  const leakChip=l=>({high:'<span class="chip bd">조회 흔적</span>',
+    elevated:'<span class="chip wr">근접 과밀</span>'}[l]||'<span class="chip g">—</span>');
+  const rows=d.rows.map(r=>{
+    const g=r.rank&&r.rank<=3?` g${r.rank}`:"";
+    return `<tr class="${r.kind==="baseline"?"base":""}">
+      <td>${r.rank?`<span class="rk${g}">${r.rank}</span>`:"·"}</td>
+      <td>${esc(r.method)}</td><td>${esc(r.user)}</td>
       <td>${f(r.mae)}</td><td>${f(r.auroc)}</td><td>${f(r.prauc)}</td>
+      <td>${r.kind==="baseline"?'<span class="chip g">기준선</span>':leakChip(r.leak)}</td>
+      <td>${r.kind==="baseline"?"—":(r.verified?'<span class="chip ok">검증됨</span>'
+            :'<span class="chip g">제출됨</span>')}</td></tr>`;}).join("");
+  $("#pane").innerHTML=`
+    ${bandHTML(b.board+" — 현재 순위 지형", nf,
+      d.rows.map(r=>({l:r.kind==="baseline"?r.method:r.user, v:r.mae, base:r.kind==="baseline"})),
+      `${ent.length}건 참가`)}
     <div class="tw"><table>
+      <thead><tr><th>#</th><th>방법</th><th>제출자</th><th>MAE</th><th>AUROC</th>
+      <th>PR-AUC</th><th>누출</th><th>등급</th></tr></thead>
       <tbody>${rows}</tbody></table></div>
+    <div class="note"><b>잡음 바닥 ${f(nf)} log.</b> 빗금 안쪽은 실험을 다시 해도 그만큼 흔들리는 구간이라,
+      그 폭 안의 차이는 <b>순위 차이로 주장하지 않습니다</b> (4조).
       기준선 3종은 표에서 내려가지 않습니다 (3조).</div>
+    ${ent.length?`<p class="dim" style="font-size:13px">순위 갱신 ${new Date(d.updated*1000).toLocaleString("ko-KR")}</p>`
+      :`<p class="dim" style="font-size:13px">아직 참가 제출이 없습니다. 표에 있는 것은 기준선뿐입니다.</p>`}`;
 }
 function paneInfo(b){
+  const nf=b.noise_floor,bl=b.baselines;
+  $("#pane").innerHTML=`
     <h3>등급</h3>
     <dl class="kv">
+      <dt>분할 등급 <b>${b.split_grade}</b></dt><dd>${esc(b.split_grade_note||"")}</dd>
+      <dt>정답 등급 <b>${b.answer_grade}</b></dt><dd>${esc(b.answer_grade_note||"")}</dd>
     </dl>
     <h3>홀드아웃</h3>
     <dl class="kv">
       <dt>출처</dt><dd>${esc(b.source)} · ${esc(b.target)} · ${esc(b.type)}</dd>
+      <dt>분할 기준일</dt><dd>${b.cut} — 최초 보고 연도</dd>
       <dt>훈련 / 테스트</dt><dd>${b.n_train.toLocaleString()} / ${b.n_test.toLocaleString()}</dd>
       <dt>구조 겹침</dt><dd>0 (시간분할 정의상)</dd>
       <dt>분류 임계</dt><dd>p &gt; ${b.threshold} · 양성 ${(b.positive_rate*100).toFixed(1)}%</dd>
       <dt>데이터 지문</dt><dd>${esc(b.dataset_sha)}</dd>
     </dl>
+    <h3>잡음 바닥 <span class="dim" style="font-weight:400;font-size:14px">(4조)</span></h3>
     <div class="fig">
+같은 화합물을 <b>서로 다른 논문</b>에서 잰 차이<br>
+비교쌍 <span class="n">${nf.pairs.toLocaleString()}</span> · 화합물 <span class="n">${nf.compounds.toLocaleString()}</span><br>
 중앙값 ${f(nf.median)} · 평균 ${f(nf.mean)} · 90분위 ${f(nf.p90)}<br>
 <b>단일 측정 SD 추정 <span class="n">${f(nf.sd_single)}</span> log</b>
     </div>
+    <div class="note">분류 임계선에서 실험 오차 한 칸 안에 있는 테스트 화합물이 <b>${b.near_pct}%</b> 입니다.
+      ${b.near_pct>45?"절반 가까이가 재측정하면 라벨이 뒤집힐 수 있어 <b>회귀를 주지표</b>로 둡니다."
+                     :"분류 지표를 함께 씁니다."}</div>
+    <h3>기준선 <span class="dim" style="font-weight:400;font-size:14px">(3조)</span></h3>
+    ${bandHTML("기준선 위치",nf.sd_single,
+      Object.entries(bl).map(([k,v])=>({l:k,v:v.mae,base:true})),"")}
+    <div class="tw"><table><thead><tr><th style="width:auto"></th><th>기준선</th><th>MAE</th>
+      <th>AUROC</th><th>PR-AUC</th></tr></thead><tbody>
+      ${Object.entries(bl).map(([k,v])=>`<tr><td>·</td><td>${esc(k)}</td><td>${f(v.mae)}</td>
+        <td>${f(v.auroc)}</td><td>${f(v.prauc)}</td></tr>`).join("")}
+      <tr class="base"><td>·</td><td>실험 잡음 바닥</td><td>${f(nf.sd_single)}</td><td>—</td><td>—</td></tr>
       </tbody></table></div>
+    <div class="note ${b.beats_constant?"ok":""}">${b.beats_constant
       ? "학습 기준선�� 상수 예측을 넘었습니다."
+      : "<b>학습 기준선이 상수 예측을 넘지 못했습니다.</b> 아무것도 배우지 않은 쪽이 더 정확했습니다."}</div>`;
 }
 function paneSubmit(b){
+  const url=`/api/board/${encodeURIComponent(b.board)}/testset`;
+  $("#pane").innerHTML=`
+  <ol class="steps">
+    <li><b>테스트셋 받기</b>
+      <p class="dim" style="font-size:13.5px">화합물 <b>${b.n_test.toLocaleString()}개</b>의 구조(SMILES)만
+        들어 있습니다. 라벨은 이 서버에 존재하지 않습니다.</p>
+      <a class="btn" href="${url}" download>테스트셋 내려받기</a>
+      <span class="hint">&nbsp;${esc(b.board.toLowerCase())}_test.json</span></li>
+    <li><b>예측 올리기</b>
+      ${ME.user?`
+        <label>방법 이름 <span class="hint">순위표에 이렇게 표시됩니다</span></label>
+        <input type="text" id="m" placeholder="예: my-gnn-ensemble-v2" maxlength="60">
+        <label>학습에 쓴 데이터 <span class="hint">5조 누출 검사에 씁니다</span></label>
+        <input type="text" id="td" placeholder="예: ChEMBL34 + 사내 데이터">
+        <label>예측값 <span class="hint">JSON {"LB-…": 6.42} 또는 CSV compound_id,prediction — p 스케일(−log10 M)</span></label>
+        <div class="drop" id="drop">파일을 여기에 끌어다 놓거나 눌러서 고르세요
+          <input type="file" id="file" accept=".json,.csv,.txt" hidden></div>
+        <textarea id="p" rows="6" style="margin-top:10px"
+          placeholder='{"LB-A1B2C3D4E5F6": 6.42, "LB-…": 5.10}'></textarea>
+        <p style="margin-top:14px"><button class="btn" id="go">제출</button>
+          <span class="hint" id="msg"></span></p>`
+       :`<div class="note">제출하려면 HF 계정으로 로그인해야 합니다.
+          <a href="/login?next=${encodeURIComponent(location.hash)}">로그인</a></div>`}</li>
+    <li><b>컨테이너까지 올리면 (선택)</b>
+      <p class="dim" style="font-size:13.5px">모델과 추론 환경을 함께 제출하면 <b>우리가 직접 돌려</b>
+        같은 숫자가 나오는지 확인하고 <span class="chip ok">검증됨</span> 표시를 붙입니다 (6조).</p></li>
+  </ol>
+  <div class="note"><b>8조.</b> 되풀이 제출로는 순위가 오르지 않습니다.
+    직전 최고점을 잡음 바닥 <b>${f(b.noise_floor.sd_single)}</b> 이상으로 넘었을 때만
+    새 점수가 공개됩니다. 하루 제출 한도 ${ME.daily_cap||5}회.</div>`;
+  wireSubmit(b);
+}
+function parsePred(txt){
+  txt=txt.trim();
+  if(txt.startsWith("{"))return JSON.parse(txt);
+  const out={};
+  txt.split(/\r?\n/).forEach((ln,i)=>{
+    const p=ln.split(/[,\t]/); if(p.length<2)return;
+    const k=p[0].trim(); if(!k||(i===0&&isNaN(parseFloat(p[1]))))return;
+    const v=parseFloat(p[1]); if(!isNaN(v))out[k]=v;
+  });
+  if(!Object.keys(out).length)throw new Error("읽을 수 있는 항목이 없습니다");
+  return out;
+}
+function wireSubmit(b){
+  const drop=$("#drop"),file=$("#file"),ta=$("#p"),go=$("#go");
+  if(drop){
+    drop.onclick=()=>file.click();
+    file.onchange=e=>{const f0=e.target.files[0];if(!f0)return;
+      const r=new FileReader();r.onload=()=>{ta.value=r.result;
+        drop.textContent=`${f0.name} — ${(f0.size/1024).toFixed(0)} KB 읽음`;};r.readAsText(f0);};
+    ["dragenter","dragover"].forEach(ev=>drop.addEventListener(ev,e=>{
+      e.preventDefault();drop.classList.add("hot");}));
+    ["dragleave","drop"].forEach(ev=>drop.addEventListener(ev,e=>{
+      e.preventDefault();drop.classList.remove("hot");}));
+    drop.addEventListener("drop",e=>{const f0=e.dataTransfer.files[0];if(!f0)return;
+      const r=new FileReader();r.onload=()=>{ta.value=r.result;
+        drop.textContent=`${f0.name} — ${(f0.size/1024).toFixed(0)} KB 읽음`;};r.readAsText(f0);});
+  }
+  if(!go)return;
+  go.onclick=async()=>{
+    const msg=$("#msg");let preds;
+    try{preds=parsePred(ta.value);}catch(e){msg.textContent="예측값을 읽지 못했습니다: "+e.message;return;}
+    msg.textContent=`${Object.keys(preds).length.toLocaleString()}개 항목 · 보내는 중…`;go.disabled=true;
     try{
+      const r=await j("/api/submit",{method:"POST",headers:{"Content-Type":"application/json"},
+        body:JSON.stringify({board:b.board,method:($("#m").value||"").trim(),
+          predictions:preds,training_data:($("#td").value||"").trim()})});
+      msg.innerHTML=`접수 완료 · 제출 번호 <code>${esc(r.submission_id)}</code>`;
+    }catch(e){let t=String(e.message||e);try{t=JSON.parse(t).detail||t;}catch(_){}msg.textContent=t;}
+    go.disabled=false;
   };
 }
+boot().catch(e=>{app.innerHTML=W(`<div class="note" style="margin-top:40px">
+  화면을 불러오지 못했습니다. ${esc(e.message||e)}</div>`);});
 </script>
 </body>
 </html>