UI Layout Generation with LLMs Guided by UI Grammar

📄 arXiv: 2310.15455v1 📥 PDF

作者: Yuwen Lu, Ziang Tong, Qinyi Zhao, Chengzhi Zhang, Toby Jia-Jun Li

分类: cs.HC, cs.AI

发布日期: 2023-10-24

备注: ICML 2023 Workshop on AI and HCI

💡 一句话要点

提出UI语法以提升大语言模型生成UI布局的能力

🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)

关键词: 大语言模型 用户界面生成 UI语法 可解释性 可控性 上下文学习 移动应用设计

📋 核心要点

  1. 现有方法在生成移动用户界面时缺乏有效的结构指导，导致生成结果的可控性和可解释性不足。
  2. 论文提出了一种新的UI语法，旨在表示UI的层次结构，从而更好地指导LLMs的生成过程。
  3. 初步实验结果表明，使用GPT-4进行生成的用户界面质量显著提升，且基于语法的方法在特定方面表现优越。

📝 摘要（中文）

近年来，大语言模型（LLMs）的进展引起了研究者和行业专业人士的关注，尤其是在移动用户界面（UI）任务中的应用。本文探讨了LLMs在UI布局生成中的使用，提出了一种新的UI语法方法，以表示UI屏幕中固有的层次结构。该方法旨在更有效地指导LLMs的生成能力，提高过程的可解释性和可控性。初步实验表明，GPT-4能够通过上下文学习生成高质量的用户界面。此外，初步的比较研究显示，基于语法的方法在特定方面提升了生成结果的质量。

🔬 方法详解

问题定义：本文旨在解决现有大语言模型在生成移动用户界面时缺乏结构指导的问题，导致生成结果的可控性和可解释性不足。

核心思路：提出了一种新的UI语法，旨在通过表示UI的层次结构来有效引导LLMs的生成能力，从而提高生成结果的质量和可解释性。

技术框架：整体架构包括UI语法的定义、LLMs的训练与生成过程。首先，通过定义UI语法来构建层次结构，然后利用LLMs进行生成，最后对生成结果进行评估与优化。

关键创新：最重要的创新点在于引入了UI语法这一概念，区别于传统方法，提供了一种结构化的方式来指导生成过程，提升了可控性和可解释性。

关键设计：在参数设置上，采用了适合UI生成的损失函数，并在网络结构中引入了层次化的表示方式，以增强生成的准确性和质量。通过这些设计，模型能够更好地理解和生成复杂的UI布局。

🖼️ 关键图片

fig_0
fig_1
fig_2

📊 实验亮点

实验结果显示，使用GPT-4进行UI生成时，基于UI语法的方法在特定质量指标上相较于传统方法有显著提升，具体性能数据尚未公开，但初步结果表明生成的用户界面更加符合设计规范，用户体验更佳。

🎯 应用场景

该研究的潜在应用领域包括移动应用开发、网页设计和用户体验优化等。通过提高UI布局生成的质量和可控性，能够显著降低设计成本，提升开发效率，未来可能在自动化设计工具中发挥重要作用。

📄 摘要（原文）

The recent advances in Large Language Models (LLMs) have stimulated interest among researchers and industry professionals, particularly in their application to tasks concerning mobile user interfaces (UIs). This position paper investigates the use of LLMs for UI layout generation. Central to our exploration is the introduction of UI grammar -- a novel approach we proposed to represent the hierarchical structure inherent in UI screens. The aim of this approach is to guide the generative capacities of LLMs more effectively and improve the explainability and controllability of the process. Initial experiments conducted with GPT-4 showed the promising capability of LLMs to produce high-quality user interfaces via in-context learning. Furthermore, our preliminary comparative study suggested the potential of the grammar-based approach in improving the quality of generative results in specific aspects.