v0.1.0

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.glb filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,10 +1,20 @@
 ---
-title: Procedural Lab
-emoji: 🐨
-colorFrom: yellow
-colorTo: red
+title: ProjectSim Procedural Lab
+emoji: 📦
+colorFrom: gray
+colorTo: yellow
 sdk: static
-pinned: false
+pinned: true
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ProjectSim Procedural Lab
+
+In-browser 3D playground for the Kaedim class datasets — boxes, desks, cages, wardrobes: pick a class tab, pick an item, orbit it,
+and articulate every joint — grab a flap/door/drawer/wheel and drag it, or
+use the sliders (revolute and prismatic, joint chains like wheels on swivel
+casters). Web-optimized GLBs (1K textures) in `assets/<class>/`; the full
+joint metadata in `catalog.json`. three.js from CDN — no build step, no
+backend.
+
+Code mirror: [github.com/Kaedim/robotics-procedural-lab](https://github.com/Kaedim/robotics-procedural-lab) · Code & loaders: [github.com/Kaedim/robotics-sim-ready](https://github.com/Kaedim/robotics-sim-ready)

classes.json

@@ -0,0 +1,22 @@
+[
+ {
+  "class": "boxes",
+  "label": "Boxes",
+  "dataset": "articulated-boxes"
+ },
+ {
+  "class": "desks",
+  "label": "Desks",
+  "dataset": "articulated-desks"
+ },
+ {
+  "class": "cages",
+  "label": "Cages",
+  "dataset": "articulated-logistics-cages"
+ },
+ {
+  "class": "articulated-wardrobes",
+  "label": "Wardrobes",
+  "dataset": "articulated-wardrobes"
+ }
+]

index.html

@@ -1,19 +1,376 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>ProjectSim Procedural Lab</title>
+<style>
+  :root { color-scheme: light; }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 14px/1.5 -apple-system, "Segoe UI", sans-serif;
+         background: #ececef; color: #1c1c1e; height: 100vh; display: flex;
+         flex-direction: column; overflow: hidden; }
+  header { padding: 10px 20px; display: flex; align-items: center; gap: 16px;
+           background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); z-index: 2;
+           flex-wrap: wrap; }
+  header h1 { margin: 0; font-size: 17px; white-space: nowrap; }
+  #tabs { display: flex; gap: 6px; }
+  .tab { padding: 6px 14px; border: 1px solid #ddd; border-radius: 18px;
+         background: #fff; cursor: pointer; font-size: 13px; }
+  .tab.active { background: #1c1c1e; color: #fff; border-color: #1c1c1e; }
+  header .links { margin-left: auto; font-size: 12.5px; }
+  header .links a { margin-left: 14px; text-decoration: none; }
+  main { flex: 1; display: flex; min-height: 0; }
+  #itemlist { width: 172px; overflow-y: auto; padding: 10px; background: #f6f6f8; }
+  .itembtn { display: block; width: 100%; text-align: left; margin-bottom: 6px;
+             padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px;
+             background: #fff; cursor: pointer; font: 12px ui-monospace, monospace; }
+  .itembtn small { display: block; color: #888; font: 11px -apple-system, sans-serif; }
+  .itembtn.active { border-color: #1c1c1e; background: #1c1c1e; color: #fff; }
+  .itembtn.active small { color: #bbb; }
+  #stage { flex: 1; position: relative; min-width: 0; }
+  #stage canvas { display: block; }
+  #hint { position: absolute; left: 12px; bottom: 10px; color: #999;
+          font-size: 11.5px; pointer-events: none; }
+  #panel { width: 274px; padding: 14px; background: #fff; overflow-y: auto;
+           box-shadow: -1px 0 3px rgba(0,0,0,.06); }
+  #panel h2 { margin: 0 0 4px; font-size: 14px; }
+  #panel .meta { color: #666; font-size: 12px; margin-bottom: 10px; }
+  .joint { margin-bottom: 10px; }
+  .joint label { display: flex; justify-content: space-between;
+                 font-size: 12px; color: #444; gap: 6px; }
+  .joint label span:first-child { overflow: hidden; text-overflow: ellipsis;
+                                  white-space: nowrap; }
+  .joint input { width: 100%; accent-color: #1c1c1e; }
+  .row { display: flex; gap: 8px; margin: 12px 0; }
+  .row button { flex: 1; padding: 7px 0; border: 0; border-radius: 7px;
+                background: #1c1c1e; color: #fff; cursor: pointer; }
+  .row button.ghost { background: #e6e6ea; color: #1c1c1e; }
+  #panel pre { background: #16161a; color: #e8e8ea; padding: 9px;
+               border-radius: 6px; font-size: 10px; white-space: pre-wrap;
+               word-break: break-all; max-height: 130px; overflow-y: auto; }
+  #panel .copy { margin-top: 2px; padding: 5px 10px; border: 0; border-radius: 6px;
+                 background: #1c1c1e; color: #fff; cursor: pointer; font-size: 12px; }
+</style>
+</head>
+<body>
+<header>
+  <h1>ProjectSim Procedural Lab</h1>
+  <div id="tabs"></div>
+  <nav class="links">
+    <a id="dslink" href="https://huggingface.co/projectsim">Dataset</a>
+    <a href="https://docs.projectsim.ai">API docs</a>
+    <a href="https://www.projectsim.ai">www.projectsim.ai</a>
+  </nav>
+</header>
+<main>
+  <div id="itemlist"></div>
+  <div id="stage"><div id="hint">grab a part to articulate it · drag background to orbit · scroll zoom</div></div>
+  <aside id="panel">
+    <h2 id="title">loading…</h2>
+    <div class="meta" id="meta"></div>
+    <div class="row">
+      <button id="openall">Open all</button>
+      <button id="closeall" class="ghost">Close</button>
+      <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 — Blender one paste:</div>
+    <pre id="oneliner"></pre>
+    <button class="copy" id="copy">Copy one-liner</button>
+  </aside>
+</main>
+<script type="importmap">
+{ "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
+} }
+</script>
+<script type="module">
+import * as THREE from "three";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+
+// Data comes from the class DATASETS (viewer/ GLBs + catalog). ?base=URL
+// overrides for local testing against a plain directory layout.
+const LOCAL_BASE = new URLSearchParams(location.search).get("base");
+const HFDS = "https://huggingface.co/datasets/projectsim";
+const dsUrl = (ds, path) => LOCAL_BASE
+  ? `${LOCAL_BASE}/${ds}/${path}`
+  : `${HFDS}/${ds}/resolve/main/${path}`;
+const stage = document.getElementById("stage");
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+stage.appendChild(renderer.domElement);
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xececef);
+const camera = new THREE.PerspectiveCamera(40, 1, 0.01, 100);
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.enableDamping = true;
+scene.add(new THREE.HemisphereLight(0xffffff, 0x8a8a92, 1.1));
+const sun = new THREE.DirectionalLight(0xffffff, 1.6);
+sun.position.set(2, 4, 3);
+scene.add(sun);
+scene.add(new THREE.GridHelper(6, 30, 0xbbbbc2, 0xd8d8de));
+
+function resize() {
+  const w = stage.clientWidth, h = stage.clientHeight;
+  renderer.setSize(w, h); camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+}
+addEventListener("resize", resize);
+
+const loader = new GLTFLoader();
+let model = null;
+let rig = [];
+let grabMeshes = [];
+let drag = null;
+let animating = false, tAnim = 0;
+
+function clearModel() {
+  if (model) { scene.remove(model); model = null; }
+  rig = []; grabMeshes = []; drag = null;
+  document.getElementById("joints").innerHTML = "";
+}
+
+function fmtVal(r, v) {
+  return r.unit === "deg" ? `${Math.round(v)}°` : `${(v * 100).toFixed(1)} cm`;
+}
+
+function setJoint(r, v) {
+  v = Math.min(r.hi, Math.max(r.lo, v));
+  r.val = v;
+  if (r.type === "revolute") {
+    r.group.quaternion.setFromAxisAngle(r.axis, THREE.MathUtils.degToRad(v));
+  } else {
+    r.group.position.copy(r.basePos).addScaledVector(r.axis, v);
+  }
+  r.slider.value = v;
+  r.out.textContent = fmtVal(r, v);
+}
+
+// ---- pointer: grab a part, swing (revolute) or pull (prismatic) --------------
+const ray = new THREE.Raycaster();
+const ptr = new THREE.Vector2();
+function ptrRay(e) {
+  const rect = renderer.domElement.getBoundingClientRect();
+  ptr.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
+  ptr.y = -((e.clientY - rect.top) / rect.height) * 2 + 1;
+  ray.setFromCamera(ptr, camera);
+}
+
+renderer.domElement.addEventListener("pointerdown", e => {
+  if (!grabMeshes.length) return;
+  ptrRay(e);
+  const hits = ray.intersectObjects(grabMeshes, false);
+  if (!hits.length) return;
+  const r = hits[0].object.userData.rigEntry;
+  const pWorld = r.group.getWorldPosition(new THREE.Vector3());
+  const aWorld = r.axis.clone()
+    .transformDirection(r.group.parent.matrixWorld).normalize();
+  animating = false;
+  if (r.type === "revolute") {
+    const v0 = hits[0].point.clone().sub(pWorld).projectOnPlane(aWorld);
+    if (v0.lengthSq() < 1e-8) return;
+    drag = { kind: "rev", r, pWorld, aWorld, v0: v0.normalize(),
+             start: r.val || 0 };
+  } else {
+    const n = camera.getWorldDirection(new THREE.Vector3());
+    drag = { kind: "pris", r, aWorld, start: r.val || 0,
+             plane: new THREE.Plane().setFromNormalAndCoplanarPoint(
+               n, hits[0].point),
+             p0: hits[0].point.clone() };
+  }
+  controls.enabled = false;
+  renderer.domElement.setPointerCapture(e.pointerId);
+  renderer.domElement.style.cursor = "grabbing";
+});
+
+renderer.domElement.addEventListener("pointermove", e => {
+  if (!drag) {
+    if (!grabMeshes.length) return;
+    ptrRay(e);
+    renderer.domElement.style.cursor =
+      ray.intersectObjects(grabMeshes, false).length ? "grab" : "";
+    return;
+  }
+  ptrRay(e);
+  const hit = new THREE.Vector3();
+  if (drag.kind === "rev") {
+    const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(
+      drag.aWorld, drag.pWorld);
+    if (!ray.ray.intersectPlane(plane, hit)) return;
+    const v1 = hit.sub(drag.pWorld).projectOnPlane(drag.aWorld);
+    if (v1.lengthSq() < 1e-8) return;
+    v1.normalize();
+    const cross = new THREE.Vector3().crossVectors(drag.v0, v1);
+    const delta = Math.atan2(cross.dot(drag.aWorld), drag.v0.dot(v1));
+    setJoint(drag.r, drag.start + THREE.MathUtils.radToDeg(delta));
+  } else {
+    if (!ray.ray.intersectPlane(drag.plane, hit)) return;
+    const delta = hit.sub(drag.p0).dot(drag.aWorld);
+    setJoint(drag.r, drag.start + delta);
+  }
+});
+
+window.__lab = { camera, ray, ptrRay, scene,
+                 get drag() { return drag; },
+                 get rig() { return rig; },
+                 get grabMeshes() { return grabMeshes; },
+                 setJoint };
+
+addEventListener("pointerup", () => {
+  if (drag) { drag = null; controls.enabled = true;
+              renderer.domElement.style.cursor = ""; }
+});
+
+// ---- load one item -----------------------------------------------------------
+async function loadItem(cls, item) {
+  clearModel();
+  document.getElementById("title").textContent = item.id;
+  const d = item.dims_m;
+  document.getElementById("meta").textContent =
+    `${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 =
+    `blender --python-expr "import bpy,urllib.request,tempfile,os; ` +
+    `p=os.path.join(tempfile.gettempdir(),'kaedim_asset.blend'); ` +
+    `urllib.request.urlretrieve('${HFDS}/${cls.dataset}/resolve/main/` +
+    `${cls.items_dir}/${item.id}/${item.id}.blend',p); ` +
+    `bpy.ops.wm.open_mainfile(filepath=p)"`;
+  const gltf = await loader.loadAsync(dsUrl(cls.dataset, item.glb));
+  model = new THREE.Group();
+  model.rotation.x = -Math.PI / 2;   // assets are Z-up
+  const inner = new THREE.Group();
+  inner.add(gltf.scene);
+  model.add(inner);
+  scene.add(model);
+  const jdiv = document.getElementById("joints");
+  const groupByChild = {};   // link name -> pivot group (for joint chains)
+  for (const j of item.joints) {
+    const nodes = [];
+    gltf.scene.traverse(n => {
+      if (j.meshes.some(m => n.name === m || n.name === m.replaceAll(".", "_")))
+        nodes.push(n);
+    });
+    const parent = groupByChild[j.parent_link] || inner;
+    const group = new THREE.Group();
+    group.position.set(...j.pivot);
+    inner.add(group);
+    if (parent !== inner) parent.attach(group);  // ride the parent joint
+    for (const n of nodes) group.attach(n);
+    groupByChild[j.child_link] = group;
+    const el = document.createElement("div");
+    el.className = "joint";
+    const step = j.unit === "deg" ? 1 : 0.005;
+    el.innerHTML = `<label><span>${j.name}</span><span class="out"></span></label>
+      <input type="range" min="${j.limits[0]}" max="${j.limits[1]}"
+             value="${j.limits[0]}" step="${step}">`;
+    jdiv.appendChild(el);
+    const r = { group, type: j.type, unit: j.unit,
+                axis: new THREE.Vector3(...j.axis).normalize(),
+                basePos: group.position.clone(), val: j.limits[0],
+                lo: j.limits[0], hi: j.limits[1], phase: j.phase || 0,
+                slider: el.querySelector("input"),
+                out: el.querySelector(".out") };
+    r.out.textContent = fmtVal(r, r.val);
+    r.slider.oninput = () => { animating = false;
+                               setJoint(r, parseFloat(r.slider.value)); };
+    for (const n of nodes) {
+      n.traverse(c => {
+        if (c.isMesh) { c.userData.rigEntry = r; grabMeshes.push(c); }
+      });
+    }
+    rig.push(r);
+  }
+  const bb = new THREE.Box3().setFromObject(model);
+  const c = bb.getCenter(new THREE.Vector3());
+  const size = bb.getSize(new THREE.Vector3()).length();
+  camera.position.set(c.x + size * 0.9, c.y + size * 0.6, c.z + size * 1.1);
+  controls.target.copy(c);
+  camera.near = size / 100; camera.far = size * 50;
+  camera.updateProjectionMatrix();
+}
+
+document.getElementById("openall").onclick = () => {
+  animating = false;
+  rig.forEach(r => setJoint(r, r.lo + (r.hi - r.lo) * 0.85));
+};
+document.getElementById("closeall").onclick = () => {
+  animating = false;
+  rig.forEach(r => setJoint(r, r.lo));
+};
+document.getElementById("anim").onclick = () => { animating = !animating; };
+document.getElementById("copy").onclick = async () => {
+  try { await navigator.clipboard.writeText(
+    document.getElementById("oneliner").textContent); } catch (e) {}
+};
+
+const smooth = t => t * t * (3 - 2 * t);
+function tick() {
+  requestAnimationFrame(tick);
+  if (animating && rig.length) {
+    tAnim += 0.008;
+    const cyc = (Math.sin(tAnim) + 1) / 2;
+    const twoPhase = rig.some(r => r.phase === 1);
+    for (const r of rig) {
+      let local = cyc;
+      if (twoPhase) local = r.phase === 0 ? Math.min(1, cyc * 2)
+                                          : Math.max(0, cyc * 2 - 1);
+      setJoint(r, r.lo + (r.hi - r.lo) * 0.85 * smooth(local));
+    }
+  }
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+// ---- catalog / tabs / item list ----------------------------------------------
+fetch("classes.json")
+  .then(r => r.json())
+  .then(classes => Promise.all(classes.map(c =>
+    fetch(dsUrl(c.dataset, "viewer/catalog.json"))
+      .then(r => r.json())
+      .then(v => ({ ...c, items_dir: v.items_dir, items: v.items })))))
+  .then(catalog => {
+  const tabs = document.getElementById("tabs");
+  const list = document.getElementById("itemlist");
+  function selectClass(cls) {
+    document.querySelectorAll(".tab").forEach(t =>
+      t.classList.toggle("active", t.dataset.cls === cls.class));
+    document.getElementById("dslink").href = `${HFDS}/${cls.dataset}`;
+    list.innerHTML = "";
+    cls.items.forEach((item, i) => {
+      const btn = document.createElement("button");
+      btn.className = "itembtn";
+      const d = item.dims_m;
+      btn.innerHTML = `${item.id.replace(/^[a-z_]+_(?=\d)/, "#")}
+        <small>${d[0].toFixed(2)}×${d[1].toFixed(2)}×${d[2].toFixed(2)} m ·
+        ${item.mass_kg.toFixed(1)} kg · ${item.joints.length} j</small>`;
+      btn.onclick = () => {
+        document.querySelectorAll(".itembtn").forEach(x =>
+          x.classList.remove("active"));
+        btn.classList.add("active");
+        loadItem(cls, item);
+      };
+      list.appendChild(btn);
+      if (i === 0) btn.click();
+    });
+  }
+  for (const cls of catalog) {
+    const t = document.createElement("button");
+    t.className = "tab";
+    t.dataset.cls = cls.class;
+    t.textContent = cls.label;
+    t.onclick = () => selectClass(cls);
+    tabs.appendChild(t);
+  }
+  selectClass(catalog[0]);
+  resize();
+  tick();
+});
+</script>
+</body>
 </html>