Auto-zoom tall workspace images toward width

app.py

@@ -337,6 +337,98 @@ math[display="block"] { display: block; overflow-x: auto; max-width: 100%; }
   });
   observer.observe(document.body, { childList: true, subtree: true });
 })();
+
+(() => {
+  if (window.__ocrWorkspaceZoomInit) return;
+  window.__ocrWorkspaceZoomInit = true;
+
+  const stateByRoot = new WeakMap();
+  const targetZoomPct = 100;
+  const tinyFitThresholdPct = 45;
+
+  const getState = (root) => {
+    let state = stateByRoot.get(root);
+    if (!state) {
+      state = { busy: false, applied: false, lastSeenZoom: null, lastAutoAt: 0 };
+      stateByRoot.set(root, state);
+    }
+    return state;
+  };
+
+  const parseZoomPct = (root) => {
+    const zoomNode = root.querySelector(".zoom-number span[role='button']");
+    if (!zoomNode) return null;
+    const m = (zoomNode.textContent || "").match(/([0-9]+(?:\\.[0-9]+)?)\\s*%/);
+    return m ? parseFloat(m[1]) : null;
+  };
+
+  const getZoomInBtn = (root) =>
+    root.querySelector("button[aria-label='Zoom in'], button[title='Zoom in']");
+
+  const isWorkspaceRoot = (root) =>
+    !!root.querySelector(".pixi-target") && !!root.querySelector(".zoom-number");
+
+  const maybeAutoZoom = (root) => {
+    if (!isWorkspaceRoot(root)) return;
+
+    const state = getState(root);
+    const now = Date.now();
+    const zoomPct = parseZoomPct(root);
+    if (zoomPct == null) return;
+
+    // A drop from high zoom to low zoom usually means a new image was loaded.
+    if (state.lastSeenZoom != null && state.lastSeenZoom > 70 && zoomPct < 35) {
+      state.applied = false;
+    }
+    state.lastSeenZoom = zoomPct;
+
+    if (state.busy || state.applied) return;
+    if (zoomPct > tinyFitThresholdPct) return;
+    if (now - state.lastAutoAt < 1200) return;
+
+    const zoomInBtn = getZoomInBtn(root);
+    if (!zoomInBtn) return;
+
+    state.busy = true;
+    state.lastAutoAt = now;
+    let steps = 0;
+
+    const step = () => {
+      const current = parseZoomPct(root);
+      if (current == null || current >= targetZoomPct || steps >= 20) {
+        state.busy = false;
+        state.applied = true;
+        return;
+      }
+      zoomInBtn.click();
+      steps += 1;
+      setTimeout(step, 80);
+    };
+
+    setTimeout(step, 90);
+  };
+
+  const attachRootObserver = (root) => {
+    if (root.dataset.ocrZoomObserved === "1") return;
+    root.dataset.ocrZoomObserved = "1";
+
+    const obs = new MutationObserver(() => maybeAutoZoom(root));
+    obs.observe(root, { childList: true, subtree: true, characterData: true });
+
+    setTimeout(() => maybeAutoZoom(root), 200);
+    setTimeout(() => maybeAutoZoom(root), 800);
+  };
+
+  const scan = () => {
+    document.querySelectorAll("[data-testid='image']").forEach((root) => {
+      if (isWorkspaceRoot(root)) attachRootObserver(root);
+    });
+  };
+
+  scan();
+  const pageObs = new MutationObserver(scan);
+  pageObs.observe(document.body, { childList: true, subtree: true });
+})();
 </script>
 """
 
@@ -1585,7 +1677,7 @@ with gr.Blocks(**blocks_kwargs) as demo:
         2. Choose **Input Scope**:
            - `Entire Page` for the full page.
            - `Selected Region` for a specific area.
-        2a. Workspace keeps native image resolution for clarity (especially equations); use in-canvas zoom/pan as needed.
+        2a. Workspace keeps native image resolution for clarity. For very tall pages, it auto-boosts from tiny fit view toward width-friendly zoom.
         3. For `Selected Region`, use the **Image Workspace**:
            - Recommended: freehand selection (draw/highlight target); app uses an automatic bounding box around your marks.
            - Optional rectangle selection: use the **Crop** tool.