CN114443022A - 生成页面搭建区块的方法及电子设备 - Google Patents

Abstract

本申请实施例公开了生成页面搭建区块的方法及电子设备。所述方法包括：接收待处理的输入图片；从所述输入图片中识别出至少一个图形元素，并确定所述图形元素分别对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；所述搭建组件是关联的素材库中已定义的搭建组件；通过将映射出的至少一个搭建组件进行组合，生成搭建区块，所述搭建区块用于搭建页面。通过本申请实施例，能够进一步提升页面开发效率，降低开发成本。

Description

生成页面搭建区块的方法及电子设备

技术领域

本申请涉及低代码开发技术领域，特别是涉及生成页面搭建区块的方法及电子设备。

背景技术

低代码开发平台是通过可视化进行网页或移动端应用界面等各种页面开发的平台。通过这种平台，无需编码(0代码)或通过少量代码就可以快速生成目标页面。也就是说，允许终端用户使用易于理解的可视化工具来创建自己的页面，而不是传统的编写代码方式。这样，具有不同经验水平的开发人员都可以通过图形化的用户界面，对于大型企业来讲，由于不仅是具有专业编程能力的程序员，非技术背景的人员同样可以构建页面，因此，低代码开发平台还可以降低人员培训、技术部署等方面的成本。

现有技术中，用户在使用这种低代码开发平台进行页面开发时，主要是使用拖拽组件和模型驱动的逻辑来创建页面。例如，平台的编辑界面中可以提供组件列表区，其中展示有多种可选的搭建组件(如果一个模块需要重复使用，那么就可以定义为平台中的一个组件)。其中可以包括文本框、下拉框等基础组件，还可以包括富文本、列表容器、折叠面板、条件容器等高级组件，另外还可以包括布局相关的组件，如卡片、分栏、分组等等。用户可以从这些搭建组件中选择所需的组件，拖拽到编辑区进行页面搭建。完成搭建之后进行交付时，平台可以根据具体的组件以及组件之间的布局关系等，生成对应的页面代码。

上述页面开发方式能够数倍提升开发效率，并大幅降低开发成本。但仍然存在进一步提升的空间。

发明内容

本申请提供了生成页面搭建区块的方法及电子设备，能够进一步提升页面开发效率，降低开发成本。

本申请提供了如下方案：

一种生成页面搭建区块的方法，包括：

接收待处理的输入图片；

从所述输入图片中识别出至少一个图形元素，并确定所述图形元素分别对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；所述搭建组件是关联的素材库中已定义的搭建组件；

通过将映射出的至少一个搭建组件进行组合，生成搭建区块，所述搭建区块用于搭建页面。

其中，所述输入图片是通过对已发布页面中包括的目标功能区块中的内容进行截图的方式获得的。

其中，还包括：

确定所述搭建区块关联的搭建组件的布局属性，所述布局属性用于描述对应的搭建组件在所述搭建区块中的布局方式信息，以便在所述搭建区块被选择后，将所述多个搭建组件按照所述布局属性、以组合的形式展示到搭建界面的编辑区域。

其中，所述搭建区块关联的搭建组件的布局属性是根据对应的图形元素在所述输入图片中的布局信息进行确定的。

其中，所述从所述输入图片中识别出至少一个图形元素，并确定所述图形元素对应的组件类型信息，包括：

将所述输入图片输入到预先训练完成的算法模型中，以便通过所述算法模型对所述输入图片中包括的图形元素对应的组件类型进行识别；

其中，所述算法模型是利用收集到的训练样本进行训练获得的，所述训练样本中包括图片样本，以及图片样本中包括的图形元素对应的组件类型标注信息，所述组件类型标注信息与关联的素材库中定义的搭建组件类型相关。

其中，所述算法模型还用于输出所述识别出的图形元素在所述输入图片中的布局方式信息，以便根据所述布局方式信息确定所映射出的搭建组件在所述搭建区块中的布局属性。

其中，还包括：

对所述输入图片中包含的文本内容进行识别，并确定关联的图形元素；

在根据所述图形元素映射出搭建组件时，建立所映射出的搭建组件与所述文本内容之间的关联关系；

在生成所述搭建区块时，将所述映射出的搭建组件与所述文本内容之间的关联关系进行保存，以便在所述搭建区块被选择后，在以组合形式展示多个搭建组件时，还展示关联的文本内容。

其中，还包括：

确定目标用户的标识；所述目标用户为提供所述输入图片的用户；

将所述搭建区块与所述目标用户的标识建立关联关系；

接收到所述目标用户的页面搭建请求后，将与该目标用户的标识关联的搭建区块添加到搭建界面的可选素材列表中。

其中，还包括：

将所述搭建区块添加到通用的素材库中，以便在多个用户的页面搭建过程中对所述搭建区块进行复用。

其中，还包括：

确定所述搭建区块的名称标识信息，以用于在搭建界面的可选素材列表中，对所述搭建区块的名称标识进行展示。

其中，所述确定所述搭建区块的名称标识信息，包括：

根据从所述输入图片中识别出的文本信息，确定所述搭建区块的名称标识信息。

其中，所述确定所述搭建区块的名称标识信息，包括：

提供用于为所述搭建区块输入名称标识的操作选项，以便通过接收到的输入信息确定所述搭建区块的名称标识信息。

其中，在进行页面搭建的过程中，以所述搭建区块为单位添加到可选素材列表中，并在所述搭建区块被选择后，将所述至少一个搭建组件以组合的形式展示到搭建界面的编辑区域。

一种页面搭建方法，包括：

接收到页面搭建请求后，提供可选素材列表，所述可选素材列表中包括搭建区块，所述搭建区块关联有多个搭建组件，所述搭建组件是素材库中已定义的搭建组件；

在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。

其中，所述搭建区块是通过以下方式生成的：

接收待处理的输入图片；

从所述输入图片中识别出至少一个图形元素，并确定所述图形元素分别对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；

通过将映射出的至少一个搭建组件进行组合，生成所述搭建区块。

其中，所述搭建区块是通过以下方式生成的：

将可选素材列表中被选择的搭建组件展示到搭建界面的编辑区域；

在所述编辑区域中的多个搭建组件被选中后，提供用于生成搭建区块的操作选项；

通过所述操作选项接收到用户的确认操作后，将所述被选中的多个搭建组件进行组合，生成所述搭建区块。

其中，所述搭建区块关联的多个搭建组件还分别对应有文本内容；

在将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域，还将所述多个搭建组件分别对应的文本内容在所述编辑区域进行展示。

其中，在将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域之后，还包括：

提供用于对所述搭建组件的属性信息进行编辑的操作选项。

一种生成页面搭建区块的装置，包括：

图片接收单元，用于接收待处理的输入图片；

元素识别单元，用于从所述输入图片中识别出至少一个图形元素，并确定所述图形元素对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

映射单元，用于将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；所述搭建组件是关联的素材库中已定义的搭建组件；

搭建区块生成单元，用于通过将映射出的至少一个搭建组件进行组合，生成搭建区块，所述搭建区块用于搭建页面。

一种页面搭建装置，包括：

素材列表提供单元，用于接收到页面搭建请求后，提供可选素材列表，所述可选素材列表中包括搭建区块，所述搭建区块关联有多个搭建组件，所述搭建组件是素材库中已定义的搭建组件；

展示单元，用于在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。

一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述任一项所述的方法的步骤。

一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行前述任一项所述的方法的步骤。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请实施例，可以针对具体的输入图片，对其中包含的图形元素对应的组件类型进行识别，这种组件类型可以是与关联的素材库中定义的搭建组件类型相关。这样，在识别出具体的至少一个图形元素之后，便可以分别映射为具有对应类型属性的搭建组件。进而，可以通过将映射出的至少一个搭建组件进行组合，生成搭建区块。这样，可以使用这种搭建区块进行页面搭建，从而有利于提升页面开发效率。

在可选的方式下，可以以所述搭建区块为单位添加到可选素材列表中，并在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。通过这种方式，如果用户在对已发布的页面进行浏览的过程中发现了可以在其他页面中进行复用的功能区块，则只需要对该功能区块部分进行截图等方式生成图片，并输入到本申请实施例提供的系统中。该系统便可以生成具体的搭建区块，使其可以成为一种搭建素材，供用户在后续的页面搭建过程中进行复用。这样，如果当前正在搭建的页面中需要某功能区块，则可以直接将对应的搭建区块拖动到编辑区，以实现对关联的多个搭建组建的成组拖动，而不再需要逐个拖动多个搭建组件，因此，有利于提升页面搭建效率，降低页面开发成本。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

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

图1是本申请实施例提供的系统架构的示意图；

图2是本申请实施例提供的第一方法的流程图；

图3是本申请实施例提供的界面的示意图；

图4是本申请实施例提供的另一界面的示意图；

图5是本申请实施例提供的第二方法的流程图；

图6是本申请实施例提供的第一装置的示意图；

图7是本申请实施例提供的第二装置的示意图；

图8是本申请实施例提供的电子设备的示意图。

具体实施方式

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

本申请发明人在实现本申请实施例的过程中发现，在实际应用中，页面开发的过程中可能有以下情形：有些页面中，可能需要由几个相对完整表达某种属性的功能区块组成，每个功能区块可以通过多个不同的组件进行搭建。例如，某个政务相关的页面中，需要包括单位基本情况、人员基本情况等功能区块。其中，人员基本情况功能区块中可能包括多个输入框、下拉框、日期控件等多个组件。现有技术中，开发者需要分别将具体的组件拖拽到搭建界面的编辑区，同时还可以分别具体的组件的属性进行编辑，例如，是否为必填项，关联的文本信息，等等。在此过程中，需要开发者执行多次的拖拽等操作，效率相对比较低。

另一方面，网络中可能存在一些功能相近的页面，或者，某些页面中可能存在类型功能区块。例如，某个已发布页面中同样包括人员基本信息这种功能区块，如果能够将该功能区块在有类似需求的其他页面中实现复用，则可以有效提升页面搭建效率。

基于上述分析，本申请实施例提供了相应的解决方案。在该方案中，用户可以对已发布页面中的相关功能区块等通过截图等方式生成图片，然后，本申请实施例提供的系统可以对该图片进行解析，识别出其中包括哪些类型的元素，例如，输入框，下拉框，等等，然后，自动生成搭建区块。该搭建区块可以由系统提供的多个搭建组件组成，具体的搭建组件可以包括背景技术部分列举的各类基础组件、高级组件、布局组件等等。这样，一个搭建区块就对应着一组搭建组件，并且可以将该搭建区块加入到组件库中。之后，用户进入到具体的搭建界面之后，就可以搭建界面的组件列表中展示出该搭建区块对应的图标，之后，可以通过将该搭建区块拖动到搭建界面的编辑区，实现对该搭建区块关联的多个搭建组件的整体拖动，而不需要用户分别对多个搭建组件分别地执行拖动操作。

另外，在可选地实施方式中，具体在生成搭建区块时，还可以为具体搭建区块中的多个搭建组件分别生成布局属性，代表具体搭建组件在搭建区块中的布局方式信息，包括如何进行排列等等。这样，在将搭建区块拖动到编辑区后，其中包括的多个搭建组件可以是按照一定的布局方式进行排列好的状态，以此进一步提升页面搭建效率。其中，具体的搭建组件在搭建区块中的布局方式信息，可以根据对应的元素在原始输入图片中的原始布局方式进行确定。当然，也可以在这种原始布局方式的基础上进行优化调整后，再生成具体搭建组件在搭建区块中的布局属性信息，等等。

其中，具体在根据输入图片生成搭建区块时，可以首先利用视觉识别等技术，对输入图片中包含的元素的类型进行识别，然后，映射成具有对应类型属性的搭建组件，之后，就可以将映射出的多个搭建组件进行组合生成搭建区块。或者，另一种方式下，也可以通过深度学习模型等方式，实现对输入图片中所包含的元素类型的识别。然后，利用元素类型识别结果，映射成具体的搭建组件。

需要说明的是，具体的搭建区块在加入到组件库之后，可以作为一种自定义组件提供给搭建区块的创建者用户使用，或者，也可以直接将生成的搭建区块添加到通用的组件库中，提供给其他用户使用，实现在更多场景中的复用。

具体实现时，从系统架构角度而言，本申请实施例可以提供一种低代码开发系统，并基于该系统提供生成搭建区块的服务功能。具体的，参见图1，该低代码开发系统可以包括服务端以及客户端。其中，服务端可以保存具体的素材库，并维护具体素材库中关于搭建组件的定义信息。另外，服务端还可以提供具体用于生成搭建区块的功能模块。该模块中可以预先保存具体用于进行图片中的元素类型识别的算法模型，以用于根据算法模型的输出结果，将具体识别出的元素映射为已定义搭建组件的相关实现程序，等等。由于具体的低代码开发系统主要面向的用户是页面开发人员，因此，具体的客户端主要用于实现与页面开发人员的人机交互。其中，客户端可以有多种具体的形式，例如，可以以网页形式存在，或者，还可以以独立应用程序或轻应用等形式存在，等等。

下面对本申请实施例提供的具体实现方案进行详细介绍。

实施例一

首先，该实施例一从低代码开发系统的服务端的角度，提供了一种生成页面搭建区块的方法，参见图2，该方法具体可以包括：

S210：接收待处理的输入图片；

在本申请实施例中，低代码开发系统的用户如果浏览到一个已发布的页面(可以是任意系统中的已发布页面，包括各种网页，应用程序中的页面，等等)，其中存在某个功能区块符合待开发的页面的需求，则可以通过对已发布页面中该功能区块进行截图等方式生成具体的图片。之后，可以通过系统的客户端将该图片输入到低代码开发系统中。当然，在具体实现时，也可以通过其他方式获得具体的输入图片，例如，可以是通过一些绘图工具绘制的图片，等等。

无论是何种方式获得的图片，其中都可以包括多个元素，并且这些元素可以与具体低代码开发系统中定义的组件相关。例如，低代码开发系统中定义的组件通常可以包括文本框、下拉框、多选框等等，因此，具体的输入图片中也可以包括这些类型的元素。例如，某个已发布页面如图3所示，某用户在浏览到该已发布页面后，发现其中的“人员基本情况”区块与正在或者将要搭建的页面相符，因此，便可以对该区块进行截图。例如，具体截取的图片可以如图3中的31处所示。或者，具体实现时，也可以将具体功能区块的名称等元素，例如“人员基本情况”的文案等也一并进行截图。

S220：从所述输入图片中识别出至少一个图形元素，并确定所述图形元素对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

在接收到具体的输入图片之后，可以首先从中识别出多个具体的元素，这里的元素具体可以是指输入图片中具体内容的组成元素，具体可以包括文本、图形等。然后，可以通过对其中具体的图形元素进行识别，确定出对应的组件类型信息。这里的组件类型信息，具体就可以与低代码开发系统的素材库中定义的搭建组件类型相关。例如，某低代码开发系统的素材中定义了文本框、下拉框、多选框等等，则具体在对输入图片进行元素类型识别时，就可以确定出输入图片中的某个具体图形元素，是否与某个具体的组件类型相对应。例如，假设识别出输入图片中包括某个矩形框，则可以进一步确定出该矩形框是否对应文本框、下拉框或者多选框等类型的组件。

其中，由于各种不同组件类型在图形特征上通常会有所不同，例如，普通的输入框通常是简单的矩形框，下拉框通常是在矩形框的右侧存在某个方向的“箭头”元素，等等。因此，可以基于视觉识别等方式，来识别出具体的图形元素所属的组件类型。

具体实现时，在一种方式下，可以预先对算法模型(例如，深度学习模型等)进行训练，然后，通过该算法模型学习到的信息，实现对输入图片中包含的元素类型的识别。也就是说，可以通过将所述输入图片输入到预先训练完成的算法模型中，由该算法模型对所述输入图片中包括的元素的类型进行识别。

其中，具体的算法模型可以是利用收集到的训练样本进行训练获得的，具体的训练样本中首先可以包括多个图片样本，这些图片样本同样可以通过对一些已发布页面中的功能区块进行截图的方式来获得(当然，也可以通过其他方式获得，这里不进行限定)。在获得具体的图片样本之后，还可以为图片样本中包括的元素进行类型标注。也就是说，具体的图片样本还可以带有类型标注信息，其中，该类型标注信息可以是与关联的素材库中定义的搭建组件类型相关。也就是说，可以根据具体素材库中定义的搭建组件类型，对图片样本中的元素进行类型标注。例如，某素材库中定义的搭建组件类型包括输入框、下拉框、多选框、日期控件等等，则可以从这些类型标签中，对具体图片样本中的元素进行标注。在获得具体的图片样本以及对应的类型标注信息之后，可以输入到算法模型中进行训练学习，训练完成之后，便可以用于对用户实际输入图片中包含的元素的类型信息进行预测。

需要说明的是，本申请实施例中所述的素材库具体可以是低代码开发系统为用户提供的素材库，在传统方案中，其中可以保存有多个已定义的搭建组件，包括前述输入框、下拉框等。由于具体的搭建组件可以作为搭建页面的素材，因此，可以将保存有具体搭建组件的信息库称为素材库。在本申请实施例中，后续生成具体的搭建区块之后，也可以作为一种素材添加到该素材库中，使得用户不仅可以利用单个的搭建组件进行页面搭建，还可以通过这种搭建区块，实现利用成组的搭建组件进行页面搭建。

S230：将所识别出的至少一个图形元素分别映射为具有对应组件类型属性的搭建组件；所述搭建组件是关联的素材库中已定义的搭建组件；

由于从输入图片中识别出了多个图形元素以及对应的组件类型信息，并且，该组件类型与素材库中已定义的搭建组件的类型是相对应的，因此，识别出多个图形元素以及对应的组件类型信息后，将所识别出的多个图形元素分别映射为具有对应类型属性的搭建组件。其中，在一种实施方式中，具体的搭建组件是系统中预先定义好的，对应于特定的组件ID或其它标识信息，当将识别后的图形元素映射为对应的搭建组件时，可以建立该图形元素与特定组件ID的关联关系。

S240：通过将映射出的至少一个搭建组件进行组合，生成搭建区块，所述搭建区块用于搭建页面。

在将识别出的元素映射成素材库中的多个具体的搭建组件之后，可以将这些搭建组件进行组合，生成搭建区块。也就是说，一个搭建区块可以对应多个搭建组件，这种搭建区块可以用于进行页面搭建。在一种具体的实现方式下，在具体通过系统的搭建界面进行页面搭建时，可以以所述搭建区块为单位添加到搭建界面中的可选素材列表中，在具体的搭建区块被选择后，可以将关联的多个搭建组件以组合的形式一次性展示到搭建界面的编辑区域。也就是说，仅需要执行一次拖动操作，即可将多个搭建组件展示到编辑区域，而不必再分别从素材列表中逐个进行拖动操作。

具体实现时，同一个搭建区块关联的多个搭建组件之间可以是无序的，在一次性将多个搭建组件拖动到编辑区之后，各个搭建组件也可以无序放置，之后，用户可以通过手动的方式对具体搭建组件的位置等信息进行调整。或者，在另一种方式下，由于具体的元素在原始输入图片中也是存在布局方式信息的，包括各个元素所在的行、列、坐标等，因此，还可以在生成搭建区块的过程中，确定所述搭建区块关联的搭建组件的布局属性，所述布局属性用于描述对应的搭建组件在所述搭建区块中的布局方式信息，这样，在所述搭建区块被选择后，可以将所述多个搭建组件按照所述布局属性、以组合的形式展示到搭建界面的编辑区域。也就是说，在确定了具体搭建组件的布局属性后，除了可以一次性将多个搭建组件拖动到编辑区域，而且还可以按照一定的顺序进行了排列，以此进一步提升页面搭建的效率。

其中，关于具体搭建组件的布局属性可以是根据对应的图形元素在所述输入图片中的布局信息进行确定的。具体的，可以直接将具体图形元素在输入图片中所在的行、列、坐标等确定为对应的搭建组件在搭建区块中对应的行、列、坐标信息。或者，在另一种方式下，还可以通过其他方式确定搭建组件的布局属性，例如，可以在图形元素的布局方式信息基础上进行调整优化，等等。

具体的，在确定具体图形元素在输入图片中的布局方式信息时，也可以有多种方式。例如，在通过算法模型对输入图片中包含的图形元素对应的组件类型进行识别的情况下，具体的算法模型除了可以输出具体输入图片中所包含的图形元素对应的组件类型预测结果之外，还可以输出所识别出的组件元素在输入图片中的布局方式信息，其中就可以包括具体图形元素所在的行、列、坐标，等等。获取该布局方式信息后，再根据该布局方式信息确定具体图形元素对应的搭建组件在搭建区块中的布局属性。

在实际应用中，具体的输入图片中除了可以包括图形元素之外，通常还存在文本内容。例如，具体的输入框等图形元素的前面等位置还可能包括“人员姓名”等文本内容。因此，具体实现时，还可以对所述输入图片中包含的文本内容进行识别，并确定关联的图形元素；之后，在根据所述图形元素映射出搭建组件时，可以建立所映射出的搭建组件与所述文本内容之间的关联关系；在生成所述搭建区块时，可以将所述映射出的搭建组件与所述文本内容之间的关联关系进行保存，以便在所述搭建区块被选择后，在以组合形式展示多个搭建组件时，还展示关联的文本内容。

也就是说，在确定了具体搭建组件关联的文本内容的情况下，具体将某个搭建区块拖动到编辑区后，不仅可以展示出多个搭建组件，还可以展示出具体搭建组件关联的文本内容。这样，如果当前的搭建需求中也同样需要对应含义的文本内容，则直接用该搭建区块中的默认内容即可，从而进一步提升页面搭建效率。当然，也可以提供对搭建组件进行编辑的操作选项，用户还可以根据实际需求对具体的文本内容进行修改或者重新编辑，等等。

在生成具体的搭建区块之后，可以通过多种方式提供给用户使用。例如，一种方式下，可以确定出确定具体发起搭建区块生成请求的目标用户的标识，也即，提供当前输入图片的目标用户。之后，可以将所述搭建区块与所述目标用户的标识建立关联关系，接收到所述目标用户的页面搭建请求后，将与该目标用户的标识关联的搭建区块添加到搭建界面的可选素材列表中。例如，如图4所示，其展示了可选素材列表界面，可见，其中除了系统中定义的搭建组件之外，还可以包括“签章文件”、“盖章”等搭建区块，这种搭建区块就可以是根据用户的请求生成的，因此，可以称为“用户区块”。也就是说，某用户A请求生成的搭建区块，可以作为该用户A的自定义素材，提供给该用户使用。或者，在另一种方式下，还可以将所述搭建区块添加到通用的素材库中，这样，可以在更多用户的页面搭建过程中对所述搭建区块进行复用。

此外，在具体实现时，为了便于用户识别具体搭建区块对应的功能含义等，还可以确定所述搭建区块的名称标识信息，以用于在搭建界面的可选素材列表中，对所述搭建区块的名称标识进行展示。例如，图3所示例子对应的搭建区块生成之后，对应的名称可以是“人员基本情况”，等等。这样，用户在搭建页面时，如果需要“人员基本情况”相关的功能区块，则可以选择该名称对应的搭建区块，等等。

其中，具体在确定所述搭建区块的名称标识信息时也可以有多种方式。例如，一种方式下，可以根据从所述输入图片中识别出的文本信息，自动确定所述搭建区块的名称标识信息。或者，在另一种方式下，也可以提供用于为所述搭建区块输入名称标识的操作选项，这样，用户可以手动输入具体搭建区块的名称，相应的，可以通过接收到的输入信息确定所述搭建区块的名称标识信息。

总之，通过上述实施例一，可以针对具体的输入图片，对其中包含的图形元素对应的组件类型进行识别，这种组件类型可以是与关联的素材库中定义的搭建组件类型相关。这样，在识别出具体的至少一个图形元素之后，便可以分别映射为具有对应类型属性的搭建组件。进而，可以通过将映射出的至少一个搭建组件进行组合，生成搭建区块。这样，可以使用这种搭建区块进行页面搭建，从而有利于提升页面开发效率。

在可选的方式下，可以以所述搭建区块为单位添加到可选素材列表中，并在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。通过这种方式，如果用户在对已发布的页面进行浏览的过程中发现了可以在其他页面中进行复用的功能区块，则只需要对该功能区块部分进行截图等方式生成图片，并输入到本申请实施例提供的系统中。该系统便可以生成具体的搭建区块，使其可以成为一种搭建素材，供用户在后续的页面搭建过程中进行复用。这样，如果当前正在搭建的页面中需要某功能区块，则可以直接将对应的搭建区块拖动到编辑区，以实现对关联的多个搭建组建的成组拖动，而不再需要逐个拖动多个搭建组件，因此，有利于提升页面搭建效率，降低页面开发成本。

实施例二

该实施例二是在生成了具体搭建区块的基础上，提供了一种页面搭建方法，参见图5，该方法可以包括：

S510：接收到页面搭建请求后，提供可选素材列表，所述可选素材列表中包括搭建区块，所述搭建区块关联有多个搭建组件，所述搭建组件是素材库中已定义的搭建组件；

S520：在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。

其中，具体的搭建区块可以是通过实施例一中提供的方式生成的。也即，可以在接收到待处理的输入图片后，从所述输入图片中识别出其中包括的至少一个图形元素，并确定所述图形元素对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；之后，可以将所识别出的多个图形元素分别映射为具有对应类型属性的搭建组件，再通过将映射出的至少一个搭建组件进行组合，生成所述搭建区块。

或者，也可以将可选素材列表中被选择的搭建组件展示到搭建界面的编辑区域；在所述编辑区域中的多个搭建组件被选中后，提供用于生成搭建区块的操作选项；然后，通过所述操作选项接收到用户的确认操作后，将所述被选中的多个搭建组件进行组合，生成所述搭建区块。

另外，具体实现时，搭建区块关联的至少一个搭建组件还可以分别对应有文本内容；在将所述至少一个搭建组件以组合的形式展示到搭建界面的编辑区域时，还可以将所述至少一个搭建组件分别对应的文本内容在所述编辑区域进行展示。

在将所述至少一个搭建组件以组合的形式展示到搭建界面的编辑区域之后，还可以提供用于对所述搭建组件的属性信息进行编辑的操作选项。例如，包括对具体搭建组件的图形属性、关联的文本内容进行编辑，等等。

关于上述实施例二中的未详述部分，可以参见实施例一中的记载，这里不再赘述。

需要说明的是，本申请实施例中可能会涉及到对用户数据的使用，在实际应用中，可以在符合所在国的适用法律法规要求的情况下(例如，用户明确同意，对用户切实通知，等)，在适用法律法规允许的范围内在本文描述的方案中使用用户特定的个人数据。

与实施例一相对应，本申请实施例还提供了一种生成页面搭建区块的装置，参见图6，该装置可以包括：

图片接收单元610，用于接收待处理的输入图片；

元素识别单元620，用于从所述输入图片中识别出至少一个图形元素，并确定所述图形元素对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

映射单元630，用于将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；所述搭建组件是关联的素材库中已定义的搭建组件；

搭建区块生成单元640，用于通过将映射出的至少一个搭建组件进行组合，生成搭建区块，所述搭建区块用于搭建页面。

其中，所述输入图片是通过对已发布页面中包括的目标功能区块中的内容进行截图的方式获得的。

具体的，该装置还可以包括：

布局属性确定单元，用于确定所述搭建区块关联的搭建组件的布局属性，所述布局属性用于描述对应的搭建组件在所述搭建区块中的布局方式信息，以便在所述搭建区块被选择后，将所述多个搭建组件按照所述布局属性、以组合的形式展示到搭建界面的编辑区域。

其中，所述搭建区块关联的搭建组件的布局属性是根据对应的元素在所述输入图片中的布局信息进行确定的。

具体的，所述元素识别单元具体可以用于：

将所述输入图片输入到预先训练完成的算法模型中，以便通过所述算法模型对所述输入图片中包括的图形元素对应的组件类型进行识别；

其中，所述算法模型是利用收集到的训练样本进行训练获得的，所述训练样本中包括图片样本，以及图片样本中包括的图形元素对应的组件类型标注信息，所述组件类型标注信息与关联的素材库中定义的搭建组件类型相关。

具体的，所述算法模型还用于输出所述识别出的图形元素在所述输入图片中的布局方式信息，以便根据所述布局方式信息确定所映射出的搭建组件在所述搭建区块中的布局属性。

另外，该装置还可以包括：

关联元素确定单元，用于对所述输入图片中包含的文本内容进行识别，并确定关联的图形元素；

关联关系建立单元，用于在根据所述图形元素映射出搭建组件时，建立所映射出的搭建组件与所述文本内容之间的关联关系；

关联关系保存单元，用于在生成所述搭建区块时，将所述映射出的搭建组件与所述文本内容之间的关联关系进行保存，以便在所述搭建区块被选择后，在以组合形式展示多个搭建组件时，还展示关联的文本内容。

另外，该装置还可以包括：

用户标识确定单元，用于确定目标用户的标识；所述目标用户为提供所述输入图片的用户；

关联关系建立单元，用于将所述搭建区块与所述目标用户的标识建立关联关系；

添加单元，用于接收到所述目标用户的页面搭建请求后，将与该目标用户的标识关联的搭建区块添加到搭建界面的可选素材列表中。

再者，该装置还可以包括：

素材库添加单元，用于将所述搭建区块添加到通用的素材库中，以便在多个用户的页面搭建过程中对所述搭建区块进行复用。

名称标识确定单元，用于确定所述搭建区块的名称标识信息，以用于在搭建界面的可选素材列表中，对所述搭建区块的名称标识进行展示。

具体的，所述名称标识确定单元具体可以用于：

根据从所述输入图片中识别出的文本信息，确定所述搭建区块的名称标识信息。

或者，所述名称标识确定单元具体可以用于：

提供用于为所述搭建区块输入名称标识的操作选项，以便通过接收到的输入信息确定所述搭建区块的名称标识信息。

其中，在进行页面搭建的过程中，以所述搭建区块为单位添加到可选素材列表中，并在所述搭建区块被选择后，将所述至少一个搭建组件以组合的形式展示到搭建界面的编辑区域。

与实施例二相对应，本申请实施例还提供了一种页面搭建装置，参见图7，该装置可以包括：

素材列表提供单元710，用于接收到页面搭建请求后，提供可选素材列表，所述可选素材列表中包括搭建区块，所述搭建区块关联有多个搭建组件，所述搭建组件是素材库中已定义的搭建组件；

展示单元720，用于在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。

具体的，所述搭建区块是通过以下方式生成的：

接收待处理的输入图片；

从所述输入图片中识别出至少一个图形元素，并确定所述图形元素分别对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；

通过将映射出的至少一个搭建组件进行组合，生成所述搭建区块。

或者，所述搭建区块是通过以下方式生成的：

将可选素材列表中被选择的搭建组件展示到搭建界面的编辑区域；

在所述编辑区域中的多个搭建组件被选中后，提供用于生成搭建区块的操作选项；

通过所述操作选项接收到用户的确认操作后，将所述被选中的多个搭建组件进行组合，生成所述搭建区块。

具体的，所述搭建区块关联的多个搭建组件还分别对应有文本内容；

在将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域，还将所述多个搭建组件分别对应的文本内容在所述编辑区域进行展示。

另外，该装置还可以包括：

编辑操作选项提供单元，用于在将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域之后，提供用于对所述搭建组件的属性信息进行编辑的操作选项。

另外，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述方法实施例中任一项所述的方法的步骤。

以及一种电子设备，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行前述方法实施例中任一项所述的方法的步骤。

其中，图8示例性的展示出了电子设备的架构，具体可以包括处理器810，视频显示适配器811，磁盘驱动器812，输入/输出接口813，网络接口814，以及存储器820。上述处理器810、视频显示适配器811、磁盘驱动器812、输入/输出接口813、网络接口814，与存储器820之间可以通过通信总线830进行通信连接。

其中，处理器810可以采用通用的CPU(Central Processing Unit，处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请所提供的技术方案。

存储器820可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器820可以存储用于控制电子设备800运行的操作系统821，用于控制电子设备800的低级别操作的基本输入输出系统(BIOS)。另外，还可以存储网页浏览器823，数据存储管理系统824，以及页面搭建处理系统825等等。上述页面搭建处理系统825就可以是本申请实施例中具体实现前述各步骤操作的应用程序。总之，在通过软件或者固件来实现本申请所提供的技术方案时，相关的程序代码保存在存储器820中，并由处理器810来调用执行。

输入/输出接口813用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。

网络接口814用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。

总线830包括一通路，在设备的各个组件(例如处理器810、视频显示适配器811、磁盘驱动器812、输入/输出接口813、网络接口814，与存储器820)之间传输信息。

需要说明的是，尽管上述设备仅示出了处理器810、视频显示适配器811、磁盘驱动器812、输入/输出接口813、网络接口814，存储器820，总线830等，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本申请方案所必需的组件，而不必包含图中所示的全部组件。

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

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的生成页面搭建区块的方法及电子设备，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (14)

1.一种生成页面搭建区块的方法，其特征在于，包括：

接收待处理的输入图片；

从所述输入图片中识别出至少一个图形元素，并确定所述图形元素对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；所述搭建组件是关联的素材库中已定义的搭建组件；

通过将映射出的至少一个搭建组件进行组合，生成搭建区块，所述搭建区块用于搭建页面。

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

确定所述搭建区块关联的搭建组件的布局属性，所述布局属性用于描述对应的搭建组件在所述搭建区块中的布局方式信息，以便在所述搭建区块被选择后，将所述多个搭建组件按照所述布局属性、以组合的形式展示到搭建界面的编辑区域。

3.根据权利2所述的方法，其特征在于，

所述搭建区块关联的搭建组件的布局属性是根据对应的图形元素在所述输入图片中的布局信息进行确定的。

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

对所述输入图片中包含的文本内容进行识别，并确定关联的图形元素；

在根据所述图形元素映射出搭建组件时，建立所映射出的搭建组件与所述文本内容之间的关联关系；

在生成所述搭建区块时，将所述映射出的搭建组件与所述文本内容之间的关联关系进行保存，以便在所述搭建区块被选择后，在以组合形式展示多个搭建组件时，还展示关联的文本内容。

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

确定目标用户的标识；所述目标用户为提供所述输入图片的用户；

将所述搭建区块与所述目标用户的标识建立关联关系；

接收到所述目标用户的页面搭建请求后，将与该目标用户的标识关联的搭建区块添加到搭建界面的可选素材列表中。

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

将所述搭建区块添加到通用的素材库中，以便在多个用户的页面搭建过程中对所述搭建区块进行复用。

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

确定所述搭建区块的名称标识信息，以用于在搭建界面的可选素材列表中，对所述搭建区块的名称标识进行展示。

8.根据权利要求7所述的方法，其特征在于，

所述确定所述搭建区块的名称标识信息，包括：

根据从所述输入图片中识别出的文本信息，确定所述搭建区块的名称标识信息。

9.根据权利要求7所述的方法，其特征在于，

所述确定所述搭建区块的名称标识信息，包括：

提供用于为所述搭建区块输入名称标识的操作选项，以便通过接收到的输入信息确定所述搭建区块的名称标识信息。

10.根据权利要求1至9任一项所述的方法，其特征在于，

在进行页面搭建的过程中，以所述搭建区块为单位添加到可选素材列表中，并在所述搭建区块被选择后，将所述至少一个搭建组件以组合的形式展示到搭建界面的编辑区域。

11.一种页面搭建方法，其特征在于，包括：

接收到页面搭建请求后，提供可选素材列表，所述可选素材列表中包括搭建区块，所述搭建区块关联有多个搭建组件，所述搭建组件是素材库中已定义的搭建组件；

在所述搭建区块被选择后，将所述多个搭建组件以组合的形式展示到搭建界面的编辑区域。

12.根据权利要求11所述的方法，其特征在于，

所述搭建区块是通过以下方式生成的：

接收待处理的输入图片；

从所述输入图片中识别出至少一个图形元素，并确定所述图形元素分别对应的组件类型信息；所述组件类型信息与关联的素材库中定义的搭建组件类型相关；

将所识别出的至少一个图形元素分别映射为具有对应类型属性的搭建组件；

通过将映射出的至少一个搭建组件进行组合，生成所述搭建区块。

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

14.一种电子设备，其特征在于，包括：

一个或多个处理器；以及

与所述一个或多个处理器关联的存储器，所述存储器用于存储程序指令,所述程序指令在被所述一个或多个处理器读取执行时，执行权利要求1至12任一项所述的方法的步骤。

Images