Artefakter
Artefakter gör modellgenererade filer och kodblock till en förhandsvisningsbar sidopanel. De är användbara för spel, diagram, HTML-demonstrationer, JSON-data, skript och genererade resurser.
Artefakter skiljer sig från Work. En artefakt skapas från ett vanligt chattsvar och renderas i webbläsaren. Den ger inte modellen ett beständigt filsystem eller skal. En Work-uppgift behåller beständiga projektfiler och samtalshistorik och kör modellverktyg i en uppgiftsavgränsad Docker-container.
Indata som stöds
Libre WebUI identifierar:
- Uttryckliga
<artifact>-block - Avgränsade kodblock med artefaktvänliga språk
- Fristående fullständiga HTML-dokument
- HTML-paket med flera filer, skapade från block med
index.html, CSS och JavaScript - JSX- och TSX-komponenter
- Mermaid-diagram
- SVG-block
- JSON-block
- Kod- och textutdrag
Artefakttyper
| Typ | Förhandsvisning |
|---|---|
| HTML | Sandlådad iframe med skript och interaktion aktiverade |
| React | JSX eller TSX kompileras och monteras med Tailwind och bibliotek |
| Mermaid | Diagram ritas i sandlådan med programmets tema |
| SVG | Infogad visuell förhandsvisning |
| JSON | Formaterad kodvy |
| Kod/text | Kodvy med syntaxmarkering |
HTML-paket med flera filer
När en modell returnerar sammanhörande block med HTML, CSS och JavaScript försöker Libre WebUI slå ihop dem till en körbar HTML-artefakt. Lokala referenser till formatmallar och skript tas bort och motsvarande genererad CSS och JavaScript bäddas in.
För det mest tillförlitliga resultatet ber du modellen om en självständig HTML-fil:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Visningskontroller
Artefakter öppnas i en storleksändringsbar sidopanel med:
- Flikarna Preview och Code
- Kopiera
- Hämta
- Öppna i nytt fönster
- Kontroller för utökning/helskärm där de finns
Om en interaktiv artefakt behöver tangentbordsinmatning klickar du först i förhandsvisningen eller öppnar den i ett nytt fönster.
Sandlådebeteende
HTML-artefakter läses in genom GET /api/artifacts/sandbox, ett litet dokument
från backendtjänsten som fungerar som värd för förhandsvisningen. Omdirigeringen är viktig:
en srcdoc-ram ärver inbäddarens Content Security Policy, och programpolicyn
förbjuder infogade skript, så artefakter som renderas på det sättet blockeras i
produktion. Sandlådevärden hämtas i stället över nätverket och får en egen policy,
som förhandsvisningsramen den skapar ärver.
Artefaktpolicyn tillåter infogade skript och eval, eftersom det är vad en artefakt
består av, och anger ingen annan värd än programmets egen. En artefakt kan rendera
och beräkna. Den kan inte hämta från ett CDN och kan inte ringa hem.
Själva ramen tillåter skript, formulär, dialogrutor, popupfönster, pekarlås och
hämtningar, men aldrig allow-same-origin. Artefakten körs därför på ett ogenomskinligt
ursprung utan åtkomst till programmets cookies, lagring eller DOM. Dess funktionspolicy
tillåter urklippsåtkomst, helskärm och spelkontrollinmatning.
Artefaktens körtid
Genererade artefakter utgår från att bibliotek finns tillgängliga. I stället för att låta dem nå ett CDN levererar programmet de bibliotek de begär:
| Tillgängligt för artefakter | Så nås det |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX och TSX | kompileras i ramen av Babel |
| Tailwind-verktyg | genereras från märkningen, utan bygge |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js med kontroller, laddare, miljöer och fler tillägg | THREE.OrbitControls, eller via import |
| Lucide-ikoner, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | mermaid-artefakter, eller via import |
En artefakt som försöker använda ett bibliotek utanför denna uppsättning får ett meddelande som namnger biblioteket, i stället för en tom förhandsvisning och ett policyfel i konsolen.
Ramen hämtar aldrig något av biblioteken. Programsidan — som bär användarens session —
läser in de paket som behövs och bäddar in dem i artefaktdokumentet. Artefaktens egna
import-satser kompileras till uppslagningar mot ett litet register i stället för att
lämnas som nätverksbaserad modulupplösning.
Detta extra lager är avsiktligt. En sandlådad ram har ett ogenomskinligt ursprung, så webbläsaren behandlar dess förfrågningar som externa och skickar ingen sessionscookie. Bakom en autentiserande proxy — Cloudflare Access, Authelia, oauth2-proxy — returneras en omdirigering till en inloggningssida, som sandlådepolicyn sedan vägrar läsa in, och artefakten misslyckas med ett Content Security Policy-fel. Inbäddning tar bort förfrågan, så artefakter beter sig likadant på en bärbar dator och bakom en företagsgateway.
React-artefakter kompileras och monteras i sandlådan: exportera komponenten som modulens standardexport så renderas den. Varje bibliotek hämtar React från samma register, så det finns en React-instans och hooks fungerar normalt.
HTML-artefakter som läser in ett bibliotek från ett CDN fungerar fortfarande. En
<script> eller <link> som pekar på Tailwind, Chart.js, D3, Three.js, Papa Parse,
Lodash, Mermaid, React eller Babel ersätts på samma plats i dokumentet med det
medföljande bygget infogat, så infogade skript hittar Chart, d3 eller React när
de körs. Ett bibliotek utanför uppsättningen är inte tillgängligt; bädda in det i stället.
Eftersom ramen har ett ogenomskinligt ursprung orsakar riktiga localStorage,
sessionStorage och document.cookie fel. Sandlådan tillhandahåller ersättningar i
minnet så att en artefakt som använder dem fortsätter fungera. Innehållet finns kvar
så länge förhandsvisningen gör det och delas inte med programmet.
Artefakter kör fortfarande genererad kod. Granska opålitlig HTML innan den hämtas eller återanvänds utanför förhandsvisningen, och placera inte hemligheter i en artefakt.
Bättre promptar
För spel:
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.
För instrumentpaneler:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
För React-komponenter:
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.
För SVG:
Return only one valid SVG code block with width, height, and viewBox.