layout update

app.py

@@ -36,7 +36,7 @@ def get_pipeline(model_name):
 @spaces.GPU
 def suggest_next(text, model_name, k, m):
     """
-    使用 Beam Search 產生 M 條最可能的下段建議，並一次更新候選列表，最後將簡體字轉為繁體字。
+    使用 Beam Search 產生 m 條候選，並一次更新候選列表，轉繁體並編號。
     """
     gen_pipe = get_pipeline(model_name)
     outs = gen_pipe(
@@ -47,77 +47,77 @@ def suggest_next(text, model_name, k, m):
         do_sample=False,
         early_stopping=True
     )
-    # 提取並清理生成內容
+    # 提取、過濾並轉繁體
     suggestions = [out["generated_text"][len(text):].strip() for out in outs]
     suggestions = [s for s in suggestions if s]
-    # 簡體轉繁體
     suggestions = [cc.convert(s) for s in suggestions]
+    # 編號候選
+    numbered = [f"{i+1}. {s}" for i, s in enumerate(suggestions)]
+    return update(choices=numbered, value=None)
 
-    return update(choices=suggestions, value=None)
 
 def append_suggestion(current, choice):
     if choice is None:
         return current
-    # 模擬輸入法候選選中
-    return current + choice
-
-def suggest_on_change(text, model_name, k, m, auto_flag):
-    """
-    當輸入框內容改變時，如果自動預測開啟，則觸發建議生成；否則清空候選。
-    """
-    if auto_flag:
-        return suggest_next(text, model_name, k, m)
-    return update(choices=[], value=None)
+    text = choice.split(". ", 1)[1] if ". " in choice else choice
+    return current + text
 
 # 自訂 CSS：模擬經典中文輸入法候選欄樣式
 custom_css = """
+#suggestions-bar {
+    margin-bottom: 8px;
+}
 #suggestions-bar .candidate-list {
     display: flex;
-    gap: 12px;
-    background: #ffffff;
-    border: 1px solid #ccc;
+    gap: 8px;
+    background: #fff;
+    border: 1px solid #999;
     border-radius: 4px;
-    padding: 6px;
+    padding: 4px 6px;
+    overflow-x: auto;
+    white-space: nowrap;
 }
 #suggestions-bar .candidate-list input[type=radio] {
     display: none;
 }
 #suggestions-bar .candidate-list label {
+    position: relative;
     cursor: pointer;
-    padding: 2px 6px;
-    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 14px;
 }
 #suggestions-bar .candidate-list label:hover {
-    background: #f0f0f0;
+    background: #f5f5f5;
 }
 #suggestions-bar .candidate-list input[type=radio]:checked + label {
-    background: #e0e0e0;
-    border: 1px solid #888;
+    background: #e6f7ff;
+    border: 1px solid #1890ff;
 }
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    # 標題和說明
+    # 標題與說明
     gr.Markdown(
-        "## 🇹🇼 繁體中文輸入法加速器  \n"
-        "結合小型語言模型與 ZeroGPU，即時 IME 風格候選條。"
+        "## 🇹🇼 繁體中文 IME 加速器  \
+"
+        "結合小型語言模型與 ZeroGPU，提供即時輸入法風格候選欄。"
     )
 
-    # 經典候選欄：水平排列
-    suggestions = gr.Radio(
-        [], label="", interactive=True, type="value",
-        elem_id="suggestions-bar", elem_classes="candidate-list"
-    )
-
-    # 輸入區與按鈕：單行輸入框 + 小按鈕 + 自動預測開關
+    # 候選條與輸入框並排
     with gr.Row():
+        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
+            label="", placeholder="請輸入拼音或文字…",
+            lines=1, max_lines=1, elem_id="input-box", full_width=True
         )
-        gpu_button = gr.Button("建議")
-        auto_predict = gr.Checkbox(value=True, label="自動預測 (輸入框內容變更時觸發)")
 
-    # 進階參數設定（可折疊）
+    # 預測按鈕（置於下方）
+    predict_button = gr.Button("預測", elem_id="predict-button")
+
+    # 進階參數設定（可摺疊）
     with gr.Accordion("進階設定", open=False):
         model_selector = gr.Dropdown(
             MODEL_LIST, value=MODEL_LIST[0], label="模型"
@@ -128,15 +128,18 @@ 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"
+        )
 
     # 事件綁定
-    gpu_button.click(
+    predict_button.click(
         fn=suggest_next,
         inputs=[input_text, model_selector, k_slider, m_slider],
         outputs=suggestions,
     )
     input_text.change(
-        fn=suggest_on_change,
+        fn=lambda txt, mdl, k, m, auto: suggest_next(txt, mdl, k, m) if auto else update(choices=[], value=None),
         inputs=[input_text, model_selector, k_slider, m_slider, auto_predict],
         outputs=suggestions,
     )
@@ -146,4 +149,4 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=input_text,
     )
 
-    demo.launch()
+    demo.launch()