feat: transition from matplotlib to Plotly for waveform visualization and enhance interactivity

app.py

@@ -1,5 +1,4 @@
 import gradio as gr
-import matplotlib.pyplot as plt
 import numpy as np
 import pandas as pd
 import plotly.graph_objs as go
@@ -14,10 +13,6 @@ from scipy.spatial import cKDTree
 
 from model import get_full_model
 
-# 設定 matplotlib 中文字體支援
-plt.rcParams["font.sans-serif"] = ["Arial Unicode MS", "DejaVu Sans"]
-plt.rcParams["axes.unicode_minus"] = False  # 解決負號顯示問題
-
 tree = None
 vs30_table = None
 
@@ -564,7 +559,8 @@ def plot_waveform(st, selected_stations, first_pick, duration):
     # 計算結束時間
     end_time = first_pick + duration
 
-    fig, ax = plt.subplots(figsize=(14, 4))
+    # 創建 Plotly figure
+    fig = go.Figure()
 
     # 設定振幅縮放比例（避免波形重疊）
     amplitude_scale = 0.03  # 可調整此值來控制波形大小
@@ -596,22 +592,27 @@ def plot_waveform(st, selected_stations, first_pick, duration):
                 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,
-                )
+                y_values = distance + data_normalized * amplitude_scale
+
+                fig.add_trace(go.Scatter(
+                    x=times,
+                    y=y_values,
+                    mode='lines',
+                    line=dict(color='black', width=0.5),
+                    opacity=0.8,
+                    name=station_code,
+                    hovertemplate=f'{station_code}<br>Time: %{{x:.2f}}s<br>Distance: {distance:.3f}°<extra></extra>',
+                    showlegend=False
+                ))
 
                 # 記錄 P 波標記位置
                 if p_arrival_time is not None:
                     if 0 <= p_arrival_time <= end_time:
                         # P 波在時間窗內（綠色）
-                        p_wave_markers_in.append((p_arrival_time, distance))
+                        p_wave_markers_in.append((p_arrival_time, distance, station_code))
                     else:
                         # P 波在時間窗外（紅色）
-                        p_wave_markers_out.append((p_arrival_time, distance))
+                        p_wave_markers_out.append((p_arrival_time, distance, station_code))
 
                 distances.append(distance)
                 station_names.append(station_code)
@@ -622,55 +623,86 @@ def plot_waveform(st, selected_stations, first_pick, duration):
 
     # 繪製 P 波標記
     if p_wave_markers_in:
-        p_times_in, p_dists_in = zip(*p_wave_markers_in)
-        ax.scatter(p_times_in, p_dists_in, color="green", marker="v", s=50,
-                  zorder=5, label="P-wave (in window)", alpha=0.7)
+        p_times_in, p_dists_in, p_names_in = zip(*p_wave_markers_in)
+        fig.add_trace(go.Scatter(
+            x=p_times_in,
+            y=p_dists_in,
+            mode='markers',
+            marker=dict(color='green', size=8, symbol='triangle-down'),
+            name='P-wave (in window)',
+            hovertemplate='P-wave<br>Station: %{text}<br>Time: %{x:.2f}s<extra></extra>',
+            text=p_names_in,
+            showlegend=True
+        ))
 
     if p_wave_markers_out:
-        p_times_out, p_dists_out = zip(*p_wave_markers_out)
-        ax.scatter(p_times_out, p_dists_out, color="red", marker="v", s=50,
-                  zorder=5, label="P-wave (out window)", alpha=0.7)
-
-    ax.axvline(first_pick, color="blue", linestyle="--", linewidth=2, alpha=0.7,
-               label="First Motion")
+        p_times_out, p_dists_out, p_names_out = zip(*p_wave_markers_out)
+        fig.add_trace(go.Scatter(
+            x=p_times_out,
+            y=p_dists_out,
+            mode='markers',
+            marker=dict(color='red', size=8, symbol='triangle-down'),
+            name='P-wave (out window)',
+            hovertemplate='P-wave<br>Station: %{text}<br>Time: %{x:.2f}s<extra></extra>',
+            text=p_names_out,
+            showlegend=True
+        ))
+
+    # 添加垂直線標記
+    # First Motion
+    fig.add_vline(
+        x=first_pick,
+        line=dict(color='blue', dash='dash', width=2),
+        annotation_text='First Motion',
+        annotation_position='top',
+        opacity=0.7
+    )
 
     # 標記選取時間範圍
-    ax.axvline(
-        0,
-        color="red",
-        linestyle="--",
-        linewidth=2,
-        alpha=0.7,
-        label="Input Waveform",
+    fig.add_vline(
+        x=0,
+        line=dict(color='red', dash='dash', width=2),
+        opacity=0.7
     )
-    ax.axvline(end_time, color="red", linestyle="--", linewidth=2, alpha=0.7)
-    ax.axvspan(0, 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",
+    fig.add_vline(
+        x=end_time,
+        line=dict(color='red', dash='dash', width=2),
+        opacity=0.7
     )
 
-    # 在右側標註測站名稱
-    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)
+    # 添加時間窗陰影
+    fig.add_vrect(
+        x0=0, x1=end_time,
+        fillcolor='blue', opacity=0.1,
+        layer='below', line_width=0,
+    )
 
-    ax.grid(True, alpha=0.3, axis="x")
-    ax.legend(loc="upper right")
-    plt.tight_layout()
+    # 設定軸標籤和標題
+    fig.update_layout(
+        xaxis=dict(
+            title=dict(text='Time (s)', font=dict(size=12)),
+            gridcolor='rgba(128, 128, 128, 0.2)',
+            showgrid=True,
+        ),
+        yaxis=dict(
+            title=dict(text='Distance (°)', font=dict(size=12)),
+            gridcolor='rgba(128, 128, 128, 0.2)',
+            showgrid=False
+        ),
+        hovermode='closest',
+        height=200,
+        plot_bgcolor='white',
+        margin=dict(l=0, r=10, t=30, b=0),  # 緊凑的邊距設置
+        showlegend=True,
+        legend=dict(
+            yanchor="top",
+            y=0.99,
+            xanchor="right",
+            x=0.99,
+            bgcolor="rgba(255, 255, 255, 0.8)",
+        )
+    )
 
     return fig
 
@@ -1149,7 +1181,7 @@ with gr.Blocks(title="TTSAM 震度預測系統", fill_height=True) as demo:
         )
 
         waveform_plot = gr.Plot(
-            label="地震波形（選定的 25 個測站）",
+            label="地震波形",
         )
 
     # ========== 下層：合併地圖 vs 實際觀測 ==========