File size: 1,879 Bytes
040f4b2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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>
|