CN114675913B - 页面布局信息处理方法、装置、电子设备和介质 - Google Patents

Abstract

本公开提供了一种页面布局信息处理方法，涉及人工智能技术领域，尤其涉及页面配置技术领域。实现方案为：响应于在显示界面上对多个组件的移动操作，确定布局雏形，其中，多个组件中的每一个组件具有各自的组件属性；获取多个布局模板，其中，多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的多个组件模板中的每一个组件模板具有各自的组件模板属性；基于布局雏形中的每一个组件的组件属性和多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定多个布局模板中的每一个布局模板与布局雏形的匹配度；以及基于匹配度显示多个布局模板。

Description

页面布局信息处理方法、装置、电子设备和介质

技术领域

本公开涉及人工智能技术领域，尤其涉及页面配置技术领域，具体涉及一种页面布局信息处理方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

背景技术

人工智能是研究使计算机来模拟人的某些思维过程和智能行为(如学习、推理、思考、规划等)的学科，既有硬件层面的技术也有软件层面的技术。人工智能硬件技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理等技术。人工智能软件技术主要包括计算机视觉技术、语音识别技术、自然语言处理技术以及机器学习/深度学习、大数据处理技术、知识图谱技术等几大方向。

数据可以以不同形式、不同类型的图表的方式呈现给用户，以帮助用户根据数据进行分析和决策。将数据依据用户的需求以图表组合的形式更全面、直观的展示给用户，也可以提高数据分析的效率。

在此部分中描述的方法不一定是之前已经设想到或采用的方法。除非另有指明，否则不应假定此部分中描述的任何方法仅因其包括在此部分中就被认为是现有技术。类似地，除非另有指明，否则此部分中提及的问题不应认为在任何现有技术中已被公认。

发明内容

本公开提供了一种页面布局信息处理方法、装置、电子设备、计算机可读存储介质和计算机程序产品。

根据本公开的一方面，提供了一种页面布局信息处理方法，包括：响应于在显示界面上对多个组件的移动操作，确定布局雏形，其中，所述多个组件中的每一个组件具有各自的组件属性；获取多个布局模板，其中，所述多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的所述多个组件模板中的每一个组件模板具有各自的组件模板属性；基于所述布局雏形中的每一个组件的组件属性和所述多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定所述多个布局模板中的每一个布局模板与所述布局雏形的匹配度；以及基于匹配度显示所述多个布局模板。

根据本公开的另一方面，提供了一种机器学习模型的训练方法，包括：获取包括多个样本组件的样本布局雏形，其中，所述多个样本组件中的每一个样本组件具有各自的样本组件属性；构建多个布局模板，并对所述多个布局模板中的每一个布局模板进行编号，其中，每一个布局模板包括多个组件模板；针对每一个布局模板，对该布局模板所包括的所述多个组件模板中的每一个组件模板进行组件模板属性的标注；对所述样本布局雏形标注第一值，其中，所述第一值指示所述样本布局雏形对应的布局模板的编号；将所述样本布局雏形和所述多个布局模板输入机器学习模型，获取所述样本布局雏形的预测值，其中，所述预测值指示所述样本布局雏形与所述多个布局模板中的每一个布局模板的预测匹配度；基于所述样本布局雏形的第一值和预测值，计算损失值；以及基于所述损失值，调整所述机器学习模型的参数。

根据本公开的另一方面，提供了一种页面布局信息处理的装置，包括：移动模块，被配置为响应于在显示界面上对多个组件的移动操作，确定布局雏形，其中，所述多个组件中的每一个组件具有各自的组件属性；第一获取模块，被配置为获取多个布局模板，其中，所述多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的所述多个组件模板中的每一个组件模板具有各自的组件模板属性；确定模块，被配置为基于所述布局雏形中的每一个组件的组件属性和所述多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定所述多个布局模板中的每一个布局模板与所述布局雏形的匹配度；以及排序模块，被配置为基于匹配度显示所述多个布局模板。

根据本公开的另一方面，提供了一种机器学习模型的训练装置，包括：第二获取模块，被配置为获取包括多个样本组件的样本布局雏形，其中，所述多个样本组件中的每一个样本组件具有各自的样本组件属性；构建模块，被配置为构建多个布局模板，并对所述多个布局模板中的每一个布局模板进行编号，其中，每一个布局模板包括多个组件模板；第一标注模块，被配置为针对每一个布局模板，对该布局模板所包括的所述多个组件模板中的每一个组件模板进行组件模板属性的标注；第二标注模块，被配置为对所述样本布局雏形标注第一值，其中，所述第一值指示所述样本布局雏形对应的布局模板的编号；输入模块，被配置为将所述样本布局雏形和所述多个布局模板输入机器学习模型，获取所述样本布局雏形的预测值，其中，所述预测值指示所述样本布局雏形与所述多个布局模板中的每一个布局模板的预测匹配度；计算模块，被配置为基于所述样本布局雏形的第一值和预测值，计算损失值；以及调整模块，被配置为基于所述损失值，调整所述机器学习模型的参数。

根据本公开的另一方面，提供了一种电子设备，包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述任一方法。

根据本公开的另一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行上述任一方法。

根据本公开的另一方面，提供了一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被处理器执行时实现上述任一方法。

根据本公开的一个或多个实施例，提供了一种基于手动移动或拖拽得到的布局雏形获取布局模板的方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图示例性地示出了实施例并且构成说明书的一部分，与说明书的文字描述一起用于讲解实施例的示例性实施方式。所示出的实施例仅出于例示的目的，并不限制权利要求的范围。在所有附图中，相同的附图标记指代类似但不一定相同的要素。

图1示出了根据本公开的实施例的页面布局信息处理方法的流程图；

图2示出了根据本公开的实施例的生成布局模板的示意图；

图3示出了根据本公开的实施例的机器学习模型的训练方法；

图4示出了根据本公开的实施例的页面布局信息处理装置的结构框图；

图5示出了根据本公开的实施例的机器学习模型的训练装置的结构框图；以及

图6示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

在本公开中，除非另有说明，否则使用术语“第一”、“第二”等来描述各种要素不意图限定这些要素的位置关系、时序关系或重要性关系，这种术语只是用于将一个要素与另一要素区分开。在一些示例中，第一要素和第二要素可以指向该要素的同一实例，而在某些情况下，基于上下文的描述，它们也可以指代不同实例。

在本公开中对各种所述示例的描述中所使用的术语只是为了描述特定示例的目的，而并非旨在进行限制。除非上下文另外明确地表明，如果不特意限定要素的数量，则该要素可以是一个也可以是多个。此外，本公开中所使用的术语“和/或”涵盖所列出的项目中的任何一个以及全部可能的组合方式。

相关技术中，对于包含多种类型的数据、图表的组合报告，可以通过在页面中手动拖拽的方式进行布局，然而完全依靠手动拖拽来进行布局，对用户的精确操作有着较高的要求，同时也耗时耗力，使得用户体验不佳。也可以提供固定的报告模板，并将数据填充入模板以展示给用户，然而，固定的报告模板无法有效的满足用户的自定义需求，亦无法满足布局多样性的需求。

为解决上述问题，本公开基于用户的移动或拖拽得到的报告雏形中各组件的属性确定布局模板与布局雏形的匹配度，依据匹配度向用户推荐布局模板，使得所推荐的模板更为满足用户的需求，提升了页面布局的效率并提升了用户体验。

下面将结合附图详细描述本公开的实施例。

图1示出了根据本公开的实施例的页面布局信息处理方法的流程图。如图1所示，页面布局信息处理方法100包括：步骤S101、响应于在显示界面上对多个组件的移动操作，确定布局雏形，其中，所述多个组件中的每一个组件具有各自的组件属性；步骤S102、获取多个布局模板，其中，所述多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的所述多个组件模板中的每一个组件模板具有各自的组件模板属性；步骤S103、基于所述布局雏形中的每一个组件的组件属性和所述多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定所述多个布局模板中的每一个布局模板与所述布局雏形的匹配度；以及步骤S104、基于匹配度显示所述多个布局模板。例如，可以按照由高到低的顺序显示多个布局模板，或者，仅显示匹配度满足预设要求的模版，等等，本公开对此不做具体限定。

通过对组件的移动得到的布局雏形体现了用户对整体布局的大致需求，基于组件的属性确定布局模板与布局雏形之间的匹配度，并基于此可以将多个布局模板进行排序，以向用户推荐与用户移动得到的布局雏形匹配度较高的布局模板，用于页面中多个组件的组合与布局，由此，可以获取得到更能满足用户多样化需求的布局模板用于页面的布局。同时，相比于完全依靠手动拖拽得到的自由布局，本方法对于用户没有技术上的要求，实现起来较为简单，在布局效率上也得到了显著的提升。

在一个示例中，用户移动的组件可以是不同类型、不同形式的图表或图表组合，例如饼状图、折线图、柱状图或其组合等，以满足用户对于呈现不同数据的多样化需求。

根据一些实施例，所述方法还包括：在完成对所述多个组件中的至少一个组件的移动后，对所述至少一个组件的组件属性进行编辑，其中，对于所述多个组件中的每一个组件，所述组件属性包括以下各项中的至少一项：该组件的高度和宽度、该组件相对于编辑区域左侧的距离和该组件相对于编辑区域顶部的距离、该组件在所述布局雏形中的位置以及该组件所对应的数据源，并且其中，所述编辑区域为所述布局雏形所在的最小矩形区域。

除了对组件的移动操作外，还可以依据用户的需求对组件的属性进行个性化编辑。示例性的，在将任一组件移动到显示界面后，可以通过点击该组件来呈现组件的编辑页面，进一步来对组件的属性进行编辑。具体地，组件的高度和宽度指示了组件的大小；组件相对于编辑区域左侧的距离以及组件相对于编辑区域顶部的距离指示了组件位于显示页面的编辑区域中的坐标位置；组件在布局雏形中的位置具体可以包括在布局雏形中的上半部、下半部、左半部、右半部和中部；组件所对应的数据源可以指示组件所展示的数据的内容和类型，用户可以据此选择合适类型的组件来展示相应类型的数据。

根据一些实施例，所述组件模板属性包括以下各项中的至少一项：组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置以及组件模板所对应的数据类型，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

与组件属性相对应，组件模板属性定义了组件模板的大小、坐标位置、在布局模板中的位置以及组件模板所对应的数据类型。其中，组件模板所对应的数据类型对应于组件属性中组件所对应的数据源这一属性，由此，基于数据源中的数据类型，匹配相对应的组件。例如，对于数据百分比的呈现适合应用饼状图，对于数值的具体对比适合应用柱状图，对于呈现数据的变化情况适合应用折线图等。由此，通过组件属性与组件模板属性的一一对应，实现布局雏形与布局模板之间匹配度的计算，进而获取匹配度较高的模板用于页面的布局。

图2示出了根据本公开的实施例的生成布局模板的示意图。如图2所示，显示页面上显示有多个组件201-1～201-3，用户可以在组件列表(图上未示出)中选择多个组件进行移动，经过移动后，多个组件201-1～201-3组合为布局雏形202。本公开对布局雏形中组件的数量不做限定。在得到布局雏形202后，可以获取预设的多个布局模板，针对多个布局模板分别获取多个布局模板中的每一个布局模板与布局雏形之间的匹配度，并在显示页面的布局模板列表中按照匹配度由高到低的顺序显示多个布局模板203-1～203-4，在保证匹配度的同时，为用户提供更多的选择，进而丰富了布局的多样性。在点击多个布局模板203-1～203-4中的任一个布局模板后，可以在显示页面的左侧区域中显示以该布局模板为模板呈现的多个组件201-1～201-3，实现了页面的快速布局。

根据本公开的另一方面，提供了一种机器学习模型的训练方法，用于页面布局信息处理。如图3所示，机器学习模型的训练方法300包括：步骤S301、获取包括多个样本组件的样本布局雏形，其中，所述多个样本组件中的每一个样本组件具有各自的样本组件属性；步骤S302、构建多个布局模板，并对所述多个布局模板中的每一个布局模板进行编号，其中，每一个布局模板包括多个组件模板；步骤S303、针对每一个布局模板，对该布局模板所包括的所述多个组件模板中的每一个组件模板进行组件模板属性的标注；步骤S304、对所述样本布局雏形标注第一值，其中，所述第一值指示所述样本布局雏形对应的布局模板的编号；步骤305、将所述样本布局雏形和所述多个布局模板输入机器学习模型，获取所述样本布局雏形的预测值，其中，所述预测值指示所述样本布局雏形与所述多个布局模板中的每一个布局模板的预测匹配度；步骤S306、基于所述样本布局雏形的第一值和预测值，计算损失值；以及步骤S307、基于所述损失值，调整所述机器学习模型的参数。

由此，通过对包括样本布局雏形和布局模板的训练样本的构建以及基于机器学习模型对模板的分类结果来调整模型参数，实现对机器学习模型的训练，以用于对布局模板与布局雏形之间匹配度的预测。引入了机器学习技术对用户的移动得到的布局雏形进行预测，基于这个预测结果，建立好布局雏形与已有布局模板的映射关系，根据匹配度展示给用户大量可供选择的布局模板列表，供用户自由选择，替代了传统的手动布局，提高了布局生成的效率。降低了用户对多维度数据展示、布局生成的成本。

根据一些实施例，所述样本组件属性包括以下各项中的至少一项：样本组件的高度和宽度、样本组件相对于样本编辑区域左侧的距离和样本组件相对于样本编辑区域顶部的距离、样本组件在所述样本布局雏形中的位置以及样本组件所对应的数据源，并且其中，所述样本编辑区域为所述样本布局雏形所在的最小矩形区域。

具体地，样本组件的高度和宽度指示了样本组件的大小；样本组件相对于样本编辑区域左侧的距离以及样本组件相对于样本编辑区域顶部的距离指示了样本组件位于显示页面的样本编辑区域中的坐标位置；样本组件在样本布局雏形中的位置具体可以包括在样本布局雏形中的上半部、下半部、左半部、右半部和中部；样本组件所对应的数据源可以指示样本组件所展示的数据的内容和类型，可以据此选择合适类型的样本组件来展示相应类型的数据。

根据一些实施例，所述组件模板属性包括以下各项中的至少一项：组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置以及组件模板所对应的数据类型，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

与样本组件属性相对应，组件模板属性定义了组件模板的大小、坐标位置、在布局模板中的位置以及组件模板所对应的数据类型。其中，组件模板所对应的数据类型对应于样本组件属性中样本组件所对应的数据源这一属性，由此，基于数据源中的数据类型，匹配向对应的组件模板。例如，对于数据百分比的呈现适合应用饼状图，对于数值的具体对比适合应用柱状图，对于呈现数据的变化情况适合应用折线图等。由此，通过样本组件属性与组件模板属性的一一对应，实现样本布局雏形与布局模板之间匹配度的计算，进而获取匹配度较高的模板用于页面的布局。

根据一些实施例，所述机器学习模型的训练方法还包括：在将所述样本布局雏形输入所述机器学习模型之前，对所述样本布局雏形中的所述多个样本组件的位置进行预设区间的映射。通过对样本布局雏形进行区间的映射，例如对各样本组件的坐标进行0-100的区间映射，以使得样本布局雏形集中在显示页面中的一个固定的区域中，避免过于发散而影响训练的效果。

根据本公开的另一方面，提供了一种页面布局信息处理的装置。如图4所示，页面布局信息处理的装置400包括：移动模块401，被配置为在显示界面上对多个组件进行移动以得到布局雏形，其中，所述多个组件中的每一个组件具有各自的组件属性；第一获取模块402，被配置为获取多个布局模板，其中，所述多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的所述多个组件模板中的每一个组件模板具有各自的组件模板属性；确定模块403，被配置为基于所述布局雏形中的每一个组件的组件属性和所述多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定所述多个布局模板中的每一个布局模板与所述布局雏形的匹配度；以及排序模块404，被配置为基于匹配度显示所述多个布局模板。

通过移动模块401对组件的移动得到的布局雏形体现了用户对整体布局的大致需求，基于组件的属性由确定模块403确定布局模板与布局雏形之间的匹配度，排序模块404可以基于此对多个布局模板进行排序，以向用户推荐与用户移动得到的布局雏形匹配度较高的布局模板，用于页面中多个组件的组合与布局，由此，可以获取得到更能满足用户多样化需求的布局模板用于页面的布局。同时，相比于完全依靠手动拖拽得到的自由布局，本方法对于用户没有技术上的要求，实现起来较为简单，在布局效率上也得到了显著的提升。

页面布局信息处理的装置400的模块401-404的操作与前述描述的步骤S101-步骤S104的操作类似，在此不作赘述。

根据一些实施例，页面布局信息处理的装置400还包括：编辑模块，被配置为在完成对所述多个组件中的至少一个组件的移动后，对所述至少一个组件的组件属性进行编辑，其中，对于所述多个组件中的每一个组件，所述组件属性包括以下各项中的至少一项：该组件的高度和宽度、该组件相对于编辑区域左侧的距离和该组件相对于编辑区域顶部的距离、该组件在所述布局雏形中的位置以及该组件所对应的数据源，并且其中，所述编辑区域为所述布局雏形所在的最小矩形区域。

除了对组件的移动操作外，还可以由编辑模块依据用户的需求对组件的属性进行个性化编辑。示例性的，在将任一组件移动到显示界面后，可以通过点击该组件来呈现组件的编辑页面，进一步来对组件的属性进行编辑。具体地，组件的高度和宽度指示了组件的大小；组件相对于编辑区域左侧的距离以及组件相对于编辑区域顶部的距离指示了组件位于显示页面的编辑区域中的坐标位置；组件在布局雏形中的位置具体可以包括在布局雏形中的上半部、下半部、左半部、右半部和中部；组件所对应的数据源可以指示组件所展示的数据的内容和类型，用户可以据此选择合适类型的组件来展示相应类型的数据。

根据一些实施例，所述组件模板属性包括以下各项中的至少一项：组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置以及组件模板所对应的数据类型，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

与组件属性相对应，组件模板属性定义了组件模板的大小、坐标位置、在布局模板中的位置以及组件模板所对应的数据类型。其中，组件模板所对应的数据类型对应于组件属性中组件所对应的数据源这一属性，由此，基于数据源中的数据类型，匹配相对应的组件。例如，对于数据百分比的呈现适合应用饼状图，对于数值的具体对比适合应用柱状图，对于呈现数据的变化情况适合应用折线图等。由此，通过组件属性与组件模板属性的一一对应，实现布局雏形与布局模板之间匹配度的计算，进而获取匹配度较高的模板用于页面的布局。

根据本公开的另一方面，提供了一种机器学习模型的训练装置，训练得到的机器学习模型可以用于页面布局信息处理。如图5所示，机器学习模型的训练装置500包括：第二获取模块501，被配置为获取包括多个样本组件的样本布局雏形，其中，所述多个样本组件中的每一个样本组件具有各自的样本组件属性；构建模块502，被配置为构建多个布局模板，并对所述多个布局模板中的每一个布局模板进行编号，其中，每一个布局模板包括多个组件模板；第一标注模块503，被配置为针对每一个布局模板，对该布局模板所包括的所述多个组件模板中的每一个组件模板进行组件模板属性的标注；第二标注模块504，被配置为对所述样本布局雏形标注第一值，其中，所述第一值指示所述样本布局雏形对应的布局模板的编号；输入模块505，被配置为将所述样本布局雏形和所述多个布局模板输入机器学习模型，获取所述样本布局雏形的预测值，其中，所述预测值指示所述样本布局雏形与所述多个布局模板中的每一个布局模板的预测匹配度；计算模块506，被配置为基于所述样本布局雏形的第一值和预测值，计算损失值；以及调整模块507，被配置为基于所述损失值，调整所述机器学习模型的参数。

由此，通过第二获取模块501和构建模块502对包括样本布局雏形和布局模板的训练样本的构建以及由调整模块507基于机器学习模型对模板的分类结果来调整模型参数，实现对机器学习模型的训练，以用于对布局模板与布局雏形之间匹配度的预测。引入了机器学习技术对用户的移动得到的布局雏形进行预测，基于这个预测结果，建立好布局雏形与已有布局模板的映射关系，根据匹配度展示给用户大量可供选择的布局模板列表，供用户自由选择，替代了传统的手动布局，提高了布局生成的效率。降低了用户对多维度数据展示、布局生成的成本。

机器学习模型的训练装置500的模块501-507的操作与前述描述的步骤S301-步骤S307的操作类似，在此不作赘述。

根据一些实施例，所述样本组件属性包括以下各项中的至少一项：样本组件的高度和宽度、样本组件相对于样本编辑区域左侧的距离和样本组件相对于样本编辑区域顶部的距离、样本组件在所述样本布局雏形中的位置以及样本组件所对应的数据源，并且其中，所述样本编辑区域为所述样本布局雏形所在的最小矩形区域。

具体地，样本组件的高度和宽度指示了样本组件的大小；样本组件相对于样本编辑区域左侧的距离以及样本组件相对于样本编辑区域顶部的距离指示了样本组件位于显示页面的样本编辑区域中的坐标位置；样本组件在样本布局雏形中的位置具体可以包括在样本布局雏形中的上半部、下半部、左半部、右半部和中部；样本组件所对应的数据源可以指示样本组件所展示的数据的内容和类型，可以据此选择合适类型的样本组件来展示相应类型的数据。

根据一些实施例，所述组件模板属性包括以下各项中的至少一项：组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置以及组件模板所对应的数据类型，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

与样本组件属性相对应，组件模板属性定义了组件模板的大小、坐标位置、在布局模板中的位置以及组件模板所对应的数据类型。其中，组件模板所对应的数据类型对应于样本组件属性中样本组件所对应的数据源这一属性，由此，基于数据源中的数据类型，匹配向对应的组件模板。例如，对于数据百分比的呈现适合应用饼状图，对于数值的具体对比适合应用柱状图，对于呈现数据的变化情况适合应用折线图等。由此，通过样本组件属性与组件模板属性的一一对应，实现样本布局雏形与布局模板之间匹配度的计算，进而获取匹配度较高的模板用于页面的布局。

根据一些实施例，用于页面布局信息处理的机器学习模型的训练装置500还包括：映射模块，被配置为在将所述样本布局雏形输入所述机器学习模型之前，对所述样本布局雏形中的所述多个样本组件的位置进行预设区间的映射。通过映射模块对样本布局雏形进行区间的映射，例如对各样本组件的坐标进行0-100的区间映射，以使得样本布局雏形集中在显示页面中的一个固定的区域中，避免过于发散而影响训练的效果。

根据本公开的实施例，还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

参考图6，现将描述可以作为本公开的服务器或客户端的电子设备600的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图6所示，电子设备600包括计算单元601，其可以根据存储在只读存储器(ROM)602中的计算机程序或者从存储单元608加载到随机访问存储器(RAM)603中的计算机程序，来执行各种适当的动作和处理。在RAM603中，还可存储电子设备600操作所需的各种程序和数据。计算单元601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

电子设备600中的多个部件连接至I/O接口605，包括：输入单元606、输出单元607、存储单元608以及通信单元609。输入单元606可以是能向电子设备600输入信息的任何类型的设备，输入单元606可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入，并且可以包括但不限于鼠标、键盘、触摸屏、轨迹板、轨迹球、操作杆、麦克风和/或遥控器。输出单元607可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元608可以包括但不限于磁盘、光盘。通信单元609允许电子设备600通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙^TM设备、802.11设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元601可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元601的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元601执行上文所描述的各个方法和处理，例如页面布局信息处理方法。例如，在一些实施例中，页面布局信息处理方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元608。在一些实施例中，计算机程序的部分或者全部可以经由ROM 602和/或通信单元609而被载入和/或安装到电子设备600上。当计算机程序加载到RAM 603并由计算单元601执行时，可以执行上文描述的页面布局信息处理方法的一个或多个步骤。备选地，在其他实施例中，计算单元601可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行页面布局信息处理方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行、也可以顺序地或以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

虽然已经参照附图描述了本公开的实施例或示例，但应理解，上述的方法、系统和设备仅仅是示例性的实施例或示例，本发明的范围并不由这些实施例或示例限制，而是仅由授权后的权利要求书及其等同范围来限定。实施例或示例中的各种要素可以被省略或者可由其等同要素替代。此外，可以通过不同于本公开中描述的次序来执行各步骤。进一步地，可以以各种方式组合实施例或示例中的各种要素。重要的是随着技术的演进，在此描述的很多要素可以由本公开之后出现的等同要素进行替换。

Claims (14)

1.一种页面布局信息处理方法，包括：

响应于在显示界面上对多个组件的移动操作，确定布局雏形，其中，所述多个组件中的每一个组件具有各自的组件属性；

在完成对所述多个组件中的至少一个组件的移动后，对所述至少一个组件的组件属性进行编辑，其中，对于所述多个组件中的每一个组件，所述组件属性包括该组件所对应的数据源和以下各项中的至少一项：

该组件的高度和宽度、该组件相对于编辑区域左侧的距离和该组件相对于编辑区域顶部的距离、该组件在所述布局雏形中的位置，并且其中，所述编辑区域为所述布局雏形所在的最小矩形区域；

获取多个布局模板，其中，所述多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的所述多个组件模板中的每一个组件模板具有各自的组件模板属性；

基于所述布局雏形中的每一个组件的组件属性和所述多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定所述多个布局模板中的每一个布局模板与所述布局雏形的匹配度；以及

基于匹配度显示所述多个布局模板。

2.根据权利要求1所述的方法，其中，所述组件模板属性包括组件模板所对应的数据类型和以下各项中的至少一项：

组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

3.一种机器学习模型的训练方法，包括：

获取包括多个样本组件的样本布局雏形，其中，所述多个样本组件中的每一个样本组件具有各自的样本组件属性；

构建多个布局模板，并对所述多个布局模板中的每一个布局模板进行编号，其中，每一个布局模板包括多个组件模板；

针对每一个布局模板，对该布局模板所包括的所述多个组件模板中的每一个组件模板进行组件模板属性的标注；

对所述样本布局雏形标注第一值，其中，所述第一值指示所述样本布局雏形对应的布局模板的编号；

将所述样本布局雏形和所述多个布局模板输入机器学习模型，获取所述样本布局雏形的预测值，其中，所述预测值指示所述样本布局雏形与所述多个布局模板中的每一个布局模板的预测匹配度；

基于所述样本布局雏形的第一值和预测值，计算损失值；以及

基于所述损失值，调整所述机器学习模型的参数。

4.根据权利要求3所述的方法，其中，所述样本组件属性包括以下各项中的至少一项：

样本组件的高度和宽度、样本组件相对于样本编辑区域左侧的距离和样本组件相对于样本编辑区域顶部的距离、样本组件在所述样本布局雏形中的位置以及样本组件所对应的数据源，并且其中，所述样本编辑区域为所述样本布局雏形所在的最小矩形区域。

5.根据权利要求3所述的方法，其中，所述组件模板属性包括以下各项中的至少一项：

组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置以及组件模板所对应的数据类型，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

6.根据权利要求3-5中任一项所述的方法，还包括：

在将所述样本布局雏形输入所述机器学习模型之前，对所述样本布局雏形中的所述多个样本组件的位置进行预设区间的映射。

7.一种页面布局信息处理装置，包括：

移动模块，被配置为响应于在显示界面上对多个组件的移动操作，确定布局雏形，其中，所述多个组件中的每一个组件具有各自的组件属性；

编辑模块，被配置为在完成对所述多个组件中的至少一个组件的移动后，对所述至少一个组件的组件属性进行编辑，其中，对于所述多个组件中的每一个组件，所述组件属性包括该组件所对应的数据源和以下各项中的至少一项：

该组件的高度和宽度、该组件相对于编辑区域左侧的距离和该组件相对于编辑区域顶部的距离、该组件在所述布局雏形中的位置，并且其中，所述编辑区域为所述布局雏形所在的最小矩形区域；

第一获取模块，被配置为获取多个布局模板，其中，所述多个布局模板中的每一个布局模板包括多个组件模板，并且其中，针对每一个布局模板，该布局模板所包括的所述多个组件模板中的每一个组件模板具有各自的组件模板属性；

确定模块，被配置为基于所述布局雏形中的每一个组件的组件属性和所述多个布局模板中的每一个布局模板中的每一个组件模板的组件模板属性，确定所述多个布局模板中的每一个布局模板与所述布局雏形的匹配度；以及

排序模块，被配置为基于匹配度显示所述多个布局模板。

8.根据权利要求7所述的装置，其中，所述组件模板属性包括组件模板所对应的数据类型和以下各项中的至少一项：

组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离和组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

9.一种机器学习模型的训练装置，包括：

第二获取模块，被配置为获取包括多个样本组件的样本布局雏形，其中，所述多个样本组件中的每一个样本组件具有各自的样本组件属性；

构建模块，被配置为构建多个布局模板，并对所述多个布局模板中的每一个布局模板进行编号，其中，每一个布局模板包括多个组件模板；

第一标注模块，被配置为针对每一个布局模板，对该布局模板所包括的所述多个组件模板中的每一个组件模板进行组件模板属性的标注；

第二标注模块，被配置为对所述样本布局雏形标注第一值，其中，所述第一值指示所述样本布局雏形对应的布局模板的编号；

输入模块，被配置为将所述样本布局雏形和所述多个布局模板输入机器学习模型，获取所述样本布局雏形的预测值，其中，所述预测值指示所述样本布局雏形与所述多个布局模板中的每一个布局模板的预测匹配度；

计算模块，被配置为基于所述样本布局雏形的第一值和预测值，计算损失值；以及

调整模块，被配置为基于所述损失值，调整所述机器学习模型的参数。

10.根据权利要求9所述的装置，其中，所述样本组件属性包括以下各项中的至少一项：

样本组件的高度和宽度、样本组件相对于样本编辑区域左侧的距离和样本组件相对于样本编辑区域顶部的距离、样本组件在所述样本布局雏形中的位置以及样本组件所对应的数据源，并且其中，所述样本编辑区域为所述样本布局雏形所在的最小矩形区域。

11.根据权利要求10所述的装置，其中，所述组件模板属性包括以下各项中的至少一项：

组件模板的高度和宽度、组件模板相对于模板编辑区域左侧的距离、组件模板相对于模板编辑区域顶部的距离、组件模板在所述布局模板中的位置以及组件模板所对应的数据类型，并且其中，所述模板编辑区域为所述布局模板所在的最小矩形区域。

12.根据权利要求9-11中任一项所述的装置，还包括：

映射模块，被配置为在将所述样本布局雏形输入所述机器学习模型之前，对所述样本布局雏形中的所述多个样本组件的位置进行预设区间的映射。

13.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-6中任一项所述的方法。

14.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-6中任一项所述的方法。