用react搞定一个大模型对话效果
怎么用react实现一个类似文心一言那样的对话效果呢?
最近AI盛行,关注几个大模型网站都能发现,跟AI对话的时候,返回的文本是逐字展示的,就给人一种AI边解析边返回的感觉(不知道是为了装X还是真的需要这样)。正好部门内也有这么个需求,那就开干呗。
先看看效果:

ok
由于我这边后端返回是一次性返回所有回复,而天煞的产品经理要求做出逐字展示效果,于是我只能纯前端控制展示。
废发不多梭,开始搞代码。
先上个图,看看页面结构

列表的的格式是这样:
const [list, setList] = useState([{id: -1,type: 1,content: <Introduction chooseChatType={(v) => chatInit(v)} />, // 渲染对象},]); // 对话列表, type: 1 机器人, type: 2 用户 -1 初始介绍 -2 loading
整体编码过程不难,有几个细节需要注意:
1.发送消息后到后端返回消息钱,需要展示一个loading过渡
2.后端返回字符串后,需要逐字切割展示。这里我注意考虑两个方案,
第一个:用个定时器,把时差设置为变量delay,每次都随机生成delay,固定展示三个字符,直到展示完全。简单来讲就是,速度不固定,每次展示长度固定
第二个:速度固定,每次展示不同长度内容
这里我选用的第一种方案。
需要注意的是每次更新最后一条的内容都需要把list的最后一项pop出去,需要记录返回的内容切割后的内容,这里我用的useRef生成的变量来记录内容,主要代码如下:
const loading = useCallback(() => {resetMsgList({id: -2,type: 1,content: (<Spin indicator={<LoadingOutlined style={{ fontSize: 24 }} spin />} />),});}, []);
// 删除字符串前三位,不满前三位直接返回空
export const deleteStr = (str) => {try {if (str.length < 3) return '';let arr = str.split('');arr.splice(0, 3);return arr.join('');} catch (err) {console.warn(err);}
};
// 记录最新的回复内容const currentReply = useRef('');
// 随机产生时差来展示字符const clear = useInterval(() => {if (currentReply.current.length < 1) {clear();} else {// 固定切割字符串三位const str = currentReply.current.substr(0, 3);currentReply.current = deleteStr(currentReply.current);setList((oldList) => {const last = oldList.pop();return [...oldList,{id: replyId,type: 1,content:typeof last?.content === 'string' && !isRegenerate.current? last.content + str: str,},];});// 随机生成时差,1 - 500 毫秒const randomTime = Math.floor(Math.random() * 10) * 50 + 1;setDelay(randomTime);}isRegenerate.current = false;}, delay);const send = throttle(async (e, msg) => {try {e?.preventDefault();// 判断是否是alt+enter,是则识别位换行if (e?.altKey) {setInputMsg(inputMsg + '\n');return;}// if (eventSourceObj) eventSourceObj.current = null;const input = msg || inputMsg;if (!input) {message.warn('请输入对话内容');return;}resetMsgList({ id: -1, type: 2, content: input });loading();setInputMsg('');setCompareVisible(false);let res = await sendMsgHttp({ content: input, quType: questionType });if (res.code === 0) {quId.current = res.data.quId;setReplyId(res.data.replyId);currentReply.current = res.data.reply;setDelay(100);}} catch (err) {console.warn('err');}}, 300);
整体实现并不难,但要做好每个细节还是需要一点思考的,
ok,,我要拿去装逼了,拜拜!!!
相关文章:
用react搞定一个大模型对话效果
怎么用react实现一个类似文心一言那样的对话效果呢? 最近AI盛行,关注几个大模型网站都能发现,跟AI对话的时候,返回的文本是逐字展示的,就给人一种AI边解析边返回的感觉(不知道是为了装X还是真的需要这样&a…...
DP读书:在常工院的2023年度总结
DarrenPig的年度总结 这是最好的时代,这是最坏的时代。——狄更斯 这是最好的时代,这是最坏的时代。——狄更斯 这是最好的时代,这是最坏的时代。——狄更斯 一、2023我的感受 不就是2023吗,不就是一年的经历吗,大家…...
2023-2024年重庆职业院校技能大赛“信息安全管理与评估”比赛样题
2023 年重庆职业院校技能大赛(高等职业教育) “信息安全管理与评估”样题任务书 第一阶段:任务 1 网络平台搭建(50 分)任务 2 网络安全设备配置与防护(250 分) 第二阶段:第一部分 网…...
【Ubuntu】systemctl 命令
systemctl 是一个用于检视和控制 systemd 系统和服务管理器的命令行工具。systemd 是用于启动、停止和管理 Linux 系统中的服务的守护进程。以下是一些常用的 systemctl 命令及其说明: systemctl start <unit>: 启动指定的服务单元 systemctl start sshd sy…...
xinput1_3.dll文件的几种修复办法以及修复xinput1_3.dll注意事项
xinput1_3.dll文件是DirectX的一部分,它在Windows系统中负责处理游戏控制器的输入。然而,有时候此文件可能会出现问题,导致游戏无法正常运行或启动。在本文中,将介绍多种解决xinput1_3.dll文件问题的方法,并对它们进行…...
javaWebssh宠物基地管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计
一、源码特点 java ssh宠物基地管理系统是一套完善的web设计系统(系统采用ssh框架进行设计开发),对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用 B/S模式开发。开发环境为TOMCAT7.…...
常用的gpt-4 prompt words收集3
1. The picture is a bit blurry, please identify it carefully, don’t rush. 图片有点模糊请仔细看不要着急 2. Please organize the code in the picture above into a complete tutorial, elaborating on its functions in detail along with the code. 将图片上的代码…...
为什么电脑降价了?
周末,非常意外地用不到3000元买到了一款2023年度发布的华为笔记本I5,16G,500G,基本是主流配置,我非常意外,看了又看,不是什么Hwawii,或者Huuawe。然后也不是二手。为什么呢?因为在ALU和FPU之外&…...
归并排序-逆序对
之前的文章里有写归并排序的最小和问题(归并排序-最小和-CSDN博客),逆序对问题其实跟最小和问题的本质一样: 逆序对:给定一个数据,从左往右,从第一个数开始,它右边每一个比它小的都…...
爬虫笔记(二):实战58二手房
第一:给大家推荐一个爬虫的网课哈,码起来 第二:今夜主题:通过xpath爬取58二手房的title信息,也就是标红的位置~ 第三:先分析一波title所在的位置 打开按下f12打开抓包工具,即可看到网站的源码…...
一站式VR全景婚礼的优势表现在哪里?
你是否想过,婚礼也可以用一种全新的方式呈现,VR全景婚礼让每位用户沉浸式体验婚礼现场感。现在很多年轻人,都想让自己的婚礼与众不同,而VR全景婚礼也是未来发展的方向之一。 很多婚庆公司开通了VR婚礼这一服务,就是通过…...
【硅谷甄选】强制使用 pnpm 包管理器工具
强制使用pnpm包管理器工具 团队开发项目的时候,需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,导致项目出现bug问题,因此包管理器工具需要统一管理。 在根目录创建scripts/preinstall.js…...
PHP AES加解密系列
PHP AES加密 使用PHP内置的mcrypt扩展库可以轻松地实现AES加密。 <?php function aes_encrypt($data, $key, $iv) {$cipher mcrypt_module_open(MCRYPT_RIJNDAEL_128, , MCRYPT_MODE_CBC, );mcrypt_generic_init($cipher, $key, $iv);$encrypted mcrypt_generic($ciphe…...
QT基础篇(13)QT5数据库
1.数据库基本概念 数据库(Database)是指存储、管理和组织数据的集合。它是一个组织化的、可持久化的数据集合,用于支持数据的存储、检索、更新和管理。 数据库系统(Database System)是建立在计算机上的数据管理系统&…...
ctfshow信息收集(web1-web20)
目录 web1 web2 web3 web4 web5 web6 web7 web9 web10 web11 web14 web15 web16 web17 web18 web19 web20 web1 根据提示的孩子开发的时候注释没有被及时删除 web2 js原因无法查看源代码 第一种方法 在url前加入 view-source: 会显示页面源代…...
从零学习Hession RPC
为什么学习Hessian RPC? 存粹的RPC,只解决PRC的四个核心问题(1.网络通信2.协议 3.序列化 4.代理)Java写的HessianRPC落伍了,但是它的序列化方式还保存着,被Dubbo(Hessian Lite)使用。 被落伍,只…...
实施精细化管理的六大关键步骤
在当今高度竞争的市场环境中,企业若想脱颖而出,必须实现精细化管理。这不仅是为了提高效率,更是为了确保在复杂多变的市场中保持领先地位。通过以下六个关键步骤,企业可以构建一个强大的精细化管理体系,从而为未来的成…...
QT+C++环境调用python函数可以进入python环境和模块,但是调用功能函数错误
QTC环境使用Python.h调用python函数可以进入python环境和模块,但是调用功能函数错误 背景: 定义的python函数使用了其他库封装好的函数,在python环境下运行此程序毫无问题但是QT调用却显示调用此函数出错,此时调用此.py文件内的其…...
2024.1.24力扣每日一题——美丽塔I
2024.1.24 题目来源我的题解方法一 暴力枚举方法二 单调栈前、后缀和 题目来源 力扣每日一题;题序:2865 我的题解 方法一 暴力枚举 将每个位置都作为山峰来进行遍历,计算每个山峰下的最大山脉数组和 时间复杂度:O( n 2 n^2 n2)…...
视频监控平台EasyCVR增加fMP4流媒体视频格式及其应用场景介绍
近期我们在视频监控管理平台EasyCVR系统中新增了HTTP-FMP4播放协议,今天我们就来聊聊该协议的特点和应用。 fMP4(Fragmented MPEG-4)是基于MPEG-4 Part 12的流媒体格式,是流媒体的一项重要技术,因为它能通过互联网传送…...
未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?
编辑:陈萍萍的公主一点人工一点智能 未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战,在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目,该项目是一个 Spring AI 快速入门的样例工程项目,旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计,每个模块都专注于特定的功能领域,便于学习和…...
