Drop the comparison slider, drag the zoom point, allow 8 steps

app.py

@@ -1,4 +1,4 @@
-"""OracleZoom demo: upload a photo, watch it zoom 4x to 256x."""
+"""OracleZoom demo: upload a photo, watch it zoom 4x and deeper."""
 import gradio as gr
 import spaces
 from PIL import Image, ImageDraw
@@ -10,15 +10,15 @@ import zoom
 MODELS = zoom.Models()
 
 UPSCALE = 4
+MAX_STEPS = 8
 ACCENT = "#f5b942"
-LABELS = {1: "input", 4: "4x", 16: "16x", 64: "64x", 256: "256x"}
 SAMPLES = ["0479", "0064", "0245", "0393", "0457"]
 
 # Shipped output of a real run, so the page shows the payoff before anyone spends any quota.
+EXAMPLE_INPUT = "samples/example_1x.png"
 EXAMPLE_CLIP = "samples/example_zoom.mp4"
-EXAMPLE_LEVELS = [("samples/example_1x.png", "input")] + \
+EXAMPLE_LEVELS = [(EXAMPLE_INPUT, "input")] + \
                  [(f"samples/example_{f}x.png", f"{f}x") for f in (4, 16, 64, 256)]
-EXAMPLE_COMPARE = ("samples/example_256x_input.png", "samples/example_256x.png")
 EXAMPLE_NOTE = "_An example run. Upload a photo above to make your own._"
 
 HEADER = """
@@ -26,7 +26,7 @@ HEADER = """
   <h1 style="margin:0;font-size:2.1em;letter-spacing:-.02em">OracleZoom 🔎</h1>
   <p style="margin:.5em 0 .9em;font-size:1.08em;line-height:1.5;opacity:.85">
     Zoom into any photo far past what it holds. Four steps of 4x take you to
-    <b>256x</b>, each one drawn from the last.
+    <b>256x</b>, each one drawn from the last. Push it to eight steps if you want.
   </p>
   <p style="margin:0;font-size:.95em">
     <a href="https://arxiv.org/abs/2609.06490">Paper</a> &nbsp;·&nbsp;
@@ -37,50 +37,76 @@ HEADER = """
 </div>
 """
 
-HOW = """
-##### How it goes
+LIMITS = ("Past the first step or two there is no ground truth left to recover, so the deep "
+          "levels are **plausible detail, not measured detail**. The zoom is a crop of your "
+          "photo, not a real lens moving closer.")
 
-1. Crop your photo to a 512 square.
-2. Zoom 4x into the amber box. That crop is blurry, so a vision language model describes it.
-3. Super-resolve it with that description as the guide.
-4. Repeat on the result. Four rounds reach 256x.
-
-Runs free on ZeroGPU, so the first zoom after a quiet spell waits for a GPU.
-"""
-
-FOOTER = """
-### What you are looking at
-
-Standard super-resolution models break down well before 16x. OracleZoom gets to 256x by
-zooming one 4x step at a time and feeding each result into the next step. At every step a
-vision language model writes a short description of the crop, and that description guides
-the detail the super-resolution model draws.
-
-Past the first step or two there is no ground truth to recover, so the deep levels are
-**plausible detail, not measured detail**. The zoom point is a crop of your photo, not a
-real camera lens moving closer. Read the paper for what we do and do not claim.
-
-```bibtex
-@inproceedings{dipta2027oraclezoom,
-  title  = {OracleZoom: Reference-Constrained Recursive Super-Resolution},
-  author = {Roy Dipta, Shubhashis and Saha, Sourajit and Saha, Shaswati and Sarwar, Nobin},
-  year   = {2027}
-}
-```
-"""
+BIBTEX = """@misc{dipta2026oraclezoomonpolicyselfdistillationinspired,
+  title         = {OracleZoom: On-Policy Self-Distillation Inspired Reference-Constrained Recursive Image Super Resolution},
+  author        = {Shubhashis Roy Dipta and Sourajit Saha and Shaswati Saha and Nobin Sarwar},
+  year          = {2026},
+  eprint        = {2609.06490},
+  archivePrefix = {arXiv},
+  primaryClass  = {cs.CV},
+  url           = {https://arxiv.org/abs/2609.06490}
+}"""
 
 CSS = """
 #hero video {border-radius:12px}
 .contain {max-width:1400px !important}
 footer {display:none !important}
+#zoom-target img {cursor:grab}
+#zoom-target img:active {cursor:grabbing}
+/* a deep run wraps to two rows; keep any scrollbar from rendering light on a dark theme */
+#levels, #levels * {scrollbar-color: var(--border-color-primary) transparent}
 """
 
+# Drag the zoom point straight on the preview. Throttled, because every move asks the server to
+# redraw. Clicking and the two sliders both still work if this ever stops matching the DOM.
+DRAG_JS = """
+() => {
+  if (window.__ozDrag) return;              // load can fire more than once; keep one state
+  const S = window.__ozDrag = {on: false, last: 0};
+  const send = (e, force) => {
+    const img = document.querySelector('#zoom-target img');
+    if (!img) return;
+    const now = Date.now();
+    if (!force && now - S.last < 120) return;
+    S.last = now;
+    const r = img.getBoundingClientRect();
+    const at = (v, lo, span) => Math.min(Math.max((v - lo) / span, 0), 1);
+    for (const [id, v] of [['zoom-x', at(e.clientX, r.left, r.width)],
+                           ['zoom-y', at(e.clientY, r.top, r.height)]]) {
+      const el = document.querySelector('#' + id + ' input[type=range]');
+      if (!el) continue;
+      el.value = v.toFixed(2);
+      el.dispatchEvent(new Event('input', {bubbles: true}));
+    }
+  };
+  // delegated off document, so Gradio swapping the img or the sliders mid-drag is harmless
+  document.addEventListener('mousedown', e => {
+    if (!e.target.closest('#zoom-target img')) return;
+    S.on = true; e.preventDefault(); send(e, true);
+  }, true);
+  document.addEventListener('mousemove', e => { if (S.on) send(e, false); });
+  document.addEventListener('mouseup', e => { if (S.on) { S.on = false; send(e, true); } });
+}
+"""
+
+
+def label(factor):
+    return "input" if factor == 1 else f"{factor}x"
+
 
 def preview(image, levels, cx, cy):
-    """Show where the zoom will go, so nobody spends a run to find out."""
-    if image is None:
-        return None
-    canvas = geometry.resize_and_center_crop(image).convert("RGB")
+    """Show where the zoom will go, so nobody spends a run to find out.
+
+    Falls back to the shipped example when nothing is uploaded yet. Returning None here instead
+    would blank the box the moment a visitor touched any slider, taking the one thing that
+    explains what the amber boxes mean with it.
+    """
+    canvas = geometry.resize_and_center_crop(
+        image if image is not None else Image.open(EXAMPLE_INPUT)).convert("RGB")
     rects = geometry.nested_rects(canvas.size, int(levels), UPSCALE, (cx, cy))
     dimmed = Image.blend(canvas, Image.new("RGB", canvas.size, (0, 0, 0)), 0.45)
     dimmed.paste(canvas.crop(rects[0]), rects[0][:2])
@@ -107,24 +133,22 @@ def _stream(image, levels, cx, cy):
     if image is None:
         raise gr.Error("Upload a photo first.")
     levels = int(levels)
-    gallery, prompts, frames, compare = [], [], [], None
-    for step, factor, prompt, blurry, result in zoom.zoom(MODELS, image, levels, UPSCALE, (cx, cy)):
+    gallery, prompts, frames = [], [], []
+    for step, factor, prompt, _blurry, result in zoom.zoom(MODELS, image, levels, UPSCALE, (cx, cy)):
         frames.append(result)
-        gallery.append((result, LABELS.get(factor, f"{factor}x")))
+        gallery.append((result, label(factor)))
         if step:
-            compare = (blurry, result)
-            prompts.append(f"**{LABELS[factor]}** &nbsp; {prompt or '_(no prompt)_'}")
+            prompts.append(f"**{label(factor)}** &nbsp; {prompt or '_(no prompt)_'}")
         left = levels - step
         if not step:
             status = f"Warmed up. Zooming {levels} step{'s' if levels > 1 else ''}…"
         elif left:
-            status = f"At **{LABELS[factor]}**, {left} step{'s' if left > 1 else ''} to go…"
+            status = f"At **{label(factor)}**, {left} step{'s' if left > 1 else ''} to go…"
         else:
-            status = f"At **{LABELS[factor]}**. Rendering the clip…"
+            status = f"At **{label(factor)}**. Rendering the clip…"
         # First yield clears any clip left from the previous run; later ones leave it alone.
-        yield status, (None if not step else gr.skip()), gallery, compare, "\n\n".join(prompts)
-    yield ("Done. 🔎", video.render(frames, UPSCALE, (cx, cy)), gallery, compare,
-           "\n\n".join(prompts))
+        yield status, (None if not step else gr.skip()), gallery, "\n\n".join(prompts)
+    yield "Done. 🔎", video.render(frames, UPSCALE, (cx, cy)), gallery, "\n\n".join(prompts)
 
 
 @spaces.GPU(duration=estimate_duration)
@@ -140,48 +164,53 @@ def run_example(image):
 
 
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="amber"), css=CSS,
-               title="OracleZoom: zoom to 256x") as demo:
+               title="OracleZoom: zoom past 256x") as demo:
     gr.HTML(HEADER)
     with gr.Row():
         with gr.Column(scale=4):
-            image = gr.Image(label="Your photo", type="pil", height=300, sources=["upload", "clipboard"])
+            image = gr.Image(label="Your photo", type="pil", height=300,
+                             sources=["upload", "clipboard"])
             # Seeded with the example so the box overlay explains itself before any upload.
-            target = gr.Image(value=preview(Image.open(EXAMPLE_LEVELS[0][0]), 4, 0.5, 0.5),
-                              label="Click to move the zoom point", type="pil",
+            target = gr.Image(value=preview(None, 4, 0.5, 0.5), elem_id="zoom-target",
+                              label="Drag to move the zoom point", type="pil",
                               interactive=False, height=340, show_download_button=False)
-            levels = gr.Slider(1, 4, value=4, step=1, label="Zoom steps",
-                               info="1 step = 4x, 4 steps = 256x. Fewer steps finish sooner.")
-            with gr.Accordion("Set the point by hand", open=False):
-                cx = gr.Slider(0, 1, value=0.5, step=0.01, label="Horizontal")
-                cy = gr.Slider(0, 1, value=0.5, step=0.01, label="Vertical")
+            levels = gr.Slider(1, MAX_STEPS, value=4, step=1, label="Zoom steps",
+                               info=f"Each step is {UPSCALE}x. 4 steps reach 256x, "
+                                    f"{MAX_STEPS} reach {UPSCALE ** MAX_STEPS}x. "
+                                    f"Fewer steps finish sooner.")
+            with gr.Row():
+                cx = gr.Slider(0, 1, value=0.5, step=0.01, label="Horizontal", elem_id="zoom-x")
+                cy = gr.Slider(0, 1, value=0.5, step=0.01, label="Vertical", elem_id="zoom-y")
             go = gr.Button("🔎 Zoom in", variant="primary", size="lg")
-            gr.Markdown(HOW)
         with gr.Column(scale=6):
             status = gr.Markdown("Upload a photo, then press **Zoom in**.")
             clip = gr.Video(value=EXAMPLE_CLIP, label="The zoom", elem_id="hero", autoplay=True,
                             loop=True, show_share_button=True, height=400)
-            gallery = gr.Gallery(value=EXAMPLE_LEVELS, label="Every level", columns=5, height=175,
-                                 object_fit="cover", show_download_button=True)
-            compare = gr.ImageSlider(value=EXAMPLE_COMPARE, height=400,
-                                     label="256x: plain enlargement (left) vs OracleZoom (right)")
-            gr.Markdown("##### What the model said it saw, step by step")
+            gallery = gr.Gallery(value=EXAMPLE_LEVELS, label="Every level", columns=5, height=205,
+                                 elem_id="levels", object_fit="cover", show_download_button=True)
+            gr.Markdown("##### Vision Language Model at each step:")
             prompts = gr.Markdown(EXAMPLE_NOTE)
 
     controls = [image, levels, cx, cy]
+    outputs = [status, clip, gallery, prompts]
     for c in controls:
         c.change(preview, controls, target, show_api=False)
     target.select(pick_point, None, [cx, cy], show_api=False)
-    go.click(run, controls, [status, clip, gallery, compare, prompts])
+    go.click(run, controls, outputs)
 
     gr.Examples(
         examples=[f"samples/{n}.png" for n in SAMPLES],
         inputs=[image],
-        outputs=[status, clip, gallery, compare, prompts],
+        outputs=outputs,
         fn=run_example,
         cache_examples=True,
         label="Or try one of these (already computed, costs you nothing)",
     )
-    gr.Markdown(FOOTER)
+    gr.Markdown(f"{LIMITS} See the [paper](https://arxiv.org/abs/2609.06490) for the claims we "
+                f"do and do not make.\n\n### Cite our work")
+    gr.Code(value=BIBTEX, language=None, show_label=False, container=False)
+
+    demo.load(None, None, None, js=DRAG_JS, show_api=False)
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch()