PLAN.md

Add Shift+Scroll Zoom to Map Georectification App

Context

The Gradio app displays map images via gr.Image components but has no zoom capability. For precise GCP placement and coordinate querying, users need to zoom into the image. The simplest approach is injecting custom JavaScript.

Approach

Inject a JS snippet via the js parameter on gr.Blocks() that:

1. Listens for wheel events on image containers (.image-container img)
2. When shiftKey is held, prevents default scroll and adjusts a CSS transform: scale() + transform-origin on the image
3. Supports zoom in/out with shift+scroll, clamped to a reasonable range (e.g. 1x–10x)
4. Sets overflow: hidden on the image container so zoomed content is clipped properly

File to modify

• /home/inverse/workspace/images/app.py — single change

Change detail

1. Define a ZOOM_JS string constant containing the JavaScript
2. Pass js=ZOOM_JS to gr.Blocks(title="Map Georectification", js=ZOOM_JS)

The JS will:

• Use event delegation on document for wheel events
• Find the closest .image-container ancestor
• Track zoom level per element (stored as a data attribute)
• Apply transform: scale(zoom) with transform-origin at the cursor position
• Clamp zoom between 1x and 10x
• Reset to 1x on double-click (bonus)

Verification

• uv run app.py and open in browser
• Hold Shift and scroll over either image — it should zoom in/out
• Release Shift — normal page scroll resumes
• Image click events (GCP placement, coordinate query) should still work at any zoom level