Update app.py

app.py

@@ -1,25 +1,29 @@
 import sqlite3
 import pandas as pd
 import gradio as gr
+import matplotlib.pyplot as plt
+import cartopy.crs as ccrs
+import cartopy.feature as cfeature
 
-# 後端資料查詢函式，已更新以支援日期時間區間
-async def fetch_earthquake_data(
+# --- 後端資料查詢與繪圖函式 ---
+async def fetch_and_plot_data(
     start_date, start_time, end_date, end_time,
     lat_min, lat_max, lon_min, lon_max,
     depth_min, depth_max, ML_min, ML_max
 ):
     try:
-        # 組合日期和時間，如果時間為空，則使用預設值
+        # 組合日期和時間
         start_datetime_str = f"{start_date.strip()} {start_time.strip() if start_time and start_time.strip() else '00:00:00'}"
         end_datetime_str = f"{end_date.strip()} {end_time.strip() if end_time and end_time.strip() else '23:59:59'}"
 
+        # 連接到資料庫
         conn = sqlite3.connect('earthquake_data.db')
         
-        # 使用 SQLite 的 `date || ' ' || time` 來組合欄位進行比較
+        # 建立查詢
         query = "SELECT * FROM earthquakes WHERE (date || ' ' || time) BETWEEN ? AND ?"
         params = [start_datetime_str, end_datetime_str]
 
-        # 處理其他數值範圍篩選條件
+        # 處理其他篩選條件
         filters = {
             "lat BETWEEN ? AND ?": (lat_min, lat_max),
             "lon BETWEEN ? AND ?": (lon_min, lon_max),
@@ -28,64 +32,90 @@ async def fetch_earthquake_data(
         }
         
         for condition, values in filters.items():
-            # 確保兩個值都存在才加入篩選
             if values[0] is not None and values[1] is not None:
                 query += f" AND {condition}"
                 params.extend(values)
 
+        # 執行查詢
         df = pd.read_sql_query(query, conn, params=tuple(params))
         conn.close()
 
+        # 如果沒有資料，回傳空的 DataFrame 和 None
         if df.empty:
-            return pd.DataFrame()
-            
-        return df
+            return pd.DataFrame({"Message": ["No data found for the selected filters."]}), None
+
+        # --- 繪圖 ---
+        fig = plt.figure(figsize=(10, 12))
+        ax = fig.add_subplot(1, 1, 1, projection=ccrs.PlateCarree())
+        ax.set_extent([lon_min, lon_max, lat_min, lat_max], crs=ccrs.PlateCarree())
+
+        # 加入地圖特徵
+        ax.add_feature(cfeature.LAND, edgecolor='black')
+        ax.add_feature(cfeature.OCEAN)
+        ax.add_feature(cfeature.COASTLINE)
+        ax.add_feature(cfeature.BORDERS, linestyle=':')
+
+        # 繪製散點圖
+        scatter = ax.scatter(
+            df['lon'], df['lat'], c=df['ML'],
+            cmap='viridis', alpha=0.7, s=50,
+            transform=ccrs.PlateCarree()
+        )
+        
+        # 加入顏色條和標題
+        plt.colorbar(scatter, ax=ax, orientation='vertical', label='Magnitude (ML)', shrink=0.6)
+        ax.set_title(f'Earthquake Distribution on Map\n({start_date} to {end_date})')
+        
+        # 關閉圖形以避免在伺服器上顯示
+        plt.close(fig)
+
+        return df, fig
+
     except Exception as e:
-        return pd.DataFrame({"Error": [str(e)]})
+        # 回傳錯誤訊息和 None
+        return pd.DataFrame({"Error": [str(e)]}), None
 
 
-# 建立 Gradio 使用者介面，已更新欄位和預設值
+# --- Gradio 使用者介面 ---
 with gr.Blocks() as demo:
     gr.Markdown("# Earthquake Data Explorer")
-    gr.Markdown("Use the filters below to search the earthquake catalog.")
+    gr.Markdown("Use the filters below to search the earthquake catalog and visualize the distribution.")
     
     with gr.Row():
-        with gr.Column():
-            gr.Markdown("### 起訖日期與時間")
-            start_date_input = gr.Textbox(label="開始日期 (Start Date)", value="2024-01-01")
-            start_time_input = gr.Textbox(label="開始時間 (Start Time, HH:MM:SS)", placeholder="00:00:00")
-        with gr.Column():
-            gr.Markdown("### (空白)") # 佔位，讓排版好看
-            end_date_input = gr.Textbox(label="結束日期 (End Date)", value="2024-12-31")
-            end_time_input = gr.Textbox(label="結束時間 (End Time, HH:MM:SS)", placeholder="23:59:59")
+        with gr.Column(scale=1):
+            gr.Markdown("### Date & Time Range")
+            start_date_input = gr.Textbox(label="Start Date", value="2024-01-01")
+            start_time_input = gr.Textbox(label="Start Time (HH:MM:SS)", placeholder="00:00:00")
+            end_date_input = gr.Textbox(label="End Date", value="2024-12-31")
+            end_time_input = gr.Textbox(label="End Time (HH:MM:SS)", placeholder="23:59:59")
+        
+        with gr.Column(scale=1):
+            gr.Markdown("### Geographical & Physical Filters")
+            lon_min_input = gr.Number(label="Longitude From", value=119)
+            lon_max_input = gr.Number(label="To", value=123)
+            lat_min_input = gr.Number(label="Latitude From", value=21)
+            lat_max_input = gr.Number(label="To", value=26)
+            depth_min_input = gr.Number(label="Depth From", value=0)
+            depth_max_input = gr.Number(label="To", value=100)
+            ML_min_input = gr.Number(label="Magnitude From", value=4.5)
+            ML_max_input = gr.Number(label="To", value=8)
+
+    filter_button = gr.Button("Filter and Plot Data", variant="primary")
     
     with gr.Row():
-        gr.Markdown("### 經緯度、深度、規模")
-    with gr.Row():
-        lon_min_input = gr.Number(label="經度 (Longitude) From", value=119)
-        lon_max_input = gr.Number(label="To", value=123)
-    with gr.Row():
-        lat_min_input = gr.Number(label="緯度 (Latitude) From", value=21)
-        lat_max_input = gr.Number(label="To", value=26)
-    with gr.Row():
-        depth_min_input = gr.Number(label="深度 (Depth) From", value=0)
-        depth_max_input = gr.Number(label="To", value=100)
-    with gr.Row():
-        ML_min_input = gr.Number(label="規模 (Magnitude) From", value=4.5)
-        ML_max_input = gr.Number(label="To", value=8)
-    
-    filter_button = gr.Button("Filter Data")
-    
-    output_df = gr.DataFrame(label="Filtered Results")
+        with gr.Column(scale=2):
+            output_plot = gr.Plot(label="Earthquake Distribution Map")
+        with gr.Column(scale=3):
+            output_df = gr.DataFrame(label="Filtered Results")
     
     filter_button.click(
-        fn=fetch_earthquake_data,
+        fn=fetch_and_plot_data,
         inputs=[
             start_date_input, start_time_input, end_date_input, end_time_input,
             lat_min_input, lat_max_input, lon_min_input, lon_max_input, 
             depth_min_input, depth_max_input, ML_min_input, ML_max_input
         ],
-        outputs=output_df
+        outputs=[output_df, output_plot]
     )
 
 # --- 主程式執行 ---