docs: enhance input station mapping and intensity visualization using Plotly

app.py

@@ -9,6 +9,7 @@ from scipy.signal import detrend, iirfilter, sosfilt, zpk2sos
 from scipy.spatial import cKDTree
 import pandas as pd
 from loguru import logger
+import plotly.graph_objs as go
 
 # 設定 matplotlib 中文字體支援
 plt.rcParams['font.sans-serif'] = ['Arial Unicode MS', 'DejaVu Sans']
@@ -702,6 +703,137 @@ def extract_waveforms_from_stream(st, selected_stations, start_time, duration, v
 
     return waveforms, station_info_list, valid_stations, missing_components_count
 
+def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
+    """創建輸入測站分布地圖：顯示所有測站 + 突顯被選中的 25 個（使用 Plotly）"""
+
+    selected_station_codes = {s["station"] for s in selected_stations}
+
+    # 準備所有測站資料（未選中的測站）
+    all_stations_lat = []
+    all_stations_lon = []
+    all_stations_text = []
+
+    logger.info(f"繪製所有測站 ({len(site_info)} 個)...")
+    for idx, row in site_info.iterrows():
+        station_code = row["Station"]
+        if station_code not in selected_station_codes:
+            all_stations_lat.append(row["Latitude"])
+            all_stations_lon.append(row["Longitude"])
+            all_stations_text.append(station_code)
+
+    # 準備選中測站資料（按距離分組）
+    selected_group1_lat, selected_group1_lon, selected_group1_text = [], [], []  # 前 5 近
+    selected_group2_lat, selected_group2_lon, selected_group2_text = [], [], []  # 6-15 近
+    selected_group3_lat, selected_group3_lon, selected_group3_text = [], [], []  # 16-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"]
+
+        hover_text = f"{station_code}<br>✓ 已選中<br>第 {i+1} 近<br>距離: {distance:.2f}°<br>({lat:.3f}, {lon:.3f})"
+
+        if i < 5:
+            selected_group1_lat.append(lat)
+            selected_group1_lon.append(lon)
+            selected_group1_text.append(hover_text)
+        elif i < 15:
+            selected_group2_lat.append(lat)
+            selected_group2_lon.append(lon)
+            selected_group2_text.append(hover_text)
+        else:
+            selected_group3_lat.append(lat)
+            selected_group3_lon.append(lon)
+            selected_group3_text.append(hover_text)
+
+    # 創建 Plotly 地圖
+    fig = go.Figure()
+
+    # 添加所有測站（灰色小點）
+    fig.add_trace(go.Scattermapbox(
+        lat=all_stations_lat,
+        lon=all_stations_lon,
+        mode='markers',
+        marker=dict(size=4, color='lightgray', opacity=0.4),
+        text=all_stations_text,
+        hovertemplate='%{text}<extra></extra>',
+        name=f'所有測站 ({len(all_stations_lat)} 個)',
+        showlegend=True
+    ))
+
+    # 添加選中測站 - 前 5 近（綠色）
+    if selected_group1_lat:
+        fig.add_trace(go.Scattermapbox(
+            lat=selected_group1_lat,
+            lon=selected_group1_lon,
+            mode='markers',
+            marker=dict(size=12, color='green', opacity=0.8),
+            text=selected_group1_text,
+            hovertemplate='%{text}<extra></extra>',
+            name='前 5 近',
+            showlegend=True
+        ))
+
+    # 添加選中測站 - 6-15 近（藍色）
+    if selected_group2_lat:
+        fig.add_trace(go.Scattermapbox(
+            lat=selected_group2_lat,
+            lon=selected_group2_lon,
+            mode='markers',
+            marker=dict(size=12, color='blue', opacity=0.8),
+            text=selected_group2_text,
+            hovertemplate='%{text}<extra></extra>',
+            name='6-15 近',
+            showlegend=True
+        ))
+
+    # 添加選中測站 - 16-25 近（橘色）
+    if selected_group3_lat:
+        fig.add_trace(go.Scattermapbox(
+            lat=selected_group3_lat,
+            lon=selected_group3_lon,
+            mode='markers',
+            marker=dict(size=12, color='orange', opacity=0.8),
+            text=selected_group3_text,
+            hovertemplate='%{text}<extra></extra>',
+            name='16-25 近',
+            showlegend=True
+        ))
+
+    # 添加震央（紅色星星）
+    fig.add_trace(go.Scattermapbox(
+        lat=[epicenter_lat],
+        lon=[epicenter_lon],
+        mode='markers',
+        marker=dict(size=20, color='red', symbol='star'),
+        text=[f'震央<br>({epicenter_lat:.3f}, {epicenter_lon:.3f})'],
+        hovertemplate='%{text}<extra></extra>',
+        name='震央',
+        showlegend=True
+    ))
+
+    # 設置地圖佈局
+    fig.update_layout(
+        mapbox=dict(
+            style="open-street-map",
+            center=dict(lat=epicenter_lat, lon=epicenter_lon),
+            zoom=7
+        ),
+        height=600,  # 設置固定高度以適應 Gradio 容器
+        margin=dict(l=0, r=0, t=0, b=0),
+        showlegend=True,
+        legend=dict(
+            yanchor="top",
+            y=0.99,
+            xanchor="left",
+            x=0.01,
+            bgcolor="rgba(255, 255, 255, 0.8)"
+        )
+    )
+
+    return fig
+
 
 def plot_waveform(st, selected_stations, start_time, duration):
     """
@@ -800,27 +932,11 @@ def get_intensity_color(intensity):
 
 
 def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_lon=None):
-    """使用 Folium 創建互動式震度分布地圖"""
-    import folium
-    from folium import plugins
-
-    # 創建地圖，固定高度 800（寬度 100%）
-    m = folium.Map(
-        location=[23.5, 121],
-        zoom_start=7,
-        tiles='OpenStreetMap',
-        width='100%',
-        height='800px'
-    )
+    """使用 Plotly 創建互動式震度分布地圖"""
 
-    # 如果有震央位置，標記震央
-    if epicenter_lat and epicenter_lon:
-        folium.Marker(
-            [epicenter_lat, epicenter_lon],
-            popup=f'震央<br>({epicenter_lat:.3f}, {epicenter_lon:.3f})',
-            icon=folium.Icon(color='red', icon='star', prefix='fa'),
-            tooltip='震央位置'
-        ).add_to(m)
+    # 按震度等級分組資料
+    intensity_groups = {i: {'lat': [], 'lon': [], 'text': [], 'color': get_intensity_color(i)}
+                       for i in range(10)}
 
     # 添加震度測站標記
     for i, target_name in enumerate(target_names):
@@ -830,82 +946,75 @@ def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_l
             lon = target["longitude"]
             intensity = calculate_intensity(pga_list[i])
             intensity_label = calculate_intensity(pga_list[i], label=True)
-            color = get_intensity_color(intensity)
             pga = pga_list[i]
 
-            popup_html = f"""
-            <div style="font-family: Arial; min-width: 150px;">
-                <h4 style="margin: 0 0 10px 0;">{target_name}</h4>
-                <table style="width:100%;">
-                    <tr><td><b>震度：</b></td><td style="color: {color}; font-weight: bold; font-size: 16px;">{intensity_label}</td></tr>
-                    <tr><td><b>PGA：</b></td><td>{pga:.4f} m/s²</td></tr>
-                    <tr><td><b>位置：</b></td><td>({lat:.3f}, {lon:.3f})</td></tr>
-                </table>
-            </div>
-            """
-
-            folium.CircleMarker(
-                location=[lat, lon],
-                radius=12,
-                popup=folium.Popup(popup_html, max_width=250),
-                tooltip=f'{target_name}: 震度 {intensity_label}',
-                color='black',
-                fillColor=color,
-                fillOpacity=0.8,
-                weight=2
-            ).add_to(m)
-
-            folium.Marker(
-                [lat, lon],
-                icon=folium.DivIcon(html=f'''
-                    <div style="
-                        font-size: 10px; 
-                        font-weight: bold; 
-                        color: black;
-                        text-align: center;
-                        text-shadow: 1px 1px 2px white, -1px -1px 2px white;
-                    ">{intensity_label}</div>
-                ''')
-            ).add_to(m)
-
-    # 圖例
-    legend_html = '''
-    <div style="
-        position: fixed; 
-        top: 10px; left: 10px; 
-        width: 180px; 
-        background-color: white; 
-        border: 2px solid grey; 
-        z-index: 9999; 
-        font-size: 14px;
-        padding: 10px;
-        border-radius: 5px;
-        box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
-    ">
-        <h4 style="margin: 0 0 10px 0;">震度等級 Intensity</h4>
-        <table style="width: 100%;">
-    '''
-
-    intensity_levels = ["0", "1", "2", "3", "4", "5-", "5+", "6-", "6+", "7"]
-    for idx, level in enumerate(intensity_levels):
-        color = get_intensity_color(idx)
-        legend_html += f'''
-            <tr>
-                <td style="width: 30px; height: 20px; background-color: {color}; border: 1px solid black;"></td>
-                <td style="padding-left: 5px;">{level}</td>
-            </tr>
-        '''
-
-    legend_html += '''
-        </table>
-    </div>
-    '''
-
-    m.get_root().html.add_child(folium.Element(legend_html))
-
-    plugins.Fullscreen().add_to(m)
-
-    return m
+            hover_text = (f"{target_name}<br>"
+                         f"震度: {intensity_label}<br>"
+                         f"PGA: {pga:.4f} m/s²<br>"
+                         f"位置: ({lat:.3f}, {lon:.3f})")
+
+            intensity_groups[intensity]['lat'].append(lat)
+            intensity_groups[intensity]['lon'].append(lon)
+            intensity_groups[intensity]['text'].append(hover_text)
+
+    # 創建 Plotly 地圖
+    fig = go.Figure()
+
+    # 添加各震度等級的測站
+    intensity_labels = ["0", "1", "2", "3", "4", "5-", "5+", "6-", "6+", "7"]
+    for intensity_level in range(10):
+        group = intensity_groups[intensity_level]
+        if group['lat']:  # 只添加有資料的震度等級
+            fig.add_trace(go.Scattermapbox(
+                lat=group['lat'],
+                lon=group['lon'],
+                mode='markers',
+                marker=dict(
+                    size=14,
+                    color=group['color'],
+                    opacity=0.8
+                ),
+                text=group['text'],
+                hovertemplate='%{text}<extra></extra>',
+                name=f'震度 {intensity_labels[intensity_level]}',
+                showlegend=True
+            ))
+
+    # 如果有震央位置，標記震央
+    if epicenter_lat and epicenter_lon:
+        fig.add_trace(go.Scattermapbox(
+            lat=[epicenter_lat],
+            lon=[epicenter_lon],
+            mode='markers',
+            marker=dict(size=20, color='red', symbol='star'),
+            text=[f'震央<br>({epicenter_lat:.3f}, {epicenter_lon:.3f})'],
+            hovertemplate='%{text}<extra></extra>',
+            name='震央',
+            showlegend=True
+        ))
+
+    # 設置地圖佈局
+    fig.update_layout(
+        mapbox=dict(
+            style="open-street-map",
+            center=dict(lat=23.5,
+                       lon=121),
+            zoom=7
+        ),
+        height=800,  # 設置固定高度以適應 Gradio 容器
+        margin=dict(l=0, r=0, t=0, b=0),
+        showlegend=True,
+        legend=dict(
+            yanchor="top",
+            y=0.9,
+            xanchor="left",
+            x=0.01,
+            bgcolor="rgba(255, 255, 255, 0.8)"
+        )
+    )
+
+    return fig
+
 
 
 def load_observed_intensity_image(event_name):
@@ -946,136 +1055,25 @@ def on_event_change(event_name, start_time, duration, epicenter_lon, epicenter_l
     當選擇事件時，同時更新波形地圖、波形圖、實際觀測圖
 
     Returns:
-        (station_map_html, waveform_plot, info_text, observed_intensity_path)
+        (station_map, waveform_plot, info_text, observed_intensity_path)
     """
     try:
         # 同時更新波形地圖
-        station_map_html, waveform_plot, info_text, _ = load_and_display_waveform(
+        station_map, waveform_plot, info_text, _ = load_and_display_waveform(
             event_name, start_time, duration, epicenter_lon, epicenter_lat
         )
 
         # 同時更新實際觀測圖
         observed_intensity_path = load_observed_intensity_image(event_name)
 
-        return station_map_html, waveform_plot, info_text, observed_intensity_path
+        return station_map, waveform_plot, info_text, observed_intensity_path
 
     except Exception as e:
         logger.error(f"事件切換時發生錯誤: {e}")
         return None, None, f"錯誤: {str(e)}", None
 
 
-def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
-    """創建輸入測站分布地圖：顯示所有測站 + 突顯被選中的 25 個"""
-    import folium
-    from folium import plugins
-
-    # 創建地圖，固定高度 800（寬度 100%）
-    m = folium.Map(
-        location=[epicenter_lat, epicenter_lon],
-        zoom_start=8,
-        tiles='OpenStreetMap',
-        width='100%',
-        height='800px'
-    )
-
-    selected_station_codes = {s["station"] for s in selected_stations}
-
-    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)
-
-    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)
 
-    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_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)
-
-    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))
-
-    plugins.Fullscreen().add_to(m)
-
-    return m
 
 
 def load_and_display_waveform(event_name, start_time, duration):
@@ -1109,7 +1107,6 @@ def load_and_display_waveform(event_name, start_time, duration):
 
         # 4. 創建輸入測站地圖
         station_map = create_input_station_map(selected_stations, epicenter_lat, epicenter_lon)
-        station_map_html = station_map._repr_html_()
 
         # 明示實際用站數（少於 25 站時顯示警告）
         info_text = f"✅ 已載入波形資料\n"
@@ -1122,7 +1119,7 @@ def load_and_display_waveform(event_name, start_time, duration):
         info_text += "\n請確認波形範圍後，點擊「執行預測」按鈕"
 
         logger.info("波形載入完成")
-        return station_map_html, waveform_plot, info_text, gr.update(interactive=True)
+        return station_map, waveform_plot, info_text, gr.update(interactive=True)
 
     except Exception as e:
         logger.error(f"波形載入發生錯誤: {e}")
@@ -1235,7 +1232,6 @@ def predict_intensity(event_name, start_time, duration):
 
         # 繪製互動式地圖（固定高度 800）
         intensity_map = create_intensity_map(pga_list, target_names, epicenter_lat, epicenter_lon)
-        map_html = intensity_map._repr_html_()
 
         # 載入實際觀測震度圖（filepath；左側以 800 高顯示）
         observed_intensity_path = load_observed_intensity_image(event_name)
@@ -1253,7 +1249,7 @@ def predict_intensity(event_name, start_time, duration):
         stats += f"預測最大震度: {max_intensity}"
 
         logger.info("預測完成！")
-        return observed_intensity_path, map_html, stats
+        return observed_intensity_path, intensity_map, stats
 
     except Exception as e:
         logger.error(f"預測過程發生錯誤: {e}")
@@ -1262,26 +1258,6 @@ def predict_intensity(event_name, start_time, duration):
         return None, None, f"錯誤: {str(e)}"
 
 
-def on_event_change(event_name, start_time, duration):
-    """
-    事件切換或波形參數變更時，更新波形視圖（不執行推論）
-
-    返回：station_map_html, waveform_plot, info_text, observed_img
-    （與事件變更事件綁定的回調函數）
-
-    spec #2：測站選擇上限 (25 站)、波形取樣率 (100 Hz)、時間窗長度 (30 秒)
-    """
-    try:
-        station_map_html, waveform_plot, info_text, _ = load_and_display_waveform(
-            event_name, start_time, duration
-        )
-        observed_img = load_observed_intensity_image(event_name)
-        return station_map_html, waveform_plot, info_text, observed_img
-    except Exception as e:
-        logger.error(f"事件變更回調發生錯誤: {e}")
-        return None, None, f"錯誤: {str(e)}", None
-
-
 def on_full_workflow(event_name, start_time, duration):
     """
     執行完整的工作流：波形載入 → 測站選擇 → 推論 → 結果展示
@@ -1289,38 +1265,37 @@ def on_full_workflow(event_name, start_time, duration):
     此函數用於首次應用加載與事件切換時自動執行完整流程
 
     返回所有必要的 UI 組件輸出：
-    (station_map_html, waveform_plot, info_text, predicted_map_html, stats_text, observed_img)
+    (station_map, waveform_plot, info_text, predicted_map, stats_text, observed_img)
 
     spec #2：測站選擇上限 (25 站)、波形取樣率 (100 Hz)、時間窗長度 (30 秒)
     spec #3：推論流程、PGA → 震度轉換
-    spec #3：推論流程、PGA → 震度轉換
     """
     try:
         logger.info(f"[on_full_workflow] 開始執行完整工作流 - 事件: {event_name}")
 
         # 步驟 1: 載入波形
         logger.info(f"[on_full_workflow] 步驟 1/3: 波形載入...")
-        station_map_html, waveform_plot, info_text, _ = load_and_display_waveform(
+        station_map, waveform_plot, info_text, _ = load_and_display_waveform(
             event_name, start_time, duration
         )
 
-        if station_map_html is None:
+        if station_map is None:
             logger.error("[on_full_workflow] 波形載入失敗")
             return None, None, info_text, None, "波形載入失敗", None
 
         # 步驟 2: 執行推論
         logger.info(f"[on_full_workflow] 步驟 2/3: 模型推論...")
-        observed_img, predicted_map_html, stats_text = predict_intensity(
+        observed_img, predicted_map, stats_text = predict_intensity(
             event_name, start_time, duration
         )
 
-        if predicted_map_html is None:
+        if predicted_map is None:
             logger.error("[on_full_workflow] 推論失敗")
-            return station_map_html, waveform_plot, info_text, None, stats_text, observed_img
+            return station_map, waveform_plot, info_text, None, stats_text, observed_img
 
         logger.info(f"[on_full_workflow] 步驟 3/3: 完成")
 
-        return station_map_html, waveform_plot, info_text, predicted_map_html, stats_text, observed_img
+        return station_map, waveform_plot, info_text, predicted_map, stats_text, observed_img
 
     except Exception as e:
         logger.error(f"[on_full_workflow] 完整工作流發生錯誤: {e}")
@@ -1331,7 +1306,7 @@ def on_full_workflow(event_name, start_time, duration):
 
 # ============ Gradio 介面 ============
 
-with gr.Blocks(title="TTSAM 震度預測系統") as demo:
+with gr.Blocks(title="TTSAM 震度預測系統", fill_height=True) as demo:
     gr.Markdown("# 🌏 TTSAM 震度預測系統")
 
     # ========== 上層：使用說明與參數設定 ==========
@@ -1363,20 +1338,11 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
 
             with gr.Row():
                 start_slider = gr.Slider(0, 300, value=0, step=1, label="開始時間 (秒)")
-                # 將時間長度滑桿限制為 0–30 秒，與模型固定窗口對齊；小於 30 秒將於尾段 0 填充
+                # 將時間長度滑桿限制為 0–30 秒，與模型固定窗口對齊；小於 30 秒會自動以 0 填充
                 duration_slider = gr.Slider(0, 30, value=30, step=1, label="時間長度 (秒)")
             # 說明：模型最多 30 秒；小於 30 秒會自動以 0 填充至 30 秒（3000 samples @ 100 Hz）
             gr.Markdown("> 模型最多 30 秒；小於 30 秒會自動以 0 填充至 30 秒（3000 samples @ 100 Hz）。")
 
-            gr.Markdown("### 震央位置")
-            gr.Markdown("> 震央位置由選定的地震事件自動決定，並在地圖上標示")
-            epicenter_info_display = gr.Textbox(
-                label="震央座標",
-                value="緯度: 23.88° | 經度: 121.57°",
-                interactive=False,
-                lines=1
-            )
-
             with gr.Row():
                 load_waveform_btn = gr.Button("📊 載入波形", variant="secondary", scale=1)
                 predict_btn = gr.Button("🔮 執行預測", variant="primary", scale=1, interactive=False)
@@ -1387,19 +1353,21 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
         # 中左：輸入測站地圖
         with gr.Column(scale=1):
             gr.Markdown("## 輸入測站分布")
-            input_station_map = gr.HTML(label="輸入測站地圖")
+            input_station_map = gr.Plot(label="輸入測站地圖")
 
         # 中右：輸入波形
         with gr.Column(scale=1):
             gr.Markdown("## 輸入波形")
-            waveform_plot = gr.Plot(label="地震波形（選定的 25 個測站）")
+            waveform_plot = gr.Plot(
+                label="地震波形（選定的 25 個測站）",
+            )
 
     # ========== 下層：實際觀測 vs 預測結果 ==========
     with gr.Row():
         # 左下：預測震度地圖
         with gr.Column(scale=1):
             gr.Markdown("## 預測震度分布")
-            predicted_intensity_map = gr.HTML(label="互動式震度地圖", elem_id="predicted_intensity_map")
+            predicted_intensity_map = gr.Plot(label="互動式震度地圖")
 
         # 右下：實際觀測震度圖
         with gr.Column(scale=1):
@@ -1411,22 +1379,13 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
                 value=load_observed_intensity_image(list(EARTHQUAKE_EVENTS.keys())[0])
             )
 
-
-
-    # New function: update epicenter display when event changes
-    def update_epicenter_display(event_name):
-        # Update epicenter coordinate display
-        lat, lon = _get_epicenter_coords(event_name)
-        return f"Latitude: {lat:.2f} | Longitude: {lon:.2f}"
-
     # 綁定事件
     event_dropdown.change(
         fn=lambda event_name, start_time, duration: (
             *on_full_workflow(event_name, start_time, duration),
-            update_epicenter_display(event_name)
         ),
         inputs=[event_dropdown, start_slider, duration_slider],
-        outputs=[input_station_map, waveform_plot, info_output, predicted_intensity_map, stats_output, observed_intensity_image, epicenter_info_display]
+        outputs=[input_station_map, waveform_plot, info_output, predicted_intensity_map, stats_output, observed_intensity_image]
     )
 
     load_waveform_btn.click(
@@ -1445,10 +1404,9 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
     demo.load(
         fn=lambda event_name, start_time, duration: (
             *on_full_workflow(event_name, start_time, duration),
-            update_epicenter_display(event_name)
         ),
         inputs=[event_dropdown, start_slider, duration_slider],
-        outputs=[input_station_map, waveform_plot, info_output, predicted_intensity_map, stats_output, observed_intensity_image, epicenter_info_display]
+        outputs=[input_station_map, waveform_plot, info_output, predicted_intensity_map, stats_output, observed_intensity_image]
     )
 
 demo.launch()

requirements.txt

@@ -1,14 +1,14 @@
-gradio
-transformers
 datasets
-torch
-obspy
-numpy
+gradio
+huggingface_hub
+loguru
 matplotlib
-xarray
 netCDF4
-scipy
+numpy
+obspy
 pandas
-loguru
-huggingface_hub
-folium
+plotly
+scipy
+torch
+transformers
+xarray