用前端设计图进行编码，西安交通大学表示，复杂的界面也可以逐步完成

使用机器学习技术自动生成图形用户界面（GUI）代码是一个相对较新的研究领域. 通常，对于前端开发人员而言，根据设计编写GUI是一项耗时且繁琐的任务，因为这会阻止前端开发人员花费更多时间来开发软件的实用功能和逻辑. 因此，建立一个将GUI原型自动转换为相应编程代码的系统非常有前景.

最近人们使用机器学习技术来自动生类可读格式的程序. 他们使用梯度下降从输入输出样本中获取源代码. 然而，事实证明，它们的性能不及基于离散搜索的传统技术，后者已被编程语言社区广泛使用. 另一个类似的研究是DeepCoder，它试图使用统计预测来增强传统搜索技术以生成计算机程序. 但是，其对复杂编程语言建模的能力受到对领域特定语言（DSL）的依赖的限制.

对于从视觉输入生成代码的任务，目前只有很少的研究，其中最类似于​​本文的研究. pix2code使用反馈机制，其中解码过程可以通过两个不同级别的LSTM进行迭代: “编码” LSTM，对已经生成的代码序列进行编码，以减轻“解码” LSTM学习长序列关系的负担. “解码” LSTM用于生成代码序列代码设计图，然后将解码令牌序列返回到“解码” LSTM，以形成反馈循环. 通过使用反馈机制，pix2code可以生成比其他基于单进程的方法更长的单词/令牌序列. 但是，他们的方法要求预先确定“已编码” LSTM可以生成的最大序列长度. 换句话说，需要预先指定码长范围，这降低了该方法的可扩展性和泛化能力. 这种方法的另一个明显的缺点是，它没有考虑到GUI及其代码的层次结构，这限制了它在生成精确图形程序方面的性能.

为了解决这些问题，研究人员提出了一种自动生成图形程序的新方法. 它不仅可以很好地解决长期依赖问题，而且可以通过以分层的方式表示代码生成过程来捕获代码的分层结构. 研究人员的新方法使用分层来推理代码序列并一个接一个地生成图形源代码.

下面的图1显示了GUI和相应代码的示例，还显示了如何将GUI划分为不同的模块. DSL的详细代码生成过程如下: 首先，第一阶段LSTM将用于解码模块级图像视觉信息，其中LSTM的每个隐藏状态都包含该模块的一般上下文信息. 然后将第一阶段LSTM的隐藏状态和图像的卷积特征输入到注意力模型中，以选择最重要的局部卷积特征，并将这些局部卷积特征作为上下文信息进一步馈送到第二阶段LSTM. 相应的模块会生成代码.

图1: 给定一个GUI屏幕快照图像，该代码示例由研究人员的新模型生成. 其中（a）是输入GUI，它将以某种方式分为5个模块. （b）显示了模型根据5个模块生成的DSL代码，最后（c）根据先前生成的DSL代码重新渲染了GUI.

研究人员在pix2code提供的基准数据集上进行了测试，实验结果表明，他们的方法非常有效: 在所有三个子数据集（IOS，Android和Web）上，他们的模型都优于当前模型. 最好的方法是更好. 此外，为进一步说明他们提出的模型在处理复杂的GUI时具有更强的优势，他们构建了一个新的数据集，其中包含具有更多图形元素的GUI屏幕快照，并且图形元素的样式和空间布局更加多样化. 研究人员说，在新的复杂数据集上，他们的方法将比其他比较方法具有更大的优势.

纸张: 使用基于注意力的分层自动生成图形程序

论文地址:

摘要: 深度学习方面的最新研究进展使得使用编码器-框架将图形用户界面（GUI）屏幕快照自动转换为代码成为可能. 尽管常用的图像编码器（例如CNN网络）可以提取足够的图像特征，但是对于基于RNN的代码而言，将这些抽象图像特征解释为数百个代码符号仍然是一项巨大的挑战. 考虑到用于描述GUI的代码通常是分层结构，我们提出了一种基于注意力的代码生成模型，该模型可以描述GUI图像的详细程度更高，还可以生成GUI的图形元素. 一致的分层结构化代码. 我们的模型遵循编码器-框架，并且可以以端到端的方式联合训练所有组件. 实验结果表明，该方法在公共GUI代码数据集和我们提出的数据集中都超过了当前其他最佳方法.

本文提出的方法

我们的方法将GUI屏幕截图作为输入，生成一种描述它的编程语言，并旨在利用GUI和图形程序的分层功能. 图2显示了我们基于注意力的分层代码生成模型. 我们首先使用来自CNN的中间滤波器响应来构造图像的高级抽象视觉表示（用ν表示），然后将其输入到分层LSTM的两个级别中: 块LSTM和令牌LSTM. LSTM块接收图像的视觉特征，然后确定使用多少代码块来生成最终程序. 在每个时间步t，将块LSTM h ^ block_t的隐藏状态作为指导向量提供给注意模型，以选择视觉特征图中最重要的子区域. 给定选定的视觉特征作为上下文，令牌LSTM会生成与代码块相对应的代码.

图2: 我们提出的用于自动生成图形程序的模型的概述. 首先将输入GUI的屏幕截图提供给CNN以获取高级视觉功能. 将所有视觉特征投影为R ^ D，合并以获得紧凑的图像表示形式，然后将其作为输入提供给块LSTM. 块LSTM确定基于p_t生成的代码块的数量，并生成导引向量h ^ block_t，然后将其引入注意模型以选择特定的CNN特征以输入第t个令牌LSTM来生成第t个令牌代码块代码.

使用分层LSTM可以以端到端的方式训练整个模型. 训练数据由（x，y）对组成，其中x代表输入GUI的屏幕截图，y代表GUI的相应代码. 与pix2code中的方法不同，固定大小的滑动窗口用于获取代码片段，然后在不同的训练迭代中将其馈送到“编码器” LSTM. 我们的方法只需要向模型提供一次完整的代码即可.

实验

我们在两个数据集上实现了本文中提出的自动图形编程生成模型，每个数据集由GUI屏幕截图和相应的源代码组成.

我们首先将输入图像的大小更改为256×256，然后对像素值进行归一化. 在编码部分，为了执行更好的压缩，我们在pix2code纸中使用了基于CNX的编码架构，该架构包含三个宽度分别为32、64和128的卷积层以及两个完全连接的层. 在解码部分代码设计图，模块LSTM和tokenLSTM的输入维都设置为512，并且将Sigmoid用作非线性激活函数. 此外，由于我们的令牌词汇量很小，因此我们直接使用具有一键编码矢量的令牌级语言模型.

在训练过程中，我们使用Adam算法更新模型，并且最小批量大小为128. 将模型的学习率设置为0.001，将辍学率设置为0.5. 使用单个NVIDIA TITAN X GPU，整个训练过程在PixCo数据集上大约需要3个小时，在PixCo-e数据集上大约需要6个小时.

图3: 我们在PixCo数据集上的模型的定性结果. 黑色表示我们的模型生成的DSL代码，蓝色表示实值DSL代码，GUI屏幕截图如图所示. a，b和c分别代表iOS，Android和Web平台.

图4: 注意力随着时间变化. 当模型生成每个模块时，其注意力会发生变化，以反映图像的相关部分. 明亮的区域表示关注的重点，而黑暗的区域关注较少. 橙色代码是当前步骤生成的模块.

表1: 在PixCo和PixCo-e数据集上，baseline-2方法与本文提出的方法之间的模块划分精度的性能比较.

表2: 建议的方法与测试集上的baseline-1，baseline-2和pix2code方法的性能比较. 所有方法都使用贪婪搜索策略.

图5: 来自基于Web的GUI数据集的实验样本. 左侧的样本来自PixCo数据集，右侧的样本来自PixCo-e数据集.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-276615-1.html