Update app.py

app.py

@@ -1,18 +1,17 @@
 import gradio as gr
-from vocab import get_sources, get_words_from_source, get_word_info
+import random
+from vocab import get_sources, get_words_from_source
 from sentences import generate_sentences
 from ai_sentence import MODEL_LIST
+import random
 
 
-# 核心：處理單字模式 & 句子生成方式
 def process_sentence(mode, word, source, num, use_ai, model_name):
     try:
-        # 1️⃣ 根據模式獲取單字列表
         if mode == 'query':
             if not word:
                 return "<p style='color:red;'>❌ 請輸入單字</p>", "未輸入單字"
             words = [word.strip()]
-
         elif mode == 'random':
             num = int(num)
             if num <= 0:
@@ -20,11 +19,9 @@ def process_sentence(mode, word, source, num, use_ai, model_name):
             words_data = get_words_from_source(source)
             words = [w['word'] for w in words_data]
             words = random.sample(words, num)
-
         else:
             return "<p style='color:red;'>❌ 模式錯誤</p>", "模式選擇異常"
 
-        # 2️⃣ 呼叫 sentences.py 核心處理句子的函數
         result_display, status_log = generate_sentences(words, source, use_ai, model_name)
 
         return result_display, status_log
@@ -33,13 +30,14 @@ def process_sentence(mode, word, source, num, use_ai, model_name):
         return f"<p style='color:red;'>❌ 發生錯誤：{str(e)}</p>", f"錯誤：{str(e)}"
 
 
-# Gradio UI
-with gr.Blocks() as demo:
+with gr.Blocks(css="""
+    .card { padding: 15px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 15px; }
+    .gradio-container { max-width: 800px; margin: auto; }
+    #generate-button.ai-active { background-color: #ff9800 !important; color: white !important; }
+""") as demo:
     gr.Markdown(
         """
         # 📖 VocabLine 單字例句工具
-
-        ## 📝 簡介
         支援單字例句查詢，AI 自動生成句子。適合作為 LINE 單字推播、英文學習輔助工具。
 
         ## 👨‍💻 開發者資訊
@@ -49,41 +47,41 @@ with gr.Blocks() as demo:
         """
     )
 
-    # 模式選擇
-    mode_radio = gr.Radio(
-        ["query", "random"],
-        label="選擇模式",
-        choices=["query", "random"],
-        value="query",
-        interactive=True
-    )
-
-    # 查詢模式區塊
-    word_input = gr.Textbox(label="輸入單字", visible=True)
-    num_input = gr.Number(label="抽取單字數量", value=5, visible=False)
-
-    # 單字庫選擇
-    source_dropdown = gr.Dropdown(
-        choices=get_sources(),
-        value="common3000",
-        label="選擇單字庫"
-    )
-
-    # AI 控制區塊
-    use_ai_checkbox = gr.Checkbox(label="使用 AI 生成句子")
-    model_dropdown = gr.Dropdown(
-        choices=MODEL_LIST,
-        value=MODEL_LIST[0],
-        label="選擇 AI 模型",
-        visible=False
-    )
-
-    # 按鈕 & 結果顯示
-    submit_btn = gr.Button("生成句子")
-    result_output = gr.HTML(label="結果")
-    status_output = gr.Textbox(label="處理狀態", interactive=False)
-
-    # 模式切換時，顯示不同輸入框
+    with gr.Group():
+        with gr.Row():
+            mode_radio = gr.Radio(
+                ["query", "random"],
+                label="選擇模式",
+                choices=["query", "random"],
+                value="query",
+                interactive=True
+            )
+
+        with gr.Box(elem_classes=["card"]):
+            word_input = gr.Textbox(label="輸入單字", visible=True)
+            num_input = gr.Number(label="抽取單字數量", value=5, visible=False)
+            source_dropdown = gr.Dropdown(
+                choices=get_sources(),
+                value="common3000",
+                label="選擇單字庫"
+            )
+
+        with gr.Box(elem_classes=["card"]):
+            use_ai_checkbox = gr.Checkbox(label="使用 AI 生成句子", elem_id="use-ai-checkbox")
+            model_dropdown = gr.Dropdown(
+                choices=MODEL_LIST,
+                value=MODEL_LIST[0],
+                label="選擇 AI 模型",
+                visible=False
+            )
+
+        generate_button = gr.Button("✨ 生成句子", elem_id="generate-button")
+        gr.Markdown("⚠️ 若使用 AI 生成句子，生成過程可能需要 30 秒以上，請耐心等待。")
+
+        result_output = gr.HTML(label="結果")
+        status_output = gr.Textbox(label="處理狀態", interactive=False)
+
+    # 模式切換
     def switch_mode(mode):
         if mode == 'query':
             return gr.update(visible=True), gr.update(visible=False)
@@ -96,15 +94,31 @@ with gr.Blocks() as demo:
         outputs=[word_input, num_input]
     )
 
-    # 勾選 AI 時，顯示模型選擇
+    # 勾選 AI → 模型選擇顯示 + 按鈕變色
+    def toggle_ai_button(use_ai):
+        # 控制模型選單顯示
+        model_visibility = gr.update(visible=use_ai)
+        # 自定義 JS 變色
+        js_toggle_class = f"""
+        function toggleButtonClass() {{
+            const btn = document.getElementById('generate-button');
+            if ({'true' if use_ai else 'false'}) {{
+                btn.classList.add('ai-active');
+            }} else {{
+                btn.classList.remove('ai-active');
+            }}
+        }}
+        toggleButtonClass();
+        """
+        return model_visibility, gr.update(_js=js_toggle_class)
+
     use_ai_checkbox.change(
-        lambda x: gr.update(visible=x),
+        toggle_ai_button,
         inputs=[use_ai_checkbox],
-        outputs=[model_dropdown]
+        outputs=[model_dropdown, generate_button]
     )
 
-    # 按鈕綁定處理函數
-    submit_btn.click(
+    generate_button.click(
         process_sentence,
         inputs=[mode_radio, word_input, source_dropdown, num_input, use_ai_checkbox, model_dropdown],
         outputs=[result_output, status_output]