Spaces:
Running on T4
Running on T4
File size: 7,293 Bytes
a4f8eb3 b2734f9 a4f8eb3 b2734f9 7fe2985 c8826ac a30e265 b2734f9 a4f8eb3 | 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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | <!DOCTYPE html>
<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>
|