跳到主要内容

什么是工件以及如何在 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的Artifacts功能，可以在单个窗口中编辑和迭代图形。

示例项目：设计一个动画SVG公司品牌标志。使用ThreeJS添加动画效果，并利用Open WebUI的定向更新来优化标志的颜色和设计。

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

示例项目：使用HTML、CSS和JavaScript开发一个新的电子商务网站原型。利用Open WebUI的定向更新来优化导航、布局和UI/UX。

  1. 交互式故事讲述
  • 使用的组件：HTML、CSS和JavaScript
  • 优势：创建带有滚动效果、动画和其他互动元素的交互式故事。使用Open WebUI的Artifacts功能可优化故事并测试不同版本。

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