Я попробовал локально, и вот большинство encountered проблем:
В полноэкранном режиме иногда панель Escape перекрывает контент, из-за чего невозможно с ним взаимодействовать.
Иногда «Run Artifacts» не появляется сразу, но всё же возникает, например, при наведении на иконки поста (кажется, так).
Был лишь один случай, когда результат не отображался. Я видел индикатор, но дальше ничего не происходило.
В целом, всё работает очень хорошо.
Вот некоторые из демо.
Получить правильное демо не так-то просто. Как обычно, чем детальнее промпт, тем лучше.
Иногда требуется дополнительная точность. Не всегда включаются все ресурсы, отсутствует адаптивность или требуется код для ожидания загрузки страницы. Кроме того, использование внешних библиотек повышает вероятность сбоя.
Мне очень понравилось пользоваться этой функцией.
Промпт (симуляция движения снаряда)
Создайте страницу для симуляции движения снаряда. Страница должна:
Позволять пользователям вводить начальную скорость, угол и высоту снаряда.
Отображать живую анимацию траектории снаряда.
Включать рассчитанные значения времени полёта, максимальной высоты и дальности.
Использовать ползунки для изменения входных параметров в реальном времени.
Включать кнопку «Сброс» для начала заново.
Видео
Промпт (игра с падающими эмодзи)
Создайте страницу, где пользователи выбирают своё настроение, и эмодзи начинают падать с экрана. Страница должна:
Предоставлять варианты настроения, такие как «Счастливый», «Злой» или «Пицца».
Заставлять эмодзи, например , или , бесконечно падать сверху экрана.
Позволять пользователям кликать по эмодзи, чтобы «собирать» их со смешным звуковым эффектом.
Включать забавный счётчик, например «Собрано долек пиццы: 27».
Использовать HTML, CSS и JavaScript для анимированного веселья.
Видео
Промпт (простой визуализатор Солнечной системы)
Создайте страницу для визуализации Солнечной системы. Страница должна:
Отображать уменьшенную, анимированную и детализированную модель Солнечной системы с орбитами планет.
Позволять пользователям кликать на планету, чтобы увидеть информацию, такую как размер, расстояние от Солнца и период обращения.
Позволять пользователям приближать и отдалять изображение.
Включать ползунок для ускорения или замедления орбитального движения.
Использовать HTML, CSS и JavaScript для интерактивности и анимации.
Убедиться, что контейнер использует 100% ширины и высоты.
Видео
Промпт (песочница CSS-анимаций)
Создайте страницу, где пользователи могут экспериментировать с CSS-анимациями и переходами. Страница должна:
Отображать различные элементы (например, кнопки, div), которые пользователи могут анимировать с помощью CSS.
Позволять пользователям выбирать из списка свойств анимации (например, transform, opacity, translate, rotate).
Предоставлять ползунки для настройки длительности, функции времени и задержки анимаций.
Позволять пользователям просматривать анимации в реальном времени и видеть, как изменения влияют на анимацию.
Использовать JavaScript для динамического обновления свойств CSS и HTML/CSS для стилизации.
Видео
Промпт (интерактивная панель данных)
Создайте страницу для визуализации панели данных с интерактивными графиками. Страница должна:
Отображать несколько графиков, таких как столбчатая диаграмма, линейный график и круговая диаграмма, каждый из которых представляет различные наборы данных (например, продажи, население, погодные данные).
Позволять пользователям фильтровать данные по диапазону времени, категории или местоположению с помощью выпадающих меню или ползунков.
Обновлять графики в реальном времени при взаимодействии пользователей с фильтрами.
Отображать описательную статистику (например, среднее, медиану, моду) для выбранных данных.
Использовать Chart.js или D3.js для отрисовки графиков и JavaScript для обработки фильтрации данных и статистических расчётов.
Сработает ли это с общедоступными (уровень доверия 0) запросами в Data Explorer, доступными через API? Если да, то это может дать потенциал для создания весёлых и динамичных визуализаций активности форума.
У меня не было времени проверить это самостоятельно, но, возможно, кто-то захочет попробовать в этом сценарии
Вы можете подключить это с помощью пользовательского инструмента, но это потребует значительной координации. Я бы, вероятно, просто настроил пользовательский инструмент так, чтобы он каким-то образом отображал диаграмму. Для этого случая мы можем поэкспериментировать с этой идеей.
Впрочем, вы определённо можете делиться визуализациями — я покажу вам, как это сделать.
Да, это верно не только для веб-артефактов ИИ, но и при использовании LLM для создания HTML, JavaScript и CSS.
Если можно вести разработку на чистом/ванильном HTML, JavaScript и CSS, то есть без включения внешних библиотек, шансы получить рабочий и свободный от ошибок код резко возрастают. Кроме того, чем менее известна библиотека, тем меньше данных для обучения получил модель, и тем выше вероятность, что модель начнет галлюцинировать, чтобы завершить ответ, что приведет к большему количеству ошибок.
Однако сегодня всё странно. Я снова протестировал: каждый запрос завершался неудачей.
Статус OpenAI зелёный. Пока я спал, ничего не изменилось, поэтому непонятно, что происходит.
Кнопка «Run Test» также выдаёт ошибку 500, а в логах видно тайм-аут.
Кстати, с точки зрения пользователя, интересно, было бы ли уместно отображать сообщение об ошибке (вместо пустого поля) и предоставить возможность повторить попытку.
Как постоянный участник форума OpenAI, я наблюдаю взлёты и падения моделей. За последние две недели количество сообщений о проблемах возросло, но эти проблемы напоминают те, что возникали перед крупным релизом или выходом новых моделей.
Очень простой вопрос… как поделиться артефактом на форуме? Достаточно просто скопировать и вставить что-то вроде <div class="ai-artifact" data-ai-artifact-id="XX"></div>? В таком случае его увидит и сможет использовать только я.
Исходя из моего небольшого опыта работы с Claude 3.5 Sonnet: я перебираю варианты с Web Creator и добиваюсь некоторого прогресса, но в итоге он начинает забывать контекст, и мне приходится начинать всё сначала в новой сессии. Мне кажется, что вручную править код проще, чем тратить промпты и рисковать потерей контекста.
Могу ли я редактировать сгенерированный код?
Могу ли я начать новый контекст с существующим артефактом? (Я спросил об этом Web Creator, и он ответил, что нет.)
Да, Марк, это сложная задача. Я работаю над переделкой внутренней части артефактов:
Нестабильные правки тоже меня бесили до предела. Пока ещё не решил, сколько параметров предоставить.
Я перенёс систему на подход, похожий на Architect с использованием Aider: инструмент вызывает LLM для выполнения обновлений, поэтому это происходит гораздо надёжнее, и проблема расхождений больше не возникает. Однако у новой системы есть недостаток — она может потреблять больше токенов из-за неизбежного дублирования.
Возможно, я разрешу начинать с существующего артефакта (клонировать его), если артефакт был опубликован публично. Мне нужно подумать, как это реализовать, при этом необходимо быть особенно осторожным в вопросах безопасности.
Обычно при работе с Web Creator он пишет что-то вроде: «Я обновлю артефакт новой функцией», затем генерирует блоки HTML, CSS и JavaScript и показывает обновлённый артефакт, чтобы я мог запустить его через «Run Artifact».
Сегодня он неизменно пишет: «Я обновлю артефакт», генерирует блоки кода, но затем удаляет и код, и артефакт (если он вообще был создан). В итоге остаётся только фраза «Я обновлю артефакт». Даже если я отредактирую сообщение создателя, больше ничего нет.
Я ничего не обновлял и не менял. В консоли ошибок нет. Используется Claude 3.5 Sonnet.
Обновились до последней версии? Я только что завершил крупный рефакторинг системы: появилось множество новых настроек и инструмент для чтения артефактов.
или 
, бесконечно падать сверху экрана.
