Update app.py

app.py

@@ -1,7 +1,17 @@
 import gradio as gr
 
-# 1) 配置：区域名字 -> (bbox像素坐标, (before_path, after_path))
-# bbox = (x1, y1, x2, y2) 以 liverpool_map.png 的像素坐标为准（左上角为(0,0)）
+"""
+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")),
@@ -9,48 +19,63 @@ REGIONS = {
     "St Helens / Knowsley":      ((420, 160, 560, 320), ("sthelens_before.jpg", "sthelens_after.jpg")),
 }
 
-DEFAULT_REGION = list(REGIONS.keys())[0]
+DEFAULT_REGION = next(iter(REGIONS.keys()))
 
-def pick_region_from_click(evt: gr.SelectData):
-    # evt.index 是 (x, y)
+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
-            return name, (before, after), gr.update(value=f"Selected: **{name}**")
-    # 没点到任何区域：不更新slider，只更新提示
-    return gr.update(), gr.update(), gr.update(value="Selected: **(click inside a region box)**")
+            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 滑动对比。")
+    gr.Markdown(
+        "## Liverpool Groundwater Demo (0-training)\n"
+        "左侧点击不同区域，右侧显示该区域的 **before/after** 影像滑动对比。"
+    )
 
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### 1) Click a region on the map")
+            gr.Markdown("### Map (click)")
             map_img = gr.Image(
                 value="liverpool_map.jpg",
-                label="Liverpool City Region Map (click)",
+                label="Liverpool City Region Map",
                 interactive=True,
-                show_download_button=False
             )
             status = gr.Markdown(f"Selected: **{DEFAULT_REGION}**")
 
         with gr.Column(scale=1):
-            gr.Markdown("### 2) Before / After slider")
+            gr.Markdown("### Before / After Slider")
             before0, after0 = REGIONS[DEFAULT_REGION][1]
             slider = gr.ImageSlider(
                 value=(before0, after0),
                 label="Drag to compare",
-                interactive=False
+                interactive=False,
+            )
+            region_name = gr.Textbox(
+                value=DEFAULT_REGION,
+                label="Region",
+                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_from_click,
+        fn=pick_region,
         inputs=[],
-        outputs=[region_name, slider, status]
+        outputs=[region_name, slider, status],
     )
 
 demo.launch()