Update ui/layouts.py

ui/layouts.py

@@ -64,6 +64,20 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
                 font-size: 1rem;
                 color: #c7254e;
             }
+            /* Style for the homepage image */
+            .homepage-image-container {
+                margin-top: 1rem; /* 圖片與上方 Header 的間距 */
+                margin-bottom: 2rem; /* 圖片與下方 Tabs 的間距 */
+                border-radius: 12px;
+                overflow: hidden; /* 確保圖片圓角 */
+                box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+            }
+            .homepage-image-container img {
+                width: 100%;
+                height: auto;
+                display: block;
+            }
+
             @media (max-width: 768px) {
                 .custom-header { padding: 3rem 1rem; border-radius: 0; }
                 .custom-header h1 { font-size: 2.5rem; }
@@ -77,10 +91,13 @@ def create_ui(visit_count_html: str, theme: gr.Theme):
             """
         )
 
-        # --- ✨ 修改 Tabs 容器，使用 id 進行預設選擇 ---
-        with gr.Tabs(selected="goals_tab"):
+        # --- ✨ 修改圖片路徑以符合與 app.py 同層目錄 ---
+        # 請確保 'homepage_image.png' 就是您的圖片檔名
+        with gr.Row(elem_classes="homepage-image-container"):
+            gr.Image(value="homepage_image.png", show_label=False, interactive=False, container=False)
+
+        with gr.Tabs():
         
-            # --- ✨ 為預設分頁加上對應的 id ---
             with gr.TabItem("🎯 課程目標", id="goals_tab"):
                 gr.Markdown(content.course_goals_md)