ux: default en, move examples section, clean up preview label and API table

app.py

@@ -28,6 +28,10 @@ T = {
         sec_upload="📄 上传 PDF",
         upload_label="PDF 文件（单文件：题答混排；双文件：第1个题目，第2个答案）",
         task_label="任务名称",
+        sec_examples="📋 内置示例 PDF（点击加载并预览）",
+        ex1_label="示例 1：单文件题答混排",
+        ex2_label="示例 2：双文件（题目 + 答案）",
+        pdf_preview_label="PDF 预览",
         sec_llm="⚙️ LLM 配置",
         api_url_label="API Base URL",
         llm_key_label="LLM API Key（DF_API_KEY）",
@@ -44,17 +48,7 @@ T = {
         status_label="运行状态",
         status_ph="点击「开始提取」后进度显示在这里（运行需数分钟，请耐心等待）…",
         output_label="下载结果（raw_vqa.jsonl）",
-        preview_label="结果预览（最多展示 3 条）",
-        sec_examples="📋 内置示例 PDF（点击加载并预览）",
-        pdf_preview_label="PDF 预览",
-        ex1_label="示例 1：单文件题答混排",
-        ex2_label="示例 2：双文件（题目 + 答案）",
-        key_note=(
-            "**两个 API Key 的区别：**\n\n"
-            "| Key | 用途 | 申请地址 |\n|-----|------|----------|\n"
-            "| LLM API Key | 调用 GPT/Gemini 等大模型提取 QA | 对应 LLM 服务商 |\n"
-            "| **MinerU API Key** | 解析 PDF 版面（完全独立） | [mineru.net/apiManage/token](https://mineru.net/apiManage/token) |"
-        ),
+        preview_label="结果预览",
     ),
     "en": dict(
         lang_btn="中文",
@@ -68,6 +62,10 @@ T = {
         sec_upload="📄 Upload PDF",
         upload_label="PDF File(s) — single: Q&A interleaved; two files: 1st questions, 2nd answers",
         task_label="Task Name",
+        sec_examples="📋 Example PDFs (click to load & preview)",
+        ex1_label="Example 1: Single file (Q&A mixed)",
+        ex2_label="Example 2: Two files (questions + answers)",
+        pdf_preview_label="PDF Preview",
         sec_llm="⚙️ LLM Configuration",
         api_url_label="API Base URL",
         llm_key_label="LLM API Key (DF_API_KEY)",
@@ -84,20 +82,12 @@ T = {
         status_label="Status",
         status_ph="Click 'Start Extraction' to begin (may take several minutes)…",
         output_label="Download Result (raw_vqa.jsonl)",
-        preview_label="Result Preview (up to 3 items)",
-        sec_examples="📋 Example PDFs (click to load & preview)",
-        pdf_preview_label="PDF Preview",
-        ex1_label="Example 1: Single file (Q&A mixed)",
-        ex2_label="Example 2: Two files (questions + answers)",
-        key_note=(
-            "**API Key Reference:**\n\n"
-            "| Key | Purpose | Where to Get |\n|-----|---------|---------------|\n"
-            "| LLM API Key | Call GPT/Gemini etc. for QA extraction | Your LLM provider |\n"
-            "| **MinerU API Key** | PDF layout parsing (completely independent) | [mineru.net/apiManage/token](https://mineru.net/apiManage/token) |"
-        ),
+        preview_label="Result Preview",
     ),
 }
 
+_DEFAULT_LANG = "en"
+
 EXAMPLES = [
     ("examples/VQA/questionextract_test.pdf",),
     ("examples/VQA/math_question.pdf", "examples/VQA/math_answer.pdf"),
@@ -107,21 +97,19 @@ EXAMPLES = [
 # ── Helpers ───────────────────────────────────────────────────────────────────
 
 def _pdf_to_iframe(path: str) -> str:
-    """Encode a local PDF as base64 and return an iframe HTML string."""
     try:
         with open(os.path.join(_REPO_ROOT, path), "rb") as f:
             b64 = base64.b64encode(f.read()).decode()
         return (
             f'<iframe src="data:application/pdf;base64,{b64}" '
             f'width="100%" height="520px" '
-            f'style="border:1px solid #d1d5db;border-radius:10px;"></iframe>'
+            f'style="border:1px solid #d1d5db;border-radius:10px;display:block;margin-bottom:8px;"></iframe>'
         )
     except Exception as e:
-        return f"<p style='color:red'>无法预览 PDF：{e}</p>"
+        return f"<p style='color:red'>Cannot preview PDF: {e}</p>"
 
 
-def _render_preview(jsonl_path: str, lang: str = "zh") -> str:
-    """Render up to 3 JSONL QA items as styled HTML cards."""
+def _render_preview(jsonl_path: str, lang: str = "en") -> str:
     if not jsonl_path or not os.path.exists(jsonl_path):
         return ""
     items = []
@@ -139,7 +127,7 @@ def _render_preview(jsonl_path: str, lang: str = "zh") -> str:
 
     if not items:
         label_empty = "（无 QA 数据）" if lang == "zh" else "(No QA data)"
-        return f"<p style='color:#666'>{label_empty}</p>"
+        return f'<div style="padding:16px;color:#666">{label_empty}</div>'
 
     label_q = "题目" if lang == "zh" else "Question"
     label_a = "答案" if lang == "zh" else "Answer"
@@ -153,18 +141,16 @@ def _render_preview(jsonl_path: str, lang: str = "zh") -> str:
         name = item.get("name", "")
         sol_short = (sol[:300] + "…") if len(sol) > 300 else sol
         sol_block = (
-            f'<div style="margin-top:8px">'
+            f'<div style="margin-top:10px">'
             f'<span style="font-weight:600;color:#374151">{label_s}:</span>'
             f'<div style="margin-top:4px;white-space:pre-wrap;font-size:13px;color:#4b5563">{sol_short}</div>'
             f'</div>'
         ) if sol and sol != a else ""
 
         cards.append(f"""
-<div style="border:1px solid #e5e7eb;border-radius:12px;padding:18px;margin-bottom:14px;
+<div style="border:1px solid #e5e7eb;border-radius:12px;padding:18px;margin-bottom:12px;
             background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,.06);">
-  <div style="font-size:11px;color:#9ca3af;margin-bottom:10px">
-    #{i+1} &nbsp;·&nbsp; {name}
-  </div>
+  <div style="font-size:11px;color:#9ca3af;margin-bottom:10px">#{i+1} &nbsp;·&nbsp; {name}</div>
   <div style="margin-bottom:10px">
     <span style="font-weight:600;color:#111827">{label_q}:</span>
     <div style="margin-top:4px;white-space:pre-wrap;font-size:14px">{q}</div>
@@ -181,26 +167,25 @@ def _render_preview(jsonl_path: str, lang: str = "zh") -> str:
         with open(jsonl_path, encoding="utf-8") as f:
             total = sum(1 for l in f if l.strip())
         if total > 3:
-            more = f"（共 {total} 条，仅展示前 3 条）" if lang == "zh" else f"({total} items total, showing first 3)"
+            more = f"（共 {total} 条，仅展示前 3 条）" if lang == "zh" else f"{total} items total — showing first 3"
             total_hint = f'<div style="font-size:12px;color:#6b7280;margin-bottom:10px">{more}</div>'
     except Exception:
         pass
 
+    inner = total_hint + "".join(cards)
     return (
-        '<div style="max-height:560px;overflow-y:auto;padding-right:4px">'
-        + total_hint
-        + "".join(cards)
+        '<div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;'
+        'padding:16px;max-height:580px;overflow-y:auto;">'
+        + inner
         + "</div>"
     )
 
 
-# ── Backend (generator so stop button works) ─────────────────────────────────
+# ── Backend (generator → stop button works) ───────────────────────────────────
 
 def run_vqa_extraction(
     pdf_files, task_name, api_url, llm_api_key, mineru_api_key, model_name, max_workers, lang,
 ):
-    t = T[lang]
-
     if pdf_files is None or (isinstance(pdf_files, list) and len(pdf_files) == 0):
         yield None, "❌ 请先上传 PDF 文件。" if lang == "zh" else "❌ Please upload a PDF file first.", ""
         return
@@ -213,7 +198,7 @@ def run_vqa_extraction(
         msg = (
             "❌ 请填写 MinerU API Key（独立于 LLM Key，去 https://mineru.net/apiManage/token 申请）。"
             if lang == "zh" else
-            "❌ Please enter your MinerU API Key (independent from LLM key, get it at https://mineru.net/apiManage/token)."
+            "❌ Please enter your MinerU API Key (get it at https://mineru.net/apiManage/token)."
         )
         yield None, msg, ""; return
 
@@ -229,8 +214,7 @@ def run_vqa_extraction(
     try:
         os.chdir(workspace)
 
-        step1 = "⏳ [1/4] 整理 PDF 文件…" if lang == "zh" else "⏳ [1/4] Preparing PDF files…"
-        yield None, step1, ""
+        yield None, "⏳ [1/4] Preparing PDF files…" if lang == "en" else "⏳ [1/4] 整理 PDF 文件…", ""
 
         if not isinstance(pdf_files, list):
             pdf_files = [pdf_files]
@@ -249,12 +233,11 @@ def run_vqa_extraction(
             }
             fout.write(json.dumps(entry, ensure_ascii=False) + "\n")
 
-        step2 = "⏳ [2/4] 加载 Pipeline 模块…" if lang == "zh" else "⏳ [2/4] Loading pipeline module…"
-        yield None, step2, ""
+        yield None, "⏳ [2/4] Loading pipeline module…" if lang == "en" else "⏳ [2/4] 加载 Pipeline 模块…", ""
         try:
             from pipelines.vqa_extract_optimized_pipeline import PDF_VQA_extract_optimized_pipeline
         except Exception:
-            err = f"❌ 导入 Pipeline 失败：\n{traceback.format_exc()}"
+            err = f"❌ Failed to import pipeline:\n{traceback.format_exc()}"
             yield None, err, ""; return
 
         try:
@@ -275,8 +258,11 @@ def run_vqa_extraction(
                 yield None, f"❌ {msg}", ""
             return
 
-        step3 = "⏳ [3/4] MinerU 解析 PDF + LLM 提取 QA（可能需要数分钟）…" if lang == "zh" else "⏳ [3/4] MinerU parsing + LLM QA extraction (may take several minutes)…"
-        yield None, step3, ""
+        yield None, (
+            "⏳ [3/4] MinerU parsing + LLM QA extraction (may take several minutes)…"
+            if lang == "en" else
+            "⏳ [3/4] MinerU 解析 PDF + LLM 提取 QA（可能需要数分钟）…"
+        ), ""
 
         try:
             pipeline.forward()
@@ -284,22 +270,21 @@ def run_vqa_extraction(
             msg = str(e)
             if "no api found" in msg.lower() or "Apply upload urls failed" in msg:
                 err = (
-                    "❌ MinerU API Key 无效或已过期。请到 https://mineru.net/apiManage/token 重新申请。\n\n原始错误：" + msg
-                    if lang == "zh" else
-                    "❌ MinerU API Key is invalid or expired. Please get a new one at https://mineru.net/apiManage/token.\n\nRaw error: " + msg
+                    "❌ MinerU API Key invalid or expired. Get a new one at https://mineru.net/apiManage/token\n\n" + msg
+                    if lang == "en" else
+                    "❌ MinerU API Key 无效或已过期。请到 https://mineru.net/apiManage/token 重新申请。\n\n" + msg
                 )
             elif "Cannot connect to LLM server" in msg:
-                err = ("❌ 无法连接 LLM API，请检查 Base URL。\n\n" if lang == "zh" else "❌ Cannot connect to LLM API. Check Base URL.\n\n") + msg
+                err = ("❌ Cannot connect to LLM API. Check Base URL.\n\n" if lang == "en" else "❌ 无法连接 LLM API，请检查 Base URL。\n\n") + msg
             else:
                 err = f"❌ {msg}"
             yield None, err, ""; return
 
-        step4 = "⏳ [4/4] 整理输出结果…" if lang == "zh" else "⏳ [4/4] Collecting output…"
-        yield None, step4, ""
+        yield None, "⏳ [4/4] Collecting output…" if lang == "en" else "⏳ [4/4] 整理输出结果…", ""
 
         step_files = [f for f in os.listdir(cache_dir) if re.match(r"vqa_step\d+\.jsonl", f)]
         if not step_files:
-            msg = "❌ Pipeline 完成但未找到输出文件。" if lang == "zh" else "❌ Pipeline finished but no output file found."
+            msg = "❌ Pipeline finished but no output file found." if lang == "en" else "❌ Pipeline 完成但未找到输出文件。"
             yield None, msg, ""; return
 
         max_step = max(int(re.findall(r"vqa_step(\d+)\.jsonl", f)[0]) for f in step_files)
@@ -319,12 +304,11 @@ def run_vqa_extraction(
                 f_out.write(json.dumps(out, ensure_ascii=False) + "\n")
                 count += 1
 
-        done = f"✅ 完成！共提取 {count} 条 QA 对。" if lang == "zh" else f"✅ Done! Extracted {count} QA pairs."
-        preview_html = _render_preview(result_file, lang)
-        yield result_file, done, preview_html
+        done = f"✅ Done! Extracted {count} QA pairs." if lang == "en" else f"✅ 完成！共提取 {count} 条 QA 对。"
+        yield result_file, done, _render_preview(result_file, lang)
 
     except Exception:
-        yield None, f"❌ 未知错误：\n{traceback.format_exc()}", ""
+        yield None, f"❌ Unexpected error:\n{traceback.format_exc()}", ""
     finally:
         os.chdir(original_cwd)
 
@@ -336,90 +320,95 @@ CSS = """
 .example-btn { margin: 4px 0 !important; }
 """
 
+_L = _DEFAULT_LANG   # shorthand for initial render
+
 with gr.Blocks(
     title="FlipVQA-Miner",
     theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"),
     css=CSS,
 ) as demo:
 
-    lang_state = gr.State("zh")
+    lang_state = gr.State(_DEFAULT_LANG)
 
     # ── Header ────────────────────────────────────────────────────────────────
     with gr.Row(elem_id="title-row"):
         with gr.Column(scale=5):
             gr.Markdown("# FlipVQA-Miner: Multimodal Knowledge Extraction")
         with gr.Column(scale=0, min_width=110):
-            lang_btn = gr.Button(T["zh"]["lang_btn"], elem_id="lang-btn", size="sm")
+            lang_btn = gr.Button(T[_L]["lang_btn"], elem_id="lang-btn", size="sm")
 
-    subtitle_md = gr.Markdown(T["zh"]["subtitle"])
-    desc_md     = gr.Markdown(T["zh"]["desc"])
+    subtitle_md = gr.Markdown(T[_L]["subtitle"])
+    desc_md     = gr.Markdown(T[_L]["desc"])
 
     # ── Main layout ───────────────────────────────────────────────────────────
     with gr.Row():
         # ── Left column: inputs ───────────────────────────────────────────────
         with gr.Column(scale=1):
-            sec_upload_md = gr.Markdown(f"### {T['zh']['sec_upload']}")
+
+            # 1. Upload PDF
+            sec_upload_md = gr.Markdown(f"### {T[_L]['sec_upload']}")
             pdf_files = gr.File(
-                label=T["zh"]["upload_label"],
+                label=T[_L]["upload_label"],
                 file_types=[".pdf"],
                 file_count="multiple",
             )
-            task_name = gr.Textbox(label=T["zh"]["task_label"], value="task1")
+            task_name = gr.Textbox(label=T[_L]["task_label"], value="task1")
+
+            # 2. Example PDFs (between upload and LLM config)
+            sec_examples_md = gr.Markdown(f"### {T[_L]['sec_examples']}")
+            with gr.Row():
+                ex1_btn = gr.Button(T[_L]["ex1_label"], elem_classes="example-btn", scale=1)
+                ex2_btn = gr.Button(T[_L]["ex2_label"], elem_classes="example-btn", scale=1)
+            pdf_preview_md = gr.Markdown(f"#### {T[_L]['pdf_preview_label']}")
+            pdf_preview    = gr.HTML(
+                value="<p style='color:#9ca3af;font-size:13px;padding:8px 0'>Click an example button to preview a PDF here.</p>"
+            )
 
-            sec_llm_md = gr.Markdown(f"### {T['zh']['sec_llm']}")
+            # 3. LLM config
+            sec_llm_md = gr.Markdown(f"### {T[_L]['sec_llm']}")
             api_url = gr.Textbox(
-                label=T["zh"]["api_url_label"],
+                label=T[_L]["api_url_label"],
                 value="https://generativelanguage.googleapis.com/v1beta/openai/",
             )
             llm_api_key = gr.Textbox(
-                label=T["zh"]["llm_key_label"],
+                label=T[_L]["llm_key_label"],
                 type="password",
-                placeholder=T["zh"]["llm_key_ph"],
+                placeholder=T[_L]["llm_key_ph"],
             )
             model_name = gr.Textbox(
-                label=T["zh"]["model_label"],
+                label=T[_L]["model_label"],
                 value="gemini-2.5-pro",
-                placeholder=T["zh"]["model_ph"],
+                placeholder=T[_L]["model_ph"],
             )
 
-            sec_mineru_md = gr.Markdown(f"### {T['zh']['sec_mineru']}")
+            # 4. MinerU config
+            sec_mineru_md = gr.Markdown(f"### {T[_L]['sec_mineru']}")
             mineru_api_key = gr.Textbox(
-                label=T["zh"]["mineru_key_label"],
+                label=T[_L]["mineru_key_label"],
                 type="password",
                 placeholder="sk2-...",
-                info=T["zh"]["mineru_key_info"],
+                info=T[_L]["mineru_key_info"],
             )
-            max_workers = gr.Slider(label=T["zh"]["workers_label"], minimum=1, maximum=30, value=5, step=1)
-
-            with gr.Row():
-                run_btn  = gr.Button(T["zh"]["run_btn"],  variant="primary", scale=4)
-                stop_btn = gr.Button(T["zh"]["stop_btn"], variant="stop",    scale=1)
+            max_workers = gr.Slider(label=T[_L]["workers_label"], minimum=1, maximum=30, value=5, step=1)
 
-            # ── Example PDFs (below upload) ───────────────────────────────────
-            sec_examples_md = gr.Markdown(f"### {T['zh']['sec_examples']}")
             with gr.Row():
-                ex1_btn = gr.Button(T["zh"]["ex1_label"], elem_classes="example-btn", scale=1)
-                ex2_btn = gr.Button(T["zh"]["ex2_label"], elem_classes="example-btn", scale=1)
-
-            pdf_preview_md = gr.Markdown(f"#### {T['zh']['pdf_preview_label']}")
-            pdf_preview    = gr.HTML(value="<p style='color:#9ca3af;font-size:13px'>点击上方示例按钮预览 PDF</p>")
+                run_btn  = gr.Button(T[_L]["run_btn"],  variant="primary", scale=4)
+                stop_btn = gr.Button(T[_L]["stop_btn"], variant="stop",    scale=1)
 
         # ── Right column: outputs ─────────────────────────────────────────────
         with gr.Column(scale=1):
-            sec_output_md = gr.Markdown(f"### {T['zh']['sec_output']}")
+            sec_output_md = gr.Markdown(f"### {T[_L]['sec_output']}")
             status_box = gr.Textbox(
-                label=T["zh"]["status_label"],
+                label=T[_L]["status_label"],
                 interactive=False,
                 lines=6,
-                placeholder=T["zh"]["status_ph"],
+                placeholder=T[_L]["status_ph"],
             )
-            output_file = gr.File(label=T["zh"]["output_label"], interactive=False)
+            output_file = gr.File(label=T[_L]["output_label"], interactive=False)
 
-            preview_md  = gr.Markdown(f"#### {T['zh']['preview_label']}")
+            preview_md  = gr.Markdown(f"#### {T[_L]['preview_label']}")
             preview_box = gr.HTML(value="")
 
-    key_note_md = gr.Markdown(T["zh"]["key_note"])
-
     # ── Event: Run ────────────────────────────────────────────────────────────
     run_event = run_btn.click(
         fn=run_vqa_extraction,
@@ -432,26 +421,17 @@ with gr.Blocks(
 
     # ── Event: Example buttons ────────────────────────────────────────────────
     def load_example(ex_index, lang):
-        paths = [os.path.join(_REPO_ROOT, p) for p in EXAMPLES[ex_index]]
-        # build combined preview for all PDFs in example
+        paths  = [os.path.join(_REPO_ROOT, p) for p in EXAMPLES[ex_index]]
+        label  = T[lang]["ex1_label"] if ex_index == 0 else T[lang]["ex2_label"]
         iframes = "".join(_pdf_to_iframe(p) for p in EXAMPLES[ex_index])
-        label = T[lang]["ex1_label"] if ex_index == 0 else T[lang]["ex2_label"]
         html = (
-            f'<div style="font-size:12px;color:#6b7280;margin-bottom:6px">{label}</div>'
+            f'<div style="font-size:12px;color:#6b7280;margin-bottom:8px">{label}</div>'
             + iframes
         )
         return paths, html
 
-    ex1_btn.click(
-        fn=lambda lang: load_example(0, lang),
-        inputs=[lang_state],
-        outputs=[pdf_files, pdf_preview],
-    )
-    ex2_btn.click(
-        fn=lambda lang: load_example(1, lang),
-        inputs=[lang_state],
-        outputs=[pdf_files, pdf_preview],
-    )
+    ex1_btn.click(fn=lambda lang: load_example(0, lang), inputs=[lang_state], outputs=[pdf_files, pdf_preview])
+    ex2_btn.click(fn=lambda lang: load_example(1, lang), inputs=[lang_state], outputs=[pdf_files, pdf_preview])
 
     # ── Event: Language toggle ────────────────────────────────────────────────
     def toggle_lang(current_lang):
@@ -465,6 +445,10 @@ with gr.Blocks(
             gr.update(value=f"### {t['sec_upload']}"),
             gr.update(label=t["upload_label"]),
             gr.update(label=t["task_label"]),
+            gr.update(value=f"### {t['sec_examples']}"),
+            gr.update(value=t["ex1_label"]),
+            gr.update(value=t["ex2_label"]),
+            gr.update(value=f"#### {t['pdf_preview_label']}"),
             gr.update(value=f"### {t['sec_llm']}"),
             gr.update(label=t["api_url_label"]),
             gr.update(label=t["llm_key_label"], placeholder=t["llm_key_ph"]),
@@ -477,12 +461,7 @@ with gr.Blocks(
             gr.update(value=f"### {t['sec_output']}"),
             gr.update(label=t["status_label"], placeholder=t["status_ph"]),
             gr.update(label=t["output_label"]),
-            gr.update(value=f"### {t['sec_examples']}"),
-            gr.update(value=t["ex1_label"]),
-            gr.update(value=t["ex2_label"]),
-            gr.update(value=f"#### {t['pdf_preview_label']}"),
             gr.update(value=f"#### {t['preview_label']}"),
-            gr.update(value=t["key_note"]),
         )
 
     lang_btn.click(
@@ -492,12 +471,12 @@ with gr.Blocks(
             lang_state, lang_btn,
             subtitle_md, desc_md,
             sec_upload_md, pdf_files, task_name,
+            sec_examples_md, ex1_btn, ex2_btn, pdf_preview_md,
             sec_llm_md, api_url, llm_api_key, model_name,
             sec_mineru_md, mineru_api_key, max_workers,
             run_btn, stop_btn,
             sec_output_md, status_box, output_file,
-            sec_examples_md, ex1_btn, ex2_btn, pdf_preview_md,
-            preview_md, key_note_md,
+            preview_md,
         ],
     )