跳到主要内容

什么是工件 (Artifacts)？如何在 Open WebUI 中使用它们？

Open WebUI 中的工件 (Artifacts) 是一项受 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 的版本选择器来测试不同的版本。