Update app.py

app.py

@@ -81,7 +81,7 @@ def chat_fn(message, history):
     context = "\n\n".join([d.page_content for d in docs]) if docs else "查無相關內容。"
 
     prompt = f"""
-你是一位金融客服人員。根據以下公司規章內容回答使用者問題：
+我是一位金融客服人員。根據以下公司規章內容回答使用者問題：
 ---
 {context}
 ---
@@ -111,145 +111,39 @@ 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;
-            z-index: 1000;
-            background-color: white;
-            border-radius: 10px;
-            padding: 6px 8px;
-            box-shadow: 0 0 8px rgba(0,0,0,0.15);
-        }
-        #logo-top img {
-            width: 120px;
-            height: auto;
-            display: block;
-        }
-
-        /* ====== 標題區 ====== */
-        #main-title-wrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            text-align: center;
-            margin-top: 20px;
-        }
-
+gr.HTML("""
+    <style>
+        /* ====== 桌機預設：單行顯示 ====== */
         #main-title {
             font-size: 28px;
             font-weight: bold;
-            margin: 0;
             text-align: center;
-            display: inline-block;
             line-height: 1.4;
+            margin: 0;
+            display: inline-block;
         }
 
-        #sub-title {
-            margin-top: 10px;
-            font-size: 14px;
-            color: #666;
-            letter-spacing: 0.5px;
-        }
-
-        /* ====== 手機版：兩行置中 ====== */
+        /* ====== 手機版：自動兩行顯示 ====== */
         @media (max-width: 768px) {
-            #main-title br { display: inline; }
             #main-title {
-                display: block;
-                text-align: center;
+                font-size: 24px;               /* 👈 手機字體略小 */
                 white-space: pre-line;
             }
-        }
-        @media (min-width: 769px) {
-            #main-title br { display: none; }
-        }
-
-        /* ====== footer 區 ====== */
-        #footer {
-            position: fixed;
-            bottom: 40px;
-            left: 0;
-            width: 100%;
-            text-align: center;
-            font-size: 13px;
-            color: #999;
-            font-family: "Segoe UI", "Noto Sans TC", sans-serif;
-            letter-spacing: 0.3px;
-            border-top: 1px solid #ddd;
-            padding-top: 8px;
-        }
-
-        /* ====== 手機 footer 修正 ====== */
-        @media (max-width: 768px) {
-            #logo-top {
-                position: static;
-                display: flex;
-                justify-content: center;
-                margin-bottom: 8px;
-                box-shadow: none;
-                background: transparent;
+            #main-title::before {
+                content: "👨‍💼 我是小智\\A您的金融好幫手 🫰"; /* \\A = 換行 */
+                white-space: pre;               /* 保留換行格式 */
             }
-            #footer {
-                position: relative;
-                margin-top: 40px;
-                border-top: 1px solid #ddd;
-                padding-top: 8px;
+            #main-title span {
+                display: none;                  /* 隱藏原本的單行文字 */
             }
         }
+    </style>
 
-        /* ====== 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: 3px 9px;
-            font-size: 15px;
-            background-color: #fff;
-            box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-        }
-        #send-btn {
-            background-color: #00b900; /* LINE 綠 */
-            color: white;
-            border: none;
-            border-radius: 20px;
-            padding: 8px 16px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: 0.2s ease;
-        }
-        #send-btn:hover {
-            background-color: #00a000;
-        }
-    """
-) as demo:
-    # 左上角 logo
-    if logo_base64:
-        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">
-            <h1 id='main-title'>👨‍💼 我是小智&nbsp;您的金融好幫手 🫰</h1>
-            <p id='sub-title'>Powered by Gemini & LangChain</p>
-        </div>
-    """)
+    <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):