# 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