Update app.py

app.py

@@ -142,11 +142,6 @@ def chat_fn(message, history):
 # =============================================
 # 6️⃣ Gradio 介面
 # =============================================
-logo_base64 = ""
-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="""
@@ -169,26 +164,66 @@ with gr.Blocks(
             .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-weight: bold;
             font-size: 26px;
             margin-top: 60px;
             margin-bottom: 6px;
-            font-weight: bold;
+        }
+        .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: 8px !important;
+        }
+        #send-btn {
+            height: 48px !important;
+            font-size: 16px !important;
+            border-radius: 10px !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">
-        👨‍💼 我是小智<br>您的金融好幫手 🫰
+        <span class="title-line">
+            👨‍💼 我是小智
+            <span class="subtitle">您的金融好幫手 🫰</span>
+        </span>
     </div>
     """)
     gr.Markdown("<div style='text-align:center; color:gray;'>Powered by Gemini & LangChain</div>")
@@ -197,17 +232,29 @@ with gr.Blocks(
         # 左側：聊天區
         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")
 
+            # ✅ 輸入框與送出鍵同行排列
+            with gr.Row(elem_id="chat-row"):
+                user_input = gr.Textbox(
+                    placeholder="請輸入您的問題...",
+                    show_label=False,
+                    lines=1,
+                    max_lines=1,
+                    elem_id="chat-input"
+                )
+                send_btn = gr.Button("送出", variant="primary", elem_id="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)
-                history += [{"role": "user", "content": message},
-                            {"role": "assistant", "content": reply}]
+                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])