Műtermékek
A modell fájljait és kódblokkjait előnézeti oldalpanelekké alakítják játékhoz, diagramhoz, HTML-demóhoz, JSON-hoz, szkripthez és assethez.
Eltérnek a Work funkciótól: chatválaszból készülnek és browserben futnak, nem adnak tartós filesystemet/shellt. Work tartós fájlokkal és task Dockerrel dolgozik.
Támogatott bemenet
<artifact> blokkok, fenced code, teljes HTML, index.html+CSS+JS bundle, JSX/TSX,
Mermaid, SVG, JSON, kód és szöveg.
Típusok
| Típus | Előnézet |
|---|---|
| HTML | Sandboxed iframe script és interakció |
| React | Fordított JSX/TSX Tailwinddel és könyvtárakkal |
| Mermaid | Diagram a sandboxban |
| SVG | Inline vizuális nézet |
| JSON | Formázott kód |
| Kód/szöveg | Syntax highlight |
Többfájlos HTML
A Libre egyesíti a kapcsolódó HTML/CSS/JS blokkokat, eltávolítja a helyi hivatkozást és inline beilleszti a generált tartalmat.
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Vezérlők
Átméretezhető panel Preview/Code, Copy, Download, új ablak és fullscreen. Billentyűzethez előbb kattintson bele.
Sandbox
A HTML a GET /api/artifacts/sandbox backenddokumentumon át töltődik. A srcdoc
örökölné az inline scriptet tiltó CSP-t; a hálózati host saját policyt ad az előnézetnek.
Inline és eval engedett, külső host nem. A frame scripts/forms/modals/popups/pointer
lock/downloads értékeket enged, de allow-same-origin-t soha, ezért nincs cookie/storage/DOM.
Clipboard, fullscreen, gamepad elérhető.
Runtime
| Könyvtár | Elérés |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX/TSX | Babel a frame-ben |
| Tailwind | Markupból build nélkül |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js controls/loaders/addons | THREE.OrbitControls vagy import |
| Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | mermaid vagy import |
Külső könyvtár notice-t kap. A frame nem tölt hálózatról; az app sessionnel betölti és
inline-olja, az import registry lookup lesz.
Opaque origin miatt cross-site kérés cookie nélkül. Cloudflare Access/Authelia/oauth2
login redirectjét CSP visszautasítaná; inline megszünteti. React default exporttal mountol
és egy instance-t használ. CDN <script>/<link> Tailwind, Chart.js, D3, Three.js,
Papa Parse, Lodash, Mermaid, React, Babel esetén inline buildre cserélődik, így Chart,
d3, React működik.
Valódi localStorage, sessionStorage, document.cookie hibázik; in-memory substitute
van az előnézet idejére. A generált kód továbbra is fut: ellenőrizze és ne tegyen bele titkot.
Jobb promptok
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.