Skip to main content

Artifacts

什么是 Artifacts？如何在 Open WebUI 中使用它们？​

Open WebUI 中的 Artifacts 是一项创新功能，灵感源自 Claude.AI 的 Artifacts。它允许您在聊天中与 LLM 生成的重要且独立的内容进行交互。您可以从主对话中分离出来，单独查看、修改、构建或引用这些重要内容，从而更轻松地处理复杂的输出，并确保以后可以随时回顾重要信息。

Open WebUI 何时使用 Artifacts？​

当生成的内容符合我们平台特定的标准时，Open WebUI 就会创建一个 Artifact：

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

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

Open WebUI 的模型如何创建 Artifacts？​

要在 Open WebUI 中使用 artifacts，模型必须提供能触发渲染过程的内容。这涉及生成有效的 HTML、SVG 代码或其他受支持的渲染格式。当生成的内容符合上述标准时，Open WebUI 就会将其显示为交互式 Artifact。

如何在 Open WebUI 中使用 Artifacts？​

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

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

编辑 Artifacts​

  1. 针对性更新：描述您想要更改的内容和位置。例如：
  • “将图表中柱子的颜色从蓝色改为红色。”
  • “将 SVG 图像的标题更新为‘新标题’。”
  1. 完整重写：当需要进行实质性的结构调整或更新多个部分时，要求对大部分内容进行重大更改。例如：
  • “将这个单页 HTML 网站改写为一个落地页。”
  • “重新设计这个 SVG，使其使用 ThreeJS 制作动画。”

最佳实践：

  • 明确说明您想要更改 Artifact 的哪个部分。
  • 引用所需更改周围的唯一标识文本，以便进行针对性更新。
  • 根据您的需求，考虑小幅更新还是完整重写更合适。

使用案例​

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

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

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

Open WebUI 中的 Artifacts 赋能各个团队和个人快速高效地创建高质量的工作产出。以下是一些示例，展示了 Artifacts 的多功能性并启发您探索其潜力：

  1. 交互式可视化
  • 使用组件：ThreeJS、D3.js 和 SVG
  • 优势：通过交互式可视化创建沉浸式数据故事。Open WebUI 的 Artifacts 允许您在不同版本之间切换，从而更轻松地测试不同的可视化方法并跟踪更改。

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

  1. 单页面 Web 应用程序
  • 使用组件：HTML、CSS 和 JavaScript
  • 优势：直接在 Open WebUI 中开发单页面 Web 应用程序。通过针对性更新和完整重写来编辑和迭代内容。

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

  1. 动画 SVG 图形
  • 使用组件：SVG 和 ThreeJS
  • 优势：为营销活动、社交媒体或网页设计创建吸引人的动画 SVG 图形。Open WebUI 的 Artifacts 允许您在单个窗口中编辑和迭代图形。

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

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

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

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

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

故障排除​

Artifacts 预览不起作用（Uncaught SecurityError）​

如果您遇到聊天界面中的代码预览未出现，并且在浏览器控制台中看到类似 Artifacts.svelte:40 Uncaught SecurityError 的错误，这通常是由某些环境配置中的跨域 iframe 限制引起的。

解决方案：

  1. 进入 设置 > 界面。
  2. 开启 允许 Iframe 沙盒同源访问 (Allow Iframe Sandbox Same-Origin Access)。
  3. 保存设置。