smartphone friednly layout

app.py

@@ -60,7 +60,7 @@ def append_suggestion(current, choice):
     text = choice.split(". ", 1)[1] if ". " in choice else choice
     return current + text
 
-# 自訂 CSS：模擬經典中文輸入法候選欄樣式
+# 自訂 CSS：模擬經典中文輸入法候選欄樣式，並優化手機響應與自動高度
 custom_css = """
 #suggestions-bar {
     width: 100%;
@@ -72,18 +72,14 @@ custom_css = """
     background: #fff;
     border: 1px solid #999;
     border-radius: 4px;
-    padding: 4px 6px;
+    padding: 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: 4px 8px;
-    font-size: 14px;
+    padding: 6px 10px;
+    font-size: 16px;
 }
 #suggestions-bar .candidate-list label:hover {
     background: #f5f5f5;
@@ -92,20 +88,53 @@ custom_css = """
     background: #e6f7ff;
     border: 1px solid #1890ff;
 }
-#input-box {
+#input-box textarea {
+    width: 100%;
+    font-size: 16px;
+    padding: 6px;
+    box-sizing: border-box;
+    overflow: hidden;
+    resize: none;
+}
+#predict-button {
+    margin-top: 8px;
     width: 100%;
 }
+/* 手機響應式 */
+@media only screen and (max-width: 600px) {
+    #suggestions-bar .candidate-list label {
+        padding: 8px;
+        font-size: 18px;
+    }
+    #predict-button {
+        font-size: 18px;
+    }
+}
+"""
+
+# 自動增高腳本
+auto_height_js = """
+<script>
+  window.addEventListener('load', () => {
+    const textarea = document.querySelector('#input-box textarea');
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.addEventListener('input', function() {
+      this.style.height = 'auto';
+      this.style.height = this.scrollHeight + 'px';
+    });
+  });
+</script>
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    # 標題與說明
+    gr.HTML(auto_height_js)
     gr.Markdown(
         "## 🇹🇼 繁體中文 IME 加速器  \
 "
         "結合小型語言模型與 ZeroGPU，提供即時輸入法風格候選欄。"
     )
 
-    # 垂直排列：候選欄置於上方，輸入框置於下方
     with gr.Column():
         suggestions = gr.Radio(
             [], label="", interactive=True, type="value",
@@ -113,10 +142,9 @@ with gr.Blocks(css=custom_css) as demo:
         )
         input_text = gr.Textbox(
             label="", placeholder="請輸入拼音或文字…",
-            lines=1, max_lines=1, elem_id="input-box"
+            lines=1, max_lines=20, elem_id="input-box"
         )
 
-    # 自動預測開關及預測按鈕（預測按鈕初始隱藏）
     with gr.Row():
         auto_predict = gr.Checkbox(
             value=True, label="自動預測（內容變更時觸發）", elem_id="auto-predict"
@@ -125,7 +153,6 @@ with gr.Blocks(css=custom_css) as demo:
             "預測", elem_id="predict-button", visible=False
         )
 
-    # 進階參數設定（可摺疊）
     with gr.Accordion("進階設定", open=False):
         model_selector = gr.Dropdown(
             MODEL_LIST, value=MODEL_LIST[0], label="模型"
@@ -137,7 +164,6 @@ with gr.Blocks(css=custom_css) as demo:
             minimum=1, maximum=30, step=1, value=6, label="M（建議數/Beam 數）"
         )
 
-    # 事件綁定
     auto_predict.change(
         fn=lambda auto: update(visible=not auto),
         inputs=[auto_predict],