Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AnyTop | SIGGRAPH 2025 Demo</title> | |
| <style> | |
| body { margin: 0; padding: 0; overflow: hidden; background: #050505; font-family: 'Inter', system-ui, sans-serif; color: #fff; } | |
| #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } | |
| #overlay { | |
| position: absolute; top: 20px; left: 20px; pointer-events: none; | |
| text-shadow: 0 2px 4px rgba(0,0,0,0.5); | |
| } | |
| h1 { margin: 0; font-size: 24px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #00d2ff; } | |
| p { margin: 5px 0; font-size: 14px; opacity: 0.8; max-width: 400px; line-height: 1.4; } | |
| .badge { | |
| display: inline-block; padding: 4px 8px; background: rgba(0, 210, 255, 0.2); | |
| border: 1px solid #00d2ff; border-radius: 4px; font-size: 10px; font-weight: bold; margin-bottom: 10px; | |
| } | |
| #ui-layer { | |
| position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); | |
| display: flex; gap: 20px; background: rgba(15, 15, 15, 0.85); | |
| padding: 15px 25px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); | |
| backdrop-filter: blur(10px); pointer-events: auto; align-items: center; | |
| } | |
| .ui-btn { | |
| background: none; border: 1px solid rgba(255,255,255,0.2); color: #fff; | |
| padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: all 0.3s; | |
| font-size: 12px; font-weight: 500; | |
| } | |
| .ui-btn:hover { background: #00d2ff; color: #000; border-color: #00d2ff; } | |
| .ui-btn.active { background: #00d2ff; color: #000; border-color: #00d2ff; } | |
| .caption { | |
| position: absolute; bottom: 100px; width: 100%; text-align: center; | |
| font-size: 18px; font-weight: 300; letter-spacing: 1px; color: #aaa; | |
| pointer-events: none; | |
| } | |
| #stats { position: absolute; top: 20px; right: 20px; text-align: right; pointer-events: none; opacity: 0.5; font-size: 10px; } | |
| </style> | |
| <script type="module" crossorigin src="/assets/index-BgOlzUaC.js"></script> | |
| </head> | |
| <body> | |
| <div id="canvas-container"></div> | |
| <div id="overlay"> | |
| <div class="badge">SIGGRAPH 2025 TECHNICAL PAPER</div> | |
| <h1>AnyTop</h1> | |
| <p>Character Animation Diffusion with Any Topology.</p> | |
| <p style="font-size: 11px; margin-top: 15px; color: #888;">Generating motion for arbitrary skeletons using only their skeletal structure as input.</p> | |
| </div> | |
| <div class="caption" id="main-caption">Transferring "Walk" motif across diverse topologies</div> | |
| <div id="ui-layer"> | |
| <button class="ui-btn active" onclick="switchTopology('humanoid')">Humanoid</button> | |
| <button class="ui-btn" onclick="switchTopology('quadruped')">Quadruped</button> | |
| <button class="ui-btn" onclick="switchTopology('centipede')">Centipede</button> | |
| <div style="width: 1px; height: 20px; background: rgba(255,255,255,0.2); margin: 0 10px;"></div> | |
| <button class="ui-btn" id="diffusion-toggle" onclick="toggleDiffusion()">Denoise View</button> | |
| </div> | |
| <div id="stats"> | |
| Latent Space: Informative CROSS-SKELETON MANIFOLD<br> | |
| Enrichment: T5 + POSITIONAL TOPOLOGY<br> | |
| Architecture: Skeletal Temporal Transformer | |
| </div> | |
| </body> | |
| </html> | |