跳到主要内容

什么是工件以及如何在 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 的版本选择器测试不同版本。