LaTCoder: Преобразование дизайна веб-страницы в код с использованием Layout-as-Thought

Аннотация

Преобразование дизайнов веб-страниц в код (design-to-code) играет важную роль в разработке пользовательских интерфейсов (UI) для фронтенд-разработчиков, устраняя разрыв между визуальным дизайном и функциональной реализацией. Хотя современные мультимодальные большие языковые модели (MLLMs) продемонстрировали значительный потенциал в задачах design-to-code, они часто не могут точно сохранить макет при генерации кода. Вдохновившись концепцией цепочки рассуждений (Chain-of-Thought, CoT) в человеческом познании, мы предлагаем LaTCoder — новый подход, который улучшает сохранение макета веб-страницы при генерации кода с использованием Layout-as-Thought (LaT). В частности, мы сначала вводим простой, но эффективный алгоритм для разделения дизайна веб-страницы на блоки изображений. Затем мы используем подход на основе CoT для генерации кода для каждого блока с помощью MLLMs. Наконец, применяем две стратегии сборки — абсолютное позиционирование и метод на основе MLLM — с последующим динамическим выбором для определения оптимального результата. Мы оцениваем эффективность LaTCoder, используя несколько базовых MLLMs (DeepSeek-VL2, Gemini и GPT-4o), как на публичном бенчмарке, так и на новом, более сложном бенчмарке (CC-HARD), который включает сложные макеты. Результаты экспериментов по автоматическим метрикам демонстрируют значительные улучшения. В частности, показатели TreeBLEU увеличились на 66,67%, а MAE снизился на 38% при использовании DeepSeek-VL2 по сравнению с прямым запросом. Более того, результаты оценки предпочтений пользователей показывают, что аннотаторы отдают предпочтение веб-страницам, сгенерированным LaTCoder, в более чем 60% случаев, что подтверждает эффективность нашего метода.

English

Converting webpage designs into code (design-to-code) plays a vital role in User Interface (UI) development for front-end developers, bridging the gap between visual design and functional implementation. While recent Multimodal Large Language Models (MLLMs) have shown significant potential in design-to-code tasks, they often fail to accurately preserve the layout during code generation. To this end, we draw inspiration from the Chain-of-Thought (CoT) reasoning in human cognition and propose LaTCoder, a novel approach that enhances layout preservation in webpage design during code generation with Layout-as-Thought (LaT). Specifically, we first introduce a simple yet efficient algorithm to divide the webpage design into image blocks. Next, we prompt MLLMs using a CoTbased approach to generate code for each block. Finally, we apply two assembly strategies-absolute positioning and an MLLM-based method-followed by dynamic selection to determine the optimal output. We evaluate the effectiveness of LaTCoder using multiple backbone MLLMs (i.e., DeepSeek-VL2, Gemini, and GPT-4o) on both a public benchmark and a newly introduced, more challenging benchmark (CC-HARD) that features complex layouts. The experimental results on automatic metrics demonstrate significant improvements. Specifically, TreeBLEU scores increased by 66.67% and MAE decreased by 38% when using DeepSeek-VL2, compared to direct prompting. Moreover, the human preference evaluation results indicate that annotators favor the webpages generated by LaTCoder in over 60% of cases, providing strong evidence of the effectiveness of our method.

LaTCoder: Преобразование дизайна веб-страницы в код с использованием Layout-as-Thought

LaTCoder: Converting Webpage Design to Code with Layout-as-Thought

Аннотация

Support