Zhihao Zhu等作者arXiv选自

前端设计图转代码,西安交大表示复杂界面也能一步步搞定

卷积神经网络在图像处理上无与伦比,它可以从图像抽取到非常精炼的高级语义特征,这些信息不论是做分类还是做定位都没问题。但如果我们利用这些特征生成用户界面代码呢?那么就需要同样强大的模型将这些高级特征解码为一条条代码。最近西安交通大学提出一种用户界面转代码的新算法,该算法根据代码的层级特性构建了一种基于注意力的强大解码器。



使用机器学习技术自动生成图形用户界面(GUI)代码是一个相对较新的研究领域。通常,按照设计编写 GUI 对前端开发者来说是一项耗时又繁琐的工作,因为这使得他们无法投入更多的时间来开发软件的实用功能和逻辑。因此,构建一个将 GUI 原型自动转化为对应编程代码的系统是非常有前景的。

近期人们使用机器学习技术自动生成人类可读格式的程序,它们使用梯度下降从输入-输出样本中导出源代码。然而,它们的性能被证明还不如基于离散搜索的传统技术,这一技术一直在编程语言社区得到广泛哦使用。另一个同类研究是 DeepCoder,该系统尝试利用统计预测来增强传统搜索技术,以生成计算机程序。然而,它对复杂编程语言建模的能力受限于其对特定领域语言(DSL)的依赖。

对于从视觉输入生成代码的任务,目前只有为数不多的几项研究,而其中,与本文研究最相似的是 pix2code。pix2code 采用反馈机制,其中解码过程可以通过两种不同级别的 LSTM 迭代进行:「编码」LSTM,对已经生成的代码序列进行编码以减轻「解码」LSTM 学习长序列关系的负担。「解码」LSTM,用于代码序列生成,然后将解码 token 序列返回给「解码」LSTM 以形成反馈循环。通过采用反馈机制,pix2code 能够生成比其它基于单流程的方法长得多的单词/token 序列。但是,它们的方法需要预先固定「编码」LSTM 可以生成的最大序列长度。也就是说,代码长度范围需要预先指定,这降低了该方法的可拓展性和泛化能力。该方法的另一个明显缺陷是,它没有把 GUI 及其代码的层次结构纳入考虑,这限制了其生成准确图形程序的性能。

为了解决这些问题,研究者们提出了一种用于自动生成图形编程的新方法。它不仅能很好地解决长期依赖性问题,同时还能通过将代码生成过程以层级的方式表示出来而捕捉到代码的层级结构。研究者们的新方法使用层级解码器来推理代码序列,并一个接一个模块地生成图形源代码。

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

图 1:给定一张 GUI 截屏图像后,研究者新模型所生成的代码示例。其中 (a) 为输入 GUI,它会以某些方式分割为 5 个模块。(b) 展示了模型根据 5 个模块所对应生成的 DSL 代码,最后 (c) 为根据前面所生成的 DSL 代码而重新渲染的 GUI。

研究者在 pix2code 所提供的基准数据集进行了测试,且实验结果表明他们的方法是非常高效的:他们的模型在所有三种子数据集(IOS、安卓和网页端)都比目前最优的方法要好。此外为了进一步说明他们提出的模型在处理复杂的 GUI 时有更强的优势,他们构建了一个新数据集,该数据集包含具有更多图形元素的 GUI 截图,且图形元素的样式和空间布局更加多样化。研究者表示在新的复杂数据集上,他们的方法会以更大的优势好于其它对比的方法。

论文:Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder

论文地址:https://arxiv.org/pdf/1810.11536.pdf

摘要:近期深度学习的研究进展使得利用编码器-解码器框架自动地将图形用户界面(GUI)截图转换为代码变得可能。尽管常用的图像编码器(例如 CNN 网络)能提取足够的图像特征,将这些抽象图像特征解释为数百代码符号对基于 RNN 的代码生成器而言是很大的挑战。考虑到用于描述 GUI 的代码通常是分层的结构,我们提出了一种基于注意力的代码生成模型,它可以用更精细级别的细节描述 GUI 图像,同时也可以生成和 GUI 的图形元素的分层展开一致的分层结构化代码。我们的模型遵循编码器-解码器框架,所有的组件都能以端到端的方式联合训练。实验结果表明我们的方法在公开 GUI-代码数据集和我们提出的数据集上都超越了其它当前最佳方法。

本文提出的方法

我们的方法将一个 GUI 截图作为输入,生成编程语言来描述它,并被设计为能利用 GUI 和图形程序的分层特征。图 2 展示了我们的基于注意力的分层代码生成模型。我们首先使用从 CNN 得到的中间滤波器响应来构建图像的高级抽象视觉表征,由ν表示,然后将其输入到两个层级的分层 LSTM:一个 block LSTM 和一个 token LSTM。block LSTM 接收图像的视觉特征,然后确定用多少代码块来生成最终的程序。block LSTM 的隐藏状态 h^block_t 在每个时间步 t 被馈送到一个注意力模型作为引导向量来选择视觉特征图中最重要的子区域。给定选取的视觉特征作为语境,token LSTM 生成对应代码块的代码。

图 2:我们提出的用于自动生成图形程序的模型概览。输入 GUI 截图首先被馈送到 CNN 获取高级视觉特征。所有的视觉特征被投影为 R^D,经过池化得到紧凑的图像表征,然后被馈送到 block LSTM 作为输入。block LSTM 确定生成基于 p_t 的代码块数量,并生成引导向量 h^block_t,再被馈送到注意力模型来选择特定 CNN 特征,以输入第 t 个 token LSTM 来生成第 t 个代码块的代码。

使用分层 LSTM 使得以端到端的方式训练整个模型成为可能。训练数据由 (x,y) 对构成,其中 x 代表输入 GUI 截图,y 代表 GUI 的对应代码。和 pix2code 中的方法不同,其中使用了一个固定尺寸的滑动窗口来获取代码片段,再在不同的训练迭代中馈送到「编码器」LSTM 中,我们的方法仅需要馈送一次完整的代码到模型中。

实验

我们在两个数据集上实现了该论文提出的自动图编程生成模型,每个数据集都由 GUI 截图与对应的源代码组成。

  • 第一个是由 pix2code 论文给出的公开数据集 PixCo;

  • 第二个是我们自己的数据集:PixCo-e 数据集。

我们首先重新把输入图像的大小改为 256×256,然后对像素值进行归一化。在编码部分,为了进行更好地压缩,我们采用 pix2code 论文中同样基于 CNN 的编码架构,它包含 3 个宽度分别为 32、64、128 的卷积层,和两个全连接层。在解码部分,模块 LSTM 和 tokenLSTM 的输入维度都设定为 512,sigmoid 被用作非线性激活函数。此外,因为我们的 token 词汇很小,我们直接使用带有 one-hot 编码向量的 token 级别的语言模型

在训练流程中,我们使用 Adam 算法进行模型更新,mini-batch 大小为 128。我们把模型的学习率设定为 0.001,dropout 率设定为 0.5。使用单个英伟达 TITAN X GPU,整个训练流程在 PixCo 数据集上大约花费 3 小时,在 PixCo-e 数据集上大约花费 6 小时。

图 3:我们的模型在 PixCo 数据集上的定性结果。黑色代表我们的模型生成的 DSL 代码,蓝色的是真实值 DSL 代码,GUI 截图如图中所示。a、b、c 分别代表 iOS、安卓和 Web 平台。

图 4:随着时间推移变化的注意力。随着模型生成每个模块,其注意力有所改变,从而反映出图像的相关部分。亮色区域表示注意力所在,暗色区域注意较少。橘色代码是当前步骤生成的模块。

表 1:基线-2 方法和本文提出的方法在 PixCo 和 PixCo-e 数据集上模块划分准确率的性能对比。

表 2:本文提出方法与基线-1、基线-2 和 pix2code 方法在测试集上的性能对比。所有方法都使用贪婪搜索策略。

图 5:来自基于网页的 GUI 数据集的实验样本。左边的样本来自 PixCo 数据集,右边的样本来自 PixCo-e 数据集。

理论论文代码编码器-解码器模型
3
相关数据
深度学习技术

深度学习(deep learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。 深度学习是机器学习中一种基于对数据进行表征学习的算法,至今已有数种深度学习框架,如卷积神经网络和深度置信网络和递归神经网络等已被应用在计算机视觉、语音识别、自然语言处理、音频识别与生物信息学等领域并获取了极好的效果。

池化技术

池化(Pooling)是卷积神经网络中的一个重要的概念,它实际上是一种形式的降采样。有多种不同形式的非线性池化函数,而其中“最大池化(Max pooling)”是最为常见的。它是将输入的图像划分为若干个矩形区域,对每个子区域输出最大值。直觉上,这种机制能够有效的原因在于,在发现一个特征之后,它的精确位置远不及它和其他特征的相对位置的关系重要。池化层会不断地减小数据的空间大小,因此参数的数量和计算量也会下降,这在一定程度上也控制了过拟合。通常来说,CNN的卷积层之间都会周期性地插入池化层。

激活函数技术

在 计算网络中, 一个节点的激活函数定义了该节点在给定的输入或输入的集合下的输出。标准的计算机芯片电路可以看作是根据输入得到"开"(1)或"关"(0)输出的数字网络激活函数。这与神经网络中的线性感知机的行为类似。 一种函数(例如 ReLU 或 S 型函数),用于对上一层的所有输入求加权和,然后生成一个输出值(通常为非线性值),并将其传递给下一层。

机器学习技术

机器学习是人工智能的一个分支,是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、计算复杂性理论等多门学科。机器学习理论主要是设计和分析一些让计算机可以自动“学习”的算法。因为学习算法中涉及了大量的统计学理论,机器学习与推断统计学联系尤为密切,也被称为统计学习理论。算法设计方面,机器学习理论关注可以实现的,行之有效的学习算法。

基准技术

一种简单的模型或启发法,用作比较模型效果时的参考点。基准有助于模型开发者针对特定问题量化最低预期效果。

学习率技术

在使用不同优化器(例如随机梯度下降,Adam)神经网络相关训练中,学习速率作为一个超参数控制了权重更新的幅度,以及训练的速度和精度。学习速率太大容易导致目标(代价)函数波动较大从而难以找到最优,而弱学习速率设置太小,则会导致收敛过慢耗时太长

梯度下降技术

梯度下降是用于查找函数最小值的一阶迭代优化算法。 要使用梯度下降找到函数的局部最小值,可以采用与当前点的函数梯度(或近似梯度)的负值成比例的步骤。 如果采取的步骤与梯度的正值成比例,则接近该函数的局部最大值,被称为梯度上升。

准确率技术

分类模型的正确预测所占的比例。在多类别分类中,准确率的定义为:正确的预测数/样本总数。 在二元分类中,准确率的定义为:(真正例数+真负例数)/样本总数

逻辑技术

人工智能领域用逻辑来理解智能推理问题;它可以提供用于分析编程语言的技术,也可用作分析、表征知识或编程的工具。目前人们常用的逻辑分支有命题逻辑(Propositional Logic )以及一阶逻辑(FOL)等谓词逻辑。

生成模型技术

在概率统计理论中, 生成模型是指能够随机生成观测数据的模型,尤其是在给定某些隐含参数的条件下。 它给观测值和标注数据序列指定一个联合概率分布。 在机器学习中,生成模型可以用来直接对数据建模(例如根据某个变量的概率密度函数进行数据采样),也可以用来建立变量间的条件概率分布。

语言模型技术

语言模型经常使用在许多自然语言处理方面的应用,如语音识别,机器翻译,词性标注,句法分析和资讯检索。由于字词与句子都是任意组合的长度,因此在训练过的语言模型中会出现未曾出现的字串(资料稀疏的问题),也使得在语料库中估算字串的机率变得很困难,这也是要使用近似的平滑n元语法(N-gram)模型之原因。

推荐文章
暂无评论
暂无评论~