最近大家都在玩LLM，我也凑了热闹，简单实现了一个本地LLM应用，分享给大家，百分百可以用哦～^ - ^
先介绍下我使用的三种工具：
- Ollama：一个免费的开源框架，可以让大模型很容易的运行在本地电脑上
- FastAPI：是一个用于构建 API 的现代、快速（高性能）的 web 框架，使用 Python 并基于标准的 Python 类型提示
- React：通过组件来构建用户界面的库
简单来说就类似于LLM（数据库）+FastAPI（服务端）+React（前端）
image.png
开始搭建
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 aiohttp
app = 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 event
if await request.is_disconnected():
break
return 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>
);
};
界面比较简陋，大家随便看一下：
image.png
前端代码还加了些小功能，比如右键支持某句话的替换和翻译，因为用了input，所以可以获取光标的位置从而把文本插入或者替换选中文本。不过还有个弊端就是没办法支持markdown输出了，这个问题暂时还不知道怎么解决，要么再添加个预览模式。
现在github上好多现成的聊天框架，好多人都用gradio，瞄了眼功能很强大，基本支持各种媒体输入输出，还可以自定义页面布局，有兴趣的小伙伴可以去试试～
