Artefaktlar
Artefaktlar, modelin dosyalarını ve kod bloklarını yan taraftaki bir önizleme paneline dönüştürür. Oyunlar, diyagramlar, HTML demoları, JSON, betikler ve kaynaklar için kullanışlıdır.
Artefakt, Work özelliğinden farklıdır: normal bir yanıttan oluşturulur ve tarayıcıda görüntülenir; kalıcı bir dosya sistemi veya kabuk sağlamaz. Work ise proje ile konuşmayı saklar ve araçları göreve ait Docker kapsayıcısında çalıştırır.
Desteklenen girdiler
Libre WebUI şunları tanır:
- Açık
<artifact>blokları - Desteklenen dillerde çitli kod blokları
- Tam ve kendi kendine yeten HTML belgeleri
index.html, CSS ve JavaScript içeren çok dosyalı paketler- JSX ve TSX
- Mermaid
- SVG
- JSON
- Kod ve metin parçaları
Artefakt türleri
| Tür | Önizleme |
|---|---|
| HTML | Betikler ve etkileşim içeren korumalı iframe |
| React | Tailwind ve kitaplıklarla derlenmiş JSX/TSX |
| Mermaid | Uygulama temasını kullanan korumalı diyagram |
| SVG | Satır içi görsel önizleme |
| JSON | Biçimlendirilmiş kod |
| Kod/metin | Sözdizimi vurgulama |
Çok dosyalı HTML paketleri
HTML, CSS ve JavaScript birbiriyle bağlantılıysa Libre bunları birleştirmeyi dener, yerel başvuruları kaldırır ve karşılık gelen CSS/JS içeriğini gömer.
En güvenilir seçenek, kendi kendine yeten tek bir dosyadır:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Önizleme denetimleri
Boyutu değiştirilebilen panel şunları sunar:
- Önizleme ve Kod sekmeleri
- Kopyalama
- İndirme
- Yeni pencere
- Genişletme/tam ekran
Klavye girdisi göndermek için önce önizlemeye tıklayın veya ayrı pencerede açın.
Korumalı alan
HTML, küçük bir sunucu belgesi olan GET /api/artifacts/sandbox üzerinden yüklenir. Bu önemlidir: srcdoc uygulamanın Content Security Policy ayarını devralır; bu ayar satır içi betikleri yasakladığından production ortamında artefakt engellenirdi. Ayrı yüklenen ana bilgisayar, çerçevenin devraldığı kendi politikasına sahiptir.
Politika, artefaktın gerektirdiği satır içi betiklere ve eval kullanımına izin verir; dış ana bilgisayar tanımlamaz. Artefakt hesaplama yapıp sonucu gösterebilir, ancak CDN’ye veya dış kaynaklara erişemez.
Çerçeve; betiklere, formlara, iletişim kutularına, açılır pencerelere, işaretçi yakalamaya ve indirmelere izin verir, ancak allow-same-origin kullanmaz. Opak origin; cookie’lere, depolamaya veya DOM’a erişemez. Özellik politikası pano, tam ekran ve oyun kumandası girdisine izin verir.
Artefakt ortamı
Uygulama, beklenen kitaplıkları CDN yerine yerel olarak sağlar:
| Kullanılabilir | Erişim |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX ve TSX | Çerçeve içinde Babel |
| Tailwind yardımcıları | İşaretlemeden, derleme olmadan |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Denetleyiciler, yükleyiciler ve eklentilerle Three.js | THREE.OrbitControls veya import |
| Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | mermaid artefaktı veya import |
Bilinmeyen bir kitaplık, boş ekran ve CSP hatası yerine kitaplık adını içeren bir ileti gösterir.
Çerçeve hiçbir şey indirmez. Etkin oturumu bulunan uygulama sayfası paketleri yükleyip belgeye gömer; import ifadeleri kayıt defteri aramalarına derlenir.
Bunun nedeni opak origin’dir: tarayıcı bunu siteler arası kabul eder ve oturum cookie’lerini göndermez. Cloudflare Access, Authelia veya oauth2-proxy kullanıldığında giriş yönlendirmesi gelir ve CSP bunu reddeder. Gömme işlemi isteği ortadan kaldırır ve her ortamda aynı davranışı sağlar.
React derlenir ve bağlanır: bileşeni varsayılan dışa aktarım olarak verin. Tüm kitaplıklar tek bir React örneği kullanır; bu nedenle hook’lar çalışır.
CDN bağlantıları içeren HTML de çalışır: Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React veya Babel için <script> ya da <link>, aynı konumdaki gömülü derlemeyle değiştirilir; betikler Chart, d3 ve React adlarını bulur. Diğer kaynakları kendiniz gömün.
Gerçek localStorage, sessionStorage ve document.cookie kullanımı hata oluşturur. Korumalı alan, önizleme süresince bellekte kalan ve uygulamayla paylaşılmayan ikameler sağlar.
Artefaktlar üretilen kodu çalıştırır: güvenilmeyen HTML’yi önizleme dışında inceleyin ve gizli değer eklemeyin.
Daha iyi istemler
Oyunlar için:
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.
Panolar için:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
React için:
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 için:
Return only one valid SVG code block with width, height, and viewBox.