Artifact
Artifact เปลี่ยน file และ code block ของโมเดลเป็น panel preview ด้านข้าง เหมาะกับ game, diagram, demo HTML, JSON, script และ resource
Artifact ต่างจาก Work: สร้างจาก response ปกติและ render ใน browser โดยไม่มี filesystem หรือ shell persistent Work เก็บ project/conversation และรัน tool ใน Docker container ของ task
Input ที่รองรับ
Libre WebUI รู้จัก:
- block
<artifact>ชัดเจน - fenced code ของภาษาที่รองรับ
- เอกสาร HTML ที่ครบในตัว
- bundle หลาย file พร้อม
index.html, CSS และ JavaScript - JSX/TSX
- Mermaid
- SVG
- JSON
- fragment code/text
ประเภท Artifact
| Type | Preview |
|---|---|
| HTML | iframe sandbox พร้อม script และการโต้ตอบ |
| React | JSX/TSX ที่ compile พร้อม Tailwind และ library |
| Mermaid | Diagram sandbox ใช้ theme ของแอป |
| SVG | Preview ภาพ inline |
| JSON | Code ที่จัด format |
| Code/text | Syntax highlighting |
Bundle HTML หลาย File
Libre พยายามรวม HTML, CSS และ JavaScript ที่เชื่อมกัน ลบ reference local และ embed CSS/JS ที่เกี่ยวข้อง
ทางที่น่าเชื่อถือที่สุดคือ file เดียวที่ครบในตัว:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
การควบคุม Preview
Panel resizable มี tab Preview/Code, copy, download, หน้าต่างใหม่ และ fullscreen คลิก preview ก่อนส่ง input keyboard
Sandbox
HTML load ผ่าน GET /api/artifacts/sandbox srcdoc รับ CSP ของแอปที่ block inline script; host แยกมี policy ของตน Policy ให้ inline script และ eval แต่ไม่ประกาศ host ภายนอก
Frame ให้ script, form, modal, popup, pointer capture และ download แต่ไม่ให้ allow-same-origin Origin opaque เข้าถึง cookie, storage หรือ DOM ไม่ได้ Feature policy ให้ clipboard, fullscreen และ gamepad
สภาพแวดล้อม Artifact
แอปมี library local: React, ReactDOM, Framer Motion, Babel JSX/TSX, Tailwind, Recharts, Chart.js, Plotly, d3, Three.js (THREE.OrbitControls), Lucide, Lodash, MathJS, Papa Parse, Tone.js และ mermaid Import ใช้ import ... from 'react' หรือ import ... from '<name>'; import compile เป็น registry lookup Library ที่ไม่รู้จักแสดง error ชัด
Origin opaque ไม่ส่ง session cookie; embedding เลี่ยง redirect Cloudflare Access, Authelia หรือ oauth2-proxy Tag <script>/<link> CDN ถูกแทนด้วย bundle local รวม global Chart และ React localStorage, sessionStorage, document.cookie ใช้ตัวแทน memory-only ใน preview
Artifact รัน code ที่สร้างขึ้น: review HTML ที่ไม่น่าเชื่อถือและอย่าใส่ secret
Prompt ที่ดีกว่า
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.
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.
Return only one valid SVG code block with width, height, and viewBox.