Update app.py

app.py

@@ -949,111 +949,111 @@ with gr.Blocks(css=BASE_CSS, title="ForgeCaptions") as demo:
             export_txt_btn  = gr.Button("Export captions as .txt (zip)")
             txt_zip         = gr.File(label="TXT zip", visible=False)
 
-gr.HTML("""
-<script>
-(() => {
-  // ---- Config: your wrapper IDs
-  const GAL_WRAP_SEL = "#cfGal";        // wrapper around the gallery
-  const TABLE_WRAP_SEL = "#cfTableWrap"; // wrapper around your table
-
-  // ---- Helpers
-  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
-
-  function findGalleryHost() {
-    const wrap = document.querySelector(GAL_WRAP_SEL);
-    if (!wrap) return null;
-    // Prefer explicit gallery node if present; otherwise use wrapper
-    return wrap.querySelector('[data-testid="gallery"], [data-testid="image-gallery"]') || wrap;
-  }
-
-  function findTableHost() {
-    return document.querySelector(TABLE_WRAP_SEL);
-  }
-
-  function setMaxHeights(gal, tab) {
-    const targetH = clamp(tab.clientHeight || 520, 360, 520);
-    gal.style.maxHeight = targetH + "px";
-    gal.style.overflowY = "auto";
-    tab.style.maxHeight = targetH + "px";
-    tab.style.overflowY = "auto";
-  }
-
-  function attachScrollSync(a, b) {
-    if (!a || !b) return () => {};
-    let lock = false;
-
-    // Use scroll ratio so different scrollHeights stay aligned
-    const sync = (src, dst) => {
-      const maxSrc = Math.max(1, src.scrollHeight - src.clientHeight);
-      const r = src.scrollTop / maxSrc;
-      const maxDst = Math.max(1, dst.scrollHeight - dst.clientHeight);
-      const next = r * maxDst;
-      if (Math.abs(dst.scrollTop - next) > 1) {
-        dst.scrollTop = next;
+    gr.HTML("""
+    <script>
+    (() => {
+      // ---- Config: your wrapper IDs
+      const GAL_WRAP_SEL = "#cfGal";        // wrapper around the gallery
+      const TABLE_WRAP_SEL = "#cfTableWrap"; // wrapper around your table
+    
+      // ---- Helpers
+      const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+    
+      function findGalleryHost() {
+        const wrap = document.querySelector(GAL_WRAP_SEL);
+        if (!wrap) return null;
+        // Prefer explicit gallery node if present; otherwise use wrapper
+        return wrap.querySelector('[data-testid="gallery"], [data-testid="image-gallery"]') || wrap;
       }
-    };
-
-    const onA = () => { if (lock) return; lock = true; requestAnimationFrame(() => { sync(a, b); lock = false; }); };
-    const onB = () => { if (lock) return; lock = true; requestAnimationFrame(() => { sync(b, a); lock = false; }); };
-
-    a.addEventListener("scroll", onA, { passive: true });
-    b.addEventListener("scroll", onB, { passive: true });
-
-    // Return cleanup
-    return () => {
-      a.removeEventListener("scroll", onA);
-      b.removeEventListener("scroll", onB);
-    };
-  }
-
-  let cleanupScroll = null;
-  let resizeObs = null;
-
-  function wireUp() {
-    const gal = findGalleryHost();
-    const tab = findTableHost();
-    if (!gal || !tab) return false;
-
-    // (Re)apply heights & listeners
-    setMaxHeights(gal, tab);
-    if (cleanupScroll) cleanupScroll();
-    cleanupScroll = attachScrollSync(gal, tab);
-
-    // Keep heights in sync on resize/content changes
-    if (resizeObs) resizeObs.disconnect();
-    resizeObs = new ResizeObserver(() => setMaxHeights(gal, tab));
-    resizeObs.observe(tab);
-    resizeObs.observe(gal);
-
-    return true;
-  }
-
-  // First attempt immediately (fast path)
-  if (wireUp()) return;
-
-  // Observe DOM for late mounts / Gradio re-renders
-  const mo = new MutationObserver(() => {
-    if (wireUp()) {
-      // Once wired, continue watching for *re-renders* to re-wire
-      // If you prefer, remove this `disconnect()` to keep watching forever
-      // but then you should also detect detach and clean up.
-      // Here we keep observing to handle re-renders:
-    }
-  });
-
-  mo.observe(document.documentElement || document.body, {
-    childList: true,
-    subtree: true,
-  });
-
-  // Optional: cleanup on page unload
-  window.addEventListener("beforeunload", () => {
-    mo.disconnect();
-    if (resizeObs) resizeObs.disconnect();
-    if (cleanupScroll) cleanupScroll();
-  });
-})();
-</script> """)
+    
+      function findTableHost() {
+        return document.querySelector(TABLE_WRAP_SEL);
+      }
+    
+      function setMaxHeights(gal, tab) {
+        const targetH = clamp(tab.clientHeight || 520, 360, 520);
+        gal.style.maxHeight = targetH + "px";
+        gal.style.overflowY = "auto";
+        tab.style.maxHeight = targetH + "px";
+        tab.style.overflowY = "auto";
+      }
+    
+      function attachScrollSync(a, b) {
+        if (!a || !b) return () => {};
+        let lock = false;
+    
+        // Use scroll ratio so different scrollHeights stay aligned
+        const sync = (src, dst) => {
+          const maxSrc = Math.max(1, src.scrollHeight - src.clientHeight);
+          const r = src.scrollTop / maxSrc;
+          const maxDst = Math.max(1, dst.scrollHeight - dst.clientHeight);
+          const next = r * maxDst;
+          if (Math.abs(dst.scrollTop - next) > 1) {
+            dst.scrollTop = next;
+          }
+        };
+    
+        const onA = () => { if (lock) return; lock = true; requestAnimationFrame(() => { sync(a, b); lock = false; }); };
+        const onB = () => { if (lock) return; lock = true; requestAnimationFrame(() => { sync(b, a); lock = false; }); };
+    
+        a.addEventListener("scroll", onA, { passive: true });
+        b.addEventListener("scroll", onB, { passive: true });
+    
+        // Return cleanup
+        return () => {
+          a.removeEventListener("scroll", onA);
+          b.removeEventListener("scroll", onB);
+        };
+      }
+    
+      let cleanupScroll = null;
+      let resizeObs = null;
+    
+      function wireUp() {
+        const gal = findGalleryHost();
+        const tab = findTableHost();
+        if (!gal || !tab) return false;
+    
+        // (Re)apply heights & listeners
+        setMaxHeights(gal, tab);
+        if (cleanupScroll) cleanupScroll();
+        cleanupScroll = attachScrollSync(gal, tab);
+    
+        // Keep heights in sync on resize/content changes
+        if (resizeObs) resizeObs.disconnect();
+        resizeObs = new ResizeObserver(() => setMaxHeights(gal, tab));
+        resizeObs.observe(tab);
+        resizeObs.observe(gal);
+    
+        return true;
+      }
+    
+      // First attempt immediately (fast path)
+      if (wireUp()) return;
+    
+      // Observe DOM for late mounts / Gradio re-renders
+      const mo = new MutationObserver(() => {
+        if (wireUp()) {
+          // Once wired, continue watching for *re-renders* to re-wire
+          // If you prefer, remove this `disconnect()` to keep watching forever
+          // but then you should also detect detach and clean up.
+          // Here we keep observing to handle re-renders:
+        }
+      });
+    
+      mo.observe(document.documentElement || document.body, {
+        childList: true,
+        subtree: true,
+      });
+    
+      // Optional: cleanup on page unload
+      window.addEventListener("beforeunload", () => {
+        mo.disconnect();
+        if (resizeObs) resizeObs.disconnect();
+        if (cleanupScroll) cleanupScroll();
+      });
+    })();
+    </script> """)
 
 
 # ---- Chunking logic