vue实现AI问答Markdown打字机效果

上线效果

功能清单

  • AI问答,文字输出跟随打字机效果
  • 格式化回答内容(markdown格式)
  • 停止回答,复制回答内容
  • 回答时自动向下滚动
  • 全屏切换
  • 历史问答查看

主要技术

  • vue @2.7.1
  • markdown-it @14.1.0
  • @microsoft/fetch-event-source @2.0.1
  • highlight.js @10.7.1

实现思路

  • 后台接口支持流式返回也就是 :Accept: 'text/event-stream' 请求头
  • 前端通过fetch-event-source请求数据,也可以通过axios,但是要进行转换
  • 前端通过markdwon-it结合highlight.js显示返回的数据,并高亮和格式化代码

核心代码

1.markdown使用

2.接口请求

通过 onmessage方法,返回接口数据,拼接后渲染。

避坑

  • 调试模式下要关闭compress,否则不会返回流,会一次性返回,无法实现打字机效果,参考如下图:
  • markdown输出后,代码无法靠左对齐,无法像下图这样:

注意添加样式:

总结

至此一个AI问答打字机效果的功能就实现了,核心在于:流式输出,markdown 格式化

如果你觉得看完有价值,可以免费点个赞👍,也可以评论区一起学习交流。

相关推荐
苏州第一深情7 分钟前
【uniapp】uniapp实现单点登录、打包H5部署到线上
javascript·vue.js·uni-app
拉不动的猪8 分钟前
jS篇Async await实现同步效果的原理
前端·javascript·面试
杨充12 分钟前
03.接口vs抽象类比较
前端·后端
叶常落22 分钟前
【vibe coding】Kubernetes + Nginx Ingress 实现云端Workspace容器分配与域名访问方案
ai
chxii24 分钟前
2.4 组件通信
前端·javascript·vue.js
Entropy-Lee28 分钟前
JavaScript 执行上下文与作用域
开发语言·javascript·ecmascript
泡岩浆的child1 小时前
朋友:你平常都用什么软件取色?我:QQ截图啊。朋友:牛X!
前端
老周聊大模型1 小时前
AI工程化必学:Spring AI与Redis的黄金组合实践
javascript·人工智能·程序员
志如1 小时前
【校招面试官说】什么样的技术人更容易被大厂校招选中?
前端·后端·面试
古夕1 小时前
TS 导出 PDF:解决表头乱码,实现表格内添加可点击链接
前端·typescript