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 😄

[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]

Hey @allozaur , in ./node_modules/katex/src/styles/fonts.scss there are the following defaults of KaTeX:

$font-folder: "../../fonts" !default;
$use-woff2: true !default;
$use-woff: true !default;
$use-ttf: true !default;

Initially, I thought one could easily set $use-woff=false and $use-ttf=false via css.preprocessorOptions['scss'].additionalData in defineConfig in vite.config.ts. However, I now wonder if this would be possible. The Web UI uses Tailwind CSS, which according to https://tailwindcss.com/docs/compatibility#sass-less-and-stylus states that the parallel usage of Tailwind CSS and SCSS is not the preferred way.

Therefore, this PR currently uses a regular expression to remove embedded ttf/woff fonts.

@srogmann

Quick note on the regex approach

• Works for now, but it’s brittle: changing KaTeX output or small formatting differences can break it, and doing a broad replace on the generated index HTML risks touching unrelated CSS.
• I noticed we already remove embedded ttf/woff via the build plugin (vite.config.ts), so we should either replace that with a safer transform or change how KaTeX is produced.

I think that we have two simple, safer options

1. Best long-term: compile KaTeX SCSS and override variables

• Use KaTeX’s own $use-woff / $use-ttf (they’re !default), so ttf/woff never get emitted.
• Slight build change (install sass), but stable and conceptually correct.

vite.config.ts (scss additionalData):

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
        // override KaTeX defaults
        $use-woff2: true;
        $use-woff: false;
        $use-ttf: false;
        $font-folder: "/fonts";
      `,
    },
  },
}

Then import KaTeX SCSS (e.g. import 'katex/src/styles/katex.scss') instead of the prebuilt CSS.

2. Fast & low-friction: replace the current regex with a focused Vite plugin

• Keep imports as-is, but transform only the katex CSS module(s) (node_modules/katex/*.css) instead of doing a global replace on index.html.
• Lower blast radius, easy to revert.

vite plugin example:

// vite.plugins/strip-katex-fonts.ts
import type { Plugin } from 'vite';

export default function stripKatexFonts(): Plugin {
  return {
    name: 'strip-katex-fonts',
    enforce: 'post',
    transform(code, id) {
      if (!/node_modules\/katex\/.*\.css($|\?)/.test(id)) return null;
      // remove only @font-face blocks that reference .ttf or .woff (preserve woff2)
      const cleaned = code.replace(
        /@font-face\s*{[^}]*?url\([^)]+\.(?:ttf|woff)(?:\?[^\)]*)?\)[^}]*}/gi,
        ''
      );
      return { code: cleaned.replace(/^\s*\n/gm, ''), map: null };
    },
  };
}

Add it to vite config plugins.

Tiny test suggestion (quick CI guard)

• After build, grep final CSS for .ttf/.woff and fail CI if they remain (simple safety check).

If you prefer, I can:

• replace the current build-plugin regex with the focused Vite plugin (small patch), or
• switch imports to SCSS and add the additionalData snippet + install sass (patch + notes on ordering with Tailwind).

Which path do you prefer? Or maybe you would like to do this change on your end?

[srogmann]

@allozaur
If you can realize option 1, I’d really appreciate it!

I did try adding $use-woff: false; $use-ttf: false; via additionalData in vite.config.ts,
but I hesitated because I wasn't sure if the introduction of sass as a further dependency is acceptable.
Also, I wasn't certain how this should interact with Tailwind (ordering, potential conflicts), so I defaulted to the regex approach, knowing it is brittle.

That said, your proposed solution 1 (compiling KaTeX SCSS with overridden variables) would be more maintainable and predictable than regex-patching a CSS. Solution 2 could be a fallback if solution 1 has unwanted side effects.

[allozaur]

@srogmann I've pushed changes to your branch with this PR - srogmann#2

[srogmann]

@allozaur Thanks! I have cherry-picked your commits from srogmann#2 into this PR.