Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import random
 
-# 1. [創意升級] 專案資料：為每個專案標題加入 Emoji 
+# 1. 專案資料 (帶有 Emoji)
 projects_data = {
     "🌊 地震與波形展示": [
         {"title": "📡 地震目錄搜尋 API", "url": "https://cwadayi-python-app.hf.space/"},
@@ -33,20 +33,19 @@ projects_data = {
     ]
 }
 
-# 2. [創意升級] 隨機推薦函式
+# 2. 隨機推薦函式
 def recommend_project():
     """從所有專案中隨機挑選一個並回傳 Markdown 格式的推薦"""
     all_projects = [item for sublist in projects_data.values() for item in sublist]
     recommendation = random.choice(all_projects)
     
-    # 回傳精美的 Markdown 格式
     return f"""
     ### {recommendation['title']}
     
     [**點此立即前往 🚀**]({recommendation['url']})
     """
 
-# 3. [創意升級] 自訂 CSS 樣式
+# 3. 自訂 CSS 樣式
 css = """
 /* 標頭樣式 */
 #main-header {
@@ -69,11 +68,10 @@ css = """
     margin: 0 auto;
     text-align: center;
 }
-/* 標頭圖片 */
 #header-image {
     width: 100%;
-    max-height: 250px; /* 限制最大高度 */
-    object-fit: cover;  /* 圖片會被裁剪以填滿容器 */
+    max-height: 250px;
+    object-fit: cover;
     border-radius: 12px;
     margin-bottom: 1rem;
     box-shadow: 0 4px 10px rgba(0,0,0,0.2);
@@ -81,7 +79,7 @@ css = """
 
 /* 推薦按鈕 */
 #recommend-button {
-    background: linear-gradient(135deg, #1abc9c, #16a085); /* 亮眼的青色漸層 */
+    background: linear-gradient(135deg, #1abc9c, #16a085);
     color: white !important;
     font-size: 1.1rem !important;
     font-weight: bold !important;
@@ -101,33 +99,14 @@ css = """
     border-radius: 10px;
     padding: 1.5rem;
     text-align: center;
-    background-color: #f8fdfc; /* 非常淺的青色背景 */
-}
-#recommend-output h3 {
-    margin-top: 0.5rem;
-    margin-bottom: 1.2rem;
-    color: #2c3e50;
-    font-size: 1.4rem;
-}
-#recommend-output a {
-    font-size: 1.1rem;
-    font-weight: bold;
-    color: #2980b9;
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-#recommend-output a:hover {
-    color: #3498db;
-    text-decoration: underline;
+    background-color: #f8fdfc;
 }
+#recommend-output h3 { margin-top: 0.5rem; margin-bottom: 1.2rem; color: #2c3e50; font-size: 1.4rem; }
+#recommend-output a { font-size: 1.1rem; font-weight: bold; color: #2980b9; text-decoration: none; transition: color 0.3s ease; }
+#recommend-output a:hover { color: #3498db; text-decoration: underline; }
 
 /* 專案標題 */
-.project-title h3 {
-    margin: 0;
-    padding: 0.5rem 0;
-    font-size: 1.2rem;
-    color: #2c3e50;
-}
+.project-title h3 { margin: 0; padding: 0.5rem 0; font-size: 1.2rem; color: #2c3e50; }
 
 /* 專案按鈕 */
 .project-button a {
@@ -136,35 +115,40 @@ css = """
     border-radius: 8px !important;
     transition: background-color 0.3s ease, transform 0.2s ease !important;
 }
-.project-button a:hover {
-    background-color: #2980b9 !important;
-    transform: scale(1.03);
-}
+.project-button a:hover { background-color: #2980b9 !important; transform: scale(1.03); }
 
-/* 頁腳 */
-#footer {
-    text-align: center;
-    color: #777;
+/* [新增] 教學區塊的程式碼樣式 */
+#tutorial-code-block pre {
+    background-color: #2b2b2b; /* 深色背景 */
+    color: #f8f8f2; /* 亮色文字 */
+    padding: 1.5rem;
+    border-radius: 10px;
+    font-family: 'Courier New', Courier, monospace;
     font-size: 0.9rem;
-    margin-top: 2rem;
+    line-height: 1.5;
+    white-space: pre-wrap; /* 自動換行 */
+    overflow-x: auto; /* 水平滾動 */
+    border: 2px solid #444;
 }
+
+/* 頁腳 */
+#footer { text-align: center; color: #777; font-size: 0.9rem; margin-top: 2rem; }
 """
 
-# 4. [創意升級] 使用 gr.Blocks() 建構介面
+# 4. 使用 gr.Blocks() 建構介面
 with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as demo:
     
-    # 標頭區 (加入圖片)
+    # 標頭區 (含圖片)
     with gr.Row(elem_id="main-header"):
         gr.Markdown(
             """
             <img id="header-image" src="https://images.pexels.com/photos/220201/pexels-photo-220201.jpeg" alt="Abstract seismic waves banner">
-            
             <h1>地球物理 x Hugging Face 專案展示</h1>
             <p>一個地球物理學家的數位百寶箱：探索一系列由 cwadayi 打造的地震與地科應用！</p>
             """
         )
     
-    # 介紹區 (保持不變)
+    # 介紹區
     with gr.Accordion("🚀 關於 Hugging Face Spaces (點我展開)", open=False):
         with gr.Row():
             with gr.Column():
@@ -173,7 +157,7 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     ### 什麼是 Hugging Face Spaces？
                     Hugging Face Spaces 是一個由 Hugging Face 提供的免費平台，讓開發者和創作者可以輕鬆地建立、分享和展示他們的機器學習 Demo 或網頁應用程式。
                     
-                    它就像是 AI 應用的「YouTube」！您可以使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者部署靜態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。
+                    它就像是 AI 應用的「YouTube」！您可以使用 Gradio、Streamlit 等 Python 套件快速打造互動介面，或者部署靜T態網頁 (HTML/CSS/JS)，甚至運行 Docker 容器。
                     """
                 )
             with gr.Column():
@@ -189,8 +173,97 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     6. **完成！** 您的Gradio應用程式將自動建置並上線。
                     """
                 )
-                
-    # [創意升級] 隨機推薦區
+
+    # [新增] 學生教學區塊
+    with gr.Accordion("🎓 學生的 AI 創客空間：5 步驟打造你的地科 App！", open=True):
+        gr.Markdown(
+            """
+            <div style="padding: 1rem;">
+            <h3>想自己動手做一個酷酷的 App 嗎？跟著 AI 一起，你也能在 5 分鐘內上線！</h3>
+            <p>這是一個教你如何「跟 AI (例如 Gemini) 協作」來快速打造並部署應用程式的SOP：</p>
+            
+            <hr style="margin: 1.5rem 0;">
+            
+            <h3>Step 1: 點子發想 🧠</h3>
+            <p>先想一個簡單的點子。例如：「我想做一個查詢『地科名詞』的字典！」</p>
+            
+            <h3>Step 2: 詠唱 AI 咒語 🧙</h3>
+            <p>打開你最愛的 AI 助手，對它說出清晰的指令 (Prompt)，例如：</p>
+            <blockquote>
+            "請幫我用 Python 和 Gradio 寫一個簡單的應用。我需要一個下拉式選單，選項有「板塊構造」、「地震波」、「海嘯」。當我選擇一個選項時，下方要顯示對應的中文解釋。請給我完整的 `app.py` 程式碼。"
+            </blockquote>
+            
+            <h3>Step 3: 取得程式碼 📜</h3>
+            <p>AI 會給你一份完整的程式碼。下面這份就是 AI 可能會產生的答案，你可以直接複製它來進行下一步！</p>
+            
+            <div id="tutorial-code-block">
+            <pre>
+import gradio as gr
+
+# 1. 知識庫 (你的地科字典)
+geo_dict = {
+    "板塊構造 (Plate Tectonics)": "地球的岩石圈被分成許多稱為「板塊」的巨大板塊，這些板塊在軟流圈上緩慢移動，彼此碰撞或分離，形成了火山、地震和山脈。",
+    "地震波 (Seismic Wave)": "地震時從震源向四面八方傳播的能量波。主要分為 P 波（壓縮波，速度快）和 S 波（剪力波，速度慢），它們是我們研究地球內部的主要工具。",
+    "海嘯 (Tsunami)": "由海底地震、火山爆發或山崩引起的巨大海浪。它在深海中傳播速度極快（可達時速 800 公里），但波高很低；當它靠近淺海岸時，速度減慢，波高則急遽增加。"
+}
+
+# 2. 定義介面函式
+def get_definition(term):
+    # 從字典中查找解釋
+    return geo_dict.get(term, "查無此名詞")
+
+# 3. 建立 Gradio 介面
+with gr.Blocks(title="我的地科字典") as demo:
+    gr.Markdown("# 🚀 我的第一個地科 App")
+    gr.Markdown("這是一個由 AI 協助產生的 Gradio 應用程式！")
+    
+    # 輸入元件：下拉式選單
+    dropdown = gr.Dropdown(
+        label="請選擇一個地科名詞",
+        choices=list(geo_dict.keys()) # 選項來自字典的 "key"
+    )
+    
+    # 輸出元件：文字框
+    output_textbox = gr.Textbox(
+        label="名詞解釋",
+        lines=5, # 顯示 5 行的高度
+        interactive=False # 使用者不能編輯
+    )
+    
+    # 4. 綁定互動
+    dropdown.change(
+        fn=get_definition,   # 當下拉選單改變時，呼叫 get_definition 函式
+        inputs=dropdown,     # 輸入是下拉選單的 "值"
+        outputs=output_textbox # 輸出到文字框
+    )
+
+# 5. 啟動 App
+demo.launch()
+
+            </pre>
+            </div>
+            
+            <h3>Step 4: 部署到 Space 🚀</h3>
+            <p>這是最神奇的一步！</p>
+            <ol>
+                <li>到 Hugging Face 網站，點選你的頭像，選擇 <strong>"New Space"</strong>。</li>
+                <li>為你的 Space 命名 (例如: <code>my-geo-dictionary</code>)。</li>
+                <li>在 "Space SDK" 中選擇 <strong>"Gradio"</strong> (很重要！)。</li>
+                <li>點擊 "Create Space"。</li>
+                <li>在你的 Space 頁面，點選 "Files and versions" -> "Add file" -> "Create new file"。</li>
+                <li>將檔案命名為 <strong><code>app.py</code></strong> (必須是這個名字！)。</li>
+                <li><strong>將上面 "Step 3" 的整段程式碼，完整貼到 `app.py` 的編輯器中。</strong></li>
+                <li>點擊 "Commit new file" (提交檔案)。</li>
+            </ol>
+            
+            <h3>Step 5: 恭喜你！🎉</h3>
+            <p>等待幾分鐘，Hugging Face 會自動幫你把 App "建置" (Building) 起來。當你看到 "Running" 狀態時，恭喜你！你的第一個地科 App 已經上線，全世界都可以透過網址來使用了！</p>
+            
+            </div>
+            """
+        )
+
+    # 隨機推薦區
     gr.Markdown("---")
     with gr.Blocks():
         gr.Markdown("## ✨ 幸運推薦 ✨")
@@ -198,11 +271,9 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
         recommend_out = gr.Markdown("點擊上方按鈕，讓我為您挑選一個有趣的專案！", elem_id="recommend-output")
     gr.Markdown("---")
 
-
     # 專案列表區
     gr.Markdown("## 📚 專案總覽")
     
-    # 動態生成所有專案 (現在會顯示帶有 Emoji 的標題)
     for category, items in projects_data.items():
         with gr.Accordion(category, open=True):
             for item in items:
@@ -223,11 +294,11 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
         """
     )
     
-    # 5. [創意升級] 綁定按鈕點擊事件
+    # 5. 綁定按鈕點擊事件
     recommend_btn.click(
-        fn=recommend_project,   # 點擊後呼叫的函式
-        inputs=None,            # 沒有輸入
-        outputs=recommend_out   # 輸出到 recommend_out (Markdown 元件)
+        fn=recommend_project,
+        inputs=None,
+        outputs=recommend_out
     )
 
 # 6. 啟動應用程式