Update app.py

app.py

@@ -1,15 +1,18 @@
 """
 ======================================================
 📘 金融客服小智（Fintech Assistant）
-版本：v3.2 (穩定正式版)
+版本：v3.4 (📱自動縮放優化版)
 更新重點：
-1. 修正 LangChain 記憶格式（避免 ValueError）
-2. 回復原生輸入框樣式（類似 LINE 的簡潔列）
-3. 保留手機自適應、桌面置中、右欄清除鍵
+1. LLM 三次重試機制（防止 API 錯誤中斷）
+2. 整合記憶進 prompt（上下文連貫對話）
+3. 安全向量搜尋（避免空 collection 錯誤）
+4. lambda 修正（避免共享同一 history）
+5. 顯示自動分類提示（可見知識來源）
+6. 📱 新增手機縮放與字體比例自適應
 ======================================================
 """
 
-import os, re, base64
+import os, re, base64, time
 import chromadb
 import gradio as gr
 from langchain_core.documents import Document
@@ -73,14 +76,18 @@ else:
 
 
 # =============================================
-# 3️⃣ 向量資料庫初始化
+# 3️⃣ 向量資料庫初始化（含安全檢查）
 # =============================================
 client = chromadb.Client()
 collection_map = {"證券": "stocks", "期貨": "futures", "複委託": "overseas"}
 vectordbs = {}
 for cat, docs in qa_docs.items():
     vectordb = Chroma(client=client, collection_name=collection_map[cat], embedding_function=embedding)
-    if hasattr(vectordb._collection, "count") and vectordb._collection.count() == 0 and docs:
+    try:
+        count = vectordb._collection.count() if hasattr(vectordb._collection, "count") else len(vectordb.get()["ids"])
+    except Exception:
+        count = 0
+    if count == 0 and docs:
         vectordb.add_documents(docs)
     vectordbs[cat] = vectordb
 print("✅ 向量資料庫初始化完成。")
@@ -98,7 +105,7 @@ memory = ConversationBufferMemory(memory_key="chat_history", return_messages=Tru
 
 
 # =============================================
-# 5️⃣ 對話邏輯
+# 5️⃣ 對話邏輯（改進版）
 # =============================================
 def auto_detect_category(text: str):
     if any(k in text for k in ["股票", "證券", "開戶", "下單", "交割"]):
@@ -110,40 +117,59 @@ def auto_detect_category(text: str):
     return "證券"
 
 
+def safe_similarity_search(vectordb, query, k=2):
+    """防止空 collection 錯誤"""
+    try:
+        results = vectordb.similarity_search(query, k=k)
+    except Exception as e:
+        print(f"⚠️ 向量搜尋錯誤：{e}")
+        results = []
+    return results
+
+
 def chat_fn(message, history):
     category = auto_detect_category(message)
     vectordb = vectordbs[category]
-    docs = vectordb.similarity_search(message, k=2)
+    docs = safe_similarity_search(vectordb, message, k=2)
     context = "\n\n".join(d.page_content for d in docs) if docs else "查無相關資料"
 
+    # ✅ 整合記憶體歷史紀錄
+    history_data = memory.load_memory_variables({}).get("chat_history", [])
+    history_text = "\n".join(
+        [f"{m['role']}: {m['content']}" for m in history_data if isinstance(m, dict)]
+    )
+
     prompt = f"""
-你是一位金融客服人員，請根據以下QA知識回答：
+你是一位金融客服人員，請根據以下QA知識回答。
 ---
 {context}
 ---
 使用者問題：{message}
+過往對話：
+{history_text}
     """
 
-    try:
-        if llm:
-            response = llm.invoke(prompt)
-            reply = getattr(response, "content", None) or getattr(response, "text", "⚠️ 無回覆")
-        else:
-            reply = "（模擬模式）這是示範回覆，請確認是否已設定 GOOGLE_API_KEY。"
-    except Exception as e:
-        reply = f"⚠️ 生成錯誤：{e}"
+    # ✅ LLM 重試機制（3次）
+    if llm:
+        for attempt in range(3):
+            try:
+                response = llm.invoke(prompt)
+                reply = getattr(response, "content", None) or getattr(response, "text", "⚠️ 無回覆")
+                break
+            except Exception as e:
+                print(f"⚠️ 第 {attempt+1} 次 LLM 錯誤：{e}")
+                time.sleep(2)
+                reply = "⚠️ 系統忙碌中，請稍後再試。"
+    else:
+        reply = "（模擬模式）這是示範回覆，請確認是否已設定 GOOGLE_API_KEY。"
 
-    # ✅ 修正記憶體格式，避免 ValueError
     memory.save_context({"input": message}, {"output": reply})
-
-    return reply
+    return f"📂 類別：{category}\n\n{reply}"
 
 
 # =============================================
-# 6️⃣ Gradio 介面
+# 6️⃣ Gradio 介面（含手機縮放CSS）
 # =============================================
-
-# === Logo 圖片處理 ===
 logo_base64 = ""
 if os.path.exists(LOGO_PATH):
     with open(LOGO_PATH, "rb") as f:
@@ -152,194 +178,80 @@ if os.path.exists(LOGO_PATH):
 with gr.Blocks(
     theme="soft",
     css="""
-        #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; }
-
-        /* 手機寬度下讓 Row 自動垂直排列 */
-        @media (max-width: 768px) {
-            .gr-block.gr-row {
-                flex-direction: column !important;
-            }
-            #logo-top img { width: 90px; }
-            .gradio-container { padding: 8px; }
-            #footer { font-size: 12px; margin-top: 10px; }
-        }
-
-        /* === 桌機/手機自適應標題 === */
-        #main-title {
-            text-align: center;
-            font-weight: bold;
-            font-size: 26px;
-            margin-top: 60px;
-            margin-bottom: 6px;
-        }
-        .title-line {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 8px;
-            flex-wrap: nowrap;
-        }
-        .subtitle {
-            white-space: nowrap;
-        }
-        @media (max-width: 768px) {
-            .title-line {
-                flex-direction: column;
-                gap: 4px;
-            }
-            #main-title {
-                font-size: 22px;
-                line-height: 1.4;
-            }
-        }
-
-        /* ✅ 修正輸入框高度與按鈕比例 */
-        #chat-input textarea {
-            height: 48px !important;
-            min-height: 48px !important;
-            font-size: 16px !important;
-            padding: 8px 12px !important;
-            border-radius: 10px !important;
-        }
-        #chat-row {
-            align-items: center !important;
-            gap: 4px !important;
-        }
-        #send-btn {
-            height: 48px !important;
-            font-size: 16px !important;
-            border-radius: 10px !important;
-        }
-
-        /* ✅ 桌機版比例：輸入框 9、按鈕 1 */
-        #chat-row .gr-textbox, #chat-row textarea { flex: 9 !important; width: 90% !important; }
-        #chat-row .gr-button, #chat-row button { flex: 1 !important; width: 10% !important; }
-
-        /* ✅ 手機版比例：輸入框 9、按鈕 1 + 防止「送出」換行 */
-        @media (max-width: 768px) {
-            #chat-row .gr-textbox, #chat-row textarea {
-                flex: 9 !important;
-                width: 90% !important;
-            }
-            #chat-row .gr-button, #chat-row button {
-                flex: 1 !important;
-                width: 10% !important;
-                max-width: 90px !important;
-                min-width: 70px !important;
-                white-space: nowrap !important;     /* ✅ 不允許文字換行 */
-                overflow: hidden !important;
-                text-overflow: ellipsis !important;
-                letter-spacing: 0.5px !important;
-            }
-            #send-btn button {
-                padding: 0 12px !important;
-                font-size: 15px !important;
-                line-height: 1 !important;          /* ✅ 確保文字垂直置中 */
-            }
-        }
-    """
+/* === 📱 全域縮放設定 === */
+@media (max-width: 768px) {
+    html, body {
+        zoom: 0.85;
+        -moz-transform: scale(0.85);
+        -moz-transform-origin: top left;
+    }
+}
+
+/* === Logo 與標題自適應 === */
+#logo-top img { width: 120px; height: auto; }
+@media (max-width: 768px) {
+    #logo-top img { width: 80px; }
+    h1 { font-size: 20px !important; }
+}
+
+/* === 輸入列縮窄設定 === */
+@media (max-width: 768px) {
+    .gradio-container { padding: 6px; }
+    #chat-row { flex-direction: row !important; gap: 4px !important; }
+    #chat-row textarea { font-size: 14px !important; height: 42px !important; }
+    #send-btn { font-size: 14px !important; height: 42px !important; }
+}
+"""
 ) as demo:
     if logo_base64:
         gr.HTML(f"<div id='logo-top'><img src='data:image/png;base64,{logo_base64}'></div>")
 
-    # 🔹 標題（桌機同行、手機自動換行）
     gr.HTML("""
-    <div id="main-title">
-        <span class="title-line">
-            👨‍💼 我是小智
-            <span class="subtitle">您的金融好幫手 🫰</span>
-        </span>
-    </div>
+    <h1 style='text-align:center;'>👨‍💼 我是小智 — 您的金融好幫手 🫰</h1>
+    <p style='text-align:center;color:gray;'>Powered by Gemini & LangChain</p>
     """)
-    gr.Markdown("<div style='text-align:center; color:gray;'>Powered by Gemini & LangChain</div>")
 
-    with gr.Row(equal_height=False):
-        # 左側：聊天區
-        with gr.Column(scale=4, min_width=300):
+    with gr.Row():
+        with gr.Column(scale=4):
             chatbot = gr.Chatbot(label="💬 對話紀錄", type="messages", height=500)
+            user_input = gr.Textbox(
+                placeholder="請輸入您的問題（Enter 送出 / Shift+Enter 換行）...",
+                show_label=False,
+                lines=1,
+                max_lines=3,
+                elem_id="chat-row"
+            )
+            send_btn = gr.Button("送出", variant="primary", elem_id="send-btn")
 
-            # ✅ 輸入框與送出鍵同行排列（桌機 9:1、手機 9:1）
-            with gr.Row(elem_id="chat-row"):
-                user_input = gr.Textbox(
-                    placeholder="請輸入您的問題（Enter 送出 / Shift+Enter 換行）...",
-                    show_label=False,
-                    lines=1,
-                    max_lines=3,
-                    elem_id="chat-input",
-                    scale=9
-                )
-                send_btn = gr.Button(
-                    "送出",
-                    variant="primary",
-                    elem_id="send-btn",
-                    scale=1
-                )
-
-            # === 輸入邏輯 ===
             def handle_input(message, history):
-                if history is None:
-                    history = []
                 if not message.strip():
                     return history, gr.update(value="")
                 reply = chat_fn(message, history)
+                history = history or []
                 history += [
                     {"role": "user", "content": message},
-                    {"role": "assistant", "content": reply}
+                    {"role": "assistant", "content": reply},
                 ]
                 return history, gr.update(value="")
 
-            # ✅ 綁定事件（Enter送出、Shift+Enter換行）
             user_input.submit(handle_input, [user_input, chatbot], [chatbot, user_input])
             send_btn.click(handle_input, [user_input, chatbot], [chatbot, user_input])
 
-            # ✅ JS 修正版：支援桌機 / 手機 / HuggingFace IFrame
-            gr.HTML("""
-            <script>
-            document.addEventListener("DOMContentLoaded", function() {
-              const observer = new MutationObserver(() => {
-                const textareas = document.querySelectorAll("textarea");
-                textareas.forEach((ta) => {
-                  if (!ta.dataset.bound) {
-                    ta.dataset.bound = "true";
-                    ta.addEventListener("keydown", function(e) {
-                      if (e.key === "Enter" && !e.shiftKey) {
-                        e.preventDefault();
-                        const sendBtn = document.querySelector('#send-btn button, #send-btn');
-                        if (sendBtn) sendBtn.click();
-                      }
-                    });
-                  }
-                });
-              });
-              observer.observe(document.body, { childList: true, subtree: true });
-            });
-            </script>
-            """)
-
-        # 右側：常見問題 + 清除對話
-        with gr.Column(scale=1, min_width=200):
+        with gr.Column(scale=1):
             gr.Markdown("### 🔍 常見問題")
             examples = [
-                "未成年可以開戶嗎？",
-                "法人開戶要準備什麼？",
+                "密碼忘記了怎麼辦？",
+                "下單憑證怎麼申請？",
+                "法人開證劵戶要準備什麼？",
                 "期貨交易保證金是什麼？",
-                "複委託要如何下單？",
                 "美股交易時間？",
-                "美股可以定期定額嗎？"
+                "美股可以定期定額嗎？",
             ]
             for q in examples:
                 gr.Button(q).click(
-                    fn=lambda q=q, history=[]: handle_input(q, history),
+                    fn=lambda q=q: handle_input(q, []),
                     inputs=[],
-                    outputs=[chatbot, user_input]
+                    outputs=[chatbot, user_input],
                 )
 
             def clear_all():
@@ -348,6 +260,6 @@ with gr.Blocks(
             gr.Markdown("---")
             gr.Button("🧹 整理畫面").click(clear_all, outputs=[chatbot, user_input])
 
-    gr.HTML("<div id='footer'>© Fintech Assistant — 僅業務使用，非官方授權</div>")
+    gr.HTML("<div id='footer' style='text-align:center;color:#aaa;'>© Fintech Assistant — 僅業務使用，非官方授權</div>")
 
 demo.launch()