Designed by: {DEVELOPER_NAME}
歡迎使用元素週期表冷知識探索器！點擊下方的互動式週期表中任何一個元素，即可查看其照片與 AI 生成的詳細介紹。 """ js_code = """ function gradio_init() { const url = new URL(window.location); // 檢查 URL 是否已經是 dark mode if (url.searchParams.get('__theme') !== 'dark') { // 如果不是，設定參數並重新載入 url.searchParams.set('__theme', 'dark'); window.location.href = url.href; } else { // 設定事件監聽 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="