Skip to main content

什么是工件以及如何在 Open WebUI 中使用它们？

Open WebUI 中的工件是一个受 Claude.AI 工件启发的创新功能，允许您与聊天中 LLM 生成的重要且独立的内容进行交互。它们使您能够查看、修改、构建或引用与主要对话分离的大量内容，使处理复杂输出变得更容易，并确保您可以稍后重新访问重要信息。

Open WebUI 何时使用工件？​

当生成的内容满足为我们的平台量身定制的特定标准时，Open WebUI 会创建工件：

  1. 可渲染：要显示为工件，内容必须是 Open WebUI 支持渲染的格式。这包括：
  • 单页 HTML 网站
  • 可缩放矢量图形 (SVG) 图像
  • 完整的网页，包括 HTML、Javascript 和 CSS 都在同一个工件中。请注意，生成完整网页时需要 HTML。
  • ThreeJS 可视化和其他 JavaScript 可视化库，如 D3.js。

其他内容类型如文档（Markdown 或纯文本）、代码片段和 React 组件不会被 Open WebUI 渲染为工件。

Open WebUI 的模型如何创建工件？​

要在 Open WebUI 中使用工件，模型必须提供触发渲染过程以创建工件的内容。这涉及生成有效的 HTML、SVG 代码或其他支持工件渲染的格式。当生成的内容满足上述标准时，Open WebUI 将其显示为交互式工件。

如何在 Open WebUI 中使用工件？​

当 Open WebUI 创建工件时，您将看到内容显示在主聊天右侧的专用工件窗口中。以下是与工件交互的方法：

  • 编辑和迭代：在聊天中要求 LLM 编辑或迭代内容，这些更新将直接显示在工件窗口中。您可以使用工件底部左侧的版本选择器在版本之间切换。每次编辑都会创建一个新版本，允许您使用版本选择器跟踪更改。
  • 更新：Open WebUI 可能根据您的消息更新现有工件。工件窗口将显示最新内容。
  • 操作：访问工件的其他操作，如复制内容或在全屏中打开工件，位于工件右下角。

编辑工件​

  1. 针对性更新：描述您想要更改的内容和位置。例如：
  • "将图表中条形的颜色从蓝色改为红色。"
  • "将 SVG 图像的标题更新为'新标题'。"
  1. 完全重写：请求影响大部分内容的重大更改，以进行实质性重构或多个部分更新。例如：
  • "重写这个单页 HTML 网站，使其成为登录页面。"
  • "重新设计这个 SVG，使其使用 ThreeJS 进行动画。"

最佳实践：

  • 明确指出您想要更改工件的哪个部分。
  • 引用所需更改周围的唯一标识文本以进行针对性更新。
  • 考虑小更新或完全重写是否更适合您的需求。

用例​

Open WebUI 中的工件使各种团队能够快速高效地创建高质量的工作产品。以下是一些针对我们平台的示例：

  • 设计师：
    • 为 UI/UX 设计创建交互式 SVG 图形。
    • 设计单页 HTML 网站或登录页面。
  • 开发者：创建简单的 HTML 原型或为项目生成 SVG 图标。
  • 营销人员：
    • 设计带有性能指标的活动登录页面。
    • 为广告创意或社交媒体帖子创建 SVG 图形。

您可以使用 Open WebUI 工件创建的项目示例​

Open WebUI 中的工件使各种团队和个人能够快速高效地创建高质量的工作产品。以下是一些针对我们平台的示例，展示了工件的多功能性并激发您探索其潜力：

  1. 交互式可视化
  • 使用的组件：ThreeJS、D3.js 和 SVG
  • 好处：使用交互式可视化创建沉浸式数据故事。Open WebUI 的工件使您能够在版本之间切换，使测试不同的可视化方法和跟踪更改变得更容易。

示例项目：使用 ThreeJS 构建交互式折线图以可视化股票价格随时间的变化。在单独的版本中更新图表的颜色和比例以比较不同的可视化策略。

  1. 单页 Web 应用程序
  • 使用的组件：HTML、CSS 和 JavaScript
  • 好处：直接在 Open WebUI 中开发单页 web 应用程序。使用针对性更新和完全重写来编辑和迭代内容。

示例项目：使用 HTML 和 CSS 构建用户界面设计待办事项列表应用。使用 JavaScript 添加交互功能。使用针对性更新和完全重写来更新应用的布局和 UI/UX。

  1. 动画 SVG 图形
  • 使用的组件：SVG 和 ThreeJS
  • 好处：为营销活动、社交媒体或网页设计创建引人入胜的动画 SVG 图形。Open WebUI 的工件使您能够在单个窗口中编辑和迭代图形。

示例项目：为公司品牌设计动画 SVG 标志。使用 ThreeJS 添加动画效果和 Open WebUI 的针对性更新来完善标志的颜色和设计。

  1. 网页原型
  • 使用的组件：HTML、CSS 和 JavaScript
  • 好处：直接在 Open WebUI 中构建和测试网页原型。在版本之间切换以比较不同的设计方法并完善原型。

示例项目：使用 HTML、CSS 和 JavaScript 开发新电子商务网站的原型。使用 Open WebUI 的针对性更新来完善导航、布局和 UI/UX。

  1. 交互式叙事
  • 使用的组件：HTML、CSS 和 JavaScript
  • 好处：创建具有滚动效果、动画和其他交互元素的交互式故事。Open WebUI 的工件使您能够完善故事并测试不同版本。

示例项目：构建一个关于公司历史的交互式故事，使用滚动效果和动画来吸引读者。使用针对性更新来完善故事的叙述，使用 Open WebUI 的版本选择器来测试不同版本。