FastAPI 作为H5中流式输出的后端

FastAPI 作为H5中流式输出的后端

最近大家都在玩LLM,我也凑了热闹,简单实现了一个本地LLM应用,分享给大家,百分百可以用哦~^ - ^

先介绍下我使用的三种工具:

Ollama:一个免费的开源框架,可以让大模型很容易的运行在本地电脑上
FastAPI:是一个用于构建 API 的现代、快速(高性能)的 web 框架,使用 Python 并基于标准的 Python 类型提示
React:通过组件来构建用户界面的库
简单来说就类似于LLM(数据库)+FastAPI(服务端)+React(前端)
在这里插入图片描述

前端:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>SSE Demo with Fetch</title><style>#events {height: 200px;border: 1px solid #ccc;padding: 5px;overflow-y: scroll;white-space: pre-wrap; /* 保留空格和换行 */}</style><script src="./js/jquery-3.1.1.min.js"></script>
</head>
<body><h1>Server-Sent Events Test</h1>
<button id="start">Start Listening</button>
<label for="" >apiUrl</label>
<input type="text" name="" id="url" value="http://127.0.0.1:8563/llm_stream" >
<br>
<label> 返回内容</label>
<br>
<input type="text" name="" id="userText" value="" >
<br>
<input type="textarea" name="" id="outtext_talk" value="" style="width:400px; height: 200px;"></textarea>
<div id="events"></div><script>$("#start").click(async function() {console.log($("#userText").val());let text=$("#userText").val().trim();if(text==''){alert("用户输入不为空");return 0;}
const data={content:text,model:"gpt-3.5-turbo",stream:true
}$("#outtext_talk").val('')const res= await fetch($('#url').val(),{method:"POST",body:JSON.stringify(data),headers: {"Content-Type": "application/json",}
});const reader=res.body?.pipeThrough(new TextDecoderStream()).getReader();let count=0const textDecoder = new TextDecoder();while (count<10){let {done,value} = await reader.read()if (done) {
console.log("***********************done");break;}let parts = value.split('\r\n\r\n'); // 根据 SSE 的数据格式分割// 处理所有完整的消息console.log(parts);try{parts.slice(0,-1).forEach(part =>{console.log(part);if(part.startsWith('data:')){const data=part.replace('data:','')aiText=JSON.parse(data)$('#outtext_talk').val( $('#outtext_talk').val()+aiText.message)}})}catch(error){console.error("JSON解析出错",detext);count+=1;}}});
</script></body>
</html>

后端:

# -*- coding:utf-8 -*-
"""
@Author: 风吹落叶
@Contact: waitKey1@outlook.com
@Version: 1.0
@Date: 2024/6/11 22:51
@Describe: 
"""
import asyncio
import jsonfrom fastapi import FastAPI, Response
from fastapi.responses import StreamingResponse
import time
import uvicorn
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModelimport openai
import os
import os
from openai import OpenAIdef openai_reply(content,model="gpt-3.5-turbo"):client = OpenAI(# This is the default and can be omittedapi_key='sk-S7KwoLDoAzi5kwOs3b3e27A64eD4483bBaD5E2750a6e72E6',base_url='https://kksj.zeabur.app/v1')chat_completion = client.chat.completions.create(messages=[{"role": "user","content": content,}],model=model,)# print(chat_completion)return chat_completion.choices[0].message.contentapp = FastAPI()
# 启用CORS支持
app.add_middleware(CORSMiddleware,allow_origins=["*"],allow_credentials=True,allow_methods=["*"], # 或者只列出 ["POST", "GET", "OPTIONS", ...] 等allow_headers=["*"],
)class Req(BaseModel):text:strstream:booldef event_stream(reqs):for _ in range(10):  # 演示用,发送10次消息后关闭连接yield json.dumps({'text':f"data: Server time is {time.ctime()} s {reqs.text[:2]}"})time.sleep(1)@app.post("/events")
async def get_events(reqs:Req):return StreamingResponse(event_stream(reqs), media_type="application/json")class LLMReq(BaseModel):content:strmodel:strstream:booldef openai_stream(content,model='gpt-3.5-turbo'):client = OpenAI(# This is the default and can be omittedapi_key='sk-S7KwoLDoAzi5kwOs3b3e27A64eD6e72E6',base_url='https://kksj.zeabur.app/v1')stream = client.chat.completions.create(messages=[{"role": "user","content": content,}],  # 记忆model=model,stream=True,)return streamfrom starlette.requests import Request
from sse_starlette import EventSourceResponse
@app.post("/llm_stream")
async def flush_stream(req: LLMReq):async def event_generator(req: LLMReq):stream = openai_stream(req.content, req.model)for chunk in stream:if chunk.choices[0].delta.content is not None:word=chunk.choices[0].delta.contentyield json.dumps({"message": word}, ensure_ascii=False)await asyncio.sleep(0.001)return EventSourceResponse(event_generator(req))if __name__ == '__main__':uvicorn.run(app,port=8563)

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

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

相关文章

无需破解,基于AI翻译的Poedit翻译小助手PoeditHelper

背景&#xff1a; 应用在做国际化的时候是一件比较让人头大的事情&#xff0c;需要进行多国语言互译&#xff0c;做国际化的方式有很多&#xff0c;现阶段比较常用的方式是gettext的形式&#xff0c;并输出一个.po文件来做国际化&#xff0c;与之配套的有一款半开源软件叫Poedi…

Java:爬虫htmlunit抓取a标签

如果对htmlunit还不了解的话可以参考Java&#xff1a;爬虫htmlunit-CSDN博客 了解了htmlunit之后&#xff0c;我们再来学习如何在页面中抓取我们想要的数据&#xff0c;我们在学习初期可以找一些结构比较清晰的网站来做测试爬取&#xff0c;首先我们随意找个网站如下&#xff…

免费的端口映射工具哪个好用

端口映射&#xff0c;即从一个网络环境下的端口映射到另一个网络环境下访问的过程。通常由软件方式来提供这一过程的实现&#xff0c;或一些客户端工具。当涉及内外网时&#xff0c;如内网端口地址映射到外网地址&#xff0c;即是内网穿透的原理。免费的端口映射工具有哪些&…

13. 第十三章 案例研究-选择数据结构

13. 案例研究-选择数据结构 到这里尼应该已经学会了Python的核心数据结构, 也见过了一些使用它们的算法. 如果你想要更多地了解算个发可以阅读第21章. 本章配合联系介绍一个案例分析, 帮你思考如何选择数据结构并如何使用它们.13.1 单词频率分析 1. 练习1 编写一个程序, 读入…

Leetcode498. 对角线遍历

Every day a Leetcode 题目来源&#xff1a;498. 对角线遍历 解法1&#xff1a;模拟 根据题目要求&#xff0c;矩阵按照对角线进行遍历。设矩阵的行数为 m&#xff0c;矩阵的列数为 n&#xff0c;我们仔细观察对角线遍历的规律可以得到如下信息&#xff1a; 一共有 mn−1 条…

JUC并发编程-第一天

JUC并发编程-第一天 JUC开发基础知识进程、线程、协程 JUC开发基础知识 先有进程&#xff0c;然后进程可以创建线程&#xff0c;线程是依附在进程里面的&#xff0c;线程里面包含多个协程 进程之间不共享全局变量&#xff0c;线程之间共享全局变量(线程通信就是用的这个&#x…

EasyExcel文件导出,出现有文件但没有数据的问题

一开始由于JDK版本过高&#xff0c;我用的17&#xff0c;一直excel没有数据&#xff0c;表头也没有&#xff0c;后来摸索了好久&#xff0c;找了资料也没有&#xff0c;后来改了代码后报了一个错误&#xff08;com.alibaba.excel.exception.ExcelGenerateException: java.lang.…

使用pnpm创建vue3项目

https://pnpm.io/zh/ 全局安装&#xff1a; npm install -g pnpm 检查版本&#xff1a; pnpm -v 创建vue3项目&#xff1a; pnpm create vuelatest 项目装包&#xff1a; pnpm install 运行项目&#xff1a; pnpm dev 命令行&#xff1a; https://pnpm.io/zh/pnpm-cli pnpm …

NFT 智能合约实战-快速开始(1)NFT发展历史 | NFT合约标准(ERC-721、ERC-1155和ERC-998)介绍

文章目录 NFT 智能合约实战-快速开始(1)NFT发展历史国内NFT市场国内NFT合规性如何获得NFT?如何查询NFT信息?在 OpenSea 上查看我们的 NFT什么是ERC721NFT合约标准ERC-721、ERC-1155和ERC-998 对比ERC721IERC721.sol 接口内容关于合约需要接收 ERC721 资产 onERC721Received…

vue3+vite:动态引入静态图片资源

目录 第一章 前言 第二章 vue2与vue3动态引入静态图片资源 2.1 vue2 webpack动态引入静态图片资源 2.1.1 了解 2.1.2 vue2项目动态引入静态图片资源 2.2 vue3 vite动态引入静态图片资源 2.2.1 了解 2.2.2 require vs import了解 2.2.3 vue3vite 项目动态引入静态图片…

CRC计算单元

CRC计算单元 CRC是Cyclic Redundancy Check,循环冗余校验的缩写. 是一种检测数据错误的技术,主要用在数据通信和数据存储的方面. 但是这种技术只能检测到传输或存储的数据是否有误,没有将错误纠正的功能. 而CRC计算单元是一个独立的具备CRC计算功能的外设. AT32 MCU片上CRC计…

禁渔期水域监管:EasyCVR视频智能监控方案

一、背景与需求分析 根据农业部印发的《中国渔政亮剑2024系列专项执法行动方案》&#xff0c;我国将持续推进长江十年禁渔、海洋伏季休渔、黄河等内陆重点水域禁渔等专项行动。根据四川省相关规定&#xff0c;每年3月1日至6月30日为禁渔期&#xff0c;在此期间&#xff0c;四川…

构建汛期智慧水利新生态:EasyCVR视频汇聚监控综合管理方案解析

一、项目背景与目标 随着我国水利事业的不断发展&#xff0c;水利设施的管理与维护工作愈发重要。随着夏季汛期的到来&#xff0c;水利管理工作面临着巨大的挑战。为确保水利设施的安全运行&#xff0c;及时应对可能出现的汛情&#xff0c;建设一套高效、智能的视频监控可视化…

后继者00

题目链接 后继者 题目描述 注意点 题目中的树是二叉搜索树节点p在二叉搜索树中一定存在 解答思路 本题关键是找到值大于节点p的值的第一个节点&#xff0c;因为本题中的树是二叉搜索树&#xff0c;所以左子树的值始终小于根节点&#xff0c;右子树的值始终大于根节点访问到…

31、shell循环

一、循环 循环&#xff1a;循环是一种重复执行一段代码的结构。只要满足循环的条件&#xff0c;会一直执行这个代码。 循环条件&#xff1a;在一定范围之内&#xff0c;按照指定的次数来执行循环。 循环体&#xff1a;在指定的次数内&#xff0c;执行的命令序列。只要条件满…

力扣42 接雨水

听说字节每人都会接雨水&#xff0c;我也要会哈哈哈 数据结构&#xff1a;数组 算法&#xff1a;核心是计算这一列接到多少雨水&#xff0c;它取决于它左边的最大值和右边的最大值&#xff0c;如下图第三根柱子能接到的雨水应该是第一根柱子高度和第五根柱子高度的最小值减去第…

DDei在线设计器-属性编辑器

DDei-Core-属性编辑器 DDei-Core-属性编辑器插件包含了文本、大文本、数值、下拉、单选、勾选以及颜色等属性编辑。 图形和属性共同构成一个完整的定义&#xff0c;属性编辑器就是编辑属性值的控件。当选中图形实例时&#xff0c;属性面板就会展现当前实例的所有属性以及属性编…

qt仿制qq登录界面

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {// 设置窗口大小this->resize(window_width, window_heigth);// 固定窗口大小this->setFixedSize(window_width, window_heigth);// 设置窗口图标this->se…

怎么学习汇川Codesys PLC教程?

前言 各位好&#xff0c;我在B站和抖音上都有发布视频的&#xff0c;搜索我的名称“阿凡工控分享”即可。在CSDN上发表文章也是想把我的一点见解和经验分享出来&#xff0c;进一步的方便大家进行学习。 我是正文 本文主要也是为了方便大家学习汇川的Codesys PLC而制作的&…

登录/注册- 滑动拼图验证码(IOS/Swift)

本章介绍如何使用ios开发出滑动拼图验证码&#xff0c;分别OC代码和swift代码调用 1.导入项目model文件OC代码&#xff08;下载完整Demo&#xff09; 2.放入你需要显示的图片 一&#xff1a;OC调用 #import "ViewController.h" #import "CodeView.h"…