add interactive intensity map feature using Folium and update related functions

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 import numpy as np
 import matplotlib.pyplot as plt
 from obspy import read
-from datasets import load_dataset
 import xarray as xr
 import torch
 import torch.nn as nn
@@ -382,12 +381,6 @@ def get_vs30(lat, lon, user_vs30=600):
     return float(vs30)
 
 
-def get_station_position(station):
-    latitude, longitude, elevation = site_info.loc[
-        (site_info["Station"] == station), ["Latitude", "Longitude", "Elevation"]
-    ].values[0]
-    return latitude, longitude, elevation
-
 
 def calculate_intensity(pga, label=False):
     intensity_label = ["0", "1", "2", "3", "4", "5-", "5+", "6-", "6+", "7"]
@@ -501,17 +494,18 @@ def extract_waveforms_from_stream(st, selected_stations, start_time, end_time, v
             n_data = signal_processing(n_data)
             e_data = signal_processing(e_data)
 
-            # 調整長度到 3000
-            for data in [z_data, n_data, e_data]:
-                if len(data) > target_length:
-                    data = data[:target_length]
-                elif len(data) < target_length:
-                    data = np.pad(data, (0, target_length - len(data)))
-
-            # 組合三分量 (3000, 3)
-            waveform_3c = np.stack([z_data[:target_length],
-                                   n_data[:target_length],
-                                   e_data[:target_length]], axis=1)
+            # 先創建全零陣列 (3000, 3)
+            waveform_3c = np.zeros((target_length, 3))
+
+            # 填入實際資料（自動處理長度不足或過長的情況）
+            z_len = min(len(z_data), target_length)
+            n_len = min(len(n_data), target_length)
+            e_len = min(len(e_data), target_length)
+
+            waveform_3c[:z_len, 0] = z_data[:z_len]
+            waveform_3c[:n_len, 1] = n_data[:n_len]
+            waveform_3c[:e_len, 2] = e_data[:e_len]
+
             waveforms.append(waveform_3c)
 
             # 準備測站資訊
@@ -533,14 +527,19 @@ def extract_waveforms_from_stream(st, selected_stations, start_time, end_time, v
 
 
 def plot_waveform(st, selected_stations, start_time, end_time):
-    """繪製選定測站的波形圖（堆疊顯示前 10 個測站）"""
-    fig, axes = plt.subplots(min(10, len(selected_stations)), 1, figsize=(12, 8), sharex=True)
+    """繪製選定測站的波形圖（距離-時間圖，可顯示全部 25 個測站）"""
+    fig, ax = plt.subplots(figsize=(14, 10))
+
+    # 設定振幅縮放比例（避免波形重疊）
+    amplitude_scale = 0.03  # 可調整此值來控制波形大小
 
-    if len(selected_stations) == 1:
-        axes = [axes]
+    plotted_count = 0
+    distances = []
+    station_names = []
 
-    for i, station_data in enumerate(selected_stations[:10]):
+    for i, station_data in enumerate(selected_stations):
         station_code = station_data["station"]
+        distance = station_data["distance"]
 
         try:
             st_station = st.select(station=station_code)
@@ -549,56 +548,178 @@ def plot_waveform(st, selected_stations, start_time, end_time):
                 times = tr.times()
                 data = tr.data
 
-                axes[i].plot(times, data, 'black', linewidth=0.5)
+                # 正規化波形振幅
+                data_normalized = data / (np.max(np.abs(data)) + 1e-10)
+
+                # 繪製波形，Y軸位置為距離
+                ax.plot(times, distance + data_normalized * amplitude_scale,
+                       'black', linewidth=0.3, alpha=0.8)
 
-                # 標記選取範圍
-                axes[i].axvline(start_time, color='red', linestyle='--', linewidth=1, alpha=0.7)
-                axes[i].axvline(end_time, color='red', linestyle='--', linewidth=1, alpha=0.7)
-                axes[i].axvspan(start_time, end_time, alpha=0.2, color='blue')
+                distances.append(distance)
+                station_names.append(station_code)
+                plotted_count += 1
 
-                axes[i].set_ylabel(f'{station_code}\n({station_data["distance"]:.2f}°)', fontsize=8)
-                axes[i].grid(True, alpha=0.3)
-                axes[i].tick_params(labelsize=8)
         except Exception as e:
             logger.warning(f"無法繪製測站 {station_code}: {e}")
 
-    axes[-1].set_xlabel('Time (s)')
-    fig.suptitle(f'波形記錄（前 10 個最近測站，共選擇 {len(selected_stations)} 個）', fontsize=12)
+    # 標記選取時間範圍
+    ax.axvline(start_time, color='red', linestyle='--', linewidth=2,
+              alpha=0.7, label='選取範圍')
+    ax.axvline(end_time, color='red', linestyle='--', linewidth=2, alpha=0.7)
+    ax.axvspan(start_time, end_time, alpha=0.15, color='blue')
+
+    # 設定軸標籤和標題
+    ax.set_xlabel('Time (s)', fontsize=12)
+    ax.set_ylabel('Distance from Epicenter (°)', fontsize=12)
+    ax.set_title(f'Record Section - {plotted_count} Stations Sorted by Distance',
+                fontsize=14, fontweight='bold')
+
+    # 在右側標註測站名稱
+    if distances:
+        ax2 = ax.twinx()
+        ax2.set_ylim(ax.get_ylim())
+        ax2.set_ylabel('Station Code', fontsize=12)
+
+        # 每隔幾個測站標註一次（避免過於擁擠）
+        step = max(1, len(distances) // 10)
+        tick_positions = distances[::step]
+        tick_labels = station_names[::step]
+        ax2.set_yticks(tick_positions)
+        ax2.set_yticklabels(tick_labels, fontsize=8)
+
+    ax.grid(True, alpha=0.3, axis='x')
+    ax.legend(loc='upper right')
     plt.tight_layout()
 
     return fig
 
 
-def plot_intensity_map(pga_list, target_names):
-    fig, ax = plt.subplots(figsize=(6, 8))
+def get_intensity_color(intensity):
+    """根據震度等級返回對應顏色（參考 intensityMap.html）"""
+    color_map = {
+        0: "#ffffff",  # 白色
+        1: "#33FFDD",  # 青色
+        2: "#34ff32",  # 綠色
+        3: "#fefd32",  # 黃色
+        4: "#fe8532",  # 橘色
+        5: "#fd5233",  # 紅橘色 (5-)
+        6: "#c43f3b",  # 深紅色 (5+)
+        7: "#9d4646",  # 暗紅色 (6-)
+        8: "#9a4c86",  # 紫紅色 (6+)
+        9: "#b51fea",  # 紫色 (7)
+    }
+    return color_map.get(intensity, "#ffffff")
+
+
+def create_intensity_map(pga_list, target_names, epicenter_lat=None, epicenter_lon=None):
+    """使用 Folium 創建互動式震度分布地圖"""
+    import folium
+    from folium import plugins
+
+    # 創建地圖，中心點設在台灣中心
+    m = folium.Map(
+        location=[23.5, 121],
+        zoom_start=7,
+        tiles='OpenStreetMap'
+    )
 
-    # 繪製台灣地圖底圖
-    taiwan_lon = [120, 122]
-    taiwan_lat = [22, 25]
+    # 如果有震央位置，標記震央
+    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)
 
-    # 根據 target_names 取得座標
-    lats, lons, intensities = [], [], []
+    # 添加震度測站標記
     for i, target_name in enumerate(target_names):
         target = next((t for t in target_dict if t["station"] == target_name), None)
         if target:
-            lats.append(target["latitude"])
-            lons.append(target["longitude"])
-            intensities.append(calculate_intensity(pga_list[i]))
-
-    # 繪製散點圖
-    scatter = ax.scatter(lons, lats, c=intensities, cmap='YlOrRd', s=100,
-                         vmin=0, vmax=7, edgecolors='black', linewidth=0.5)
-
-    ax.set_xlabel('Longitude')
-    ax.set_ylabel('Latitude')
-    ax.set_title('Predicted Intensity Distribution')
-    ax.set_xlim(taiwan_lon)
-    ax.set_ylim(taiwan_lat)
-
-    cbar = plt.colorbar(scatter, ax=ax)
-    cbar.set_label('Intensity')
-
-    return fig
+            lat = target["latitude"]
+            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]
+
+            # 創建 HTML popup 內容
+            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
 
 
 def load_and_display_waveform(event_name, start_time, end_time, epicenter_lon, epicenter_lat):
@@ -693,8 +814,9 @@ def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter
             weight, sigma, mu = model(tensor_data)
             pga_list = torch.sum(weight * mu, dim=2).cpu().detach().numpy().flatten().tolist()
 
-        # 8. 繪製結果
-        intensity_plot = plot_intensity_map(pga_list, target_names)
+        # 8. 繪製互動式地圖
+        intensity_map = create_intensity_map(pga_list, target_names, epicenter_lat, epicenter_lon)
+        map_html = intensity_map._repr_html_()
 
         # 9. 統計資訊
         max_intensity = max([calculate_intensity(pga, label=True) for pga in pga_list])
@@ -705,7 +827,7 @@ def predict_intensity(event_name, start_time, end_time, epicenter_lon, epicenter
         stats += f"預測最大震度: {max_intensity}"
 
         logger.info("預測完成！")
-        return intensity_plot, stats
+        return map_html, stats
 
     except Exception as e:
         logger.error(f"預測過程發生錯誤: {e}")
@@ -735,8 +857,8 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
 
             gr.Markdown("### 震央位置")
             with gr.Row():
-                epicenter_lon_input = gr.Number(value=121.5, label="震央經度")
-                epicenter_lat_input = gr.Number(value=24.0, label="震央緯度")
+                epicenter_lon_input = gr.Number(value=121.57, label="震央經度")
+                epicenter_lat_input = gr.Number(value=23.88, label="震央緯度")
 
             gr.Markdown("### 場址參數")
             with gr.Row():
@@ -764,7 +886,7 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
         # 右側：震度分布圖
         with gr.Column(scale=1):
             gr.Markdown("## 預測震度分布")
-            intensity_plot = gr.Plot(label="震度分布圖")
+            intensity_map = gr.HTML(label="互動式震度地圖")
             stats_output = gr.Textbox(label="預測統計", lines=4)
 
     # 下方：波形圖
@@ -785,7 +907,7 @@ with gr.Blocks(title="TTSAM 震度預測系統") as demo:
     predict_btn.click(
         fn=predict_intensity,
         inputs=[event_dropdown, start_slider, end_slider, epicenter_lon_input, epicenter_lat_input, vs30_input],
-        outputs=[intensity_plot, stats_output]
+        outputs=[intensity_map, stats_output]
     )
 
 demo.launch()

requirements.txt

@@ -11,3 +11,4 @@ scipy
 pandas
 loguru
 huggingface_hub
+folium