Update index.html

index.html

@@ -176,7 +176,7 @@ body.dark thead{background:var(--surface-alt)!important;}
 <header>
   <div class="badge-row">
     <div class="badge"><div class="pulse"></div>LIVE · 2026.03 · v1.0</div>
-    <button onclick="document.body.classList.toggle('dark');localStorage.setItem('wm-dark',document.body.classList.contains('dark'));this.textContent=document.body.classList.contains('dark')?'☀️ Light':'🌙 Dark'"
+    <button id="WM_DARK_BTN"
       style="background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:4px 14px;font-size:10px;font-family:var(--mono);color:var(--text-sec);cursor:pointer;font-weight:700;transition:all .2s;box-shadow:var(--shadow-sm)">🌙 Dark</button>
     <div style="display:flex;gap:4px">
       <a href="https://huggingface.co/datasets/VIDraft/WorldModelBench" target="_blank"
@@ -219,12 +219,12 @@ body.dark thead{background:var(--surface-alt)!important;}
 </div>
 
 <!-- ===== TABS ===== -->
-<div class="tab-bar">
-  <div class="tab on" onclick="showTab('lb',this)">🏆 Leaderboard</div>
-  <div class="tab" onclick="showTab('cats',this)">📊 Categories</div>
-  <div class="tab" onclick="showTab('structure',this)">📐 Structure</div>
-  <div class="tab" onclick="showTab('submit',this)">📝 Submit</div>
-  <div class="tab" onclick="showTab('about',this)">ℹ️ About</div>
+<div class="tab-bar" id="WM_TAB_BAR">
+  <div class="tab on" data-tab="lb">🏆 Leaderboard</div>
+  <div class="tab" data-tab="cats">📊 Categories</div>
+  <div class="tab" data-tab="structure">📐 Structure</div>
+  <div class="tab" data-tab="submit">📝 Submit</div>
+  <div class="tab" data-tab="about">ℹ️ About</div>
 </div>
 
 <!-- ===== TAB: LEADERBOARD ===== -->
@@ -234,13 +234,13 @@ body.dark thead{background:var(--surface-alt)!important;}
     <thead>
       <tr>
         <th class="c-model" style="text-align:left">Model</th>
-        <th onclick="srt(0)" title="WM Score (0~1000)">WM Score<span class="sa">↕</span></th>
+        <th title="WM Score (0~1000)">WM Score<span class="sa">↕</span></th>
         <th>Grade</th>
-        <th onclick="srt(1)" class="p1-col" title="👁 Perception (0~250)">👁 인식<span class="sa">↕</span></th>
-        <th onclick="srt(2)" class="p2-col" title="🧠 Cognition (0~450)">🧠 인지<span class="sa">↕</span></th>
-        <th onclick="srt(3)" class="p3-col" title="🔥 Embodiment (0~300)">🔥 구현<span class="sa">↕</span></th>
-        <th onclick="srt(4)" title="FPS">FPS<span class="sa">↕</span></th>
-        <th onclick="srt(5)" title="Cognitive Latency (ms)">Lat(ms)<span class="sa">↕</span></th>
+        <th class="p1-col" title="👁 Perception (0~250)">👁 인식<span class="sa">↕</span></th>
+        <th class="p2-col" title="🧠 Cognition (0~450)">🧠 인지<span class="sa">↕</span></th>
+        <th class="p3-col" title="🔥 Embodiment (0~300)">🔥 구현<span class="sa">↕</span></th>
+        <th title="FPS">FPS<span class="sa">↕</span></th>
+        <th title="Cognitive Latency (ms)">Lat(ms)<span class="sa">↕</span></th>
         <th>Track</th>
         <th>Brain</th>
         <th>Motion</th>
@@ -511,110 +511,139 @@ body.dark thead{background:var(--surface-alt)!important;}
 
 </div><!-- /wrap -->
 
-<!-- ===== DATA ===== -->
+<!-- ===== DATA & LOGIC ===== -->
 <script>
-const LB_DATA = [
-  {
-    model:"VIDRAFT PROMETHEUS v1.0", org:"VIDRAFT", date:"2026-03",
-    wm:726, grade:"B",
-    p1:140, p2:390, p3:196,
-    fps:47.0, lat:3100, track:"C",
-    brain:"Kimi K2.5", motion:"FloodDiffusion Tiny", gpu:"L40S 48GB",
-    cats:{C01:65,C02:75,C03:85,C04:90,C05:85,C06:60,C07:70,C08:80,C09:85,C10:35}
+(function(){
+  /* ── 데이터 ── */
+  var LB_DATA = [
+    {model:"VIDRAFT PROMETHEUS v1.0",org:"VIDRAFT",date:"2026-03",
+     wm:726,grade:"B",p1:140,p2:390,p3:196,fps:47.0,lat:3100,track:"C",
+     brain:"Kimi K2.5",motion:"FloodDiffusion Tiny",gpu:"L40S 48GB",
+     cats:{C01:65,C02:75,C03:85,C04:90,C05:85,C06:60,C07:70,C08:80,C09:85,C10:35}}
+  ];
+  var CAT_DATA = [
+    {id:"C01",name:"환경 인식 정확도",pillar:"P1",max:100,score:65,first:"",desc:"주변 벽·장애물·지형을 정확히 파악"},
+    {id:"C02",name:"개체 인식 및 분류",pillar:"P1",max:100,score:75,first:"",desc:"NPC를 맹수/사람/환경으로 정확히 분류"},
+    {id:"C03",name:"예측 기반 추론",pillar:"P2",max:100,score:85,first:"✦",desc:"4방향 미래 결과 예측 → 최선 선택"},
+    {id:"C04",name:"위협 유형별 차별 반응",pillar:"P2",max:100,score:90,first:"✦",desc:"맹수→전력질주 vs 사람→걸어서 회피"},
+    {id:"C05",name:"자율 감정 에스컬레이션",pillar:"P2",max:100,score:85,first:"✦✦",desc:"위협 지속 시 감정 자율 격화"},
+    {id:"C06",name:"맥락 기억 및 활용",pillar:"P2",max:100,score:60,first:"✦",desc:"이전 실패 기억 → 다음 판단 반영"},
+    {id:"C07",name:"위협 해제 후 적응",pillar:"P2",max:100,score:70,first:"✦",desc:"위협 소멸 후 서서히 정상화+경계"},
+    {id:"C08",name:"모션 감정 표현력",pillar:"P3",max:100,score:80,first:"✦",desc:"판단 감정이 모션에 반영되는 풍부함"},
+    {id:"C09",name:"실시간 인지-행동 성능",pillar:"P3",max:100,score:85,first:"",desc:"인지 루프 FPS + 지연시간"},
+    {id:"C10",name:"신체 교체 확장성",pillar:"P3",max:100,score:35,first:"✦✦",desc:"동일 두뇌로 다른 신체(로봇/드론) 적용"}
+  ];
+  var PC = {P1:"#7b8fd4",P2:"#e8593c",P3:"#d4a044"};
+
+  /* ── 유틸 ── */
+  function scoreBar(v,max,color){
+    var pct=Math.round(v/max*100);
+    return '<div class="sc"><div class="sn" style="color:'+color+'">'+v+'</div><div class="sb"><div class="sf" style="width:'+pct+'%;background:'+color+'"></div></div></div>';
+  }
+  function $(id){return document.getElementById(id);}
+
+  /* ── 렌더 ── */
+  function renderLB(){
+    var tb=$('LB_BODY'); if(!tb) return;
+    tb.innerHTML=LB_DATA.map(function(r,i){
+      return '<tr class="'+(i===0?'hl':'')+'">'
+        +'<td class="c-model"><div class="mc"><div class="mn">'
+        +'<span style="display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#e8593c,#d4a044);color:#fff;font-size:9px;font-weight:800;flex-shrink:0">'+(i+1)+'</span>'
+        +r.model+'</div><div class="mp">'+r.org+' · '+r.date+'</div></div></td>'
+        +'<td>'+scoreBar(r.wm,1000,'#e8593c')+'</td>'
+        +'<td><span class="gr gr-'+r.grade+'">'+r.grade+'</span></td>'
+        +'<td class="p1-col">'+scoreBar(r.p1,250,PC.P1)+'</td>'
+        +'<td class="p2-col">'+scoreBar(r.p2,450,PC.P2)+'</td>'
+        +'<td class="p3-col">'+scoreBar(r.p3,300,PC.P3)+'</td>'
+        +'<td><span style="font-family:var(--mono);font-size:11px;font-weight:700">'+r.fps+'</span></td>'
+        +'<td><span style="font-family:var(--mono);font-size:11px;font-weight:700">'+r.lat.toLocaleString()+'</span></td>'
+        +'<td><span class="tb tb-'+r.track+'">'+r.track+' ✓</span></td>'
+        +'<td><span style="font-size:9px;color:var(--text-sec)">'+r.brain+'</span></td>'
+        +'<td><span style="font-size:9px;color:var(--text-sec)">'+r.motion+'</span></td>'
+        +'<td><span style="font-size:9px;color:var(--text-muted)">'+r.gpu+'</span></td>'
+        +'</tr>';
+    }).join('');
   }
-];
-
-const CAT_DATA = [
-  {id:"C01",name:"환경 인식 정확도",pillar:"P1",max:100,score:65,first:"",desc:"주변 벽·장애물·지형을 정확히 파악"},
-  {id:"C02",name:"개체 인식 및 분류",pillar:"P1",max:100,score:75,first:"",desc:"NPC를 맹수/사람/환경으로 정확히 분류"},
-  {id:"C03",name:"예측 기반 추론",pillar:"P2",max:100,score:85,first:"✦",desc:"4방향 미래 결과 예측 → 최선 선택"},
-  {id:"C04",name:"위협 유형별 차별 반응",pillar:"P2",max:100,score:90,first:"✦",desc:"맹수→전력질주 vs 사람→걸어서 회피"},
-  {id:"C05",name:"자율 감정 에스컬레이션",pillar:"P2",max:100,score:85,first:"✦✦",desc:"위협 지속 시 감정 자율 격화"},
-  {id:"C06",name:"맥락 기억 및 활용",pillar:"P2",max:100,score:60,first:"✦",desc:"이전 실패 기억 → 다음 판단 반영"},
-  {id:"C07",name:"위협 해제 후 적응",pillar:"P2",max:100,score:70,first:"✦",desc:"위협 소멸 후 서서히 정상화+경계"},
-  {id:"C08",name:"모션 감정 표현력",pillar:"P3",max:100,score:80,first:"✦",desc:"판단 감정이 모션에 반영되는 풍부함"},
-  {id:"C09",name:"실시간 인지-행동 성능",pillar:"P3",max:100,score:85,first:"",desc:"인지 루프 FPS + 지연시간"},
-  {id:"C10",name:"신체 교체 확장성",pillar:"P3",max:100,score:35,first:"✦✦",desc:"동일 두뇌로 다른 신체(로봇/드론) 적용"},
-];
-
-const PILLAR_COLOR = {P1:"#7b8fd4",P2:"#e8593c",P3:"#d4a044"};
-
-function gradeClass(g){return `gr gr-${g}`;}
-function trackClass(t){return `tb tb-${t}`;}
-function scoreBar(v,max,color){
-  const pct=Math.round(v/max*100);
-  return `<div class="sc"><div class="sn" style="color:${color}">${v}</div><div class="sb"><div class="sf" style="width:${pct}%;background:${color}"></div></div></div>`;
-}
 
-function renderLB(){
-  const tb=document.getElementById('LB_BODY');
-  tb.innerHTML=LB_DATA.map((r,i)=>`
-  <tr class="${i===0?'hl':''}">
-    <td class="c-model">
-      <div class="mc">
-        <div class="mn">
-          <span style="display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#e8593c,#d4a044);color:#fff;font-size:9px;font-weight:800;flex-shrink:0">${i+1}</span>
-          ${r.model}
-        </div>
-        <div class="mp">${r.org} · ${r.date}</div>
-      </div>
-    </td>
-    <td>${scoreBar(r.wm,1000,'#e8593c')}</td>
-    <td><span class="${gradeClass(r.grade)}">${r.grade}</span></td>
-    <td class="p1-col">${scoreBar(r.p1,250,PILLAR_COLOR.P1)}</td>
-    <td class="p2-col">${scoreBar(r.p2,450,PILLAR_COLOR.P2)}</td>
-    <td class="p3-col">${scoreBar(r.p3,300,PILLAR_COLOR.P3)}</td>
-    <td><span style="font-family:var(--mono);font-size:11px;font-weight:700">${r.fps}</span></td>
-    <td><span style="font-family:var(--mono);font-size:11px;font-weight:700">${r.lat.toLocaleString()}</span></td>
-    <td><span class="${trackClass(r.track)}">${r.track} ✓</span></td>
-    <td><span style="font-size:9px;color:var(--text-sec)">${r.brain}</span></td>
-    <td><span style="font-size:9px;color:var(--text-sec)">${r.motion}</span></td>
-    <td><span style="font-size:9px;color:var(--text-muted)">${r.gpu}</span></td>
-  </tr>`).join('');
-}
+  function renderBars(){
+    ['P1','P2','P3'].forEach(function(p){
+      var el=$('bars-'+p.toLowerCase()); if(!el) return;
+      var cats=CAT_DATA.filter(function(c){return c.pillar===p;});
+      el.innerHTML=cats.map(function(c){
+        return '<div class="bar-row">'
+          +'<div class="bar-label">'+c.id+' · '+c.name+'</div>'
+          +'<div class="bar-track"><div class="bar-fill" style="width:'+c.score+'%;background:'+PC[p]+'"></div></div>'
+          +'<div class="bar-val" style="color:'+PC[p]+'">'+c.score+'</div>'
+          +'</div>';
+      }).join('');
+    });
+  }
 
-function renderBars(){
-  ['P1','P2','P3'].forEach(p=>{
-    const el=document.getElementById(`bars-${p.toLowerCase()}`);
-    const cats=CAT_DATA.filter(c=>c.pillar===p);
-    el.innerHTML=cats.map(c=>`
-    <div class="bar-row">
-      <div class="bar-label">${c.id} · ${c.name}</div>
-      <div class="bar-track"><div class="bar-fill" style="width:${c.score}%;background:${PILLAR_COLOR[p]}"></div></div>
-      <div class="bar-val" style="color:${PILLAR_COLOR[p]}">${c.score}</div>
-    </div>`).join('');
-  });
-}
+  function renderCatTable(){
+    var tb=$('CAT_TABLE'); if(!tb) return;
+    tb.innerHTML=CAT_DATA.map(function(c){
+      return '<tr>'
+        +'<td class="c-model" style="font-family:var(--mono);font-weight:700;color:'+PC[c.pillar]+'">'+c.id+'</td>'
+        +'<td style="text-align:left;font-weight:600">'+c.name+'</td>'
+        +'<td style="text-align:left"><span style="font-size:9px;font-family:var(--mono);color:'+PC[c.pillar]+'">'+c.pillar+'</span></td>'
+        +'<td><span style="font-family:var(--mono);font-weight:700">'+c.max+'</span></td>'
+        +'<td style="text-align:left">'+(c.first?'<span style="font-size:9px;font-weight:700;color:var(--ac)">'+c.first+' 세계최초</span>':'')+'</td>'
+        +'<td style="text-align:left;font-size:9.5px;color:var(--text-sec)">'+c.desc+'</td>'
+        +'</tr>';
+    }).join('');
+  }
 
-function renderCatTable(){
-  const tb=document.getElementById('CAT_TABLE');
-  tb.innerHTML=CAT_DATA.map(c=>`
-  <tr>
-    <td class="c-model" style="font-family:var(--mono);font-weight:700;color:${PILLAR_COLOR[c.pillar]}">${c.id}</td>
-    <td style="text-align:left;font-weight:600">${c.name}</td>
-    <td style="text-align:left"><span style="font-size:9px;font-family:var(--mono);color:${PILLAR_COLOR[c.pillar]}">${c.pillar}</span></td>
-    <td><span style="font-family:var(--mono);font-weight:700">${c.max}</span></td>
-    <td style="text-align:left">${c.first?`<span style="font-size:9px;font-weight:700;color:var(--ac)">${c.first} 세계최초</span>`:''}</td>
-    <td style="text-align:left;font-size:9.5px;color:var(--text-sec)">${c.desc}</td>
-  </tr>`).join('');
-}
+  /* ── 탭 전환 ── */
+  function showTab(id){
+    document.querySelectorAll('.tpane').forEach(function(p){p.classList.remove('on');});
+    document.querySelectorAll('#WM_TAB_BAR .tab').forEach(function(t){t.classList.remove('on');});
+    var pane=$(id); if(pane) pane.classList.add('on');
+    var btn=document.querySelector('#WM_TAB_BAR [data-tab="'+id+'"]');
+    if(btn) btn.classList.add('on');
+  }
 
-function showTab(id,el){
-  document.querySelectorAll('.tpane').forEach(p=>p.classList.remove('on'));
-  document.querySelectorAll('.tab').forEach(t=>t.classList.remove('on'));
-  document.getElementById(id).classList.add('on');
-  el.classList.add('on');
-}
+  /* ── 이벤트 바인딩 ── */
+  function bindEvents(){
+    /* 탭 */
+    var tabBar=$('WM_TAB_BAR');
+    if(tabBar){
+      tabBar.addEventListener('click',function(e){
+        var tab=e.target.closest('[data-tab]');
+        if(tab) showTab(tab.getAttribute('data-tab'));
+      });
+    }
+    /* 다크모드 */
+    var darkBtn=$('WM_DARK_BTN');
+    if(darkBtn){
+      darkBtn.addEventListener('click',function(){
+        document.body.classList.toggle('dark');
+        var isDark=document.body.classList.contains('dark');
+        localStorage.setItem('wm-dark',isDark);
+        darkBtn.textContent=isDark?'☀️ Light':'🌙 Dark';
+      });
+    }
+    /* 다크모드 복원 */
+    if(localStorage.getItem('wm-dark')==='true'){
+      document.body.classList.add('dark');
+      var b=$('WM_DARK_BTN'); if(b) b.textContent='☀️ Light';
+    }
+  }
 
-// dark mode persist
-(function(){
-  if(localStorage.getItem('wm-dark')==='true') document.body.classList.add('dark');
-})();
+  /* ── 초기화 (DOM 주입 후 안전하게 실행) ── */
+  function init(){
+    renderLB();
+    renderBars();
+    renderCatTable();
+    bindEvents();
+  }
 
-// init
-renderLB();
-renderBars();
-renderCatTable();
+  /* Gradio gr.HTML()은 DOMContentLoaded 이후에 주입되므로 즉시 실행 */
+  if(document.readyState==='loading'){
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();
 </script>
 </body>
 </html>