feat: add LLM integration for smart analysis

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 ChLaw.json filter=lfs diff=lfs merge=lfs -text
 ChOrder.json filter=lfs diff=lfs merge=lfs -text
+*.json filter=lfs diff=lfs merge=lfs -text

ChLaw.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2973d47c04aab0c2460adef524b078bd1b3810fdeddd44b652d453420759af34
-size 25817584
+oid sha256:cf98cb46faa7b2efa4906c628db4def33f52bbaada1419b532633abc73bf5ccb
+size 23060163

ChOrder.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:59503d69a9e348cfe57c62afbc4b9f62af8ad982bb9ac98bb187ea6bcd4d577d
-size 111471122
+oid sha256:eb3a0de09a4f535f37cf40cec7eea812615456704a95c51bd85c10a95f22a33f
+size 100255557

app.py

@@ -11,8 +11,10 @@ urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
 
 from datetime import datetime
 from contextlib import asynccontextmanager
-from fastapi import FastAPI
+from fastapi import FastAPI, HTTPException
 from fastapi.responses import HTMLResponse
+from pydantic import BaseModel
+import httpx
 
 # --- 初始化與設定 ---
 app = FastAPI()
@@ -35,6 +37,13 @@ CACHE = {
 
 UPDATE_LOCK = asyncio.Lock()
 
+class AnalyzeRequest(BaseModel):
+    model_provider: str
+    model_name: str
+    api_key: str
+    prompt: str
+    context: str
+
 # --- 工具函數 ---
 
 def load_fund_mapping():
@@ -215,6 +224,83 @@ def index():
             return f.read()
     return "<h3>Error: index.html 檔案未找到，請確保該檔案位於程式碼相同目錄。</h3>"
 
+@app.post("/api/analyze")
+async def analyze_data(req: AnalyzeRequest):
+    if not req.api_key:
+        raise HTTPException(status_code=400, detail="請提供 API Key")
+    
+    provider = req.model_provider.lower()
+    
+    # 組合完整的 Prompt
+    full_prompt = f"""
+以下是特種基金的相關法條作為參考知識：
+
+<fund_rules>
+{req.context}
+</fund_rules>
+
+請根據上述法條，回答以下使用者問題：
+{req.prompt}
+"""
+
+    if provider == "openai":
+        url = "https://api.openai.com/v1/chat/completions"
+        headers = {
+            "Authorization": f"Bearer {req.api_key}",
+            "Content-Type": "application/json"
+        }
+        payload = {
+            "model": req.model_name or "gpt-4o",
+            "messages": [
+                {"role": "system", "content": "你是一個專業的台灣法規分析助手，請根據提供的條文內容給出精確、客觀的分析。"},
+                {"role": "user", "content": full_prompt}
+            ],
+            "temperature": 0.2
+        }
+        
+        async with httpx.AsyncClient() as client:
+            try:
+                response = await client.post(url, headers=headers, json=payload, timeout=60.0)
+                response.raise_for_status()
+                data = response.json()
+                return {"result": data["choices"][0]["message"]["content"]}
+            except Exception as e:
+                raise HTTPException(status_code=500, detail=f"OpenAI API 請求失敗: {str(e)}")
+                
+    elif provider == "gemini":
+        # Google Gemini API REST call
+        model = req.model_name or "gemini-1.5-pro"
+        url = f"https://generativelanguage.googleapis.com/v1beta/models/{model}:generateContent?key={req.api_key}"
+        headers = {
+            "Content-Type": "application/json"
+        }
+        payload = {
+            "contents": [{
+                "parts": [{"text": full_prompt}]
+            }],
+            "systemInstruction": {
+                "parts": [{"text": "你是一個專業的台灣法規分析助手，請根據提供的條文內容給出精確、客觀的分析。"}]
+            },
+             "generationConfig": {
+                "temperature": 0.2
+            }
+        }
+        
+        async with httpx.AsyncClient() as client:
+            try:
+                response = await client.post(url, headers=headers, json=payload, timeout=60.0)
+                response.raise_for_status()
+                data = response.json()
+                text = data.get("candidates", [{}])[0].get("content", {}).get("parts", [{}])[0].get("text", "")
+                if not text:
+                    raise Exception("API 返回格式無法解析或被安全機制阻擋")
+                return {"result": text}
+            except Exception as e:
+                raise HTTPException(status_code=500, detail=f"Gemini API 請求失敗: {str(e)}")
+    
+    else:
+        raise HTTPException(status_code=400, detail="不支援的模型提供者 (目前僅支援 openai 或 gemini)")
+
 if __name__ == "__main__":
     import uvicorn
     # 這裡的 port 配合你的日誌顯示為 7860

fund_mapping.json

@@ -1,58 +1,3 @@
-{
-    "行政院國家發展基金": 103001,
-    "營建建設基金": 108001,
-    "住宅基金": 10800101,
-    "新市鎮開發基金": 10800102,
-    "中央都市更新基金": 10800103,
-    "實施平均地權基金": 108004,
-    "國軍生產及服務作業基金": 110001,
-    "國軍老舊眷村改建基金": 110003,
-    "國防醫學院軍事教育基金": 110004,
-    "國立臺灣大學校務基金": 112101,
-    "法務部矯正機關作業基金": 113001,
-    "經濟作業基金": 114001,
-    "水資源作業基金": 114002,
-    "交通作業基金": 115001,
-    "國軍退除役官兵安置基金": 118001,
-    "榮民醫療作業基金": 118002,
-    "科學園區管理局作業基金": 119001,
-    "農業作業基金": 121001,
-    "農田水利事業作業基金": 121002,
-    "勞工保險局作業基金": 122001,
-    "醫療藥品基金": 123001,
-    "管制藥品製藥工廠作業基金": 123002,
-    "全民健康保險基金": 123003,
-    "國民年金保險基金": 123004,
-    "國立文化機構作業基金": 125001,
-    "故宮文物藝術發展基金": 132001,
-    "原住民族綜合發展基金": 134001,
-    "考選業務基金": 170001,
-    "中央政府債務基金": 211001,
-    "中央研究院科學研究基金": 301001,
-    "行政院國家科學技術發展基金": 303001,
-    "離島建設基金": 303003,
-    "花東地區永續發展基金": 303006,
-    "促進轉型正義基金": 303007,
-    "新住民發展基金": 308002,
-    "研發及產業訓儲替代役基金": 308003,
-    "國土永續發展基金": 308005,
-    "學產基金": 312001,
-    "運動發展基金": 326001,
-    "私立高級中等以上學校退場基金": 312003,
-    "毒品防制基金": 313001,
-    "經濟特別收入基金": 314001,
-    "核能發電後端營運基金": 314002,
-    "航港建設基金": 315001,
-    "核子事故緊急應變基金": 320001,
-    "農業特別收入基金": 321001,
-    "就業安定基金": 322001,
-    "衛生福利特別收入基金": 323001,
-    "環境保護基金": 324001,
-    "文化發展基金": 325001,
-    "金融監督管理基金": 355001,
-    "海洋污染防治基金": 356001,
-    "通訊傳播監督管理基金": 360001,
-    "有線廣播電視事業發展基金": 360002,
-    "反托拉斯基金": 361001,
-    "國軍營舍及設施改建基金": 410001
-}
+version https://git-lfs.github.com/spec/v1
+oid sha256:b40b476644cb1e7883099d825ae47c0d010a4037b87d59d5f5aa0193240c925f
+size 2335

index.html

@@ -1,120 +1,500 @@
 <!DOCTYPE html>
 <html lang="zh-Hant-TW">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>中央政府特種基金AI智能分析平台－收支保管及運用辦法行動小法典</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
         /* 基礎變數與深色模式 */
         :root {
-            --bg-color: #f4f7f6; --text-color: #333; --container-bg: #fff;
-            --primary-color: #0056b3; --primary-hover: #004494;
-            --border-color: #ddd; --table-striped: #f9f9f9; --table-hover: #f1f1f1;
-            --law-info-bg: #e7f3fe; --font-size-base: 16px;
+            --bg-color: #f4f7f6;
+            --text-color: #333;
+            --container-bg: #fff;
+            --primary-color: #0056b3;
+            --primary-hover: #004494;
+            --border-color: #ddd;
+            --table-striped: #f9f9f9;
+            --table-hover: #f1f1f1;
+            --law-info-bg: #e7f3fe;
+            --font-size-base: 16px;
         }
+
         body.dark-mode {
-            --bg-color: #121212; --text-color: #e0e0e0; --container-bg: #1e1e1e;
-            --primary-color: #4da3ff; --primary-hover: #1a8cff;
-            --border-color: #444; --table-striped: #2a2a2a; --table-hover: #333;
+            --bg-color: #121212;
+            --text-color: #e0e0e0;
+            --container-bg: #1e1e1e;
+            --primary-color: #4da3ff;
+            --primary-hover: #1a8cff;
+            --border-color: #444;
+            --table-striped: #2a2a2a;
+            --table-hover: #333;
             --law-info-bg: #2c3e50;
         }
+
         body {
             font-family: 'Segoe UI', 'Microsoft JhengHei', Arial, sans-serif;
-            margin: 0; padding: 20px; background-color: var(--bg-color); 
-            color: var(--text-color); font-size: var(--font-size-base);
+            margin: 0;
+            padding: 20px;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            font-size: var(--font-size-base);
             transition: background-color 0.3s, color 0.3s;
         }
+
         .container {
-            max-width: 1800px; margin: 0 auto; background-color: var(--container-bg);
-            padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+            max-width: 1800px;
+            margin: 0 auto;
+            background-color: var(--container-bg);
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
             transition: background-color 0.3s;
         }
 
         /* 頂部設定列 */
-        .settings-bar { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }
+        .settings-bar {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
         .setting-btn {
-            background-color: var(--border-color); color: var(--text-color); border: none; 
-            padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold;
+            background-color: var(--border-color);
+            color: var(--text-color);
+            border: none;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+
+        .setting-btn:hover {
+            background-color: #ccc;
+        }
+
+        body.dark-mode .setting-btn:hover {
+            background-color: #555;
         }
-        .setting-btn:hover { background-color: #ccc; }
-        body.dark-mode .setting-btn:hover { background-color: #555; }
-        h1 { text-align: center; color: var(--primary-color); margin-bottom: 20px; }
-        
+
+        h1 {
+            text-align: center;
+            color: var(--primary-color);
+            margin-bottom: 20px;
+        }
+
         /* 標籤頁 (Tabs) */
-        .tab-buttons { display: flex; border-bottom: 2px solid var(--border-color); margin-bottom: 20px; flex-wrap: wrap; }
+        .tab-buttons {
+            display: flex;
+            border-bottom: 2px solid var(--border-color);
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
         .tab-button {
-            padding: 10px 20px; cursor: pointer; background-color: var(--table-hover);
-            border: 1px solid var(--border-color); border-bottom: none; border-radius: 5px 5px 0 0;
-            margin-right: 5px; font-size: 1em; color: var(--text-color);
+            padding: 10px 20px;
+            cursor: pointer;
+            background-color: var(--table-hover);
+            border: 1px solid var(--border-color);
+            border-bottom: none;
+            border-radius: 5px 5px 0 0;
+            margin-right: 5px;
+            font-size: 1em;
+            color: var(--text-color);
         }
-        .tab-button.active { 
-            background-color: var(--container-bg); border-bottom: 2px solid var(--container-bg); 
-            margin-bottom: -2px; color: var(--primary-color); font-weight: bold; 
+
+        .tab-button.active {
+            background-color: var(--container-bg);
+            border-bottom: 2px solid var(--container-bg);
+            margin-bottom: -2px;
+            color: var(--primary-color);
+            font-weight: bold;
+        }
+
+        .tab-content {
+            display: none;
         }
-        .tab-content { display: none; }
 
         /* 表格與按鈕 */
-        .controls-container { 
-            display: flex; justify-content: space-between; align-items: center; 
-            margin-bottom: 20px; flex-wrap: wrap; gap: 15px; position: sticky; top: 0; z-index: 100;
-            background-color: var(--container-bg); padding: 15px 0; border-bottom: 1px solid var(--border-color);
-        }
-        #filter-input, #exclude-input, #fund-select, #fund-full-select {
-            padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1em; background-color: var(--container-bg); color: var(--text-color);
-        }
-        #filter-input, #exclude-input { flex-grow: 1; min-width: 200px; }
-        .action-button { padding: 10px 20px; font-size: 1em; color: white; border: none; border-radius: 4px; cursor: pointer; }
-        #search-btn { background-color: var(--primary-color); } 
-        #export-btn { background-color: #28a745; } 
-
-        table { width: 100%; border-collapse: collapse; margin-top: 10px; table-layout: fixed; }
-        th, td { border: 1px solid var(--border-color); padding: 12px; text-align: center; vertical-align: middle; word-wrap: break-word; }
-        th { background-color: var(--primary-color); color: white; cursor: pointer; }
-        tbody tr:nth-child(even) { background-color: var(--table-striped); }
-        tbody tr:hover { background-color: var(--table-hover); }
-
-        .loader { border: 5px solid #f3f3f3; border-top: 5px solid var(--primary-color); border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; display: inline-block; vertical-align: middle; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        #json-update-info { text-align: right; margin-bottom: 10px; color: #888; font-size: 0.9em; font-weight: bold; }
-        mark { background-color: #fff3cd; color: #856404; padding: 0.2em; border-radius: 3px; font-weight: bold; }
-        .status-badge { background-color: #dc3545; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; margin-left: 8px; vertical-align: text-bottom; }
+        .controls-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 15px;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            background-color: var(--container-bg);
+            padding: 15px 0;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        #filter-input,
+        #exclude-input,
+        #fund-select,
+        #fund-full-select {
+            padding: 10px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 1em;
+            background-color: var(--container-bg);
+            color: var(--text-color);
+        }
+
+        #filter-input,
+        #exclude-input {
+            flex-grow: 1;
+            min-width: 200px;
+        }
+
+        .action-button {
+            padding: 10px 20px;
+            font-size: 1em;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        #search-btn {
+            background-color: var(--primary-color);
+        }
+
+        #export-btn {
+            background-color: #28a745;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+            table-layout: fixed;
+        }
+
+        th,
+        td {
+            border: 1px solid var(--border-color);
+            padding: 12px;
+            text-align: center;
+            vertical-align: middle;
+            word-wrap: break-word;
+        }
+
+        th {
+            background-color: var(--primary-color);
+            color: white;
+            cursor: pointer;
+        }
+
+        tbody tr:nth-child(even) {
+            background-color: var(--table-striped);
+        }
+
+        tbody tr:hover {
+            background-color: var(--table-hover);
+        }
+
+        .loader {
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid var(--primary-color);
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 2s linear infinite;
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        #json-update-info {
+            text-align: right;
+            margin-bottom: 10px;
+            color: #888;
+            font-size: 0.9em;
+            font-weight: bold;
+        }
+
+        mark {
+            background-color: #fff3cd;
+            color: #856404;
+            padding: 0.2em;
+            border-radius: 3px;
+            font-weight: bold;
+        }
+
+        .status-badge {
+            background-color: #dc3545;
+            color: white;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.8em;
+            margin-left: 8px;
+            vertical-align: text-bottom;
+        }
 
         /* 儀表板 (Dashboard) 專屬樣式 */
-        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }
-        .kpi-card { 
-            background-color: var(--table-striped); padding: 20px; border-radius: 8px; 
-            border-left: 5px solid var(--primary-color); box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: center; 
-        }
-        .kpi-title { font-size: 1.1em; color: #666; margin-bottom: 10px; }
-        body.dark-mode .kpi-title { color: #aaa; }
-        .kpi-value { font-size: 2.2em; font-weight: bold; color: var(--primary-color); }
-        
-        .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 20px; }
-        .chart-box { background-color: var(--table-striped); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
-        .chart-title { text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; color: var(--text-color); }
-        .chart-container { position: relative; height: 300px; width: 100%; }
+        .kpi-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 30px;
+        }
+
+        .kpi-card {
+            background-color: var(--table-striped);
+            padding: 20px;
+            border-radius: 8px;
+            border-left: 5px solid var(--primary-color);
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+            text-align: center;
+        }
+
+        .kpi-title {
+            font-size: 1.1em;
+            color: #666;
+            margin-bottom: 10px;
+        }
+
+        body.dark-mode .kpi-title {
+            color: #aaa;
+        }
+
+        .kpi-value {
+            font-size: 2.2em;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+
+        .charts-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+            gap: 30px;
+            margin-bottom: 20px;
+        }
+
+        .chart-box {
+            background-color: var(--table-striped);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        }
+
+        .chart-title {
+            text-align: center;
+            font-size: 1.2em;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: var(--text-color);
+        }
+
+        .chart-container {
+            position: relative;
+            height: 300px;
+            width: 100%;
+        }
 
         /* 其他原有樣式保留 */
-        .pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; }
-        .page-btn { padding: 8px 15px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; }
-        .page-btn:disabled { background-color: #aaa; cursor: not-allowed; }
-        #back-to-top { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 99; font-size: 20px; background-color: var(--primary-color); color: white; cursor: pointer; padding: 12px 16px; border-radius: 50%; }
-        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
-        .modal-content { background-color: var(--container-bg); margin: 10% auto; padding: 20px; width: 60%; border-radius: 8px; }
-        .close-modal { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
-        
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .page-btn {
+            padding: 8px 15px;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .page-btn:disabled {
+            background-color: #aaa;
+            cursor: not-allowed;
+        }
+
+        #back-to-top {
+            display: none;
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            z-index: 99;
+            font-size: 20px;
+            background-color: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            padding: 12px 16px;
+            border-radius: 50%;
+        }
+
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+
+        .modal-content {
+            background-color: var(--container-bg);
+            margin: 10% auto;
+            padding: 20px;
+            width: 60%;
+            border-radius: 8px;
+        }
+
+        .close-modal {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+
+        /* AI 分析區塊樣式 */
+        .ai-panel {
+            background-color: var(--law-info-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 20px;
+            margin-top: 20px;
+            margin-bottom: 20px;
+        }
+
+        .ai-panel h3 {
+            margin-top: 0;
+            color: var(--primary-color);
+        }
+
+        .ai-controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-bottom: 15px;
+        }
+
+        .ai-controls select,
+        .ai-controls input,
+        .ai-controls textarea {
+            padding: 10px;
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            font-size: 1em;
+            background-color: var(--container-bg);
+            color: var(--text-color);
+        }
+
+        .ai-controls textarea {
+            width: 100%;
+            min-height: 80px;
+            resize: vertical;
+        }
+
+        .ai-btn {
+            background-color: #8a2be2;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1em;
+        }
+
+        .ai-btn:hover {
+            background-color: #7a22cc;
+        }
+
+        .ai-btn:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+
+        .ai-result {
+            margin-top: 15px;
+            padding: 15px;
+            background-color: var(--container-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 4px;
+            display: none;
+        }
+
+        .ai-result.loading {
+            text-align: center;
+            color: var(--text-color);
+        }
+
+        .ai-result-content {
+            line-height: 1.6;
+        }
+
         @media (max-width: 768px) {
-            table, thead, tbody, th, td, tr { display: block; }
-            thead tr { display: none; }
-            tr { margin-bottom: 15px; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; }
-            td { text-align: left !important; border: none; border-bottom: 1px dotted var(--border-color); position: relative; padding-left: 35%; }
-            td::before { content: attr(data-label); position: absolute; left: 10px; width: 30%; font-weight: bold; color: var(--primary-color); text-align: left; }
-            .charts-grid { grid-template-columns: 1fr; }
+
+            table,
+            thead,
+            tbody,
+            th,
+            td,
+            tr {
+                display: block;
+            }
+
+            thead tr {
+                display: none;
+            }
+
+            tr {
+                margin-bottom: 15px;
+                border: 1px solid var(--border-color);
+                border-radius: 8px;
+                padding: 10px;
+            }
+
+            td {
+                text-align: left !important;
+                border: none;
+                border-bottom: 1px dotted var(--border-color);
+                position: relative;
+                padding-left: 35%;
+            }
+
+            td::before {
+                content: attr(data-label);
+                position: absolute;
+                left: 10px;
+                width: 30%;
+                font-weight: bold;
+                color: var(--primary-color);
+                text-align: left;
+            }
+
+            .charts-grid {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
+
 <body>
 
     <div class="settings-bar">
@@ -136,7 +516,7 @@
             <div id="json-update-info">
                 <div class="loader" id="main-loader"></div> 資料載入中，請稍候... (首次載入需下載全國法規資料庫)
             </div>
-            
+
             <div id="dashboard-content" style="display: none;">
                 <div class="kpi-grid">
                     <div class="kpi-card">
@@ -179,14 +559,45 @@
                 <label for="fund-full-select" style="margin-right: 10px;">選擇基金名稱:</label>
                 <select id="fund-full-select" style="flex-grow: 0; min-width: 300px;"></select>
             </div>
-            <div id="full-article-law-info" style="display:none; background-color: var(--law-info-bg); padding:15px; margin-bottom:15px;"></div>
+            <div id="full-article-law-info"
+                style="display:none; background-color: var(--law-info-bg); padding:15px; margin-bottom:15px;"></div>
             <div id="full-article-info" style="text-align: center; margin-top: 20px;">請選擇一個基金名稱以顯示完整法條。</div>
             <table id="full-article-table" style="display:none;">
                 <thead>
-                    <tr><th data-column="0">條次</th><th data-column="1">規定</th></tr>
+                    <tr>
+                        <th data-column="0">條次</th>
+                        <th data-column="1">規定</th>
+                    </tr>
                 </thead>
                 <tbody id="full-article-table-body"></tbody>
             </table>
+
+            <!-- AI 分析區塊 -->
+            <div id="ai-analysis-panel" class="ai-panel" style="display:none;">
+                <h3>🤖 AI 智能分析 (目前基金)</h3>
+                <p style="color: #d9534f; font-size: 0.9em; margin-bottom: 15px;">⚠️ <strong>注意：</strong> AI
+                    生成的回答僅供參考，不代表正式法律意見或解釋。分析結果受限於使用者所選擇之模型能力，請自行判斷其正確性。</p>
+                <div class="ai-controls">
+                    <select id="ai-model-provider" onchange="updateModelOptions()">
+                        <option value="gemini">Google Gemini</option>
+                        <option value="openai">OpenAI</option>
+                    </select>
+                    <select id="ai-model-name">
+                        <option value="gemini-1.5-pro">Gemini 1.5 Pro</option>
+                        <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
+                    </select>
+                    <input type="password" id="ai-api-key" placeholder="輸入 API Key..." style="flex-grow: 1;">
+                </div>
+                <div class="ai-controls">
+                    <textarea id="ai-prompt" placeholder="輸入您想對此基金法條詢問的問題，例如：這檔基金的資金來源有哪些？"></textarea>
+                </div>
+                <button id="ai-submit-btn" class="ai-btn" onclick="analyzeContext()">開始 AI 分析</button>
+
+                <div id="ai-result-box" class="ai-result">
+                    <div id="ai-result-content" class="ai-result-content"></div>
+                </div>
+            </div>
+
         </div>
 
         <div id="tab2" class="tab-content">
@@ -201,8 +612,11 @@
             <table id="analyzed-table">
                 <thead>
                     <tr>
-                        <th data-column="0">基金名稱</th><th data-column="1">規定名稱</th>
-                        <th data-column="2">最近發布日期</th><th data-column="3">條次</th><th data-column="4">規定</th>
+                        <th data-column="0">基金名稱</th>
+                        <th data-column="1">規定名稱</th>
+                        <th data-column="2">最近發布日期</th>
+                        <th data-column="3">條次</th>
+                        <th data-column="4">規定</th>
                     </tr>
                 </thead>
                 <tbody id="analyzed-table-body"></tbody>
@@ -215,17 +629,22 @@
         </div>
     </div>
 
-    <div id="reasonModal" class="modal"><div class="modal-content"><span class="close-modal" onclick="closeModal()">&times;</span><h2 id="modal-title"></h2><div id="modal-text"></div></div></div>
+    <div id="reasonModal" class="modal">
+        <div class="modal-content"><span class="close-modal" onclick="closeModal()">&times;</span>
+            <h2 id="modal-title"></h2>
+            <div id="modal-text"></div>
+        </div>
+    </div>
     <button id="back-to-top" onclick="scrollToTop()">▲</button>
 
     <script>
         // --- 核心變數 ---
         let globalAnalyzedData = [];
-        let currentFilteredData = []; 
+        let currentFilteredData = [];
         let currentPage = 1;
-        const pageSize = 50; 
+        const pageSize = 50;
         let ui;
-        
+
         // Chart.js 實例追蹤 (避免重複渲染時破圖)
         let chartInstances = {};
 
@@ -239,16 +658,16 @@
             document.body.classList.toggle('dark-mode');
             localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
             // 切換深色模式時，重新繪製圖表以更新字體顏色
-            if(globalAnalyzedData.length > 0 && document.getElementById('tab-dashboard').style.display === 'block') {
-                renderDashboard(); 
+            if (globalAnalyzedData.length > 0 && document.getElementById('tab-dashboard').style.display === 'block') {
+                renderDashboard();
             }
         }
-        if(localStorage.getItem('darkMode') === 'true') document.body.classList.add('dark-mode');
+        if (localStorage.getItem('darkMode') === 'true') document.body.classList.add('dark-mode');
 
-        window.onscroll = function() {
+        window.onscroll = function () {
             document.getElementById("back-to-top").style.display = (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) ? "block" : "none";
         };
-        function scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); }
+        function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }
 
         // --- 儀表板與數據視覺化邏輯 ---
         function renderDashboard() {
@@ -260,7 +679,7 @@
             // 由於法條是「逐條」存放在陣列裡，我們需要用 Set 來篩選出不重複的基金名稱。
             const allFunds = {};
             globalAnalyzedData.forEach(item => {
-                if(!allFunds[item.基金名稱]) {
+                if (!allFunds[item.基金名稱]) {
                     allFunds[item.基金名稱] = item.法規狀態; // 記錄每個基金的狀態
                 }
             });
@@ -268,8 +687,8 @@
             let activeCount = 0; let abolishedCount = 0;
             const uniqueFundNames = Object.keys(allFunds);
             uniqueFundNames.forEach(name => {
-                if(allFunds[name] === '現行法規') activeCount++;
-                else if(allFunds[name] === '廢止法規') abolishedCount++;
+                if (allFunds[name] === '現行法規') activeCount++;
+                else if (allFunds[name] === '廢止法規') abolishedCount++;
             });
 
             document.getElementById('kpi-total-funds').innerText = uniqueFundNames.length;
@@ -285,12 +704,12 @@
             const authorityCount = {};
             globalAnalyzedData.filter(i => i.法規狀態 === '現行法規').forEach(item => {
                 // 為了避免一檔多條重複計算，我們用之前提取的邏輯，但這裡簡化：如果該基金已被計入，就跳過
-                if(!authorityCount[item.基金名稱]) {
+                if (!authorityCount[item.基金名稱]) {
                     // 擷取大部會名稱，例如「行政院 > 經濟部」取「經濟部」
                     let auth = item.主管機關 || '其他';
                     let mainAuth = auth.includes('＞') ? auth.split('＞')[1].trim() : auth.split('>')[0].trim();
-                    if(mainAuth === '') mainAuth = '未分類';
-                    
+                    if (mainAuth === '') mainAuth = '未分類';
+
                     authorityCount[item.基金名稱] = mainAuth;
                 }
             });
@@ -299,9 +718,9 @@
             Object.values(authorityCount).forEach(auth => {
                 aggregatedAuth[auth] = (aggregatedAuth[auth] || 0) + 1;
             });
-            
+
             // 排序並繪製圓餅圖
-            const sortedAuthKeys = Object.keys(aggregatedAuth).sort((a,b) => aggregatedAuth[b] - aggregatedAuth[a]);
+            const sortedAuthKeys = Object.keys(aggregatedAuth).sort((a, b) => aggregatedAuth[b] - aggregatedAuth[a]);
             drawChart('authorityChart', 'pie', sortedAuthKeys, sortedAuthKeys.map(k => aggregatedAuth[k]), chartTextColor);
 
             // 3. 基金複雜度排行 Top 10 (條文數 - 現行法規)
@@ -317,7 +736,7 @@
         // 通用圖表繪製函式
         function drawChart(canvasId, type, labels, data, textColor) {
             const ctx = document.getElementById(canvasId).getContext('2d');
-            
+
             // 如果該圖表已經存在，先銷毀它，避免游標懸停時出現舊資料殘影
             if (chartInstances[canvasId]) {
                 chartInstances[canvasId].destroy();
@@ -365,10 +784,10 @@
             fundNames.forEach(name => {
                 const isAbolished = globalAnalyzedData.find(i => i.基金名稱 === name).法規狀態 === '廢止法規';
                 const text = isAbolished ? `(廢) ${name}` : name;
-                
+
                 let opt1 = new Option(text, name); let opt2 = new Option(text, name);
                 if (isAbolished) { opt1.style.color = '#888'; opt2.style.color = '#888'; }
-                
+
                 ui.fundSelect.add(opt1); ui.fundFullSelect.add(opt2);
             });
         }
@@ -377,18 +796,18 @@
         function applyAnalyzedFilters() {
             let filtered = globalAnalyzedData;
             if (ui.fundSelect.value) filtered = filtered.filter(i => i.基金名稱 === ui.fundSelect.value);
-            
+
             const q = ui.filterInput.value.trim().toLowerCase();
             if (q) {
                 const terms = q.split(/\s+or\s+/i);
                 filtered = filtered.filter(item => {
                     const text = Object.values(item).join(' ').toLowerCase();
-                    return terms.some(t => t.replace(/\s+and\s+/ig, ' ').split(/\s+/).filter(k=>k).every(k => text.includes(k)));
+                    return terms.some(t => t.replace(/\s+and\s+/ig, ' ').split(/\s+/).filter(k => k).every(k => text.includes(k)));
                 });
             }
             const ex = ui.excludeInput.value.trim().toLowerCase();
             if (ex) {
-                const exWords = ex.split(/\s+/).filter(k=>k);
+                const exWords = ex.split(/\s+/).filter(k => k);
                 filtered = filtered.filter(item => {
                     const text = Object.values(item).join(' ').toLowerCase();
                     return exWords.every(w => !text.includes(w));
@@ -414,7 +833,7 @@
 
         function changePage(d) {
             currentPage = Math.max(1, Math.min(Math.ceil(currentFilteredData.length / pageSize), currentPage + d));
-            renderPaginatedTable(); window.scrollTo({top: 0, behavior: 'smooth'});
+            renderPaginatedTable(); window.scrollTo({ top: 0, behavior: 'smooth' });
         }
 
         // 表格渲染
@@ -423,7 +842,7 @@
             const isTab3 = tbody.id === 'full-article-table-body';
             const headers = isTab3 ? ["條次", "規定"] : ["基金名稱", "規定名稱", "最近發布日期", "條次", "規定"];
             const keyword = document.getElementById('filter-input').value.trim();
-            
+
             data.forEach(item => {
                 const tr = document.createElement('tr');
                 headers.forEach(h => {
@@ -431,11 +850,11 @@
                     let text = item[h] || '';
                     if (h === '規定') {
                         let html = text.replace(/([：。])/g, '$1\n').trim().replace(/(第\s*\d+(\-\d+)?\s*條)/g, '<span style="color:var(--primary-color); font-weight:bold;">$1</span>');
-                        if(keyword && !isTab3) try { html = html.replace(new RegExp(`(${keyword})`, 'gi'), '<mark>$1</mark>'); } catch(e){}
+                        if (keyword && !isTab3) try { html = html.replace(new RegExp(`(${keyword})`, 'gi'), '<mark>$1</mark>'); } catch (e) { }
                         td.innerHTML = `<div style="text-align:left; white-space:pre-wrap;">${html}</div>`;
                     } else {
-                        td.innerText = text; td.style.textAlign = (h==='基金名稱' || h==='規定名稱') ? 'left' : 'center';
-                        if(h==='基金名稱' && item.法規狀態 === '廢止法規') td.innerHTML += ' <span class="status-badge">已廢止</span>';
+                        td.innerText = text; td.style.textAlign = (h === '基金名稱' || h === '規定名稱') ? 'left' : 'center';
+                        if (h === '基金名稱' && item.法規狀態 === '廢止法規') td.innerHTML += ' <span class="status-badge">已廢止</span>';
                     }
                     tr.appendChild(td);
                 });
@@ -447,15 +866,88 @@
             const fund = ui.fundFullSelect.value;
             ui.fullArticleTableBody.innerHTML = '';
             const info = document.getElementById('full-article-law-info'); info.style.display = 'none';
-            if (!fund) { document.getElementById('full-article-table').style.display='none'; return; }
-            
+            if (!fund) { document.getElementById('full-article-table').style.display = 'none'; return; }
+
             const arts = globalAnalyzedData.filter(i => i.基金名稱 === fund);
-            if(arts.length > 0) {
+            if (arts.length > 0) {
                 info.innerHTML = `<h3 style="color:var(--primary-color); margin:0 0 10px 0;">${arts[0].規定名稱}</h3><p>發布日期: ${arts[0].最近發布日期}</p><p>沿革: ${arts[0].法規沿革}</p>`;
                 info.style.display = 'block';
-                arts.sort((a,b) => (a.條次.match(/\d+/)?.[0]||0) - (b.條次.match(/\d+/)?.[0]||0));
+                arts.sort((a, b) => (a.條次.match(/\d+/)?.[0] || 0) - (b.條次.match(/\d+/)?.[0] || 0));
                 renderTable(ui.fullArticleTableBody, arts);
                 document.getElementById('full-article-table').style.display = 'table';
+                document.getElementById('ai-analysis-panel').style.display = 'block';
+
+                // 儲存當前背景知識
+                window.currentFundContext = arts.map(a => `${a.條次}: ${a.規定}`).join('\n');
+            } else {
+                document.getElementById('ai-analysis-panel').style.display = 'none';
+                window.currentFundContext = "";
+            }
+        }
+
+        // --- AI 分析功能 ---
+        function updateModelOptions() {
+            const provider = document.getElementById('ai-model-provider').value;
+            const modelSelect = document.getElementById('ai-model-name');
+            modelSelect.innerHTML = '';
+            if (provider === 'gemini') {
+                modelSelect.add(new Option('Gemini 1.5 Pro', 'gemini-1.5-pro'));
+                modelSelect.add(new Option('Gemini 1.5 Flash', 'gemini-1.5-flash'));
+            } else if (provider === 'openai') {
+                modelSelect.add(new Option('GPT-4o', 'gpt-4o'));
+                modelSelect.add(new Option('GPT-4o Mini', 'gpt-4o-mini'));
+                modelSelect.add(new Option('GPT-3.5 Turbo', 'gpt-3.5-turbo'));
+            }
+        }
+
+        async function analyzeContext() {
+            const apiKey = document.getElementById('ai-api-key').value.trim();
+            const prompt = document.getElementById('ai-prompt').value.trim();
+            const provider = document.getElementById('ai-model-provider').value;
+            const modelName = document.getElementById('ai-model-name').value;
+
+            if (!apiKey) return alert("請輸入 API Key！");
+            if (!prompt) return alert("請輸入想要詢問的問題！");
+            if (!window.currentFundContext) return alert("找不到基金背景知識！");
+
+            const btn = document.getElementById('ai-submit-btn');
+            const resultBox = document.getElementById('ai-result-box');
+            const resultContent = document.getElementById('ai-result-content');
+
+            btn.disabled = true;
+            btn.innerText = "分析中...";
+            resultBox.style.display = 'block';
+            resultBox.classList.add('loading');
+            resultContent.innerHTML = '<div class="loader" style="width:20px;height:20px;border-width:3px;"></div> 正在請求 AI 分析，請稍候...';
+
+            try {
+                const response = await fetch('/api/analyze', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        model_provider: provider,
+                        model_name: modelName,
+                        api_key: apiKey,
+                        prompt: prompt,
+                        context: window.currentFundContext
+                    })
+                });
+
+                const data = await response.json();
+                resultBox.classList.remove('loading');
+
+                if (!response.ok) {
+                    resultContent.innerHTML = `<span style="color:red;">錯誤: ${data.detail || '未知錯誤'}</span>`;
+                } else {
+                    // 使用 marked.js 來渲染 Markdown
+                    resultContent.innerHTML = marked.parse(data.result);
+                }
+            } catch (e) {
+                resultBox.classList.remove('loading');
+                resultContent.innerHTML = `<span style="color:red;">連線發生錯誤: ${e.message}</span>`;
+            } finally {
+                btn.disabled = false;
+                btn.innerText = "開始 AI 分析";
             }
         }
 
@@ -464,8 +956,8 @@
             document.querySelectorAll('.tab-content').forEach(t => t.style.display = 'none');
             document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
             document.getElementById(tabId).style.display = 'block';
-            if(evt) evt.currentTarget.classList.add('active');
-            
+            if (evt) evt.currentTarget.classList.add('active');
+
             if (tabId === 'tab-dashboard') renderDashboard(); // 切換到儀表板時繪圖
             if (tabId === 'tab2') { applyAnalyzedFilters(); }
             if (tabId === 'tab3') { displayFullArticles(); }
@@ -504,4 +996,5 @@
         });
     </script>
 </body>
+
 </html>

requirements.txt

@@ -1,3 +1,7 @@
 fastapi
 uvicorn
-requests
+requests
+httpx
+pydantic
+openai
+google-genai