Sketching out Graphical User Interface (GUI) layout is part of the pipeline of designing a GUI and a crucial task for the success of a software application. Arranging all components inside a GUI layout manually is a time-consuming task. In order to assist designers, we developed a method named GUILGET to automatically generate GUI layouts from positional constraints represented as GUI arrangement graphs (GUI-AGs). The goal is to support the initial step of GUI design by producing realistic and diverse GUI layouts. The existing image layout generation techniques often cannot incorporate GUI design constraints. Thus, GUILGET needs to adapt existing techniques to generate GUI layouts that obey to constraints specific to GUI designs. GUILGET is based on transformers in order to capture the semantic in relationships between elements from GUI-AG. Moreover, the model learns constraints through the minimization of losses responsible for placing each component inside its parent layout, for not letting components overlap if they are inside the same parent, and for component alignment. Our experiments, which are conducted on the CLAY dataset, reveal that our model has the best understanding of relationships from GUI-AG and has the best performances in most of evaluation metrics. Therefore, our work contributes to improved GUI layout generation by proposing a novel method that effectively accounts for the constraints on GUI elements and paves the road for a more efficient GUI design pipeline.

翻译：绘制图形用户界面（GUI）布局是GUI设计流程中的一环，也是软件应用成功的关键任务。手动在GUI布局中排列所有组件是一项耗时的任务。为辅助设计人员，我们开发了一种名为GUILGET的方法，能够从表示为GUI排列图（GUI-AG）的位置约束中自动生成GUI布局。其目标是通过生成真实且多样化的GUI布局，支持GUI设计的初始步骤。现有图像布局生成技术通常无法融入GUI设计约束。因此，GUILGET需要调整现有技术，以生成符合GUI设计特定约束的布局。GUILGET基于Transformer架构，旨在捕获GUI-AG中元素之间关系的语义信息。此外，该模型通过最小化多项损失函数来学习约束，这些损失函数分别负责将每个组件放置在其父布局内部、防止同一父布局内的组件重叠以及实现组件对齐。我们在CLAY数据集上进行的实验表明，我们的模型在理解GUI-AG关系方面表现最佳，并在大多数评估指标上取得了最优性能。因此，我们的工作通过提出一种有效考虑GUI元素约束的新方法，促进了GUI布局生成的改进，并为更高效的GUI设计流程铺平了道路。