Update ui/layouts.py

ui/layouts.py

@@ -13,40 +13,36 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
     """
     
     # --- Main UI Layout ---
-    with gr.Blocks(theme=theme, title="地球物理學") as demo: # ✨ 調整 title 顯示在瀏覽器標籤頁
-        # --- Display Visit Counter at the top (如果需要，也可以選擇移除) ---
-        # gr.Markdown(visit_count_html) 
-
-        # --- ✨ 新增: 自訂頂部 Header 區塊 (模仿圖片中的藍綠色背景) ---
+    with gr.Blocks(theme=theme, title="地球物理學") as demo:
+        # --- 自訂頂部 Header ---
         gr.Markdown(
             """
             <style>
             .custom-header {
-                background: linear-gradient(135deg, #005f73, #0a9396); /* 藍綠漸變 */
+                background: linear-gradient(135deg, #005f73, #0a9396);
                 color: #fff;
-                padding: 4rem 2rem; /* 增加上下內距 */
+                padding: 4rem 2rem;
                 text-align: center;
-                border-radius: 0 0 20px 20px; /* 底部圓角 */
-                margin-bottom: 2rem; /* 與下方內容的間距 */
-                box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* 輕微陰影 */
+                border-radius: 0 0 20px 20px;
+                margin-bottom: 2rem;
+                box-shadow: 0 8px 15px rgba(0,0,0,0.1);
             }
             .custom-header h1 {
-                font-size: 3.5rem; /* 大標題字體 */
+                font-size: 3.5rem;
                 font-weight: 700;
-                margin-bottom: 0.8rem; /* 標題與副標題間距 */
+                margin-bottom: 0.8rem;
                 line-height: 1.2;
             }
             .custom-header p {
-                font-size: 1.6rem; /* 副標題字體 */
+                font-size: 1.6rem;
                 font-weight: 400;
                 opacity: 0.9;
                 margin-top: 0;
             }
-            /* RWD for header */
             @media (max-width: 768px) {
                 .custom-header {
                     padding: 3rem 1rem;
-                    border-radius: 0; /* 手機版不設底部圓角 */
+                    border-radius: 0;
                 }
                 .custom-header h1 {
                     font-size: 2.5rem;
@@ -60,17 +56,12 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                 <h1>地球物理概論</h1>
                 <p>一個探索我們星球內在奧秘的互動式指南</p>
             </div>
-            """,
-            # 為了讓這些 CSS 生效，將 render_as_html 設為 True
-            # 但是 Gradio 預設的 markdown 已經是 render_as_html，所以通常不需要特別設定
+            """
         )
 
-        # --- ✨ 新增: 模仿網站導覽列的 Tab 容器 ---
-        # 移除 container=False，讓它有白色背景和陰影
-        with gr.Row(variant="panel", elem_id="main-nav-tabs"): # 給予 ID 方便未來 CSS 微調
-            # gr.Tabs 放在 Row 裡面，方便控制其寬度與位置
-            # class_name 用於自訂 CSS 樣式，但 Gradio 主題已能控制大部分外觀
-            with gr.Tabs(selected=0): # 預設選中第一個 Tab
+        # --- 主導覽列 Tab 容器 ---
+        with gr.Row(variant="panel", elem_id="main-nav-tabs"):
+            with gr.Tabs(selected=0):
             
                 with gr.TabItem("🎯 課程目標"):
                     gr.Markdown(content.course_goals_md)
@@ -82,6 +73,7 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                 with gr.TabItem("💯 成績計算"):
                     gr.Markdown(content.grading_policy_md)
 
+                # --- ✨ 還原「互動體驗區」分頁 ---
                 with gr.TabItem("🚀 互動體驗區 (程式碼實驗室)"):
                     gr.Markdown("## 🚀 互動程式碼實驗室")
                     gr.Markdown("歡迎來到這裡！直接修改下方的 Python 程式碼，點擊「執行」，即可在右側看到成果。這是學習程式與地球物理最直接的方式！")
@@ -107,10 +99,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)
 
+                # --- ✨ 還原「AI 課程助教」分頁 ---
                 with gr.TabItem("🤖 AI 課程助教"):
                     with gr.Group():
                         gr.Markdown("### 🤖 AI 課程助教 (知識庫 & 即時資訊強化版)")
-                        
                         gr.Markdown("""
                         歡迎使用課程 AI 助教！我整合了靜態的課程知識與多種即時資訊來源，您可以隨時向我提問。