| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>AnyTop Inference - SIGGRAPH 2025</title> |
| <style> |
| body { margin: 0; background: #111; color: #eee; font-family: sans-serif; overflow: hidden; } |
| #ui { position: absolute; top: 20px; left: 20px; z-index: 10; background: rgba(0,0,0,0.8); padding: 20px; border-radius: 8px; width: 300px; } |
| canvas { display: block; } |
| button { background: #444; color: white; border: none; padding: 10px; cursor: pointer; width: 100%; margin-top: 10px; } |
| button:hover { background: #666; } |
| .label { font-size: 12px; color: #888; margin-top: 10px; } |
| </style> |
| </head> |
| <body> |
| <div id="ui"> |
| <h2>AnyTop (Mock-Inference)</h2> |
| <p style="font-size: 13px;">Diffusion-based Character Animation with Any Topology.</p> |
| |
| <div class="label">Skeleton Preset</div> |
| <select id="preset" style="width:100%; padding:5px;"> |
| <option value="humanoid">Humanoid (22 joints)</option> |
| <option value="quadruped">Quadruped (Fox/Cat)</option> |
| <option value="centipede">Centipede (Multi-leg)</option> |
| </select> |
|
|
| <div class="label">Inference Steps</div> |
| <input type="range" id="steps" min="1" max="50" value="10" style="width:100%;"> |
|
|
| <button id="run">Run AnyTop Inference</button> |
| <div id="status" style="margin-top:10px; font-size:12px; color: #0f0;">Ready</div> |
| <hr> |
| <div class="label">Architecture:</div> |
| <ul style="font-size: 11px;"> |
| <li>Enrichment Block (Rest-pose + T5 Joint Embeds)</li> |
| <li>Skeletal Transformer (Topology-aware)</li> |
| <li>Temporal Transformer</li> |
| </ul> |
| </div> |
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="/static/js/viewer.js"></script> |
| </body> |
| </html> |
|
|
