交互式产物
交互式产物把模型生成的文件和代码块变成可预览的侧边面板，适合游戏、图表、HTML 演示、JSON 负载、脚本和生成资源。
它不同于 Work。产物来自普通聊天回复并在浏览器中渲染；不会给模型 持久文件系统或 shell。Work 任务保留项目文件和对话历史，并在任务专属 Docker 容器中运行模型工具。
支持的输入
Libre WebUI 可检测：
- 明确的
<artifact>块 - 使用适合产物语言的围栏代码块
- 独立完整 HTML 文档
- 由
index.html、CSS 和 JavaScript 块组成的多文件 HTML 包 - JSX 和 TSX 组件
- Mermaid 图表
- SVG 块
- JSON 块
- 代码和文本片段
产物类型
| 类型 | 预览行为 |
|---|---|
| HTML | 沙箱 iframe 预览，启用脚本和交互 |
| React | 编译并挂载 JSX/TSX，包含 Tailwind 和库集合 |
| Mermaid | 在沙箱中按应用主题绘制图表 |
| SVG | 内联视觉预览 |
| JSON | 格式化代码视图 |
| 代码/文本 | 语法高亮代码视图 |
多文件 HTML 包
模型返回相关 HTML、CSS 和 JavaScript 块时，Libre WebUI 会尝试合并为可运行产物， 删除本地样式表/脚本引用并内联匹配的生成内容。
为了获得最可靠结果，请要求一个自包含 HTML 文件：
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
查看器控件
产物在可调整大小的侧边面板中打开，包含：
- 预览和代码标签
- 复制
- 下载
- 在新窗口打开
- 可用时的展开/全屏控件
需要键盘输入时，先点击预览内部或在新窗口打开。
沙箱行为
HTML 产物通过 GET /api/artifacts/sandbox 加载。此间接层很重要：srcdoc 帧会
继承嵌入者的 Content Security Policy，而应用政策禁止内联脚本，因此生产中会被
阻止。沙箱主机改为通过网络获取并携带自己的政策，预览帧继承该政策。
产物政策允许内联脚本和 eval，因为产物本身需要它们；除应用自身外不允许其他主机。
产物可以渲染和计算，但不能从 CDN 获取内容或向外部回传。
帧允许脚本、表单、模态框、弹窗、指针锁和下载，但绝不允许 allow-same-origin，
因此运行在不透明来源，无法访问应用 cookie、存储或 DOM。功能政策允许剪贴板、全屏和
游戏手柄。
产物运行时
生成产物假定库可用。应用不会允许它们访问 CDN，而是内置所需库：
| 可用内容 | 访问方式 |
|---|---|
| React、ReactDOM、Framer Motion | import ... from 'react' |
| JSX 和 TSX | 由 Babel 在帧内编译 |
| Tailwind 工具类 | 从标记生成，无需 build |
| Recharts、Chart.js、Plotly、D3 | import ... from '<name>' |
| Three.js 及控件、加载器、环境和更多附加组件 | THREE.OrbitControls 或 import |
| Lucide 图标、Lodash、MathJS、Papa Parse、Tone.js | import ... from '<name>' |
| Mermaid | mermaid 产物或 import |
请求集合外库时会显示点名提示，而不是空白预览和控制台政策错误。
帧不自行获取这些库。携带用户会话的应用页面加载包并内联到产物文档；产物的 import
会编译为小型注册表查找，而不是网络模块解析。
这并非偶然。不透明来源的请求被浏览器视为跨站且不发送会话 cookie。在 Cloudflare Access、Authelia、oauth2-proxy 后，请求会重定向到登录页并被沙箱政策拒绝，导致 Content Security Policy 错误。内联消除了请求，使本地和企业网关后的行为一致。
React 产物在沙箱中编译挂载：将组件作为模块默认导出即可。所有库从同一注册表解析 React，因此只有一个实例，hooks 正常工作。
HTML 产物中的 CDN <script> 或 <link> 如果指向 Tailwind、Chart.js、D3、
Three.js、Papa Parse、Lodash、Mermaid、React 或 Babel，会在原位置替换为内置构建，
让脚本仍找到 Chart、d3 或 React。集合外库需要自行内联。
真实 localStorage、sessionStorage 和 document.cookie 在不透明来源会报错。
沙箱提供内存替代项，内容只维持预览时长且不与应用共享。
产物仍会执行生成代码：在预览外下载或复用前检查不可信 HTML，不要放入密钥。
更好的提示词
游戏：
Build a complete browser game as one HTML file.
Use canvas.
Inline all CSS and JavaScript.
Show controls on screen.
Avoid external assets unless they are optional.
仪表板：
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
React 组件：
Return one React component in a single jsx block.
Export it as the default export.
Style it with Tailwind classes.
Import anything you need from react, recharts, or lucide-react.
SVG：
Return only one valid SVG code block with width, height, and viewBox.