[大模型实战 02] 图形化的大模型交互: Open WebUI部署指南

[大模型实战 02] 图形化的大模型交互: Open WebUI部署指南
核心摘要 (TL;DR)目标:为本地的 Ollama 模型穿上漂亮的图形化界面 (GUI)。工具:Docker + Open WebUI (社区最活跃的开源 WebUI)。核心功能:媲美 ChatGPT 的对话界面、本地知识库 (RAG)、自定义角色 (Agent)。

相信各位友人在上一篇文章中,已经学会了如何用ollama在终端中运行Qwen模型。命令行工具有时候会感觉有点过于Geek,黑洞洞的命令窗口和冷冰冰的滚动的文字的技术感是有的,但是对于如果咱们想把大模型展示给其他朋友,或者自己想日常使用,那这时候咱们就需要换一个更友好,更光鲜的交互方式。

这也是这篇博文想带大家解决的问题:用10分钟时间,搭建一个功能媲美ChatGPT的私有化网页页面,并且连接咱们的模型

Open WebUI就是我们完成这个目标的利器,其也是目前社区最活跃,功能最强大的开源大模型交互界面。

01. 模型服务准备

在开始之前,因为要接入咱们的Ollama模型,所以我们要确认我们的Ollama服务运行起来了。

可以通过在终端输入curl http://localhost:5656命令去验证其是否正确开启。(当然,这个端口号需要根据咱们自己的配置来,默认还是11434,经过上一篇博文,咱们为了避免服务器端口被扫导致咱们模型被滥用,已经将端口切换到5656了)。
如果显示Ollama is running,就说明咱们准备ok了。

终端运行curl命令的截图,显示"Ollama is running"的返回结果

02. 使用docker一键安装 Open WebUI

docker是个好东西,只需要几行命令,就能帮咱们部署各种服务。如果还没有了解过,那么强烈安利去学习一下基本命令。同样在这里,安装Open WebUI最简单,最省心的发自也是使用docker。如果是Windows用户,还没有安装Docker Desktop,可以先去Docker官网下载安装一下

我们这里使用下面这条命令,来自动下载OpenWebUI镜像并且启动该服务

docker run -d \ --network=host \ -v open-webui:/app/backend/data \ -e OLLAMA_BASE_URL=http://127.0.0.1:5656 \ -e PORT=3000\ --name open-webui \ --restart always \ ghcr.io/open-webui/open-webui:main 

这里稍微解释一下,这行命令做了什么

  • -d:后台静默运行。在后台悄悄跑着,不会因为关掉了终端就消失了。
  • --network=host以及-e OLLAMA_BASE_URL=http://host.docker.internal:5656:关键参数**。这让 Docker 容器内部能通过这个特殊的地址访问我们宿主机上的 Ollama 服务。注意这里的端口需要是我们的Ollama服务端口
  • -v open-webui:/app/backend/data:将容器的/app/backend/data目录映射到docker管理的的open-webui目录,这样就把聊天记录和设置保存到本地卷中,防止重启 Docker 后数据丢失。如果想要清除该卷,可以在关闭容器后,通过docker volume rm open-webui去删除
终端执行 Docker 命令后的截图,显示一串容器 ID 意味着启动成功

输入下面的命令,可以查看Open WebUI的容器是否运行成功

dockerps -a 
运行完docker ps -a后的状态结果验证截图

和上图一样,各位友人如果看见状态(Status)是Up的,我们就可以进行下一步,去打开咱们的服务了。

打开任意浏览器,访问http://localhost:3000,就能看见设计精良的登录页面了

安装好OpenWebUI服务后,打开登录页面的截图

附上官方链接和官方文档,以供有深入了解想法的友人去探索。
Open WebUI的github链接
Open WebUi的官方文档

03. 连接大模型

3.1 注册管理员账号

各位友人第一次打开页面,需要咱们注册一下账号。因为是本地部署的服务,所以,账号密码都只在咱们自己的电脑里,不会上传给其他人(当然,如果咱们部署在服务器上,别人也是可以访问,登录的)

3.2 选择模型

登录上之后,整个界面还是非常清新的,布局和ChatGPT是很相像的。然后我们就需要选择我们刚才的Ollama模型

  1. 点击左上角的 选择模型下拉菜单
  2. 选择好之后,我们进行下一步

应该能看到咱们的modelscope.cn/Qwen/Qwen3-0.6B-GGUF模型,如果没有也没事,我们可以权且先跳过这一块儿,先看看后面的解决方案,解决了再回来。

界面左上角下拉菜单展开,鼠标指向 qwen 模型

如果在选择模型菜单中,没有看到我们的模型,就需要检查一下OpenWebUI的ollama配置

  1. 验证通过,就能回到主页找到我们的模型了

核对当前的连接地址,端口是否正确,然后点击验证链接按钮进行验证

然后点击验证链接按钮进行验证截图

点击管理Ollama接口连接的设置按钮

点击管理Ollama接口连接的设置按钮的截图

点击左侧外部链接

点击左侧外部链接的示意图截图

点击面板上方的设置

点击管理员面板上方的设置截图

点击用户名->管理员面板,打开

点击用户名,弹出有管理员面板的菜单栏截图

3.3 对话功能

在输入框中,我们就能像chatGPT一样跟模型进行对话了, markdown渲染,思考过程折叠,代码高亮,流式输出功能都是具备的。

与 Qwen 模型对话的截图,展示 Markdown 渲染效果

3.4 进阶使用

除了最简单的对话功能,Open WebUI还能做什么?我们重点介绍一下最实用,最具“生产力”的两个功能

功能一:本地知识库(RAG)

RAG,全程是Retrieval Augmented Generation,检索增强生成。翻译成人大白话,检索,即我们给训练好了的模型一些文本,它将其作为上下文,去文本中检索问题相关的内容;增强,增强的意义在于,我们不用重新训练模型,没有任何模型会在该技术中被训练,通过改变交给模型的知识库,模型可以得到更贴合我们需要的内容,比如产品的使用说明,一本故事书,最新的项目文档;生成,意味着当前输出还是由模型生成而来,还是运用模型本身对世界的理解能力。总而言之,RAG可以让模型成为我们量身定做的私人管家,自己的私人本地知识库。

在Open WebUI中,我们不用写一行代码,就可以实现这样便利的技术。
实操步骤

提问: 针对文档问题,进行提问,例如:“介绍一下这本书”

RAG提问介绍一下这本书后的模型反馈截图

确认加载:文件上传后,显示在聊天框左上角

文件上传后,显示在聊天框左上角截图

上传文档:在聊天输入框左侧,点击 [+] 号(加号图标),选择 上传文件。上传一份 PDF 文档(例如一份产品说明书或论文)。

在聊天框点击加号图标选择上传文件的截图

OpenWebUI内置了一些轻量级的向量模型,来将我们的文档分块,转化为向量, 存入内置的向量数据库中。当咱们提问的时候,它会找到和我们问题向量(对,模型也会将我们的问题转为向量)相近的段落,然后将这些段落给模型当作上下文,模型再据此给我们答复。

功能二:给模型特定人设(System Prompts)

这个也比较好理解,我们和模型说的每句话,都是一句句prompt,但是prompt之间亦有差别,大致分为User Prompt和System Prompt,User Prompt就是我们跟模型说的每句话,System Prompt是提前告知模型的一些不能忘记的预设知识,比如告诉Qwen模型,它是阿里公司训练的,名叫Qwen的模型,还有类似模型身份认知的东西,默认一般都是类似于“你是一个能够帮助人们回答问题的助手”。

所以,这个模型的人设,也是可以改的,我们下面以哲学家苏格拉底为人设试试。

实操步骤

  1. 模型名称处给模型一个我们喜欢的模型
  2. 模型ID处填写一个id号
  3. 基础模型处选择我们已有的模型(目前0.6B的模型如果不够聪明,可以去ollama拉去更聪明的模型)
  4. 系统提示词处填入我们准备的人设 “你是一位古希腊哲学家苏格拉底。你从不直接回答问题,而是通过反问来引导用户思考。”,咱也可以自由发挥,再加一些补充。

回到主页,我们就可以选择新的这个派生模型进行问答了

创建好新的模型后的新聊天窗口截图

保存并创建

创建完模型后的截图

在模型界面选择右上角的创建模型。当然我们这里并不是真的要创建一个模型,而是从现在的模型上派生出一个配置不一样的模型.

右上角的创建模型位置截图

点击左侧侧边栏的 工作空间

左侧工作空间截图

OpenWebUI实际上是还可以接入联网搜索能力的,但是取决于模型本身的工具调用能力(function call能力)是否足够强大,如果我们用了更聪明的模型,可以开启该功能

04. 题外话

OpenWebUI其实还有很多其他功能,比如真正的创建一个知识库,而不是简单的读文档,甚至可以直接通过语音进行对话,进行长期记忆,接入更多有趣的工具(mcp)等等,但是此处篇幅有限,各位友人可以自行探索。

05. 常见问题 (Q&A)

这里整理了一些在操作过程中可能会关心的问题:

Q: Open WebUI 只能连本地的 Ollama 吗?
A:不是的
。它是一个通用的前端界面,兼容性极强。

  • 本地模型:Ollama, LocalAI 等。
  • 在线 API:只要咱们有 OpenAI、Google Gemini、DeepSeek、Moonshot (Kimi) 等平台的 API Key,都可以在 设置 -> 外部连接 里填入,直接在一个界面里管理所有模型,不用到处切网页了。

Q: 我能在手机/平板上使用这个界面吗?
A:完全可以!
只要咱们的手机和运行 Open WebUI 的电脑在同一个 Wi-Fi (局域网) 下。

  1. 查询电脑的局域网 IP(Windows 在终端输 ipconfig,查看 IPv4 地址,比如 192.168.1.5)。
  2. 在手机浏览器输入 http://192.168.1.5:3000
  3. 现在的 Open WebUI 完美适配移动端,体验和原生 App 差不多!

Q: Open WebUI 发布新版本了,我该怎么更新?
A:
因为咱们是用 Docker 部署的,更新非常简单,只需要重跑一遍镜像:

  1. 停止并删除旧容器:docker rm -f open-webui (放心,数据在 Volume 里,不会丢)。
  2. 拉取最新镜像:docker pull ghcr.io/open-webui/open-webui:main
  3. 重新运行咱们文章里的那条 Docker 启动命令即可。

Q: 我上传的文档(RAG)安全吗?会被上传到云端吗?
A:绝对安全

咱们搭建的是全私有化环境。Open WebUI 会调用本地的嵌入模型(Embedding Model)处理文档,所有数据都存储在咱们电脑本地的 Docker 卷中,不会经过任何外部服务器。

Q: 为什么我的文档上传后,模型回答还是很慢?
A:
这通常取决于两点:

  1. 文档解析:首次上传大文档时,系统需要时间将其切分并存入向量数据库。
  2. 模型性能:如果咱们的电脑配置较低(没有独立显卡),模型读取上下文的速度会变慢。建议在上传文档时,尽量上传纯文本或清晰的 PDF,避免全是图片的扫描件。

Q: 我在 Docker 命令里设置了端口,为什么访问不了?
A:

  • 请检查 Windows 防火墙是否拦截了 3000 端口。
  • 确保 Docker Desktop 是运行状态(Status: Up)。
  • 如果是云服务器,记得在安全组里放行 3000 端口。

本文作者: Algieba
本文链接:https://blog.algieba12.cn/llm02-start-with-open-webui/
版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

Read more

Chrome 开发者工具(DevTools)快速入门——前端必备技能

Chrome 开发者工具(DevTools)快速入门——前端必备技能

在前端开发中,Chrome 开发者工具(DevTools) 是我们排查问题、优化性能、理解浏览器行为最强大的助手之一。无论是想快速定位页面样式异常、分析接口请求,还是调试 JavaScript 逻辑,DevTools 都能提供直观高效的方式帮助我们“看清代码背后发生了什么”。 这篇笔记将带你快速入门,从最基本的面板功能到常用调试技巧,让你能在实战中灵活运用它,提升开发效率与问题解决能力。 1. 打开方式与放大缩小 1. 快捷键: * Windows/Linux:F12 或 Ctrl + Shift + I * macOS:Command + Option + I 1. 右键打开:在页面任意元素上右键 → “检查 (Inspect)” 2. 菜单打开:点击右上角 ⋮ → “更多工具” → “开发者工具” 在使用 Chrome 开发者工具时,可以通过 鼠标滚轮 快速调整界面缩放。

【开题答辩全过程】以 基于web的学校田径运动会管理系统开发与实现为例,包含答辩的问题和答案

【开题答辩全过程】以 基于web的学校田径运动会管理系统开发与实现为例,包含答辩的问题和答案

个人简介 一名14年经验的资深毕设内行人,语言擅长Java、php、微信小程序、Python、Golang、安卓Android等 开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。 感谢大家的关注与支持! "各位老师好,我是xx同学,我的毕业设计题目是《基于web的学校田径运动会管理系统开发与实现》。本系统旨在解决传统运动会管理中人工操作繁琐、容易出错的问题,通过信息化手段提高运动会组织效率。系统主要分为前端学生模块和后端管理员模块两大板块:前端包含注册登录、首页展示、比赛项目浏览、排行榜查看、比赛咨询和个人中心等功能;后端包含登录、个人中心、学生管理、比赛项目管理、项目报名管理、排行榜管理、比赛咨询管理和项目类型管理等功能。技术栈方面,后端采用SpringBoot框架,前端使用Vue框架,数据库选用MySQL,采用B/S架构设计,具有跨平台、易维护的特点。下面请各位老师批评指正。

Llama3-8B对话体验差?open-webui界面调优实战案例

Llama3-8B对话体验差?open-webui界面调优实战案例 1. 为什么Llama3-8B在open-webui里“不好用” 你是不是也遇到过这种情况:明明拉下了Meta-Llama-3-8B-Instruct的GPTQ-INT4镜像,显卡是RTX 3060,vllm也跑起来了,open-webui网页也打开了,可一输入问题,响应慢、回复短、上下文断连、甚至反复重复同一句话?不是模型不行,而是默认配置没对上——就像给跑车装了自行车刹车片。 Llama3-8B本身素质过硬:80亿参数、原生8k上下文、英语指令遵循能力对标GPT-3.5、MMLU 68+、HumanEval 45+,单卡3060就能跑。但它对对话系统层的调度逻辑非常敏感。open-webui作为前端界面,默认采用的是通用型API调用策略,而没针对Llama3系列的tokenizer行为、stop token设计、streaming节奏做适配。结果就是: * 模型已生成完,界面还在等“结束信号”; * 多轮对话中,system prompt被意外截断或覆盖; * 中文输入时,因token边界识别不准,

web酒店客房管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

web酒店客房管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

摘要 随着旅游业的快速发展和酒店行业的不断扩张,传统的酒店客房管理方式已难以满足现代化管理的需求。人工操作效率低下、信息易丢失、管理流程繁琐等问题日益凸显,亟需一套高效、智能的酒店客房管理系统来提升运营效率和服务质量。数字化管理不仅能减少人力成本,还能通过数据分析优化客房资源配置,提升客户满意度。因此,开发一款基于SpringBoot后端、Vue前端和MySQL数据库的酒店客房管理系统具有重要的现实意义。关键词:酒店管理、数字化、SpringBoot、Vue、MySQL。 本系统采用前后端分离架构,后端基于SpringBoot框架实现高效的数据处理和业务逻辑,前端使用Vue.js构建动态交互界面,数据库采用MySQL存储数据。系统功能包括客房信息管理、客户预订管理、订单结算、员工权限管理等模块,支持多角色登录和权限控制。通过响应式设计和RESTful API接口,系统实现了数据的实时更新和高效交互。系统源码可直接运行,便于二次开发和功能扩展,为酒店行业提供了一套完整的数字化解决方案。关键词:前后端分离、权限管理、RESTful API、实时更新、二次开发。 数据表 客房信息数据