Update app.py

app.py

@@ -105,13 +105,140 @@ if os.path.exists(logo_path):
     with open(logo_path, "rb") as f:
         logo_base64 = base64.b64encode(f.read()).decode("utf-8")
 
-logo_path = os.path.join(BASE_DIR, "mega.png")
-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="""
+        /* ====== 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;
+        }
+
+        #main-title {
+            font-size: 28px;
+            font-weight: bold;
+            margin: 0;
+            text-align: center;
+            display: inline-block;
+            line-height: 1.4;
+        }
+
+        #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;
+                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;
+            }
+            #footer {
+                position: relative;
+                margin-top: 40px;
+                border-top: 1px solid #ddd;
+                padding-top: 8px;
+            }
+        }
+
+        /* ====== 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 1px rgba(0,0,0,0.1);
+        }
+        #send-btn {
+            background-color: #00b900; /* LINE 綠 */
+            color: white;
+            border: none;
+            border-radius: 20px;
+            padding: 6px 6px;
+            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("""
+    # 主標題與副標題
+    gr.HTML("""
     <style>
         /* ====== 桌機預設：單行顯示 ====== */
         #main-title {