Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 14:13:35 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[GH-ISSUE #2018] [FEAT]: Add support for MathJax to properly display mathematical formulas #1316

New Issue
Closed
opened 2026-02-22 18:24:14 -05:00 by yindo · 12 comments
yindo commented 2026-02-22 18:24:14 -05:00
Owner
Copy Link
Copy Source

Originally created by @shock on GitHub (Aug 1, 2024).
Original GitHub issue: https://github.com/Mintplex-Labs/anything-llm/issues/2018

Originally assigned to: @timothycarambat on GitHub.

What would you like to see?

When OpenAI generates mathematical formulas, they don't display correctly. I did a bit of research, and I believe support could be added using MathJax to convert the LaTeX (Tex) used by OpenAI (and potentially other LLMs) into SVG typography in the chat interface.

Eg:

\[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]

would be converted to

image

It looks like it could be as easy as inserting a script tag:

https://www.mathjax.org/#docs

jsbin example

If someone were to point me to the right place in the code, I'd be happy to try it and submit a PR.

Originally created by @shock on GitHub (Aug 1, 2024). Original GitHub issue: https://github.com/Mintplex-Labs/anything-llm/issues/2018 Originally assigned to: @timothycarambat on GitHub. ### What would you like to see? When OpenAI generates mathematical formulas, they don't display correctly. I did a bit of research, and I believe support could be added using MathJax to convert the LaTeX (Tex) used by OpenAI (and potentially other LLMs) into SVG typography in the chat interface. Eg: ```latex \[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \] ``` would be converted to <img width="228" alt="image" src="https://github.com/user-attachments/assets/888631c4-85e5-4118-a138-17abbb7d44d2"> --- It looks like it could be as easy as inserting a script tag: https://www.mathjax.org/#docs [jsbin example](https://jsbin.com/?html=%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Cmeta%20charset%3D%22utf-8%22%3E%0A%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%22%3E%0A%20%20%3Ctitle%3EMathJax%20example%3C%2Ftitle%3E%0A%20%20%3Cscript%20id%3D%22MathJax-script%22%20async%0A%20%20%20%20%20%20%20%20%20%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fmathjax%403.0.1%2Fes5%2Ftex-mml-chtml.js%22%3E%0A%20%20%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Cp%3E%0A%20%20When%20%5C(a%20%5Cne%200%5C)%2C%20there%20are%20two%20solutions%20to%20%5C(ax%5E2%20%2B%20bx%20%2B%20c%20%3D%200%5C)%20and%20they%20are%0A%20%20%5C%5Bx%20%3D%20%7B-b%20%5Cpm%20%5Csqrt%7Bb%5E2-4ac%7D%20%5Cover%202a%7D.%5C%5D%0A%3C%2Fp%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E&live) If someone were to point me to the right place in the code, I'd be happy to try it and submit a PR.
yindo added the enhancementfeature request labels 2026-02-22 18:24:14 -05:00
yindo closed this issue 2026-02-22 18:24:14 -05:00
yindo commented 2026-02-22 18:24:14 -05:00
Author
Owner
Copy Link
Copy Source

@timothycarambat commented on GitHub (Aug 1, 2024):

Noting: https://github.com/tani/markdown-it-mathjax3

@timothycarambat commented on GitHub (Aug 1, 2024): Noting: https://github.com/tani/markdown-it-mathjax3
yindo commented 2026-02-22 18:24:14 -05:00
Author
Owner
Copy Link
Copy Source

@JDelekto commented on GitHub (Aug 3, 2024):

@timothycarambat, thank you for looking into this! I got here searching for this very thing in AnythingLLM. LaTeX formatting for responses will be invaluable when working with mathematical instruction.

@JDelekto commented on GitHub (Aug 3, 2024): @timothycarambat, thank you for looking into this! I got here searching for this very thing in AnythingLLM. LaTeX formatting for responses will be invaluable when working with mathematical instruction.
yindo commented 2026-02-22 18:24:14 -05:00
Author
Owner
Copy Link
Copy Source

@timothycarambat commented on GitHub (Aug 5, 2024):

@JDelekto Got caught up last week and couldn't get to this - will try this week. I understand how important this is for yours and others use case (mostly academic it seems?)

@timothycarambat commented on GitHub (Aug 5, 2024): @JDelekto Got caught up last week and couldn't get to this - will try this week. I understand how important this is for yours and others use case (mostly academic it seems?)
yindo commented 2026-02-22 18:24:14 -05:00
Author
Owner
Copy Link
Copy Source

@JDelekto commented on GitHub (Aug 5, 2024):

@timothycarambat, while I don't work in academia, it is for academic purposes. I want to create customized math lessons for a young child, displaying equations and formulas as if written on a whiteboard.

@JDelekto commented on GitHub (Aug 5, 2024): @timothycarambat, while I don't work in academia, it is for academic purposes. I want to create customized math lessons for a young child, displaying equations and formulas as if written on a whiteboard.
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@vanabel commented on GitHub (Aug 7, 2024):

I’d like to share this simple HTML+JavaScript example that works with MathJax for typesetting. I hope it is helpful!

<!DOCTYPE html>
<html>
  <head>
    <title>Simple chat web-ui</title>
    <script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
  },
  svg: {
    fontCache: 'global'
  }
};
</script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
  </head>
  <body>

    <form id="dataForm" action="chat.html" method="post">
      <label for="model">Model:</label>
      <input type="text" id="model" name="model" value="gemma:2b">
      <br>
      <label for="message">Message:</label>
      <input type="text" id="message" name="message" value="calculate sin(pi/4)">
      <br>
      <input type="submit" value="Submit">
    </form>

    <div>Response</div>
    <div id="response"></div>

    <script>
      document.getElementById('dataForm').addEventListener('submit', function(e) {
	e.preventDefault();

	const model = document.getElementById('model').value;
	const message = document.getElementById('message').value;
	const data = JSON.stringify({
	  model: model,
	  messages: [{ role: "user", content: message }],
	  max_tokens: 2048,
	  temperature: 0.7
	});

	fetch('http://localhost:11434/v1/chat/completions', {
	  method: 'POST',
	  headers: {
	    'Content-Type': 'application/json',
	  },
	  body: data,
	})
	  .then(response => response.json())
	  .then(data => {
	    // Assuming the response has a "choices" array with objects containing a "message" object
	    // And the "message" object has a "content" property that you want to display
	    if (data.choices && data.choices.length > 0 && data.choices[0].message) {
	      const content = data.choices[0].message.content;
	      document.getElementById('response').innerHTML = content;
	      MathJax.typesetPromise();
	    } else {
	      document.getElementById('response').innerHTML = 'No content available.';
	    }
	  })
	  .catch(error => console.error('Error:', error));
      });
    </script>

  </body>
</html>
@vanabel commented on GitHub (Aug 7, 2024): I’d like to share this simple HTML+JavaScript example that works with MathJax for typesetting. I hope it is helpful! ```html <!DOCTYPE html> <html> <head> <title>Simple chat web-ui</title> <script> MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']], }, svg: { fontCache: 'global' } }; </script> <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"> </script> </head> <body> <form id="dataForm" action="chat.html" method="post"> <label for="model">Model:</label> <input type="text" id="model" name="model" value="gemma:2b"> <br> <label for="message">Message:</label> <input type="text" id="message" name="message" value="calculate sin(pi/4)"> <br> <input type="submit" value="Submit"> </form> <div>Response</div> <div id="response"></div> <script> document.getElementById('dataForm').addEventListener('submit', function(e) { e.preventDefault(); const model = document.getElementById('model').value; const message = document.getElementById('message').value; const data = JSON.stringify({ model: model, messages: [{ role: "user", content: message }], max_tokens: 2048, temperature: 0.7 }); fetch('http://localhost:11434/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: data, }) .then(response => response.json()) .then(data => { // Assuming the response has a "choices" array with objects containing a "message" object // And the "message" object has a "content" property that you want to display if (data.choices && data.choices.length > 0 && data.choices[0].message) { const content = data.choices[0].message.content; document.getElementById('response').innerHTML = content; MathJax.typesetPromise(); } else { document.getElementById('response').innerHTML = 'No content available.'; } }) .catch(error => console.error('Error:', error)); }); </script> </body> </html> ```
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@timothycarambat commented on GitHub (Aug 7, 2024):

This is merged in main now. Please do not open an issue with the context of "Does not format properly" because through testing we have found that the ability for an LLM to produce consistently valid *tex format is...well it's certainly fickle.

If the formatting does not look right, the LLM wrote it wrong - it was not AnythingLLM!!
Screenshot 2024-08-07 at 10 21 23 AM

@timothycarambat commented on GitHub (Aug 7, 2024): This is merged in main now. Please do not open an issue with the context of "Does not format properly" because through testing we have found that the ability for an LLM to produce consistently valid *tex format is...well it's certainly fickle. If the formatting does not look right, the LLM **wrote it wrong** - it was not AnythingLLM!! <img width="1526" alt="Screenshot 2024-08-07 at 10 21 23 AM" src="https://github.com/user-attachments/assets/aa4b42b1-4951-407d-85df-571f780c9ea0">
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@shock commented on GitHub (Aug 8, 2024):

Thanks, @timothycarambat.

@shock commented on GitHub (Aug 8, 2024): Thanks, @timothycarambat.
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@JDelekto commented on GitHub (Aug 8, 2024):

This is awesome @timothycarambat, thank you very much!

@JDelekto commented on GitHub (Aug 8, 2024): This is awesome @timothycarambat, thank you very much!
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@ThunderFD commented on GitHub (Aug 14, 2024):

@timothycarambat thanks for adding this!

However when I just tried out AnythingLLM I thought it didn't have MathJax support because of the following:
it doesn't seem to support formatting in the form of \( ... \) and

\[
...
\]

this is what GPT-4o seems to output unless I ask it to use $ ... $ or

$$
...
$$

See screenshot:
image
the backslashes are not rendered in the chat.

should I open a new issue for this?

@ThunderFD commented on GitHub (Aug 14, 2024): @timothycarambat thanks for adding this! However when I just tried out AnythingLLM I thought it didn't have MathJax support because of the following: it doesn't seem to support formatting in the form of `\( ... \)` and ``` \[ ... \] ``` this is what GPT-4o seems to output unless I ask it to use `$ ... $` or ``` $$ ... $$ ``` See screenshot: <img width="792" alt="image" src="https://github.com/user-attachments/assets/f99a8b08-82ad-48e0-8d19-40ce541a812f"> the backslashes are not rendered in the chat. should I open a new issue for this?
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@TeomanEgeSelcuk commented on GitHub (Sep 24, 2024):

Yes there is an issue with the equations rendered. I cannot see most of the equations that is in the output only when I specify to use $$ does it render partially correctly for block equations and mostly does not work with inline equations

@TeomanEgeSelcuk commented on GitHub (Sep 24, 2024): Yes there is an issue with the equations rendered. I cannot see most of the equations that is in the output only when I specify to use $$ does it render partially correctly for block equations and mostly does not work with inline equations
yindo commented 2026-02-22 18:24:15 -05:00
Author
Owner
Copy Link
Copy Source

@kelvinq commented on GitHub (Oct 8, 2024):

This seems to be working most of the time in the default workspaces. I will open up another separate issue to request for support for the embed widget submodule. Please see #2447

@kelvinq commented on GitHub (Oct 8, 2024): This seems to be working most of the time in the default workspaces. I will open up another separate issue to request for support for the [embed widget submodule](https://github.com/Mintplex-Labs/anythingllm-embed). Please see #2447
yindo changed title from [FEAT]: Add support for MathJax to properly display mathematical formulas to [GH-ISSUE #2018] [FEAT]: Add support for MathJax to properly display mathematical formulas 2026-06-05 14:40:05 -04:00
yindo commented 2026-06-05 14:40:06 -04:00
Author
Owner
Copy Link
Copy Source

@Teo-Selcuk commented on GitHub (Sep 24, 2024):

Yes there is an issue with the equations rendered. I cannot see most of the equations that is in the output only when I specify to use $$ does it render partially correctly for block equations and mostly does not work with inline equations

<!-- gh-comment-id:2372475587 --> @Teo-Selcuk commented on GitHub (Sep 24, 2024): Yes there is an issue with the equations rendered. I cannot see most of the equations that is in the output only when I specify to use $$ does it render partially correctly for block equations and mostly does not work with inline equations
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label enhancement feature request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#1316
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?