layout improvement

app.py

@@ -1,4 +1,3 @@
-# app.py
 import spaces
 import gradio as gr
 from gradio import update
@@ -29,7 +28,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(
@@ -43,45 +42,72 @@ def suggest_next(text, model_name, k, m):
     suggestions = [out["generated_text"][len(text):].strip() for out in outs]
     suggestions = [s for s in suggestions if s]
 
-    # 重置選值並更新選項
+    # 更新候選條
     return update(choices=suggestions, value=None)
 
 def append_suggestion(current, choice):
     if choice is None:
         return current
+    # 模擬輸入法候選選中
     return current + choice
 
-with gr.Blocks() as demo:
+# 自定義 CSS：模擬經典中文輸入法候選欄樣式
+custom_css = """
+#suggestions-bar .candidate-list {
+    display: flex;
+    gap: 12px;
+    background: #ffffff;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 6px;
+}
+#suggestions-bar .candidate-list input[type=radio] {
+    display: none;
+}
+#suggestions-bar .candidate-list label {
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: 4px;
+}
+#suggestions-bar .candidate-list label:hover {
+    background: #f0f0f0;
+}
+#suggestions-bar .candidate-list input[type=radio]:checked + label {
+    background: #e0e0e0;
+    border: 1px solid #888;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    # 標題和說明
     gr.Markdown(
         "## 🇹🇼 台灣中文輸入法加速器  \n"
-        "結合小型語言模型與 ZeroGPU，即時 IME 風格建議條。"
+        "結合小型語言模型與 ZeroGPU，即時 IME 風格候選條。"
     )
 
-    # 建議清單置頂，模仿輸入法候選欄
+    # 經典候選欄：水平排列
     suggestions = gr.Radio(
-        [], label="建議清單", interactive=True, type="value", elem_id="suggestions-bar"
+        [], label="", interactive=True, type="value",
+        elem_id="suggestions-bar", elem_classes="candidate-list"
     )
 
-    # 輸入區與生成按鈕並排：加長文字框，按鈕縮小置右側
+    # 輸入區與按鈕：單行輸入框 + 小按鈕
     with gr.Row():
-        with gr.Column(scale=5):
-            input_text = gr.TextArea(
-                label="輸入文字", lines=6,
-                placeholder="請在此輸入起始片段…"
-            )
-        with gr.Column(scale=1, min_width=80):
-            gpu_button = gr.Button("使用 GPU 生成建議")
+        input_text = gr.Textbox(
+            label="", placeholder="請輸入拼音或文字…", lines=1, max_lines=1
+        )
+        gpu_button = gr.Button("建議")
 
-    # 參數設定區
-    with gr.Row():
+    # 進階參數設定（可折疊）
+    with gr.Accordion("進階設定", open=False):
         model_selector = gr.Dropdown(
-            MODEL_LIST, value=MODEL_LIST[0], label="選擇模型"
+            MODEL_LIST, value=MODEL_LIST[0], label="模型"
         )
         k_slider = gr.Slider(
-            minimum=1, maximum=50, step=1, value=1, label="K（最大新生成詞元）"
+            minimum=1, maximum=50, step=1, value=1, label="K（最大新詞元數）"
         )
         m_slider = gr.Slider(
-            minimum=1, maximum=30, step=1, value=10, label="M（建議數量 / Beam 數）"
+            minimum=1, maximum=30, step=1, value=10, label="M（建議數/Beam 數）"
         )
 
     # 事件綁定