WAFFLE: Мульти-модель для автоматизированной разработки фронт-энда.

WAFFLE: Multi-Modal Model for Automated Front-End Development

October 24, 2024

Авторы: Shanchao Liang, Nan Jiang, Shangshu Qian, Lin Tan

cs.AI

Аннотация

Разработка веб-сайтов включает превращение дизайна пользовательского интерфейса в функциональные веб-страницы, что может быть сложным как для начинающих, так и для опытных разработчиков из-за сложности иерархических структур и стилей HTML. Несмотря на то, что большие языковые модели (Large Language Models, LLMs) показали потенциал в генерации исходного кода, две основные проблемы остаются в генерации кода UI в HTML: (1) эффективное представление иерархической структуры HTML для LLMs и (2) преодоление разрыва между визуальной природой дизайна пользовательского интерфейса и текстовым форматом HTML-кода. Для решения этих проблем мы представляем Waffle, новую стратегию донастройки, которая использует механизм внимания, осознающий структуру, для улучшения понимания LLMs структуры HTML, а также контрастную стратегию донастройки для согласования понимания LLMs изображений пользовательского интерфейса и HTML-кода. Модели, донастроенные с помощью Waffle, показывают до 9,00 п.п. (процентных пунктов) более высокое соответствие HTML, на 0,0982 выше CW-SSIM, на 32,99 выше CLIP и на 27,12 п.п. выше LLEM на нашем новом бенчмарке WebSight-Test и на существующем бенчмарке Design2Code, превосходя текущие методы донастройки.

English

Web development involves turning UI designs into functional webpages, which can be difficult for both beginners and experienced developers due to the complexity of HTML's hierarchical structures and styles. While Large Language Models (LLMs) have shown promise in generating source code, two major challenges persist in UI-to-HTML code generation: (1) effectively representing HTML's hierarchical structure for LLMs, and (2) bridging the gap between the visual nature of UI designs and the text-based format of HTML code. To tackle these challenges, we introduce Waffle, a new fine-tuning strategy that uses a structure-aware attention mechanism to improve LLMs' understanding of HTML's structure and a contrastive fine-tuning approach to align LLMs' understanding of UI images and HTML code. Models fine-tuned with Waffle show up to 9.00 pp (percentage point) higher HTML match, 0.0982 higher CW-SSIM, 32.99 higher CLIP, and 27.12 pp higher LLEM on our new benchmark WebSight-Test and an existing benchmark Design2Code, outperforming current fine-tuning methods.