基于人工智能的前端交互页面转换方法、装置及介质

技术领域

本发明涉及计算机领域，具体涉及了一种基于人工智能的前端交互页面转换方法、装置及介质。

背景技术

当前银行的各类业务均采用HTML5作为主要的人机交互界面，包括内部使用的柜面系统、监控系统、各类管理应用及外部使用的手机银行、自助设备，从而造成目前HTML5开发需求量急剧增加。同时，对用户体验要求越来越高，往往需求UI设计师先进行大量的设计工作，然后再由技术人员进行实现，从而加长了开发周期。

传统的HTML5前端开发方案，均为UI设计师使用Sketch等工具先进行原型设计，然后技术人员对照设计图，进行手工的编码开发，或通过可视化工具，进行复刻开发；现有开发模式均需求耗费相当大的开发成本在对原型设计转化为实际可用的HTML5文件上，此工作往往是低技术难度的重复机机械劳动，从推高了整个项目的开发成本。

发明内容

本发明的目的在于至少解决现有技术中存在的技术问题之一，提供了一种基于人工智能的前端交互页面转换方法、装置及介质，通过神经网络深度学习的图像分类技术，以达到降低开发成本及提高开发效率的目的。

本发明的技术方案包括一种基于人工智能的前端交互页面转换方法，其特征在于，该方法包括：分类模型训练，基于MobileNet模型的图像分类对HTML5的多个组件进行机器学习，得到HTML5组件的分类模型；文字定位模型训练，基于CTPN模型学习组件的位置，得到OCR文字定位模型；文字识别模型训练，基于DenseNet模型学习印刷字，得到OCR文字识别模型；矢量图形文件第一转换步骤，获取待转换矢量图形参数信息，根据参数信息将矢量图形转换为HTML5定义文件，进而根据HTML5定义文件生成HTML5的若干第一组件，所述第一组件包括文本、图片及矢量图；矢量图形文件第二转换步骤，根据待显示的前端交互页面图像信息，调用分类模型进行识别，根据识别结果匹配对应的第一组件，选取相似度最高的第一组件进行填充，对填充的图像区域进行基于OCR文字识别模型的识别，并在第一组件添加OCR文字识别模型的识别文字信息，得到第二组件；其中，矢量图形文件为Sketch文件。

根据所述的基于人工智能的前端交互页面转换方法，其中分类模型训练包括：数据预处理、预训练模型训练、数据标注、模型微调及模型发布；其中数据预处理包括将ReDraw数据集按组件类型进行归类，并统一等比例缩放图片尺寸至设定像素；其中预训练模型训练包括基于MobileNet模型使用多个ReDraw数据集训练模型；其中数据标注包括对HTML页面数据的多个组件数据进行对应标注；其中模型微调包括使用MobileNet模型并加载预训练模型进行微调；模型发布包括发布模型并提供HTTP服务并提供调用接口。

根据所述的基于人工智能的前端交互页面转换方法，其中OCR模型训练包括文字定位模型训练和文字识别模型训练，其中文字定位模型训练通过CTPN算法实现，其中文字识别模型训练通过DenseNet算法实现。

根据所述的基于人工智能的前端交互页面转换方法，其中文字定位模型训练包括：文字定位图片标注、图像数据预处理与数据增强、CTPN模型构建、CTPN模型训练、CTPN模型评估和CTPN模型保存。

根据所述的基于人工智能的前端交互页面转换方法，其中文字识别模型训练包括：文字识别图片标注、图像数据预处理与数据增强、DenseNet模型构建、DenseNet模型训练、DenseNet模型评估和DenseNet模型保存。

根据所述的基于人工智能的前端交互页面转换方法，其中矢量图形文件第一转换步骤包括：从Sketch设计文件中获取到各个图层信息，具体地，通过sketch-file插件将Sketch文件读取并转换为JSON文件，其中所使用到JSON文件中字段图片信息、文档信息及页面信息；将JSON文件的图片信息、文档信息及页面信息转换为Def文件，Def文件为定义文件；将Def文件转换成HTML5标准格式的VUE页面文件，VUE页面包括文本标签、图片标签及矢量图标签，并保持VUE页面模块结构与Sketch文件的模块结构一致。

根据所述的基于人工智能的前端交互页面转换方法，其中矢量图形文件第二转换步骤包括：S410，对前端交互页面进行截图，选取获取所述第一组件的界面区域，结合截图取得界面区域图像；S420，对界面区域图像进行Base64编码，并调用分类模型对编码后的图片进行，识别结果按相似度从高至低排列，返回若干候选组件；S430，根据用户所选择的最匹配组件，对对应的基础组件替换为最匹配组件；S440，调用OCR识别模型对界面区域图像的Base64编码进行文字识别，得到文字识别结果；S450，对S430规制后的组件增加文字识别结果，得到所述第二组件。

根据所述的基于人工智能的前端交互页面转换方法，其中HTML5定义文件用于WEBIDE。

本发明的技术方案还包括一种基于人工智能的前端交互页面转换装置，该装置包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现任一所述的方法步骤。

本发明的技术方案还包括一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现任一所述的方法步骤。

本发明的有益效果为：将人工智能图像分类技术引入到前端界面开发中，跟传统的前端界面开发过程比较，可以大大减少开发人员的编码工作，通过人工智能辅肋开发，使前端界面从UI设计图到最终成品HTML5文件之间的转化效率大大提高，从而使前端的开发变得十分高效。

附图说明

下面结合附图和实施例对本发明进一步地说明；

图1所示为根据本发明实施方式的总体流程图；

图2为根据本发明实施方式的分类模型训练流程；

图3为根据本发明实施方式的文字定位训练流程；

图4为根据本发明实施方式的OCR文字识别推理流程图；

图5为根据本发明实施方式的JSON格式的界面定义文件示意图；

图6为根据本发明实施方式的基础组件进行转换流程图；

图7所示为根据本发明实施方式的装置示意图。

具体实施方式

本部分将详细描述本发明的具体实施例，本发明之较佳实施例在附图中示出，附图的作用在于用图形补充说明书文字部分的描述，使人能够直观地、形象地理解本发明的每个技术特征和整体技术方案，但其不能理解为对本发明保护范围的限制。

在本发明的描述中，若干的含义是一个或者多个，多个的含义是两个以上，大于、小于、超过等理解为不包括本数，以上、以下、以内等理解为包括本数。

在本发明的描述中，对方法步骤的连续标号是为了方便审查和理解，结合本发明的整体技术方案以及各个步骤之间的逻辑关系，调整步骤之间的实施顺序并不会影响本发明技术方案所达到的技术效果。

本发明的描述中，除非另有明确的限定，设置等词语应做广义理解，所属技术领域技术人员可以结合技术方案的具体内容合理确定上述词语在本发明中的具体含义。

图1所示为根据本发明实施方式的总体流程图，该流程包括以下步骤：分类模型训练，基于MobileNet模型的图像分类对HTML5的多个组件进行机器学习，得到HTML5组件的分类模型；文字定位模型训练，基于CTPN模型学习组件的位置，得到OCR文字定位模型；文字识别模型训练，基于DenseNet模型学习印刷字，得到OCR文字识别模型；矢量图形文件第一转换步骤，获取待转换矢量图形参数信息，根据参数信息将矢量图形转换为HTML5定义文件，进而根据HTML5定义文件生成HTML5的若干第一组件，第一组件包括文本、图片及矢量图；矢量图形文件第二转换步骤，根据待显示的前端交互页面图像信息，调用分类模型进行识别，根据识别结果匹配对应的第一组件，选取相似度最高的第一组件进行填充，对填充的图像区域进行基于OCR文字识别模型的识别，并在第一组件添加OCR文字识别模型的识别文字信息，得到第二组件，第二组件一般为功能组件，如按钮；其中，矢量图形文件为Sketch文件。

具体地，通过导入Sketch设计文件，先进行结构化预处理，将Sketch文件初步转化为HTML5文件，Sketch图元初步转化为HTML5图元标签。用户通过对HTML5图元标签进行图像分类，根据用户需求选择替换为为相应的HTML5组件标签，然后通过OCR识别，自动添加标签文本。从而形成基本可用的HTML5页面文件。

图2为根据本发明实施方式的分类模型训练流程，基于MobileNet模型的图像分类对HTML5各类组件元素进行机器学习，形成针对HTML5组件的分类模型。MobileNet是基于深度可分离卷积的轻量化卷积神经网络，比对标准的卷积网络，可大幅度降低卷积参数量和计算量从而提升推理速度，而且精度仅损失1％左右。

基于MobileNet模型针对HTML5各类组件训练过程包括数据预处理、预训练模型训练、数据标注、模型微调、模型发布等，具体流程如下图：

ReDraw数据预处理：把ReDraw数据集按组件类别归类，并统一等比例缩放图片尺寸至224像素。

预训练模型训练：由于HTML页面场景数据量较少，有必要使用迁移学习的思路提高模型的泛化能力，基于MobileNet模型使用大规模ReDraw数据集训练模型，然后把该模型内部参数迁移至下游任务。

HTML页面数据标注：标注HTML页面数据，目前的版本共标注了29类组件，每个类别的数据量不少于300个。

HTML页面数据预处理：统一等比例缩放图片尺寸至224像素。

模型微调：使用MobileNet模型并加载预训练模型进行微调，微调后，模型的精度高达99％。

模型发布：发布模型并提供HTTP服务给其他模块调用。

模型发布：发布模型并提供HTTP服务给其他模块调用。

图3为根据本发明实施方式的文字定位训练流程，基于CTPN模型学习组件的位置，形成文字定位模型，文字识别模型DenseNet训练流程与CTPN训练流程一致。OCR文字识别模型包括文字定位功能和文字识别功能。文字定位功能基于CTPN算法实现，该算法基于图像目标检测算法改进而来，文本定位与物体定位不同，文本是由一系列字符组成，检测目标不是一个闭合的区域，每个字符之间存在间隔，文本定位对精度要求更高，需要覆盖整个检测区域。CTPN对目标检测算法中区域建议网络部分进行了改进并且加入了循环神经网络结构提取文本的情景上下文信息。

文字识别功能基于DenseNet算法实现，DenseNet基本思想与深度残差网络一致，但它的建立是前面所有层与后面层的密集连接，另一特点是通过特征在通道上的连接来实现特征重用，具体公式如下：

其中[x

图4为根据本发明实施方式的OCR文字识别推理过程流程图，OCR文字识别推理过程包括图像数据预处理、CTPN模型加载与DenseNet模型加载、组件位置识别、组件文字识别。

图5为根据本发明实施方式的JSON格式的界面定义文件示意图，图5中定义了JSON文件的各项信息。

图6为根据本发明实施方式的基础组件进行转换流程图，Sketch文件初步转换为HTML5文件，步骤如下：

从Sketch设计文件中获取到各个图层Layer(图层即设计图中的元素，如文本、图片等元素)的有用信息，如画板的大小(即页面的大小)、图层的位置及宽高、图层的类型等等，因此原型转换工具首先通过sketch-file插件将Sketch文件读取成JSON格式内容，其中所使用到JSON中字段主要包括(1)images：Sketch文件中所使用到的图片id和图片文件数据；(2)document：整体的文档信息，包括当前文件和引入外部资源库中的公用图层、文本样式、图层样式等内容；(3)pages：设计图中所有的页面，其中每个页面都是一个JSON，包含该页面各图层的详细信息，如图层的宽高、大小、文字样式、图层样式等。结合以上三部分的信息，可获取各个图层的有用信息，用于转换成Def中组件的属性；例如将Sketch中一个图片图层转换编辑器中一个图片组件，需要从image中拿到图片数据写成一个png图片文件，在图片组件的src中引用该图片，还有从pages中页面找到该图片图层，获取该图片图层的宽高、位置，填入图片组件的width、height、top、left。

Sketch设计文件中各页面初步转化为JSON格式的界面定义文件，JSON文格式如下：将Def文件转换成HTML5标准格式的VUE页面文件，VUE页面由基本的文本标签、图片标签、矢量图标签等基础组件构成，页面模块结构与Sketch设计模块结构保持一致。通过以上步骤，得到Sketch文件初步转化的HTML文件，此时HTML的各元素均为基本的文本、图片、图标等基础不签，不具备任何组件及其属性。

对初步转换生成的页面文件中的基础组件进行转换，具体步骤如下

S410对html展现的界面进行截图，点击选取的基础组件获取组件的界面区域(Xmin，Ymin，Xmax，Ymax)，结合截图取得该区域的图像。

S420，对区域图像进行Base64编码，并调用组件模型进行该图片的识别，识别结果按相似度从高至低排列，返回若干候选组件。

S430，用户选择最匹配组件，对应的基础组件替换选中模块为该组件

S440，调用OCR识别模型，对区域图像Base64编码进行文字识别，并将结果返回

S450，对S430规制后的组件增加文字属性为S440的返回结果。

图7所示为根据本发明实施方式的装置示意图。装置包括存储器100及处理器200，其中处理器200存储有计算机程序，计算机程序用于执行：分类模型训练，基于MobileNet模型的图像分类对HTML5的多个组件进行机器学习，得到HTML5组件的分类模型；文字定位模型训练，基于CTPN模型学习组件的位置，得到OCR文字定位模型；文字识别模型训练，基于DenseNet模型学习印刷字，得到OCR文字识别模型；矢量图形文件第一转换步骤，获取待转换矢量图形参数信息，根据参数信息将矢量图形转换为HTML5定义文件，进而根据HTML5定义文件生成HTML5的若干第一组件，第一组件包括文本、图片及矢量图；矢量图形文件第二转换步骤，根据待显示的前端交互页面图像信息，调用分类模型进行识别，根据识别结果匹配对应的第一组件，选取相似度最高的第一组件进行填充，对填充的图像区域进行基于OCR文字识别模型的识别，并在第一组件添加OCR文字识别模型的识别文字信息，得到第二组件，第二组件一般为功能组件，如按钮；其中，矢量图形文件为Sketch文件。

上面结合附图对本发明实施例作了详细说明，但是本发明不限于上述实施例，在技术领域普通技术人员所具备的知识范围内，还可以在不脱离本发明宗旨的前提下做出各种变化。