手写效果流式响应(langchain+fastapi+js)

这是一个前后端完整可用的小项目

后端是 Python 的 FastAPI 框架,调用 langchain 进行 openai 的模型对话。前端是纯html css javascript,没调用任何第三方库,方便集成到 Vue React 等现有前端项目。

聊天界面:
在这里插入图片描述

效果就是提问之后, AI 的回答是一个一个字打印出来的效果。

开始讲解

一、html css 就不讲了,具体看项目代码。讲讲核心的 javascript 代码:

let server_url = 'http://192.168.56.105:8008'

/***
 * http请求(流式响应处理)
 * @param url
 * @param data
 * @param func
 * @returns {Promise<void>}
 */
async function readChatbotReply(url,data={},func) {
    const response = await fetch(server_url+url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
        timeout:15000,
        body: JSON.stringify(data)
    });

  const readableStream = response.body;
  if (readableStream) {
    const reader = readableStream.getReader();
    let first = true
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        break;
      }

      const chunkValue = new TextDecoder().decode(value);
      // 流式返回的信息,在这里处理您的业务
      func(first,chunkValue)
      first = false
    }
    // Stream fully consumed
    reader.releaseLock();
  }
}

1 使用 fetch 进行 http 请求,javascript 自带。
2 请求后端接口,响应数据在response.body里,后端会一两个字一两个字持续不断的推送过来
3 我们在循环里获取数据:await reader.read();,然后调用传入的第三个参数(回调函数)处理消息打字的展示效果。

二、后端 python 核心代码

@app.post("/chat")
async def chat(req_model: request_model.Chat):
    callback = AsyncIteratorCallbackHandler()
    llm = ChatOpenAI(streaming=True, callbacks=[callback], temperature=0)
    messages = [HumanMessage(content=req_model.content)]
    return StreamingResponse(generate_stream_response(callback, llm, messages), media_type="text/event-stream")


async def generate_stream_response(_callback, llm: ChatOpenAI, messages: list[BaseMessage]):
    """流式响应"""
    task = asyncio.create_task(llm.apredict_messages(messages))
    async for token in _callback.aiter():
        yield token

    await task

1 def generate_stream_response 是接收流式数据的方法。
2 def chat 是接口,前端可访问。先利用 langchain 框架调用 openai 接口进行对话,最后使用 StreamingResponse 流式响应类返回,里面传入流式处理的过程,也就是上面的generate_stream_response类。

三、前端不用部署
最开心的是前端不用部署,直接双击 index.html 文件打开即可使用。

后记:

1 全开源
2 github 地址:https://github.com/goophps/fastapi-streaming.git
3 前后端完整的所有代码、启动使用说明,项目里都有写。
4 本项目代码全部来自成熟商业项目,希望大家捧场:chatus.co

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源】基于SpringBoot的高校学院网站的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学院院系模块2.2 竞赛报名模块2.3 教育教学模块2.4 招生就业模块2.5 实时信息模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 学院院系表3.2.2 竞赛报名表3.2.3 教育教学表3.2.4 招生就业表3.2.5 实时信息表 四、系…

ERP管理系统的运作流程是怎样的?

ERP管理系统的运作流程是怎样的&#xff1f; 下文中用到的图片和系统&#xff0c;都来自于我们公司正在用的软件——简道云进销存软件 这是我们团队搭建的模板&#xff0c;需要的可以自取&#xff0c;可以直接使用&#xff0c;也可以在模板的基础上自行搭建 ERP管理系统模板&…

分布式日志和链路追踪

分布式日志 实现思路 分布式日志框架服务的实现思路基本是一致的&#xff0c;如下&#xff1a; 日志收集器&#xff1a;微服务中引入日志客户端&#xff0c;将记录的日志发送到日志服务端的收集器&#xff0c;然后以某种方式存储数据存储&#xff1a;一般使用ElasticSearch分…

【QT开发笔记-基础篇】| 第四章 事件QEvent | 4.10 总结QT中的事件传递流程

本节对应的视频讲解&#xff1a;B_站_链_接 【QT开发笔记-基础篇】 第4章 事件 4.10 总结事件传递流程(1) 事件处理函数接受还是忽略 本章要实现的整体效果如下&#xff1a; 事件传递总流程图&#xff0c;如下&#xff1a; 这张图是不是还不太明白&#xff1f;&#xff1f; 别…

RabbitMQ基础篇 笔记

RabbitMQ 余额支付 同步调用 一步一步的来&#xff0c;支付业务写完后&#xff0c;如果之后加需求&#xff0c;还需要增加代码&#xff0c;不符合开闭原则。 性能上也有问题&#xff0c;openfeign是同步调用&#xff0c;性能太差。 同步调用耦合太多。 同步的优势是可以立…

matlab中narginchk函数用法及其举例

matlab中narginchk函数用法及其举例 narginchk在编写子函数程序时候&#xff0c;在验证输入参数数目方面具有重要作用&#xff0c;本博文讲一讲该函数的用法。 一、narginchk功能 narginchk的作用是验证输入参数数目。 二、语法 narginchk(minArgs,maxArgs)narginchk(minA…

windows服务器环境下使用php调用com组件

Office设置 安装 office2013 且通过正版激活码激活 在组件服务 计算机 我的电脑 DOM 中找到 Microsoft Word 97 - 2003 文档 服务&#xff0c;右键属性 身份验证调整为 无 在 标识中 调整为 交互式用户 php环境设置 开启com组件扩展 在php.ini中设置 extensionphp_com_dotn…

同范围中的嵌入式和单片机区别是什么?

今日话题&#xff0c;同范围中的嵌入式和单片机区别是什么&#xff1f;嵌入式系统和单片机不仅仅是软硬件的区别&#xff0c;更涉及到应用领域和功能特性的不同。嵌入式系统通常包括一个完整的计算机系统&#xff0c;其中包括处理器、内存、输入输出接口以及一个操作系统&#…

2023年中国消防报警设备市场规模现状及行业竞争趋势分析[图]

消防安全行业主要分为消防产品和消防工程两个子行业。消防产品又可细分成消防装备、消防报警、自动灭火、防火与疏散、通用与防烟排烟、消防供水等 6 大类&#xff0c;其中消防装备主要用于消防部队&#xff0c;其他 5 大类主要用于建筑物消防。 消防行业内容 资料来源&#x…

21款奔驰GLE450升级23P驾驶辅助 缓解开车疲劳

驾驶辅助和自动驾驶的区别就是需要人为去接管&#xff0c;虽然车辆会根据道路自己行驶&#xff0c;弯道上也能居中自动修正行驶&#xff0c;长时间不接管方向盘&#xff0c;系统会提示人为接管&#xff0c;这就是奔驰的23P驾驶辅助系统&#xff0c; 很多车友升级23P驾驶辅助系…

苍穹外卖-01

苍穹外卖-01 课程内容 软件开发整体介绍苍穹外卖项目介绍开发环境搭建导入接口文档Swagger 项目整体效果展示&#xff1a; ​ 管理端-外卖商家使用 ​ 用户端-点餐用户使用 当我们完成该项目的学习&#xff0c;可以培养以下能力&#xff1a; 1. 软件开发整体介绍 作为一名…

用Visual Studio(VS)开发UNIX/Linux项目

目录 FTP是免不了的 正确设置头文件 组织项目结构 创建何种项目类型 FTP自动上传 大部分具有Windows开发经验的程序员会比较喜欢使用Visual Studio&#xff0c;而大部分Unix/Linux程序员则喜欢使用UltraEdit直接在主机上写代码。 为什么直接在主机上写代码呢&#xff0c;因…

Leo赠书活动-03期 【ChatGPT 驱动软件开发:AI 在软件研发全流程中的革新与实践 】

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 赠书活动专栏 ✨特色专栏&#xff1a;…

【JAVA学习笔记】45 - (35 - 43)第十章作业

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter10/src/com/yinhai/homework10 1.静态属性的共享性质 判断下列输出什么 public class HomeWork01 {public static void main(String[] args) {Car c new Car();//无参构造时改变color为red…

Redis快速上手篇(四)(Spring Cache,缓存配置)(注解方式)

Spring Cache 从3.1开始&#xff0c;Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的 使用Spring Cache的时候我们要保证我们缓存的方法对于相同的方法参数要有相同的返回结果。 使用Spring Cache需要我们做两方面…

聚观早报 |2024款飞凡R7官宣;小米14新配色材质

【聚观365】10月27日消息 2024款飞凡R7官宣 小米14新配色材质 金山办公2023第三季度业绩 IBM2023第三季度业绩 新东方2024财年第一季度业绩 2024款飞凡R7官宣 飞凡汽车官宣&#xff0c;2024款飞凡R7将于11月上市&#xff0c;新车将搭载飞凡巴赫座舱&#xff0c;同时超过1…

endnote设置

问题1&#xff1a;参考文献的tab太长 首先要在endnote里面这样设置&#xff0c;file->output->edit "XXX" 保存之后&#xff0c;在word更新目录。 在word里面设置悬挂缩进 结果&#xff1a; Endnote参考编号与参考文献距离太远怎么调整 endnote 文献对齐方式…

正点原子嵌入式linux驱动开发——外置RTC芯片PCF8563

上一章学习了STM32MP1内置RTC外设&#xff0c;了解了Linux系统下RTC驱动框架。一般的应用场合使用SOC内置的RTC就可以了&#xff0c;而且成本也低&#xff0c;但是在一些对于时间精度要求比较高的场合&#xff0c;SOC内置的RTC就不适用了。这个时候需要根据自己的应用要求选择合…

解决报错:gnutls_handshake() failed: The TLS connection was non-properly terminated.

执行git clone的时候&#xff0c;出现错误&#xff1a;gnutls_handshake() failed: The TLS connection was non-properly terminated. 如图&#xff1a; 解决方式&#xff1a; 两次重置代理&#xff1a;完美解决 git config --global --unset https.https://github.com.pro…

网络搭建和运维的基础题目

服务部分&#xff08;linux&#xff09; 实操部分 1.在任意文件夹下面创建形如 A/B/C/D 格式的文件夹系列。 [rootlocalhost ~]# mkdir -p A/B/C/D 2.在创建好的文件夹下面&#xff0c;A/B/C/D &#xff0c;里面创建文本文件 mkdir.txt [rootlocalhost ~]# cd A/B/C/D [r…