Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>EgoInfinity Demo — Phase 1 sample</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <link rel="stylesheet" href="css/styles.css" /> | |
| <style> | |
| body { margin: 0; padding: 24px; font-family: ui-sans-serif, system-ui, sans-serif; background: oklch(0.975 0.008 80); color: oklch(0.18 0.01 60); } | |
| h1 { font-size: 22px; margin: 0 0 6px; } | |
| .sub { font-size: 12px; color: oklch(0.5 0.01 60); margin-bottom: 14px; font-family: ui-monospace, monospace; } | |
| .row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; } | |
| .panel { background: white; border: 1px solid oklch(0.88 0.01 70); border-radius: 8px; padding: 12px; } | |
| .panel h2 { font-size: 12px; margin: 0 0 8px; font-family: ui-monospace, monospace; color: oklch(0.4 0.01 60); text-transform: uppercase; letter-spacing: 0.06em; } | |
| #stage { width: 100%; aspect-ratio: 16/10; background: oklch(0.975 0.008 80); border-radius: 6px; overflow: hidden; position: relative; border: 1px solid oklch(0.88 0.01 70); } | |
| #three-canvas { width: 100%; height: 100%; display: block; } | |
| .gui { | |
| position: absolute; top: 8px; left: 8px; | |
| background: rgba(255,255,255,0.92); | |
| border: 1px solid oklch(0.85 0.01 70); | |
| border-radius: 4px; padding: 8px 10px; | |
| font-family: ui-monospace, monospace; font-size: 11px; | |
| color: oklch(0.25 0.01 60); | |
| backdrop-filter: blur(4px); | |
| user-select: none; | |
| } | |
| .gui label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 0; } | |
| .gui label input { margin: 0; } | |
| .gui .gui-title { font-weight: 600; color: oklch(0.18 0.01 60); margin-bottom: 4px; letter-spacing: 0.04em; text-transform: uppercase; font-size: 9.5px; } | |
| .grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } | |
| .videopane { aspect-ratio: 16/10; background: black; border-radius: 4px; position: relative; overflow: hidden; } | |
| .videopane video, .videopane iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } | |
| .videopane .lab { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; background: rgba(0,0,0,0.6); color: white; font-family: ui-monospace, monospace; font-size: 10px; border-radius: 3px; } | |
| .controls { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-family: ui-monospace, monospace; font-size: 11px; } | |
| .controls input[type=range] { flex: 1; } | |
| .btn { padding: 6px 10px; border: 1px solid oklch(0.6 0.01 60); background: white; cursor: pointer; font-family: ui-monospace, monospace; font-size: 11px; } | |
| pre.meta { font-family: ui-monospace, monospace; font-size: 11px; color: oklch(0.4 0.01 60); white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; } | |
| </style> | |
| <script type="importmap"> | |
| { "imports": { | |
| "three": "https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>EgoInfinity Demo · Phase 1 single-sample preview</h1> | |
| <div class="sub" id="sub">loading…</div> | |
| <div class="row"> | |
| <div class="panel"> | |
| <h2>3D Scene · Three.js</h2> | |
| <div id="stage"> | |
| <canvas id="three-canvas"></canvas> | |
| <div class="gui" id="gui"> | |
| <div class="gui-title">Display</div> | |
| <label><input type="checkbox" id="t-mesh" checked> Hand Mesh</label> | |
| <label><input type="checkbox" id="t-skeleton" checked> Hand Skeleton</label> | |
| <label><input type="checkbox" id="t-joints" checked> Hand Joints</label> | |
| <label><input type="checkbox" id="t-objects" checked> SAM3D Mesh (6DoF)</label> | |
| <label><input type="checkbox" id="t-obb" > Object OBB</label> | |
| </div> | |
| </div> | |
| <div class="controls"> | |
| <button class="btn" id="play">⏯</button> | |
| <input type="range" id="frame" min="0" max="0" step="1" value="0" /> | |
| <span id="frame-label">0 / 0</span> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <h2>Inspect</h2> | |
| <div class="grid4"> | |
| <div class="videopane"> | |
| <iframe id="yt-iframe" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
| <span class="lab">YouTube · exo</span> | |
| </div> | |
| <div class="videopane"> | |
| <video id="annotated-video" muted playsinline preload="metadata" autoplay loop></video> | |
| <span class="lab">depth · moge2</span> | |
| </div> | |
| <div class="videopane"> | |
| <video id="depth-video" muted playsinline preload="metadata" autoplay loop></video> | |
| <span class="lab">depth · moge2</span> | |
| </div> | |
| <div class="videopane"> | |
| <video id="flow-video" muted playsinline preload="metadata" autoplay loop></video> | |
| <span class="lab">flow · memfof</span> | |
| </div> | |
| </div> | |
| <h2 style="margin-top:14px">Scene metadata</h2> | |
| <pre class="meta" id="scene-meta">—</pre> | |
| </div> | |
| </div> | |
| <script type="module" src="js/sample_viewer.js"></script> | |
| </body> | |
| </html> | |