题意："使用 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>');
}
}
}
