【笔记】动手学Ollama 第六章 Ollama可视化界面部署

ReedFoley

1135人浏览 · 2025-08-21 00:21:58

ReedFoley · 2025-08-21 00:21:58 发布

正文详见：6.1 使用 FastAPI 部署 Ollama 可视化对话界面https://datawhalechina.github.io/handy-ollama/#/C6/1.%20%E4%BD%BF%E7%94%A8%20FastAPI%20%E9%83%A8%E7%BD%B2%20Ollama%20%E5%8F%AF%E8%A7%86%E5%8C%96%E5%AF%B9%E8%AF%9D%E7%95%8C%E9%9D%A2

一、FastAPI部署

1、克隆handy-ollama仓库

通过git下载gandy-ollama仓库，在路径handy-ollama\notebook\C6下找到fastapi_chat_app文件夹。

git clone https://github.com/AXYZdong/handy-ollama

2、目录结构

fastapi_chat_app/
│
├── app.py
├── websocket_handler.py
├── static/
│   └── index.html
└── requirements.txt

fastapi_chat_app文件夹包括四部分：

app.py：FastAPI应用程序的主要设置和路由
websocket_handler.py：处理WebSocket链接和消息流
atatic/index.html：HTML页面
requirements.txt：环境依赖

3、安装环境依赖

pip install -r requirements.txt

除了安装dw给的环境外，还需要进行完整版本的Uvicorn，不然运行app的时候可能会报错。

pip install 'uvicorn[standard]'

4、代码讲解

websocket_handler.py

该文件实现了一个简单的 WebSocket 聊天端点，它接受客户端连接，获取用户输入，将其发送给 Ollama 模型，并将模型的响应流式返回给客户端。

import ollama
from fastapi import WebSocket

# 定义一个异步函数 websocket_endpoint 作为 WebSocket 端点处理函数，接收一个 WebSocket 类型的参数
async def websocket_endpoint(websocket: WebSocket):

    # 接受客户端的 WebSocket 连接请求
    await websocket.accept()
    # 等待并接收客户端发送的文本消息，存储在 user_input 变量中
    user_input = await websocket.receive_text()
    
    # 调用 ollama.chat() 方法与本地大语言模型交互
    stream = ollama.chat(
        model='llama3.1',
        messages=[{'role': 'user', 'content': user_input}],
        stream=True
    )

    try:
        for chunk in stream:
            # 从每个响应块中提取消息内容
            model_output = chunk['message']['content']
            # 将模型输出发送回客户端，实现实施对话
            await websocket.send_text(model_output)
    except Exception as e:
        await websocket.send_text(f"Error: {e}")
    finally:
        await websocket.close()

app.py

该文件是整个应用的入口点，它设置了静态文件服务、HTML 页面响应和 WebSocket 端点，并配置了服务器运行参数。

from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from websocket_handler import websocket_endpoint

# 创建一个 FastAPI 应用实例
app = FastAPI()


app.mount("/static", StaticFiles(directory="static"), name="static")


# 定义一个 GET 请求处理函数，响应类型为 HTMLRespons
@app.get("/", response_class=HTMLResponse)
async def get_form():
    # 打开 static 目录下的 index.html 文件，使用 with 语句确保文件正确关闭
    with open("static/index.html") as f:
        # 读取 index.html 文件的内容到 html_content 变量
        html_content = f.read()
    # 返回 HTML 响应，内容为读取的 html_content
    return HTMLResponse(content=html_content)

# 注册 WebSocket 端点，指向 websocket_endpoint 。py
app.websocket("/ws")(websocket_endpoint)

if __name__ == "__main__":
    # 导入 uvicorn 服务器，用于运行 FastAPI 应用
    import uvicorn

    uvicorn.run("app:app", host="127.0.0.0", port=5001, reload=True)

5、运行APP

在fastapi_chat_app/目录下运行app.py文件。

uvicorn app:app --reload

按住Ctrl鼠标左键点击网址即可进入页面。

二、WebUI部署

1、Node.js部署

1.1 安装Node.js

官网：Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。https://www.nodejs.com.cn/download.html

下载并按照流程安装好后会弹出powershell界面，通过执行以下命令可以确定是否安装好Node.js

node -v

1.2 克隆ollama-webui仓库

通过git安装dw提供的ollama-webui仓库。

git clone https://github.com/ollama-webui/ollama-webui-lite.git

1.3 安装依赖

cd ollama-webui-lite
npm ci

npm ci 是基于 package-lock.json 文件运行的安装依赖的命令。

1.4 运行

npm run dev

按住Ctrl鼠标左键点击http://localhost:3000/就可以打开页面。

在Select a model选择模型后，便可开始使用。

2、Docker部署

首先要部署Docker，详情可见。windows部署目前我只在win11版本成功过。【笔记】Dify动手实践教程 1. Dify本地部署-CSDN博客文章浏览阅读309次，点赞7次，收藏4次。【笔记】Dify动手实践教程 1. Dify本地部署https://blog.csdn.net/ReedFoley/article/details/149349322?fromshare=blogdetail&sharetype=blogdetail&sharerId=149349322&sharerefer=PC&sharesource=ReedFoley&sharefrom=from_link

在终端使用以下命令，拉取 ghcr.io/open-webui/open-webui:main 镜像并运行。

docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

等待一段时间后下载完毕