Update app.py

app.py

@@ -192,7 +192,6 @@ def get_error_dataframe():
         main_cat, sub_cat = cat_str.split("/", 1)
         main_cat_zh = category_display_map.get(main_cat, main_cat)
         # sub_cat -> e.g. "Mistranslation", "Addition", "Omission", ...
-        # 這裡可逐一對照
         if sub_cat == "Mistranslation":
             sub_cat_zh = "誤譯"
         elif sub_cat == "Addition":
@@ -402,20 +401,15 @@ def update_index_selection(selected_display):
     )
 
 DEMO_EXPLANATION = """
-## 翻譯標記工具：兩個 Tab
-
-**操作步驟：**
-1. 在「基本設定」中，選擇要標註的檔案、標註人員，以及句子索引。
-2. 切換到「錯誤標註」標籤頁 (Tab)，若發現翻譯有錯，於該頁面中輸入「錯誤區間」並選擇類別/嚴重度等，最後點擊「保存並繼續標記當前資料」。  
-   - 若整句完全正確，可點擊「完全正確」  
-   - 若錯誤太多超過五處，可點擊「過多錯誤」  
-3. 切換到「評分與提交」標籤頁，於此頁拉動滑桿給分，若有更好的譯文可在「建議翻譯」中輸入，最後按「保存並顯示下一筆」送出本句並進入下一筆。
+## 翻譯標記工具 (無 Box 元件)
+
+此版本完全移除了 `gr.Box()`, 直接用 `gr.Group()`, `gr.Row()`, `gr.Column()` 加上簡單 CSS 來排版。
 """
 
 with gr.Blocks(css="""
-/* 整體字體與行距 */
+/* 整體字體與背景 */
 body {
-    background-color: #FAFAFA;
+    background-color: #F9F9F9;
     color: #333;
     margin: 0;
     padding: 0;
@@ -424,15 +418,16 @@ body {
     font-size: 15px;
     line-height: 1.4;
 }
-/* 按鈕分色，改用更柔和或深色系 */
+
+/* 自訂一些按鈕顏色 */
 #correct_button {
-    background-color: #2E7D32; /* 深綠 */
+    background-color: #2E7D32; /* 綠 */
     color: white;
     font-size: 14px;
     margin-bottom: 5px;
 }
 #too_many_errors_button {
-    background-color: #C62828; /* 深紅 */
+    background-color: #C62828; /* 紅 */
     color: white;
     font-size: 14px;
     margin-bottom: 5px;
@@ -449,23 +444,23 @@ body {
     font-size: 14px;
     margin-bottom: 5px;
 }
-/* 螢光標示區的外框 */
-#highlight_box_group {
+
+/* group 來替代 box 的外框效果 */
+#outer_panel {
+    border: 1px solid #ccc;
+    padding: 15px;
+    margin-bottom: 15px;
+}
+#highlight_panel {
     border: 1px solid #aaa;
     padding: 10px;
     min-height: 80px;
 }
-/* 小面板 */
-.panel {
-    border: 1px solid #ccc;
-    padding: 10px;
-    margin-bottom: 10px;
-}
 """) as demo:
     gr.Markdown(DEMO_EXPLANATION)
 
-    # ------------------- 頂部：基本設定 -------------------
-    with gr.Box():
+    # ------------------- 頂部: 基本設定 + 文字顯示 -------------------
+    with gr.Group(elem_id="outer_panel"):
         gr.Markdown("### 基本設定")
         with gr.Row():
             with gr.Column(scale=1):
@@ -489,16 +484,15 @@ body {
                     value=str(data.loc[current_index, "id"]),
                     interactive=False
                 )
-
             with gr.Column(scale=4):
                 source = gr.Textbox(label="原始文本", lines=4, interactive=False)
             with gr.Column(scale=4):
                 target = gr.Textbox(label="翻譯文本", lines=4, interactive=False)
 
-    # ------------------- 顯示螢光標示 ＆ 錯誤紀錄 -------------------
+    # ------------------- 中段: 螢光標記區 + 錯誤表格 -------------------
     with gr.Row():
         with gr.Column(scale=5):
-            with gr.Group(elem_id="highlight_box_group"):
+            with gr.Group(elem_id="highlight_panel"):
                 highlighted_target = gr.HTML(label="螢光標示區 (已標註的錯誤)")
         with gr.Column(scale=5):
             error_table = gr.Dataframe(
@@ -508,38 +502,37 @@ body {
                 interactive=False
             )
 
-    # ------------------- 分成兩個 Tab -------------------
-    with gr.Tabs():
-        # ---- Tab 1: 錯誤標註 ----
-        with gr.Tab(label="錯誤標註"):
-            gr.Markdown("#### 在此頁標註錯誤區間，或按「完全正確」「過多錯誤」")
+    # ------------------- 錯誤標註區 -------------------
+    with gr.Group(elem_id="outer_panel"):
+        gr.Markdown("### 錯誤標註")
+        with gr.Row():
             error_span = gr.Textbox(label="錯誤區間 (可複製『翻譯文本』貼上)", lines=2)
-            with gr.Row():
-                category = gr.Dropdown(
-                    label="錯誤類別",
-                    choices=list(categories_display.keys()),
-                    value="正確性"
-                )
-                subcategory = gr.Dropdown(
-                    label="子類別",
-                    choices=categories_display["正確性"],
-                    value="誤譯"
-                )
-                severity = gr.Dropdown(
-                    label="嚴重度",
-                    choices=severity_choices_display,
-                    value="輕微 (Minor)"
-                )
-                other = gr.Textbox(label="���他子類別(如選『其他』則在此填)")
+            category = gr.Dropdown(
+                label="錯誤類別",
+                choices=list(categories_display.keys()),
+                value="正確性"
+            )
+            subcategory = gr.Dropdown(
+                label="子類別",
+                choices=categories_display["正確性"],
+                value="誤譯"
+            )
+            other = gr.Textbox(label="其他子類別(如選『其他』則填寫)")
+            severity = gr.Dropdown(
+                label="嚴重度",
+                choices=severity_choices_display,
+                value="輕微 (Minor)"
+            )
 
-            with gr.Row():
-                save_current_button = gr.Button("保存並繼續標記當前資料", elem_id="save_current_button")
-                correct_button = gr.Button("✔ 完全正確", elem_id="correct_button")
-                too_many_errors_button = gr.Button("✖ 過多錯誤", elem_id="too_many_errors_button")
+        with gr.Row():
+            save_current_button = gr.Button("保存並繼續標記當前資料", elem_id="save_current_button")
+            correct_button = gr.Button("✔ 完全正確", elem_id="correct_button")
+            too_many_errors_button = gr.Button("✖ 過多錯誤", elem_id="too_many_errors_button")
 
-        # ---- Tab 2: 評分與提交 ----
-        with gr.Tab(label="評分與提交"):
-            gr.Markdown("#### 在此頁給分，若有更適合的譯文可提供建議，最後點『保存並顯示下一筆』")
+    # ------------------- 評分與提交 -------------------
+    with gr.Group(elem_id="outer_panel"):
+        gr.Markdown("### 評分與提交")
+        with gr.Row():
             alternative_translation = gr.Textbox(
                 label="建議翻譯(如有更好譯法可填)",
                 lines=2
@@ -551,9 +544,8 @@ body {
                 step=1,
                 value=66
             )
-            save_next_button = gr.Button("保存並顯示下一筆", elem_id="save_next_button")
+        save_next_button = gr.Button("保存並顯示下一筆", elem_id="save_next_button")
 
-    # ------------------- 最下方：狀態顯示 -------------------
     status = gr.Textbox(label="當前狀態", lines=1, interactive=False)
 
     # ------------------- 互動邏輯綁定 -------------------