Upload 9 files

app.py

@@ -3,7 +3,7 @@ import gradio as gr
 from core.visits import get_and_update_visits
 from ui.layouts import create_ui
 
-# --- ✨ 1. Define a new custom theme for better aesthetics ---
+# --- 1. Define a new custom theme for better aesthetics ---
 custom_theme = gr.themes.Soft(
     primary_hue="blue",
     secondary_hue="cyan",
@@ -12,15 +12,21 @@ custom_theme = gr.themes.Soft(
     radius_size=gr.themes.sizes.radius_md,
 ).set(
     # Custom colors
-    body_background_fill="#F0F4F8",          # A light blue-gray for the main background
-    block_background_fill="white",           # White background for components
-    block_border_width="1px",                # Thin border for components
-    block_shadow="*shadow_drop_lg",          # Soft shadow for a floating effect
+    body_background_fill="#F0F4F8",
+    block_background_fill="white",
+    block_border_width="1px",
+    block_shadow="*shadow_drop_lg",
     
     # Custom button style
     button_primary_background_fill="*primary_500",
     button_primary_background_fill_hover="*primary_400",
     button_primary_text_color="white",
+
+    # --- ✨ ADDED: Style for input textbox to make it more visible ---
+    input_background_fill="white",
+    input_border_color="*neutral_200",
+    input_shadow="*shadow_drop",
+    input_border_width="1.5px", # Slightly thicker border
 )
 
 # --- 2. Update site visit count on startup ---

ui/layouts.py

@@ -14,31 +14,22 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
     
     # --- Main UI Layout ---
     with gr.Blocks(theme=theme, title="地球物理學與AI應用") as demo:
-        # --- Display Visit Counter at the top ---
+        # (此處程式碼不變，省略以節省篇幅)
         gr.Markdown(visit_count_html)
-
-        # --- Introduction Section ---
         gr.Markdown(content.course_introduction_md)
 
-        # --- Main Tabs ---
         with gr.Tabs():
-            
-            # (其他 TabItem 維持不變)
             with gr.TabItem("🎯 課程目標"):
                 gr.Markdown(content.course_goals_md)
-
             with gr.TabItem("🗓️ 課程進度"):
                 gr.Markdown("### 每週課程安排")
                 gr.DataFrame(data.schedule_df, wrap=True)
-
             with gr.TabItem("💯 成績計算"):
                 gr.Markdown(content.grading_policy_md)
-
             with gr.TabItem("🚀 互動體驗區 (程式碼實驗室)"):
                 gr.Markdown("## 🚀 互動程式碼實驗室")
                 gr.Markdown("歡迎來到這裡！直接修改下方的 Python 程式碼，點擊「執行」，即可在右側看到成果。這是學習程式與地球物理最直接的方式！")
                 gr.Info("注意：執行環境已受限，僅支援資料視覺化相關操作。請勿嘗試檔案讀寫或網路請求。")
-
                 with gr.Accordion("🌍 地圖繪製實驗室 (PyGMT/Cartopy 概念)", open=True):
                     with gr.Row():
                         with gr.Column(scale=2):
@@ -48,7 +39,6 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                         with gr.Column(scale=3):
                             map_plot_output = gr.Plot(label="地圖輸出")
                             map_console_output = gr.Textbox(label="執行結果 / 錯誤訊息", lines=8, interactive=False)
-                
                 with gr.Accordion("📈 震波圖繪製實驗室 (ObsPy 概念)", open=False):
                     with gr.Row():
                         with gr.Column(scale=2):
@@ -59,18 +49,35 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                             seismo_plot_output = gr.Plot(label="震波圖輸出")
                             seismo_console_output = gr.Textbox(label="執行結果 / 錯誤訊息", lines=8, interactive=False)
 
-
-            # --- ✨ Tab 5: AI Chatbot (with corrected layout component) --- ✨
+            # --- ✨ Tab 5: AI Chatbot (with improved description and textbox) --- ✨
             with gr.TabItem("🤖 AI 課程助教"):
-                # Use gr.Group for backward compatibility with older Gradio versions
                 with gr.Group():
                     gr.Markdown("### 🤖 AI 課程助教 (知識庫強化版)")
-                    gr.Markdown("我內建了豐富的課程知識庫，試著問我 **「如何安裝Python環境？」**、**「什麼是版本控制？」** 或 **「給我一些期末專題的靈感」**")
+                    # --- ✨ 1. Strengthened description ---
+                    gr.Markdown("""
+                    歡迎使用課程 AI 助教！這裡整合了課程的關鍵資訊，您可以隨時向我提問。
+                    
+                    **不知道從何問起嗎？試試看下面幾個方向：**
+                    - **課程資訊**：`「這門課的評分標準是什麼？」`、`「期末專題有什麼建議主題？」`
+                    - **技術工具**：`「什麼是版本控制？」`、`「Colab 和 Codespaces 有什麼差別？」`
+                    - **地球物理**：`「解釋一下什麼是折射震測」`、`「地熱發電有什麼優點？」`
+                    
+                    我能理解錯別字或不完全精確的提問，請隨意發問！
+                    """)
+                    
+                    # --- ✨ 2. Customized textbox for the chat interface ---
+                    custom_textbox = gr.Textbox(
+                        placeholder="對課程有什麼問題嗎？在這裡試著問我！",
+                        show_label=False,
+                        container=False, # Important to make it blend into the ChatInterface UI
+                    )
+
                     gr.ChatInterface(
                         callbacks.ai_chatbot_with_kb,
                         chatbot=gr.Chatbot(height=450, type="messages", avatar_images=(None, "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")),
                         title="課程AI助教",
-                        description="由結構化知識庫驅動的問答機器人"
+                        description="由結構化知識庫與模糊比對驅動的問答機器人",
+                        textbox=custom_textbox, # Apply the custom textbox
                     )
 
         # --- Connect Buttons to Backend Functions ---