Replace MathJax+gr.HTML with gr.Markdown+KaTeX for reliable math rendering

MathJax + gr.HTML was unreliable: the typeset JS callback couldn't find
.math-preview due to Gradio's shadow DOM isolation, and the head= script
injection had no guaranteed timing. Switch to gr.Markdown with built-in
KaTeX via latex_delimiters — math rendering is handled natively by Gradio
with no external scripts or JS callbacks needed.

- Remove MATHJAX_HEAD, md_lib import, pymdownx.arithmatex dependency
- Replace to_math_html() with to_math_md(): just converts \[...\] → $$...$$
and \(...\) → $...$ for gr.Markdown's KaTeX renderer
- Replace gr.HTML with gr.Markdown(latex_delimiters=[...])
- Remove submit_event MathJax typeset JS handler
- Remove head=MATHJAX_HEAD from launch()

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

app.py

@@ -11,7 +11,7 @@ import fitz
 import re
 import numpy as np
 import base64
-import markdown as md_lib
+
 from io import StringIO, BytesIO
 
 # Model options — swap MODEL_NAME to reduce VRAM usage on GPUs with <= 8GB
@@ -112,82 +112,17 @@ def clean_output(text, include_images=False):
     
     return text.strip()
 
-MATHJAX_HEAD = """
-<script>
-window.MathJax = {
-  loader: {load: ['[tex]/mathtools']},
-  tex: {
-    packages:    {'[+]': ['mathtools']},
-    inlineMath:  [['\\\\(', '\\\\)']],
-    displayMath: [['\\\\[', '\\\\]']],
-    processEscapes: true,
-    tags: 'ams'
-  },
-  options: {
-    skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
-  },
-  startup: {
-    typeset: false
-  }
-};
-</script>
-<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" async></script>
-<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-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 h4, .math-preview h5, .math-preview h6 { font-weight: 600; margin: 0.8em 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-preview .arithmatex { overflow-x: auto; }
-.math-preview mjx-container[display="true"] { display: block; overflow-x: auto; padding: 0.5em 0; }
-</style>
-"""
-
-def to_math_html(text):
+def to_math_md(text):
+    """Convert model output to markdown with $$/$ delimiters for gr.Markdown + KaTeX."""
     if not text:
         return ""
-    # Pre-convert \[...\] and \(...\) to $$...$$ and $...$
-    # Markdown strips backslashes before arithmatex can protect them,
-    # so convert to $-delimiters first (arithmatex recognises those).
-    #
-    # IMPORTANT: the model outputs " \[ content \] " with surrounding spaces.
-    # Naively replacing to "$$ content $$" (space after $$) causes arithmatex
-    # to mis-parse as inline math surrounded by literal $ signs, which is why
-    # equations appeared as "$ ... $" instead of rendered display math.
-    # Fix: use the multi-line block form ($$\ncontent\n$$) and strip whitespace.
+    # \[...\] → $$\ncontent\n$$ (block display math)
     text = re.sub(r'\\\[(.+?)\\\]',
                   lambda m: f'\n\n$$\n{m.group(1).strip()}\n$$\n\n',
                   text, flags=re.DOTALL)
+    # \(...\) → $...$ (inline math)
     text = re.sub(r'\\\((.+?)\\\)', lambda m: f'${m.group(1).strip()}$', text)
-    html = md_lib.markdown(text, extensions=[
-        'pymdownx.arithmatex',
-        'tables',
-        'fenced_code',
-        'sane_lists',
-    ], extension_configs={
-        'pymdownx.arithmatex': {'generic': True}
-    })
-    return f'<div class="math-preview">{html}</div>'
+    return text
 
 def embed_images(markdown, crops):
     if not crops:
@@ -338,7 +273,7 @@ with gr.Blocks(title="DeepSeek-OCR-2") as demo:
     **Model uses DeepEncoder v2 and achieves 91.09% on OmniDocBench (+3.73% over v1).**
 
     Built on the original [DeepSeek-OCR-2 Demo](https://huggingface.co/spaces/merterbak/DeepSeek-OCR-2) by **Mert Erbak** — thank you for the excellent foundation.
-    This fork adds **MathJax rendering** in the Markdown Preview tab so that equations from scanned papers and textbooks display as proper math notation.
+    This fork adds **math rendering** in the Markdown Preview tab so that equations from scanned papers and textbooks display as proper math notation.
     """)
     
     with gr.Row():
@@ -355,7 +290,13 @@ 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.HTML("")
+                    md_out = gr.Markdown(
+                        "",
+                        latex_delimiters=[
+                            {"left": "$$", "right": "$$", "display": True},
+                            {"left": "$",  "right": "$",  "display": False},
+                        ],
+                    )
                 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"):
@@ -428,36 +369,12 @@ with gr.Blocks(title="DeepSeek-OCR-2") as demo:
         dl_tmp.write(cleaned)
         dl_tmp.close()
 
-        return (text_display, to_math_html(markdown), raw, img_out, crops,
+        return (text_display, to_math_md(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],
                              [text_out, md_out, raw_out, img_out, gallery, download_btn])
     submit_event.then(select_boxes, [task], [tabs])
-    submit_event.then(fn=None, js="""() => {
-      const tryTypeset = () => {
-        if (!window.MathJax || !MathJax.typesetPromise) { setTimeout(tryTypeset, 100); return; }
-        // Gradio renders gr.HTML inside a shadow DOM, so document.querySelector
-        // won't find .math-preview. Walk all shadow roots to locate it.
-        const findInShadows = (root) => {
-          const el = root.querySelector('.math-preview');
-          if (el) return el;
-          for (const node of root.querySelectorAll('*')) {
-            if (node.shadowRoot) {
-              const found = findInShadows(node.shadowRoot);
-              if (found) return found;
-            }
-          }
-          return null;
-        };
-        const el = findInShadows(document);
-        if (!el) { MathJax.typesetPromise(); return; }
-        MathJax.typesetClear([el]);
-        MathJax.typesetPromise([el]);
-      };
-      setTimeout(tryTypeset, 200);   // primary: catches most cases
-      setTimeout(tryTypeset, 2000);  // fallback: GPU cold-start can delay DOM update
-    }""")
 
 if __name__ == "__main__":
     # server_name="0.0.0.0" is needed locally (WSL2 → Windows access)
@@ -466,6 +383,5 @@ if __name__ == "__main__":
     demo.queue(max_size=20).launch(
         theme=gr.themes.Soft(),
         server_name="0.0.0.0" if local else None,
-        head=MATHJAX_HEAD,   # Gradio 6.0: head moved from Blocks() to launch()
         ssr_mode=False,      # SSR is experimental in Gradio 6 and breaks HF Spaces routing
     )