Артефакты
Артефакты превращают файлы и блоки кода модели в боковую панель предпросмотра. Они полезны для игр, диаграмм, HTML-демо, JSON, скриптов и ресурсов.
Артефакт отличается от Work: создаётся из обычного ответа и отображается в браузере, не давая постоянную файловую систему или оболочку. Work сохраняет проект и разговор и выполняет инструменты в контейнере Docker задания.
Поддерживаемый ввод
Libre WebUI распознаёт:
- Явные блоки
<artifact> - Ограждённый код подходящих языков
- Полные самостоятельные HTML-документы
- Многофайловые пакеты из
index.html, CSS и JavaScript - JSX и TSX
- Mermaid
- SVG
- JSON
- Фрагменты кода и текста
Типы артефактов
| Тип | Предпросмотр |
|---|---|
| HTML | iframe в песочнице со скриптами и взаимодействием |
| React | Компилируемый JSX/TSX с Tailwind и библиотеками |
| Mermaid | Диаграмма в песочнице с темой приложения |
| SVG | Встроенный визуальный вид |
| JSON | Форматированный код |
| Код/текст | Подсветка синтаксиса |
Многофайловые HTML-пакеты
При связанных HTML, CSS и JavaScript Libre пытается объединить их, удаляет локальные ссылки и встраивает соответствующие CSS/JS.
Самый надёжный запрос — один самодостаточный файл:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Управление просмотром
Панель изменяемого размера предлагает:
- Вкладки Предпросмотр и Код
- Копирование
- Загрузку
- Новое окно
- Разворачивание/полный экран
Для ввода с клавиатуры сначала щёлкните предпросмотр или откройте окно.
Песочница
HTML загружается через GET /api/artifacts/sandbox, небольшой документ сервера. Это важно: srcdoc наследует Content Security Policy приложения, запрещающую встроенные скрипты, поэтому в промышленной среде был бы заблокирован. Отдельно загруженный хост имеет собственную политику, которую наследует рамка.
Политика разрешает встроенные скрипты и eval, необходимые артефакту, и не указывает внешних хостов. Можно вычислять и отображать, нельзя обращаться к CDN или наружу.
Рамка разрешает скрипты, формы, модальные и всплывающие окна, захват указателя и загрузки, но не allow-same-origin; непрозрачное происхождение не имеет доступа к файлам cookie, хранилищу и DOM. Политика функций разрешает буфер обмена, полный экран и ввод с геймпада.
Среда артефактов
Приложение локально поставляет ожидаемые библиотеки вместо CDN:
| Доступно | Доступ |
|---|---|
| React, ReactDOM, Framer Motion | import ... from 'react' |
| JSX и TSX | Babel в рамке |
| Утилиты Tailwind | из разметки, без сборки |
| Recharts, Chart.js, Plotly, D3 | import ... from '<name>' |
| Three.js с контроллерами, загрузчиками и дополнениями | THREE.OrbitControls или import |
| Lucide, Lodash, MathJS, Papa Parse, Tone.js | import ... from '<name>' |
| Mermaid | артефакт mermaid или import |
Неизвестная библиотека даёт сообщение с именем вместо пустого экрана и ошибки CSP.
Рамка ничего не загружает. Страница приложения с сессией загружает пакеты и встраивает в документ; операторы import компилируются в обращения к реестру.
Причина — непрозрачное происхождение: браузер считает межсайтовый запрос и не отправляет сессионные файлы cookie. За Cloudflare Access, Authelia или oauth2-proxy приходит перенаправление на вход, которое CSP отклоняет. Встраивание устраняет запрос, обеспечивая одинаковую работу.
React компилируется и монтируется: экспортируйте компонент по умолчанию. Все библиотеки используют один экземпляр React, а хуки работают.
HTML со ссылками CDN тоже работает: <script> или <link> для Tailwind, Chart.js, D3, Three.js, Papa Parse, Lodash, Mermaid, React или Babel заменяется встроенной сборкой на том же месте, и скрипты находят Chart, d3, React. Остальное встраивайте сами.
Настоящие localStorage, sessionStorage, document.cookie бросают ошибку. Песочница даёт заменители в памяти на срок предпросмотра, не общие с приложением.
Артефакты выполняют созданный код: проверяйте недоверенный HTML вне предпросмотра и не помещайте секреты.
Улучшенные промпты
Для игр:
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.
Для 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.