feat(webui): improve LaTeX rendering with currency detection

[srogmann]

Close #16136

This PR handles LaTeX blocks in (...) and [...], as well as dollar amounts like $100 that should not be interpreted as inline LaTeX.

Examples (e.g. prompt "Think of a grade 4 math question regarding amounts."):

• ( \mathrm{GL}_2(\mathbb{F}_7) ): Group of invertible matrices with entries in (\mathbb{F}_7).
• Some kernel of (\mathrm{SL}_2(\mathbb{F}_7)):
  [
  \left{ \begin{pmatrix} 1 & 0 \ 0 & 1 \end{pmatrix}, \begin{pmatrix} -1 & 0 \ 0 & -1 \end{pmatrix} \right} = {\pm I}
  ]
• $100 and $12.99 are amounts, not LaTeX.
• I have $10, $3.99 and $x + y$ and $100x$. The amount is $2,000.

@allozaur : I wrote most of this PR a week ago, only just now noticed issue #16136 and your PR #16496. In math-formulas.ts, I've added examples for Storybook, along with tests for Vitest. Feel free to take a look and let me know your thoughts. Detecting inline LaTeX is inherently tricky, so my approach likely won't cover every edge case, but I hope it's a step in the right direction.

[allozaur]

Hey @srogmann! Thank you for this contribution :) Yeah, we will definitely work sth out from these PRs :)

[allozaur]

@ggerganov could u also please take a look at this and test your edge cases?

@watamario15 @squik67 also some feedback & testing from you would be really useful :)

[ggerganov]

These are still not rendered (using gpt-oss):

[allozaur]

Okay, thanks for reporting @ggerganov. I'd like to wait just a bit longer for @watamario15 and @squik67 to add their feedback and verify if there are more edge cases to be addressed before we introduce any further improvements to this.

[srogmann]

Thanks for the tests! I can reproduce the non-rendered formulas. The \[-marker is not at line-begin in the non-working cases.

Example: working and non-working.

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

I'll have a look at it.

[watamario15]

From my quick check, this doesn't get rendered:

- 1 kg の質量は  
  \[
  E = (1\ \text{kg}) \times (3.0 \times 10^8\ \text{m/s})^2 \approx 9.0 \times 10^{16}\ \text{J}
  \]  
  というエネルギーに相当します。これは約 21 百万トンの TNT が爆発したときのエネルギーに匹敵します。

[watamario15]

It's working well on my end with these ↑ commits. Thanks!

(I found a small issue where GPT-OSS tends to escape *s in expressions, resulting them being rendered as \*. Not that important, just fyi.)

[watamario15]

Oh, it looks like erroring on

\[
\boxed{
\begin{aligned}
N_{\text{att}}^{\text{(MHA)}} &=
h \bigl[\, d_{\text{model}}\;d_{k} + d_{\text{model}}\;d_{v}\, \bigr]   && (\text{Q,K,V の重み})\\
&\quad+ h(d_{k}+d_{k}+d_{v})                                          && (\text{バイアス Q,K,V）}\\[4pt]
&\quad+ (h d_{v})\, d_{\text{model}}                                 && (\text{出力射影 }W^{O})\\
&\quad+ d_{\text{model}}                                            && (\text{バイアス }b^{O})
\end{aligned}}
\]

[srogmann]

@watamario15 Thanks! The rendering is now better, but the spacers (e.g. [4pt]) still cause display issues.

[allozaur]

@srogmann

I went ahead and merged #16599 first because it was a quick fix for the immediate issue in #16598 – just converting \( \) and \[ \] to KaTeX-compatible delimiters.

On the other hand your PR solves a bigger problem that #16599 doesn't touch – distinguishing money from math. Right now, $10 and $3.99 will be misinterpreted as LaTeX, which is exactly what #16136 was about. Your solution handles this properly by escaping monetary amounts while keeping real math like $x + y$ intact.

Since your preprocessLaTeX() already includes the bracket conversion logic, your approach is actually the more complete solution. Could you rebase on master? The main thing would be to make sure your preprocessing works alongside the changes from #16599, but your money/math detection and all those tests should stay as-is.

Let me know your thoughts!

[srogmann]

@allozaur The quick fix in #16599 helps in a lot of cases. I wil rebase.

Your samples in src/stories/fixtures/math-formulas.ts help writing this PR using npm run dev. I added some formulas, especially the formulas in tables mentioned by @ggerganov . I will add the 2nd sample mentioned by @watamario15 .

[srogmann]

Regarding the spacer example from @watamario15, I added a small fix and unit test. A sub-pattern like [^\\] in PR #16599 from @ServeurpersoCom ensures that [4pt] spacers aren't misinterpreted. Do we have a real-world example of a backslash before \(...\)?

[ServeurpersoCom]

Regarding the spacer example from @watamario15, I added a small fix and unit test. A sub-pattern like [^\\] in PR #16599 from @ServeurpersoCom ensures that [4pt] spacers aren't misinterpreted. Do we have a real-world example of a backslash before \(...\)?

In real-world scenarios, models can emit mathematical expressions in both MathJax/Markdown and pure LaTeX styles.

They may use either Markdown-style delimiters $...$ / $$...$$ or pure LaTeX delimiters \(...\) / \[...\]
depending on training data and context.
This choice is not consistent : models often switch formats between generations.
When viewed in raw JSON, backslashes appear doubled (\\(, \\[) due to JSON string escaping,
but after deserialization only a single backslash remains, exactly as emitted by the model.

You should never have to deal with doubled backslashes \\( or \\[ in the WebUI : their presence indicates a broken escape handling somewhere in the AST or rendering pipeline.
You can try yourself :

(root|~) curl -s https://www.serveurperso.com/ia/v1/chat/completions   -H "Content-Type: application/json"   -d '{
    "model": "Llama-3_3-Nemotron-Super-49B-v1_5",
    "messages": [
      { "role": "user", "content": "Hello my LLM, please write some mathematics formulas." }
    ],
    "temperature": 0.7
  }'

{"choices":[{"finish_reason":"stop","index":0,"message":{"role":"assistant","reasoning_content":"Okay, the user wants me to write some mathematics formulas. Let me start by understanding what they need. They might be a student or someone interested in math, looking for examples or references. I should cover different areas to be helpful.\n\nFirst, I should include basic algebra formulas. Things like quadratic equation, Pythagorean theorem, and maybe some arithmetic operations. Then move to calculus, like derivatives and integrals. Also, linear algebra with matrices and determinants. Statistics and probability are important too, so include formulas like mean, standard deviation, and probability distributions.\n\nI need to make sure the formulas are correct. Let me recall each one. Quadratic formula is definitely (-b ± sqrt(b²-4ac))/(2a). Pythagorean theorem is a² + b² = c². For calculus, derivative of x^n is nx^(n-1), integral of x^n is x^(n+1)/(n+1). Chain rule and product rule are also essential.\n\nIn linear algebra, matrix multiplication, inverse of a 2x2 matrix, determinant. For statistics, mean is sum divided by n, variance is average of squared deviations. Probability examples like Bayes' theorem and binomial distribution.\n\nI should also consider if they need more advanced topics, but maybe start with the basics. Including a variety ensures they can find what they need. Let me organize them into sections with headings for clarity. That way, the user can easily navigate through different areas.\n\nWait, should I explain each formula or just present them? The user said \"write some mathematics formulas,\" so probably just list them with labels. Maybe add a brief description for context. Also, check for any possible errors in the formulas. For example, the quadratic formula's discriminant is correct. The integral of e^x is e^x, which is right.\n\nIncluding some special functions like Fibonacci sequence or trigonometric identities might add value. But don't overcomplicate. Stick to commonly used formulas. Also, ensure the formatting is correct, using LaTeX for the equations. Since the user might be using this for study or teaching, clear presentation is key.\n\nI think that's a solid plan. Now, structure each section with a heading, list the formulas with their names, and present them in LaTeX. Make sure there's a good mix of different math areas to cover various needs. Double-check each formula for accuracy. Alright, time to put it all together.","content":"Certainly! Here are some fundamental and advanced mathematics formulas across various domains:\n\n---\n\n### **Algebra**\n1. **Quadratic Formula**  \n   For equation $ ax^2 + bx + c = 0 $:  \n   $$\n   x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\n   $$\n\n2. **Pythagorean Theorem**  \n   In a right triangle with sides $ a, b, c $ (hypotenuse):  \n   $$\n   a^2 + b^2 = c^2\n   $$\n\n3. **Arithmetic Sequence**  \n   $ n $-th term:  \n   $$\n   a_n = a_1 + (n-1)d\n   $$  \n   (where $ a_1 $ = first term, $ d $ = common difference)\n\n---\n\n### **Calculus**\n1. **Derivative of $ x^n $**  \n   $$\n   \\frac{d}{dx}x^n = nx^{n-1}\n   $$\n\n2. **Integral of $ x^n $**  \n   $$\n   \\int x^n \\, dx = \\frac{x^{n+1}}{n+1} + C \\quad (n \\neq -1)\n   $$\n\n3. **Chain Rule**  \n   $$\n   \\frac{d}{dx}f(g(x)) = f'(g(x)) \\cdot g'(x)\n   $$\n\n4. **Fundamental Theorem of Calculus**  \n   $$\n   \\int_a^b f(x) \\, dx = F(b) - F(a)\n   $$  \n   (where $ F $ is the antiderivative of $ f $)\n\n---\n\n### **Linear Algebra**\n1. **Matrix Multiplication**  \n   For matrices $ A $ (size $ m \\times n $) and $ B $ (size $ n \\times p $):  \n   $$\n   C_{ij} = \\sum_{k=1}^n A_{ik}B_{kj}\n   $$\n\n2. **Determinant of a 2x2 Matrix**  \n   $$\n   \\det\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix} = ad - bc\n   $$\n\n3. **Eigenvalue Equation**  \n   $$\n   Av = \\lambda v\n   $$  \n   (where $ A $ = matrix, $ v $ = eigenvector, $ \\lambda $ = eigenvalue)\n\n---\n\n### **Statistics & Probability**\n1. **Mean (Arithmetic Average)**  \n   $$\n   \\mu = \\frac{1}{n}\\sum_{i=1}^n x_i\n   $$\n\n2. **Standard Deviation**  \n   $$\n   \\sigma = \\sqrt{\\frac{1}{n}\\sum_{i=1}^n (x_i - \\mu)^2}\n   $$\n\n3. **Bayes' Theorem**  \n   $$\n   P(A|B) = \\frac{P(B|A)P(A)}{P(B)}\n   $$\n\n4. **Binomial Probability**  \n   $$\n   P(k \\text{ successes}) = \\binom{n}{k} p^k (1-p)^{n-k}\n   $$\n\n---\n\n### **Geometry & Trigonometry**\n1. **Area of a Circle**  \n   $$\n   A = \\pi r^2\n   $$\n\n2. **Sine Law**  \n   $$\n   \\frac{a}{\\sin A} = \\frac{b}{\\sin B} = \\frac{c}{\\sin C}\n   $$\n\n3. **Euler's Formula**  \n   $$\n   e^{i\\theta} = \\cos\\theta + i\\sin\\theta\n   $$\n\n---\n\n### **Special Functions**\n1. **Fibonacci Sequence**  \n   $$\n   F_n = F_{n-1} + F_{n-2}, \\quad F_0 = 0, F_1 = 1\n   $$\n\n2. **Gamma Function**  \n   $$\n   \\Gamma(n) = (n-1)! \\quad \\text{(for integer } n \\geq 1\\text{)}\n   $$\n\n3. **Logarithmic Identity**  \n   $$\n   \\log_b(a) = \\frac{\\log_k(a)}{\\log_k(b)} \\quad (k > 0, k \\neq 1)\n   $$\n\n---\n\nLet me know if you'd like explanations or additional formulas! 😊"}}],"created":1760791062,"model":"Llama-3_3-Nemotron-Super-49B-v1_5","system_fingerprint":"b6800-6eabd2fc9","object":"chat.completion","usage":{"completion_tokens":1469,"prompt_tokens":26,"total_tokens":1495},"id":"chatcmpl-mtAL2mbvmfWKnA8XMPzLXPSljKsynMG3","timings":{"cache_n":25,"prompt_n":1,"prompt_ms":21.296,"prompt_per_token_ms":21.296,"prompt_per_second":46.95717505634861,"predicted_n":1469,"predicted_ms":28758.314,"predicted_per_token_ms":19.57679646017699,"predicted_per_second":51.08088047164378}}

(root|~) curl -s https://www.serveurperso.com/ia/v1/chat/completions   -H "Content-Type: application/json"   -d '{
    "model": "MoE-Qwen3-30B-A3B-Instruct-2507",
    "messages": [
      { "role": "user", "content": "Hello my LLM, please write some mathematics formulas." }
    ],
    "temperature": 0.7
  }'

{"choices":[{"finish_reason":"stop","index":0,"message":{"role":"assistant","content":"Hello! Here are some interesting and fundamental mathematical formulas across different areas of mathematics:\n\n---\n\n### **1. Pythagorean Theorem** (Geometry)\nFor a right triangle with legs \\( a \\) and \\( b \\), and hypotenuse \\( c \\):\n\\[\na^2 + b^2 = c^2\n\\]\n\n---\n\n### **2. Quadratic Formula** (Algebra)\nThe solutions to the quadratic equation \\( ax^2 + bx + c = 0 \\) are:\n\\[\nx = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}\n\\]\n\n---\n\n### **3. Euler’s Formula** (Complex Analysis)\nRelates exponential functions to trigonometric functions:\n\\[\ne^{i\\theta} = \\cos\\theta + i\\sin\\theta\n\\]\nA special case (Euler's Identity):\n\\[\ne^{i\\pi} + 1 = 0\n\\]\n\n---\n\n### **4. Newton’s Binomial Theorem** (Combinatorics)\n\\[\n(a + b)^n = \\sum_{k=0}^{n} \\binom{n}{k} a^{n-k} b^k\n\\]\nwhere \\( \\binom{n}{k} = \\frac{n!}{k!(n-k)!} \\)\n\n---\n\n### **5. Fundamental Theorem of Calculus** (Calculus)\nIf \\( F(x) = \\int_a^x f(t)\\,dt \\), then:\n\\[\nF'(x) = f(x)\n\\]\nAnd:\n\\[\n\\int_a^b f(x)\\,dx = F(b) - F(a)\n\\]\n\n---\n\n### **6. Gaussian Integral** (Analysis)\n\\[\n\\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi}\n\\]\n\n---\n\n### **7. Euler’s Totient Function** (Number Theory)\nFor a positive integer \\( n \\), \\( \\phi(n) \\) counts the number of integers less than \\( n \\) that are coprime to \\( n \\). If \\( n = p_1^{k_1} p_2^{k_2} \\cdots p_m^{k_m} \\), then:\n\\[\n\\phi(n) = n \\left(1 - \\frac{1}{p_1}\\right)\\left(1 - \\frac{1}{p_2}\\right)\\cdots\\left(1 - \\frac{1}{p_m}\\right)\n\\]\n\n---\n\n### **8. Maxwell’s Equations** (Physics & Vector Calculus)\nIn differential form (SI units):\n\\[\n\\begin{aligned}\n\\nabla \\cdot \\mathbf{E} &= \\frac{\\rho}{\\varepsilon_0} \\\\\n\\nabla \\cdot \\mathbf{B} &= 0 \\\\\n\\nabla \\times \\mathbf{E} &= -\\frac{\\partial \\mathbf{B}}{\\partial t} \\\\\n\\nabla \\times \\mathbf{B} &= \\mu_0 \\mathbf{J} + \\mu_0 \\varepsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}\n\\end{aligned}\n\\]\n\n---\n\nLet me know if you’d like these explained, visualized, or extended to more advanced topics (e.g., tensor calculus, quantum mechanics, etc.)! 😊"}}],"created":1760791325,"model":"MoE-Qwen3-30B-A3B-Instruct-2507","system_fingerprint":"b6800-6eabd2fc9","object":"chat.completion","usage":{"completion_tokens":722,"prompt_tokens":19,"total_tokens":741},"id":"chatcmpl-JCf5OQVmKfBcLdcYFC0PL88MchV2DQ29","timings":{"cache_n":0,"prompt_n":19,"prompt_ms":59.75,"prompt_per_token_ms":3.1447368421052633,"prompt_per_second":317.99163179916314,"predicted_n":722,"predicted_ms":2891.113,"predicted_per_token_ms":4.004311634349031,"predicted_per_second":249.7308130121514}}

(root|~) curl -s https://www.serveurperso.com/ia/v1/chat/completions   -H "Content-Type: application/json"   -d '{
    "model": "MoE-GPT-OSS-120B",
    "messages": [
      { "role": "user", "content": "Hello my LLM, please write some mathematics formulas." }
    ],
    "temperature": 0.7
  }'

{"choices":[{"finish_reason":"stop","index":0,"message":{"role":"assistant","reasoning_content":"User wants \"some mathematics formulas\". Could be a selection of interesting formulas, maybe across topics. Provide LaTeX. Should be polite. Provide explanation. Provide categories: algebra, calculus, geometry, number theory, etc. Use LaTeX code. Provide maybe a few examples. Provide as plain text with LaTeX. Probably respond with a list.","content":"Sure! Below is a small “catalog” of classic and useful mathematical formulas, written in LaTeX so you can copy‑paste them directly into any document, notebook, or Markdown file that supports LaTeX rendering.\n\n---\n\n## 1. Algebra & Number Theory  \n\n| Topic | Formula | Description |\n|------|---------|-------------|\n| **Quadratic formula** | $$x = \\frac{-b \\pm \\sqrt{b^{2}-4ac}}{2a}$$ | Roots of \\(ax^{2}+bx+c=0\\). |\n| **Vieta’s relations** (for a quadratic) | $$\\begin{cases} r_{1}+r_{2} = -\\dfrac{b}{a}\\\\[4pt] r_{1}r_{2} = \\dfrac{c}{a}\\end{cases}$$ | Sum and product of the two roots. |\n| **Binomial theorem** | $$ (x+y)^{n} = \\sum_{k=0}^{n} \\binom{n}{k} x^{\\,n-k}y^{\\,k} $$ | Expansion of a power of a sum. |\n| **Geometric series** | $$\\sum_{k=0}^{\\infty} ar^{k}= \\frac{a}{1-r}\\qquad(|r|<1)$$ | Infinite sum of a geometric progression. |\n| **Euler’s totient** | $$\\phi(n)=n\\prod_{p\\mid n}\\!\\Bigl(1-\\frac1p\\Bigr)$$ | Number of integers ≤ \\(n\\) coprime to \\(n\\). |\n| **Fermat’s little theorem** | $$a^{p-1}\\equiv 1\\pmod p\\qquad(p\\text{ prime},\\;p\\nmid a)$$ | Basis of many primality tests. |\n\n---\n\n## 2. Calculus  \n\n| Topic | Formula | Description |\n|------|---------|-------------|\n| **Fundamental theorem of calculus** | $$\\int_{a}^{b} f'(x)\\,dx = f(b)-f(a)$$ | Relates differentiation and integration. |\n| **Integration by parts** | $$\\int u\\,dv = uv-\\int v\\,du$$ | Useful when a product of functions appears. |\n| **Taylor series (centered at \\(a\\))** | $$f(x)=\\sum_{n=0}^{\\infty}\\frac{f^{(n)}(a)}{n!}(x-a)^{n}$$ | Local polynomial approximation. |\n| **Maclaurin series (special case \\(a=0\\))** | $$e^{x}= \\sum_{n=0}^{\\infty}\\frac{x^{n}}{n!},\\quad \\sin x = \\sum_{n=0}^{\\infty}(-1)^{n}\\frac{x^{2n+1}}{(2n+1)!},\\ldots$$ | Classic expansions. |\n| **L’Hôpital’s rule** | $$\\lim_{x\\to c}\\frac{f(x)}{g(x)}=\\lim_{x\\to c}\\frac{f'(x)}{g'(x)}\\quad\\text{if }\\frac{0}{0}\\text{ or }\\frac{\\pm\\infty}{\\pm\\infty}$$ | Evaluate indeterminate limits. |\n| **Beta function** | $$B(p,q)=\\int_{0}^{1} t^{p-1}(1-t)^{q-1}\\,dt=\\frac{\\Gamma(p)\\Gamma(q)}{\\Gamma(p+q)}$$ | Links integrals to the Gamma function. |\n| **Gamma function** | $$\\Gamma(z)=\\int_{0}^{\\infty} t^{z-1}e^{-t}\\,dt,\\qquad \\Gamma(n)= (n-1)! \\ (n\\in\\mathbb{N})$$ | Generalizes factorial to complex numbers. |\n\n---\n\n## 3. Linear Algebra  \n\n| Topic | Formula | Description |\n|------|---------|-------------|\n| **Matrix multiplication** | $$(AB)_{ij}= \\sum_{k=1}^{n} a_{ik}b_{kj}$$ | Product of an \\(m\\times n\\) and an \\(n\\times p\\) matrix. |\n| **Determinant (2×2)** | $$\\det\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}=ad-bc$$ |\n| **Cramer's rule** (solution of \\(Ax=b\\)) | $$x_i = \\frac{\\det A_i}{\\det A}$$ where \\(A_i\\) is \\(A\\) with column \\(i\\) replaced by \\(b\\). |\n| **Eigenvalue equation** | $$A\\mathbf{v}= \\lambda\\mathbf{v}$$ | \\(\\lambda\\) eigenvalue, \\(\\mathbf{v}\\) eigenvector. |\n| **Spectral theorem (real symmetric)** | $$A = Q\\Lambda Q^{\\!\\top}$$ where \\(Q\\) is orthogonal and \\(\\Lambda\\) diagonal. |\n| **Singular value decomposition (SVD)** | $$A = U\\Sigma V^{\\!\\top}$$ with \\(U,V\\) orthogonal, \\(\\Sigma\\) diagonal (non‑negative). |\n\n---\n\n## 4. Geometry & Trigonometry  \n\n| Topic | Formula | Description |\n|------|---------|-------------|\n| **Law of sines** | $$\\frac{a}{\\sin A}= \\frac{b}{\\sin B}= \\frac{c}{\\sin C}=2R$$ | \\(R\\) is the circumradius of the triangle. |\n| **Law of cosines** | $$c^{2}=a^{2}+b^{2}-2ab\\cos C$$ | Generalizes Pythagoras. |\n| **Area of a triangle (Heron)** | $$\\Delta =\\sqrt{s(s-a)(s-b)(s-c)},\\qquad s=\\frac{a+b+c}{2}$$ |\n| **Euler’s formula (complex numbers)** | $$e^{i\\theta}= \\cos\\theta + i\\sin\\theta$$ |\n| **Polar–Cartesian conversion** | $$x=r\\cos\\theta,\\quad y=r\\sin\\theta,\\quad r=\\sqrt{x^{2}+y^{2}},\\quad \\theta=\\operatorname{atan2}(y,x)$$ |\n| **Surface area of a sphere** | $$A = 4\\pi r^{2}$$ |\n| **Volume of a sphere** | $$V = \\frac{4}{3}\\pi r^{3}$$ |\n\n---\n\n## 5. Probability & Statistics  \n\n| Topic | Formula | Description |\n|------|---------|-------------|\n| **Bayes’ theorem** | $$P(A\\mid B)=\\frac{P(B\\mid A)P(A)}{P(B)}$$ |\n| **Binomial distribution** | $$P(X=k)=\\binom{n}{k}p^{k}(1-p)^{n-k}$$ |\n| **Normal (Gaussian) pdf** | $$f(x)=\\frac{1}{\\sigma\\sqrt{2\\pi}}\\exp\\!\\Bigl(-\\frac{(x-\\mu)^{2}}{2\\sigma^{2}}\\Bigr)$$ |\n| **Chebyshev’s inequality** | $$P\\bigl(|X-\\mu|\\geq k\\sigma\\bigr)\\le \\frac{1}{k^{2}}$$ |\n| **Expected value (discrete)** | $$\\mathbb{E}[X]=\\sum_{i} x_i\\,P(X=x_i)$$ |\n| **Variance** | $$\\operatorname{Var}(X)=\\mathbb{E}\\bigl[(X-\\mu)^{2}\\bigr]=\\mathbb{E}[X^{2}]-\\mu^{2}$$ |\n\n---\n\n### How to use the LaTeX\n\nIf you paste any of the expressions into a LaTeX‑enabled environment (e.g., Overleaf, Jupyter notebooks with `$...$` or `$$...$$`, Markdown previewers with MathJax, etc.), they will render beautifully.  \n\nFor example, in a Markdown cell of a Jupyter notebook:\n\n```markdown\nThe quadratic formula is  \n\n$$x = \\frac{-b \\pm \\sqrt{b^{2}-4ac}}{2a}.$$\n```\n\n---\n\nFeel free to let me know if you’d like more formulas in a specific field (e.g., differential equations, combinatorics, topology, etc.) or if you need derivations/explanations for any of the above!"}}],"created":1760791206,"model":"MoE-GPT-OSS-120B","system_fingerprint":"b6800-6eabd2fc9","object":"chat.completion","usage":{"completion_tokens":1933,"prompt_tokens":78,"total_tokens":2011},"id":"chatcmpl-fXQkTGBEMCmDgSk3khvVT641em5fOrQQ","timings":{"cache_n":0,"prompt_n":78,"prompt_ms":979.472,"prompt_per_token_ms":12.557333333333332,"prompt_per_second":79.63474198343597,"predicted_n":1933,"predicted_ms":42475.262,"predicted_per_token_ms":21.973751681324366,"predicted_per_second":45.50884229978381}}(root|~)

The developer option “Show raw LLM output” displays the model’s raw output directly, without any Markdown rendering or frontend parsing, for streaming mode :

[allozaur]

Overall, very good improvements, just needs small polishing up before we merge it 😄

[allozaur]

@srogmann that's a really comprehensive set of tests! supreme work 🤌

[watamario15]

Rendering looks perfect on my end. BTW, I see a bunch of 404 logs, is this normal?

srv  log_server_r: request: GET /KaTeX_Main-Regular.B22Nviop.woff2 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Math-Italic.t53AETM-.woff2 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_AMS-Regular.BQhdFMY1.woff2 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Main-Bold.Cx986IdX.woff2 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Size2-Regular.Dy4dx90m.woff2 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Size1-Regular.mCD8mA8B.woff2 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Math-Italic.DA0__PXp.woff 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Main-Regular.Dr94JaBh.woff 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Size1-Regular.C195tn64.woff 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Size2-Regular.oD1tc_U0.woff 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Main-Bold.Jm3AIy58.woff 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_AMS-Regular.DMm9YOAa.woff 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Math-Italic.flOr_0UB.ttf 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Main-Regular.ypZvNtVU.ttf 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Main-Bold.waoOVXN0.ttf 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Size1-Regular.Dbsnue_I.ttf 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_AMS-Regular.DRggAlZN.ttf 127.0.0.1 404
srv  log_server_r: request: GET /KaTeX_Size2-Regular.B7gKUWhC.ttf 127.0.0.1 404

[allozaur]

Rendering looks perfect on my end. BTW, I see a bunch of 404 logs, is this normal?

srv  log_server_r: request: GET /KaTeX_Main-Regular.B22Nviop.woff2 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Math-Italic.t53AETM-.woff2 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_AMS-Regular.BQhdFMY1.woff2 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Main-Bold.Cx986IdX.woff2 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Size2-Regular.Dy4dx90m.woff2 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Size1-Regular.mCD8mA8B.woff2 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Math-Italic.DA0__PXp.woff 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Main-Regular.Dr94JaBh.woff 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Size1-Regular.C195tn64.woff 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Size2-Regular.oD1tc_U0.woff 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Main-Bold.Jm3AIy58.woff 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_AMS-Regular.DMm9YOAa.woff 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Math-Italic.flOr_0UB.ttf 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Main-Regular.ypZvNtVU.ttf 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Main-Bold.waoOVXN0.ttf 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Size1-Regular.Dbsnue_I.ttf 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_AMS-Regular.DRggAlZN.ttf 127.0.0.1 404

srv  log_server_r: request: GET /KaTeX_Size2-Regular.B7gKUWhC.ttf 127.0.0.1 404

Hmmm... this might be older assets cached by browser not being there. Just to make sure, please clear browsing data and recheck.

[watamario15]

I'm on fc5bc6d8a and tested again on private/incognito sessions in macOS Safari and Windows Chrome/Firefox, all produced these 404s when I encountered the first expression. Is it just me?

[allozaur]

I'm on fc5bc6d8a and tested again on private/incognito sessions in macOS Safari and Windows Chrome/Firefox, all produced these 404s when I encountered the first expression. Is it just me?

@srogmann could u please take a look at that?

[srogmann]

You should never have to deal with doubled backslashes \( or \[ in the WebUI

Have a look at the example of @watamario15: && (\text{バイアス Q,K,V）}\\[4pt]. There is a valid LaTeX-line-break followed by a spacer. This is valid LaTeX but the \[ is not the beginning of a LaTeX-section. This is the reason to introduce a look-behind used to ignore \\[.

[srogmann]

@watamario15 I can also reproduce these 404 errors.

[srogmann]

@allozaur Regarding the 404 errors: I inserted

        build: {
                minify: false // disable JS minification
        },

in vite.config.ts to get an unminified index.html.gz while debugging. The fonts are defined in node_modules/katex/dist/katex.min.css as follows:

@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(fonts/KaTeX_Math-Italic.woff) format("woff"),url(fonts/KaTeX_Math-Italic.ttf) format("truetype")}

In vite.config.ts I added a replacement of the URLs by base64-encoded data. Since I'm not deeply familiar with Svelte or Vite, please review the changes to ensure they are correct. I am sure that there is a better way to set $use-ttf to false ;-).

This will increase the size of index.html.gz, but it ensures that llama.cpp remains local (no CDN dependency).
Another option could be to remove all URLs.

[allozaur]

@allozaur Regarding the 404 errors: I inserted

        build: {
                minify: false // disable JS minification
        },

in vite.config.ts to get an unminified index.html.gz while debugging. The fonts are defined in node_modules/katex/dist/katex.min.css as follows:

@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(fonts/KaTeX_Math-Italic.woff) format("woff"),url(fonts/KaTeX_Math-Italic.ttf) format("truetype")}

In vite.config.ts I added a replacement of the URLs by base64-encoded data. Since I'm not deeply familiar with Svelte or Vite, please review the changes to ensure they are correct. I am sure that there is a better way to set $use-ttf to false ;-).

This will increase the size of index.html.gz, but it ensures that llama.cpp remains local (no CDN dependency). Another option could be to remove all URLs.

Hey @srogmann, thanks for that! I will take a look at this and come back to you ;) we're very close to getting this PR merged 🤞

[srogmann]

@allozaur Update: I just noticed, that KaTeX_Size3 is already embedded, but only KaTeX_Size3. Therefore, should be no need to modify the font URLs in a way that would be hard to maintain.

@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAA[...]

[srogmann]

Here are screenshots comparing the rendering with and without embedded fonts in index.html.gz:

With embedded fonts (woff2): The blackboard bold letters are rendered using AMS fonts used by KaTeX.

Without embedded fonts:

I prefer the version with embedded fonts.

Note: The current implementation uses regular expressions to inject the woff2 font files. A more robust method method would be better.

[srogmann]

Update: I was wondering why KaTeX_Size3 was embedded but no other font. The answer is "< 4096" ;-).

$ ls -lSr node_modules/katex/dist/fonts/*woff2|awk '{print $5, $9}' | head -3
3624 node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2
4928 node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2
5208 node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2

https://vite.dev/config/build-options.html#build-assetsinlinelimit:

Default: 4096 (4 KiB)

[watamario15]

At dee2b63 with npm run build, the 404s are disappeared and the math rendering is improved on Windows (was OK on macOS but bit difficult to read on Windows before). Perfect!