使用 Showdown js 和 openAi 流响应

Question

我尝试使用 showdownjs 将流式 Markdown 从 OpenAi 翻译为 HTML

我更改了https://github.com/orhanerday/ChatGPT给出的代码，并且刚刚添加了摊牌部分

OpenAi 的系统提示包括使用 markdown 返回响应，它确实这样做了

showdownjs解析后，结果很奇怪。每个块都在单独的行中，并且不会解析 markdown！

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

                        div.innerHTML += parsedHtml;

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

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

提前致谢

已编辑

我刚刚意识到 Showdown 是在每个流中的每个单词周围添加一个“html p”标签:-( 并且，带有 markdown 的文本（有时在块中不完整）不会被处理并转换为 html :-(

Answer 1

我终于想出了一个非常简单的解决方案。呃。

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

的 markdown-it 库

在上面的代码中，我不是在文本流式传输时应用降价，而是在最后“完成”时执行此操作

为了简洁起见，我仅使用我的解决方案在此处复制代码的相关部分。就像魅力一样起作用。早该想到的！理想情况下，我希望它在数据流时发生，但看起来这要么不可能，要么工作量太大！！！

                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>');
                    }
                } 
                        
            }