Update app.py

app.py

@@ -1,12 +1,13 @@
 """
 ======================================================
 📘 金融客服小智（Fintech Assistant）
-版本：v2.1 (Hugging Face 部署版)
-改進重點：
-1. 改用記憶體型 Chroma，避免 PersistentClient 錯誤
-2. 路徑使用 os.getcwd() 以符合 HF Spaces
-3. 加入 QA 檔案容錯與模擬模式
-4. GOOGLE_API_KEY 以 Secrets 管理
+版本：v3 (Hugging Face 行動優化版)
+更新重點：
+1. 手機/桌面自適應 (自動換行 + Logo 縮放)
+2. 桌面標題置中、手機上下排列
+3. LINE 風格輸入框
+4. 常見問題按鈕可直接提問不報錯
+5. 清除對話按鈕移到右側欄位底部
 ======================================================
 """
 
@@ -39,7 +40,7 @@ LOGO_PATH = os.path.join(BASE_DIR, "mega.png")
 
 API_KEY = os.getenv("GOOGLE_API_KEY")
 if not API_KEY:
-    print("⚠️ 尚未設定 GOOGLE_API_KEY，將使用模擬模式。")
+    print("⚠️ 尚未設定 GOOGLE_API_KEY，系統將以模擬模式運行。")
 
 
 # =============================================
@@ -74,23 +75,16 @@ else:
 
 
 # =============================================
-# 3️⃣ 向量資料庫初始化（記憶體型）
+# 3️⃣ 向量資料庫初始化
 # =============================================
-try:
-    client = chromadb.Client()
-except Exception:
-    import chromadb.api
-    client = chromadb.api.Client()
-
+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:
         vectordb.add_documents(docs)
     vectordbs[cat] = vectordb
-
 print("✅ 向量資料庫初始化完成。")
 
 
@@ -137,7 +131,7 @@ def chat_fn(message, history):
             response = llm.invoke(prompt)
             reply = getattr(response, "content", None) or getattr(response, "text", "⚠️ 無回覆")
         else:
-            reply = "（模擬模式）這是示範回覆，請確認已設定 GOOGLE_API_KEY。"
+            reply = "（模擬模式）這是示範回覆，請確認是否已設定 GOOGLE_API_KEY。"
     except Exception as e:
         reply = f"⚠️ 生成錯誤：{e}"
 
@@ -147,7 +141,7 @@ def chat_fn(message, history):
 
 
 # =============================================
-# 6️⃣ Gradio 介面
+# 6️⃣ Gradio 介面（手機自適應 + LINE樣式 + 清除鍵右欄）
 # =============================================
 logo_base64 = ""
 if os.path.exists(LOGO_PATH):
@@ -164,22 +158,80 @@ with gr.Blocks(
             pointer-events: none;
         }
         #logo-top img { width: 120px; height: auto; display: block; }
+
         #footer { text-align:center; font-size:13px; color:#aaa; margin-top: 20px; }
+
+        /* 💬 LINE風格輸入列 */
+        .input-container {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            border: 1px solid #ccc;
+            border-radius: 25px;
+            padding: 5px 8px;
+            background-color: #fff;
+        }
+        .input-container textarea {
+            border: none !important;
+            outline: none !important;
+            resize: none;
+            box-shadow: none !important;
+            font-size: 15px;
+            padding: 8px 10px;
+            width: 100%;
+        }
+        .send-btn {
+            border-radius: 20px !important;
+            padding: 6px 14px !important;
+            margin-left: 6px !important;
+            background-color: #007bff !important;
+            color: white !important;
+            border: none !important;
+        }
+
+        /* 🔸 手機版自適應設定 */
+        @media (max-width: 768px) {
+            #logo-top img { width: 90px; }
+            .gradio-container { padding: 8px; }
+            #footer { font-size: 12px; margin-top: 10px; }
+            #main-title { font-size: 22px !important; line-height: 1.4; }
+            #main-title br { display: inline; }
+        }
+
+        /* 桌面版標題置中 */
+        #main-title {
+            text-align: center;
+            font-size: 26px;
+            margin-top: 60px;
+            margin-bottom: 6px;
+            font-weight: bold;
+        }
     """
 ) as demo:
     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")
-
-    with gr.Row():
-        with gr.Column(scale=4):
+    # 🔹 標題（桌面置中、手機換行）
+    gr.HTML("""
+    <div id="main-title">
+        👨‍💼 我是小智<br>您的金融好幫手 🫰
+    </div>
+    """)
+    gr.Markdown("<div style='text-align:center; color:gray;'>Powered by Gemini & LangChain</div>")
+
+    with gr.Row(equal_height=False, wrap=True):
+        # 左側：聊天區
+        with gr.Column(scale=4, min_width=300):
             chatbot = gr.Chatbot(label="💬 對話紀錄", type="messages", height=500)
-            user_input = gr.Textbox(placeholder="請輸入問題...", show_label=False)
-            send_btn = gr.Button("送出", variant="primary")
+
+            # 🟢 LINE風格輸入框
+            with gr.Group(elem_classes="input-container"):
+                user_input = gr.Textbox(placeholder="輸入訊息...", show_label=False)
+                send_btn = gr.Button("送出", elem_classes="send-btn")
 
             def handle_input(message, history):
+                if history is None:
+                    history = []
                 if not message.strip():
                     return history, gr.update(value="")
                 reply = chat_fn(message, history)
@@ -190,9 +242,8 @@ with gr.Blocks(
             user_input.submit(handle_input, [user_input, chatbot], [chatbot, user_input])
             send_btn.click(handle_input, [user_input, chatbot], [chatbot, user_input])
 
-            gr.Button("🧹 清除對話").click(lambda: ([], gr.update(value="")), outputs=[chatbot, user_input])
-
-        with gr.Column(scale=1):
+        # 右側：常見問題 + 清除對話
+        with gr.Column(scale=1, min_width=200):
             gr.Markdown("### 🔍 常見問題")
             examples = [
                 "未成年可以開戶嗎？",
@@ -203,7 +254,18 @@ with gr.Blocks(
                 "美股可以定期定額嗎？"
             ]
             for q in examples:
-                gr.Button(q).click(lambda h, q=q: handle_input(q, h), [chatbot], [chatbot, user_input])
+                gr.Button(q).click(
+                    fn=lambda q=q, history=[]: handle_input(q, history),
+                    inputs=[],
+                    outputs=[chatbot, user_input]
+                )
+
+            # ✅ 清除按鈕
+            def clear_all():
+                memory.clear()
+                return [], gr.update(value="")
+            gr.Markdown("---")
+            gr.Button("🧹 清除對話").click(clear_all, outputs=[chatbot, user_input])
 
     gr.HTML("<div id='footer'>© Fintech Assistant — 僅業務使用，非官方授權</div>")