Update app.py

app.py

@@ -1,27 +1,54 @@
 import requests
 import gradio as gr
+import pandas as pd
+import plotly.express as px
 from datetime import datetime, timedelta
 
 # USGS API 的基礎 URL
 USGS_API_BASE_URL = "https://earthquake.usgs.gov/fdsnws/event/1/query"
 
-def format_earthquake_info_markdown(data):
+def create_earthquake_map(df):
     """
-    將從 API 獲取的地震資料格式化為 Markdown 字串。
+    使用 Plotly Express 根據 DataFrame 建立地震分佈圖。
+    """
+    fig = px.scatter_geo(
+        df,
+        lat='latitude',
+        lon='longitude',
+        color='magnitude',  # 顏色深淺代表規模
+        size='magnitude',   # 點的大小也代表規模
+        hover_name='place', # 滑鼠懸停時顯示地點
+        hover_data=['time_str', 'depth'],
+        projection="natural earth",
+        title="地震分佈圖",
+        color_continuous_scale=px.colors.sequential.Plasma # 設定顏色主題
+    )
+    
+    # 調整地圖外觀
+    fig.update_layout(
+        margin={"r":0,"t":40,"l":0,"b":0}
+    )
+    return fig
+
+def process_earthquake_data(data):
+    """
+    將從 API 獲取的原始資料轉換為 Markdown 和 DataFrame。
     """
     if not data or 'features' not in data or not data['features']:
-        return "在指定的條件下，找不到任何地震資料。"
+        return "在指定的條件下，找不到任何地震資料。", None
 
     count = data['metadata']['count']
     title = data['metadata']['title']
     
-    # 建立 Markdown 表格的標頭
+    # 準備 Markdown 輸出
     md_output = f"## {title}\n\n"
     md_output += f"**查詢成功，共找到 {count} 筆地震資料。**\n\n"
     md_output += "| 時間 (UTC) | 地點 | 芮氏規模 | 深度 (公里) | 經緯度 |\n"
     md_output += "|---|---|---|---|---|\n"
 
-    # 填入每一筆地震資料
+    # 準備 DataFrame 的資料列表
+    earthquake_list = []
+
     for feature in data['features']:
         properties = feature['properties']
         geometry = feature['geometry']
@@ -30,12 +57,26 @@ def format_earthquake_info_markdown(data):
         time_str = event_time_utc.strftime('%Y-%m-%d %H:%M:%S')
         
         magnitude = properties['mag']
-        place = properties['place'].replace('|', '\|') # 避免 Markdown 表格語法衝突
+        place = properties['place']
         longitude, latitude, depth = geometry['coordinates']
         
-        md_output += f"| {time_str} | {place} | {magnitude:.2f} | {depth:.2f} | ({latitude:.4f}, {longitude:.4f}) |\n"
+        # 加入到 Markdown 字串
+        place_md = place.replace('|', '\|') # 避免 Markdown 表格語法衝突
+        md_output += f"| {time_str} | {place_md} | {magnitude:.2f} | {depth:.2f} | ({latitude:.4f}, {longitude:.4f}) |\n"
         
-    return md_output
+        # 加入到 list 中，用於建立 DataFrame
+        earthquake_list.append({
+            'latitude': latitude,
+            'longitude': longitude,
+            'magnitude': magnitude,
+            'depth': depth,
+            'place': place,
+            'time_str': time_str
+        })
+
+    df = pd.DataFrame(earthquake_list)
+    return md_output, df
+
 
 def query_earthquakes(
     starttime_str: str,
@@ -46,110 +87,106 @@ def query_earthquakes(
     min_lon: float, max_lon: float
 ):
     """
-    接收來自 Gradio UI 的輸入，查詢並回傳格式化的地震資料。
+    接收來自 Gradio UI 的輸入，查詢並回傳格式化的地震資料及地圖。
     """
     params = {
         "format": "geojson",
         "starttime": starttime_str,
         "endtime": endtime_str,
         "minmagnitude": min_magnitude,
-        "limit": 500,  # 限制回傳數量，避免 UI 過於壅塞
+        "limit": 1000, # 可以適度增加 limit
         "orderby": "time"
     }
 
-    # 如果使用者勾選了 "指定地理範圍"
     if use_geo:
-        # 簡單的驗證
-        if not all([min_lat, max_lat, min_lon, max_lon]):
-            return "錯誤：若要指定地理範圍，則經緯度四個欄位皆須填寫。"
+        if not all([min_lat is not None, max_lat is not None, min_lon is not None, max_lon is not None]):
+            return "錯誤：若要指定地理範圍，則經緯度四個欄位皆須填寫。", None
         if min_lat >= max_lat or min_lon >= max_lon:
-            return "錯誤：最小經緯度必須小於最大經緯度。"
-            
+            return "錯誤：最小經緯度必須小於最大經緯度。", None
         params.update({
-            "minlatitude": min_lat,
-            "maxlatitude": max_lat,
-            "minlongitude": min_lon,
-            "maxlongitude": max_lon
+            "minlatitude": min_lat, "maxlatitude": max_lat,
+            "minlongitude": min_lon, "maxlongitude": max_lon
         })
 
     try:
         response = requests.get(USGS_API_BASE_URL, params=params, timeout=20)
         response.raise_for_status()
         data = response.json()
-        return format_earthquake_info_markdown(data)
+        
+        # 處理資料
+        markdown_result, df_result = process_earthquake_data(data)
+        
+        # 如果有資料，就建立地圖
+        if df_result is not None and not df_result.empty:
+            map_figure = create_earthquake_map(df_result)
+            return markdown_result, map_figure
+        else:
+            return markdown_result, None # 沒有資料時，回傳空的 map
+
     except requests.exceptions.RequestException as e:
-        return f"錯誤：網路請求失敗: {e}"
+        return f"錯誤：網路請求失敗: {e}", None
     except Exception as e:
-        return f"發生未知錯誤: {e}"
+        return f"發生未知錯誤: {e}", None
 
 # --- Gradio 介面設計 ---
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🌎 USGS 地震資料查詢工具")
-    gr.Markdown("透過此工具，您可以查詢美國地質調查局 (USGS) 的全球地震紀錄。")
+    gr.Markdown("# 🌎 USGS 地震資料查詢與視覺化工具")
+    gr.Markdown("透過此工具，您可以查詢並在地圖上視覺化美國地質調查局 (USGS) 的全球地震紀錄。")
     
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column(scale=2):
             gr.Markdown("### 1. 設定查詢條件")
-            # 預設查詢時間為過去 7 天
             today = datetime.now()
             seven_days_ago = today - timedelta(days=7)
             
             starttime_input = gr.Textbox(label="查詢開始日期", value=seven_days_ago.strftime('%Y-%m-%d'))
             endtime_input = gr.Textbox(label="查詢結束日期", value=today.strftime('%Y-%m-%d'))
             
-            magnitude_slider = gr.Slider(
-                minimum=0, maximum=10, step=0.1,
-                label="最小芮氏規模",
-                value=4.5
-            )
-
-            gr.Markdown("### 2. (可選) 指定地理範圍")
-            use_geo_checkbox = gr.Checkbox(label="啟用地理範圍篩選", value=False)
-            
-            with gr.Row():
-                min_lat_input = gr.Number(label="最小緯度 (南)", value=21.5)
-                max_lat_input = gr.Number(label="最大緯度 (北)", value=25.5)
-            with gr.Row():
-                min_lon_input = gr.Number(label="最小經度 (西)", value=120.0)
-                max_lon_input = gr.Number(label="最大經度 (東)", value=122.5)
+            magnitude_slider = gr.Slider(minimum=0, maximum=10, step=0.1, label="最小芮氏規模", value=4.5)
+
+            with gr.Accordion("可選：指定地理範圍", open=False): # 使用 Accordion 讓介面更簡潔
+                use_geo_checkbox = gr.Checkbox(label="啟用地理範圍篩選", value=False)
+                with gr.Row():
+                    min_lat_input = gr.Number(label="最小緯度 (南)", value=21.5)
+                    max_lat_input = gr.Number(label="最大緯度 (北)", value=25.5)
+                with gr.Row():
+                    min_lon_input = gr.Number(label="最小經度 (西)", value=120.0)
+                    max_lon_input = gr.Number(label="最大經度 (東)", value=122.5)
 
             submit_btn = gr.Button("開始查詢", variant="primary")
             
-        with gr.Column(scale=3):
+        with gr.Column(scale=5):
             gr.Markdown("### 查詢結果")
-            output_markdown = gr.Markdown("點擊「開始查詢」後，結果將會顯示於此。")
+            # 建立 Tabs 來切換地圖和詳細資料
+            with gr.Tabs():
+                with gr.TabItem("地震分佈圖"):
+                    map_plot = gr.Plot()
+                with gr.TabItem("詳細資料列表"):
+                    output_markdown = gr.Markdown("點擊「開始查詢」後，結果將會顯示於此。")
 
     # 綁定按鈕點擊事件
     submit_btn.click(
         fn=query_earthquakes,
         inputs=[
-            starttime_input,
-            endtime_input,
-            magnitude_slider,
-            use_geo_checkbox,
-            min_lat_input, max_lat_input,
-            min_lon_input, max_lon_input
+            starttime_input, endtime_input, magnitude_slider,
+            use_geo_checkbox, min_lat_input, max_lat_input, min_lon_input, max_lon_input
         ],
-        outputs=output_markdown
+        outputs=[output_markdown, map_plot] # 同時更新 Markdown 和 Plot
     )
     
     gr.Examples(
         examples=[
-            [seven_days_ago.strftime('%Y-%m-%d'), today.strftime('%Y-%m-%d'), 6.0, False, 0, 0, 0, 0],
+            ["2025-08-09", today.strftime('%Y-%m-%d'), 6.0, False, 21.5, 25.5, 120.0, 122.5],
             ["2024-04-02", "2024-04-04", 5.5, True, 23.0, 25.0, 121.0, 122.5],
             ["2024-01-01", "2024-01-02", 7.0, True, 35.0, 38.0, 136.0, 140.0],
         ],
         inputs=[
-            starttime_input,
-            endtime_input,
-            magnitude_slider,
-            use_geo_checkbox,
-            min_lat_input, max_lat_input,
-            min_lon_input, max_lon_input
+            starttime_input, endtime_input, magnitude_slider,
+            use_geo_checkbox, min_lat_input, max_lat_input, min_lon_input, max_lon_input
         ],
-        outputs=output_markdown,
+        outputs=[output_markdown, map_plot],
         fn=query_earthquakes,
-        cache_examples=True # 讓範例結果快取，加速載入
+        cache_examples=True
     )
 
 if __name__ == "__main__":