Create app.py

app.py

@@ -0,0 +1,395 @@
+import gradio as gr
+import requests
+import os
+from google import genai
+import json
+
+# --- 設定 API 金鑰 ---
+def setup_api_key():
+    """
+    設定 Google API 金鑰。
+    """
+    api_key = os.environ.get('GOOGLE_API_KEY')
+    if not api_key or api_key == "YOUR_API_KEY_HERE":
+        print("警告：環境變數 'GOOGLE_API_KEY' 未設定或無效。AI 功能將無法使用。")
+        return False
+    else:
+        print("成功從環境變數讀取 GOOGLE_API_KEY。")
+        return True
+
+api_available = setup_api_key()
+client = None
+if api_available:
+    try:
+        client = genai.Client(api_key=os.environ["GOOGLE_API_KEY"])
+    except Exception as e:
+        print(f"初始化 Google API Client 時發生錯誤: {e}")
+        api_available = False
+
+
+# --- 元素資料定義 ---
+ELEMENTS_DATA = {
+    # 這裡省略了完整的元素資料，以節省空間，實際程式碼應包含所有元素
+    "H": {"name": "氫", "symbol": "H", "number": 1, "period": 1, "group": 1, "category": "nonmetal"},
+    "He": {"name": "氦", "symbol": "He", "number": 2, "period": 1, "group": 18, "category": "noble_gas"},
+    "Li": {"name": "鋰", "symbol": "Li", "number": 3, "period": 2, "group": 1, "category": "alkali_metal"},
+    "Be": {"name": "鈹", "symbol": "Be", "number": 4, "period": 2, "group": 2, "category": "alkaline_earth"},
+    "B": {"name": "硼", "symbol": "B", "number": 5, "period": 2, "group": 13, "category": "metalloid"},
+    "C": {"name": "碳", "symbol": "C", "number": 6, "period": 2, "group": 14, "category": "nonmetal"},
+    "N": {"name": "氮", "symbol": "N", "number": 7, "period": 2, "group": 15, "category": "nonmetal"},
+    "O": {"name": "氧", "symbol": "O", "number": 8, "period": 2, "group": 16, "category": "nonmetal"},
+    "F": {"name": "氟", "symbol": "F", "number": 9, "period": 2, "group": 17, "category": "halogen"},
+    "Ne": {"name": "氖", "symbol": "Ne", "number": 10, "period": 2, "group": 18, "category": "noble_gas"},
+    "Na": {"name": "鈉", "symbol": "Na", "number": 11, "period": 3, "group": 1, "category": "alkali_metal"},
+    "Mg": {"name": "鎂", "symbol": "Mg", "number": 12, "period": 3, "group": 2, "category": "alkaline_earth"},
+    "Al": {"name": "鋁", "symbol": "Al", "number": 13, "period": 3, "group": 13, "category": "post_transition"},
+    "Si": {"name": "矽", "symbol": "Si", "number": 14, "period": 3, "group": 14, "category": "metalloid"},
+    "P": {"name": "磷", "symbol": "P", "number": 15, "period": 3, "group": 15, "category": "nonmetal"},
+    "S": {"name": "硫", "symbol": "S", "number": 16, "period": 3, "group": 16, "category": "nonmetal"},
+    "Cl": {"name": "氯", "symbol": "Cl", "number": 17, "period": 3, "group": 17, "category": "halogen"},
+    "Ar": {"name": "氬", "symbol": "Ar", "number": 18, "period": 3, "group": 18, "category": "noble_gas"},
+    "K": {"name": "鉀", "symbol": "K", "number": 19, "period": 4, "group": 1, "category": "alkali_metal"},
+    "Ca": {"name": "鈣", "symbol": "Ca", "number": 20, "period": 4, "group": 2, "category": "alkaline_earth"},
+    "Sc": {"name": "鈧", "symbol": "Sc", "number": 21, "period": 4, "group": 3, "category": "transition"},
+    "Ti": {"name": "鈦", "symbol": "Ti", "number": 22, "period": 4, "group": 4, "category": "transition"},
+    "V": {"name": "釩", "symbol": "V", "number": 23, "period": 4, "group": 5, "category": "transition"},
+    "Cr": {"name": "鉻", "symbol": "Cr", "number": 24, "period": 4, "group": 6, "category": "transition"},
+    "Mn": {"name": "錳", "symbol": "Mn", "number": 25, "period": 4, "group": 7, "category": "transition"},
+    "Fe": {"name": "鐵", "symbol": "Fe", "number": 26, "period": 4, "group": 8, "category": "transition"},
+    "Co": {"name": "鈷", "symbol": "Co", "number": 27, "period": 4, "group": 9, "category": "transition"},
+    "Ni": {"name": "鎳", "symbol": "Ni", "number": 28, "period": 4, "group": 10, "category": "transition"},
+    "Cu": {"name": "銅", "symbol": "Cu", "number": 29, "period": 4, "group": 11, "category": "transition"},
+    "Zn": {"name": "鋅", "symbol": "Zn", "number": 30, "period": 4, "group": 12, "category": "transition"},
+    "Ga": {"name": "鎵", "symbol": "Ga", "number": 31, "period": 4, "group": 13, "category": "post_transition"},
+    "Ge": {"name": "鍺", "symbol": "Ge", "number": 32, "period": 4, "group": 14, "category": "metalloid"},
+    "As": {"name": "砷", "symbol": "As", "number": 33, "period": 4, "group": 15, "category": "metalloid"},
+    "Se": {"name": "硒", "symbol": "Se", "number": 34, "period": 4, "group": 16, "category": "nonmetal"},
+    "Br": {"name": "溴", "symbol": "Br", "number": 35, "period": 4, "group": 17, "category": "halogen"},
+    "Kr": {"name": "氪", "symbol": "Kr", "number": 36, "period": 4, "group": 18, "category": "noble_gas"},
+    "Rb": {"name": "銣", "symbol": "Rb", "number": 37, "period": 5, "group": 1, "category": "alkali_metal"},
+    "Sr": {"name": "鍶", "symbol": "Sr", "number": 38, "period": 5, "group": 2, "category": "alkaline_earth"},
+    "Y": {"name": "釔", "symbol": "Y", "number": 39, "period": 5, "group": 3, "category": "transition"},
+    "Zr": {"name": "鋯", "symbol": "Zr", "number": 40, "period": 5, "group": 4, "category": "transition"},
+    "Nb": {"name": "鈮", "symbol": "Nb", "number": 41, "period": 5, "group": 5, "category": "transition"},
+    "Mo": {"name": "鉬", "symbol": "Mo", "number": 42, "period": 5, "group": 6, "category": "transition"},
+    "Tc": {"name": "鎝", "symbol": "Tc", "number": 43, "period": 5, "group": 7, "category": "transition"},
+    "Ru": {"name": "釕", "symbol": "Ru", "number": 44, "period": 5, "group": 8, "category": "transition"},
+    "Rh": {"name": "銠", "symbol": "Rh", "number": 45, "period": 5, "group": 9, "category": "transition"},
+    "Pd": {"name": "鈀", "symbol": "Pd", "number": 46, "period": 5, "group": 10, "category": "transition"},
+    "Ag": {"name": "銀", "symbol": "Ag", "number": 47, "period": 5, "group": 11, "category": "transition"},
+    "Cd": {"name": "鎘", "symbol": "Cd", "number": 48, "period": 5, "group": 12, "category": "transition"},
+    "In": {"name": "銦", "symbol": "In", "number": 49, "period": 5, "group": 13, "category": "post_transition"},
+    "Sn": {"name": "錫", "symbol": "Sn", "number": 50, "period": 5, "group": 14, "category": "post_transition"},
+    "Sb": {"name": "銻", "symbol": "Sb", "number": 51, "period": 5, "group": 15, "category": "metalloid"},
+    "Te": {"name": "碲", "symbol": "Te", "number": 52, "period": 5, "group": 16, "category": "metalloid"},
+    "I": {"name": "碘", "symbol": "I", "number": 53, "period": 5, "group": 17, "category": "halogen"},
+    "Xe": {"name": "氙", "symbol": "Xe", "number": 54, "period": 5, "group": 18, "category": "noble_gas"},
+    "Cs": {"name": "銫", "symbol": "Cs", "number": 55, "period": 6, "group": 1, "category": "alkali_metal"},
+    "Ba": {"name": "鋇", "symbol": "Ba", "number": 56, "period": 6, "group": 2, "category": "alkaline_earth"},
+    "La": {"name": "鑭", "symbol": "La", "number": 57, "period": 6, "group": 3, "category": "lanthanide"},
+    "Hf": {"name": "鉿", "symbol": "Hf", "number": 72, "period": 6, "group": 4, "category": "transition"},
+    "Ta": {"name": "鉭", "symbol": "Ta", "number": 73, "period": 6, "group": 5, "category": "transition"},
+    "W": {"name": "鎢", "symbol": "W", "number": 74, "period": 6, "group": 6, "category": "transition"},
+    "Re": {"name": "錸", "symbol": "Re", "number": 75, "period": 6, "group": 7, "category": "transition"},
+    "Os": {"name": "鋨", "symbol": "Os", "number": 76, "period": 6, "group": 8, "category": "transition"},
+    "Ir": {"name": "銥", "symbol": "Ir", "number": 77, "period": 6, "group": 9, "category": "transition"},
+    "Pt": {"name": "鉑", "symbol": "Pt", "number": 78, "period": 6, "group": 10, "category": "transition"},
+    "Au": {"name": "金", "symbol": "Au", "number": 79, "period": 6, "group": 11, "category": "transition"},
+    "Hg": {"name": "汞", "symbol": "Hg", "number": 80, "period": 6, "group": 12, "category": "transition"},
+    "Tl": {"name": "鉈", "symbol": "Tl", "number": 81, "period": 6, "group": 13, "category": "post_transition"},
+    "Pb": {"name": "鉛", "symbol": "Pb", "number": 82, "period": 6, "group": 14, "category": "post_transition"},
+    "Bi": {"name": "鉍", "symbol": "Bi", "number": 83, "period": 6, "group": 15, "category": "post_transition"},
+    "Po": {"name": "釙", "symbol": "Po", "number": 84, "period": 6, "group": 16, "category": "post_transition"},
+    "At": {"name": "砈", "symbol": "At", "number": 85, "period": 6, "group": 17, "category": "halogen"},
+    "Rn": {"name": "氡", "symbol": "Rn", "number": 86, "period": 6, "group": 18, "category": "noble_gas"},
+    "Fr": {"name": "鍅", "symbol": "Fr", "number": 87, "period": 7, "group": 1, "category": "alkali_metal"},
+    "Ra": {"name": "鐳", "symbol": "Ra", "number": 88, "period": 7, "group": 2, "category": "alkaline_earth"},
+    "Ac": {"name": "錒", "symbol": "Ac", "number": 89, "period": 7, "group": 3, "category": "actinide"},
+    "Rf": {"name": "鑪", "symbol": "Rf", "number": 104, "period": 7, "group": 4, "category": "transition"},
+    "Db": {"name": "𨧀", "symbol": "Db", "number": 105, "period": 7, "group": 5, "category": "transition"},
+    "Sg": {"name": "𨭎", "symbol": "Sg", "number": 106, "period": 7, "group": 6, "category": "transition"},
+    "Bh": {"name": "𨨏", "symbol": "Bh", "number": 107, "period": 7, "group": 7, "category": "transition"},
+    "Hs": {"name": "𨭆", "symbol": "Hs", "number": 108, "period": 7, "group": 8, "category": "transition"},
+    "Mt": {"name": "䥑", "symbol": "Mt", "number": 109, "period": 7, "group": 9, "category": "transition"},
+    "Ds": {"name": "𨭌", "symbol": "Ds", "number": 110, "period": 7, "group": 10, "category": "transition"},
+    "Rg": {"name": "錀", "symbol": "Rg", "number": 111, "period": 7, "group": 11, "category": "transition"},
+    "Cn": {"name": "鎶", "symbol": "Cn", "number": 112, "period": 7, "group": 12, "category": "transition"},
+    "Nh": {"name": "鉨", "symbol": "Nh", "number": 113, "period": 7, "group": 13, "category": "post_transition"},
+    "Fl": {"name": "鈇", "symbol": "Fl", "number": 114, "period": 7, "group": 14, "category": "post_transition"},
+    "Mc": {"name": "鏌", "symbol": "Mc", "number": 115, "period": 7, "group": 15, "category": "post_transition"},
+    "Lv": {"name": "鉝", "symbol": "Lv", "number": 116, "period": 7, "group": 16, "category": "post_transition"},
+    "Ts": {"name": "鿬", "symbol": "Ts", "number": 117, "period": 7, "group": 17, "category": "halogen"},
+    "Og": {"name": "鿫", "symbol": "Og", "number": 118, "period": 7, "group": 18, "category": "noble_gas"},
+}
+
+# 顏色配置
+CATEGORY_COLORS = {
+    "alkali_metal": "#FF6B6B", "alkaline_earth": "#FFA726", "transition": "#42A5F5",
+    "post_transition": "#66BB6A", "metalloid": "#AB47BC", "nonmetal": "#FFCA28",
+    "halogen": "#26C6DA", "noble_gas": "#EC407A", "lanthanide": "#8D6E63", "actinide": "#78909C",
+}
+
+# --- 核心函式 ---
+def get_element_image(symbol):
+    """獲取元素圖片"""
+    image_url = f"https://www.webelements.com/_media/elements/element_pictures/{symbol}.jpg"
+    try:
+        response = requests.head(image_url, timeout=5)
+        response.raise_for_status()
+        return image_url
+    except requests.exceptions.RequestException as e:
+        print(f"獲取圖片時發生錯誤: {e}")
+        # 維持使用者指定的版本
+        return "https://dummyimage.com/400x400/2c3e50/ecf0f1.png&text=image+not+found"
+
+def get_element_trivia(element_name):
+    """使用 Gemini API 生成元素冷知識"""
+    if not client:
+        return "錯誤：Google API 金鑰未設定或無效，無法生成 AI 資訊。"
+    
+    try:
+        prompt = (
+            f"請你扮演一位化學知識淵博的科學家，用生動有趣的方式介紹化學元素「{element_name}」。"
+            "請包含以下幾點，並用繁體中文回答：\n"
+            "1. **一個最驚人的冷知識**：提供一個最讓人意想不到的有趣事實。\n"
+            "2. **發現與命名**：簡述這個元素的發現歷史或命名由來。\n"
+            "3. **生活中的應用**：舉出 2-3 個它在日常生活、科技或工業上的重要應用。\n"
+            "4. **對人體的影響**：說明它對人體是必需、有毒、還是無關。\n"
+            "請讓內容兼具知識性與趣味性，排版清晰易讀，適合一般大眾閱讀。"
+        )
+        
+        # 維持使用者指定的版本
+        response = client.models.generate_content(
+            model="gemini-2.0-flash-lite", 
+            contents=prompt
+        )
+        
+        return response.text
+    except Exception as e:
+        print(f"呼叫 Gemini API 時發生錯誤: {e}")
+        return f"無法生成關於「{element_name}」的資訊，請檢查您的 API 金鑰設定或稍後再試。"
+
+def create_periodic_table_html():
+    """創建互動式元素週期表 HTML"""
+    
+    table_layout = [
+        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2],
+        [3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 6, 7, 8, 9, 10],
+        [11, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 13, 14, 15, 16, 17, 18],
+        [19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36],
+        [37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54],
+        [55, 56, 57, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86],
+        [87, 88, 89, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118],
+    ]
+    
+    number_to_element = {data["number"]: symbol for symbol, data in ELEMENTS_DATA.items()}
+    
+    html = """
+    <style>
+        .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; padding: 10px; border-radius: 15px; }
+        .element-cell { aspect-ratio: 1; border: 1px solid #FFFFFF44; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; font-family: 'Arial', sans-serif; font-weight: bold; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); position: relative; overflow: hidden; }
+        .element-cell:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0,0,0,0.4); z-index: 10; }
+        .element-cell.selected { border: 2px solid #FFD700; box-shadow: 0 0 20px rgba(255,215,0,0.8); }
+        .element-symbol { font-size: 1.2vw; font-weight: bold; margin-bottom: 2px; }
+        .element-number { font-size: 0.7vw; position: absolute; top: 4px; left: 4px; }
+        .element-name { font-size: 0.7vw; margin-top: 2px; }
+        .empty-cell { background: transparent; border: none; cursor: default; }
+        .empty-cell:hover { transform: none; box-shadow: none; }
+        .legend { margin-top: 20px; padding: 15px; background: rgba(0,0,0,0.2); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
+        .legend-item { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 5px; color: white; }
+        .legend-color { width: 20px; height: 20px; border-radius: 3px; border: 1px solid #FFF; }
+        .title { text-align: center; color: white; font-size: 28px; font-weight: bold; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
+        @media (max-width: 1200px) { .element-symbol { font-size: 1.5vw; } .element-number, .element-name { font-size: 1vw; } }
+        @media (max-width: 768px) { .element-symbol { font-size: 2vw; } .element-number, .element-name { font-size: 1.5vw; } }
+    </style>
+    <!-- <div class="title">🧪 元素週期表 🧪</div> -->
+    <div class="periodic-table" id="periodic-table-container">
+    """
+    
+    for row in table_layout:
+        for atomic_number in row:
+            if atomic_number == 0:
+                html += '<div class="element-cell empty-cell"></div>'
+            else:
+                element_symbol = number_to_element.get(atomic_number, "")
+                if element_symbol and element_symbol in ELEMENTS_DATA:
+                    element_data = ELEMENTS_DATA[element_symbol]
+                    color = CATEGORY_COLORS.get(element_data["category"], "#888888")
+                    html += f'''
+                    <div class="element-cell" 
+                         style="background-color: {color};"
+                         data-symbol="{element_symbol}">
+                        <div class="element-number">{atomic_number}</div>
+                        <div class="element-symbol">{element_symbol}</div>
+                        <div class="element-name">{element_data['name']}</div>
+                    </div>
+                    '''
+                else:
+                    html += '<div class="element-cell empty-cell"></div>'
+    
+    html += "</div><div class='legend'>"
+    for category, color in CATEGORY_COLORS.items():
+        html += f"""
+        <div class="legend-item">
+            <div class="legend-color" style="background-color: {color};"></div>
+            <span>{get_category_chinese(category)}</span>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+def get_category_chinese(category):
+    """將英文類別轉換為中文"""
+    category_map = {
+        "alkali_metal": "鹼金屬", "alkaline_earth": "鹼土金屬", "transition": "過渡金屬",
+        "post_transition": "後過渡金屬", "metalloid": "類金屬", "nonmetal": "非金屬",
+        "halogen": "鹵素", "noble_gas": "惰性氣體", "lanthanide": "鑭系元素", "actinide": "錒系元素",
+    }
+    return category_map.get(category, "未知")
+
+# --- 建立 Gradio 介面 ---
+def create_interface():
+    """創建主要的 Gradio 介面"""
+
+    DEVELOPER_NAME = "陳咨米、阮喆楷、黃聖紘、李依庭"
+
+    app_description = f"""
+    # 🧪 AI 元素週期表冷知識探索器 🧪
+    <p style="font-size: 1.2rem; font-weight: bold; margin-top: 20px;margin-bottom: 20px !important;">Designed by: {DEVELOPER_NAME}</p>
+    歡迎使用元素週期表冷知識探索器！點擊下方的互動式週期表中任何一個元素，即可查看其照片與 AI 生成的詳細介紹。
+    """
+    
+    js_code = """
+    function gradio_init() {
+        const observer = new MutationObserver((mutations, obs) => {
+            const table = document.getElementById('periodic-table-container');
+            if (table) {
+                console.log("Periodic table found, attaching event listener.");
+                let selectedElementDiv = null;
+
+                table.addEventListener('click', function(event) {
+                    const targetCell = event.target.closest('.element-cell');
+                    
+                    if (targetCell && !targetCell.classList.contains('empty-cell')) {
+                        const symbol = targetCell.dataset.symbol;
+                        console.log(`Element clicked: ${symbol}`);
+
+                        if (selectedElementDiv) {
+                            selectedElementDiv.classList.remove('selected');
+                        }
+                        targetCell.classList.add('selected');
+                        selectedElementDiv = targetCell;
+
+                        const hidden_input_component = document.getElementById('hidden_trigger_for_js');
+                        if (hidden_input_component) {
+                            const textarea = hidden_input_component.querySelector('textarea');
+                            if (textarea) {
+                                textarea.value = symbol;
+                                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+                            }
+                        }
+                    }
+                });
+                obs.disconnect(); 
+            }
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+    """
+    
+    with gr.Blocks(
+        theme=gr.themes.Soft(primary_hue="purple", secondary_hue="blue", neutral_hue="gray"),
+        css=".gradio-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); font-family: 'Arial', sans-serif; }",
+        js=js_code
+    ) as app:
+        
+        gr.Markdown(app_description)
+        
+        with gr.Row():
+            periodic_table = gr.HTML(value=create_periodic_table_html())
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                with gr.Group():
+                    element_image = gr.Image(
+                        label="元素照片", height=400, show_label=True,
+                        value="https://dummyimage.com/400x400/2c3e50/ecf0f1.png&text=click+to+explore+!"
+                    )
+                    element_info_html = gr.HTML(
+                        value="<div style='padding: 10px; text-align: center;'>請選擇一個元素</div>",
+                        label="📊 元素基本資訊"
+                    )
+                    
+            with gr.Column(scale=1):
+                element_trivia = gr.Textbox(
+                    label="🧠 元素冷知識 (AI 生成)", lines=20,
+                    interactive=False, placeholder="選擇一個元素來查看詳細資訊..."
+                )
+
+        # 建立一個隱藏的 Textbox，作為 JS 和 Python 之間的橋樑
+        hidden_trigger = gr.Textbox(visible=False, elem_id="hidden_trigger_for_js")
+        
+        # 定義處理元素選擇的核心函數
+        def process_element_selection(symbol):
+            if not symbol or symbol not in ELEMENTS_DATA:
+                return (
+                    # 維持使用者指定的版本
+                    "https://dummyimage.com/400x400/2c3e50/ecf0f1.png&text=invalid+choice",
+                    "<div style='padding: 10px; text-align: center;'>請選擇一個有效的元素</div>",
+                    "請從左側週期表中選擇一個有效的元素。"
+                )
+            
+            element_data = ELEMENTS_DATA[symbol]
+            name = element_data["name"]
+            print(f"正在處理元素: {name} ({symbol})")
+            
+            # 生成基本資訊 HTML
+            info_html = f"""
+            <div style='padding:10px'>
+                <h3 style='color: #007bff; margin-top: 0; margin-bottom: 15px; text-align:center;'>
+                    {name} ({symbol})
+                </h3>
+                <div style='display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 14px;'>
+                    <div><strong>原子序：</strong>{element_data['number']}</div>
+                    <div><strong>週期：</strong>{element_data['period']}</div>
+                    <div><strong>族：</strong>{element_data['group']}</div>
+                    <div><strong>類型：</strong>{get_category_chinese(element_data['category'])}</div>
+                </div>
+            </div>
+            """
+            
+            image_url = get_element_image(symbol)
+            trivia_text = get_element_trivia(name)
+            
+            return image_url, info_html, trivia_text
+
+        # 綁定事件：當隱藏的 Textbox 值改變時，觸發核心處理函數
+        hidden_trigger.change(
+            fn=process_element_selection,
+            inputs=hidden_trigger,
+            outputs=[element_image, element_info_html, element_trivia]
+        )
+        
+        # 快速範例
+        gr.Examples(
+            examples=["H", "C", "O", "Cs", "Ca"],
+            inputs=hidden_trigger,
+            outputs=[element_image, element_info_html, element_trivia],
+            fn=process_element_selection,
+            cache_examples=False,
+            label="快速範例"
+        )
+        
+        # 透過 app.load 觸發 JS 初始化函式
+        app.load(fn=None, js="gradio_init")
+    
+    return app
+
+# 創建並啟動應用程式
+app = create_interface()
+print("🚀 啟動元素週期表探索器...")
+app.launch(debug=False, share=True, show_error=True, show_api=False)