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.