Spaces:
Running
Running
| <html lang="en"><head><meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Gallery — React Force Recovery</title> | |
| <style> | |
| :root{--paper:#0d1526;--ink:#dce7f5;--dim:#7c8db0;--grid:#1a2540; | |
| --force:#ffb347;--target:#ff7847;--ok:#7be0a0;--card:#111b31;--line:#24345;} | |
| *{box-sizing:border-box} | |
| body{margin:0;background:var(--paper);color:var(--ink); | |
| font-family:'IBM Plex Sans','Noto Sans SC',sans-serif;line-height:1.65;font-size:16px; | |
| background-image:linear-gradient(var(--grid) 1px,transparent 1px), | |
| linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px} | |
| .wrap{max-width:880px;margin:0 auto;padding:0 24px 80px} | |
| h1,h2{font-family:'Fraunces','Noto Serif SC',serif} | |
| h1{font-size:2.1rem;font-weight:700;line-height:1.2;margin:0 0 10px} | |
| h2{font-size:1.25rem;font-weight:600;margin:46px 0 8px;color:var(--force)} | |
| .kicker{font-family:'IBM Plex Mono',monospace;font-size:.76rem;letter-spacing:.16em; | |
| text-transform:uppercase;color:var(--force);margin-bottom:14px} | |
| header{padding:60px 0 26px;border-bottom:1px dashed var(--line)} | |
| .sub{color:var(--dim);max-width:720px} | |
| .card{background:var(--card);border:1px solid var(--line);border-radius:10px; | |
| padding:18px 22px;margin:14px 0} | |
| .step{display:grid;grid-template-columns:34px 200px 1fr;gap:12px; | |
| padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline} | |
| .step:last-child{border-bottom:none} | |
| .step .n{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--target)} | |
| .step .t{font-family:'IBM Plex Mono',monospace;font-size:.85rem} | |
| .step .d{color:var(--dim);font-size:.9rem} | |
| table{border-collapse:collapse;width:100%;font-size:.88rem;margin:10px 0; | |
| font-variant-numeric:tabular-nums} | |
| th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right} | |
| th{color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:.72rem; | |
| text-transform:uppercase;letter-spacing:.08em} | |
| td:first-child,th:first-child{text-align:left} | |
| img,video{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line); | |
| display:block;margin:12px auto} | |
| a{color:#4fd8e0}a:hover{color:var(--force)} | |
| .pill{display:inline-block;border:1px solid var(--line);border-radius:999px; | |
| padding:3px 12px;font-size:.75rem;font-family:'IBM Plex Mono',monospace; | |
| color:var(--dim);margin-right:8px;margin-top:12px;text-decoration:none} | |
| code{font-family:'IBM Plex Mono',monospace;background:#0a1120;padding:1px 5px; | |
| border-radius:4px;font-size:.85em} | |
| .ok{color:var(--ok)}.warn{color:#e0b34f} | |
| footer{margin-top:60px;padding-top:18px;border-top:1px dashed var(--line); | |
| color:var(--dim);font-size:.8rem} | |
| @media(max-width:640px){.step{grid-template-columns:28px 1fr;grid-auto-flow:dense} | |
| .step .d{grid-column:2} | |
| h1{font-size:1.45rem} | |
| table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} | |
| th,td{white-space:normal;min-width:110px}} | |
| figure{margin:14px 0} figcaption{color:var(--dim);font-size:.72rem; | |
| font-family:'IBM Plex Mono',monospace;margin-top:2px}</style></head> | |
| <body><div class="wrap"> | |
| <header><div class="kicker">React force recovery · gallery</div> | |
| <h1>Samples: every stage from raw frame to force</h1> | |
| <p>raw → reference → difference image → valid mask → LUT surface | |
| gradient → depth → Open3D mesh → predicted vs ground truth.</p> | |
| <a class="pill" href="method.html">↖ method</a> | |
| <a class="pill" href="index.html">results</a></header> | |
| <h2>20 image samples (cnc_Mini + FEATS, with ground truth)</h2> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_00.png"><figcaption>cnc_00.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_01.png"><figcaption>cnc_01.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_02.png"><figcaption>cnc_02.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_03.png"><figcaption>cnc_03.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_04.png"><figcaption>cnc_04.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_05.png"><figcaption>cnc_05.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_06.png"><figcaption>cnc_06.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_07.png"><figcaption>cnc_07.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_08.png"><figcaption>cnc_08.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_09.png"><figcaption>cnc_09.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_10.png"><figcaption>cnc_10.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_11.png"><figcaption>cnc_11.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_12.png"><figcaption>cnc_12.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/cnc_13.png"><figcaption>cnc_13.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/feats_00.png"><figcaption>feats_00.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/feats_01.png"><figcaption>feats_01.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/feats_02.png"><figcaption>feats_02.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/feats_03.png"><figcaption>feats_03.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/feats_04.png"><figcaption>feats_04.png</figcaption></figure> | |
| <figure><img loading="lazy" src="assets/gallery/feats_05.png"><figcaption>feats_05.png</figcaption></figure> | |
| <h2>10 video samples (React episodes)</h2> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_002_right.mp4"></video><figcaption>clip_motherboard_episode_002_right.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_003_left.mp4"></video><figcaption>clip_motherboard_episode_003_left.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_003_right.mp4"></video><figcaption>clip_motherboard_episode_003_right.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_007_right.mp4"></video><figcaption>clip_motherboard_episode_007_right.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_008_left.mp4"></video><figcaption>clip_motherboard_episode_008_left.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_010_right.mp4"></video><figcaption>clip_motherboard_episode_010_right.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_011_left.mp4"></video><figcaption>clip_motherboard_episode_011_left.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_017_left.mp4"></video><figcaption>clip_motherboard_episode_017_left.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_motherboard_episode_017_right.mp4"></video><figcaption>clip_motherboard_episode_017_right.mp4</figcaption></figure> | |
| <figure><video controls muted loop playsinline preload="none" src="assets/gallery/clip_pushT_episode_001_right.mp4"></video><figcaption>clip_pushT_episode_001_right.mp4</figcaption></figure> | |
| </div></body></html> |