Skip to main content

什么是制品？如何在 Open WebUI 中使用它们？

Open WebUI 中的制品（Artifacts）是一个创新功能，灵感来自 Claude.AI，它允许您在聊天中与大语言模型生成的重要独立内容进行交互。通过制品，您可以独立于主对话来查看、修改、扩展或引用重要内容，这样不仅便于处理复杂输出，还能确保您随时可以重新访问这些重要信息。

Open WebUI 什么时候会创建制品？​

当生成的内容满足以下平台标准时，Open WebUI 会创建制品：

  1. 可渲染内容：要作为制品显示，内容必须是 Open WebUI 支持渲染的格式，包括：
  • 单页 HTML 网站
  • SVG 矢量图形
  • 完整网页（包含 HTML、JavaScript 和 CSS）。注意：生成完整网页时必须包含 HTML
  • ThreeJS 可视化效果和其他 JavaScript 可视化库（如 D3.js）的作品

其他类型的内容，如文档（Markdown 或纯文本）、代码片段和 React 组件等不会被渲染为制品。

Open WebUI 如何创建制品？​

要在 Open WebUI 中使用制品，模型需要生成能触发渲染过程的内容。这包括生成有效的 HTML、SVG 代码或其他支持的格式。当内容满足上述标准时，Open WebUI 就会将其显示为可交互的制品。

如何使用制品？​

当 Open WebUI 创建制品时，您会在主聊天窗口右侧的专门区域看到内容。以下是制品的使用方法：

  • 编辑与迭代：您可以在聊天中要求大语言模型修改或改进内容，更新会直接显示在制品窗口中。使用左下角的版本切换器可以在不同版本间切换。每次编辑都会创建新版本，方便您追踪所有更改。
  • 实时更新：Open WebUI 会根据您的对话自动更新制品，始终显示最新内容。
  • 快捷操作：在制品窗口右下角，您可以找到复制内容或全屏显示等实用功能。

编辑制品​

  1. 精确更新：明确指出需要更改的内容和位置，例如：
  • "把图表中的蓝色柱状图改成红色"
  • "将 SVG 图像的标题改为'产品分析报告'"
  1. 整体重写：当需要大规模修改或多处更新时，可以请求完整重写，例如：
  • "把这个单页网站改造成产品介绍页"
  • "用 ThreeJS 给这个 SVG 添加动画效果"

使用建议：

  • 准确描述想要修改的具体部分
  • 提供上下文信息以帮助定位修改位置
  • 根据需求选择局部更新还是整体重写

应用场景​

Open WebUI 的制品功能可以帮助各类团队快速创建高质量作品：

  • 设计团队：
    • 制作交互式 UI/UX 设计图
    • 设计产品落地页
  • 开发团队：快速创建原型或生成项目所需的图标
  • 营销团队：
    • 制作数据驱动的营销页面
    • 设计社交媒体图片和广告素材

制品应用示例​

Open WebUI 的制品功能为团队和个人提供了强大的创作工具。以下是一些具体应用示例：

  1. 数据可视化
  • 技术组件：ThreeJS、D3.js 和 SVG
  • 主要优势：创建互动式数据展示。可以轻松切换不同版本，测试各种可视化效果。

示例：用 ThreeJS 制作股市走势的交互图表，通过不同版本尝试各种配色方案和比例设置。

  1. 单页应用
  • 技术组件：HTML、CSS 和 JavaScript
  • 主要优势：快速开发和测试 Web 应用，支持即时修改和版本管理。

示例：开发一个待办事项应用，包含界面设计和交互功能，可以随时调整布局和用户体验。

  1. 动态图形
  • 技术组件：SVG 和 ThreeJS
  • 主要优势：创建生动的动态图形，适用于品牌展示和营销。

示例：设计公司动态 Logo，添加流畅的动画效果，随时调整颜色和设计细节。

  1. 网页原型
  • 技术组件：HTML、CSS 和 JavaScript
  • 主要优势：快速构建和测试网页原型，支持多版本比较。

示例：设计电商网站原型，优化导航结构和页面布局，测试不同的设计方案。

  1. 互动故事
  • 技术组件：HTML、CSS 和 JavaScript
  • 主要优势：创作富有吸引力的互动内容，支持多种展示效果。

示例：制作公司发展历程的互动展示，结合滚动动画和交互效果，通过不同版本优化展示效果。