Spaces:

ricklon
/

DeepSeek-OCR-2-Math

Running on Zero

App Files Files Community

ricklon commited on Mar 3

Commit

5c1486c

1 Parent(s): 07a370e

Add HTML+MathJax preview panel with source view

Browse files

Files changed (1) hide show

app.py +64 -3

app.py CHANGED Viewed

@@ -235,6 +235,62 @@ def to_math_html(text: str) -> str:
     return f'<div class="math-preview">{html}</div>'
 def embed_images(markdown, crops):
     if not crops:
         return markdown
@@ -402,6 +458,9 @@ with gr.Blocks(title="DeepSeek-OCR-2") as demo:
                     text_out = gr.Textbox(lines=20, buttons=["copy"], show_label=False)
                 with gr.Tab("Markdown Preview", id="tab_markdown"):
                     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"):
@@ -461,7 +520,7 @@ with gr.Blocks(title="DeepSeek-OCR-2") as demo:
         elif image is not None:
             cleaned, markdown, raw, img_out, crops = process_image(image, task, custom_prompt)
         else:
-            return "Error: Upload a file or image", "", "", None, [], gr.DownloadButton(visible=False)
         # Text tab: convert \[...\] → $$...$$ and \(...\) → $...$ for readability
         text_display = re.sub(r'\\\[(.+?)\\\]',
@@ -474,11 +533,13 @@ 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,
                 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])
 if __name__ == "__main__":

     return f'<div class="math-preview">{html}</div>'
+def to_mathjax_html(text: str) -> str:
+    """Render markdown to HTML and typeset math client-side with MathJax."""
+    if not text:
+        return ""
+    html = md_lib.markdown(text, extensions=['tables', 'fenced_code', 'sane_lists', 'nl2br'])
+    return f"""<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    body {{
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      font-size: 15px;
+      line-height: 1.8;
+      color: #1a1a1a;
+    }}
+    .mathjax-preview {{
+      padding: 1.5em;
+      max-width: 100%;
+      overflow-x: auto;
+    }}
+    .mathjax-preview h1 {{ font-size: 1.8em; font-weight: 700; margin: 1em 0 0.4em; border-bottom: 2px solid #e0e0e0; padding-bottom: 0.3em; }}
+    .mathjax-preview h2 {{ font-size: 1.4em; font-weight: 600; margin: 1em 0 0.4em; border-bottom: 1px solid #e0e0e0; padding-bottom: 0.2em; }}
+    .mathjax-preview h3 {{ font-size: 1.15em; font-weight: 600; margin: 0.9em 0 0.3em; }}
+    .mathjax-preview p  {{ margin: 0.6em 0; }}
+    .mathjax-preview ul, .mathjax-preview ol {{ padding-left: 1.8em; margin: 0.5em 0; }}
+    .mathjax-preview li {{ margin: 0.25em 0; }}
+    .mathjax-preview table {{ border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.95em; }}
+    .mathjax-preview th, .mathjax-preview td {{ border: 1px solid #ccc; padding: 0.45em 0.75em; text-align: left; }}
+    .mathjax-preview th {{ background: #f2f2f2; font-weight: 600; }}
+    .mathjax-preview tr:nth-child(even) {{ background: #fafafa; }}
+    .mathjax-preview code {{ background: #f4f4f4; padding: 0.15em 0.4em; border-radius: 3px; font-family: 'Courier New', monospace; font-size: 0.88em; }}
+    .mathjax-preview pre  {{ background: #f4f4f4; padding: 1em; border-radius: 5px; overflow-x: auto; margin: 0.8em 0; }}
+    .mathjax-preview pre code {{ background: none; padding: 0; }}
+    .mathjax-preview blockquote {{ border-left: 4px solid #ccc; margin: 0.8em 0; padding: 0.4em 1em; color: #555; background: #fafafa; }}
+    .mathjax-preview img {{ max-width: 100%; height: auto; display: block; margin: 0.8em 0; }}
+  </style>
+  <script>
+    window.MathJax = {{
+      tex: {{
+        inlineMath: [['\\\\(', '\\\\)'], ['$', '$']],
+        displayMath: [['\\\\[', '\\\\]'], ['$$', '$$']]
+      }},
+      options: {{
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+      }}
+    }};
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+</head>
+<body>
+  <div class="mathjax-preview">{html}</div>
+</body>
+</html>"""
 def embed_images(markdown, crops):
     if not crops:
         return markdown
                     text_out = gr.Textbox(lines=20, buttons=["copy"], show_label=False)
                 with gr.Tab("Markdown Preview", id="tab_markdown"):
                     md_out = gr.HTML("")
+                with gr.Tab("HTML + MathJax", id="tab_html"):
+                    html_out = gr.HTML("")
+                    html_source_out = gr.Code(label="Generated HTML Source", language="html", lines=16)
                 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"):
         elif image is not None:
             cleaned, markdown, raw, img_out, crops = process_image(image, task, custom_prompt)
         else:
+            return "Error: Upload a file or image", "", "", "", "", None, [], gr.DownloadButton(visible=False)
         # Text tab: convert \[...\] → $$...$$ and \(...\) → $...$ for readability
         text_display = re.sub(r'\\\[(.+?)\\\]',
         dl_tmp.write(cleaned)
         dl_tmp.close()
+        mathjax_html = to_mathjax_html(markdown)
+        return (text_display, to_math_html(markdown), mathjax_html, mathjax_html, 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, html_out, html_source_out, raw_out, img_out, gallery, download_btn])
     submit_event.then(select_boxes, [task], [tabs])
 if __name__ == "__main__":