CN114661286A - 一种大屏可视化代码生成方法、系统及存储介质 - Google Patents

Abstract

本发明公开一种大屏可视化代码生成方法、系统及存储介质，涉及大屏可视化技术领域。该方法包括以下步骤：对大屏可视化页面的图片设计稿进行组件识别，得到所述图片设计稿中的各个组件的识别信息；对包含各个组件的所述图片设计稿进行布局分析，得到布局信息；根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码，以展示所述大屏可视化页面，满足大屏可视化快速开发迭代的需求。

Description

一种大屏可视化代码生成方法、系统及存储介质

技术领域

本发明涉及大屏可视化技术领域，尤其涉及一种大屏可视化代码生成方法、系统及存储介质。

背景技术

在数据可视化展示过程中，越来越多地依托于大屏端进行页面展示。大屏项目具有周期相对较短、可视化组件复杂及需求变化频繁等特征。传统的大屏页面开发方式需要设计人员设计好大屏页面图片设计稿，软件开发人员再根据图片设计稿编写页面样式、进行页面布局并依次开发页面中的各个数据可视化组件。

由于大屏页面具有定制化需求高的特点，其对页面主题风格、布局排版、数据可视化组件多样式等各方面均有较高的个性化要求。加之项目周期相对较短，传统的开发方式往往需要投入大量的设计人员、软件开发人员，业务需求稍有变动，即便对图片设计稿的调整变化不大，也可能造成开发人员对程序编码的大幅度调整，难以满足大屏可视化快速开发迭代的需求。

发明内容

本发明实施例提供一种大屏可视化代码生成方法、系统及存储介质，旨在满足大屏可视化快速开发迭代的需求。

本发明实施例提供了一种大屏可视化代码生成方法，所述方法包括以下步骤：

对大屏可视化页面的图片设计稿进行组件识别，得到所述图片设计稿中的各个组件的识别信息；对包含各个组件的所述图片设计稿进行布局分析，得到布局信息；根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码，以展示所述大屏可视化页面。

优选地，所述对大屏可视化页面的图片设计稿进行组件识别包括：利用经训练的组件分类模型，对大屏可视化页面的图片设计稿进行组件识别。

优选地，在所述对大屏可视化页面的图片设计稿进行组件识别之前，还包括：建立组件分类标签库，其中，所述组件分类标签库包括历史大屏可视化页面的图片设计稿和已标记类型的组件；利用所述组件分类标签库，训练组件分类模型，得到所述经训练的组件分类模型。

优选地，所述对大屏可视化页面的图片设计稿进行组件识别还包括：对已识别的各个组件分别进行可信度评价，得到每个组件的可信度；若一组件的可信度大于预设阈值，则确定所述组件识别正确，并在组件分类描述文件中保存所述组件的识别信息；若一组件的可信度不大于预设阈值，则确定所述组件无法识别，并在所述组件分类描述文件中将所述组件标记为空白组件。

优选地，所述方法还包括：对于已标记的每个空白组件，获取软件开发人员通过编码生成的组件，并将所述组件加入系统组件库；获取软件开发人员通过编码生成的所述组件的识别信息和布局信息，并将所述组件的识别信息加入到所述组件分类描述文件，将所述组件的布局信息加入到页面描述文件；将所述组件分类描述文件中的用于指示空白组件的标记删除。

优选地，所述组件包括图片组件、图标组件、表格表单组件、图形图表组件，所述对包含各个组件的所述图片设计稿进行布局分析，得到布局信息包括：对所述图片设计稿中的所述各个组件进行定位和布局，得到适于屏幕的所述各个组件的大小和位置；识别所述图片设计稿中的背景图和图层信息；对所述图片设计稿中的文本进行识别，并将所述文本的排布方式转化为适于浏览器的排布方式。

优选地，所述方法还包括：利用组件编辑器，展示与所述大屏可视化页面有关的组件及布局信息，并根据业务需要，修改与所述大屏可视化页面有关的组件的布局信息。

优选地，所述根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码包括：利用代码解析引擎，从系统组件库中调取实际的组件，并将实际的组件、识别信息和布局信息转化成可运行的大屏可视化代码。

本发明实施例还提供了一种大屏可视化代码生成系统，所述系统包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现前述的大屏可视化代码生成方法的步骤。

本发明实施例还提供了一种存储介质，所述存储介质中存储有大屏可视化代码生成程序，所述大屏可视化代码生成程序被处理器执行时，实现前述的大屏可视化代码生成方法的步骤。

本发明实施例提供了一种大屏可视化代码生成方法、系统及存储介质，其对大屏可视化页面的图片设计稿进行组件识别，得到所述图片设计稿中的各个组件的识别信息，对包含各个组件的所述图片设计稿进行布局分析，得到布局信息，根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码，以展示所述大屏可视化页面。这样，可以满足大屏可视化快速开发迭代的需求。

附图说明

图1是本发明实施例一提供的大屏可视化代码生成方法的流程图；

图2是本发明实施例二提供的大屏可视化代码生成系统的第一架构图；

图3是图2采用的大屏可视化组件智能识别流程图；

图4是本发明实施例三提供的大屏可视化代码生成系统的第二结构图。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。在后续的描述中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身没有特有的意义。因此，“模块”、“部件”或“单元”可以混合地使用。

实施例一

图1是本发明实施例一提供的大屏可视化代码生成方法的流程图，如图1所示，该方法可以包括以下步骤：

步骤S101：对大屏可视化页面的图片设计稿进行组件识别，得到所述图片设计稿中的各个组件的识别信息。

在一个实施方式中，利用经训练的组件分类模型，进行组件识别，各个组件的识别信息可以保存至组件分类描述文件中，所述识别信息包括但不限于组件的类型等。

所述组件分类模型在执行步骤S101之前训练，具体地说，在所述对大屏可视化页面的图片设计稿进行组件识别之前，建立组件分类标签库，然后利用所述组件分类标签库，训练组件分类模型，得到所述经训练的组件分类模型。其中，所述组件分类标签库包括历史大屏可视化页面的图片设计稿和已标记类型的组件。

步骤S102：对包含各个组件的所述图片设计稿进行布局分析，得到布局信息，所述布局信息可以保存至页面描述文件中，所述布局信息包括但不限于组件的位置、大小，图层信息(或图层关系信息)、背景图、文本信息(例如文字、大小、字体)、图标样式等。

具体地说，对所述图片设计稿中的所述各个组件进行定位和布局，得到适于屏幕展示的所述各个组件的大小和位置；识别所述图片设计稿中的背景图和图层信息；对所述图片设计稿中的文本进行识别，并将所述文本的排布方式转化为适于浏览器的排布方式。

上述组件包括图片组件、图标组件、表格表单组件、图形图表组件。

步骤S103：根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码，以展示所述大屏可视化页面。

具体地说，利用组件编辑器，展示与所述大屏可视化页面有关的组件及布局信息，并根据业务需要，修改与所述大屏可视化页面有关的组件的布局信息。

本实施例通过“组件识别”，满足对大屏界面中图片、图标、表单及图形图表的识别，通过“布局分析”满足将各个识别出的组件合理分层布局摆放的需求，通过代码解析引擎，将智能识别的结果转化成可运行的程序代码，满足大屏可视化快速开发迭代的需求。

另外，由于智能识别可能无法百分之百识别出新图片设计稿的所有组件或识别出的组件的可信度不高，因而需要对智能识别的不同结果分别进行处理。具体地说，对已识别的各个组件分别进行可信度评价，得到每个组件的可信度，若一组件的可信度大于预设阈值，则确定所述组件识别正确，并在组件分类描述文件中保存所述组件的识别信息，如组件类别；若一组件的可信度不大于预设阈值，则确定所述组件无法识别，并在所述组件分类描述文件中将所述组件标记为空白组件。对于已标记的每个空白组件，即，对于智能识别无法识别或识别可信度不高的组件，可以获取软件开发人员通过编码生成的组件，并将编码生成的组件加入系统组件库，获取软件开发人员通过编码生成的所述组件的识别信息和布局信息，并将所述组件的识别信息加入到所述组件分类描述文件，将所述组件的布局信息加入到页面描述文件，最后将所述组件分类描述文件中的用于指示空白组件的标记删除，即，通过人工方式，完善系统组件库以及组件分类描述文件和页面描述文件。

当需要调整组件以及布局时，在步骤S102之后，还可以利用组件编辑器，展示与所述大屏可视化页面有关的组件及布局信息，并根据业务需要，修改与所述大屏可视化页面有关的组件的布局信息，或者根据用户的拖拽及配置方式，修改与所述大屏可视化页面有关的所有组件的布局信息。例如，可以修改组件的位置、层次关系、标题文字等等。这样，基于人工智能图像识别技术对图片设计稿进行识别，经由可视化地编排调整后直接生成高可用的程序代码，满足大屏可视化快速开发迭代的需求。

实施例二

本发明旨在建立一种新的大屏可视化代码生成方法及系统，它基于人工智能图像识别技术对图片设计稿进行识别，经由可视化地编排调整直接生成高可用的程序代码，满足大屏可视化快速开发迭代的需求。具体地，通过提供“组件识别”，满足对大屏界面中图片、图标、表单及图形图表的识别；通过提供“布局分析”，满足将各个识别出的组件合理分层布局摆放的需求；另外，还可以通过提供容错处理机制，以人工参与的方式，弥补智能识别的不足；通过提供代码解析引擎，将智能识别的结果转化成可运行的程序代码。

图2是本发明实施例二提供的大屏可视化代码生成系统的第一架构图，如图2所示，主要包含智能识别模块10、容错处理模块20、代码解析模块30，其中，智能识别模块10包含组件识别和布局分析两大功能模块，容错处理模块20包含人工替换和重新编排两大功能模块，代码解析模块30包含组件匹配、代码生成和打包构建三大功能模块。下面对智能识别模块10、容错处理模块20、代码解析模块30分别进行说明。

1、智能识别模块10

智能识别模块10，通过采用人工智能图像识别技术对输入的图片设计稿上的组件进行识别，并将识别结果存入组件分类描述文件中，然后通过布局分析对整个图片设计稿进行布局，布局分析的结果(或称布局信息)存入页面描述文件中。其中，识别结果(或称识别信息)主要包含组件类型。布局信息可以包含组件的布局(例如大小、位置等)、图层关系(例如是否有堆叠、谁在谁上面等)、背景图、文本(图片设计稿中的文字有可能是图片效果，如一些艺术字，也有可能是普通文本，需要识别是什么字及使用什么字体等)。

智能识别主要包含两大功能：组件识别和布局分析。具体如下：

(1)组件识别包含对图片组件、图标、表格表单组件及图形图表等数据可视化组件的识别。

组件识别基于企业知识累积中已有的大量图片设计稿，为其建立标签库并训练调整出优质的组件分类模型，使用人工智能技术对新的图片设计稿进行识别，识别出其中的组件，再将识别结果存入组件分类描述文件中。

图3是图2采用的大屏可视化组件智能识别流程图，如图3建立的一种基于组件分类的大屏可视化组件智能识别过程。系统使用过往大屏可视化页面图片设计稿，通过人工标记积累得到“组件分类标签库”，采用人工智能深度学习技术训练出“组件分类模型”。当设计人员设计出新的图片设计稿时，通过经训练的组件分类模型对该图片设计稿进行识别得到组件分类结果。之后，对组件分类结果中的各个组件进行可信度评价，如果其可信度大于预先人为设定好的阈值则认为识别正确，将识别结果保存在组件分类描述文件中。如果其可信度小于设定好的阈值则认为无法识别，将其标记为不可信的组件，并在组件分类描述文件中保存为空白组件。

(2)布局分析主要对已识别的组件进行定位，由于大屏展示通常都是基于固定分辨率的屏幕，因而可以使用绝对定位对大屏组件进行布局。布局分析功能主要通过对组件边缘边框的检测，为组件生成合理的外包矩形，并计算出其相对整个图片设计稿画面的位置，然后进行布局，以得到适于屏幕展示的各个组件的大小和位置。同时，布局分析担负着大屏页面背景图的识别工作，由于大屏页面通常都会包含一整张背景图，它不能被当作图片组件识别，而是应该作为整个布局的一部分。另外，布局分析负责区别出图片设计稿中的图层信息、识别图片设计稿中的文本，并将文本的排布方式转化成浏览器可使用的横排自适应方式等。

2、容错处理模块20

智能识别随着模型成熟度的提高，对大屏组件的识别准确率也会相应提高，但不可能百分之百地识别出新设计出的图片设计稿。容错处理模块20主要是为了应对这种情况。

容错处理模块20，主要通过人工参与的方式，对无法识别的组件或者识别后可信度不高的组件进行“人工替换”，同时，还提供了“重新编排”的功能，使软件开发人员可以直接对页面描述文件进行修改。具体如下：

(1)“人工替换”的功能。

当出现无法识别的组件或经过智能识别后认为识别结果可信度不高的组件，智能识别功能会在其形成的页面描述文件中将其标记为空白组件，空白组件可由软件开发人员直接对其进行编码，也就是说，使用人工编码得到的新组件替换空白组件，将编码得到的新组件存入系统组件库，将编码得到的新组件的识别信息存入组件描述分类文件中，将编码得到的新组件的布局信息存入页面描述文件中，从而弥补本系统此特殊情况下的不足，避免出现系统无法处理且开发人员无法介入的情况。

(2)“重新编排”功能。

根据组件描述分类文件和页面描述文件，将组件库中的所有组件及布局信息展示在一个可视化的组件编辑器中，软件开发人员甚至界面设计人员可以通过拖拽及配置的方式，改变识别出的组件的位置、层次关系及具体的属性配置项(如组件背景、标题文字、图表样式等)，从而达到更加细致精确地调整组件及布局信息的目的。

整个容错处理过程是对页面描述文件及系统组件库的完善过程，人工替换时新编码的组件会纳入系统组件库中管理，重新编排则是对页面描述文件的直接修改。

3、代码解析模块30

代码解析模块30，负责基于页面描述文件及系统组件库生成可运行的代码。

代码解析主要包含三大功能：组件匹配、代码生成和打包构建。具体如下：

(1)“组件匹配”功能，它用于根据组件分类描述文件中的组件类别，匹配到组件库中的实际组件，并将页面描述文件中的该组件的属性配置项(如组件背景、标题文字、图表样式等)加载入该组件，构成可运行的组件代码。

(2)最核心的“代码生成”功能，将组件分类描述文件中的信息(例如组件类型)和页面描述文件中的信息(例如组件背景、文字、图标样式等属性配置)转换成JavaScript、HTML及CSS代码。

另外，在“代码生成”过程中，需要处理JavaScript、HTML及CSS代码中的循环、分支等逻辑，处理布局分析结果(或称布局信息)并生成CSS样式，处理其样式层次、覆盖等问题。将布局信息转成HTML对应的div等页面标签并附加合适的CSS样式，将组件依据组件匹配结果转成对应的组件标签并附加合适的属性值，同时生成导入组件依赖的代码语句。

(3)“打包构建”功能，负责将识别到的各图标合并成一张大图并生成相应CSS样式，将生成的JavaScript代码进行压缩、合并等，将过大的图片资源进行适度压缩等等一系列操作，即在“代码生成”后进行性能优化。另外，也可以将生成的JavaScript代码进行混淆，以提高代码安全性，达到防泄漏的目的。

本实施例提供了一种基于智能识别的大屏可视化代码生成系统，使用人工智能技术所训练的组件分类模型进行智能识别，使用可视化方式重新编排，使用JavaScript及其工具链进行代码解析及构建，可以满足大屏可视化快速开发迭代的需求。在实际开发过程中，可以采用Python、JavaScript开发语言，基于Tensorflow、Vue等框架开发。

实施例三

如图3所示，本发明实施例三提供一种大屏可视化代码生成系统100，该系统100包括存储器1、处理器2、存储在所述存储器1上并可在所述处理器2上运行的大屏可视化代码生成程序，所述大屏可视化代码生成程序被所述处理器2执行时实现如图1所示的大屏可视化代码生成方法的步骤。

实施例四

本发明实施例四提出一种存储介质，所述存储介质中存储有大屏可视化代码生成程序，所述大屏可视化代码生成程序被处理器执行时，实现如图1所示的方法的步骤，以满足大屏可视化快速开发迭代的需求。其中，所述存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储装置。

本发明通过智能识别技术，建立在企业独有的业务积累之上将过往大屏页面标记训练成有价值的组件分类模型，并以此为基础直接识别新的图片设计稿中的类似组件，同时结合系统组件库直接生成可运行的JavaScript代码，既可以满足大屏项目快速迭代的需求，又保留程序编码实现的灵活性，以应对复杂多变的业务需求。另外，本发明具有容错处理机制，可以使用一种可视化编辑的方式，人工干预智能识别的结果，为最终生成代码的健壮性提供有效保障。

以上参照附图说明了本发明的优选实施例，并非因此局限本发明的权利范围。本领域技术人员不脱离本发明的范围和实质内所作的任何修改、等同替换和改进，均应在本发明的权利范围之内。

Claims (10)

1.一种大屏可视化代码生成方法，其特征在于，所述方法包括以下步骤：

对大屏可视化页面的图片设计稿进行组件识别，得到所述图片设计稿中的各个组件的识别信息；

对包含各个组件的所述图片设计稿进行布局分析，得到布局信息；

根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码，以展示所述大屏可视化页面。

2.根据权利要求1所述的方法，其特征在于，所述对大屏可视化页面的图片设计稿进行组件识别包括：

利用经训练的组件分类模型，对大屏可视化页面的图片设计稿进行组件识别。

3.根据权利要求2所述的方法，其特征在于，在所述对大屏可视化页面的图片设计稿进行组件识别之前，还包括：

建立组件分类标签库，其中，所述组件分类标签库包括历史大屏可视化页面的图片设计稿和已标记类型的组件；

利用所述组件分类标签库，训练组件分类模型，得到所述经训练的组件分类模型。

4.根据权利要求2所述的方法，其特征在于，所述对大屏可视化页面的图片设计稿进行组件识别还包括：

对已识别的各个组件分别进行可信度评价，得到每个组件的可信度；

若一组件的可信度大于预设阈值，则确定所述组件识别正确，并在组件分类描述文件中保存所述组件的识别信息；

若一组件的可信度不大于预设阈值，则确定所述组件无法识别，并在所述组件分类描述文件中将所述组件标记为空白组件。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

对于已标记的每个空白组件，获取软件开发人员通过编码生成的组件，并将所述组件加入系统组件库；

获取软件开发人员通过编码生成的所述组件的识别信息和布局信息，并将所述组件的识别信息加入到所述组件分类描述文件，将所述组件的布局信息加入到页面描述文件；

将所述组件分类描述文件中的用于指示空白组件的标记删除。

6.根据权利要求1所述的方法，其特征在于，所述组件包括图片组件、图标组件、表格表单组件、图形图表组件，所述对包含各个组件的所述图片设计稿进行布局分析，得到布局信息包括：

对所述图片设计稿中的所述各个组件进行定位和布局，得到适于屏幕展示的所述各个组件的大小和位置；

识别所述图片设计稿中的背景图和图层信息；

对所述图片设计稿中的文本进行识别，并将所述文本的排布方式转化为适于浏览器的排布方式。

7.根据权利要求6所述的方法，其特征在于，所述方法还包括：

利用组件编辑器，展示与所述大屏可视化页面有关的组件及布局信息，并根据业务需要，修改与所述大屏可视化页面有关的组件的布局信息。

8.根据权利要求1-7任意一项所述的方法，其特征在于，所述根据系统组件库、所述各个组件的识别信息和布局信息，生成可运行的大屏可视化代码包括：

利用代码解析引擎，从系统组件库中调取实际的组件，并将实际的组件、识别信息和布局信息转化成可运行的大屏可视化代码。

9.一种大屏可视化代码生成系统，其特征在于，所述系统包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序，所述程序被所述处理器执行时实现如权利要求1-8任意一项所述的大屏可视化代码生成方法的步骤。

10.一种存储介质，其特征在于，所述存储介质中存储有大屏可视化代码生成程序，所述大屏可视化代码生成程序被处理器执行时，实现如权利要求1-8任意一项所述的大屏可视化代码生成方法的步骤。

Images