手写效果流式响应(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

相关推荐
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku1 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员1 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句1 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿1 小时前
Web第二次笔记
前端·javascript
Dream耀1 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
洋流1 小时前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码1 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
然我1 小时前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试