基于GRU注意力模型的前端代码自动生成的方法及系统技术方案

本发明专利技术提供了一种基于GRU注意力模型的前端代码自动生成的方法及系统，该方法包括：应用CNN算法提取目标UI图像对应的视觉特征向量；基于计算机程序语言DSL对所述目标UI图像进行语言描述，以生成语言描述信息；将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码。本发明专利技术能够生成层次性更强的计算机代码，并适用于更加多样的语言场景，提升解码效率，更适用于工程应用场景。

Method and system of automatic generation of front-end code based on Gru attention model

【技术实现步骤摘要】
基于GRU注意力模型的前端代码自动生成的方法及系统
本专利技术涉及深度学习
，尤其涉及一种基于GRU注意力模型的前端代码自动生成的方法及系统。
技术介绍
目前对于同一移动终端应用(如手机银行APP)，需要多种前端技术来实现同一功能的不同版本，如IOS、Android、H5和微信小程序等。开发者需要在前端界面的样式布局花费不少的时间和精力，维护成本较高，程序复用性不强。因此需要研究一个根据UI设计图自动生成前端代码的框架算法。使用机器学习算法自动生成代码的技术是近年来热门研究领域。典型的业界研究工作DeepCoder，通过统计预测增强传统搜索技术，从而生成计算机代码。在另外一项工作中，研究者通过研究不同的解释器组合来生成计算机代码。但是，大多数研究方法都依赖于特定领域(DSL)的语言，不适用于过于复杂多样的语言建模。采用长短期记忆LSTM(LongShorttermMemory)模型实现的前端代码自动生成算法pix2Code，通过提取图像元素，结合语言场景，输入LSTM模型中进行训练，生成对应正确的计算机代码。但在pix2code的方法中，LSTM算法需要提前设置可生成的最大序列长度为固定值，因此该算法在更复杂更精细的语言场景下表现不佳，拓展性不强。然后，pix2code方法没有考虑图像中各个目标的局部位置和相对关系，没有从整体考虑各个目标的上下文信息，因此生成代码的结构性和层次性不高。此外，pix2code方法基于的LSTM算法，在处理较长序列时会较为棘手，网络较深计算量会较大，导致耗时较长，需要耗费更多计算资源，不利于工程应用场景。
技术实现思路
针对现有技术中的问题，本专利技术提出了一种基于GRU注意力模型的前端代码自动生成的方法及系统，以生成层次性更强的计算机代码，并适用于更加多样的语言场景，提升解码效率，更适用于工程应用场景。为了解决上述技术问题，本专利技术提供以下技术方案，包括：第一方面，本专利技术提供一种基于GRU注意力模型的前端代码自动生成的方法，包括：应用CNN算法提取目标UI图像对应的视觉特征向量；基于计算机程序语言DSL对所述目标UI图像进行语言描述，以生成语言描述信息；将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码。进一步地，所述的基于GRU注意力模型的前端代码自动生成的方法，还包括：应用多组UI图像与对应的计算机程序语言DSL数据对GRU注意力模型进行训练，生成所述代码生成模型。进一步地，所述应用多组UI图像与对应的计算机程序语言DSL数据对GRU注意力模型进行训练，生成所述代码生成模型，包括：获取多组UI图像与对应的计算机程序语言DSL数据；将所述UI图像对应的视觉特征向量和语言描述信息输入GRU注意力模型；最小化所述GRU注意力模型的输出值与所述计算机程序语言DSL数据的损失函数，以获取GRU注意力模型的最优模型参数。进一步地，所述基于计算机程序语言DSL对所述目标UI图像进行语言描述，包括：应用所述计算机程序语言DSL对所述目标UI图的布局、不同的组件区分以及组件间位置关系进行描述。进一步地，所述预获取的代码生成模型包括：层级GRU分模型、注意力机制分模型和序列级GRU分模型。进一步地，所述将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，包括：将所述视觉特征向量中的单列视觉特征向量输入所述层级GRU分模型并将输出的结果作为层级化视觉特征向量；将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数；将所述注意力系数作为所述序列级GRU分模型的输入并将输出的结果作为对应计算机程序语言DSL的目标序列值。进一步地，所述将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数，包括：将所述层级化视觉特征向量输入预设的MLP神经网络模型，并将该预设的MLP神经网络模型的输出结果与预获取的样本参数进行相似度计算；将所述相似度计算的结果进行归一化处理，并将归一化处理后获得的权重系数进行加权求和，得到所述注意力系数。进一步地，所述根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码，包括：将所述目标计算机程序语言DSL数据输入随机化用户界面生成器工具，以将该目标计算机程序语言DSL数据进行渲染并生成该目标计算机程序语言DSL数据对应的前端代码。第二方面，本专利技术提供一种基于GRU注意力模型的前端代码自动生成的系统，包括：视觉数据处理装置，用于应用CNN算法提取目标UI图像对应的视觉特征向量；语言描述建立装置，用于基于计算机程序语言DSL对所述目标UI图像进行语言描述，以生成语言描述信息；编译器处理装置，用于将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码。进一步地，所述的基于GRU注意力模型的前端代码自动生成的系统，还包括：解码器训练装置，用于应用多组UI图像与对应的计算机程序语言DSL数据对GRU注意力模型进行训练，生成所述代码生成模型。进一步地，所述解码器训练装置包括：采集模块，用于获取多组UI图像与对应的计算机程序语言DSL数据；输入模块，用于将所述UI图像对应的视觉特征向量和语言描述信息输入GRU注意力模型；处理模块，用于最小化所述GRU注意力模型的输出值与所述计算机程序语言DSL数据的损失函数，以获取GRU注意力模型的最优模型参数。进一步地，所述语言描述建立装置，包括：描述模块，用于应用所述计算机程序语言DSL对所述目标UI图的布局、不同的组件区分以及组件间位置关系进行描述。进一步地，所述预获取的代码生成模型包括：层级GRU分模型、注意力机制分模型和序列级GRU分模型。进一步地，所述编译器处理装置，包括：获取层级化视觉特征向量模块，用于将所述视觉特征向量中的单列视觉特征向量输入所述层级GRU分模型并将输出的结果作为层级化视觉特征向量；获取注意力系数模块，用于将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数；获取目标序列值模块，用于将所述注意力系数作为所述序列级GRU分模型的输入并将输出的结果作为对应计算机程序语言DSL的目标序列值。进一步地，所述获取注意力系数模块，包括：相似度计算单元，用于将所述层级化视觉特征向量输入预设的MLP神经网络模型，并将该预设的MLP神经网络模型的输出结果与预获取的样本参数进行相似度计算；处理单元，用于将所述相似度计算的结果进行归一化处理，并将归一化处理后获得的权重系数进行加权求和，得到所本文档来自技高网...

【技术保护点】
1.一种基于GRU注意力模型的前端代码自动生成的方法，其特征在于，包括：/n应用CNN算法提取目标UI图像对应的视觉特征向量；/n基于计算机程序语言DSL对所述目标UI图像进行语言描述，以生成语言描述信息；/n将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码。/n

【技术特征摘要】
1.一种基于GRU注意力模型的前端代码自动生成的方法，其特征在于，包括：
应用CNN算法提取目标UI图像对应的视觉特征向量；
基于计算机程序语言DSL对所述目标UI图像进行语言描述，以生成语言描述信息；
将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码。


2.根据权利要求1所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，还包括：
应用多组UI图像与对应的计算机程序语言DSL数据对GRU注意力模型进行训练，生成所述代码生成模型。


3.根据权利要求2所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，所述应用多组UI图像与对应的计算机程序语言DSL数据对GRU注意力模型进行训练，生成所述代码生成模型，包括：
获取多组UI图像与对应的计算机程序语言DSL数据；
将所述UI图像对应的视觉特征向量和语言描述信息输入GRU注意力模型；
最小化所述GRU注意力模型的输出值与所述计算机程序语言DSL数据的损失函数，以获取GRU注意力模型的最优模型参数。


4.根据权利要求1所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，所述基于计算机程序语言DSL对所述目标UI图像进行语言描述，包括：
应用所述计算机程序语言DSL对所述目标UI图的布局、不同的组件区分以及组件间位置关系进行描述。


5.根据权利要求1所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，所述预获取的代码生成模型包括：
层级GRU分模型、注意力机制分模型和序列级GRU分模型。


6.根据权利要求5所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，所述将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标UI图像对应的目标计算机程序语言DSL数据，包括：
将所述视觉特征向量中的单列视觉特征向量输入所述层级GRU分模型并将输出的结果作为层级化视觉特征向量；
将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数；
将所述注意力系数作为所述序列级GRU分模型的输入并将输出的结果作为对应计算机程序语言DSL的目标序列值。


7.根据权利要求6所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，所述将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数，包括：
将所述层级化视觉特征向量输入预设的MLP神经网络模型，并将该预设的MLP神经网络模型的输出结果与预获取的样本参数进行相似度计算；
将所述相似度计算的结果进行归一化处理，并将归一化处理后获得的权重系数进行加权求和，得到所述注意力系数。


8.根据权利要求1所述的基于GRU注意力模型的前端代码自动生成的方法，其特征在于，所述根据该目标计算机程序语言DSL数据获取所述目标UI图像对应的前端代码，包括：
将所述目标计算机程序语言DSL数据输入随机化用户界面生成器工具，以将该目标计算机程序语言DSL数据进行渲染并生成该目标计算机程序语言DSL数据对应的前端代码。


9.一种基于GRU注意力模型的前端代码自动生成的系统，其特征在于，包括：
视觉数据处理装置，用于应用CNN算法提取目标UI图像对应的视觉特征向量；
...

【专利技术属性】
技术研发人员：吴书迪，王鹏晴，
申请(专利权)人：中国银行股份有限公司，
类型：发明
国别省市：北京;11