update UI to improve Ground Truth image handling and adjust height for better alignment

app.py

@@ -634,7 +634,7 @@ def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_l
         zoom_start=7,
         tiles='OpenStreetMap',
         width='100%',
-        height='600px'  # 設定固定高度，與 Ground Truth 圖片匹配
+        height='800px'  # 設定固定高度 800，與 Ground Truth 圖片匹配
     )
 
     # 如果有震央位置，標記震央
@@ -759,6 +759,16 @@ def load_ground_truth_image(event_name):
     return None
 
 
+def on_event_select(event_name):
+    """當選擇事件時立即載入 Ground Truth 圖片"""
+    ground_truth_path = load_ground_truth_image(event_name)
+    if ground_truth_path:
+        return ground_truth_path
+    else:
+        # 如果找不到圖片，返回 None（Gradio 會顯示空白）
+        return None
+
+
 def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
     """創建輸入測站分布地圖：顯示所有測站 + 突顯被選中的 25 個"""
     import folium
@@ -770,7 +780,7 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
         zoom_start=8,
         tiles='OpenStreetMap',
         width='100%',
-        height='500px'
+        height='800px'
     )
 
     # 建立被選中測站的 set（用於快速查詢）
@@ -882,9 +892,12 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
     return m
 
 
-def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, epicenter_lat):
+def load_and_display_waveform(event_name, start_time, duration, epicenter_lon, epicenter_lat):
     """載入並顯示波形，讓使用者確認範圍"""
     try:
+        # 計算結束時間
+        end_time = start_time + duration
+
         # 1. 載入完整的 mseed 檔案
         logger.info(f"載入地震事件: {event_name}")
         st = load_waveform(event_name)
@@ -905,7 +918,8 @@ def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, e
         station_map_html = station_map._repr_html_()
 
         info_text = f"✅ 已載入波形資料\n"
-        info_text += f"選取時間範圍: {start_time:.1f} - {end_time:.1f} 秒\n"
+        info_text += f"開始時間: {start_time:.1f} 秒\n"
+        info_text += f"時間長度: {duration:.1f} 秒 ({start_time:.1f} - {end_time:.1f})\n"
         info_text += f"震央位置: ({epicenter_lon:.4f}, {epicenter_lat:.4f})\n"
         info_text += f"選擇了 {len(selected_stations)} 個最近的測站\n"
         info_text += f"請確認波形範圍後，點擊「執行預測」按鈕"
@@ -920,9 +934,12 @@ def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, e
         return None, None, f"錯誤: {str(e)}", gr.update(interactive=False)
 
 
-def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter_lat):
+def predict_intensity(event_name, start_time, duration, epicenter_lon, epicenter_lat):
     """執行震度預測"""
     try:
+        # 計算結束時間
+        end_time = start_time + duration
+
         # 1. 載入完整的 mseed 檔案
         logger.info(f"載入地震事件: {event_name}")
         st = load_waveform(event_name)
@@ -1018,9 +1035,11 @@ def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter
         # 10. 統計資訊
         max_intensity = max([calculate_intensity(pga, label=True) for pga in pga_list])
         stats = f"✅ 預測完成！\n"
-        stats += f"選取時間範圍: {start_time:.1f} - {end_time:.1f} 秒\n"
+        stats += f"開始時間: {start_time:.1f} 秒\n"
+        stats += f"時間長度: {duration:.1f} 秒 ({start_time:.1f} - {end_time:.1f})\n"
         stats += f"震央位置: ({epicenter_lon:.4f}, {epicenter_lat:.4f})\n"
         stats += f"使用測站數: {len(waveforms)} / 25\n"
+        stats += f"預測目標點數: {len(all_target_names)}\n"
         stats += f"預測最大震度: {max_intensity}"
 
         logger.info("預測完成！")
@@ -1066,8 +1085,8 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
             )
 
             with gr.Row():
-                start_slider = gr.Slider(0, 300, value=0, step=1, label="起始時間 (秒)")
-                end_slider = gr.Slider(0, 300, value=30, step=1, label="結束時間 (秒)")
+                start_slider = gr.Slider(0, 300, value=0, step=1, label="開始時間 (秒)")
+                duration_slider = gr.Slider(1, 60, value=30, step=1, label="時間長度 (秒)")
 
             gr.Markdown("### 震央位置")
             with gr.Row():
@@ -1095,7 +1114,12 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
         # 左下：Ground Truth
         with gr.Column(scale=1):
             gr.Markdown("## Ground Truth 震度分布")
-            ground_truth_image = gr.Image(label="實際觀測震度", type="filepath", height=600)
+            ground_truth_image = gr.Image(
+                label="實際觀測震度",
+                type="filepath",
+                height=800,
+                value=load_ground_truth_image(list(EARTHQUAKE_EVENTS.keys())[0])  # 初始載入第一個事件的 Ground Truth
+            )
 
         # 右下：預測震度地圖
         with gr.Column(scale=1):
@@ -1103,17 +1127,24 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
             intensity_map = gr.HTML(label="互動式震度地圖", elem_id="intensity_map")
 
     # 綁定事件
+    # 第零步：選擇事件時立即載入 Ground Truth
+    event_dropdown.change(
+        fn=on_event_select,
+        inputs=[event_dropdown],
+        outputs=[ground_truth_image]
+    )
+
     # 第一步：載入波形
     load_waveform_btn.click(
         fn=load_and_display_waveform,
-        inputs=[event_dropdown, start_slider, end_slider, epicenter_lon_input, epicenter_lat_input],
+        inputs=[event_dropdown, start_slider, duration_slider, epicenter_lon_input, epicenter_lat_input],
         outputs=[input_station_map, waveform_plot, info_output, predict_btn]
     )
 
     # 第二步：執行預測
     predict_btn.click(
         fn=predict_intensity,
-        inputs=[event_dropdown, start_slider, end_slider, epicenter_lon_input, epicenter_lat_input],
+        inputs=[event_dropdown, start_slider, duration_slider, epicenter_lon_input, epicenter_lat_input],
         outputs=[ground_truth_image, intensity_map, stats_output]
     )