[论文解读] Auto Completion of User Interface Layout Design Using Transformer-Based Tree Decoders

Yang Li, Julien Amelot+3 more|arXiv (Cornell University)|Jan 14, 2020

Video Analysis and Summarization参考文献 25被引用 11

一句话总结

该论文提出了一种基于Transformer的树形解码框架，用于从部分树状结构输入中自动补全图形用户界面（UI）布局设计。它引入了两种新颖的架构——指针式Transformer解码器和递归式Transformer解码器——能够生成具有正确空间位置和结构的层次化UI元素，在广度优先遍历设置下，于公开的Android UI数据集上实现了SOTA性能，F1分数最高达91.8%，编辑距离低至11.79。

ABSTRACT

It has been of increasing interest in the field to develop automatic machineries to facilitate the design process. In this paper, we focus on assisting graphical user interface (UI) layout design, a crucial task in app development. Given a partial layout, which a designer has entered, our model learns to complete the layout by predicting the remaining UI elements with a correct position and dimension as well as the hierarchical structures. Such automation will significantly ease the effort of UI designers and developers. While we focus on interface layout prediction, our model can be generally applicable for other layout prediction problems that involve tree structures and 2-dimensional placements. Particularly, we design two versions of Transformer-based tree decoders: Pointer and Recursive Transformer, and experiment with these models on a public dataset. We also propose several metrics for measuring the accuracy of tree prediction and ground these metrics in the domain of user experience. These contribute a new task and methods to deep learning research.

研究动机与目标

• 通过从部分布局中预测缺失的UI元素及其层次结构，实现UI布局设计的自动化。
• 解决使用深度学习进行布局补全时的2D空间位置与树状结构生成挑战。
• 设计基于用户体验的新型评估指标，用于衡量布局预测质量。
• 探索基于Transformer的解码器在结构化2D布局生成任务中的有效性。
• 展示该方法在UI设计之外的其他树状结构布局问题中的泛化能力。

提出的方法

• 提出两种基于Transformer的树形解码器架构：指针式Transformer和递归式Transformer，用于自回归式布局生成。
• 利用自注意力机制建模UI布局中的层次关系与空间依赖性。
• 将UI元素的坐标视为分类变量（独热编码），而非连续值，从而提升训练稳定性和性能。
• 采用树形结构的解码过程，根据遍历策略以自顶向下或广度优先顺序生成节点。
• 引入三种评估指标：用于父-子对预测的F1分数、下一项预测准确率，以及衡量结构与空间保真度的编辑距离。
• 在包含超过50,000个Android UI布局的公开数据集上进行模型训练与评估，输入部分程度分别为10%、50%、80%。

实验结果

研究问题

• RQ1 基于Transformer的树形解码器能否有效补全具有准确空间位置与层次结构的部分UI布局？
• RQ2 在广度优先与深度优先遍历顺序下，指针式与递归式解码策略的表现如何？
• RQ3 所提出的评估指标在多大程度上与用户体验和布局质量相关？
• RQ4 为何将坐标视为分类变量的策略在本任务中优于连续回归？
• RQ5 该模型能否泛化至其他涉及树状结构2D布局的预测问题？

主要发现

• 在广度优先遍历设置下，递归式Transformer解码器在多数指标上优于指针式Transformer和基线模型，80%部分布局时F1分数达91.8%，编辑距离低至11.79。
• 即使无法直接访问所有先前解码的节点，递归式Transformer仍保持强劲性能，表明其具备有效的层次推理能力。
• 指针式Transformer在深度优先遍历中表现更优，因其可访问所有部分树节点，但在下一项预测任务中仍逊于递归式Transformer。
• 当评估指标放宽至仅关注结构与语义（忽略精确坐标）时，所有模型在80%部分布局下均实现超过90%的下一项预测准确率，其中递归式Transformer领先，达95.3%。
• 将坐标作为独热编码的分类变量处理，显著优于连续回归方法，表明离散化更有利于捕捉布局语义。
• 模型在精确边界框预测方面表现欠佳，表明尽管结构性能优异，空间精度仍是挑战。