LogoMotion: 콘텐츠 인식 애니메이션을 위한 시각적 기반 코드 생성

LogoMotion: Visually Grounded Code Generation for Content-Aware Animation

May 11, 2024

저자: Vivian Liu, Rubaiat Habib Kazi, Li-Yi Wei, Matthew Fisher, Timothy Langlois, Seth Walker, Lydia Chilton

cs.AI

초록

애니메이션 로고는 개인과 브랜드가 온라인에서 자신을 표현하는 강력하고 보편적인 방식입니다. 이러한 로고를 수동으로 제작하려면 상당한 예술적 기술과 노력이 필요할 수 있습니다. 초보 디자이너들이 로고를 애니메이션화할 수 있도록 돕기 위해 현재 디자인 도구는 템플릿과 애니메이션 프리셋을 제공합니다. 그러나 이러한 솔루션은 표현 범위가 제한될 수 있습니다. 대형 언어 모델(LLM)은 콘텐츠에 맞춤화된 애니메이션 코드를 생성함으로써 초보 디자이너들이 애니메이션 로고를 만들 수 있도록 돕는 잠재력을 가지고 있습니다. 본 논문에서는 레이어 문서를 입력받아 시각적으로 기반한 프로그램 합성을 통해 애니메이션 로고를 생성하는 LLM 기반 시스템인 LogoMotion을 소개합니다. 우리는 캔버스의 HTML 표현을 생성하고, 주요 및 보조 요소를 식별하며, 애니메이션 코드를 합성하고, 애니메이션 오류를 시각적으로 디버깅하는 기술을 소개합니다. 업계 표준 도구와 비교했을 때, LogoMotion은 콘텐츠 인식이 더 뛰어나고 품질 면에서 동등한 애니메이션을 생성하는 것으로 나타났습니다. 우리는 LLM 생성 애니메이션이 모션 디자인에 미치는 영향에 대한 논의로 결론을 맺습니다.

English

Animated logos are a compelling and ubiquitous way individuals and brands represent themselves online. Manually authoring these logos can require significant artistic skill and effort. To help novice designers animate logos, design tools currently offer templates and animation presets. However, these solutions can be limited in their expressive range. Large language models have the potential to help novice designers create animated logos by generating animation code that is tailored to their content. In this paper, we introduce LogoMotion, an LLM-based system that takes in a layered document and generates animated logos through visually-grounded program synthesis. We introduce techniques to create an HTML representation of a canvas, identify primary and secondary elements, synthesize animation code, and visually debug animation errors. When compared with an industry standard tool, we find that LogoMotion produces animations that are more content-aware and are on par in terms of quality. We conclude with a discussion of the implications of LLM-generated animation for motion design.