docs: add intensity map visualization and real-time data handling

app.py

@@ -826,7 +826,7 @@ def create_input_station_map(selected_stations, epicenter_lat, epicenter_lon):
         map=dict(
             style="open-street-map",
             center=dict(lat=epicenter_lat, lon=epicenter_lon),
-            zoom=8
+            zoom=7
         ),
         height=500,  # 設置固定高度以適應 Gradio 容器
         margin=dict(l=0, r=0, t=0, b=0),
@@ -1275,37 +1275,21 @@ with gr.Blocks(title="TTSAM 震度預測系統", fill_height=True) as demo:
                 
                 系統會自動選擇距離震央最近的 25 個測站
             """)
-
-
-
-        # 右上：輸入參數
         with gr.Column(scale=1):
-            gr.Markdown("## 輸入參數")
-
             event_dropdown = gr.Dropdown(
                 choices=list(EARTHQUAKE_EVENTS.keys()),
                 value=list(EARTHQUAKE_EVENTS.keys())[0],
                 label="選擇地震事件"
             )
-
-            with gr.Row():
-                start_slider = gr.Slider(0, 300, value=0, step=1, label="開始時間 (秒)")
-                # 將時間長度滑桿限制為 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）。")
-
-            with gr.Row():
-                load_waveform_btn = gr.Button("📊 載入波形", variant="secondary", scale=1)
-                predict_btn = gr.Button("🔮 執行預測", variant="primary", scale=1, interactive=False)
-
     # ========== 中層：輸入測站地圖與波形圖 ==========
     with gr.Row():
-
         # 中左：輸入測站地圖
         with gr.Column(scale=1):
             gr.Markdown("## 輸入測站分布")
             input_station_map = gr.Plot(label="輸入測站地圖")
+            load_waveform_btn = gr.Button("📊 載入波形", variant="secondary", scale=1)
+            predict_btn = gr.Button("🔮 執行預測", variant="primary", scale=1,
+                                    interactive=False)
 
         # 中右：輸入波形
         with gr.Column(scale=1):
@@ -1313,6 +1297,10 @@ with gr.Blocks(title="TTSAM 震度預測系統", fill_height=True) as demo:
             waveform_plot = gr.Plot(
                 label="地震波形（選定的 25 個測站）",
             )
+            with gr.Row():
+                start_slider = gr.Slider(0, 300, value=0, step=1, label="開始時間 (秒)")
+                duration_slider = gr.Slider(0, 30, value=30, step=1, label="時間長度 (秒)")
+
 
     # ========== 下層：實際觀測 vs 預測結果 ==========
     with gr.Row():
@@ -1321,6 +1309,7 @@ with gr.Blocks(title="TTSAM 震度預測系統", fill_height=True) as demo:
             gr.Markdown("## 預測震度分布")
             predicted_intensity_map = gr.Plot(label="互動式震度地圖")
 
+
         # 右下：實際觀測震度圖
         with gr.Column(scale=1):
             gr.Markdown("## 實際觀測震度分布")