templates/index.html

<!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>