CN115080038A - 图层处理方法、模型生成方法及设备 - Google Patents

Abstract

本申请实施例提供一种图层处理方法、模型生成方法及设备。其中，该方法包括：获取界面设计稿对应的目标图片；确定所述目标图片中符合合并要求的至少一个目标区域；基于所述至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层，其中，所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。本申请实施例提供的技术方案提高了图层查找效率和准确性。

Description

图层处理方法、模型生成方法及设备

技术领域

本申请实施例涉及图像处理技术领域，尤其涉及一种图层处理方法、模型生成方法及设备。

背景技术

界面设计稿是实现诸如用户界面(英文：User Interface，简称：UI)等图形界面的原型，前端开发的主要工作之一即是通过界面设计稿来实现前端代码。为了提高开发效率，一些研究提出采用智能算法，基于界面设计稿自动生成前端代码，以此提高代码生成效率。

但是，界面设计稿中存在一些特殊图层，例如零碎图层等，这些零碎图层会导致生成的代码质量不高，采用对零碎图层进行合并处理的方式，可以提高代码生成质量。

因此，如何高效准确的确定界面设计稿中需要进行合并处理的图层即成为本领域技术人员需要解决的技术问题。

发明内容

本申请实施例提供一种图层处理方法、模型生成方法及设备，用以解决现有技术中无法高效准确查找图层的技术问题。

第一方面，本申请实施例中提供了一种图层处理方法，包括：

获取界面设计稿对应的目标图片；

确定所述目标图片中符合合并要求的至少一个目标区域；

基于所述至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层，其中，所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。

第二方面，本申请实施例中提供了一种模型生成方法，包括：

获取第一样本图片以及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息；所述至少一个样本区域分别对应多个目标图层；

将所述第一样本图片作为输入数据以及将所述至少一个样本区域的空间信息作为训练标签，训练检测模型；

其中，所述检测模型用于基于界面设计稿对应的目标图片，确定所述目标图片中符合所述合并要求的至少一个目标区域；所述至少一个目标区域用于基于分别与不同图层的相交信息，识别各自对应的多个目标图层；所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。

第三方面，本申请实施例中提供了一种图层处理装置，包括：

获取模块，用于获取界面设计稿对应的目标图片；

确定模块，用于确定所述目标图片中符合合并要求的至少一个目标区域；

识别模块，用于基于所述至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层，其中，所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。

第四方面，本申请实施例中提供了一种模型生成装置，包括：

获取模块，用于获取第一样本图片以及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息；所述至少一个样本区域分别对应多个目标图层；

训练模块，用于将所述第一样本图片作为输入数据以及将所述至少一个样本区域的空间信息作为训练标签，训练检测模型；

其中，所述检测模型用于基于界面设计稿对应的目标图片，确定所述目标图片中符合所述合并要求的至少一个目标区域；所述至少一个目标区域用于基于分别与不同图层的相交信息，识别各自对应的多个目标图层；所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。

第五方面，本申请实施例中提供了一种计算设备，包括处理组件以及存储组件；所述存储组件存储一个或多个计算机指令；所述一个或多个计算机指令用以被所述处理组件调用并执行上述第一方面所述的图层处理方法或者第二方面所述的模型生成方法。

第六方面，本申请实施例中提供了一种计算机存储介质，存储有计算机程序，所述计算机程序被计算机执行时实现如上述第一方面所述的图层处理方法或者第二方面所述的模型生成方法。

本申请实施例中，针对界面设计稿转换获得的目标图片，确定目标图片中符合合并要求的至少一个目标区域；基于至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层；目标区域对应的多个目标图层用以进行合并处理以作为目标区域对应的一个组件。本申请实施例基于视觉信息，检测界面设计稿中需要进行合并处理的目标区域，并根据相交信息获得目标区域对应多个目标图层，提高了图层查找效率和准确性。

本申请的这些方面或其他方面在以下实施例的描述中会更加简明易懂。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了本申请实施例的技术方案的应用于其中的一种系统架构图；

图2示出了本申请实施例提供的一种图层处理方法一个实施例的流程图；

图3示出了本申请实施例提供的一种模型生成方法一个实施例的流程图；

图4示出了本申请实施例提供的一种图层处理方法又一个实施例的流程图；

图5示出了本申请实施例的技术方案在一个实际应用中的场景交互示意图；

图6示出了本申请实施例提的技术方案在一个实际应用中的图层处理过程示意图；

图7示出了本申请提供的一种图层处理装置一个实施例的结构示意图；

图8示出了本申请提供的一种模型生成装置一个实施例的结构示意图；

图9示出了本申请提供的一种计算设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

在本申请的说明书和权利要求书及上述附图中的描述的一些流程中，包含了按照特定顺序出现的多个操作，但是应该清楚了解，这些操作可以不按照其在本文中出现的顺序来执行或并行执行，操作的序号如101、102等，仅仅是用于区分开各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的消息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。

本申请实施例的技术方案可以应用于存在图层合并需求的应用场景中。如基于界面设计稿，进行前端代码的智能开发场景中。

以用户界面((英文：User Interface，简称：UI))的前端代码开发场景为例，在设计人员进行实际生成设计过程中，为了达到想要的视觉效果，设计人员通常会使用多个零碎图层来表达一个UI组件，该组件可以是用户界面中可以独立表达视觉效果的组件，比如图标、氛围图、背景图或者可以感知用户操作的控件等。发明人在实现本申请的过程中发现，界面设计稿的这种设计方式会导致代码冗余，影响最终生成代码的质量，为了提高生成代码的指令，就需要采用更高设计标准来设计界面设计稿，然而这必定会增加设计人员的设计成本，因此，可以采用将表达同一个组件的零碎图层进行合并处理的方式，进行代码开发时即可以作为一个组件进行编码，以此来提高代码生成质量。

那么如何查找表达同一个组件的零碎图层即称为需要解决的技术问题，发明人想到，可以采用人工辅助方式，从界面设计稿找到需要合并处理的多个图层，再对其进行合并，但是该方式需要依赖人工判断和筛选，成本较高且准确性也不高。

因此进而为了提高图层查找效率和准确性，发明人经过一系列研究，提出了本申请的技术方案，在本申请实施例中，获取界面设计稿对应的目标图片；确定所述目标图片中符合合并要求的至少一个目标区域；基于所述至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层，其中，所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。本申请实施例提供的技术方案基于视觉信息，利用检测模型可以检测界面设计稿中需要进行合并处理目标区域，并根据相交信息获得目标区域对应多个目标图层，提高图层查找效率和准确性。目标区域对应的多个目标图层在智能代码开发过程中可以合并处理，转换为同一个组件进行处理，从而可以提高代码生成质量。

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1示出了一种本申请实施例的技术方案的可以应用的系统架构图，该系统架构可以包括设计端101以及处理端102。

设计端101可以提供设计界面，并可以根据设计人员的设计操作，而生成对应的界面设计稿。

其中，设计端101与处理端102之间可以通过网络建立连接。网络为设计端101与处理端102之间提供了通信链路的介质。网络可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

处理端102可以从设计端101获取界面设计稿，并对界面设计稿按照本申请实施例的技术方案，以检测存在符合合并要求的至少一个目标区域，以及至少一个目标区域分别对应的多个目标图层，每个目标区域对应的多个目标图层即可以进行合并处理。

当然，在本申请的其它实现方式中，设计端101与处理端102之间可以无需建立网络连接。设计端101的界面设计稿可以采用其它方式传输至处理端102，例如可以通过移动存储设备由设计端101转存至处理端102等。

设计端101可以为浏览器、APP(Application，应用程序)、或网页应用如H5(HyperText Markup Language5，超文本标记语言第5版)应用、或轻应用(也被称为小程序，一种轻量级应用程序)或云应用等，设计端101通常部署在电子设备中，需要依赖设备运行或者设备中的某些app而运行等，为了便于理解，图1中设计端以电子设备形式示出。电子设备例如可以具有显示屏并支持信息浏览等，如可以是智能手机，手机电脑，台式电脑，平板中任一种。该电子设备中还可以安装各种其它类应用，例如人机对话类应用、模型训练类应用、文本处理类应用、网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱设计端、社交平台软件等。

设计端101可以泛指多个设计端中的一个，本实施例仅以设计端101来举例说明。本领域技术人员能够知晓，上述设计端的数量可能更多或更少。比如上述设计端仅为几个，或者上述设计端为几十个或几百个，或者更多数量，本公开实施例对设计端的数量和设备类型均不加以限定。

处理端102可以包括提供各种服务的服务器，例如为检测模型提供支持的用于后台训练的服务器，又如对界面设计稿进行图层处理的服务器等。

处理端102可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。服务器也可以是云服务器，或者是带人工智能技术的智能云计算服务器或智能云主机。

此外，该系统架构还可以包括代码生成端103，处理端102处理完成的界面设计稿可以传输至代码生成端103，由代码生成端103编码生成对应的目标代码等。

当然，在本申请的其它实现方式中，也可以由处理端102基于界面设计稿生成对应的目标代码等。

其中，代码生成端103可以包括提供各种服务的服务器，例如提供智能代码生成的服务器等。

需要说明的是，本申请实施例中的提供的图层处理方法、模型生成方法一种由处理端102执行等。

应该理解，图1中各端的数目仅仅是示意性的。根据实际需要，可以具有任意数目。

以下对本申请实施例的技术方案的实现细节进行详细阐述。

图2为本申请实施例提供的一种图层处理方法一个实施例的流程图，该方法可以应用于处理端，可以包括以下几个步骤：

201：获取界面设计稿对应的目标图片。

其中，界面设计稿可以是由设计端基于而设计人员的设计操作而绘制生成，设计端例如可以为矢量绘图应用软件(Sketch)，当然也可以是其它类型的绘图工具，如AdobePhotoshop等。界面设计稿中可能对应至少一个画板，每个画板可以用于绘制界面中的一个页面等，基于界面设计包括中的至少一个画板的画板信息，可以转换为对应的界面图片。例如可以由处理端调用Sketch提供的接口，以将界面设计稿转换为对应的界面图片。

目标图片可以为任一个界面图片或者任一个界面图片进行切割获得的任一个分割图片等，下文会详细进行介绍。

当然，界面设计稿也可以由图形文件构成，目标图片可以是指界面设计稿的任一个图形文件。

202：确定目标图片中符合合并要求的至少一个目标区域。

每个目标区域可以对应一个组件，该组件由多个目标图层编辑获得。目标区域可以是指目标图片中包含该多个目标图层的最小区域。

从目标图片中提取符合合并要求至少一个目标区域可以多种实现方式，例如可以基于待合并区域的图像特征，从目标图片中匹配获得等。当然也可以采用检测模型识别获得。

作为一种可能实现方式，从目标图片中提取符合合并要求的至少一个目标区域可以实现为：可以根据预先配置的待合并区域的图像特征，从目标图片中提取与该待合并区域的图像特征匹配的目标区域。该合并要求即可以包括该先配置的待合并区域的图像特征。

作为另一种可能实现方式，从目标图片中提取符合合并要求的至少一个目标区域可以实现为：利用检测模型确定目标图片中符合合并要求的至少一个目标区域。

其中，该检测模型可以预先利用样本图片及样本图片标注的符合合并要求的至少一个样本区域的空间信息训练得到。

也即也可以利用检测模型从目标图片中提取符合合并要求的目标区域。

一些实施例中，该方法还可以包括：

确定目标图片对应的多个图层进行颜色填充而生成的色块图；其中，不同图层填充的颜色不同；

该确定目标图片中符合合并要求的至少一个目标区域可以包括：

从目标图片及目标图片的色块图中提取图片特征，并基于图片特征识别目标图片中符合合并要求的至少一个目标区域。

其中，从目标图片及目标图片的色块图中提取图片特征有多种可能的实现方式：作为一种可能的实现方式，可以首先将色块图与目标图片进行融合获得融合图片，之后再从融合图片中提取图片特征；

作为另一种可能的实现方式，可以从目标图片中提取第一特征以及从目标图片的色块图中提取第二特征，并将第一特征以及第二特征进行融合，获得图片特征。

其中，可以是将第一特征与第二特征进行累加求和或者加权求和等以进行融合，从而获得图片特征。

其中，特征提取可以利用预先训练得到的特征提取模型或者图像识别算法等实现，当然，也可以由检测模型实现等，本申请对此不进行具体限制。

其中，图像识别算法例如可以是方向梯度直方图特征方法(Histogram ofOriented Gradient,简称HOG)、局部二值模式算法(Local Binary Pattern，简称LBP)或者Haar-like特征算法等等。特征提取模型可以是深度残差网络(如Resnet-50)或者特征金字塔网络(英文：Feature Pyramid Network，简称：FPN)或者二者的组合等。

203：基于至少一个目标区域与不同图层的相交信息，识别至少一个目标区域分别对应的多个目标图层。

其中，相交信息用于表示至少一个目标区域与不同图层的相交程度。

其中，相交信息可以是相交面积和/或图层间距等信息。图层间距即是指图层间的距离。

可以基于至少一个目标区域与不同图层的相交信息，识别至少一个目标区域分别对应的相交信息满足合并条件的多个目标图层。该合并条件例如可以包括相交面积大于面积阈值、和/或图层间距满足距离要求等。

可以理解的是，由上文描述可知，目标区域至少为包含多个目标图层的最小区域。因此，可以基于目标区域与不同图层间的相交面积确定出目标区域对应的多个图层，由于某些组件对应的目标区域比较大，因此，基于目标区域与不同图层间的相交面积确定出目标区域对应的多个图层中可能存在不属于该目标区域的图层，比如，背景组件对应的目标区域的面积比较大，而其对应的多个图层中可能包括文字图层，而文字图层并不属于背景组件，因此，需要滤除该文字图层，由于同属于一个组件的多个图层间的距离均处于预设阈值范围内，因此，可以基于目标区域对应的多个图层间的距离确定出目标区域对应的多个目标图层。

其中，每个目标区域对应多个目标图层，可以作为一组图层组用以进行合并处理。

本实施例中，针对界面设计稿对应的目标图片，可以从中确定目标图片中符合合并要求的至少一个目标区域；之后，基于至少一个目标区域与不同图层的相交信息，识别至少一个目标区域分别对应的多个目标图层；其中，每个区域对应的多个目标图层用以进行合并处理。本申请实施例实现了需要进行合并处理的图层的合并，提高了图层查找效率和准确性，从而也可以提高了图层合并处理的效率，目标区域对应的多个目标图层在智能代码开发过程中可以合并处理，转换为同一个组件进行处理，从而可以提高代码生成质量。

利用检测模型可以基于界面设计稿的视觉信息，自动定位获得需要合并的至少一个目标区域，为了详细描述检测模型的生成过程。如图3所示，为本申请实施例提供的一种模型生成方法一个实施例的流程图，该方法可以包括以下几个步骤：

301：获取第一样本图片以及第一样本图片标注的符合合并要求的至少一个样本区域的空间信息。

其中，至少一个样本区域分别对应多个目标图层，可以是用户所选择的符合合并要求的区域。

其中，目标图层例如可以为零碎图层，即需要进行合并的图层。

第一样本图片的获取方式有多种，作为一种可选方式，第一样本图片可以是由样本设计稿中的任一个画板转换生成的界面图片。因此，该方法还可以包括：将样本设计稿中的至少一个画板转换生成对应的界面图片；将任一个界面图片作为第一样本图片。

其中，样本设计稿可以由多个画板组成，因此，可以将样本设计稿转换成多个界面图片。

作为另一种可选方式，为了加快模型训练的速度，提高模型准确性等，第一样本图片也可以是将界面图片进行分割获得的分割图片，以获得尺寸一致的分割图片，因此，该方法还可以包括：将样本设计稿中的至少一个画板转换生成对应的界面图片；将任一个界面图片按照分割要求进行分割处理，获得至少一个分割图片，以及将任一个分割图片作为第一样本图片。

其中，分割要求例如可以是指基于短边长度进行切分等；也可以包括分割尺寸等，以保证在分割过程中，组件不会被分割开。

此外，为了保证每个样本都是有效样本，从样本设计稿对应的至少一个界面图片中滤除未满足图片要求的界面图片。

比如，滤除不包括目标图层的界面图片，尺寸过小或者过大的图片等等。

此外，将每个界面图片进行分割处理之后，可能会存在内容相似的图片，因此，该方法还可以包括：根据图片相似度，从满足相似要求两个分割图片中删除任一个分割图片。

相似要求可以是相似度超过相似度阈值，其中，该相似度阈值可以根据具体情况灵活设定。

其中，空间信息可以包括位置信息及尺寸信息等。

每个样本区域可以由人工预先在第一样本图片中标注确定，并基于标注位置可以确定每个样本区域的空间信息。

此外，第一样本图片对应的多个图层中可以人工筛选需要进行合并处理至少一组图层组，每一组图层组包括多个目标图层，并为每一组图层组设置合并标识，每一组图层组包括的多个目标图层即对应第一样本图片中的一个样本区域。因此，作为其它可选方式，该方法还可以包括：确定第一样本图片对应的多个图层中设置有合并标识的至少一个图层组；至少一个图层组分别包括多个目标图层；将任一个图层组对应的空间信息作为符合合并要求的一个样本区域的空间信息。也即可以在样本设计稿中预先标注图层组，为其设置合并标识，每个图层组由表达同一个组件的多个目标图层构成。该图层组件所对应的空间信息即可以作为样本区域的空间信息。

302：将第一样本图片作为输入数据以及将至少一个样本区域的空间信息作为训练标签，训练检测模型。

其中，检测模型用于基于界面设计稿对应的目标图片，确定目标图片中符合合并要求的至少一个目标区域；至少一个目标区域用于基于分别与不同图层的相交信息，识别各自对应的多个目标图层；多个目标图层用以进行合并处理以作为目标区域对应的一个组件。

在本实施例中，通过获取第一样本图片以及第一样本图片标注的符合合并要求的至少一个样本区域的空间信息，将第一样本图片作为输入数据以及将至少一个样本区域的空间信息作为训练标签，训练检测模型，从而可以得到训练后的检测模型，以便利用该检测模型确定目标图片中符合合并要求的至少一个目标区域，进而可以基于至少一个目标区域与不同图层的相交信息，确定每个目标区域对应的多个目标图层，以此提高了目图层查找效率和准确性。

一些实施例中，为了丰富样本数量，该方法还可以包括：从任一个界面图片中未设置合并标识的多个图层中删除预定比例数量的图层，以获得扩展图片；将扩展图片作为第一样本图片。或者，将扩展图片按照分割要求进行分割处理获得至少一个分割图片，将任一个分割图片作为第一样本图片。

其中，未设置合并标识的图层为不需要合并的图层，因此，删除一定比例的未设置合并标识的图层不会对该图片进行图层处理的结果产生影响，且能生成扩展图片，丰富了样本数量。将样本图片按照分割要求进行分割处理获得至少一个分割图片不仅能丰富样本数量，对于一些占用处理能力比较大的样本图片进行分割，还可以有效提高模型训练的效率。

一些实施例中，将任一个界面图片中未设置合并标识的多个图层中删除预定比例数量的图层，以获得扩展图片可以包括：将任一个界面图片中未设置合并标识的多个图层中，删除预定比例数量且满足删除条件的图层，以获得扩展图片。

其中，目标图层为零碎图层的情况下，删除条件例如可以是图层宽度小于第一阈值或者图层面积大于第二阈值等，其中，第一阈值和第二阈值可以根据实际情况灵活设定。

实际应用中，为了方便数据处理，可以将样本设计稿解析为具有层级结构的文件格式，例如JSON(JavaScript Object Notation，一种轻量级的数据交换格式)文件，遍历JSON文件得到去除层级结构的多个图层，之后，再针对任一个界面图片中未设置合并标识的多个图层中进行图层删除，删除图层之后即更新了样本设计稿，再将更新之后的样本设计稿转换为界面图片，这些界面图片即可以作为扩展图片，实现了在在原数据的基础上生成的新的训练数据，达到数据增强的作用。

其中，可以是在每一个训练轮次，从任一个界面图片中未设置合并标识的多个图层中删除预定比例数量的图层，以获得扩展图片，从而可以在每一个训练轮次都可以随机生成训练样本，提高训练样本的多样性，进而可以提高模型泛化能力。

一些实施例中，检测模型可以包括特征提取网络以及区域检测网络。

该将第一样本图片作为输入数据以及将至少一个样本区域的空间信息作为训练标签，训练检测模型包括：将第一样本图片输入特征提取网络，以提取第一样本图片特征；将第一样本图片特征作为区域检测网络的输入数据，以及至少一个样本区域的空间信息作为训练标签，训练区域检测网络。

其中，该特征提取网络可以预先利用第二样本图片及对应的第二样本图片特征获得，第二样本图片作为特征提取网络的输入数据，第二样本图片特征作为训练标签以训练特征提取网络。

其中，特征提取网络可以有多种实现方式，例如其可以由深度残差网络(如Resnet-50)和特征金字塔网络(英文：Feature Pyramid Network，简称：FPN)组成等，当然，本申请并不限定于此。

一些实施例中，为了进一步提高模型准确性，可以是将第一样本图片以及第一样本图片对应的色块图输入特征提取网络，以提取第一样本图片特征。

作为一种可选方式，可以利用特征提取网络从第一样本图片中提取第一样本特征，以及从第一样本图片对应的色块图中提取第二样本特征；再将第一样本特征以及第二样本特征进行融合处理，从而获得第一样本图片特征。

其中，将第一样本特征以及第二样本特征进行融合处理可以是将第一样本特征与第二样本特征进行叠加求和或者加权求和等，例如可以是通道维度进行叠加求和或加权求和等。

作为另一种可选方式，为了进一步提高模型检测准确性，可以是首先将第一样本图片及其对应色块图进行融合处理获得融合样本图片，再利用特征提取网络从该融合样本图片中提取第一样本图片特征。

将第一样本图片及其对应色块图进行融合处理可以是根据第一样本图片及其对应色块图中对应图层的位置进行融合，可以理解的是，色块图是由第一样本图片得来的，因此，第一样本图片及其对应色块图包括有完全一致的多个图层，确定出第一样本图片及其对应色块图中的相同图层，基于第一样本图片及其对应色块图中的相同图层中的位置信息进行融合或者基于第一样本图片及其对应色块图对应的像素进行融合，如将同一位置的像素值进行叠加求和等。

实际应用中，由上文描述可知，为了方便数据处理，可以将样本设计稿解析为具有层级结构的文件格式，例如JSON文件，并可以调用设计端将样本设计稿中的画板都转换为对应的界面图片。之后，可以基于层级结构构建图层树，并自下而上的遍历图层树，获取所有图层的空间信息等，根据遍历顺序可以对所有图层进行颜色填充，其中，每个界面图片对应的不同图层填充颜色不同，从而可以生成每个界面图片对应的色块图，由于色块图中不同图层颜色不同，因此，通过色块图可以清楚表达界面图片中不同图层的边界信息。在遍历过程中，当遍历获得的图层对应有设置有合并标识的图层组，则该图层组即对应的样本区域，其空间信息作为样本区域的空间信息，作为模型标签，用于进行模型训练等。

一些实施例中，区域检测网络包括第一识别模块以及至少一个第二识别模块；

该将第一样本图片特征作为区域检测网络的输入数据，以及至少一个样本区域的空间信息作为训练标签，训练区域检测网络可以包括：将第一样本图片特征作为第一识别模块的输入数据，以及至少一个样本区域的空间信息作为训练标签，训练第一识别模块；

针对任一个第二识别模块执行如下训练操作：计算前一个识别模块所确定的多个第一边界框分别与至少一个样本区域的相交参数值，筛选相交参数值大于相交阈值的至少一个第二边界框；将至少一个第二边界框分别对应的图片特征作为第二识别模块的输入数据，以及将至少一个样本区域的空间信息作为训练标签，训练第二识别模块；其中，第一个第二识别模块对应的前一个识别模块即为该第一识别模块；至少一个第二识别模块对应的筛选阈值按照处理顺序依次递增。

其中，计算前一个识别模块所确定的多个第一边界框分别与至少一个样本区域的相交参数值，可以筛选获得每个样本区域所对应的选相交参数值大于相交阈值的至少一个第二边界框。具体可以利用每个样本区域所对应的至少一个第二边界框，以及该样本区域的空间信息，训练第二识别模型。

可以理解的是，在与每个样本区域对应的多个第一边界框中，与样本区域相交面积越大的第一边界框越精准，因此，可以根据样本区域与多个第一边界框的相交参数值来确定出至少一个第二边界框，其中，相交参数值可以是相交面积，此外，也可以是IOU(Intersection over Union，交并比)值，也即每个第一边界框与每个样本区域的交集和并集的比值，其中，交集可以是指相交面积，并集可以是指合并面积等。在第一边界框与样本区域完全重叠的情况下，该IOU值即可以为1。

其中，将至少一个第二边界框分别对应的图片特征作为第二识别模块的输入数据，以及将至少一个样本区域的空间信息作为训练标签，训练第二识别模块可以是：将至少一个第二边界框分别对应的图片特征作为第二识别模块的输入数据；基于第二识别模块的输出结果与至少一个样本区域的空间信息，利用第二损失函数计算第三损失值；基于第三损失值，调整第二识别模块的模型参数。

其中，每个第二识别模块的第二损失函数用如下公式表示：

L(x^t,g)＝L_loc(f_t(x^t,b^t),g)；

b^t＝f_t-1(x^t-1,b^t-1)

其中，f_t表示第t个第二识别模块，x^t为输入第t个第二识别模块的至少一个第二边界框对应的图片特征，g为训练标签，即样本区域的空间信息。

一般情况下，检测模型会包括多个第二识别模块，每个第二识别模块的输入数据对应的筛选阈值均会比前一个识别模块对应的筛选阈值大。

其中，第二识别模型可以采用回归器实现，以对第一识别模块所确定的多个第一边界框进行多阶段的回归处理等。

一些实施例中，该第一识别模块包括第一提议模块和至少一个第二提议模块；

该将第一样本图片特征作为第一识别模块的输入数据，以及至少一个样本区域的空间信息作为训练标签，训练第一识别模块包括：将第一样本图片特征作为第一提议模块的输入数据，并针对任一个第二提议模块执行如下处理操作：基于前一个提议模块的输出结果，确定至少一个第三边界框；以及基于偏移参数，修正至少一个第三边界框，获得至少一个第四边界框；以及将至少一个第四边界框分别对应的图片特征作为该第二提议模块的输入数据；其中，第一个第二提议模块的前一个提议模块为第一提议模块；将至少一个样本区域的空间信息作为训练标签，训练第一提议模块以及第二提议模块。

其中，第一提议模块以及第二提议模块可以采用自适应卷积网络实现，在第二提议模块中加入偏移参数，偏移参数可以作为模型参数在模型训练过程中不断学习更新，使得第一识别模型可以准确提取目标区域。

其中，该将至少一个样本区域的空间信息作为训练标签，训练第一提议模块以及第二提议模块可以包括：

基于第一提议模块的输出结果与至少一个样本区域的空间信息，利用第一损失函数计算第一回归损失值；

基于至少一个第二提议模块的输出结果与至少一个样本区域的空间信息，利用第一损失函数计算第二回归损失值以及第一分类损失值；

基于第一回归损失值、第二回归损失值以及第一分类损失值，调整第一识别模块以及第二识别模块分别对应的模型参数。

其中，第一损失函数可以由回归损失函数以及分类损失函数构成，可以如下公式表示：

其中，

表示第τ个提议模块的回归损失函数，α^τ表示τ个提议模块的权重系数，可以根据实际情况设定。L_cls是第一识别模块的分类损失函数。λ表示调整系数，例如其可以大于等于10。实际应用中，回归损失可以采用IOU损失函数，分类损失采用交叉熵损失函数。

需要说明的是，上述仅是举例说明了检测模型可能的实现架构，实际应用中，检测模型可以任意的机器学习模型实现，如神经网络模型、深度学习模型等，本申请不仅对此进行具体限定。

利用上述训练获得的检测模型即可以进行图层处理，如图4所示，为本申请实施例提供的一种图层处理方法又一个实施例的流程图，该方法可以包括以下几个步骤：

401：获取界面设计稿对应的目标图片。

作为一种可选方式，可以是将界面设计稿中的至少一个画板作为界面图片。

作为一种可选方式，可以是将界面设计稿中的至少一个画板转换生成对应的界面图片。

每个界面图片均可以作为目标图片以按照本申请实施例的技术方案进行处理。

作为另一种可选方式，可以是将界面设计稿中的至少一个画板转换生成对应的界面图片；之后，将任一个界面图片按照分割要求进行分割处理，获得至少一个分割图片；将任一个分割图片作为目标图片。

意即每个分割图片均可以作为目标图片以按照本申请实施例的技术方案进行处理。

402：利用检测模型确定目标图片中符合合并要求的至少一个目标区域。

其中，该检测模型利用第一样本图片及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息训练得到，具体训练方式可以详见前文，此处不再重复赘述。

403：基于至少一个目标区域与不同图层的相交信息，识别至少一个目标区域分别对应的多个目标图层。

其中，所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件，可以在代码生成过程中进行合并处理等。

可以基于至少一个目标区域与界面设计稿对应的不同图层的相交信息或者该目标图片对应的不同图层的相交信息，分别进行识别处理。也即可以从界面设计稿维度或者目标图片维度进行识别处理，本申请对此不进行具体限定。

该相交信息可以包括相交距离和/或图层间距等。

作为一种可选方式，可以针对任一个目标区域，计算该目标区域分别与不同图层的相交面积，并确定相交面积大于面积阈值的多个候选图层，并从多个候选图层中确定图层间距满足距离要求的多个目标图层。

可选地，可以将目标图片对应的多个图层构成第一图层列表；

之后，可以按照至少一个目标区域的区域面积从小到大的顺序，依次选择一个目标区域执行如下筛选操作：

计算目标区域分别与第一图层列表中的不同图层的相交面积，将相交面积大于面积阈值的多个候选图层对应目标区域存入第二图层列表中；以及基于多个候选图层的层级结构，按照从下至上的顺序计算相邻两个候选图层之间的图层间距；以及若相邻两个候选图层的图层间距大于距离阈值，从第二图层列表中滤除相邻两个候选图层中的下一个图层；以及根据第二图层列表更新第一图层列表；若针对至少一个目标区域的筛选操作均执行结束，该第二图层列表中的候选图层即为目标图层。

可以理解的是，每个目标区域可以对应一个组件，该组件由多个目标图层编辑获得。目标区域可以是指目标图片中包含该多个目标图层的最小区域。因此，可以基于目标区域与不同图层间的相交面积确定出目标区域对应的多个候选图层，由于某些组件对应的目标区域比较大，因此，基于目标区域与不同图层间的相交面积确定出目标区域对应的多个候选图层中可能存在不属于该目标区域的图层，比如，背景组件对应的目标区域的面积比较大，而其对应的多个候选图层中可能包括文字图层，而文字图层并不属于背景组件，因此，需要滤除该文字图层，由于同属于一个组件的多个候选图层间的图层距离均处于预设阈值范围内，因此，可以基于目标区域对应的多个候选图层的图层间距筛选确定出目标区域对应的多个目标图层。

作为另一种可选方式，基于至少一个目标区域分别与不同图层的相交信息，识别至少一个目标区域分别对应的至少一个目标图层可以是：基于至少一个目标区域分别与不同图层的相交信息，利用识别模型识别至少一个目标区域分别对应的至少一个目标图层。

其中，识别模型利用样本图片的样本区域以及样本区域对应的多个目标图层训练获得。也即可以采用模型进行端到端的识别，基于至少一个目标区域识别其对应的至少一个目标图层。该识别模型可以为深度学习模型等。

在本实施例中，针对界面设计稿对应的目标图片；利用检测模型确定目标图片中符合合并要求的至少一个目标区域；检测模型利用第一样本图片及第一样本图片标注的符合合并要求的至少一个样本区域的空间信息训练得到；基于至少一个目标区域与不同图层的相交信息，识别至少一个目标区域分别对应的多个目标图层；其中，多个目标图层用以进行合并处理。本申请实施例提供的技术方案利用检测模型确定出目标图片中符合合并要求的至少一个目标区域，从而基于目标区域与不同图层的相交信息来确定出目标区域对应的目标图层，提高图层查找效率和准确性。目标区域对应的多个目标图层在智能代码开发过程中可以合并处理，转换为同一个组件进行处理，从而可以提高代码生成质量。

一些实施例中，该方法还可以包括：

确定目标图片对应的多个图层进行颜色填充而生成的色块图；其中，不同图层填充的颜色不同；

该利用检测模型确定目标图片的至少一个目标区域可以包括：

利用检测模型从目标图片及目标图片的色块图中提取图片特征，并基于图片特征识别目标图片的至少一个目标区域。

该检测模型可以具体是利用从第一样本图片和第一样本图片对应的色块图中所提取的样本图片特征，以及第一样本图片标注的分别对应多个目标图层的至少一个样本区域的空间信息训练得到。

其中，利用检测模型从目标图片及目标图片的色块图中提取图片特征有多种可能的实现方式：作为一种可能的实现方式，可以首先将色块图与目标图片进行融合获得融合图片，之后再利用检测模型从融合图片中提取图片特征；

作为另一种可能的实现方式，可以利用检测模型从目标图片中提取第一特征以及从目标图片的色块图中提取第二特征，并将第一特征以及第二特征进行融合，获得图片特征。

其中，可以是将第一特征与第二特征进行累加求和或者加权求和等以进行融合，从而获得图片特征。

一些实施例，可以是将界面设计稿解析为具有层级结构的文件格式，并可以调用设计端将界面设计稿中的画板都转换为对应的界面图片。之后，可以基于层级结构构建图层树，并自下而上的遍历图层树，根据遍历顺序可以对所有图层进行颜色填充，其中，每个界面图片对应的不同图层填充颜色不同，从而可以生成每个界面图片对应的色块图。因此，色块图可以按照如下方式获得：

解析界面设计稿，按照每个界面图片的层级结构构建图层树；

按照自下而上的顺序遍历图层树，并对遍历获得的每个图层进行颜色填充，生成每个界面图片对应的色块图。

目标图片为界面图片时，界面图片对应色块图即为目标图片的色块图。

目标图片为将界面图片分割获得的分割图片时，可以将界面图片的色块图片按照界面图片的分割方式进行分割处理，根据目标图片对应的分割部分即可以确定其所对应的色块图。

其中，图层树可以是对应的JSON格式的文件。

由前文描述可知，检测模型可以包括特征提取网络以及区域检测网络，可以具体是利用检测模型中的特征提取网络型从目标图片及目标图片的色块图中提取图片特征；利用检测模型中的区域检测网络基于图片特征识别目标图片中符合合并要求的至少一个目标区域。

而该区域检测网络可以包括第一识别模块以及至少一个第二识别模块。因此，一些实施例中，基于图片特征识别目标图片中符合合并要求的至少一个目标区域可以包括：利用检测模型中的第一识别模块，基于图片特征识别目标图片的至少一个候选区域；利用至少一个第二识别模块基于至少一个候选区域分别对应的图片特征，识别获得目标图片中符合合并要求的至少一个目标区域。

可选地，利用至少一个第二识别模块基于至少一个候选区域分别对应的图片特征，以获得至少一个目标区域包括：利用每个第二识别模块基于前一个识别模块所识别的至少一个候选区域所对应的图片特征，识别目标图片中的至少一个候选区域；其中，第一个第二识别模块的前一个识别模块为第一识别模块；

将最后一个第二识别模块所确定的至少一个候选区域分别作为目标图片中的目标区域。

其中，该第一识别模块可以包括第一提议模块以及至少一个第二提议模块，一些实施例中，利用检测模型中的第一识别模块，基于图片特征识别目标图片的至少一个候选区域可以包括：

利用第一提议模块基于该图片特征，识别获得至少一个候选区域；

针对任一个第二提议模块执行如下处理操作：

基于该第二提议模块的偏移参数修正前一个提议模块所确定的至少一个候选区域获得至少一个修正区域，并利用该第二提议模块基于该至少一个修正区域分别对应的图片特征作，识别获得至少一个候选区域。

其中，第一个第二提议模块的前一个提议模块为该第一提议模块。

最后一个第二提议模块所确定的至少一个候选区域即为第一识别模块所确定的至少一个候选区域。

一些实施例中，识别获得至少一个目标区域分别对应的多个目标图层之后，该方法还可以包括：将界面设计稿中，每个目标区域对应的多个目标图层作为一组图层组并设置合并标识，以更新界面设计稿。

其中，不同图层组对应的合并标识不同；图层组用于在代码生成操作中作为一个组件进行编码。

此外，该方法还可以包括：

基于界面设计稿或目标图片编码生成目标代码，并在编码过程中，将设置有合并标识的图层组作为一个组件进行编码。

或者，将界面设计稿发送至代码生成端，以由代码生成端基于界面设计稿或目标图片编码生成目标代码，并在编码过程中，将设置有合并标识的图层组作为一个组件进行编码。

一些实施例中，识别获得至少一个目标区域分别对应的多个目标图层之后，该方法还可以包括：

基于界面设计稿或目标图片编码生成目标代码，并在编码过程中，将每个目标区域对应的多个目标图层作为一个组件进行编码。

也即由处理端生成目标代码情况下，可以在识别获得至少一个目标区域分别对应的多个目标图层之后，在编码过程中，直接将每个目标区域对应的多个目标图层作为一个组件进行编码。

一些实施例中，识别获得至少一个目标区域分别对应的多个目标图层之后，该方法还可以包括：将界面设计稿中，每个目标区域对应的多个图标图层合并处理为一个图层，以更新界面设计稿。使得该界面设计稿中不包括需要合并处理的目标图层，从而可以提高生成的代码质量。

其中，上述基于界面设计稿或目标图片编码生成目标代码，可以采用智能代码生成算法实现，例如可以采用代码生成模型基于界面设计稿或目标图片智能生成可用的不同种类的代码。该代码生成模块例如可以采用深度学习技术实现，可以预先基于样本设计稿或样本图片，以及所对应的目标代码而预先训练获得等，本申请对智能代码生成算法不进行具体贤弟。

为了进一步理解本申请实施例的技术方案，下面将结合图5所示的场景交互示意图以及图6所示的模型处理示意图，对本申请实施例的技术方案进行详细描述。

需要说明的是，本实施例以界面设计稿中的一个画板为例对技术方案进行说明。该界面设计稿例如可以为Sketch格式。

如图5所述，设计端501生成的界面设计稿可以发送至处理端502中。

处理端502可以解析该界面设计稿，将界面设计稿中的画板转换生成界面图片，并将每个界面图片作为目标图片，或者将每个界面图片进行分割处理得到的分割图片作为目标图片。

为了方便进行数据处理，界面设计稿例如为Sketch格式时，可以将界面设计稿进行格式转换，例如得到该界面设计稿对应的具有层级结构的JSON文件，并调用Sketch提供的接口，可以将设计稿中的画板转换为对应的界面图片。

根据JSON文件，可以将每个界面图片涉及的多个图层按照层级结构转换为图层树，并可以按照从下至上顺序遍历图层树，获得每个图层的空间信息等，遍历获得的每个图层可以进行颜色填充并重新组织，从而获得每个界面图片对应的色块图。按照上述目标图片的确定方式，即可以确定目标图片所确定的色块图。

之后，针对目标图片可以利用检测模型基于目标图和色块图，确定目标图片中符合合并要求的至少一个目标区域，具体的，如图6所示模型处理示意图中，作为一种可选方式，目标图片60和对应的色块图61可以进行融合处理，得到带有边界特征的融合图62，并将该融合图输入检测模型的特征提取网络601中，以获得图片特征。图片特征可以输入区域检测网络602中，基于区域检测网络602的输出结果即可以确定目标图片61中符合合并要求的至少一个目标区域63(图6中以一个目标区域为例进行说明，需要说明的是，实际应用中，一个目标图片中可能提取获得一个或多个目标区域)，该至少一个目标区域63为目标图片为需要进行合并处理的区域，如由多个零碎图层表达的同一个组件所在区域。

其中，如图6所示，区域检测网络可以由第一识别模块和至少一个第二识别模块构成，该第一识别模块可以由第一提议模型以及至少一个第二提议模型构成，详细结构描述可以详见前文实施例中所述，此处不再赘述。特征提取网络所获得的图片特征可以输入第一识别模块中的第一提议模块，利用所述第一提议模块基于图片特征，识别获得至少一个候选区域；针对任一个第二提议模块，基于该第二提议模块的偏移参数修正前一个提议模块所确定的至少一个候选区域获得至少一个修正区域，并利用该第二提议模块基于该至少一个修正区域分别对应的图片特征作，识别获得至少一个候选区域；其中，第一个第二提议模块的前一个提议模块为该第一提议模块。

第一识别模块所确定的至少一个候选区域对应的图片特征，可以输入第一个第二识别模块，从而利用每个第二识别模块基于前一个识别模块所识别的至少一个候选区域所对应的图片特征，识别所述目标图片中的至少一个候选区域；其中，第一个第二识别模块的前一个识别模块为所述第一识别模块；将最后一个第二识别模块所确定的至少一个候选区域分别作为所述目标图片中的目标区域。

在确定出至少一个目标区域63之后，基于该至少一个目标区域63与目标图片中不同图层的相交信息，即可以确定每个目标区域63所对应的多个目标图层64，其中目标图层的确定方式详见前文相应实施例中所述，此处不再重复赘述。

处理端502确定出每个目标区域所对应的多个目标图层之后，可以将界面设计稿中，每个目标区域对应的多个目标图层作为图层组，并设置合并标识，以更新该界面设计稿。

处理端502可以将更新之后的界面设计稿发送至代码生成端503。

代码生成端503即可以基于界面设计稿编码生成目标代码，并在编码过程中，将设置有合并标识的图层组作为一个组件进行编码。

图7示出了本申请提供的图层处理装置一个实施例的结构示意图，应用于服务端，如图7所述，该装置包括：确定模块71、识别模块72。

确定模块71，用于获取界面设计稿对应的目标图片；确定所述目标图片中符合合并要求的至少一个目标区域；

识别模块72，用于基于所述至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层，其中，所述多个目标图层用以进行合并处理。

在一些实施例中，确定模块71还用于确定所述目标图片对应的多个图层进行颜色填充而生成的色块图；其中，不同图层填充的颜色不同。

在一些实施例中，确定模块71具体用于利用检测模型从所述目标图片及所述目标图片的色块图中提取图片特征，并基于所述图片特征识别所述目标图片的至少一个目标区域。

在一些实施例中，确定模块71进一步具体用于将所述色块图与所述目标图片进行融合获得融合图片，以及利用所述检测模型从所述融合图片中提取图片特征；或者，利用所述检测模型从所述目标图片中提取第一特征以及从所述目标图片的色块图中提取第二特征，并将所述第一特征以及所述第二特征进行融合，获得图片特征。

在一些实施例中，确定模块71进一步具体用于利用所述检测模型中的第一识别模块，基于所述图片特征识别所述目标图片的至少一个候选区域；利用至少一个第二识别模块基于所述至少一个候选区域分别对应的图片特征，识别获得所述目标图片中的至少一个目标区域。

在一些实施例中，确定模块71进一步具体用于利用每个第二识别模块基于前一个识别模块所识别的至少一个候选区域所对应的图片特征，识别所述目标图片中的至少一个候选区域；其中，第一个第二识别模块的前一个识别模块为所述第一识别模块；将最后一个第二识别模块所确定的至少一个候选区域分别作为所述目标图片中的目标区域。

在一些实施例中，确定模块71进一步具体用于利用所述第一提议模块基于所述图片特征，识别获得至少一个候选区域；针对任一个第二提议模块执行如下处理操作：基于该第二提议模块的偏移参数修正前一个提议模块所确定的至少一个候选区域获得至少一个修正区域，并利用该第二提议模块基于该至少一个修正区域分别对应的图片特征作，识别获得至少一个候选区域；其中，第一个第二提议模块的前一个提议模块为该第一提议模块。

在一些实施例中，识别模块72具体用于针对任一个目标区域，计算所述目标区域分别与不同图层的相交面积，并确定相交面积大于面积阈值的多个候选图层，并从所述多个候选图层中确定图层间距满足距离要求的多个目标图层。

在一些实施例中，识别模块72进一步具体用于确定所述目标图片对应的多个图层构成的第一图层列表；按照所述至少一个目标区域的区域面积从小到大的顺序，依次选择一个目标区域执行如下筛选操作：计算所述目标区域分别与所述第一图层列表中的不同图层的相交面积，将相交面积大于面积阈值的多个候选图层对应所述目标区域存入第二图层列表中；基于所述多个候选图层的层级结构，按照从下至上的顺序计算相邻两个候选图层之间的图层间距；若相邻两个候选图层的图层间距大于距离阈值，从所述第二图层列表中滤除相邻两个候选图层中的下一个图层；根据所述第二图层列表更新所述第一图层列表；在针对所述至少一个目标区域的筛选操作均执行结束，确定所述第二图层列表中的候选图层为目标图层。

在一些实施例中，识别模块72还具体用于基于所述至少一个目标区域分别与不同图层的相交信息，利用识别模型识别所述至少一个目标区域分别对应的至少一个目标图层；其中，所述识别模型利用所述样本图片的样本区域以及所述样本区域对应的多个目标图层训练获得。

在一些实施例中，确定模块71还具体用于将界面设计稿中的至少一个画板转换生成对应的界面图片；将任一个界面图片按照分割要求进行分割处理，获得至少一个分割图片；将任一个分割图片作为目标图片。

在一些实施例中，上述装置还包括：

删除模块，用于根据图片相似度，删除满足相似要求两个分割图片中的任一个分割图片以更新所述至少一个分割图片。

在一些实施例中，确定模块71还具体用于将界面设计稿中的至少一个画板转换生成对应的界面图片；将任一个界面图片作为目标图片。

在一些实施例中，确定模块71进一步具体用于解析所述界面设计稿，按照每个界面图片的层级结构构建图层树；按照自下而上的顺序遍历所述图层树，并对遍历获得的每个图层进行颜色填充，生成每个界面图片对应的色块图。

在一些实施例中，上述装置还包括：

滤除模块，用于从所述界面设计稿对应的至少一个界面图片中滤除未满足图片要求的界面图片。

在一些实施例中，识别模块72还用于基于所述至少一个目标区域分别与所述界面设计稿对应的不同图层的相交信息，识别所述至少一个目标区域分别对应的至少一个目标图层；或者，基于所述至少一个目标区域分别与所述目标图片对应的不同图层的相交信息，识别所述至少一个目标区域分别对应的至少一个目标图层。

在一些实施例中，上述装置还包括：

更新模块，用于将所述界面设计稿中，每个目标区域对应的多个目标图层作为一组图层组并设置合并标识，以更新所述界面设计稿；其中，不同图层组对应的合并标识不同；所述图层组用于在代码生成操作中作为一个组件进行编码。

生成模块，用于响应于代码生成指令，基于所述界面设计稿或所述目标图片编译生成目标代码，并在编译过程中，将设置有合并标识的图层组作为一个组件进行编码。

在一些实施例中，更新模块，还用于将所述界面设计稿中，每个目标区域对应的多个目标图层作为一组图层组并设置合并标识，以更新所述界面设计稿；其中，不同图层组对应的合并标识不同；所述图层组用于在代码生成操作中作为一个组件进行编码。

生成模块，还用于响应于代码生成指令，基于所述界面设计稿或所述目标图片编译生成目标代码，并在编译过程中，将设置有合并标识的图层组作为一个组件进行编码。

在一些实施例中，确定模块71具体用于利用检测模型确定所述目标图片中符合合并要求的至少一个目标区域；所述检测模型利用第一样本图片及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息训练得到。

图7所述的图层处理装置可以执行图2或者图4所示实施例所述的图层处理方法，其实现原理和技术效果不再赘述。对于上述实施例中的图层处理装置其中各个模块、单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图8示出了本申请提供的模型生成装置一个实施例的结构示意图，应用于客户端，如图8所述，该装置包括：获取模块81、训练模块82。

获取模块81，获取第一样本图片以及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息；所述至少一个样本区域分别对应多个目标图层；

训练模块82，用于将所述第一样本图片作为输入数据以及将所述至少一个样本区域的空间信息作为训练标签，训练检测模型；

其中，所述检测模型用于基于界面设计稿对应的目标图片，确定所述目标图片中符合所述合并要求的至少一个目标区域；所述至少一个目标区域用于基于分别与不同图层的相交信息，识别各自对应的多个目标图层；所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。

在一些实施例中，获取模块81，具体用于将样本设计稿中的至少一个画板转换生成对应的界面图片；将任一个界面图片作为第一样本图片；或者将任一个界面图片按照分割要求进行分割处理，获得至少一个分割图片，以及将任一个分割图片作为第一样本图片；确定所述第一样本图片对应的多个图层中设置有合并标识的至少一个图层组；所述至少一个图层组分别包括多个目标图层；将任一个图层组对应的空间信息作为一个符合合并要求的的样本区域的空间信息。

在一些实施例中，上述装置还包括：

删除模块，用于从所述样本设计稿对应的至少一个界面图片中滤除未满足图片要求的界面图片；从任一个界面图片中未设置合并标识的多个图层中删除预定比例数量的图层，以获得扩展图片；将所述扩展图片作为所述第一样本图片；或者将所述扩展图片照分割要求进行分割处理获得至少一个分割图片，将任一个分割图片作为所述第一样本图片；根据图片相似度，删除满足相似要求两个分割图片中的任一个分割图片；将任一个界面图片中未设置合并标识的多个图层中，删除预定比例数量且满足删除条件的图层，以获得扩展图片。

在一些实施例中，训练模块82，具体用于所述检测模型包括特征提取网络以及区域检测网络；所述将所述第一样本图片作为输入数据以及将所述至少一个样本区域的空间信息作为训练标签，训练检测模型包括：将所述第一样本图片输入特征提取网络，以提取第一样本图片特征；将所述第一样本图片特征作为所述区域检测网络的输入数据，以及所述至少一个样本区域的空间信息作为训练标签，训练所述区域检测网络。

在一些实施例中，训练模块82，进一步具体用于所述区域检测网络包括第一识别模块以及至少一个第二识别模块；所述将所述第一样本图片特征作为所述区域检测网络的输入数据，以及所述至少一个样本区域的空间信息作为训练标签，训练所述区域检测网络包括：将所述第一样本图片特征作为所述第一识别模块的输入数据，以及所述至少一个样本区域的空间信息作为训练标签，训练所述第一识别模块；针对任一个第二识别模块执行如下训练操作：计算前一个识别模块所确定的多个第一边界框分别与所述至少一个目标区域的相交参数值，筛选相交参数值大于相交阈值的至少一个第二边界框；将所述至少一个第二边界框分别对应的图片特征作为所述第二识别模块的输入数据，以及将所述至少一个样本区域的空间信息作为训练标签，训练所述第二识别模块；其中，第一个第二识别模块对应的前一个识别模块为所述第一识别模块；所述至少一个第二识别模块对应的筛选阈值按照处理顺序依次递增。

在一些实施例中，训练模块82，还进一步具体用于所述第一识别模块包括第一提议模块和至少一个第二提议模块；所述将所述第一样本图片特征作为所述第一识别模块的输入数据，以及所述样本区域的空间信息作为训练标签，训练所述第一识别模块包括：将所述第一样本图片特征作为所述第一提议模块的输入数据，并针对任一个第二提议模块执行如下处理操作：基于前一个提议模块的输出结果，确定至少一个第三边界框；以及基于偏移参数，修正所述至少一个第三边界框，获得至少一个第四边界框；以及将所述至少一个第四边界框分别对应的图片特征作为所述第二提议模块的输入数据；其中，第一个第二提议模块的前一个提议模块为所述第一提议模块；将所述至少一个样本区域的空间信息作为训练标签，训练所述第一提议模块以及所述第二提议模块。

在一些实施例中，训练模块82，还进一步具体用于基于所述第一提议模块的输出结果与所述至少一个样本区域的空间信息，利用第一损失函数计算第一回归损失值；基于所述至少一个第二提议模块的输出结果与所述至少一个样本区域的空间信息，利用所述第二损失函数计算第二回归损失值以及第一分类损失值；基于所述第一回归损失值、所述第二回归损失值以及所述第一分类损失值，调整所述第一处理模块以及所述第二识别模块分别对应的模型参数。

在一些实施例中，训练模块82，还进一步具体用于将所述至少一个第二边界框分别对应的图片特征作为所述第二识别模块的输入数据；基于所述第二识别模块的输出结果与所述至少一个样本区域的空间信息，利用第三损失函数计算第三损失值；基于所述第三损失值，调整所述第二识别模块的模型参数。

在一些实施例中，训练模块82，还进一步具体用于利用第二样本图片及对应的第二样本图片特征，训练所述特征提取网络。

图8所述的模型生成装置可以执行图4所示实施例所述的模型生成方法，其实现原理和技术效果不再赘述。对于上述实施例中的模型生成装置其中各个模块、单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本申请实施例还提供了一种计算设备，如图9所示，该设备可以包括存储组件901以及处理组件902；

所述存储组件一条或多条计算机指令，其中，所述一条或多条计算机指令供所述处理组件902调用执行，以作为一种计算设备实现图2或者图4所述的图层处理方法或者图3所述的模型生成方法。

当然，计算设备必然还可以包括其他部件，例如输入/输出接口、显示组件、通信组件等。

输入/输出接口为处理组件和外围接口模块之间提供接口，上述外围接口模块可以是输出设备、输入设备等。通信组件被配置为便于计算设备和其他设备之间有线或无线方式的通信等。

其中，处理组件可以包括一个或多个处理器来执行计算机指令，以完成上述的方法中的全部或部分步骤。当然处理组件也可以为一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

存储组件901被配置为存储各种类型的数据以支持在终端的操作。存储组件901可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

需要说明的是，上述计算设备可以为物理设备或者云计算平台提供的弹性计算主机等。其可以实现成多个服务器或终端设备组成的分布式集群，也可以实现成单个服务器或单个终端设备。

本申请实施例还提供了一种计算机可读存储介质，存储有计算机程序，所述计算机程序被计算机执行时可以实现上述图2或者图4所述的文件处理方法或者图3所述的模型生成方法。该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

本申请实施例还提供了一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，所述计算机程序被计算机执行时可以实现如上述图2或者图4所述的文件处理方法或者图3所述的模型生成方法。在这样的实施例中，计算机程序可以是从网络上被下载和安装，和/或从可拆卸介质被安装。在该计算机程序被处理器执行时，执行本申请的系统中限定的各种功能。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (15)

1.一种图层处理方法，其特征在于，包括：

获取将界面设计稿对应的目标图片；

确定所述目标图片中符合合并要求的至少一个目标区域；

基于所述至少一个目标区域与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层，其中，所述多个目标图层用以进行合并处理以作为所述目标区域对应的一个组件。

2.根据权利要求1所述的方法，其特征在于，还包括：

确定所述目标图片对应的多个图层进行颜色填充而生成的色块图；其中，不同图层填充的颜色不同；

所述确定所述目标图片中符合合并要求的至少一个目标区域包括：

从所述目标图片及所述目标图片的色块图中提取图片特征，并基于所述图片特征识别所述目标图片中符合合并要求的至少一个目标区域。

3.根据权利要求2所述的方法，其特征在于，所述从所述目标图片及所述目标图片的色块图中提取图片特征包括：

将所述色块图与所述目标图片进行融合获得融合图片，以及从所述融合图片中提取图片特征；

或者，从所述目标图片中提取第一特征以及从所述目标图片的色块图中提取第二特征，并将所述第一特征以及所述第二特征进行融合，获得图片特征。

4.根据权利要求1所述的方法，其特征在于，所述基于所述至少一个目标区域分别与不同图层的相交信息，识别所述至少一个目标区域分别对应的多个目标图层包括：

针对任一个目标区域，计算所述目标区域分别与不同图层的相交面积，并确定相交面积大于面积阈值的多个候选图层，并从所述多个候选图层中确定图层间距满足距离要求的多个目标图层。

5.根据权利要求4所述的方法，其特征在于，所述多个目标图层的确定方式包括：

确定所述目标图片对应的多个图层构成的第一图层列表；

按照所述至少一个目标区域的区域面积从小到大的顺序，依次选择一个目标区域执行如下筛选操作：

计算所述目标区域分别与所述第一图层列表中的不同图层的相交面积，将相交面积大于面积阈值的多个候选图层对应所述目标区域存入第二图层列表中；

基于所述多个候选图层的层级结构，按照从下至上的顺序计算相邻两个候选图层之间的图层间距；

若相邻两个候选图层的图层间距大于距离阈值，从所述第二图层列表中滤除相邻两个候选图层中的下一个图层；

根据所述第二图层列表更新所述第一图层列表；

在针对所述至少一个目标区域的筛选操作均执行结束，确定所述第二图层列表中的候选图层为目标图层。

6.根据权利要求1所述的方法，其特征在于，所述基于所述至少一个目标区域分别与不同图层的相交信息，识别所述至少一个目标区域分别对应的至少一个目标图层包括：

基于所述至少一个目标区域分别与不同图层的相交信息，利用识别模型识别所述至少一个目标区域分别对应的至少一个目标图层；

其中，所述识别模型利用所述样本图片的任一样本区域以及所述样本区域对应的多个目标图层训练获得。

7.根据权利要求1所述的方法，其特征在于，所述方法还包括：

将所述界面设计稿中，每个目标区域对应的多个目标图层作为一组图层组并设置合并标识，以更新所述界面设计稿；所述图层组用于在代码生成操作中作为一个组件进行编码；

或者，将所述界面设计稿中，每个目标区域对应的多个目标图层作为一组图层组并设置合并标识，以更新所述界面设计稿；以及响应于代码生成指令，基于所述界面设计稿或所述目标图片编译生成目标代码，并在编译过程中，将设置有合并标识的图层组作为一个组件进行编码。

8.根据权利要求1所述的方法，其特征在于，所述确定所述目标图片中符合合并要求的至少一个目标区域包括：

利用检测模型确定所述目标图片中符合合并要求的至少一个目标区域；所述检测模型利用样本图片及所述样本图片标注的符合合并要求的至少一个样本区域的空间信息训练得到。

9.一种模型生成方法，其特征在于，包括：

获取第一样本图片以及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息；所述至少一个样本区域分别对应多个目标图层；

将所述第一样本图片作为输入数据以及将所述至少一个样本区域的空间信息作为训练标签，训练检测模型；

其中，所述检测模型用于基于界面设计稿对应的目标图片，确定所述目标图片中符合合并要求的至少一个目标区域；所述至少一个目标区域用于基于分别与不同图层的相交信息，识别各自对应的多个目标图层；所述多个目标图层用以进行合并处理，以作为所述目标区域对应的一个组件。

10.根据权利要求9所述的方法，其特征在于，所述获取第一样本图片以及所述第一样本图片标注的符合合并要求的至少一个样本区域的空间信息包括：

将样本设计稿中的至少一个画板转换生成对应的界面图片；

将任一个界面图片作为第一样本图片；或者将任一个界面图片按照分割要求进行分割处理，获得至少一个分割图片，以及将任一个分割图片作为第一样本图片；

确定所述第一样本图片对应的多个图层中设置有合并标识的至少一个图层组；所述至少一个图层组分别包括多个目标图层；

将任一个图层组对应的空间信息作为一个符合合并要求的样本区域的空间信息。

11.根据权利要求10所述的方法，其特征在于，所述方法还包括：

从任一个界面图片中未设置合并标识的多个图层中删除预定比例数量的图层，以获得扩展图片；

将所述扩展图片作为所述第一样本图片；或者将所述扩展图片照分割要求进行分割处理获得至少一个分割图片，将任一个分割图片作为所述第一样本图片。

12.根据权利要求9所述的方法，其特征在于，所述检测模型包括特征提取网络以及区域检测网络；

所述将所述第一样本图片作为输入数据以及将所述至少一个样本区域的空间信息作为训练标签，训练检测模型包括：

将所述第一样本图片输入特征提取网络，以提取第一样本图片特征；

将所述第一样本图片特征作为所述区域检测网络的输入数据，以及所述至少一个样本区域的空间信息作为训练标签，训练所述区域检测网络。

13.根据权利要求12所述的方法，其特征在于，所述区域检测网络包括第一识别模块以及至少一个第二识别模块；

所述将所述第一样本图片特征作为所述区域检测网络的输入数据，以及所述至少一个样本区域的空间信息作为训练标签，训练所述区域检测网络包括：

将所述第一样本图片特征作为所述第一识别模块的输入数据，以及所述至少一个样本区域的空间信息作为训练标签，训练所述第一识别模块；

针对任一个第二识别模块执行如下训练操作：

计算前一个识别模块所确定的多个第一边界框分别与所述至少一个目标区域的相交参数值，筛选相交参数值大于相交阈值的至少一个第二边界框；

将所述至少一个第二边界框分别对应的图片特征作为所述第二识别模块的输入数据，以及将所述至少一个样本区域的空间信息作为训练标签，训练所述第二识别模块；

其中，第一个第二识别模块对应的前一个识别模块为所述第一识别模块；所述至少一个第二识别模块对应的筛选阈值按照处理顺序依次递增。

14.根据权利要求12所述的方法，其特征在于，所述第一识别模块包括第一提议模块和至少一个第二提议模块；

所述将所述第一样本图片特征作为所述第一识别模块的输入数据，以及所述样本区域的空间信息作为训练标签，训练所述第一识别模块包括：

将所述第一样本图片特征作为所述第一提议模块的输入数据，并针对任一个第二提议模块执行如下处理操作：

基于前一个提议模块的输出结果，确定至少一个第三边界框；以及基于偏移参数，修正所述至少一个第三边界框，获得至少一个第四边界框；以及将所述至少一个第四边界框分别对应的图片特征作为所述第二提议模块的输入数据；其中，第一个第二提议模块的前一个提议模块为所述第一提议模块；

将所述至少一个样本区域的空间信息作为训练标签，训练所述第一提议模块以及所述第二提议模块。

15.一种计算设备，其特征在于，包括存储组件以及处理组件；所述存储组件存储一条或多条计算机程序指令；所述一条或多条计算机程序指令以供所述处理组件调用并执行，以实现如权利要求1-8任一项所述的图层处理方法或者实现如权利要求9-14任一项所述的模型生成法。

Images