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

java + vue 实现 AI流式输出(打字机效果)

一、前言

我们在使用ai问答的时候, ai回答都是一个字一个字那种流式输出, 那么这种效果如何用技术实现呢? 其实方式很多, 我写了两个demo, 一种是前端定时追加的假流式, 一种是真实的后端返回流式。

二、前端实现假流式

  let content = "润色版本(分场景提供)\n" +"\n" +"1. 诗意风格‌\n" +"十月的天空像被水洗过一般澄澈,暖阳为云朵镶上金边,连风都裹着桂花的甜香,这样的好天气,仿佛连时光都变得柔软起来。\n" +"\n" +"2. 简洁风格‌\n" +"今天是个晴空万里的好日子,阳光和煦,微风不燥,适合出门走走。\n" +"\n" +"3. 细节描写‌\n" +"午后三点的阳光斜斜地铺在窗台上,天空蓝得没有一丝杂质,偶尔飘过的云朵像棉花糖般轻盈。这样的天气,连呼吸都带着秋日的清爽。\n" +"\n" +"如需调整风格或补充细节,可随时告知具体方向(如更温暖/更简洁/增加比喻等)。"let len = content.length;let i = 0;aiText.value = "";setInterval(() => {if (i < len) {aiText.value += content[i];i++;}}, 100);

三、真正的流式输出

前端可以选择:fetch、Server-Sent Events (SSE)、WebSocket

后端可以选择:HttpServletResponse、SseEmitter返回、通过webflux

我这里前端用的浏览器原生的fetch, 后端用java的HttpServletResponse

1、后端

    /***  aaa*/@PostMapping("/aaa")public void aaa(@RequestBody UserBean userBean, HttpServletResponse servletResponse) {try(ServletOutputStream outputStream = servletResponse.getOutputStream()) {int i = 0;while (i < 60) {String item = "流" + i;outputStream.write(item.getBytes());outputStream.flush();i++;Thread.sleep(1000);}}catch (Exception e) {logger.error("异常", e);}}

2、前端

function aiButtonEnd() {aiText.value = "";// 发送流式请求fetch("/zenglingyao/aaa", {method: "POST",headers: {'Authorization': `Bearer ${getToken()}`,'Content-Type' : 'application/json;charset=utf-8'}, body: JSON.stringify({})}).then(async (response) => {const reader = response.body.getReader();while (true) {const { done, value } = await reader.read();if (done) break;let contentItem = new TextDecoder().decode(value);aiText.value += contentItem;}}).catch((error) => {console.error("Fetch error:", error);});
}

http://www.dtcms.com/a/482433.html

相关文章:

  • Linux网络:使用TCP实现网络通信(服务端)
  • Python Web开发——WSGI接口
  • 第十章:技术路线:成为“技术扫地僧(1)
  • 苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
  • Transformers中从 logits 本质到问答系统中的字符定位机制
  • c++11扩展
  • h1z1注册网站百度app官方下载
  • 阮一峰《TypeScript 教程》学习笔记——基本用法
  • LabVIEW腔衰荡信号在线处理系统
  • 为 AI Agent 行为立“规矩”——字节跳动提出 Jeddak AgentArmor 智能体安全框架
  • Arbess CICD实战(12) - 使用Arbess+GitLab实现React.js项目自动化部署
  • 网站如何做延迟加载店铺图片免费生成
  • 【每日算法C#】爬楼梯问题 LeetCode
  • 网站制作很好 乐云践新二级网站建设情况说明书
  • USDe 脱锚事件全景还原
  • 【运维实践】深入理解 rsync+inotify:实时文件同步技术的原理与实践
  • AI在生产制造过程中的实践分享
  • 建一个优化网站多少钱抖音开放平台官网入口
  • 智能电网变电站综合自动化虚拟仿真实验
  • python自动化中(包括UI自动化和API自动化)env的作用和使用
  • Xcode16 避坑
  • 论文参考文献引用:规避查重率的有效策略
  • 先楫平台使用Jlink调试
  • 偏置电阻简介
  • 【温室气体数据集】历史温室气体与气溶胶排放数据集 CEDS
  • 家具品牌网站怎么做网站建设印花税
  • 建医疗网站步骤seo优化的技巧
  • 【小白笔记】strip的含义
  • 第136期 谷歌Jules Tools反击Copilot的主导地位:重新定义工作流自动化18
  • Apifox AI 测试用例生成:提高测试效率!