feat: embed extracted images as base64 data URIs in preview cards

app.py

@@ -6,28 +6,52 @@ import shutil
 import tempfile
 import traceback
 import zipfile
+import base64
 
 import gradio as gr
 
+_MIME = {"png": "png", "jpg": "jpeg", "jpeg": "jpeg", "gif": "gif", "webp": "webp"}
+
 try:
     import markdown as _md
-    def _md2html(text: str) -> str:
-        """Markdown → HTML.  Local image refs become styled badges (post-process)."""
+    def _md2html(text: str, img_dir: str = None) -> str:
+        """Markdown → HTML.
+        If img_dir is given, <img src="vqa_images/x.png"> tags are replaced with
+        base64 data URIs so the browser renders the actual image.
+        Otherwise a grey badge placeholder is shown.
+        """
         html = _md.markdown(text, extensions=["nl2br", "tables"])
-        # After markdown conversion ![alt](path) becomes <img … alt="alt">.
-        # Replace every <img> tag with a grey badge so nothing tries to load local paths.
-        def _img_badge(m):
-            alt_m = re.search(r'alt="([^"]*)"', m.group(0))
-            alt   = alt_m.group(1) if alt_m else "image"
+
+        def _img_handler(m):
+            tag      = m.group(0)
+            src_m    = re.search(r'src="([^"]*)"', tag)
+            alt_m    = re.search(r'alt="([^"]*)"', tag)
+            src      = src_m.group(1) if src_m else ""
+            alt      = alt_m.group(1) if alt_m else "image"
+
+            if img_dir and src:
+                img_name = os.path.basename(src)
+                img_path = os.path.join(img_dir, img_name)
+                if os.path.exists(img_path):
+                    ext  = img_name.rsplit(".", 1)[-1].lower()
+                    mime = _MIME.get(ext, "png")
+                    with open(img_path, "rb") as f:
+                        b64 = base64.b64encode(f.read()).decode()
+                    return (
+                        f'<img src="data:image/{mime};base64,{b64}" alt="{alt}" '
+                        f'style="max-width:100%;border-radius:6px;margin:6px 0;display:block;">'
+                    )
+            # Fallback badge when image file is not found
             return (
                 '<span style="display:inline-flex;align-items:center;gap:4px;'
                 'background:#f3f4f6;border:1px solid #d1d5db;border-radius:4px;'
-                'padding:1px 7px;font-size:12px;color:#6b7280">'
-                f'📷 {alt}</span>'
+                f'padding:1px 7px;font-size:12px;color:#6b7280">📷 {alt}</span>'
             )
-        return re.sub(r'<img\b[^>]*/?>', _img_badge, html)
+
+        return re.sub(r'<img\b[^>]*/?>',  _img_handler, html)
+
 except ImportError:
-    def _md2html(text: str) -> str:
+    def _md2html(text: str, img_dir: str = None) -> str:
         return text.replace("\n", "<br>")
 
 _REPO_ROOT = os.path.dirname(os.path.abspath(__file__))
@@ -116,7 +140,8 @@ EXAMPLES = [
 # ── Helpers ───────────────────────────────────────────────────────────────────
 
 
-def _render_preview(jsonl_path: str, lang: str = "en") -> str:
+def _render_preview(jsonl_path: str, lang: str = "en", output_dir: str = None) -> str:
+    """Render up to 3 QA items as styled HTML cards with real image rendering."""
     if not jsonl_path or not os.path.exists(jsonl_path):
         return ""
     items = []
@@ -142,14 +167,16 @@ def _render_preview(jsonl_path: str, lang: str = "en") -> str:
 
     cards = []
     for i, item in enumerate(items):
-        q_html   = _md2html(str(item.get("question", "")))
-        a_html   = _md2html(str(item.get("answer",   "")))
-        sol_raw  = str(item.get("solution", ""))
         name     = item.get("name", "")
+        # Images live at output_dir/{name}/vqa_images/
+        img_dir  = os.path.join(output_dir, name, "vqa_images") if output_dir else None
+        q_html   = _md2html(str(item.get("question", "")), img_dir)
+        a_html   = _md2html(str(item.get("answer",   "")), img_dir)
+        sol_raw  = str(item.get("solution", ""))
 
         # 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_html  = _md2html(sol_short, img_dir)
         sol_block = (
             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>'
@@ -358,7 +385,7 @@ def run_vqa_extraction(
             if lang == "en" else
             f"✅ 完成！共提取 {count} 条 QA 对{img_note}。下载 zip 可获得 JSONL 和图片。"
         )
-        yield zip_path, done, _render_preview(jsonl_path, lang)
+        yield zip_path, done, _render_preview(jsonl_path, lang, output_dir)
 
     except Exception:
         yield None, f"❌ Unexpected error:\n{traceback.format_exc()}", ""