studio / index.html
qphysicl's picture
Studio-only showcase: remove open-dataset frames and section
a2f7314 verified
Raw History Blame Contribute Delete
17.2 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Physicl Studio</title>
<meta name="description" content="Generate the footage your model is missing. Physicl Studio varies real 3D scenes thousands of ways and writes exact ground truth onto every frame.">
<link rel="stylesheet" href="fonts.css">
<style>
:root{--bg:#F4F2EE;--card:#FFFFFF;--ink:#1C1917;--mut:#78716C;--soft:#57534E;--line:#E2DED8;--dark:#141210}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:Aspekta,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
.mono{font-family:'Geist Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
nav{position:sticky;top:0;z-index:20;background:rgba(244,242,238,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.lock{display:flex;align-items:center;gap:10px;text-decoration:none}
.lock svg{height:22px;width:auto;color:var(--ink)}
.lock span{font-size:21px;font-weight:400;letter-spacing:-.02em}
.navlinks{display:flex;gap:22px;align-items:center;font-size:15px}
.navlinks a{text-decoration:none;color:var(--soft)}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff!important;text-decoration:none;border-radius:999px;padding:11px 20px;font-size:15px;font-weight:500;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink)!important;border:1px solid #CFCAC3}
.btn:hover{opacity:.9}
header{padding:72px 0 28px}
.eyebrow{color:var(--mut);margin-bottom:18px}
h1{font-size:clamp(40px,6.4vw,84px);line-height:1;font-weight:500;letter-spacing:-.04em;max-width:900px}
.lede{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--soft);max-width:720px;margin-top:22px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.media{border-radius:18px;overflow:hidden;background:#E7E3DD;box-shadow:0 30px 60px -40px rgba(28,25,23,.45)}
.media video,.media img{display:block;width:100%;height:auto}
.cap{font-size:14px;color:var(--mut);margin-top:12px}
section{padding:84px 0 0}
h2{font-size:clamp(30px,4vw,48px);line-height:1.05;font-weight:500;letter-spacing:-.035em;max-width:760px}
.sub{font-size:18px;color:var(--soft);max-width:680px;margin-top:14px}
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;margin-top:34px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.req{display:flex;gap:12px;align-items:flex-start}
.req .dot{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.req p{font-size:19px;line-height:1.45}
.stats{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:12px}
.stat b{display:block;font-size:26px;font-weight:500;letter-spacing:-.03em}
.stat span{font-size:14px;color:var(--mut)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.step .n{color:var(--mut)}
.step h3{font-size:17px;font-weight:500;margin-top:8px}
.step p{font-size:14px;color:var(--soft);margin-top:6px}
.explorer{margin-top:34px}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:14px}
.tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{border:1px solid #CFCAC3;background:transparent;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;color:var(--soft)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cmp{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#ddd;user-select:none;touch-action:none;cursor:ew-resize;box-shadow:0 30px 60px -40px rgba(28,25,23,.45)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp .top{clip-path:inset(0 0 0 50%)}
.cmp .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cmp .handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;color:var(--ink)}
.chip{position:absolute;bottom:14px;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px}
.chip.l{left:14px}.chip.r{right:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:15px}
td{padding:12px 0;border-top:1px solid var(--line);vertical-align:top}
td:first-child{width:38%;color:var(--mut);padding-right:16px}
.lib{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.fix video,.fix img{aspect-ratio:16/9;object-fit:cover}
.nums{display:flex;gap:40px;flex-wrap:wrap;margin-top:26px}
.nums b{display:block;font-size:44px;font-weight:500;letter-spacing:-.04em;line-height:1}
.nums span{color:var(--mut);font-size:14px}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px}
.ds{text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block}
.ds img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.ds div{padding:10px 12px 12px;font-size:13px;line-height:1.35}
.ds span{display:block;color:var(--mut);margin-top:4px;font-size:12px}
.ds:hover{border-color:#bdb7ae}
.end{margin:96px 0 0;background:var(--dark);color:#fff;border-radius:22px;padding:56px 40px;text-align:center}
.end h2{margin:0 auto;color:#fff}
.end p{color:#C9C3BB;margin:14px auto 0;max-width:560px;font-size:18px}
.end .ctas{justify-content:center}
.end .btn{background:#fff;color:var(--ink)!important}
.end .btn.ghost{background:transparent;color:#fff!important;border-color:#57534E}
footer{padding:36px 0 48px;color:var(--mut);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{text-decoration:none;margin-left:18px}
@media (max-width:900px){.split,.two,.lib{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.grid{grid-template-columns:repeat(2,1fr)}.navlinks a:not(.btn){display:none}header{padding-top:44px}}
</style>
</head>
<body>
<nav><div class="wrap">
<a class="lock" href="https://physicl.ai/?utm_source=huggingface&utm_medium=space&utm_campaign=launch" target="_blank" rel="noopener"><svg role="img" aria-label="Physicl" viewBox="0 0 770 164" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M160 128H96V5.45508C96 5.2201 95.6651 5.17773 95.6064 5.40527L64 128H0L33 0H160V128Z" fill="currentColor"/>
<path d="M455.302 105.353L476.802 35.6523H502.743L465.43 137.617C462.35 146.293 458.44 152.829 453.702 157.227C449.082 161.742 442.449 164 433.802 164H411.769V144.392H426.694C431.195 144.392 434.275 143.619 435.934 142.074C437.71 140.648 439.369 137.677 440.909 133.161L442.33 129.417L407.326 35.6523H433.446L455.302 105.353Z" fill="currentColor"/>
<path d="M543.7 33.5127C556.967 33.5127 567.096 36.365 574.085 42.0693C581.074 47.6548 584.687 55.3795 584.924 65.2432H562.535C562.298 55.3796 556.02 50.4482 543.7 50.4482C539.081 50.4483 535.29 51.3396 532.329 53.1221C529.486 54.9047 528.064 57.3408 528.064 60.4307C528.064 62.6883 528.657 64.5301 529.841 65.9561C531.144 67.2632 533.335 68.452 536.415 69.5215C539.613 70.4722 544.293 71.4233 550.453 72.374C559.811 73.9189 567.155 75.9989 572.485 78.6133C577.934 81.1089 581.725 84.2578 583.857 88.0605C586.108 91.7445 587.233 96.2607 587.233 101.608C587.233 110.759 583.383 117.89 575.684 123C568.102 127.991 558.034 130.487 545.478 130.487C518.114 130.487 503.781 119.613 502.478 97.8652H525.932C526.524 103.57 528.479 107.61 531.796 109.987C535.231 112.364 540.088 113.552 546.366 113.552C551.46 113.552 555.546 112.66 558.626 110.878C561.706 108.976 563.246 106.422 563.246 103.213C563.246 100.955 562.713 99.1724 561.646 97.8652C560.699 96.5581 558.745 95.3693 555.783 94.2998C552.822 93.2303 548.202 92.1613 541.924 91.0918C527.946 88.715 518.173 85.209 512.605 80.5742C507.157 75.9395 504.432 69.6408 504.432 61.6787C504.432 52.8846 507.926 45.9913 514.915 41C522.022 36.0088 531.618 33.5127 543.7 33.5127Z" fill="currentColor"/>
<path d="M673.763 33.5127C686.319 33.5128 696.328 36.7215 703.791 43.1387C711.372 49.556 715.874 58.2318 717.296 69.165H693.13C692.182 64.2927 689.991 60.4901 686.556 57.7568C683.12 54.9047 678.856 53.4786 673.763 53.4785C666.655 53.4785 661.265 56.0334 657.593 61.1436C654.039 66.2537 652.263 73.2059 652.263 82C652.263 90.7941 654.039 97.7463 657.593 102.856C661.265 107.967 666.655 110.521 673.763 110.521C679.093 110.521 683.417 109.036 686.733 106.065C690.05 103.095 692.182 98.8756 693.13 93.4092H717.296C715.874 104.58 711.372 113.552 703.791 120.326C696.21 127.1 686.2 130.487 673.763 130.487C664.286 130.487 656.053 128.407 649.064 124.248C642.194 119.97 636.922 114.205 633.25 106.956C629.578 99.588 627.742 91.2694 627.742 82C627.742 72.7304 629.578 64.471 633.25 57.2217C636.922 49.8536 642.194 44.0901 649.064 39.9307C656.053 35.6525 664.286 33.5127 673.763 33.5127Z" fill="currentColor"/>
<path d="M749.211 101.431C749.211 104.402 749.862 106.6 751.165 108.026C752.468 109.334 754.719 109.987 757.917 109.987H770V128H746.389C740.5 128 735.222 125.733 731.798 123.179C727.297 119.613 725.046 113.195 725.046 103.926V0H749.211V101.431Z" fill="currentColor"/>
<path d="M618.274 128H594.109V35.6523H618.274V128Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M262.55 0C272.737 3.44873e-05 281.384 1.84242 288.491 5.52637C295.599 9.09152 300.93 14.0229 304.483 20.3213C308.156 26.6198 309.991 33.8104 309.991 41.8916C309.991 49.9725 308.155 57.2214 304.483 63.6387C300.93 69.9372 295.599 74.9292 288.491 78.6133C281.384 82.1783 272.737 83.9609 262.55 83.9609H233.942V128H208V0H262.55ZM233.942 61.5H261.128C268.709 61.5 274.395 59.8362 278.186 56.5088C281.976 53.0625 283.872 48.19 283.872 41.8916C283.872 35.593 281.976 30.7797 278.186 27.4521C274.395 24.1247 268.709 22.4609 261.128 22.4609H233.942V61.5Z" fill="currentColor"/>
<path d="M343.234 47.5957C350.579 38.2074 360.115 33.5127 371.842 33.5127C382.266 33.5128 390.321 36.7812 396.007 43.3174C401.811 49.8536 404.714 58.9454 404.714 70.5918V128H380.548V73.4434C380.548 67.6202 379.185 63.0453 376.461 59.7178C373.855 56.2714 369.591 54.5479 363.668 54.5479C358.456 54.5479 353.777 56.3902 349.631 60.0742C345.485 63.7583 343.412 69.5817 343.412 77.5439H343.234V128H319.069V0H343.234V47.5957Z" fill="currentColor"/>
<path d="M618.274 21.5693H594.109V0H618.274V21.5693Z" fill="currentColor"/>
</svg><span>Studio</span></a>
<div class="navlinks"><a href="#run">How it works</a><a href="#layers">Layers</a><a href="#library">Library</a><a class="btn" href="https://physicl.ai/studio?utm_source=huggingface&utm_medium=space&utm_campaign=launch" target="_blank" rel="noopener">Request access</a></div>
</div></nav>
<header><div class="wrap">
<div class="eyebrow mono">Physicl Studio · Private beta</div>
<h1>Generate the footage your model is missing.</h1>
<p class="lede">Describe the situation your model gets wrong. Studio builds it from 10,000+ environments and 100,000+ assets, varies it thousands of ways, and writes exact ground truth onto every frame.</p>
<div class="ctas"><a class="btn" href="https://physicl.ai/studio?utm_source=huggingface&utm_medium=space&utm_campaign=launch" target="_blank" rel="noopener">Request access →</a><a class="btn ghost" href="#run">See how it works</a></div>
</div></header>
<section style="padding-top:20px"><div class="wrap">
<div class="split">
<div>
<div class="media"><video src="assets/living-room-variations.mp4" poster="assets/living-room-variations.jpg" autoplay muted loop playsinline></video></div>
<p class="cap">One living room, sixteen variations, one camera path. Rendered by Studio.</p>
</div>
<div class="card">
<div class="mono" style="color:var(--mut);margin-bottom:14px">Example request</div>
<div class="req"><div class="dot">You</div><p>My robot misses small objects on the floor when the sun hits the living room.</p></div>
<div class="stats">
<div class="stat"><b>76 to 86</b><span>objects placed on the floor and furniture in each variation</span></div>
<div class="stat"><b>1,289</b><span>objects placed across 16 variations. 311 more refused, each with a reason: nothing to rest on, or blocking the walkway</span></div>
<div class="stat"><b>0 collisions</b><span>every navigation point still reachable</span></div>
<div class="stat"><b>3 times of day</b><span>12 furniture swaps per variation, one shared camera path</span></div>
</div>
</div>
</div>
</div></section>
<section id="run"><div class="wrap">
<h2>From one sentence to a dataset.</h2>
<p class="sub">You write the request the way you would brief a colleague. Studio does the 3D work, and nothing renders until you approve it.</p>
<div class="media" style="margin-top:30px"><video src="assets/walkthrough.mp4" poster="assets/walkthrough.jpg" autoplay muted loop playsinline></video></div>
<div class="steps">
<div class="step"><div class="n mono">01</div><h3>Describe the scene</h3><p>A warehouse aisle, a nursery, a kitchen at sunset. Studio finds it in the library.</p></div>
<div class="step"><div class="n mono">02</div><h3>Choose what varies</h3><p>Clutter, layout, light, camera. Whatever you leave out is held still.</p></div>
<div class="step"><div class="n mono">03</div><h3>Pick the layers</h3><p>Depth, normals, segmentation, boxes and camera pose, written onto every frame.</p></div>
<div class="step"><div class="n mono">04</div><h3>Render</h3><p>Preview the variants, then send the final batch to the render farm.</p></div>
</div>
</div></section>
<section id="layers"><div class="wrap">
<h2>Every layer, from the same render.</h2>
<p class="sub">Depth, normals and segmentation are written by the renderer from the 3D scene, not estimated from the picture, so they stay exact in low light, in hard sun and behind clutter.</p>
<div class="two">
<div><div class="media fix"><video src="assets/nursery-layers.mp4" poster="assets/nursery-layers.jpg" autoplay muted loop playsinline></video></div><p class="cap">A nursery, then the same frames with boxes and classes, instances, normals and depth.</p></div>
<div><div class="media fix"><video src="assets/warehouse-layers.mp4" poster="assets/warehouse-layers.jpg" autoplay muted loop playsinline></video></div><p class="cap">A warehouse aisle filmed at robot height, wiped through its layers.</p></div>
</div>
<div class="card" style="margin-top:22px">
<div class="mono" style="color:var(--mut)">On every frame</div>
<table>
<tr><td>Image or video</td><td>RGB render, up to 1920 × 1080</td></tr>
<tr><td>Geometry</td><td>Depth in metres and surface normals</td></tr>
<tr><td>Objects</td><td>Instance and class segmentation, 2D boxes with class and instance ID</td></tr>
<tr><td>Camera</td><td>Pose for every frame</td></tr>
<tr><td>Scene</td><td>Light, layout, object list and a record of every axis that changed</td></tr>
</table>
</div>
</div></section>
<section id="library"><div class="wrap">
<h2>A library that grows every day.</h2>
<p class="sub">Homes, warehouses, hospitals, shops, labs and offices, built from real 3D geometry with known materials. Every Studio user works with all of it.</p>
<div class="nums"><div><b>10,000+</b><span>environments</span></div><div><b>100,000+</b><span>assets</span></div></div>
<div class="lib">
<div class="media fix"><video src="assets/library.mp4" poster="assets/library.jpg" autoplay muted loop playsinline></video></div>
<div class="media fix"><img src="assets/library-wall.jpg" alt="A wall of scenes from the Physicl library"></div>
</div>
</div></section>
<div class="wrap">
<div class="end">
<h2>Bring the situation your model gets wrong.</h2>
<p>Studio is free for research teams during the beta.</p>
<div class="ctas"><a class="btn" href="https://physicl.ai/studio?utm_source=huggingface&utm_medium=space&utm_campaign=launch" target="_blank" rel="noopener">Request access →</a><a class="btn ghost" href="https://physicl.ai/?utm_source=huggingface&utm_medium=space&utm_campaign=launch" target="_blank" rel="noopener">physicl.ai</a></div>
</div>
<footer><span>Physicl · Paris and San Francisco</span><span><a href="https://huggingface.co/physicl" target="_blank" rel="noopener">Hugging Face</a><a href="https://www.linkedin.com/company/physicl" target="_blank" rel="noopener">LinkedIn</a><a href="https://x.com/PhysiclAI" target="_blank" rel="noopener">X</a></span></footer>
</div>
</body>
</html>