Update app.py

app.py

@@ -1,22 +1,11 @@
-"""
-======================================================
-📘 金融客服小智（Fintech Assistant）
-版本：v2 (重構示範 by Supervisor)
-改進重點：
-1. 模組化程式結構（易維護）
-2. 加入記憶體保存（多輪對話）
-3. 改善 Chroma 初始化與 QA 擷取
-4. 加強異常處理與容錯提示
-======================================================
-"""
-
 import os, re, base64
-import chromadb
-import gradio as gr
 from langchain_core.documents import Document
 from langchain_chroma import Chroma
-from langchain_huggingface import HuggingFaceEmbeddings
+from openai import OpenAI
+from langchain.embeddings.base import Embeddings
 from langchain_google_genai import ChatGoogleGenerativeAI
+import chromadb
+import gradio as gr
 
 # === 記憶模組相容多版本 ===
 try:
@@ -29,88 +18,87 @@ except ImportError:
 
 
 # =============================================
-# 1️⃣ Embedding 與基礎設定
+# 1️⃣ 自訂 LM Studio Embedding 類別
 # =============================================
-embedding = HuggingFaceEmbeddings(model_name="BAAI/bge-small-zh-v1.5")
+class LmStudioEmbeddings(Embeddings):
+    def __init__(self, model_name, url):
+        self.model_name = model_name
+        self.client = OpenAI(base_url=url, api_key="lm-studio")
 
-BASE_DIR = os.path.dirname(os.path.abspath(__file__))
-QA_PATH = os.path.join(BASE_DIR, "QA_v2.txt")
-LOGO_PATH = os.path.join(BASE_DIR, "mega.png")
-
-if not os.path.exists(QA_PATH):
-    raise FileNotFoundError("❌ 找不到 QA 檔案 QA_v2.txt，請確認路徑。")
+    def embed_query(self, text: str):
+        res = self.client.embeddings.create(input=text, model=self.model_name)
+        return res.data[0].embedding
 
-API_KEY = os.getenv("GOOGLE_API_KEY")
-if not API_KEY:
-    print("⚠️ 尚未設定 GOOGLE_API_KEY，系統將以模擬回覆運行。")
+    def embed_documents(self, texts: list[str]):
+        res = self.client.embeddings.create(input=texts, model=self.model_name)
+        return [x.embedding for x in res.data]
 
 
 # =============================================
-# 2️⃣ QA 載入與分類（改進版正規化）
+# 2️⃣ 載入 QA 檔案並分類
 # =============================================
-def load_qa_documents(path: str):
-    with open(path, "r", encoding="utf-8") as f:
-        text = f.read()
-
-    # 改進版正規表達式，確保每筆 QA 含問題與答案
-    pattern = r"(Ｑ[:：].*?Ａ[:：].*?)(?=Ｑ[:：]|$)"
-    qas = re.findall(pattern, text, flags=re.S)
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+qa_path = os.path.join(BASE_DIR, "QA_v2.txt")
 
-    categories = {"證券": [], "期貨": [], "複委託": []}
-    for qa in qas:
-        doc = Document(page_content=qa.strip())
-        if "證券" in qa:
-            categories["證券"].append(doc)
-        elif "期貨" in qa:
-            categories["期貨"].append(doc)
-        elif "複委託" in qa:
-            categories["複委託"].append(doc)
-        else:
-            categories["證券"].append(doc)  # 預設分類
+if not os.path.exists(qa_path):
+    raise FileNotFoundError(f"❌ 找不到 QA 檔案：{qa_path}")
 
-    return categories
+with open(qa_path, "r", encoding="utf-8") as f:
+    text = f.read()
 
+pattern = r"(Ｑ[:：].*?)(?=Ｑ[:：]|$)"
+qas = re.findall(pattern, text, flags=re.S)
+qa_docs = {"證券": [], "期貨": [], "複委託": []}
+for qa in qas:
+    if "證券" in qa:
+        qa_docs["證券"].append(Document(page_content=qa.strip()))
+    elif "期貨" in qa:
+        qa_docs["期貨"].append(Document(page_content=qa.strip()))
+    elif "複委託" in qa:
+        qa_docs["複委託"].append(Document(page_content=qa.strip()))
 
-qa_docs = load_qa_documents(QA_PATH)
-print("✅ 已成功載入 QA 檔案，共分為：", {k: len(v) for k, v in qa_docs.items()})
+print("✅ 已成功讀取 QA 並完成分類：")
+for k, v in qa_docs.items():
+    print(f"　{k}：{len(v)} 筆")
 
 
 # =============================================
-# 3️⃣ 向量資料庫初始化（避免重複寫入）
+# 3️⃣ 建立向量資料庫
 # =============================================
+embedding = LmStudioEmbeddings(
+    model_name="text-embedding-bge-large-zh-v1.5",
+    url="http://127.0.0.1:1234/v1"
+)
 client = chromadb.PersistentClient(path="./chroma_db")
-collection_map = {"證券": "stocks", "期貨": "futures", "複委託": "overseas"}
-vectordbs = {}
 
+collection_names = {"證券": "stocks", "期貨": "futures", "複委託": "overseas"}
+vectordbs = {}
 for cat, docs in qa_docs.items():
-    vectordb = Chroma(
+    vectordbs[cat] = Chroma(
         client=client,
-        collection_name=collection_map[cat],
+        collection_name=collection_names[cat],
         embedding_function=embedding
     )
-    if vectordb._collection.count() == 0:
-        vectordb.add_documents(docs)
-    vectordbs[cat] = vectordb
-
-print("✅ 向量資料庫已建立完成。")
+    if len(vectordbs[cat].get()["documents"]) == 0:
+        vectordbs[cat].add_documents(docs)
+print("✅ 各類別向���資料庫建立完成")
 
 
 # =============================================
-# 4️⃣ 初始化 LLM 與對話記憶
+# 4️⃣ 初始化 Gemini LLM
 # =============================================
-if API_KEY:
-    llm = ChatGoogleGenerativeAI(model="gemini-2.5-flash", google_api_key=API_KEY)
-else:
-    llm = None  # 模擬模式
+API_KEY = os.getenv("GOOGLE_API_KEY")
+if not API_KEY:
+    raise ValueError("⚠️ 未設定 GOOGLE_API_KEY，請在 Hugging Face Secrets 中新增。")
 
+llm = ChatGoogleGenerativeAI(model="gemini-2.5-flash", google_api_key=API_KEY)
 memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True)
 
 
 # =============================================
 # 5️⃣ 對話邏輯
 # =============================================
-def auto_detect_category(text: str):
-    """根據關鍵詞自動偵測使用者詢問的業務類別"""
+def auto_detect_category(text):
     if any(k in text for k in ["股票", "證券", "開戶", "下單", "交割"]):
         return "證券"
     elif any(k in text for k in ["期貨", "選擇權", "保證金"]):
@@ -122,14 +110,13 @@ def auto_detect_category(text: str):
 
 
 def chat_fn(message, history):
-    """核心對話函式"""
     category = auto_detect_category(message)
-    vectordb = vectordbs[category]
+    vectordb = vectordbs.get(category)
     docs = vectordb.similarity_search(message, k=2)
-    context = "\n\n".join(d.page_content for d in docs) if docs else "查無相關資料"
+    context = "\n\n".join([d.page_content for d in docs]) if docs else "查無資料"
 
     prompt = f"""
-你是一位金融客服人員，請根據以下QA知識回答：
+你是一位金融客服人員，根據以下公司QA回答客戶問題：
 ---
 {context}
 ---
@@ -137,85 +124,162 @@ def chat_fn(message, history):
     """
 
     try:
-        if llm:
-            response = llm.invoke(prompt)
-            reply = getattr(response, "content", None) or getattr(response, "text", "⚠️ 無回覆")
-        else:
-            reply = "（模擬模式）這是示範回覆：請確認是否已設定 GOOGLE_API_KEY。"
+        response = llm.invoke(prompt)
+        reply = response.content.strip()
     except Exception as e:
         reply = f"⚠️ 生成錯誤：{e}"
-
-    # 保存對話記憶
-    memory.save_context({"role": "user", "content": message},
-                        {"role": "assistant", "content": reply})
-    return reply
+    return reply or "請洽營業員"
 
 
 # =============================================
-# 6️⃣ Gradio 介面（重構版）
+# 6️⃣ 介面（含飛出動畫 + 純白footer）
 # =============================================
+logo_path = os.path.join(BASE_DIR, "mega.png")
 logo_base64 = ""
-if os.path.exists(LOGO_PATH):
-    with open(LOGO_PATH, "rb") as f:
+if os.path.exists(logo_path):
+    with open(logo_path, "rb") as f:
         logo_base64 = base64.b64encode(f.read()).decode("utf-8")
 
 with gr.Blocks(
     theme="soft",
     css="""
+        /* ====== logo ====== */
         #logo-top {
             position: fixed; top: 12px; left: 18px;
             background-color: white; border-radius: 10px;
             padding: 6px 8px; box-shadow: 0 0 8px rgba(0,0,0,0.15);
-            pointer-events: none;
         }
         #logo-top img { width: 120px; height: auto; display: block; }
 
-        #footer { text-align:center; font-size:13px; color:#aaa; margin-top: 20px; }
+        /* ====== 標題 ====== */
+        #main-title {
+            font-size: 28px; font-weight: bold; text-align: center;
+            line-height: 1.4; margin: 0; display: inline-block;
+        }
+        @media (max-width: 768px) {
+            #main-title { font-size: 24px; white-space: pre-line; }
+            #main-title::before {
+                content: "👨‍💼 我是小智\\A您的金融好幫手 🫰";
+                white-space: pre;
+            }
+            #main-title span { display: none; }
+        }
+
+        /* ====== footer（純白背景） ====== */
+        #footer {
+            position: fixed;
+            bottom: 40px;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 13px;
+            color: #aaa;                  /* ✅ 更淡的灰色 */
+            border-top: 1px solid #ddd;   /* ✅ 細灰分隔線 */
+            padding-top: 8px;
+            background-color: transparent; /* ✅ 移除反白 */
+        }
+        @media (max-width: 768px) {
+            #footer { position: relative; margin-top: 40px; }
+        }
+
+        /* ====== LINE 風格輸入區 ====== */
+        #input-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
+        #user-input {
+            flex-grow: 1; border-radius: 20px; border: 1px solid #ccc;
+            padding: 6px 12px; font-size: 15px; background-color: #fff;
+            box-shadow: inset 0 0 1px rgba(0,0,0,0.05);
+        }
+
+        /* 🟢 小巧箭頭按鈕（含飛出動畫） */
+        #send-btn {
+            background-color: #00b800; border: none; border-radius: 50%;
+            width: 28px; height: 28px; cursor: pointer;
+            display: flex; align-items: center; justify-content: center;
+            transition: background-color 0.2s ease, transform 0.1s ease;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.1); padding: 0; overflow: hidden;
+        }
+        #send-btn svg {
+            width: 12px; height: 12px; fill: white;
+            transition: transform 0.25s ease;
+        }
+        #send-btn:hover { background-color: #00a000; }
+        #send-btn:hover svg { transform: rotate(10deg) scale(1.15); }
+        #send-btn:active { transform: scale(0.9); }
+        #send-btn:active svg { animation: send-fly 0.5s ease-out; }
+
+        @keyframes send-fly {
+            0% { transform: translateX(0) scale(1); opacity: 1; }
+            50% { transform: translateX(8px) scale(1.2); opacity: 0; }
+            100% { transform: translateX(0) scale(1); opacity: 1; }
+        }
     """
 ) as demo:
+    # 左上角 logo
     if logo_base64:
-        gr.HTML(f"<div id='logo-top'><img src='data:image/png;base64,{logo_base64}'></div>")
-
-    gr.Markdown("## 👨‍💼 我是小智 · 您的金融好幫手 🫰")
-    gr.Markdown("Powered by Gemini & LangChain")
-
+        gr.HTML(f"""
+            <div id="logo-top"><img src="data:image/png;base64,{logo_base64}" alt="logo"></div>
+        """)
+
+    # 標題區
+    gr.HTML("""
+        <div id="main-title-wrapper" style="text-align:center; margin-top:20px;">
+            <h1 id='main-title'><span>👨‍💼 我是小智&nbsp;&nbsp;您的金融好幫手 🫰</span></h1>
+            <p id='sub-title' style='margin-top:10px; font-size:14px; color:#666;'>Powered by Gemini & LangChain</p>
+        </div>
+    """)
+
+    # 聊天介面
     with gr.Row():
         with gr.Column(scale=4):
-            chatbot = gr.Chatbot(label="💬 對話紀錄", type="messages", height=500)
+            chatbox = gr.Chatbot(label="💬 對話紀錄", type="messages")
 
-            with gr.Row():
-                user_input = gr.Textbox(placeholder="請輸入問題...", show_label=False)
-                send_btn = gr.Button("送出", variant="primary")
+            with gr.Row(elem_id="input-row"):
+                user_input = gr.Textbox(elem_id="user-input", show_label=False, placeholder="輸入訊息...", scale=8)
+                send_btn = gr.Button(
+                    value="""
+                    <svg viewBox="0 0 24 24"><path d="M3 12l18-9-6 9 6 9z"/></svg>
+                    """, elem_id="send-btn", scale=1
+                )
 
             def handle_input(message, history):
                 if not message.strip():
                     return history, gr.update(value="")
                 reply = chat_fn(message, history)
-                history += [{"role": "user", "content": message},
-                            {"role": "assistant", "content": reply}]
+                history = history + [
+                    {"role": "user", "content": message},
+                    {"role": "assistant", "content": reply}
+                ]
                 return history, gr.update(value="")
 
-            user_input.submit(handle_input, [user_input, chatbot], [chatbot, user_input])
-            send_btn.click(handle_input, [user_input, chatbot], [chatbot, user_input])
-
-            def clear_all():
-                memory.clear()
-                return [], gr.update(value="")
-            gr.Button("🧹 清除對話").click(clear_all, outputs=[chatbot, user_input])
+            user_input.submit(handle_input, [user_input, chatbox], [chatbox, user_input])
+            send_btn.click(handle_input, [user_input, chatbox], [chatbox, user_input])
 
         with gr.Column(scale=1):
-            gr.Markdown("### 🔍 常見問題")
-            examples = [
-                "未成年可以開戶嗎？",
-                "法人開戶要準備什麼？",
-                "期貨交易保證金是什麼？",
-                "複委託要如何下單？",
-                "美股交易時間？",
-                "美股可以定期定額嗎？"
+            gr.Markdown("### 👇 快速提問")
+            btns = [
+                ("未成年可以開戶嗎？", "未成年可以開戶嗎?"),
+                ("法人開戶要準備什麼？", "法人開戶要準備什麼?"),
+                ("期貨交易保證金是什麼？", "期貨交易保證金是什麼?"),
+                ("複委託要如何下單？", "複委託要如何下單?"),
+                ("美股交易時間？", "美股交易時間?"),
+                ("美股可以定期定額嗎？", "美股可以定期定額嗎?")
             ]
-            for q in examples:
-                gr.Button(q).click(lambda h, q=q: handle_input(q, h), [chatbot], [chatbot, user_input])
+            for label, q in btns:
+                gr.Button(label).click(lambda h, q=q: handle_input(q, h), [chatbox], [chatbox, user_input])
+
+            def clear_memory():
+                memory.clear()
+                return [], gr.update(value="", placeholder="輸入訊息...")
+            gr.Button("🧹 整理畫面").click(clear_memory, outputs=[chatbox, user_input])
 
+    # 底部 footer（純白）
     gr.HTML("<div id='footer'>© Fintech Assistant — 僅業務使用，非官方授權</div>")
 
+    # 手機鍵盤彈出自動捲動
+    demo.load(None, None, None, js="""
+        window.addEventListener('focusin', () => {
+            document.querySelector('textarea')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        });
+    """)
+
 demo.launch()