Artefacten
Artefacten veranderen door modellen gegenereerde bestanden en codeblokken in een zijpaneel met voorbeeldweergave. Ze zijn nuttig voor spellen, diagrammen, HTML-demo's, JSON-payloads, scripts en gegenereerde middelen.
Artefacten verschillen van Work. Een artefact wordt gemaakt vanuit een normaal chatantwoord en in de browser weergegeven; het geeft het model geen duurzaam bestandssysteem of shell. Een Work-taak bewaart projectbestanden en gespreksgeschiedenis duurzaam en voert modeltools uit in een Docker-container die tot de taak is beperkt.
Ondersteunde invoer
Libre WebUI herkent:
- Expliciete
<artifact>-blokken - Omheinde codeblokken met talen die geschikt zijn voor artefacten
- Zelfstandige volledige HTML-documenten
- HTML-bundels met meerdere bestanden, opgebouwd uit blokken voor
index.html, CSS en JavaScript - JSX- en TSX-componenten
- Mermaid-diagrammen
- SVG-blokken
- JSON-blokken
- Code- en tekstfragmenten
Soorten artefacten
| Type | Gedrag van het voorbeeld |
|---|---|
| HTML | Voorbeeld in een sandbox-iframe met scripts en interactie ingeschakeld |
| React | JSX of TSX wordt gecompileerd en gekoppeld, met Tailwind en de bibliotheekset |
| Mermaid | Diagram wordt in de sandbox getekend en volgt het toepassingsthema |
| SVG | Ingesloten visueel voorbeeld |
| JSON | Opgemaakte codeweergave |
| Code/tekst | Codeweergave met syntaxismarkering |
HTML-bundels met meerdere bestanden
Wanneer een model verwante HTML-, CSS- en JavaScript-blokken retourneert, probeert Libre WebUI ze samen te voegen tot een uitvoerbaar HTML-artefact. Lokale verwijzingen naar stylesheets en scripts worden verwijderd en de bijbehorende gegenereerde CSS en JavaScript worden ingesloten.
Vraag het model voor het betrouwbaarste resultaat om één zelfstandig HTML-bestand:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Bediening van de viewer
Artefacten worden geopend in een aanpasbaar zijpaneel met:
- Tabbladen Voorbeeld en Code
- Kopiëren
- Downloaden
- Openen in een nieuw venster
- Waar beschikbaar bediening voor vergroten/volledig scherm
Als een interactief artefact toetsenbordinvoer nodig heeft, klik dan eerst in het voorbeeld of open het in een nieuw venster.
Gedrag van de sandbox
HTML-artefacten laden via GET /api/artifacts/sandbox, een klein backenddocument dat het voorbeeld host. Deze omweg is belangrijk: een srcdoc-frame erft het Content Security Policy van de insluitende pagina en het toepassingsbeleid verbiedt inline scripts, waardoor zo weergegeven artefacten in productie worden geblokkeerd. De sandboxhost wordt in plaats daarvan via het netwerk opgehaald, heeft een eigen beleid en het gemaakte voorbeeldframe erft dat beleid.
Het artefactbeleid staat inline scripts en eval toe, omdat een artefact daaruit bestaat, en benoemt geen host behalve die van de toepassing zelf. Een artefact kan weergeven en rekenen; het kan niets van een CDN ophalen en kan geen externe dienst aanroepen.
Het frame staat scripts, formulieren, modals, pop-ups, pointer lock en downloads toe, maar nooit allow-same-origin. Daardoor draait een artefact op een ondoorzichtige oorsprong zonder toegang tot cookies, opslag of DOM van de toepassing. Het functiebeleid staat toegang tot het klembord, volledig scherm en gamepadinvoer toe.
De artefactruntime
Gegenereerde artefacten gaan ervan uit dat bibliotheken beschikbaar zijn. De toepassing levert lokaal wat ze vragen in plaats van toegang tot een CDN toe te staan:
| Beschikbaar voor artefacten | Hoe het wordt bereikt |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX en TSX | in het frame gecompileerd door Babel |
| Tailwind-hulpprogramma's | uit de opmaak gegenereerd, geen build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js met bediening, loaders, omgevingen en meer add-ons | THREE.OrbitControls, of via import |
| Lucide-pictogrammen, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | mermaid-artefacten, of via import |
Een artefact dat een bibliotheek buiten deze set probeert te gebruiken, krijgt een melding met de naam ervan in plaats van een leeg voorbeeld en een beleidsfout in de console.
Het frame haalt niets hiervan zelf op. De toepassingspagina, die de gebruikerssessie bevat, laadt de benodigde bundels en sluit ze in het artefactdocument in. De eigen import-instructies van het artefact worden gecompileerd tot opzoekbewerkingen in een klein register in plaats van als netwerkmodule-resolutie te blijven staan.
Die omweg is niet toevallig. Een frame in een sandbox heeft een ondoorzichtige oorsprong, waardoor de browser de verzoeken als cross-site behandelt en geen sessiecookie verzendt. Achter een verificatieproxy zoals Cloudflare Access, Authelia of oauth2-proxy resulteert zo'n verzoek in een omleiding naar een aanmeldpagina. Het sandboxbeleid weigert die vervolgens te laden en het artefact mislukt met een Content Security Policy-fout. Door insluiting verdwijnt het verzoek en gedragen artefacten zich hetzelfde op een laptop als achter een bedrijfsgateway.
React-artefacten worden in de sandbox gecompileerd en gekoppeld: exporteer de component als standaardexport van de module en deze wordt weergegeven. Elke bibliotheek haalt React uit hetzelfde register, zodat er één React-instantie is en hooks normaal werken.
HTML-artefacten die een bibliotheek van een CDN laden, blijven werken: een <script> of <link> die naar Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React of Babel wijst, wordt op dezelfde plaats in het document vervangen door de lokaal meegeleverde build. Zo vinden inline scripts bij uitvoering nog steeds Chart, d3 of React. Een bibliotheek buiten die set is niet beschikbaar; sluit die zelf in.
Omdat het frame een ondoorzichtige oorsprong heeft, veroorzaken echte localStorage, sessionStorage en document.cookie een fout. De sandbox levert vervangers in het geheugen, zodat een artefact dat ze gebruikt blijft werken. De inhoud blijft bestaan zolang het voorbeeld bestaat en wordt niet met de toepassing gedeeld.
Artefacten voeren nog altijd gegenereerde code uit: controleer niet-vertrouwde HTML voordat je deze buiten het voorbeeld downloadt of hergebruikt en plaats geen geheimen in een artefact.
Betere prompts
Voor spellen:
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.
Voor dashboards:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Voor React-componenten:
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.
Voor SVG:
Return only one valid SVG code block with width, height, and viewBox.