Update ui/layouts.py

ui/layouts.py

@@ -38,17 +38,34 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                 opacity: 0.9;
                 margin-top: 0;
             }
+            /* Style for instruction cards */
+            .instruction-card {
+                background-color: #ffffff;
+                border-left: 5px solid #0a9396;
+                padding: 20px 25px;
+                margin: 20px 0;
+                border-radius: 8px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+            }
+            .instruction-card h3 {
+                margin-top: 0;
+                color: #005f73;
+                font-size: 1.5rem;
+            }
+            .instruction-card p, .instruction-card ul {
+                font-size: 1.1rem;
+                color: #34495e;
+            }
+            .instruction-card code {
+                background-color: #e9ecef;
+                padding: 3px 6px;
+                border-radius: 4px;
+                font-size: 1rem;
+            }
             @media (max-width: 768px) {
-                .custom-header {
-                    padding: 3rem 1rem;
-                    border-radius: 0;
-                }
-                .custom-header h1 {
-                    font-size: 2.5rem;
-                }
-                .custom-header p {
-                    font-size: 1.2rem;
-                }
+                .custom-header { padding: 3rem 1rem; border-radius: 0; }
+                .custom-header h1 { font-size: 2.5rem; }
+                .custom-header p { font-size: 1.2rem; }
             }
             </style>
             <div class="custom-header">
@@ -95,37 +112,55 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                         with gr.Column(scale=3):
                             seismo_plot_output = gr.Plot(label="震波圖輸出")
                             seismo_console_output = gr.Textbox(label="執行結果 / 錯誤訊息", lines=8, interactive=False)
+            
+            # --- ✨ 1. 新增的「AI 助教說明」分頁 ---
+            with gr.TabItem("❓ AI 助教說明"):
+                gr.Markdown("## 🤖 AI 課程助教使用指南")
+                gr.Markdown("歡迎使用課程 AI 助教！我整合了課程知識庫與多種即時資訊來源，您可以透過多種方式與我互動。")
+                
+                with gr.Blocks():
+                    gr.Markdown(
+                        """
+                        <div class="instruction-card">
+                            <h3>📚 課程知識庫</h3>
+                            <p>我可以回答關於本課程的各種靜態問題。您可以隨意提問，例如：</p>
+                            <ul>
+                                <li><code>這門課的評分標準是什麼？</code></li>
+                                <li><code>Anaconda 和 Colab 有什麼不同？</code></li>
+                                <li><code>如何安裝 anaconda？</code></li>
+                            </ul>
+                        </div>
+                        
+                        <div class="instruction-card">
+                            <h3>⚡ 即時資訊查詢</h3>
+                            <p>我能幫您查詢最新的動態資訊，您可以直接輸入下方的<b>快捷指令</b>或對應的<b>文字問題</b>：</p>
+                            <ul>
+                                <li>快捷指令 <code>#1</code> 或輸入 <code>今天有什麼重要新聞？</code></li>
+                                <li>快捷指令 <code>#2</code> 或輸入 <code>最新的CWA顯著地震報告</code></li>
+                                <li>快捷指令 <code>#3</code> 或輸入 <code>現在有地震預警嗎？</code></li>
+                                <li>快捷指令 <code>#4</code> 或輸入 <code>最近全球有哪些大地震？</code></li>
+                                <li>快捷指令 <code>#5</code> 或輸入 <code>pws info</code></li>
+                                <li>快捷指令 <code>#6</code> 或輸入 <code>最新的pws地震警報</code></li>
+                            </ul>
+                        </div>
+
+                        <div class="instruction-card">
+                            <h3>🔎 進階地震查詢</h3>
+                            <p>您也可以指定<b>日期範圍</b>與<b>規模</b>來查詢全球地震紀錄，請務必<b>完全依照</b>以下格式提問：</p>
+                            <ul>
+                                <li><code>查詢 2024-04-01 到 2024-04-07 規模 6.0 以上地震</code></li>
+                            </ul>
+                            <p>您可以自由更換其中的日期與規模數值。</p>
+                        </div>
+                        """
+                    )
 
-            # --- ✨ 以下是修改後的 AI 助教說明 ---
+            # --- ✨ 2. 簡化後的「AI 課程助教」主分頁 ---
             with gr.TabItem("🤖 AI 課程助教"):
                 with gr.Group():
-                    gr.Markdown("### 🤖 AI 課程助教 (���識庫 & 即時資訊強化版)")
-                    gr.Markdown("""
-                    歡迎使用課程 AI 助教！我整合了靜態的課程知識與多種即時資訊來源，您可以隨時向我提問。
-
-                    ---
-                    
-                    #### 📚 **課程知識庫**
-                    我可以回答關於本課程的各種問題，例如：`「這門課的評分標準是什麼？」`
-
-                    ---
-                    
-                    #### ⚡ **即時資訊查詢 (可直接輸入 `#數字` 快捷指令)**
-                    
-                    #1. **今日新聞** (或輸入 `今天有什麼重要新聞？`)
-                    #2. **CWA 顯著地震報告** (或輸入 `最新的 CWA 顯著地震報告`)
-                    #3. **CWA 地震預警** (或輸入 `現在有地震預警嗎？`)
-                    #4. **全球大地震** (或輸入 `最近全球有哪些大地震？`)
-                    #5. **PWS 發布情形** (或輸入 `pws info`)
-                    #6. **PWS 地震警報** (或輸入 `最新的 pws 地震警報`)
-                    
-                    ---
-
-                    #### 🔎 **進階地震查詢**
-                    您也可以指定日期與規模來查詢全球地震紀錄，請**完全依照以下格式**提問：
-                    - `查詢 2024-04-01 到 2024-04-07 規模 6.0 以上地震`
-                    """)
-                    
+                    gr.Markdown("### 🤖 AI 課程助教")
+                    gr.Markdown("歡迎使用 AI 助教！您可以直接在下方對話框提問，或參考「❓ **AI 助教說明**」分頁了解所有支援的功能與快捷指令。")
+                        
                     custom_textbox = gr.Textbox(
                         placeholder="對課程有什麼問題嗎？或輸入 #1、#2... 查詢即時資訊",
                         show_label=False,
@@ -134,9 +169,9 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
 
                     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="由結構化知識庫與即時工具驅動的問答機器人",
+                        chatbot=gr.Chatbot(height=500, type="messages", avatar_images=(None, "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")),
+                        title=None,
+                        description=None,
                         textbox=custom_textbox,
                     )