Перейти к основному содержимому

Что такое артефакты и как их использовать в Open WebUI?

Артефакты в Open WebUI — это инновационная функция, вдохновленная артефактами Claude.AI, которая позволяет взаимодействовать с важным и автономным контентом, созданным LLM, в рамках чата. Они позволяют просматривать, изменять, дорабатывать или ссылаться на значительные части контента отдельно от основной беседы, упрощая работу со сложными результатами и гарантируя возможность вернуться к важной информации позже.

В каких случаях Open WebUI использует артефакты?​

Open WebUI создает артефакт, если созданный контент соответствует определенным критериям, адаптированным для нашей платформы:

  1. Рендеруемость: Чтобы быть отображенным как артефакт, контент должен быть в формате, который Open WebUI поддерживает для рендеринга. Это включает:
  • Одностраничные HTML-сайты
  • Изображения в формате SVG (Scalable Vector Graphics)
  • Полные веб-страницы, включающие HTML, JavaScript и CSS в одном артефакте. Обратите внимание, что HTML обязателен при создании полной веб-страницы.
  • Визуализации ThreeJS и другие библиотеки визуализации JavaScript, такие как D3.js.

Другие типы контента, такие как документы (Markdown или обычный текст), фрагменты кода и компоненты React, не отображаются как артефакты в Open WebUI.

Как модель Open WebUI создает артефакты?​

Чтобы использовать артефакты в Open WebUI, модель должна предоставить контент, который запускает процесс рендеринга для создания артефакта. Это включает генерацию валидного HTML, SVG-кода или других поддерживаемых форматов для отображения артефакта. Когда созданный контент соответствует вышеупомянутым критериям, Open WebUI отобразит его как интерактивный артефакт.

Как использовать артефакты в Open WebUI?​

Когда Open WebUI создает артефакт, вы увидите контент, отображаемый в выделенном окне артефактов справа от основного чата. Вот как взаимодействовать с артефактами:

  • Редактирование и итерация: Попросите LLM в чате отредактировать или доработать контент, и эти обновления отобразятся непосредственно в окне артефакта. Вы можете переключаться между версиями, используя селектор версий в левом нижнем углу артефакта. Каждое редактирование создает новую версию, что позволяет отслеживать изменения с помощью селектора версий.
  • Обновления: Open WebUI может обновить существующий артефакт на основе ваших сообщений. Окно артефакта будет отображать последний контент.
  • Действия: Доступ к дополнительным действиям для артефакта, таким как копирование контента или открытие артефакта на полный экран, находится в правом нижнем углу артефакта.

Редактирование артефактов​

  1. Целевые обновления: Опишите, что вы хотите изменить и где. Например:
  • "Измените цвет столбца в диаграмме с синего на красный."
  • "Обновите заголовок изображения SVG на Новый заголовок."
  1. Полное переписывание: Запросите значительные изменения, затрагивающие большую часть контента, для его существенной переработки или обновления нескольких разделов. Например:
  • "Перепишите этот одностраничный HTML-сайт, чтобы он стал посадочной страницей."
  • "Переработайте этот SVG так, чтобы он был анимирован с использованием ThreeJS."

Лучшие практики:

  • Будьте конкретны, указывая, какую часть артефакта вы хотите изменить.
  • Ссылайтесь на уникальный идентифицирующий текст вокруг желаемого изменения для целевых обновлений.
  • Учитывайте, подходит ли небольшое обновление или полное переписывание для ваших нужд.

Сферы применения​

Артефакты в Open WebUI позволяют различным командам быстро и эффективно создавать качественные рабочие продукты. Вот несколько примеров, адаптированных для нашей платформы:

  • Дизайнеры:
    • Создание интерактивной графики SVG для UI/UX-дизайна.
    • Разработка одностраничных сайтов HTML или посадочных страниц.
  • Разработчики: Создание простых прототипов HTML или генерация значков SVG для проектов.
  • Маркетологи:
    • Разработка посадочных страниц кампании с метриками производительности.
    • Создание графики SVG для рекламных креативов или постов в социальных сетях.

Примеры проектов, которые можно создать с использованием артефактов Open WebUI​

Артефакты в Open WebUI позволяют различным командам и отдельным лицам быстро и эффективно создавать качественные рабочие продукты. Вот несколько примеров, адаптированных для нашей платформы, демонстрирующих универсальность артефактов и вдохновляющих на исследование их потенциала:

  1. Интерактивные визуализации
  • Используемые компоненты: ThreeJS, D3.js и SVG
  • Преимущества: Создание увлекательных историй данных с использованием интерактивных визуализаций. Артефакты Open WebUI позволяют переключаться между версиями, упрощая тестирование различных подходов к визуализации и отслеживание изменений.

Пример проекта: Постройте интерактивную линейную диаграмму с использованием ThreeJS для визуализации цен акций со временем. Обновляйте цвета и шкалы диаграммы в отдельных версиях, чтобы сравнить различные стратегии визуализации.

  1. Одностраничные веб-приложения
  • Используемые компоненты: HTML, CSS и JavaScript
  • Преимущества: Разработка одностраничных веб-приложений непосредственно в Open WebUI. Редактируйте и итерационно изменяйте контент с помощью целевых обновлений и полного переписывания.

Пример проекта: Создайте приложение со списком задач с пользовательским интерфейсом, выполненным с использованием HTML и CSS. Используйте JavaScript для добавления интерактивной функциональности. Обновите макет и UI/UX приложения с помощью целевых обновлений и полных переработок.

  1. Анимированная графика SVG
  • Используемые компоненты: SVG и ThreeJS
  • Преимущества: Создавайте привлекательную анимированную графику SVG для маркетинговых кампаний, социальных сетей или веб-дизайна. Артефакты Open WebUI позволяют редактировать и дорабатывать графику в одном окне.

Пример проекта: Разработайте анимированный логотип SVG для бренда компании. Используйте ThreeJS для добавления эффектов анимации, а также целевые обновления Open WebUI для улучшения цвета и дизайна логотипа.

  1. Прототипы веб-страниц
  • Используемые компоненты: HTML, CSS и JavaScript
  • Преимущества: Создавайте и тестируйте прототипы веб-страниц непосредственно в Open WebUI. Переключайтесь между версиями, чтобы сравнивать разные подходы к дизайну и совершенствовать прототип.

Пример проекта: Разработайте прототип нового веб-сайта электронной коммерции, используя HTML, CSS и JavaScript. Используйте целевые обновления Open WebUI для улучшения навигации, макета и UI/UX.

  1. Интерактивное повествование
  • Используемые компоненты: HTML, CSS и JavaScript
  • Преимущества: Создавайте интерактивные истории с эффектами прокрутки, анимацией и другими интерактивными элементами. Артефакты Open WebUI позволяют дорабатывать истории и тестировать различные версии.

Пример проекта: Постройте интерактивную историю об истории компании, используя эффекты прокрутки и анимации, чтобы увлечь читателя. Используйте целевые обновления для улучшения повествования, а также селектор версий Open WebUI для тестирования различных вариантов.