fix latex rendering

app.py

@@ -7,8 +7,24 @@ from typing import Any, Dict, List
 
 import gradio as gr
 
-
-# Regex to capture common LaTeX math delimiters
+# Optional LaTeX → MathML conversion (install: pip install latex2mathml)
+try:
+    from latex2mathml.converter import convert as _latex_to_mathml
+except Exception:  # pragma: no cover
+    _latex_to_mathml = None
+
+# Optional Markdown renderer (install: pip install markdown)
+try:
+    import markdown as _markdown
+except Exception:  # pragma: no cover
+    _markdown = None
+
+# Precompile math pattern once to avoid recompilation on every render
+# Captures four math forms with inner content groups preserved:
+# 1) $$ ... $$   → group2
+# 2) $ ... $     → group4
+# 3) \[ ... \]  → group6
+# 4) \( ... \)  → group8
 MATH_PATTERN = re.compile(
     r"(\$\$(.*?)\$\$)"  # $$block$$
     r"|(\$([^\$\n]+?)\$)"  # $inline$
@@ -19,10 +35,12 @@ MATH_PATTERN = re.compile(
 
 
 def format_step_content(content: str) -> str:
-    """Render content to simple HTML with basic LaTeX handling.
+    """Render content to HTML with Markdown and LaTeX support.
 
-    This keeps things lightweight: escape non-math parts and preserve
-    math segments literally so the viewer can copy/read the LaTeX.
+    If the optional `markdown` package is available, we tokenize LaTeX spans,
+    render Markdown so headings/lists/emphasis work, then substitute tokens
+    with MathML (via latex2mathml). Otherwise, we fall back to escaping with
+    inline MathML conversion.
 
     Args:
         content: Raw text content possibly containing LaTeX snippets.
@@ -33,23 +51,133 @@ def format_step_content(content: str) -> str:
     if not content:
         return ""
 
+    # Use precompiled regex to capture block and inline math (see MATH_PATTERN above)
+
+    if _markdown is not None:
+        # Tokenize math, render Markdown, then substitute tokens with MathML
+        parts: list[str] = []
+        token_to_html: dict[str, str] = {}
+        last_idx = 0
+        token_index = 0
+
+        for m in MATH_PATTERN.finditer(content):
+            # Non-math prefix: normalize light TeX-ish helpers for MD
+            prefix = content[last_idx : m.start()]
+            if prefix:
+                prefix = re.sub(r"\\text\{([^}]*)\}", r"\1", prefix)
+                prefix = re.sub(r"\\emph\{([^}]*)\}", r"*\1*", prefix)
+                prefix = re.sub(r"\\Bbb\{([^}]*)\}", r"\\mathbb{\1}", prefix)
+                parts.append(prefix)
+
+            # Extract LaTeX
+            latex_src = None
+            display = False
+            if m.group(2) is not None:
+                latex_src = m.group(2)
+                display = True
+            elif m.group(4) is not None:
+                latex_src = m.group(4)
+                display = False
+            elif m.group(6) is not None:
+                latex_src = m.group(6)
+                display = True
+            elif m.group(8) is not None:
+                latex_src = m.group(8)
+                display = False
+
+            token = f"[[[MATH_TOKEN_{token_index}]]]"
+            token_index += 1
+            if latex_src is None:
+                token_to_html[token] = html.escape(m.group(0)).replace("\n", "<br>")
+            else:
+                try:
+                    if _latex_to_mathml is not None:
+                        mathml = _latex_to_mathml(latex_src)
+                        if display and mathml.startswith("<math") and " display=" not in mathml:
+                            mathml = mathml.replace("<math", '<math display="block"', 1)
+                        token_to_html[token] = mathml
+                    else:
+                        token_to_html[token] = html.escape(m.group(0)).replace("\n", "<br>")
+                except Exception:
+                    token_to_html[token] = html.escape(m.group(0)).replace("\n", "<br>")
+
+            parts.append(token)
+            last_idx = m.end()
+
+        # Trailing non-math
+        tail = content[last_idx:]
+        if tail:
+            tail = re.sub(r"\\text\{([^}]*)\}", r"\1", tail)
+            tail = re.sub(r"\\emph\{([^}]*)\}", r"*\1*", tail)
+            tail = re.sub(r"\\Bbb\{([^}]*)\}", r"\\mathbb{\1}", tail)
+            parts.append(tail)
+
+        text_with_tokens = "".join(parts)
+        try:
+            html_out = _markdown.markdown(text_with_tokens, extensions=["extra", "sane_lists", "nl2br"])
+        except Exception:
+            html_out = html.escape(text_with_tokens).replace("\n", "<br>")
+
+        for token, token_html in token_to_html.items():
+            html_out = html_out.replace(token, token_html)
+        return html_out
+
+    # Fallback: previous approach (safe HTML escaping + optional MathML)
     text = content
+
     rendered_parts: list[str] = []
     last_idx = 0
 
     for m in MATH_PATTERN.finditer(text):
-        # Non-math prefix
+        # Add preceding non-math segment (escaped, with mild TeX tweaks)
         prefix = text[last_idx : m.start()]
         if prefix:
+            # In non-math, normalize a few TeX-ish helpers
+            prefix = re.sub(r"\\text\{([^}]*)\}", r"\1", prefix)
+            prefix = re.sub(r"\\emph\{([^}]*)\}", r"<em>\1</em>", prefix)
+            prefix = re.sub(r"\\Bbb\{([^}]*)\}", r"\\mathbb{\1}", prefix)
             rendered_parts.append(html.escape(prefix).replace("\n", "<br>"))
 
-        # Math segment (kept as-is, escaped for HTML visibility)
-        rendered_parts.append(html.escape(m.group(0)).replace("\n", "<br>"))
+        # Determine which group matched and extract LaTeX
+        latex_src = None
+        display = False
+        if m.group(2) is not None:  # $$ ... $$
+            latex_src = m.group(2)
+            display = True
+        elif m.group(4) is not None:  # $ ... $
+            latex_src = m.group(4)
+            display = False
+        elif m.group(6) is not None:  # \[ ... \]
+            latex_src = m.group(6)
+            display = True
+        elif m.group(8) is not None:  # \( ... \)
+            latex_src = m.group(8)
+            display = False
+
+        if latex_src is None:
+            # Should not happen; just append raw match safely
+            rendered_parts.append(html.escape(m.group(0)).replace("\n", "<br>"))
+        else:
+            try:
+                mathml = _latex_to_mathml(latex_src)
+                # Ensure block math displays as block
+                if display and mathml.startswith("<math"):
+                    if " display=" not in mathml:
+                        mathml = mathml.replace("<math", '<math display="block"', 1)
+                rendered_parts.append(mathml)
+            except Exception:
+                # On failure, fall back to showing the LaTeX literally
+                fallback = html.escape(m.group(0)).replace("\n", "<br>")
+                rendered_parts.append(fallback)
+
         last_idx = m.end()
 
-    # Trailing non-math
+    # Trailing non-math segment
     tail = text[last_idx:]
     if tail:
+        tail = re.sub(r"\\text\{([^}]*)\}", r"\1", tail)
+        tail = re.sub(r"\\emph\{([^}]*)\}", r"<em>\1</em>", tail)
+        tail = re.sub(r"\\Bbb\{([^}]*)\}", r"\\mathbb{\1}", tail)
         rendered_parts.append(html.escape(tail).replace("\n", "<br>"))
 
     return "".join(rendered_parts)
@@ -292,7 +420,30 @@ def create_gradio_interface(data_dir: str):
     """
     runs = list_runs(data_dir)
 
-    with gr.Blocks(title="Simple Episode Viewer") as demo:
+    custom_css = """
+    /* ─── force global light theme & readable text ─────────────── */
+    :root, html, body, #root, .gradio-container{
+        background:#ffffff !important;
+        color-scheme:light;
+        color:#111 !important;
+    }
+    .gradio-container{
+        --body-background-fill:#ffffff;
+        --background-fill-primary:#ffffff;
+        --background-fill-secondary:#ffffff;
+        --block-background-fill:#ffffff;
+        --panel-background-fill:#ffffff;
+    }
+
+    /* ─── normalize MathML text color to match content ─────────── */
+    math, math *{
+        color:#333 !important;
+        fill:#333 !important;
+        stroke:#333 !important;
+    }
+    """
+
+    with gr.Blocks(title="Simple Episode Viewer", css=custom_css) as demo:
         with gr.Group():
             with gr.Row():
                 run_dropdown = gr.Dropdown(choices=runs, value=None, label="Run (subdirectory)")

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+markdown
+latex2mathml