Объявление: веб-артефакты ИИ

Я попробовал локально, и вот большинство encountered проблем:

  • В полноэкранном режиме иногда панель Escape перекрывает контент, из-за чего невозможно с ним взаимодействовать.
  • Иногда «Run Artifacts» не появляется сразу, но всё же возникает, например, при наведении на иконки поста (кажется, так).
  • Был лишь один случай, когда результат не отображался. Я видел индикатор, но дальше ничего не происходило.

В целом, всё работает очень хорошо. :+1:

Вот некоторые из демо.
Получить правильное демо не так-то просто. Как обычно, чем детальнее промпт, тем лучше.
Иногда требуется дополнительная точность. Не всегда включаются все ресурсы, отсутствует адаптивность или требуется код для ожидания загрузки страницы. Кроме того, использование внешних библиотек повышает вероятность сбоя.

Мне очень понравилось пользоваться этой функцией. :smile:

Промпт (симуляция движения снаряда)

Создайте страницу для симуляции движения снаряда. Страница должна:

  1. Позволять пользователям вводить начальную скорость, угол и высоту снаряда.
  2. Отображать живую анимацию траектории снаряда.
  3. Включать рассчитанные значения времени полёта, максимальной высоты и дальности.
  4. Использовать ползунки для изменения входных параметров в реальном времени.
  5. Включать кнопку «Сброс» для начала заново.
Видео


Промпт (игра с падающими эмодзи)

Создайте страницу, где пользователи выбирают своё настроение, и эмодзи начинают падать с экрана. Страница должна:

  1. Предоставлять варианты настроения, такие как «Счастливый», «Злой» или «Пицца».
  2. Заставлять эмодзи, например :smile:, :angry: или :pizza:, бесконечно падать сверху экрана.
  3. Позволять пользователям кликать по эмодзи, чтобы «собирать» их со смешным звуковым эффектом.
  4. Включать забавный счётчик, например «Собрано долек пиццы: 27».
  5. Использовать HTML, CSS и JavaScript для анимированного веселья.
Видео


Промпт (простой визуализатор Солнечной системы)

Создайте страницу для визуализации Солнечной системы. Страница должна:

  1. Отображать уменьшенную, анимированную и детализированную модель Солнечной системы с орбитами планет.
  2. Позволять пользователям кликать на планету, чтобы увидеть информацию, такую как размер, расстояние от Солнца и период обращения.
  3. Позволять пользователям приближать и отдалять изображение.
  4. Включать ползунок для ускорения или замедления орбитального движения.
  5. Использовать HTML, CSS и JavaScript для интерактивности и анимации.
  6. Убедиться, что контейнер использует 100% ширины и высоты.
Видео


Промпт (песочница CSS-анимаций)

Создайте страницу, где пользователи могут экспериментировать с CSS-анимациями и переходами. Страница должна:

  1. Отображать различные элементы (например, кнопки, div), которые пользователи могут анимировать с помощью CSS.
  2. Позволять пользователям выбирать из списка свойств анимации (например, transform, opacity, translate, rotate).
  3. Предоставлять ползунки для настройки длительности, функции времени и задержки анимаций.
  4. Позволять пользователям просматривать анимации в реальном времени и видеть, как изменения влияют на анимацию.
  5. Использовать JavaScript для динамического обновления свойств CSS и HTML/CSS для стилизации.
Видео


Промпт (интерактивная панель данных)

Создайте страницу для визуализации панели данных с интерактивными графиками. Страница должна:

  1. Отображать несколько графиков, таких как столбчатая диаграмма, линейный график и круговая диаграмма, каждый из которых представляет различные наборы данных (например, продажи, население, погодные данные).
  2. Позволять пользователям фильтровать данные по диапазону времени, категории или местоположению с помощью выпадающих меню или ползунков.
  3. Обновлять графики в реальном времени при взаимодействии пользователей с фильтрами.
  4. Отображать описательную статистику (например, среднее, медиану, моду) для выбранных данных.
  5. Использовать Chart.js или D3.js для отрисовки графиков и JavaScript для обработки фильтрации данных и статистических расчётов.
Видео

3 лайка