adjust layout

app.py

@@ -80,19 +80,19 @@ class App:
         self.curr_kana_image = gr.State(self.default_kana_image)
 
     def init_practice_tab(self):
-        self.sketchpad = gr.Sketchpad(
-            self.default_kana_image,
-            type="numpy",
-            image_mode="RGB",
-            brush=gr.Brush(self.brush_size, self.brush_color),
-            eraser=False,
-            layers=False,
-            label="🖊️ 寫字板",
-        )
+        with gr.Group():
+            self.sketchpad = gr.Sketchpad(
+                self.default_kana_image,
+                type="numpy",
+                image_mode="RGB",
+                brush=gr.Brush(self.brush_size, self.brush_color),
+                eraser=False,
+                layers=False,
+                label="🖊️ 寫字板",
+            )
 
-        with gr.Row():
             self.target_txt = gr.Textbox(self.default_roma, label="🎯 練習目標")
-            self.result_txt = gr.Textbox(label="💯 辨識結果")
+            self.result_txt = gr.TextArea(lines=2, label="💯 辨識結果")
 
         with gr.Row():
             self.next_btn = gr.Button("👉 下一個字")
@@ -211,7 +211,7 @@ class App:
         image[image != 255] = 0
         _, results = self.recognizer.recognize(image)
 
-        return f"正解：{curr_kana} - 辨識：" + ", ".join(
+        return f"正解：{curr_kana}\n辨識：" + ", ".join(
             f"{result.char} ({self.conv_kana_to_roma(result.char)}): {result.prob:.2%}"
             for items in results
             for result in items