Chatbot component freeze when using specific LaTeX delimiters

[GaiZhenbiao]

Describe the bug

The issue I'm encountering is reminiscent of the one documented in #7651. Specifically, when setting certain LaTeX delimiters (such as \[ and \], or $) within the Chatbot component, it ceases to function, accompanied by a JavaScript error identical to the one described in the referenced issue.

I think this malfunction likely stems from a conflict between the JavaScript responsible for markdown rendering and that for LaTeX rendering, as both systems utilize similar notation (e.g., [xxx] in Markdown). Interestingly, using $ as a LaTeX delimiter is expected to be conflict-free, I don't know what could go wrong. Besides, messages incorporating \[ and \] consistently trigger this bug 100% of the time, whereas $ results in the bug approximately 50% of the time.

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import json
import time

import gradio as gr

with open("chatbots3.json", "r") as f:
    data3 = json.load(f)

with open("chatbots4.json", "r") as f:
    data4 = json.load(f)

def update_chatbot3():
    for d in data3:
        time.sleep(0.005)
        yield d

def update_chatbot4():
    for d in data4:
        time.sleep(0.005)
        yield d

latex_delimiters_set = [
        # {"left": "$$", "right": "$$", "display": True},
        # {"left": "\\(", "right": "\\)", "display": False},
        {"left": "\\[", "right": "\\]", "display": True},
        {"left": "$", "right": "$", "display": False},
    ]

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(
        latex_delimiters=latex_delimiters_set,
    )

    trigger_btn3 = gr.Button("Trigger Chatbot Bug [] (100% triggers bug)")
    trigger_btn4 = gr.Button("Trigger Chatbot Bug $$ (~50% triggers bug)")
    trigger_btn3.click(update_chatbot3, [], chatbot)
    trigger_btn4.click(update_chatbot4, [], chatbot)

demo.queue().launch()

chatbots3.json
chatbots4.json

Screenshot

Logs

There is no log printed in Python console, even when debug=True is set.

=========
Chromium JS console log:
Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (http://127.0.0.1:7860/assets/svelte/svelte.js:659:9)
    at HtmlTag.i (http://127.0.0.1:7860/assets/svelte/svelte.js:1534:4)
    at HtmlTag.p (http://127.0.0.1:7860/assets/svelte/svelte.js:1545:8)
    at Object.p (http://127.0.0.1:7860/assets/Example.svelte_svelte_type_style_lang-f389d183.js:332:515)
    at Object.p (http://127.0.0.1:7860/assets/Example.svelte_svelte_type_style_lang-f389d183.js:332:791)
    at update (http://127.0.0.1:7860/assets/svelte/svelte.js:2128:30)
    at flush (http://127.0.0.1:7860/assets/svelte/svelte.js:2088:5)

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.26.0
gradio_client version: 0.15.1

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

aiofiles: 23.2.1
altair: 5.1.2
fastapi: 0.104.1
ffmpy: 0.3.1
gradio-client==0.15.1 is not installed.
httpx: 0.25.2
huggingface-hub: 0.21.3
importlib-resources: 6.1.1
jinja2: 3.1.2
markupsafe: 2.1.3
matplotlib: 3.8.1
numpy: 1.26.4
orjson: 3.10.0
packaging: 23.2
pandas: 2.2.1
pillow: 10.2.0
pydantic: 2.5.2
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.3.0
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.9.0
uvicorn: 0.24.0.post1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2023.10.0
httpx: 0.25.2
huggingface-hub: 0.21.3
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

I can work around it

[Keldos-Li]

BTW, gradio webUI would also break down if set latex_delimiters_set like this

latex_delimiters_set = [
        {"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},
 ]

when bot returns something like

\begin{equation}
E = mc^2
\end{equation}

---

We have noticed that after adapting to gradio4. Gradio3 is fine with mathjax and mark.js

[abidlabs]

thanks for reporting, cc @dawoodkhan82

[Keldos-Li]

Any updates on this？🥺

[GaiZhenbiao]

Any updates on this？🥺

[dawoodkhan82]

Will take a look soon!