Align leaderboard UI and add synchronized MotionFix visualization
Browse files- index.html +27 -12
- visualization.json +0 -0
index.html
CHANGED
|
@@ -2,15 +2,30 @@
|
|
| 2 |
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
| 3 |
<title>Instruction Editing Leaderboard</title>
|
| 4 |
<style>
|
| 5 |
-
:
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
.
|
| 11 |
-
.
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 2 |
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
| 3 |
<title>Instruction Editing Leaderboard</title>
|
| 4 |
<style>
|
| 5 |
+
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Manrope:wght@400;500;600;700&display=swap");
|
| 6 |
+
:root{color-scheme:light;--bg:#f4f6f5;--panel:#fff;--ink:#17211f;--muted:#63706c;--line:#d9dfdc;--strong:#bdc8c3;--teal:#087d72;--blue:#315f9d;--amber:#ad6d00;--coral:#c7563f;--green:#176b48;--shadow:0 8px 24px rgba(29,45,40,.07)}
|
| 7 |
+
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 "Manrope",ui-sans-serif,sans-serif}.page{width:min(1440px,calc(100vw - 32px));margin:0 auto;padding:28px 0 42px}
|
| 8 |
+
.topbar{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:22px}.topbar h1{margin:0;font-size:30px;line-height:1.15}.subtitle{max-width:900px;margin:9px 0 0;color:var(--muted)}.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.badge{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 10px;font-size:12px}.updated{min-width:190px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--muted);box-shadow:var(--shadow)}.updated strong{display:block;color:var(--ink);font-size:14px}
|
| 9 |
+
.score-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}.score{background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:8px;padding:14px;box-shadow:var(--shadow)}.score:nth-child(2){border-top-color:var(--blue)}.score:nth-child(3){border-top-color:var(--amber)}.score:nth-child(4){border-top-color:var(--coral)}.score .k{font-size:11px;color:var(--muted);text-transform:uppercase}.score .v{font-size:21px;font-weight:720;margin-top:5px}.score .n{font-size:12px;color:var(--muted)}
|
| 10 |
+
.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);background:#fff;border-radius:8px;width:max-content;box-shadow:var(--shadow);margin:18px 0 12px}.tab{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:6px;cursor:pointer;font:inherit}.tab.active{background:#eef3f2;color:var(--teal);font-weight:700}.panel{display:none}.panel.active{display:block}
|
| 11 |
+
.controls{display:flex;justify-content:space-between;gap:12px;margin:0 0 12px}.search,select,button,input[type=range]{border:1px solid var(--strong);background:#fff;border-radius:8px;padding:9px 11px;font:inherit}.search{width:min(350px,100%)}button{cursor:pointer}button:hover{border-color:var(--teal);color:var(--teal)}
|
| 12 |
+
.table-shell{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}table{width:100%;min-width:1080px;border-collapse:separate;border-spacing:0;font-size:13px}th,td{padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}th{position:sticky;top:0;background:#f2f5f3;color:#4e5a56;font-size:11px;text-transform:uppercase;text-align:left}.num,.rank{text-align:right;font-variant-numeric:tabular-nums}.method{font-weight:700}.status{padding:3px 7px;border-radius:3px;background:#dceee5;color:#155b3d}.status.contaminated{background:#f7dfd8;color:#8a2f1f}
|
| 13 |
+
.vizbar{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:10px;align-items:center;margin-bottom:12px}.vizgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.vizcard{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}.vizhead{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}.vizhead strong{font-size:13px}.vizhead span{font:10px "IBM Plex Mono",monospace;color:var(--muted)}canvas{width:100%;height:280px;display:block;background:#f9faf9}.timeline{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin:12px 0;color:var(--muted);font:11px "IBM Plex Mono",monospace}.timeline input{width:100%;padding:0;accent-color:var(--teal)}
|
| 14 |
+
.protocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}.card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:17px;box-shadow:var(--shadow)}.card h2{font-size:18px;margin:0 0 9px}.card p,.card li{color:var(--muted)}.warning{border-left:4px solid var(--coral)}.note{color:var(--muted);font-size:12px;margin-top:14px}
|
| 15 |
+
@media(max-width:900px){.score-strip,.vizgrid,.protocol{grid-template-columns:1fr 1fr}.topbar{display:block}.updated{margin-top:12px}.vizbar{grid-template-columns:1fr auto}}@media(max-width:620px){.score-strip,.vizgrid,.protocol{grid-template-columns:1fr}.page{width:min(100% - 20px,1440px)}}
|
| 16 |
+
</style></head><body><main class="page">
|
| 17 |
+
<header class="topbar"><div><h1>Instruction Editing Leaderboard</h1><p class="subtitle">MotionFix official test · 1,013 source-motion, free-form instruction, and paired-target triplets · shared universal SMPL-H evaluator.</p><div class="badges"><span class="badge">30 FPS</span><span class="badge">Batch-32 primary</span><span class="badge">Paired target</span><span class="badge">Contamination gate</span></div></div><div class="updated"><strong>Updated 2026-07-21</strong>Protocol v1 · 1,013 cases</div></header>
|
| 18 |
+
<section class="score-strip"><div class="score"><div class="k">Ranked methods</div><div class="v">3</div><div class="n">complete + uncontaminated</div></div><div class="score"><div class="k">Primary metric</div><div class="v">R@3₃₂</div><div class="n">MotionFix paper protocol</div></div><div class="score"><div class="k">Evaluator</div><div class="v">uTMR</div><div class="n">universal SMPL-H joints66</div></div><div class="score"><div class="k">Qualitative</div><div class="v">5 cases</div><div class="n">six-way synchronized review</div></div></section>
|
| 19 |
+
<nav class="tabs"><button class="tab active" data-panel="ranking">Leaderboard</button><button class="tab" data-panel="visual">Visualization</button><button class="tab" data-panel="protocol">Protocol</button></nav>
|
| 20 |
+
<section id="ranking" class="panel active"><div class="controls"><input id="search" class="search" placeholder="Filter methods or inputs"><span class="note">Full-1,013 retrieval remains in canonical JSON provenance.</span></div><div class="table-shell"><table><thead><tr><th>Rank</th><th>Method</th><th>Native input</th><th>Coverage</th><th>FID ↓</th><th>R@1₃₂ ↑</th><th>R@2₃₂ ↑</th><th>R@3₃₂ ↑</th><th>M2M-Dist ↓</th><th>Diversity →</th><th>Status</th></tr></thead><tbody id="leaderRows"><tr><td class="rank">—</td><td class="method">MotionCanvas</td><td>source motion + instruction</td><td class="num">1013/1013</td><td class="num">0.0056</td><td class="num">94.1334</td><td class="num">98.3050</td><td class="num">99.0769</td><td class="num">0.2939</td><td class="num">57.4344</td><td><span class="status contaminated">contaminated</span></td></tr><tr><td class="rank">1</td><td class="method">SimMotionEdit</td><td>source motion + instruction</td><td class="num">1013/1013</td><td class="num">0.0752</td><td class="num">55.4288</td><td class="num">71.0786</td><td class="num">79.0555</td><td class="num">0.7931</td><td class="num">57.2136</td><td><span class="status complete">complete</span></td></tr><tr><td class="rank">2</td><td class="method">MotionFix (TMED)</td><td>source motion + instruction</td><td class="num">1013/1013</td><td class="num">0.1004</td><td class="num">45.3062</td><td class="num">60.4013</td><td class="num">68.4968</td><td class="num">0.8952</td><td class="num">57.5665</td><td><span class="status complete">complete</span></td></tr><tr><td class="rank">3</td><td class="method">MotionLab</td><td>source motion + instruction</td><td class="num">1013/1013</td><td class="num">0.7277</td><td class="num">35.1358</td><td class="num">51.6488</td><td class="num">62.1419</td><td class="num">1.1383</td><td class="num">47.0083</td><td><span class="status complete">complete</span></td></tr><tr><td class="rank">—</td><td class="method">Source input (no edit)</td><td>source motion only</td><td class="num">1013/1013</td><td class="num">0.0236</td><td class="num">61.4481</td><td class="num">76.4851</td><td class="num">83.3287</td><td class="num">0.7260</td><td class="num">57.5875</td><td><span class="status complete">complete</span></td></tr></tbody></table></div><p class="note">MotionCanvas is visible with its measured Batch-32 metrics but withheld from ranking. Source input is diagnostic and unranked.</p></section>
|
| 21 |
+
<section id="visual" class="panel"><div class="vizbar"><select id="caseSelect"></select><button id="play">Pause</button><select id="view"><option value="front">Front view</option><option value="side">Side view</option></select></div><div class="timeline"><span id="timeNow">0.00s</span><input id="scrub" type="range" min="0" max="1000" value="0"><span id="duration">0.00s</span></div><div id="vizgrid" class="vizgrid"></div><p class="note">Skeletons are independently grounded and frame-0 centered. MotionCanvas is shown only as a contaminated qualitative diagnostic and is never ranked.</p></section>
|
| 22 |
+
<section id="protocol" class="panel"><div class="protocol"><div class="card"><h2>Ranking protocol</h2><ul><li>Batch-32 R@1/2/3 use 20 fixed-seed reshuffles.</li><li>R@3 is the primary ranking metric.</li><li>FID uses per-sample L2-normalized uTMR embeddings.</li><li>M2M-Dist and Diversity use the same universal SMPL-H motion space.</li></ul></div><div class="card warning"><h2>Validity gates</h2><ul><li>All 1,013 cases required.</li><li>Source/instruction/target pairing must be exact.</li><li>Train/test content overlap causes automatic withholding.</li><li>Methods with extra reference inputs belong to separate tracks.</li></ul></div></div></section>
|
| 23 |
+
<script type="application/json" id="leaderboard-data">{"title":"Instruction Editing Leaderboard","updated":"2026-07-21","dataset":"MotionFix official test","count":1013,"evaluator":"Universal SMPL-H joints66 uTMR at 30 FPS","protocol":{"input":"source motion + free-form edit instruction","target":"paired MotionFix target motion","fid":"per-sample L2-normalized uTMR motion embeddings","full_retrieval":"target queries against all 1,013 generated candidates","batch_retrieval":"20 fixed-seed reshuffles, disjoint candidate batches of 32","rank_by":"Batch-32 M2M R@3; diagnostic source-input and contaminated rows are not ranked","protocol_revision":"motionfix_universal_smplh_full1013_batch32_v1"},"metrics":["FID","M2M Batch R@1","M2M Batch R@2","M2M Batch R@3","M2M-Dist","Diversity"],"rows":[{"method":"MotionCanvas","method_id":"motioncanvas","input":"source motion + instruction","native_representation":"SMPL-22 motion135","coverage":"1013/1013","status":"contaminated","ranked":false,"metrics":{"FID":0.005581532456718108,"M2M Batch R@1":94.13341703869048,"M2M Batch R@2":98.30496651785714,"M2M Batch R@3":99.07691592261905,"M2M-Dist":0.29387055826697894,"Diversity":57.43442230224609},"contamination_note":"Training annotation contains 1,000/1,013 MotionFix test pairs with identical source and target motion content.","artifact":"outputs/evaluation/motion_edit/instruction_editing/motionfix_test/smplh_joints66/motioncanvas","rank":null},{"method":"SimMotionEdit","method_id":"simmotionedit","input":"source motion + instruction","native_representation":"MotionFix motion135","coverage":"1013/1013","status":"complete","ranked":true,"metrics":{"FID":0.07515587718636718,"M2M Batch R@1":55.42875744047619,"M2M Batch R@2":71.0786365327381,"M2M Batch R@3":79.05552455357142,"M2M-Dist":0.7931398850267343,"Diversity":57.213626861572266},"contamination_note":null,"artifact":"outputs/evaluation/motion_edit/instruction_editing/motionfix_test/smplh_joints66/simmotionedit","rank":1},{"method":"MotionFix (TMED)","method_id":"motionfix_tmed","input":"source motion + instruction","native_representation":"MotionFix motion135","coverage":"1013/1013","status":"complete","ranked":true,"metrics":{"FID":0.10039292137622957,"M2M Batch R@1":45.30622209821429,"M2M Batch R@2":60.40132068452381,"M2M Batch R@3":68.49679129464286,"M2M-Dist":0.8951523397669957,"Diversity":57.566488647460936},"contamination_note":null,"artifact":"outputs/evaluation/motion_edit/instruction_editing/motionfix_test/smplh_joints66/motionfix_tmed","rank":2},{"method":"MotionLab","method_id":"motionlab","input":"source motion + instruction","native_representation":"HumanML3D 263D","coverage":"1013/1013","status":"complete","ranked":true,"metrics":{"FID":0.7276873204964254,"M2M Batch R@1":35.13578869047619,"M2M Batch R@2":51.64876302083333,"M2M Batch R@3":62.141927083333336,"M2M-Dist":1.1383140975125763,"Diversity":47.008254051208496},"contamination_note":null,"artifact":"outputs/evaluation/motion_edit/instruction_editing/motionfix_test/smplh_joints66/motionlab","rank":3},{"method":"Source input (no edit)","method_id":"source_input","input":"source motion only","native_representation":"SMPL-22 motion135","coverage":"1013/1013","status":"complete","ranked":false,"metrics":{"FID":0.023604867086336023,"M2M Batch R@1":61.44810267857142,"M2M Batch R@2":76.48507254464286,"M2M Batch R@3":83.32868303571429,"M2M-Dist":0.7259552151542864,"Diversity":57.58748607635498},"contamination_note":null,"artifact":"outputs/evaluation/motion_edit/instruction_editing/motionfix_test/smplh_joints66/source_input","rank":null}]}</script>
|
| 24 |
+
<script>
|
| 25 |
+
const DATA=JSON.parse(document.getElementById('leaderboard-data').textContent);const tabs=[...document.querySelectorAll('.tab')];tabs.forEach(b=>b.onclick=()=>{tabs.forEach(x=>x.classList.remove('active'));document.querySelectorAll('.panel').forEach(x=>x.classList.remove('active'));b.classList.add('active');document.getElementById(b.dataset.panel).classList.add('active')});document.getElementById('search').oninput=e=>{const q=e.target.value.toLowerCase();document.querySelectorAll('#leaderRows tr').forEach(r=>r.style.display=r.textContent.toLowerCase().includes(q)?'':'none')};
|
| 26 |
+
const PARENTS=[-1,0,0,0,1,2,3,4,5,6,7,8,9,9,9,12,13,14,16,17,18,19];let VIZ=null,current=0,playing=true,time=0,last=performance.now(),view='front';const colors=['#798987','#d8bd82','#c98253','#cf646b','#668eb8','#70aa83'];
|
| 27 |
+
function draw(canvas,pos,color){const dpr=Math.min(devicePixelRatio,2),w=canvas.clientWidth,h=canvas.clientHeight;canvas.width=w*dpr;canvas.height=h*dpr;const c=canvas.getContext('2d');c.scale(dpr,dpr);c.clearRect(0,0,w,h);const hx=view==='front'?0:2;let xs=pos.map(p=>p[hx]),ys=pos.map(p=>p[1]);const minX=Math.min(...xs),maxX=Math.max(...xs),minY=Math.min(...ys),maxY=Math.max(...ys),scale=.76*Math.min(w/Math.max(.2,maxX-minX),h/Math.max(.4,maxY-minY));const pts=pos.map(p=>[(p[hx]-(minX+maxX)/2)*scale+w/2,h-24-(p[1]-minY)*scale]);c.strokeStyle='#d9dfdc';c.beginPath();c.moveTo(0,h-24);c.lineTo(w,h-24);c.stroke();c.strokeStyle=color;c.lineWidth=3;c.lineCap='round';for(let j=1;j<22;j++){const q=PARENTS[j];c.beginPath();c.moveTo(...pts[q]);c.lineTo(...pts[j]);c.stroke()}c.fillStyle=color;for(const p of pts){c.beginPath();c.arc(p[0],p[1],3.1,0,Math.PI*2);c.fill()}}
|
| 28 |
+
function renderViz(){if(!VIZ)return;const item=VIZ.cases[current],dur=Math.max(...Object.values(item.methods).map(m=>m.frames/m.fps));document.getElementById('duration').textContent=dur.toFixed(2)+'s';document.getElementById('timeNow').textContent=time.toFixed(2)+'s';if(playing)document.getElementById('scrub').value=Math.round(1000*time/dur);[...document.querySelectorAll('.vizcard')].forEach(card=>{const key=card.dataset.key,m=item.methods[key],f=Math.min(m.frames-1,Math.floor(time*m.fps));draw(card.querySelector('canvas'),m.positions[f],card.dataset.color);card.querySelector('.frame').textContent=`f ${f}/${m.frames-1}`})}
|
| 29 |
+
function loadCase(i){current=i;time=0;const item=VIZ.cases[i],grid=document.getElementById('vizgrid');grid.innerHTML='';Object.entries(item.methods).forEach(([key,m],idx)=>{const card=document.createElement('article');card.className='vizcard';card.dataset.key=key;card.dataset.color=colors[idx];const metric=m.metrics?.warning?m.metrics.warning:(m.metrics?`FID ${m.metrics.FID} · R@3 ${m.metrics['R@3']}`:`${m.fps} FPS`);card.innerHTML=`<div class="vizhead"><strong>${m.label}</strong><span>${metric} · <b class="frame"></b></span></div><canvas></canvas>`;grid.appendChild(card)});renderViz()}
|
| 30 |
+
fetch('visualization.json').then(r=>r.json()).then(v=>{VIZ=v;const s=document.getElementById('caseSelect');v.cases.forEach((c,i)=>{const o=document.createElement('option');o.value=i;o.textContent=`${String(c.index).padStart(4,'0')} · ${c.prompt_id} · ${c.instruction}`;s.appendChild(o)});s.onchange=()=>loadCase(Number(s.value));loadCase(0)});document.getElementById('play').onclick=e=>{playing=!playing;e.target.textContent=playing?'Pause':'Play'};document.getElementById('view').onchange=e=>{view=e.target.value;renderViz()};document.getElementById('scrub').oninput=e=>{playing=false;document.getElementById('play').textContent='Play';const item=VIZ.cases[current],dur=Math.max(...Object.values(item.methods).map(m=>m.frames/m.fps));time=dur*Number(e.target.value)/1000;renderViz()};function loop(now){const dt=Math.min(.1,(now-last)/1000);last=now;if(VIZ&&playing){const item=VIZ.cases[current],dur=Math.max(...Object.values(item.methods).map(m=>m.frames/m.fps));time=(time+dt)%dur;renderViz()}requestAnimationFrame(loop)}requestAnimationFrame(loop);
|
| 31 |
+
</script></main></body></html>
|
visualization.json
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|