Open-WebUI—开箱即用的AI对话可视化神器

Open-WebUI—开箱即用的AI对话可视化神器

你是否曾兴奋地在本地部署了Ollama,却很快被冰冷的命令行和繁琐的指令劝退?是否羡慕ChatGPT那样优雅的聊天界面,却又希望数据能牢牢掌握在自己手中?OpenWebUI。这个在GitHub上狂揽 110,000 Stars 的明星项目,完美地解决了所有痛点

github地址: https://github.com/open-webui/open-webui

1.什么是Open WebUI?

Open WebUI 是一款专为大型语言模型(LLM)设计的 开源可视化交互框架,它通过简洁的Web界面,让用户无需编写代码即可与本地部署的AI模型/各大服务商提供大模型API(如DeepSeek、Llama、ChatGLM等)进行自然对话。其核心使命是 “让LLM私有化部署像打开浏览器一样简单” ,尤其适合需要快速搭建企业级AI平台或追求数据隐私的开发者。

2. 核心价值

  • 开箱即用:无需复杂的前端开发,快速搭建 AI 交互界面。完全开源,可自由部署、修改和二次开发,无商业使用限制。
  • 多模型支持:兼容 Ollama、OpenAI API(包括百炼、DeepSeek 等)。
  • 功能丰富:支持 RAG(检索增强生成)、多模态输入(文本、图片)、网络搜索等高级功能。支持对话历史管理、提示词模板、上下文连续对话、Markdown 渲染、代码高亮等实用功能。
  • 本地部署:数据完全存储在本地,保障隐私安全。

3. 功能概览

模块能力价值
模型管理多后端支持、模型下载/切换/加载、参数实时调整统一管理入口,灵活适配不同场景
交互体验类 ChatGPT 界面、代码高亮、Markdown 渲染、多会话管理降低使用门槛,提供流畅体验
知识管理文档上传、知识库构建、语义搜索、上下文增强利用私有数据提升回答准确性
高级功能工具调用、Web 搜索集成、提示词工作流、多模态支持扩展模型能力边界,实现任务自动化
用户管理多用户系统、角色权限控制、团队协作满足企业级部署需求,保障数据安全
部署隐私全离线、自托管、Docker 容器化、数据本地存储彻底掌控数据,保障隐私安全

4. 安装Ollama(Linux)

本次实验环境为 Rocky Linux , IP 地址配置为 192.168.31.254

打开终端,通过官方脚本安装 Ollama

curl -fsSL https://ollama.com/install.sh |sh

但是这个下载太慢,是因为国内访问 https://ollama.com/download 太慢,这里使用加速的方法:

# 下载安装脚本curl -fsSL https://ollama.com/install.sh -o ollama_install.sh # 给脚本添加执行权限chmod +x ollama_install.sh # 替换下载地址sed -i 's|https://github.com|https://gh-proxy.ygxz.in/https://github.com|g' ollama_install.sh # 开始安装sh ollama_install.sh 

也可以手动安装:

下载地址为: https://ollama.com/download/ollama-linux-amd64.tgz

这里使用手动安装的方式,先试用迅雷等下载工具,下载安装包,下载完毕后,上传到 Linux 系统 /usr/local/src目录下备用,完整文件为 : /usr/local/src/ollama-linux-amd64.tgz

# 进入目录cd /usr/local/src # 创建目录mkdir /usr/local/ollama # 解压到创建的目录tar -xzvf ollama-linux-amd64.tgz -C /usr/local/ollama # 创建运行用户和用户组sudouseradd -r -s /bin/false -U -m -d /usr/share/ollama ollama sudousermod -a -G ollama $(whoami)# 添加环境变量echo"PATH=$PATH:/usr/local/ollama/bin">> etc/profile # 环境变量生效source ect/profile 

配置Linux服务:

vim /etc/systemd/system/ollama.service 内容如下:

[Unit]Description=Ollama Service After=network-online.target [Service]ExecStart=/usr/local/ollama/bin/ollama serve User=ollama Group=ollama Restart=always RestartSec=3Environment="OLLAMA_HOST=0.0.0.0"# 关键配置:允许外部访问[Install]WantedBy=multi-user.target 
# 重新载入配置sudo systemctl daemon-reload # 启动服务sudo systemctl start ollama # 查看状态sudo systemctl status ollama # 开机启动sudo systemctl enable ollama 

下载模型:

# 查看已安装的模型 ollama list # 拉取模型,这里作为演示,拉取的0.6b qw3模型,大概 523MB 左右 ollama pull qwen3:0.6b # 查看模型详情 ollama show qwen3:0.6b # 测试 curl http://localhost:11434/api/generate -d '{ "model": "qwen3:0.6b", "prompt":"介绍一下React,20字以内" }'

5. Open WebUI安装

Open WebUI 支持多种安装方式,推荐使用 Docker 部署(最简单高效),也可通过源码编译安装(适合需要定制开发的场景)。
执行命令:(假设服务器IP地址为192.168.31.254 在本机上运行), 服务器防火墙开放 3000端口。如果是做实验用,直接关闭防火墙

docker run -d -p 3000:8080 -v open-webui:/app/backend/data --name open-webui --restart always ghcr.nju.edu.cn/open-webui/open-webui:main 
  • -p 3000:8080:将容器内 8080 端口映射到本地 3000 端口(本地端口可修改,如 -p 80:8080)。
  • -v open-webui:/app/backend/data:使用数据卷持久化对话历史、配置等数据,避免容器删除后数据丢失。
  • --restart always:设置容器开机自启。

浏览器打开: http://192.168.31.254:3000

6. Open WebUI基本使用

6.1 初次登录

首次访问 Open WebUI 时,需注册管理员账号(输入用户名、密码即可)。

创建完账号后,使用账号登录

6.2 配置

  • 禁用官方链接,如果不进行这一步,很有可能响应会非常慢,因为国内网络无法直接连上,所以系统会多次尝试, 操作路径: 管理员面板/设置/外部连接

修改本地Ollama 服务地址:

6.3 开始聊天

选择下载好的模型 :

Read more

AI Skills:前端新的效率神器

AI Skills:前端新的效率神器

近来,AI 领域有个火爆的话题:Skills。 Github 上被疯狂 star 的仓库,很多都是和 skills 有关的。 有的仓库仅仅上线三个月就获得了快 50K 的 star,Skills 的火热可见一斑。 不管是大模型,还是 Cursor、Codex、Claude、Trae、Copilot 等编程 IDE 都在争先支持 Skills。 围绕 Skills,它们在做的就是为了完成一件事情:技能是通过学习和反复练习获得的,而 Skills 是把经验和最佳实践沉淀为 AI 能力,将“知道”转化为“做到”的本领。 详解什么是 Skills 要说清楚什么是 Skills,先来了解一下关于 AI 的 2

Linux下libwebkit2gtk-4.1-0安装实战案例(从零实现)

Linux下 libwebkit2gtk-4.1-0 安装实战:从零搞定GTK 4应用的Web渲染引擎 你是否在开发一个基于 GTK 4 的桌面程序时,突然发现 webkit_web_view_new() 编译报错? 或者运行时提示“找不到 libwebkit2gtk-4.1.so.0 ”? 别急——这不是你的代码写错了,而是系统里缺了那个关键的 Web 渲染库: libwebkit2gtk-4.1-0 。 这玩意儿看起来只是个动态链接库,但它其实是现代 Linux 桌面应用中嵌入网页内容的“心脏”。无论是 OAuth 登录窗口、帮助文档展示,还是像 Epiphany 浏览器那样的完整 Web 客户端,都离不开它。 但问题来了:为什么这个包这么难装? 因为它依赖复杂、版本敏感、发行版支持参差不齐。Ubuntu

全员DeepSeek时代,前端能做些什么?

全员DeepSeek时代,前端能做些什么?

全员DeepSeek时代,前端能做些什么? 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc DeepSeek开发阶段测试阶段部署阶段智能代码生成设计稿转代码实时代码审查测试用例生成自动化问题定位构建优化建议性能预测模型 一、DeepSeek带来的前端范式变革 1.1 传统前端开发痛点分析 DeepSeek通过以下方式改变工作流程: 1. 代码生成效率提升:组件级代码生成速度提升300% 2. 缺陷预防率提高:静态分析拦截87%的潜在问题 3. 性能优化自动化:构建产物体积平均缩减42% 二、开发阶段的DeepSeek实践 2.1 智能组件生成 // 用户输入自然语言描述const prompt ="生成一个带懒加载的图片轮播组件,支持手势滑动,要求React实现";// DeepSeek生成结果exportconstLazySwiper=({ images })=>{const[swiperRef, setSwiperRef]=useState(nu

【前端】Vue 组件开发中的枚举值验证:从一个Type属性错误说起

【前端】Vue 组件开发中的枚举值验证:从一个Type属性错误说起

🌹欢迎来到《小5讲堂》🌹 🌹这是《小程序》系列文章,每篇文章将以博主理解的角度展开讲解。🌹 🌹温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!🌹 👨💻 作者简介 🏆 荣誉头衔:2024博客之星Top14 | ZEEKLOG博客专家 | 阿里云专家博主 🎤 经历:曾多次进行线下演讲,亦是 ZEEKLOG内容合伙人 以及 新星优秀导师 💡 信念:“帮助别人,成长自己!” 🚀 技术领域:深耕全栈,精通 .NET Core (C#)、Python、Java,熟悉主流数据库 🤝 欢迎交流:无论是基础概念还是进阶实战,都欢迎与我探讨! 目录 * 前言 * 解决过程 * 一、错误场景还原 * 1.1 错误发生的位置 * 1.2 常见的触发场景 * 二、深入理解 Vue