CN113031938A - 一种可视化界面图像转化为编程语言数据的方法及装置 - Google Patents
一种可视化界面图像转化为编程语言数据的方法及装置 Download PDFInfo
- Publication number
- CN113031938A CN113031938A CN202110456861.0A CN202110456861A CN113031938A CN 113031938 A CN113031938 A CN 113031938A CN 202110456861 A CN202110456861 A CN 202110456861A CN 113031938 A CN113031938 A CN 113031938A
- Authority
- CN
- China
- Prior art keywords
- attribute information
- component
- layout
- visual interface
- converted
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000007 visual effect Effects 0.000 title claims abstract description 156
- 238000000034 method Methods 0.000 title claims abstract description 65
- 238000005457 optimization Methods 0.000 claims description 14
- 238000011161 development Methods 0.000 abstract description 13
- 230000008569 process Effects 0.000 abstract description 13
- 238000012549 training Methods 0.000 description 25
- 238000010586 diagram Methods 0.000 description 6
- 238000013145 classification model Methods 0.000 description 5
- 238000003860 storage Methods 0.000 description 5
- 238000012545 processing Methods 0.000 description 4
- 238000012800 visualization Methods 0.000 description 4
- 230000004044 response Effects 0.000 description 3
- 238000004590 computer program Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种可视化界面图像转化为编程语言数据的方法，该方法包括：确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息，根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案，根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。本发明可将待转换可视化界面图像转换为能够被服务器或计算机的内存所识别以及可编辑的编程语言数据，从而不需要和现有技术一样，需要人工手动编程开发，避免人工手动编程过程中出现由于操作错误所导致的编程错误的问题，从而提高了可视化界面图像转化为编程语言数据的便捷性以及精准度，提高了可视化界面图像转化为编程语言数据的开发效率。
Description
技术领域
本发明涉及图像处理技术领域，尤其涉及一种可视化界面图像转化为编程语言数据的方法及装置。
背景技术
随着智慧城市类项目的推广和新一代信息技术的普及，可视化大屏的需求场景越来越多，覆盖面也越来越广。目前主流可视化大屏技术是通过组合第三方图表组件库，例如：eCharts、antV、hightCharts等，通过拖拽、参数设置等“所见即所得”的配置方式来进行图表数据的展示。
但是针对客户个性化、定制化需求(即将用户设计的可视化界面图像转化为编程语言数据(比如代码))的时候，还是得依旧遵循传统开发模式(即人工手动开发)完成客户的个性化需求，例如：需求调研、需求设计、需求确定、组件开发、调试等流程。然而，人工手动编程开发的过程中，会存在人工手动编程过程中容易出现由于操作错误所导致的编程错误的问题，导致需要人工花费大量时间反复检查错误原因以及纠正错误编程，在这过程中会耗费大量的人力、时间成本。并且，受众群体对可视化的视觉要求不断提高，导致可视化大屏的技术门槛和系统复杂度也相应提高。因此，亟需一种新的可视化界面图像转化为编程语言数据的方案。
发明内容
本发明提供一种可视化界面图像转化为编程语言数据的方法及装置，以提高可视化界面图像转化为编程语言数据的便捷性以及精准度，以及提高可视化界面图像转化为编程语言数据的开发效率。
第一方面，本发明提供了一种可视化界面图像转化为编程语言数据的方法，所述方法包括：
获取待转换可视化界面图像；
确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息；
根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案；
根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。
可选的，所述确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息，包括：
将所述待转换可视化界面图像分别输入已训练的组件识别模型，得到所述待转换可视化界面图像对应的组件属性信息；
将所述待转换可视化界面图像分别输入已训练的组件布局识别模型，得到所述待转换可视化界面图像对应的布局属性信息。
可选的，在所述确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息的步骤之前，所述方法还包括：
根据所述待转换可视化界面图像的图像类型，确定所述待转换可视化界面图像对应的组件识别模型和组件布局识别模型。
可选的，所述组件属性信息包括组件标识、组件位置信息、组件类型、尺寸大小、主体颜色表；所述布局属性信息包括主题、布局数据、画布属性、预置初始全局数据、组件列表、背景颜色。
可选的，所述根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案，包括：
将所述待转换可视化界面图像对应的组件属性信息和布局属性信息输入已训练的方案优化模型，得到所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；
将所述优化组件属性信息和优化布局属性信息作为目标组件布局方案。
可选的，若所述方案优化模型输出多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；所述方法还包括：
响应于用户确定指令，将所述用户确定指令对应的优化组件属性信息和优化布局属性信息作为目标组件布局方案。
可选的，所述根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据，包括：
根据所述优化组件属性信息，确定所述优化组件属性信息对应的编程语言数据；
根据所述优化布局属性信息，确定所述优化布局属性信息对应的编程语言数据；
根据所述优化组件属性信息对应的编程语言数据和所述优化布局属性信息对应的编程语言数据，确定所述目标组件布局方案对应的编程语言数据。。
第二方面，本发明提供了一种可视化界面图像转化为编程语言数据的装置，所述装置包括：
图像获取单元，用于获取待转换可视化界面图像；
信息确定单元，用于确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息；
方案确定单元，用于根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案；
数据确定单元，用于根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。
可选的，所述信息确定单元，具体用于：
将所述待转换可视化界面图像分别输入已训练的组件识别模型，得到所述待转换可视化界面图像对应的组件属性信息；
将所述待转换可视化界面图像分别输入已训练的组件布局识别模型，得到所述待转换可视化界面图像对应的布局属性信息。
可选的，所述装置还包括模型确定单元，用于：
根据所述待转换可视化界面图像的图像类型，确定所述待转换可视化界面图像对应的组件识别模型和组件布局识别模型。
可选的，所述组件属性信息包括组件标识、组件位置信息、组件类型、尺寸大小、主体颜色表；所述布局属性信息包括主题、布局数据、画布属性、预置初始全局数据、组件列表、背景颜色。
可选的，所述方案确定单元，具体用于：
将所述待转换可视化界面图像对应的组件属性信息和布局属性信息输入已训练的方案优化模型，得到所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；
将所述优化组件属性信息和优化布局属性信息作为目标组件布局方案。
可选的，若所述方案优化模型输出多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；所述装置还包括指令响应单元，用于：
响应于用户确定指令，将所述用户确定指令对应的优化组件属性信息和优化布局属性信息作为目标组件布局方案。
可选的，所述数据确定单元，具体用于：
根据所述优化组件属性信息，确定所述优化组件属性信息对应的编程语言数据；
根据所述优化布局属性信息，确定所述优化布局属性信息对应的编程语言数据；
根据所述优化组件属性信息对应的编程语言数据和所述优化布局属性信息对应的编程语言数据，确定所述目标组件布局方案对应的编程语言数据。
第三方面，本发明提供了一种可读介质，包括执行指令，当电子设备的处理器执行所述执行指令时，所述电子设备执行如第一方面中任一所述的方法。
第四方面，本发明提供了一种电子设备，包括处理器以及存储有执行指令的存储器，当所述处理器执行所述存储器存储的所述执行指令时，所述处理器执行如第一方面中任一所述的方法。
由上述技术方案可以看出，本发明可以先确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息，然后可以根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案，接着，可以根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。本发明由于通过提取所述待转换可视化界面图像对应的组件属性信息和布局属性信息，并根据组件属性信息和布局属性信息确定目标组件布局方案，以及所述目标组件布局方案对应的编程语言数据，这样，可以将待转换可视化界面图像转换为能够被服务器或计算机的内存所识别以及可编辑的编程语言数据，从而不需要和现有技术一样，需要人工手动编程开发，避免了人工手动编程过程中出现由于操作错误所导致的编程错误的问题，从而提高了可视化界面图像转化为编程语言数据的便捷性以及精准度，提高了可视化界面图像转化为编程语言数据的开发效率。
上述的非惯用的优选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
为了更清楚地说明本发明实施例或现有的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本发明一种可视化界面图像转化为编程语言数据的方法的流程示意图；
图2为本发明一实施例提供的一种组件识别模型与组件布局识别模型的网络基本结构示意图；
图3为本发明一实施例提供的一种分类模型的网络基本结构示意图；
图4为本发明一实施例提供的一种可视化界面图像转化为编程语言数据的装置的结构示意图；
图5为本发明一实施例提供的一种电子设备的结构示意图。
具体实施方式
为使本发明的目的、技术方案和优点更加清楚，下面将结合具体实施例及相应的附图对本发明的技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
为了解决现有技术中人工手动编程开发可视化界面图像对应的编程语言数据的过程中，所存在的人工手动编程过程中容易出现由于操作错误所导致的编程错误的问题。本发明提供了一种可视化界面图像转化为编程语言数据的方法，在本方法中，可以先确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息，然后可以根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案，接着，可以根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。本发明由于通过提取所述待转换可视化界面图像对应的组件属性信息和布局属性信息，并根据组件属性信息和布局属性信息确定目标组件布局方案，以及所述目标组件布局方案对应的编程语言数据，这样，可以将待转换可视化界面图像转换为能够被服务器或计算机的内存所识别以及可编辑的编程语言数据，从而不需要和现有技术一样，需要人工手动编程开发，避免了人工手动编程过程中出现由于操作错误所导致的编程错误的问题，从而提高了可视化界面图像转化为编程语言数据的便捷性以及精准度，提高了可视化界面图像转化为编程语言数据的开发效率。
下面结合附图，详细说明本发明的各种非限制性实施方式。
参见图1，示出了本发明实施例中的一种可视化界面图像转化为编程语言数据的方法。在本实施例中，所述方法例如可以包括以下步骤：
S101：获取待转换可视化界面图像。
在本实施例中，可以将需要需要转换的可视化界面图像称之为待转换可视化界面图像。需要说明的是，可视化界面图像可以理解为一个设计有若干个组件图像的界面图像，例如，可以为高保真可视化界面图像，可以为低保真可视化界面图像，还可以为手绘稿可视化界面图像。
需要说明的是，若本方法为在服务器执行的，则待转换可视化界面图像可以为服务器本地存储的，也可以是由其他设备向服务器发送的。若本方法为在终端设备执行的，则待转换可视化界面图像可以为终端设备本地存储的，也可以是由其他设备向终端设备发送的，还可以是终端设备利用摄像头采集或者设计的。
S102：确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息。
在本实施例中，待转换可视化界面图像包括一个或多个组件，以及各个组件在该界面中的布局情况。若需要将待转换可视化界面图像转化为编程语言数据，则可以理解为，需要将所述待转换可视化界面图像对应的组件属性信息和布局属性信息转换为编程语言数据，故此，在获取到待转换可视化界面图像后，可以确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息。其中，组件属性信息可以理解为组件的基本属性信息，例如所述组件属性信息可以包括组件标识(比如组件的名称)、组件位置信息(比如组件在待转换可视化界面图像中的位置)、组件类型、尺寸大小(比如组件的长、宽)、主体颜色表等；所述布局属性信息可以理解为待转换可视化界面图像中界面布局的基本属性信息，例如所述布局属性信息可以包括主题(比如主题色)、布局数据(比如界面的图形层次和各个组件的交互事件)、画布属性、预置初始全局数据、组件列表、背景颜色等。需要说明的是，所述待转换可视化界面图像对应的组件属性信息和布局属性信息可以为json格式。
在一种实现方式中，可以将所述待转换可视化界面图像分别输入已训练的组件识别模型，得到所述待转换可视化界面图像对应的组件属性信息。需要说明的是，已训练的组件识别模型可以基于若干组训练样本训练得到的，其中，每组训练样本包括一张可视化界面训练图像以及该视化界面训练图像对应的真实组件属性信息。接下来，将举例说明训练样本的生成方式，具体地，该视化界面训练图像对应的真实组件属性信息可以由人工标注，也可是利用预设的工具进行标注的，比如可以使用LabelMe或者LabelImg等软件标注出每个组件的坐标信息和类别信息。
将所述待转换可视化界面图像分别输入已训练的组件布局识别模型，得到所述待转换可视化界面图像对应的布局属性信息。需要说明的是，已训练的组件识别模型可以基于若干组训练样本训练得到的，其中，每组训练样本包括一张可视化界面训练图像以及该视化界面训练图像对应的真实布局属性信息。接下来，将举例说明训练样本的生成方式，举例来说，视化界面训练图像对应的主题色提取算法为针对某个组件，首先提取出其边缘10个像素宽度的颜色均值作为组件的背景色；接着对于组件中的所有像素点，去除掉与背景色接近的背景像素点；然后对于剩下的像素点颜色使用K-means算法得到前5类的RGB颜色值作为此组件的主题色。
需要说明的是，在本实施例的一种实现方式中，组件识别模型与组件布局识别模型可以为同一个模型，即该模型的输入为待转换可视化界面图像，输出为待转换可视化界面图像对应的组件属性信息和布局属性信息，需要说明的是，在一种实现方式中，该模型可以为YOLO v5，其的网络基本结构如图2所示。
需要说明的是，在一种实现方式中，在所述确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息的步骤之前，所述方法还可以包括：
根据所述待转换可视化界面图像的图像类型，确定所述待转换可视化界面图像对应的组件识别模型和组件布局识别模型。
在本实施例中，可以先根据所述待转换可视化界面图像的图像类型，例如，可以将待转换可视化界面图像输入已训练的分类模型，得到所述待转换可视化界面图像的图像类型。其中，该分类模型可以是利用多种图像类型的训练图像以及训练图像对应的图像类型标签进行训练得到的。例如，该分类模型的训练分类和识别所用的基本数据相同，需要采集足量的、包含所有高保真、低保真、手绘稿三个类别的大屏图片，同时应保证图片中包含足量(即大于预设数量)的待识别组件，例如条形图、饼图等等，基本要求每类大屏图片(即每种图像类型的训练图像)不低于400张，每类组件出现不低于400次。需要说明的是，在一种实现方式中，分类模型可以为HRNet，其网络结构可以如图3所示。
在确定所述待转换可视化界面图像的图像类型之后，可以根据所述待转换可视化界面图像的图像类型确定所述待转换可视化界面图像对应的组件识别模型和组件布局识别模型。需要说明的是，在本实现方式中，每种图像类型对应一个组件识别模型和组件布局识别模型，可以理解的是，每种图像类型对应一个组件识别模型和组件布局识别模型均是利用该种图像类型的训练图像以及训练图像对应的真实组件属性信息和真实布局属性信息训练得到的。
S103：根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案。
在本实施例中，在确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息之后，可以根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案。
在一种实现方式中，可以直接将所述待转换可视化界面图像对应的组件属性信息和布局属性信息，作为目标组件布局方案。
在一种实现方式中，也可以是先对所述待转换可视化界面图像对应的组件属性信息和布局属性信息进行优化处理，例如对主题色、布局、预置初始数据、组件的位置进行调整优化，通过调整组件属性信息和布局属性信息，使得调整后的可视化界面更加符合用户需求或者大众审美。举例来说，可以将所述待转换可视化界面图像对应的组件属性信息和布局属性信息输入已训练的方案优化模型，得到所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息，并将所述优化组件属性信息和优化布局属性信息作为目标组件布局方案。需要说明的是，方案优化模型可以是利用多组训练样本训练得到的，每组训练样本可以包括一组组件属性信息和布局属性信息，该组组件属性信息和布局属性信息对应的优化组件属性信息和优化布局属性信息。需要说明的是，每组训练样本可以是通过人工调整所生成的。
在一种实现方案中，若所述方案优化模型输出多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息，则所述方法还可以包括：
响应于用户确定指令，将所述用户确定指令对应的优化组件属性信息和优化布局属性信息作为目标组件布局方案。
在本实现方式中，方案优化模型输出多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息后，可以展示多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息，若检测到用户对其中一组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息执行预设操作(比如单击)后，可以根据该操作生成用户确定指令，并响应于用户确定指令，将所述用户确定指令对应的优化组件属性信息和优化布局属性信息(即用户执行预设操作的优化组件属性信息和优化布局属性信息)作为目标组件布局方案。
S104：根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。
在本实施例中，可以先根据所述优化组件属性信息，确定所述优化组件属性信息对应的编程语言数据，以及，根据所述优化布局属性信息，确定所述优化布局属性信息对应的编程语言数据；接着，可以根据所述优化组件属性信息对应的编程语言数据和所述优化布局属性信息对应的编程语言数据，确定所述目标组件布局方案对应的编程语言数据，例如需要将所述优化组件属性信息对应的编程语言数据和所述优化布局属性信息对应的编程语言数据相互嵌套生成所述目标组件布局方案对应的编程语言数据。需要说明的是，在本实施例中，可以基于预设的数据库，其中该数据库预先存储了若干组件属性信息以及其对应的编程语言数据之间的对应关系，以及，若干组布局属性信息以及其对应的编程语言数据之间的对应关系，这样，可以利用该预设的数据库确定所述优化组件属性信息对应的编程语言数据，以及，确定所述优化布局属性信息对应的编程语言数据，例如可以基于Freemaker模板语言确定所述优化组件属性信息对应的编程语言数据，以及，确定所述优化布局属性信息对应的编程语言数据。
由上述技术方案可以看出，本发明可以先确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息，然后可以根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案，接着，可以根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。本发明由于通过提取所述待转换可视化界面图像对应的组件属性信息和布局属性信息，并根据组件属性信息和布局属性信息确定目标组件布局方案，以及所述目标组件布局方案对应的编程语言数据，这样，可以将待转换可视化界面图像转换为能够被服务器或计算机的内存所识别以及可编辑的编程语言数据，从而不需要和现有技术一样，需要人工手动编程开发，避免了人工手动编程过程中出现由于操作错误所导致的编程错误的问题，从而提高了可视化界面图像转化为编程语言数据的便捷性以及精准度，提高了可视化界面图像转化为编程语言数据的开发效率。这样，本申请可以极大提高数据可视大屏的交付效率，降低研发成本。用户体验设计人员只需不断提升用户体验，技术人员不断优化学习模型，这样生产效率和用户体验性将会得到完美平衡，同时也会在行业内带来革命性变革。
如图4所示，为本发明所述可视化界面图像转化为编程语言数据的装置的一个具体实施例。本实施例所述装置，即用于执行上述实施例所述方法的实体装置。其技术方案本质上与上述实施例一致，上述实施例中的相应描述同样适用于本实施例中。本实施例中所述装置包括：
图像获取单元401，用于获取待转换可视化界面图像；
信息确定单元402，用于确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息；
方案确定单元403，用于根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案；
数据确定单元404，用于根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。
可选的，所述信息确定单元402，具体用于：
将所述待转换可视化界面图像分别输入已训练的组件识别模型，得到所述待转换可视化界面图像对应的组件属性信息；
将所述待转换可视化界面图像分别输入已训练的组件布局识别模型，得到所述待转换可视化界面图像对应的布局属性信息。
可选的，所述装置还包括模型确定单元，用于：
根据所述待转换可视化界面图像的图像类型，确定所述待转换可视化界面图像对应的组件识别模型和组件布局识别模型。
可选的，所述组件属性信息包括组件标识、组件位置信息、组件类型、尺寸大小、主体颜色表；所述布局属性信息包括主题、布局数据、画布属性、预置初始全局数据、组件列表、背景颜色。
可选的，所述方案确定单元403，具体用于：
将所述待转换可视化界面图像对应的组件属性信息和布局属性信息输入已训练的方案优化模型，得到所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；
将所述优化组件属性信息和优化布局属性信息作为目标组件布局方案。
可选的，若所述方案优化模型输出多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；所述装置还包括指令响应单元，用于：
响应于用户确定指令，将所述用户确定指令对应的优化组件属性信息和优化布局属性信息作为目标组件布局方案。
可选的，所述数据确定单元404，具体用于：
根据所述优化组件属性信息，确定所述优化组件属性信息对应的编程语言数据；
根据所述优化布局属性信息，确定所述优化布局属性信息对应的编程语言数据；
根据所述优化组件属性信息对应的编程语言数据和所述优化布局属性信息对应的编程语言数据，确定所述目标组件布局方案对应的编程语言数据。
图5是本发明实施例提供的一种电子设备的结构示意图。在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。
处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry StandardArchitecture，工业标准体系结构)总线、PCI(Peripheral ComponentInterconnect，外设部件互连标准)总线或EISA(Extended IndustryStandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。
存储器，用于存放执行指令。具体地，执行指令即可被执行的计算机程序。存储器可以包括内存和非易失性存储器，并向处理器提供执行指令和数据。
在一种可能实现的方式中，处理器从非易失性存储器中读取对应的执行指令到内存中然后运行，也可从其它设备上获取相应的执行指令，以在逻辑层面上形成可视化界面图像转化为编程语言数据的装置。处理器执行存储器所存放的执行指令，以通过执行的执行指令实现本发明任一实施例中提供的可视化界面图像转化为编程语言数据的方法。
上述如本发明图1所示实施例提供的可视化界面图像转化为编程语言数据的装置执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application SpecificIntegrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。
本发明实施例还提出了一种可读介质，该可读存储介质存储有执行指令，存储的执行指令被电子设备的处理器执行时，能够使该电子设备执行本发明任一实施例中提供的可视化界面图像转化为编程语言数据的方法，并具体用于执行上述可视化界面图像转化为编程语言数据的所述的方法。
前述各个实施例中所述的电子设备可以为计算机。
本领域内的技术人员应明白，本发明的实施例可提供为方法或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例，或软件和硬件相结合的形式。
本发明中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上所述仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。
Claims (10)
1.一种可视化界面图像转化为编程语言数据的方法，其特征在于，所述方法包括：
获取待转换可视化界面图像；
确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息；
根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案；
根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。
2.根据权利要求1所述的方法，其特征在于，所述确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息，包括：
将所述待转换可视化界面图像分别输入已训练的组件识别模型，得到所述待转换可视化界面图像对应的组件属性信息；
将所述待转换可视化界面图像分别输入已训练的组件布局识别模型，得到所述待转换可视化界面图像对应的布局属性信息。
3.根据权利要求2所述的方法，其特征在于，在所述确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息的步骤之前，所述方法还包括：
根据所述待转换可视化界面图像的图像类型，确定所述待转换可视化界面图像对应的组件识别模型和组件布局识别模型。
4.根据权利要求2或3所述的方法，其特征在于，所述组件属性信息包括组件标识、组件位置信息、组件类型、尺寸大小、主体颜色表；所述布局属性信息包括主题、布局数据、画布属性、预置初始全局数据、组件列表、背景颜色。
5.根据权利要求1所述的方法，其特征在于，所述根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案，包括：
将所述待转换可视化界面图像对应的组件属性信息和布局属性信息输入已训练的方案优化模型，得到所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；
将所述优化组件属性信息和优化布局属性信息作为目标组件布局方案。
6.根据权利要求5所述的方法，其特征在于，若所述方案优化模型输出多组所述待转换可视化界面图像对应的优化组件属性信息和优化布局属性信息；所述方法还包括：
响应于用户确定指令，将所述用户确定指令对应的优化组件属性信息和优化布局属性信息作为目标组件布局方案。
7.根据权利要求5或6所述的方法，其特征在于，所述根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据，包括：
根据所述优化组件属性信息，确定所述优化组件属性信息对应的编程语言数据；
根据所述优化布局属性信息，确定所述优化布局属性信息对应的编程语言数据；
根据所述优化组件属性信息对应的编程语言数据和所述优化布局属性信息对应的编程语言数据，确定所述目标组件布局方案对应的编程语言数据。
8.一种可视化界面图像转化为编程语言数据的装置，其特征在于，所述装置包括：
图像获取单元，用于获取待转换可视化界面图像；
信息确定单元，用于确定所述待转换可视化界面图像对应的组件属性信息和布局属性信息；
方案确定单元，用于根据所述待转换可视化界面图像对应的组件属性信息和布局属性信息，确定目标组件布局方案；
数据确定单元，用于根据所述目标组件布局方案，确定所述目标组件布局方案对应的编程语言数据。
9.一种可读介质，包括执行指令，当电子设备的处理器执行所述执行指令时，所述电子设备执行如权利要求1至7中任一所述的方法。
10.一种电子设备，包括处理器以及存储有执行指令的存储器，当所述处理器执行所述存储器存储的所述执行指令时，所述处理器执行如权利要求1至7中任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110456861.0A CN113031938A (zh) | 2021-04-25 | 2021-04-25 | 一种可视化界面图像转化为编程语言数据的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110456861.0A CN113031938A (zh) | 2021-04-25 | 2021-04-25 | 一种可视化界面图像转化为编程语言数据的方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113031938A true CN113031938A (zh) | 2021-06-25 |
Family
ID=76455051
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110456861.0A Pending CN113031938A (zh) | 2021-04-25 | 2021-04-25 | 一种可视化界面图像转化为编程语言数据的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113031938A (zh) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113687824A (zh) * | 2021-10-26 | 2021-11-23 | 中电云数智科技有限公司 | 一种可视化界面的编程语言数据生成系统和方法 |
| CN113821278A (zh) * | 2021-09-06 | 2021-12-21 | 挂号网（杭州）科技有限公司 | 调用图像尺寸方法、装置、电子设备及存储介质 |
| CN116302294A (zh) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | 一种界面化自动识别组件属性的方法及系统 |
| CN117406965A (zh) * | 2023-10-26 | 2024-01-16 | 苏州爱医斯坦智能科技有限公司 | 人工智能模型的可视化输出方法、装置、设备及介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110785736A (zh) * | 2018-02-12 | 2020-02-11 | 甲骨文国际公司 | 自动代码生成 |
| CN111208998A (zh) * | 2019-12-27 | 2020-05-29 | 深圳力维智联技术有限公司 | 数据可视化大屏自动布局的方法、装置及存储介质 |
| CN111240670A (zh) * | 2018-11-28 | 2020-06-05 | 华中科技大学 | 一种软件图形界面的快速自动生成方法与装置 |
| CN111652208A (zh) * | 2020-04-17 | 2020-09-11 | 北京三快在线科技有限公司 | 用户界面组件的识别方法、装置、电子设备及存储介质 |
| CN111652266A (zh) * | 2020-04-17 | 2020-09-11 | 北京三快在线科技有限公司 | 用户界面组件的识别方法、装置、电子设备和存储介质 |
-
2021
- 2021-04-25 CN CN202110456861.0A patent/CN113031938A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110785736A (zh) * | 2018-02-12 | 2020-02-11 | 甲骨文国际公司 | 自动代码生成 |
| CN111240670A (zh) * | 2018-11-28 | 2020-06-05 | 华中科技大学 | 一种软件图形界面的快速自动生成方法与装置 |
| CN111208998A (zh) * | 2019-12-27 | 2020-05-29 | 深圳力维智联技术有限公司 | 数据可视化大屏自动布局的方法、装置及存储介质 |
| CN111652208A (zh) * | 2020-04-17 | 2020-09-11 | 北京三快在线科技有限公司 | 用户界面组件的识别方法、装置、电子设备及存储介质 |
| CN111652266A (zh) * | 2020-04-17 | 2020-09-11 | 北京三快在线科技有限公司 | 用户界面组件的识别方法、装置、电子设备和存储介质 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113821278A (zh) * | 2021-09-06 | 2021-12-21 | 挂号网（杭州）科技有限公司 | 调用图像尺寸方法、装置、电子设备及存储介质 |
| CN113821278B (zh) * | 2021-09-06 | 2024-05-03 | 挂号网（杭州）科技有限公司 | 调用图像尺寸方法、装置、电子设备及存储介质 |
| CN113687824A (zh) * | 2021-10-26 | 2021-11-23 | 中电云数智科技有限公司 | 一种可视化界面的编程语言数据生成系统和方法 |
| CN116302294A (zh) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | 一种界面化自动识别组件属性的方法及系统 |
| CN116302294B (zh) * | 2023-05-18 | 2023-09-01 | 安元科技股份有限公司 | 一种界面化自动识别组件属性的方法及系统 |
| CN117406965A (zh) * | 2023-10-26 | 2024-01-16 | 苏州爱医斯坦智能科技有限公司 | 人工智能模型的可视化输出方法、装置、设备及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113031938A (zh) | 一种可视化界面图像转化为编程语言数据的方法及装置 | |
| CN111179253A (zh) | 一种产品缺陷检测方法、装置与系统 | |
| CN107277615B (zh) | 直播风格化处理方法、装置、计算设备及存储介质 | |
| CN113609820B (zh) | 基于可扩展标记语言文件生成word文件的方法、装置及设备 | |
| CN109255300B (zh) | 票据信息提取方法、装置、计算机设备及存储介质 | |
| CN111177621B (zh) | 一种web页面开发方法、装置及系统 | |
| CN109656652B (zh) | 网页图表绘制方法、装置、计算机设备和存储介质 | |
| CN109978044B (zh) | 训练数据生成方法和装置、以及模型的训练方法和装置 | |
| CN111208998A (zh) | 数据可视化大屏自动布局的方法、装置及存储介质 | |
| CN110363828A (zh) | 一种绘制流程图的方法及绘制流程图的设备 | |
| CN111222571A (zh) | 图像特效的处理方法、装置、电子设备及存储介质 | |
| CN111292334A (zh) | 一种全景图像分割方法、装置及电子设备 | |
| CN111339944A (zh) | 装修风格识别方法、装置及电子设备 | |
| CN112131837A (zh) | 业务报告配置方法、装置、计算机设备和存储介质 | |
| CN113420756A (zh) | 证件图像的识别方法和装置、存储介质及电子装置 | |
| CN112052038A (zh) | 一种生成前端接口的方法及装置 | |
| CN108805799B (zh) | 全景图像合成装置、方法及计算机可读存储介质 | |
| CN113269153B (zh) | 一种表格识别方法以及装置 | |
| Cheng et al. | Deep image matting with flexible guidance input | |
| WO2021179751A1 (zh) | 图像处理方法和系统 | |
| CN107071553B (zh) | 一种修改视频语音的方法、装置和计算机可读存储介质 | |
| CN112685033A (zh) | 用户界面组件自动生成方法、装置及计算机可读存储介质 | |
| CN117291162A (zh) | 样式迁移 | |
| CN112950167A (zh) | 设计服务匹配方法、装置、设备及存储介质 | |
| US9840072B2 (en) | Method for arranging joints to 3D model, arranging apparatus for the method, and application program for using the same |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |