BongoCat桌面伴侣：重新定义人机互动的数字萌宠
2026/1/18 3:57:22
Llama3-8B + open-webui定制UI：前端修改实战教程
1. 引言
1.1 项目背景与学习目标
随着大语言模型（LLM）在本地部署和轻量化推理方面的技术成熟，越来越多开发者希望基于开源模型构建个性化的对话应用。Meta于2024年4月发布的Llama3-8B-Instruct模型，凭借其80亿参数、单卡可运行、支持8k上下文以及Apache 2.0级别的商用友好协议，成为当前最受欢迎的中等规模模型之一。
与此同时，open-webui作为一款功能强大且高度可定制的前端界面工具，能够无缝对接vLLM、Ollama等后端服务，提供类ChatGPT的交互体验。然而，默认界面往往无法满足特定业务场景或品牌风格的需求。
本教程旨在通过Llama3-8B-Instruct + vLLM + open-webui的完整链路部署，重点讲解如何对open-webui 的前端进行深度定制化修改，实现从“可用”到“好用+好看”的跃迁。
读者将掌握：
- 如何部署 Llama3-8B-Instruct 模型并接入 vLLM 推理服务
- open-webui 的基础架构与启动流程
- 前端源码结构解析与关键组件定位
- 实战修改 Logo、主题色、标题栏、登录页等 UI 元素
- 自定义 CSS 注入与静态资源替换技巧
- 构建并持久化自定义镜像的方法
完成本教程后，你将能快速打造一个专属品牌的 AI 对话应用界面。
1.2 技术栈概览
| 组件 | 版本/类型 | 作用 |
|---|---|---|
| Meta-Llama-3-8B-Instruct | GPTQ-INT4 量化版 | 主力对话模型，英文能力强，支持长上下文 |
| vLLM | latest | 高性能推理引擎，支持 PagedAttention |
| open-webui | Docker 镜像方式部署 | 提供 Web 界面，支持多用户、对话管理 |
| Docker | ≥24.0 | 容器化运行环境 |
| Nginx (可选) | - | 反向代理与静态资源托管 |
2. 环境准备与基础部署
2.1 硬件与软件要求
为顺利运行 Llama3-8B-GPTQ 模型并启动 open-webui，建议配置如下：
- GPU: NVIDIA RTX 3060 / 3090 / 4090（显存 ≥12GB）
- 内存: ≥16GB RAM
- 磁盘空间: ≥50GB（含模型缓存）
- 操作系统: Ubuntu 20.04/22.04 LTS 或 WSL2
- 依赖工具: Docker, Docker Compose, git
提示：若使用 GPTQ-INT4 量化版本，模型加载仅需约 4~5GB 显存，可在消费级显卡上流畅运行。
2.2 拉取并运行 vLLM + Llama3-8B-Instruct
首先拉取官方推荐的 vLLM 镜像，并加载 Llama3-8B-Instruct 的 GPTQ 模型：
docker run -d --gpus all --shm-size 1g \ -p 8000:8000 \ -e MODEL="TheBloke/Llama-3-8B-Instruct-GPTQ" \ -e REVISION="gptq-4bit-32g-actorder" \ -e TRUST_REMOTE_CODE=true \ -e MAX_MODEL_LEN=16384 \ --name vllm-server \ vllm/vllm-openai:latest该命令启动了一个 OpenAI API 兼容的服务端口8000，可通过/v1/completions或/v1/chat/completions调用。
验证是否成功：
curl http://localhost:8000/v1/models预期返回包含Llama-3-8B-Instruct的模型信息。
2.3 部署 open-webui 并连接 vLLM
接下来部署 open-webui，使其连接上述 vLLM 服务：
docker run -d \ -p 7860:7860 \ -e OPEN_WEBUI_URL="http://localhost:7860" \ -e BACKEND_URL="http://host.docker.internal:8000" \ -v open-webui:/app/backend/data \ --name open-webui \ ghcr.io/open-webui/open-webui:main注意：Linux 用户需将
host.docker.internal替换为主机真实 IP 或使用--network="host"模式。
等待数分钟后访问http://localhost:7860，即可进入默认界面。
3. open-webui 前端结构解析
3.1 项目目录结构分析
open-webui 使用前后端分离架构，前端基于 React + Tailwind CSS 构建。其核心路径如下：
/app/ ├── backend/ # FastAPI 后端 ├── frontend/ # React 前端源码 │ ├── public/ # 静态资源（logo, favicon） │ ├── src/ │ │ ├── components/ # UI 组件库 │ │ ├── pages/ # 页面路由 │ │ ├── styles/ # 主题样式文件 │ │ └── utils/ # 工具函数 │ └── tailwind.config.js虽然官方镜像不直接暴露前端源码，但我们可以通过以下两种方式实现定制：
- 挂载覆盖法：构建自定义镜像时替换
public和src中的关键文件 - CSS 注入法：利用 open-webui 支持的“自定义 CSS”功能动态修改样式
我们优先采用方法一（构建镜像）以获得最大控制权。
3.2 获取前端源码并建立开发环境
克隆 open-webui 源码仓库：
git clone https://github.com/open-webui/open-webui.git cd open-webui安装依赖并启动前端开发服务器：
cd frontend npm install npm run dev此时前端运行在http://localhost:3000，但需要后端支持才能完整测试。建议先完成一次完整构建再进行生产级修改。
4. 前端定制化实战修改
4.1 修改 Logo 与 Favicon
步骤 1：替换 logo 文件
进入frontend/public/目录，替换以下文件：
logo.png→ 新品牌 Logo（建议尺寸 128×128）favicon.ico→ 浏览器标签图标
确保新 logo 符合透明背景 PNG 格式，避免失真。
步骤 2：清除缓存并重建
由于浏览器会缓存静态资源，建议重命名文件或添加版本号：
- <img src="/logo.png" /> + <img src="/logo-v2.png" />并在index.html中同步更新引用路径。
4.2 更改主色调与主题风格
open-webui 使用 Tailwind CSS 进行样式管理，主颜色定义在tailwind.config.js：
module.exports = { theme: { extend: { colors: { primary: { 500: '#007AFF', // 修改为你的品牌色（如蓝色） 600: '#0066CC', }, }, }, }, }常见品牌色参考：
- 微软蓝：
#007ACC - 谷歌红：
#DB4437 - Meta 蓝：
#1877F2
修改后执行：
npm run build生成新的dist/文件夹用于后续打包。
4.3 自定义登录页与欢迎语
编辑frontend/src/pages/index.tsx或auth/login.tsx（根据版本差异），找到登录表单区域，插入自定义文案：
<div className="mt-4 text-center"> <h2 className="text-xl font-semibold">欢迎使用 Kakajiang AI 助手</h2> <p className="text-sm text-gray-500 mt-1"> 支持代码生成、英文写作、知识问答，由 Llama3-8B 驱动 </p> </div>也可在此处添加公司名称、联系方式或二维码图片。
4.4 注入全局 CSS 样式（无需重新构建）
open-webui 提供了“设置 → 偏好设置 → 自定义 CSS”功能，可用于快速调整样式而无需重建镜像。
示例：隐藏右下角“Powered by Open WebUI”水印
footer .text-xs { display: none !important; } /* 或仅修改文字 */ footer .text-xs::before { content: "Built with Llama3 & open-webui" !important; }其他常用注入样式：
/* 修改输入框圆角 */ textarea { border-radius: 8px !important; } /* 加粗对话标题 */ .chat-title { font-weight: 600 !important; }5. 构建并发布自定义镜像
5.1 准备 Dockerfile 构建脚本
创建Dockerfile.custom文件：
FROM ghcr.io/open-webui/open-webui:main as base # 替换静态资源 COPY --from=builder /app/frontend/dist /app/frontend/dist COPY custom-logo.png /app/frontend/dist/logo.png COPY custom-favicon.ico /app/frontend/dist/favicon.ico # 注入自定义 CSS（可选） RUN echo 'body { --primary-color: #007AFF; }' > /app/frontend/dist/css/custom.css # 设置环境变量 ENV CUSTOM_BRAND_NAME="Kakajiang AI"其中builder阶段来自你自己构建的前端产物。
5.2 构建并推送镜像
# 构建前端 cd frontend npm run build # 复制资源到根目录 cp dist/logo.png ../custom-logo.png cp dist/favicon.ico ../custom-favicon.ico # 回到根目录构建镜像 cd .. docker build -f Dockerfile.custom -t my-open-webui:kakajiang . # 推送至私有仓库（可选） docker tag my-open-webui:kakajiang your-registry/my-open-webui:kakajiang docker push your-registry/my-open-webui:kakajiang5.3 使用自定义镜像启动服务
docker run -d \ -p 7860:7860 \ -e BACKEND_URL="http://host.docker.internal:8000" \ --name open-webui-custom \ my-open-webui:kakajiang访问http://localhost:7860即可看到完全定制化的界面。
6. 总结
6.1 核心收获回顾
本文围绕Llama3-8B-Instruct + vLLM + open-webui技术栈，系统性地完成了从前端界面定制到镜像打包发布的全流程实践。主要成果包括：
- 成功部署 Llama3-8B-GPTQ 模型并通过 vLLM 提供高性能推理接口；
- 深入剖析 open-webui 前端结构，识别出可定制的关键节点；
- 实现了 Logo、主题色、登录页文案等视觉元素的个性化改造；
- 掌握了通过 CSS 注入和镜像构建两种方式实现 UI 修改；
- 最终输出可复用、可分发的自定义 Docker 镜像。
这些技能不仅适用于 Llama3 系列模型，也广泛适用于 Qwen、DeepSeek、Phi 等各类本地大模型的前端封装。
6.2 最佳实践建议
- 保持轻量更新：优先使用 CSS 注入进行小范围调整，减少重建成本；
- 版本控制前端修改：将
frontend/src目录纳入 Git 管理，便于团队协作； - 安全考虑：避免在公开镜像中泄露敏感信息（如账号密码）；
- 性能优化：压缩图片资源，启用 Gzip，提升首屏加载速度；
- 多模型适配：通过环境变量动态切换模型名称与提示词模板。
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。