Spaces:
Running on Zero
Running on Zero
| """Persistent streaming mesh and skeleton viewer for Gradio 6.28.0.""" | |
| from pathlib import Path | |
| import gradio as gr | |
| HERE = Path(__file__).resolve().parent | |
| HTML = """ | |
| <div class="motion-viewer"> | |
| <div class="viewer-heading"> | |
| <span class="viewer-action">Motion</span> | |
| <span class="viewer-status" role="status">Ready</span> | |
| </div> | |
| <div class="viewer-stage"> | |
| <div class="viewer-focus-hint">Click the view to use WASD</div> | |
| <div class="viewer-body-notice"><span class="viewer-body-status" role="status"></span><button class="viewer-body-retry" type="button" hidden>Retry body loading</button></div> | |
| </div> | |
| <div class="viewer-controls"> | |
| <div class="viewer-key-legend"><span><kbd data-key="KeyW">W</kbd><kbd data-key="KeyS">S</kbd> Camera forward / back</span><span><kbd data-key="KeyA">A</kbd><kbd data-key="KeyD">D</kbd> Left / right</span><span><kbd data-key="Shift">Shift</kbd> Walk → run</span></div> | |
| <div class="viewer-slots" aria-label="Prompt selection"><span data-slot="0">1</span><span data-slot="1">2</span><span data-slot="2">3</span><span data-slot="3">4</span><span class="viewer-slot-label">Prompt 1</span></div> | |
| <span class="viewer-lead">Lead 0.00 s</span> | |
| </div> | |
| <div class="viewer-camera-hint">Drag to orbit · Scroll to zoom · Double-click to reset view</div> | |
| <div class="viewer-path-legend"><span class="path-reached">Reached</span><span class="path-ahead">Ahead</span><span class="path-target">◇ Target</span><span class="path-spring">○ Input</span></div> | |
| <div class="viewer-stats"> | |
| <div><span>Runtime</span><strong data-stat="runtime">0.0 s</strong></div> | |
| <div><span>Generation</span><strong data-stat="generation">— fps</strong></div> | |
| <div><span>Playback</span><strong data-stat="playback">0 fps</strong></div> | |
| <div><span>Buffer</span><strong data-stat="buffer">0.00 s</strong></div> | |
| </div> | |
| </div> | |
| """ | |
| CSS = """ | |
| .motion-viewer { overflow: hidden; border: 1px solid #dce3e8; border-radius: 16px; background: #f8fafb; color: #233340; font-family: inherit; } | |
| .viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; } | |
| .viewer-action { font-size: 16px; font-weight: 600; } | |
| .viewer-status { color: #667782; font-size: 12px; } | |
| .viewer-stage { position: relative; width: 100%; height: clamp(300px, 48vw, 490px); overflow: hidden; } | |
| .viewer-stage canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; } | |
| .viewer-stage canvas:active { cursor: grabbing; } | |
| .viewer-stage:focus-within { box-shadow: inset 0 0 0 2px #397ad5; } | |
| .viewer-focus-hint { position: absolute; bottom: 10px; left: 0; right: 0; z-index: 1; text-align: center; pointer-events: none; font-size: 12px; color: #647582; } | |
| .viewer-stage:focus-within .viewer-focus-hint { opacity: 0; } | |
| .viewer-body-notice { position: absolute; top: 12px; right: 18px; z-index: 1; color: #647582; font-size: 11px; display: flex; align-items: center; gap: 8px; } | |
| .viewer-body-retry { border: 1px solid #ced8df; border-radius: 5px; padding: 4px 7px; background: white; color: #445b6a; cursor: pointer; font: inherit; } | |
| .viewer-body-retry[hidden] { display: none; } | |
| .viewer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 12px 18px 5px; font-size: 12px; } | |
| .viewer-key-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } | |
| .viewer-key-legend > span { white-space: nowrap; } | |
| kbd { display: inline-block; min-width: 22px; margin-right: 3px; padding: 2px 5px; border: 1px solid #ced8df; border-radius: 4px; color: #445b6a; background: white; font: inherit; text-align: center; } | |
| kbd.is-down { color: white; background: #397ad5; border-color: #397ad5; } | |
| kbd[data-key="Shift"].is-down { background: #8b5cdd; border-color: #8b5cdd; } | |
| .viewer-slots { display: flex; align-items: center; gap: 5px; } | |
| .viewer-slots [data-slot] { width: 22px; height: 22px; line-height: 20px; text-align: center; border: 1px solid currentColor; border-radius: 50%; opacity: .6; } | |
| .viewer-slots [data-slot="0"] { color: #397ad5; } | |
| .viewer-slots [data-slot="1"] { color: #8b5cdd; } | |
| .viewer-slots [data-slot="2"] { color: #2d9e72; } | |
| .viewer-slots [data-slot="3"] { color: #d55a9a; } | |
| .viewer-slots [data-slot].is-selected { opacity: 1; border-width: 2px; font-weight: 700; line-height: 18px; } | |
| .viewer-slot-label { margin-left: 4px; } | |
| .viewer-lead { margin-left: auto; color: #667782; font-variant-numeric: tabular-nums; } | |
| .viewer-camera-hint { padding: 4px 18px 8px; color: #667782; font-size: 11px; } | |
| .viewer-path-legend { display: flex; gap: 16px; padding: 4px 18px 12px; color: #667782; font-size: 11px; } | |
| .viewer-path-legend span::before { content: ""; display: inline-block; width: 18px; margin-right: 5px; border-top: 2px solid #397ad5; vertical-align: middle; } | |
| .viewer-path-legend .path-reached::before { opacity: .55; } | |
| .viewer-path-legend .path-ahead::before { border-top-style: dashed; } | |
| .viewer-path-legend .path-target::before, .viewer-path-legend .path-spring::before { display: none; } | |
| .viewer-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #e4eaee; background: #fff; } | |
| .viewer-stats > div { padding: 14px 16px; min-width: 0; } | |
| .viewer-stats span { display: block; font-size: 11px; color: #6c7b86; margin-bottom: 5px; } | |
| .viewer-stats strong { display: block; font-size: 17px; font-weight: 550; font-variant-numeric: tabular-nums; white-space: nowrap; } | |
| @media (max-width: 500px) { .viewer-heading { padding: 14px 14px 0; } .viewer-stats > div { padding: 12px 8px; } .viewer-stats strong { font-size: 14px; } .viewer-stats span { font-size: 10px; } } | |
| """ | |
| def create_viewer(*, require_body_ready: bool = False) -> gr.HTML: | |
| """Return one HTML output; yield native dictionaries to update its value. | |
| Each packet contains session_id, sequence, start_frame, frames [T,22,3], | |
| fps, generated_frames, elapsed_seconds, inference_fps, action and status. | |
| Frames use world XYZ, with Y up. A new session_id resets playback. | |
| mesh_pose contains rotations (base64 float32 LE [T,22,3,3], row-major local | |
| matrices with the world root first), origins (world pelvis [T,3]), and | |
| frame_count=T. The fixed neutral body is loaded once and deformed on each | |
| displayed frame using all skinning weights and the full body pose corrective. | |
| With require_body_ready=True, bind viewer.body_ready to enable Start only | |
| after the browser has loaded the body; loading assets consumes no GPU time. | |
| Optional mesh_topology contains faces (base64 uint16 LE), vertex_count=6890 | |
| and face_count=13776, sent once per session. Optional mesh contains vertices | |
| (base64 float16 LE, C-order [T,6890,3], relative to each supplied root), | |
| origins [T,3] in world XYZ, frame_count=T and vertex_count=6890. Mesh, joints | |
| and frame_meta share start_frame and one playback queue. Canvas fallback | |
| and packets without mesh continue to display the skeleton. | |
| Optional control_points and frame_meta retain backend coordinates unchanged. | |
| With control_points_delta=True, points are merged by frame (up to 2000); | |
| otherwise control_points is a complete replacement. New sessions reset it. | |
| Bind ``viewer.control(fn, inputs=[], outputs=[], queue=False, | |
| trigger_mode="multiple")``; an annotated gr.EventData receives the control | |
| dictionary through ``evt._data``. This event never writes ``value``. | |
| """ | |
| vendor = (HERE / "three.min.js").read_text(encoding="utf-8") | |
| body_script = (HERE / "body.js").read_text(encoding="utf-8") | |
| script = (HERE / "viewer.js").read_text(encoding="utf-8") | |
| body_manifest = HERE / "assets" / "body.json" | |
| body_data = HERE / "assets" / "body.bin" | |
| gr.set_static_paths(paths=[body_manifest, body_data]) | |
| # The local UMD build is loaded once; no CDN or file-serving setup is needed. | |
| js = "if (!globalThis.THREE) {\n" + vendor + "\n}\n" + body_script + "\n" + script | |
| return gr.HTML( | |
| value={"session_id": "", "sequence": -1, "frames": [], "status": "idle"}, | |
| html_template=HTML, | |
| css_template=CSS, | |
| js_on_load=js, | |
| apply_default_css=False, | |
| container=False, | |
| padding=False, | |
| elem_id="live-motion-viewer", | |
| body_manifest_url="/gradio_api/file=" + body_manifest.resolve().as_posix(), | |
| body_data_url="/gradio_api/file=" + body_data.resolve().as_posix(), | |
| require_body_ready=require_body_ready, | |
| ) | |