Artifacts
Τα artifacts μετατρέπουν αρχεία και code blocks του μοντέλου σε πλαϊνό panel με preview. Χρησιμεύουν για παιχνίδια, διαγράμματα, HTML demos, JSON, scripts και generated assets.
Διαφέρουν από Work: δημιουργούνται από απάντηση chat και αποδίδονται στον browser, χωρίς μόνιμο filesystem ή shell. Το Work κρατά project files και ιστορικό και εκτελεί εργαλεία σε task-scoped Docker container.
Υποστηριζόμενες είσοδοι
- Ρητά blocks
<artifact> - Fenced code blocks σε κατάλληλες γλώσσες
- Πλήρη αυτόνομα HTML
- Bundles
index.html, CSS και JavaScript - JSX/TSX, Mermaid, SVG, JSON, κώδικας και κείμενο
Τύποι artifact
| Τύπος | Preview |
|---|---|
| HTML | Sandboxed iframe με scripts και interaction |
| React | Compiled/mounted JSX ή TSX με Tailwind και libraries |
| Mermaid | Διάγραμμα στο sandbox με θέμα εφαρμογής |
| SVG | Inline οπτικό preview |
| JSON | Μορφοποιημένος κώδικας |
| Code/text | Syntax highlighting |
Bundles πολλών αρχείων
Όταν επιστραφούν σχετικά HTML/CSS/JS, το Libre προσπαθεί να τα ενώσει σε εκτελέσιμο artifact, αφαιρώντας local references και ενσωματώνοντας matching blocks.
Για αξιοπιστία ζητήστε ένα self-contained HTML:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Χειριστήρια
Το panel αλλάζει μέγεθος και έχει Preview/Code, Copy, Download, νέο παράθυρο και fullscreen όπου υπάρχει. Για πληκτρολόγιο, κάντε πρώτα click στο preview ή ανοίξτε νέο παράθυρο.
Συμπεριφορά sandbox
Το HTML φορτώνεται μέσω GET /api/artifacts/sandbox, μικρού εγγράφου backend. Ένα
srcdoc κληρονομεί Content Security Policy που απαγορεύει inline scripts στην παραγωγή.
Ο host φορτώνεται από δίκτυο με δική του πολιτική, την οποία κληρονομεί το preview.
Η πολιτική επιτρέπει inline script και eval, αλλά κανέναν host πέρα από την εφαρμογή.
Το artifact υπολογίζει, δεν καλεί CDN ή home. Το frame επιτρέπει scripts, forms, modals,
popups, pointer lock, downloads, ποτέ allow-same-origin, άρα opaque origin χωρίς
cookies, storage ή DOM. Επιτρέπονται clipboard, fullscreen και gamepad.
Runtime artifact
Η εφαρμογή παρέχει τοπικά τις αναμενόμενες βιβλιοθήκες:
| Διαθέσιμο | Πρόσβαση |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX/TSX | Babel compilation στο frame |
| Tailwind | Από markup χωρίς build |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js με controls/loaders/environments/addons | THREE.OrbitControls ή import |
| Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artifact mermaid ή import |
Βιβλιοθήκη εκτός συνόλου παράγει notice αντί κενό preview.
Το frame δεν κατεβάζει τίποτε. Η σελίδα εφαρμογής με τη συνεδρία φορτώνει bundles και
τα ενσωματώνει, ενώ τα import γίνονται lookup σε registry.
Αυτό είναι απαραίτητο: opaque origin θεωρείται cross-site και δεν στέλνει session cookie. Πίσω από Cloudflare Access, Authelia ή oauth2-proxy, redirect σε login απορρίπτεται από CSP. Η ενσωμάτωση αφαιρεί το αίτημα ώστε να λειτουργεί παντού.
React artifacts compile και mount στο sandbox: default export αποδίδεται. Όλες οι βιβλιοθήκες μοιράζονται μία React instance.
HTML με CDN επίσης λειτουργεί: <script> ή <link> για Tailwind, Chart.js, D3,
Three.js, Papa Parse, Lodash, Mermaid, React, Babel αντικαθίσταται inline στην ίδια θέση,
ώστε scripts να βρίσκουν Chart, d3, React. Άλλες βιβλιοθήκες πρέπει να ενσωματωθούν.
Λόγω opaque origin, πραγματικά localStorage, sessionStorage, document.cookie
αποτυγχάνουν. Παρέχονται in-memory substitutes για τη διάρκεια preview, όχι κοινά με την εφαρμογή.
Εξακολουθεί να εκτελείται generated code. Ελέγχετε μη έμπιστο HTML και μη βάζετε secrets.
Καλύτερα prompt
Για παιχνίδια:
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.
Για dashboards:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Για 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.
Για SVG:
Return only one valid SVG code block with width, height, and viewBox.