Ollama+FastAPI+React手把手构建自己的本地大模型，支持SSE

aidu_pl">

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

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

Ollama：一个免费的开源框架，可以让大模型很容易的运行在本地电脑上
FastAPI：是一个用于构建 API 的现代、快速（高性能）的 web 框架，使用 Python 并基于标准的 Python 类型提示
React：通过组件来构建用户界面的库

简单来说就类似于LLM（数据库）+FastAPI（服务端）+React（前端）

开始搭建

1、下载Ollama之后使用Ollama完成大模型的本地下载和的运行

ollama run llama3:8b

这里我下载了最新的llama3:8b，电脑配置不高的话10b以内可以无痛运行，当然啦你也可以多下几个大模型，对比一下，我还下载了qwen，对比下来同一模型越大越聪慧，国内模型对中文支持度普遍好一点。

2、模型运行之后就可以调用了

curl http://localhost:11434/api/generate -d '{  
"model": "llama3:8b",  
"prompt": "Why is the sky blue?",  
"stream": false  
}'

3、新建一个python项目，实现代码如下：

import uvicorn
from fastapi import FastAPI, Request, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import json
import requests
from sse_starlette.sse import EventSourceResponse
import asyncio
import aiohttpapp = FastAPI(debug=True)origins = ["http://localhost",# 输入自己前端项目的地址
]# 设置跨域
app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)urls = ["http://localhost:11434/api/generate"]llm_list = [ {'label': 'qwen:latest', "value": 'qwen:latest'},{'label': 'llama3:8b', "value": 'llama3:8b'}, ]# 获取模型列表
@app.get("/llm/list")
def read_llm(model: str = 'qwen:latest'):return {"data": llm_list}# 这是一个异步生成器函数，它发送请求到 Ollama，并逐行读取响应内容，生成事件流。
async def stream_ollama_response(model_name, prompt):if model_name:url = urls[0]payload = {"model": model_name,"prompt": prompt,"stream": True}async with aiohttp.ClientSession() as session:async with session.post(url, json=payload) as response:async for line in response.content:if line:data = line.decode('utf-8').strip()if data:yield {"event": "message", "data": json.loads(data)["response"]}# 开始对话，接收 model_name 和 prompt 参数。它调用 event_generator 函数，启动与 Ollama 的交互，并通过 EventSourceResponse 返回事件流
@app.get("/chat")
async def generate(request: Request, model_name: str = 'qwen:latest',prompt: str = '请用中文介绍下中国古代四大名著之一的《红楼梦》'):async def event_generator():async for event in stream_ollama_response(model_name, prompt):yield eventif await request.is_disconnected():breakreturn EventSourceResponse(event_generator())if __name__ == '__main__':uvicorn.run(app="app", host="127.0.0.1", port=8000, reload=True)

这是用SSE形式实现流式输出的demo，下一篇我再讲讲如何用WebSocket实现。

4、新建一个react项目，我用了antd大礼包+@microsoft/fetch-event-source这个微软的sse插件实现，代码如下：

import { Input, Dropdown, Select, Form, Button, Space } from 'antd';
import { useEffect, useState } from 'react';
import { getList, chat } from './service';
import { useRequest } from '@umijs/max';
import { fetchEventSource } from '@microsoft/fetch-event-source';const { TextArea } = Input;# 不能走代理哦，走了代理流式就失效了，？- ？
export const getHost = () => {const isDev = process.env.NODE_ENV === 'development';if (isDev) {return 'http://127.0.0.1:8000';} else {return '';}
};export default () => {const [form] = Form.useForm();const { data = [] } = useRequest(getList);const [value, setValue] = useState('');const [start, setStart] = useState(null);const [end, setEnd] = useState(null);const [selected, setSelected] = useState(false);const [controller, setController] = useState(new AbortController());const sharedProps = {style: { width: '100%' },autoSize: { minRows: 3, maxRows: 20 },onChange: (e) => {setValue(e.target.value);setStart(e.target.selectionStart);},onClick: (e) => {setStart(e.target.selectionStart);},onSelect: (e) => {setStart(e.target.selectionStart);setEnd(e.target.selectionEnd);setSelected(e.target.value.substring(e.target.selectionStart, e.target.selectionEnd));},};const items = [{label: '重写这句话',key: '3',},{label: '把这句话翻译成中文',key: '4',},];const menuClick = ({ key }) => {switch (key) {case '3':return reWrite();case '4':return reWrite('zh-CN');}};const reWrite = async (type) => {if (!selected) {return;}setValue(value.slice(0, start) + '重写中。。。' + value.slice(end));const res = await chat({model: form.getFieldValue('model'),prompt: type? `${selected}”把“”中的这句话或单词翻译成中文，返回不要带格式，直接返回翻译结果`: selected,});setValue(value.slice(0, start) + res.data + value.slice(end));};# 获取数据流const fetchData = async (url) => {await fetchEventSource(url, {method: 'GET',signal: controller.signal,onopen(res) {if (res.ok && res.status === 200) {console.log('Connection made ', res);} else if (res.status >= 400 && res.status < 500 && res.status !== 429) {errorHandler(res);console.log('Client side error ', res);}},onmessage(event) {console.log(event);setValue((data) => [...data, event.data].join(''));},onclose() {console.log('Connection closed by the server');},onerror(err) {console.log('There was an error from server', err);},});};const onFinish = (values) => {fetchData(`${getHost()}/chat?model_name=${values.model_name}&prompt=${values.prompt}`);};return (<div><Form onFinish={onFinish} form={form}><Form.Item name="model_name" label="模型"><Select style={{ width: 200 }} options={[...data]} /></Form.Item><Form.Item name="prompt" label="提问"><Input /></Form.Item><Form.Item><Space><Button type="primary" htmlType="submit">提交</Button><Button onClick={() => controller.abort()}>暂停</Button></Space></Form.Item></Form><Dropdown menu={{ items, onClick: menuClick }} trigger={['contextMenu']}><TextArea value={value} {...sharedProps} /></Dropdown></div>);
};