app.py

import gradio as gr

"""
Files expected in repo root:
- liverpool_map.jpg
- liverpool_before.jpg, liverpool_after.jpg
- sefton_before.jpg,   sefton_after.jpg
- wirral_before.jpg,   wirral_after.jpg
- sthelens_before.jpg, sthelens_after.jpg
"""

# Region config:
# name -> ((x1,y1,x2,y2), (before_path, after_path))
# Coordinates are pixel coords on liverpool_map.jpg (top-left is (0,0))
REGIONS = {
    "Liverpool (City + Mersey)": ((120, 180, 260, 320), ("liverpool_before.jpg", "liverpool_after.jpg")),
    "Sefton Coast":              ((260,  80, 420, 220), ("sefton_before.jpg",   "sefton_after.jpg")),
    "Wirral":                    (( 30, 200, 140, 360), ("wirral_before.jpg",   "wirral_after.jpg")),
    "St Helens / Knowsley":      ((420, 160, 560, 320), ("sthelens_before.jpg", "sthelens_after.jpg")),
}

DEFAULT_REGION = next(iter(REGIONS.keys()))

def pick_region(evt: gr.SelectData):
    """
    Triggered when user clicks on the left map image.
    evt.index is (x, y) pixel coordinate.
    """
    x, y = evt.index
    for name, (bbox, paths) in REGIONS.items():
        x1, y1, x2, y2 = bbox
        if x1 <= x <= x2 and y1 <= y <= y2:
            before, after = paths
            status_md = f"Selected: **{name}**  \nClick: ({x}, {y})"
            return name, (before, after), status_md

    # If clicked outside any region bbox: don't update region/slider, only show coords
    return (
        gr.update(),  # region textbox stays
        gr.update(),  # slider stays
        f"Selected: **(click inside a region box)**  \nClick: ({x}, {y})",
    )

with gr.Blocks() as demo:
    gr.Markdown(
        "## Liverpool Groundwater Demo (0-training)\n"
        "左侧点击不同区域，右侧显示该区域的 **before/after** 影像滑动对比。"
    )

    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("### Map (click)")
            map_img = gr.Image(
                value="liverpool_map.jpg",
                label="Liverpool City Region Map",
                interactive=True,
            )
            status = gr.Markdown(f"Selected: **{DEFAULT_REGION}**")

        with gr.Column(scale=1):
            gr.Markdown("### Before / After Slider")
            before0, after0 = REGIONS[DEFAULT_REGION][1]
            slider = gr.ImageSlider(
                value=(before0, after0),
                label="Drag to compare",
                interactive=False,
            )
            region_name = gr.Textbox(
                value=DEFAULT_REGION,
                label="Region",
                interactive=False,
            )

    # Click event: update region_name, slider, status
    map_img.select(
        fn=pick_region,
        inputs=[],
        outputs=[region_name, slider, status],
    )

demo.launch()