Open WebUI Artifacts Overhaul

2025-07-26AI对话 / Web客户端59 次浏览

综合介绍

Open WebUI Artifacts Overhaul是一个开源项目，它是对主流AI用户界面Open WebUI的一个分支版本，由开发者Nick Tonjum创建。该项目完全重构了Open WebUI中的“工件（Artifacts）”系统。“工件”在这里指由大型语言模型（LLM）生成的任何产出，例如代码块、设计稿或文档。这个分支版本的核心目标是为开发者和设计师提供一个更加流畅和直观的交互体验。当AI模型生成代码时，此工具会提供一个类似VSCode的编辑环境，用户不仅可以直接查看和修改代码，还能实时预览网页设计或React组件的渲染效果。它通过并排显示聊天、代码编辑和视觉预览，极大地简化了使用AI进行编程和设计的迭代过程，让用户可以更高效地验证和优化AI的输出结果。

功能列表

编码画布: 当语言模型输出代码时，界面右侧会展示一个Monaco编辑器（VSCode的核心编辑器），用户可以在其中切换由AI生成的不同文件和历史版本。
差异检查器: 如果用户要求AI修改已有代码，新代码与旧代码之间的差异会清晰地高亮显示，此功能可以一键启用或禁用。
设计查看器: 用户可以轻松在代码视图和设计视图之间切换。它不仅支持原生HTML/CSS/JavaScript，还内置了对Tailwind CSS的支持，方便实时预览网页样式。
React组件可视化: 该工具能够直接渲染AI生成的React组件，让前端开发者可以即时看到组件的实际外观和布局。
紧凑的代码块: 在编码画布打开的状态下，聊天窗口中的原始代码块会自动收缩为附件形式，使聊天界面保持整洁。
广泛的语言支持: 支持多种Web开发语言、主流编程语言、脚本语言以及标记和数据格式，如JavaScript、Python、Java、C#、Bash、JSON、YAML等。

使用帮助

这个项目是Open WebUI的一个实验性分支，专注于改进代码生成体验，因此它的安装和使用方式与官方的Open WebUI有所不同。官方版本主要推荐使用Docker进行快速部署，但要体验这个“Artifacts Overhaul”版本，你需要从源代码进行构建。

开发者Nick Tonjum提供了一个他个人认为最快捷的安装流程，具体步骤如下：

环境准备

安装Conda: Conda是一个开源的包管理系统和环境管理系统，可以让你轻松创建和管理隔离的软件环境。如果你没有安装，请先从Anaconda或Miniconda官网下载并安装。

创建并激活Conda环境: 为了避免与你系统上现有的Python或其他软件包产生冲突，建议创建一个全新的环境。此项目推荐使用Python 3.10或3.11版本。

# 创建一个名为 "open-webui-artifacts" 的新环境，并指定Python版本为3.11
conda create --name open-webui-artifacts python=3.11
# 激活这个新创建的环境
conda activate open-webui-artifacts

前端构建前端部分负责用户界面的显示和交互。

克隆项目仓库: 首先，你需要将该项目的代码从GitHub克隆到你的本地电脑。

git clone https://github.com/nick-tonjum/open-webui-artifacts-overhaul.git
cd open-webui-artifacts-overhaul

安装前端依赖: 在项目的主文件夹下，使用npm来安装所需的依赖包。

# --no-package-lock 参数是为了确保安装与项目测试时一致的依赖版本
npm install --no-package-lock

安装额外依赖: 由于项目使用了一些特定的UI库，需要额外安装。
```
npm install @floating-ui/utils
```
构建前端应用: 运行构建命令，这个过程会将源代码（如Svelte、TypeScript文件）编译打包成浏览器可以直接运行的静态文件（HTML, CSS, JavaScript）。
```
npm run build
```
构建成功后，会在项目根目录下生成一个build文件夹。

后端启动后端负责处理与AI模型的通信和业务逻辑。

进入后端目录: 从项目主文件夹切换到backend目录。
```
cd backend
```
安装后端依赖: 使用pip安装后端所需的所有Python库。这些库定义在requirements.txt文件中。
```
pip install -r requirements.txt
```

启动后端服务: 运行启动脚本来启动Web服务器。

# 对于Linux或macOS系统
sh start.sh
# 对于Windows系统，你可能需要查看start.sh的内容或使用等效命令
# 例如，直接用uvicorn运行：uvicorn main:app --host 0.0.0.0 --port 8080

完成以上步骤后，你就可以在浏览器中打开 http://localhost:8080 来访问和使用这个特殊版本的Open WebUI了。

功能操作流程

与AI对话生成代码: 在聊天输入框中，像平常一样向AI模型提出你的编程需求。例如：“请帮我用HTML和Tailwind CSS创建一个简单的登录表单” 或 “请用React写一个可以计数的按钮组件”。
激活编码画布: 当AI模型返回代码块时，系统会自动在界面右侧激活“编码画布”。左侧是你的聊天记录，右侧就是功能强大的代码交互区。
文件和版本切换: 如果AI一次性生成了多个文件（例如HTML、CSS和JS文件），你可以在编码画布的顶部看到文件导航栏，点击不同的文件名即可切换查看和编辑。如果后续你要求AI修改代码，它会生成一个新的版本，你也可以在版本历史中切换，方便对比。
使用差异检查器: 当AI对你提供的代码进行修改后，画布工具栏上会有一个差异检查的开关。点击它，所有被修改、添加或删除的行都会被高亮标记，让你对变更一目了然。
预览设计和组件: 在编码画布的顶部，你会找到一个“设计视图”或“代码视图”的切换按钮。
- 如果AI生成的是HTML/CSS/JS代码，点击“设计视图”会直接渲染出网页的视觉效果。
- 如果AI生成的是一个React组件（并包含export default语句），点击预览就能看到这个组件被渲染出来的样子。你可以直接与预览中的组件互动，就像它已经运行在网页上一样。

应用场景

快速前端原型开发开发者可以口头描述一个网页组件或布局，让AI生成初始的HTML、CSS和React代码。然后，利用设计查看器和React可视化功能，直接在界面右侧看到实时渲染的效果。如果效果不满意，可以立即在聊天框中提出修改意见，例如“把按钮颜色改成蓝色”或“增加一个输入框”，AI生成新代码后，预览区会同步更新，极大地加速了从想法到可见原型的过程。
代码学习与教学编程初学者可以使用这个工具来学习新语言或框架。例如，他们可以要求AI用Python写一个特定功能的函数，然后在编码画布中逐行研究代码。对于前端语言，他们可以修改HTML或CSS代码，并立即在设计视图中看到变化，这种即时反馈对于理解代码如何影响最终效果非常有帮助。
代码审查与重构用户可以将一段现有代码粘贴到聊天中，并要求AI进行重构、优化或修复错误。AI返回修改后的代码时，差异检查器会自动高亮显示所有改动。这使得代码审查变得非常高效，审查者可以快速定位关键变更，而无需手动比对两个版本的代码。
生成多文件项目在开发稍微复杂的应用时，通常需要多个文件协同工作（如HTML、CSS、JavaScript分离）。用户可以要求AI生成一个包含多个文件的项目结构，然后在编码画布的文件导航器中轻松地切换和管理这些文件，使整个开发流程更有条理。

QA

这个项目和官方的Open WebUI有什么区别？此项目是官方Open WebUI的一个实验性分支，并非替代品。它的核心区别在于完全重构了“工件”系统，专为处理代码和设计产出进行了深度优化，增加了编码画布、差异检查器和实时预览等功能。而官方的Open WebUI则是一个功能更全面的通用型AI平台。
什么是“工件”(Artifacts)？在Open WebUI的语境中，“工件”是指由AI模型生成的任何有价值的输出内容。这可以是一个代码块、一篇完整的文章、一张图片或者一个React组件。这个分支项目专注于提升代码和设计类工件的交互体验。
我可以直接在官方的Open WebUI上使用这些功能吗？目前不能。这些功能是此特定分支独有的，处于测试阶段。该项目的作者计划在功能稳定并通过充分测试后，将其作为“拉取请求”（Pull Request）提交给Open WebUI的官方项目，如果被接受，未来可能会集成到官方版本中。
安装这个版本需要使用Docker吗？不需要，甚至说不推荐。作者提供的安装说明是基于源代码手动构建的，需要使用Conda创建Python环境，并通过npm和pip分别安装前后端依赖。这与官方Open WebUI主流的Docker一键部署方式不同。如果你想体验这些最新的工件功能，需要遵循源代码的安装指南。