CN116661940B - 组件识别方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种组件识别方法、装置、计算机设备、存储介质和计算机程序产品。所述方法涉及人工智能技术，包括：确定待识别的页面设计图文件，从页面设计图文件中分别提取至少两种模态下各自的设计图模态特征；获取组件库中比对组件在至少两种模态下各自的比对模态特征；根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数；基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定页面设计图文件与比对组件之间的组件相似参数；根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。采用本方法能够提高组件识别的准确性。

Description

组件识别方法、装置、计算机设备和存储介质

技术领域

本申请涉及就计算机技术领域，特别是涉及一种组件识别方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

随着互联网技术的快速发展，越来越多的企业和组织开始利用活动网页来推广产品、服务和品牌，吸引用户关注和参与。活动网页的页面设计中通常包含各种各样的组件，如游戏活动页面中包括按钮、背景图、抽奖、翻牌子等组件，以增加用户参与时的互动性和趣味性。在针对页面设计中的组件进行管理和优化过程中，需要从页面设计中识别相应组件，生成相应代码文件以针对进行优化和管理。

然而，由于活动网页页面设计的复杂性和多样性，导致针对组件识别的识别准确性较低。

发明内容

基于此，有必要针对上述技术问题，提供一种能够提高组件识别准确性的组件识别方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。

第一方面，本申请提供了一种组件识别方法。所述方法包括：

确定待识别的页面设计图文件，从页面设计图文件中分别提取至少两种模态下各自的设计图模态特征；

获取组件库中比对组件在至少两种模态下各自的比对模态特征；

根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数；

基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定页面设计图文件与比对组件之间的组件相似参数；

根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。

第二方面，本申请还提供了一种组件识别装置。所述装置包括：

设计图模态特征获得模块，用于确定待识别的页面设计图文件，从页面设计图文件中分别提取至少两种模态下各自的设计图模态特征；

比对模态特征获得模块，用于获取组件库中比对组件在至少两种模态下各自的比对模态特征；

特征比对参数获得模块，用于根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数；

组件相似参数确定模块，用于基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定页面设计图文件与比对组件之间的组件相似参数；

匹配组件确定模块，用于根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以上组件识别方法的步骤。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以上组件识别方法的步骤。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以上组件识别方法的步骤。

上述组件识别方法、装置、计算机设备、存储介质和计算机程序产品，从待识别的页面设计图文件中提取至少两种模态下各自的设计图模态特征，获取组件库中比对组件在至少两种模态下各自的比对模态特征，根据相同模态下的设计图模态特征和比对模态特征确定相同模态下的特征比对参数，基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征确定页面设计图文件与比对组件之间的组件相似参数，并根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。在组件识别处理过程中，利用页面设计图文件和组件库中组件在相同模态下的特征确定特征比对参数，基于由至少两种模态下特征比对参数融合得到的多模态融合特征，确定页面设计图文件与组件库中各组件之间的组件相似参数，利用组件相似参数得到组件识别结果，利用多种模态下的特征进行多维度的组件匹配识别，提高了组件识别的准确性。

附图说明

图1为一个实施例中组件识别方法的应用环境图；

图2为一个实施例中组件识别方法的流程示意图；

图3为另一个实施例中组件识别方法的流程示意图；

图4为一个实施例中组件图形转换成圆形的示意框图；

图5为一个实施例中组件图形转换成五边形的示意框图；

图6为一个实施例中组件识别模型训练的流程示意图；

图7为一个实施例中组件识别处理方法的对比示意图；

图8为一个实施例中多种模态特征提取的示意框图；

图9为一个实施例中组件转换成矩形框的示意图；

图10为一个实施例中融合相似向量进行组件识别的流程示意图；

图11为一个实施例中组件识别的结果示意图；

图12为一个实施例中组件识别装置的结构框图；

图13为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请实施例提供的组件识别方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他服务器上。终端102可以将需要进行组件识别的页面设计图文件发送到服务器104，服务器104从待识别的页面设计图文件中提取至少两种模态下各自的设计图模态特征，服务器104获取组件库中比对组件在至少两种模态下各自的比对模态特征，如可以从数据存储系统中查询得到比对组件在至少两种模态下各自的比对模态特征。服务器104根据相同模态下的设计图模态特征和比对模态特征确定相同模态下的特征比对参数，基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征确定页面设计图文件与比对组件之间的组件相似参数，服务器104根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。服务器104可以将针对页面设计图文件的组件识别结果，即可以将识别出的与页面设计图文件相匹配组件的组件信息反馈至终端102，组件信息中可以包括组件的代码文件，用户可以通过终端102基于组件的代码文件，对页面设计图文件中的组件进行进一步地设计和优化处理，从而能够提高组件设计和优化的处理效率。

其中，终端102可以但不限于是各种台式计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。源数据库管理服务器104和目标数据库管理服务器106可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端102以及服务器104可以通过有线或无线通信方式进行直接或间接地连接。终端102与数据库节点104以及服务器104各自分别可以通过有线或无线通信方式进行直接或间接地连接。

其中，云技术（Cloud technology）是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。云技术是基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，只能通过云计算来实现。

具体来说，云计算(cloud computing)指IT基础设施的交付和使用模式，指通过网络以按需、易扩展的方式获得所需资源；广义云计算指服务的交付和使用模式，指通过网络以按需、易扩展的方式获得所需服务。这种服务可以是IT和软件、互联网相关，也可是其他服务。云计算是网格计算（Grid Computing )、分布式计算（Distributed Computing)、并行计算（Parallel Computing)、效用计算（Utility Computing)、网络存储（Network StorageTechnologies)、虚拟化（Virtualization)、负载均衡（Load Balance)等传统计算机和网络技术发展融合的产物。随着互联网、实时数据流、连接设备多样化的发展，以及搜索服务、社会网络、移动商务和开放协作等需求的推动，云计算迅速发展起来。不同于以往的并行分布式计算，云计算的产生从理念上将推动整个互联网模式、企业管理模式发生革命性的变革。

此外，本实施例提供的组件识别方法可以基于人工智能技术实现。人工智能(Artificial Intelligence, AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。换句话说，人工智能是计算机科学的一个综合技术，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。人工智能也就是研究各种智能机器的设计原理与实现方法，使机器具有感知、推理与决策的功能。

人工智能技术是一门综合学科，涉及领域广泛，既有硬件层面的技术也有软件层面的技术。人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

计算机视觉技术(Computer Vision, CV)计算机视觉是一门研究如何使机器“看”的科学，更进一步的说，就是指用摄影机和电脑代替人眼对目标进行识别、跟随和测量等机器视觉，并进一步做图形处理，使电脑处理成为更适合人眼观察或传送给仪器检测的图像。作为一个科学学科，计算机视觉研究相关的理论和技术，试图建立能够从图像或者多维数据中获取信息的人工智能系统。计算机视觉技术通常包括图像处理、图像识别、图像语义理解、图像检索、OCR、视频处理、视频语义理解、视频内容/行为识别、三维物体重建、3D技术、虚拟现实、增强现实、同步定位与地图构建等技术，还包括常见的人脸识别、指纹识别等生物特征识别技术。

自然语言处理(Nature Language processing, NLP)是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。自然语言处理是一门融语言学、计算机科学、数学于一体的科学。因此，这一领域的研究将涉及自然语言，即人们日常使用的语言，所以它与语言学的研究有着密切的联系。自然语言处理技术通常包括文本处理、语义理解、机器翻译、机器人问答、知识图谱等技术。

机器学习(Machine Learning, ML)是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。机器学习是人工智能的核心，是使计算机具有智能的根本途径，其应用遍及人工智能的各个领域。机器学习和深度学习通常包括人工神经网络、置信网络、强化学习、迁移学习、归纳学习、式教学习等技术。

随着人工智能技术研究和进步，人工智能技术在多个领域展开研究和应用，例如常见的智能家居、智能穿戴设备、虚拟助理、智能音箱、智能营销、无人驾驶、自动驾驶、无人机、机器人、智能医疗、智能客服等，相信随着技术的发展，人工智能技术将在更多的领域得到应用，并发挥越来越重要的价值。

本申请实施例提供的方案涉及人工智能的计算机视觉技术、自然语言处理和机器学习等技术，具体通过如下实施例进行说明。

在一个实施例中，如图2所示，提供了一种组件识别方法，该方法由计算机设备执行，具体可以由终端或服务器等计算机设备单独执行，也可以由终端和服务器共同执行，在本申请实施例中，以该方法应用于图1中的服务器为例进行说明，包括以下步骤：

步骤202，确定待识别的页面设计图文件，从页面设计图文件中分别提取至少两种模态下各自的设计图模态特征。

其中，组件是网页中的界面元素，以支持用户进行交互，组件具体可以包括按钮、背景图、抽奖组件、翻牌子组件、视窗、文本框等各种形式。页面设计图文件是针对网页页面的设计文件，具体可以为图像格式的设计稿文件，如页面设计图文件可以是针对网页页面所需要呈现的视觉效果图像。页面设计图文件具体可以是基于各种设计软件制作的设计图文件，如可以是基于图形设计软件Photoshop制作的PSD文件，PSD文件可以包括多个图层，多个图层叠加可以形成完整的图片。模态用于区分特征类别，不同模态可以对应于不同的特征类别，如具体可以包括文本、图像、组件布局等各种特征类别。设计图模态特征是从页面设计图文件中提取得到的特征，具体按照指定模态提取得到的特征，如可以包括按照文本模态提取的特征、按照图像模态提取的特征、按照组件布局提取的特征等。不同模态下的设计图模态特征，可以表征页面设计图文件在不同模态下对应的组件信息，基于设计图模态特征可以针对页面设计图文件进行组件识别。

具体地，服务器确定需要针对进行组件识别处理的页面设计图文件，页面设计图文件可以由用户通过终端进行选定，并通过终端向服务器发送。服务器针对页面设计图文件进行特征提取，具体按照至少两种模态分别进行特征提取，得到至少两种模态下各自的设计图模态特征。例如，服务器可以确定至少两种模态，如可以确定文本、图像、组件布局等三种模态，并按照确定的至少两种模态分别针对页面设计图文件进行特征提取，得到各种模态下各自对应的设计图模态特征。不同的模态对应于不同的特征类别，可以按照不同的特征提取方式进行特征提取，从而确保提取特征的表达能力，如可以基于计算机视觉任务从页面设计图文件中提取图像模态下的设计图图像特征，可以基于自然语言识别技术从页面设计图文件中提取文本模态下的设计图文本特征，可以基于图形转换，从页面设计图文件中提取组件布局模态下的设计图组件布局特征。

在具体实现中，页面设计图文件中可以包括多个组件，则针对每个组件可以单独进行组件识别处理。例如，页面设计图文件可以划分成4个模块，分别为模块A、模块B、模块C和模块D，每个模块对应于一个组件，则页面设计图文件中可以包括4个组件。

步骤204，获取组件库中比对组件在至少两种模态下各自的比对模态特征。

其中，组件库是记录有各种组件的数据库，组件库中可以记录组件的标识信息，如组件名称、编号、应用场景等。对比组件是从组件库中确定的、用于对页面设计图文件中组件进行对比的组件，对比组件可以是组件库中任意选定的组件。从组件库中选定对比组件，与页面设计图文件中的组件进行比对，通过更新对比组件，可以遍历组件库中的各个组件，从而结合比对结果能够从组件库中识别出与页面设计图文件相匹配的组件。比对模态特征是指比对组件在指定模态下的特征，如比对组件在图像模态下的比对图像特征，比对组件在文本模态下的比对文本特征等。

具体地，服务器可以获取比对组件在至少两种模态下各自的比对模态特征，具体可以由服务器从组件库中确定比对组件，如可以按照组件库中各个组件的顺序，从组件库中依次选定比对组件，针对确定的比对组件，服务器获取比对组件在至少两种模态下各自的比对模态特征。在具体应用中，获得的比对模态特征所属模态与设计图模态特征所属模态相同。例如，设计图模态特征包括属于文本模态、组件布局模态各自的特征，则比对模态特征也包括属于文本模态、组件布局模态各自的特征；若设计图模态特征包括属于文本模态、图像模态以及组件布局模态各自的特征，则比对模态特征也包括属于文本模态、图像模态以及组件布局模态各自的特征。

在具体实现时，服务器可以预先针对组件库中的各个组件进行特征提取，得到各个组件在不同模态下各自的比对模态特征，并可以通过组件模态特征库进行存储。在服务器确定比对组件后，服务器可以直接从组件模态特征库中查询得到比对组件在指定的至少两种模态下各自的比对模态特征。此外，服务流也可以在确定比对组件后，针对比对组件进行特征提取，具体按照指定的至少两种模态进行特征提取，得到比对组件在指定的至少两种模态下各自的比对模态特征。

步骤206，根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数。

其中，特征比对参数用于表征相同模态下的设计图模态特征和比对模态特征之间的特征比对结果，具体可以表征设计图模态特征和比对模态特征之间特征相似程度。设计图模态特征和比对模态特征之间的特征相似程度越高，则表明页面设计图文件中所包括组件与比对组件越相似。

具体地，对于至少两种模态中的每种模态，服务器可以根据相同模态下的设计图模态特征和比对模态特征，确定在该相同模态下的特征比对参数。在具体实现中，服务器可以将相同模态下的设计图模态特征和比对模态特征进行特征比对，得到在该相同模态下的特征比对参数。例如，指定的至少两种模态包括模态1、模态2和模态3共三种模态，对于模态1，服务器可以将模态1下的设计图模态特征1和比对模态特征1进行比对，得到模态1下的特征比对参数1；同样的可以得到模态2下的特征比对参数2以及模态3下的特征比对参数3，即总共可以得到3种模态各自对应的特征比对参数，表征了在不同模态下页面设计图文件中组件与比对组件之间组件特征的相似程度。

步骤208，基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定页面设计图文件与比对组件之间的组件相似参数。

其中，多模态融合特征基于各种模态下各自的特征比对参数融合得到，用于表征页面设计图文件中组件与比对组件之间特征的综合对比结果。组件相似参数用于表征页面设计图文件中所包括组件与比对组件之间的组件相似程度。

具体地，服务器可以获取多模态融合特征，多模态融合特征是由至少两种模态下各自的特征比对参数融合得到的，具体可以将至少两种模态下各自的特征比对参数进行加权融合，得到多模态融合特征。服务器可以基于多模态融合特征确定页面设计图文件与比对组件之间的组件相似参数，具体可以基于多模态融合特征进行进一步的特征提取处理，得到表征页面设计图文件中所包括组件与比对组件之间组件相似程度的组件相似参数，组件相似参数具体可以包括组件相似度。

步骤210，根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。

其中，服务器可以遍历组件库中的各个组件，将组件库中的各个组件依次作为比对组件，分别确定各个组件与页面设计图文件之间的组件相似参数。具体地，服务器可以根据各个组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。例如，组件相似参数为组件相似度时，服务器可以将组件库中组件相似度数值最高的组件，确定为与页面设计图文件相匹配的组件，从而实现针对页面设计图文件的准确组件识别。

在一个具体应用中，如图3所示，服务器可以确定待识别的页面设计图文件，具体可以是PSD文件，服务器可以按照图像模态、文本模态和组件布局模态等三种模态，分别对页面设计图文件进行特征提取，得到各种各自的设计图模态特征，包括设计图图像特征、设计图文本特征以及设计图组件布局特征。服务器从组件库中确定比对组件，并获取比对组件在各种模态下各自的比对模态特征，包括比对组件布局特征、比对文本特征和比对图像特征。服务器将设计图组件布局特征与比对组件布局特征进行比对，得到组件布局特征比对参数；将设计图文本特征与比对文本特征进行比对，得到文本特征比对参数；将设计图图像特征与比对图像特征进行比对，得到图像特征比对参数。服务器将组件布局特征比对参数、文本特征比对参数和图像特征比对参数融合，得到多模态融合特征，并基于多模态融合特征确定页面设计图文件与比对组件之间的组件相似参数。服务器根据页面设计图文件与组件库中各个组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件，即得到页面设计图文件的组件识别结果。

上述组件识别方法中，从待识别的页面设计图文件中提取至少两种模态下各自的设计图模态特征，获取组件库中比对组件在至少两种模态下各自的比对模态特征，根据相同模态下的设计图模态特征和比对模态特征确定相同模态下的特征比对参数，基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征确定页面设计图文件与比对组件之间的组件相似参数，并根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。在组件识别处理过程中，利用页面设计图文件和组件库中组件在相同模态下的特征确定特征比对参数，基于由至少两种模态下特征比对参数融合得到的多模态融合特征，确定页面设计图文件与组件库中各组件之间的组件相似参数，利用组件相似参数得到组件识别结果，利用多种模态下的特征进行多维度的组件匹配识别，提高了组件识别的准确性。

在一个实施例中，至少两种模态包括文本模态、图像模态和组件布局模态；从页面设计图文件中分别提取至少两种模态下各自的设计图模态特征，包括：按照文本模态和图像模态，从页面设计图文件中分别提取得到设计图文本特征和设计图图像特征；针对页面设计图文件中包括的组件进行组件图形转换，得到包括至少一个组件图形的设计图图形集；基于设计图图形集得到在组件布局模态下的设计图组件布局特征。

其中，至少两种模态包括文本模态、图像模态和组件布局模态，文本模态是指文本类型，图像模态是指图像类型，组件布局模态是指组件布局类型，不同模态对应于不同类型维度，可以提取不同维度的组件信息。设计图文本特征是页面设计图文件在文本模态下提取的特征，设计图图像特征是页面设计图文件在图像模态下提取的特征。组件图形转换是指将组件转换成组件图形，具体可以转换成封闭图形，如圆形、三角形、四边形、五边形等多边形图形。一个组件经过组件图形转换可以得到一个或者多个组件图形。例如，一个组件可以只有一个按钮组成，则将该组件进行组件图形转换后可以得到一个组件图形，即为该按钮转换后的组件图形。一个组件也可以由多个按钮或文本框组成，则将该组件进行组件图形转换后可以得到多个的组件图形。设计图图形集可以包括组件转换后得到的各个组件图形。设计图组件布局特征是页面设计图文件在组件布局模态下提取的特征，用于表征页面设计图文件中所包括组件的布局信息。

具体地，可以预先指定针对文本模态、图像模态和组件布局模态进行特征提取，则服务器按照文本模态和图像模态，从页面设计图文件中分别提取得到设计图文本特征和设计图图像特征。对于文本模态，服务器可以基于自然语言识别技术，针对页面设计图文件进行文本模态特征提取，得到设计图文本特征；对于图像模态，服务器可以基于计算机视觉技术，针对页面设计图文件进行图像模态特征提取，得到设计图图像特征。针对组件布局模态，服务器可以针对页面设计图文件中包括的组件进行组件图形转换，具体可以将页面设计图文件中包括的组件简化转换成封闭图形，以得到表征相应组件的组件图形，如圆形、四边形等。组件图形的具体形状可以根据实际需要进行灵活设置。页面设计图文件中包括的组件进行组件图形转换后，可以得到至少一个组件图形，根据至少一个组件图形可以组合形成设计图图形集。服务器可以基于设计图图形集，确定页面设计图文件在组件布局模态下的设计图组件布局特征。例如，服务器可以基于设计图图形集中包括的组件图形进行组件布局分析，得到设计图组件布局特征。

在具体应用中，指定的至少两种模态可以指包括两种模态，如可以包括文本模态和图像模态，也可以包括文本模态和组件布局模态，还可以包括图像模态和组件布局模态。至少两种模态可以根据实际需要进行灵活指定。

本实施例中，服务器按照文本模态和图像模态从页面设计图文件中分别提取得到设计图文本特征和设计图图像特征，并将页面设计图文件中包括的组件进行组件图形转换后，基于得到的设计图图形集获得组件布局模态下的设计图组件布局特征，从而能够利用设计图文本特征、设计图图像特征和设计图组件布局特征等多模态特征进行多维度的组件匹配识别，可以提高组件识别的准确性。

在一个实施例中，基于设计图图形集得到在组件布局模态下的设计图组件布局特征，包括：根据设计图图形集中包括的至少一个封闭图形，得到设计图图形分布特征；根据设计图图形集中包括的至少一个封闭图形生成映射图像；针对映射图像进行特征提取，得到映射图分布特征；根据设计图图形分布特征和映射图分布特征，得到在组件布局模态下的设计图组件布局特征。

其中，页面设计图文件中包括的组件经过组件图形转换后，得到至少一个组件图形，组件图像可以为封闭图形，如圆形、或者三角形、四边形等多边形。设计图图形分布特征根据设计图图形集中的封闭图形得到，可以用于表征各个封闭图像在页面中的分布信息。例如，服务器可以直接将设计图图形集中包括的各个封闭图形各自的图形信息，作为设计图图形分布特征，如可以将各个封闭图形各自的坐标位置、颜色、大小等，作为设计图图形分布特征。映射图像基于设计图图形集中的封闭图形生成，具体可以将设计图图形集中的封闭图形进行映射得到，如可以将设计图图形集中的封闭图形进行映射，形成由各个封闭图形组成的映射图像。映射图分布特征是针对映射图像提取得到的特征，具体可以基于计算机视觉技术从映射图像中提取得到。映射图分布特征是从图像模态的维度，针对各个封闭图形提取得到特征，可以从图像模态的维度基于封闭图形得到针对页面设计图文件中组件布局的特征表达。

具体地，页面设计图文件中包括的组件经过组件图形转换后，得到至少一个封闭图形，如可以是封闭的圆形或者封闭的多边形。服务器根据设计图图形集中的封闭图形得到设计图图形分布特征，具体服务器可以直接将设计图图形集中的各个封闭图形的图形信息，如封闭图形的坐标位置、颜色、大小等信息，确定为设计图图形分布特征。封闭图形是基于页面设计图文件中包括的组件转换得到的，基于封闭图形的分布特征，可以确定页面设计图文件中组件的分布特征。服务器将设计图图形集中包括的封闭图形分别进行映射，生成映射图像，具体可以将各个封闭图形映射成相应的图片，得到映射图像。服务器针对映射图像进行特征提取，如可以通过CNN（Convolutional Neural Networks，卷积神经网络）、Transformer（转化器）等网络模型，针对映射图像进行特征提取，得到映射图分布特征。设计图图形分布特征是直接根据封闭图形得到的特征，而映射图分布特征是将封闭图形映射成图像后，基于映射图像进行特征提取得到的图像模态下的特征，从而可以从多角度针对设计图图形集提取得到丰富的组件特征表达。服务器根据设计图图形分布特征和映射图分布特征，得到在组件布局模态下的设计图组件布局特征。具体服务器可以将设计图图形分布特征和映射图分布特征军作为页面设计图文件中组件在组件布局模态下的设计图组件布局特征。

在一个具体应用中，如图4所示，页面设计图文件中包括的组件进行组件图形转换后，得到的封闭图形是圆形。在页面设计图文件中，组件包括悬浮的 “开始游戏”、“邀请好友”、“游戏介绍”以及“分享”等4个按钮，4个按钮进行组件图形转换，分别形成圆形1、圆形2、圆形3和圆形4共四个圆形，基于该4个圆形可以得到设计图图形分布特征。在另一个应用中，如图5所示，页面设计图文件中包括的组件进行组件图形转换后，得到的封闭图形是五边形。在页面设计图文件中，组件包括悬浮的按钮“开始游戏”、“邀请好友”、“游戏介绍”以及“分享”，4个按钮进行组件图形转换，分别形成五边形1、五边形2、五边形3和五边形4共四个封闭的五边形，基于该4个五边形可以得到设计图图形分布特征。

在具体实现时，基于设计图图形集得到在组件布局模态下的设计图组件布局特征时，服务器也可以直接根据设计图图形集中包括的至少一个封闭图形，得到设计图图形分布特征，并将设计图图形分布特征单独作为设计图组件布局特征。此外，服务器也可以单独将映射图分布特征作为设计图组件布局特征，从而可以根据实际场景需要，针对设计图组件布局特征进行灵活配置。

本实施例中，服务器根据设计图图形集中的封闭图形得到设计图图形分布特征，并从基于封闭图形生成的映射图像中提取映射图分布特征，根据设计图图形分布特征和映射图分布特征得到组件布局模态下的设计图组件布局特征，可以从多角度针对设计图图形集提取得到丰富的组件特征表达，提高设计图组件布局特征的表达准确性，可以提高基于设计图组件布局特征进行组件识别的准确性。

在一个实施例中，根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数，包括：根据设计图文本特征和比对组件在文本模态下的比对文本特征，得到文本模态下的文本特征比对参数；根据设计图图像特征和比对组件在图像模态下的比对图像特征，得到图像模态下的图像特征比对参数；根据映射图分布特征和比对组件在组件布局模态下的组件映射图分布特征，得到组件布局模态下的映射图特征比对参数；根据设计图图形分布特征和比对组件在组件布局模态下的比对图形分布特征，得到组件布局模态下的图形重叠参数。

其中，模态包括文本模态、图像模态和组件布局模态，而组件布局模态中包括两种特征，分别为图形分布特征和映射图分布特征，共存在四种类型的特征，每种类型的特征可以分别进行比对得到相应的特征比对参数。比对文本特征是比对组件在文本模态下提取得到的特征；比对图像特征是比对组件在图像模态下提取得到的特征；组件映射图分布特征和比对图形分布特征均是比对组件在组件布局模态下提取得到的特征。

具体地，对于相同模态下页面设计图文件的特征和比对组件的特征，服务器可以将设计图模态特征和比对模态特征进行比对，以得到在相同模态下的特征比对参数。例如，服务器可以基于设计图模态特征和比对模态特征进行特征相似度计算，根据相似度计算结果得到特征比对参数。具体对于文本模态，服务器可以将页面设计图文件的设计图文本特征与比对组件的比对文本特征进行比对，得到文本模态下的文本特征比对参数。对于图像模态，服务器可以将页面设计图文件的设计图图像特征与比对组件的比对图像特征进行比对，得到图像模态下的图像特征比对参数。对于组件布局模态，服务器可以将页面设计图文件的映射图分布特征与比对组件的组件映射图分布特征进行比对，得到组件布局模态下的映射图特征比对参数。

另一方面，服务器可以将页面设计图文件的设计图图形分布特征与比对组件的比对图形分布特征进行比对，如根据设计图图形分布特征和比对图形分布特征进行重复度计算，得到组件布局模态下的图形重叠参数。其中，重复度计算中，可以根据设计图图形分布特征和比对图形分布特征，确定在页面设计图文件的组件和比对组件之间组件图形的交集区域，并根据交集区域计算图形重叠参数，图形重叠参数反映了在页面设计图文件的组件和比对组件之间组件图形的重叠程度，重叠程度越高，则表明在页面设计图文件的组件和比对组件之间的相似度越高。

本实施例中，对于文本模态、图像模态和组件布局模态，分别根据相应模态的设计图模态特征和比对模态特征确定对应的特征比对参数，从而可以基于每种模态针对页面设计图文件和比对组件进行多维度的对比分析，可以提高组件识别的准确性。

在一个实施例中，基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定页面设计图文件与比对组件之间的组件相似参数，包括：将至少两种模态下各自的特征比对参数进行融合，得到多模态融合特征；针对多模态融合特征进行至少一次的特征提取，得到预测特征；基于预测特征进行组件相似预测，得到页面设计图文件与比对组件之间的组件相似参数。

其中，多模态融合特征由各个模态下的特征比对参数融合得到，具体可以将各个模态下的特征比对参数进行拼接，如可以通过人工神经网络中的全连接层和平展层进行拼接，得到多模态融合特征。预测特征是针对多模态融合特征进行至少一次特征提取得的特征提取结果，基于预测特征可以针对页面设计图文件与比对组件之间的组件相似参数进行准确预测。

具体地，对于每个模态，根据该模态下设计图模态特征和比对模态特征确定特征比对参数，每个模态可以得到相应的特征比对参数。服务器可以将每种模态下各自的特征比对参数进行融合，得到多模态融合特征。服务器针对多模态融合特征继续进行特征提取，具体可以进行至少一次的特征提取处理，如可以通过MLP（Multilayer Perceptron，多层感知器）、或Transformer模型进行至少一次的特征提取处理，得到预测特征。服务器基于预测特征进行组件相似预测，得到页面设计图文件与比对组件之间的组件相似参数。如服务器可以将预测特征输入到分类器模型中进行组件相似预测，由分类器模型输出页面设计图文件与比对组件之间的组件相似参数。

本实施例中，服务器将至少两种模态下各自的特征比对参数进行融合，针对融合得到的多模态融合特征进行至少一次的特征提取，并基于提取得到的预测特征进行组件相似预测，得到页面设计图文件与比对组件之间的组件相似参数，从而综合了多个模态的特征进行组件相似预测，有利于提高组件识别的准确性。

在一个实施例中，根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数，包括：对于至少两种模态中的目标模态，确定在目标模态下的设计图模态特征和比对模态特征；针对在目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在目标模态下的特征比对参数。

其中，目标模态是从至少两种模态中指定的进行特征对比参数确定的模态。特征相似性分析是将设计图模态特征与比对模态特征进行特征相似计算，得到特征比对参数的处理过程。

具体地，服务器可以从至少两种模态中确定需要针对进行特征比对参数确定的目标模态，服务器确定在该目标模态下的设计图模态特征和比对模态特征。服务器对在该目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，具体可以将设计图模态特征和比对模态特征进行相似度计算，得到在目标模态下的特征比对参数。

本实施例中，服务器针对相同模态下的设计图模态特征和比对模态特征进行特征相似性分析，以对页面设计图文件和比对组件在每种模态下分别进行特征比对，可以确保特征比对参数的有效性，从而有利于提高组件识别的准确性。

在一个实施例中，针对在目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在目标模态下的特征比对参数，包括：将在目标模态下的设计图模态特征和比对模态特征分别进行归一化映射，得到归一化后的设计图模态特征和归一化后的比对模态特征；将归一化后的设计图模态特征和归一化后的比对模态特征进行融合，获得模态相似特征；根据模态相似特征得到在目标模态下的特征比对参数。

其中，归一化（Normalization）映射是指将特征中参数映射到[0,1]区间的处理，从而实现将特征中参数值的绝对值转变成相对值关系，能够简化计算，缩小量值。模态相似特征由相同模态下归一化后的特征融合得到，可以表征相同模态下设计图模态特征和比对模态特征之间的特征差异。

具体地，对于目标模态下的设计图模态特征和比对模态特征，服务器可以将设计图模态特征和比对模态特征分别进行归一化映射，以将各特征中参数映射到[0,1]的数值区间。例如，设计图模态特征和比对模态特征均可以为多维特征向量，则服务器可以将多维特征向量中的每个参数进行归一化处理，得到归一化后的特征向量。服务器将归一化后的设计图模态特征和归一化后的比对模态特征进行融合，例如服务器可以将特征中相同位置的参数对应进行融合，具体可以进行求积或者求和等，得到模态相似特征。模态相似特征经过归一化后的设计图模态特征和归一化后的比对模态特征融合得到，服务器可以根据模态相似特征得到在目标模态下的特征比对参数，具体服务器可以直接将模态相似特征作为目标模态下的特征比对参数。

本实施例中，服务器将设计图模态特征和比对模态特征分别进行归一化映射后，将归一化后的设计图模态特征和归一化后的比对模态特征进行融合，并根据融合得到的模态相似特征得到在目标模态下的特征比对参数，从而能够简化特征比对参数的表达，有利于降低组件识别处理的数据量，从而可以提高组件是识别的处理效率。

在一个实施例中，针对在目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在目标模态下的特征比对参数，包括：确定在目标模态下的设计图模态特征和比对模态特征之间的特征相似度；根据特征相似度得到在目标模态下的特征比对参数。

其中，特征相似度用于表征设计图模态特征和比对模态特征之间特征的相似程度，具体可以包括余弦相似度。具体地，对于目标模态下的设计图模态特征和比对模态特征，服务器可以直接计算设计图模态特征和比对模态特征之间的特征相似度，如可以计算设计图模态特征和比对模态特征之间的余弦相似度。服务器根据特征相似度得到在目标模态下的特征比对参数，如服务器可以将特征相似度作为在目标模态下的特征比对参数。

本实施例中，服务器直接根据设计图模态特征和比对模态特征之间的特征相似度，得到目标模态下的特征比对参数，可以通过特征相似度准确表征出设计图模态特征和比对模态特征之间的差异，可以确保特征比对参数的有效性，从而有利于提高组件识别的准确性。

在一个实施例中，根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件，包括：获取页面设计图文件与组件库中各组件之间各自的组件相似参数；基于组件匹配条件和各组件相似参数确定匹配组件相似参数；将组件库中匹配组件相似参数关联的组件，确定为与页面设计图文件相匹配的组件。

其中，组件匹配条件用于基于组件相似参数进行匹配，以确定满足组件识别需求的匹配组件相似参数。组件匹配条件可以根据实际需要进行设置，如可以为组件相似参数最大的匹配条件。

具体地，服务器遍历组件库中的各个组件，即将组件库中的各个组件依次作为比对组件，确定与页面设计图文件之间的组件相似参数。服务器获取页面设计图文件与组件库中各组件之间各自的组件相似参数，并获取预先设定的组件匹配条件。服务器基于组件匹配条件，针对各组件相似参数进行筛选，从而从各组件相似参数中确定匹配组件相似参数。例如，组件匹配条件包括组件相似参数最大的匹配条件，则服务器可以将数值最大的组件相似参数，确定为匹配组件相似参数；又如，组件匹配条件包括组件相似参数阈值，则可以将数值大于组件相似参数阈值的组件相似参数，确定为匹配组件相似参数。服务器基于组件匹配条件确定出匹配组件相似参数，并从组件库中确定匹配组件相似参数关联的组件，服务器将匹配组件相似参数所关联的组件，确定为与页面设计图文件相匹配的组件。

本实施例中，服务器按照组件匹配条件，根据各个组件相似参数，从组件库中确定出与页面设计图文件相匹配的组件，可以根据实际需要，识别出与页面设计图文件组件相似程度高的组件，确保了组件识别的准确性。

在一个实施例中，获取组件库中比对组件在至少两种模态下各自的比对模态特征，包括：确定组件库中的比对组件，并针对比对组件分别提取得到在至少两种模态下各自的比对模态特征。

其中，比对组件是从组件库中选定的组件，具体可以按照组件序号或者随机选定的组件。具体地，服务器可以从组件库中选定比对组件，并针对选定的比对组件按照至少两种模态分别进行特征提取，得到在至少两种模态下各自的比对模态特征。

本实施例中，服务器根据设计图模态特征所涉及的模态，针对比对组件在相同模态下分别进行特征提取，以便可以通过相同模态下的特征进行比对，从而准确识别出页面设计图文件中的组件。

在一个实施例中，获取组件库中比对组件在至少两种模态下各自的比对模态特征，包括：确定组件库中的比对组件，并从组件模态特征库中，查询获得比对组件在至少两种模态下各自的比对模态特征。

其中，比对组件是从组件库中选定的组件，具体可以按照组件序号或者随机选定的组件。组件模态特征库中存储有组件库中各种组件各自的比对模态特征。组件模态特征库可以根据实际预先构建。例如，对于组件库中的组件，服务器可以预先针对各个组件在各种模态下进行特征提取，以得到组件在各种模态下的模态特征，服务器可以将组件在各种模态下的模态特征维护到组件模态特征库中。

具体地，服务器可以从组件库中选定比对组件，并查询与组件库关联的组件模态特征库。服务器可以按照比对组件在组件模态特征库中进行查询，以查询得到比对组件在至少两种模态下各自的比对模态特征。

本实施例中，服务器直接从组件模态特征库中查询得到比对组件在至少两种模态下各自的比对模态特征，可以提高比对模态特征获取的效率，从而提高组件识别的处理效率。

在一个实施例中，组件识别方法基于组件识别模型实现，组件识别模型通过模型训练步骤得到，如图6所示，组件识别模型的模型训练步骤包括：

步骤602，获取页面设计图样本，并通过待训练的组件识别模型对页面设计图样本进行至少两种模态的特征提取，得到在至少两种模态下各自的设计图样本特征。

其中，页面设计图样本是页面设计图文件的样本，具体可以从历史页面设计图文件中获得。设计图样本特征是页面设计图样本在至少两种模态下分别提取得到的特征。

具体地，服务器可以获取页面设计图样本，并通过待训练的组件识别模型对页面设计图样本进行至少两种模态的特征提取，得到在至少两种模态下各自的设计图样本特征。在待训练的组件识别模型中，可以包括不同的特征提取子网络，特征提取子网络可以针对不同的模态进行特征提取，如待训练的组件识别模型中可以包括CNN子网络，用于对图像模态进行特征提取；待训练的组件识别模型中可以包括BERT（Bidirectional EncoderRepresentations from Transformers，双向的Transformers的编码器）子网络，用于对文本模态进行特征提取处理。

步骤604，获取组件代码样本，并通过待训练的组件识别模型对组件代码样本进行至少两种模态的特征提取，得到在至少两种模态下各自的代码样本特征。

其中，组件代码样本可以是描述页面组件的样本，具体可以包括CSS（CascadingStyle Sheets，层叠样式表）、HTML（Hyper Text Markup Language，超文本标记语言）等形式的代码文件。代码样本特征是组件代码样本在至少两种模态下分别提取得到的特征。

具体地，服务器可以获取组件代码样本，并通过待训练的组件识别模型对组件代码样本进行至少两种模态的特征提取，如服务器可以将组件代码样本输入到待训练的组件识别模型中，得到在至少两种模态下各自的代码样本特征。

步骤606，通过待训练的组件识别模型，根据至少两种模态中相同模态下的设计图样本特征和代码样本特征，确定相同模态下的样本特征比对参数。

其中，样本特征比对参数用于表示设计图样本特征和代码样本特征之间的特征比对结果。具体地，服务器可以通过待训练的组件识别模型，将相同模态下的设计图样本特征和代码样本特征进行比对，得到相同模态下的样本特征比对参数。

步骤608，通过待训练的组件识别模型，基于由至少两种模态下各自的样本特征比对参数融合获得的多模态融合特征，确定页面设计图样本与组件代码样本之间的样本组件相似参数。

其中，样本组件相似参数用于表征页面设计图样本中包括的组件与组件代码样本之间组件相似程度。具体地，服务器可以通过待训练的组件识别模型，将至少两种模态下各自的样本特征比对参数进行融合，得到多模态融合特征，并基于多模态融合特征确定页面设计图样本与组件代码样本之间的样本组件相似参数。

步骤610，基于样本组件相似参数针对待训练的组件识别模型进行更新后继续训练，直至训练结束，获得训练完成的组件识别模型。

具体地，服务器可以基于样本组件相似参数对待训练的组件识别模型进行更新，如服务器可以基于样本组件相似参数确定组件识别损失，并根据组件识别损失对待训练的组件识别模型的模型参数进行更新，获得更新后的组件识别模型。服务器可以通过下一个样本对更新后的组件识别模型继续训练，直至训练结束，获得训练完成的组件识别模型。例如，在全部训练样本训练完成时，认为训练结束；又如可以在损失函数达到收敛条件时结束训练，还可以在组件识别准确率达到预设需求时，认为训练结束，获得训练完成的组件识别模型。训练完成的组件识别模型可以针对输入的页面设计图文件进行组件识别，以从组件库中识别出与输入的页面设计图文件相匹配的组件。

本实施例中，服务器基于页面设计图样本和组件代码样本训练组件识别模型，以通过组件识别模型针对页面设计图文件进行组件识别处理，可以有效提高组件识别的处理效率和识别准确率。

在一个实施例中，组件识别方法还包括：确定与页面设计图文件相匹配的组件所关联的页面代码文件；将页面代码文件与页面设计图文件进行关联；页面代码文件，用于对页面设计图文件中的组件进行代码化描述。

其中，页面代码文件是对页面设计图文件中的组件进行代码化描述的文件，即可以利用代码对页面设计图文件中涉及的组件设计进行准确描述，有利于基于代码层面针对页面设计图文件中涉及的组件进行管理和优化。

具体地，服务器可以确定与页面设计图文件相匹配的组件所关联的页面代码文件，如服务器可以查询与页面设计图文件相匹配的组件的HTML和CSS等页面代码文件。服务器可以将页面代码文件与页面设计图文件进行关联，从而可以通过页面代码文件对页面设计图文件中的组件进行代码化描述。

本实施例中，服务器确定与页面设计图文件相匹配的组件所关联的页面代码文件，并将页面代码文件与页面设计图文件进行关联，以通过页面代码文件对页面设计图文件中的组件进行代码化描述，能够通过代码文件针对页面设计图文件进行组件的管理和优化。

本申请还提供一种应用场景，该应用场景应用上述的组件识别方法。具体地，该组件识别方法在该应用场景的应用如下：

随着互联网的快速发展，越来越多的企业和组织开始利用活动网页来推广产品、服务和品牌，吸引用户关注和参与。活动网页通常包含各种各样的组件，如按钮、背景图、抽奖、翻牌子等，以增加用户的互动性和趣味性。然而，由于活动网页的复杂性和多样性，如何有效地管理和优化这些组件，成为了网站管理员面临的一个重要问题。

目前，已经有一些相关的技术和方法被提出，用于识别静态模板设计稿PSD文件中的各个组件，以便快速将其转换为静态网页代码HTML和CSS。然而，这些现有技术方案存在一些问题和不足之处，如手动编写规则和模板等。因此，需要一种更加准确、高效、智能的PSD文件组件识别方法来解决这些问题。

具体而言，在活动网页模板设计稿PSD的组件识别中，通常可以使用以下算法和技术，包括：HTML解析、CSS解析、图像处理算法等，其中，HTML解析和CSS解析算法可以归类为代码识别算法。其中，HTML解析可以通过解析HTML标记语言，可以提取出页面中的各种组件信息，如文本框、按钮、图片等。而CSS解析则可以通过解析CSS样式表，获取页面中各个组件的样式信息，如颜色、大小、位置等。图像处理算法则是，通过深度学习的图片分类算法，计算出组件属于每个类别的概率。文本分析算法则是，通过识别网页模板中的文本，经过自然语言处理算法如transformers等深度学习算法，计算出组件所属的类别。

尽管现有技术方案可以用于活动网页模板设计稿PSD中的组件识别，但是这些方法仍然存在一些缺点和不足之处。首先，HTML解析和CSS解析算法需要手动编写规则和模板，来识别网页中的各个组件，这样会导致识别的准确性和效率受到限制。其次，使用单一的图像分类算法，无法从组件布局的角度判断组件类型。

基于此，本实施例提供了一种更加准确、高效、智能的多模态静态模板设计稿组件识别方法，分析网页模板中的文本、图片、布局等元素，来解决这些问题。本实施例提供了基于多模态机器学习的PSD文件组件识别方法，该方法利用机器学习技术，如卷积神经网络、Transformer等，对多种模态的数据，如文本、图像等进行分析，以实现对PSD文件中各个组件的识别。通过该多模态PSD文件组件识别方法，运用了端到端的多模态组件识别网络，可以帮助网站管理员更好地管理和优化活动网页，提高用户体验和参与度。同时，该方法还可以应用于广告投放、数据分析等领域，具有广泛的应用前景。

具体来说，本实施例提供的多模态静态模板设计稿组件识别方法，可以同时处理文本、图片、布局等多种模态的数据，从而更全面、准确地识别网页中的各个组件。通过将多种模态的数据进行融合和分析，可以提高识别的准确性和鲁棒性。而且，本实施例提供多模态静态模板设计稿组件识别方法，采用了基于深度学习的模型训练方法，如卷积神经网络（CNN）、Transformer等，来训练模型和进行预测，通过大量的训练数据和计算资源，可以提高模型的准确性和泛化能力。此外，本实施例提供的多模态静态模板设计稿组件识别方法，采用了基于组件布局的特征提取方法，来判断组件的类型，通过分析组件的位置、大小、相对位置等信息，提出了IOU（Intersection over Union，重叠度）算法，该算法可以更好地计算两个组件之间的布局相似度，从而提高识别的准确性和鲁棒性。IOU算法是一种常用的目标检测算法，可以计算两个区域的重叠度，从而判断它们是否属于同一类别。

如图7所示，相比于传统方法手动编写规则和模板的组件识别处理方法，本实施例提供的组件识别方法基于深度学习的模型训练，提出了端到端的多模态组件识别网络，可以提高组件识别的处理效率。相比于传统单一的图像、文本分类算法无法从组件布局的角度判断组件类型的组件识别处理方法，本实施例提供的组件识别方法提出了多模态组件识别算法，融合图片、文本、布局等信息进行多模态数据处理，可以进行全面的组件识别，提高了组件识别准确性。相比于传统静态模板网页布局难以描述，且难以计算两个模板的相似度的组件识别处理方法，本实施例提供的组件识别方法基于组件布局的特征提取，用矩形集合描述网页布局，剔除了基于重叠度（IOU）算法的布局相似度计算方法，可以准确确定布局相似度，从而提高组件识别准确性。

具体地，本实施例提供的组件识别方法包括模型训练和组件识别推断的处理。首先，进行数据源获取。本实施例的多模态静态模板设计稿组件识别方法需要大量的数据来进行模型训练和测试。因此，需要获取大量的数据源，数据源包括各种类型的网页模板设计稿，如游戏活动网页模板设计稿等。同时，数据源还可以包括各种类型的组件的HTML和CSS代码，如文本框、按钮、图片等。数据通过整理历史的活动模板获取，以及从公开网站中获取。

其次，训练集构建和样本处理。本实施例的多模态静态模板组件识别方法需要构建训练集和测试集，来进行模型训练和测试。在构建训练集时，需要从数据源中随机选择一部分数据作为训练集，另一部分数据作为测试集。在本实施例中，令训练集数据量：测试集数据量= 3：1。同时，需要对数据进行预处理和样本处理，以便于模型的训练和测试。

预处理包括数据清洗、数据归一化。数据清洗是指去除一些质量比较低的设计稿PSD和组件HTML和CSS代码。另外，还对HTML和CSS代码进行了数据清洗，清除了一些与组件识别无关的代码。而数据归一化是指，对渲染结果大小不一的组件，进行了归一化操作，统一了组件的长宽等参数。

样本处理包括数据增强、样本平衡等步骤。数据增强是指通过旋转、缩放等方式，生成更多的样本，以增加训练数据的多样性和数量，这个操作主要是针对组件库中的组件。样本平衡是指通过调整样本的数量和比例，使得不同的组件的样本数量相等或接近，以避免模型对某些组件类别的偏好。

通过训练集构建和样本处理，可以得到高质量、多样性、平衡的训练集和测试集，为模型的训练和测试提供了可靠的数据基础。

进一步地，进行多模态的静态模板组件识别处理。本实施例的多模态静态模板组件识别方法采用了融合图像特征、文本特征、布局相似度、布局矩形相似度计算策略的流程，来实现对网页模板中的各个组件的识别。如图8所示，对于静态模块设计稿文件，在图像、文本和布局的模态下，分别通过卷积神经网络提取得到图像向量，通过文本特征提取网络提取得到文本向量，通过布局分析得到布局矩形集合，并进一步构建矩形框作图。对于组件库中组件，基于模拟组件渲染工具进行渲染后，在图像、文本和布局的模态下，分别通过卷积神经网络提取得到图像向量，通过文本特征提取网络提取得到文本向量，通过组件布局分析得到布局矩形集合，并进一步构建矩形框作图。具体流程如下：

（1）对于图像特征。使用卷积神经网络（CNN）对PSD文件中的图像（多个图层看成一张图片）进行特征提取，得到图像特征向量。本实施例使用DenseNet（Densely ConnectedConvolutional Networks，密集连接的卷积网络）（DenseNet-121）作为基础，并对其进行微调，以适用PSD文件中的组件识别任务。具体来说，使用PSD文件中各个组件的图像数据（含有组件类别标签）对DenseNet模型进行重新训练，以提高其对PSD文件中组件的识别能力。本实施例记PSD设计稿和组件中的图像向量为和。

（2）对于文本特征提取，使用自然语言处理技术对PSD文件中的文本进行特征提取，得到文本特征向量。在本实施例中，使用预训练的Bert模型作为文本特征提取的模型，然后对其进行微调，以适应PSD文件中的文本数据。具体来说，使用PSD文件中的文本数据对Bert模型进行重新训练，以提高其对PSD文件中文本的识别能力。本实施例记PSD设计稿和组件中的文本向量为和。

（3）布局特征转化成布局向量和相似度计算策略。PSD和组件布局是一个抽象的概念，难以描述。本实施例使用了矩形集的方法去描述PSD和组件的布局。如图9所示，将组件库中的组件，如游戏应用活动头图转化成了四个矩形组成的集合，分别为两个悬浮图片矩形（U3和U4）以及两个按钮图片矩形（U1和U2）。同理，用同样的方法去描述PSD文件的模板布局。设定了IOU策略去计算组件相似度，计算公式如下：

，其中，Un是第n各矩形，是布局相似度。

除了组件相似度策略之外，还使用卷积神经网络算法，去识别矩形集的特征。具体将组件和PSD设计稿的矩形布局以上述的方法转成矩形集之后，将矩形集绘图成矩形组成的图片，然后使用神经网络算法识别这些图片，抽取这些图片中抽象的几何特征，将组件/设计稿布局转为布局向量，本实施例记PSD设计稿和组件的布局向量分别为和。其中神经网络使用了DenseNet（DenseNet-121）作为基础，以抽象的几何图形作为训练集进行微调，提高了原模型的效果。

（4）对于特征融合。在本实施例的多模态静态模板组件识别方法中，为了提高识别准确性，采用了融合特征向量的方法。具体来说，将图像特征向量、文本特征向量、布局向量和布局矩形匹配度融合为一个特征向量，以实现对组件的准确识别。假设希望将图像特征（，）、文本特征（，）、布局特征向量（，）以及IOU策略计算得到的布局相似度。则最终的输出结果可以表示为：

，其中，使用向量的表示两个向量的相似度，即图像、文本和布局的特征向量。其中的取值范围为[0,1]。表示该PSD设计稿的组件和组件库中的组件的相似度。

具体地，如图10所示，以斜线填充的各个特征向量通过组件HTML解析得到，而未填充的各个特征向量通过PSD文件解析得到。对于图像向量，经过归一化层进行归一化处理后计算得到图像相似向量；对于文本向量，经过归一化层进行归一化处理后计算得到文本相似向量；对于布局向量，经过归一化层进行归一化处理后计算得到矩形相似向量；此外，根据矩形框作图按照IOU重叠度策略计算得到布局相似度。将图像相似向量、文本相似向量、矩形相似向量和布局相似度输入到全连接层和平展层（Concat&flatten）中进行拼接，并以此输入多层感知机（MLP）、分类器（Softmax）中进行处理，最后输出表征组件相似度的组件识别结果（Output）。

最后，在组件识别处理中，对于设计稿PSD中的每一个部分，都将其识别为组件库中的最相似的组件。对于PSD设计稿中的组件C，在多模态的静态模板组件识别流程中计算出组件列表L，相似度从高到低排序。

在一个具体应用中，如图11所示，将PSD设计稿中的各个部分识别成“跑马灯模块”、“头图模块”、“登录模块”和“买赠模块”，即相似组件列表L中最相似的组件，并进一步确定组件的布局。其中，“跑马灯模块”中包括两个矩形框，“头图模块”中包括一个矩形框，“登录模块”中包括两个矩形框，而“买赠模块”中包括四个矩形框。

应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的组件识别方法的组件识别装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个组件识别装置实施例中的具体限定可以参见上文中对于组件识别方法的限定，在此不再赘述。

在一个实施例中，如图12所示，提供了一种组件识别装置1200，包括：设计图模态特征获得模块1202、比对模态特征获得模块1204、特征比对参数获得模块1206、组件相似参数确定模块1208和匹配组件确定模块1210，其中：

设计图模态特征获得模块1202，用于确定待识别的页面设计图文件，从页面设计图文件中分别提取至少两种模态下各自的设计图模态特征；

比对模态特征获得模块1204，用于获取组件库中比对组件在至少两种模态下各自的比对模态特征；

特征比对参数获得模块1206，用于根据至少两种模态中相同模态下的设计图模态特征和比对模态特征，确定相同模态下的特征比对参数；

组件相似参数确定模块1208，用于基于由至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定页面设计图文件与比对组件之间的组件相似参数；

匹配组件确定模块1210，用于根据页面设计图文件与组件库中各组件之间各自的组件相似参数，从组件库中识别出与页面设计图文件相匹配的组件。

在一个实施例中，至少两种模态包括文本模态、图像模态和组件布局模态；设计图模态特征获得模块1202，还用于按照文本模态和图像模态，从页面设计图文件中分别提取得到设计图文本特征和设计图图像特征；针对页面设计图文件中包括的组件进行组件图形转换，得到包括至少一个组件图形的设计图图形集；基于设计图图形集得到在组件布局模态下的设计图组件布局特征。

在一个实施例中，设计图模态特征获得模块1202，还用于根据设计图图形集中包括的至少一个封闭图形，得到设计图图形分布特征；根据设计图图形集中包括的至少一个封闭图形生成映射图像；针对映射图像进行特征提取，得到映射图分布特征；根据设计图图形分布特征和映射图分布特征，得到在组件布局模态下的设计图组件布局特征。

在一个实施例中，特征比对参数获得模块1206，还用于根据设计图文本特征和比对组件在文本模态下的比对文本特征，得到文本模态下的文本特征比对参数；根据设计图图像特征和比对组件在图像模态下的比对图像特征，得到图像模态下的图像特征比对参数；根据映射图分布特征和比对组件在组件布局模态下的组件映射图分布特征，得到组件布局模态下的映射图特征比对参数；根据设计图图形分布特征和比对组件在组件布局模态下的比对图形分布特征，得到组件布局模态下的图形重叠参数。

在一个实施例中，组件相似参数确定模块1208，还用于将至少两种模态下各自的特征比对参数进行融合，得到多模态融合特征；针对多模态融合特征进行至少一次的特征提取，得到预测特征；基于预测特征进行组件相似预测，得到页面设计图文件与比对组件之间的组件相似参数。

在一个实施例中，特征比对参数获得模块1206，还用于对于至少两种模态中的目标模态，确定在目标模态下的设计图模态特征和比对模态特征；针对在目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在目标模态下的特征比对参数。

在一个实施例中，特征比对参数获得模块1206，还用于将在目标模态下的设计图模态特征和比对模态特征分别进行归一化映射，得到归一化后的设计图模态特征和归一化后的比对模态特征；将归一化后的设计图模态特征和归一化后的比对模态特征进行融合，获得模态相似特征；根据模态相似特征得到在目标模态下的特征比对参数。

在一个实施例中，特征比对参数获得模块1206，还用于确定在目标模态下的设计图模态特征和比对模态特征之间的特征相似度；根据特征相似度得到在目标模态下的特征比对参数。

在一个实施例中，匹配组件确定模块1210，还用于获取页面设计图文件与组件库中各组件之间各自的组件相似参数；基于组件匹配条件和各组件相似参数确定匹配组件相似参数；将组件库中匹配组件相似参数关联的组件，确定为与页面设计图文件相匹配的组件。

在一个实施例中，比对模态特征获得模块1204，还用于确定组件库中的比对组件，并针对比对组件分别提取得到在至少两种模态下各自的比对模态特征。

在一个实施例中，比对模态特征获得模块1204，还用于确定组件库中的比对组件，并从组件模态特征库中，查询获得比对组件在至少两种模态下各自的比对模态特征。

在一个实施例中，还包括模型训练模块，用于获取页面设计图样本，并通过待训练的组件识别模型对页面设计图样本进行至少两种模态的特征提取，得到在至少两种模态下各自的设计图样本特征；获取组件代码样本，并通过待训练的组件识别模型对组件代码样本进行至少两种模态的特征提取，得到在至少两种模态下各自的代码样本特征；通过待训练的组件识别模型，根据至少两种模态中相同模态下的设计图样本特征和代码样本特征，确定相同模态下的样本特征比对参数；通过待训练的组件识别模型，基于由至少两种模态下各自的样本特征比对参数融合获得的多模态融合特征，确定页面设计图样本与组件代码样本之间的样本组件相似参数；基于样本组件相似参数针对待训练的组件识别模型进行更新后继续训练，直至训练结束，获得训练完成的组件识别模型。

在一个实施例中，还包括代码文件关联模块，用于确定与页面设计图文件相匹配的组件所关联的页面代码文件；将页面代码文件与页面设计图文件进行关联；页面代码文件，用于对页面设计图文件中的组件进行代码化描述。

上述组件识别装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器或终端，其内部结构图可以如图13所示。该计算机设备包括处理器、存储器、输入/输出接口(Input/Output，简称I/O）和通信接口。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储组件识别涉及的数据。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种组件识别方法。

本领域技术人员可以理解，图13中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。

需要说明的是，本申请所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-OnlyMemory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（ReRAM）、磁变存储器（Magnetoresistive Random Access Memory，MRAM）、铁电存储器（Ferroelectric Random Access Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random AccessMemory，SRAM）或动态随机存取存储器（Dynamic RandomAccess Memory，DRAM）等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (27)

1.一种组件识别方法，其特征在于，所述方法包括：

确定待识别的、图像格式的页面设计图文件，从所述页面设计图文件中分别提取至少两种模态下各自的设计图模态特征；所述至少两种模态包括文本模态、图像模态和组件布局模态；

获取组件库中比对组件在所述至少两种模态下各自的比对模态特征；

将所述至少两种模态中相同模态下的设计图模态特征和比对模态特征进行特征比对，确定所述相同模态下的特征比对参数；每种模态与一个特征比对参数相对应；

基于由所述至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定所述页面设计图文件与所述比对组件之间的组件相似参数；

根据所述页面设计图文件与所述组件库中各组件之间各自的组件相似参数，从所述组件库中识别出与所述页面设计图文件相匹配的组件。

2.根据权利要求1所述的方法，其特征在于，所述从所述页面设计图文件中分别提取至少两种模态下各自的设计图模态特征，包括：

按照所述文本模态和所述图像模态，从所述页面设计图文件中分别提取得到设计图文本特征和设计图图像特征；

针对所述页面设计图文件中包括的组件进行组件图形转换，得到包括至少一个组件图形的设计图图形集；

基于所述设计图图形集得到在所述组件布局模态下的设计图组件布局特征。

3.根据权利要求2所述的方法，其特征在于，所述基于所述设计图图形集得到在所述组件布局模态下的设计图组件布局特征，包括：

根据所述设计图图形集中包括的至少一个封闭图形，得到设计图图形分布特征；

根据所述设计图图形集中包括的至少一个封闭图形生成映射图像；

针对所述映射图像进行特征提取，得到映射图分布特征；

根据所述设计图图形分布特征和所述映射图分布特征，得到在所述组件布局模态下的设计图组件布局特征。

4.根据权利要求3所述的方法，其特征在于，所述将所述至少两种模态中相同模态下的设计图模态特征和比对模态特征进行特征比对，确定所述相同模态下的特征比对参数，包括：

将所述设计图文本特征和所述比对组件在所述文本模态下的比对文本特征进行特征比对，得到所述文本模态下的文本特征比对参数；

将所述设计图图像特征和所述比对组件在所述图像模态下的比对图像特征进行特征比对，得到所述图像模态下的图像特征比对参数；

将所述映射图分布特征和所述比对组件在所述组件布局模态下的组件映射图分布特征进行特征比对，得到所述组件布局模态下的映射图特征比对参数；

将所述设计图图形分布特征和所述比对组件在所述组件布局模态下的比对图形分布特征进行特征比对，得到所述组件布局模态下的图形重叠参数。

5.根据权利要求1所述的方法，其特征在于，所述基于由所述至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定所述页面设计图文件与所述比对组件之间的组件相似参数，包括：

将所述至少两种模态下各自的特征比对参数进行融合，得到多模态融合特征；

针对所述多模态融合特征进行至少一次的特征提取，得到预测特征；

基于所述预测特征进行组件相似预测，得到所述页面设计图文件与所述比对组件之间的组件相似参数。

6.根据权利要求1所述的方法，其特征在于，所述将所述至少两种模态中相同模态下的设计图模态特征和比对模态特征进行特征比对，确定所述相同模态下的特征比对参数，包括：

对于所述至少两种模态中的目标模态，确定在所述目标模态下的设计图模态特征和比对模态特征；

针对在所述目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在所述目标模态下的特征比对参数。

7.根据权利要求6所述的方法，其特征在于，所述针对在所述目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在所述目标模态下的特征比对参数，包括：

将在所述目标模态下的设计图模态特征和比对模态特征分别进行归一化映射，得到归一化后的设计图模态特征和归一化后的比对模态特征；

将所述归一化后的设计图模态特征和所述归一化后的比对模态特征进行融合，获得模态相似特征；

根据所述模态相似特征得到在所述目标模态下的特征比对参数。

8.根据权利要求6所述的方法，其特征在于，所述针对在所述目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在所述目标模态下的特征比对参数，包括：

确定在所述目标模态下的设计图模态特征和比对模态特征之间的特征相似度；

根据所述特征相似度得到在所述目标模态下的特征比对参数。

9.根据权利要求1所述的方法，其特征在于，所述根据所述页面设计图文件与所述组件库中各组件之间各自的组件相似参数，从所述组件库中识别出与所述页面设计图文件相匹配的组件，包括：

获取所述页面设计图文件与所述组件库中各组件之间各自的组件相似参数；

基于组件匹配条件和各所述组件相似参数确定匹配组件相似参数；

将所述组件库中所述匹配组件相似参数关联的组件，确定为与所述页面设计图文件相匹配的组件。

10.根据权利要求1所述的方法，其特征在于，所述获取组件库中比对组件在所述至少两种模态下各自的比对模态特征，包括以下至少一项：

确定组件库中的比对组件，并针对所述比对组件分别提取得到在所述至少两种模态下各自的比对模态特征；

确定组件库中的比对组件，并从组件模态特征库中，查询获得所述比对组件在所述至少两种模态下各自的比对模态特征。

11.根据权利要求1至10任意一项所述的方法，其特征在于，所述方法基于组件识别模型实现；所述组件识别模型的训练步骤包括：

获取页面设计图样本，并通过待训练的组件识别模型对所述页面设计图样本进行至少两种模态的特征提取，得到在所述至少两种模态下各自的设计图样本特征；

获取组件代码样本，并通过所述待训练的组件识别模型对所述组件代码样本进行所述至少两种模态的特征提取，得到在所述至少两种模态下各自的代码样本特征；

通过所述待训练的组件识别模型，将所述至少两种模态中相同模态下的设计图样本特征和代码样本特征进行特征比对，确定所述相同模态下的样本特征比对参数；

通过所述待训练的组件识别模型，基于由所述至少两种模态下各自的样本特征比对参数融合获得的多模态融合特征，确定所述页面设计图样本与所述组件代码样本之间的样本组件相似参数；

基于所述样本组件相似参数针对所述待训练的组件识别模型进行更新后继续训练，直至训练结束，获得训练完成的组件识别模型。

12.根据权利要求1至10任意一项所述的方法，其特征在于，所述方法还包括：

确定与所述页面设计图文件相匹配的组件所关联的页面代码文件；

将所述页面代码文件与所述页面设计图文件进行关联；所述页面代码文件，用于对所述页面设计图文件中的组件进行代码化描述。

13.一种组件识别装置，其特征在于，所述装置包括：

设计图模态特征获得模块，用于确定待识别的、图像格式的页面设计图文件，从所述页面设计图文件中分别提取至少两种模态下各自的设计图模态特征；所述至少两种模态包括文本模态、图像模态和组件布局模态；

比对模态特征获得模块，用于获取组件库中比对组件在所述至少两种模态下各自的比对模态特征；

特征比对参数获得模块，用于将所述至少两种模态中相同模态下的设计图模态特征和比对模态特征进行特征比对，确定所述相同模态下的特征比对参数；每种模态与一个特征比对参数相对应；

组件相似参数确定模块，用于基于由所述至少两种模态下各自的特征比对参数融合获得的多模态融合特征，确定所述页面设计图文件与所述比对组件之间的组件相似参数；

匹配组件确定模块，用于根据所述页面设计图文件与所述组件库中各组件之间各自的组件相似参数，从所述组件库中识别出与所述页面设计图文件相匹配的组件。

14.根据权利要求13所述的装置，其特征在于，

所述设计图模态特征获得模块，还用于按照所述文本模态和所述图像模态，从所述页面设计图文件中分别提取得到设计图文本特征和设计图图像特征；针对所述页面设计图文件中包括的组件进行组件图形转换，得到包括至少一个组件图形的设计图图形集；基于所述设计图图形集得到在所述组件布局模态下的设计图组件布局特征。

15.根据权利要求14所述的装置，其特征在于，

所述设计图模态特征获得模块，还用于根据所述设计图图形集中包括的至少一个封闭图形，得到设计图图形分布特征；根据所述设计图图形集中包括的至少一个封闭图形生成映射图像；针对所述映射图像进行特征提取，得到映射图分布特征；根据所述设计图图形分布特征和所述映射图分布特征，得到在所述组件布局模态下的设计图组件布局特征。

16.根据权利要求15所述的装置，其特征在于，

所述特征比对参数获得模块，还用于将所述设计图文本特征和所述比对组件在所述文本模态下的比对文本特征进行特征比对，得到所述文本模态下的文本特征比对参数；将所述设计图图像特征和所述比对组件在所述图像模态下的比对图像特征进行特征比对，得到所述图像模态下的图像特征比对参数；将所述映射图分布特征和所述比对组件在所述组件布局模态下的组件映射图分布特征进行特征比对，得到所述组件布局模态下的映射图特征比对参数；将所述设计图图形分布特征和所述比对组件在所述组件布局模态下的比对图形分布特征进行特征比对，得到所述组件布局模态下的图形重叠参数。

17.根据权利要求13所述的装置，其特征在于，

所述组件相似参数确定模块，还用于将所述至少两种模态下各自的特征比对参数进行融合，得到多模态融合特征；针对所述多模态融合特征进行至少一次的特征提取，得到预测特征；基于所述预测特征进行组件相似预测，得到所述页面设计图文件与所述比对组件之间的组件相似参数。

18.根据权利要求13所述的装置，其特征在于，

所述特征比对参数获得模块，还用于对于所述至少两种模态中的目标模态，确定在所述目标模态下的设计图模态特征和比对模态特征；针对在所述目标模态下的设计图模态特征和比对模态特征进行特征相似性分析，获得在所述目标模态下的特征比对参数。

19.根据权利要求18所述的装置，其特征在于，

所述特征比对参数获得模块，还用于将在所述目标模态下的设计图模态特征和比对模态特征分别进行归一化映射，得到归一化后的设计图模态特征和归一化后的比对模态特征；将所述归一化后的设计图模态特征和所述归一化后的比对模态特征进行融合，获得模态相似特征；根据所述模态相似特征得到在所述目标模态下的特征比对参数。

20.根据权利要求18所述的装置，其特征在于，

所述特征比对参数获得模块，还用于确定在所述目标模态下的设计图模态特征和比对模态特征之间的特征相似度；根据所述特征相似度得到在所述目标模态下的特征比对参数。

21.根据权利要求13所述的装置，其特征在于，

所述匹配组件确定模块，还用于获取所述页面设计图文件与所述组件库中各组件之间各自的组件相似参数；基于组件匹配条件和各所述组件相似参数确定匹配组件相似参数；将所述组件库中所述匹配组件相似参数关联的组件，确定为与所述页面设计图文件相匹配的组件。

22.根据权利要求13所述的装置，其特征在于，

所述比对模态特征获得模块，还用于确定组件库中的比对组件，并针对所述比对组件分别提取得到在所述至少两种模态下各自的比对模态特征。

23.根据权利要求13所述的装置，其特征在于，

所述比对模态特征获得模块，还用于确定组件库中的比对组件，并从组件模态特征库中，查询获得所述比对组件在所述至少两种模态下各自的比对模态特征。

24.根据权利要求13至23任意一项所述的装置，其特征在于，还包括：

模型训练模块，用于获取页面设计图样本，并通过待训练的组件识别模型对所述页面设计图样本进行至少两种模态的特征提取，得到在所述至少两种模态下各自的设计图样本特征；获取组件代码样本，并通过所述待训练的组件识别模型对所述组件代码样本进行所述至少两种模态的特征提取，得到在所述至少两种模态下各自的代码样本特征；通过所述待训练的组件识别模型，将所述至少两种模态中相同模态下的设计图样本特征和代码样本特征进行特征比对，确定所述相同模态下的样本特征比对参数；通过所述待训练的组件识别模型，基于由所述至少两种模态下各自的样本特征比对参数融合获得的多模态融合特征，确定所述页面设计图样本与所述组件代码样本之间的样本组件相似参数；基于所述样本组件相似参数针对所述待训练的组件识别模型进行更新后继续训练，直至训练结束，获得训练完成的组件识别模型。

25.根据权利要求13至23任意一项所述的装置，其特征在于，还包括：

代码文件关联模块，用于确定与所述页面设计图文件相匹配的组件所关联的页面代码文件；将所述页面代码文件与所述页面设计图文件进行关联；所述页面代码文件，用于对所述页面设计图文件中的组件进行代码化描述。

26.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至12中任一项所述的方法的步骤。

27.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至12中任一项所述的方法的步骤。