Replace browser-side KaTeX/MathJax with server-side MathML via latex2mathml

Every browser-side approach failed in Gradio's rendering pipeline:
- MathJax: JS typeset callback couldn't reach elements in shadow DOM
- gr.Markdown + KaTeX: markdown engine processed \\ (LaTeX line-break)
as <br> before KaTeX saw the content, breaking aligned environments

New approach: convert LaTeX to MathML in Python before the output ever
reaches the browser. MathML is a W3C standard rendered natively by all
modern browsers — no JavaScript, no CDN, no timing callbacks.

- Add _to_mathml(): converts LaTeX via latex2mathml, graceful fallback
to <code> block for unsupported commands
- Replace to_math_md() with to_math_html(): MathML blocks are embedded
as <div class="math-display"> before the markdown pass, so Python-
Markdown treats them as raw HTML blocks and leaves them untouched
- Orphaned \[ (truncated model output) stripped before markdown pass
- Restore gr.HTML + PREVIEW_CSS for styled output; remove gr.Markdown
latex_delimiters approach entirely
- requirements.txt: swap pymdown-extensions for latex2mathml

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -11,6 +11,8 @@ import fitz
 import re
 import numpy as np
 import base64
+import markdown as md_lib
+import latex2mathml.converter
 
 from io import StringIO, BytesIO
 
@@ -112,27 +114,85 @@ def clean_output(text, include_images=False):
     
     return text.strip()
 
-def to_math_md(text):
-    """Convert model output to markdown with $$/$ delimiters for gr.Markdown + KaTeX."""
+PREVIEW_CSS = """
+<style>
+.math-preview {
+  padding: 1.5em;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 15px;
+  line-height: 1.8;
+  color: #1a1a1a;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.math-display {
+  text-align: center;
+  overflow-x: auto;
+  margin: 1em 0;
+  padding: 0.5em 0;
+}
+math[display="block"] { display: block; overflow-x: auto; max-width: 100%; }
+.math-preview h1 { font-size: 1.8em; font-weight: 700; margin: 1em 0 0.4em; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.3em; }
+.math-preview h2 { font-size: 1.4em; font-weight: 600; margin: 1em 0 0.4em; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.2em; }
+.math-preview h3 { font-size: 1.15em; font-weight: 600; margin: 0.9em 0 0.3em; }
+.math-preview p  { margin: 0.6em 0; }
+.math-preview ul, .math-preview ol { padding-left: 1.8em; margin: 0.5em 0; }
+.math-preview li { margin: 0.25em 0; }
+.math-preview table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.95em; }
+.math-preview th, .math-preview td { border: 1px solid #ccc; padding: 0.45em 0.75em; text-align: left; }
+.math-preview th { background: #f2f2f2; font-weight: 600; }
+.math-preview tr:nth-child(even) { background: #fafafa; }
+.math-preview code { background: #f4f4f4; padding: 0.15em 0.4em; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 0.88em; }
+.math-preview pre  { background: #f4f4f4; padding: 1em; border-radius: 5px; overflow-x: auto; margin: 0.8em 0; }
+.math-preview pre code { background: none; padding: 0; }
+.math-preview blockquote { border-left: 4px solid #ccc; margin: 0.8em 0; padding: 0.4em 1em; color: #555; background: #fafafa; }
+.math-preview img { max-width: 100%; height: auto; display: block; margin: 0.8em 0; }
+.math-fallback { color: #888; font-style: italic; }
+</style>
+"""
+
+def _to_mathml(latex: str, display: bool) -> str:
+    """Convert a LaTeX string to MathML. Falls back to a code block on error."""
+    try:
+        mathml = latex2mathml.converter.convert(latex)
+        if display:
+            mathml = re.sub(r'<math\b', '<math display="block"', mathml, count=1)
+        return mathml
+    except Exception:
+        if display:
+            return f'<pre class="math-fallback"><code>{latex}</code></pre>'
+        return f'<code class="math-fallback">{latex}</code>'
+
+def to_math_html(text: str) -> str:
+    """Convert model markdown output to HTML with server-side MathML rendering.
+
+    LaTeX is converted to MathML by latex2mathml (pure Python, no JS required).
+    The MathML is embedded directly in the HTML before the markdown pass so the
+    markdown engine never touches LaTeX backslashes or delimiters.
+    """
     if not text:
         return ""
-    # Collapse all whitespace inside \[...\] to a single line before converting to
-    # $$content$$.  This fixes two problems:
-    #   1. Markdown parsers that don't recognise multi-line $$ ... $$ blocks.
-    #   2. LaTeX \\ (line-break inside aligned) being processed by the markdown
-    #      engine as a hard line-break (<br>) before KaTeX ever sees it, which
-    #      breaks every aligned/cases/gathered environment.
-    # Note: \\ is two backslash characters — not whitespace — so it survives split().
-    text = re.sub(r'\\\[(.+?)\\\]',
-                  lambda m: f'\n\n$${" ".join(m.group(1).split())}$$\n\n',
-                  text, flags=re.DOTALL)
-    # Remove any orphaned \[ without a closing \] (model output truncated mid-equation).
-    # After the substitution above all complete pairs are gone, so any remaining \[
-    # is unclosed and would appear as raw LaTeX in the output.
+
+    # --- display math \[...\] → block MathML wrapped in <div> ---
+    # Insert as a proper block (blank lines around the div) so Python-Markdown
+    # treats it as a raw HTML block and leaves it untouched.
+    def display_block(m):
+        mathml = _to_mathml(m.group(1).strip(), display=True)
+        return f'\n\n<div class="math-display">{mathml}</div>\n\n'
+
+    text = re.sub(r'\\\[(.+?)\\\]', display_block, text, flags=re.DOTALL)
+
+    # Remove orphaned \[ with no matching \] (truncated model output).
     text = re.sub(r'\\\[.*', '', text, flags=re.DOTALL)
-    # Inline math
-    text = re.sub(r'\\\((.+?)\\\)', lambda m: f'${m.group(1).strip()}$', text)
-    return text
+
+    # --- inline math \(...\) → inline MathML ---
+    text = re.sub(r'\\\((.+?)\\\)',
+                  lambda m: _to_mathml(m.group(1).strip(), display=False),
+                  text)
+
+    # --- remaining text: standard markdown (tables, bold, headings, images…) ---
+    html = md_lib.markdown(text, extensions=['tables', 'fenced_code', 'sane_lists'])
+    return f'<div class="math-preview">{html}</div>'
 
 def embed_images(markdown, crops):
     if not crops:
@@ -300,13 +360,7 @@ with gr.Blocks(title="DeepSeek-OCR-2") as demo:
                 with gr.Tab("Text", id="tab_text"):
                     text_out = gr.Textbox(lines=20, buttons=["copy"], show_label=False)
                 with gr.Tab("Markdown Preview", id="tab_markdown"):
-                    md_out = gr.Markdown(
-                        "",
-                        latex_delimiters=[
-                            {"left": "$$", "right": "$$", "display": True},
-                            {"left": "$",  "right": "$",  "display": False},
-                        ],
-                    )
+                    md_out = gr.HTML("")
                 with gr.Tab("Boxes", id="tab_boxes"):
                     img_out = gr.Image(type="pil", height=500, show_label=False)
                 with gr.Tab("Cropped Images", id="tab_crops"):
@@ -379,7 +433,7 @@ with gr.Blocks(title="DeepSeek-OCR-2") as demo:
         dl_tmp.write(cleaned)
         dl_tmp.close()
 
-        return (text_display, to_math_md(markdown), raw, img_out, crops,
+        return (text_display, to_math_html(markdown), raw, img_out, crops,
                 gr.DownloadButton(value=dl_tmp.name, visible=True))
 
     submit_event = btn.click(run, [input_img, file_in, task, prompt, page_selector],
@@ -393,5 +447,6 @@ if __name__ == "__main__":
     demo.queue(max_size=20).launch(
         theme=gr.themes.Soft(),
         server_name="0.0.0.0" if local else None,
+        head=PREVIEW_CSS,
         ssr_mode=False,      # SSR is experimental in Gradio 6 and breaks HF Spaces routing
     )

requirements.txt

@@ -10,4 +10,4 @@ flash-attn @ https://github.com/Dao-AILab/flash-attention/releases/download/v2.7
 PyMuPDF
 hf_transfer
 markdown
-pymdown-extensions
+latex2mathml