Update app.py

app.py

@@ -192,7 +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":
@@ -293,7 +293,7 @@ def save_and_next(source, target, score, rater_selector, alternative_translation
 
     if not rater_selector:
         return (
-            source, target, "",  # return empty error_span
+            source, target, "",  
             str(data.loc[current_index, "id"]),
             "請先選擇標註人員！",
             get_error_dataframe(),
@@ -335,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=["錯誤文字", "嚴重度", "分類"]),
             ""
@@ -402,53 +402,71 @@ def update_index_selection(selected_display):
     )
 
 DEMO_EXPLANATION = """
-## 翻譯標記工具：階段性操作流程
-
-### 操作步驟
-1. **先選擇標註人員與檔案**，並在「索引」下拉中挑選要標註的句子。  
-2. 在「步驟 1：錯誤標註」中，若翻譯文本有錯，請輸入「錯誤區間」、選擇「錯誤類別/子類別/嚴重度」並點「保存並繼續標記」。  
-   - 多個錯誤可重複此步驟；若無錯誤則可直接點「完全正確」。  
-3. 錯誤標完後，在「步驟 2：評分與提交」中，拉動滑桿給分，若有更好譯文，可在「建議翻譯」填入。  
-4. 按「保存並顯示下一筆」送出本句標註並進入下一句。  
+## 翻譯標記工具：兩個 Tab
+
+**操作步驟：**
+1. 在「基本設定」中，選擇要標註的檔案、標註人員，以及句子索引。
+2. 切換到「錯誤標註」標籤頁 (Tab)，若發現翻譯有錯，於該頁面中輸入「錯誤區間」並選擇類別/嚴重度等，最後點擊「保存並繼續標記當前資料」。  
+   - 若整句完全正確，可點擊「完全正確」  
+   - 若錯誤太多超過五處，可點擊「過多錯誤」  
+3. 切換到「評分與提交」標籤頁，於此頁拉動滑桿給分，若有更好的譯文可在「建議翻譯」中輸入，最後按「保存並顯示下一筆」送出本句並進入下一筆。
 """
 
 with gr.Blocks(css="""
-    /* 整體字體與行距 */
-    * {
-        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;
-    }
-    /* 模擬帶框風格 */
-    #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;
-    }
+/* 整體字體與行距 */
+body {
+    background-color: #FAFAFA;
+    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;
+}
+/* 螢光標示區的外框 */
+#highlight_box_group {
+    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.Tab("標記工具"):
-        # ------------------- 頂部: 檔案 & 索引控制 -------------------
+    # ------------------- 頂部：基本設定 -------------------
+    with gr.Box():
+        gr.Markdown("### 基本設定")
         with gr.Row():
             with gr.Column(scale=1):
                 rater_selector = gr.Dropdown(
@@ -472,31 +490,31 @@ with gr.Blocks(css="""
                     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)
 
-        # ------------------- 螢光標記區（用 Group + elem_id）＆錯誤紀錄表 -------------------
-        with gr.Row():
-            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"):
-            gr.Markdown("### 步驟 1：錯誤標註")
-
+    # ------------------- 顯示螢光標示 ＆ 錯誤紀錄 -------------------
+    with gr.Row():
+        with gr.Column(scale=5):
+            with gr.Group(elem_id="highlight_box_group"):
+                highlighted_target = gr.HTML(label="螢光標示區 (已標註的錯誤)")
+        with gr.Column(scale=5):
+            error_table = gr.Dataframe(
+                headers=["錯誤文字", "嚴重度", "分類"],
+                label="當前句子錯誤紀錄 (中文顯示)",
+                datatype=["str", "str", "str"],
+                interactive=False
+            )
+
+    # ------------------- 分成兩個 Tab -------------------
+    with gr.Tabs():
+        # ---- Tab 1: 錯誤標註 ----
+        with gr.Tab(label="錯誤標註"):
+            gr.Markdown("#### 在此頁標註錯誤區間，或按「完全正確」「過多錯誤」")
+            error_span = gr.Textbox(label="錯誤區間 (可複製『翻譯文本』貼上)", lines=2)
             with gr.Row():
-                error_span = gr.Textbox(label="錯誤區間 (可複製『翻譯文本』貼上)", lines=2)
                 category = gr.Dropdown(
                     label="錯誤類別",
                     choices=list(categories_display.keys()),
@@ -507,103 +525,102 @@ with gr.Blocks(css="""
                     choices=categories_display["正確性"],
                     value="誤譯"
                 )
-                other = gr.Textbox(label="其他子類別(如選『其他』則填寫)")
                 severity = gr.Dropdown(
                     label="嚴重度",
                     choices=severity_choices_display,
                     value="輕微 (Minor)"
                 )
+                other = gr.Textbox(label="其他子類別(如選『其他』則在此填)")
 
             with gr.Row():
-                save_current_button = gr.Button("保存並繼續標記當前資料")
+                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")
 
-        # ------------------- 步驟2：評分與提交 -------------------
-        with gr.Group(elem_id="step2_box"):
-            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])
-
-        file_selector.change(
-            update_file_selection,
-            inputs=[file_selector],
-            outputs=[
-                source, target, error_span,
-                index_selector, current_index_display,
-                status, error_table, highlighted_target
-            ]
-        )
-        index_selector.change(
-            update_index_selection,
-            inputs=[index_selector],
-            outputs=[
-                source, target, current_index_display,
-                status, error_table, highlighted_target
-            ]
-        )
-        category.change(
-            update_subcats,
-            inputs=[category],
-            outputs=[subcategory]
-        )
+        # ---- Tab 2: 評分與提交 ----
+        with gr.Tab(label="評分與提交"):
+            gr.Markdown("#### 在此頁給分，若有更適合的譯文可提供建議，最後點『保存並顯示下一筆』")
+            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")
+
+    # ------------------- 最下方：狀態顯示 -------------------
+    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])
+
+    file_selector.change(
+        update_file_selection,
+        inputs=[file_selector],
+        outputs=[
+            source, target, error_span,
+            index_selector, current_index_display,
+            status, error_table, highlighted_target
+        ]
+    )
+    index_selector.change(
+        update_index_selection,
+        inputs=[index_selector],
+        outputs=[
+            source, target, current_index_display,
+            status, error_table, highlighted_target
+        ]
+    )
+    category.change(
+        update_subcats,
+        inputs=[category],
+        outputs=[subcategory]
+    )
 
-        correct_button.click(
-            mark_as_correct,
-            outputs=[error_span, status, error_table]
-        )
-        too_many_errors_button.click(
-            mark_as_too_many_errors,
-            outputs=[error_span, status, error_table]
-        )
+    correct_button.click(
+        mark_as_correct,
+        outputs=[error_span, status, error_table]
+    )
+    too_many_errors_button.click(
+        mark_as_too_many_errors,
+        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_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],
-            outputs=[
-                source, target, error_span,
-                current_index_display, status,
-                error_table, highlighted_target
-            ]
-        )
+    # 當「保存並顯示下一筆」
+    save_next_button.click(
+        save_and_next,
+        inputs=[source, target, score, rater_selector, alternative_translation],
+        outputs=[
+            source, target, error_span,
+            current_index_display, status,
+            error_table, highlighted_target
+        ]
+    )
 
-        # 初始化介面
-        init_src, init_tgt = get_current_text()
-        source.value = init_src
-        target.value = init_tgt
-        error_table.value = pd.DataFrame(columns=["錯誤文字","嚴重度","分類"])
-        highlighted_target.value = highlight_errors_in_text(init_tgt, [])
+    # 初始化
+    init_src, init_tgt = get_current_text()
+    source.value = init_src
+    target.value = init_tgt
+    error_table.value = pd.DataFrame(columns=["錯誤文字","嚴重度","分類"])
+    highlighted_target.value = highlight_errors_in_text(init_tgt, [])
 
-demo.launch()
+demo.launch()