【技术实现步骤摘要】
本专利技术涉及计算机信息处理，特别涉及一种基于深度学习的gui代码生成方法。
技术介绍
1、gui设计与开发是现代软件开发过程中的重要内容，美观的gui是吸引用户的关键因素之一。gui设计与开发流程包括：原型设计、工程排期、技术选型、架构设计、ui设计和编写页面。其中，ui设计和编写页面是设计与开发的衔接点，在这两个过程中，ui设计师绘制gui设计图，交给开发人员，由后者对照设计图进行1:1编码实现gui页面。现有技术中，需要开发人员分别实现web、android、ios三个平台gui代码，而且开发人员对照gui设计图编码实现过程中调整样式尤其麻烦，耗时费力，重复工作较多。
2、现代ui设计软件例如sketch、figma、adobe xd囊括了原型设计、ui设计等丰富功能，但是缺乏成熟的代码生成功能。而现代ide例如eclipse、visual studio、androidstudio可以通过拖拽控件元素生成gui代码，但不适用于页面组成复杂的大型软件。由gui图片自动生成前端代码(不含业务逻辑代码)，可以节省大量时间，避免重复性工作，让开发人员更专注于实际功能与逻辑的开发。同时可以批量生成代码，提高整体开发效率。自动化这一开发过程还可以避免人为错误，将繁琐的细节交由程序处理。因此，基于深度学习的gui代码自动生成技术在软件开发过程中有很高的应用价值。
3、目前基于深度学习的gui代码自动生成技术方案主要分为两种，分为多个步骤的方案和端到端模型。多个步骤方案通常将gui代码自动生成这一问题分为多步解决，
4、而端到端模型方案将gui代码生成看作一个由图像生成序列的问题，通常采用编码器-解码器架构，使用一个模型承担所有模块功能，最终生成描述gui的dsl，如pix2code模型。
5、因此，现有技术中的gui代码自动生成技术至少存在以下问题：
6、1、分多个步骤生成方法由于各模块不能取长补短，且优化各模块后整体结果不一定是最优的，难以达到最优性能；
7、2、端到端模型不能有效分析gui组件的dsl token层级关系，难以处理很复杂的页面，同时准确率也有待提高；
8、3、目前比较缺乏适用于端到端模型的web端gui图片和对应代码数据集。
技术实现思路
1、有鉴于此，本专利技术实施例提供了一种基于深度学习的gui代码生成方法，以解决现有技术中现有的gui代码生成模型不能处理复杂页面、且模型准确率较低的技术问题。该方法包括：
2、对gui数据集通过数据转译器进行转化和扩充，获得转化和扩充后的gui数据集；
3、将转化和扩充后的gui数据集作为训练数据集对端到端模型进行训练，将gui图片输入至训练完成的所述端到端模型，所述端到端模型包括cnn编码器和transformer解码器，所述端对端模型为神经网络模型；
4、所述端到端模型通过所述cnn编码器和所述transformer解码器对输入信息进行编码、解码，输出描述所述gui图片结构和样式的dsl语言；
5、通过编译器将所述dsl语言编译为gui代码，所述gui代码与所述gui图片相对应。
6、进一步的，所述gui代码包括html代码和/或css代码。
7、进一步的，所述转化和扩充后的gui数据集包括bmp格式的gui图片、图片id、guidsl、图片尺寸信息、组件种类字典、组件样式字典和完整性校验脚本。
8、进一步的，所述数据转译器用于将gui格式的dsl转换为lg格式的dsl，所述数据转译器使用python解析库lark进行编写，并根据预设的位置样式推导规则计算节点与其父节点的边属性。
9、进一步的，所述端到端模型采用树状结构注意力机制，所述树状结构注意力机制包括多个树节点，不相邻的两个所述树节点之间产生注意力，并通过可学习的偏置项更新注意力得分。
10、进一步的，所述端到端模型的损失函数为：
11、
12、其中，其中lv、le和lp分别为子节点预测值的交叉熵损失、父节点预测值的交叉熵损失、边预测值的交叉熵损失和位置预测值的交叉熵损失，λ1、λ2、λ3和λ4分别为子节点预测值交叉熵损失的权重、父节点预测值交叉熵损失的权重、边预测值交叉熵损失的权重和位置预测值交叉熵损失的权重。
13、进一步的，所述端对端模型包括pix2codedataset类数据模块和pix2codedatamodule类数据模块。
14、进一步的，所述端对端模型使用pytorch lightning工具定义模型、数据加载器和优化器的标准化接口。
15、进一步的，所述端对端模型根据所述转化和扩充后的gui数据集的元数据和数据特征，调整模型参数，并将调整后的所述模型参数存储于配置文件中。
16、进一步的，获取所述端对端模型的结构准确率，包括：
17、将所述转化和扩充后的gui数据集中各gui数据的结构复杂度定义为gui数据集组件树的叶子节点数；
18、计算各所述gui数据的结构复杂度并进行排序，按照排序结果将各所述gui数据划分为简单子集、中等子集、复杂子集三个子集，再将每个所述子集按6:1比例随机划分为训练集和测试集；
19、分别使用简单子集、中等子集、复杂子集、总数据集四个数据集训练并测试所述端对端模型，计算所述端对端模型的结构准确率。
20、与现有技术相比，本说明书实施例采用的上述至少一个技术方案能够达到的有益效果至少包括：本专利技术提供一种基于深度学习的gui代码生成方法，基于现有的代码生成模型，改进模型对复杂页面的处理方法，使得模型在训练过程中不断提高对复杂页面的学习能力，提高模型准确度。
本文档来自技高网...【技术保护点】
1.一种基于深度学习的GUI代码生成方法，其特征在于，所述方法包括：
2.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述转化和扩充后的GUI数据集包括BMP格式的GUI图片、图片ID、guiDSL、图片尺寸信息、组件种类字典、组件样式字典和完整性校验脚本。
3.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述数据转译器用于将gui格式的DSL转换为lg格式的DSL，所述数据转译器使用Python解析库Lark进行编写，并根据预设的位置样式推导规则计算节点与其父节点的边属性。
4.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述端到端模型采用树状结构注意力机制，所述树状结构注意力机制包括多个树节点，不相邻的两个所述树节点之间产生注意力，并通过可学习的偏置项更新注意力得分。
5.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述端到端模型的损失函数为：
6.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在
7.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述端对端模型使用PyTorch Lightning工具定义模型、数据加载器和优化器的标准化接口。
8.根据权利要求7所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述端对端模型根据所述转化和扩充后的GUI数据集的元数据和数据特征，调整模型参数，并将调整后的所述模型参数存储于配置文件中。
9.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，所述GUI代码包括HTML代码和/或CSS代码。
10.根据权利要求1所述的一种基于深度学习的GUI代码生成方法，其特征在于，获取所述端对端模型的结构准确率，包括：
...【技术特征摘要】
1.一种基于深度学习的gui代码生成方法，其特征在于，所述方法包括：
2.根据权利要求1所述的一种基于深度学习的gui代码生成方法，其特征在于，所述转化和扩充后的gui数据集包括bmp格式的gui图片、图片id、guidsl、图片尺寸信息、组件种类字典、组件样式字典和完整性校验脚本。
3.根据权利要求1所述的一种基于深度学习的gui代码生成方法，其特征在于，所述数据转译器用于将gui格式的dsl转换为lg格式的dsl，所述数据转译器使用python解析库lark进行编写，并根据预设的位置样式推导规则计算节点与其父节点的边属性。
4.根据权利要求1所述的一种基于深度学习的gui代码生成方法，其特征在于，所述端到端模型采用树状结构注意力机制，所述树状结构注意力机制包括多个树节点，不相邻的两个所述树节点之间产生注意力，并通过可学习的偏置项更新注意力得分。
5.根据权利要求1所述的一种基于深度学习的gui代码生成方法，其特征在于，所...
【专利技术属性】
技术研发人员：杨溢龙，李根浩，赵蒙蒙，路新喜，
申请(专利权)人：北京航空航天大学，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。