跳到主要内容

Artifacts

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

Open WebUI 中的 Artifacts 是一项灵感来自 Claude.AI Artifacts 的创新功能，允许您在对话中与 LLM 生成的独立且具有重大意义的内容进行交互。它们使您能够在主对话之外，单独查看、修改、在此基础上构建或引用大块的内容，从而更容易处理复杂的输出，并确保您可以在以后重新访问这些重要信息。

Open WebUI 在什么情况下会使用 Artifacts？​

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

  1. 可渲染（Renderable）：要将内容显示为 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，模型必须提供能够触发渲染过程并创建 Artifact 的内容。这涉及生成有效的 HTML、SVG 代码或其他受支持的 Artifact 渲染格式。当生成的内容符合上述标准时，Open WebUI 就会将其显示为交互式的 Artifact。

如何在 Open WebUI 中使用 Artifacts？​

当 Open WebUI 创建一个 Artifact 时，您会看到内容显示在主对话右侧的专用 Artifacts 窗口中。以下是与 Artifacts 交互的方式：

  • 编辑与迭代：在对话中要求 LLM 对内容进行编辑或迭代，这些更新将直接显示在 Artifact 窗口中。您可以使用 Artifact 左下角的版本选择器在不同版本之间进行切换。每次编辑都会创建一个新版本，以便您追踪更改。
  • 更新：Open WebUI 可能会根据您的消息更新现有的 Artifact。Artifact 窗口将显示最新的内容。
  • 操作：可以对 Artifact 执行其他操作，例如复制内容或在全屏模式下打开 Artifact，这些操作按钮位于 Artifact 的右下角。

编辑 Artifacts​

  1. 针对性更新：描述您想要在何处更改什么。例如：
  • “将图表中的柱状图颜色从蓝色改为红色。”
  • “将 SVG 图像的标题更新为‘新标题’。”
  1. 完整重写：当需要进行重大的结构调整或更新多个部分时，请求进行影响大部分内容的大幅度修改。例如：
  • “将这个单页面 HTML 网站重写为一个落地页（Landing Page）。”
  • “重新设计这个 SVG，使其使用 ThreeJS 制作成动画。”

最佳实践：

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

使用场景​

Open WebUI 中的 Artifacts 使各种团队能够快速、高效地创建高质量的工作成果。以下是一些专为我们平台量身定制的示例：

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

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

Open WebUI 中的 Artifacts 使不同的团队和个人能够快速、高效地创建高质量的工作成果。以下是一些专为我们平台量身定制的示例，展示了 Artifacts 的多功能性，并启发您探索它们的潜力：

  1. 交互式可视化
  • 所用组件：ThreeJS, D3.js and SVG
  • 优势：通过交互式可视化创建身临其境的数据故事。Open WebUI 的 Artifacts 允许您在不同版本之间切换，从而更容易测试不同的可视化方法并跟踪更改。

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

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

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

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

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

  1. 网页原型
  • 所用组件：HTML, CSS and JavaScript
  • 优势：直接在 Open WebUI 内构建和测试网页原型。在不同版本之间进行切换，以对比不同的设计方法并完善原型。

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

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

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

问题排查​

Artifacts 预览无法正常工作（Uncaught SecurityError）​

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

解决方案：

  1. 前往 设置 > 界面（Settings > Interface）。
  2. 打开 允许 Iframe 沙箱同源访问（Allow Iframe Sandbox Same-Origin Access） 开关。
  3. 保存您的设置。
This content is for informational purposes only and does not constitute a warranty, guarantee, or contractual commitment. Open WebUI is provided "as is." See your license for applicable terms.