Upload index.html with huggingface_hub

index.html

@@ -107,12 +107,33 @@
   .ghost:hover{color:var(--text);border-color:var(--accent)}
   button:disabled{opacity:.45;cursor:not-allowed;filter:none}
 
-  .controls-help{margin-top:16px;border-top:1px solid var(--edge);padding-top:14px}
-  .keys{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
-  .keycap{min-width:30px;text-align:center;padding:5px 8px;border-radius:8px;background:#0d1220;
-    border:1px solid var(--edge);font-size:12px;color:var(--muted);font-weight:600;transition:.1s}
-  .keycap.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
-  .hint-line{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.55}
+  /* Controls section (below the stage) */
+  .controls-section{margin-top:20px}
+  .controls-grid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:12px}
+  @media (max-width:640px){.controls-grid{grid-template-columns:1fr;gap:20px}}
+
+  /* Visual on-screen WASD keyboard */
+  .keyboard{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);
+    gap:8px;justify-content:start}
+  .keycap{display:grid;place-items:center;border-radius:12px;background:#0d1220;
+    border:1px solid var(--edge);font-size:18px;color:var(--muted);font-weight:700;
+    transition:.08s;user-select:none}
+  .keycap.spacer{background:transparent;border:none}
+  .keycap.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
+    border-color:transparent;box-shadow:0 4px 16px rgba(91,140,255,.45);transform:translateY(1px)}
+  /* WASD cross placement inside the 3x2 grid */
+  .keycap[data-k="W"]{grid-column:2;grid-row:1}
+  .keycap[data-k="A"]{grid-column:1;grid-row:2}
+  .keycap[data-k="S"]{grid-column:2;grid-row:2}
+  .keycap[data-k="D"]{grid-column:3;grid-row:2}
+
+  .look-info{font-size:12.5px;color:var(--muted);line-height:1.6}
+  .look-info b{color:var(--text)}
+  .look-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--good);
+    border:1px solid var(--edge);border-radius:999px;padding:4px 10px;margin-top:8px}
+  .look-badge .d{width:7px;height:7px;border-radius:50%;background:var(--muted)}
+  .look-badge.active .d{background:var(--good);box-shadow:0 0 8px var(--good)}
+  .hint-line{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.55}
   .active-tags{font-size:12px;color:var(--good);min-height:16px;margin-top:8px}
   .footnote{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}
 </style>
@@ -124,7 +145,7 @@
       <div class="logo">🌍</div>
       <div>
         <h1>ABot-World — Interactive World Rollout</h1>
-        <p>Upload a starting frame, then steer a live action-conditioned world with WASD / IJKL.</p>
+        <p>Upload a starting frame, then steer a live action-conditioned world with WASD + mouse-look.</p>
       </div>
     </div>
     <div class="links">
@@ -143,7 +164,7 @@
           <div class="chip"><span class="dot" id="status-dot"></span><span id="status-label">Idle</span></div>
           <div class="chip"><span id="fps-value">0</span> fps · <span id="frame-value">0</span> blk</div>
         </div>
-        <div class="capture-hint" id="capture-hint">Click the view to capture keyboard · Esc to release</div>
+        <div class="capture-hint" id="capture-hint">Click to capture · WASD to move · mouse to look · Esc to release</div>
         <div class="overlay" id="overlay">
           <div>
             <div class="spinner" id="spinner" style="display:none"></div>
@@ -183,26 +204,36 @@
         <button class="primary" id="start-btn" disabled>Start world</button>
         <button class="ghost" id="stop-btn" disabled>Stop</button>
       </div>
+    </div>
+  </div>
 
-      <div class="controls-help">
-        <div class="label">Live controls</div>
-        <div class="keys" id="keys">
+  <!-- Controls (below the video output) -->
+  <div class="card controls-section">
+    <div class="label">Live controls</div>
+    <div class="controls-grid">
+      <div>
+        <div class="label" style="margin-bottom:8px">Movement</div>
+        <div class="keyboard" id="keys">
           <span class="keycap" data-k="W">W</span>
           <span class="keycap" data-k="A">A</span>
           <span class="keycap" data-k="S">S</span>
           <span class="keycap" data-k="D">D</span>
-          <span class="keycap" data-k="I">I</span>
-          <span class="keycap" data-k="J">J</span>
-          <span class="keycap" data-k="K">K</span>
-          <span class="keycap" data-k="L">L</span>
         </div>
-        <div class="hint-line">
-          <b>WASD</b> — move &amp; turn · <b>IJKL</b> — look / pan.
-          Hold keys to steer the next block. Click the view to capture input.
+      </div>
+      <div>
+        <div class="label" style="margin-bottom:8px">Look / pan</div>
+        <div class="look-info">
+          Move the world camera with your <b>mouse</b>. Click the view to capture
+          the pointer, then move the mouse to look &amp; pan. Press <b>Esc</b> to release.
         </div>
-        <div class="active-tags" id="active-tags"></div>
+        <div class="look-badge" id="look-badge"><span class="d"></span><span id="look-badge-text">Mouse-look idle</span></div>
       </div>
     </div>
+    <div class="hint-line">
+      <b>W A S D</b> — move &amp; turn (hold to steer the next block) ·
+      <b>Mouse</b> — look / pan. Click the video to capture input.
+    </div>
+    <div class="active-tags" id="active-tags"></div>
   </div>
 </div>
 
@@ -213,10 +244,12 @@ import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.m
 const SESSION_ID = (crypto.randomUUID && crypto.randomUUID()) ||
   (`s-${Date.now().toString(36)}-${Math.random().toString(36).slice(2,10)}`);
 
-const VALID_KEYS = new Set(["W","A","S","D","I","J","K","L"]);
+// Movement keys are driven by the keyboard (WASD); look/pan (I J K L) is now
+// driven by mouse movement (pointer-lock mouse-look) — see mouse-look block.
+const MOVE_KEYS = new Set(["W","A","S","D"]);
+const LOOK_KEYS = new Set(["I","J","K","L"]);
 const KEY_FROM_CODE = {
   KeyW:"W", KeyA:"A", KeyS:"S", KeyD:"D",
-  KeyI:"I", KeyJ:"J", KeyK:"K", KeyL:"L",
 };
 
 const state = {
@@ -242,7 +275,8 @@ const presetsEl = $("presets");
 const promptEl = $("prompt"), seedEl = $("seed");
 const startBtn = $("start-btn"), stopBtn = $("stop-btn");
 const activeTags = $("active-tags");
-const keycaps = Array.from(document.querySelectorAll(".keycap"));
+const keycaps = Array.from(document.querySelectorAll(".keycap[data-k]"));
+const lookBadge = $("look-badge"), lookBadgeText = $("look-badge-text");
 
 // --- UI helpers ---
 function setStatus(kind, label){
@@ -500,24 +534,94 @@ function startCtrlLoop(){
 function stopCtrlLoop(){ if(ctrlTimer){ clearInterval(ctrlTimer); ctrlTimer = null; } }
 
 function renderKeys(){
+  // Highlight the on-screen WASD keys that are currently held.
   keycaps.forEach(c=>c.classList.toggle("active", state.pressed.has(c.dataset.k)));
+  // Look/pan status badge reflects live mouse-look direction(s).
+  const look = Array.from(state.pressed).filter(k=>LOOK_KEYS.has(k));
+  const looking = look.length > 0;
+  lookBadge.classList.toggle("active", looking);
+  const LOOK_LABEL = { I:"up", K:"down", J:"left", L:"right" };
+  lookBadgeText.textContent = looking
+    ? "Looking " + look.map(k=>LOOK_LABEL[k]).join(" + ")
+    : (state.capturing ? "Mouse-look ready" : "Mouse-look idle");
   const held = Array.from(state.pressed);
-  activeTags.textContent = held.length ? "Holding: " + held.join(" + ") : "";
+  activeTags.textContent = held.length ? "Active: " + held.join(" + ") : "";
 }
 
-// --- Keyboard capture ---
-stage.addEventListener("click", ()=>{ state.capturing = true; stage.focus(); });
+// --- Movement keyboard capture (WASD) + mouse-look pointer capture ---
+// Clicking the stage captures input. We request Pointer Lock so raw mouse
+// movement drives look/pan (I J K L) instead of the old IJKL keys.
+function requestCapture(){
+  state.capturing = true;
+  stage.focus();
+  if(stage.requestPointerLock){
+    try{ stage.requestPointerLock(); }catch{}
+  }
+  renderKeys();
+}
+stage.addEventListener("click", requestCapture);
+
 document.addEventListener("keydown",(e)=>{
   if(!state.capturing) return;
-  if(e.code === "Escape"){ state.capturing=false; state.pressed.clear(); renderKeys(); return; }
+  if(e.code === "Escape"){
+    state.capturing=false; state.pressed.clear();
+    if(document.exitPointerLock) try{ document.exitPointerLock(); }catch{}
+    renderKeys(); return;
+  }
   const k = KEY_FROM_CODE[e.code];
-  if(k && VALID_KEYS.has(k)){ e.preventDefault(); state.pressed.add(k); renderKeys(); }
+  if(k && MOVE_KEYS.has(k)){ e.preventDefault(); state.pressed.add(k); renderKeys(); }
 });
 document.addEventListener("keyup",(e)=>{
   const k = KEY_FROM_CODE[e.code];
   if(k){ state.pressed.delete(k); renderKeys(); }
 });
 
+// --- Mouse-look: convert pointer movement into look/pan keys (I J K L) ---
+// I = look up, K = look down, J = look left, L = look right. A small deadzone
+// avoids jitter; each look direction is held briefly after motion then released
+// so a continuous drag/move keeps looking while a still mouse stops looking.
+const LOOK_DEADZONE = 2;          // px of movement before a look direction fires
+let lookReleaseTimer = null;
+function applyMouseLook(dx, dy){
+  if(!state.capturing) return;
+  // Clear previous look keys; movement (WASD) is untouched.
+  let changed = false;
+  for(const k of LOOK_KEYS){ if(state.pressed.delete(k)) changed = true; }
+
+  if(Math.abs(dx) > LOOK_DEADZONE){
+    state.pressed.add(dx > 0 ? "L" : "J"); changed = true;   // right / left
+  }
+  if(Math.abs(dy) > LOOK_DEADZONE){
+    state.pressed.add(dy > 0 ? "K" : "I"); changed = true;   // down / up
+  }
+  if(changed) renderKeys();
+
+  // Auto-release look keys shortly after the mouse stops moving.
+  if(lookReleaseTimer) clearTimeout(lookReleaseTimer);
+  lookReleaseTimer = setTimeout(()=>{
+    let cleared = false;
+    for(const k of LOOK_KEYS){ if(state.pressed.delete(k)) cleared = true; }
+    if(cleared) renderKeys();
+  }, 120);
+}
+document.addEventListener("mousemove",(e)=>{
+  if(!state.capturing) return;
+  // Prefer raw movement deltas (available under pointer lock); fall back to
+  // client-space deltas for browsers that deny/lack pointer lock.
+  const dx = (e.movementX !== undefined) ? e.movementX : 0;
+  const dy = (e.movementY !== undefined) ? e.movementY : 0;
+  applyMouseLook(dx, dy);
+});
+// Track pointer-lock state so the badge reflects capture accurately.
+document.addEventListener("pointerlockchange", ()=>{
+  if(document.pointerLockElement !== stage){
+    // Pointer released (e.g. Esc pressed by the browser): drop look keys.
+    let cleared = false;
+    for(const k of LOOK_KEYS){ if(state.pressed.delete(k)) cleared = true; }
+    if(cleared) renderKeys();
+  }
+});
+
 promptEl.addEventListener("input", ()=>{ state.prompt = promptEl.value; });
 
 // --- Start / Stop ---