Как превратить свой логотип PDF в анимированный веб -контент с логовой
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 Система логотики
Мы представляем Logomotion, метод, основанный на LLM, который автоматически анимирует логотипы на основе их контента. Вход - это статический документ PDF, который может состоять из слоев изображения и текста. Вывод - это HTML -страница с кодом JavaScript, которая отображает анимацию. Трубопровод имеет три шага: 1)Предварительная обработка (для визуальной осведомленности), который представляет вход в HTML и дополняет его информацией об иерархии, группах и описаниях каждого элемента, 2)Визуально обоснованная генерация кода, которое принимает предварительно обработанное представление HTML и статическое изображение логотипа и выводит код анимации JavaScript и 3)Визуально обоснованный ремонт программы, который сравнивает последний кадр анимации с целевым изображением и делает самоопределение на основе LLM, если на любом уровне есть визуальные ошибки.
4.1 Вход
Пользователь начинает с импорта их документа PDF в Illustrator. В Illustrator, используя ExtendScript, они могут экспортировать свой слоистый документ в HTML -страницу. Мы используем HTML в качестве фундаментального представления, чтобы удовлетворить сильные стороны LLM и построить текстовое представление холста. Представление HTML включает в себя высоту, ширину, Z-индекс и верхние и нижние позиции каждого элемента изображения. Текстовые элементы представлены в виде слоев изображения. Каждое слово фиксируется в виде отдельного слоя изображения, а его текстовое содержимое является подписанием ALT Text, за исключением случаев архиса (например, заголовок логотипа на рисунке 1), где каждая буква представляет собой отдельный слой изображения. Каждому элементу дается случайный уникальный идентификатор. Это представление позволяет LLM понять, какие слои составляют изображение логотипа.
Скрипт extendscript автоматически извлекал ограничивающие ящики и экспортировал каждый слой в два изображения PNG: 1) урожай вокруг ограничивающей коробки элемента дизайна и 2) увеличенная версия элемента дизайна 512 × 512, которая использовалась для GPT-4-V для подписки.
4.2 Предварительная визуальная информация
Учитывая основное HTML-представление макета логотипа, система выполняет несколько этапов предварительной обработки, чтобы добавить семантическую информацию о визуальном контенте логотипа.
4.2.1 Описания изображений.Чтобы предоставить информацию о том, что изображает каждый слой, мы используем GPT-4-V, чтобы изолировать каждый слой на простом фоне и создавать описательный текст. Мы поместили это в Alt Text HTML -атрибут. Это изображено на шаге 1 на рисунке 3.
4.2.2 Визуальная иерархия.Чтобы обеспечить визуальную иерархию элементов, мы даем GPT-4-V представление HTML холста и изображения логотипа и просим его классифицировать каждый элемент как одну из четырех категорий: первичный, вторичный, текст или фон. Этот шаг выводит новый HTML -файл, который включает в себя классификацию ролей в имени класса каждого элемента (класс = «первичный», класс = «вторичный» и т. Д.) Из нашей формирующей работы по анимации логотипа, мы узнали, что, как правило, логотипы имеют один основной элемент, который заслуживает наибольшего внимания в анимации. Таким образом, мы ограничиваем LLM, чтобы выбрать ровно один основной элемент.
Поскольку первичные элементы получат характерное движение, применяемое к ним, нам нужна дополнительная информация, чтобы описать их движение. Это включает в себя ориентацию их изображения, чтобы определить, в каком направлении они поступают. Мы сохраняем эту информацию в переменной (), которая используется позже в предложении концепции дизайна для анимации.
4.2.3 Группировка элементов.В дополнение к обеспечению иерархии, нам нужно было понять, какие элементы визуально и концептуально группируются вместе. Обычно существует много вторичных элементов, которые имеют симметрию, подобные позиции или другие визуальные сходства, которые делают их необходимыми для анимирования вместе. Например, многие звезды в ночном небе должны мерцать или две горы, должны подняться вместе. Чтобы создать группы, мы позвонили GPT-4-V, чтобы сделать подгруппы над элементами, которые были помечены как вторичные. Мы реорганизовали текстовое представление холста, так что группы вторичных элементов были сделаны вместе, были сделаны детьми родителей
элемент. Выход этого шага показан как дополненный HTML на шаге 2 на рисунке 3.
4.2.4 Концепция дизайна.Из ранних исследований с системой мы поняли, что для того, чтобы заставить систему создавать последовательные анимации, которая рассказала историю, нам нужно было предоставить концепцию дизайна, чтобы связать все элементы вместе. Таким образом, до шага генерации кода мы попросили LLM вернуть описание анимации естественного языка. Этот этап поощрял модель интерпретировать логотип и подключить элементы изображения с соответствующими анимационными действиями, которые они могут предпринять в реальном мире. Например, цветок может расцвести из центра экрана, исчезая и масштабируя, или лыжник может кататься на лыжах с левой стороны экрана и повернуть один поворот
предложить переворот. Вторичные и текстовые элементы также были указаны, чтобы получить повествовательное описание их анимации, так что их анимация не сталкивалась с основными элементами. См. Вывод шага 3 из рисунка 3 для (отрывок) примера концепции дизайна.
Чтобы автоматически генерировать концепцию дизайна, мы побудили GPT4-V с помощью HTML-файла (дополненного визуальной информацией) и изображение логотипа и попросили его написать концепцию дизайна с помощью подсказки:
This image is of a logo that we would like to animate .
Here is the HTML representation of this logo : < HTML >
We want to implement a logo animation which has a hero moment on the primary element . The primary element in this caption should animate in a way that mimics its typical behavior or actions in the real world . We analyzed the image to decide if it in its entrance it should take a path onto the screen or not : < entrance description >. Considering this information , suggest a motion that characterizes how this element ({ primary element image caption }) could move while onscreen . Additionally , suggest how this element should be sequenced in the context of a logo reveal and the other elements . ( Note that the element is an image layer , so parts within it cannot be animated .)
Концепция конструкции вывода была сохранена как переменная для ввода на шаге генерации кода. Хотя наш трубопровод создает концепцию дизайна, это может быть отредактировано или итерация пользователями, если они хотят большего контроля и взаимодействия с системой.
Авторы:
(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).
Эта статья есть
Оригинал