Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Real2Sim Explorer</title> | |
| <meta name="description" content="Explore Real2Sim pipelines for robotics and Physical AI."> | |
| <style> | |
| :root{--bg:#061019;--panel:#0b1722;--line:#1f3448;--text:#eef8ff;--muted:#9db4c8;--accent:#77b8ff} | |
| *{box-sizing:border-box} | |
| body{margin:0;background:radial-gradient(circle at 16% -8%,rgba(49,130,255,.18),transparent 32%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif} | |
| .wrap{max-width:1500px;margin:auto;padding:28px}.hero,.panel{border:1px solid var(--line);border-radius:22px;background:rgba(11,23,34,.96)} | |
| .hero{padding:34px;background:linear-gradient(145deg,#10253a,#061019)}.panel{padding:24px} | |
| .kicker{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:#b7cede} | |
| h1{font-size:clamp(2.2rem,5vw,4.7rem);line-height:1;margin:.25em 0}h2,h3{margin-top:0}p{color:var(--muted);line-height:1.65} | |
| .flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.node,.badge{border:1px solid #31516c;background:#0a1a27;border-radius:999px;padding:7px 10px;font-size:.8rem}.arr{color:#7294ae} | |
| .grid{display:grid;gap:18px;margin-top:18px}.controls{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:14px} | |
| input,select{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:#07131d;color:var(--text)} | |
| .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card,.box{border:1px solid var(--line);border-radius:16px;background:#08141f;padding:15px} | |
| .card{cursor:pointer}.card:hover,.active{border-color:#4f82a9;background:#0d1e2d}.small{font-size:.87rem;color:var(--muted)} | |
| .detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:14px}.note{border-left:3px solid var(--accent);background:#091b2a;border-radius:10px;padding:13px 15px;color:#c2d5e4} | |
| .cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.footer{text-align:center;color:#8299ad;padding:28px}.footer a{color:#abd5ff} | |
| @media(max-width:1000px){.detail,.cases{grid-template-columns:1fr}.cards{grid-template-columns:1fr}} | |
| @media(max-width:620px){.wrap{padding:14px}.hero,.panel{padding:18px}.controls{grid-template-columns:1fr}} | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <section class="hero"> | |
| <div class="kicker">WORLD COMPILER · REAL2SIM EXPLORER</div> | |
| <h1>Real2Sim Explorer</h1> | |
| <p>Explore how physical environments become simulation-ready worlds for robotics, synthetic data and Physical AI.</p> | |
| <div class="flow"> | |
| <span class="node">Reality</span><span class="arr">→</span> | |
| <span class="node">Reconstruct</span><span class="arr">→</span> | |
| <span class="node">Structure</span><span class="arr">→</span> | |
| <span class="node">Physics</span><span class="arr">→</span> | |
| <span class="node">Simulate</span><span class="arr">→</span> | |
| <span class="node">Validate</span> | |
| </div> | |
| </section> | |
| <div class="grid"> | |
| <section class="panel"> | |
| <h2>Real2Sim Pipeline</h2> | |
| <div class="controls"> | |
| <input id="q" placeholder="Search geometry, physics, synthetic data, validation…" /> | |
| <select id="stage"><option value="">All stages</option></select> | |
| </div> | |
| <div id="cards" class="cards"></div> | |
| </section> | |
| <section class="panel"> | |
| <div class="detail"> | |
| <div class="box"> | |
| <span id="stageBadge" class="badge"></span> | |
| <h2 id="title"></h2> | |
| <p id="purpose"></p> | |
| <h3>Inputs</h3><div id="inputs"></div> | |
| <h3 style="margin-top:14px">Outputs</h3><div id="outputs"></div> | |
| </div> | |
| <div class="box"> | |
| <h3>Methods</h3><div id="methods"></div> | |
| <div class="note" style="margin-top:16px"><strong>Main failure risk</strong><br><span id="risk"></span></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="panel"> | |
| <h2>Use Cases</h2> | |
| <div id="cases" class="cases"></div> | |
| </section> | |
| </div> | |
| <div class="footer">World Compiler · Cooperation: <a href="mailto:agenten@magenta.de">agenten@magenta.de</a></div> | |
| </div> | |
| <script> | |
| const DATA=[{"name": "Scene Capture", "stage": "01", "purpose": "Acquire the real environment with enough visual, geometric and temporal coverage.", "inputs": ["RGB", "Depth", "LiDAR", "Pose", "Video"], "outputs": ["Raw scene observations"], "methods": ["Multi-view capture", "Robot-mounted sensors", "Static rigs", "Mobile scanning"], "risk": "Insufficient viewpoints or missing geometry create incomplete simulation assets."}, {"name": "Geometry Reconstruction", "stage": "02", "purpose": "Recover spatial structure from real observations.", "inputs": ["Images", "Depth", "Point clouds", "Camera poses"], "outputs": ["Mesh", "Point cloud", "NeRF-like field", "Gaussian representation"], "methods": ["SfM", "SLAM", "Depth fusion", "Photogrammetry", "Gaussian splatting"], "risk": "Visual fidelity does not guarantee physically correct geometry."}, {"name": "Object Decomposition", "stage": "03", "purpose": "Separate the reconstructed environment into persistent entities and surfaces.", "inputs": ["Scene geometry", "Images", "Detections"], "outputs": ["Objects", "Surfaces", "Agent tracks", "Persistent IDs"], "methods": ["Segmentation", "Tracking", "Instance extraction", "Scene graphs"], "risk": "Merged or fragmented objects make interaction and physics assignment unreliable."}, {"name": "Semantic Enrichment", "stage": "04", "purpose": "Attach meaning, relations and task-relevant attributes to reconstructed entities.", "inputs": ["Objects", "Language", "Task context"], "outputs": ["Labels", "Relations", "Affordances", "Task semantics"], "methods": ["Semantic mapping", "Relation extraction", "Affordance labeling"], "risk": "Incorrect semantics can corrupt planning even when geometry is accurate."}, {"name": "Physical Property Assignment", "stage": "05", "purpose": "Add physical properties needed for interaction and control.", "inputs": ["Objects", "Materials", "Observed motion"], "outputs": ["Mass", "Friction", "Collision shape", "Joint constraints"], "methods": ["System identification", "Material estimation", "Manual priors", "Learned estimation"], "risk": "Wrong physical parameters produce a simulator that looks right but behaves wrong."}, {"name": "Dynamics Identification", "stage": "06", "purpose": "Estimate how the real environment responds to actions.", "inputs": ["State-action-state transitions", "Trajectories", "Contact events"], "outputs": ["Dynamics parameters", "Transition models"], "methods": ["System identification", "Trajectory fitting", "Contact estimation", "Learned dynamics"], "risk": "Sparse interaction data can make inferred dynamics brittle."}, {"name": "Simulation Conversion", "stage": "07", "purpose": "Convert the reconstructed world into an executable simulation representation.", "inputs": ["Geometry", "Semantics", "Physics", "Dynamics"], "outputs": ["Simulation scene", "Assets", "World configuration"], "methods": ["Scene export", "Asset conversion", "Collision generation", "Coordinate normalization"], "risk": "Format conversion can silently change scale, orientation or material behavior."}, {"name": "Domain Randomization", "stage": "08", "purpose": "Generate controlled variation around the reconstructed world.", "inputs": ["Simulation-ready scene"], "outputs": ["Scene variants", "Sensor variants", "Dynamics variants"], "methods": ["Lighting randomization", "Texture variation", "Object placement", "Physics randomization"], "risk": "Unrealistic variation can teach the wrong invariances."}, {"name": "Synthetic Data Generation", "stage": "09", "purpose": "Produce labeled trajectories and observations from the compiled simulation.", "inputs": ["Simulation", "Policies", "Scenario generator"], "outputs": ["Synthetic episodes", "Ground-truth labels", "Counterfactual data"], "methods": ["Procedural generation", "Policy rollouts", "Scenario replay", "Rare-event generation"], "risk": "Synthetic scale does not compensate for a large reality gap."}, {"name": "Reality-Gap Validation", "stage": "10", "purpose": "Measure whether the simulated world is useful for real-world learning and control.", "inputs": ["Real trajectories", "Sim trajectories", "Policy outcomes"], "outputs": ["Gap metrics", "Calibration targets", "Transfer results"], "methods": ["Trajectory comparison", "Task success", "Sim2Real tests", "Sensor consistency"], "risk": "A simulator can score well visually while failing downstream transfer."}],CASES=[{"name": "Robot Manipulation", "real": "Robot demonstrations in a real workspace", "compiled": "Interactive manipulation scene with objects, contacts and actions", "downstream": "Policy training, world models, task rehearsal"}, {"name": "Humanoid Learning", "real": "Human-scale environments and demonstrations", "compiled": "Structured scenes with body motion, object interaction and task context", "downstream": "Embodied learning and humanoid control"}, {"name": "Autonomous Driving", "real": "Multi-sensor driving logs", "compiled": "Replayable traffic scenes with actors and dynamics", "downstream": "Scenario testing, prediction and planning"}, {"name": "Industrial Automation", "real": "Factory cells and machine interactions", "compiled": "Simulation-ready workcells and process states", "downstream": "Robot planning, safety testing and optimization"}, {"name": "Synthetic Edge Cases", "real": "Rare or expensive real-world events", "compiled": "Parameterized scenario families", "downstream": "Stress testing and robust policy training"}, {"name": "World Model Training", "real": "Captured physical trajectories", "compiled": "Large action-conditioned simulated experience", "downstream": "Prediction, rollouts and model-based control"}],$=id=>document.getElementById(id);let selected=DATA[0].name; | |
| const esc=s=>String(s??"").replace(/[&<>"']/g,c=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[c])); | |
| const badges=a=>a.map(x=>`<span class="badge">${esc(x)}</span>`).join(" "); | |
| function show(x){ | |
| selected=x.name;$("stageBadge").textContent="Stage "+x.stage;$("title").textContent=x.name;$("purpose").textContent=x.purpose; | |
| $("inputs").innerHTML=badges(x.inputs);$("outputs").innerHTML=badges(x.outputs);$("methods").innerHTML=badges(x.methods);$("risk").textContent=x.risk; | |
| document.querySelectorAll(".card").forEach(c=>c.classList.toggle("active",c.dataset.name===selected)); | |
| } | |
| function render(){ | |
| const q=$("q").value.toLowerCase(),st=$("stage").value; | |
| const f=DATA.filter(x=>(!q||JSON.stringify(x).toLowerCase().includes(q))&&(!st||x.stage===st)); | |
| $("cards").innerHTML=f.map(x=>`<div class="card ${x.name===selected?"active":""}" data-name="${esc(x.name)}"><span class="badge">Stage ${esc(x.stage)}</span><h3>${esc(x.name)}</h3><div class="small">${esc(x.purpose)}</div></div>`).join(""); | |
| document.querySelectorAll(".card").forEach(c=>c.onclick=()=>show(DATA.find(x=>x.name===c.dataset.name))); | |
| if(f.length&&!f.some(x=>x.name===selected))show(f[0]); | |
| } | |
| DATA.forEach(x=>{let o=document.createElement("option");o.value=x.stage;o.textContent=`Stage ${x.stage} · ${x.name}`;$("stage").appendChild(o)}); | |
| $("q").oninput=render;$("stage").onchange=render; | |
| $("cases").innerHTML=CASES.map(c=>`<div class="box"><h3>${esc(c.name)}</h3><p class="small"><strong>Real:</strong> ${esc(c.real)}</p><p class="small"><strong>Compiled:</strong> ${esc(c.compiled)}</p><p class="small"><strong>Use:</strong> ${esc(c.downstream)}</p></div>`).join(""); | |
| render();show(DATA[0]); | |
| </script> | |
| </body> | |
| </html> | |