CN113393418A - 一种用户界面组件检索方法及装置、设备、存储介质 - Google Patents

一种用户界面组件检索方法及装置、设备、存储介质 Download PDF

Info

Publication number
CN113393418A
CN113393418A CN202110421068.7A CN202110421068A CN113393418A CN 113393418 A CN113393418 A CN 113393418A CN 202110421068 A CN202110421068 A CN 202110421068A CN 113393418 A CN113393418 A CN 113393418A
Authority
CN
China
Prior art keywords
user interface
information
component
frame
input image
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110421068.7A
Other languages
English (en)
Inventor
刘志豪
刘熠辰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Wodong Tianjun Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Wodong Tianjun Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN202110421068.7A priority Critical patent/CN113393418A/zh
Publication of CN113393418A publication Critical patent/CN113393418A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00Image analysis
    • G06T7/0002Inspection of images, e.g. flaw detection
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Abstract

本申请公开了一种UI组件检索方法,包括:至少对输入图像进行图像检测,获得所述输入图像中的UI的边框信息;获得所述UI的内容特征信息;根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述UI匹配的目标UI组件。本申请还公开了一种装置、设备及存储介质。

Description

一种用户界面组件检索方法及装置、设备、存储介质
技术领域
本申请实施例涉及计算机技术领域,涉及但不限于一种用户界面组件检索方法及装置、设备、存储介质。
背景技术
为了提高页面搭建人员的工作效率,页面搭建人员上传用户界面(UserInterface,UI)图片,服务器获取UI组件库中与该UI图片在样式上尽可能匹配的前端组件。相关技术中,检索尽可能匹配的前端组件的方案包括以下两种:基于内容的图像检索和基于自动编码器的方法。其中,基于内容的图像检索是通过图像内容的相似性找到与上传图片最相似的图片,但其关注图片的大体框架,这也导致了该方法无法在UI页面检索方面有好的泛化性。基于自动编码器的方法是通过动编码器学习图片的样式信息,以页面的样式信息查找与上传图片最相似的图片,但是由于设计稿本身的复杂性,简单的自动编码器获取的样式信息并不十分准确。因此,相关技术中,UI组件的检索结果不精确。
发明内容
本申请实施例为解决相关技术中存在的至少一个问题而提供一种用户界面组件检索方法及装置、设备、存储介质,能够提高用户界面组件的检索结果的精确度。
本申请实施例的技术方案是这样实现的:
第一方面,本申请实施例提供一种用户界面组件检索方法,所述方法包括:至少对输入图像进行图像检测,获得所述输入图像中的用户界面的边框信息;获得所述用户界面的内容特征信息;根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件。
第二方面,本申请实施例提供一种用户界面检索装置,包括:
检测单元,用于至少对输入图像进行图像检测,获得所述输入图像中的用户界面的边框信息;
获得单元,用于获得所述用户界面的内容特征信息;
召回单元,用于根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件。
第三方面,本申请实施例提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现上述用户界面组件检索方法中的步骤。
第四方面,本申请实施例提供一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现上述用户界面组件检索方法中的步骤。
本申请实施例中,提供了一种用户界面组件检索方法及装置、设备、存储介质,包括:至少对输入图像进行图像检测,获得所述输入图像中的用户界面的边框信息;获得所述用户界面的内容特征信息;根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件;从而基于输入图像中的用户界面的边框信息和内容特征信息来在前端组件库中进行检索结果的匹配,使得检索到的目标用户界面组件与输入图像中的用户界面的匹配度高,检索结果精确度度高。
附图说明
图1为本申请实施例数据处理系统的可选地架构示意图;
图2为本申请实施例提供的UI组件检索方法的可选地流程示意图;
图3A为本申请实施例提供的UI中部分区域示意图;
图3B为本申请实施例提供的框架的界面示意图;
图4为本申请实施例提供的框架的界面示意图;
图5为本申请实施例提供的框架的界面示意图;
图6为本申请实施例提供的UI组件检索方法的可选地流程示意图;
图7为本申请实施例提供的UI组件检索方法的可选地流程示意图;
图8为本申请实施例提供的UI组件检索装置的可选地结构示意图;
图9为本申请实施例提供的电子设备的可选地结构示意图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚,下面将结合本申请实施例中的附图,对申请的具体技术方案做进一步详细描述。以下实施例用于说明本申请,但不用来限制本申请的范围。
本申请实施例可提供为UI组件检索方法及系统和存储介质。实际应用中,UI组件检索方法可由UI组件检索装置实现,UI组件检索装置中的各功能实体可以由电子设备(如终端设备或服务器)的硬件资源,如处理器等计算资源、通信资源(如用于支持实现光缆、蜂窝等各种方式通信)协同实现。
本申请实施例的UI组件检索方法可应用于图1所示的数据处理系统,包括:客户端10和服务端20,其中,客户端能够基于输入设备与用户进行交互,其中,输入设备包括:显示器、鼠标、键盘等能够接收用户的输入信息的器件。
在一示例中,客户端10与服务端20实施在同一物理实体上。
在一示例中,客户端10与服务端20分别位于不同的物理实体上,此时,服务端20通过网络30能够客户端10进行通信。
这里,服务端20中设置有前端组件库,前端组件库中设置有各种不同的前端组件,即UI组件。
客户端10接收用户的输入操作,基于所述输入操作获得输入图像,并将输入图像发送至服务端20,服务端20至少对输入图像进行图像检测,获得所述输入图像中的UI的边框信息;获得所述UI的内容特征信息;根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述UI匹配的目标UI组件,服务端20将目标UI组件发送至客户端10,使得用户能够基于目标UI组件进行页面的制作。
结合上述数据处理系统,本实施例提出一种UI组件检索方法,能够提高UI组件的检索结果的精确度。
下面,结合图1所示的数据处理系统,对本申请实施例提供的UI组件检索方法、装置、设备和存储介质的各实施例进行说明。
本实施例提供一种UI组件检索方法。该方法所实现的功能可以通过电子设备中的处理器调用程序代码来实现,当然程序代码可以保存在计算机存储介质中,可见,该电子设备至少包括处理器和存储介质。
图2为本申请实施例的一种UI组件检索方法的实现流程示意图,如图2所示,该方法可以包括如下步骤:
S201、至少对输入图像进行图像检测,获得所述输入图像中的UI的边框信息。
客户端可获得用户输入的输入图像,该输入图像的图像内容为涉及的UI样式。其中,输入图像可为UI设计稿的图像。
在一示例中,客户端可直接得到用户输入的输入图像,输入图像的输入方式可包括:扫描、上传、下载等。本申请实施例对客户端接收输入图像的输入方式不进行任何的限定。
在一示例中,客户端中运行有能够接收用户的输入操作,且能够基于用户的输入操作生成输入图像的应用程序。
客户端在获得用户输入的输入图像后,将输入图像发送至服务端,服务端接收到客户端发送的输入图像后,对输入图像进行图像检测,检测输入图像中的UI的边框信息。
这里,检测的边框信息表征输入图像中UI所包括的一个或多个边框,边框信息可包括边框的坐标信息。边框信息表征输入图像中UI的布局,也可称为框架信息。
本申请实施例中,检测的边框信息可表征为边框的各个顶点的坐标。在一示例中,检测的边框信息包括:(x1、y1)、(x2、y2)、(x3、y3),(x4、y4)、(x5、y5)、(x6、y6)、(x7、y7),其中,(x1、y1)、(x2、y2)、(x3、y3)表征边框A的三个顶点,且边框A为三角形,(x4、y4)、(x5、y5)、(x6、y6)、(x7、y7)表征边框B的四个顶点,且边框B为四边形。
本申请实施例中,UI所包括的边框可为三角形、四边形或多边形,本申请实施例对UI所包括的边框的形状不进行任何的限定。
在实际应用中,检测的边框信息表征多个边框的情况下,不同的边框之间可存在重叠。
S202、获得所述UI的内容特征信息。
内容特征信息可包括:使用锚点的标记、展示时间的框架、标志(logo)、优惠券、视频摘要等能够表征该UI的界面内容的关键信息。本申请实施例中,UI的内容特征信息能够将该UI和其他的UI进行区分。
本申请实施例中,UI的内容特征信息可包括以下信息中的一种或两种的组合:文本特征信息和图像特征信息;其中,文本特征信息为能够有效表征该UI的文本内容,图像特征信息为能够有效表征该UI的图像的文本信息。
本申请实施例中,获得UI的内容特征信息的获得方式可包括以下方式中的一种或多种的组合:
方式一、文本识别;
方式二、特定区域检测。
在方式一中,通过文本识别来识别输入图像中所包括的文本内容,得到UI所包括的文本内容,并从所包括的文本内容中确定该UI的关键内容作为该UI的文本特征信息。
这里,可通过文本检测确定输入图像中包括的文本区域,并通过文本识别对文本区域的文本内容进行识别,得到UI所包括的文本内容。其中,文本区域为包括文本内容的区域。
在一示例中,UI中包括有图3A所示的优惠券图像,且优惠券所包括的文本内容包括:面额、领取时机、使用条件等参数,则将面额、领取时机作为关键信息。其中,名额包括:300元,领取时机包括:立即领取,使用条件包括:满1000元使用、仅限校园用户、使用时间:6月01日至6月15日。
本申请实施例中,可基于所检测的文本内容中的全部或部分构成文本特征信息,构成的文本特征信息和边框信息来选取目标UI组件。
在方式二中,识别输入图像中是否包括特征区域,在输入图像中包括特征区域的情况下,将输入图像输入分类模型,得到特征区域的图像信息即图像特征信息。
本申请实施例中,对实施S201和S202的先后顺序不进行任何限定。
S203、根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述UI匹配的目标UI组件。
在得到输入图像的UI的边框信息和内容特征信息后,根据UI的边框信息和内容特征信息从前端组件库中与UI匹配的目标UI组件。
这里,召回的目标UI组件的边框信息与UI的边框信息匹配,且内容特征信息与UI的内容特征信息匹配。
本申请实施例中,召回目标UI组件的召回方式可包括以下召回方式中的一种或多种的组合:
召回方式一、基于规则召回;
召回方式二、基于转换模型召回等。
在召回方式一中,设置匹配规则,根据匹配规则确定UI的边框信息与前端组件库中各UI组件的边框信息之间的相似度,并将相似度大于相似度阈值的UI组件从前端组件库中召回。
本申请实施例中,对于边框信息,匹配规则可为计算识别的边框信息与前端组件中UI组件的边框信息的相似度。对于内容特征信息,可通过正则匹配的方式来计算识别的内容特征信息与前端组件中UI组件的内容特征信息之间的相似度,也可构建内容特征信息对应的词向量,计算内容特征信息对应的词向量与前端组件中UI组件的内容特征信息之间的相似度。
在召回方式二中,通过转换模型将UI的边框信息或内容特征信息转换为一个框架向量或界面特征向量,将该UI对应的框架向量或界面特征向量与前端组件库中各UI组件对应的框架向量或界面特征向量进行比较,并查找前端组件库中与UI对应的框架向量或界面特征向量最相似的框架向量或界面特征向量,将查找的框架向量或界面特征向量对应的UI组件作为召回的UI组件。其中,各UI组件对应的框架向量或界面特征向量是通过转换模型对对应UI组件的组件边框信息或组件特征信息进行转换得到。
在实际应用中,转换模型可通过前端组件库中的UI组件训练得到。
本申请实施例中,服务端中可存储前端组件库中各UI组件的组件信息,其中,组件信息包括:组件索引、组件边框信息、组件特征信息等,其中,组件边框信息为UI组件所包括的框架的样式的表示,组件特征信息为UI组件所包括的文本、图像等关键内容的表示。
服务端将UI的边框信息和内容特征信息与各组件信息进行匹配,确定与组件信息与UI的边框信息和内容特征信息的组件信息,并基于查找的组件信息中的组件索引从前端组件库中召回目标UI组件。
本申请实施例中,至少对输入图像进行图像检测,获得所述输入图像中的UI的边框信息;获得所述UI的内容特征信息;根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述UI匹配的目标UI组件;从而基于输入图像中的UI的边框信息和内容特征信息来在前端组件库中进行检索结果的匹配,使得检索到的目标UI组件与输入图像中的UI的匹配度高,检索结果精确度度高。
在一些实施例中,所述边框信息包括第一边框信息和第二边框信息,S201的实施包括:
S2011、对所述输入图像进行图像检测,获得表征所述UI中的边框的第一边框信息;
S2012、对所述输入图像进行文本检测,获取表征所述UI中的文本区域的第二边框信息。
第一边框信息为UI中的线条所构成的边框的信息,表征UI中的线条所构成的边框,第二边框信息为UI中的包括文本的文本区域的边框。这里,第二边框信息所表征的边框在UI中不存在可视的线条。
在一示例中,UI中的部分区域如图3B所示,包括:边框301和文本302,则通过图像检测得到边框301的边框信息,通过文本检测得到文本302所在的文本区域303的边框信息。
在一些实施例中,所述内容特征信息包括:文本特征信息,S202的实施包括:对所述输入图像进行文本检测,确定所述输入图像中包括文本内容的文本区域;对所述文本区域进行文本识别,获得所述UI的文本内容;对所述文本内容进行分析,确定所述文本特征信息。
本申请实施例中,识别的文本特征信息为输入图像的UI界面中所包括的文本特征信息。
这里,在对文本特征信息进行识别之前,可通过文本检测的方式来确定包括文本内容的文本区域,并仅对文本区域进行文本识别,从而在识别输入图像的文本特征信息的同时,减少文本识别的区域、
在一示例中,采用的文本识别方法为光学字符识别(Optical CharacterRecognition,OCR)。
在一示例中,在商品展示的设计UI中,包括的文本特征信息包括:商品详情、店铺信息、价格等信息。
本申请实施例中,对UI界面中的文本特征信息的内容不进行任何的限定。
在一些实施例中,所述内容特征信息包括:图像特征信息,S202的实施包括:确定所述输入图像的特征区域;对所述特征区域的图像内容进行识别,得到所述图像特征信息。
这里,判断输入图像中是否包括特征区域,这里,可对输入图像进行识别,判断输入图像所包括的内容,并判断输入图像所包括的内容是否包括特定图像,将包括特定图像的区域作为特征区域。在一示例中,特征区域包括:优惠券区域、滑动模块区域、视频类模块。
本申请实施例中,可通过图像分类模型来对输入图像进行分类识别,判断输入图像中是否包括特征区域的同时,在输入图像中包括特征区域的情况下,识别输入图像中特征区域的图像的图像内容,得到图像特征信息。这里,图像特征信息可为特征区域的图像中的文字信息,也可为对特征区域的图像进行描述的信息。
在一示例中,特征区域为优惠券区域,则图像特征信息可包括:优惠券以及优惠券的面额、使用参数等。
在一示例中,特征区域包括商品图像,则图像特征信息包括:商品名称、商品参数等。
在一些实施例中,在S203之前,还实施以下步骤:确定所述边框信息表征的至少两个边框中的第一边框与第二边框的重叠度;所述第一边框为所述至少两个边框中任一边框,所述第二边框为所述至少两个边框中除所述第一边框外的任一边框;根据所述第一边框与所述第二边框的重叠度,确定所述至少两个边框中无效边框;将所述无效边框从所述至少两个边框中删除;根据删除所述无效边框的至少两个边框对所述边框信息进行更新。
这里,可计算边框信息所表征的所有边框中任两个边框的重叠度。这里,边框信息包括第一边框信息,还可包括第二边框信息。其中,以任一边框为第一边框,对于任一第一边框,计算该第一边框与其他边框中任一边框的重叠度。
在一示例中,边框信息所表征的边框包括:边框1、边框2、边框3至边框5,则分别计算以下重叠度:边框1与边框2之间的重叠度12、边框1与边框3之间的重叠度13、框1与边框4之间的重叠度14、边框1与边框5之间的重叠度15、边框2与边框3之间的重叠度23、框2与边框4之间的重叠度24、边框2与边框5之间的重叠度25、框3与边框4之间的重叠度34、边框3与边框5之间的重叠度35、以及边框4与边框5之间的重叠度45。
在计算任意两个边框的重叠度后,根据将重叠度符合无效条件的边框作为无效边框从所有边框中删除。在一示例中,无效条件为:一个边框对应的重叠度中超过重叠度阈值的重叠度的数量达到第一数量。本申请实施例中,重叠度阈值与第一数量可根据实际需求进行设置。
在一示例中,如图4所示,边框401与边框402的重叠度大于重叠度阈值,且边框401与边框403的重叠度大于重叠度阈值,当第一数量为2,则确定边框401为无效边框。
在一示例中,第一边框和第二边框的重叠度可通过交并比(Intersection overUnion,IOU)表示。
如图5所示,边框501和边框502的IOU可为边框501和边框502的并集与边框501和边框502的交集(阴影区域503)的大小的比值。
在所有的边框中无效边框删除后,对边框信息进行更新,使得边框信息多表示的边框中不包括无效边框。
在一些实施例中,S203的实施包括:
S2031、至少根据所述边框信息和所述内容特征信息,在所述前端组件库中召回与所述UI匹配的至少两个候选UI组件;
S2032、根据所述至少两个候选UI组件中每一候选UI组件的组件参数,从所述至少两个候选UI组件中,确定所述目标UI组件。
本申请实施例中,至少两个候选UI组件可包括:第一候选UI组件和第二候选UI组件,其中,根据所述边框信息,在所述前端组件库中召回与所述UI匹配的第一候选UI组件;根据所述内容特征信息,在所述前端组件库中召回与所述UI匹配的第二候选UI组件。
此时,通过两路从前端组件库中查找候选UI组件。一路采用边框信息进行查找,一路采用边框信息进行查找。
在一些实施例中,至少两个候选UI组件还可包括:通用UI组件,此时,S2031的实施包括:
根据所述边框信息,在所述前端组件库中召回与所述UI匹配的第一候选UI组件;
根据所述内容特征信息,在所述前端组件库中召回与所述UI匹配的第二候选UI组件;
在所述前端组件库中召回通用组件;所述第一候选组件、所述第二候选UI组件和所述通用组件,构成所述至少两个候选组件。
此时,通过三路从前端组件库中查找候选UI组件。一路采用边框信息进行查找,一路采用内容特征信息进行查找,还有一路直接获取前端组件库中的通用UI组件。
本申请实施例中,可将前端组件库中使用次数大于使用次数阈值的UI组件确定为通用UI组件。
本申请实施例中,前端组件库中的UI组件的组建参数包括边框信息和内容特征信息。通过边框信息进行第一候选UI组件的匹配时,将输入图像的边框信息和前端组件库中各UI组件的边框信息分别进行匹配,从而确定第一候选UI组件。通过内容特征信息进行第二候选UI组件的匹配时,将输入图像的内容特征信息和前端组件库中各UI组件的内容特征信息分别进行匹配,从而确定第二候选UI组件。
从至少两个候选UI组件中选取目标UI组件时,可获取至少两个候选UI组件中每一候选UI组件的组件参数,并通过组件参数对至少两个候选UI组件进行排序,将排序在前的候选UI组件作为目标UI组件。
在一些实施例中,S2032的实施包括:
S20321、根据所述至少两个候选UI组件中每一候选UI组件的组件参数,对所述至少两个候选UI组件进行排序,得到排序结果;
S20322、根据所述排序结果,从所述至少两个候选UI组件中,确定所述目标UI组件。
在S20321中,对UI组件进行排序的组件参数可包括:通用性、长宽比、特征区域包含情况等。其中,特征区域包含情况包括以下两类标识:第一标识和第二标识,第一标识指示当前UI组件中未包括特征区域,第二标识指示当前U组件中包括特征区域。本申请实施例中,还可根据UI组件中包含的特征区域的数量和类型,将UI组件中特征区域的情况进行量化,从而更精确匹配与输入图像的UI相关的UI组件。
这里,在组件参数包括多个的情况下,可对各组件参数进行加权计算,确定各候选组件的分值,基于确定的分值对至少两个候选组件进行排序。
根据组件参数对候选UI组件进行排序后,并候选UI组件中选取第二数量的UI组件作为目标UI组件。
这里,第二数量可为固定值,也可根据需求进行设置。
下面,以UI组件检索场景为例,对本申请实施例提供的UI组件检索方法进行进一步说明。
为了实现通过设计稿图片检索出匹配的前端组件,本技术方案利用图像及文本检测模型获取设计稿的边框信息,使用OCR模型及特定位置子图片分类模型获取特定信息,通过结合这些信息从组件库中召回满足这些信息的组件,然后利用特定信息进行精排过滤,通过这个过程达到精确获取前端组件的功能。
这里,特定位置子图片分类模型能够识别输入图像中是否包括有特征区域,且特征区域的图像为特定位置子图像。
如图6和图7所示,本申请实施例提供的UI组件检索方法包括:
S601、对输入图像进行图像检测,得到图像框。
通过图像检测提取输入图像600的图像框即第一边框信息所表征的边框。
S602、对输入图像进行文本检测,得到文本框。
通过文本检测提取输入图像600的涉及文本的框架的文本框即第二边框信息所表征的边框。
由于输入图像为UI设计稿图片,且UI设计稿图片中通过图像检测方法检测文本可能造成文本检测不全,使用文本检测的结果进行合并补充。
S603、过滤设计稿框架中的无效框。
这里,对S601的图像框和S602的文本框进行过滤,过滤掉无效框,得到不包括无效矿的框架信息60。通过无效框的过滤,获取相对干净的框架结构。其中,可通过IOU值过滤重叠度较大的框。
S604、确定输入图像中特定区域中的特定信息;
这里,判别输入图像中是否包含特定位置模块即特定区域,在包含的情况下,获取特定位置模块的信息,得到特定信息。
S605、对文本框进行文本识别。
使用OCR模型获取所有文本框的文字信息,将得到的文字信息作为特定信息和S604得到的特定信息进行融合,得到特定信息61。
本申请实施例中,UI组件的内容特征信息包括S604得到的特定信息和S605得到的特定信息。
S606、根据框架信息和特定信息从前端组件库中进行UI组件的检索,得到候选UI组件。
这里,将框架信息60和特定信息61输入前端组件库62,以召回UI组件。
本申请实施例中,对前端组件进行框架及特定信息的标记并写入前端组件库62中用于检索。通过算法及规则构建UI设计稿框架与前端组件框架的相似性关系,在前端组件库62中进行UI组件的召回。
其中,前端组件库62中包括有通用前端组件621、前端组件框架信息库622和前端组件特定信息库623。
这里,如图7所示,S606的实施包括:
S6061、从前端组件库中召回通用前端组件;
S6062、将框架信息和前端组件框架信息库中的组件框架信息进行匹配,召回第一候选UI组件;
前端组件框架信息库621包括每一前端组件的框架信息。
这里,根据框架信息60和前端组件框架信息库621从前端组件库中召回满足框架信息的UI组件即第一候选UI组件。
S6063、将特定信息和前端组件特定信息库中的组件特定信息进行匹配,召回第二候选UI组件;
前端组件特定信息库623包括每一前端组件的特定信息。
根据特定信息61和前端组件特定信息库从前端组件库中召回满足特定信息的第二候选UI组件。
其中,召回的通用前端组件即通用UI组件、第一候选UI组件和第二候选UI组件构成候选UI组件。
为了尽量保证召回的数据尽量包含设计稿所含有的框架信息、特定文本内容或特定区域的图像信息并且保证召回结果的可用性,使用三路召回,召回通用组件、满足框架的组件及满足特定信息的候选UI组件63。
S607、对召回的候选UI组件进行排序,确定目标UI组件
对召回的数据经过通用性、长宽比、特定信息包含情况做精排,保证召回的组件尽量在框架、特定信息上满足UI设计稿图片要求。
本申请实施例提供的UI组件检索方法,存在以下特点:
1、通过图像检测及文本检测的方式对图像框架进行提取并过滤整合出设计稿图片的整体框架;
2、通过文本识别获取设计稿文本内容及分类模型得到特定区域的图像信息,抽取设计稿中特定信息。
3、通过框架匹配及特定信息匹配召回并精排组件列表。
图8为本申请实施例的一种UI组件检索装置的结构示意图,如图8所示,UI组件检索装置800,包括:
检测单元801,用于至少对输入图像进行图像检测,获得所述输入图像中的用户界面UI的边框信息;
获得单元802,用于获得所述UI的内容特征信息;
召回单元803,用于根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述UI匹配的目标UI组件。
在一些实施例中,检测单元801,还用于:
对所述输入图像进行图像检测,获得所述边框信息中表征所述UI中的边框的第一边框信息;
对所述输入图像进行文本检测,获取所述边框信息中表征所述UI中的文本区域的第二边框信息。
在一些实施例中,获得单元802,还用于:
对所述输入图像进行文本检测,确定所述输入图像中包括文本内容的文本区域;
对所述文本区域进行文本识别,获得所述UI的文本内容;
对所述文本内容进行分析,确定所述内容特征信息中的文本特征信息。
在一些实施例中,获得单元802,还用于:
确定所述输入图像的特征区域;
对所述特征区域的图像内容进行识别,得到所述内容特征信息中的图像特征信息。
在一些实施例中,装置800还包括:过滤单元,用于:
在根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述UI匹配的目标UI组件之前,确定所述边框信息表征的至少两个边框中的第一边框与第二边框的重叠度;所述第一边框为所述至少两个边框中任一边框,所述第二边框为所述至少两个边框中除所述第一边框外的任一边框;
根据所述第一边框与所述第二边框的重叠度,确定所述至少两个边框中无效边框;
将所述无效边框从所述至少两个边框中删除;根据删除所述无效边框的至少两个边框对所述边框信息进行更新。
在一些实施例中,召回单元803,还用于:
至少根据所述边框信息和所述内容特征信息,在所述前端组件库中召回与所述UI匹配的至少两个候选UI组件;
根据所述至少两个候选UI组件中每一候选UI组件的组件参数,从所述至少两个候选UI组件中,确定所述目标UI组件。
在一些实施例中,召回单元803,还用于:
根据所述边框信息,在所述前端组件库中召回与所述UI匹配的第一候选UI组件;
根据所述内容特征信息,在所述前端组件库中召回与所述UI匹配的第二候选UI组件;
在所述前端组件库中召回通用组件;所述第一候选组件、所述第二候选UI组件和所述通用组件,构成所述至少两个候选组件。
在一些实施例中,召回单元803,还用于:
根据所述至少两个候选UI组件中每一候选UI组件的组件参数,对所述至少两个候选UI组件进行排序,得到排序结果;
根据所述排序结果,从所述至少两个候选UI组件中,确定所述目标UI组件。
需要说明的是,本申请实施例提供的数据处理系统包括所包括的各逻辑单元,可以通过电子设备中的处理器来实现;当然也可通过具体的逻辑电路实现;在实施的过程中,处理器可以为中央处理器(CPU,Central Processing Unit)、微处理器(MPU,MicroProcessor Unit)、数字信号处理器(DSP,Digital Signal Processor)或现场可编程门阵列(FPGA,Field-Programmable Gate Array)等。
以上系统实施例的描述,与上述方法实施例的描述是类似的,具有同方法实施例相似的有益效果。对于本申请系统实施例中未披露的技术细节,请参照本申请方法实施例的描述而理解。
需要说明的是,本申请实施例中,如果以软件功能模块的形式实现上述的UI组件检索方法,并作为独立的产品销售或使用时,也可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ReadOnly Memory,ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样,本申请实施例不限制于任何特定的硬件和软件结合。
本申请实施例还提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述UI组件检索方法中的步骤。
对应地,本申请实施例提供一种存储介质,也就是计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现上述实施例中提供的UI组件检索方法。
这里需要指出的是:以上存储介质实施例的描述,与上述方法实施例的描述是类似的,具有同方法实施例相似的有益效果。对于本申请存储介质实施例中未披露的技术细节,请参照本申请方法实施例的描述而理解。
需要说明的是,图9为本申请实施例电子设备的一种硬件实体示意图,如图9所示,所述电子设备900包括:一个处理器901、至少一个通信总线902、至少一个外部通信接口904和存储器905。其中,通信总线902配置为实现这些组件之间的连接通信。在一示例中,电子设备900还包括:用户接口903、其中,用户接口903可以包括显示屏,外部通信接口904可以包括标准的有线接口和无线接口。
存储器905配置为存储由处理器901可执行的指令和应用,还可以缓存待处理器901以及电子设备中各模块待处理或已经处理的数据(例如,图像数据、音频数据、语音通信数据和视频通信数据),可以通过闪存(FLASH)或随机访问存储器(Random Access Memory,RAM)实现。
应理解,说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此,在整个说明书各处出现的“在一个实施例中”或“在一些实施例中”未必一定指相同的实施例。此外,这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解,在本申请的各种实施例中,上述各过程的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号仅仅为了描述,不代表实施例的优劣。
需要说明的是,在本文中,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
在本申请所提供的几个实施例中,应该理解到,所揭露的设备和方法,可以通过其它的方式实现。以上所描述的设备实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,如:多个单元或组件可以结合,或可以集成到另一个系统,或一些特征可以忽略,或不执行。另外,所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口,设备或单元的间接耦合或通信连接,可以是电性的、机械的或其它形式的。
上述作为分离部件说明的单元可以是、或也可以不是物理上分开的,作为单元显示的部件可以是、或也可以不是物理单元;既可以位于一个地方,也可以分布到多个网络单元上;可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
另外,在本申请各实施例中的各功能单元可以全部集成在一个处理单元中,也可以是各单元分别单独作为一个单元,也可以两个或两个以上单元集成在一个单元中;上述集成的单元既可以采用硬件的形式实现,也可以采用硬件加软件功能单元的形式实现。
本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成,前述的程序可以存储于计算机可读取存储介质中,该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:移动存储设备、只读存储器(Read Only Memory,ROM)、磁碟或者光盘等各种可以存储程序代码的介质。
或者,本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时,也可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器、或者网络设备等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括:移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本申请的实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。

Claims (11)

1.一种用户界面组件检索方法,其特征在于,所述方法包括:
至少对输入图像进行图像检测,获得所述输入图像中的用户界面的边框信息;
获得所述用户界面的内容特征信息;
根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件。
2.根据权利要求1所述的方法,其特征在于,所述边框信息包括第一边框信息和第二边框信息,所述至少对输入图像进行图像检测,获得所述输入图像中的用户界面的边框信息,包括:
对所述输入图像进行图像检测,获得表征所述用户界面中的边框的第一边框信息;
对所述输入图像进行文本检测,获取表征所述用户界面中的文本区域的第二边框信息。
3.根据权利要求1所述的方法,其特征在于,所述内容特征信息包括:文本特征信息,所述获得所述用户界面的内容特征信息,包括:
对所述输入图像进行文本检测,确定所述输入图像中包括文本内容的文本区域;
对所述文本区域进行文本识别,获得所述用户界面的文本内容;
对所述文本内容进行分析,确定所述文本特征信息。
4.根据权利要求1所述的方法,其特征在于,所述内容特征信息包括:图像特征信息,所述获得所述用户界面的内容特征信息,包括:
确定所述输入图像的特征区域;
对所述特征区域的图像内容进行识别,得到所述图像特征信息。
5.根据权利要求1所述的方法,其特征在于,在根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件之前,所述方法还包括:
确定所述边框信息表征的至少两个边框中的第一边框与第二边框的重叠度;所述第一边框为所述至少两个边框中任一边框,所述第二边框为所述至少两个边框中除所述第一边框外的任一边框;
根据所述第一边框与所述第二边框的重叠度,确定所述至少两个边框中无效边框;
将所述无效边框从所述至少两个边框中删除;根据删除所述无效边框的至少两个边框对所述边框信息进行更新。
6.根据权利要求1至5任一项所述的方法,其特征在于,所述根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件,包括:
至少根据所述边框信息和所述内容特征信息,在所述前端组件库中召回与所述用户界面匹配的至少两个候选用户界面组件;
根据所述至少两个候选用户界面组件中每一所述候选用户界面组件的组件参数,从所述至少两个候选用户界面组件中,确定所述目标用户界面组件。
7.根据权利要求6所述的方法,其特征在于,所述至少根据所述边框信息和所述内容特征信息,在所述前端组件库中召回与所述用户界面匹配的至少两个候选用户界面组件,包括:
根据所述边框信息,在所述前端组件库中召回与所述用户界面匹配的第一候选用户界面组件;
根据所述内容特征信息,在所述前端组件库中召回与所述用户界面匹配的第二候选用户界面组件;
在所述前端组件库中召回通用组件;所述第一候选组件、所述第二候选用户界面组件和所述通用组件,构成所述至少两个候选组件。
8.根据权利要求6所述的方法,其特征在于,所述根据所述至少两个候选用户界面组件中每一候选用户界面组件的组件参数,从所述至少两个候选用户界面组件中,确定所述目标用户界面组件,包括:
根据所述至少两个候选用户界面组件中每一所述候选用户界面组件的组件参数,对所述至少两个候选用户界面组件进行排序,得到排序结果;
根据所述排序结果,从所述至少两个候选用户界面组件中,确定所述目标用户界面组件。
9.一种用户界面组件检索装置,其特征在于,所述装置包括:
检测单元,用于至少对输入图像进行图像检测,获得所述输入图像中的用户界面的边框信息;
获得单元,用于获得所述用户界面的内容特征信息;
召回单元,用于根据所述边框信息和所述内容特征信息,在前端组件库中召回与所述用户界面匹配的目标用户界面组件。
10.一种电子设备,其特征在于,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至8任一项所述用户界面组件检索方法中的步骤。
11.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该计算机程序被处理器执行时,实现权利要求1至8任一项所述的用户界面组件检索方法。
CN202110421068.7A 2021-04-19 2021-04-19 一种用户界面组件检索方法及装置、设备、存储介质 Pending CN113393418A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110421068.7A CN113393418A (zh) 2021-04-19 2021-04-19 一种用户界面组件检索方法及装置、设备、存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110421068.7A CN113393418A (zh) 2021-04-19 2021-04-19 一种用户界面组件检索方法及装置、设备、存储介质

Publications (1)

Publication Number Publication Date
CN113393418A true CN113393418A (zh) 2021-09-14

Family

ID=77617586

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110421068.7A Pending CN113393418A (zh) 2021-04-19 2021-04-19 一种用户界面组件检索方法及装置、设备、存储介质

Country Status (1)

Country Link
CN (1) CN113393418A (zh)

Similar Documents

Publication Publication Date Title
US8724908B2 (en) System and method for labeling a collection of images
US8892990B2 (en) Automatic creation of a table and query tools
JP5665125B2 (ja) 画像処理方法、及び、画像処理システム
US20150339348A1 (en) Search method and device
CN109218750B (zh) 视频内容检索的方法、装置、存储介质和终端设备
CN104685501A (zh) 响应于可视化查询标识文本词汇
EP3175375A1 (en) Image based search to identify objects in documents
WO2022001600A1 (zh) 信息解析方法及装置、设备、存储介质
CN107748780B (zh) 一种回收站文件的恢复方法和装置
US10699112B1 (en) Identification of key segments in document images
US20240143684A1 (en) Information presentation method and apparatus, and device and medium
CN103744887A (zh) 一种用于人物搜索的方法、装置和计算机设备
US20160005175A1 (en) Service provision device, and method
CN114564666A (zh) 百科信息展示方法、装置、设备和介质
CN113536172A (zh) 一种百科信息展示的方法、装置及计算机存储介质
CN111027533B (zh) 一种点读坐标的变换方法、系统、终端设备及存储介质
CN110929647B (zh) 一种文本检测方法、装置、设备及存储介质
JPH11250106A (ja) 内容基盤の映像情報を利用した登録商標の自動検索方法
US20160283520A1 (en) Search device, search method, and computer program product
CN113393418A (zh) 一种用户界面组件检索方法及装置、设备、存储介质
CN110853115B (zh) 一种开发流程页面的创建方法及设备
JP7259403B2 (ja) 情報処理装置及びプログラム
CN109492023B (zh) 一种汽车信息处理方法及其设备、计算机存储介质
KR20120133149A (ko) 데이터 태깅 장치, 그의 데이터 태깅 방법 및 데이터 검색 방법
JP5811435B2 (ja) 表示装置及び表示制御プログラム

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination