CN117435194A - 交互界面生成方法、装置、电子设备及介质 - Google Patents

Abstract

本公开提供了一种交互界面生成方法、装置、电子设备、及介质，可以应用于人工智能技术领域。该交互界面生成方法包括：根据第一交互界面的图像数据，确定M个界面元素；根据M个界面元素，确定N个限制条件，其中，限制条件用于限制第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2；根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据包括M+1个节点和N个边，M+1个节点表征M个界面元素和一个空白的交互界面，N个边表征N个限制条件；根据初始图数据，确定目标图数据；以及根据目标图数据，生成第二交互界面。

Description

交互界面生成方法、装置、电子设备及介质

技术领域

本发明涉及人工智能技术领域，具体涉及一种交互界面生成方法、装置、电子设备及介质。

背景技术

随着计算机技术的不断发展，企业的业务需求逐渐向可交互方向发展。例如，企业内部的办公系统通过多种交互页面配置并完成办公任务；用户通过多个功能模块的交互页面获取服务，如，执行交易操作。

在实际应用过程中，大型企业一般会通过统一的交互界面或风格相似的交互页面向内部工作人员、用户提供服务。由于大型企业涉及的应用软件、功能模块众多，对于风格相似的交互界面的组装拼接操作会造成重复性工作量大，组装效率低的技术问题。

发明内容

鉴于上述问题，本公开提供了的一种交互界面生成方法、装置、电子设备及介质。

根据本公开的第一个方面，提供了一种交互界面生成方法，包括：

根据第一交互界面的图像数据，确定M个界面元素；

根据M个界面元素，确定N个限制条件，其中，限制条件用于限制第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2；

根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据包括M+1个节点和N个边，M+1个节点表征M个界面元素和一个空白的交互界面，N个边表征N个限制条件；

根据初始图数据，确定目标图数据；以及

根据目标图数据，生成第二交互界面。

根据本公开的实施例，根据初始图数据，确定目标图数据包括：

根据初始图数据，确定节点特征矩阵和边特征矩阵，其中，节点特征矩阵包括每个节点的元素类型特征、位置特征和尺寸特征，边特征矩阵包括两个节点之间的关系；

将节点特征矩阵和边特征矩阵输入预测模型，输出与每个节点对应的边预测值，预测模型包括图卷积网络；

根据与每个节点对应的边预测值，生成P个预测边，P≥1；以及

根据P个预测边和初始图数据，生成目标图数据。

根据本公开的实施例，目标图数据包括M+1个节点，M+1个节点中每个节点都与至少一个节点之间存在边，边表征两个节点之间的位置关系和大小关系，目标图数据包括的边数目大于初始图数据包括的边数目。

根据本公开的实施例，根据M个界面元素，确定N个限制条件，包括：

展示M个界面元素；以及

响应于接收到用户针对M个界面元素的预设交互操作，获取N个限制条件。

根据本公开的实施例，界面元素包括文本元素和非文本元素；

根据第一交互界面的图像数据，确定M个界面元素，包括：

对图像数据进行区域划分，得到至少一个界面区域；

确定至少一个界面区域各自的二值化图像；

根据至少一个界面区域各自的二值化图像，组合至少一个界面区域，得到M1个待分类元素，M≥M1≥1；

对M1个待分类元素进行分类，得到M1个非文本元素，其中，非文本元素包括至少一个非文本类型的元素；以及

利用场景文本检测算法对图像数据进行检测，得到M2个文本元素，M≥M2≥1，M1+M2＝M。

根据本公开的实施例，对图像数据进行区域划分，得到至少一个界面区域，包括：

确定图像数据的区域边界，得到至少一个初始界面区域；以及

对至少一个初始界面区域进行形状识别，确定至少一个初始界面区域各自的界面区域。

根据本公开的实施例，根据至少一个界面区域各自的二值化图像，组合至少一个界面区域，得到M1个待分类的非文本元素，包括：

基于连通域原理，将至少一个界面区域组合为M1个待分类的非文本元素。

根据本公开的实施例，根据目标图数据，生成第二交互界面，包括：

将空白的交互界面作为初始交互界面，根据目标图数据所表征的M+1个节点之间的位置关系和大小关系，生成第二交互界面。

本公开的第二方面提供了一种交互界面生成装置，包括：

第一确定模块，用于根据第一交互界面的图像数据，确定M个界面元素；

第二确定模块，用于根据M个界面元素，确定N个限制条件，其中，限制条件用于限制第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2；

第一生成模块，用于根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据包括M+1个节点和N个边，M+1个节点表征M个界面元素和一个空白的交互界面，N个边表征N个元素限制条件；

第三确定模块，用于根据初始图数据，确定目标图数据；以及

第二生成模块，用于根据目标图数据，生成第二交互界面。

本公开的第三方面提供了一种电子设备，包括：一个或多个处理器；存储器，用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器执行上述交互界面生成方法。

本公开的第四方面还提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行上述交互界面生成方法。

本公开的第五方面还提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述交互界面生成方法。

本公开的实施例通过对第一交互界面进行解析得到界面元素，并根据解析的界面元素确定限制条件；根据界面元素和限制条件生成初始图数据，并完善初始图数据生成目标图数据，以便基于目标图数据生成第二交互界面，能够实现交互界面的完善、组装、自动生成。由于界面元素是从第一交互界面中获取的，且目标图数据是基于初始图数据确定的，因此，第二交互界面的组装、生成过程无需用户手动组件和手动排列，能够解决交互界面的组装拼接操作会造成重复性工作量大，组装效率低的技术问题，实现降低工作量、减少人工成本以及提高组装效率的技术效果。

附图说明

通过以下参照附图对本公开实施例的描述，本公开的上述内容以及其他目的、特征和优点将更为清楚，在附图中：

图1示意性示出了根据本公开实施例的交互界面生成方法的应用场景；

图2示意性示出了根据本公开实施例的交互界面生成方法的流程图；

图3示意性示出了根据本公开实施例的目标图数据的生成方法的流程图；

图4示意性示出了根据本公开实施例的从初始图数据到目标图数据的预测过程的流程图；

图5示意性示出了根据本公开一具体实施例的界面元素确定方法的流程图；

图6示意性示出了根据本公开实施例的根据第一交互界面生成第二交互界面的应用场景图；

图7示意性示出了根据本公开实施例的交互界面生成装置的结构框图；以及

图8示意性示出了根据本公开实施例的适于交互界面生成方法的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“A、B和C等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。

在本公开的技术方案中，所涉及的数据(如包括但不仅限于用户个人信息)的收集、存储、使用、加工、传输、提供、公开和应用等处理，均符合相关法律法规的规定，采取了必要措施，且不违背公序良俗。

交互界面，也称为用户界面(User Interface，UI界面)是指对软件的人机交互、操作逻辑、界面美观的整体设计。现有的交互界面开发方案包括：开发人员利用指定的图形开发工具按照固有流程完成手动布局、手动建立约束、手动实现数据映射、手动建立控制数据包等。

在实际应用过程中，大型企业一般会通过统一的交互界面或风格相似的交互页面向内部工作人员、用户提供服务。随着业务发展，企业会不断开发或升级功能服务模块、对开发或升级功能服务模块设计对应的UI界面。

针对大型企业，交互界面上的应用图标和应用名称都是现有的、统一的，因此，对于新开发或升级的交互界面的组装拼接操作的重复性高而且工作量大、耗费的人力成本高、组装效率低下。

本公开的实施例提供了一种交互界面生成方法，包括：根据第一交互界面的图像数据，确定M个界面元素；根据M个界面元素，确定N个限制条件，其中，限制条件用于限制第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2；根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据包括M+1个节点和N个边，M+1个节点表征M个界面元素和一个空白的交互界面，N个边表征N个限制条件；根据初始图数据，确定目标图数据；以及根据目标图数据，生成第二交互界面。

图1示意性示出了根据本公开实施例的交互界面生成方法的应用场景。

如图1所示，根据该实施例的应用场景100可以包括第一终端设备101、第二终端设备102、第三终端设备103、网络104和服务器105。网络104用以在第一终端设备101、第二终端设备102、第三终端设备103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用第一终端设备101、第二终端设备102、第三终端设备103中的至少一个通过网络104与服务器105交互，以接收或发送消息等。第一终端设备101、第二终端设备102、第三终端设备103上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

第一终端设备101、第二终端设备102、第三终端设备103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对用户利用第一终端设备101、第二终端设备102、第三终端设备103所浏览的网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的用户请求等数据进行分析等处理，并将处理结果(例如根据用户请求获取或生成的网页、信息、或数据等)反馈给终端设备。

需要说明的是，本公开实施例所提供的交互界面生成方法一般可以由服务器105执行。相应地，本公开实施例所提供的交互界面生成装置一般可以设置于服务器105中。本公开实施例所提供的交互界面生成方法也可以由不同于服务器105且能够与第一终端设备101、第二终端设备102、第三终端设备103和/或服务器105通信的服务器或服务器集群执行。相应地，本公开实施例所提供的交互界面生成装置也可以设置于不同于服务器105且能够与第一终端设备101、第二终端设备102、第三终端设备103和/或服务器105通信的服务器或服务器集群中。

例如，执行交互界面生成的服务器105可以从第一终端设备101、第二终端设备102、第三终端设备103中获取第一交互界面的图像数据，然后根据第一交互界面的图像数据，确定M个界面元素，服务器基于已经确定的M个界面元素确定N个限制条件，服务器根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据还包括一个空白的交互界面，服务器接收预设定限制条件和预测出的限制条件，依据初始图数据确定目标图数据，并依据目标图数据生成第一终端设备101、第二终端设备102、第三终端设备103的交互界面。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

以下将基于图1描述的场景，通过图2～图6对公开实施例的交互界面生成方法进行详细描述。

图2示意性示出了根据本公开实施例的交互界面生成方法的流程图。

如图2所示，该方法200包括操作S210～S250。

在操作S210，根据第一交互界面的图像数据，确定M个界面元素。

根据本公开的实施例，交互界面，也称为用户界面(User Interface，UI界面)。UI界面可以作为用户与计算机等系统之间的交互通道，实现用户与计算机设备之间的交互操作。

例如，用户可以通过交互界面选择所需的服务，如余额查询服务、交易服务等。

根据本公开的实施例，为了描述方便，可以将参考交互界面称为第一交互界面，将基于参考交互界面重构生成的新的交互界面称为第二交互界面。其中，第一交互界面和第二交互界面之间的风格相似。例如，UI界面中的多个图标的构图结构、颜色组成相同或相似。

根据本公开的实施例，第一交互界面的图像数据可以是图片。例如，可以是对第一交互界面的拍摄图片、截图图片等。

根据本公开的实施例，第一交互界面内可以包括多个构图元素，也即界面元素。界面元素是指可满足交互需求的软件或系统界面所包含的满足用户交互要求的一系列元素。例如，第一交互界面中的界面元素包括：图形、窗口、对话框、菜单、滚动条、操作框、操作按钮等。

根据本公开的实施例，根据第一交互界面的图像数据，确定M个界面元素的过程包括：对第一交互界面的图像数据进行区域划分，并从区域划分后的图像中提取出界面元素。

例如，手机界面上有通讯录、短信、邮箱三个界面元素，通过对手机界面上的图像数据进行区域划分后，根据所划分出的图像提取出这三个界面元素。这里需要明确的是，本公开实施例不仅限于手机端的应用，还可以应用于其他交互界面，如网页端、小程序的交互界面等。

在操作S220，根据M个界面元素，确定N个限制条件，其中，限制条件用于限制第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2。

根据本公开的实施例，限制条件是两个界面元素之间的关联关系，其中关联关系包括位置关系和/或尺寸关系。其中，限制条件可以由开发人员输入的。

根据本公开的实施例，在两个界面元素之间存在位置关系和/或尺寸关系的情况下，认为两个界面元素之间存在限制条件。

例如，对于银行的自用取款机的交互界面，交互界面包括取款按钮和存款按钮。其中，取款按钮和存款按钮可以作为两个界面元素，限制条件为取款按钮和存款按钮之间的相对位置，如取款按钮在存款按钮上方或下方。

根据本公开的实施例，第一交互界面中可以包括至少两个界面元素，第一交互界面中的至少两个界面元素之间存在限制条件。如，第一交互界面包括界面元素A、界面元素B、界面元素C，其中，界面元素A和界面元素B之间存在限制条件，界面元素C与界面元素A和界面元素B之间均不存在限制条件。

在操作S230，根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据包括M+1个节点和N个边，M+1个节点表征M个界面元素和一个空白的交互界面，N个边表征N个限制条件。

根据本公开的实施例，图数据可以理解为由多个节点和边组成的数据关系结构，其中，每个节点和边都包含一定特征。

根据本公开的实施例，初始图数据是根据从第一交互界面中获取的M个界面元素、以及用户输入的N个限制条件确定的。其中，初始图数据的节点包括用于表征第一交互界面中的界面元素，边用于表征限制条件。此外，初始图数据还包括用于表征空白的交互界面的一个节点。

根据本公开的实施例，空白的交互界面用于承载从第一交互界面中确定的M个界面元素，通过在空白的交互界面上重新排布、组装M个界面元素，形成第二交互界面。

在操作S240，根据初始图数据，确定目标图数据。

根据本公开的实施例，由于用户输入的N个限制条件并不全面，M个界面元素之间还存在其他限制条件。由此，可以利用神经网络根据初始图数据预测得到新的边，形成目标图数据。其中，新的边即为预测得到的新的限制条件。

例如，通过深度学习算法训练神经网络得到训练好的神经网络模型，之后，利用训练好的神经网络模型对初始图数据进行处理，输出目标图数据。

在操作S250，根据目标图数据，生成第二交互界面。

根据本公开的实施例，确定目标图数据之后，可以将目标图数据中边表征的限制条件，在空白的交互界面上迭代组装M个界面元素，生成第二交互界面。

本公开的实施例通过对第一交互界面进行解析得到界面元素，并根据解析的界面元素确定限制条件；根据界面元素和限制条件生成初始图数据，并完善初始图数据生成目标图数据，以便基于目标图数据生成第二交互界面，能够实现交互界面的完善、组装、自动生成。由于界面元素是从第一交互界面中获取的，且目标图数据是基于初始图数据确定的，因此，第二交互界面的组装、生成过程无需用户手动组件和手动排列，能够解决交互界面的组装拼接操作会造成重复性工作量大，组装效率低的技术问题，实现降低工作量、减少人工成本以及提高组装效率的技术效果。

根据本公开的实施例，目标图数据包括M+1个节点，M+1个节点中每个节点都与至少一个节点之间存在边，边表征两个节点之间的位置关系和大小关系，目标图数据包括的边数目大于初始图数据包括的边数目。

根据本公开的实施例，通过对初始图数据中至少两个界面元素之间的边进行预测，生成目标图数据，能够将不全面的限制条件补齐，以便生成完整的第二交互界面。

图3示意性示出了根据本公开实施例的目标图数据的生成方法的流程图。

如图3所示，该实施例的根据初始图数据确定目标图数据的方法300包括操作S341～操作S344，可以作为操作S240的一个具体实施例。

在操作S341，根据初始图数据，确定节点特征矩阵和边特征矩阵，其中，节点特征矩阵包括每个节点的元素类型特征、位置特征和尺寸特征，边特征矩阵包括两个节点之间的关系。

在操作S342，将节点特征矩阵和边特征矩阵输入预测模型，输出与每个节点对应的边预测值，预测模型包括图卷积网络。

在操作S343，根据与每个节点对应的边预测值，生成P个预测边，P≥1。

在操作S344，根据P个预测边和初始图数据，生成目标图数据。

根据本公开的实施例，节点特征矩阵用于表征节点的特征，边特征矩阵用于表征M+1个节点之间是否存在边。其中，边特征矩阵可以理解为表征节点之间的关系的邻接矩阵。

根据本公开的实施例，节点特征矩阵中每个节点都包括元素类型特征、位置特征和尺寸特征。元素类型特征用于表征节点的类型，如，文本元素、非文本元素和空白的交互界面；位置特征可以包括节点的位置，例如在交互界面中的坐标；尺寸特征可以表征界面元素的大小，例如文本元素的字号、非文本元素的大小，如100像素×100像素，100mm×100mm等。

根据本公开的实施例，元素类型特征还可以用于表征具体的元素类型。例如，对于非文本元素，元素类型特征可以表征按钮、图标、导航栏等。

根据本公开的实施例，两个界面元素之间的限制条件可以仅包括位置关系或尺寸关系；还可以同时包括位置关系和尺寸关系。

例如，由界面元素映射得到的两个节点之间的位置关系可以是：上、下、左、右，也可以是左上、右下等。如：logo在整个交互界面的左上方，图片a在正文b的正下方等。

由界面元素映射得到的两个节点之间的大小关系可以是：大于、小于。例如，广告a大于logo，标题b小于正文c等。

根据本公开的实施例，预测模型用于预测每个节点对应的边预测值，所预测出来的边预测值用于确定界面元素之间是否存在限制条件。

例如，边预测值大于0.8，表征两个界面元素之间存在限制条件，在上述两个界面元素之间生成一条预测边。边预测值小于0.8，表征两个界面元素之间不存在限制条件，不在上述两个界面元素之间生成预测边。

根据本公开的实施例，预测模型包括图卷积网络(GCN)。预测模型可以根据交叉熵损失(L_cls)和KL损失来构建重构损失(L_rel)。利用构建的重构损失满足：

其中，λ_cls和分别表示交叉熵损失与KL损失的调节参数。

在本公开的实施例中，由于检测到的UI界面元素数量是未知的，用户输入的限制条件也不一定是全面的，因此，利用预测模型能够对初始图数据进行处理生成完整的目标图数据，以便生成第二交互界面，实现在重组交互界面的过程中完善限制条件，生成更准确、更符合预期的第二交互界面。

图4示意性示出了根据本公开实施例的从初始图数据到目标图数据的预测过程的流程图。

如图4所示，预测前的初始图数据包括7个节点和6个边，将初始图数据输入预测模型，输出预测后的的目标图数据包括7个节点和9个边。在目标图数据中，实线表征初始图数据中已有的边，虚线表征预测边。

根据本公开的实施例，根据M个界面元素，确定N个限制条件，包括：展示M个界面元素；以及响应于接收到用户针对M个界面元素的预设交互操作，获取N个限制条件。

根据本公开的实施例，在从第一交互界面中确定M个界面元素之后，可以向用户展示M个界面元素。用户可以通过预设交互操作确定针对M个界面元素的限制条件。

例如，用户可以通过终端设备执行输入操作，输入针对M个界面元素的N个限制条件；之后，由终端设备将输入的N个限制条件返回至执行交互界面生成方法的服务器或终端设备。

或者，用户可以通过终端设备执行选择操作，通过鼠标或触控选择并点击N个限制条件；之后，由终端设备将输入的N个限制条件返回至执行交互界面生成方法的服务器或终端设备。

根据本公开的实施例，界面元素包括文本元素和非文本元素。

例如，一个UI界面通常有多个不同的区域，用于实现不同的功能。例如，图片、正文、图标、按钮、导航栏等等，这些“功能区域”都称为界面元素，也即UI元素。其中，图片、图标、按钮、导航栏为非文本元素，正文为文本元素。

根据本公开的实施例，根据第一交互界面的图像数据，确定M个界面元素，包括：对图像数据进行区域划分，得到至少一个界面区域；确定至少一个界面区域各自的二值化图像；根据至少一个界面区域各自的二值化图像，组合至少一个界面区域，得到M1个待分类元素，M≥M1≥1；对M1个待分类元素进行分类，得到M1个非文本元素，其中，非文本元素包括至少一个非文本类型的元素；以及利用场景文本检测算法对图像数据进行检测，得到M2个文本元素，M≥M2≥1，M1+M2＝M。根据本公开的实施例，可以采用泛洪算法对图像数据进行区域划分，得到界面区域的边界，形成比图像数据尺寸更小的至少一个界面区域。还可以采用其他图像分割算法，在此不再赘述。

作为本公开的另一个具体实施例，还可以将图像分割算法和图像识别算法结合使用，以便得到至少一个界面区域。

根据本公开的实施例，对图像数据进行区域划分，得到至少一个界面区域，包括：确定图像数据的区域边界，得到至少一个初始界面区域；以及对至少一个初始界面区域进行形状识别，确定至少一个初始界面区域各自的界面区域。

例如，先采用泛洪算法划分得到界面区域的边界，形成区域分块图；之后对区域分块图使用形状识别算法，得到若干长方形的区域。其中，这些长方形的区域即为界面区域，界面区域可以被视为一个个独立的UI布局区域，通过至少一个界面区域可以组装得到一个完整的UI元素。根据本公开的实施例，在确定至少一个界面区域之后，可以计算至少一个界面区域的像素梯度，对至少一个界面区域进行二值化。在二值化处理过程中，单个像素点的相邻梯度较小时，该像素点将被视为一个背景点，从而被标记为黑色；否则，将该个像素点标记为白色。二值化图像仅包括黑色和白色的像素点。

根据本公开的实施例，根据至少一个界面区域各自的二值化图像，组合至少一个界面区域，得到M1个待分类的非文本元素，包括：基于连通域原理，将至少一个界面区域组合为M1个待分类的非文本元素。

根据本公开的实施例，在确定至少一个界面区域各自的二值化图像之后，可以使用连通体标记算法，将至少一个界面区域组合为M1个待分类元素。通过使用基于二值图的连通体标记算法检测各个界面区域中的UI元素，并重新计算UI元素边界，能够得到M1个待分类元素。

需要说明的时，由于确定M1个待分类元素的过程仅涉及图像处理，不涉及对非文本元素的分类操作，由此，此时得到的M1个非文本元素为待分类的非文本元素。

根据本公开的实施例，由于非文本元素可以包括多个非文本类型，因此，在确定M个界面元素的过程中，可以将M1个待分类元素分成多个非文本类型的元素。例如，通过训练一个ResNet 50分类器将M1个待分类元素分为至少一个文本类型的非文本元素。

根据本公开的实施例，对于文本元素，可以利用场景文本检测算法对所述图像数据进行检测，得到M2个文本元素。如，场景文本检测算法可以是EAST算法。根据本公开的实施例，可以同时对图像数据进行非文本元素的提取和文本元素的提取，也可以先后对图像数据进行处理。

图5示意性示出了根据本公开一具体实施例的界面元素确定方法的流程图。如图5所示，包括一个判断操作S502和多个数据。针对图像数据501，可以通过判断操作S502是否为文本元素识别图像数据中的文本元素和非文本元素。解析模块通过不同的操作提取对应的UI元素。

对于非文本元素，解析模块可以通过区域划分得到界面区域503；通过二值化处理后组合界面区域，得到非文本UI元素504。再对非文本元素504进行分类，得到分类后的非文本UI元素505；.

对于文本元素，解析模块可以通过场景文本检测算法得到文本UI元素506。分类后的非文本UI元素505和文本UI元素506均为UI元素，也即第一交互界面中的界面元素。

根据本公开的实施例，根据目标图数据，生成第二交互界面，包括：将空白的交互界面作为初始交互界面，根据目标图数据所表征的M+1个节点之间的位置关系和大小关系，生成第二交互界面。

根据本公开的实施例，在确定目标图数据之后，目标图数据的所有节点之间的关系也都变成已知量。由此，可以通过重构模块来生成最终的第二交互界面。

根据本公开的实施例，由于目标图数据中包括一个节点表征空白的交互界面，而目标图数据中不存在孤立节点，因此，可以从空白的交互界面出发，逐个将节点表征的界面元素放置在空白的交互界面中，生成第二交互界面。

例如，可以利用变分自编码器(VAE)模型通过至少M轮迭代将剩余的M个界面元素放置在初始交互界面中。迭代的过程中，每一个界面元素的边界框(也即位置)都基于原始的特征和当前交互界面的情况进行更新。

根据本公开的实施例，预测模型也可以包括图卷积网络和变分自编码器，在生成目标图数据的过程中随时更新图卷积网络，得到最终的目标图数据。之后，根据目标图数据直接组装界面元素得到第二交互界面。

图6示意性示出了根据本公开实施例的根据第一交互界面生成第二交互界面的应用场景图。

如图6所示，第一交互界面601包括界面元素6011、界面元素6012、界面元素6013、界面元素6014和界面元素6015。其中，界面元素6011、界面元素6012为文本元素，界面元素6013、界面元素6014和界面元素6015均为非文本元素。

非文本元素可以有至少一个非文本类型。例如，界面元素6013属于拍摄类型，界面元素6014属于语音类型，界面元素6015属于按钮类型。

根据本公开的实施例，用户输入的限制条件可以为“拍摄类型的非文本元素位于文本元素下方”、“语音类型的非文本元素位于文本元素下方”。限制条件没有限制拍摄类型和语音类型之间的关系，由此，初始图数据中界面元素6013和界面元素6014对应的节点之间没有边。

经过预测模型的预测之后，得到了新的预测关系“拍摄类型的非文本元素位于语音类型的正上方”、“拍摄类型和语音类型的非文本元素均位于文本元素之间的位置”、“按钮类型的非文本元素大于文本元素”等。

由此，目标图数据中界面元素6013和界面元素6014对应的节点之间新增了预测边表征“拍摄类型的非文本元素位于语音类型的正上方”的预测边。其他界面元素之间也新增了对应的预测边。

在确定目标图数据之后，可以基于目标图数据表征的节点特征、边特征生成第二交互界面602。在第二交互界面602中包括界面元素6021、界面元素6022、界面元素6023、界面元素6024和界面元素6025。界面元素6021与界面元素6011相同，界面元素6022与界面元素6012相同…。

在基于目标图数据生成的第二交互界面中，界面元素6023位于界面元素6021下方，界面元素6024也位于界面元素6021下方，分别对应于输入的限制条件“拍摄类型的非文本元素位于文本元素下方”、“相机类型的非文本元素位于文本元素下方”。

界面元素6023位于界面元素6024的正上方，界面元素6023和界面元素6024均位于界面元素6021和界面元素6022之间，界面元素6025大于界面元素6021和界面元素6022，分别对应于预测得到的新的限制条件“拍摄类型的非文本元素位于语音类型的正上方”、“拍摄类型和相机类型的非文本元素均位于文本元素之间的位置”、“按钮类型的非文本元素大于文本元素”。

本公开的实施例能处理输入的UI界面图片，并根据用户给出的限制条件，对其中的UI元素进行调整，重新生成新的布局界面。这还可以自动调整不同设计风格的UI界面，解决不同系统间UI界面设计风格不统一的问题。

图7示意性示出了根据本公开实施例的交互界面生成装置的结构框图。

如图7所示，该实施例的交互界面生成装置700包括第一确定模块710、第二确定模块720、第一生成模块730、第三确定模块740和第二生成模块750。

第一确定模块710，用于根据第一交互界面的图像数据，确定M个界面元素。在一实施例中，第一确定模块710，可以用于执行前文描述的操作S210，在此不再赘述。

第二确定模块720，用于根据M个界面元素，确定N个限制条件，其中，限制条件用于限制第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2。在一实施例中，第二确定模块720可以用于执行前文描述的操作S220，在此不再赘述。

第一生成模块730，用于根据M个界面元素和N个限制条件，生成初始图数据，其中，初始图数据包括M+1个节点和N个边，M+1个节点表征M个界面元素和一个空白的交互界面，N个边表征N个元素限制条件。在一实施例中，第一生成模块730可以用于执行前文描述的操作S230，在此不再赘述。

第三确定模块740，用于根据初始图数据，确定目标图数据。在一实施例中，第三确定模块740可以用于执行前文描述的操作S240，在此不再赘述。

第二生成模块750，用于根据目标图数据，生成第二交互界面。在一实施例中，第二生成模块750可以用于执行前文描述的操作S250，在此不再赘述。

根据本公开的实施例，第三确定模块740包括第一确定单元、第二确定单元、第三确定单元、第四确定单元。

第一确定单元用于根据初始图数据，确定节点特征矩阵和边特征矩阵，其中，节点特征矩阵包括每个节点的元素类型特征、位置特征和尺寸特征，边特征矩阵包括两个节点之间的关系。在一实施例中，第一确定单元可以用于执行前文描述的操作S341，在此不再赘述。

第二确定单元用于将节点特征矩阵和边特征矩阵输入预测模型，输出与每个节点对应的边预测值，预测模型包括图卷积网络。在一实施例中，第二确定单元可以用于执行前文描述的操作S342，在此不再赘述。

第三确定单元用于根据与每个节点对应的边预测值，生成P个预测边，P≥1。在一实施例中，第三确定单元可以用于执行前文描述的操作S343，在此不再赘述。

第四确定单元用于根据P个预测边和初始图数据，生成目标图数据。在一实施例中，第四确定单元可以用于执行前文描述的操作S344，在此不再赘述。

根据本公开的实施例，目标图数据包括M+1个节点，M+1个节点中每个节点都与至少一个节点之间存在边，边表征两个节点之间的位置关系和大小关系，目标图数据包括的边数目大于初始图数据包括的边数目。

根据本公开的实施例，第二确定模块720包括展示单元和获取单元。

展示单元用于展示M个界面元素。

获取单元用于响应于接收到用户针对M个界面元素的预设交互操作，获取N个限制条件。

根据本公开的实施例，界面元素包括文本元素和非文本元素。第一确定模块710包括区域划分单元、二值化处理单元、组合单元、分类单元和文本识别单元。

区域划分单元，用于对图像数据进行区域划分，得到至少一个界面区域。

二值化处理单元，用于确定至少一个界面区域各自的二值化图像。

组合单元，用于根据至少一个界面区域各自的二值化图像，组合至少一个界面区域，得到M1个待分类元素，M≥M1≥1。

分类单元，用于对M1个待分类元素进行分类，得到M1个非文本元素，其中，非文本元素包括至少一个非文本类型的元素。

文本识别单元，用于利用场景文本检测算法对图像数据进行检测，得到M2个文本元素，M≥M2≥1，M1+M2＝M。

根据本公开的实施例，区域划分单元包括第一划分子单元和第二划分子单元。

第一划分子单元用于确定图像数据的区域边界，得到至少一个初始界面区域。

第二划分子单元用于对至少一个初始界面区域进行形状识别，确定至少一个初始界面区域各自的界面区域。

根据本公开的实施例，组合单元包括组合子单元，用于基于连通域原理，将至少一个界面区域组合为M1个待分类的非文本元素。

根据本公开的实施例，第二生成模块750包括生成子单元，用于将空白的交互界面作为初始交互界面，根据目标图数据所表征的M+1个节点之间的位置关系和大小关系，生成第二交互界面。

根据本公开的实施例，第一确定模块710、第二确定模块720、第一生成模块730、第三确定模块740和第二生成模块750中的任意多个模块可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。

根据本公开的实施例，第一确定模块710、第二确定模块720、第一生成模块730、第三确定模块740和第二生成模块750中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，第一确定模块710、第二确定模块720、第一生成模块730、第三确定模块740和第二生成模块750中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图8示意性示出了根据本公开实施例的适于交互界面生成方法的电子设备的方框图。

如图8所示，根据本公开实施例的电子设备800包括处理器801，其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。处理器801例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))等等。处理器801还可以包括用于缓存用途的板载存储器。处理器801可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 803中，存储有电子设备800操作所需的各种程序和数据。处理器801、ROM802以及RAM 803通过总线804彼此相连。处理器801通过执行ROM 802和/或RAM 803中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 802和RAM 803以外的一个或多个存储器中。处理器801也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，电子设备800还可以包括输入/输出(I/O)接口805，输入/输出(I/O)接口805也连接至总线804。电子设备800还可以包括连接至输入/输出I/O接口805的以下部件中的一项或多项：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 802和/或RAM 803和/或ROM 802和RAM 803以外的一个或多个存储器。

本公开的实施例还包括一种计算机程序产品，其包括计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。当计算机程序产品在计算机系统中运行时，该程序代码用于使计算机系统实现本公开实施例所提供上述方法。

在该计算机程序被处理器801执行时执行本公开实施例的系统/装置中限定的上述功能。根据本公开的实施例，上文描述的系统、装置、模块、单元等可以通过计算机程序模块来实现。

在一种实施例中，该计算机程序可以依托于光存储器件、磁存储器件等有形存储介质。在另一种实施例中，该计算机程序也可以在网络介质上以信号的形式进行传输、分发，并通过通信部分809被下载和安装，和/或从可拆卸介质811被安装。该计算机程序包含的程序代码可以用任何适当的网络介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

在这样的实施例中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。在该计算机程序被处理器801执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

根据本公开的实施例，可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例提供的计算机程序的程序代码，具体地，可以利用高级过程和/或面向对象的编程语言、和/或汇编/机器语言来实施这些计算程序。程序设计语言包括但不限于诸如Java，C++，python，“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合或/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上所述的具体实施例，对本公开的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，以上所述仅为本公开的具体实施例而已，并不用于限制本公开，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开的保护范围之内。

Claims (12)

1.一种交互界面生成方法，包括：

根据第一交互界面的图像数据，确定M个界面元素；

根据M个所述界面元素，确定N个限制条件，其中，所述限制条件用于限制所述第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2；

根据M个所述界面元素和N个所述限制条件，生成初始图数据，其中，所述初始图数据包括M+1个节点和N个边，所述M+1个节点表征M个所述界面元素和一个空白的交互界面，所述N个边表征N个所述限制条件；

根据所述初始图数据，确定目标图数据；以及

根据所述目标图数据，生成第二交互界面。

2.根据权利要求1所述的方法，其中，所述根据所述初始图数据，确定目标图数据包括：

根据所述初始图数据，确定节点特征矩阵和边特征矩阵，其中，所述节点特征矩阵包括每个节点的元素类型特征、位置特征和尺寸特征，所述边特征矩阵包括两个节点之间的关系；

将所述节点特征矩阵和所述边特征矩阵输入预测模型，输出与每个节点对应的边预测值，所述预测模型包括图卷积网络；

根据所述与每个节点对应的边预测值，生成P个预测边，P≥1；以及

根据所述P个预测边和所述初始图数据，生成所述目标图数据。

3.根据权利要求1或2所述的方法，其中，所述目标图数据包括M+1个节点，所述M+1个节点中每个节点都与至少一个节点之间存在边，所述边表征两个节点之间的位置关系和大小关系，所述目标图数据包括的边数目大于所述初始图数据包括的边数目。

4.根据权利要求1所述的方法，其中，所述根据M个所述界面元素，确定N个限制条件，包括：

展示M个所述界面元素；以及

响应于接收到用户针对M个所述界面元素的预设交互操作，获取N个所述限制条件。

5.根据权利要求1所述的方法，其中，所述界面元素包括文本元素和非文本元素；

所述根据第一交互界面的图像数据，确定M个界面元素，包括：

对所述图像数据进行区域划分，得到至少一个界面区域；

确定至少一个界面区域各自的二值化图像；

根据所述至少一个界面区域各自的二值化图像，组合所述至少一个界面区域，得到M1个待分类元素，M≥M1≥1；

对所述M1个待分类元素进行分类，得到M1个所述非文本元素，其中，所述非文本元素包括至少一个非文本类型的元素；以及

利用场景文本检测算法对所述图像数据进行检测，得到M2个文本元素，M≥M2≥1，M1+M2＝M。

6.根据权利要求5所述的方法，其中，所述对所述图像数据进行区域划分，得到至少一个界面区域，包括：

确定所述图像数据的区域边界，得到至少一个初始界面区域；以及

对所述至少一个初始界面区域进行形状识别，确定至少一个初始界面区域各自的界面区域。

7.根据权利要求5所述的方法，其中，所述根据所述至少一个界面区域各自的二值化图像，组合所述至少一个界面区域，得到M1个待分类的非文本元素，包括：

基于连通域原理，将所述至少一个界面区域组合为M1个待分类的非文本元素。

8.根据权利要求1所述的方法，其中，所述根据所述目标图数据，生成第二交互界面，包括：

将所述空白的交互界面作为初始交互界面，根据所述目标图数据所表征的所述M+1个节点之间的位置关系和大小关系，生成所述第二交互界面。

9.一种交互界面生成装置，包括：

第一确定模块，用于根据第一交互界面的图像数据，确定M个界面元素；

第二确定模块，用于根据M个所述界面元素，确定N个限制条件，其中，所述限制条件用于限制所述第一交互界面中两个界面元素之间的关联关系，N≥1，M≥2；

第一生成模块，用于根据M个所述界面元素和N个所述限制条件，生成初始图数据，其中，所述初始图数据包括M+1个节点和N个边，所述M+1个节点表征M个所述界面元素和一个空白的交互界面，所述N个边表征N个所述限制条件；

第三确定模块，用于根据所述初始图数据，确定目标图数据；以及

第二生成模块，用于根据所述目标图数据，生成第二交互界面。

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

一个或多个处理器；

存储装置，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器执行根据权利要求1～8中任一项所述的方法。

11.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器执行根据权利要求1～8中任一项所述的方法。

12.一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现根据权利要求1～8中任一项所述的方法。