Spaces:
Running on T4
Running on T4
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FloodDiffusion - Streaming Motion Generation</title> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>FloodDiffusion</h1> | |
| <p class="subtitle">Tailored Diffusion Forcing for Streaming Motion Generation</p> | |
| <p style="font-size: 0.95em; margin-top: 8px; color: #666;"> | |
| <a href="https://yiyi-cai.github.io/" style="color: #333; text-decoration: none;">Yiyi Cai</a>, | |
| <a href="https://wuyuhan3z.github.io/" style="color: #333; text-decoration: none;">Yuhan Wu</a>, | |
| <a href="https://kunhangl.github.io/" style="color: #333; text-decoration: none;">Kunhang Li</a>, | |
| <span style="color: #333;">You Zhou</span>, | |
| <a href="http://www.bozheng-lab.com/" style="color: #333; text-decoration: none;">Bo Zheng</a>, | |
| <a href="https://h-liu1997.github.io/" style="color: #333; text-decoration: none;">Haiyang Liu</a> | |
| </p> | |
| <p style="font-size: 0.85em; color: #999; margin-top: 4px;">CVPR 2026</p> | |
| <div style="display: flex; justify-content: center; gap: 8px; margin-top: 8px;"> | |
| <a href="https://arxiv.org/abs/2512.03520"><img src="https://img.shields.io/badge/arXiv-2512.03520-blue" alt="arXiv"></a> | |
| <a href="https://shandaai.github.io/FloodDiffusion/"><img src="https://img.shields.io/badge/Project_Page-FloodDiffusion-orange" alt="Project Page"></a> | |
| <a href="https://github.com/ShandaAI/FloodDiffusion"><img src="https://img.shields.io/badge/Github-Code-green" alt="Code"></a> | |
| <a href="https://huggingface.co/ShandaAI/FloodDiffusionTiny"><img src="https://img.shields.io/badge/HF-Model-yellow" alt="Model"></a> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <div class="status-group"> | |
| <div class="status-item"> | |
| <span class="status-label">Status:</span> | |
| <span id="status" class="status-value">Idle</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">Buffer:</span> | |
| <span id="bufferSize" class="status-value">0 / 4</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">Motion FPS:</span> | |
| <span id="fps" class="status-value">0</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">Frames:</span> | |
| <span id="frameCount" class="status-value">0</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">Smoothing α:</span> | |
| <span id="currentSmoothing" class="status-value">0.50</span> | |
| </div> | |
| <div class="status-item"> | |
| <span class="status-label">History:</span> | |
| <span id="currentHistory" class="status-value">-</span> | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label for="motionText">Motion Description:</label> | |
| <input type="text" id="motionText" placeholder="Enter motion description (e.g., walk forward, jump, dance)" value="walk in a circle."> | |
| </div> | |
| <div class="button-group"> | |
| <button id="startResetBtn" class="btn btn-primary">Start</button> | |
| <button id="updateBtn" class="btn btn-secondary" disabled>Update Text</button> | |
| <button id="pauseResumeBtn" class="btn btn-warning" disabled>Pause</button> | |
| <button id="configBtn" class="btn">Config</button> | |
| </div> | |
| <div id="conflictWarning" class="conflict-warning" style="display: none;"> | |
| <p><strong>⚠️ Another user is currently generating!</strong></p> | |
| <p>Do you want to force stop their session and take over?</p> | |
| <button id="forceTakeoverBtn" class="btn btn-danger">Force Takeover</button> | |
| <button id="cancelTakeoverBtn" class="btn btn-secondary">Cancel</button> | |
| </div> | |
| </div> | |
| <div id="canvas-container"> | |
| <canvas id="renderCanvas"></canvas> | |
| </div> | |
| <div class="info"> | |
| <div class="description-box"> | |
| <strong>Start/Reset:</strong> Start when idle, Reset when running (clears all state and applies new parameters) • | |
| <strong>Update Text:</strong> Change motion description on-the-fly (no reset needed) • | |
| <strong>Pause/Resume:</strong> Pause/resume generation (preserves all state) | |
| </div> | |
| <p class="note">💡 First generation requires model loading. Target Motion FPS: 20. Ground trail shows movement path. Use mouse to orbit camera.</p> | |
| </div> | |
| </div> | |
| <!-- Config Modal --> | |
| <div id="configModal" class="modal-overlay" style="display: none;"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2>Config Editor</h2> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="config-section"> | |
| <h3>Schedule Config</h3> | |
| <div id="scheduleConfigFields"></div> | |
| </div> | |
| <div class="config-section"> | |
| <h3>CFG Config</h3> | |
| <div id="cfgConfigFields"></div> | |
| </div> | |
| <div class="config-section"> | |
| <h3>Runtime Parameters</h3> | |
| <div class="config-field"> | |
| <label for="modalHistoryLength">History Length</label> | |
| <input type="number" id="modalHistoryLength" value=""> | |
| </div> | |
| <div class="config-field"> | |
| <label for="modalSmoothingAlpha">Smoothing α</label> | |
| <div class="slider-container"> | |
| <input type="range" id="modalSmoothingAlpha" min="0" max="1" step="0.05" value="0.5"> | |
| <span id="modalSmoothingValue" class="slider-value">0.50</span> | |
| </div> | |
| <span class="param-hint">0.0 = max smoothing, 1.0 = no smoothing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" id="configDiscardBtn">Discard</button> | |
| <button class="btn btn-primary" id="configSaveBtn">Update & Reset</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> | |
| <script src="/static/js/skeleton.js"></script> | |
| <script src="/static/js/main.js"></script> | |
| </body> | |
| </html> | |