update layout

app.py

@@ -63,6 +63,7 @@ def append_suggestion(current, choice):
 # 自訂 CSS：模擬經典中文輸入法候選欄樣式
 custom_css = """
 #suggestions-bar {
+    width: 100%;
     margin-bottom: 8px;
 }
 #suggestions-bar .candidate-list {
@@ -91,29 +92,38 @@ custom_css = """
     background: #e6f7ff;
     border: 1px solid #1890ff;
 }
+#input-box {
+    width: 100%;
+}
 """
 
 with gr.Blocks(css=custom_css) as demo:
+    # 標題與說明
     gr.Markdown(
         "## 🇹🇼 繁體中文 IME 加速器  \
 "
         "結合小型語言模型與 ZeroGPU，提供即時輸入法風格候選欄。"
     )
 
-    # 候選條（置於上方）
-    suggestions = gr.Radio(
-        [], label="", interactive=True, type="value",
-        elem_id="suggestions-bar", elem_classes="candidate-list"
-    )
-
-    # 輸入框（置於候選條下方）
-    input_text = gr.Textbox(
-        label="", placeholder="請輸入拼音或文字…",
-        lines=1, max_lines=1, elem_id="input-box"
-    )
+    # 垂直排列：候選欄置於上方，輸入框置於下方
+    with gr.Column():
+        suggestions = gr.Radio(
+            [], label="", interactive=True, type="value",
+            elem_id="suggestions-bar", elem_classes="candidate-list"
+        )
+        input_text = gr.Textbox(
+            label="", placeholder="請輸入拼音或文字…",
+            lines=1, max_lines=1, elem_id="input-box"
+        )
 
-    # 預測按鈕（置於文字框下方）
-    predict_button = gr.Button("預測", elem_id="predict-button")
+    # 自動預測開關及預測按鈕（預測按鈕初始隱藏）
+    with gr.Row():
+        auto_predict = gr.Checkbox(
+            value=True, label="自動預測（內容變更時觸發）", elem_id="auto-predict"
+        )
+        predict_button = gr.Button(
+            "預測", elem_id="predict-button", visible=False
+        )
 
     # 進階參數設定（可摺疊）
     with gr.Accordion("進階設定", open=False):
@@ -126,11 +136,13 @@ with gr.Blocks(css=custom_css) as demo:
         m_slider = gr.Slider(
             minimum=1, maximum=30, step=1, value=6, label="M（建議數/Beam 數）"
         )
-        auto_predict = gr.Checkbox(
-            value=True, label="自動預測（內容變更時觸發）", elem_id="auto-predict"
-        )
 
     # 事件綁定
+    auto_predict.change(
+        fn=lambda auto: update(visible=not auto),
+        inputs=[auto_predict],
+        outputs=[predict_button],
+    )
     predict_button.click(
         fn=suggest_next,
         inputs=[input_text, model_selector, k_slider, m_slider],