Update app.py

app.py

@@ -21,6 +21,7 @@ def read_pdf(path):
 def read_txt(path):
     with open(path, "r", encoding="utf-8") as f:
         return f.read()
+
 AVATAR_IMAGE = "Joe.jpg"
 linkedin_text = read_pdf("linkedin.pdf")
 summary_text = read_txt("summary.txt")
@@ -54,7 +55,6 @@ def chat_fn(user_input, history):
         model="gemini-2.5-flash",
         contents=f"{prompt_context}\n\n使用者問題：{user_input}"
     )
-
     ai_text = response.text
 
     eval_prompt = f"""
@@ -84,13 +84,34 @@ def chat_fn(user_input, history):
         f"評語：{eval_data.comment}"
     )
 
-# ===== Step 6: 科技風格 UI =====
-avatar_url = "https://avatars.githubusercontent.com/u/9919?s=200&v=4"  # <-- 換成你的頭像網址
-linkedin_link = "https://www.linkedin.com/in/你的連結"  # <-- 換成你的 LinkedIn URL
+# ===== Step 6: 自訂樣式（提問框＋聊天框邊界） =====
+CUSTOM_CSS = """
+.gr-text-input textarea, .gr-textbox textarea {
+    border: 2px solid #1e3a8a !important;
+    box-shadow: 0 0 10px rgba(30, 58, 138, 0.4);
+    border-radius: 10px !important;
+    color: #dbeafe !important;
+    background-color: rgba(15, 23, 42, 0.9) !important;
+}
+.gr-text-input textarea:focus {
+    border-color: #2563eb !important;
+    box-shadow: 0 0 14px rgba(37, 99, 235, 0.7);
+}
+.gr-chatbot {
+    border: 2px solid #1e3a8a !important;
+    border-radius: 12px !important;
+    box-shadow: 0 0 18px rgba(30, 58, 138, 0.4);
+}
+"""
+
+# ===== Step 7: UI =====
+avatar_url = "https://avatars.githubusercontent.com/u/9919?s=200&v=4"
+linkedin_link = "https://www.linkedin.com/in/你的連結"
 
 with gr.Blocks(
     theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"),
-    title="AI Chatbot – Joe' Digital Twin"
+    title="AI Chatbot – Joe' Digital Twin",
+    css=CUSTOM_CSS
 ) as demo:
     with gr.Row():
         with gr.Column(scale=1):
@@ -100,9 +121,10 @@ with gr.Blocks(
             # 🤖 Joe' AI 聊天助理
             <div style="color:#9ec5fe; font-size:1.1em;">
                 這是一個由 Gemini 模型驅動的個人化聊天機器人。<br>
-                它是Joe的代理人，能以專業且自然的語氣回覆您的問題。<br>
+                它是 Joe 的代理人，能以專業且自然的語氣回覆您的問題。<br>
             </div>
             """)
+
     gr.HTML("<hr style='border: 1px solid #1e3a8a;'>")
 
     chat = gr.ChatInterface(