一种对页面前端进行数据采集的方法、装置及电子设备与流程

1.本发明涉及图像处理技术领域，尤其涉及一种对页面前端进行数据采集的方法、装置及电子设备。


背景技术：

2.汽车金融主要指与汽车产业相关的金融服务，是在汽车研发设计、生产、流通、消费等各个环节中所涉及到的资金融通的方式、路径或者说是一个资金融通的基本框架，即资金在汽车领域是如何流动的，从资金供给者到资金需求者的资金流通渠道。主要包括资金筹集、信贷运用、抵押贴现、金融租赁，以及相关保险、投资活动，它是汽车业与金融业相互渗透的必然结果。
3.汽车金融是汽车产业与金融的结合，是当前产业金融的重要领域。汽车金融通过资源的资本化、资产的资本化、知识产权的资本化、未来价值的资本化实现产业与金融的融合，促进其互动发展，从而实现价值的增值。汽车金融的发展除了要发展各种汽车金融产品，还要为汽车金融参与主体提供解决方案。
4.为了能更好的服务客户，汽车金融网站应运而生。现有技术中为了能对数据进行分析，需要对汽车金融页面的前端区域进行人工标注，实现数据采集需求。现有的数据采集需求方法需要人工上传页面后，手动对需要埋点的需求进行圈选标注，过程繁琐；缺少规范管理，不同的人标注的区域大小、位置都不一样，难以形成统一的数据，从而使得标注效果差，数据采集效率低。
5.因此，现有技术还有待于改进和发展。


技术实现要素：

6.鉴于上述现有技术的不足，本发明提供了一种对页面前端进行数据采集的方法、装置及电子设备，旨在解决现有技术中对前端页面进行数据采集时，需要手工标注，过程繁琐，不同的人标注区域不同，从而使得标注效果差，数据采集效率低的问题。
7.本发明的技术方案如下：
8.本发明第一实施例提供了一种对页面前端进行数据采集的方法，所述方法包括：
9.获取页面前端图像；
10.基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；
11.基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。
12.进一步地，所述获取页面前端图像，包括：
13.检测到页面前端图像获取指令，基于所述页面前端图像获取指令，获取产品人员设计的页面前端图像。
14.进一步地，所述基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式前，还包括：
15.预先构建深度学习模型，所述深度学习模型用于对页面前端图像的样式进行识
别。
16.进一步地，所述预先构建深度学习模型，包括：
17.预先基于pytorch框架构建深度学习模型；
18.获取人工标注好的页面前端样式样本；
19.基于所述页面前端样式样本对所述深度学习模型进行训练，训练完成后生成页面前端样式识别模型。
20.进一步地，所述基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式前，还包括：
21.预先设置图像处理库，所述图像处理库用于对页面前端样式进行分割。
22.进一步地，所述基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式，包括:
23.基于页面前端样式识别模型将页面前端样式识别为对应的样式区域，输出所述样式区域对应的区域轮廓数据；
24.将区域轮廓数据转换为页面前端图像的位置描述数据；
25.基于所述图像处理库对页面前端图像的位置描述数据进行识别，根据识别结果从页面前端图像切割出样式区域，生成若干个样式区域图像。
26.进一步地，所述基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表，包括：
27.获取区域轮廓数据的轮廓数据特征；
28.基于所述轮廓数据特征匹配数据采集需求模板库数据，获取轮廓数据特征对应的数据采集需求；
29.基于数据采集需求、轮廓数据特征与样式区域图像的映射关系，获取数据采集需求对应的样式区域图像；
30.对样式区域图像的内容进行识别，根据识别后的内容生成数据采集需求列表。
31.本发明的另一实施例提供了一种对页面前端进行数据采集的装置，装置包括：
32.图像获取模块，用于获取页面前端图像；
33.页面样式识别模块，用于基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；
34.数据采集模块，用于基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。
35.本发明的另一实施例提供了一种电子设备，所述电子设备包括至少一个处理器；以及，
36.与所述至少一个处理器通信连接的存储器；其中，
37.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述的对页面前端进行数据采集的方法。
38.本发明的另一实施例还提供了一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行上述的对页面前端进行数据采集的方法。
39.有益效果：本发明实施例的对页面前端进行数据采集的方法，能够降低数据采集需求产出的难度，用户只需要上传前端页面设计稿即可完成数据采集需求的识别；通过自动化识别需求模板，减少不同用户因理解差异产生的个性化配置，保证平台需求统一、规范；可以识别从未见过的前端样式，提升因页面设计个性化的识别率，减少人工的配置操作。
附图说明
40.下面将结合附图及实施例对本发明作进一步说明，附图中：
41.图1为本发明一种对页面前端进行数据采集的方法较佳实施例的流程图；
42.图2为本发明一种对页面前端进行数据采集的方法较佳实施例的图片上传示意图；
43.图3为本发明一种对页面前端进行数据采集的方法较佳实施例的页面前端样式识别示意图；
44.图4为本发明一种对页面前端进行数据采集的方法较佳实施例的数据采集需求列表示意图；
45.图5为本发明一种对页面前端进行数据采集的方法较佳实施例的分割后的图像前端样式示意图；
46.图6为本发明一种对页面前端进行数据采集的装置的较佳实施例的功能模块示意图；
47.图7为本发明一种电子设备的较佳实施例的硬件结构示意图。
具体实施方式
48.为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
49.以下结合附图对本发明实施例进行介绍。
50.针对上述问题，本发明实施例提供了一种对页面前端进行数据采集的方法，请参阅图1，图1为本发明一种对页面前端进行数据采集的方法较佳实施例的流程图。如图1所示，其包括：
51.步骤s100、获取页面前端图像；
52.步骤s200、基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；
53.步骤s300、基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。
54.具体实施时，本发明实施例将对页面前端进行数据采集的方法集成中一个数据采集工具中，该数据采集工具由前端界面及后端服务器组成，前端界面用于与用户进行交互，后端服务器对数据采集过程进行技术支持。具体应用时，如图2所示，用户可将汽车金融的页面前端图像上传至数据采集工具中的前端界面，如图3所示，数据采集工具的后端服务器基于深度学习算法对页面前端图像的样式进行识别后，得到页面前端样式。
55.如图4所示，基于页面前端样式对页面前端图像中的内容进行采集，根据采集的内
容，生成数据采集需求列表。
56.本发明实施例可降低数据采集需求产出的难度，用户配置简单，只需要上传前端页面设计稿即可完成数据采集需求的识别。
57.在一个实施例中，获取页面前端图像，包括：
58.检测到页面前端图像获取指令，基于所述页面前端图像获取指令，获取产品人员设计的页面前端图像。
59.具体实施时，页面前端图像获取指令可以是一个图像上传按钮，检测到图像上传按钮被点击，将将产品人员设计好的页面前端图像到数据采集工具中。
60.在一个实施例中，基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式前，还包括：
61.预先构建深度学习模型，所述深度学习模型用于对页面前端图像的样式进行识别。
62.具体实施时，数据采集工具的后台服务器构建用于ai智能识别的深度学习模型，深度学习模型用于对页面前端图像中的各个样式进行识别。
63.在一个实施例中，预先构建深度学习模型，包括：
64.预先基于pytorch框架构建深度学习模型；
65.获取人工标注好的页面前端样式样本；
66.基于所述页面前端样式样本对所述深度学习模型进行训练，训练完成后生成页面前端样式识别模型。
67.具体实施时，pytorch是一个开源的python机器学习库，基于torch，用于自然语言处理等应用程序。pytorch既可以看作加入了gpu支持的numpy，同时也可以看成一个拥有自动求导功能的强大的深度神经网络。
68.本发明实施例基于pytorch构建深度学习模型，并获取现有人工标注好的页面前端样式样本，基于页面前端样式样本对深度学习模型进行训练，训练完成后生成页面前端样式识别模型。在构建模型时，需要对输入层、隐藏层和输出层的数量进行定义，并对初始权重的进行定义。权重矩阵的值是使用torch.randn()随机选择的。torch.randn()返回一个由来自标准正态分布的随机数组成的张量。
69.在一个实施例中，基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式前，还包括：
70.预先设置图像处理库，所述图像处理库用于对页面前端样式进行分割。
71.具体实施时，为了更好的进行图像识别，需要预先设置对页面前端图像的页面前端样式进行分割的图像处理库。
72.在一个实施例中，基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式，包括:
73.基于页面前端样式识别模型将页面前端样式识别为对应的样式区域，输出所述样式区域对应的区域轮廓数据；
74.将区域轮廓数据转换为页面前端图像的位置描述数据；
75.基于所述图像处理库对页面前端图像的位置描述数据进行识别，根据识别结果从页面前端图像切割出样式区域，生成若干个样式区域图像。
76.具体实施时，使用了pytorch深度学习建立图像识别大模型，作为图像分割主模型，可以将前端样式识别为一个一个的区域，输出格式化的区域轮廓数据。将模型数据的区域轮廓数据，转换为页面图片的位置描述数据。如图5所示，使用图片处理库，识别页面图片的位置描述数据，将区域从图片切割出来，形成一个一个的图片。
77.在一个实施例中，基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表，包括：
78.获取区域轮廓数据的轮廓数据特征；
79.基于所述轮廓数据特征匹配数据采集需求模板库数据，获取轮廓数据特征对应的数据采集需求；
80.基于数据采集需求、轮廓数据特征与样式区域图像的映射关系，获取数据采集需求对应的样式区域图像；
81.对样式区域图像的内容进行识别，根据识别后的内容生成数据采集需求列表。
82.具体实施时，使用轮廓数据特征，匹配已有数据采集需求模板库数据，同时利用【数据采集需求-轮廓数据-区域图片】的关系，关联到每个区域图片，形成数据采集需求列表。
83.本发明实施例通过上传图片；点击【上传图片】；页面前端样式识别：点击【使用ai智能识别区域】将图片传送到后台服务进行处理；生成数据采集需求列表：后端服务处理完成，返回数据采集需求列表。点击列表中对应的区域信息(图片区域)，自动亮起关联的图片区域(区域信息)。
84.与现有技术相比，本发明实施例能够降低数据采集需求产出的难度，用户配置简单，只需要上传前端页面设计稿即可完成数据采集需求的识别。
85.提高了数据采集需求规范性，通过自动化识别需求模板，减少不同用户因理解差异产生的个性化配置，保证平台需求统一、规范。
86.智能化程度高，可以识别从未见过的前端样式，提升因页面设计个性化的识别率，减少人工的配置操作。
87.需要说明的是，上述各步骤之间并不必然存在一定的先后顺序，本领域普通技术人员，根据本发明实施例的描述可以理解，不同实施例中，上述各步骤可以有不同的执行顺序，亦即，可以并行执行，亦可以交换执行等等。
88.本发明另一实施例提供一种对页面前端进行数据采集的装置，如图6所示，装置1包括：
89.图像获取模块11，用于获取页面前端图像；
90.页面样式识别模块12，用于基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；
91.数据采集模块13，用于基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。
92.具体实施方式见方法实施例，此处不再赘述。
93.在一个实施例中，图像获取模块11具体用于：
94.检测到页面前端图像获取指令，基于所述页面前端图像获取指令，获取产品人员设计的页面前端图像。
95.具体实施方式见方法实施例，此处不再赘述。
96.在一个实施例中，装置还包括深度学习模型构建模块，深度学习模型构建模块具体用于：
97.预先构建深度学习模型，所述深度学习模型用于对页面前端图像的样式进行识别。
98.具体实施方式见方法实施例，此处不再赘述。
99.在一个实施例中，深度学习模型构建模块还用于：
100.预先基于pytorch框架构建深度学习模型；
101.获取人工标注好的页面前端样式样本；
102.基于所述页面前端样式样本对所述深度学习模型进行训练，训练完成后生成页面前端样式识别模型。
103.具体实施方式见方法实施例，此处不再赘述。
104.在一个实施例中，装置还包括设置模块，设置模块具体用于：
105.预先设置图像处理库，所述图像处理库用于对页面前端样式进行分割。
106.具体实施方式见方法实施例，此处不再赘述。
107.在一个实施例中，页面样式识别模块12具体用于:
108.基于页面前端样式识别模型将页面前端样式识别为对应的样式区域，输出所述样式区域对应的区域轮廓数据；
109.将区域轮廓数据转换为页面前端图像的位置描述数据；
110.基于所述图像处理库对页面前端图像的位置描述数据进行识别，根据识别结果从页面前端图像切割出样式区域，生成若干个样式区域图像。
111.具体实施方式见方法实施例，此处不再赘述。
112.在一个实施例中，数据采集模块13具体用于：
113.获取区域轮廓数据的轮廓数据特征；
114.基于所述轮廓数据特征匹配数据采集需求模板库数据，获取轮廓数据特征对应的数据采集需求；
115.基于数据采集需求、轮廓数据特征与样式区域图像的映射关系，获取数据采集需求对应的样式区域图像；
116.对样式区域图像的内容进行识别，根据识别后的内容生成数据采集需求列表。
117.具体实施方式见方法实施例，此处不再赘述。
118.本发明另一实施例提供一种电子设备，如图7所示，电子设备10包括：
119.一个或多个处理器110以及存储器120，图7中以一个处理器110为例进行介绍，处理器110和存储器120可以通过总线或者其他方式连接，图7中以通过总线连接为例。
120.处理器110用于完成电子设备10的各种控件逻辑，其可以为通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)、单片机、arm(acorn risc machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件控件或者这些部件的任何组合。还有，处理器110还可以是任何传统处理器、微处理器或状态机。处理器110也可以被实现为计算设备的组合，例如，dsp和微处理器的组合、多个微处理器、一个或多个微处理器结合dsp核、或任何其它这种配置。
121.存储器120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的对页面前端进行数据采集的方法对应的程序指令。处理器110通过运行存储在存储器120中的非易失性软件程序、指令以及单元，从而执行设备10的各种功能应用以及数据处理，即实现上述方法实施例中的对页面前端进行数据采集的方法。
122.存储器120可以包括存储程序区和存储数据区，其中，存储程序区可存储操作装置、至少一个功能所需要的应用程序；存储数据区可存储根据设备10使用所创建的数据等。此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实施例中，存储器120可选包括相对于处理器110远程设置的存储器，这些远程存储器可以通过网络连接至设备10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
123.一个或者多个单元存储在存储器120中，当被一个或者多个处理器110执行时，执行上述任意方法实施例中的对页面前端进行数据采集的方法，例如，执行以上描述的图1中的方法步骤s100至步骤s300。
124.本发明实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行，例如，执行以上描述的图1中的方法步骤s100至步骤s300。
125.作为示例，非易失性存储介质能够包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦rom(eeprom)或闪速存储器。易失性存储器能够包括作为外部高速缓存存储器的随机存取存储器(ram)。通过说明并非限制，ram可以以诸如同步ram(sram)、动态ram、(dram)、同步dram(sdram)、双数据速率sdram(ddr sdram)、增强型sdram(esdram)、synchlink dram(sldram)以及直接rambus(兰巴斯)ram(drram)之类的许多形式得到。本文中所描述的操作环境的所公开的存储器控件或存储器旨在包括这些和/或任何其他适合类型的存储器中的一个或多个。
126.本发明的另一种实施例提供了一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使处理器执行上述方法实施例的对页面前端进行数据采集的方法。例如，执行以上描述的图1中的方法步骤s100至步骤s300。
127.以上所描述的实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际需要选择其中的部分或者全部模块来实现本实施例方案的目的。
128.通过以上的实施例的描述，本领域的技术人员可以清楚地了解到各实施例可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件实现。基于这样的理解，上述技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存在于计算机可读存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机装置(可以是个人计算机，服务器，或者网络装置等)执行各个实施例或者实施例的某些部分的方法。
129.除了其他之外，诸如"能够'、"能"、"可能"或"可以"之类的条件语言除非另外具体
地陈述或者在如所使用的上下文内以其他方式理解，否则一般地旨在传达特定实施方式能包括(然而其他实施方式不包括)特定特征、元件和/或操作。因此，这样的条件语言一般地还旨在暗示特征、元件和/或操作对于一个或多个实施方式无论如何都是需要的或者一个或多个实施方式必须包括用于在有或没有输入或提示的情况下判定这些特征、元件和/或操作是否被包括或者将在任何特定实施方式中被执行的逻辑。
130.已经在本文中在本说明书和附图中描述的内容包括能够提供对页面前端进行数据采集的方法及装置的示例。当然，不能够出于描述本公开的各种特征的目的来描述元件和/或方法的每个可以想象的组合，但是可以认识到，所公开的特征的许多另外的组合和置换是可能的。因此，显而易见的是，在不脱离本公开的范围或精神的情况下能够对本公开做出各种修改。此外，或在替代方案中，本公开的其他实施例从对本说明书和附图的考虑以及如本文中所呈现的本公开的实践中可能是显而易见的。意图是，本说明书和附图中所提出的示例在所有方面被认为是说明性的而非限制性的。尽管在本文中采用了特定术语，但是它们在通用和描述性意义上被使用并且不用于限制的目的。

技术特征：
1.一种对页面前端进行数据采集的方法,其特征在于,所述方法包括：获取页面前端图像；基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。2.根据权利要求1所述的方法，其特征在于，所述获取页面前端图像，包括：检测到页面前端图像获取指令，基于所述页面前端图像获取指令，获取产品人员设计的页面前端图像。3.根据权利要求2所述的方法，其特征在于，所述基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式前，还包括：预先构建深度学习模型，所述深度学习模型用于对页面前端图像的样式进行识别。4.根据权利要求3所述的方法，其特征在于，所述预先构建深度学习模型，包括：预先基于pytorch框架构建深度学习模型；获取人工标注好的页面前端样式样本；基于所述页面前端样式样本对所述深度学习模型进行训练，训练完成后生成页面前端样式识别模型。5.根据权利要求4所述的方法，其特征在于，所述基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式前，还包括：预先设置图像处理库，所述图像处理库用于对页面前端样式进行分割。6.根据权利要求5所述的方法，其特征在于，所述基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式，包括:基于页面前端样式识别模型将页面前端样式识别为对应的样式区域，输出所述样式区域对应的区域轮廓数据；将区域轮廓数据转换为页面前端图像的位置描述数据；基于所述图像处理库对页面前端图像的位置描述数据进行识别，根据识别结果从页面前端图像切割出样式区域，生成若干个样式区域图像。7.根据权利要求6所述的方法，其特征在于，所述基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表，包括：获取区域轮廓数据的轮廓数据特征；基于所述轮廓数据特征匹配数据采集需求模板库数据，获取轮廓数据特征对应的数据采集需求；基于数据采集需求、轮廓数据特征与样式区域图像的映射关系，获取数据采集需求对应的样式区域图像；对样式区域图像的内容进行识别，根据识别后的内容生成数据采集需求列表。8.一种对页面前端进行数据采集的装置，其特征在于，所述装置包括：图像获取模块，用于获取页面前端图像；页面样式识别模块，用于基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；数据采集模块，用于基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。
9.一种电子设备，其特征在于，所述电子设备包括至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7任一项所述的对页面前端进行数据采集的方法。10.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的对页面前端进行数据采集的方法。

技术总结
本发明公开了一种对页面前端进行数据采集的方法、装置及电子设备，方法包括：获取页面前端图像；基于深度学习算法对页面前端图像的样式进行识别，得到页面前端样式；基于页面前端样式对数据进行采集，根据采集的数据，生成数据采集需求列表。本发明实施例能够降低数据采集需求产出的难度，用户只需要上传前端页面设计稿即可完成数据采集需求的识别；通过自动化识别需求模板，减少不同用户因理解差异产生的个性化配置，保证平台需求统一、规范；可以识别从未见过的前端样式，提升因页面设计个性化的识别率，减少人工的配置操作。减少人工的配置操作。减少人工的配置操作。


技术研发人员：刘宇明
受保护的技术使用者：平安银行股份有限公司
技术研发日：2023.06.28
技术公布日：2023/10/5