Artefakty
Artefakty zmieniają pliki i bloki kodu wygenerowane przez model w panel boczny z podglądem. Są przydatne do gier, diagramów, demonstracji HTML, ładunków JSON, skryptów i generowanych zasobów.
Artefakty różnią się od Work. Artefakt powstaje ze zwykłej odpowiedzi czatu i jest renderowany w przeglądarce; nie daje modelowi trwałego systemu plików ani powłoki. Zadanie Work zachowuje trwałe pliki projektu i historię rozmowy oraz wykonuje narzędzia w kontenerze Docker przypisanym do zadania.
Obsługiwane dane wejściowe
Libre WebUI wykrywa:
- Jawne bloki
<artifact> - Ogrodzone bloki kodu w językach odpowiednich dla artefaktów
- Samodzielne pełne dokumenty HTML
- Wieloplikowe pakiety HTML z bloków
index.html, CSS i JavaScript - Komponenty JSX i TSX
- Diagramy Mermaid
- Bloki SVG
- Bloki JSON
- Fragmenty kodu i tekstu
Typy artefaktów
| Typ | Zachowanie podglądu |
|---|---|
| HTML | Podgląd w iframe w piaskownicy z włączonymi skryptami i interakcją |
| React | Kompilowany i montowany JSX lub TSX z Tailwind i zestawem bibliotek |
| Mermaid | Diagram rysowany w piaskownicy zgodnie z motywem aplikacji |
| SVG | Wbudowany podgląd wizualny |
| JSON | Sformatowany widok kodu |
| Kod/tekst | Widok kodu z wyróżnianiem składni |
Wieloplikowe pakiety HTML
Gdy model zwraca powiązane bloki HTML, CSS i JavaScript, Libre WebUI próbuje scalić je w uruchamialny artefakt HTML. Usuwa lokalne odwołania do arkuszy i skryptów oraz osadza pasujące wygenerowane CSS i JavaScript.
Najpewniejszy wynik daje prośba o jeden samodzielny plik HTML:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Sterowanie przeglądarką
Artefakty otwierają się w panelu bocznym o zmiennym rozmiarze z:
- Kartami Podgląd i Kod
- Kopiowaniem
- Pobieraniem
- Otwieraniem w nowym oknie
- Sterowaniem rozszerzeniem/pełnym ekranem, gdy dostępne
Jeśli interaktywny artefakt potrzebuje klawiatury, najpierw kliknij podgląd lub otwórz go w nowym oknie.
Zachowanie piaskownicy
Artefakty HTML ładują się przez GET /api/artifacts/sandbox, mały dokument zaplecza hostujący podgląd. To pośrednictwo ma znaczenie: ramka srcdoc dziedziczy Content Security Policy elementu osadzającego, a polityka aplikacji zabrania skryptów wbudowanych, więc taki artefakt zostałby zablokowany w produkcji. Host piaskownicy jest pobierany przez sieć, ma własną politykę i przekazuje ją utworzonej ramce.
Polityka artefaktów zezwala na skrypty wbudowane i eval, ponieważ z nich składa się artefakt, i nie wskazuje żadnego hosta poza własnym hostem aplikacji. Artefakt może renderować i obliczać, ale nie pobiera z CDN ani nie kontaktuje się na zewnątrz.
Ramka zezwala na skrypty, formularze, okna modalne, wyskakujące okna, blokadę wskaźnika i pobieranie, ale nigdy allow-same-origin. Artefakt działa więc w nieprzezroczystym pochodzeniu bez dostępu do ciasteczek, pamięci lub DOM aplikacji. Polityka funkcji dopuszcza schowek, pełny ekran i gamepad.
Środowisko uruchomieniowe artefaktów
Generowane artefakty zakładają dostępność bibliotek. Zamiast pozwalać im sięgać do CDN, aplikacja dostarcza je lokalnie:
| Dostępne dla artefaktów | Sposób dostępu |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX i TSX | kompilowane w ramce przez Babel |
| Narzędzia Tailwind | generowane z kodu, bez kompilacji |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js z kontrolkami, modułami ładującymi i dodatkami | THREE.OrbitControls lub import |
| Ikony Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | artefakty mermaid lub import |
Próba użycia biblioteki spoza zestawu pokazuje komunikat z jej nazwą zamiast pustego podglądu i błędu polityki w konsoli.
Ramka niczego nie pobiera. Strona aplikacji z sesją użytkownika ładuje potrzebne pakiety i osadza je w dokumencie artefaktu, a instrukcje import są kompilowane do odwołań w małym rejestrze zamiast sieciowego rozwiązywania modułów.
To pośrednictwo jest celowe. Ramka piaskownicy ma nieprzezroczyste pochodzenie, więc przeglądarka traktuje żądania jako cross-site i nie wysyła ciasteczka sesji. Za proxy uwierzytelniającym, takim jak Cloudflare Access, Authelia lub oauth2-proxy, odpowiedzią jest przekierowanie do logowania, którego polityka piaskownicy nie załaduje; artefakt kończy się błędem Content Security Policy. Osadzenie usuwa żądanie, więc zachowanie jest takie samo na laptopie i za bramą firmową.
Artefakty React są kompilowane i montowane w piaskownicy: wyeksportuj komponent jako domyślny eksport modułu. Wszystkie biblioteki rozwiązują React z jednego rejestru, więc istnieje jedna instancja i hooki działają poprawnie.
Artefakty HTML odwołujące się do CDN też działają: element <script> lub <link> wskazujący Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React albo Babel jest zastępowany lokalną kompilacją w tym samym miejscu. Skrypty nadal znajdują Chart, d3 lub React. Bibliotekę spoza zestawu trzeba osadzić samodzielnie.
Z powodu nieprzezroczystego pochodzenia prawdziwe localStorage, sessionStorage i document.cookie zgłaszają błąd. Piaskownica dostarcza zamienniki w pamięci; ich zawartość trwa tyle co podgląd i nie jest współdzielona z aplikacją.
Artefakty nadal wykonują wygenerowany kod: sprawdź niezaufany HTML przed pobraniem lub ponownym użyciem poza podglądem i nie umieszczaj w nim sekretów.
Lepsze prompty
Dla gier:
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.
Dla pulpitów:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Dla komponentów 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.
Dla SVG:
Return only one valid SVG code block with width, height, and viewBox.