feat: render QA preview as markdown with image placeholders

app.py

@@ -8,6 +8,20 @@ import traceback
 import zipfile
 
 import gradio as gr
+try:
+    import markdown as _md
+    def _md2html(text: str) -> str:
+        # Replace local image refs (inside zip) with a styled badge
+        text = re.sub(
+            r'!\[([^\]]*)\]\(vqa_images/[^\)]+\)',
+            r'<span style="display:inline-block;background:#f3f4f6;border:1px solid'
+            r' #d1d5db;border-radius:4px;padding:1px 7px;font-size:12px;color:#6b7280">📷 \1</span>',
+            text,
+        )
+        return _md.markdown(text, extensions=["nl2br", "tables"])
+except ImportError:
+    def _md2html(text: str) -> str:
+        return text.replace("\n", "<br>")
 
 _REPO_ROOT = os.path.dirname(os.path.abspath(__file__))
 sys.path.insert(0, _REPO_ROOT)
@@ -121,29 +135,32 @@ def _render_preview(jsonl_path: str, lang: str = "en") -> str:
 
     cards = []
     for i, item in enumerate(items):
-        q   = str(item.get("question", "")).replace("<", "&lt;").replace(">", "&gt;")
-        a   = str(item.get("answer",   "")).replace("<", "&lt;").replace(">", "&gt;")
-        sol = str(item.get("solution", "")).replace("<", "&lt;").replace(">", "&gt;")
-        name = item.get("name", "")
-        sol_short = (sol[:300] + "…") if len(sol) > 300 else sol
+        q_html   = _md2html(str(item.get("question", "")))
+        a_html   = _md2html(str(item.get("answer",   "")))
+        sol_raw  = str(item.get("solution", ""))
+        name     = item.get("name", "")
+
+        # Truncate solution before converting (avoids cutting mid-tag)
+        sol_short = (sol_raw[:400] + "\n\n…") if len(sol_raw) > 400 else sol_raw
+        sol_html  = _md2html(sol_short)
         sol_block = (
-            f'<div style="margin-top:10px">'
+            f'<div style="margin-top:12px;padding-top:10px;border-top:1px solid #e5e7eb">'
             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 class="md-body" style="margin-top:6px;font-size:13px;color:#4b5563">{sol_html}</div>'
             f'</div>'
-        ) if sol and sol != a else ""
+        ) if sol_raw and sol_raw != item.get("answer", "") else ""
 
         cards.append(f"""
 <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="margin-bottom:10px">
+  <div style="margin-bottom:12px">
     <span style="font-weight:600;color:#111827">{label_q}:</span>
-    <div style="margin-top:4px;white-space:pre-wrap;font-size:14px">{q}</div>
+    <div class="md-body" style="margin-top:6px;font-size:14px">{q_html}</div>
   </div>
-  <div style="background:#f0fdf4;border-radius:8px;padding:10px">
+  <div style="background:#f0fdf4;border-radius:8px;padding:12px">
     <span style="font-weight:600;color:#15803d">{label_a}:</span>
-    <div style="margin-top:4px;font-size:14px;color:#166534">{a}</div>
+    <div class="md-body" style="margin-top:6px;font-size:14px;color:#166534">{a_html}</div>
   </div>
   {sol_block}
 </div>""")
@@ -335,6 +352,14 @@ CSS = """
 #title-row { align-items: center; }
 #lang-btn  { min-width: 90px; }
 .example-btn { margin: 4px 0 !important; }
+.md-body p  { margin: 0 0 6px; }
+.md-body ul, .md-body ol { margin: 4px 0 4px 18px; padding: 0; }
+.md-body li { margin-bottom: 2px; }
+.md-body code { background:#f3f4f6; border-radius:3px; padding:1px 4px; font-size:12px; }
+.md-body pre  { background:#f3f4f6; border-radius:6px; padding:8px; overflow-x:auto; font-size:12px; }
+.md-body table { border-collapse:collapse; width:100%; font-size:13px; }
+.md-body th, .md-body td { border:1px solid #e5e7eb; padding:4px 8px; }
+.md-body th { background:#f9fafb; }
 """
 
 _L = _DEFAULT_LANG   # shorthand for initial render

requirements.txt

@@ -4,6 +4,7 @@ open-dataflow[pdf2vqa] @ git+https://github.com/OpenDCAI/DataFlow.git
 # Runtime dependencies used by curate_data.py
 json5
 pandas
+markdown
 
 # Pin gradio>=5.10 to avoid the bool-schema crash in gradio_client/utils.py
 # (open-dataflow requires gradio>5, HF Spaces pins to sdk_version above)