Open WebUI开发实践：二次开发与定制化改造

Open WebUI是一个可扩展、功能丰富的自托管WebUI，专为离线操作设计，支持Ollama和兼容OpenAI的API。其核心架构采用前后端分离设计，后端基于FastAPI构建RESTful API，前端使用Svelte框架实现响应式界面。项目遵循模块化设计原则，核心功能包括模型管理、聊天会话、权限控制和工具集成等模块。[![Open WebUI Demo](https://raw.git..

贾耀斐

628人浏览 · 2025-09-24 10:59:06

贾耀斐 · 2025-09-24 10:59:06 发布

Open WebUI开发实践：二次开发与定制化改造

【免费下载链接】open-webui Open WebUI 是一个可扩展、功能丰富且用户友好的自托管 WebUI，设计用于完全离线操作，支持各种大型语言模型（LLM）运行器，包括Ollama和兼容OpenAI的API。项目地址: https://gitcode.com/GitHub_Trending/op/open-webui

项目概述与架构解析

项目主要目录结构如下：

后端代码：backend/open_webui/
前端代码：src/
配置文件：backend/open_webui/config.py
数据库模型：backend/open_webui/models/
API路由：backend/open_webui/routers/

开发环境搭建

源码获取与安装

# 克隆仓库
git clone https://gitcode.com/GitHub_Trending/op/open-webui.git
cd open-webui

# 使用Docker快速启动开发环境
docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui-dev --restart always ghcr.io/open-webui/open-webui:dev

本地开发环境配置

对于需要深度定制的开发者，建议使用本地开发环境：

# 后端依赖安装
cd backend
pip install -r requirements.txt

# 前端依赖安装
cd ../src
npm install

# 启动开发服务器
npm run dev

核心模块定制开发

配置系统定制

Open WebUI的配置系统支持环境变量和数据库存储双重配置管理。通过修改config.py可以定制系统级配置：

backend/open_webui/config.py中定义了系统配置类和持久化配置机制。例如，添加自定义OAuth提供商：

# 在config.py中添加自定义OAuth配置
CUSTOM_OAUTH_CLIENT_ID = PersistentConfig(
    "CUSTOM_OAUTH_CLIENT_ID",
    "oauth.custom.client_id",
    os.environ.get("CUSTOM_OAUTH_CLIENT_ID", ""),
)

CUSTOM_OAUTH_CLIENT_SECRET = PersistentConfig(
    "CUSTOM_OAUTH_CLIENT_SECRET",
    "oauth.custom.client_secret",
    os.environ.get("CUSTOM_OAUTH_CLIENT_SECRET", ""),
)

数据库模型扩展

Open WebUI使用SQLAlchemy作为ORM工具，数据库模型定义在models目录下。以聊天会话模型为例，如需添加自定义字段：

backend/open_webui/models/chats.py

class Chat(Base):
    __tablename__ = "chat"
    
    # 现有字段...
    id = Column(String, primary_key=True)
    user_id = Column(String)
    title = Column(Text)
    chat = Column(JSON)
    
    # 添加自定义字段
    custom_field = Column(String)  # 自定义字段示例
    priority = Column(Integer, default=0)  # 聊天优先级

修改模型后需要生成数据库迁移文件：

# 生成迁移文件
alembic revision --autogenerate -m "Add custom fields to Chat model"

# 应用迁移
alembic upgrade head

API接口扩展

Open WebUI的API系统基于FastAPI构建，所有路由定义在routers目录下。创建自定义API端点的步骤如下：

创建新的路由文件backend/open_webui/routers/custom.py：

from fastapi import APIRouter, Depends
from open_webui.utils.auth import get_verified_user

router = APIRouter()

@router.get("/custom-endpoint")
async def custom_endpoint(user=Depends(get_verified_user)):
    return {"message": "Custom API endpoint", "user_id": user.id}

在主应用中注册路由backend/open_webui/main.py：

from open_webui.routers import custom

app.include_router(custom.router, prefix="/api/v1/custom", tags=["custom"])

前端界面定制

Svelte组件修改

前端界面主要由Svelte组件构成，核心聊天界面组件位于src/lib/components/chat/Chat.svelte。例如，修改聊天输入框样式：

<!-- 修改聊天输入框 -->
<div class="flex items-end space-x-2 p-4">
  <textarea 
    id="chat-input"
    class="flex-1 border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
    bind:value={prompt}
    placeholder="Type your message..."
  />
  <button on:click={submitPrompt} class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
    Send
  </button>
</div>

路由与页面定制

添加自定义页面需要修改路由配置和创建Svelte组件：

创建新页面组件src/routes/custom/+page.svelte
添加路由定义src/routes/+layout.js

export function load({ url }) {
  return {
    // 现有路由配置...
    customRoute: url.pathname.startsWith('/custom'),
  };
}

功能扩展实践

自定义工具集成

Open WebUI支持工具集成，通过修改backend/open_webui/routers/tools.py添加自定义工具：

@router.post("/custom-tool")
async def custom_tool(
    request: Request, 
    form_data: CustomToolForm, 
    user=Depends(get_verified_user)
):
    # 工具实现逻辑
    result = await run_custom_tool(form_data.params)
    return {"result": result}

前端调用自定义工具需修改src/lib/components/chat/Chat.svelte，添加工具调用按钮和处理逻辑。

模型集成与适配

Open WebUI支持多模型集成，通过修改backend/open_webui/routers/ollama.py添加自定义模型支持：

@router.post("/pull-custom-model")
async def pull_custom_model(
    request: Request,
    form_data: ModelNameForm,
    user=Depends(get_admin_user),
):
    # 自定义模型拉取逻辑
    result = await pull_model_from_custom_repo(form_data.name)
    return result

高级定制：插件系统开发

Open WebUI支持插件系统，通过Pipelines框架实现功能扩展。创建自定义插件的步骤如下：

plugins/
  custom-plugin/
    __init__.py
    main.py
    requirements.txt

实现插件逻辑plugins/custom-plugin/main.py：

from fastapi import Request, Response
from pydantic import BaseModel

class Valves(BaseModel):
    api_key: str = ""

async def pipe(request: Request, body: dict, valves: Valves):
    # 插件处理逻辑
    body["messages"].append({
        "role": "system",
        "content": "Custom plugin injected message"
    })
    return body

注册插件backend/open_webui/routers/pipelines.py：

@router.post("/add")
async def add_pipeline(
    request: Request, 
    form_data: AddPipelineForm, 
    user=Depends(get_admin_user)
):
    # 添加自定义插件路径
    plugin_path = Path(__file__).parent.parent.parent / "plugins" / form_data.name
    request.app.state.pipelines[form_data.id] = load_plugin(plugin_path)
    return {"status": "success"}

权限系统定制

Open WebUI的权限系统基于角色的访问控制(RBAC)，定义在backend/open_webui/routers/auths.py。添加自定义角色：

@router.post("/add-role")
async def add_custom_role(
    form_data: RoleForm, 
    user=Depends(get_admin_user)
):
    # 添加自定义角色
    role = Role(
        id=str(uuid.uuid4()),
        name=form_data.name,
        permissions=form_data.permissions,
        created_at=int(time.time())
    )
    db.add(role)
    db.commit()
    return role

部署与发布

定制化Docker构建

# 自定义Dockerfile
FROM ghcr.io/open-webui/open-webui:main

# 添加自定义配置
COPY custom_config.py /app/backend/open_webui/config.py

# 安装额外依赖
RUN pip install -r /app/backend/custom_requirements.txt

# 构建前端
RUN cd /app/frontend && npm run build

部署配置

根据部署环境修改配置文件Caddyfile.localhost，配置HTTPS和反向代理：

localhost:3000 {
    reverse_proxy /api/* http://backend:8080
    reverse_proxy /ws/* http://backend:8080
    file_server / {
        root /app/frontend/build
        try_files {path} /index.html
    }
}

最佳实践与性能优化

代码规范与质量控制

遵循PEP 8规范编写Python代码
使用ESLint和Prettier格式化前端代码
编写单元测试，测试目录位于backend/open_webui/test/

性能优化建议

数据库优化：为频繁查询的字段添加索引，如backend/open_webui/models/chats.py中的user_id字段
缓存策略：使用Redis缓存常用数据，如模型列表和用户权限
前端优化：代码分割和懒加载，修改vite.config.ts配置

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['svelte', 'axios'],
          components: ['@sveltejs/kit', 'svelte-sonner']
        }
      }
    }
  }
})