Enhancement: Mirror ChatGPT's equation rendering.

[zyxir]

What features would you like to see added?

Add \(...\) and \[...\] delimiters for equation rendering, as in ChatGPT.

More details

First, I'd like to express my sincere gratitude to the developers for their exceptional work on LibreChat. As a STEM guy who frequently interacts with mathematical equations, I've recently encountered some unexpected behavior in this area. Upon closer examination, I discovered that:

1. ChatGPT (chat.openai.com) pruduces equations surrounded by \(...\) and \[...\] by default. The Pictures section showcases how these equations are flawlessly displayed within ChatGPT's web interface.
2. When called from the API, GPT 3.5 Turbo uses an unusual default format for equations. But upon request, it outputs equations using the same \(...\) and \[...\] delimiters as ChatGPT. To ensure LibreChat compatibility, GPT 3.5 Turbo's API must be explicitly prompted to use $...$ and $$...$$ for equation formatting, as dipicted in the Pictures section.

While adjusting the system prompt offers a workaround, \(...\) and \[...\] allow equations to coexist peacefully with the dollar sign's primary use as a currency symbol. That's likely why both ChatGPT and Org-mode embrace these delimiters. Since LibreChat claims to have a UI matching ChatGPT, matching equation rendering capabilities would be a fantastic improvement.

Additional information: Upon further investigatgion, I found that equation rendering is provided by rehype-katex and remark-math in LibreChat. rehype-katex renders math contents via KaTeX, while remark-math converts contents surrounded by dollar signs into math content. While exploring the issue list of remark-math, I stumbled upon this issue where the developer declined to implement \(...\) or \[...\] delimiters within the plugin. This may make the enhancement I propose harder or even impractical to implement. Therefore, I would appreciate the opportunity to discuss the significance and feasibility of the proposal with you.

Which components are impacted by your request?

UI

Pictures

Equation rendering within ChatGPT: Equation rendering within LibreChat:

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[danny-avila]

I'm looking into it. The dev says to "just" fork the package yet it's not super straight-forward as it uses several different packages all published by him lol I'll dive deeper into the runtime to figure what's what

[SailFlorve]

To be honest, I've encountered the same issue as well. My users and I deal with a large number of formulas every day. Although the developers of remark-math seem somewhat irresponsible, they cannot be blamed too much, as the format is not a standard latex formulas. I need a solution that is seamless for the users. Here is my solution:

1. Enforce the addition of a system prompt, requiring the use of $ to wrap the formulas. However, this needs to handle the compatibility with user-defined system prompts, which means adding it after the existing promptPrefix in OpenAIClient.js.
2. Also in OpenAIClient.js, replace \[ in the reply string with $, and do the same for others. This may lead to issues such as needing the entire message to be output before it displays, and it may cause other problems.
3. Look for other libraries that support the rendering of formulas in the chatgpt format.

[zyxir]

@SailFlorve Thank you for your solutions. Here is my opinons on each of them:

1. Compatibility is an issue. As a user with basic programming knowledge, I prefer the developer suggesting me to append the instruction (use $ to ...) to my prompt, instead of doing this in a hidden way and causing surprises.
2. That makes the chat bot clunky to use. People will be less likely to use your UI, I guess. However, if the application is not a chat bot, such as an AI-powered content generator, that will be an viable option.
3. Since remark is a very popular markdown implementation, there might not be many alternatives with equal quality. Forking remark-math might be an option.

[SailFlorve]

Of course, this is just a stopgap measure, not a complete solution, but a temporary patch.

[danny-avila]

@SailFlorve @zyxir

1. Best way with the current state is to use a preset on a per-user basis in my opinion
2. Using regex to replace the unsupported delimiters would not be a bad approach and probably the quickest fix. It would be best to wait until the response is done to do so.
3. Forking remark-math would be the cleanest solution but is also the most complex. the unified/remark plugin framework is not easy to learn. I dove into it for about an hour yesterday and didn't get much out of it.

[assassinliujie]

i tried to use a preset prompt but some equations didn't work

like the ( \frac{6}{8} \times h )and the what prompt should I use

[SailFlorve]

i tried to use a preset prompt but some equations didn't work

My prompt is simple but works great:

Latex inline: $x^2$.   
Latex block: $$e=mc^2$$.

[assassinliujie]

i tried to use a preset prompt but some equations didn't work

My prompt is simple but works great:

Latex inline: $x^2$.   
Latex block: $$e=mc^2$$.

thanks for the reply. I tried your prompt and find out it is very useful in English, but not work very well with Chinese. but still thanks

[assassinliujie]

i tried to use a preset prompt but some equations didn't work

My prompt is simple but works great:

Latex inline: $x^2$.   
Latex block: $$e=mc^2$$.

Latex inline: $x^2$.    not\(x^2\)  
Latex block: $$e=mc^2$$.

this may work better

[danny-avila]

Just an update here. I think some simple parsing on the frontend would help and close this issue once and for all. I might make it optional but enabled by default to begin, as it can potentially impact performance especially on mobile and longer threads of conversation.

Raw text:

Post-parsing and Render:

if this is satisfactory, I will move forward

[SailFlorve]

Looks Great. Is it instantaneous or have to wait until the entire response is done? I'm looking forward to seeing the new commit.

[danny-avila]

Looks Great. Is it instantaneous or have to wait until the entire response is done? I'm looking forward to seeing the new commit.

it's instantaneous as soon as LaTeX is detected!

[danny-avila]

https://github.com/danny-avila/LibreChat/assets/110412045/43c30748-bd50-4739-9040-9be4aaabe8a6

[zyxir]

What a nice implementation! Thank you for your hard work.