跳到主要内容

制品

什么是 Artifacts，如何在 OPL 数据空间中使用？​

Artifacts 是 OPL 数据空间中一项受 Claude.AI Artifacts 启发的功能，允许你在聊天之外单独查看和操作由 LLM 生成的、体量较大且相对独立的内容。它让你可以单独浏览、修改、延展或引用这些输出，尤其适合处理复杂结果，也方便你稍后重新查看重要内容。

OPL 数据空间何时会使用 Artifacts？​

当生成内容满足平台定义的特定条件时， OPL 数据空间会创建 Artifact：

  1. 可渲染：只有 OPL 数据空间能够直接渲染的格式才会作为 Artifact 展示，包括：
    • 单页 HTML 网站
    • SVG 矢量图像
    • 完整网页内容，即 HTML、JavaScript 和 CSS 全部包含在同一个 Artifact 中；若要生成完整网页，HTML 是必需的
    • ThreeJS 可视化，以及 D3.js 等其他 JavaScript 可视化库

像 Markdown / 纯文本、普通代码片段、React 组件等内容，默认不会以 Artifact 方式渲染。

模型如何创建 Artifact？​

要在 OPL 数据空间中生成 Artifact，模型必须输出可触发渲染流程的内容，也就是合法的 HTML、SVG 或其他受支持格式。当生成内容满足上述条件时， OPL 数据空间就会把它展示为交互式 Artifact。

如何使用 Artifacts？​

当 OPL 数据空间创建 Artifact 后，你会在主聊天右侧看到专门的 Artifacts 窗口。可进行以下操作：

  • 编辑与迭代：你可以在聊天中让 LLM 继续修改内容，更新会直接显示在 Artifact 窗口中。每次编辑都会生成一个新版本，可通过左下角版本选择器切换。
  • 自动更新：根据你的消息， OPL 数据空间可能会更新已有 Artifact，窗口中会展示最新结果。
  • 附加操作：在 Artifact 右下角可执行额外操作，例如复制内容或全屏查看。

编辑 Artifacts​

  1. 定向更新：明确说明要改哪里、改什么。例如：
    • “把图表中柱子的颜色从蓝色改成红色。”
    • “把这个 SVG 的标题改成 ‘New Title’。”
  2. 整体重写：如果需要影响大部分内容，可直接要求大规模重构。例如：
    • “把这个单页 HTML 网站重写成 landing page。”
    • “把这个 SVG 改造成用 ThreeJS 驱动的动画版本。”

最佳实践：

  • 尽量具体指出要改哪一部分
  • 可引用目标区域周围的独特文字，帮助模型精准更新
  • 先判断自己需要的是小改动，还是更适合整段重写

典型场景​

Artifacts 让不同团队都能更快产出高质量成果，例如：

  • 设计师
    • 制作用于 UI/UX 的交互式 SVG 图形
    • 设计单页 HTML 网站或 landing page
  • 开发者
    • 生成简单 HTML 原型
    • 为项目生成 SVG 图标
  • 市场团队
    • 制作带指标展示的活动落地页
    • 生成广告或社媒素材所需 SVG 图形

你可以用 Artifacts 做什么​

  1. 交互式可视化

    • 使用组件：ThreeJS、D3.js、SVG
    • 优势：更容易制作沉浸式数据故事，并通过版本切换比较不同可视化方案

  2. 单页 Web 应用

    • 使用组件：HTML、CSS、JavaScript
    • 优势：可直接在 OPL 数据空间中构建与迭代单页应用

  3. 动画 SVG 图形

    • 使用组件：SVG、ThreeJS
    • 优势：适合营销活动、社媒内容和网页视觉设计

  4. 网页原型

    • 使用组件：HTML、CSS、JavaScript
    • 优势：可直接构建和测试网页原型，并在不同版本之间切换比较

  5. 交互式叙事内容

    • 使用组件：HTML、CSS、JavaScript
    • 优势：适合包含滚动效果、动画和互动元素的故事型内容

故障排查​

Artifact 预览不工作（Uncaught SecurityError）​

如果你发现聊天中的代码预览不显示，并且浏览器控制台里出现 Artifacts.svelte:40 Uncaught SecurityError，这通常与某些环境下的跨域 iframe 限制有关。

解决方法：

  1. 前往 设置 > 界面
  2. 打开 iframe 沙盒允许同源访问
  3. 保存设置