CN116661786A - 一种设计页面生成方法及装置 - Google Patents

一种设计页面生成方法及装置 Download PDF

Info

Publication number
CN116661786A
CN116661786A CN202310664460.3A CN202310664460A CN116661786A CN 116661786 A CN116661786 A CN 116661786A CN 202310664460 A CN202310664460 A CN 202310664460A CN 116661786 A CN116661786 A CN 116661786A
Authority
CN
China
Prior art keywords
component
preset
position information
user interface
components
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
Application number
CN202310664460.3A
Other languages
English (en)
Inventor
孔令钰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Industrial and Commercial Bank of China Ltd ICBC
Original Assignee
Industrial and Commercial Bank of China Ltd ICBC
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Industrial and Commercial Bank of China Ltd ICBC filed Critical Industrial and Commercial Bank of China Ltd ICBC
Priority to CN202310664460.3A priority Critical patent/CN116661786A/zh
Publication of CN116661786A publication Critical patent/CN116661786A/zh
Pending legal-status Critical Current

Links

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/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/08—Learning methods
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/10—Segmentation; Edge detection
    • G06T7/11—Region-based segmentation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
    • G06V10/764—Arrangements for image or video recognition or understanding using pattern recognition or machine learning using classification, e.g. of video objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V10/00—Arrangements for image or video recognition or understanding
    • G06V10/70—Arrangements for image or video recognition or understanding using pattern recognition or machine learning
    • G06V10/82—Arrangements for image or video recognition or understanding using pattern recognition or machine learning using neural networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06V—IMAGE OR VIDEO RECOGNITION OR UNDERSTANDING
    • G06V30/00—Character recognition; Recognising digital ink; Document-oriented image-based pattern recognition
    • G06V30/40—Document-oriented image-based pattern recognition
    • G06V30/42—Document-oriented image-based pattern recognition based on the type of document
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
    • Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
    • Y02P90/30—Computing systems specially adapted for manufacturing

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Evolutionary Computation (AREA)
  • Artificial Intelligence (AREA)
  • General Health & Medical Sciences (AREA)
  • General Engineering & Computer Science (AREA)
  • Computing Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Multimedia (AREA)
  • Databases & Information Systems (AREA)
  • Medical Informatics (AREA)
  • Human Computer Interaction (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Biomedical Technology (AREA)
  • Biophysics (AREA)
  • Computational Linguistics (AREA)
  • Data Mining & Analysis (AREA)
  • Molecular Biology (AREA)
  • Mathematical Physics (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明提供一种设计页面生成方法及装置，涉及图像处理技术领域，可用于金融领域或其他技术领域。所述方法包括：获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。所述装置执行上述方法。本发明实施例提供的设计页面生成方法及装置，能够提高前端编码人员的工作效率。

Description

一种设计页面生成方法及装置
技术领域
本发明涉及图像处理技术领域，具体涉及一种设计页面生成方法及装置。
背景技术
企业中的开发人员通常包括UI设计师和前端编码人员，UI设计师通常将自己设计的用户界面设计图，即UI图，向前端编码人员展示并说明，然后前端编码人员根据用户界面设计图，通过编写代码完成页面设计工作。
页面中包括组件，组件可以是辅助用户进行页面操作的按钮，用于报警的指示灯等。前端编码人员通常是为每一种组件预先编写好相应的组件代码，然后根据页面中包括的组件手动选择相应的组件代码，再通过运行组件代码生成设计页面，但是，组件类别繁多，依靠前端编码人员肉眼识别组件，非常容易出错，而且在确定组件类别后还需要手动选择对应正确的组件代码，此外，还要对这些组件代码进行组合拼接等，耗时耗力，极大影响了前端编码人员的工作效率。
发明内容
针对现有技术中的问题，本发明实施例提供一种设计页面生成方法及装置，能够至少部分地解决现有技术中存在的问题。
一方面，本发明提出一种设计页面生成方法，包括：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
其中，所述对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息，包括：
对所述用户界面设计图进行图像分割，得到各分割区域，并记录与各分割区域分别对应的分割区域位置；
根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息；
对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别。
其中，所述对所述用户界面设计图进行图像分割，得到各分割区域，包括：
在所述用户界面设计图中随机选择一个未标记的像素点，并进行标记，得到标记像素点；
以所述标记像素点为中心，获取预设区域范围内的未标记的像素点，并将未标记的像素点一一与所述标记像素点进行灰度值比较；
将灰度值差值小于预设灰度值差值阈值的未标记的像素点分配至所述标记像素点所在的区域，将灰度值差值大于等于预设灰度值差值阈值的未标记的像素点分配至新区域，并对未标记的像素点进行标记；
重复执行所述在所述用户界面设计图中随机选择一个未标记的像素点至所述并对未标记的像素点进行标记之间的步骤，直到遍历完成所述用户界面设计图中所有未标记的像素点为止，并将所有区域作为各分割区域。
其中，所述位置关系包括重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
获取存在所述重叠关系的相邻分割区域之间的共有区域中的目标像素点；
分别计算各目标像素点与相邻分割区域中的各分割区域中像素平均值之间的相似度；
将各目标像素点分别分配至相似度最大的分割区域中，得到各组件和与各组件分别对应的组件位置信息。
其中，所述位置关系还包括非重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
将存在所述非重叠关系的相邻分割区域分别确定为各组件和与各组件分别对应的组件位置信息。
其中，所述对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别，包括：
基于预设图像分类识别模型对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别；
其中，所述预设图像分类识别模型根据图像分类识别样本数据训练深度神经网络中的Inception模块得到。
其中，所述根据预设排序顺序和各组件位置信息对各组件进行排序，包括：
按照从上至下逐行扫描各组件位置信息的方式对各组件进行排序；
或者，按照从左至右逐列扫描各组件位置信息的方式对各组件进行排序。
一方面，本发明提出一种设计页面生成装置，包括：
获取单元，用于获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
确定单元，用于根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
生成单元，用于根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
再一方面，本发明实施例提供一种电子设备，包括：处理器、存储器和总线，其中，
所述处理器和所述存储器通过所述总线完成相互间的通信；
所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如下方法：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
本发明实施例提供一种非暂态计算机可读存储介质，包括：
所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如下方法：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
本发明实施例提供的设计页面生成方法及装置，获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面，能够提高前端编码人员的工作效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：
图1是本发明一实施例提供的设计页面生成方法的流程示意图。
图2是本发明实施例提供的获取组件和组件位置信息说明示意图。
图3是本发明实施例提供的组件排序说明示意图。
图4是本发明一实施例提供的设计页面生成装置的结构示意图。
图5为本发明实施例提供的电子设备实体结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。
相关术语说明：
图像分割：将图像分割成若干个特定的、具有独特性质的区域，并提取出所需目标的技术和过程，它是由图像处理到图像分析的关键步骤。图像分割是图像识别的至关重要的预处理，没有正确的分割就不会有正确的识别。
图像分割在数学角度看来是将数字图像划分成互不相交的区域的过程，同时也是个标记的过程，即把属于同一区域的像素赋予相同的标签。
图像分类：根据图像信息中所反映的不同特征，将不同类别的目标区分开的图像处理方法。
图1是本发明一实施例提供的设计页面生成方法的流程示意图，如图1所示，本发明实施例提供的设计页面生成方法，包括：
步骤S1：获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件。
步骤S2：根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系。
步骤S3：根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
在上述步骤S1中，装置获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件。装置可以是执行该方法的计算机设备，例如可以包括服务器。需要说明是，本发明实施例涉及数据的获取及分析是经用户授权的。
可以通过UI设计师提供的用户界面设计图获取用户界面设计图。
对用户界面设计图中的所有组件进行识别得到的识别结果，可以主要包括组件类别和组件位置信息，其中，组件类别的分类依据可以由前端编码人员根据工作需要自主设置。
组件位置信息可以反映组件在设计页面中的相对位置，可以通过在组件位置区域中的像素点坐标表示组件位置信息。
所述对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息，包括：
对所述用户界面设计图进行图像分割，得到各分割区域，并记录与各分割区域分别对应的分割区域位置；可以通过在分割区域中的像素点坐标表示分割区域位置。所述对所述用户界面设计图进行图像分割，得到各分割区域，包括：
在所述用户界面设计图中随机选择一个未标记的像素点，并进行标记，得到标记像素点；已标记的像素点表示已分配了区域的像素点，上述分配了区域可以包括将已标记的像素点分配至已有区域，或者将已标记的像素点分配至新区域。
以所述标记像素点为中心，获取预设区域范围内的未标记的像素点，并将未标记的像素点一一与所述标记像素点进行灰度值比较；预设区域范围的区域形状，可以根据实际情况自主设置，例如矩形，预设区域范围的具体数值，例如矩形的面积，也可以根据实际情况自主设置。
可以通过逐一遍历预设区域范围内的所有未标记的像素点的方式，获取预设区域范围内的所有未标记的像素点。
将灰度值差值小于预设灰度值差值阈值的未标记的像素点分配至所述标记像素点所在的区域，将灰度值差值大于等于预设灰度值差值阈值的未标记的像素点分配至新区域，并对未标记的像素点进行标记；为保证灰度值差值为正数，进而便于计算，可以对灰度值差值取绝对值，然后再与预设灰度值差值阈值进行数值比较。
预设灰度值差值阈值可以根据实际情况自主设置。灰度值差值小于预设灰度值差值阈值的未标记的像素点，就说明这个未标记的像素点与标记像素点的像素相似，相似的像素点可以放入相同的区域中。
灰度值差值大于等于预设灰度值差值阈值的未标记的像素点，就说明这个未标记的像素点与标记像素点的像素不相似，不相似的像素点不可以放入相同的区域中，需要为这个未标记的像素点单独生成一个新区域。
重复执行所述在所述用户界面设计图中随机选择一个未标记的像素点至所述并对未标记的像素点进行标记之间的步骤，直到遍历完成所述用户界面设计图中所有未标记的像素点为止，并将所有区域作为各分割区域。在此时就完成了对用户界面设计图进行图像分割，使得用户界面设计图中的每个像素点都为已标记像素点，并分配了区域。
根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息；所述位置关系包括重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
获取存在所述重叠关系的相邻分割区域之间的共有区域中的目标像素点；如图2所示，A和B为两个相邻分割区域，它们之间的存在重叠关系，体现重叠关系的共有区域如图2虚线框中所示。以共有区域中的两个目标像素点a和b为例进行说明。
分别计算各目标像素点与相邻分割区域中的各分割区域中像素平均值之间的相似度；对于一个目标像素点a，计算a与一个相邻分割区域A中的所有像素的像素平均值(即所有像素灰度值的平均值)之间的相似度，记为S11。
计算a与一个相邻分割区域B中的所有像素的像素平均值(即所有像素灰度值的平均值)之间的相似度，记为S12。
对于一个目标像素点b，计算b与一个相邻分割区域A中的所有像素的像素平均值(即所有像素灰度值的平均值)之间的相似度，记为S21。
计算b与一个相邻分割区域B中的所有像素的像素平均值(即所有像素灰度值的平均值)之间的相似度，记为S22。
将各目标像素点分别分配至相似度最大的分割区域中，得到各组件和与各组件分别对应的组件位置信息。对于一个目标像素点a，如果S11大于S12，则将该目标像素点分配至一个相邻分割区域A中。
对于一个目标像素点b，如果S22大于S21，则将该目标像素点分配至一个相邻分割区域B中。需要说明的是，如果存在重叠关系，就说明对用户界面设计图进行图像分割，得到各分割区域存在精确性不足的问题，从而使得像素被误分，使得组件分割结果不准确，此时就需要通过该步骤进行优化处理，提高组件分割结果精确度。
所述位置关系还包括非重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
将存在所述非重叠关系的相邻分割区域分别确定为各组件和与各组件分别对应的组件位置信息。需要说明的是，如果存在非重叠关系，即不存在重叠关系，就说明对用户界面设计图进行图像分割，得到各分割区域不存在精确性不足的问题，使得组件分割结果原本就比较准确，此时就无需通过额外步骤进行优化处理。
对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别。所述对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别，包括：
基于预设图像分类识别模型对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别；可以将用户界面设计图输入至预设图像分类识别模型中，将预设图像分类识别模型的输出结果作为各组件分别对应的组件类别。
其中，所述预设图像分类识别模型根据图像分类识别样本数据训练深度神经网络中的Inception模块得到。现有的AlexNet、VGG等结构都是通过增大网络的深度(层数)来获得更好的训练效果，但层数的增加会带来很多负作用，比如overfit、梯度消失、梯度爆炸等。
Inception模块的提出则从另一种角度来提升训练结果：能更高效的利用计算资源，在相同的计算量下能提取到更多的特征，从而提升训练结果。
Inception模块的配置内容如下：
Conv2D(64,kwenek_size＝1,activation＝‘relu’,padding＝‘same’)，根据实际情况调整层数以及核数。
池化层设置，如MaxPool2D(pool_size＝3,padding＝‘same’,strides＝1)，具体参数根据实际情况检验调整。其中最后一条线路中使用池化层，并且接一个1×1的卷积层以减少通道数。
整个模型包含多个卷积层和Inception块以及池化层。
模型创建完后，使用已有的训练数据集对模型进行训练，训练完后，使用该模型对图像分割后的各部分组件进行分类，并添加分类标签。
在上述步骤S2中，装置根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系。所述根据预设排序顺序和各组件位置信息对各组件进行排序，包括：
按照从上至下逐行扫描各组件位置信息的方式对各组件进行排序；
或者，按照从左至右逐列扫描各组件位置信息的方式对各组件进行排序。如图3所示，可以按照a11-a12-a13-a21-a22-a23-a31-a32-a33的逐行扫描各组件位置信息的方式对各组件进行排序。
也可以按照a11-a21-a31-a12-a22-a32-a13-a23-a33的逐列扫描各组件位置信息的方式对各组件进行排序。
在上述步骤S3中，装置根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。可以通过在代码运行环境中执行组合后的各组件代码块，实现自动生成设计页面。
本发明实施例提供的设计页面生成方法，获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面，能够提高前端编码人员的工作效率。
进一步地，所述对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息，包括：
对所述用户界面设计图进行图像分割，得到各分割区域，并记录与各分割区域分别对应的分割区域位置；可参照上述实施例的说明，不再赘述。
根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息；可参照上述实施例的说明，不再赘述。
对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别。可参照上述实施例的说明，不再赘述。
本发明实施例提供的设计页面生成方法，能够高效和准确的获取与各组件分别对应的组件类别和组件位置信息。
进一步地，所述对所述用户界面设计图进行图像分割，得到各分割区域，包括：
在所述用户界面设计图中随机选择一个未标记的像素点，并进行标记，得到标记像素点；可参照上述实施例的说明，不再赘述。
以所述标记像素点为中心，获取预设区域范围内的未标记的像素点，并将未标记的像素点一一与所述标记像素点进行灰度值比较；可参照上述实施例的说明，不再赘述。
将灰度值差值小于预设灰度值差值阈值的未标记的像素点分配至所述标记像素点所在的区域，将灰度值差值大于等于预设灰度值差值阈值的未标记的像素点分配至新区域，并对未标记的像素点进行标记；可参照上述实施例的说明，不再赘述。
重复执行所述在所述用户界面设计图中随机选择一个未标记的像素点至所述并对未标记的像素点进行标记之间的步骤，直到遍历完成所述用户界面设计图中所有未标记的像素点为止，并将所有区域作为各分割区域。可参照上述实施例的说明，不再赘述。
本发明实施例提供的设计页面生成方法，能够高效实现图像分割。
进一步地，所述位置关系包括重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
获取存在所述重叠关系的相邻分割区域之间的共有区域中的目标像素点；可参照上述实施例的说明，不再赘述。
分别计算各目标像素点与相邻分割区域中的各分割区域中像素平均值之间的相似度；可参照上述实施例的说明，不再赘述。
将各目标像素点分别分配至相似度最大的分割区域中，得到各组件和与各组件分别对应的组件位置信息。可参照上述实施例的说明，不再赘述。
本发明实施例提供的设计页面生成方法，能够进一步提高组件分割结果精确度。
进一步地，所述位置关系还包括非重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
将存在所述非重叠关系的相邻分割区域分别确定为各组件和与各组件分别对应的组件位置信息。可参照上述实施例的说明，不再赘述。
本发明实施例提供的设计页面生成方法，进一步能够高效的获取与各组件分别对应的组件类别和组件位置信息。
进一步地，所述对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别，包括：
基于预设图像分类识别模型对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别；可参照上述实施例的说明，不再赘述。
其中，所述预设图像分类识别模型根据图像分类识别样本数据训练深度神经网络中的Inception模块得到。可参照上述实施例的说明，不再赘述。
本发明实施例提供的设计页面生成方法，能够准确实现图像分类识别。
进一步地，所述根据预设排序顺序和各组件位置信息对各组件进行排序，包括：
按照从上至下逐行扫描各组件位置信息的方式对各组件进行排序；可参照上述实施例的说明，不再赘述。
或者，按照从左至右逐列扫描各组件位置信息的方式对各组件进行排序。可参照上述实施例的说明，不再赘述。
本发明实施例提供的设计页面生成方法，通过自主灵活的对组件进行排序，有助于进一步灵活组合各组件代码块，提高生成设计页面的自主灵活性。
需要说明的是，本发明实施例提供的设计页面生成方法可用于金融领域，也可用于除金融领域之外的任意技术领域，本发明实施例对设计页面生成方法的应用领域不做限定。
图4是本发明一实施例提供的设计页面生成装置的结构示意图，如图4所示，本发明实施例提供的设计页面生成装置，包括获取单元401、确定单元402和生成单元403，其中：
获取单元401用于获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；确定单元402用于根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；生成单元403用于根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
具体的，装置中的获取单元401用于获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；确定单元402用于根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；生成单元403用于根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
本发明实施例提供的设计页面生成装置，获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面，能够提高前端编码人员的工作效率。
进一步地，所述获取单元401具体用于：
对所述用户界面设计图进行图像分割，得到各分割区域，并记录与各分割区域分别对应的分割区域位置；
根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息；
对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别。
本发明实施例提供的设计页面生成装置，能够高效和准确的获取与各组件分别对应的组件类别和组件位置信息。
进一步地，所述获取单元401还具体用于：
在所述用户界面设计图中随机选择一个未标记的像素点，并进行标记，得到标记像素点；
以所述标记像素点为中心，获取预设区域范围内的未标记的像素点，并将未标记的像素点一一与所述标记像素点进行灰度值比较；
将灰度值差值小于预设灰度值差值阈值的未标记的像素点分配至所述标记像素点所在的区域，将灰度值差值大于等于预设灰度值差值阈值的未标记的像素点分配至新区域，并对未标记的像素点进行标记；
重复执行所述在所述用户界面设计图中随机选择一个未标记的像素点至所述并对未标记的像素点进行标记之间的步骤，直到遍历完成所述用户界面设计图中所有未标记的像素点为止，并将所有区域作为各分割区域。
本发明实施例提供的设计页面生成装置，能够高效实现图像分割。
进一步地，所述位置关系包括重叠关系；相应的，所述获取单元401还具体用于：
获取存在所述重叠关系的相邻分割区域之间的共有区域中的目标像素点；
分别计算各目标像素点与相邻分割区域中的各分割区域中像素平均值之间的相似度；
将各目标像素点分别分配至相似度最大的分割区域中，得到各组件和与各组件分别对应的组件位置信息。
本发明实施例提供的设计页面生成装置，能够进一步提高组件分割结果精确度。
进一步地，所述位置关系还包括非重叠关系；相应的，所述获取单元401还具体用于：
将存在所述非重叠关系的相邻分割区域分别确定为各组件和与各组件分别对应的组件位置信息。
本发明实施例提供的设计页面生成装置，进一步能够高效的获取与各组件分别对应的组件类别和组件位置信息。
进一步地，所述获取单元401还具体用于：
基于预设图像分类识别模型对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别；
其中，所述预设图像分类识别模型根据图像分类识别样本数据训练深度神经网络中的Inception模块得到。
本发明实施例提供的设计页面生成装置，能够准确实现图像分类识别。
进一步地，所述确定单元402具体用于：
按照从上至下逐行扫描各组件位置信息的方式对各组件进行排序；
或者，按照从左至右逐列扫描各组件位置信息的方式对各组件进行排序。
本发明实施例提供的设计页面生成装置，通过自主灵活的对组件进行排序，有助于进一步灵活组合各组件代码块，提高生成设计页面的自主灵活性。
本发明实施例提供设计页面生成装置的实施例具体可以用于执行上述各方法实施例的处理流程，其功能在此不再赘述，可以参照上述方法实施例的详细描述。
图5为本发明实施例提供的电子设备实体结构示意图，如图5所示，所述电子设备包括：处理器(processor)501、存储器(memory)502和总线503；
其中，所述处理器501、存储器502通过总线503完成相互间的通信；
所述处理器501用于调用所述存储器502中的程序指令，以执行上述各方法实施例所提供的方法，例如包括：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
本实施例公开一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的方法，例如包括：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
本实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储计算机程序，所述计算机程序使所述计算机执行上述各方法实施例所提供的方法，例如包括：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在本说明书的描述中，参考术语“一个实施例”、“一个具体实施例”、“一些实施例”、“例如”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种设计页面生成方法，其特征在于，包括：
获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
2.根据权利要求1所述的设计页面生成方法，其特征在于，所述对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息，包括：
对所述用户界面设计图进行图像分割，得到各分割区域，并记录与各分割区域分别对应的分割区域位置；
根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息；
对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别。
3.根据权利要求2所述的设计页面生成方法，其特征在于，所述对所述用户界面设计图进行图像分割，得到各分割区域，包括：
在所述用户界面设计图中随机选择一个未标记的像素点，并进行标记，得到标记像素点；
以所述标记像素点为中心，获取预设区域范围内的未标记的像素点，并将未标记的像素点一一与所述标记像素点进行灰度值比较；
将灰度值差值小于预设灰度值差值阈值的未标记的像素点分配至所述标记像素点所在的区域，将灰度值差值大于等于预设灰度值差值阈值的未标记的像素点分配至新区域，并对未标记的像素点进行标记；
重复执行所述在所述用户界面设计图中随机选择一个未标记的像素点至所述并对未标记的像素点进行标记之间的步骤，直到遍历完成所述用户界面设计图中所有未标记的像素点为止，并将所有区域作为各分割区域。
4.根据权利要求2所述的设计页面生成方法，其特征在于，所述位置关系包括重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
获取存在所述重叠关系的相邻分割区域之间的共有区域中的目标像素点；
分别计算各目标像素点与相邻分割区域中的各分割区域中像素平均值之间的相似度；
将各目标像素点分别分配至相似度最大的分割区域中，得到各组件和与各组件分别对应的组件位置信息。
5.根据权利要求4所述的设计页面生成方法，其特征在于，所述位置关系还包括非重叠关系；相应的，所述根据相邻分割区域位置之间的位置关系，确定各组件和与各组件分别对应的组件位置信息，包括：
将存在所述非重叠关系的相邻分割区域分别确定为各组件和与各组件分别对应的组件位置信息。
6.根据权利要求2所述的设计页面生成方法，其特征在于，所述对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别，包括：
基于预设图像分类识别模型对各组件分别进行图像分类识别，得到与各组件分别对应的组件类别；
其中，所述预设图像分类识别模型根据图像分类识别样本数据训练深度神经网络中的Inception模块得到。
7.根据权利要求1至6任一所述的设计页面生成方法，其特征在于，所述根据预设排序顺序和各组件位置信息对各组件进行排序，包括：
按照从上至下逐行扫描各组件位置信息的方式对各组件进行排序；
或者，按照从左至右逐列扫描各组件位置信息的方式对各组件进行排序。
8.一种设计页面生成装置，其特征在于，包括：
获取单元，用于获取用户界面设计图，对所述用户界面设计图中的所有组件进行识别，得到与各组件分别对应的组件类别和组件位置信息；所述用户界面设计图包括界面设计的组件；
确定单元，用于根据预设排序顺序和各组件位置信息对各组件进行排序，并根据预设对应关系确定与各组件类别分别对应的组件代码块；
其中，所述预设对应关系包括预设组件类别与预设组件代码块之间的对应关系；
生成单元，用于根据排序顺序依次组合各组件代码块，并执行组合后的各组件代码块，生成设计页面。
9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述方法的步骤。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述方法的步骤。
CN202310664460.3A 2023-06-06 2023-06-06 一种设计页面生成方法及装置 Pending CN116661786A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310664460.3A CN116661786A (zh) 2023-06-06 2023-06-06 一种设计页面生成方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310664460.3A CN116661786A (zh) 2023-06-06 2023-06-06 一种设计页面生成方法及装置

Publications (1)

Publication Number Publication Date
CN116661786A true CN116661786A (zh) 2023-08-29

Family

ID=87713423

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310664460.3A Pending CN116661786A (zh) 2023-06-06 2023-06-06 一种设计页面生成方法及装置

Country Status (1)

Country Link
CN (1) CN116661786A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117290627A (zh) * 2023-11-27 2023-12-26 福瑞莱环保科技（深圳）股份有限公司 一种服务器端页面组件渲染方法、系统及介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117290627A (zh) * 2023-11-27 2023-12-26 福瑞莱环保科技（深圳）股份有限公司 一种服务器端页面组件渲染方法、系统及介质
CN117290627B (zh) * 2023-11-27 2024-03-08 福瑞莱环保科技（深圳）股份有限公司 一种服务器端页面组件渲染方法、系统及介质

Similar Documents

Publication Publication Date Title
He et al. A run-based two-scan labeling algorithm
CN107784321B (zh) 数字绘本快速识别方法、系统及计算机可读存储介质
CN104573688A (zh) 基于深度学习的移动平台烟草激光码智能识别方法及装置
CN108960412B (zh) 图像识别方法、装置及计算机可读存储介质
CN113223013B (zh) 一种肺血管分段定位的方法、装置、设备及存储介质
CN111191584B (zh) 一种人脸识别方法及装置
CN111126393A (zh) 车辆外观改装判断方法、装置、计算机设备及存储介质
CN116661786A (zh) 一种设计页面生成方法及装置
CN113158895A (zh) 票据识别方法、装置、电子设备及存储介质
CN111242066A (zh) 大尺寸图像目标检测方法、装置及计算机可读存储介质
CN111190595A (zh) 基于界面设计图自动生成界面代码的方法、装置、介质及电子设备
CN112381087A (zh) 结合rpa和ai的图像识别方法、装置、计算机设备和介质
CN113627576B (zh) 扫码信息检测方法、装置、设备及存储介质
CN117876383B (zh) 一种基于yolov5l的公路表面条状裂缝检测方法
CN111160374A (zh) 一种基于机器学习的颜色识别方法及系统、装置
CN113657444A (zh) 一种界面元素识别方法及系统
Castillo et al. Object detection in digital documents based on machine learning algorithms
CN112613367A (zh) 票据信息文本框获取方法、系统、设备及存储介质
CN116109627B (zh) 基于迁移学习和小样本学习缺陷检测方法、装置及介质
CN114387600B (zh) 文本特征识别方法、装置、计算机设备和存储介质
CN114863438A (zh) 用于识别曲线的方法及系统
CN114120057A (zh) 一种基于PaddleDetection的混淆矩阵生成方法
CN112150398B (zh) 图像合成方法、装置及设备
CN113344946A (zh) 基于机器学习的安检图像违禁品检测方法、装置及介质
CN112288066B (zh) 图形码打码和识别方法、装置及系统

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