网站怎么php做微信登录,做公司网页,页面布局,做环球资源网站有没有效果Open WebUI 项目架构详解 项目概述 Open WebUI 是一个功能完整的 AI 聊天 Web 界面#xff0c;设计为可以对接 Ollama、OpenAI 兼容接口#xff08;以及 Gemini、Azure 等#xff09;的前后端一体化应用#xff0c;支持多用户、RAG 检索、插件系统、实时通信等企业级特性。…Open WebUI 项目架构详解项目概述Open WebUI是一个功能完整的 AI 聊天 Web 界面设计为可以对接 Ollama、OpenAI 兼容接口以及 Gemini、Azure 等的前后端一体化应用支持多用户、RAG 检索、插件系统、实时通信等企业级特性。获取地址https://github.com/open-webui/open-webui一、整体技术栈层级技术前端框架SvelteKit 4 TypeScript 5前端样式Tailwind CSS v4 PostCSS前端构建Vite 5后端框架Python FastAPI全异步 async数据库 ORMSQLAlchemy Alembic 迁移实时通信Socket.IO支持 Redis 集群数据库SQLite默认/ PostgreSQL部署Docker / Kubernetes Helm可观测性OpenTelemetry技术逐一介绍SvelteKit 4 TypeScript 5前端框架SvelteKit 是基于 Svelte 的全栈前端框架提供文件路由、服务端渲染SSR、预渲染和端点能力适合做需要良好首屏性能与路由管理的应用。TypeScript 5 为前端代码提供静态类型检查能显著降低大型项目中的类型错误与重构风险。在本项目中页面路由、组件通信和 API 调用类型定义都依赖这套组合。Tailwind CSS v4 PostCSS前端样式Tailwind CSS 是实用优先的样式框架通过原子类快速构建界面减少样式命名和上下文冲突。PostCSS 是 CSS 处理管道用于执行 Tailwind 编译、自动转换与插件扩展。该组合让项目在保持统一设计规范的同时具备较高的样式开发效率。Vite 5前端构建Vite 负责本地开发服务器与生产构建。开发时使用基于原生 ES 模块的快速冷启动和热更新HMR构建时走 Rollup 产物优化。对于组件多、依赖重的前端项目Vite 能显著提升开发反馈速度与构建可控性。Python FastAPI全异步 async后端框架FastAPI 是高性能 Python Web 框架基于 ASGI天然适配异步 IO 场景。它结合类型注解可自动生成 OpenAPI 文档并具备高效的数据校验能力。本项目中模型请求转发、流式响应、WebSocket 协作等高并发路径都受益于 async 架构。SQLAlchemy Alembic数据库 ORMSQLAlchemy 提供 ORM 与 SQL 表达能力用于把 Python 对象映射到数据库表统一数据访问层。Alembic 负责数据库迁移版本管理确保不同环境下可以按版本演进表结构。二者结合可在迭代功能时稳定维护数据模型一致性。Socket.IO支持 Redis 集群实时通信Socket.IO 在 WebSocket 基础上增加了连接管理、事件模型和降级策略适合实现聊天消息流式推送、在线状态同步等实时能力。当服务多实例部署时可通过 Redis 适配器做跨实例事件广播实现水平扩展。SQLite默认/ PostgreSQL数据库SQLite 轻量、零运维适合本地开发、单机部署或快速验证PostgreSQL 更适合生产场景具备更强并发、事务和扩展能力。项目同时支持二者意味着可以从低门槛启动再平滑迁移到企业级部署。Docker / Kubernetes Helm部署Docker 提供一致化运行环境降低“本地可跑、线上失败”的环境差异。Kubernetes Helm 通过 Chart 模板化管理集群部署参数适合多环境配置、滚动升级和弹性扩容。该组合覆盖了从单机容器到云原生集群的完整发布路径。Docker 负责打包和运行单个应用容器K8s 负责在多机器环境中调度、编排、扩缩容这些容器。用 Docker 把应用打成镜像把镜像推到镜像仓库Docker Hub、Harbor、ECR 等K8s 通过 Deployment 拉取这个镜像并启动 PodService 给 Pod 提供稳定访问入口Ingress 暴露到集群外ConfigMap/Secret 注入配置和密钥HPA 根据负载自动扩缩容9. OpenTelemetry可观测性OpenTelemetry 是统一的可观测性标准支持指标Metrics、日志Logs、链路追踪Traces的采集与导出。在本项目中它可用于定位请求瓶颈、排查跨服务调用问题并为容量规划与稳定性治理提供数据基础。二、目录结构总览openwebui/ ├── src/ # 前端 SvelteKit 源码 │ ├── routes/ # 页面路由 │ └── lib/ # 组件库、API、Store、工具 ├── backend/open_webui/ # 后端 Python 源码 │ ├── main.py # FastAPI 应用入口 │ ├── config.py # 全局配置中心 │ ├── env.py # 环境变量读取 │ ├── routers/ # API 路由层27个模块 │ ├── models/ # 数据库 ORM 模型 │ ├── migrations/ # Alembic 数据库迁移 │ ├── retrieval/ # RAG 检索系统 │ ├── socket/ # WebSocket 服务 │ ├── utils/ # 工具函数库 │ ├── storage/ # 文件存储抽象层 │ └── internal/ # 数据库连接 ├── static/ # 静态资源 └── cypress/ # E2E 测试三、后端架构详解1. 应用入口main.pyFastAPI 应用的核心负责注册全部 27 个路由模块auth、chats、ollama、openai、retrieval、tools 等挂载 Socket.IO 子应用实时通信注册中间件链CORS → 压缩 → 会话 → 审计日志 → 安全 Headers启动时初始化嵌入模型、重排序模型、连接数据库这四项职责可以理解为“把后端从一组分散能力装配成一个可对外服务的统一应用”。注册全部路由模块统一 API 装配层main.py会把routers/目录下的业务路由集中挂载到 FastAPI 实例上。这样做有两个关键价值业务解耦用户、聊天、模型、知识库、工具等领域分别维护避免单文件膨胀。对外统一虽然内部是多模块外部看到的是一套一致的 API 命名空间与鉴权规则。从运行过程看客户端请求先命中主应用再根据路径前缀和方法分发到对应 router也就是说main.py是“总路由入口”routers/*.py是“领域处理器”。实际代码摘自main.py# 每个业务模块以固定前缀挂载形成清晰的 API 命名空间app.include_router(auths.router,prefix/api/v1/auths,tags[auths])app.include_router(users.router,prefix/api/v1/users,tags[users])app.include_router(chats.router,prefix/api/v1/chats,tags[chats])app.include_router(ollama.router,prefix/ollama,tags[ollama])app.include_router(openai.router,prefix/openai,tags[openai])app.include_router(retrieval.router,prefix/api/v1/retrieval,tags[retrieval])app.include_router(knowledge.router,prefix/api/v1/knowledge,tags[knowledge])app.include_router(tools.router,prefix/api/v1/tools,tags[tools])app.include_router(functions.router,prefix/api/v1/functions,tags[functions])# ...共 27 个模块结构完全一致# SCIM 按需启用只有管理员开启了企业身份同步功能才挂载ifSCIM_ENABLED:app.include_router(scim.router,prefix/api/v1/scim/v2,tags[scim])prefix即请求路径前缀tags用于 OpenAPI 文档分组每条路由的实际路径 prefix router 内部定义的路径。2. 挂载 Socket.IO 子应用HTTP 与实时通道并存Open WebUI 既有常规 REST 请求也有流式输出、在线状态同步等实时交互需求。main.py将 Socket.IO 子应用挂载到主应用后系统形成双通道HTTP 通道处理登录、配置、文件上传、历史查询等标准请求响应。Socket 通道处理增量消息推送、在线用户状态、协同事件广播。这种结构让“业务控制面”与“实时数据面”在同一服务进程内协作减少跨服务通信复杂度。实际代码摘自main.py# socket_app 是从 socket/main.py 导入的独立 ASGI 子应用# 挂载到 /ws 路径与主 HTTP 应用共享同一进程但路由互不干扰app.mount(/ws,socket_app)前端通过socket.io-client连接/ws/socket.io之后所有实时事件消息流、在线状态、协同编辑都走这个子应用不占用 HTTP 路由资源。3. 注册中间件链把横切能力前置到请求入口中间件按顺序包裹请求生命周期典型链路的意义如下CORS控制跨域访问策略决定哪些前端来源可调用后端接口。压缩对响应体进行压缩降低带宽消耗提升弱网体验。会话处理会话上下文与状态读取给后续鉴权与业务逻辑提供基础信息。审计日志记录关键操作轨迹用于安全审计、问题回溯与合规。安全 Headers统一附加安全响应头降低常见 Web 攻击面。要点是这些能力不是分散在每个路由里重复实现而是通过中间件“全局一次接入、全站统一生效”。实际代码摘自main.py# 1. 按需开启 Brotli/Gzip 压缩由环境变量 ENABLE_COMPRESSION_MIDDLEWARE 控制ifENABLE_COMPRESSION_MIDDLEWARE:app.add_middleware(CompressMiddleware)# 2. YouTube 链接重定向中间件将 /?vxxx 的 YouTube 链接转为内部路由格式app.add_middleware(RedirectMiddleware)# 3. 安全响应头中间件注入 X-Frame-Options、CSP 等防攻击头app.add_middleware(SecurityHeadersMiddleware)# 4. CORS 中间件* 通配符时退化为开发默认来源生产应显式配置app.add_middleware(CORSMiddleware,allow_originsCORS_ALLOW_ORIGIN,allow_credentialsTrue,allow_methods[*],allow_headers[*],)# 5. 审计日志中间件只在配置了有效 audit_level 时挂载ifaudit_level!AuditLevel.NONE:app.add_middleware(AuditLoggingMiddleware,audit_levelaudit_level,excluded_pathsAUDIT_EXCLUDED_PATHS,max_body_sizeMAX_BODY_LOG_SIZE,)# 6. 内联装饰器写法每次请求后提交数据库 Session保证事务一致性app.middleware(http)asyncdefcommit_session_after_request(request:Request,call_next):responseawaitcall_next(request)Session.commit()returnresponse# 7. 内联装饰器写法提取 Authorization Token并在响应头记录处理耗时app.middleware(http)asyncdefcheck_url(request:Request,call_next):start_timeint(time.time())request.state.tokenget_http_authorization_cred(request.headers.get(Authorization))responseawaitcall_next(request)response.headers[X-Process-Time]str(int(time.time())-start_time)returnresponse注意FastAPI/Starlette 中间件执行顺序是后注册先执行栈顺序所以最后add_middleware的中间件最先处理进入的请求。启动时初始化把重资源组件预热到可用状态在应用启动阶段main.py会完成数据库连接与模型相关组件初始化例如嵌入模型、重排序模型、检索函数等。这样设计的好处是降低首请求延迟避免第一个用户请求才触发重加载。提前失败配置错误、模型不可用、数据库不可连会在启动期暴露而不是运行期随机报错。运行期稳定关键依赖在服务就绪前已完成检查便于健康探针和自动化部署判断服务状态。实际代码摘自main.py的lifespan函数asynccontextmanagerasyncdeflifespan(app:FastAPI):# 1. 启动日志系统start_logger()# 2. 按需重置配置用于测试/调试场景ifRESET_CONFIG_ON_START:reset_config()# 3. 同步安装用户自定义函数和工具的外部依赖阻塞执行确保首次使用前就绪log.info(Installing external dependencies of functions and tools...)install_tool_and_function_dependencies()# 4. 建立 Redis 连接用于 Socket.IO 集群广播、任务队列app.state.redisget_redis_connection(redis_urlREDIS_URL,redis_sentinelsget_sentinels_from_env(REDIS_SENTINEL_HOSTS,REDIS_SENTINEL_PORT),redis_clusterREDIS_CLUSTER,async_modeTrue,)# 5. 若 Redis 可用启动任务命令监听协程ifapp.state.redisisnotNone:app.state.redis_task_command_listenerasyncio.create_task(redis_task_command_listener(app))# 6. 启动周期性 Socket 用量池清理任务asyncio.create_task(periodic_usage_pool_cleanup())# 7. 按需预加载所有模型列表缓存避免第一个用户等待模型列表加载ifapp.state.config.ENABLE_BASE_MODELS_CACHE:awaitget_all_models(mock_request,None)yield# 应用正式运行此后为关闭清理逻辑# 8. 优雅关闭取消 Redis 监听任务ifhasattr(app.state,redis_task_command_listener):app.state.redis_task_command_listener.cancel()嵌入模型与重排序模型在模块级lifespan之外同步初始化# 根据配置选择嵌入引擎本地 sentence-transformers / OpenAI / Ollama / Azureapp.state.EMBEDDING_FUNCTIONget_embedding_function(app.state.config.RAG_EMBEDDING_ENGINE,app.state.config.RAG_EMBEDDING_MODEL,embedding_functionapp.state.ef,url...,# 根据 engine 类型选择对应 API 地址key...,# 对应 API Keyembedding_batch_sizeapp.state.config.RAG_EMBEDDING_BATCH_SIZE,)# 重排序模型同理支持 ColBERT 本地模型或外部 Reranker APIapp.state.RERANKING_FUNCTIONget_reranking_function(app.state.config.RAG_RERANKING_ENGINE,app.state.config.RAG_RERANKING_MODEL,reranking_functionapp.state.rf,)6一个典型请求生命周期可以概括为客户端请求→ 进入main.py主应用入口→ 依次通过中间件链跨域/压缩/会话/审计/安全→ 路由分发到对应业务模块如 chats、retrieval、models→ 若是流式或协同事件则通过 Socket.IO 推送→ 返回标准响应或持续事件流### 2. 路由层 routers/ 每个业务模块独立一个文件典型分工 | 文件 | 职责 | |---|---| | auths.py | 用户登录/注册/OAuth2/API Key | | chats.py | 聊天历史 CRUD | | ollama.py | 代理转发 Ollama API | | openai.py | 代理转发 OpenAI 兼容 API | | retrieval.py | RAG 文档处理与检索 | | tasks.py | 标题生成、自动标签等后台任务 | | audio.py | STT/TTS 语音接口 | | images.py | 图像生成A1111/ComfyUI/OpenAI | | functions.py | 用户自定义 Python 插件 | | tools.py | 工具调用Function Calling | | knowledge.py | 知识库管理 | | models.py | 模型配置管理 | | channels.py | 多用户频道 | | notes.py | 协同笔记 | | configs.py | 管理员动态配置 API | | scim.py | 企业 SCIM 用户同步 | ### 3. 数据模型层 models/ 使用 SQLAlchemy ORM每个实体独立文件包含 - Pydantic 数据验证模型Request/Response Schema - 数据库 Table 定义 - CRUD 操作方法静态方法模式 主要实体Users、Chats、Messages独立表、Files、Knowledge、Functions、Tools、Models、Channels、Notes、Folders、Groups、Memories、Feedbacks ### 4. 数据库迁移 migrations/ 使用 **Alembic** 管理 Schema 演进历史可见项目从简单结构逐步演化 - 早期迁移001018顺序数字命名 - 新迁移随机 hash 命名Alembic 标准 - 支持 SQLite 和 PostgreSQL 双路迁移 这套机制在工程上的实现可以拆成 4 层 1. 迁移目录与版本链 后端目录里有 alembic.ini、migrations/env.py、migrations/versions/*.py。其中 - env.py 负责读取当前数据库连接并初始化 Alembic 上下文。 - versions/*.py 每个文件代表一次结构变更文件内有 revision 和 down_revision通过它们组成一条可追踪的迁移链。 - 执行升级时Alembic 会在数据库中维护版本表通常是 alembic_version记录当前迁移到哪个 revision。 2. 从顺序编号到 hash 命名 早期 001...018 的命名本质是团队手动维护阶段后期切到 Alembic 默认 hash 命名是为了降低多人并行开发时的冲突概率。命名方式变了但迁移机制不变 - 每次变更仍然是一个独立 revision 文件。 - 仍通过 down_revision 串联前后依赖。 - 升级/回滚仍由 Alembic 统一调度。 3. 为什么能同时支持 SQLite 和 PostgreSQL 核心不是写两套迁移而是尽量在同一迁移脚本里使用跨方言能力 - 优先使用 Alembic op.* 抽象如 op.add_column、op.create_index让 Alembic 根据方言生成对应 SQL。 - 涉及数据库差异的操作类型、索引、默认值表达式在脚本里做条件分支或采用双方都支持的写法。 - 启动时由配置/环境变量决定 SQLAlchemy database_urlAlembic 跟随该连接执行同一版本链。 也就是说代码层面是一套迁移历史运行时根据连接到 SQLite 或 PostgreSQL 选择具体 SQL 方言。 4. 典型执行流程开发/部署 bash # 1) 生成迁移基于模型变更 alembic revision -m add_xxx # 2) 在 upgrade() / downgrade() 中补充结构变更 # 3) 升级到最新版本 alembic upgrade head # 4) 必要时回滚一步 alembic downgrade -1在 CI/CD 或容器启动脚本中通常会先执行alembic upgrade head确保应用代码与数据库结构处于同一版本再启动 FastAPI 服务。5. RAG 检索系统retrieval/retrieval/ ├── main.py # 文档处理主入口分块、嵌入、存储 ├── reranker/ # 重排序器 │ ├── colbert.py # ColBERT 本地重排 │ └── external.py # 外部 Reranker API └── web/ # 网络搜索引擎适配 ├── google_pse.py, bing.py, brave.py, ├── duckduckgo.py, searxng.py, tavily.py, ├── perplexity.py, exa.py ...16个搜索引擎RAG 数据流用户上传文件 → 内容提取Tika / Docling / Datalab Marker / 原生解析 → 文本分块Chunk Size / Overlap → 嵌入向量化本地 sentence-transformers / OpenAI / Ollama → 存入向量数据库ChromaDB / Qdrant / Milvus 等 查询时 向量相似度检索 → 可选BM25 混合检索 → 重排序 → 注入 Prompt6. WebSocket 层socket/基于Socket.IOaiocache支持单机模式内存和 Redis 集群模式水平扩展支持 Redis Sentinel 高可用实现流式响应事件推送基于Yjs CRDT实现多人协同编辑笔记管理在线用户池和模型使用池7. 工具函数库utils/文件功能auth.pyJWT 签发/验证角色权限检查chat.py消息处理、Prompt 构造、流式响应filter.py消息过滤器插件 Pipelineplugin.py自定义函数/工具插件加载执行oauth.pyOAuth2/OIDC 提供者接入audit.py审计日志中间件access_control.py资源级访问控制middleware.py请求预处理中间件email.py邮件发送pdf_generator.py聊天导出 PDFredis.pyRedis 连接工具四、前端架构详解1. 路由结构src/routes/routes/ ├── (app)/ # 主应用组需要认证Layout 保护 │ ├── page.svelte # 主页聊天界面 │ ├── c/[id]/ # 具体聊天会话 │ ├── admin/ # 管理面板 │ ├── workspace/ # 工作空间 │ ├── channels/ # 频道 │ └── notes/ # 笔记 ├── auth/ # 登录/注册页 ├── forgot-password/ # 密码找回 ├── complete-profile/ # 新用户完善信息 ├── s/ # 聊天分享页无需认证 └── watch/ # 观察者模式2. 组件层src/lib/components/按功能域划分大目录components/ ├── chat/ # 核心聊天界面 │ ├── Messages/ # 消息列表与渲染 │ ├── MessageInput/ # 消息输入框富文本 Tiptap │ ├── ContentRenderer/# Markdown/代码/Mermaid/KaTeX 渲染 │ ├── ModelSelector/ # 模型选择器 │ ├── Controls/ # 聊天控制RAG、参数调整 │ └── Settings/ # 聊天设置弹窗 ├── layout/ # 全局布局 │ ├── Navbar/ # 顶部导航 │ ├── Sidebar/ # 左侧会话列表 │ └── Overlay/ # 模态框容器 ├── workspace/ # 工作空间管理面板 │ ├── Models/ # 自定义模型配置 │ ├── Knowledge/ # 知识库管理 │ ├── Prompts/ # Prompt 模板 │ ├── Tools/ # 工具插件 │ └── Functions/ # 自定义函数 ├── admin/ # 管理员面板用户/设置/评估 ├── channel/ # 频道功能 ├── notes/ # 协同笔记编辑器 ├── papers/ # 论文管理 ├── playground/ # 模型 Playground └── common/ # 通用 UI 组件3. 状态管理src/lib/stores/index.ts使用Svelte 原生 Writable Stores无需 Redux/Pinia核心状态// 用户会话exportconstuserwritableSessionUser();exportconstconfigwritableConfig();// 实时连接exportconstsocketwritableSocket();exportconstactiveUserIdswritablestring[]();// 聊天状态exportconstchatIdwritable();exportconstmodelswritableModel[]();exportconstchatswritable(null);exportconstfolderswritable([]);// UI 状态exportconstthemewritable(system);exportconstmobilewritable(false);4. API 调用层src/lib/apis/与后端路由一一对应封装fetch调用。每个目录对应一个后端路由模块如apis/chats/、apis/ollama/等统一处理错误和认证 Token 注入。5. 特殊能力lib/pyodide/通过 Pyodide 在浏览器端运行 Python 代码沙盒代码执行lib/workers/Web Worker 处理语音合成Kokoro TTS等耗时任务lib/i18n/i18next 国际化支持多语言切换五、核心业务流程聊天请求流程用户输入 → 前端 MessageInputTiptap 富文本编辑器 → 调用 /api/chat/completions → 后端 main.py 中 /api/chat/completions 路由 → 执行 Filter 类型函数插件inlet 阶段 → 注入 RAG 上下文如有知识库 → 注入记忆Memory → 注入工具定义Function Calling → 转发到 Ollama / OpenAI → 流式响应 → Socket.IO 推送到前端 → 执行 Filter 类型函数插件outlet 阶段 → 自动触发后台任务标题生成、Auto Tag → 前端 ContentRenderer 渲染 Markdown / 代码块 / KaTeX / Mermaid插件/函数系统用户在工作空间编写 Python 函数 → 分三类 Filter过滤器修改 inlet/outlet 消息 Pipe管道替换整个模型调用流程自定义 Provider Action动作在消息上添加按钮触发额外操作 → 后端 utils/plugin.py 动态加载并执行用户代码六、部署架构┌──────────────────────────────────────────┐ │ Docker 单容器 │ │ ┌─────────────┐ ┌───────────────────┐ │ │ │ FastAPI │ │ 静态前端文件 │ │ │ │ Socket.IO│ │ (SvelteKit 构建) │ │ │ └──────┬──────┘ └───────────────────┘ │ │ │ │ │ ┌──────▼──────┐ ┌───────────────────┐ │ │ │ SQLite / │ │ 本地文件存储 / │ │ │ │ PostgreSQL │ │ S3 / MinIO │ │ │ └─────────────┘ └───────────────────┘ │ └──────────────────────────────────────────┘ 水平扩展时 Redis ← Socket.IO 跨实例消息广播 Redis ← WebSocket Session 共享集群模式下通过 Redis 实现 Socket.IO 的AsyncRedisManager多个后端实例可以共享实时消息状态前端通过socket.io-client透明连接。七、安全设计JWT认证HS256支持 API KeyRBAC角色权限admin/user/pending资源级 ACL知识库、模型、工具等均有独立访问控制安全 Headers 中间件security_headers.py审计日志AuditLoggingMiddleware可分级SCIM 2.0企业用户目录集成插件沙盒用户函数有 Valve参数校验机制这个项目是一个设计非常成熟的全栈应用前后端分离但共同构建在同一仓库中后端通过专门的静态文件服务来托管 SvelteKit 构建产物形成单容器即可完整部署的模式。八、前后端调用链图聊天主链路这条链路的核心结论是前端以Chat.svelte为编排中心MessageInput.svelte负责输入聚合。后端以openai.py为模型调用主入口retrieval.py提供可插拔检索能力。main.py只做装配和生命周期不承载具体业务规则。九、聊天主链路1) 前端顶层入口src/routes/layout.svelte作用全局启动器。关键职责初始化 i18n、读取用户会话、建立 Socket 连接、注入全局上下文。二开关注点新的全局能力如埋点、全局快捷键、统一错误处理放在这里。避免在这里塞页面级业务保持“装配层”职责单一。src/routes/(app)/layout.svelte作用登录后应用壳。关键职责拉取模型列表、工具、知识库、用户设置、公告等初始数据。二开关注点所有“登录后需要一次拉齐的数据”在这里加载。新增全局配置开关优先从这里注入到 store。src/routes/(app)/page.svelte作用聊天主页路由通常很薄。关键职责挂载Chat.svelte。二开关注点这里不宜堆业务逻辑保持路由层轻量。2) 前端聊天编排层src/lib/components/chat/Chat.svelte作用聊天主控制器。关键职责维护当前会话上下文模型、工具、过滤器、附件、历史消息。串联发送、停止、重试、流式渲染、错误提示。对接 RAG、搜索、工具调用等高级能力开关。二开关注点任何“发送前后行为变更”优先从这里切入。新增消息元数据比如业务标签通常要在这里拼装并传给 API 层。src/lib/components/chat/MessageInput.svelte作用输入聚合器。关键职责聚合文本、附件、工具选择、联网搜索开关、代码解释器开关。处理输入变量、快捷命令、上传行为。二开关注点新输入控件按钮、开关、快捷命令应先落这里再传到Chat.svelte。src/lib/components/chat/Messages/*.svelte作用输出渲染层。关键职责渲染流式结果、代码块、Markdown、引用、错误态。二开关注点改展示样式看这里改请求行为不要只改这里。3) 前端 API 适配层src/lib/apis/openai/index.ts作用聊天主接口封装。关键职责把前端 payload 发送到后端并处理错误。二开关注点增加新参数时这里是前端与后端契约的第一落点。src/lib/apis/chats/index.ts作用会话 CRUD。关键职责会话创建、读取、更新、标签等。二开关注点聊天元数据变更如新增会话字段需要同步改这里。4) 后端装配与业务入口backend/open_webui/main.py作用后端装配器。关键职责注册 routers、挂中间件、挂载 Socket 子应用、启动期初始化。二开关注点只做“组装”不要把业务规则散落到这里。backend/open_webui/routers/openai.py- 作用聊天推理主入口。- 关键职责- 接收聊天请求并做鉴权/参数整形。- 按模型配置转发到外部供应商。- 处理流式输出并返回给前端。- 二开关注点- 新增模型参数、请求前后钩子、响应后处理通常改这里。backend/open_webui/routers/chats.py- 作用会话持久化入口。- 关键职责会话列表、会话详情、标签和历史管理。- 二开关注点- 新增会话维度的业务字段时这里和模型层要同步改。backend/open_webui/routers/retrieval.py- 作用RAG 与联网搜索入口。- 关键职责检索、网页搜索、结果融合、向量化流程编排。- 二开关注点- 新增检索策略、搜索引擎或重排逻辑从这里扩展。backend/open_webui/models/*.py- 作用数据模型与 CRUD。- 关键职责实体定义、读写方法、部分 schema。- 二开关注点- 字段变更必然联动迁移脚本与 API 返回结构。5) 关键阅读原则先读“编排文件”layout、Chat、openai router再读“细节文件”UI 小组件、工具函数。先确认数据契约请求/响应字段再改渲染和样式。一次改造尽量沿一条链路改全UI - API - Router - Model - 回写 UI。开发路径按目标拆分阅读入口建议从上到下逐步深入1. 改 UI 和交互前端入口src/lib/components/chatsrc/lib/components/layoutsrc/lib/components/common样式入口src/app.csssrc/tailwind.css2. 改聊天行为前端入口src/lib/components/chat/Chat.sveltesrc/lib/apis/openai后端入口backend/open_webui/routers/openai.pybackend/open_webui/utils3. 改模型管理或新增供应商前端入口src/lib/components/workspace/Modelssrc/lib/apis/index.ts后端入口backend/open_webui/routers/models.pybackend/open_webui/routers/openai.pybackend/open_webui/routers/ollama.py4. 改 RAG / 联网搜索 / 知识库前端入口src/lib/components/workspace/Knowledgesrc/lib/apis/retrieval后端入口backend/open_webui/routers/retrieval.pybackend/open_webui/retrieval5. 接企业内部系统或做插件生态前端入口src/lib/components/workspace/Toolssrc/lib/components/workspace/Functions后端入口backend/open_webui/routers/tools.pybackend/open_webui/routers/functions.py