Artefakty
Artefakty převádějí soubory a bloky kódu vygenerované modelem na postranní panel s náhledem. Hodí se pro hry, diagramy, ukázky HTML, data JSON, skripty a vytvořené prostředky.
Artefakty se liší od Work. Vznikají z běžné odpovědi chatu a vykreslují se v prohlížeči; modelu neposkytují trvalý souborový systém ani shell. Úloha Work uchovává soubory a historii konverzace a spouští nástroje v kontejneru Docker vyhrazeném úloze.
Podporované vstupy
Libre WebUI rozpoznává:
- Výslovné bloky
<artifact> - Ohraničené bloky kódu s jazyky vhodnými pro artefakty
- Samostatné úplné dokumenty HTML
- Balíčky HTML z více souborů vytvořené z bloků
index.html, CSS a JavaScript - Komponenty JSX a TSX
- Diagramy Mermaid
- Bloky SVG
- Bloky JSON
- Úryvky kódu a textu
Typy artefaktů
| Typ | Chování náhledu |
|---|---|
| HTML | Sandboxovaný iframe se zapnutými skripty a interakcí |
| React | Kompilované a připojené JSX/TSX s Tailwindem a sadou knihoven |
| Mermaid | Diagram vykreslený v sandboxu s motivem aplikace |
| SVG | Vložený vizuální náhled |
| JSON | Formátované zobrazení kódu |
| Kód/text | Kód se zvýrazněním syntaxe |
Balíčky HTML z více souborů
Když model vrátí související bloky HTML, CSS a JavaScript, Libre WebUI je zkusí sloučit do spustitelného artefaktu HTML. Odstraní místní odkazy na styly a skripty a odpovídající vygenerované CSS a JavaScript vloží přímo.
Pro nejspolehlivější výsledek požádejte model o jeden samostatný soubor HTML:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Ovládání prohlížeče
Artefakty se otevírají v postranním panelu s nastavitelnou velikostí a nabízejí:
- Karty Preview a Code
- Kopírování
- Stažení
- Otevření v novém okně
- Rozbalení či celou obrazovku, pokud je dostupná
Pokud interaktivní artefakt potřebuje klávesnici, nejprve klikněte do náhledu nebo ho otevřete v novém okně.
Chování sandboxu
Artefakty HTML se načítají přes GET /api/artifacts/sandbox, malý dokument backendu,
který hostuje náhled. Toto zprostředkování je důležité: rámec srcdoc dědí Content
Security Policy vkládající stránky a zásady aplikace zakazují vložené skripty, takže by
se takový artefakt v produkci zablokoval. Hostitel sandboxu se místo toho načte přes síť,
nese vlastní zásady a vytvořený rámec je zdědí.
Zásady artefaktu povolují vložené skripty a eval, protože z nich artefakt sestává,
a neurčují žádného hostitele kromě aplikace. Artefakt může vykreslovat a počítat, ale
nemůže načítat z CDN ani volat domů.
Rámec povoluje skripty, formuláře, modální okna, vyskakovací okna, zámek ukazatele a
stahování, nikdy však allow-same-origin. Artefakt proto běží z neprůhledného originu
bez přístupu k cookies, úložišti či DOM aplikace. Zásady funkcí povolují schránku,
celou obrazovku a vstup gamepadu.
Běhové prostředí artefaktů
Vygenerované artefakty předpokládají dostupné knihovny. Aplikace je namísto přístupu k CDN dodává sama:
| Dostupné artefaktům | Způsob přístupu |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX a TSX | kompiluje v rámci Babel |
| Utility Tailwind | generují se ze značek bez sestavení |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js s ovládáním, loadery, prostředími a dalšími doplňky | THREE.OrbitControls nebo import |
| Ikony Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefakty mermaid nebo import |
Artefakt požadující knihovnu mimo tuto sadu dostane oznámení s jejím názvem místo prázdného náhledu a chyby zásad v konzoli.
Rámec žádnou knihovnu nenačítá. Stránka aplikace, která nese relaci uživatele, načte
potřebné balíčky a vloží je do dokumentu artefaktu. Vlastní výrazy import se
zkompilují na vyhledávání v malém registru, nikoli síťové rozlišení modulů.
Tato nepřímost je záměrná. Sandboxovaný rámec má neprůhledný origin, takže prohlížeč jeho požadavky považuje za cizí a neposílá cookie relace. Za ověřovací proxy, například Cloudflare Access, Authelia nebo oauth2-proxy, se vrátí přesměrování na přihlášení, které zásady sandboxu odmítnou a artefakt selže chybou Content Security Policy. Vložení požadavek odstraní, takže artefakty fungují stejně na notebooku i za firemní branou.
Artefakty React se kompilují a připojují v sandboxu: exportujte komponentu jako výchozí export modulu a vykreslí se. Všechny knihovny získají React ze stejného registru, takže existuje jediná instance a hooks fungují správně.
Artefakty HTML načítající knihovnu z CDN také fungují. <script> nebo <link> na
Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React či Babel se na
stejném místě nahradí vloženým sestavením, takže vložené skripty stále najdou Chart,
d3 nebo React. Knihovna mimo sadu není dostupná; vložte ji přímo.
Kvůli neprůhlednému originu skutečné localStorage, sessionStorage a
document.cookie vyhazují chyby. Sandbox poskytuje náhrady v paměti, aby artefakt běžel
dál. Obsah vydrží po dobu náhledu a nesdílí se s aplikací.
Artefakty stále spouštějí generovaný kód. Nedůvěryhodné HTML před stažením či použitím mimo náhled zkontrolujte a nevkládejte do artefaktu tajemství.
Lepší prompty
Pro hry:
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.
Pro řídicí panely:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Pro komponenty 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.
Pro SVG:
Return only one valid SVG code block with width, height, and viewBox.