当前位置：首页 > article >正文

using showdown js with openAi streaming response

article 2025/1/29 14:03:09

题意："使用 Showdown.js 处理 OpenAI 流式响应"

问题背景：

I tried using showdownjs to translate streamed markdown from OpenAi to HTML

"我尝试使用 Showdown.js 将来自 OpenAI 的流式 Markdown 转换为 HTML"

I changed the code given at https://github.com/orhanerday/ChatGPT and just added the showdown part

"我修改了在 https://github.com/orhanerday/ChatGPT 上提供的代码，并仅添加了 Showdown 部分。"

The system prompt to OpenAi includes returning responses using markdown, which it does

After the showdownjs parsed , the results are weird. Each chunk is in a separate line and the markdown isn't parsed!

"系统提示给 OpenAI 包括使用 Markdown 返回响应，OpenAI 确实这样做了。

但在 Showdown.js 解析后，结果很奇怪。每个块都在单独的行中，Markdown 并没有被解析！"

  let converter = new showdown.Converter({smoothLivePreview: true});
                        let parsedHtml = converter.makeHtml(txt);

                        div.innerHTML += parsedHtml;

The data does come back from the backend as a stream

"数据确实以流的形式从后端返回。"

Am totally flummoxed. What am i doing wrong here? I have the references all included and the data does come back from the php file in the backend.

"我完全困惑了。我在这里做错了什么？我已经包含了所有参考资料，数据确实从后端的 PHP 文件中返回了。"

enter image description here

Thanks in advance

EDITED

I just realized that showdown is adding a "html p" tag around every word in every stream:-( And, the text with markdown (sometimes incomplete in the chunk), do not get processed and converted to html :-(

"我刚刚意识到 Showdown 在每个流中的每个单词周围添加了一个 'html p' 标签 :-( 而且，带有 Markdown 的文本（有时在块中不完整）没有被处理和转换为 HTML :-( "

问题解决：

I finally figured out a very simple solution. Duh.

"我终于找到了一个非常简单的解决方案。真是的。"

I decided to use the markdown-it library from https://github.com/markdown-it/markdown-it

And in the above code, rather than applying markdown when the text is streamed, i do it at the end on getting "done"

"我决定使用来自 https://github.com/markdown-it/markdown-it 的 markdown-it 库。

在上述代码中，我不是在文本流式传输时应用 Markdown，而是在获取到 'done' 后在最后进行转换。"

Am reproducing just the relevant part of the code here for brevity, with my solution. works like charm. Should have thought of it before! Ideally, i would like it to happen when the data streams, but looks like that is either not possible or too much hard work !!!

"为了简洁起见，我在这里重现了代码的相关部分，并展示了我的解决方案。效果很好，早该想到这个方法！理想情况下，我希望在数据流式传输时进行处理，但看来要么不可能，要么工作量太大！！！"

     if (e.data == "[DONE]") {
                    msgerSendBtn.disabled = false;
                    document.getElementById("userSendButtonAV").value="Send";
                    var elemB = document.getElementById("userSendButtonAV");
                    elemB.value = "Send";
                
                    const md = window.markdownit();
                    const renderedText = md.render(div.innerText);
                    div.innerHTML = renderedText;


                    document.getElementById('userMessageAV').placeholder='Enter your message now...';
                    document.getElementById('userMessageAV').disabled = false;
                

                    eventSource.close();
                } else {
                    
                    //original code  let txt = JSON.parse(e.data).choices[0].delta.content
                    if (isJsonString(e.data)) {
                        let txt = JSON.parse(e.data).choices[0].delta.content;

                    if (txt !== undefined) {
                        div.innerHTML += txt.replace(/(?:\r\n|\r|\n)/g, '<br>');
                    }
                } 
                        
            }