Hermes + Open WebUI:给模型装一个好看的聊天界面

用Open WebUI给本地的Hermes模型配一个功能完善的Web聊天界面,支持多模型切换、对话管理、文件上传等功能。

目录

  1. 前置条件
  2. 方式一:Docker 部署(推荐)
    1. 连接本机 Ollama
    2. 连接远程服务器
    3. 用 Docker Compose
  3. 方式二:pip 安装
  4. 初始配置
    1. 创建管理员账号
    2. 确认模型连接
    3. 模型参数调整
  5. 核心功能介绍
    1. 多轮对话
    2. 多模型对比
    3. 文件上传和 RAG
    4. Prompt 模板
    5. 用户管理
    6. API 访问
  6. 界面自定义
    1. 修改标题和品牌
    2. 深色模式
    3. 自定义 CSS
  7. 性能和安全建议
    1. 反向代理
    2. 数据备份
    3. 更新
  8. 常见问题
  9. 搭配其他前端方案

命令行聊天虽然能用,但体验确实差点意思。特别是当你想给团队里的非技术同事用本地模型的时候,总不能让人家也去敲命令行吧。

Open WebUI(原名 Ollama WebUI)就是解决这个问题的。它提供了一个类似 ChatGPT 的网页界面,可以连接 Ollama 或者任何 OpenAI 兼容的 API 后端。功能挺全的——多轮对话、历史记录、文件上传、模型切换、用户管理,该有的都有。

今天就来把它跟本地的 Hermes 模型对接起来。

前置条件

确保你已经有了以下环境:

  1. Ollama 已安装并启动了 Hermes 模型
  2. Docker 和 Docker Compose(Open WebUI 推荐用 Docker 部署)

检查一下:

1
2
3
4
5
# Ollama 正常运行
curl http://localhost:11434/api/tags

# Docker 可用
docker --version

方式一:Docker 部署(推荐)

连接本机 Ollama

如果 Ollama 跑在同一台机器上:

1
2
3
4
5
6
7
8
docker run -d \
--name open-webui \
-p 3000:8080 \
-v open-webui:/app/backend/data \
--add-host=host.docker.internal:host-gateway \
-e OLLAMA_BASE_URL=http://host.docker.internal:11434 \
--restart always \
ghcr.io/open-webui/open-webui:main

几个关键参数说明:

  • -p 3000:8080:把容器的 8080 端口映射到主机的 3000 端口
  • -v open-webui:/app/backend/data:数据持久化,重启容器不丢对话记录
  • --add-host=host.docker.internal:host-gateway:让容器能访问宿主机的服务
  • OLLAMA_BASE_URL:指向宿主机上的 Ollama

启动后打开浏览器访问 http://localhost:3000

连接远程服务器

如果你的 Hermes 跑在另一台服务器上(比如通过 vLLM 部署的推理服务):

1
2
3
4
5
6
7
8
docker run -d \
--name open-webui \
-p 3000:8080 \
-v open-webui:/app/backend/data \
-e OPENAI_API_BASE_URL=http://your-server:8000/v1 \
-e OPENAI_API_KEY=not-needed \
--restart always \
ghcr.io/open-webui/open-webui:main

这里用的是 OPENAI_API_BASE_URL 而不是 OLLAMA_BASE_URL,因为 vLLM 提供的是 OpenAI 兼容 API。

用 Docker Compose

更推荐的方式,便于管理:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# docker-compose.yml
version: '3.8'

services:
open-webui:
image: ghcr.io/open-webui/open-webui:main
container_name: open-webui
ports:
- "3000:8080"
volumes:
- open-webui-data:/app/backend/data
extra_hosts:
- "host.docker.internal:host-gateway"
environment:
- OLLAMA_BASE_URL=http://host.docker.internal:11434
- WEBUI_SECRET_KEY=your-secret-key-here
- ENABLE_SIGNUP=true
restart: always

volumes:
open-webui-data:

启动:

1
docker compose up -d

方式二:pip 安装

不想用 Docker 的话,也可以直接 pip 装:

1
2
3
4
pip install open-webui

# 启动
open-webui serve --host 0.0.0.0 --port 3000

但这种方式依赖管理比较麻烦,生产环境不太推荐。

初始配置

创建管理员账号

第一次访问 http://localhost:3000 时,会让你创建管理员账号。这个账号拥有最高权限,保管好。

确认模型连接

登录后,点击左上角的模型选择下拉框,应该能看到 Ollama 上所有已拉取的模型。找到 hermes3:8b,选中它就可以开始对话了。

如果看不到模型,检查几个地方:

  1. Ollama 是否在运行:curl http://localhost:11434/api/tags
  2. Docker 网络是否通:进入 Open WebUI 容器试试 curl http://host.docker.internal:11434/api/tags
  3. 环境变量是否设对了

模型参数调整

在 Open WebUI 的设置里可以调整每个模型的默认参数:

  • Temperature:0.7 适合大部分场景,需要更精确的回答调低,需要更有创意的调高
  • Top P:默认 0.9 就好
  • Max Tokens:根据你的需求设,Hermes 3 支持到 128K
  • System Prompt:可以给 Hermes 设一个默认的系统提示词

核心功能介绍

多轮对话

这是最基础的功能。界面左侧是对话列表,支持:

  • 创建新对话
  • 重命名对话
  • 删除对话
  • 搜索历史对话
  • 导出对话(Markdown 或 JSON)

多模型对比

如果你拉取了多个模型,Open WebUI 支持同一个问题同时发给多个模型,对比它们的回答。这在选型的时候特别有用。

操作方法:在对话界面点击模型名称旁边的 “+” 按钮,添加第二个模型。发送消息后两个模型会同时回答。

文件上传和 RAG

Open WebUI 内置了 RAG 功能。你可以在对话中上传文件(PDF、TXT、CSV 等),模型会基于文件内容回答问题。

上传文件后,Open WebUI 会自动做以下事情:

  1. 解析文件内容
  2. 切分成块
  3. 用嵌入模型向量化
  4. 存入内置的向量数据库

然后你就可以针对文件内容提问了。不过如果你需要更专业的文档问答体验,还是建议用 LlamaIndex 搭建专门的文档 QA 系统

Prompt 模板

可以预设一些常用的 prompt 模板。比如:

  • “代码审查助手”:帮你 review 代码
  • “翻译专家”:中英互译
  • “写作润色”:优化文章表达

在设置 -> Prompts 里创建,之后在对话中用 / 触发。

用户管理

如果你要给团队用,Open WebUI 的用户管理功能很实用:

  • 支持邀请链接注册
  • 可以设置不同用户的角色(管理员/普通用户)
  • 管理员可以控制哪些模型对哪些用户可见
  • 支持 OAuth(Google、GitHub 等)登录
1
2
3
4
5
# docker-compose.yml 中的相关配置
environment:
- ENABLE_SIGNUP=false # 关闭开放注册
- ENABLE_LOGIN_FORM=true # 保留密码登录
- DEFAULT_USER_ROLE=pending # 新用户默认待审核

API 访问

Open WebUI 自己也暴露了一个 API,格式兼容 OpenAI。这意味着你可以把 Open WebUI 当作一个模型网关来用:

1
2
3
4
5
6
7
8
9
10
11
12
13
from openai import OpenAI

client = OpenAI(
base_url="http://localhost:3000/api",
api_key="your-api-key" # 在 Open WebUI 设置里生成
)

response = client.chat.completions.create(
model="hermes3:8b",
messages=[
{"role": "user", "content": "你好"}
]
)

界面自定义

修改标题和品牌

1
2
3
environment:
- WEBUI_NAME=我的 AI 助手
- ENABLE_COMMUNITY_SHARING=false

深色模式

Open WebUI 默认支持深色/浅色模式切换,在界面右上角的设置里。

自定义 CSS

如果你想进一步定制界面样式,可以在管理面板 -> Settings -> Interface 里注入自定义 CSS。

性能和安全建议

反向代理

生产环境建议加一层 Nginx 反代,处理 HTTPS 和访问控制:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server {
listen 443 ssl;
server_name chat.yourdomain.com;

ssl_certificate /etc/letsencrypt/live/chat.yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/chat.yourdomain.com/privkey.pem;

location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;

# WebSocket 支持(流式输出需要)
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_read_timeout 86400;
}
}

数据备份

Open WebUI 的所有数据都在 Docker volume 里。定期备份:

1
2
3
4
5
6
# 备份
docker cp open-webui:/app/backend/data ./open-webui-backup

# 恢复
docker cp ./open-webui-backup/. open-webui:/app/backend/data
docker restart open-webui

更新

1
2
3
docker pull ghcr.io/open-webui/open-webui:main
docker compose down
docker compose up -d

常见问题

Q: 模型列表为空?

检查 OLLAMA_BASE_URL 环境变量。如果 Ollama 在远程机器上,确保那台机器的 11434 端口可达。Ollama 默认只监听 127.0.0.1,远程访问需要设置 OLLAMA_HOST=0.0.0.0

Q: 对话响应很慢?

可能是模型太大或硬件不够。在 Open WebUI 设置里减小 Max Tokens,或者换一个更小的模型试试。

Q: 文件上传不工作?

检查 Docker volume 的权限。另外,Open WebUI 的 RAG 功能需要一个嵌入模型,确保 Ollama 上拉取了 nomic-embed-text 或其他嵌入模型。

Q: 如何同时连接 Ollama 和远程 API?

设置两个环境变量就行:

1
2
3
4
environment:
- OLLAMA_BASE_URL=http://host.docker.internal:11434
- OPENAI_API_BASE_URL=http://remote-server:8000/v1
- OPENAI_API_KEY=your-key

两边的模型都会出现在模型列表里。

搭配其他前端方案

Open WebUI 不是唯一选择。如果你想要更灵活的方案,可以看看 Hermes + LobeChat 的搭配,LobeChat 在多模型管理和插件体系方面有自己的优势。

cocoloop 社区有人做过各种前端方案的对比评测,有兴趣可以去看看大家的反馈。

Open WebUI 的优势在于开箱即用、功能全面、社区活跃。如果你只是想快速给 Hermes 加一个能用的 Web 界面,它可能是目前最省心的选择。

参与讨论

对这篇文章有疑问或想法?cocoloop 社区有不少开发者在讨论 Hermes 相关话题,欢迎加入交流。

前往 cocoloop 社区 →