CODEWITHSUNDEEP
reactjsmarkdownopenai-apiremarkjs
Jus
Jus

Reputation: 521

How to format gpt-x output in react.js

Using OpenAI api i receive raw formatting from GPT-x which i'd like to display in HTML using React.js. I've explored using react-markdown with the remark-math plugin, but GPT seems to respond with parenthesized math - "( \frac{3}{4} )" - instead of dollar-delimited math - "$\frac{3}{4}$". Can someone point me to how I can reconfigure my components correctly? Here's an (incomplete) example of what's done:

import Markdown from 'react-markdown';
// @ts-expect-error - module resolution cannot find ts defs
import mathjax from 'rehype-mathjax';
import remath from 'remark-math';
// message e.g. '(\frac{3}{4})';
export default MyComponent({ message }: { message: string }) {
  return (
    <Markdown rehypePlugins={[mathjax]} remarkPlugins={[remath]}>
      {message}
    </Markdown>
  );
}

Thanks for your help!

Upvotes: -1

Views: 267

Answers (1)

Jus
Jus

Reputation: 521

By instructing GPT "to delimit math with '$'" I was able to display math using the mentioned libraries.

Upvotes: -1

Related Questions