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

最近大家都在玩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 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>
  );
};