Update app.py

app.py

@@ -3,8 +3,6 @@ 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:
@@ -29,9 +27,8 @@ def process_sentence(mode, word, source, num, use_ai, model_name):
     except Exception as e:
         return f"<p style='color:red;'>❌ 發生錯誤：{str(e)}</p>", f"錯誤：{str(e)}"
 
-
 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; }
+    #card-group { 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:
@@ -57,7 +54,7 @@ with gr.Blocks(css="""
                 interactive=True
             )
 
-        with gr.Box(elem_classes=["card"]):
+        with gr.Group(elem_id="card-group"):
             word_input = gr.Textbox(label="輸入單字", visible=True)
             num_input = gr.Number(label="抽取單字數量", value=5, visible=False)
             source_dropdown = gr.Dropdown(
@@ -66,7 +63,7 @@ with gr.Blocks(css="""
                 label="選擇單字庫"
             )
 
-        with gr.Box(elem_classes=["card"]):
+        with gr.Group(elem_id="card-group"):
             use_ai_checkbox = gr.Checkbox(label="使用 AI 生成句子", elem_id="use-ai-checkbox")
             model_dropdown = gr.Dropdown(
                 choices=MODEL_LIST,
@@ -81,7 +78,6 @@ with gr.Blocks(css="""
         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)
@@ -94,11 +90,8 @@ with gr.Blocks(css="""
         outputs=[word_input, num_input]
     )
 
-    # 勾選 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');
@@ -124,4 +117,4 @@ with gr.Blocks(css="""
         outputs=[result_output, status_output]
     )
 
-demo.launch()
+demo.launch()