Update app.py

app.py

@@ -3,82 +3,115 @@ import gradio as gr
 import pandas as pd
 import plotly.express as px
 from datetime import datetime, timedelta
+import time
 
-# USGS API 的基礎 URL
+# --- 全局設定與 CSS 樣式 ---
 USGS_API_BASE_URL = "https://earthquake.usgs.gov/fdsnws/event/1/query"
 
-def create_earthquake_map(df):
-    """
-    使用 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
+# 自訂 CSS 來美化介面
+CUSTOM_CSS = """
+/* 美化主標題 */
+#main-title {
+    text-align: center;
+    font-family: 'Arial Black', sans-serif;
+    color: #2c3e50;
+    font-size: 2.5em;
+    padding-top: 10px;
+}
+/* 讓控制面板的卡片有陰影和圓角 */
+#control-panel {
+    border-radius: 15px;
+    background-color: #f8f9fa;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+/* 結果統計卡片的樣式 */
+.stats-card {
+    border-radius: 10px;
+    padding: 15px;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+.stats-card h3 { font-size: 1.2em; color: #34495e; }
+.stats-card p { font-size: 1.5em; font-weight: bold; color: #e74c3c; }
+/* 頁腳樣式 */
+#footer {
+    text-align: center;
+    color: #7f8c8d;
+    font-size: 0.9em;
+    padding: 15px;
+}
+"""
+
+# --- 核心資料處理函式 ---
 
 def process_earthquake_data(data):
-    """
-    將從 API 獲取的原始資料轉換為 Markdown 和 DataFrame。
-    """
+    """將 API 的 JSON 資料轉換為 DataFrame, Markdown 和統計摘要"""
     if not data or 'features' not in data or not data['features']:
-        return "在指定的條件下，找不到任何地震資料。", None
+        return None, "在指定的條件下，找不到任何地震資料。", None
 
-    count = data['metadata']['count']
-    title = data['metadata']['title']
-    
-    # 準備 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']
-        
         event_time_utc = datetime.fromtimestamp(properties['time'] / 1000)
-        time_str = event_time_utc.strftime('%Y-%m-%d %H:%M:%S')
         
-        magnitude = properties['mag']
-        place = properties['place']
-        longitude, latitude, depth = geometry['coordinates']
-        
-        # 加入到 Markdown 字串
-        place_md = place.replace('|', '\|') # 避免 Markdown 表格語法衝突
-        md_output += f"| {time_str} | {place_md} | {magnitude:.2f} | {depth:.2f} | ({latitude:.4f}, {longitude:.4f}) |\n"
-        
-        # 加入到 list 中，用於建立 DataFrame
         earthquake_list.append({
-            'latitude': latitude,
-            'longitude': longitude,
-            'magnitude': magnitude,
-            'depth': depth,
-            'place': place,
-            'time_str': time_str
+            'latitude': geometry['coordinates'][1],
+            'longitude': geometry['coordinates'][0],
+            'magnitude': properties['mag'],
+            'depth': geometry['coordinates'][2],
+            'place': properties['place'],
+            'time_utc': event_time_utc,
+            'url': properties['url']
         })
 
     df = pd.DataFrame(earthquake_list)
-    return md_output, df
+    if df.empty:
+        return None, "在指定的條件下，找不到任何地震資料。", None
+
+    # --- 製作統計摘要 ---
+    strongest_quake = df.loc[df['magnitude'].idxmax()]
+    deepest_quake = df.loc[df['depth'].idxmax()]
+    stats = {
+        "count": len(df),
+        "avg_mag": f"{df['magnitude'].mean():.2f}",
+        "strongest_mag": f"{strongest_quake['magnitude']:.2f}",
+        "strongest_loc": strongest_quake['place'],
+        "deepest_depth": f"{deepest_quake['depth']:.2f} km",
+        "deepest_loc": deepest_quake['place']
+    }
+    
+    # --- 製作 Markdown 表格 ---
+    df_display = df.copy()
+    df_display['time_utc'] = df_display['time_utc'].dt.strftime('%Y-%m-%d %H:%M:%S')
+    md_table = df_display[['time_utc', 'place', 'magnitude', 'depth']].to_markdown(index=False)
+
+    return df, md_table, stats
 
+def create_earthquake_map(df):
+    """使用 Plotly 繪製互動式地震分佈圖"""
+    if df is None or df.empty:
+        return None
 
-def query_earthquakes(
+    fig = px.scatter_geo(
+        df,
+        lat='latitude',
+        lon='longitude',
+        color='magnitude',
+        size=df['magnitude'].apply(lambda x: x**2), # 讓規模大小差異更明顯
+        hover_name='place',
+        hover_data={'magnitude': ':.2f', 'depth': ':.2f km', 'time_utc': True, 'latitude':False, 'longitude':False},
+        projection="natural earth",
+        title="地震分佈圖",
+        color_continuous_scale=px.colors.sequential.Inferno
+    )
+    fig.update_layout(margin={"r":0, "t":40, "l":0, "b":0})
+    return fig
+
+# --- Gradio 主要執行函式 ---
+
+def query_and_visualize(
     starttime_str: str,
     endtime_str: str,
     min_magnitude: float,
@@ -86,107 +119,142 @@ def query_earthquakes(
     min_lat: float, max_lat: float,
     min_lon: float, max_lon: float
 ):
-    """
-    接收來自 Gradio UI 的輸入，查詢並回傳格式化的地震資料及地圖。
-    """
+    """主函式，接收 UI 輸入，回傳所有 UI 更新"""
+    # 1. 顯示載入狀態
+    yield {
+        submit_btn: gr.update(value="⏳ 查詢中...", interactive=False),
+        map_plot: None,
+        stats_group: gr.update(visible=False),
+        download_group: gr.update(visible=False),
+        md_output: "正在從 USGS 獲取資料，請稍候..."
+    }
+    
     params = {
-        "format": "geojson",
-        "starttime": starttime_str,
-        "endtime": endtime_str,
-        "minmagnitude": min_magnitude,
-        "limit": 1000, # 可以適度增加 limit
-        "orderby": "time"
+        "format": "geojson", "starttime": starttime_str, "endtime": endtime_str,
+        "minmagnitude": min_magnitude, "limit": 2000, "orderby": "time"
     }
 
     if use_geo:
         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 "錯誤：最小經緯度必須小於最大經緯度。", None
-        params.update({
-            "minlatitude": min_lat, "maxlatitude": max_lat,
-            "minlongitude": min_lon, "maxlongitude": max_lon
-        })
+            yield { submit_btn: gr.update(value="開始查詢", interactive=True), md_output: "❌ 錯誤：地理範圍四個欄位皆須填寫。" }
+            return
+        params.update({"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 = requests.get(USGS_API_BASE_URL, params=params, timeout=25)
         response.raise_for_status()
-        data = response.json()
-        
-        # 處理資料
-        markdown_result, df_result = process_earthquake_data(data)
+        df, md_table, stats = process_earthquake_data(response.json())
         
-        # 如果有資料，就建立地圖
-        if df_result is not None and not df_result.empty:
-            map_figure = create_earthquake_map(df_result)
-            return markdown_result, map_figure
+        if df is not None:
+            map_figure = create_earthquake_map(df)
+            # 將 DataFrame 存為 CSV 格式的暫存檔
+            csv_path = "earthquake_data.csv"
+            df.to_csv(csv_path, index=False)
+            
+            yield {
+                submit_btn: gr.update(value="查詢完成", interactive=True),
+                map_plot: map_figure,
+                md_output: md_table,
+                stats_group: gr.update(visible=True),
+                download_group: gr.update(visible=True),
+                file_download: gr.update(value=csv_path, visible=True),
+                # 更新統計數據
+                stats_count_val: str(stats['count']),
+                stats_avg_mag_val: stats['avg_mag'],
+                stats_strongest_val: f"{stats['strongest_mag']} @ {stats['strongest_loc']}",
+                stats_deepest_val: f"{stats['deepest_depth']} @ {stats['deepest_loc']}"
+            }
         else:
-            return markdown_result, None # 沒有資料時，回傳空的 map
-
-    except requests.exceptions.RequestException as e:
-        return f"錯誤：網路請求失敗: {e}", None
+            yield {
+                submit_btn: gr.update(value="開始查詢", interactive=True),
+                md_output: "在指定的條件下，找不到任何地震資料。"
+            }
     except Exception as e:
-        return f"發生未知錯誤: {e}", None
+        yield { submit_btn: gr.update(value="查詢失敗", interactive=True), md_output: f"❌ 發生錯誤: {e}" }
+    
+    # 短暫延遲後恢復按鈕文字
+    time.sleep(2)
+    yield { submit_btn: gr.update(value="開始查詢", interactive=True) }
 
-# --- Gradio 介面設計 ---
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🌎 USGS 地震資料查詢與視覺化工具")
-    gr.Markdown("透過此工具，您可以查詢並在地圖上視覺化美國地質調查局 (USGS) 的全球地震紀錄。")
+# --- Gradio UI 介面設計 ---
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="sky", secondary_hue="light"), css=CUSTOM_CSS) as demo:
+    # 標題
+    gr.Markdown("# 🌋 地震視覺化儀 (Quake Visualizer)", elem_id="main-title")
     
     with gr.Row():
-        with gr.Column(scale=2):
-            gr.Markdown("### 1. 設定查詢條件")
-            today = datetime.now()
-            seven_days_ago = today - timedelta(days=7)
+        # 左側控制面板
+        with gr.Column(scale=2, elem_id="control-panel"):
+            gr.Markdown("### ⚙️ 控制面板")
             
-            starttime_input = gr.Textbox(label="查詢開始日期", value=seven_days_ago.strftime('%Y-%m-%d'))
-            endtime_input = gr.Textbox(label="查詢結束日期", value=today.strftime('%Y-%m-%d'))
+            with gr.Accordion("時間與規模", open=True):
+                # 預設查詢時間為過去 24 小時
+                now = datetime.now()
+                yesterday = now - timedelta(days=1)
+                starttime_input = gr.Textbox(label="開始日期 (YYYY-MM-DD)", value=yesterday.strftime('%Y-%m-%d'))
+                endtime_input = gr.Textbox(label="結束日期 (YYYY-MM-DD)", value=now.strftime('%Y-%m-%d'))
+                magnitude_slider = gr.Slider(minimum=0, maximum=10, step=0.1, label="最小芮氏規模", value=2.5)
             
-            magnitude_slider = gr.Slider(minimum=0, maximum=10, step=0.1, label="最小芮氏規模", value=4.5)
-
-            with gr.Accordion("可選：指定地理範圍", open=False): # 使用 Accordion 讓介面更簡潔
+            with gr.Accordion("地理範圍 (可選)", open=False):
                 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)
+                    min_lat_input = gr.Number(label="最小緯度", value=21.5, interactive=False)
+                    max_lat_input = gr.Number(label="最大緯度", value=25.5, interactive=False)
                 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")
+                    min_lon_input = gr.Number(label="最小經度", value=120.0, interactive=False)
+                    max_lon_input = gr.Number(label="最大經度", value=122.5, interactive=False)
             
+            submit_btn = gr.Button("開始查詢", variant="primary")
+
+        # 右側結果顯示區
         with gr.Column(scale=5):
-            gr.Markdown("### 查詢結果")
-            # 建立 Tabs 來切換地圖和詳細資料
             with gr.Tabs():
-                with gr.TabItem("地震分佈圖"):
+                with gr.TabItem("📊 視覺化儀表板"):
+                    with gr.Row(visible=False) as stats_group:
+                        with gr.Column(elem_classes="stats-card"):
+                            gr.Markdown("<h3>總計地震數</h3>")
+                            stats_count_val = gr.Markdown("<p>0</p>")
+                        with gr.Column(elem_classes="stats-card"):
+                            gr.Markdown("<h3>平均規模</h3>")
+                            stats_avg_mag_val = gr.Markdown("<p>0</p>")
+                        with gr.Column(elem_classes="stats-card"):
+                            gr.Markdown("<h3>最強地震</h3>")
+                            stats_strongest_val = gr.Markdown("<p>-</p>")
+                        with gr.Column(elem_classes="stats-card"):
+                            gr.Markdown("<h3>最深地震</h3>")
+                            stats_deepest_val = gr.Markdown("<p>-</p>")
+                    
                     map_plot = gr.Plot()
-                with gr.TabItem("詳細資料列表"):
-                    output_markdown = gr.Markdown("點擊「開始查詢」後，結果將會顯示於此。")
+                    
+                    with gr.Row(visible=False) as download_group:
+                        file_download = gr.File(label="下載 CSV 資料", visible=True)
 
-    # 綁定按鈕點擊事件
+                with gr.TabItem("📄 詳細數據"):
+                    md_output = gr.Markdown("點擊「開始查詢」後，結果將顯示於此。")
+    
+    gr.Markdown("---", elem_id="footer")
+    gr.Markdown("由 Gradio 與 Plotly 強力驅動 | 資料來源：美國地質調查局 (USGS)", elem_id="footer")
+
+    # --- 事件監聽與互動邏輯 ---
+    def toggle_geo_inputs(enabled):
+        return {
+            min_lat_input: gr.update(interactive=enabled), max_lat_input: gr.update(interactive=enabled),
+            min_lon_input: gr.update(interactive=enabled), max_lon_input: gr.update(interactive=enabled)
+        }
+    use_geo_checkbox.change(fn=toggle_geo_inputs, inputs=use_geo_checkbox, outputs=[min_lat_input, max_lat_input, min_lon_input, max_lon_input])
+    
+    # 綁定主查詢函式
     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
-        ],
-        outputs=[output_markdown, map_plot] # 同時更新 Markdown 和 Plot
+        fn=query_and_visualize,
+        inputs=[starttime_input, endtime_input, magnitude_slider, use_geo_checkbox, min_lat_input, max_lat_input, min_lon_input, max_lon_input],
+        outputs=[submit_btn, map_plot, md_output, stats_group, download_group, file_download, stats_count_val, stats_avg_mag_val, stats_strongest_val, stats_deepest_val]
     )
     
-    gr.Examples(
-        examples=[
-            ["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
-        ],
-        outputs=[output_markdown, map_plot],
-        fn=query_earthquakes,
-        cache_examples=True
+    # 頁面載入時自動觸發一次查詢
+    demo.load(
+        fn=query_and_visualize,
+        inputs=[starttime_input, endtime_input, magnitude_slider, use_geo_checkbox, min_lat_input, max_lat_input, min_lon_input, max_lon_input],
+        outputs=[submit_btn, map_plot, md_output, stats_group, download_group, file_download, stats_count_val, stats_avg_mag_val, stats_strongest_val, stats_deepest_val]
     )
 
 if __name__ == "__main__":