Todo: gpt model의 response 중, code block 등 마크다운 형식의 대답을 마크다운으로 출력할 수 있도록 하는 방법 고민

[ABizCho]

Ref

https://community.openai.com/t/formatting-api-responses-theory/114412 https://community.openai.com/t/html-json-markdown-output-generation-is-very-clunky-or-out-right-broken/219691/5 https://community.openai.com/t/does-chatgpt-have-a-built-in-markdown-parser/144606/2 https://community.openai.com/t/bug-incorrect-programming-language-for-code-blocks-when-using-markdown/140200/15

[hongregii]

문제는 인식했는데요, 저희가 기술적으로 해결할게 있나요? (openAi가 해야할거 아닌가요?)

[ABizCho]

@hongregii 아 저희가 사용중인 모델정도만 되어도, 마크다운의 코드블록 형식으로 만들어서 주네요!

결국 홍래님이 커멘트해주신것과 일맥상통하게, openAI의 답변은 이를 지원한다고 생각할 수 있겠습니다. (저는 이게 디폴트로 안되는 줄 알고, 저희가 static하게 유저 question 프롬프트 말미에 추가 프롬프트 엔지니어링을 더해주는 등의 방법 or 다른 방법이 있는지 를 생각했었어요)

어쨌든, 아래와 같이 코드블록으로 온 답변을 실제 gpt처럼 보여주기 위해서는 답변 말풍선 내 마크다운 폼으로 내용을 보여주도록 하는 등의 방법을 적용해야겠네요. (말풍선을 버려야할지도?)

[ABizCho]

위에 관해 react-markdown 라이브러리 적용해보겠습니다!

아실 수 있겠지만, 해당 라이브러리는 markdown -> html 변환해준다고하네요? 저희 말풍선 내에 감싸서 한번 결과공유드릴게요

[hongregii]

죠습니다! 다만, 서버컴포넌트인지만 판단해주시고 알려주셔요!

md → html 이 생각보다 어려울수 있어서,, 보다 쉬운 툴을 써야될수 있습니다! @ABizCho

[ABizCho]

@hongregii 다행스럽게도 생각보다 간단하게 적용되었어요! 맨 아래의 적용사례 괜찮으실까요?

+ 서버컴포넌트인지만 판단해주시고 <- 이부분은 잘 이해를 못해서, 어떤것이 서버 컴포넌트인지 식별해봐야할까요?

초기 react-markdown없이 plain text 렌더링 모습

                  {chatLine.answer && (
                    <div className="msgBox p-4 max-w-sm text-xs bg-gray-500 self-start rounded-chat-answer mt-4 text-white">
                      {chatLine.answer}
                    </div>
                  )}

react-markdown 적용 후

                  {chatLine.answer && (
                    <div className="msgBox p-4 max-w-sm text-xs bg-gray-500 self-start rounded-chat-answer mt-4 text-white">
                      <ReactMarkdown
                        children={chatLine.answer}
                        remarkPlugins={[remarkGfm]}
                      />
                    </div>
                  )}

react-markdown & react-syntax-highlighter 적용 후

                  {chatLine.answer && (
                    <div className="msgBox p-4 max-w-sm text-xs bg-gray-500 self-start rounded-chat-answer mt-4 text-white">
                      <ReactMarkdown
                        components={{
                          code({
                            node,
                            inline,
                            className,
                            children,
                            ...props
                          }) {
                            const match = /language-(\w+)/.exec(
                              className || ""
                            );
                            return !inline && match ? (
                              <SyntaxHighlighter
                                style={solarizedlight}
                                language={match[1]}
                                PreTag="div"
                                {...props}
                              >
                                {String(children).replace(/\n$/, "")}
                              </SyntaxHighlighter>
                            ) : (
                              <code className={className} {...props}>
                                {children}
                              </code>
                            );
                          },
                        }}
                      >
                        {chatLine.answer}
                      </ReactMarkdown>
                    </div>
                  )}

[ABizCho]

61 PR 올렸고 CLOSE하겠습니다.