Update app.py

app.py

@@ -192,6 +192,7 @@ 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":
@@ -292,7 +293,7 @@ def save_and_next(source, target, score, rater_selector, alternative_translation
 
     if not rater_selector:
         return (
-            source, target, "",  
+            source, target, "",  # return empty error_span
             str(data.loc[current_index, "id"]),
             "請先選擇標註人員！",
             get_error_dataframe(),
@@ -334,10 +335,10 @@ def save_and_next(source, target, score, rater_selector, alternative_translation
 
     if current_index >= len(data):
         return (
-            "已完成所有文本標記",  
-            "已完成所有文本標記",  
-            "",  
-            "",  
+            "已完成所有文本標記",  # source
+            "已完成所有文本標記",  # target
+            "",  # error_span
+            "",  # current_index_display
             f"標記完成並儲存到 {annotations_file.name}！(共 {len(data)} 筆)",
             pd.DataFrame(columns=["錯誤文字", "嚴重度", "分類"]),
             ""
@@ -401,154 +402,159 @@ def update_index_selection(selected_display):
     )
 
 DEMO_EXPLANATION = """
-## 翻譯標記工具 (無 Box 元件)
-
-此版本完全移除了 `gr.Box()`, 直接用 `gr.Group()`, `gr.Row()`, `gr.Column()` 加上簡單 CSS 來排版。
+## 翻譯標記工具：階段性操作流程
+
+### 操作步驟
+1. **先選擇標註人員與檔案**，並在「索引」下拉中挑選要標註的句子。  
+2. 在「步驟 1：錯誤標註」中，若翻譯文本有錯，請輸入「錯誤區間」、選擇「錯誤類別/子類別/嚴重度」並點「保存並繼續標記」。  
+   - 多個錯誤可重複此步驟；若無錯誤則可直接點「完全正確」。  
+3. 錯誤標完後，在「步驟 2：評分與提交」中，拉動滑桿給分，若有更好譯文，可在「建議翻譯」填入。  
+4. 按「保存並顯示下一筆」送出本句標註並進入下一句。  
 """
 
 with gr.Blocks(css="""
-/* 整體字體與背景 */
-body {
-    background-color: #F9F9F9;
-    color: #333;
-    margin: 0;
-    padding: 0;
-}
-* {
-    font-size: 15px;
-    line-height: 1.4;
-}
-
-/* 自訂一些按鈕顏色 */
-#correct_button {
-    background-color: #2E7D32; /* 綠 */
-    color: white;
-    font-size: 14px;
-    margin-bottom: 5px;
-}
-#too_many_errors_button {
-    background-color: #C62828; /* 紅 */
-    color: white;
-    font-size: 14px;
-    margin-bottom: 5px;
-}
-#save_current_button {
-    background-color: #1565C0; /* 藍 */
-    color: white;
-    font-size: 14px;
-    margin-bottom: 5px;
-}
-#save_next_button {
-    background-color: #6D4C41; /* 棕 */
-    color: white;
-    font-size: 14px;
-    margin-bottom: 5px;
-}
-
-/* group 來替代 box 的外框效果 */
-#outer_panel {
-    border: 1px solid #ccc;
-    padding: 15px;
-    margin-bottom: 15px;
-}
-#highlight_panel {
-    border: 1px solid #aaa;
-    padding: 10px;
-    min-height: 80px;
-}
+    /* 整體字體與行距 */
+    * {
+        font-size: 15px;
+        line-height: 1.4;
+    }
+    /* 按鈕分色 */
+    #correct_button {
+        background-color: #4CAF50; /* 綠 */
+        color: white;
+        font-size: 14px;
+        margin-bottom: 5px;
+    }
+    #too_many_errors_button {
+        background-color: #f44336; /* 紅 */
+        color: white;
+        font-size: 14px;
+        margin-bottom: 5px;
+    }
+    #save_current_button {
+        background-color: #1565C0; /* 藍 */
+        color: white;
+        font-size: 14px;
+        margin-bottom: 5px;
+    }
+    #save_next_button {
+        background-color: #1565C0; /* 藍 */
+        color: white;
+        font-size: 14px;
+        margin-bottom: 5px;
+    }
+    /* 模擬帶框風格 */
+    #highlight_box_group {
+        border: 1px solid #aaa;
+        padding: 10px;
+        margin-bottom: 10px;
+        min-height: 80px;
+    }
+    /* 讓「步驟區塊」顯示類似面板效果 */
+    #step1_box, #step2_box {
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin-bottom: 10px;
+    }
 """) as demo:
     gr.Markdown(DEMO_EXPLANATION)
 
-    # ------------------- 頂部: 基本設定 + 文字顯示 -------------------
-    with gr.Group(elem_id="outer_panel"):
-        gr.Markdown("### 基本設定")
-        with gr.Row():
-            with gr.Column(scale=1):
-                rater_selector = gr.Dropdown(
-                    label="標註人員",
-                    choices=["rater1", "rater2", "rater3", "rater4", "rater5", "rater6", "rater7"],
-                    value="rater1"
-                )
-                file_selector = gr.Dropdown(
-                    label="選擇檔案",
-                    choices=csv_files,
-                    value="test.csv"
-                )
-                index_selector = gr.Dropdown(
-                    label="選擇索引 (id-原文前10字)",
-                    choices=get_all_ids(),
-                    value=f"{data.loc[current_index, 'id']}-{str(data.loc[current_index, 'source'])[:10]}"
-                )
-                current_index_display = gr.Textbox(
-                    label="當前索引(id)",
-                    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_panel"):
-                highlighted_target = gr.HTML(label="螢光標示區 (已標註的錯誤)")
-        with gr.Column(scale=5):
-            error_table = gr.Dataframe(
-                headers=["錯誤文字", "嚴重度", "分類"],
-                label="當前句子錯誤紀錄 (中文顯示)",
-                datatype=["str", "str", "str"],
-                interactive=False
+        with gr.Column(scale=1):
+            rater_selector = gr.Dropdown(
+                label="標註人員",
+                choices=["rater_test", "rater1", "rater2", "rater3", "rater4", "rater5", "rater6", "rater7"],
+                value="rater_test"
             )
-
-    # ------------------- 錯誤標註區 -------------------
-    with gr.Group(elem_id="outer_panel"):
-        gr.Markdown("### 錯誤標註")
-        with gr.Row():
-            error_span = gr.Textbox(label="錯誤區間 (可複製『翻譯文本』貼上)", lines=2)
-            category = gr.Dropdown(
-                label="錯誤類別",
-                choices=list(categories_display.keys()),
-                value="正確性"
+            file_selector = gr.Dropdown(
+                label="選擇檔案",
+                choices=csv_files,
+                value="test.csv"
             )
-            subcategory = gr.Dropdown(
-                label="子類別",
-                choices=categories_display["正確性"],
-                value="誤譯"
+            index_selector = gr.Dropdown(
+                label="選擇索引 (id-原文前10字)",
+                choices=get_all_ids(),
+                value=f"{data.loc[current_index, 'id']}-{str(data.loc[current_index, 'source'])[:10]}"
             )
-            other = gr.Textbox(label="其他子類別(如選『其他』則填寫)")
-            severity = gr.Dropdown(
-                label="嚴重度",
-                choices=severity_choices_display,
-                value="輕微 (Minor)"
+            current_index_display = gr.Textbox(
+                label="當前索引(id)",
+                value=str(data.loc[current_index, "id"]),
+                interactive=False
             )
 
-        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.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.Group(elem_id="outer_panel"):
-        gr.Markdown("### 評分與提交")
+    with gr.Tab("錯誤標註"):
+        # ------------------- 螢光標記區（用 Group + elem_id）＆錯誤紀錄表 -------------------
         with gr.Row():
-            alternative_translation = gr.Textbox(
-                label="建議翻譯(如有更好譯法可填)",
-                lines=2
-            )
-            score = gr.Slider(
-                label="翻譯評分 (0=最差, 100=最好)",
-                minimum=0,
-                maximum=100,
-                step=1,
-                value=66
-            )
-        save_next_button = gr.Button("保存並顯示下一筆", elem_id="save_next_button")
+            with gr.Column(scale=5):
+                with gr.Group(elem_id="highlight_box_group"):
+                    highlighted_target = gr.HTML(value="", label="螢光標示區 (已標註的錯誤)")
+            with gr.Column(scale=5):
+                error_table = gr.Dataframe(
+                    headers=["錯誤文字", "嚴重度", "分類"],
+                    label="當前句子錯誤紀錄 (中文顯示)",
+                    datatype=["str", "str", "str"],
+                    interactive=False
+                )
+    
+        # ------------------- 步驟1：錯誤標註 -------------------
+        # with gr.Group(elem_id="step1_box"):
+        with gr.Row():
+            gr.Markdown("### 步驟 1：錯誤標註")
+    
+            with gr.Row():
+                error_span = gr.Textbox(label="錯誤區間 (可複製『翻譯文本』貼上)", lines=2)
+                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():
+                correct_button = gr.Button("✔ 完全正確", elem_id="correct_button")
+                too_many_errors_button = gr.Button("✖ 過多錯誤", elem_id="too_many_errors_button")
+                save_current_button = gr.Button("保存並繼續標記當前資料")
+    
+    with gr.Tab("評分與提交")
+        # ------------------- 步驟2：評分與提交 -------------------
+        # with gr.Group(elem_id="step2_box"):
+        with gr.Row():
+            gr.Markdown("### 步驟 2：評分與提交")
+            with gr.Row():
+                alternative_translation = gr.Textbox(
+                    label="建議翻譯(如有更好譯法可填)",
+                    lines=2
+                )
+                score = gr.Slider(
+                    label="翻譯評分 (0=最差, 100=最好)",
+                    minimum=0,
+                    maximum=100,
+                    step=1,
+                    value=66
+                )
+            save_next_button = gr.Button("保存並顯示下一筆")
 
+    # ------------------- 當前狀態 -------------------  
     status = gr.Textbox(label="當前狀態", lines=1, interactive=False)
 
-    # ------------------- 互動邏輯綁定 -------------------
+    # ------------------- 邏輯綁定 -------------------
     def update_subcats(selected_category):
         subcats = categories_display[selected_category]
         return gr.update(choices=subcats, value=subcats[0])
@@ -585,19 +591,20 @@ body {
         outputs=[error_span, status, error_table]
     )
 
-    # 當「保存並繼續標記當前資料」
+    # 按「保存並繼續標記」 -> 在同一句上加錯誤
     save_current_button.click(
         save_current,
         inputs=[source, target, rater_selector, error_span, category, subcategory, severity, other],
         outputs=[error_span, status]
     )
+    # 再更新表格 & 高亮
     save_current_button.click(
         fn=lambda tgt: (get_error_dataframe(), highlight_errors_in_text(tgt, current_errors)),
         inputs=[target],
         outputs=[error_table, highlighted_target]
     )
 
-    # 當「保存並顯示下一筆」
+    # 按「保存並顯示下一筆」 -> 送出當前整句標註 & 進下一句
     save_next_button.click(
         save_and_next,
         inputs=[source, target, score, rater_selector, alternative_translation],
@@ -608,7 +615,7 @@ body {
         ]
     )
 
-    # 初始化
+    # 初始化介面
     init_src, init_tgt = get_current_text()
     source.value = init_src
     target.value = init_tgt