【JavaScript】fetch 处理流式数据,实现类 chatgpt 对话

本文只包含最基础的请求后端大佬给得对话接口,大部分模型的传参是差不多的,核心还是如何处理 fetch 获取的流数据

import { defineStore } from 'pinia';
import { ElMessage } from 'element-plus';type Role = 'system' | 'user' | 'assistant';
export interface Message {role: Role;content: string;
}
interface ChatStore {model: 'Gnosis' | 'chatglm2-6b' | 'cc-13b-chat';chatApi: string;messages: Message[];done: boolean | null;
}
const DEFAULT_PROMPT = `你应该根据用户回答生成答案。答案必须尽可能简明扼要。字数控制在512个字符以内`;export const useChatStore = defineStore({id: 'chatStore',state: (): ChatStore => {return {model: 'cc-13b-chat',chatApi: 'chat_api/chat/knowledge_base_chat',messages: [{role: 'system',content: DEFAULT_PROMPT,},],done: null,};},actions: {async fetchChat(query: string) {this.messages.push({role: 'user',content: query,});let response: any = null;try {response = await fetch(this.chatApi, {headers: {'Content-Type': 'application/json',},method: 'POST',body: JSON.stringify({query: query,history: this.messages,model_name: this.model,stream: true,knowledge_base_name: 'lb_test',top_k: 1,score_threshold: 1,temperature: 0.7,max_tokens: 4096,prompt_name: 'default',}),});} catch (error) {console.log(error);ElMessage.error('请求失败');return;}const data = response.body;this.messages.push({role: 'assistant',content: '',});// 处理流式数据if (data) {const reader = data.getReader();const decoder = new TextDecoder('utf-8');this.done = false;while (!this.done) {const { value, done: readerDone } = await reader.read();// value值// {"answer": "帮助解决"}if (value) {const char = decoder.decode(value);console.log(char);// if (char === '\n') {//   this.messages[this.messages.length - 1].content += '\n';//   continue;// }if (char) {const res = JSON.parse(char);this.messages[this.messages.length - 1].content += res.answer ?? '';}}if (!this.done) {this.done = readerDone;}}}// 对话结束this.done = null;},},// persist: {//   key: 'store',//   storage: window.localStorage,// },
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/147571.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

社区分享|杭银消费金融基于MeterSphere开展接口自动化测试

杭银消费金融有限公司(以下简称“杭银消费金融”)成立于2015年12月,是经中国银保监会批准,由杭州银行作为主发起人,联合滴滴出行、中国银泰等企业组建的持牌消费金融机构,注册资本为25.61亿元。杭银消费金融…

Python武器库开发-flask篇之Get与Post(二十五)

flask篇之Get与Post(二十五) 在Flask中通过request对象请求相关的数据,在正常的网页请求的过程中,有两种请求的方式,Get和Post Get请求 我们现在来看看在Flask中是如何以Get方式得到我们想要的值的,通过request.args可以获取Get请求中的所…

深入理解网络协议:通信世界的基石

💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】 在当今数字化时代,网络协议是连接世…

openGauss通过VIP实现的故障转移

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

机器学习笔记 - Ocr识别中的文本检测EAST网络概述

一、文本检测 文本检测简单来说就是找到图像中可以出现文本的区域。例如,请参见下图,其中在检测到的文本周围绘制了绿色边框。 在进行文本检测时,你可能会遇到两种情况 具有结构化文本的图像:这是指具有干净/均匀背景和常规字体的图像。文本大多密集,行结构正确,…

php连接sqlserver 安装sqlserver 驱动windows系统

第一步下载Windows 上的 Microsoft ODBC Driver for SQL Server ODBC 驱动程序 Microsoft ODBC Driver for SQL Server 直接下载安装即可,安装后可查看安装版本 第二步:下载php_sqlsrv 驱动 安装解压后,会有对应php版本的驱动文件&#xf…

Python hashlib 模块详细教程:安全哈希与数据完整性保护

更多Python学习内容:ipengtao.com 大家好,我是涛哥,今天为大家分享 Python hashlib 模块详细教程,文章6500字,阅读大约17分钟,大家enjoy~~ hashlib模块为Python提供了一种简便的方式来使用各种哈希算法&…

【科技素养】蓝桥杯STEMA 科技素养组模拟练习试卷C

单选题 1、A right triangle has a side that is 5cm long, and its hypotenuse is 13cm long.The area of the triangle is (). A、30 cm2 B、60 cm2 C、65 cm2 D、32.5 cm2 答案:A 2、一位旅客安检后走在前往登机口的路上。路途中一部…

leetcode系列(双语)003——GO无重复字符的最长子串

文章目录 003、Longest Substring Without Repeating Characters个人解题官方解题扩展 003、Longest Substring Without Repeating Characters 无重复字符的最长子串 Given a string s, find the length of the longest substring without repeating characters. 给定一个字符…

【Linux】进程替换|exec系列函数

文章目录 一、看一看单进程版的进程替换二、进程替换的原理三、多进程版——验证各种程序替换接口exec系列函数execlexeclpexecvexecvp tipsexecleexecve 四、总结 一、看一看单进程版的进程替换 #include<stdio.h> #include<unistd.h> #include<stdlib.h>i…

电子学会C/C++编程等级考试2021年12月(一级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:输出整数部分 输入一个双精度浮点数f, 输出其整数部分。 时间限制:1000 内存限制:65536输入 一个双精度浮点数f(0 < f < 100000000)。输出 一个整数,表示浮点数的整数部分。样例输入 3.8889样例输出 3 答案: //参…

vue项目中使用vant轮播图组件(桌面端)

一. 内容简介 vue使用vant轮播图组件(桌面端) 二. 软件环境 2.1 Visual Studio Code 1.75.0 2.2 chrome浏览器 2.3 node v18.14.0 三.主要流程 3.1 安装环境 3.2 添加代码 3.3 结果展示 四.具体步骤 4.1 安装环境 先安装包 # Vue 3 项目&#xff0c;安装最新版 Va…

获取虎牙直播源

为了今天得LOL总决赛 然后想着下午看看 但是网页看占用高 就想起来有个直播源 也不复杂看了大概一个小时 没啥问题 进入虎牙页面只有 直接F12 网络 然后 看这个长条 一直在获取 发送 那就选中这个区间 找到都是数字这一条 如果直接访问的话会一直下载 我这都取消了 然后 打开…

Java刷题基本语法

1. 值相等比较 char比较&#xff1a;&#xff0c;因为char是基本类型 String比较&#xff1a; a.equals保险 b.如果是常量&#xff0c;可以 2. char[] 和 String相互转换 a. char[] > String 可不能用toString()方法啊&#xff0c;必须要用String.valueOf(char[]) b.…

PostgreSQL创建分区表,并插入大量数据

创建分区表&#xff0c;按日期范围分区 CREATE TABLE sales (id serial,sale_date DATE, amount NUMERIC, PRIMARY KEY(id, sale_date) ) PARTITION BY RANGE (sale_date); 创建分区 CREATE TABLE sales_2019 PARTITION OF sales FOR VALUES FROM (2019-0…

C#数组:一维数组,二维数组、交错数组、数组复制

在C#中&#xff0c;数组是一种用于存储相同类型元素的数据结构。数组提供了一种有序、索引访问的方式&#xff0c;使得可以通过索引快速访问和修改数组中的元素。在C#中&#xff0c;主要有一维数组和二维数组两种类型。 一维数组&#xff08;Single-Dimensional Array&#xf…

关于新版的Maven创建Maven项目的时候只有Maven Archetype,而找不到Maven的这个问题

问题情况 : 在最近的学习过程中&#xff0c;想要创建一个Maven模块用于分块设计&#xff0c;但是在idea里面创建Maven项目的时候&#xff0c;发现与maven相关的只有Maven Archetype这个模块&#xff0c;然后找不到单纯的Maven模块&#xff1b;就像下面这样 : 解决方案 : 其…

大数据Doris(二十五):数据导入演示和其他导入案例

文章目录 数据导入演示和其他导入案例 一、数据导入演示

设计模式 - 六大设计原则(1)

六大设计原则 1、单一职责原则 特点&#xff1a; 类和方法属性等&#xff0c;都应当遵守单一职责。尽可能保持统一性&#xff0c;单一性。 含义&#xff1a; &#xff08;1&#xff09;统一性&#xff0c;定义一个模块就必须要符合所有对象的行为特征。比如声明一个 Animal 类…

【每日一题】—— C. Yarik and Array(Codeforces Round 909 (Div. 3))(贪心)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;每日一题 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日反刍 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0c;缓称…