Hello community, I am encountering an issue with using the GPT-4-Turbo-Preview API for a simple ChatBot on my website. When someone asks a math-related question, the responses are provided in LaTeX format, which my website cannot interpret, resulting in the answers appearing as shown in the attached screenshot.
However, when using the GPT-4 API (not turbo), the responses are correctly delivered using Unicode characters without the need to specify this in the role. I have tried setting the system role to respond with Unicode characters in the GPT-4-Turbo-Preview API for mathematical terms, but it’s not perfect as parts of the response are still in LaTeX format.
The AI models are overtrained on being ChatGPT. That includes ChatGPT answers, ChatGPT markdown, and even telling the user that it is ChatGPT on a developer’s app. gpt-4-turbo is now just a canned answer machine, not an intelligence.
And LaTeX.
I see your demonstration, but not the attempts at system prompt. Let’s write one.
## Mathematics equation outputs
// When responding with math formulas in the response, you must write the formulae using only Unicode from the Mathematical Operators block and other Unicode symbols. The AI GUI render engine does not support TeX code. You must not use LaTeX in responses.
Yeah this is an issue. I have managed to get some work around this. I was using gpt-4-vision-preview model and the api when answering mathematical question answers with blackslashes. I will assume you have control on the api response in your website. You can using a library like react-latex-next and provide your input to the component as fomratted(gpt response) you need to format the gpt response with regex:
let result = inputString.replace(/\(/g, ‘$’);
result = result.replace(/\)/g, ‘$’); this will return a clean output that you can then use in the component
im in a similar issue, but i kind of give up prevent it to output LaTex, i only ask to place <latex>…</latex> around to later capture it and throw at https://latex.codecogs.com/ and render as a image.
Here’s my solution to correctly parsing the new markdown from the latest gpt-4-turbo model which includes Latex for math functions. Should work for others using react to display.
import React from ‘react’;
import ReactMarkdown from ‘react-markdown’;
import rehypeRaw from ‘rehype-raw’;
import rehypeKatex from ‘rehype-katex’;
import remarkMath from ‘remark-math’;
const MarkdownWithLatex = ({ markdownText }) => {
const preprocessMarkdown = (markdownText) => {
// Replace \[ with $$ and \] with $$ to ensure compatibility
const processedText = markdownText
.replace(/\\\[/g, '$$$') // Replace all occurrences of \[ with $$
.replace(/\\\]/g, '$$$'); // Replace all occurrences of \] with $$
return processedText;
};
const remarkMathOptions = {
singleDollarTextMath: false,
}
return (
<ReactMarkdown
className="markdown-content"
children={preprocessMarkdown(markdownText)}
remarkPlugins={[[remarkMath, remarkMathOptions]]} // Pass options as the second element of the array
rehypePlugins={[rehypeRaw, rehypeKatex]} // Include rehypeRaw for HTML, rehypeKatex for LaTeX
/>
This works for me, i made an updated version that also works with 4o:
// MarkdownLaTeXRenderer.js
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeRaw from 'rehype-raw';
import rehypeKatex from 'rehype-katex';
const MarkdownLaTeXRenderer = ({ content }) => {
// Replace \[ with $$ and \] with $$ to ensure compatibility
const processedText = content
.replace(/\\\[/g, '$$$') // Replace all occurrences of \[ with $$
.replace(/\\\]/g, '$$$') // Replace all occurrences of \] with $$
.replace(/\\\(/g, '$$$') // Replace all occurrences of \( with $$
.replace(/\\\)/g, '$$$'); // Replace all occurrences of \) with $$
const remarkMathOptions = {
singleDollarTextMath: false,
};
return (
<ReactMarkdown
className="markdown-content"
children={processedText}
remarkPlugins={[[remarkMath, remarkMathOptions], remarkGfm]} // Pass options as the second element of the array
rehypePlugins={[rehypeRaw, rehypeKatex]} // Include rehypeRaw for HTML, rehypeKatex for LaTeX
/>
);
};
export default MarkdownLaTeXRenderer;
Thanks a lot for this. Worked like a charm. I just had issues because the content i am rendering mixes latex with regular text, markdown and latin (utf-8) characters, and ended abandoning it. But was surely the best working solution i got so far. Still trying to work out something in the backend to convert the latex to regular text. Thanks again!
