使用大规模语言建模的 "UI语法 "创新移动用户界面设计！
三个要点
✔️ 大规模语言模型在生成用户界面布局方面的实用性引起了人们的关注。
✔️ 提出了一种新方法，在大规模语言模型的提示中加入表示用户界面层次结构的 "用户界面语法"。
✔️ 不仅提高了大规模语言模型生成用户界面布局的性能，而且提高了大规模语言模型的可解释性和用户可控性。
UI Layout Generation with LLMs Guided by UI Grammar
written by Yuwen Lu, Ziang Tong, Qinyi Zhao, Chengzhi Zhang, Toby Jia-Jun Li
(Submitted on 24 Oct 2023)
Comment: ICML 2023 Workshop on AI and HCI
Subjects: Human-Computer Interaction (cs.HC); Artificial Intelligence (cs.AI)
code：
本文所使用的图片要么来自论文、介绍性幻灯片，要么是参考这些图片制作的。
概述
近年来，人工智能（AI）和人机交互（HCI）研究人员一直关注用户界面（UI）和图形用户界面（GUI）布局的生成。从人机交互的角度来看，用户界面是提供良好用户体验（UX）的关键因素，为了提高用户界面的可用性和功能性，人们开发了各种研究和可用性测试方法。
特别是自 RICO（一个关于移动用户界面的大型数据集）出现以来，人们提出了许多用于移动用户界面布局生成的人工智能模型。这些模型包括生成对抗网络（GAN）、变异自动编码器（VAE）、扩散模型、图神经网络（GNN）、变换器等。已使用的模型如下
最近，还开展了关于如何将大规模语言模型用于用户界面相关任务的研究。例如，已经开展了使用大规模语言模型执行用户界面建模任务和图形用户界面自动测试的研究。这些研究表明，大规模语言模型在用户界面任务中可以很好地发挥作用，而且无需大型数据集或复杂的学习过程，就可以改善用户界面。
本文还研究了大规模语言模型在移动用户界面布局生成中的实用性。尤其是，本文重点研究了大规模语言模型如何通过一次学习生成高质量的用户界面布局。为此，本文提出了一种名为 "UI 语法 "的新方法。
这种 "用户界面语法"（UI Grammer）准确地表达了用户界面元素之间的层次关系，使 LLM 生成过程更有条理，更符合上下文。有了这种用户界面语法，用户就更容易理解 LLM 是如何生成用户界面布局的，也更容易控制最终生成的结果。
本文通过实验来评估大规模语言模型在生成用户界面布局时的性能，以及用户界面语法对大规模语言模型生成过程的影响。
什么是用户界面语法（UI Grammer）？
屏幕中的用户界面元素具有层次结构。这反映在用户界面设计工具（如 Figma）的分组功能和安卓系统的视图层次结构中。在本文中，我们假设保留用户界面元素之间的这种层次结构，并用它来隐式地指导生成过程，将会提高移动用户界面生成的质量。
本文提出的用户界面语法定义了一套生成规则，用于描述屏幕中用户界面元素之间的父子关系。这些生成规则的形式为 A → B，其中 A 代表一个父用户界面元素，B 代表一个或多个子用户界面元素的序列。例如，在下图所示的简单用户界面结构中，用户界面语法可应用为 "根 → 容器按钮，容器 → 象形文字"。
为了评估用户界面语法（UI Grammer）的影响，我们引入了一个包含用户界面语法（UI Grammer）的生成过程、为了评估用户界面语法（UI Grammer）的影响，我们引入了带有用户界面语法（UI Grammer）的生成过程，并创建了两个管道并对其性能进行了比较：一个是不带用户界面语法（UI Grammer）的生成过程，另一个是带有用户界面语法（UI Grammer）的生成过程。
请注意，本文使用的是 CLAY 数据集，它是基于 RICO 数据集的改进版；CLAY 消除了 RICO 数据集中的噪音，如用户界面元素与视觉信息不匹配等，并包含约 59k 个人类注释的用户界面屏幕布局。CLAY 包含约 59k 个人工标注的用户界面屏幕布局，与 RICO 相比，CLAY 包含的用户界面布局数据噪音更小。SCREEN2WORDS 数据集包含 RICO 用户界面屏幕的自然语言摘要，也用于构建提示。
如何评估用户界面语法（UI Grammer）的影响
在不使用用户界面语法（UI 语法）的情况下生成布局时，会从 CLAY 中随机选择屏幕，将其作为上下文训练的样本，并从生成中排除，以防止数据泄漏，如下图所示 对于 CLAY 中的每个用户界面屏幕，都会从 SCREEN2WORDS 中获取相应的自然语言描述。检索相应的自然语言描述并将其用作生成目标的描述；CLAY 中定义的有意义的 25 个用户界面元素标签列表将作为提示中的约束条件。为便于分析生成的结果，大规模语言模型 API 的响应格式受到了控制。
在使用用户界面语法（UI 语法）生成布局时，与其让大型语言模型直接生成最终的屏幕布局（如下图所示），不如先引入屏幕 UI 语法列表，然后使用所提供的 UI 语法生成示例 UI 布局。说明。
在构建包含用户界面语法（UI 语法）的提示符时，一个重要的步骤是从 CLAY 数据集中选择要分析的屏幕语法。这是因为，如果使用原始 CLAY 数据集中屏幕 S 的描述生成布局，并将从 S 中解析出的语法也输入到提示符中，就会发生数据泄漏，屏幕 S 可能会被直接从该语法中重建。为避免出现这种情况，CLAY 数据集以 20/80 的比例随机拆分，从 20% 的数据集中分析出的语法将用于指导生成 80% 的数据集。
此外，在 CLAY 中，同一应用程序中的许多屏幕具有相似的布局结构，这可能会导致潜在的数据泄漏，即同一应用程序中的屏幕同时包含在两个数据集中。为了避免这种情况，数据集按应用程序进行了拆分。
实验结果
上述两条管道使用 OpenAI 截至 2023 年 5 月的 GPT-4 API 进行比较。使用的 GPT-4 是 gpt-4-0314 版本，最大令牌数=2,000，温度=0.7 这两条管道生成的结果如下图所示。
在这四幅画面中，左边两幅是原始图像和相应的边界框，右边两幅是 GPT-4 生成的用户界面布局结果。
此外，还通过 MaxIoU、Overlap 和 Alignment 进行定量评估：MaxIoU 在 CLAY 的原始屏幕 S（包括作为提示部分提供的屏幕摘要）和生成的屏幕 S′ 之间计算；Overlap 和 Alignment 在生成的结果 S 上计算。根据生成的结果 S 计算重叠和对齐。计算结果如下表所示。
表格 "重叠 "显示，"GPT-4（无语法）"表现最佳。对齐情况也表明，"GPT-4（有语法）"和 "GPT-4（无语法）"都显示出良好的性能。还可以看出，与 "GPT-4 无语法 "相比，"GPT-4 有语法 "的 MaxIoU 稍好。
摘要
该论文认为，大规模语言模型通过将用户界面语法的用户界面层次结构纳入大规模语言模型的提示中，在生成用户界面布局方面非常有用，这表明 GPT-4 等大规模语言模型有潜力在布局之外生成内容，并生成中高保真原型。该报告指出，它们还被认为具有生成中高保真原型的潜力，除布局外还能生成内容。例如，它指出，将大规模语言模型与现有的用户界面模板和设计系统（如谷歌材料设计）相结合，可以产生更加自动化、可定制和高效的用户界面原型制作方法。
本文提出的 "用户界面语法 "的引入不仅提高了 MaxIoU 等大规模语言模型的生成质量，而且通过引入用户界面语法作为中间表示，提高了预训练的黑盒大规模语言模型的可解释性和用户可控性。该研究指出
与本文相关的类别
