LaTCoder : Conversion de la conception de pages web en code avec Layout-as-Thought

papers.abstract

La conversion de conceptions de pages web en code (design-to-code) joue un rôle essentiel dans le développement d'interfaces utilisateur (UI) pour les développeurs front-end, en comblant le fossé entre la conception visuelle et l'implémentation fonctionnelle. Bien que les modèles de langage multimodaux de grande envergure (MLLMs) récents aient montré un potentiel significatif dans les tâches de design-to-code, ils échouent souvent à préserver avec précision la mise en page lors de la génération de code. À cette fin, nous nous inspirons du raisonnement en chaîne de pensée (Chain-of-Thought, CoT) dans la cognition humaine et proposons LaTCoder, une approche novatrice qui améliore la préservation de la mise en page dans la conception de pages web lors de la génération de code grâce à la mise en page comme pensée (Layout-as-Thought, LaT). Plus précisément, nous introduisons d'abord un algorithme simple mais efficace pour diviser la conception de la page web en blocs d'images. Ensuite, nous incitons les MLLMs à l'aide d'une approche basée sur le CoT pour générer du code pour chaque bloc. Enfin, nous appliquons deux stratégies d'assemblage—le positionnement absolu et une méthode basée sur les MLLMs—suivies d'une sélection dynamique pour déterminer la sortie optimale. Nous évaluons l'efficacité de LaTCoder en utilisant plusieurs MLLMs de base (c'est-à-dire DeepSeek-VL2, Gemini et GPT-4o) sur un benchmark public et sur un nouveau benchmark plus exigeant (CC-HARD) qui présente des mises en page complexes. Les résultats expérimentaux sur les métriques automatiques montrent des améliorations significatives. Plus précisément, les scores TreeBLEU ont augmenté de 66,67 % et l'erreur absolue moyenne (MAE) a diminué de 38 % lors de l'utilisation de DeepSeek-VL2, par rapport à l'incitation directe. De plus, les résultats de l'évaluation des préférences humaines indiquent que les annotateurs préfèrent les pages web générées par LaTCoder dans plus de 60 % des cas, fournissant une preuve solide de l'efficacité de notre méthode.

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 : Conversion de la conception de pages web en code avec Layout-as-Thought

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

papers.abstract

Support