Take-it-home: engine selector (Isaac/MuJoCo/usdview/Blender) + OS-aware commands, auto-detect, and agent prompt

index.html

@@ -94,6 +94,53 @@
   #panel .copy:hover { background: var(--accent); }
   #panel .copy:active { transform: scale(.95); }
   #panel .copy.ok { background: var(--success); }
+  #panel .envtabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 8px; }
+  #panel .envtab { padding: 4px 11px; border: 1px solid var(--border);
+                   border-radius: 999px; background: var(--surface);
+                   cursor: pointer; font: 500 11.5px var(--sans); color: var(--ink);
+                   transition: background .15s, border-color .15s; }
+  #panel .envtab:hover { border-color: var(--accent); }
+  #panel .envtab.active { background: var(--accent-strong); color: #fff;
+                          border-color: var(--accent-strong); }
+  #panel .envtab.active:hover { background: var(--accent); border-color: var(--accent); }
+  #panel .envtab .soon { opacity: .55; font-size: 8.5px; margin-left: 4px;
+                         text-transform: uppercase; letter-spacing: .05em;
+                         vertical-align: middle; }
+  #panel .hdr { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
+  #panel .hdr h2 { margin: 0; }
+  #panel .fmt { margin-left: auto; font: 500 10px var(--code); color: var(--body); }
+  #panel .prereq { margin: -2px 0 7px; font: 500 10.5px var(--sans);
+                   color: var(--body); }
+  #panel .prereq.na { color: var(--accent-strong); }
+  #panel .envtab.na { opacity: .7; }
+  #panel .envtab .tag { margin-left: 4px; padding: 1px 5px; font-size: 8px;
+                        border-radius: 6px; background: var(--subtle);
+                        color: var(--body); letter-spacing: .04em;
+                        text-transform: uppercase; vertical-align: middle; }
+  #panel .envtab.active .tag { background: rgba(255,255,255,.24); color: #fff; }
+  #panel .modetabs { display: flex; gap: 6px; margin: 11px 0 6px; }
+  #panel .modetab { padding: 5px 13px; border: 1px solid var(--border);
+                    border-radius: 999px; background: var(--surface);
+                    cursor: pointer; font: 600 11.5px var(--sans);
+                    color: var(--ink); transition: background .15s, border-color .15s; }
+  #panel .modetab:hover { border-color: var(--accent); }
+  #panel .modetab.active { background: var(--accent-strong); color: #fff;
+                           border-color: var(--accent-strong); }
+  #panel .modetab.active:hover { background: var(--accent); border-color: var(--accent); }
+  #panel .codewrap { position: relative; }
+  #panel .codewrap pre { margin: 0; padding-right: 36px; }
+  #panel .copybtn { position: absolute; top: 7px; right: 7px; width: 26px;
+                    height: 26px; padding: 0; border: 0; border-radius: 8px;
+                    display: inline-flex; align-items: center; justify-content: center;
+                    cursor: pointer; background: rgba(255,255,255,.10);
+                    color: var(--accent-soft); transition: background .15s, color .15s; }
+  #panel .copybtn:hover { background: rgba(255,255,255,.22); color: #fff; }
+  #panel .copybtn:active { transform: scale(.92); }
+  #panel .copybtn .i-ok { display: none; }
+  #panel .copybtn.ok { color: var(--success); background: rgba(255,255,255,.16); }
+  #panel .copybtn.ok .i-copy { display: none; }
+  #panel .copybtn.ok .i-ok { display: inline; }
+  [hidden] { display: none !important; }
 </style>
 </head>
 <body>
@@ -119,10 +166,26 @@
       <button id="anim" class="ghost">▶ Loop</button>
     </div>
     <div id="joints"></div>
-    <h2 style="margin-top:14px">Take it home</h2>
-    <div class="meta">Same asset, full 4K, real physics:</div>
-    <pre id="oneliner"></pre>
-    <button class="copy" id="copy">Copy commands</button>
+    <div class="hdr"><h2>Take it home</h2><span class="fmt" id="fmt"></span></div>
+    <div class="modetabs" id="modetabs">
+      <button class="modetab active" data-mode="manual">Manual commands</button>
+      <button class="modetab" data-mode="agent">Agent prompt</button>
+    </div>
+    <div class="meta" id="takeMeta"></div>
+    <div class="envtabs" id="envtabs"></div>
+    <div class="prereq" id="submeta"></div>
+    <div class="codewrap">
+      <pre id="output"></pre>
+      <button class="copybtn" id="copy" title="Copy" aria-label="Copy">
+        <svg class="i-copy" viewBox="0 0 24 24" width="14" height="14" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round"
+             stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2"/><path
+             d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/></svg>
+        <svg class="i-ok" viewBox="0 0 24 24" width="15" height="15" fill="none"
+             stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
+             stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+      </button>
+    </div>
   </aside>
 </main>
 <script type="importmap">
@@ -271,6 +334,189 @@ addEventListener("pointerup", () => {
               renderer.domElement.style.cursor = ""; }
 });
 
+// ---- Take-it-home: OS-aware engine selector + agent prompt ------------------
+function detectOS() {
+  const p = ((navigator.userAgentData && navigator.userAgentData.platform) ||
+             navigator.platform || navigator.userAgent || "").toLowerCase();
+  if (p.includes("mac")) return "mac";
+  if (p.includes("win")) return "win";
+  return "linux";
+}
+const OS = detectOS();
+const OS_LABEL = { mac: "macOS", win: "Windows", linux: "Linux" }[OS];
+
+let curCls = null, curItem = null;
+let curEnv = (() => { try { return localStorage.getItem("ps_env"); }
+                      catch (e) { return null; } })();
+let curMode = (() => { try { return localStorage.getItem("ps_mode"); }
+                       catch (e) { return null; } })() || "manual";
+
+// software options for MANUAL mode. "auto" self-detects at run time; os =
+// platforms each runs on natively (used to flag Isaac on macOS).
+const ENVS = [
+  { id: "auto",    label: "Auto-detect",         fmt: "detects engine",
+    os: ["mac", "win", "linux"],
+    prereq: "Runs whichever engine you have installed (detected at run time)." },
+  { id: "isaac",   label: "Isaac Sim",           fmt: "USD",
+    os: ["win", "linux"],
+    prereq: "Isaac Sim — Linux/Windows + an NVIDIA RTX GPU." },
+  { id: "mujoco",  label: "MuJoCo",              fmt: "MJCF",
+    os: ["mac", "win", "linux"],
+    prereq: "pip install mujoco  ·  any OS." },
+  { id: "usd",     label: "usdview / Omniverse", fmt: "USD",
+    os: ["mac", "win", "linux"],
+    prereq: "usdview (pip install usd-core) — Omniverse needs Linux/Win + RTX." },
+  { id: "blender", label: "Blender",             fmt: ".blend",
+    os: ["mac", "win", "linux"],
+    prereq: "Blender — free at blender.org/download." },
+];
+const envById = id => ENVS.find(e => e.id === id);
+const naOn = e => e.id !== "auto" && !e.os.includes(OS);
+if (!envById(curEnv)) curEnv = "auto";   // default: self-detect
+
+const resUrl = (cls, item, file) =>
+  `${HFDS}/${cls.dataset}/resolve/main/${cls.items_dir}/${item.id}/${file}`;
+const classLabel = cls =>
+  cls.dataset.replace(/^articulated-/, "")
+    .replace(/ies$/, "y").replace(/([sxz]|ch|sh)es$/, "$1").replace(/s$/, "");
+
+// the open step, aware of OS (macOS needs mjpython; Blender launcher differs)
+function openCmd(env, id) {
+  if (env === "mujoco")
+    return OS === "mac"
+      ? `mjpython -m mujoco.viewer --mjcf=${id}.xml`   // macOS: mjpython, not python
+      : `python -m mujoco.viewer --mjcf=${id}.xml`;
+  if (env === "blender")
+    return OS === "mac" ? `open -a Blender ${id}.blend` : `blender ${id}.blend`;
+  if (env === "usd")
+    return `usdview ${id}/${id}_scene.usda`;
+  return `"$ISAAC_SIM/python.sh" - <<PY\n` +            // isaac
+    `from isaacsim import SimulationApp\n` +
+    `app = SimulationApp({"open_usd": "$PWD/${id}/${id}_scene.usda"})\n` +
+    `while app.is_running():\n    app.update()\nPY`;
+}
+
+function cmdFor(env, cls, item) {
+  const id = item.id;
+  if (env === "auto") return autoScript(cls, item);
+  const head = `mkdir -p projectsim-assets && cd projectsim-assets\n\n`;
+  const grab = (file) =>
+    `curl --fail --location --progress-bar \\\n` +
+    `  "${resUrl(cls, item, file)}?download=true" \\\n` +
+    `  --output ${file}\n`;
+  const naNote = naOn(envById(env))
+    ? `# ${envById(env).label} doesn't run on ${OS_LABEL} — run this on a\n` +
+      `# Linux/Windows box with an NVIDIA RTX GPU (or a cloud instance).\n\n`
+    : "";
+  if (env === "blender")
+    return naNote + head + grab(`${id}.blend`) + `\n${openCmd(env, id)}`;
+  if (env === "mujoco")
+    return naNote + head + grab(`${id}.xml`) +
+      `\n# self-contained model (colliders + joints + a floor) — press Play\n` +
+      openCmd(env, id);
+  const tail = env === "isaac"
+    ? `\n# open the play-ready scene in Isaac Sim, then press Play\n` +
+      `# (set ISAAC_SIM to your install, e.g. ~/isaacsim)\n${openCmd(env, id)}`
+    : `\n${openCmd(env, id)}`;
+  return naNote + head + grab(`${id}_usd.zip`) + `unzip -o ${id}_usd.zip\n` + tail;
+}
+
+// The browser can't read your disk — so this script does the detection itself,
+// at run time, and launches whichever engine you actually have installed.
+function autoScript(cls, item) {
+  const id = item.id;
+  const u = file => `${resUrl(cls, item, file)}?download=true`;
+  return `# Paste in a macOS/Linux terminal — finds your installed engine.\n` +
+    `mkdir -p projectsim-assets && cd projectsim-assets\n` +
+    `get(){ curl --fail -L --progress-bar "$1" -o "$2"; }\n\n` +
+    `if [ -n "$ISAAC_SIM" ] && [ -x "$ISAAC_SIM/python.sh" ]; then\n` +
+    `  echo "→ Isaac Sim"; get "${u(id + '_usd.zip')}" ${id}_usd.zip; unzip -o ${id}_usd.zip\n` +
+    `  "$ISAAC_SIM/python.sh" - <<PY\n` +
+    `from isaacsim import SimulationApp\n` +
+    `app = SimulationApp({"open_usd": "$PWD/${id}/${id}_scene.usda"})\n` +
+    `while app.is_running(): app.update()\nPY\n` +
+    `elif command -v mjpython >/dev/null 2>&1 || python -c "import mujoco" 2>/dev/null; then\n` +
+    `  echo "→ MuJoCo"; get "${u(id + '.xml')}" ${id}.xml\n` +
+    `  { command -v mjpython >/dev/null 2>&1 && mjpython -m mujoco.viewer --mjcf=${id}.xml; } \\\n` +
+    `    || python -m mujoco.viewer --mjcf=${id}.xml\n` +
+    `elif command -v usdview >/dev/null 2>&1; then\n` +
+    `  echo "→ usdview"; get "${u(id + '_usd.zip')}" ${id}_usd.zip; unzip -o ${id}_usd.zip\n` +
+    `  usdview ${id}/${id}_scene.usda\n` +
+    `elif command -v blender >/dev/null 2>&1 || [ -d /Applications/Blender.app ]; then\n` +
+    `  echo "→ Blender"; get "${u(id + '.blend')}" ${id}.blend\n` +
+    `  { command -v blender >/dev/null 2>&1 && blender ${id}.blend; } || open -a Blender ${id}.blend\n` +
+    `else\n` +
+    `  echo "No engine found — easiest is:  pip install mujoco  (then re-run)."\n` +
+    `fi`;
+}
+
+function agentFor(cls, item) {
+  return `Download the ProjectSim asset "${item.id}" — a sim-ready articulated ` +
+    `${classLabel(cls)} (${item.mass_kg.toFixed(1)} kg, ` +
+    `${item.joints.length} joints) — and open it in whichever simulator is ` +
+    `installed here (Isaac Sim, MuJoCo, usdview, or Blender). Detect what's ` +
+    `available, download the matching file, and open it; if none are installed, ` +
+    "`pip install mujoco` and use that.\n\n" +
+    `A script that does exactly this — run it or adapt it:\n\n` +
+    autoScript(cls, item);
+}
+
+function renderCmd() {
+  if (!curItem) return;
+  const agent = curMode === "agent";
+  const out = document.getElementById("output");
+  const sub = document.getElementById("submeta");
+  document.getElementById("envtabs").hidden = agent;   // software picker: manual only
+  document.getElementById("fmt").hidden = agent;
+  document.getElementById("takeMeta").textContent = agent
+    ? "The agent detects your setup and opens it wherever it can:"
+    : "Same asset, full-res + real physics — pick your engine:";
+  if (agent) {
+    out.textContent = agentFor(curCls, curItem);
+    sub.textContent = "Paste into Claude Code, Cursor, or any coding agent.";
+    sub.classList.remove("na");
+  } else {
+    const e = envById(curEnv), na = naOn(e);
+    document.getElementById("fmt").textContent = e.fmt;
+    out.textContent = cmdFor(curEnv, curCls, curItem);
+    sub.textContent = (na ? `Not on ${OS_LABEL} · ` : "") + e.prereq;
+    sub.classList.toggle("na", na);
+  }
+}
+
+(function initEnvTabs() {
+  const box = document.getElementById("envtabs");
+  ENVS.forEach(e => {
+    const b = document.createElement("button");
+    const na = naOn(e);
+    b.className = "envtab" + (e.id === curEnv ? " active" : "") + (na ? " na" : "");
+    b.dataset.env = e.id;
+    b.innerHTML = e.label + (na ? ` <span class="tag">Linux/Win</span>` : "");
+    b.onclick = () => {
+      curEnv = e.id;
+      try { localStorage.setItem("ps_env", curEnv); } catch (err) {}
+      box.querySelectorAll(".envtab").forEach(x =>
+        x.classList.toggle("active", x.dataset.env === curEnv));
+      renderCmd();
+    };
+    box.appendChild(b);
+  });
+})();
+
+(function initModeTabs() {
+  const box = document.getElementById("modetabs");
+  box.querySelectorAll(".modetab").forEach(b => {
+    b.classList.toggle("active", b.dataset.mode === curMode);
+    b.onclick = () => {
+      curMode = b.dataset.mode;
+      try { localStorage.setItem("ps_mode", curMode); } catch (err) {}
+      box.querySelectorAll(".modetab").forEach(x =>
+        x.classList.toggle("active", x.dataset.mode === curMode));
+      renderCmd();
+    };
+  });
+})();
+
 // ---- load one item -----------------------------------------------------------
 async function loadItem(cls, item) {
   clearModel();
@@ -281,12 +527,8 @@ async function loadItem(cls, item) {
     `${d[0].toFixed(2)} × ${d[1].toFixed(2)} × ${d[2].toFixed(2)} m · ` +
     `${item.mass_kg.toFixed(1)} kg · ${item.tris} tris · ` +
     `${item.joints.length} joints`;
-  document.getElementById("oneliner").textContent =
-    `mkdir -p "$PWD/projectsim-assets"\ncd "$PWD/projectsim-assets"\n\n` +
-    `curl --fail --location --progress-bar \\\n` +
-    `  "${HFDS}/${cls.dataset}/resolve/main/${cls.items_dir}/${item.id}/` +
-    `${item.id}.blend?download=true" \\\n  --output ${item.id}.blend\n\n` +
-    `open -a Blender ${item.id}.blend`;
+  curCls = cls; curItem = item;
+  renderCmd();
   const gltf = await loader.loadAsync(dsUrl(cls.dataset, item.glb));
   if (gen !== loadGen) return;   // user already switched away — drop this load
   model = new THREE.Group();
@@ -351,31 +593,30 @@ document.getElementById("closeall").onclick = () => {
   rig.forEach(r => setJoint(r, r.lo));
 };
 document.getElementById("anim").onclick = () => { animating = !animating; };
-document.getElementById("copy").onclick = async (e) => {
-  const btn = e.currentTarget;
-  const text = document.getElementById("oneliner").textContent;
-  let ok = false;
-  try {
-    await navigator.clipboard.writeText(text);
-    ok = true;
-  } catch (err) {
-    // clipboard API blocked (embedded iframe / permission): legacy fallback
-    const ta = document.createElement("textarea");
-    ta.value = text;
-    ta.style.position = "fixed"; ta.style.opacity = "0";
-    document.body.appendChild(ta);
-    ta.select();
-    try { ok = document.execCommand("copy"); } catch (e2) {}
-    ta.remove();
-  }
-  btn.textContent = ok ? "Copied ✓" : "Copy failed";
-  btn.classList.toggle("ok", ok);
-  clearTimeout(btn._t);
-  btn._t = setTimeout(() => {
-    btn.textContent = "Copy commands";
-    btn.classList.remove("ok");
-  }, 1600);
-};
+(function initCopy() {
+  const btn = document.getElementById("copy");
+  btn.onclick = async () => {
+    const text = document.getElementById("output").textContent;
+    let ok = false;
+    try {
+      await navigator.clipboard.writeText(text);
+      ok = true;
+    } catch (err) {
+      // clipboard API blocked (embedded iframe / permission): legacy fallback
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.style.position = "fixed"; ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      try { ok = document.execCommand("copy"); } catch (e2) {}
+      ta.remove();
+    }
+    btn.classList.toggle("ok", ok);
+    btn.title = ok ? "Copied" : "Copy failed";
+    clearTimeout(btn._t);
+    btn._t = setTimeout(() => { btn.classList.remove("ok"); btn.title = "Copy"; }, 1400);
+  };
+})();
 
 const smooth = t => t * t * (3 - 2 * t);
 function tick() {