适配Ollama的前端界面Open WebUI

最新推荐文章于 2025-04-17 11:32:17 发布
最新推荐文章于 2025-04-17 11:32:17 发布
阅读量5.4w 收藏 106
点赞数 28
文章标签： 群晖 docker 人工智能 AI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wbsu2004/article/details/136443260
版权

在这里插入图片描述

在前文 本地大模型运行框架Ollama 中，老苏留了个尾巴，限于篇幅只是提了一下 Open WebUI，有网友留言说自己安装没搞定，今天我们来补上

文章传送门：本地大模型运行框架Ollama

什么是 Open WebUI ？

Open WebUI 是针对 LLM 的用户友好的 WebUI，支持的 LLM 运行程序包括 Ollama 和 OpenAI 兼容的 API。

Open WebUI 系统旨在简化客户端（您的浏览器）和 Ollama API 之间的交互。此设计的核心是后端反向代理，可增强安全性并解决 CORS 问题。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Open WebUI 功能演示

【说明】：

  • 因为老苏的小机器不支持 Nvidia GPU，所以下面👇的安装示例仅支持 CPU。

  • 本文假设你已经在 11434 端口启动了 Ollama 服务，但是否在本机是无所谓的。

安装

在群晖上以 Docker 方式安装。

镜像下载

官方没有在 docker hub 上发布镜像，而是发布在 ghcr.io，地址在 https://github.com/open-webui/open-webui/pkgs/container/open-webui

在这里插入图片描述

用 SSH 客户端登录到群晖后，依次执行下面的命令

# 新建文件夹 open-webui 和 子目录
mkdir -p /volume1/docker/open-webui/data

# 进入 open-webui 目录
cd /volume1/docker/open-webui

# 拉取镜像
docker pull ghcr.io/open-webui/open-webui:main

如果没有科学上网，很可能会拉不动，可以试试 docker 代理网站：https://dockerproxy.com/，但是会多几个步骤

# 如果拉不动的话加个代理
docker pull ghcr.dockerproxy.com/open-webui/open-webui:main

# 重命名镜像（如果是通过代理下载的）
docker tag ghcr.dockerproxy.com/open-webui/open-webui:main ghcr.io/open-webui/open-webui:main

# 删除代理镜像（如果是通过代理下载的）
docker rmi ghcr.dockerproxy.com/open-webui/open-webui:main

下载完成后，可以在 映像 中找到

在这里插入图片描述

命令行安装

如果你熟悉命令行，可能用 docker cli 更快捷

# 运行容器（仅CPU）
docker run -d \
   --restart unless-stopped \
   --name ollama-webui \
   -p 11433:8080 \
   -v $(pwd)/data:/app/backend/data \
   -e OLLAMA_API_BASE_URL=http://192.168.0.197:11434/api \
   -e WEBUI_SECRET_KEY=TkjGEiQ@5K^j \
   ghcr.io/open-webui/open-webui:main

环境变量的简单说明

没有找到官方说明，但是这两个是必须要设置的

可变值
OLLAMA_API_BASE_URLOllama 服务器的地址
WEBUI_SECRET_KEY可以理解成密码，老苏是用 Vaultwarden 生成的

也可以用 docker-compose 安装，将下面的内容保存为 docker-compose.yml 文件

version: '3'

services:
  ollama-webui:
    image: ghcr.io/open-webui/open-webui:main
    container_name: ollama-webui
    restart: unless-stopped
    ports:
      - 11433:8080
    volumes:
      - ./data:/app/backend/data
    environment:
      - OLLAMA_API_BASE_URL=http://192.168.0.197:11434/api
      - WEBUI_SECRET_KEY=TkjGEiQ@5K^j

然后执行下面的命令

# 进入 open-webui 目录
cd /volume1/docker/open-webui

# 将 docker-compose.yml 放入当前目录

# 一键启动
docker-compose up -d

在这里插入图片描述

运行

在浏览器中输入 http://群晖IP:11433 就能看到登录界面

第一次需要注册账号

在这里插入图片描述

登录成功后的主界面

在这里插入图片描述

点左下角的用户名，进 Settings

也可以点 Select a model 后面的设置图标；

在这里插入图片描述

Modles 中可以添加、删除和切换模型

感谢网友 Zzz 推荐的 qwen:0.5b，这是阿里云推出的基于 Transformer 的大型语言模型，推理最低内存需求小于 2GB ，在老苏的机器上，运行都非常流畅。

可以在 Ollama 中用命令行安装

在这里插入图片描述

感谢网友 潇雨 推荐的 gemma:2b，这是 Google 及其 DeepMind 团队开发的新型开放模型。

也可以在这里直接下载

  • ①中输入模型名称及版本
  • ②点击开始下载
  • ③跳转到模型库查询页面

在这里插入图片描述

过程中有进度显示

在这里插入图片描述

回到首界面，选择模型

在这里插入图片描述

刚下载的模型可能要等一会才会显示出来，现在老苏已经有了 2 模型了

在这里插入图片描述

现在可以开始提问了

在这里插入图片描述

同样的问题，换个模型试试

在这里插入图片描述

目前的这种应用场景下，老苏暂时倾向于使用 qwen:0.5b ，不仅速度快，答案看起来也更丰满一些

在这里插入图片描述

参考文档

open-webui/open-webui: User-friendly WebUI for LLMs (Formerly Ollama WebUI)
地址：https://github.com/open-webui/open-webui

🏡 Home | Open WebUI
地址：https://docs.openwebui.com/

【人工智能】Open WebUI 安装指南 （ 基于Docker下载和使用Open WebUI 、通过本地运行项目源码进行搭建Open WebUI）
本本本添哥
01-23 1万+
Open WebUI 是一个可扩展、功能丰富且用户友好的自托管 WebUI，旨在完全离线操作。它支持各种 LLM 运行程序，包括 Ollama 和 OpenAI 兼容的 API。社区：https://openwebui.com/
【人工智能时代】- Windows本地部署Ollama+qwen本地大语言模型Web交互界面并实现公网访问
xiaoli8748的专栏
09-21 1943
本文主要介绍如何在Windows系统快速部署Ollama开源大语言模型运行工具，并安装Open WebUI结合cpolar内网穿透软件，实现在公网环境也能访问你在本地内网搭建的大语言模型运行环境。近些年来随着ChatGPT的兴起，大语言模型 LLM（Large Language Model）也成为了人工智能AI领域的热门话题，很多大厂也都推出了自己的大语言模型，并或多或少的开源了自己的大语言模型，今天就来分享一个最近很火，且对于小白来说比较好上手本地部署的运行本地LLM的工具Ollama。
ollama+open-webui，本地部署自己的大模型
热门推荐
web15085096641的博客
12-10 1万+
Open WebUI 是一种可扩展、功能丰富且用户友好的自托管 WebUI，旨在完全离线运行。它支持各种LLM运行器，包括 Ollama 和 OpenAI 兼容的 API。open-webui项目地址。
Open WebUI本地部署教程
Arkham的专栏
02-23 4125
Open WebUI本地部署教程
大模型可视化终极指南：Open WebUI全解析，一文掌握核心技巧！
最新发布
2401_84204413的博客
04-17 1035
直观交互体验：提供类似 ChatGPT 的自然语言对话界面，支持Markdown 格式渲染（如加粗、列表、代码块等）和代码高亮显示，提升内容可读性。多轮对话管理：内置对话历史记录功能，用户可随时回顾上下文，避免重复输入，确保对话连贯性。全平台兼容性：采用响应式设计，无论是桌面端还是移动端，界面均能自适应屏幕尺寸，提供一致的使用体验。低门槛操作：通过简化交互流程和优化视觉设计，大幅降低非技术用户的使用难度，真正实现“零学习成本”上手。
Open WebUI – 本地化部署大模型仿照 ChatGPT用户界面
m0_74824845的博客
12-10 1万+
Open WebUI 是一个仿照 ChatGPT 界面，为本地大语言模型提供图形化界面的开源项目，可以非常方便的调试、调用本地模型。你能用它连接你在本地的大语言模型（包括 Ollama 和 OpenAI 兼容的 API），也支持远程服务器。Docker 部署简单，功能非常丰富，包括代码高亮、数学公式、网页浏览、预设提示词、本地 RAG 集成、对话标记、下载模型、聊天记录、语音支持等。??直观界面：我们的聊天界面深受ChatGPT启发，旨在确保用户获得友好易用的体验。??
Ollama管理本地开源大模型，用Open WebUI访问Ollama接口
haleycat的博客
03-14 1万+
现在开源大模型一个接一个的，而且各个都说自己的性能非常厉害，但是对于我们这些使用者，用起来就比较尴尬了。因为一个模型一个调用的方式，先得下载模型，下完模型，写加载代码，麻烦得很。对于程序的规范来说，只要东西一多，我们就需要一个集中管理的平台，如管理python的pip，管理js库的npm等等，而这种平台是大家争着抢着想实现的，这就有了Ollama。
Ollama前端页面调用大模型 知识问答 模型切换
yinjl123456的博客
10-23 1541
Ollama提供命令行的方式使用，还提供了API接口调用的方式，但是没有界面操作那么直观，那么有人就基于ollama提供的接口开发了一套页面，页面的风格和chatgpt和类似；参考链接：https://blog.csdn.net/AAI666666/article/details/136444519。如何比页面运行起来，并调用大模型问答。给大模型提问，本地的CPU跑也不慢。界面风格很简单，如下图。
大模型管理工具：Ollama
m0_37559973的博客
05-13 3333
Ollama 是一个基于 Go 语言开发的可以本地运行大模型的开源框架，同时提供 REST API 管理和使用大模型。
关于ollama+open webui无法局域网访问的解决办法
HarryXYC的博客
07-29 1万+
ollama api本地默认地址：http://127.0.0.1:11434open webui的默认地址：http://127.0.0.1:3000如果是本机访问，ollama默认允许本机跨域访问（哈里是看ollama的日志都是OPTIONS请求，bing后发现的），官方文档说修改系统变量OLLAMA_ORIGINS即可解决非本机跨域问题（windows下）。但是没说怎么改，还好随便试了下通配符“*”就行了。
Ollama接口系统详解
摇光65535的博客
10-07 8040
Ollama是一个专为本地机器设计的开源框架，旨在简化大型语言模型（LLM）的部署和运行过程。Ollama支持通过Ollama原生接口和OpenAI兼容接口两种方式调用，本文将对Ollama原生接口做详细介绍。
Win电脑使用Ollama与Open Web UI搭建本地大语言模型运行工具
fq157856469的博客
09-09 3128
本文主要介绍如何在Windows系统快速部署Ollama开源大语言模型运行工具，并安装Open WebUI结合cpolar内网穿透软件，实现在公网环境也能访问你在本地内网搭建的llama2、千文qwen等大语言模型运行环境。
ollama和Open WebUI
02-25
### Ollama 和 Open WebUI 的集成与使用教程 #### 1. 安装准备 为了使 Ollama 平台能够顺利运行并配合 Open WebUI 使用，需先安装必要的依赖环境。对于 Linux 系统而言，在具备 GPU 或 CPU 支持的情况下，推荐采用...
openweb UI部署ollama
01-25
- **前端界面适配**：如果有必要的话，调整 OpenWeb UI 前端页面以便更好地展示由 Ollama 返回的结果或提供更友好的用户体验。 - **配置文件修改**：编辑 OpenWeb UI 的配置文件来指定新加入模型的位置及其他必要...
open-webui嵌入应用
03-19
根据提供的引用，Open-WebUI是一个用户友好的Web界面，用于与LLMs（大语言模型）交互，之前叫做Ollama WebUI。用户可能希望将这个UI集成到他们自己的应用中，可能是为了提供一个现成的聊天界面或者管理界面。 接...
探索Ollama UI：一款现代、灵活的前端框架
gitblog_00058的博客
04-19 2015
探索Ollama UI：一款现代、灵活的前端框架 项目地址:https://gitcode.com/gh_mirrors/oll/ollama-ui 在如今这个Web界面日新月异的时代，开发人员需要高效、易用且具有高度定制性的工具来构建优雅的用户体验。这就是的魅力所在，一个专注于简洁设计和强大功能的现代前端框架。 项目简介 Ollama UI 是一套轻量级的组件库，旨在简化前端开发工作，提供丰富的...
Llama（二）：Open WebUI作为前端界面，使用本机的llama3
hugo_lei的博客
06-02 3257
Open WebUI是一个可扩展、功能丰富、用户友好的自托管WebUI，旨在完全离线操作。它支持各种LLM运行程序，包括Ollama和OpenAI兼容的API。
OpenWebUI连接不上Ollama模型，Ubuntu24.04
Half_H
12-12 3250
操作系统 Ubuntu24.04Ollama 使用默认安装方法（官网https://github.com/ollama/ollama）安装在本机OpenWebUI使用默认docker安装方法（官网教程安装https://docs.openwebui.com/）安装在docker使用访问Ollama显示，说明Ollama正常。Ollama中安装了模型，并且可以命令行形式使用。使用登录OpenWebUI后发现没有模型。
如何将openweb-ui功能通过h5实现
02-20
<think>好的，我现在需要解决用户的问题：“如何将openweb-ui功能通过h5实现”。首先，我要理解用户的需求。用户之前问过关于如何将DeepSeek知识库接入H5开发，现在转向另一个工具OpenWeb-UI，想了解如何将其功能在H5中实现。可能需要明确OpenWeb-UI是什么，但根据名字推测，这可能是一个开源的Web用户界面框架或工具，类似一些UI组件库。但不确定具体是什么，可能需要进一步验证。 首先，我需要确认OpenWeb-UI的定义。可能用户指的是某个特定的开源项目，比如OpenWebUI，一个可扩展的、功能丰富的AI用户界面，支持本地运行语言模型。或者可能是指其他的UI框架。假设用户指的是类似聊天界面的AI工具，可能用于与大模型交互，类似于之前的DeepSeek知识库接入。 接下来，用户希望将OpenWeb-UI的功能通过H5实现。H5即HTML5，通常指移动端网页开发。用户可能想在自己的H5应用中集成类似OpenWeb-UI的界面和功能，比如聊天机器人、交互式UI组件等。 需要拆解OpenWeb-UI的主要功能。比如，假设它包含聊天界面、消息展示、输入框、历史记录、与后端API交互等。那么，如何在H5中实现这些功能？可能需要前端开发技术，如HTML、CSS、JavaScript，结合Ajax或WebSocket与后端通信。 然后，思考用户可能的实际应用场景。用户可能是一个开发者，需要在H5页面中嵌入一个类似OpenWeb-UI的界面，用于用户与AI模型的交互，比如客服系统、智能助手等。用户可能希望了解具体步骤，包括界面设计、前后端交互、API调用等。 接下来，需要给出步骤。首先，明确OpenWeb-UI的核心功能，然后分解实现步骤：UI组件开发、前后端通信、数据渲染、状态管理等。如果OpenWeb-UI本身是开源项目，可能需要查看其文档，了解如何集成或参考其实现方式。 考虑到用户之前的问题是关于接入知识库，可能用户现在希望在前端实现更复杂的UI交互，而不仅仅是调用API。因此，回答需要涵盖UI构建和功能集成两个方面。 需要确保回答结构清晰，分步骤说明，包括可能的代码示例，如使用Vue或React框架构建组件，如何处理用户输入，如何与后端API交互，如何渲染响应数据等。同时，考虑到H5的移动端适配，可能需要提到响应式设计。 另外，用户可能关心如何维护状态，比如对话历史、用户身份验证等，这些也需要在步骤中涉及。此外，安全性问题，如跨域请求、API密钥保护，是否需要后端代理，这些也需要提及。 可能还需要对比之前的DeepSeek接入，指出异同点，帮助用户理解两者的区别和相似之处，但用户没有明确提到，所以可能不需要深入。 最后，总结关键点和注意事项，比如性能优化、兼容性测试、用户体验等，确保用户能够全面了解实现过程。</think>将 **OpenWebUI** 的功能通过 H5（HTML5）实现，通常是指利用 Web 技术（HTML/CSS/JavaScript）构建类似 OpenWebUI 的交互界面，并集成 AI 模型的对话、推理等功能。以下是具体实现步骤和核心要点： --- ### **1. 明确 OpenWebUI 的核心功能** OpenWebUI 是开源项目（如支持本地 LLM 的交互界面），其典型功能包括： - **对话界面**：用户输入、消息展示（类似聊天应用）。 - **模型交互**：调用本地或云端 AI 模型（如 LLaMA、GPT）。 - **历史管理**：保存/加载对话记录。 - **扩展功能**：插件支持、多模型切换、Markdown 渲染等。 --- ### **2. H5 实现流程** #### **步骤 1：构建前端界面（HTML/CSS）** - **基础结构**：创建聊天容器、消息展示区域、输入框、发送按钮。 ```html <div id="chat-container"> <div id="messages"> <!-- 消息动态插入 --> </div> <div class="input-area"> <input type="text" id="user-input" placeholder="输入问题..." /> <button onclick="sendMessage()">发送</button> </div> </div> ``` - **样式设计**：模仿 OpenWebUI 的视觉效果（CSS 或框架如 Tailwind）。 ```css #messages { height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; } .message { margin: 5px; padding: 8px; border-radius: 10px; max-width: 80%; } .user-message { background: #e3f2fd; } .bot-message { background: #f5f5f5; } ``` #### **步骤 2：实现交互逻辑（JavaScript）** - **消息渲染**：动态插入用户和 AI 的消息。 ```javascript function addMessage(text, isUser) { const messagesDiv = document.getElementById('messages'); const message = document.createElement('div'); message.className = `message ${isUser ? 'user-message' : 'bot-message'}`; message.textContent = text; messagesDiv.appendChild(message); messagesDiv.scrollTop = messagesDiv.scrollHeight; // 滚动到底部 } ``` - **发送请求**：调用 AI 模型接口（本地或云端）。 ```javascript async function sendMessage() { const input = document.getElementById('user-input'); const userText = input.value.trim(); if (!userText) return; addMessage(userText, true); input.value = ''; // 调用后端 API（示例为本地模型接口） try { const response = await fetch('http://localhost:11434/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'llama3', // 模型名称 prompt: userText, stream: false // 是否流式传输 }) }); const data = await response.json(); addMessage(data.response, false); } catch (error) { addMessage('请求失败，请重试。', false); } } ``` #### **步骤 3：集成模型后端** - **本地模型**：若使用本地部署的模型（如通过 Ollama），直接调用其 API。 - **云端模型**：若对接云端服务（如 OpenAI、DeepSeek），需通过后端代理（保护 API Key）： ```javascript // 示例：Node.js 后端代理 const express = require('express'); const axios = require('axios'); const app = express(); app.use(express.json()); app.post('/api/chat', async (req, res) => { try { const { message } = req.body; const response = await axios.post('https://api.openai.com/v1/chat/completions', { model: 'gpt-4', messages: [{ role: 'user', content: message }] }, { headers: { Authorization: `Bearer YOUR_API_KEY` } }); res.json({ reply: response.data.choices[0].message.content }); } catch (error) { res.status(500).json({ error: '请求失败' }); } }); app.listen(3000, () => console.log('Server running on port 3000')); ``` #### **步骤 4：扩展功能** - **流式响应**：实现逐字输出（类似打字机效果）。 ```javascript // 修改 sendMessage 函数支持流式传输 async function sendMessage() { // ...（省略用户消息处理） const response = await fetch('http://localhost:11434/api/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ model: 'llama3', prompt: userText, stream: true }) }); const reader = response.body.getReader(); const decoder = new TextDecoder(); let botMessage = ''; while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value); const parsed = JSON.parse(chunk); botMessage += parsed.response; // 更新最后一条消息内容 messagesDiv.lastChild.textContent = botMessage; } } ``` - **历史记录**：使用 `localStorage` 或 IndexedDB 保存对话。 ```javascript // 保存历史 function saveHistory(messages) { localStorage.setItem('chatHistory', JSON.stringify(messages)); } // 加载历史 function loadHistory() { const history = localStorage.getItem('chatHistory'); return history ? JSON.parse(history) : []; } ``` --- ### **3. 注意事项** 1. **跨域问题**：直接调用外部 API 需配置 CORS，建议通过后端代理。 2. **性能优化**：流式传输减少等待时间，避免阻塞 UI。 3. **移动端适配**：使用响应式设计（如 `viewport` 设置、触摸事件处理）。 4. **安全性**： - 用户输入需过滤 XSS 攻击（如 `DOMPurify` 库）。 - 敏感接口（如 API Key）必须通过后端转发，不可暴露在前端。 --- ### **4. 技术栈参考** - **前端框架**：Vue/React 简化组件管理（如消息列表渲染）。 - **样式库**：Tailwind CSS 或 Material-UI 加速开发。 - **构建工具**：Webpack/Vite 打包优化。 - **部署**：静态资源托管（GitHub Pages、Netlify）。 --- 通过以上步骤，即可在 H5 中实现类似 OpenWebUI 的核心功能。若需复刻完整功能（如插件系统、多模型切换），需根据具体需求扩展架构设计。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨浦老苏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值