Artefakter
Artefakter gør modelgenererede filer og kodeblokke til et sidepanel med forhåndsvisning. De er nyttige til spil, diagrammer, HTML-demoer, JSON-payloads, scripts og genererede ressourcer.
Artefakter adskiller sig fra Work. En artefakt oprettes fra et almindeligt chatsvar og gengives i browseren. Den giver ikke modellen et vedvarende filsystem eller en shell. En Work-opgave bevarer vedvarende projektfiler og samtalehistorik og kører modelværktøjer i en opgaveafgrænset Docker-container.
Understøttede input
Libre WebUI registrerer:
- Eksplicitte
<artifact>-blokke - Afgrænsede kodeblokke med artefaktvenlige sprog
- Selvstændige, komplette HTML-dokumenter
- HTML-bundter med flere filer, dannet af
index.html-, CSS- og JavaScript-blokke - JSX- og TSX-komponenter
- Mermaid-diagrammer
- SVG-blokke
- JSON-blokke
- Kode- og tekstudsnit
Artefakttyper
| Type | Forhåndsvisning |
|---|---|
| HTML | Sandkassebaseret iframe med scripts og interaktion aktiveret |
| React | JSX eller TSX kompileres og monteres med Tailwind og biblioteker |
| Mermaid | Diagram tegnes i sandkassen med programmets tema |
| SVG | Integreret visuel forhåndsvisning |
| JSON | Formateret kodevisning |
| Kode/tekst | Kodevisning med syntaksfremhævning |
HTML-bundter med flere filer
Når en model returnerer relaterede HTML-, CSS- og JavaScript-blokke, forsøger Libre WebUI at samle dem til en kørbar HTML-artefakt. Lokale referencer til stylesheets og scripts fjernes, og matchende genereret CSS og JavaScript integreres.
Bed modellen om én selvstændig HTML-fil for det mest pålidelige resultat:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Visningskontroller
Artefakter åbnes i et sidepanel, der kan ændres i størrelse, med:
- Fanerne Preview og Code
- Kopiér
- Download
- Åbn i nyt vindue
- Kontroller til udvidelse/fuld skærm, hvor de er tilgængelige
Hvis en interaktiv artefakt kræver tastaturinput, skal du først klikke i forhåndsvisningen eller åbne den i et nyt vindue.
Sandkassens adfærd
HTML-artefakter indlæses gennem GET /api/artifacts/sandbox, et lille dokument
fra backendtjenesten, der fungerer som vært for forhåndsvisningen. Mellemlaget er
vigtigt: En srcdoc-frame arver indlejrerens Content Security Policy, og
programpolitikken forbyder inline-scripts, så artefakter, der gengives sådan,
blokeres i produktion. Sandkasseværten hentes i stedet over netværket og har sin
egen politik, som den oprettede forhåndsvisningsframe arver.
Artefaktpolitikken tillader inline-scripts og eval, fordi det er det, en artefakt
består af, og nævner ingen vært ud over programmets egen. En artefakt kan gengive og
beregne; den kan ikke hente fra et CDN og kan ikke ringe hjem.
Selve framen tillader scripts, formularer, dialogbokse, pop op-vinduer, pointer lock
og downloads, men aldrig allow-same-origin. Artefakten kører derfor fra en uigennemsigtig
origin uden adgang til programmets cookies, lager eller DOM. Dens funktionspolitik
tillader adgang til udklipsholder, fuld skærm og gamepadinput.
Artefaktens kørselstid
Genererede artefakter forventer, at biblioteker er tilgængelige. I stedet for at lade dem nå et CDN leverer programmet de biblioteker, de efterspørger:
| Tilgængeligt for artefakter | Sådan tilgås det |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX og TSX | kompileres i framen af Babel |
| Tailwind-hjælpeklasser | genereres fra markup uden build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js med kontroller, loaders, miljøer og flere tilføjelser | THREE.OrbitControls, eller via import |
| Lucide-ikoner, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | mermaid-artefakter, eller via import |
En artefakt, der forsøger at bruge et bibliotek uden for sættet, får en meddelelse, der navngiver det, i stedet for en tom forhåndsvisning og en politikfejl i konsollen.
Framen henter aldrig nogen af bibliotekerne. Programsiden — som har brugerens session —
indlæser de bundles, den skal bruge, og integrerer dem i artefaktdokumentet. Artefaktens
egne import-udtryk kompileres til opslag i et lille register i stedet for at blive
stående som netværksbaseret modulopløsning.
Dette mellemlag er bevidst. En sandkassebaseret frame har en uigennemsigtig origin, så browseren behandler dens anmodninger som cross-site og sender ingen sessionscookie. Bag en godkendelsesproxy — Cloudflare Access, Authelia, oauth2-proxy — returneres en omdirigering til en login-side, som sandkassepolitikken derefter nægter at indlæse, og artefakten mislykkes med en Content Security Policy-fejl. Integrering fjerner anmodningen, så artefakter fungerer ens på en bærbar computer og bag en virksomhedsgateway.
React-artefakter kompileres og monteres i sandkassen: Eksportér komponenten som modulets standardeksport, så gengives den. Alle biblioteker henter React fra samme register, så der er én React-instans, og hooks fungerer normalt.
HTML-artefakter, der indlæser et bibliotek fra et CDN, fungerer stadig. Et <script>
eller <link>, der peger på Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash,
Mermaid, React eller Babel, erstattes med den medfølgende build inline på samme sted i
dokumentet, så inline-scripts stadig finder Chart, d3 eller React, når de kører.
Et bibliotek uden for sættet er ikke tilgængeligt; integrér det i stedet.
Da framen har en uigennemsigtig origin, giver rigtig localStorage, sessionStorage
og document.cookie fejl. Sandkassen leverer erstatninger i hukommelsen, så en
artefakt, der bruger dem, fortsætter med at køre. Indholdet holder lige så længe som
forhåndsvisningen og deles ikke med programmet.
Artefakter kører stadig genereret kode. Gennemgå HTML, du ikke har tillid til, før du downloader eller genbruger det uden for forhåndsvisningen, og læg ikke hemmeligheder i en artefakt.
Bedre prompter
Til spil:
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.
Til dashboards:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Til 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.
Til SVG:
Return only one valid SVG code block with width, height, and viewBox.