CN115469867A - 一种页面组件的样式信息的确定方法和装置 - Google Patents

一种页面组件的样式信息的确定方法和装置 Download PDF

Info

Publication number
CN115469867A
CN115469867A CN202211026365.2A CN202211026365A CN115469867A CN 115469867 A CN115469867 A CN 115469867A CN 202211026365 A CN202211026365 A CN 202211026365A CN 115469867 A CN115469867 A CN 115469867A
Authority
CN
China
Prior art keywords
style
pixel point
component
determining
information
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
CN202211026365.2A
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.)
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
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 Beijing Jingdong Century Trading Co Ltd, Beijing Wodong Tianjun Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN202211026365.2A priority Critical patent/CN115469867A/zh
Publication of CN115469867A publication Critical patent/CN115469867A/zh
Pending legal-status Critical Current

Links

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/38—Creation or generation of source code for implementing user interfaces
    • 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/40—Extraction of image or video features
    • G06V10/44—Local feature extraction by analysis of parts of the pattern, e.g. by detecting edges, contours, loops, corners, strokes or intersections; Connectivity analysis, e.g. of connected components
    • 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/40—Extraction of image or video features
    • G06V10/56—Extraction of image or video features relating to colour
    • 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/10—Character recognition
    • G06V30/18—Extraction of features or characteristics of the image
    • G06V30/1801—Detecting partial patterns, e.g. edges or contours, or configurations, e.g. loops, corners, strokes or intersections
    • 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/10—Character recognition
    • G06V30/18—Extraction of features or characteristics of the image
    • G06V30/18105—Extraction of features or characteristics of the image related to colour
    • 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/10—Character recognition
    • G06V30/19—Recognition using electronic means
    • G06V30/191—Design or setup of recognition systems or techniques; Extraction of features in feature space; Clustering techniques; Blind source separation
    • G06V30/19173—Classification techniques

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Multimedia (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Software Systems (AREA)
  • Evolutionary Computation (AREA)
  • Computing Systems (AREA)
  • Databases & Information Systems (AREA)
  • Artificial Intelligence (AREA)
  • General Health & Medical Sciences (AREA)
  • Medical Informatics (AREA)
  • Health & Medical Sciences (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种页面组件的样式信息的确定方法和装置，涉及超级深度学习技术领域。该方法的具体实施方式包括：接收页面组件的样式生成请求；其中，样式生成请求指示了页面组件的样式图片；将样式图片输入预训练的组件样式模型；其中，组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；响应于样式生成请求，根据组件样式模型的输出，得到页面组件的样式信息。该实施方式通过按钮组件的样式信息一键生成的方式，重复生成页面UI，大大提高了组件生成效率，生成的页面UI样式准确、精度较高，满足用户的精度、观感和交互需求，降低了前端工程师的人力、时间成本，提高其的开发效率。

Description

一种页面组件的样式信息的确定方法和装置
技术领域
本发明涉及超级深度学习技术领域，尤其涉及一种页面组件的样式信息的确定方法和装置。
背景技术
UI(User Interface，用户界面)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI包含了人机交互与图形用户接口，可以通过组件的形式进行展示。
现有的页面UI生成过程中，由于一些突发情况(比如，促销)下需要生成的页面UI数据量较大且重复性较高，为了降低人工生成的成本，DTC(design to code，设计稿生成组件信息)或者拖拽式组件信息生成等方法应用广泛。
然而，DTC或者拖曳式生成的方式应用的场景通常是页面UI生成需求激增的情况，故而组件信息准确度低，对应得到的CSS(Cascading Style Sheets，层叠样式表)样式较为粗糙，无法适用于精度要求较高、交互频繁的C端(consumer，消费者、个人用户端)页面，用户使用体验、观感等极为不适。
发明内容
有鉴于此，本发明实施例提供一种页面组件的样式信息的确定方法和装置，能够将接收到的按钮组件的样式图片输入组件样式模型，生成组件样式信息，进而重复生成页面UI，大大提高了组件生成效率，且后续基于组件样式信息重复生成的页面UI样式准确、精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率。
为实现上述目的，根据本发明实施例的一个方面，提供了一种页面组件的样式信息的确定方法，包括：
接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片；
将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；
响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
可选地，还包括：
对所述样式图片进行预处理，确定所述页面组件的像素点信息；
将所述页面组件的多个像素点的颜色值和位置值进行对比，确定所述页面组件的背景样式信息、边框样式信息和字体样式信息；
根据所述背景样式信息、边框样式信息和字体样式信息，生成所述页面组件的样式信息，得到所述组件样式模型。
可选地，所述对所述样式图片进行预处理，确定所述页面组件的像素点信息，包括：
根据预设裁剪尺寸，确定所述样式图片的裁剪候选框；其中，所述预设裁剪尺寸大于所述页面组件的最大边框尺寸；
利用所述裁剪候选框对所述样式图片进行裁剪，确定包含所述页面组件的目标组件区域；
提取所述目标组件区域的像素点信息作为所述页面组件的像素点信息；其中，所述像素点信息为二维数组格式。
可选地，所述将所述页面组件的多个像素点的颜色值和位置值进行对比，确定所述页面组件的背景样式信息、边框样式信息和字体样式信息，包括：
根据所述目标组件区域中的各个像素点的最大颜色值，确定所述页面组件的背景样式信息；
确定所述目标组件区域的多个定位像素点，根据多个所述定位像素点的颜色值和位置值确定所述组件的边框样式信息；
根据预训练的文字识别模型、所述背景样式信息和所述边框样式信息，确定所述页面组件的字体样式信息。
可选地，所述根据所述目标组件区域中的各个像素点的最大颜色值，确定所述页面组件的背景样式信息，包括：
遍历所述目标组件区域的像素点；
确定当前遍历点的颜色值是否是首次出现，如果是，将所述当前遍历点的颜色值添加至预置的背景颜色数据组；如果否，递增所述背景颜色数据组中与所述当前遍历点的颜色值对应的像素点的数量；
在所述目标组件区域的像素点遍历完毕的情况下，确定所述背景颜色数据组中的最大颜色值为所述页面组件的背景颜色，得到所述背景样式信息。
可选地，所述确定所述目标组件区域的多个定位像素点，根据多个所述定位像素点的颜色值和位置值确定所述页面组件的边框样式，包括：
根据所述目标组件区域的边界像素点的颜色值，确定第一定位像素点，根据所述第一定位像素点的颜色值确定所述页面组件的边框颜色信息；
将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进行对比，确定所述页面组件的边框宽度信息；
确定其余的定位像素点，根据全部所述定位像素点的位置值，计算所述页面组件的边框圆角信息。
可选地，所述根据所述目标组件区域的边界像素点的颜色值，确定第一定位像素点，根据所述第一定位像素点的颜色值确定所述页面组件的边框颜色信息包括：
确定所述目标组件区域的边界像素点；
将所述边界像素点的颜色值顺次与相邻的像素点的颜色值进行对比，确定第一个与所述边界像素点的颜色值不同的像素点为第一定位像素点；
将所述第一定位像素点的颜色值作为所述页面组件的边框颜色，得到所述页面组件的边框颜色信息。
可选地，所述位置值包括所述像素点的横坐标；所述将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进行对比，确定所述页面组件的边框宽度信息，包括：
确定所述第一定位像素点的第一横坐标；
递增所述第一横坐标，得到第二横坐标；
将所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值进行对比，确定所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值是否相同；
如果是，递增所述第二横坐标，执行所述将所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值进行对比；如果否，根据所述第二横坐标与所述第一横坐标的差，确定所述边框宽度信息。
可选地，所述位置值还包括所述像素点的纵坐标；所述确定其余的定位像素点，根据全部所述定位像素点的位置值，计算所述页面组件的边框圆角信息，包括：
根据所述边界像素点的颜色值、所述第一定位像素点的颜色值、所述像素点信息和所述边框宽度信息，划定圆角遍历范围，定位其余的定位像素点；
根据全部所述定位像素点的横坐标和纵坐标，计算各个边框圆角的边框圆角半径和边框圆角圆心；
将多个所述边框圆角的边框圆角半径和边框圆角圆心组成所述边框圆角信息。
可选地，所述根据预训练的文字识别模型、所述背景样式信息和所述边框样式信息，确定所述页面组件的字体样式信息，包括：
利用所述字体识别模型，确定所述页面组件的字体类型；
根据与边界像素点的颜色值和第一定位像素点的颜色值不同的像素点的颜色值，确定所述页面组件的字体颜色；
根据与所述字体颜色对应的像素点的位置值，确定所述页面组件的字体高度。
可选地，还包括：
构建文字图片数据集；其中，所述文字图片数据集包括多种字体类型的文字图片；
对所述文字图片中的进行掩码处理，提取所述文字图片的掩码集；
将所述掩码集作为输入、文字图片中的文字的字体类型作为输出，对字体识别模型进行训练；其中，所述字体识别模型采用VGG网络模型；
根据训练结果，确定所述字体识别模型。
根据本发明实施例的再一个方面，提供了一种页面组件的样式信息的确定装置，包括：
接收模块，用于接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片；
输入模块，用于将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；
生成模块，用于响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
根据本发明实施例的另一个方面，提供了一种页面组件的样式信息的确定的电子设备，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明提供的组件样式信息的生成方法。
根据本发明实施例的还一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明提供的组件样式信息的生成方法。
上述发明中的一个实施例具有如下优点或有益效果：因为采用利用预训练的组件样式模型，识别按钮组件的背景样式信息、边框样式信息和文字样式信息，得到组件样式信息；其中，根据组件图片的各个像素点的颜色值的最大值确定背景颜色；遍历组件图片，根据第一个与背景颜色不同的像素点的颜色值确定边框颜色；将第一定位像素点与下侧的像素点的颜色值进行对比，根据第一个与边框颜色不同的像素点的横坐标与第一定位像素点的横坐标之差确定边框宽度；遍历圆角遍历范围区域，确定8个定位像素点，根据8个定位像素点的横坐标和纵坐标，确定4个边框圆角的半径、圆心；根据改进后的带注意力机制(即提取掩码集)的VGG网络模型对组件图片进行识别，确定按钮组件的文字的字体类型；根据与上述颜色值不同的像素点的颜色值确定字体颜色；根据字体遍历范围的像素点的最大横坐标和最小横坐标之差，确定字体高度；生成组件样式信息的技术手段，所以克服了现有的页面UI生成的组件样式信息准确度低，对应得到的CSS样式较为粗糙，无法适用于精度要求较高、交互频繁的C端页面，用户使用体验、观感等极为不适的技术问题，进而达到能够将接收到的按钮组件的样式图片输入组件样式模型，生成组件样式信息，进而重复生成页面UI，大大提高了组件生成效率，且后续基于组件样式信息重复生成的页面UI样式准确、精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率的技术效果。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的页面组件的样式信息的确定方法的主要流程的示意图；
图2(a)是根据本发明实施例的按钮组件的示意图；
图2(b)是根据本发明实施例的按钮组件的背景样式、边框样式和字体样式的示意图；
图3是根据本发明实施例的组件样式模型的确定方法的主要流程的示意图；
图4是根据本发明实施例的裁剪候选框的示意图；
图5是根据本发明实施例的像素点信息的示意图一；
图6(a)是根据本发明实施例的按钮组件的背景样式信息的确定方法的主要流程的示意图；
图6(b)是根据本发明实施例的边界像素点的示意图；
图7(a)是根据本发明实施例的按钮组件的边框样式信息的确定方法的主要流程的示意图；
图7(b)是根据本发明实施例的像素点信息的示意图二；
图7(c)是根据本发明实施例的边框宽度的示意图一；
图7(d)是根据本发明实施例的边框宽度的示意图二；
图7(e)是根据本发明实施例的圆角遍历范围的示意图；
图7(f)是根据本发明实施例的边框圆角信息的示意图；
图8是根据本发明实施例的按钮组件的字体样式信息的确定方法的主要流程的示意图；
图9(a)是根据本发明实施例的字体识别模型的确定方法的主要流程的示意图；
图9(b)是根据本发明实施例的文字图片的示意图；
图9(c)是根据本发明实施例的改进后的模型网络结构的示意图；
图9(d)是根据本发明实施例的字体高度的示意图；
图10是根据本发明实施例的页面组件的样式信息的确定装置的主要模块的示意图；
图11示出了适于应用于本发明实施例的页面组件的样式信息的确定方法或页面组件的样式信息的确定装置的示例性系统架构图；
图12是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
UI：User Interface，是指用户界面，亦称使用者界面，是指对软件的人机交互、操作逻辑、界面美观的整体设计。
图1是根据本发明实施例的页面组件的样式信息的确定方法的主要流程的示意图，如图1所示，本发明的页面组件的样式信息的确定方法包括如下步骤：
现有的突发状况(比如，618大促或者双十一)下各种应用在响应访问请求时，通常用户与应用的交互方式都是固定的，比如，点击物品图片进入物品详情页，变化的只有物品的页面UI，而页面UI又具有数据量较大且重复性较高的特点，因此，为了保证一些突发状况下活动页面UI的生成需求，目前常用DTC、拖拽式生成组件样式信息等方式生成页面UI的样式信息，从而不断复用以生成页面UI，相较于人工生成页面UI的方式，大大提高了页面UI生成效率，降低了人工成本。
然而，由于现有的一键生成方式是为了应付数据量极大的页面UI场景，因此，生成的页面UI较为粗糙，也即，现有的组件样式信息准确度低且较为冗余，根据图片得到的CSS样式并不准确。面对页面UI精度要求、观感要求、交互频率极高的场景，根本无法满足用户使用体验。
通过本发明的页面组件的样式信息的生成方法，利用组件样式模型，可以根据接收到的按钮组件(或称，button组件)的样式图片生成组件样式信息，得到按钮组件的样式信息，而且生成效率极高、准确度高，后续基于组件样式信息重复生成的页面UI样式准确、精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，大大降低前端工程师的人力和时间成本，提高前端工程师的开发效率。
步骤S101，接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片。
在本发明实施例中，页面组件为button组件，根据按钮组件的样式图片，生成按钮组件的样式信息，包括按钮组件的背景颜色、边框颜色、边框宽度、边框圆角、字体颜色、字体高度、字体类型等特征的值。
步骤S102，将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的。
在本发明实施例中，根据样式图片的像素点的颜色值和位置值，确定按钮组件的样式信息；其中，button组件的组件样式信息包括button组件的背景样式信息、button组件的边框样式信息和button组件的字体样式信息。比如，如图2(a)所示的“下载报表”按钮，其背景样式、边框样式和字体样式如图2(b)所示。
在本发明实施例中，如图3所示，本发明的组件样式模型的确定方法包括如下步骤：
步骤S301，对所述样式图片进行预处理，确定所述页面组件的像素点信息。
在本发明实施例中，通过对样式图片进行预处理，可以确定包括按钮组件的目标组件区域对应的图片的各个像素点的颜色值和位置值，进而后续可以遍历目标组件区域的像素点，根据像素点的颜色值和位置值确定按钮组件的背景样式、边框样式、字体样式等。
步骤S3011，根据预设裁剪尺寸，确定所述样式图片的裁剪候选框；其中，所述预设裁剪尺寸大于所述页面组件的最大边框尺寸。
在本发明实施例中，根据按钮组件的最大边框尺寸与边框余量之和，确定预设裁剪尺寸。比如，按钮组件为矩形，裁剪候选框也为矩形，如图4所示，边框余量包括矩形的长边边框余量和矩形的短边边框余量，预设裁剪尺寸包括裁剪候选框的短边尺寸和裁剪候选框的长边尺寸，根据按钮组件的最大边框尺寸与短边余量之和确定裁剪候选框的短边尺寸、按钮组件的最大边框尺寸与长边余量之和确定裁剪候选框的长边尺寸。
进一步地，边框余量通常是几个像素，可以根据最大边框尺寸的一定比例确定边框余量，比如，最大边框尺寸的6％，假设最大边框尺寸为100个像素，边框余量可以是6个像素。
步骤S3012，利用所述裁剪候选框对所述样式图片进行裁剪，确定包含所述页面组件的目标组件区域。
在本发明实施例中，根据预设裁剪尺寸，以按钮组件的中心为中心，裁剪样式图片，得到包括按钮组件的目标组件区域，目标组件区域的尺寸与裁剪候选框相同。
步骤S3013，提取所述目标组件区域的像素点信息作为所述页面组件的像素点信息；其中，所述像素点信息为二维数组格式。
在本发明实施例中，像素点信息由像素点的颜色值和像素点的位置值组成，像素点的颜色值采用RGBA色彩空间的表达形式，包括R(Red，红色)、G(Green)、B(Blue)、a(Alpha通道，透明度)；其中，a表示像素点的透明度，0为完全透明，255为完全不透明。像素点的位置值包括像素点的横坐标和横坐标。
在本发明实施例中，像素点信息为二维数组格式，每一个像素点采用如[R G B ax y]形式的6列数组表示，比如，button组件第8行1到26列的像素点信息如图5所示。
在本发明实施例中，目标组件区域的像素点信息的提取函数可以是rgba()等。
步骤S302，将所述页面组件的多个像素点的颜色值和位置值进行对比，确定所述页面组件的背景样式信息、边框样式信息和字体样式信息。
在本发明实施例中，根据目标组件区域中像素点的最大颜色值，确定组件的背景颜色，得到按钮组件的背景样式；遍历目标组件区域的各个像素点，确定组件的边框颜色、边框宽度、边框填充属性、边框圆角半径、边框圆角圆心、字体、字体颜色、字体高度等，得到按钮组件的边框样式和字体样式。
进一步地，根据边框圆角的位置值确定按钮组件的高度、宽度、行间距等，根据按钮组件的边框属性确定边框填充信息，可以得到按钮组件的其它样式信息。
步骤S3021，根据所述目标组件区域中的各个像素点的最大颜色值，确定所述页面组件的背景样式信息。
在本发明实施例中，遍历目标组件区域的各个像素点，将各个像素点的颜色值进行对比，确定其中颜色值最大的像素点为第一定位像素点，最大颜色值为按钮组件的背景颜色。
在本发明实施例中，如图6(a)所示，本发明的按钮组件的背景样式信息的确定方法包括如下步骤：
在本发明实施例中，通常情况下，按钮组件的背景颜色是单一的。
步骤S601，遍历所述目标组件区域的像素点。
在本发明实施例中，在确定按钮组件的背景颜色时，遍历目标组件区域的像素点，遍历的顺序可以是随机遍历或者顺次遍历。其中，在随机遍历的情况下，可以随机选取任一像素点作为遍历起点；在顺次遍历的情况下，选择目标组件区域的边界像素点作为遍历起点，比如，如图6(b)所示，在裁剪候选框为矩形的情况下，边界像素点为矩形候选框的左上角顶点，顺次遍历的可以是先从左至右、后从上至下；或者，顺次遍历的可以是先从上至下、后从左至右。
在本发明实施例中，初始时，定义背景颜色数据组，背景颜色数据组用于存储目标组件区域的像素点的不同颜色值以及该颜色值对应的像素点的数量，其初始值为空，比如，定义一个对象colorObj＝{}，使得colorObj的初始值为空对象。
步骤S602，确定当前遍历点的颜色值是否是首次出现，如果是，转至步骤S603；如果否，转至步骤S604。
步骤S603，将所述当前遍历点的颜色值添加至预置的背景颜色数据组。
在本发明实施例中，在当前遍历点的颜色值是首次出现的情况下，将当前遍历点的颜色值添加至背景颜色数据组，且当前遍历点的颜色值对应的像素点的初始数量为1。比如，当前遍历点的颜色值[210 245 255 255]为首次出现，将当前遍历点的颜色值添加至colorObj，颜色值[210 245 255 255]对应的像素点的数量为1，即colorObj[210 245 255255]＝1。
步骤S604，递增所述背景颜色数据组中与所述当前遍历点的颜色值对应的像素点的数量。
在本发明实施例中，在当前遍历点的颜色值非首次出现的情况下，递增当前遍历点的颜色值对应的像素点的数量，比如，当前遍历点的颜色值[255 255 255 255]非首次出现，递增颜色值[255 255 255 255]对应的像素点的数量，即colorObj[255 255 255 255]+＝1。
步骤S605，确定所述目标组件区域的像素点是否遍历完毕，如果是，转至步骤S606；如果否，转至步骤S602。
步骤S606，确定所述背景颜色数据组中的最大颜色值为所述页面组件的背景颜色，得到所述背景样式信息。
在本发明实施例中，比如，colorObj对象里的最大颜色值Cback即为按钮组件的背景颜色background-color，相应地，生成的按钮组件的背景样式信息为按钮组件的背景颜色background-color为Cback。
在本发明实施例中，通过本发明的按钮组件的背景样式信息的确定方法，能够根据目标组件区域的像素点的最大颜色值确定按钮组件的背景颜色，进而确定按钮组件的背景样式，生成背景样式信息，可以大大提高按钮组件背景样式的生成效率。
在本发明实施例中，或者，可以按照以下方法生成背景样式信息：
选取任意一个目标组件区域的像素点作为当前像素点；
将当前像素点的颜色值添加至预置的背景颜色数据组；
确定目标组件区域中除当前像素点以外的其它像素点的颜色值与当前像素点的颜色值是否相同；
如果否，将其它像素点的颜色值添加至背景颜色数据组，确定背景颜色数据组中的最大颜色值为页面组件的背景颜色，得到背景样式信息。
步骤S3022，确定所述目标组件区域的多个定位像素点，根据多个所述定位像素点的颜色值和位置值确定所述页面组件的边框样式信息。
在本发明实施例中，目标组件区域的按钮组件包括8个定位像素点，边框样式包括边框颜色、边框宽度和边框圆角，根据第一定位像素点的颜色值即可确定边框颜色；根据第一定位像素点和与其同一纵坐标的下侧像素点的颜色值对比即可确定边框宽度；根据8个定位像素点的位置值皆可确定4个边框圆角的边框圆角半径、边框圆角圆心等信息。
在本发明实施例中，如图7(a)所示，本发明的按钮组件的边框样式信息的确定方法包括如下步骤：
步骤S701，根据所述目标组件区域的边界像素点的颜色值，确定第一定位像素点，根据所述第一定位像素点的颜色值确定所述页面组件的边框颜色信息。
步骤S7011，确定所述目标组件区域的边界像素点。
在本发明实施例中，根据如图6(b)所示的方法确定目标组件区域的边界像素点。
步骤S7012，将所述边界像素点的颜色值顺次与相邻的像素点的颜色值进行对比，确定第一个与所述边界像素点的颜色值不同的像素点为第一定位像素点。
在本发明实施例中，为了便于描述，将目标组件区域称为按钮组件的父组件(即按钮组件的上层组件)，用C(i，j)表示目标组件区域包括的m行n列＝m*n个像素点；其中，i＜m，j＜n，如图7(b)所示。由于目标组件区域包括按钮组件，因此，目标组件区域的尺寸通常大于按钮组件的尺寸，边界像素点C(0，0)的颜色值即父组件的颜色值。
在本发明实施例中，按照先从左至右、后从上至下的顺序，将边界像素点C(0，0)的颜色值顺次与相邻的像素点的颜色值进行对比时，第一个与C(0，0)的颜色值不同的像素点即为第一定位像素点，如图7(c)所示，记为P(top，left)。
进一步地，在按钮组件不存在边框的情况下，按钮组件的边框颜色和父组件的背景颜色相同，其边框属性为空，即border属性为none。更进一步地，组件样式信息还包括边框填充信息，边框属性为空时border-style属性为none；边框属性为实线时border-style属性为solid。本发明的组件样式信息的生成方法通常仅考虑border-style为solid的情况。
步骤S7013，将所述第一定位像素点的颜色值作为所述页面组件的边框颜色，得到所述页面组件的边框颜色信息。
在本发明实施例中，第一定位像素点P(top，left)的颜色值即为按钮组件的边框颜色border-color，将该颜色值记为Cborder。
步骤S702，将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进行对比，确定所述页面组件的边框宽度信息。
步骤S7021，确定所述第一定位像素点的第一横坐标。
在本发明实施例中，第一定位像素点P(top，left)的第一横坐标为top。
步骤S7022，递增所述第一横坐标，得到第二横坐标。
在本发明实施例中，第二横坐标为top+s，相应地，与第二横坐标对应的像素点为P(top+s，left)，如图7(c)所示。递增的间隔为1个像素，s的初始值为1。
步骤S7023，将所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值进行对比。
在本发明实施例中，将第一定位像素点和与其在同一横坐标下的下侧的各个像素点的颜色值进行顺次对比。比如，将第一定位像素点P(top，left)的颜色值和与第二横坐标对应的像素点P(top+s，left)的颜色值进行对比。
步骤S7024，确定所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值是否相同，如果是，转至步骤S7025；如果否，转至步骤S7026。
步骤S7025，递增所述第二横坐标，转至步骤S7023。
在本发明实施例中，在第一定位像素点P(top，left)的颜色值和与第二横坐标对应的像素点P(top+s，left)的颜色值相同的情况下，表示像素点P(top+s，left)处于边框范围内，则递增第二横坐标，递增的间隔为1个像素，即s+＝1。
步骤S7026，根据所述第二横坐标与所述第一横坐标的差，确定所述边框宽度信息。
在本发明实施例中，在第一定位像素点的颜色值和与第二横坐标对应的像素点的颜色值不同的情况下，将此时与第二横坐标对应的像素点记为
Figure BDA0003815919900000151
表示
Figure BDA0003815919900000152
处于边框范围外，即可根据像素点
Figure BDA0003815919900000153
与第一定位像素点P(top，left)的横坐标之差确定边框宽度border-width，相应地，生成的按钮组件的边框宽度信息为按钮组件的边框宽度border-width为像素点
Figure BDA0003815919900000154
与第一定位像素点P(top，left)的横坐标之差，border-width的值为一个或多个像素单位。
在本发明实施例中，能够根据第一定位像素点与横坐标递增方向的像素点的颜色值对比，确定按钮组件的边框宽度，生成边框宽度信息，可以大大提高按钮组件边框样式的生成效率。
在本发明实施例中，或者，可以按照以下方法生成边框宽度信息：
通过将第一定位像素点和与其在同一横坐标下的上侧、下侧的像素点的颜色值进行对比，确定第一个颜色值不同的上侧的像素点和第一个颜色值不同的下侧的像素点，根据第一个颜色值不同的上侧的像素点的横坐标、以及第一个颜色值不同的下侧的像素点的横坐标之差确定边框宽度。比如，与第一定位像素点P(top，left)在同一横坐标下的上侧的像素点记为P(top-t，left)，t的初始值为1；与第一定位像素点P(top，left)在同一横坐标下的下侧的像素点记为P(top+s，left)，s的初始值为1。将第一定位像素点P(top，left)的颜色值分别与像素点P(top-t，left)、像素点P(top+s，left)的颜色值进行对比，如果相同，则t-＝1、s+＝1，依次类推，顺次对比，直至确定第一个与第一定位像素点P(top，left)的颜色值不同的在同一横坐标下的上侧的像素点、以及第一个与第一定位像素点P(top，left)的颜色值不同的在同一横坐标下的下侧的像素点，分别记为
Figure BDA0003815919900000155
和
Figure BDA0003815919900000156
如图7(d)所示，根据像素点
Figure BDA0003815919900000157
和像素点
Figure BDA0003815919900000158
的横坐标之差，确定边框宽度border-width，相应地，生成的按钮组件的边框宽度信息表示按钮组件的边框宽度border-width为像素点
Figure BDA0003815919900000159
和像素点
Figure BDA00038159199000001510
的横坐标之差减一。
步骤S703，确定其余的定位像素点，根据全部所述定位像素点的位置值，计算所述页面组件的边框圆角信息。
步骤S7031，根据所述边界像素点的颜色值、所述第一定位像素点的颜色值、所述像素点信息和所述边框宽度信息，划定圆角遍历范围，定位其余的定位像素点。
在本发明实施例中，圆角遍历范围如图7(e)中的阴影区域所示。圆角遍历范围的形状通常和目标候选区域相同，根据边界像素点的颜色值(即背景颜色)、第一定位像素点的颜色值(即边框颜色)、各个像素点(尤其是与边框颜色相同的像素点)的颜色值和边框宽度，可以确定边框的尺寸范围，在边框尺寸范围的内外设置一个边框余量，划定一个与边框形状相同的圆角遍历范围。
在本发明实施例中，从第一定位像素点P(top，left)开始，按照先从左至右、后从上至下的顺序，将圆角遍历范围内各个像素点C(i，j)的颜色值与第一定位像素点P(top，left)的颜色值(即边框颜色)、边界像素点的颜色值C(0，0)进行对比，确定其余的各个定位像素点。具体地：
确定第一个同时满足以下两个条件的像素点为第二定位像素点，记为P(top，right)：①右侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；②当前像素点的颜色值与边界像素点的颜色值C(0，0)不同。
继续遍历，确定第一个同时满足以下三个条件的像素点为第三定位像素点，记为P(left，top)：①纵坐标小于第一定位像素点P(top，left)的纵坐标；②上侧像素点和左侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；③当前像素点和下侧像素点的颜色值与边界像素点的颜色值C(0，0)不同。
继续遍历，确定第一个同时满足以下三个条件的像素点为第四定位像素点，记为P(right，top)：①纵坐标大于第二定位像素点P(top，right)的纵坐标；②右侧像素点和上侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；③当前像素点和下侧像素点的颜色值与边界像素点的颜色值C(0，0)不同。
继续遍历，确定第一个同时满足以下两个条件的像素点为第五定位像素点，记为P(left，bottom)：①左侧像素点和下侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；②当前像素点的颜色值与边界像素点的颜色值C(0，0)不同。
继续遍历，确定第一个同时满足以下两个条件的像素点为第六定位像素点，记为P(right，bottom)：①右侧像素点和下侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；②当前像素点的颜色值与边界像素点的颜色值C(0，0)不同。
继续遍历，确定第一个同时满足以下三个条件的像素点为第七定位像素点，记为P(bottom，left)：①横坐标大于第五定位像素点P(left，bottom)的横坐标；②左侧像素点和下侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；③当前像素点和右侧像素点的颜色值与边界像素点的颜色值C(0，0)不同。
继续遍历，确定第一个同时满足以下三个条件的像素点为第八定位像素点，记为P(bottom，right)：①纵坐标小于第六定位像素点P(right，bottom)的纵坐标；②右侧像素点和下侧像素点的颜色值与边界像素点的颜色值C(0，0)相同；③当前像素点和左侧像素点的颜色值与边界像素点的颜色值C(0，0)不同。
步骤S7032，根据全部所述定位像素点的横坐标和横坐标，计算各个边框圆角的边框圆角半径和边框圆角圆心。
在本发明实施例中，根据第一定位像素点P(top，left)和第三定位像素点P(left，top)的纵坐标和横坐标，计算第一边框圆角的圆心的横坐标为第三定位像素点P(left，top)的横坐标，圆心的纵坐标为第一定位像素点P(top，left)的纵坐标，边框圆角半径border-top-left-radius为第一定位像素点P(top，left)和第三定位像素点P(left，top)的纵坐标之差或者第一定位像素点P(top，left)和第三定位像素点P(left，top)的横坐标之差，相应地，生成的按钮组件的边框圆角信息包括按钮组件的第一边框圆角的圆心坐标和圆角半径。
根据第二定位像素点P(top，right)和第四定位像素点P(right，top)的纵坐标和横坐标，计算第二边框圆角的圆心的横坐标为第四定位像素点P(right，top)的横坐标，圆心的纵坐标为第二定位像素点P(top，right)的纵坐标，边框圆角半径border-top-right-radius为第二定位像素点P(top，right)和第四定位像素点P(right，top)的纵坐标之差或者第二定位像素点P(top，right)和第四定位像素点P(right，top)的横坐标之差，相应地，生成的按钮组件的边框圆角信息包括按钮组件的第二边框圆角的圆心坐标和圆角半径。
根据第五定位像素点P(left，bottom)和第七定位像素点P(bottom，left)的纵坐标和横坐标，计算第三边框圆角的圆心的横坐标为第五定位像素点P(left，bottom)的横坐标，圆心的纵坐标为第七定位像素点P(bottom，left)的纵坐标，边框圆角半径border-bottom-left-radius为第五定位像素点P(left，bottom)和第七定位像素点P(bottom，left)的纵坐标之差或者第五定位像素点P(left，bottom)和第七定位像素点P(bottom，left)的横坐标之差，相应地，生成的按钮组件的边框圆角信息包括按钮组件的第三边框圆角的圆心坐标和圆角半径。
根据第六定位像素点P(right，bottom)和第八定位像素点P(bottom，right)的纵坐标和横坐标，计算第四边框圆角的圆心的横坐标为第六定位像素点P(right，bottom)的横坐标，圆心的纵坐标为第八定位像素点P(bottom，right)的纵坐标，边框圆角半径border-bottom-right-radius为第六定位像素点P(right，bottom)和第八定位像素点P(bottom，right)的纵坐标之差或者第六定位像素点P(right，bottom)和第八定位像素点P(bottom，right)的横坐标之差，相应地，生成的按钮组件的边框圆角信息包括按钮组件的第四边框圆角的圆心坐标和圆角半径。
步骤S7033，将多个所述边框圆角的边框圆角半径和边框圆角圆心组成所述边框圆角信息。
在本发明实施例中，将第一边框圆角的边框圆角半径border-top-left-radius和边框圆角圆心坐标、第二边框圆角的边框圆角半径border-top-right-radius和边框圆角圆心坐标、第三边框圆角的边框圆角半径border-bottom-left-radius和边框圆角圆心坐标、第四边框圆角的边框圆角半径border-bottom-right-radius和边框圆角圆心坐标进行组合，得到按钮组件的边框圆角信息。
在本发明实施例中，通过本发明的按钮组件的边框样式信息的确定方法，能够根据边界像素点的颜色值顺次对比目标组件区域的各个像素点，确定第一定位像素点；根据第一定位像素点的颜色值确定边框颜色信息；将第一定位像素点的颜色值和与其同一纵坐标下的下侧的各个像素点的颜色值进行对比，确定边框宽度信息；根据边框宽度和边框余量确定圆角遍历范围，对比圆角遍历范围内各个像素点与边界像素点和边框颜色的颜色值，定位多个定位像素点，根据多个定位像素点的位置值之差确定边框圆角信息，从而得到边框样式，大大提高了组件生成效率，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率。
步骤S3023，根据预训练的文字识别模型、所述背景样式信息和所述边框样式信息，确定所述页面组件的字体样式信息。
在本发明实施例中，如图8所示，本发明的按钮组件的字体样式信息的确定方法包括如下步骤：
步骤S801，利用所述字体识别模型，确定所述页面组件的字体类型。
在本发明实施例中，在利用字体识别模型确定按钮组件的字体类型之前，根据圆角遍历范围之内的目标组件区域，确定字体遍历范围。
在本发明实施例中，将字体遍历范围内的像素点信息输入字体识别模型，根据字体识别模型的输出，可以确定组件图片中的按钮组件的文字的字体类型。
在本发明实施例中，还可以在本发明的组件样式模型中嵌入OCR图片识别文字模块以识别字体字符，也即，按钮组件的文字信息。
由于现有的机器学习并没有成功的识别字体类型的算法模型，而组件作为前端开发的重要内容，尤其是页面UI的展示需求，准确识别字体类型可以大大提高组件页面信息的准确度，使得后续利用本发明生成的页面UI精度优良，具有极好的用户体验，因此，在本发明实施例中，本发明的字体识别模型通过在VGG网络模型上增加注意力机制，可以准确识别组件图片的字体类型；其中，VGG网络模型在图片分类任务上的准确性、速度等方面都表现良好。
在本发明实施例中，如图9(a)所示，本发明的字体识别模型的确定方法包括如下步骤：
步骤S901，构建文字图片数据集；其中，所述文字图片数据集包括多种字体类型的文字图片。
虽然VGG网络模型在图片分类任务方面表现良好，但是其数据集数据集大多人脸或者建筑等，无法适用于本发明。因此，本发明重新构建文字图片数据集，以对模型进行训练，从而准确识别按钮组件的文字类型。
在本发明实施例中，在页面随机输入不同字体类型的文字，包含中文、英文、数字以及特殊符号等，设置不同的文字大小、文字背景，裁剪后得到各种各样的文字图片，如图9(b)所示，从左到右依次是serif字体、sans-serif字体、Yuanti SC字体。
进一步地，将裁剪后的文字图片进行翻转、缩放、旋转等操作以实现数据增强。根据数据增强后的文字图片，确定字体识别模型的训练样本。
步骤S902，对所述文字图片中的进行掩码处理，提取所述文字图片的掩码集。
在本发明实施例中，在对文字图片进行识别时，文字图片的背景属于冗余信息，因此，本发明通过在VGG网络模型上增加注意力机制，也即，对文字图片进行掩码处理，从而在对字体识别模型进行训练时，能够聚焦于文字图片的文字信息。改进后的模型网络结构如图9(c)所示。
在本发明实施例中，掩码处理为：将文字图片的文字设置为1，其它部分设置为0，从而提取出文字图片的掩码集。
步骤S903，将所述掩码集作为输入、文字图片中的文字的字体类型作为输出，对字体识别模型进行训练；其中，所述字体识别模型采用VGG网络模型。
在本发明实施例中，在对字体识别模型进行训练时，掩码集每一个位置的卷积表示为：
Figure BDA0003815919900000211
上式中：
x’表示文字图片经过卷积后的输出；
W表示卷积层滤波器的weights，也即，对应卷积的权值；
X表示输入的文字图片；
⊙表示element-wise，也即，点乘运算；
m表示掩码mask，也即，对应的(0，1)掩码。
sum(1)表示掩码是1的个数之和；
sum(m)表示掩码集的值(包括0和1)的个数之和；
b表示卷积层滤波器的bias，也即，对应卷积的偏置系数。
在本发明实施例中，初始W值为图片的灰度值，位于0～1之间；m的初始值对应像素点，像素点位置是文字为1，否则为0；b的值取决于算法调参，初始b值设定为0.37。
在本发明实施例中，在对字体识别模型多次训练的过程中，不断更新卷积层滤波器的weights和掩码集，从而保证输出值只与文字图片中的文字信息有关。掩码集的更新如下式所示：
Figure BDA0003815919900000212
上式中，m’表示掩码经过卷积后的输出。
卷积层滤波器的weights的更新如下式所示：
Figure BDA0003815919900000213
步骤S904，根据训练结果，确定所述字体识别模型。
在本发明实施例中，通过对卷积层滤波器的weights和掩码集的多次更新，确定最终的字体识别模型。
在本发明实施例中，通过本发明的字体识别模型的确定方法，能够对字体类型进行识别，从而充分适应页面UI展示的需求，使得基于本发明的组件识别模型确定的组件样式信息更加准确，提升用户体验。
步骤S802，根据与边界像素点的颜色值和第一定位像素点的颜色值不同的像素点的颜色值，确定所述页面组件的字体颜色。
在本发明实施例中，在字体遍历范围内，遍历各个像素点，确定不同于背景颜色和边框颜色的像素点的颜色值即为字体颜色font-color，记为Cfont。
步骤S803，根据与所述字体颜色对应的像素点的位置值，确定所述页面组件的字体高度。
在本发明实施例中，确定与字体颜色对应的各个像素点，根据像素点的最大横坐标与最小横坐标之差，确定按钮组件的字体高度font-size，如图9(d)所示。
在本发明实施例中，通过本发明的按钮组件的字体样式信息的确定方法，能够准确确定按钮组件中的文字的字体类型、字体颜色、字体高度，从而后续基于组件样式信息如实生动地生成样式准确、精度较高的页面UI，满足消费者/个人用户的精度、观感和交互需求。
步骤S303，根据所述背景样式信息、边框样式信息和字体样式信息，生成所述页面组件的样式信息，得到所述组件样式模型。
在本发明实施例中，根据步骤S302得到的背景样式信息、边框样式信息和字体样式信息，组成页面组件的样式信息，从而得到组件样式模型。
在本发明实施例中，通过本发明的组件样式模型的确定方法，能够基于对按钮组件样式图片的预处理，确定按钮组件的像素点信息，根据多个像素点的颜色值和位置值的对比结果，确定组件的背景样式信息、边框样式信息和字体样式信息，进而生成组件样式信息，得到组件样式模型，后续可以利用组件样式模型生成按钮组件的组件样式信息，继而重复生成页面UI，大大提高了页面UI的生成效率，而且，生成的组件样式信息准确度高，后续基于组件样式信息重复生成的页面UI样式精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率。
在本发明实施例中，还可以生成按钮组件的其它样式信息，比如，按钮组件的长度、宽度以及多行字体的行间距等，其中：
按钮组件的长度length为第四定位像素点P(right,top)和第三定位像素点P(left，top)的纵坐标之差；按钮组件的宽度width为第一定位像素点P(top，left)和第七定位像素点P(bottom，left)的横坐标之差。
在按钮组件的文字为一行字体的情况下，文字中心通常是水平垂直居中的，故而按钮组件的文字中心text-align的横坐标为第一定位像素点P(top，left)和第七定位像素点P(bottom，left)的横坐标中心；纵坐标为第四定位像素点P(right，top)和第三定位像素点P(left，top)的纵坐标中心。
按钮组件的行间距line-height为第一定位像素点P(top，left)和第七定位像素点P(bottom，left)的横坐标之差。
步骤S103，响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
在本发明实施例中，组件样式模型根据输入的样式图片，可以输出按钮组件的样式信息。比如，图2(a)所示的组件图片输出的代码可以包括：
按钮组件的背景颜色background-color为Cback对应的颜色值；边框属性border-style为实线solid；边框颜色border-color为Cborder对应的颜色值；边框宽度信息为按钮组件的边框宽度border-width为像素点
Figure BDA0003815919900000231
与第一定位像素点P(top，left)的横坐标之差；第一边框圆角的圆心的横坐标为第三定位像素点P(left，top)的横坐标，圆心的纵坐标为第一定位像素点P(top，left)的纵坐标，边框圆角半径border-top-left-radius为第一定位像素点P(top，left)和第三定位像素点P(left，top)的纵坐标之差或者第一定位像素点P(top，left)和第三定位像素点P(left，top)的横坐标之差；第二边框圆角的圆心的横坐标为第四定位像素点P(right，top)的横坐标，圆心的纵坐标为第二定位像素点P(top，right)的纵坐标，边框圆角半径border-top-right-radius为第二定位像素点P(top，right)和第四定位像素点P(right，top)的纵坐标之差或者第二定位像素点P(top，right)和第四定位像素点P(right，top)的横坐标之差；第三边框圆角的圆心的横坐标为第五定位像素点P(left，bottom)的横坐标，圆心的纵坐标为第七定位像素点P(bottom，left)的纵坐标，边框圆角半径border-bottom-left-radius为第五定位像素点P(left，bottom)和第七定位像素点P(bottom，left)的纵坐标之差或者第五定位像素点P(left，bottom)和第七定位像素点P(bottom，left)的横坐标之差；第四边框圆角的圆心的横坐标为第六定位像素点P(right，bottom)的横坐标，圆心的纵坐标为第八定位像素点P(bottom，right)的纵坐标，边框圆角半径border-bottom-right-radius为第六定位像素点P(right，bottom)和第八定位像素点P(bottom，right)的纵坐标之差或者第六定位像素点P(right，bottom)和第八定位像素点P(bottom，right)的横坐标之差。
在本发明实施例中，通过接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片；将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息等步骤，能够将接收到的按钮组件的样式图片输入组件样式模型，生成组件样式信息，进而重复生成页面UI，大大提高了组件生成效率，且后续基于组件样式信息重复生成的页面UI样式准确、精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率。
图10是根据本发明实施例的页面组件的样式信息的确定装置的主要模块的示意图，如图10所示，本发明的页面组件的样式信息的确定装置1000包括：
接收模块1001，用于接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片。
在本发明实施例中，页面组件为button组件，所述接收模块1001用于接收按钮组件的样式生成请求，使得所述组件样式信息的生成装置1000根据按钮组件的样式图片，生成按钮组件的样式信息。
输入模块1002，用于将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的。
在本发明实施例中，组件样式模型的所述输入模块1002接收样式图片，使得组件样式模型根据样式图片的像素点的颜色值和位置值，确定按钮组件的样式信息；其中，button组件的组件样式信息包括button组件的背景样式信息、button组件的边框样式信息和button组件的字体样式信息。
生成模块1003，用于响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
在本发明实施例中，所述生成模块1003根据组件样式模型的输出，得到按钮组件的样式信息。
在本发明实施例中，通过接收模块、输入模块和生成模块等模块，能够将接收到的按钮组件的样式图片输入组件样式模型，生成组件样式信息，继而重复生成页面UI，大大提高了组件生成效率，且后续基于组件样式信息重复生成的页面UI样式准确、精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率。
图11示出了适于应用于本发明实施例的页面组件的样式信息的确定方法或页面组件的样式信息的确定装置的示例性系统架构图，如图11所示，本发明实施例的页面组件的样式信息的确定方法或页面组件的样式信息的确定装置的示例性系统架构包括：
如图11所示，系统架构1100可以包括终端设备1101、1102、1103，网络1104和服务器1105。网络1104用以在终端设备1101、1102、1103和服务器105之间提供通信链路的介质。网络1104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备1101、1102、1103通过网络1104与服务器1105交互，以接收或发送消息等。终端设备1101、1102、1103上可以安装有各种通讯客户端应用，例如组件样式信息类应用、购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。
终端设备1101、1102、1103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器1105可以是提供各种服务的服务器，例如对用户利用终端设备1101、1102、1103所浏览的组件样式信息类网站提供支持的后台管理服务器。后台管理服务器可以对接收到的页面组件的样式生成请求等数据进行分析等处理，并将处理结果(例如页面组件的样式信息)反馈给终端设备1101、1102、1103。
需要说明的是，本发明实施例所提供的页面组件的样式信息的确定方法一般由服务器1105执行，相应地，页面组件的样式信息的确定装置一般设置于服务器1105中。
应该理解，图11中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
图12是适于用来实现本发明实施例的终端设备或服务器的计算机系统的结构示意图，如图12所示，本发明实施例的终端设备或服务器的计算机系统1200包括：
中央处理单元(CPU)1201，其可以根据存储在只读存储器(ROM)1202中的程序或者从存储部分1208加载到随机访问存储器(RAM)1203中的程序而执行各种适当的动作和处理。在RAM1203中，还存储有系统1200操作所需的各种程序和数据。CPU1201、ROM1202以及RAM1203通过总线1204彼此相连。输入/输出(I/O)接口1205也连接至总线1204。
以下部件连接至I/O接口1205：包括键盘、鼠标等的输入部分1206；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1207；包括硬盘等的存储部分1208；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1209。通信部分1209经由诸如因特网的网络执行通信处理。驱动器1210也根据需要连接至I/O接口1205。可拆卸介质1211，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1210上，以便于从其上读出的计算机程序根据需要被安装入存储部分1208。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1209从网络上被下载和安装，和/或从可拆卸介质1211被安装。在该计算机程序被中央处理单元(CPU)1201执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括接收模块、输入模块和生成模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，生成模块还可以被描述为“根据所述组件样式模型的输出，得到所述页面组件的样式信息的模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片；将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
根据本发明实施例的技术方案，根据按钮组件的样式图片可以生成按钮组件的样式信息；利用修改后的带注意力机制的VGG模型作为字体识别模型，可以识别按钮组件中文字的字体类型。
根据本发明实施例的技术方案，能够将接收到的按钮组件的样式图片输入组件样式模型，生成组件样式信息，进而重复生成页面UI，大大提高了组件生成效率，且后续基于组件样式信息重复生成的页面UI样式准确、精度较高，可以应用于各种存在图片生成组件样式信息需求的系统，满足消费者/个人用户的精度、观感和交互需求，降低了前端工程师的人力成本、时间成本，提高前端工程师的开发效率。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (14)

1.一种页面组件的样式信息的确定方法，其特征在于，包括：
接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片；
将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；
响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
2.根据权利要求1所述的方法，其特征在于，还包括：
对所述样式图片进行预处理，确定所述页面组件的像素点信息；
将所述页面组件的多个像素点的颜色值和位置值进行对比，确定所述页面组件的背景样式信息、边框样式信息和字体样式信息；
根据所述背景样式信息、边框样式信息和字体样式信息，生成所述页面组件的样式信息，得到所述组件样式模型。
3.根据权利要求2所述的方法，其特征在于，所述对所述样式图片进行预处理，确定所述页面组件的像素点信息，包括：
根据预设裁剪尺寸，确定所述样式图片的裁剪候选框；其中，所述预设裁剪尺寸大于所述页面组件的最大边框尺寸；
利用所述裁剪候选框对所述样式图片进行裁剪，确定包含所述页面组件的目标组件区域；
提取所述目标组件区域的像素点信息作为所述页面组件的像素点信息；其中，所述像素点信息为二维数组格式。
4.根据权利要求2所述的方法，其特征在于，所述将所述页面组件的多个像素点的颜色值和位置值进行对比，确定所述页面组件的背景样式信息、边框样式信息和字体样式信息，包括：
根据所述目标组件区域中的各个像素点的最大颜色值，确定所述页面组件的背景样式信息；
确定所述目标组件区域的多个定位像素点，根据多个所述定位像素点的颜色值和位置值确定所述页面组件的边框样式信息；
根据预训练的文字识别模型、所述背景样式信息和所述边框样式信息，确定所述页面组件的字体样式信息。
5.根据权利要求4所述的方法，其特征在于，所述根据所述目标组件区域中的各个像素点的最大颜色值，确定所述页面组件的背景样式信息，包括：
遍历所述目标组件区域的像素点；
确定当前遍历点的颜色值是否是首次出现，如果是，将所述当前遍历点的颜色值添加至预置的背景颜色数据组；如果否，递增所述背景颜色数据组中与所述当前遍历点的颜色值对应的像素点的数量；
在所述目标组件区域的像素点遍历完毕的情况下，确定所述背景颜色数据组中的最大颜色值为所述组件的背景颜色，得到所述背景样式信息。
6.根据权利要求4所述的方法，其特征在于，所述确定所述目标组件区域的多个定位像素点，根据多个所述定位像素点的颜色值和位置值确定所述页面组件的边框样式，包括：
根据所述目标组件区域的边界像素点的颜色值，确定第一定位像素点，根据所述第一定位像素点的颜色值确定所述页面组件的边框颜色信息；
将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进行对比，确定所述页面组件的边框宽度信息；
确定其余的定位像素点，根据全部所述定位像素点的位置值，计算所述页面组件的边框圆角信息。
7.根据权利要求6所述的方法，其特征在于，所述根据所述目标组件区域的边界像素点的颜色值，确定第一定位像素点，根据所述第一定位像素点的颜色值确定所述页面组件的边框颜色信息包括：
确定所述目标组件区域的边界像素点；
将所述边界像素点的颜色值顺次与相邻的像素点的颜色值进行对比，确定第一个与所述边界像素点的颜色值不同的像素点为第一定位像素点；
将所述第一定位像素点的颜色值作为所述页面组件的边框颜色，得到所述页面组件的边框颜色信息。
8.根据权利要求7所述的方法，其特征在于，所述位置值包括所述像素点的横坐标；所述将所述第一定位像素点的颜色值与不同位置值的像素点的颜色值进行对比，确定所述页面组件的边框宽度信息，包括：
确定所述第一定位像素点的第一横坐标；
递增所述第一横坐标，得到第二横坐标；
将所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值进行对比，确定所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值是否相同；
如果是，递增所述第二横坐标，执行所述将所述第一定位像素点的颜色值和与所述第二横坐标对应的像素点的颜色值进行对比；如果否，根据所述第二横坐标与所述第一横坐标的差，确定所述边框宽度信息。
9.根据权利要求8所述的方法，其特征在于，所述位置值还包括所述像素点的纵坐标；所述确定其余的定位像素点，根据全部所述定位像素点的位置值，计算所述页面组件的边框圆角信息，包括：
根据所述边界像素点的颜色值、所述第一定位像素点的颜色值、所述像素点信息和所述边框宽度信息，划定圆角遍历范围，定位其余的定位像素点；
根据全部所述定位像素点的横坐标和纵坐标，计算各个边框圆角的边框圆角半径和边框圆角圆心；
将多个所述边框圆角的边框圆角半径和边框圆角圆心组成所述边框圆角信息。
10.根据权利要求4所述的方法，其特征在于，所述根据预训练的文字识别模型、所述背景样式信息和所述边框样式信息，确定所述页面组件的字体样式信息，包括：
利用所述字体识别模型，确定所述页面组件的字体类型；
根据与边界像素点的颜色值和第一定位像素点的颜色值不同的像素点的颜色值，确定所述页面组件的字体颜色；
根据与所述字体颜色对应的像素点的位置值，确定所述页面组件的字体高度。
11.根据权利要求10所述的方法，其特征在于，还包括：
构建文字图片数据集；其中，所述文字图片数据集包括多种字体类型的文字图片；
对所述文字图片中的进行掩码处理，提取所述文字图片的掩码集；
将所述掩码集作为输入、文字图片中的文字的字体类型作为输出，对字体识别模型进行训练；其中，所述字体识别模型采用VGG网络模型；
根据训练结果，确定所述字体识别模型。
12.一种页面组件的样式信息的确定装置，其特征在于，包括：
接收模块，用于接收页面组件的样式生成请求；其中，所述样式生成请求指示了所述页面组件的样式图片；
输入模块，用于将所述样式图片输入预训练的组件样式模型；其中，所述组件样式模型是根据历史样式图片的像素点的颜色值和位置值训练得到的；
生成模块，用于响应于所述样式生成请求，根据所述组件样式模型的输出，得到所述页面组件的样式信息。
13.一种页面组件的样式信息的确定的电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-11中任一所述的方法。
14.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-11中任一所述的方法。
CN202211026365.2A 2022-08-25 2022-08-25 一种页面组件的样式信息的确定方法和装置 Pending CN115469867A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211026365.2A CN115469867A (zh) 2022-08-25 2022-08-25 一种页面组件的样式信息的确定方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211026365.2A CN115469867A (zh) 2022-08-25 2022-08-25 一种页面组件的样式信息的确定方法和装置

Publications (1)

Publication Number Publication Date
CN115469867A true CN115469867A (zh) 2022-12-13

Family

ID=84370975

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211026365.2A Pending CN115469867A (zh) 2022-08-25 2022-08-25 一种页面组件的样式信息的确定方法和装置

Country Status (1)

Country Link
CN (1) CN115469867A (zh)

Similar Documents

Publication Publication Date Title
US10467508B2 (en) Font recognition using text localization
US10699166B2 (en) Font attributes for font recognition and similarity
CN110458918B (zh) 用于输出信息的方法和装置
US10846524B2 (en) Table layout determination using a machine learning system
US9824304B2 (en) Determination of font similarity
CN114155543B (zh) 神经网络训练方法、文档图像理解方法、装置和设备
KR102275413B1 (ko) 플로우 문서를 생성하기 위한 이미지 문서 컴포넌트 검출 및 추출 기법
US10937200B2 (en) Object-based color adjustment
CN110874618B (zh) 基于小样本的ocr模板学习方法、装置、电子设备及介质
US20200242823A1 (en) Transferring Vector Style Properties to a Vector Artwork
US20230386041A1 (en) Control Method, Device, Equipment and Storage Medium for Interactive Reproduction of Target Object
US20230047748A1 (en) Method of fusing image, and method of training image fusion model
WO2023019995A1 (zh) 训练方法、译文展示方法、装置、电子设备以及存储介质
CN114596566A (zh) 文本识别方法及相关装置
CN115861609A (zh) 遥感图像的分割标注方法、电子设备及存储介质
KR20220034076A (ko) 문자부호 생성 모델의 훈련 방법, 문자부호 생성 방법, 장치 및 설비
US20240160616A1 (en) Text-based machine learning extraction of table data from a read-only document
CN113411550B (zh) 视频上色方法、装置、设备及存储介质
CN113313066A (zh) 图像识别方法、装置、存储介质以及终端
CN115469867A (zh) 一种页面组件的样式信息的确定方法和装置
CN114926322A (zh) 图像生成方法、装置、电子设备和存储介质
CN113537097B (zh) 针对图像的信息提取方法、装置、介质及电子设备
US20230134337A1 (en) Ai-based aesthetical image modification
CN111626919B (zh) 图像合成方法、装置、电子设备及计算机可读存储介质
US20230119741A1 (en) Picture annotation method, apparatus, electronic device, and storage medium

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