基于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神经网络模型的输出结果与预获取的样本参数进行相似度计算；处理单元，用于将所述相似度计算的结果进行归一化处理，并将归一化处理后获得的权重系数进行加权求和，得到所述注意力系数。
进一步地，所述编译器处理装置，包括：获取前端代码模块，用于将所述目标计算机程序语言dsl数据输入随机化用户界面生成器工具，以将该目标计算机程序语言dsl数据进行渲染并生成该目标计算机程序语言dsl数据对应的前端代码。
第三方面，本发明提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述的基于gru注意力模型的前端代码自动生成的方法的步骤。
第四方面，本发明提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被执行时实现所述的基于gru注意力模型的前端代码自动生成的方法的步骤。
由上述技术方案可知，本发明提供一种基于gru注意力模型的前端代码自动生成的方法及系统。其中，该方法包括：应用cnn算法提取目标ui图像对应的视觉特征向量；基于计算机程序语言dsl对所述目标ui图像进行语言描述，以生成语言描述信息；将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标ui图像对应的目标计算机程序语言dsl数据，根据该目标计算机程序语言dsl数据获取所述目标ui图像对应的前端代码。本发明能够提高提取ui图像细节的质量，生成不同层级的分层结构化代码，并且基于局部区域对整体有更高层次的语义解析，提高前端代码自动生成的准确性的同时降低计算量，提高效率，并且适用于不同的终端设备和前端技术框架生成不同平台的前端代码，适用于复杂的应用场景。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例中基于gru注意力模型的前端代码自动生成的方法的流程示意图；
图2是本发明又一实施例中基于gru注意力模型的前端代码自动生成的方法的流程示意图；
图3是本发明实施例中基于gru注意力模型的前端代码自动生成的方法步骤s011至s013的流程示意图；
图4是本发明实施例中基于gru注意力模型的前端代码自动生成的方法步骤s301至s303的流程示意图；
图5是本发明实施例中基于gru注意力模型的前端代码自动生成的方法步骤s321和s322的流程示意图；
图6是本发明实施例中基于gru注意力模型的前端代码自动生成的系统的结构示意图；
图7是本发明实施例中基于gru注意力模型的前端代码自动生成装置的结构示意图；
图8是本发明实施例中gru注意力模型的结构示意图；
图9是本发明实施例中注意力机制模块实现的功能的流程示意图；
图10是本发明实施例中训练gru注意力模型单元的结构示意图；
图11是本发明具体应用实例中目标ui图像、目标子区域及代码块之间的关系示意图；
图12为本发明实施例的电子设备9600的系统构成示意框图。
具体实施方式
为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
目前，前端开发者需要花费大量的时间针对gui界面(graphicaluserinterface，图形用户界面)进行编码工作，导致不能把更多精力投入到框架设计和页面逻辑的核心工作中。此外，基于不同的终端设备和前端技术框架(ios、android、h5、小程序)，必须使用各自特定平台的前端开发语言完成前端页面开发，导致大量的重复性工作。
为了解决上述问题，现有技术提供基于计算机视觉算法来生成代码的思路。pix2code将根据ui图自动生成代码的问题分解为三个子问题：
(1)视觉模型建立：对ui设计图的图像识别及理解问题，包括推断ui图中元素的属性和位置，业界通用cnn算法从训练图片集中学习特征，映射图片为固定长度向量。
(2)语言模型建立：对计算机程序的语言建模问题，并生成结合语构语义的正确样本，在问题中用于使用简单dsl描述gui界面中组件的名称、布局、位置关系。
(3)解码器：结合前两个模型，通过提取图像元素，结合语言场景，输入lstm模型中进行训练，生成对应正确的计算机代码。其中，pix2code采用一种反馈机制，基于长短期循环神经网络(lstm)提出优化解码过程的方法。其中解码过程可以通过两种阶段的lstm算法迭代进行：
(1)“编码lstm”对已经生成的代码序列进行编码以减轻“解码lstm”学习长序列关系的负担。
(2)“解码lstm”用于生成代码序列，并且将解码token序列返回给“编码lstm”以形成反馈循环。通过采用反馈机制，pix2code能够生成比其它基于单流程的方法长得多的单词/token序列。
但pix2code的方法中，“编码lstm”需要提前设置可生成的最大序列长度为固定值。因此该算法在更复杂更精细的语言场景下表现不佳，拓展性不强。pix2code方法没有考虑图像中各个目标的局部位置和相对关系，没有从整体考虑各个目标的上下文信息，因此生成代码的结构性和层次性不高。此外，pix2code方法基于的lstm算法，在处理较长序列时会较为棘手，网络较深计算量会较大，导致耗时较长，不利于工程应用场景。
因此本发明针对上述问题，提出一种基于gru注意力模型的前端代码自动生成的方法及系统，基于注意力机制的gru(gatedrecurrentunit，lstm变体)进行语言建模，以生成层次性更强的计算机代码，并适用于更加多样的语言场景，提升解码效率，更适用于工程应用场景。
为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，本发明实施例提供一种基于gru注意力模型的前端代码自动生成的系统，该系统可以是一服务器或客户端设备，所述客户端设备可以包括智能手机、平板电子设备、网络机顶盒、便携式计算机、台式电脑、个人数字助理(pda)、车载设备和智能穿戴设备等。其中，所述智能穿戴设备可以包括智能眼镜、智能手表和智能手环等。
在实际应用中，进行前端代码自动生成的部分可以在如上述内容所述的服务器侧执行，也可以所有的操作都在所述客户端设备中完成。具体可以根据所述客户端设备的处理能力，以及用户使用场景的限制等进行选择。本发明对此不作限定。若所有的操作都在所述客户端设备中完成，所述客户端设备还可以包括处理器。
上述的客户端设备可以具有通信模块(即通信单元)，可以与远程的服务器进行通信连接，实现与所述服务器的数据传输。所述服务器可以包括任务调度中心一侧的服务器，其他的实施场景中也可以包括中间平台的服务器，例如与任务调度中心服务器有通信链接的第三方服务器平台的服务器。所述的服务器可以包括单台计算机设备，也可以包括多个服务器组成的服务器集群，或者分布式装置的服务器结构。
所述服务器与所述客户端设备之间可以使用任何合适的网络协议进行通信，包括在本发明提交日尚未开发出的网络协议。所述网络协议例如可以包括tcp/ip协议、udp/ip协议、http协议、https协议等。当然，所述网络协议例如还可以包括在上述协议之上使用的rpc协议(remoteprocedurecallprotocol，远程过程调用协议)、rest协议(representationalstatetransfer，表述性状态转移协议)等。
具体通过下述各个实施例进行说明。
如图1所示，为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，本实施例提供一种执行主体是基于gru注意力模型的前端代码自动生成的系统的基于gru注意力模型的前端代码自动生成的方法的具体实施方式，具体包含有如下内容：
s100：应用cnn算法提取目标ui图像对应的视觉特征向量。
s200：基于计算机程序语言dsl对所述目标ui图像进行语言描述，以生成语言描述信息。
s300：将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标ui图像对应的目标计算机程序语言dsl数据，根据该目标计算机程序语言dsl数据获取所述目标ui图像对应的前端代码。
为了进一步说明本方案，在本发明的一个具体应用实例中，所述基于gru注意力模型的前端代码自动生成的方法，具体包含有：
1)接收终端发送的目标金融交易页面样式图像，其中，该金融交易页面样式为转账交易页面样式、外汇交易页面样式或对账页面样式。
2)应用cnn算法提取所述目标金融交易页面样式图像的视觉特征向量。
3)基于计算机程序语言dsl对所述目标金融交易页面样式图像进行语言描述，以生成语言描述信息。
4)将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将输出结果作为所述目标金融交易页面样式图像对应的目标计算机程序语言dsl数据，根据该目标计算机程序语言dsl数据获取所述目标金融交易页面样式图像对应的前端代码。
5)基于所述前端代码生成所述目标金融交易页面样式图像对应的目标金融交易页面。
本具体应用实例能够提高生成目标金融交易页面的效率和可靠性，可以生成适用于多种应用场景的前端代码，例如，ios和android。
参见图2，为了通过训练代码生成模型提高获取计算机程序语言dsl数据的准确性和效率，进而提高前端代码自动生成的准确性和高效性，在本发明一个实施例中，还包含有：
s010：应用多组ui图像与对应的计算机程序语言dsl数据对gru注意力模型进行训练，生成所述代码生成模型。
具体地，任一组所述ui图像与对应的计算机程序语言dsl数据包含有ui图像和其对应的计算机程序语言dsl数据。
参见图3，为了进一步提高生成的前端代码的可靠性和准确性，在本发明一个实施例中，步骤s010包含有：
s011：获取多组ui图像与对应的计算机程序语言dsl数据。
s012：将所述ui图像对应的视觉特征向量和语言描述信息输入gru注意力模型。
s013：最小化所述gru注意力模型的输出值与所述计算机程序语言dsl数据的损失函数，以获取gru注意力模型的最优模型参数。
为了进一步提高前端代码自动生成的准确性和效率，在本发明一个实施例中，步骤s100包含有：
s101：应用所述计算机程序语言dsl对所述目标ui图的布局、不同的组件区分以及组件间位置关系进行描述。
为了进一步提高前端代码生成的自动化程度和可靠性，在本发明一个或多个实施例中，所述预获取的代码生成模型包含有：层级gru分模型、注意力机制分模型和序列级gru分模型。
参见图4，为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，在本发明一个实施例中，步骤s300包含有：
s301：将所述视觉特征向量中的单列视觉特征向量输入所述层级gru分模型并将输出的结果作为层级化视觉特征向量。
s302：将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数。
s303：将所述注意力系数作为所述序列级gru分模型的输入并将输出的结果作为对应计算机程序语言dsl的目标序列值。
参见图5，为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，在本发明一个实施例中，步骤s302包含有：
s321：将所述层级化视觉特征向量输入预设的mlp神经网络模型，并将该预设的mlp神经网络模型的输出结果与预获取的样本参数进行相似度计算。
具体地，所述预设的mlp神经网络模型可以是现有的mlp神经网络模型，mlp神经网络模型可根据多个层级化视觉特征向量及对应的输出训练mlp神经网络模型。所述预获取的样本参数可根据实际情况进行设置。
s322：将所述相似度计算的结果进行归一化处理，并将归一化处理后获得的权重系数进行加权求和，得到所述注意力系数。
为了提高代码生成模型的可靠性，进而提高生成的前端代码的层次性和语言应用场景的多样性，在本发明一个实施例中，步骤s300包含有：
s304：将所述目标计算机程序语言dsl数据输入随机化用户界面生成器工具，以将该目标计算机程序语言dsl数据进行渲染并生成该目标计算机程序语言dsl数据对应的前端代码。
从软件层面来说，为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，本发明实施例提供一种基于gru注意力模型的前端代码自动生成的方法中全部或部分内容的基于gru注意力模型的前端代码自动生成的系统的具体实施方式，参见图6，所述基于gru注意力模型的前端代码自动生成的系统具体包含有如下内容：
视觉数据处理装置10，用于应用cnn算法提取目标ui图像对应的视觉特征向量。
语言描述建立装置20，用于基于计算机程序语言dsl对所述目标ui图像进行语言描述，以生成语言描述信息。
编译器处理装置30，用于将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标ui图像对应的目标计算机程序语言dsl数据，根据该目标计算机程序语言dsl数据获取所述目标ui图像对应的前端代码。
在本发明一个实施例中，所述基于gru注意力模型的前端代码自动生成的系统还包含有：
解码器训练装置，用于应用多组ui图像与对应的计算机程序语言dsl数据对gru注意力模型进行训练，生成所述代码生成模型。
在本发明一个实施例中，所述解码器训练装置包含有：
采集模块，用于获取多组ui图像与对应的计算机程序语言dsl数据。
输入模块，用于将所述ui图像对应的视觉特征向量和语言描述信息输入gru注意力模型。
处理模块，用于最小化所述gru注意力模型的输出值与所述计算机程序语言dsl数据的损失函数，以获取gru注意力模型的最优模型参数。
在本发明一个实施例中，所述语言描述建立装置具体包含有：
描述模块，用于应用所述计算机程序语言dsl对所述目标ui图的布局、不同的组件区分以及组件间位置关系进行描述。
在本发明一个实施例中，所述预获取的代码生成模型包含有：层级gru分模型、注意力机制分模型和序列级gru分模型。
在本发明一个实施例中，所述编译器处理装置包含有：
获取层级化视觉特征向量模块，用于将所述视觉特征向量中的单列视觉特征向量输入所述层级gru分模型并将输出的结果作为层级化视觉特征向量。
获取注意力系数模块，用于将所述层级化视觉特征向量输入所述注意力机制分模型并将输出的结果作为注意力系数。
获取目标序列值模块，用于将所述注意力系数作为所述序列级gru分模型的输入并将输出的结果作为对应计算机程序语言dsl的目标序列值。
在本发明一个实施例中，所述获取注意力系数模块包含有：
相似度计算单元，用于将所述层级化视觉特征向量输入预设的mlp神经网络模型，并将该预设的mlp神经网络模型的输出结果与预获取的样本参数进行相似度计算。
处理单元，用于将所述相似度计算的结果进行归一化处理，并将归一化处理后获得的权重系数进行加权求和，得到所述注意力系数。
在本发明一个实施例中，所述编译器处理装置包含有：
获取前端代码模块，用于将所述目标计算机程序语言dsl数据输入随机化用户界面生成器工具，以将该目标计算机程序语言dsl数据进行渲染并生成该目标计算机程序语言dsl数据对应的前端代码。
本说明书提供的基于gru注意力模型的前端代码自动生成的系统的实施例具体可以用于执行上述基于gru注意力模型的前端代码自动生成的方法的实施例的处理流程，其功能在此不再赘述，可以参照上述基于gru注意力模型的前端代码自动生成的系统实施例的详细描述。
如图7所示，为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，本发明还提供一种基于gru注意力模型的前端代码自动生成装置的实施例100，具体包含有如下内容：
视觉数据处理单元101，使用cnn算法提取目标ui图像中的视觉特征向量。
具体地，所述目标ui图像、目标子区域和代码块之间的关系如图11所示。将目标ui图像作为输入，使用cnn算法提取视觉特征向量，每列向量对应目标ui图像中相应子区域。所述视觉特征向量包含有不同维度的视觉特征向量。所述输出的结果包含有目标ui图像中各元素的属性和位置。cnn算法对应的cnn模型中还包含有对所述目标ui图像进行区域池化，去除目标ui图像中的部分冗余信息。
可以理解的是，在步骤101之前，还包含有：应用训练图片集对cnn模型进行训练，学习特征映射图片为固定长度向量。
语言描述建立单元102，使用简单的计算机程序语言dsl对ui图进行简要描述。
具体地，使用简单计算机程序语言dsl，方法中体现为序列字符串，描述ui图布局、不同的组件区分和组件间位置关系进行描述。图8为使用dsl描述ui图的示意图。
解码器训练单元103，将视觉数据和语言描述作为输入，使用gru注意力模型训练代码生成模型。
具体地，如图8所示，gru注意力模型m200包含有层级gru模块m201、注意力机制模块m202和序列级gru模块m203，所述层级gru模块m201、注意力机制模块m202和序列级gru模块m203实现的功能分别相当于上述层级gru分模型、注意力机制分模型和序列级分模型实现的功能。
层级gru模块m201：将经过cnn算法提取的ui图的视觉特征向量，将单列视觉特征向量输入，使用gru算法进行处理以得到更为层级化的信息，并提供给注意力机制模块作为输入。
gru算法是lstm网络的变体算法，能有效解决rnn网络的长依赖问题。gru算法将忘记门和输入门合成一个单一的更新门，此外还混合了细胞状态和隐藏状态。由于gru算法构造更简单，因此更节省计算时间，更适用于实际应用。
gru(gatedrecurrentunit)神经网络算法计算公式：
zt＝σ(wz·[ht-1,xt])
rt＝σ(wr·[ht-1,xt])
其中，xt表示t时刻的输入，zt、rt分别表示gru神经网络算法的更新门、重置门，ht表示输出门，
注意力机制模块m202：可对层级化的视觉特征向量进行处理，以筛选更关键的视觉信息，耗费的计算资源相对降低，计算结果将作为序列级gru算法的输入。
注意力机制模块m202，如图9所示，实现的功能具体包含有：
m301：将层级gru模块输出的视觉特征向量输入预设的mlp神经网络模型，并将该预设的mlp神经网络模型的输出结果与预获取的样本参数进行相似度计算。
m302：使用softmax算法对m301相似度值进行归一化，以更加突出重要元素的权重。
m303：根据m302得到权重系数，然后进行加权求和即可得到attentionmodel参数。
通过如上三个阶段的计算，即可得到注意力概率分布值，将弱化不重要的信息区域，关注重要信息区域。
注意力机制模块计算公式：
st＝fmlp(we·[ht,xt])
αt＝softmax(st)
其中，st为相似性计算结果，αt为相似度对应的权重系数，
序列级gru模块m203：将注意力机制模块的输出作为输入，使用gru算法计算对应计算机程序语言dsl的序列值。训练样本采用多个图像与计算机程序语言dsl对应的数据，通过最小化gru注意力模型输出值与真实值的损失函数，得到gru注意力模型的最优模型参数。
编译器处理单元104，根据训练过的模型自动生成的计算机程序语言dsl，进而转化对应的前端代码。
具体地，将计算机程序语言dsl作为输入，使用随机化用户界面生成器工具，渲染并生成不同前端代码(ios、android或h5)。
为了通过提高ui图像获取特征的准确性和高效性，进而提高前端代码自动生成的准确性和高效性，在本发明一个实施例中，在步骤101之前还包含有：
应用多个ui图像对应的视觉特征向量，以及各个视觉特征向量对应的计算机程序语言dsl，对gru注意力模型进行训练，获得模型最佳参数配置。
如图10所示，为了通过训练所述前端代码生成模型提高前端代码生成模型输出结果的准确性和可靠性，进一步提高前端代码自动生成的准确性和高效性，所述基于gru注意力模型的前端代码自动生成装置还包含有，训练gru注意力模型单元t400，具体包含有：
获取历史信息组件t401：获取多个ui图像对应的历史描述数据，其中，该历史描述数据包括：所述ui图像对应的视觉特征向量、各个该视觉特征向量对应的计算机程序语言dsl。
训练组件t402：应用所述ui图像对应的历史描述数据对gru注意力模型进行训练，以获得模型最佳参数配置。
从上述描述可知，本发明实施例提供的基于gru注意力模型的前端代码自动生成的方法及系统，基于深度学习算法，将gui界面设计图作为输入，应用神经网络算法提取特征标签，进而通过对计算机编程语言的语言建模，根据不同的标签生成不同平台的代码，也就是说，通过cnn网络算法提取不同维度的图像特征，再基于rnn算法训练计算机语言文本，将两者结合起来完成，生成对应计算机代码，能够提高提取ui图像细节的质量，生成不同层级的分层结构化代码，提高前端代码自动生成的准确性和效率，适用于复杂的应用场景。
从硬件层面来说，为了提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性，本发明提供一种用于实现所述基于gru注意力模型的前端代码自动生成的方法中的全部或部分内容的电子设备的实施例所述电子设备具体包含有如下内容：
处理器(processor)、存储器(memory)、通信接口(communicationsinterface)和总线；其中，所述处理器、存储器、通信接口通过所述总线完成相互间的通信；所述通信接口用于实现所述基于gru注意力模型的前端代码自动生成的系统以及用户终端等相关设备之间的信息传输；该电子设备可以是台式计算机、平板电脑及移动终端等，本实施例不限于此。在本实施例中，该电子设备可以参照实施例用于实现所述基于gru注意力模型的前端代码自动生成的方法的实施例及用于实现所述基于gru注意力模型的前端代码自动生成的系统的实施例进行实施，其内容被合并于此，重复之处不再赘述。
图12为本发明实施例的电子设备9600的系统构成的示意框图。如图12所示，该电子设备9600可以包括中央处理器9100和存储器9140；存储器9140耦合到中央处理器9100。值得注意的是，该图12是示例性的；还可以使用其他类型的结构，来补充或代替该结构，以实现电信功能或其他功能。
在本发明一个或多个实施例中，前端代码自动生成功能可以被集成到中央处理器9100中。其中，中央处理器9100可以被配置为进行如下控制：
s100：应用cnn算法提取目标ui图像对应的视觉特征向量。
s200：基于计算机程序语言dsl对所述目标ui图像进行语言描述，以生成语言描述信息。
s300：将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标ui图像对应的目标计算机程序语言dsl数据，根据该目标计算机程序语言dsl数据获取所述目标ui图像对应的前端代码。
从上述描述可知，本发明的实施例提供的电子设备，能够提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性。
在另一个实施方式中，基于gru注意力模型的前端代码自动生成的系统可以与中央处理器9100分开配置，例如可以将基于gru注意力模型的前端代码自动生成的系统配置为与中央处理器9100连接的芯片，通过中央处理器的控制来实现前端代码自动生成功能。
如图12所示，该电子设备9600还可以包括：通信模块9110、输入单元9120、音频处理器9130、显示器9160、电源9170。值得注意的是，电子设备9600也并不是必须要包括图12中所示的所有部件；此外，电子设备9600还可以包括图12中没有示出的部件，可以参考现有技术。
如图12所示，中央处理器9100有时也称为控制器或操作控件，可以包括微处理器或其他处理器装置和/或逻辑装置，该中央处理器9100接收输入并控制电子设备9600的各个部件的操作。
其中，存储器9140，例如可以是缓存器、闪存、硬驱、可移动介质、易失性存储器、非易失性存储器或其它合适装置中的一种或更多种。可储存上述与失败有关的信息，此外还可存储执行有关信息的程序。并且中央处理器9100可执行该存储器9140存储的该程序，以实现信息存储或处理等。
输入单元9120向中央处理器9100提供输入。该输入单元9120例如为按键或触摸输入装置。电源9170用于向电子设备9600提供电力。显示器9160用于进行图像和文字等显示对象的显示。该显示器例如可为lcd显示器，但并不限于此。
该存储器9140可以是固态存储器，例如，只读存储器(rom)、随机存取存储器(ram)、sim卡等。还可以是这样的存储器，其即使在断电时也保存信息，可被选择性地擦除且设有更多数据，该存储器的示例有时被称为eprom等。存储器9140还可以是某种其它类型的装置。存储器9140包括缓冲存储器9141(有时被称为缓冲器)。存储器9140可以包括应用/功能存储部9142，该应用/功能存储部9142用于存储应用程序和功能程序或用于通过中央处理器9100执行电子设备9600的操作的流程。
存储器9140还可以包括数据存储部9143，该数据存储部9143用于存储数据，例如联系人、数字数据、图片、声音和/或任何其他由电子设备使用的数据。存储器9140的驱动程序存储部9144可以包括电子设备的用于通信功能和/或用于执行电子设备的其他功能(如消息传送应用、通讯录应用等)的各种驱动程序。
通信模块9110即为经由天线9111发送和接收信号的发送机/接收机9110。通信模块(发送机/接收机)9110耦合到中央处理器9100，以提供输入信号和接收输出信号，这可以和常规移动通信终端的情况相同。
基于不同的通信技术，在同一电子设备中，可以设置有多个通信模块9110，如蜂窝网络模块、蓝牙模块和/或无线局域网模块等。通信模块(发送机/接收机)9110还经由音频处理器9130耦合到扬声器9131和麦克风9132，以经由扬声器9131提供音频输出，并接收来自麦克风9132的音频输入，从而实现通常的电信功能。音频处理器9130可以包括任何合适的缓冲器、解码器、放大器等。另外，音频处理器9130还耦合到中央处理器9100，从而使得可以通过麦克风9132能够在本机上录音，且使得可以通过扬声器9131来播放本机上存储的声音。
上述描述可知，本发明的实施例提供的电子设备，能够提高前端代码自动生成的准确性和高效性。
本发明的实施例还提供能够实现上述实施例中的基于gru注意力模型的前端代码自动生成的方法中全部步骤的一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中的基于gru注意力模型的前端代码自动生成的方法的全部步骤，例如，所述处理器执行所述计算机程序时实现下述步骤：
s100：应用cnn算法提取目标ui图像对应的视觉特征向量。
s200：基于计算机程序语言dsl对所述目标ui图像进行语言描述，以生成语言描述信息。
s300：将所述视觉特征向量和语言描述信息输入预获取的代码生成模型，并将该预获取的代码生成模型的输出结果作为所述目标ui图像对应的目标计算机程序语言dsl数据，根据该目标计算机程序语言dsl数据获取所述目标ui图像对应的前端代码。
从上述描述可知，本发明实施例提供的计算机可读存储介质，能够提高前端代码自动生成的准确性和效率，进而提高生成的前端代码的层次性和语言应用场景的多样性。
本发明中上述方法的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。相关之处参见方法实施例的部分说明即可。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
本发明中应用了具体实施例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
- 还没有人留言评论。精彩留言会获得点赞！