Upload 9 files

ui/layouts.py

@@ -14,22 +14,30 @@ 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():
+            
             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):
@@ -39,6 +47,7 @@ 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):
@@ -49,11 +58,10 @@ 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 improved description and textbox) --- ✨
             with gr.TabItem("🤖 AI 課程助教"):
+                # Use gr.Group for backward compatibility with older Gradio versions
                 with gr.Group():
                     gr.Markdown("### 🤖 AI 課程助教 (知識庫強化版)")
-                    # --- ✨ 1. Strengthened description ---
                     gr.Markdown("""
                     歡迎使用課程 AI 助教！這裡整合了課程的關鍵資訊，您可以隨時向我提問。
                     
@@ -65,7 +73,6 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                     我能理解錯別字或不完全精確的提問，請隨意發問！
                     """)
                     
-                    # --- ✨ 2. Customized textbox for the chat interface ---
                     custom_textbox = gr.Textbox(
                         placeholder="對課程有什麼問題嗎？在這裡試著問我！",
                         show_label=False,