一种基于机器学习的可视化图表代码自动生成方法技术

本发明专利技术涉及一种基于机器学习的可视化图表代码自动生成方法，属于计算机科学领域。本发明专利技术针对现有技术中设计稿中图表转换成代码的难题，通过开源框架Pipcook获得设计稿中的组件元素，提炼设计稿中的组件信息和组件样式，根据组件与数据规则，修正解析图层、解析布局、解析属性的偏差，生成视图树，并通过UI2DSL输出经过各层智能化处理好的代码协议，经过协议转代码的引擎输出各种DSL代码。该方法极大地提高了设计稿中图表转换成代码的效率，而且准确率高。准确率高。准确率高。

【技术实现步骤摘要】
一种基于机器学习的可视化图表代码自动生成方法


[0001]本专利技术属于计算机科学领域，具体涉及一种基于机器学习的可视化图表代码自动生成方法。

技术介绍

[0002]随着信息化和大数据技术的不断发展，各行各业对数据深层次应用的需求逐渐增大，数据可视化技术成为了政府、企业分析、展示数据的主要方式。对于软件开发工程师，尤其是前端工程师而言，数据可视化的开发主要是将UI设计稿中的图表转换成HTML、CSS、JavaScript代码，这部分工作难度一般，但由于存在很多重复性的代码以及很多自定义元素的处理，所以比较繁琐耗时。因此，如何提升设计稿中图表转换成代码的效率，是可视化前端开发工程师急需解决的问题。
[0003]目前业界处理该问题的方法主要有两种：一是将不同的图表分模块，把每个模块的代码封装为组件，从而提升图表的可复用性，减少冗余，提高开发效率。但对于企业自身而言，开发人员的技术能力参差不齐，在多人开发的项目中，很容易导致组件碎片化、组件库维护困难以及代码冗余的问题，直接或间接的导致代码运行效率、调试效率降低。另外随着业务的发展和个性化的驱动，通用封装的图表库无法覆盖所有应用场景。二是利用各种自动化技术，把设计稿转为前端代码，减少前端工程师的工作量，从设计稿直接生成前端代码，省去中间流程，做到精度还原的同时并节约研发资源。但是该解决方案只是针对通用页面的，并不能把可视化图表转为代码。

技术实现思路

[0004](一)要解决的技术问题
[0005]本专利技术要解决的技术问题是如何提供一种基于机器学习的可视化图表代码自动生成方法，以解决如何提升设计稿中图表转换成代码的效率的问题。
[0006](二)技术方案
[0007]为了解决上述技术问题，本专利技术提出一种基于机器学习的可视化图表代码自动生成方法，该方法包括如下步骤：
[0008]步骤1：印记导入
[0009]导入文件类型符合规范的设计稿；
[0010]步骤2：组件识别
[0011]使用开源框架Pipcook，基于神经网络算法计算，对设计稿图层进行遍历，识别每一个图层，通过解析得到图层结构、模板结构和图层信息，切割标注的图表组件，获得对应的组件元素；
[0012]步骤3：样式识别
[0013]使用UI2DSL多元组件识别提取设计稿中有组件的预打标信息，提炼视图组件信息和组件样式；
[0014]步骤4：数据合并
[0015]分析节点信息、修正信息及语义化信息，根据组件与数据规则，生成数据映射信息、文本数据映射信息和状态映射信息；
[0016]步骤5：转为视图树
[0017]由操作人员控制，修正解析图层、解析布局、解析属性的偏差；除此之外，对于非组件元素、异常的视图元素进行指定规则的元素转化或者抛弃，完成后生成视图树；
[0018]步骤6：输出代码
[0019]通过UI2DSL输出经过各层智能化处理好的代码协议，经过协议转代码的引擎输出各种DSL代码。
[0020]进一步地，所述步骤1中设计稿的规范的包括标注图表的类型，标注图表的类型包括折线图、柱状图、饼图、散点图、K线图、雷达图、盒须图、热力图、关系图、路径图、树图、矩形树图、旭日图、桑葚图、漏斗图和仪表盘。
[0021]进一步地，所述步骤1中设计稿的规范的包括规定区域内可用组件，可用组件类型包括图例、坐标轴、缩略轴、滚动条、数据标签、悬浮提示和图表标注。
[0022]进一步地，所述步骤1中设计稿的规范的包括规定组件的安全区域，在设计对应组件区域时不能越过安全区。
[0023]进一步地，所述步骤1中设计稿的规范的包括对组件打标签，对组件打标签指在设计组件的最外层图层标记为组件的类型，组件内的图层和标签图层属于被包含的关系。
[0024]进一步地，所述步骤S2具体包括：Pipcook是基于管道的框架，包括数据收集、数据接入、数据处理、模型配置、模型训练、模型服务部署和在线训练七个部分,每个部分由某一具体的插件负责，用插件的方式提供每个环节的定制化能力，用Pipcook串联插件实现算法工程；这些数据插件对整个设计稿图层进行遍历，使用图片分类的模型识别每一个图层，通过解析得到图层结构、模板结构和图层信息，对设计文档中的视图结构信息和图层属性读取和类型匹配，映射为对应的组件元素。
[0025]进一步地，所述步骤3中的组件样式包括字体、背景色和圆角。
[0026]进一步地，所述步骤4中的数据合并还包括：对交互、数据绑定等上层未带入数据，进行数据文件的合并。
[0027]进一步地，所述步骤5中由操作人员控制，修正解析图层、解析布局、解析属性的偏差具体包括：修正层的工作是内容的修正，包含图层信息修正、组件识别修正、布局及布局属性修正、组件属性修正和语义化项修正，通过操作人员在可视化工具上进行属性的提交及变更。
[0028]进一步地，所述步骤5中的完成后生成视图树包括：完成后使用UI2DSL生成视图树。
[0029](三)有益效果
[0030]本专利技术提出一种基于机器学习的可视化图表代码自动生成方法，该方法针对现有技术中设计稿中图表转换成代码的难题，通过开源框架Pipcook获得设计稿中的组件元素，提炼设计稿中的组件信息和组件样式，根据组件与数据规则，修正解析图层、解析布局、解析属性的偏差，生成视图树，并通过UI2DSL输出经过各层智能化处理好的代码协议，经过协议转代码的引擎输出各种DSL代码。该方法极大地提高了设计稿中图表转换成代码的效率，
而且准确率高。
附图说明
[0031]图1为本专利技术的架构图；
[0032]图2为组件识别图；
[0033]图3为切割组件图；
[0034]图4为本专利技术的流程图；
[0035]图5为组件语义识别图；
[0036]图6为组件样式识别图；
[0037]图7为生成视图树图。
具体实施方式
[0038]为使本专利技术的目的、内容和优点更加清楚，下面结合附图和实施例，对本专利技术的具体实施方式作进一步详细描述。
[0039]为了解决上述问题，本专利技术提供一种基于机器学习的可视化图表代码自动生成方法。如图1所示，本专利技术的专利技术架构图如下：
[0040]1、设计规范
[0041]图表生成代码的设计稿，必须为特定规范的格式，比如Sketch(是一款适用于所有设计师的矢量绘图应用)，在图表开发过程中，图表的种类有很多，而且图表内的组件也是丰富多彩的，但是数据源中并没有这些组件信息，只有图层信息，图层是设计师在设计稿中用到的视图控件。组件与图层的关系是一对多的关系，图层在设计稿中的表现形式是JSON数据结构，表述了图层的大小、形状和颜色等信息。这样不利于我们对设计稿进行组件切割，因此我们对设计稿的规范做了一些要求：
[0042](1)标注图表的类型
[0043](2)规定区域内可用组件
[0044](3)规定组件的安本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于机器学习的可视化图表代码自动生成方法，其特征在于，该方法包括如下步骤：步骤1：印记导入导入文件类型符合规范的设计稿；步骤2：组件识别使用开源框架Pipcook，基于神经网络算法计算，对设计稿图层进行遍历，识别每一个图层，通过解析得到图层结构、模板结构和图层信息，切割标注的图表组件，获得对应的组件元素；步骤3：样式识别使用UI2DSL多元组件识别提取设计稿中有组件的预打标信息，提炼视图组件信息和组件样式；步骤4：数据合并分析节点信息、修正信息及语义化信息，根据组件与数据规则，生成数据映射信息、文本数据映射信息和状态映射信息；步骤5：转为视图树由操作人员控制，修正解析图层、解析布局、解析属性的偏差；除此之外，对于非组件元素、异常的视图元素进行指定规则的元素转化或者抛弃，完成后生成视图树；步骤6：输出代码通过UI2DSL输出经过各层智能化处理好的代码协议，经过协议转代码的引擎输出各种DSL代码。2.如权利要求1所述的基于机器学习的可视化图表代码自动生成方法，其特征在于，所述步骤1中设计稿的规范的包括标注图表的类型，标注图表的类型包括折线图、柱状图、饼图、散点图、K线图、雷达图、盒须图、热力图、关系图、路径图、树图、矩形树图、旭日图、桑葚图、漏斗图和仪表盘。3.如权利要求1所述的基于机器学习的可视化图表代码自动生成方法，其特征在于，所述步骤1中设计稿的规范的包括规定区域内可用组件，可用组件类型包括图例、坐标轴、缩略轴、滚动条、数据标签、悬浮提示和图表标注。4.如权利要求1所述的基于机器学习的可视化图表代码自动生成方法，其特征在于，所述步骤1中设计稿的规范的包括规定组件的安全区域，在设计对应组件区域时不能越过安全区。5.如权利要求1所述的基于机器学习的可视化...

【专利技术属性】
技术研发人员：刘思佳，周炼赤，王红艳，郭旭东，周益周，
申请(专利权)人：北京计算机技术及应用研究所，
类型：发明
国别省市：