GUI 框架是实现 UI 设计图像的起点。为了从 UI 设计图像中获取 GUI 框架，开发人员必须在视觉上理解图像中的 UI 元素及其空间布局，然后将这种理解转化为适当的 GUI 组件及其组成。自动化这种视觉理解和翻译对于引导移动 GUI 实施将是有益的，但是由于 UI 设计的多样性和生成的 GUI 框架的复杂性，这是一项具有挑战性的任务。现有工具是严格的，因为它们依赖于启发式设计的视觉理解和 GUI 生成规则。在本文中，我们提出了一种神经机器翻译器，它将计算机视觉和机器翻译的最新进展相结合，用于将 UI 设计图像转换为 GUI 框架。我们的翻译人员学习如何在 UI 图像中提取视觉特征，对这些特征的空间布局进行编码以及在统一的神经网络框架中生成 GUI 框架，而无需手动制定规则。为了培训翻译人员，我们开发了一种自动化的 GUI 探索方法，可以自动从实际应用程序中收集大规模 UI 数据。我们进行了广泛的实验，以评估我们方法的准确性，通用性和实用性。
移动应用程序（app）是具有丰富图形用户界面（GUI）的以事件为中心的程序。应用程序的 GUI 不仅应提供用户交互的工作界面，而且还应创造直观且令人愉悦的用户体验。实际上，后者对于应用程序在竞争激烈的市场中取得成功至关重要。开发应用程序的 GUI 通常涉及两个独立但相关的活动：设计 UI 和实现 UI。设计 UI 需要适当的用户交互，信息体系结构和 UI 的视觉效果，而实现 UI 的重点是使 UI 与 GUI 框架的正确布局和小部件一起使用。
用户界面设计可以从头开始创建，也可以根据用户界面设计套件或现有应用程序的 GUI 进行改编，通常以设计图像的形式传达给开发人员以实现。 UI 设计图像以像素矩阵形式描绘了所需的 UI 元素及其空间布局。为了使用 GUI 框架实现 UI 设计图像，开发人员必须能够将 UI（或 UI 的一部分）的基于像素的描述转换为 GUI 框架。如图 1 所示，GUI 框架定义了在 GUI 实现中应组成 GUI 构建器（例如 Android 布局和小部件）的组件以及组成方式，以在 UI 设计图像中再现 UI 元素及其空间布局。该 GUI 框架类似于最初的“引导指令”，可启用后续的 GUI 实现（例如，设置字体，颜色，填充，背景图像等）。
但是，UI 设计图像（即像素语言的 UI 设计）和 GUI 框架（即 GUI 框架组件名称的语言的 UI 设计）之间存在概念上的差距。为了弥合这种差距，开发人员需要充分了解 GUI 框架的组件以及这些组件所支持的视觉效果，交互作用和构图，以便为不同种类的 UI 元素和空间布局创建合适的 GUI 框架。如果开发人员不具备此知识，则 GUI 实现将陷入困境，因为现代 GUI 实现无法通过对某些文本，图像和控件进行硬编码定位来实现。对于必须在各种屏幕尺寸上运行的移动应用程序尤其如此。
图 1：将设计图像转换为 Android GUI 框架（并非全部）
为了克服 UI 设计图像和 GUI 框架之间的知识障碍，开发人员可以尝试通过反复试验的方法找出 UI 设计图像的 GUI 组件应组成什么以及如何组成。尽管现代的 GUI 构建器为创建 GUI 实现提供了强大的交互式支持（例如，拖放，所见即所得），但这种类型的尝试和尝试错误将非常麻烦且令人沮丧。首先，移动应用的 GUI 通常涉及许多 GUI 组件和复杂的空间布局（请参见图 4（b））。其次，复杂的 GUI 框架支持数十种布局和小部件（有些可以互换）以及这些布局和小部件的灵活组合。在不熟悉的 GUI 框架的反复试验中，开发人员很容易迷失方向。
另外，开发人员可以从 GUI 框架教程或现有的 GUI 实现中学习。为此，他们必须能够找到一些实现与所需 UI 相似的 UI 设计的教程或 GUI 实现。通过 UI 设计图像查找此类教程或 GUI 实现是一项艰巨的图像搜索任务。很难为 UI 设计和使用信息检索（IR）方法所需的 GUI 组件制定简洁，准确的文本查询。开发人员还可以从开发人员社区寻求实现 UI 设计的解决方案（例如，Stack Overflow），但他们可能并不总是能够及时获得有用的建议。
应用程序的用户界面非常复杂，可以支持复杂的任务，并且在应用程序的生命周期内可能会经历许多修改。考虑到正在开发和维护的数百万个应用程序，从 UI 设计到 GUI 实施的自动转换将对移动应用程序开发有利。给定 UI 设计图像，某些工具可以自动生成 GUI 实现。这种自动生成的方法克服了将 UI 设计图像转换为 GUI 框架的反复试验，基于搜索或询问开发者社区方法的局限性。但是，现有工具很严格，因为它们依赖于手工设计的视觉理解和 GUI 生成模板，这些模板仅包含有限的 UI 图像到 GUI 框架的翻译知识。
在这项工作中，我们提供了一种深度学习体系结构，该体系结构从现有应用程序中提取了有关 UI 设计和 GUI 实现的大规模知识，并开发了一种生成工具，以在输入 UI 设计图像的情况下自动生成 GUI 框架。我们的生成工具可以被认为是“专家”，他了解各种各样的 UI 设计和 GUI 框架，以建议开发人员为实现 UI 设计图像而应组成 GUI 框架的内容和方式。
要建立这个“专家”，我们必须应对两个基本挑战。首先，要成为一名知识渊博的专家，必须将生成工具暴露于来自大量应用程序的大量 UI 设计和 GUI 框架的知识源。其次，要向开发人员建议如何将 UI 设计转换为 GUI 框架，生成工具不仅必须捕获 UI 设计图像中包含的 UI 元素，而且还必须表达这些 UI 元素如何相互关联。 GUI 组件的组成。在本文中，我们提出了一种自动化的 GUI 探索技术，用于解决知识源中的第一个挑战，并开发一种结合了计算机视觉和机器翻译的最新进展的神经机器翻译器，以解决视觉理解和骨骼生成方面的第二个挑战。神经机器翻译器可以使用各种 UI 屏幕截图和运行时 GUI 框架的大型数据集进行端到端训练，这些数据集是在移动应用程序二进制文件的自动 GUI 探索期间自动收集的。
我们实现了一个 Android UI 数据收集器，并使用它从 5043 个 Android 应用程序中自动收集了 185,277 对 UI 图像和 GUI 框架。我们采用此数据集来训练我们的神经机器翻译器，并对 UI 图像到 GUI 框架生成的翻译器的准确性进行前所未有的大规模评估。我们的评估表明，我们的翻译人员可以可靠地区分非常不同的 UI 图像中的不同类型的视觉元素和空间布局，并可以针对各种 GUI 框架复杂性准确生成正确的 GUI 组件和合成。我们还将翻译器应用于不在我们的培训集中的 20 个 Android 应用的用户界面，这项研究进一步证实了翻译器的普遍性。通过一项初步的用户研究，我们提供了我们的方法用于引导 GUI 实现的有用性的初步证据。
我们对这项工作的贡献如下：
我们将 UI 图像到 GUI 框架的生成公式化为机器翻译任务。机器翻译器的输入 i 是 UI 设计图像（可以视为像素语言（例如 RGB 颜色或灰度像素）中的 UI 设计）。如图 2 所示，机器翻译器应该能够将输入的 UI 设计图像“翻译”为 GUI 框架，即一些容器组件（即非叶节点）和原子组件（即容器组件）的组合。叶节点）。
GUI 框架可以视为 GUI 框架语言中的 UI 设计，其词汇表由 GUI 框架的组件名称组成，例如 Android 的 RelativeLayout，TextView，ImageButton 和两个特殊标记（例如，括号“ {”和“}” ”）表示 GUI 组件的组成。如图 2 所示，组件层次结构可以通过深度优先遍历（DFT）并使用“ {”和“}”将容器包含的组件包含在令牌序列中，表示为等效的令牌序列。在这项工作中，我们使用 GUI 框架的令牌序列表示作为机器翻译器的输出。
图 2：UI 图像到 GUI 框架生成的示例
与源语言和目标语言均为文本数据的常规机器翻译任务不同，我们的机器翻译任务需要对图像和文本数据进行联合处理。此外，与包含单词序列的文本不同，我们的输入 UI 设计图像包含 UI 元素的空间布局信息，而我们的输出 GUI 框架是 GUI 组件的层次结构。考虑到我们任务的这些特征，我们设计了一种神经机器翻译器，该翻译器将视觉卷积神经网络（CNN），递归神经网络（RNN）编码器和 RNN 解码器集成在一起。如图 3 所示，在给定输入 UI 图像的情况下，视觉 CNN 通过一系列卷积和合并操作提取了一组多样化的图像特征。然后，RNN 编码器将这些图像特征的空间布局信息编码为摘要矢量 C，然后由 RNN 解码器使用它来生成令牌序列表示形式的 GUI 框架。
图 3：用于 UI 图像到 GUI 框架生成的神经机器翻译器的架构
CNN 是一系列序列，可将原始图像在空间上转换为紧凑的特征表示形式（称为特征图）。在我们的 CNN 架构中，我们使用两种主要类型的层：卷积层（Conv）和池化层（Pool），遵循模式 Conv→Pool。我们堆叠几个 Conv→Pool 层以创建一个深层的 CNN，因为深层的 CNN 可以提取输入图像的更强大功能。我们不使用完全连接的图层，因为我们要保留 CNN 要素的局部性以便以后对其空间布局信息进行编码。
我们的神经机器翻译器仅将原始 UI 图像作为输入，不需要视觉元素的结构和位置的详细注释。因此，给定视觉 CNN 输出的特征图，对于有效生成适当的 GUI 组件及其组成，重要的是在输入图像中定位视觉特征的相对位置。为了对 CNN 特征的空间布局信息进行编码，我们在视觉 CNN 输出的特征图的每个特征向量上运行递归神经网络（RNN）编码器。
RNN 递归地将输入向量 xt 和隐藏状态 h{t-1}映射到新的隐藏状态 ht：h_t = f（h{t-1}，x_t）其中 f 是非线性激活函数（例如，下面讨论的 LSTM 单位）。读取输入的结尾后，RNN 编码器的隐藏状态是向量 C，该向量总结了整个输入特征图的空间布局信息。对 CNN 功能之间的远程依赖关系进行建模对于我们的任务至关重要。例如，我们需要捕获基于图像的序列中视觉元素的右下角和左上角特征之间的依赖性。因此，我们采用长短期记忆（LSTM）。 LSTM 由一个存储单元和三个门组成，分别是输入，输出和忘记门。从概念上讲，存储单元存储了过去的上下文，而输入和输出门则允许该单元长时间存储上下文。同时，通过忘记门可以清除某些上下文。这种特殊的设计使 LSTM 可以捕获长期依赖关系，这种依赖关系通常发生在基于图像的序列中。
然后，根据 RNN 编码器的输出摘要矢量 C，由解码器生成 GUI 框架语言的目标标记（即 GUI 组件的名称以及特殊标记{和}）。 如图 2 所示，可以通过深度优先遍历（DFT）将 GUI 框架的令牌序列表示形式转换为组件层次结构。由于生成的令牌序列的长度针对不同的 UI 图像而有所不同，因此我们采用了 RNN 解码器，即 能够产生可变长度的序列。 解码器在时间 t 的隐藏状态计算为 f（h{t-1}，y{t-1}，C）（f 也是 LSTM）。 下一个令牌 yt 的条件分布计算为 P（y_t |⟨y{t-1}，...，y1⟩，C）= softmax（h_t，y{t-1}，C），其中 softmax 函数产生有效语言词汇的概率。注意，隐藏状态和下一个标记不仅取决于过去的上下文，而且还取决于输入图像的 CNN 特征的摘要矢量 C。
尽管我们的神经机器翻译器由三个神经网络（视觉 CNN，空间布局 RNN 编码器和 GUI 框架生成 RNN 解码器）组成，但是可以使用一个损失函数对这些网络进行端到端联合训练。训练数据由成对的 UI 图像 i 和相应的 GUI 框架 s 组成（有关如何构建大规模训练数据集，请参见第 4 节）。 GUI 框架表示为令牌序列 s = {s0，s1，...}，其中每个令牌都来自 GUI 框架语言（即 GUI 组件的名称以及两个特殊令牌{和}）。 每个令牌表示为一个热点向量。
给定一个 UI 图像 i 作为输入，模型试图使产生 GUI 框架 s = {s0，s1，...}的目标序列的条件概率 p（s | i）最大化。 由于 s 的长度是无界的，因此通常应用链式规则对 s0，...，sN 上的联合对数概率建模，其中 N 是特定序列的长度，如下所示：
在训练时，我们使用随机梯度下降法优化了整个训练集的对数概率之和。 RNN 编码器和解码器将误差微分反向传播到其输入（即 CNN），从而使我们能够共同学习神经网络参数，以在统一框架中最小化误差率。
在训练了神经机器翻译器之后，我们可以使用它来生成 UI 设计图像 i 的 GUI 框架。生成的 GUI 框架应具有最大对数概率 p（s | i）。生成全局最佳 GUI 框架具有沉浸式搜索空间。因此，我们采用 BeamSearch 来仅扩展搜索空间中有限的一组最有希望的节点。在每个步骤 t，BeamSearch 将 k 个（Beam 宽度）最佳序列的集合作为候选者，以生成大小为 t + 1 的序列。在步骤 t + 1，神经机器翻译器生成用于将每个当前候选序列扩展为大小为 t + 1 的新候选序列的语言词汇的概率分布。BeamSearch 仅保留大小为 t + 1 的所有新候选序列中的最佳 k 个序列。模型生成 k 个最佳序列的序列末尾符号。然后，将排名靠前 1 的序列作为输入 UI 图像的生成的 GUI 框架返回。
要训练我们的神经机器翻译器，我们需要从现有的移动应用中获取大量的 UI 图像和 GUI 框架对。这要求我们浏览应用程序的 GUI，获取 UI 屏幕截图，获取运行时 GUI 组件层次结构，并将屏幕截图与组件层次结构相关联。尽管某些工具（例如 Apktool，UI Automator）可以协助完成这些任务，但它们都无法自动化整个数据收集。受自动化 GUI 测试技术的启发，我们开发了一种称为 Stoat 的自动化技术来探索 GUI。在探索期间，将自动转储 UI 屏幕截图及其相应的运行时 GUI 组件层次结构。转储的 UI 图像和相应的 GUI 组件层次结构类似于图 2 中的示例。
Stoat 使用 Android 模拟器（已配置为流行的 KitKat 版本，SDK 4.4.2，屏幕尺寸为 768×1280）来运行 Android 应用。它使用 Android UI Automator 转储成对的 UI 图像和相应的运行时 GUI 组件层次结构。Soot 和 Dexpler 用于静态分析。 Stoat 在具有 32 个 Intel Xeon CPU 和 189G 内存的 64 位 Ubuntu 16.04 服务器上运行，并行控制 16 个仿真器来收集数据（每个应用程序运行 45 分钟）。
我们从 Google Play 抓取了具有最高安装数量的 6000 个 Android 应用。 Stoat 成功运行了 5043 个应用，它们属于 25 个类别。图 4（a）显示了每个类别中的应用程序数量。其他 957 个应用程序需要额外的硬件支持或第三方库，而模拟器中没有这些库。
图 4：Android UI 数据集统计
Stoat 总共收集了 185,277 对 UI 图像和 GUI 框架（每个应用平均约 36.7 对）。这个 UI 数据集用于训练和测试我们的神经机器翻译器（请参阅第 6 节）。收集的 GUI 框架使用 291 个独特的 Android GUI 组件，包括 Android 的本机布局和小部件以及来自第三方库的组件。图 4（b）中的方框图显示了收集到的 GUI 框架的复杂性，差异很大。
GUI 框架平均具有 24.73 个 GUI 组件，7.43 个容器（非叶组件）和 5.43 层（从根到叶组件的最长路径）。
我们从以下三个方面评估我们的神经机器翻译器：准确性，通用性和有用性。
我们使用随机选择的约 7％的 Android UI 数据集（10804 对 UI 图像和 GUI 框架）作为精度评估的测试数据。测试数据均未出现在模型训练数据中。
如图 5 所示，在所有 10804 个测试 UI 图像中，为 6513（60.28％）UI 图像生成的 GUI 框架与真实 GUI 框架完全匹配，并且在所有测试 UI 图像上的平均 BLEU 得分为 79.09。Beam 宽度为 1（即贪婪搜索）。此外，对于所有测试 UI 图像中只有 9 个，我们的模型无法生成封闭的方括号。该结果表明，我们的模型成功捕获了容器组件的成分信息。当 Beam 宽度增加到 5 时，精确匹配率和平均 BLEU 得分分别增加到 63.5％和 86.94%。但是，在 Beam 宽度= 2 之后的增加很小。因此，在下面的实验中，考虑到计算成本和准确性之间的平衡，我们使用 beam-width = 2。
图 5：Beam 宽度的影响
为了进一步确认翻译器的通用性，我们随机选择了 UI 数据集中未包含的另外 20 个应用。为了确保测试数据的数量，我们选择的应用程序至少安装了 1 毫米的安装程序（流行的应用程序通常具有内容丰富的 GUI）。在这些应用程序中，我们随机选择了 20 个应用程序，我们的数据收集器为其收集了 20 多个 UI 图像。这 20 个应用程序属于 10 个类别。我们总共收集了 1208 个 UI 图像（每个应用平均 60.4 个）。我们将 Beam 宽度设置为 2 以生成 GUI 框架。
表 1：20 个完全看不见的应用程序的准确性结果
表 1 总结了所选 20 个应用程序的信息以及这些应用程序的 UI 图像上生成的 GUI 框架的准确性结果（按精确匹配率降序排列）。平均完全匹配率为 59.47％（略低于 Android UI 测试数据的平均完全匹配率（63.5％）），平均 BLEU 得分为 88.11（略高于 Android UI 测试的平均 BLEU 得分（86.94）数据）。这些结果证明了我们翻译的一般性。
我们手动检查准确匹配率（<50％）或 BLEU 分数（<80）低的应用程序。我们观察到产生错误的原因与 6.3.4 节中讨论的原因相似。例如，个性化和摄影应用程序具有用户界面，供用户上载和操作文档或图像。类似于图 12（c）和图 12（d）中的地图和网页示例，我们的翻译人员可能会将 UI 中显示的某些内容误认为是要生成的 UI 的一部分，从而导致较低的精确匹配率或 BLEU 得分这些应用。但是，尽管对于某些此类应用程序（例如 17-Office Document Viewer，19-Photo Effects Pro），精确匹配率较低，但 BLEU 得分较高，这表明生成的 GUI 框架仍在很大程度上与实际情况相匹配。
我们进行了一项试点用户研究，以评估生成的 GUI 框架对引导 GUI 实现的有用性。
我们从学校招募了八名博士生和研究人员。我们要求每个参与者在 Android 中实现相同的 5 个 UI 图像集。我们选择两个相对简单的 UI 设计图像，两个中等复杂的图像和一个复杂的图像进行研究。参与者只需要实现可在 UI 图像中复制 UI 元素及其空间布局的框架式 GUI，而无需设置组件的属性（例如，字体，颜色，填充等）。该研究分为两组，每组四个参与者：实验组 P1，P2，P3，P4，他们使用我们的工具从生成的 GUI 框架开始；对照组 P5，P6，P7，P8，从头开始。根据研究前的背景调查，所有参与者都有超过两年的 Java 和 Android 编程经验，并且至少为其工作开发了一个 Android 应用程序。每对参与者 Px，Px + 4 具有相当的开发经验，因此实验组总体上具有与对照组相似的专业知识。参与者需要使用 Android Studio 以避免工具偏差，并且每个设计最多需要 20 分钟的时间。
我们记录用于实现 UI 设计图像的时间。在每个用户界面图片实施后，要求参与者以五分李克特量表（1：完全不满意； 5：高度满意）来评估他们对实施的满意程度。实验结束后，我们要求研究人员（不参与研究）判断所实现的框架 GUI 与各自的 UI 图像的相似性（也是五点李克特量表：1：完全不相似； 5：相同的布局） 。该研究人员不知道哪个组实现哪个框架 GUI。
图 6 中的方框图显示，实验组实现框架 GUI 的速度比对照组快（平均 6.14 分钟对 15.19 分钟）。实际上，对照组的平均时间被低估了，因为三名参与者未能在 20 分钟内完成至少一张 UI 图像，这意味着他们在实际开发中可能需要更多时间。相反，实验组中的所有参与者将在 15 分钟内完成所有任务。实验组将其实施的 GUI 的 90％评为高度满意（5 分），而对照组则为 15％。这与已实现的 GUI 与研究人员给出的 UI 图像的相似性等级一致。平均而言，实验组和对照组的满意评分为 4.9 对 3.8，实验组和对照组的相似评分为 4.2 对 3.65。
图 6：实验组和对照组的比较。 *表示 p <0.01 和表示 p <0.05
尽管决不是决定性的，但此用户研究提供了我们的方法用于引导 GUI 实施的有用性的初步证据。
本文介绍了一种用于 UI 图像到 GUI 框架生成的生成工具。我们的工具包含两个组成部分：深度学习架构和自动 UI 数据收集方法。我们的工具具有几个独特的优势：1）将特征提取，空间编码和 GUI 框架生成集成到端到端的可训练框架中。 2）它学习直接从图像数据中提取信息丰富的 UI 功能，而无需手工功能或图像预处理。 3）它学会直接从 UI 图像和 GUI 框架中将 UI 功能，GUI 组件和组成相关联，不需要这种相关性的详细注释。 4）它是使用真实的 Android 应用程序的第一个大规模 UIimage-GUI-skeleton 数据集进行训练的。这些优势为我们的工具提供了前所未有的速度，可靠性，准确性和通用性，可完成 12000 多个 UI 图像到 GUI 框架生成任务。将来，我们将使用不同的 UI 分辨率和方向进一步测试我们的工具。我们还将神经网络组件扩展到 Web 设计和实现。
