Синтез кода визуально подведена для анимации HTML
16 июня 2025 г.Таблица ссылок
Аннотация и 1 введение
2 Связанная работа
2.1 Синтез программы
2.2 Инструменты поддержки творчества для анимации
2.3 Денежные инструменты для проектирования
3 Формирующие шаги
4 Система логовой и 4.1 вход
4.2 Предварительная визуальная информация
4.3 Визуально обоснованный синтез кода
5 Оценки
5.1 Оценка: ремонт программы
5.2 Методология
5.3 Выводы
6 Оценка с новичками
7 Обсуждение и 7.1. Отрываны от шаблонов
7.2 Создание кода вокруг визуальных эффектов
7.3 Ограничения
8 Заключение и ссылки
4.3 Визуально обоснованный синтез кода
HTML, концепция дизайна и начальное изображение затем передаются в качестве входных данных на стадию синтеза кода. Мы используем GPT-4-V для реализации временной шкалы кода с использованием Anime.js, популярной библиотеки JavaScript для анимации [11]. В то время как мы решили использовать Anime.js, сгенерированные коды манипулировали элементами через их преобразования (положение, масштаб, вращение), кривые смягчения и ключевые кадры, которые являются абстракциями, которые обобщаются во многих библиотеках, относящихся к созданию кода, (например, CSS). Это была подсказка, которую мы использовали для создания анимации.
Implement an anime . js timeline that animates this image,
which is provided in image and HTML form below.
< HTML >
Here is a suggested concept for the animated logo :
< DESIGN CONCEPT >
Return code in the following format .
''' javascript
timeline
. add ({{
// Return elements to their original positions
// Make sure to use from - to format
// Use -512 px and 512 px to bring elements in from offscreen.
}}' ' '
Затем этот график анимации был выполнен с помощью Selenium, программного обеспечения для автоматизации браузеров, которое автоматически управляет Chrome Browser.
4.3.1 Визуально обоснованный ремонт программы.Необходимой стадией после синтеза программы является ремонт программы. Код, сгенерированный AI, несовершенен и подвержен проблемам с компиляцией и непреднамеренными побочными эффектами. Кроме того, поскольку наш подход генерирует анимацию для каждого элемента, несколько анимаций должны компилировать и выполнять должным образом. Это увеличивает вероятность того, что в финальной анимации будет как минимум один пункт неудачи. Чтобы предотвратить эти ошибки, мы вводим механизм для визуального ремонта программы, чтобы исправить «визуальные ошибки», когда элементы не возвращаются в свои исходные позиции после анимации. Мы обнаружили эти ошибки, вычислив различия между ограничивающими коробками между последним кадром в нашей временной шкале и целевой макетой. В частности, мы проверили правильность в левой, верхней, ширине, высоте и непрозрачности. Это позволило нам прямо проверить проблемы в положении, масштабе и непрозрачности и косвенно вращение.
Далее мы обрабатывали исправление ошибок в слое. Входными данными к этому шагу были: элемент, который был обнаружен, имел проблему (его идентификатор элемента), код анимации и два изображения, представляющие элемент в своем целевом макете и где он фактически закончился в последнем кадре. Затем GPT-4-V было предложено вернуть изолированный фрагмент кода, описывающий проблему и исправленное решение кода. Этот фрагмент кода был затем объединен в исходный код, используя еще один вызов GPT-4-V. Мы проверили ограничивающие коробки с изображениями и текстовыми элементами в слое. Это уменьшило объем информации, которую LLM должен был обрабатывать, и позволило ей легче визуально анализировать разницу между двумя изображениями. После того, как исправления ошибки были завершены, мы сгенерировали окончательный вывод логовой: HTML -страница с кодом JavaScript, написанной с Anime.js. Обзор входов и выходов этого этапа показан на рисунке 4.
4.3.2 Интерактивное редактированиеПолем Логовая-это быстрого генеративного подхода. В операторах есть много мест, где могут измениться нормы дизайна для разных форматов. Например, продолжительность анимации, уровень детализации, описанный концепцией дизайна, и различные виды групп, которые могут быть выполнены в рамках макета (например, группа по близости, группа по визуальному сходству, группе по областям холста), являются свободными переменными, которые могут рассматриваться как контроль высокого уровня. Чтобы изучить, как пользователи взаимодействуют с этими высокоуровневыми элементами управления, мы также предоставляем пользователям возможность интерактивного итерации на этих автоматически сгенерированных логотипах. Интерактивное редактирование раскрывает простую подсказку для пользователей, которая позволяет им описать, как они хотят, чтобы анимация изменилась. Подобно стадии визуальной отладки, GPT-4-V преобразует это запрошенное изменение (на этот раз предоставленное пользователем) в изолированную часть кода, которая объединяется обратно в исходный график. Преимущество наличия предыдущей версии анимационного кода для объединения в средства, которые пользователям не нужно сохранять, как движутся другие элементы.
Авторы:
(1) Вивиан Лю, Колумбийский университет (vivian@cs.columbia.edu);
(2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com);
(3) Li-Yi Wei, Adobe Research (lwei@adobe.com);
(4) Мэтью Фишер, Adobe Research (matfishe@adobe.com);
(5) Тимоти Ланглуа, Adobe Research (tlangloi@adobe.com);
(6) Сет Уокер, Adobe Research (swalker@adobe.com);
(7) Лидия Чилтон, Колумбийский университет (chilton@cs.columbia.edu).
Эта статья есть
Оригинал