Rendering LaTeX from a source (how to escape the backslashes?)

[VoidZeroe]

Describe the bug

I built an app that displays calculations both inline and in blocks, after specifying delimiters, the app that worked properly with version 4.44 no longer works after updating to 5.20, tried for all versions>5 and the result was the same.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

delimiters=[{"left": "$$", "right": "$$", "display": True },
            {"left": "$", "right": "$", "display": False }, 
               ]
import gradio as gr
with gr.Blocks() as demo:
    gr.Markdown("""This is an example of inline math: $E = mc^2$. You can also use inline mode for small fractions like $\frac{a}{b}$.

Now, here is a displayed equation:

$$F = G \frac{m_1 m_2}{r^2}$$ """)
demo.launch(debug=True, share=False, server_port=8080)

Screenshot

the text gets printed without rendering

Logs

No Errors

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 5.20.1
gradio_client version: 1.7.2

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.8.0
audioop-lts: 0.2.1
fastapi: 0.115.11
ffmpy: 0.5.0
gradio-client==1.7.2 is not installed.
groovy: 0.1.2
httpx: 0.28.1
huggingface-hub: 0.29.3
jinja2: 3.1.6
markupsafe: 2.1.5
numpy: 2.2.3
orjson: 3.10.15
packaging: 24.2
pandas: 2.2.3
pillow: 11.1.0
pydantic: 2.10.6
pydub: 0.25.1
python-multipart: 0.0.20
pyyaml: 6.0.2
ruff: 0.9.10
safehttpx: 0.1.6
semantic-version: 2.10.0
starlette: 0.46.1
tomlkit: 0.13.2
typer: 0.15.2
typing-extensions: 4.12.2
urllib3: 2.3.0
uvicorn: 0.34.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2025.3.0
httpx: 0.28.1
huggingface-hub: 0.29.3
packaging: 24.2
typing-extensions: 4.12.2
websockets: 15.0.1

Severity

Blocking usage of gradio

[abidlabs]

Hi @VoidZeroe there are two issues with the code example:

• the delimeters need to be passed via the latex_delimiters parameter
• Python uses \ to escape characters so you'll need to double-\ for Latex, or pass in a r-string, like this:

[VoidZeroe]

sorry, seems I made a mistake with the first code I sent, here's an accurate reproduction code:

import gradio as gr

delimiters=[{"left": "$$", "right": "$$", "display": True },
            {"left": "$", "right": "$", "display": False }, 
               ]
string1= r"""This is an example of inline math: $E = mc^2$. You can also use inline mode for small fractions like $\frac{a}{b}$.

Now, here is a displayed equation:

$$F = G \frac{m_1 m_2}{r^2}$$ """
string2 ="""This is an example of inline math: $E = mc^2$. You can also use inline mode for small fractions like $\frac{a}{b}$.

Now, here is a displayed equation:

$$F = G \frac{m_1 m_2}{r^2}$$ """
string2 = string2.replace("\\", "\\\\")
string3 = repr(string2)

with gr.Blocks() as demo:
    gr.Chatbot([(string1, string2),
                (None, string3)],height=500, latex_delimiters=delimiters, label="latex display", show_label = True)
    
demo.launch(debug=True, share=False)

here's the result, the r-string only works if you are defining string in code not reading from a text source

[metal3d]

I tried a lot to make it work with Deepseek model that uses MathJax notation a lot.

latex_delimiters: list[dict[str, str | bool]] = [
    {"left": "```math", "right": "```", "display": True},
    {"left": "$$", "right": "$$", "display": True},
    {"left": "$", "right": "$", "display": False},
    {"left": "\\(", "right": "\\)", "display": False},
    {"left": "\\begin{equation}", "right": "\\end{equation}", "display": True},
    {"left": "\\begin{align}", "right": "\\end{align}", "display": True},
    {"left": "\\begin{alignat}", "right": "\\end{alignat}", "display": True},
    {"left": "\\begin{gather}", "right": "\\end{gather}", "display": True},
    {"left": "\\begin{CD}", "right": "\\end{CD}", "display": True},
    {"left": "\\[", "right": "\\]", "display": True},
]


chatinterface = gr.Chatbot(
    label="TEST",
    scale=1,
    latex_delimiters=latex_delimiters,
)

demo = gr.ChatInterface(
    chat,
    chatbot=chatinterface,
    type="messages",
    title=str(model_name),
    description=(
        f"*{model_name}* is a large language model "
        "trained on a mixture of instruction and "
        "conversational data."
    ),
)

Whatever I do, the response is never transformed as it should:

The raw text, that I display in the terminal too:

The sigmoid function, commonly used in machine learning for binary classification tasks, is defined as:

\[ f(x) = \frac{1}{1 + e^{-x}} \]

This function maps any real number \( x \) to a value between 0 and 1, making it ideal for converting outputs into probabilities. 

Additionally, the derivative of the sigmoid function, which is crucial for optimization algorithms like gradient descent in neural networks, is:

\[ f'(x) = f(x)(1 - f(x)) \]

This derivative is particularly useful as it provides the slope of the sigmoid function at any point \( x \), indicating how steep the function is at that point. The sigmoid function's output, \( f(x) \), is between 0 and 1, wh
ich is why it's often used in binary classification problems to represent 
The sigmoid function, commonly used in machine learning for binary classification tasks, is defined as:

\[ f(x) = \frac{1}{1 + e^{-x}} \]

This function maps any real number \( x \) to a value between 0 and 1, making it ideal for converting outputs into probabilities. 

Additionally, the derivative of the sigmoid function, which is crucial for optimization algorithms like gradient descent in neural networks, is:

\[ f'(x) = f(x)(1 - f(x)) \]

My delimiters are taken from the Katex documentation, the paged linked from the gradio documentation.

Hope that someone can fix or help 😄

[metal3d]

OK, this is what I could do to fix my problems. Maybe it can help others:

def reformat_math(text):
    text = re.sub(r"\\\[\s*(.*?)\s*\\\]", r"$$\1$$", text, flags=re.DOTALL)
    text = re.sub(r"\\\(\s*(.*?)\s*\\\)", r"$\1$", text, flags=re.DOTALL)
    return text


# in my chat function
def chat(message, history):
   # ...
   # I'm using a continuous token readed (TextIteratorStreamer from transformers)
   # But it works with a "one shot" text
   buffer = ""
   for new_token in stremer:
       buffer += new_token
       yield reformat_math(buffer)

# And I need to force the latex_delimiters using an 
# external `gr.ChatBot` because `gr.ChatInterface` hasn't 
# got the `latex_delimiters` argument:

chat_bot = gr.Chatbot(
    latex_delimiters=[
        {"left": "$$", "right": "$$", "display": True},
        {"left": "$", "right": "$", "display": False},
    ],
    scale=1,
    type="messages",
)

demo = gr.ChatInterface(
    chat,
    type="messages",
    chatbot=chat_bot,
    title=str(model_name),
    description=(
        f"*{model_name}* is a large language model "
        "trained on a mixture of instruction and "
        "conversational data."
    ),
)

This means that latex_delimiters doesn't accept \[ and \] or \( and \), whatever if I set them up in the list. I need to rewrite the text to replace them and it's essential to remove the spaces for the form $x$. The $ x $ fails to be displayed.

I'm not sure my answer is completely relative to the initial question. But if it can help...