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

实现类似AI流式输出效果

news 2025/5/9 11:07:03

前段时间deepseek流行，然后都要求接入实现AI问答系统。
因为是简单的接入，直接用纯 HTML 实现

1. js 实现流式输出

前期后台接口没有实现流式输出，都是所有内容一起返回给前端。然后前端通过js实现流式输出效果

① AI 回答有的是有加粗效果，这个其实接口返回的有markdown格式的文本。只要用marked插件就可以实现效果

<!-- 虽然是纯html，但我还是用npm下载了 marked 插件。好像是之前另外下载的文件有问题。npm的可以用 -->
<script src="./node_modules/marked/marked.min.js"></script><script>
// 用 import 和 require 会报错
const { marked } = window.marked;
</script>

② 流式输出

let markStr;	// AI的回答（接口返回）
// 逐字输出函数  currentIndex--当前输出字的位置，outputContainer--输出文字放的div
function streamMarkdown(currentIndex, outputContainer) {if(!markStr || markStr==='') return;if (currentIndex >= markStr.length) return; // 如果所有字符都输出完毕，则结束const chatBox = document.getElementById('chatBox');	// 聊天内容的 divchatBox.scrollTop = chatBox.scrollHeight;	// 字数多的话可能会出现滚动条，这里可以一直自动滚动到底部（其实更好的是判断前后 scrollHeight 变化再调整比较好，而不是每输出一个字就这样）// ------------ 流式输出效果主要代码 ---------------------------------// 获取当前字符const currentChar = markStr[currentIndex];// 将当前字符添加到临时内容中const tempContent = markStr.substring(0, currentIndex + 1);// 将临时内容解析为HTMLconst htmlContent = marked.parse(tempContent);// 更新输出容器的内容outputContainer.innerHTML = htmlContent;// 增加索引，准备输出下一个字符currentIndex++;// 设置延迟，模拟逐字输出setTimeout(()=>{streamMarkdown(currentIndex, outputContainer);}, 50); // 每个字符输出间隔50ms
}