Update app.py

app.py

@@ -1,42 +1,54 @@
 import gradio as gr
+import random
 
-# 1. 定義所有專案資料
-# 我們使用 Python 字典來組織所有分類和連結
+# 1. [創意升級] 專案資料：為每個專案標題加入 Emoji 
 projects_data = {
     "🌊 地震與波形展示": [
-        {"title": "地震目錄搜尋 API", "url": "https://cwadayi-python-app.hf.space/"},
-        {"title": "地震預警訊息顯示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_alarm_Taiwan"},
-        {"title": "PyGMT 震央繪圖展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_gmt_demo_new"},
-        {"title": "ObsPy 地震資料處理", "url": "https://huggingface.co/spaces/cwadayi/streamlit_obspy"}
+        {"title": "📡 地震目錄搜尋 API", "url": "https://cwadayi-python-app.hf.space/"},
+        {"title": "⚠️ 地震預警訊息顯示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_alarm_Taiwan"},
+        {"title": "🗺️ PyGMT 震央繪圖展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_gmt_demo_new"},
+        {"title": "📈 ObsPy 地震資料處理", "url": "https://huggingface.co/spaces/cwadayi/streamlit_obspy"}
     ],
     "🛰️ 地震監測與資料應用": [
-        {"title": "Geiger 法地震定位展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_earthquake_location"},
-        {"title": "地震監測流程", "url": "https://huggingface.co/spaces/cwadayi/earthquake_monitoring"},
-        {"title": "Google Sheet 資料顯示", "url": "https://huggingface.co/spaces/cwadayi/Grafana_like_2"},
-        {"title": "PWS 地震預警顯示", "url": "https://cwadayi-app-show-pws.hf.space/cwa-earthquakes"},
-        {"title": "全球地震顯示", "url": "https://huggingface.co/spaces/cwadayi/streamlit"}
+        {"title": "📍 Geiger 法地震定位展示", "url": "https://huggingface.co/spaces/cwadayi/streamlit_earthquake_location"},
+        {"title": "🔍 地震監測流程 (擷取-撿拾-定位)", "url": "https://huggingface.co/spaces/cwadayi/earthquake_monitoring"},
+        {"title": "📊 Google Sheet 資料顯示 (類Grafana)", "url": "https://huggingface.co/spaces/cwadayi/Grafana_like_2"},
+        {"title": "🏠 PWS 地震預警顯示", "url": "https://cwadayi-app-show-pws.hf.space/cwa-earthquakes"},
+        {"title": "🌍 全球地震顯示 (Streamlit)", "url": "https://huggingface.co/spaces/cwadayi/streamlit"}
     ],
     "💻 資料擷取與 API 應用": [
-        {"title": "LINE ROBOT 伺服器", "url": "https://huggingface.co/spaces/cwadayi/LINE-ROBOT"},
-        {"title": "震央分佈圖 (MCP-2)", "url": "https://huggingface.co/spaces/cwadayi/MCP-2"},
-        {"title": "PWS 資訊擷取", "url": "https://huggingface.co/spaces/cwadayi/MCP-pws"},
-        {"title": "USGS 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/Usgs_api_gemini"},
-        {"title": "CWA 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/CWA_API_chatgpt5_1"}
+        {"title": "💬 LINE ROBOT 伺服器", "url": "https://huggingface.co/spaces/cwadayi/LINE-ROBOT"},
+        {"title": "🗺️ 震央分佈圖 (MCP-2)", "url": "https://huggingface.co/spaces/cwadayi/MCP-2"},
+        {"title": "📥 PWS 資訊擷取", "url": "https://huggingface.co/spaces/cwadayi/MCP-pws"},
+        {"title": "🏛️ USGS 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/Usgs_api_gemini"},
+        {"title": "🇹🇼 CWA 地震資料 API", "url": "https://huggingface.co/spaces/cwadayi/CWA_API_chatgpt5_1"}
     ],
     "🏫 地球物理課程與教材": [
-        {"title": "地球物理課程 (總覽)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_class"},
-        {"title": "地物課程網站 (Day1)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day1"},
-        {"title": "地物課程網站 (Day2)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day2"},
-        {"title": "折射震測展示", "url": "https://huggingface.co/spaces/cwadayi/Refraction_sdd"},
-        {"title": "折射震測展示 (2)", "url": "https://huggingface.co/spaces/cwadayi/Refraction_3"},
-        {"title": "重力異常展示", "url": "https://huggingface.co/spaces/cwadayi/Gravity"}
+        {"title": "🎓 地球物理課程 (總覽)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_class"},
+        {"title": "📗 地物課程網站 (Day1)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day1"},
+        {"title": "📘 地物課程網站 (Day2)", "url": "https://huggingface.co/spaces/cwadayi/Geophysics_day2"},
+        {"title": "📏 折射震測展示 (SDD)", "url": "https://huggingface.co/spaces/cwadayi/Refraction_sdd"},
+        {"title": "📐 折射震測展示 (Refraction 3)", "url": "https://huggingface.co/spaces/cwadayi/Refraction_3"},
+        {"title": "⚖️ 重力異常展示 (Bouguer & Free-air)", "url": "https://huggingface.co/spaces/cwadayi/Gravity"}
     ]
 }
 
-# 2. 自訂 CSS 樣式
-# 這裡我們模仿 V1 靜態頁面的標頭樣式，並美化按鈕
+# 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 樣式
 css = """
-/* 模仿 V1 靜態頁面的標頭 */
+/* 標頭樣式 */
 #main-header {
     background: linear-gradient(135deg, #2c3e50, #34495e);
     padding: 2rem 1.5rem;
@@ -57,16 +69,67 @@ css = """
     margin: 0 auto;
     text-align: center;
 }
+/* 標頭圖片 */
+#header-image {
+    width: 100%;
+    max-height: 250px; /* 限制最大高度 */
+    object-fit: cover;  /* 圖片會被裁剪以填滿容器 */
+    border-radius: 12px;
+    margin-bottom: 1rem;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+}
+
+/* 推薦按鈕 */
+#recommend-button {
+    background: linear-gradient(135deg, #1abc9c, #16a085); /* 亮眼的青色漸層 */
+    color: white !important;
+    font-size: 1.1rem !important;
+    font-weight: bold !important;
+    border: none !important;
+    border-radius: 10px !important;
+    transition: all 0.3s ease !important;
+}
+#recommend-button:hover {
+    background: linear-gradient(135deg, #16a085, #1abc9c);
+    transform: scale(1.02);
+    box-shadow: 0 5px 15px rgba(22, 160, 133, 0.4);
+}
+
+/* 推薦輸出框 */
+#recommend-output {
+    border: 2px dashed #1abc9c;
+    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;
+}
 
-/* 美化專案標題 */
+/* 專案標題 */
 .project-title h3 {
     margin: 0;
-    padding: 0.5rem 0; /* 讓標題和按鈕垂直置中 */
+    padding: 0.5rem 0;
     font-size: 1.2rem;
     color: #2c3e50;
 }
 
-/* 美化連結按鈕 */
+/* 專案按鈕 */
 .project-button a {
     background-color: #3498db !important;
     color: #ffffff !important;
@@ -78,7 +141,7 @@ css = """
     transform: scale(1.03);
 }
 
-/* 頁腳樣式 */
+/* 頁腳 */
 #footer {
     text-align: center;
     color: #777;
@@ -87,20 +150,21 @@ css = """
 }
 """
 
-# 3. 使用 gr.Blocks() 建構介面
+# 4. [創意升級] 使用 gr.Blocks() 建構介面
 with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as demo:
     
-    # 標頭區
-    # 我們使用 gr.Markdown 來渲染 HTML 標籤，並用 elem_id 套用 CSS
+    # 標頭區 (加入圖片)
     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>一系列運用 Hugging Face Space 部署的地球科學與地震應用程式，展現資料科學與網路技術的結合。</p>
+            <p>一個地球物理學家的數位百寶箱：探索一系列由 cwadayi 打造的地震與地科應用！</p>
             """
         )
     
-    # 介紹區
+    # 介紹區 (保持不變)
     with gr.Accordion("🚀 關於 Hugging Face Spaces (點我展開)", open=False):
         with gr.Row():
             with gr.Column():
@@ -126,21 +190,26 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
                     """
                 )
                 
+    # [創意升級] 隨機推薦區
+    gr.Markdown("---")
+    with gr.Blocks():
+        gr.Markdown("## ✨ 幸運推薦 ✨")
+        recommend_btn = gr.Button("不知道從何逛起？ 點我隨機推薦一個專案！", elem_id="recommend-button")
+        recommend_out = gr.Markdown("點擊上方按鈕，讓我為您挑選一個有趣的專案！", elem_id="recommend-output")
+    gr.Markdown("---")
+
+
     # 專案列表區
-    gr.Markdown("## 專案列表")
+    gr.Markdown("## 📚 專案總覽")
     
-    # 動態生成所有專案
+    # 動態生成所有專案 (現在會顯示帶有 Emoji 的標題)
     for category, items in projects_data.items():
-        # 每個分類都是一個可折疊的 Accordion
         with gr.Accordion(category, open=True):
             for item in items:
-                # 每一橫列代表一個專案
-                with gr.Row():
-                    # 左側：專案標題
+                with gr.Row(variant="panel", equal_height=True):
                     with gr.Column(scale=4):
                         gr.Markdown(f"### {item['title']}", elem_classes="project-title")
-                    # 右側：連結按鈕
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=1, min_width=150):
                         gr.Button(
                             "前往應用 ↗", 
                             link=item['url'], 
@@ -150,11 +219,17 @@ with gr.Blocks(css=css, title="地球物理 x Hugging Face 專案展示") as dem
     # 頁腳
     gr.Markdown(
         """
-        ---
         <p id="footer">此頁面由 Gemini 協助生成，展示 "1022 中央地科演講" 中的 Hugging Face 專案。</p>
         """
     )
+    
+    # 5. [創意升級] 綁定按鈕點擊事件
+    recommend_btn.click(
+        fn=recommend_project,   # 點擊後呼叫的函式
+        inputs=None,            # 沒有輸入
+        outputs=recommend_out   # 輸出到 recommend_out (Markdown 元件)
+    )
 
-# 4. 啟動應用程式
+# 6. 啟動應用程式
 if __name__ == "__main__":
     demo.launch()