Spaces:

hvoss-techfak
/

JAX-IK

Running on CPU Upgrade

File size: 42,021 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JAX-IK Three.js IK Demo</title>
<style>
  body { margin:0; font-family:Arial, sans-serif; background:#1e1e1e; color:#ddd; }
  header { padding:10px 16px; background:#111; border-bottom:1px solid #333; }
  h1 { margin:0; font-size:18px; }
  #tabs { display:flex; background:#222; }
  .tab-btn { padding:10px 16px; cursor:pointer; border:none; background:#222; color:#ccc; font-size:13px; }
  .tab-btn.active { background:#333; color:#fff; }
  #content { display:flex; height:calc(100vh - 82px); }
  #viewerPane { flex: 1 1 auto; position:relative; }
  #uiPane { width:360px; overflow-y:auto; background:#181818; border-left:1px solid #333; padding:10px 12px; box-sizing:border-box; }
  fieldset { border:1px solid #444; margin:8px 0 14px 0; padding:8px 10px; }
  legend { padding:0 6px; font-size:12px; color:#9ad; }
  label { display:block; font-size:12px; margin:4px 0; }
  input[type=number], select { width:100%; box-sizing:border-box; background:#222; border:1px solid #444; color:#ddd; padding:4px; }
  input[type=text] { width:100%; box-sizing:border-box; background:#222; border:1px solid #444; color:#ddd; padding:4px; }
  button.primary { background:#2d6be3; color:#fff; border:none; padding:8px 12px; cursor:pointer; font-size:12px; border-radius:3px; }
  button.secondary { background:#444; color:#eee; border:none; padding:6px 10px; cursor:pointer; font-size:12px; border-radius:3px; margin-left:4px; }
  .flex-row { display:flex; gap:6px; }
  .inline { display:inline-block; }
  #statusBar { font-size:11px; background:#111; padding:6px 10px; border-top:1px solid #333; position:fixed; bottom:0; left:0; right:0; color:#aaa; }
  .bone-grid { columns:2 140px; column-gap:12px; }
  .bone-grid label { break-inside:avoid; }
  .viewer-canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
  #log { position:absolute; right:8px; top:8px; max-width:260px; max-height:50%; overflow:auto; font:11px monospace; background:rgba(0,0,0,0.55); padding:6px; border:1px solid #444; border-radius:4px; }
  .badge { font-size:10px; background:#444; color:#ccc; padding:2px 5px; border-radius:3px; margin-left:4px; }
  #toastContainer { position:fixed; top:10px; left:10px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
  .toast { min-width:220px; max-width:300px; background:rgba(30,30,30,0.95); color:#eee; font:12px/1.4 Arial, sans-serif;
           border:1px solid #444; border-radius:4px; padding:8px 10px; box-shadow:0 4px 12px rgba(0,0,0,0.4);
           opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease; pointer-events:auto; }
  .toast.show { opacity:1; transform:translateY(0); }
  .toast.success { border-color:#2e8b57; }
  .toast.error { border-color:#b33939; }
  .toast .toast-close { float:right; cursor:pointer; color:#888; margin-left:6px; }
  .toast .toast-close:hover { color:#fff; }
</style>
<!-- Added import map to resolve bare specifier 'three' -->
<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
  }
}
</script>
</head>
<body>
<header>
  <h1>
    <a href="https://github.com/hvoss-techfak/TF-JAX-IK" target="_blank" rel="noopener noreferrer" style="color:#fff; text-decoration:none;">
      JAX IK Demo - Please visit our Github Page for more information
    </a>
    <span class="badge" id="modelBadge">Agent</span>
  </h1>
</header>
<div id="tabs">
  <button class="tab-btn active" data-model="agent">Virtual Agent</button>
  <button class="tab-btn" data-model="pepper" style="display:none;" aria-hidden="true">URDF Robot</button>
</div>
<div id="content">
  <div id="viewerPane">
    <div id="log"></div>
    <!-- Canvas inserted by three.js -->
  </div>
  <div id="uiPane">
    <fieldset>
      <legend>Target Position</legend>
      <label>X
        <div class="flex-row">
          <input id="target_x" type="number" value="0.0" step="0.01" data-auto-solve="change">
          <input id="target_x_slider" type="range" min="-1" max="1" step="0.01" value="0.0">
        </div>
      </label>
      <label>Y
        <div class="flex-row">
          <input id="target_y" type="number" value="0.2" step="0.01" data-auto-solve="change">
          <input id="target_y_slider" type="range" min="-1" max="1" step="0.01" value="0.2">
        </div>
      </label>
      <label>Z <input id="target_z" type="number" value="0.35" step="0.01" data-auto-solve="change"></label>
      <label>Trajectory Points
        <!-- changed: removed '(static only)', removed disabled, max updated dynamically -->
        <input id="subpoints" type="number" value="1" min="1" max="20" step="1" data-auto-solve="change">
      </label>
    </fieldset>
    <fieldset>
      <legend>Primary Objectives</legend>
      <label><input id="distance_enabled" type="checkbox" checked> Distance Objective</label>
      <label>Distance Weight <input id="distance_weight" type="number" value="1.0" step="0.1"></label>
      <label hidden style="display:none;"><input id="collision_enabled" type="checkbox"> Collision Avoidance</label>
      <label hidden style="display:none;">Collision Weight <input id="collision_weight" type="number" value="1.0" step="0.1"></label>
    </fieldset>
    <fieldset>
      <legend>Regularization</legend>
      <label><input id="bone_zero_enabled" type="checkbox" checked> Bone Zero Rotation</label>
      <label>Bone Zero Weight <input id="bone_zero_weight" type="number" value="0.1" step="0.01"></label>
      <label><input id="derivative_enabled" type="checkbox" checked> Trajectory Smoothing</label>
      <label>Derivative Weight <input id="derivative_weight" type="number" value="0.05" step="0.01"></label>
    </fieldset>
    <fieldset id="handFieldset">
      <legend>Hand (Agent Only)</legend>
      <label>Hand Shape
        <select id="hand_shape"></select>
      </label>
      <label>Hand Position
        <select id="hand_position"></select>
      </label>
    </fieldset>
    <fieldset>
      <legend>Configuration</legend>
      <label>End Effector
        <select id="end_effector"></select>
      </label>
      <div style="margin-top:6px; font-size:12px;">Controlled Bones:</div>
      <div id="bonesContainer" class="bone-grid"></div>
    </fieldset>
    <fieldset>
      <legend>Model / Animation</legend>
      <!-- CHANGED: added explicit style to ensure invisibility -->
      <label hidden style="display:none;">GLTF URL <input id="gltf_url" type="text" value="/files/smplx.glb"></label>
      <div class="flex-row" style="margin-top:6px;">
        <button id="reset_cam" class="secondary" type="button">Reset Camera</button>
      </div>
      <label style="margin-top:8px;"><input id="wireframe" type="checkbox"> Wireframe</label>
      <label style="margin-top:4px;"><input id="show_gltf" type="checkbox" checked> Show GLTF Reference</label>
      <label style="margin-top:4px;"><input id="show_ikmesh" type="checkbox" checked> Show IK Mesh</label>
      <label>Playback FPS <input id="play_fps" type="number" value="24" min="1" max="120"></label>
    </fieldset>
    <div style="text-align:right; margin-top:10px;">
      <button id="solve_btn" class="primary" type="button">Solve IK</button>
    </div>
  </div>
</div>
<div id="statusBar">Ready.</div>
<div id="toastContainer"></div>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three@0.160.0/examples/jsm/loaders/GLTFLoader.js';

(function(){
  // ----- Logging -----
  const logEl = document.getElementById('log');
  function log(msg){
    const t = new Date().toISOString().split('T')[1].replace('Z','');
    logEl.textContent = `[${t}] ${msg}\n` + logEl.textContent.slice(0, 8000);
  }

  // ----- State -----
  let currentModel = 'agent';
  let configData = null;
  let animationFrames = [];
  let frameIndex = 0;
  let ikMesh = null;
  let usingGLTFGeometry = false;
  let gltfRoot = null;
  let gltfPrimaryMaterial = null;
  let gltfPrimaryMesh = null;
  let gltfPrimaryMaterialCaptured = false;
  let fallbackMesh = null;
  let lastTime = performance.now();
  // REMOVED: let lastFrameFetch = 0;
  // REMOVED: const pollInterval = 1000;
  // (ADDED) Solve ID tracking to avoid "lastSolveIdAgent / lastSolveIdPepper is not defined" errors
  let lastSolveIdAgent = 0;
  let lastSolveIdPepper = 0;

  // ----- Auto-solve (moved early to avoid ReferenceError) -----
  let solving = false;
  let solvePending = false;
  let solveDebounceTimer = null;
  const SOLVE_DEBOUNCE_MS = 40;

  function scheduleSolve(immediate=false){
    if (solving){ solvePending = true; return; }
    if (solveDebounceTimer) clearTimeout(solveDebounceTimer);
    solveDebounceTimer = setTimeout(()=> { triggerSolve(); }, immediate ? 50 : SOLVE_DEBOUNCE_MS);
  }

  async function triggerSolve(){
    if (solving){ solvePending = true; return; }
    solving = true;
    try { await doSolve(); }
    catch(e){ /* doSolve handles status/log */ }
    finally {
      solving = false;
      if (solvePending){
        solvePending = false;
        scheduleSolve();
      }
    }
  }

  // Playback state
  let playbackEnabled = false;
  const allowLoopPlayback = false;

  // Ground alignment state
  let baseOffsetY = 0;
  let groundAligned = false;
  let pendingAlign = false;
  let alignAttemptCount = 0;
  const maxAlignAttempts = 120;

  // --- Trajectory / spline state (ADDED) ---
  let controlFrames = [];
  let splineMode = false;
  let splineU = 0;
  let splineDuration = 2.0; // seconds for full path
  // One-time initial camera framing flag (ADDED)
  let initialCameraFramed = false;

  function cleanupVisuals(){
    if (ikMesh && usingGLTFGeometry){
      // keep GLTF mesh for possible reuse after reconfigure? remove anyway for clean slate
      ikMesh = null;
    }
    if (fallbackMesh){
      modelGroup.remove(fallbackMesh);
      if (fallbackMesh.geometry) fallbackMesh.geometry.dispose();
      if (fallbackMesh.material) fallbackMesh.material.dispose();
      fallbackMesh = null;
    }
    if (gltfRoot){
      gltfRoot.traverse(o=>{
        if (o.isMesh){
          if (o.geometry) o.geometry.dispose();
          if (o.material){
            if (Array.isArray(o.material)) o.material.forEach(m=>m.dispose());
            else o.material.dispose();
          }
        }
      });
      modelGroup.remove(gltfRoot);
      gltfRoot = null;
    }
    // Remove any residual children
    while (modelGroup.children.length) modelGroup.remove(modelGroup.children[0]);

    gltfPrimaryMesh = null;
    gltfPrimaryMaterial = null;
    gltfPrimaryMaterialCaptured = false;
    ikMesh = null;
    usingGLTFGeometry = false;
    animationFrames = [];
    frameIndex = 0;
    baseOffsetY = 0;
    groundAligned = false;
    pendingAlign = false;
    alignAttemptCount = 0;
    log("Visuals cleaned.");
  }

  function scheduleGroundAlign(force=false){
    if (force){
      groundAligned = false;
      alignAttemptCount = 0;
    }
    pendingAlign = true;
  }

  function performGroundAlign(){
    if (!pendingAlign) return;
    if (!modelGroup.children.length){
      if (++alignAttemptCount > maxAlignAttempts) pendingAlign = false;
      return;
    }
    const box = new THREE.Box3().setFromObject(modelGroup);
    if (box.isEmpty() || !isFinite(box.min.y)){
      if (++alignAttemptCount > maxAlignAttempts) pendingAlign = false;
      return;
    }
    const currentMin = box.min.y;
    // Desired world shift so new min ~= 0
    const delta = -currentMin;
    // Avoid large downward moves; only allow raising or tiny corrections
    if (delta > 0 || Math.abs(delta) < 1e-3){
      modelGroup.position.y += delta;
      baseOffsetY = modelGroup.position.y;
      groundAligned = true;
      updateTargetSphere(); // (NEW) keep target indicator vertically aligned
    }
    pendingAlign = false;
  }

  // (ADD) fitCamera helper (uses modelGroup if populated)
  function fitCamera(obj){
    const targetObj = modelGroup.children.length ? modelGroup : obj;
    if (!targetObj) return;
    const box = new THREE.Box3().setFromObject(targetObj);
    if (box.isEmpty()) return;
    const size = box.getSize(new THREE.Vector3());
    const center = box.getCenter(new THREE.Vector3());
    controls.target.copy(center);
    const maxDim = Math.max(size.x,size.y,size.z);
    const dist = maxDim * 3;
    const dir = new THREE.Vector3(0.0,0.5,1).normalize();
    camera.position.copy(center).addScaledVector(dir, dist);
    camera.near = maxDim/100;
    camera.far = maxDim*100;
    camera.updateProjectionMatrix();
    controls.update();
  }

  // ----- DOM refs -----
  const statusBar = document.getElementById('statusBar');
  const bonesContainer = document.getElementById('bonesContainer');
  const endEffectorSel = document.getElementById('end_effector');
  const handShapeSel = document.getElementById('hand_shape');
  const handPosSel = document.getElementById('hand_position');
  const handFieldset = document.getElementById('handFieldset');
  const modelBadge = document.getElementById('modelBadge');
  const subpointsInput = document.getElementById('subpoints'); // ADDED

  // Inputs
  function val(id){ return document.getElementById(id).value; }
  function num(id){ return parseFloat(val(id)); }
  function bool(id){ return document.getElementById(id).checked; }

  // ----- Three.js scene -----
  const renderer = new THREE.WebGLRenderer({ antialias:true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(document.getElementById('viewerPane').clientWidth, document.getElementById('viewerPane').clientHeight);
  renderer.domElement.className = 'viewer-canvas';
  document.getElementById('viewerPane').appendChild(renderer.domElement);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x222222);

  const camera = new THREE.PerspectiveCamera(45, renderer.domElement.clientWidth / renderer.domElement.clientHeight, 0.01, 1000);
  camera.position.set(0,1,3);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(0,0.8,0);

  scene.add(new THREE.HemisphereLight(0xffffff,0x444444,1.0));
  const d = new THREE.DirectionalLight(0xffffff,0.8);
  d.position.set(3,10,10); scene.add(d);

  const ground = new THREE.Mesh(
    new THREE.CircleGeometry(5,48),
    new THREE.MeshStandardMaterial({color:0x303030, metalness:0.1, roughness:0.9})
  );
  ground.rotation.x = -Math.PI/2;
  ground.receiveShadow = true;
  scene.add(ground);
  ground.visible = false; // DISABLED ground plane

  // (ADD) Group to apply vertical lift without altering raw vertex data
  const modelGroup = new THREE.Group();
  scene.add(modelGroup);

  // (ADDED) Target sphere visual
  const targetSphereGeom = new THREE.SphereGeometry(0.01, 24, 24);
  const targetSphereMat = new THREE.MeshStandardMaterial({color:0x00ff55, emissive:0x008833});
  const targetSphere = new THREE.Mesh(targetSphereGeom, targetSphereMat);
  scene.add(targetSphere);

  // (REPLACED) updateTargetSphere: now accounts for modelGroup translation (baseOffsetY)
  // and uniform scaling (Pepper) on all axes so sphere aligns with the visual robot pose.
  function updateTargetSphere(){
    const xRaw = parseFloat(document.getElementById('target_x').value) || 0;
    const yRaw = parseFloat(document.getElementById('target_y').value) || 0;
    const zRaw = parseFloat(document.getElementById('target_z').value) || 0;
    // Model transform
    const sx = modelGroup?.scale?.x ?? 1;
    const sy = modelGroup?.scale?.y ?? 1;
    const sz = modelGroup?.scale?.z ?? 1;
    const tx = modelGroup?.position?.x ?? 0;
    const ty = modelGroup?.position?.y ?? 0;  // this already equals baseOffsetY after ground align
    const tz = modelGroup?.position?.z ?? 0;
    // Apply uniform / per-axis scaling then translation so sphere sits where the solver
    // target maps in the displayed (scaled & lifted) robot coordinates.
    targetSphere.position.set(
      xRaw * sx + tx,
      yRaw * sy + ty,
      zRaw * sz + tz
    );
  }

  // Attach live update listeners
  ['target_x','target_y','target_z'].forEach(id=>{
    document.getElementById(id).addEventListener('input', updateTargetSphere);
    document.getElementById(id).addEventListener('change', updateTargetSphere);
  });

  // Initial placement after DOM ready
  updateTargetSphere();

  window.addEventListener('resize', () => {
    renderer.setSize(document.getElementById('viewerPane').clientWidth, document.getElementById('viewerPane').clientHeight);
    camera.aspect = renderer.domElement.clientWidth / renderer.domElement.clientHeight;
    camera.updateProjectionMatrix();
  });

  function resetCamera(){
    camera.position.set(0,1,3);
    controls.target.set(0,0.8,0);
    controls.update();
  }

  // ----- Config fetch -----
  async function loadConfig(){
    const res = await fetch(`/config?model=${currentModel}`);
    configData = await res.json();
    populateUIFromConfig();
    log(`Config loaded for ${currentModel}`);
  }

  function populateUIFromConfig(){
    // End effector
    endEffectorSel.innerHTML = "";
    configData.end_effector_choices.forEach(b=>{
      const opt = document.createElement('option');
      opt.value = b; opt.textContent = b;
      if (b === configData.default_end_effector) opt.selected = true;
      endEffectorSel.appendChild(opt);
    });
    // Bones
    bonesContainer.innerHTML = "";
    configData.selectable_bones.forEach(b=>{
      const id = `bone_${b}`;
      const label = document.createElement('label');
      label.innerHTML = `<input type="checkbox" id="${id}" ${configData.default_controlled_bones.includes(b)?'checked':''}> ${b}`;
      bonesContainer.appendChild(label);
      // Add listener for auto-solve
      setTimeout(()=>{ // ensure element in DOM
        const cb = document.getElementById(id);
        if (cb) cb.addEventListener('change', ()=> scheduleSolve());
      },0);
    });
    // Hand controls (agent only)
    if (currentModel === 'agent'){
      handFieldset.style.display = '';
      handShapeSel.innerHTML = "";
      configData.hand_shapes.forEach(s=>{
        const opt = document.createElement('option');
        opt.value = s; opt.textContent = s;
        handShapeSel.appendChild(opt);
      });
      handPosSel.innerHTML = "";
      configData.hand_positions.forEach(s=>{
        const opt = document.createElement('option');
        opt.value = s; opt.textContent = s;
        handPosSel.appendChild(opt);
      });
    } else {
      handFieldset.style.display = 'none';
    }
    // Set subpoints max if provided
    if (configData && typeof configData.max_subpoints !== 'undefined'){
      subpointsInput.max = configData.max_subpoints;
    }
    updateTargetSphere();
  }

  // Subpoints change listener (ensure derivative toggle & autosolve) - ADDED
  subpointsInput.addEventListener('change', ()=>{
    const v = parseInt(subpointsInput.value,10);
    if (v <= 1){
      document.getElementById('derivative_enabled').checked = false;
    }
    scheduleSolve();
  });

  // Disable GLTF controls on Pepper tab (avoid SMPLX loading there)
  function applyModelSpecificGLTFPolicy(){
    const urlInput = document.getElementById('gltf_url');
    //const loadBtn = document.getElementById('load_gltf');
    const showGltfChk = document.getElementById('show_gltf');
    if (currentModel === 'pepper'){
      urlInput.value = "";  // prevent accidental SMPLX load
      //loadBtn.disabled = true;
      showGltfChk.disabled = true;
      if (gltfRoot) { gltfRoot.visible = false; }
    } else {
      //if (!urlInput.value) urlInput.value = "/files/smplx.glb";
      //loadBtn.disabled = false;
      showGltfChk.disabled = false;
    }
  }

  // ----- GLTF Loader (reuse its primary mesh for IK if vertex counts match) -----
  const gltfLoader = new GLTFLoader();
  function loadGLTF(url){
    if (!url){ log("No GLTF URL (possibly Pepper) - skipping load."); return; }
    const u = url.startsWith('http') ? url : url;
    statusBar.textContent = `Loading GLTF: ${u}`;
    log(`Loading GLTF ${u}`);
    gltfLoader.load(u, gltf=>{
      if (gltfRoot) modelGroup.remove(gltfRoot);
      gltfRoot = gltf.scene;
      gltfPrimaryMaterial = null;
      gltfPrimaryMesh = null;
      gltfPrimaryMaterialCaptured = false;

      gltfRoot.traverse(o=>{
        if (o.isMesh && o.geometry?.attributes?.position){
            if (!gltfPrimaryMesh || o.geometry.attributes.position.count > gltfPrimaryMesh.geometry.attributes.position.count){
              gltfPrimaryMesh = o;
            }
        }
      });

      if (gltfPrimaryMesh){
        if (Array.isArray(gltfPrimaryMesh.material)){
          const mm = gltfPrimaryMesh.material.find(m=>m.map) || gltfPrimaryMesh.material[0];
          gltfPrimaryMaterial = mm.clone();
        } else {
          gltfPrimaryMaterial = gltfPrimaryMesh.material.clone();
        }
        gltfPrimaryMaterialCaptured = true;
        log(`Captured GLTF primary mesh (verts=${gltfPrimaryMesh.geometry.attributes.position.count})`);
      } else {
        log("No primary mesh found in GLTF.");
      }

      modelGroup.add(gltfRoot); // (CHANGED) add to modelGroup instead of scene
      gltfRoot.visible = document.getElementById('show_gltf').checked;

      // Bind deformation if frames already exist
      if (animationFrames.length){
        ensureActiveMeshBound(animationFrames[0]);
        applyFrame(animationFrames[Math.min(frameIndex, animationFrames.length-1)]);
      }

      fitCamera(gltfRoot);
      // adjustModelHeight(gltfRoot); // (ADD) ensure height set even without frames yet
      statusBar.textContent = "GLTF loaded.";
    }, undefined, err=>{
      statusBar.textContent = "GLTF error: " + err.message;
      log("GLTF error: "+err.message);
    });
  }

  // ----- Animation Frames Fetch -----
  async function fetchFrames(force=false){
    const now = performance.now();
    if (!force && now - lastFrameFetch < pollInterval) return;
    lastFrameFetch = now;
    const url = `/animation?model=${currentModel==='pepper'?'pepper':'agent'}`;
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(res.status);
      const data = await res.json();
      if (force || data.length !== animationFrames.length){
        animationFrames = data;
        if (animationFrames.length){
          ensureActiveMeshBound(animationFrames[0]);
          controlFrames = [];
          splineMode = false;
          playbackEnabled = false;
          const requestedSub = payload.subpoints;
          if (animationFrames.length > 1 && requestedSub > 1){
            setupSplinePlayback(animationFrames);
            applyFrame(animationFrames[0]);
          } else {
            frameIndex = animationFrames.length - 1;
            applyFrame(animationFrames[frameIndex]);
          }
          scheduleGroundAlign();
          lastFrameFetch = performance.now();
        }
      }
    } catch(e){
      log("Animation fetch error: "+e.message);
    }
  }

  // Decide how to bind deformation on first frames arrival
  function prepareDeformationBinding(){
    if (!animationFrames.length) return;
    ensureActiveMeshBound(animationFrames[0]);
    applyFrame(animationFrames[0]);
  }

  // Deprecate old createOrUpdateFallbackMesh usage by redirect (kept if referenced)
  function createOrUpdateFallbackMesh(){
    if (!animationFrames.length) return;
    ensureActiveMeshBound(animationFrames[0]);
  }

  // ----- Playback control (NEW) -----
  function updateFramePlayback(){
    if (!animationFrames.length) return;
    const idx = Math.min(Math.floor(frameIndex), animationFrames.length - 1); // clamp
    applyFrame(animationFrames[idx]);
  }

  // ----- Solve -----
  // REMOVE old binding to doSolve directly (replaced below)
  // document.getElementById('solve_btn').onclick = () => doSolve();
  document.getElementById('solve_btn').onclick = () => triggerSolve();

  function collectBones(){
    const bones = [];
    if (!configData) return bones;
    configData.selectable_bones.forEach(b=>{
      const cb = document.getElementById(`bone_${b}`);
      if (cb && cb.checked) bones.push(b);
    });
    return bones;
  }

  async function doSolve(){
    statusBar.textContent = "Solving...";
    log("Solve request started");
    const tSubmit = performance.now();
    const payload = {
      model: currentModel,
      target: [num('target_x'), num('target_y'), num('target_z')],
      subpoints: parseInt(val('subpoints'),10),
      distance_enabled: bool('distance_enabled'),
      distance_weight: num('distance_weight'),
      collision_enabled: bool('collision_enabled'),
      collision_weight: num('collision_weight'),
      bone_zero_enabled: bool('bone_zero_enabled'),
      bone_zero_weight: num('bone_zero_weight'),
      derivative_enabled: bool('derivative_enabled'),
      derivative_weight: num('derivative_weight'),
      controlled_bones: collectBones(),
      end_effector: endEffectorSel.value,
      hand_shape: currentModel==='agent'? handShapeSel.value : "None",
      hand_position: currentModel==='agent'? handPosSel.value : "None",
      frames_mode: "auto"
    };
    try {
      await fetch("/configure", {
        method:"POST",
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
          model: currentModel,
          controlled_bones: payload.controlled_bones,
          end_effector: payload.end_effector
        })
      });
      const t0 = performance.now();
      const res = await fetch("/solve", {
        method:"POST",
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify(payload)
      });
      const json = await res.json();
      if (json.status !== 'ok') throw new Error(json.message || 'Solve failed');

      // (ADDED) Stale solve guard
      const sid = json.result.solve_id || 0;
      if (payload.model === 'agent'){
        if (sid <= lastSolveIdAgent){
          log(`Stale agent solve ignored (sid=${sid} <= ${lastSolveIdAgent})`);
          return;
        }
        lastSolveIdAgent = sid;
      } else {
        if (sid <= lastSolveIdPepper){
          log(`Stale pepper solve ignored (sid=${sid} <= ${lastSolveIdPepper})`);
          return;
        }
        lastSolveIdPepper = sid;
      }

      const server = json.result.solve_time;
      const total = (performance.now()-t0)/1000;
      statusBar.textContent =
        `Solved: server=${server.toFixed(2)}s total=${total.toFixed(2)}s it=${json.result.iterations} obj=${json.result.objective.toFixed(6)} frames=${json.result.frames}`;
      log("Solve completed (frames inline)");
      if (json.result.frames_data && json.result.frames_data.length){
        animationFrames = json.result.frames_data;
        ensureActiveMeshBound(animationFrames[0]);
        controlFrames = [];
        splineMode = false;
        playbackEnabled = false;
        const requestedSub = payload.subpoints;
        if (animationFrames.length > 1 && requestedSub > 1){
          setupSplinePlayback(animationFrames);
          applyFrame(animationFrames[0]);
        } else {
          frameIndex = animationFrames.length - 1;
          applyFrame(animationFrames[frameIndex]);
        }
        scheduleGroundAlign();
      }
      updateTargetSphere();
      showToast(
        `Solve OK • it=${json.result.iterations} • t=${json.result.solve_time.toFixed(2)}s • err=${json.result.objective.toExponential(2)}`,
        'success',
        5000
      );
    } catch(e){
      statusBar.textContent = "Solve error: " + e.message;
      log("Solve error: "+e.message);
      showToast(`Solve ERROR: ${e.message}`, 'error', 6000);
    }
  }

  // ----- Toast System (ADDED) -----
  const toastContainer = document.getElementById('toastContainer');
  function showToast(message, type='success', ttl=4000){
    const el = document.createElement('div');
    el.className = `toast ${type}`;
    const close = document.createElement('span');
    close.className = 'toast-close';
    close.textContent = '✕';
    close.onclick = (e)=>{ e.stopPropagation(); remove(); };
    const content = document.createElement('div');
    content.textContent = message;
    el.appendChild(close);
    el.appendChild(content);
    toastContainer.appendChild(el);
    requestAnimationFrame(()=> el.classList.add('show'));
    function remove(){
      el.classList.remove('show');
      setTimeout(()=> el.remove(), 180);
    }
    setTimeout(remove, ttl);
  }

  // ----- Target sliders (NEW) -----
  const xNum = document.getElementById('target_x');
  const yNum = document.getElementById('target_y');
  const zNum = document.getElementById('target_z');
  const xSlider = document.getElementById('target_x_slider');
  const ySlider = document.getElementById('target_y_slider');

  function syncSliderToNum(axis){
    if (axis==='x') xSlider.value = xNum.value;
    else if (axis==='y') ySlider.value = yNum.value;
  }
  function syncNumToSlider(axis){
    if (axis==='x') xNum.value = xSlider.value;
    else if (axis==='y') yNum.value = ySlider.value;
  }

  // Slider live update (no solve while dragging)
  xSlider.addEventListener('input', ()=>{ syncNumToSlider('x'); updateTargetSphere(); });
  ySlider.addEventListener('input', ()=>{ syncNumToSlider('y'); updateTargetSphere(); });

  // Solve only after release (change event)
  xSlider.addEventListener('change', ()=>{ syncNumToSlider('x'); updateTargetSphere(); scheduleSolve(); });
  ySlider.addEventListener('change', ()=>{ syncNumToSlider('y'); updateTargetSphere(); scheduleSolve(); });

  // Numeric fields: update slider & sphere; solve on change (debounced)
  xNum.addEventListener('change', ()=>{ syncSliderToNum('x'); updateTargetSphere(); scheduleSolve(); });
  yNum.addEventListener('change', ()=>{ syncSliderToNum('y'); updateTargetSphere(); scheduleSolve(); });
  zNum.addEventListener('change', ()=>{ updateTargetSphere(); scheduleSolve(); });

  // Existing listeners for target sphere input (remove duplicate if present)
  // ...existing code...

  // ----- Hook other auto-solve controls (NEW) -----
  const autoSolveSelectors = [
    '#distance_enabled','#distance_weight',
    '#collision_enabled','#collision_weight',
    '#bone_zero_enabled','#bone_zero_weight',
    '#derivative_enabled','#derivative_weight',
    '#hand_shape','#hand_position',
    '#end_effector','#wireframe','#show_gltf','#show_ikmesh',
    '#play_fps'
  ];
  autoSolveSelectors.forEach(sel=>{
    const el = document.querySelector(sel);
    if (el){
      const evt = (el.type === 'checkbox' || el.tagName === 'SELECT') ? 'change' : 'input';
      el.addEventListener(evt, ()=> scheduleSolve());
    }
  });

  // Wireframe / visibility still immediate visual update (keep old logic if any)
  document.getElementById('wireframe').addEventListener('change', ()=>{
    if (ikMesh && ikMesh.material){
      ikMesh.material.wireframe = document.getElementById('wireframe').checked;
      ikMesh.material.needsUpdate = true;
    }
    if (gltfPrimaryMesh && gltfPrimaryMesh.material){
      if (Array.isArray(gltfPrimaryMesh.material)) gltfPrimaryMesh.material.forEach(m=>{m.wireframe=document.getElementById('wireframe').checked; m.needsUpdate=true;});
      else { gltfPrimaryMesh.material.wireframe = document.getElementById('wireframe').checked; gltfPrimaryMesh.material.needsUpdate=true; }
    }
  });

  document.getElementById('show_gltf').addEventListener('change', ()=>{
    if (gltfRoot) gltfRoot.visible = document.getElementById('show_gltf').checked;
  });
  document.getElementById('show_ikmesh').addEventListener('change', ()=>{
    if (ikMesh) ikMesh.visible = document.getElementById('show_ikmesh').checked;
  });

  // Update bones listener attachment inside populateUIFromConfig (MODIFIED)
  function populateUIFromConfig(){
    // End effector
    endEffectorSel.innerHTML = "";
    configData.end_effector_choices.forEach(b=>{
      const opt = document.createElement('option');
      opt.value = b; opt.textContent = b;
      if (b === configData.default_end_effector) opt.selected = true;
      endEffectorSel.appendChild(opt);
    });
    // Bones
    bonesContainer.innerHTML = "";
    configData.selectable_bones.forEach(b=>{
      const id = `bone_${b}`;
      const label = document.createElement('label');
      label.innerHTML = `<input type="checkbox" id="${id}" ${configData.default_controlled_bones.includes(b)?'checked':''}> ${b}`;
      bonesContainer.appendChild(label);
      // Add listener for auto-solve
      setTimeout(()=>{ // ensure element in DOM
        const cb = document.getElementById(id);
        if (cb) cb.addEventListener('change', ()=> scheduleSolve());
      },0);
    });
    // Hand controls (agent only)
    if (currentModel === 'agent'){
      handFieldset.style.display = '';
      handShapeSel.innerHTML = "";
      configData.hand_shapes.forEach(s=>{
        const opt = document.createElement('option');
        opt.value = s; opt.textContent = s;
        handShapeSel.appendChild(opt);
      });
      handPosSel.innerHTML = "";
      configData.hand_positions.forEach(s=>{
        const opt = document.createElement('option');
        opt.value = s;
        opt.textContent = s;
        handPosSel.appendChild(opt);
      });
    } else {
      handFieldset.style.display = 'none';
    }
    // Set subpoints max if provided
    if (configData && typeof configData.max_subpoints !== 'undefined'){
      subpointsInput.max = configData.max_subpoints;
    }
    updateTargetSphere();
  }

  // Solve button untouched; user can still manually force
  // document.getElementById('solve_btn').onclick = ()=> triggerSolve();

  // During tab switch, avoid duplicate immediate solve until config/frames loaded
  // (MODIFY tab switch handler to schedule solve after frames)
  document.querySelectorAll('.tab-btn').forEach(btn=>{
    btn.onclick = () => {
      if (btn.classList.contains('active')) return;
      document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
      btn.classList.add('active');
      currentModel = btn.getAttribute('data-model');
      modelBadge.textContent = currentModel === 'pepper' ? "Pepper Robot" : "Agent";
      cleanupVisuals();
      applyModelSpecificGLTFPolicy();
      loadConfig().then(()=>{
        const url = document.getElementById('gltf_url').value;
        if (url) loadGLTF(url);
        fitCamera(modelGroup);
        scheduleSolve(true);
        updateTargetSphere();
      });
    };
  });

  // ===== Unified Mesh Binding (ADDED) =====
  function ensureActiveMeshBound(firstFrame){
    if (!firstFrame) return;
    const verts = firstFrame.vertices;
    let bound = false;

    // Try GLTF primary mesh first
    if (gltfPrimaryMesh &&
        gltfPrimaryMesh.geometry?.attributes?.position &&
        gltfPrimaryMesh.geometry.attributes.position.count === verts.length){
      // Remove fallback if exists
      if (fallbackMesh){
        modelGroup.remove(fallbackMesh);
        if (fallbackMesh.geometry) fallbackMesh.geometry.dispose();
        if (fallbackMesh.material && !Array.isArray(fallbackMesh.material)) fallbackMesh.material.dispose();
        fallbackMesh = null;
      }
      ikMesh = gltfPrimaryMesh;
      usingGLTFGeometry = true;
      if (gltfPrimaryMaterial) ikMesh.material = gltfPrimaryMaterial;
      bound = true;
      log("ensureActiveMeshBound: using GLTF primary mesh");
    }

    // Fallback creation/update
    if (!bound){
      if (!fallbackMesh ||
          !fallbackMesh.geometry?.getAttribute('position') ||
          fallbackMesh.geometry.getAttribute('position').count !== verts.length){
        if (fallbackMesh){
          modelGroup.remove(fallbackMesh);
          if (fallbackMesh.geometry) fallbackMesh.geometry.dispose();
          if (fallbackMesh.material && !Array.isArray(fallbackMesh.material)) fallbackMesh.material.dispose();
        }
        const geom = new THREE.BufferGeometry();
        const posArr = new Float32Array(verts.length * 3);
        for (let i=0;i<verts.length;i++){
          const v = verts[i];
          posArr[i*3]=v[0]; posArr[i*3+1]=v[1]; posArr[i*3+2]=v[2];
        }
        geom.setAttribute('position', new THREE.BufferAttribute(posArr,3));
        geom.getAttribute('position').setUsage(THREE.DynamicDrawUsage);
        const faces = firstFrame.faces;
        const idx = new Uint32Array(faces.length*3);
        for (let i=0;i<faces.length;i++){
          const f = faces[i];
          idx[i*3]=f[0]; idx[i*3+1]=f[1]; idx[i*3+2]=f[2];
        }
        geom.setIndex(new THREE.BufferAttribute(idx,1));
        geom.computeVertexNormals();
        const mat = gltfPrimaryMaterial ? gltfPrimaryMaterial.clone()
                                        : new THREE.MeshStandardMaterial({color:0x6699ff, metalness:0.2, roughness:0.6});
        fallbackMesh = new THREE.Mesh(geom, mat);
        fallbackMesh.visible = document.getElementById('show_ikmesh').checked;
        modelGroup.add(fallbackMesh);
        ikMesh = fallbackMesh;
        usingGLTFGeometry = false;
        log("ensureActiveMeshBound: created fallback mesh");
      } else {
        ikMesh = fallbackMesh;
        usingGLTFGeometry = false;
        log("ensureActiveMeshBound: reused fallback mesh");
      }
    }

    // Pepper scaling (visual only)
    if (currentModel === 'pepper' && ikMesh){
      const box = new THREE.Box3().setFromObject(modelGroup);
      const h = box.max.y - box.min.y;
      const targetH = 1.2;
      if (h > 0 && (h < 0.6 || h > 2.0)){
        const s = targetH / h;
        modelGroup.scale.set(s,s,s);
        log(`Pepper scaled: origH=${h.toFixed(3)} scale=${s.toFixed(3)}`);
        scheduleGroundAlign(true);
      }
    }

    if (gltfRoot) gltfRoot.visible = document.getElementById('show_gltf').checked;
    if (ikMesh) ikMesh.visible = document.getElementById('show_ikmesh').checked;

    updateTargetSphere();
  }

  // ===== Frame Application (ADDED) =====
  function applyFrame(frame){
    if (!ikMesh || !frame) return;
    const posAttr = ikMesh.geometry.getAttribute('position');
    if (!posAttr || posAttr.count !== frame.vertices.length){
      log("applyFrame: vertex count mismatch");
      return;
    }
    const arr = posAttr.array;
    const verts = frame.vertices;
    for (let i=0;i<verts.length;i++){
      const v = verts[i];
      arr[i*3]=v[0]; arr[i*3+1]=v[1]; arr[i*3+2]=v[2];
    }
    posAttr.needsUpdate = true;
    if (!groundAligned) scheduleGroundAlign();
  }

  // ----- B-spline helpers (ADDED) ---
  function bsplineBasis(t){
    const t2=t*t, t3=t2*t;
    return [
      (1 - 3*t + 3*t2 - t3)/6,
      (4 - 6*t2 + 3*t3)/6,
      (1 + 3*t + 3*t2 - 3*t3)/6,
      t3/6
    ];
  }
  function getControlFrame(i){
    if (i < 0) return controlFrames[0];
    if (i >= controlFrames.length) return controlFrames[controlFrames.length-1];
    return controlFrames[i];
  }
  function evalSplineVertices(u){
    if (!ikMesh || controlFrames.length < 2) return;
    const n = controlFrames.length;
    const seg = Math.min(Math.floor(u), n-2);
    const t = u - seg;
    const [w0,w1,w2,w3] = bsplineBasis(t);
    const f0 = getControlFrame(seg-1);
    const f1 = getControlFrame(seg);
    const f2 = getControlFrame(seg+1);
    const f3 = getControlFrame(seg+2);
    const posAttr = ikMesh.geometry.getAttribute('position');
    if (!posAttr) return;
    const arr = posAttr.array;
    const v0=f0.vertices, v1=f1.vertices, v2=f2.vertices, v3=f3.vertices;
    const count = posAttr.count;
    for (let i=0;i<count;i++){
      const a0=v0[i], a1=v1[i], a2=v2[i], a3=v3[i];
      arr[i*3]   = w0*a0[0]+w1*a1[0]+w2*a2[0]+w3*a3[0];
      arr[i*3+1] = w0*a0[1]+w1*a1[1]+w2*a2[1]+w3*a3[1];
      arr[i*3+2] = w0*a0[2]+w1*a1[2]+w2*a2[2]+w3*a3[2];
    }
    posAttr.needsUpdate = true;
    if (!groundAligned) scheduleGroundAlign();
  }
  function setupSplinePlayback(frames){
    controlFrames = frames;
    splineMode = true;
    splineU = 0;
    const segments = frames.length - 1;
    splineDuration = Math.min(segments * 0.6, 8.0); // heuristic
    playbackEnabled = true;
  }

  // ----- Render Loop -----
  function animate(now){
    requestAnimationFrame(animate);
    const dt = (now - lastTime)/1000;
    lastTime = now;
    if (splineMode && playbackEnabled){
      const n = controlFrames.length;
      if (n > 1){
        splineU += (dt / splineDuration) * (n - 1);
        if (splineU >= (n - 1)){
          splineU = n - 1;
          playbackEnabled = false; // stop at end
        }
        evalSplineVertices(splineU);
      }
    } else if (animationFrames.length > 1 && playbackEnabled){
      const fps = parseInt(document.getElementById('play_fps').value,10) || 24;
      frameIndex += dt * fps;
      if (frameIndex >= animationFrames.length){
        if (allowLoopPlayback){
          frameIndex = 0;
        } else {
          frameIndex = animationFrames.length - 1;
          playbackEnabled = false; // stop at final frame
        }
      }
      updateFramePlayback();
    }
    // If not animating but we just solved / loaded, ensure final frame rendered
    if (!playbackEnabled && animationFrames.length && frameIndex === animationFrames.length - 1){
      // Single application safeguard (light cost)
      // applyFrame(animationFrames[frameIndex]); // already applied; can omit
    }
    if (pendingAlign) performGroundAlign();

    // (ADDED) One-time initial camera framing after first geometry appears
    if (!initialCameraFramed && modelGroup.children.length){
      fitCamera(modelGroup);
      initialCameraFramed = true;
    }

    renderer.render(scene, camera);
  }
  requestAnimationFrame(animate);

  // ----- Init -----
  applyModelSpecificGLTFPolicy();
  loadConfig().then(()=>{
    const url = document.getElementById('gltf_url').value;
    if (url) loadGLTF(url);
    scheduleGroundAlign(true);
    scheduleSolve(true);
    updateTargetSphere();
  });

})();
</script>
</body>
</html>