LaTCoder: Umwandlung von Webseitendesign in Code mit Layout-as-Thought

papers.abstract

Die Umwandlung von Webseiten-Designs in Code (Design-to-Code) spielt eine entscheidende Rolle in der Entwicklung von Benutzeroberflächen (UI) für Frontend-Entwickler, da sie die Lücke zwischen visuellem Design und funktionaler Implementierung schließt. Obwohl neuere Multimodale Große Sprachmodelle (MLLMs) ein erhebliches Potenzial in Design-to-Code-Aufgaben gezeigt haben, gelingt es ihnen oft nicht, das Layout während der Code-Generierung präzise zu bewahren. Inspiriert von der Chain-of-Thought (CoT)-Argumentation in der menschlichen Kognition, schlagen wir LaTCoder vor, einen neuartigen Ansatz, der die Layoutbewahrung bei der Code-Generierung von Webseiten-Designs durch Layout-as-Thought (LaT) verbessert. Konkret führen wir zunächst einen einfachen, aber effizienten Algorithmus ein, um das Webseiten-Design in Bildblöcke zu unterteilen. Anschließend verwenden wir einen CoT-basierten Ansatz, um MLLMs dazu zu veranlassen, Code für jeden Block zu generieren. Schließlich wenden wir zwei Assemblierungsstrategien an – absolute Positionierung und eine MLLM-basierte Methode – gefolgt von einer dynamischen Auswahl, um das optimale Ergebnis zu bestimmen. Wir evaluieren die Wirksamkeit von LaTCoder mit mehreren Basis-MLLMs (d. h. DeepSeek-VL2, Gemini und GPT-4o) sowohl anhand eines öffentlichen Benchmarks als auch eines neu eingeführten, anspruchsvolleren Benchmarks (CC-HARD), der komplexe Layouts aufweist. Die experimentellen Ergebnisse anhand automatischer Metriken zeigen signifikante Verbesserungen. Insbesondere stiegen die TreeBLEU-Werte um 66,67 % und der MAE sank um 38 %, wenn DeepSeek-VL2 im Vergleich zur direkten Prompting-Methode verwendet wurde. Darüber hinaus zeigen die Ergebnisse der menschlichen Präferenzbewertung, dass Annotatoren in über 60 % der Fälle die von LaTCoder generierten Webseiten bevorzugen, was die Wirksamkeit unseres Ansatzes deutlich belegt.

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: Umwandlung von Webseitendesign in Code mit Layout-as-Thought

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

papers.abstract

Support