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的系统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.