add function to create input station map and update UI for waveform loading

app.py

@@ -754,6 +754,129 @@ def load_ground_truth_image(event_name):
     return None
 
 
+def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
+    """創建輸入測站分布地圖：顯示所有測站 + 突顯被選中的 25 個"""
+    import folium
+    from folium import plugins
+
+    # 創建地圖，中心點設在震央
+    m = folium.Map(
+        location=[epicenter_lat, epicenter_lon],
+        zoom_start=8,
+        tiles='OpenStreetMap',
+        width='100%',
+        height='500px'
+    )
+
+    # 建立被選中測站的 set（用於快速查詢）
+    selected_station_codes = {s["station"] for s in selected_stations}
+
+    # 1. 先繪製所有測站（灰色小點）
+    logger.info(f"繪製所有測站 ({len(site_info)} 個)...")
+    for idx, row in site_info.iterrows():
+        station_code = row["Station"]
+        lat = row["Latitude"]
+        lon = row["Longitude"]
+
+        # 跳過被選中的測站（稍後用不同樣式繪製）
+        if station_code in selected_station_codes:
+            continue
+
+        folium.CircleMarker(
+            location=[lat, lon],
+            radius=2,
+            popup=f'{station_code}',
+            tooltip=station_code,
+            color='gray',
+            fillColor='lightgray',
+            fillOpacity=0.4,
+            weight=1
+        ).add_to(m)
+
+    # 2. 標記震央（紅色星星）
+    folium.Marker(
+        [epicenter_lat, epicenter_lon],
+        popup=f'<b>震央</b><br>({epicenter_lat:.3f}, {epicenter_lon:.3f})',
+        icon=folium.Icon(color='red', icon='star', prefix='fa'),
+        tooltip='震央位置',
+        zIndexOffset=1000
+    ).add_to(m)
+
+    # 3. 標記被選中的 25 個測站（彩色大點）
+    for i, station_data in enumerate(selected_stations):
+        station_code = station_data["station"]
+        lat = station_data["latitude"]
+        lon = station_data["longitude"]
+        distance = station_data["distance"]
+
+        # 創建 popup 內容
+        popup_html = f"""
+        <div style="font-family: Arial; min-width: 150px;">
+            <h4 style="margin: 0 0 10px 0; color: #d63031;">{station_code}</h4>
+            <table style="width:100%;">
+                <tr><td><b>狀態：</b></td><td><span style="color: #00b894;">✓ 已選中</span></td></tr>
+                <tr><td><b>順序：</b></td><td>第 {i+1} 近</td></tr>
+                <tr><td><b>距離：</b></td><td>{distance:.2f}°</td></tr>
+                <tr><td><b>位置：</b></td><td>({lat:.3f}, {lon:.3f})</td></tr>
+            </table>
+        </div>
+        """
+
+        # 根據距離設定顏色
+        if i < 5:
+            color = 'green'
+        elif i < 15:
+            color = 'blue'
+        else:
+            color = 'orange'
+
+        folium.CircleMarker(
+            location=[lat, lon],
+            radius=10,
+            popup=folium.Popup(popup_html, max_width=250),
+            tooltip=f'✓ {station_code} (第{i+1}近)',
+            color='black',
+            fillColor=color,
+            fillOpacity=0.8,
+            weight=2,
+            zIndexOffset=500
+        ).add_to(m)
+
+    # 4. 添加圖例
+    total_stations = len(site_info)
+    legend_html = f'''
+    <div style="
+        position: fixed; 
+        top: 10px; left: 10px; 
+        width: 220px; 
+        background-color: white; 
+        border: 2px solid grey; 
+        z-index: 9999; 
+        font-size: 13px;
+        padding: 10px;
+        border-radius: 5px;
+        box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
+    ">
+        <h4 style="margin: 0 0 10px 0;">測站分布</h4>
+        <p style="margin: 5px 0;"><span style="color: red; font-size: 18px;">★</span> 震央</p>
+        <p style="margin: 5px 0;"><span style="color: lightgray;">●</span> 所有測站 ({total_stations} 個)</p>
+        <hr style="margin: 8px 0; border: none; border-top: 1px solid #ddd;">
+        <p style="margin: 5px 0; font-weight: bold;">被選中的測站：</p>
+        <p style="margin: 5px 0;"><span style="color: green; font-size: 16px;">●</span> 前 5 近</p>
+        <p style="margin: 5px 0;"><span style="color: blue; font-size: 16px;">●</span> 6-15 近</p>
+        <p style="margin: 5px 0;"><span style="color: orange; font-size: 16px;">●</span> 16-25 近</p>
+        <p style="margin: 5px 0; font-size: 11px; color: #666;">共選擇 {len(selected_stations)} 個測站</p>
+    </div>
+    '''
+
+    m.get_root().html.add_child(folium.Element(legend_html))
+
+    # 5. 添加全屏按鈕
+    plugins.Fullscreen().add_to(m)
+
+    return m
+
+
 def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, epicenter_lat):
     """載入並顯示波形，讓使用者確認範圍"""
     try:
@@ -772,6 +895,10 @@ def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, e
         # 3. 繪製波形
         waveform_plot = plot_waveform(st, selected_stations, start_time, end_time)
 
+        # 4. 創建輸入測站地圖
+        station_map = create_input_station_map(selected_stations, epicenter_lat, epicenter_lon)
+        station_map_html = station_map._repr_html_()
+
         info_text = f"✅ 已載入波形資料\n"
         info_text += f"選取時間範圍: {start_time:.1f} - {end_time:.1f} 秒\n"
         info_text += f"震央位置: ({epicenter_lon:.4f}, {epicenter_lat:.4f})\n"
@@ -779,16 +906,16 @@ def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, e
         info_text += f"請確認波形範圍後，點擊「執行預測」按鈕"
 
         logger.info("波形載入完成")
-        return waveform_plot, info_text, gr.update(interactive=True)
+        return station_map_html, waveform_plot, info_text, gr.update(interactive=True)
 
     except Exception as e:
         logger.error(f"波形載入發生錯誤: {e}")
         import traceback
         traceback.print_exc()
-        return None, f"錯誤: {str(e)}", gr.update(interactive=False)
+        return None, None, f"錯誤: {str(e)}", gr.update(interactive=False)
 
 
-def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter_lat, vs30_input):
+def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter_lat):
     """執行震度預測"""
     try:
         # 1. 載入完整的 mseed 檔案
@@ -801,12 +928,12 @@ def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter
         selected_stations = select_nearest_stations(st, epicenter_lat, epicenter_lon, n_stations=25)
 
         if len(selected_stations) == 0:
-            return None, "錯誤：找不到有效的測站資料"
+            return None, None, "錯誤：找不到有效的測站資料"
 
-        # 3. 從選定的測站提取波形
+        # 3. 從選定的測站提取波形（vs30_input 使用預設值 600，會被資料庫值覆蓋）
         logger.info(f"提取波形資料（時間範圍: {start_time}-{end_time} 秒）...")
         waveforms, station_info_list, valid_stations = extract_waveforms_from_stream(
-            st, selected_stations, start_time, end_time, vs30_input
+            st, selected_stations, start_time, end_time, vs30_input=600
         )
 
         if len(waveforms) == 0:
@@ -847,7 +974,7 @@ def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter
                     target["latitude"],
                     target["longitude"],
                     target["elevation"],
-                    get_vs30(target["latitude"], target["longitude"], vs30_input)
+                    get_vs30(target["latitude"], target["longitude"], user_vs30=600)
                 ])
                 target_names.append(target["station"])
 
@@ -906,10 +1033,27 @@ def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter
 with gr.Blocks(title="TTSAM 震度預測系統") as demo:
     gr.Markdown("# 🌏 TTSAM 震度預測系統")
 
+    # ========== 上層：使用說明與參數設定 ==========
     with gr.Row():
-        # 左側：輸入控制區
+        # 左上：使用步驟與狀態顯示
+        with gr.Column(scale=1):
+            gr.Markdown("## 使用步驟")
+            gr.Markdown("""
+            1. 選擇地震事件和時間範圍
+            2. 輸入震央位置和場址參數
+            3. 點擊「載入波形」確認波形範圍
+            4. 確認無誤後，點擊「執行預測」
+            
+            ℹ️ 系統會自動選擇距離震央最近的 25 個測站
+            """)
+
+            info_output = gr.Textbox(label="狀態資訊", lines=6, interactive=False)
+            stats_output = gr.Textbox(label="預測統計", lines=4, interactive=False)
+
+        # 右上：輸入參數
         with gr.Column(scale=1):
-            gr.Markdown("## 輸入設定")
+            gr.Markdown("## 輸入參數")
+
             event_dropdown = gr.Dropdown(
                 choices=list(EARTHQUAKE_EVENTS.keys()),
                 value=list(EARTHQUAKE_EVENTS.keys())[0],
@@ -925,43 +1069,30 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
                 epicenter_lon_input = gr.Number(value=121.57, label="震央經度")
                 epicenter_lat_input = gr.Number(value=23.88, label="震央緯度")
 
-            gr.Markdown("### 場址參數")
             with gr.Row():
-                vs30_input = gr.Number(
-                    value=600,
-                    label="Vs30 (m/s)",
-                    info="剪力波速度（預設 600 m/s，若有 Vs30 資料會自動覆蓋）"
-                )
-
-            load_waveform_btn = gr.Button("📊 載入波形", variant="secondary")
-            predict_btn = gr.Button("🔮 執行預測", variant="primary", interactive=False)
-
-            gr.Markdown("""
-            ### 使用步驟
-            1. 選擇地震事件和時間範圍
-            2. 輸入震央位置
-            3. 點擊「載入波形」確認波形範圍
-            4. 確認無誤後，點擊「執行預測」
-            
-            ℹ️ 系統會自動選擇距離震央最近的 25 個測站
-            """)
+                load_waveform_btn = gr.Button("📊 載入波形", variant="secondary", scale=1)
+                predict_btn = gr.Button("🔮 執行預測", variant="primary", scale=1, interactive=False)
 
-            info_output = gr.Textbox(label="狀態資訊", lines=5, interactive=False)
-            stats_output = gr.Textbox(label="預測統計", lines=4)
+    # ========== 中層：輸入測站地圖與波形圖 ==========
+    with gr.Row():
+        # 中左：輸入測站地圖
+        with gr.Column(scale=1):
+            gr.Markdown("## 輸入測站分布")
+            input_station_map = gr.HTML(label="輸入測站地圖")
 
-        # 右側：波形圖
+        # 中右：輸入波形
         with gr.Column(scale=1):
             gr.Markdown("## 輸入波形")
-            waveform_plot = gr.Plot(label="地震波形（選定的最近測站）")
+            waveform_plot = gr.Plot(label="地震波形（選定的 25 個測站）")
 
-    # 下方：Ground Truth vs 預測結果
+    # ========== 下層：Ground Truth vs 預測結果 ==========
     with gr.Row():
-        # 左側：Ground Truth
+        # 左下：Ground Truth
         with gr.Column(scale=1):
             gr.Markdown("## Ground Truth 震度分布")
-            ground_truth_image = gr.Image(label="實際觀測震度", type="filepath")
+            ground_truth_image = gr.Image(label="實際觀測震度", type="filepath", height=600)
 
-        # 右側：預測震度地圖
+        # 右下：預測震度地圖
         with gr.Column(scale=1):
             gr.Markdown("## 預測震度分布")
             intensity_map = gr.HTML(label="互動式震度地圖", elem_id="intensity_map")
@@ -971,13 +1102,13 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
     load_waveform_btn.click(
         fn=load_and_display_waveform,
         inputs=[event_dropdown, start_slider, end_slider, epicenter_lon_input, epicenter_lat_input],
-        outputs=[waveform_plot, info_output, predict_btn]
+        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, vs30_input],
+        inputs=[event_dropdown, start_slider, end_slider, epicenter_lon_input, epicenter_lat_input],
         outputs=[ground_truth_image, intensity_map, stats_output]
     )