CN112835579A - 确定界面代码的方法、装置、电子设备和存储介质 - Google Patents
确定界面代码的方法、装置、电子设备和存储介质 Download PDFInfo
- Publication number
- CN112835579A CN112835579A CN202110157591.3A CN202110157591A CN112835579A CN 112835579 A CN112835579 A CN 112835579A CN 202110157591 A CN202110157591 A CN 202110157591A CN 112835579 A CN112835579 A CN 112835579A
- Authority
- CN
- China
- Prior art keywords
- interface
- component
- information
- code
- determining
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 59
- 238000013461 design Methods 0.000 claims abstract description 25
- 238000010586 diagram Methods 0.000 claims description 29
- 238000012360 testing method Methods 0.000 claims description 22
- 238000004590 computer program Methods 0.000 claims description 12
- 238000000605 extraction Methods 0.000 claims description 6
- 238000012216 screening Methods 0.000 claims description 3
- 239000000126 substance Substances 0.000 claims 1
- 238000004891 communication Methods 0.000 description 11
- 238000011161 development Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 10
- 238000012545 processing Methods 0.000 description 7
- 230000000007 visual effect Effects 0.000 description 6
- 230000006870 function Effects 0.000 description 5
- 238000004458 analytical method Methods 0.000 description 3
- 238000013473 artificial intelligence Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000008439 repair process Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 238000010276 construction Methods 0.000 description 2
- 230000003631 expected effect Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 238000003062 neural network model Methods 0.000 description 2
- 238000012549 training Methods 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 108010001267 Protein Subunits Proteins 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 239000000047 product Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000000758 substrate Substances 0.000 description 1
- 239000013589 supplement Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3684—Test management for test design, e.g. generating new test cases
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
- G06F11/3672—Test management
- G06F11/3688—Test management for test execution, e.g. scheduling of test suites
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/30—Semantic analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/10—Requirements analysis; Specification techniques
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Quality & Reliability (AREA)
- Computer Hardware Design (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了确定界面代码的方法、装置、电子设备和存储介质,涉及计算机技术领域,尤其涉及界面设计领域。确定界面代码的方法具体实现方案为:接收界面需求文档;利用语义识别模型,从所述界面需求文档中提取针对至少一个界面组件各自的需求信息;针对所述至少一个界面组件中的每个界面组件,从预设的组件库中选择与所述每个界面组件的需求信息相匹配的目标组件,并获取所述目标组件的组件信息;以及基于所述目标组件的组件信息,确定界面代码,以便利用所述界面代码生成界面。
Description
技术领域
本公开涉及计算机技术领域,尤其涉及界面设计领域。
背景技术
在软件或网站的开发过程中,需要编写软件或网站的UI界面的代码,在生成界面代码的过程中,通常需要先由设计人员设计出界面的视觉设计稿,再由开发人员根据视觉设计稿编写相应的实现代码,将视觉设计稿用代码的形式来实现。因此,在生成界面代码的过程中人工参与度高,效率较低。
发明内容
本公开提供了一种用于确定界面代码的方法、装置、设备以及存储介质。
根据本公开的一方面,提供了一种确定界面代码的方法,包括:接收界面需求文档;利用语义识别模型,从所述界面需求文档中提取针对至少一个界面组件各自的需求信息;针对所述至少一个界面组件中的每个界面组件,从预设的组件库中选择与所述每个界面组件的需求信息相匹配的目标组件,并获取所述目标组件的组件信息;以及基于所述目标组件的组件信息,确定界面代码,以便利用所述界面代码生成界面。
根据本公开的另一方面,提供了一种确定界面代码的装置,包括:接收模块,用于接收界面需求文档;提取模块,用于利用语义识别模型,从所述界面需求文档中提取针对至少一个界面组件各自的需求信息;筛选模块,用于针对所述至少一个界面组件中的每个界面组件,从预设的组件库中选择与所述每个界面组件的需求信息相匹配的目标组件,并获取所述目标组件的组件信息;以及确定模块,用于基于所述目标组件的组件信息,确定界面代码,以便利用所述界面代码生成界面。
根据本公开的另一方面,提供了一种电子设备,包括:至少一个处理器;以及与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行如上所述的方法。
根据本公开的另一方面,提供了一种存储有计算机指令的非瞬时计算机可读存储介质,其中,所述计算机指令用于使所述计算机执行如上所述的方法。
根据本公开的另一方面,提供了一种计算机程序产品,包括计算机程序,所述计算机程序在被处理器执行时实现如上所述的方法。
应当理解,本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征,也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
附图用于更好地理解本方案,不构成对本公开的限定。其中:
图1示意性示出了根据本公开实施例的可以应用确定界面代码的方法及装置的示例性系统架构;
图2示意性示出了根据本公开实施例的确定界面代码的方法的流程图;
图3示意性示出了根据本公开实施例的通讯录列表组件的示意图;
图4示意性示出了根据本公开实施例的树状结构的示意图;
图5示意性示出了根据本公开实施例的确定界面代码的方法的流程图;
图6示意性示出了根据本公开实施例的通讯录列表组件的操作预期结果的示意图;
图7示意性示出了根据本公开实施例的界面设计图的示意图;
图8示意性示出了根据本公开实施例的界面设计图与界面截屏图像的对比示意图;
图9示意性示出了根据本公开实施例的确定界面代码的装置的框图;以及
图10示出了可以用来实施本公开的实施例的示例电子设备的示意性框图。
具体实施方式
以下结合附图对本公开的示范性实施例做出说明,其中包括本公开实施例的各种细节以助于理解,应当将它们认为仅仅是示范性的。因此,本领域普通技术人员应当认识到,可以对这里描述的实施例做出各种改变和修改,而不会背离本公开的范围和精神。同样,为了清楚和简明,以下的描述中省略了对公知功能和结构的描述。
在此使用的术语仅仅是为了描述具体实施例,而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在,但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。
在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义,除非另外定义。应注意,这里使用的术语应解释为具有与本说明书的上下文相一致的含义,而不应以理想化或过于刻板的方式来解释。
在使用类似于“A、B和C等中至少一个”这样的表述的情况下,一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如,“具有A、B和C中至少一个的系统”应包括但不限于单独具有A、单独具有B、单独具有C、具有A和B、具有A和C、具有B和C、和/或具有A、B、C的系统等)。
本公开的实施例提供了一种确定界面代码的方法,该方法包括以下操作:接收界面需求文档;利用语义识别模型,从界面需求文档中提取针对至少一个界面组件各自的需求信息;针对至少一个界面组件中的每个界面组件,从预设的组件库中选择与每个界面组件的需求信息相匹配的目标组件,并获取目标组件的组件信息;以及基于目标组件的组件信息,确定界面代码,以便利用界面代码生成界面。
图1示意性示出了根据本公开实施例的可以应用确定界面代码的方法及装置的示例性系统架构。
需要注意的是,图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通信的服务器或服务器集群中。
例如,用户可以在终端设备101上编写界面需求文档,或者用户可以将在其他设备上编写完成的界面需求文档传输至终端设备101中。终端设备101可以将界面需求文档发送至服务器105,并由服务器105来执行本公开实施例所提供的确定界面代码的方法,以得到界面代码。服务器105可以将得到的界面代码反馈给终端设备101,以使终端设备101将界面代码展示给用户,终端设备101或服务器105还可以将界面代码汇总至待开发的软件或网站的代码集合中,作为项目的一部分代码。
应该理解,图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。
图2示意性示出了根据本公开实施例的确定界面代码的方法的流程图。
如图2所示,该确定界面代码的方法包括操作S210~S240。
在操作S210,接收界面需求文档。
在操作S220,利用语义识别模型,从界面需求文档中提取针对至少一个界面组件各自的需求信息。
在操作S230,针对至少一个界面组件中的每个界面组件,从预设的组件库中选择与每个界面组件的需求信息相匹配的目标组件,并获取目标组件的组件信息。
在操作S240,基于目标组件的组件信息,确定界面代码,以便利用界面代码生成界面。
在本公开的实施例中,界面可以包含至少一个界面组件,界面需求文档例如至少包括界面组件的类型,其中,界面组件也可称为界面控件,具有多种类型,例如具有通讯录列表、选项列表、聊天框、时钟、视频播放框、虚拟键盘、虚拟按键等等组件类型。此外,界面需求文档中例如还可以包括界面组件的元素信息,以明确界面组件中需要包含的元素的种类,例如通讯录列表组件可以包含多个列表项元素,每个列表项中又可以包含头像、称呼等元素,聊天框组件中可以包含输入框、发送键、展示窗口、会话框等元素,视频播放框可以包含视频窗口、进度条、播放/暂停键等元素。在另一实施例中,界面需求文档中例如还可以包括组件的视觉需求,视觉需求例如可以包括组件或组件元素的形状、颜色、尺寸等样式要求,以及组件或组件元素的位置要求等。在另一实施例中,界面需求文档中例如还可以包括对所需组件的功能要求,例如,组件或组件元素可以被点击、拖拽、滑动等功能要求。用户可以将对界面的以上要求以纯文字的方式呈现,或者可以以图文结合的方式呈现。
在本公开的实施例中,语义识别模型例如可以是神经网络模型,例如可以采用隐性马尔可夫模型,或者可以预先利用若干个界面需求文档的样本进行训练得到语义识别模型。在利用语义识别模型提取界面组件及其需求信息的过程中,可以先对界面需求文档进行特征提取,将提取的特征输入语义识别模型中,模型输出得到至少一个界面组件以及每个界面组件的需求信息。不同界面所需的界面组件的数量可能不同,例如有的界面由一个界面组件形成,有的界面需要由两个或以上的界面组件拼接而成。例如,若界面需求文档是针对聊天软件的界面需求,通过语义分析,例如可以分析出界面包括通讯录列表组件和聊天框组件,以及可以分析出对每个界面组件的具体需求。
在本公开的实施例中,预设的组件库例如可以包含多个界面组件集合,每个界面组件集合对应一种组件类型,每个界面组件集合中可以包含一个或多个相应类型的界面组件,一个集合中的不同界面组件在元素、样式、功能等层面上可以具有区别。每个界面组件可以具有相应的描述信息,例如对于类型、元素、样式等的描述信息。
在本公开的实施例中,在分析得到界面所需的至少一个界面组件之后,可以针对每个界面组件,从组件库中选择一个描述信息与其需求信息相匹配的组件作为目标组件,这样可以得到与至少一个界面组件一一对应的至少一个目标组件。组件库中的每个界面组件可以具有组件信息,组件信息可以存储于组件库中,或者可以存放于其他地址下并将存放地址存储于组件库中。其中,组件信息能够表征组件的组成信息,组件信息可以用于确定组件的代码,进而可以确定界面的代码。在界面由一个目标组件形成的情况下,可以将该目标组件的代码作为界面的代码,在界面由两个或以上的目标组件组成的情况下,可以将匹配的两个或以上的目标组件的代码进行合并,得到界面组件。
根据本公开的实施例,技术人员编写一个界面需求文档,就可以根据本公开实施例的方法获得界面的实现代码,节省人力和时间、提高开发效率。
根据本公开的实施例,组件信息包括用于对组件加以表示的代码。操作S240中的基于目标组件的组件信息确定界面代码包括:将用于对目标组件加以表示的代码作为界面代码。
在本公开的实施例中,对组件加以表示的代码例如可以是指组件的实现代码,即用于实现组件的代码。组件库中可以存储有每个组件的实现代码或者存储有实现代码的存放地址。在操作S230匹配得到目标组件后,可以从组件库中或者从相应的存放地址处获取目标组件的代码,将目标组件的代码作为界面代码。例如,若在操作S230中匹配得到一个目标组件,则将目标组件的代码作为界面的代码,若在操作S230中匹配得到多个目标组件,则将多个目标组件的代码合并的结果作为界面的代码。
根据本公开的实施例,将组件库中各个组件的实现代码作为组件信息进行预先存储,基于这一方式,在匹配得到相应的目标组件后,可以直接获取目标组件的代码,进而可以快速确定界面的代码,进一步提高效率。
根据本公开的另一实施例,组件信息可以包括组件图。其中,组件图可以包含至少一个图形元素。
图3示意性示出了根据本公开实施例的通讯录列表组件的示意图。
如图3所示,通讯录列表组件的图300包括外框301、多个列表项302,每个列表项中可以具有头像303和昵称304。
根据本公开的实施例,操作S240中的基于目标组件的组件信息确定界面代码可以包括以下操作:利用图像识别模型,从组件图中提取组件图的元素属性信息;将元素属性信息转换为具有预定数据格式的数据文件,预定数据格式包括适用于多种编程语言的数据交换格式;通过解析数据文件来确定界面代码。
例如,对于图3所示的组件图,包含的元素例如有外框301、列表项302、头像303和昵称304。元素属性信息可以包括元素的形状、颜色、尺寸等样式信息,也可以包含位置信息,元素的位置信息例如可以是指在以组件图的特征点(例如左上角)为原点的坐标系中的坐标。
在本公开的实施例中,将目标组件的组件图经过特征提取后输入图像识别模型中,可以得到图中包含的元素以及各个元素的属性信息。其中,图像识别模型例如可以是神经网络模型,可以预先根据图片样本训练得到。
根据本公开的实施例,预定数据格式可以包括可扩展标记语言XML格式和对象标记语言JSON格式中的至少一种。
通过图像识别模型得到多个元素的属性信息后,可以根据元素属性信息形成JSON文件或者XML文件,以JSON格式或者XML格式来存储元素属性信息。XML(Extensible MarkupLanguage)和JSON(JavaScript Object Notation)均为数据存储结构,且能够用于不同编程语言之间的数据交换。其中,JSON格式可以采用键值对的形式存储元素属性数据,且能够将数据以树状结构存储。
图4示意性示出了根据本公开实施例的树状结构的示意图。
如图4所示,树状结构包括多级节点,每个节点可以利用键值对的形式存储一个元素的属性信息。若利用图4所示的树状结构存储图3所示的组件图的元素属性信息,第一级节点对应的元素A例如可以是指外框301,第二级节点对应的元素A1~An例如可以分别为各个列表项302,第二级节点对应的元素A11~A1m例如可以分别为列表项302中包含的头像303和昵称304。
根据本公开的实施例,对JSON文件或者XML文件进行解析,可以得到组件的代码,其中,可以预先对应每种编程语言设置一种解释器,根据用户需要的编程语言,可以采用相应的解释器对JSON文件或者XML文件进行解释。或者,可以针对不同的前端开发平台设置不同的解释器,根据用户所用的前端开发平台,可以采用相应的解释器对JSON文件或者XML文件进行解释。例如,分别对应前端开发平台react设置第一解释器,对应前端开发平台Vue设置第二解释器,若用户想要得到对应前端开发平台react的代码,则可以利用第一解释器对JSON文件或者XML文件进行解析,得到符合前端开发平台react格式的代码。其中,解释器可以采用已有的代码转换工具,例如可以将JSON文件转为react组件的jsonx工具。或者,对应不同语言或平台的解释器可以由技术人员进行编写,具体地,可以采用如下的解析方式:从第一级节点进行解析,从第一级节点中提取元素A的属性信息,将属性信息转换为符合相应语言或者平台的代码;再对各个第二级节点进行解析,以此类推,直至解析到最后一级节点的元素。
根据本公开的实施例,将组件库中各个组件的图片作为组件信息进行预先存储,并且在生成界面代码的过程中,先将图片转换为特定数据结构,再将特定数据结构转换为代码,由于特定数据结构可以被转换为不同编程语言或者开发平台的代码,因此,可以提高方案的扩展性和灵活性,满足用户的多种需求。
根据本公开的另一实施例,组件信息包括组件的数据文件,数据文件包括组件的元素属性信息并且数据文件具有预定数据格式,预定数据格式包括适用于多种编程语言的数据交换格式。操作S240中的基于目标组件的组件信息确定界面代码包括:通过解析目标组件的数据文件来确定界面代码。
例如,组件信息可以是指保存有组件元素属性信息的JSON文件或者XML文件。在匹配得到目标组件后,提取目标组件的JSON文件或者XML文件,并将JSON文件或者XML文件转换为代码,得到目标组件的代码,进而可以得到界面的代码。
根据本公开的实施例,将存储有组件的元素属性信息的JSON文件或者XML文件作为组件信息进行预先存储,由于特定数据结构可以被转换为不同编程语言或者开发平台的代码,因此,可以提高方案的扩展性和灵活性,满足用户的多种需求。
根据本公开的实施例,组件信息可以包括上述的组件图、组件代码、组件数据结构中的至少一者。
根据本公开的实施例,在服务器根据界面需求文档得到界面代码之后,可以将界面代码反馈给终端设备,终端设备可以将界面代码展示给技术人员,以使技术人员检查代码是否有误,或者还可以将界面代码汇总至待开发的软件或网站的项目代码集合中。
图5示意性示出了根据本公开实施例的确定界面代码的方法的流程图。
如图5所示,根据本公开的实施例,确定界面代码的方法除了可以包含上述的操作S210~操作S240之外,还可以包括操作S510~S530。
在操作S510,利用语义识别模型,从界面需求文档中提取得到界面操作信息,界面操作信息包括操作方式和操作预期结果。
在操作S520,基于界面操作信息,生成测试用例。
在操作S530,将测试用例发送至终端设备,以使终端设备运行测试用例。
在本公开的实施例中,软件或网站项目开发完毕之后,需要对软件或网站进行测试,以测试软件或网站是否满足预期效果。在测试过程中需要使用到测试用例,测试用例是对测试任务的描述,包括针对输入数据、操作方式和预期效果等的描述内容。
在用户编写界面需求文档时,可以对各个组件的操作方式和操作触发的预期结果的描述。其中,操作方式例如包括单击、双击、滑动、拖拽等操作。
图6示意性示出了根据本公开实施例的通讯录列表组件的操作预期结果的示意图。
如图6所示,例如,对通讯录列表组件600的列表项602进行滑动操作,可以展示“删除”和“备注”点选框。此外,对列表项602的空白区域进行点击操作例如可以触发打电话或者打开聊天框等结果,对列表项602中的头像603进行点击操作例如可以触发放大头像的结果等等。
在本公开的实施例中,对用户需求文档进行语义分析可以得到界面上各个组件或组件元素的操作方式以及操作预期结果,可以根据操作方式以及操作预期结果生成测试用例,并将测试用例反馈至终端设备。利用终端设备上的测试工具调用测试用例以对软件或网站进行自动化测试,模仿用户对软件或网站的页面进行单击、双击、滑动、拖拽等操作,并获取操作触发的实际结果,对比实际结果与操作预期结果,判断两者是否一致,当出现不一致或者操作没有触发任何结果时可以对出现错误的区域进行标记,并将标记展示给技术人员,以使技术人员检查相应区域的代码并修复。或者,当实际结果与操作预期结果出现不一致或者操作没有触发任何结果时,可以由终端设备或者服务器从预设的代码库中查找与操作预期结果相对应的代码并将其替换至或补充至软件或网站的项目代码集合中,实现自动修复。
根据本公开的实施例,根据界面需求文档得到测试用例,无需技术人员人工编写测试用例,可以减少测试过程中的人力成本和时间成本,提升测试效率。
根据本公开的实施例,确定界面代码的方法还包括以下操作:(1)接收界面设计图(以下也称为界面设计稿);(2)利用图像识别模型,从界面设计图中提取元素属性信息;(3)基于元素属性信息,确定界面代码。
图7示意性示出了根据本公开实施例的界面设计图的示意图。
如图7所示,利用图像识别模型,可以提取设计图中包含的元素以及各元素的属性信息,例如可以提取得到列表元素和位于底部的切换栏元素,列表元素中例如包含多个列表项元素,每个列表项元素例如又包含图标元素、文字元素等,切换栏元素例如包含多个选项元素等。并且,可以得到各个元素的属性信息,属性信息例如包含样式信息和位置信息等。可以将元素属性信息转换为JSON文件或者XML文件,再将JSON文件或者XML文件解析为界面代码。
根据本公开的实施例,在已由设计人员设计出界面设计稿的情况下,可以通过上述操作(1)~(3)由计算机将界面设计稿转换为界面代码,可以减小人工工作量,减少开发成本和人力成本,提升效率,还能减少人工开发可能出现的错误。
根据本公开的实施例,确定界面代码的方法还可以包括以下操作:(4)接收来自终端设备的界面截屏图像(以下也称为界面截图);(5)确定界面截屏图像与界面设计图之间的区别信息;(6)将区别信息发送至终端设备以便进行展示。
例如,终端设备可以根据界面代码生成一个界面,获取根据界面代码生成的界面的截图,并将界面截图发送至服务器,服务器可以利用AI图像识别技术对比界面截图与界面设计图,找出两者之间存在区别的区域,并在界面截图上标记区别区域,将标记有区别区域的界面截图反馈给终端设备并展示,以使技术人员能够根据标记的区别区域进行代码修复。其中,在对比过程中,可以通过提取两个图像的元素并对比元素的方式进行。
图8示意性示出了根据本公开实施例的界面设计图与界面截屏图像的对比示意图。其中,图8中的(a)部分表示界面设计图,(b)部分表示界面截屏图像。
如图8所示,利用AI图像识别技术,可以识别出界面设计图与界面截屏图像在“我的关注”一栏存在区别,在界面截屏图像中的“我的关注”一栏进行标记,得到标记后的界面截屏图像反馈给终端设备以进行展示。
基于以上方式,可以大大节省界面验收的时间,提升验收效率。
本公开实施例的另一方面还提供了一种确定界面代码的装置。
图9示意性示出了根据本公开实施例的确定界面代码的装置的框图。
如图9所示,该确定界面代码的装置900可以包括接收模块910、提取模块920、筛选模块930和确定模块940。
接收模块910用于接收界面需求文档。
提取模块920用于利用语义识别模型,从所述界面需求文档中提取针对至少一个界面组件各自的需求信息。
筛选模块930用于针对所述至少一个界面组件中的每个界面组件,从预设的组件库中选择与所述每个界面组件的需求信息相匹配的目标组件,并获取所述目标组件的组件信息。
确定模块940用于基于所述目标组件的组件信息,确定界面代码,以便利用所述界面代码生成界面。
根据本公开的实施例,所述组件信息包括组件图。所述基于所述目标组件的组件信息,确定界面代码包括:利用图像识别模型,从所述组件图中提取所述组件图的元素属性信息;将所述元素属性信息转换为具有预定数据格式的数据文件,所述预定数据格式包括适用于多种编程语言的数据交换格式;以及通过解析所述数据文件来确定界面代码。
根据本公开的实施例,所述组件信息包括组件的数据文件,所述数据文件包括组件的元素属性信息并且所述数据文件具有预定数据格式,所述预定数据格式包括适用于多种编程语言的数据交换格式。所述基于所述目标组件的组件信息,确定界面代码包括:通过解析所述目标组件的数据文件来确定界面代码。
根据本公开的实施例,所述组件信息包括用于对组件加以表示的代码。所述基于所述目标组件的组件信息,确定界面代码包括:将用于对所述目标组件加以表示的代码作为所述界面代码。
根据本公开的实施例,确定界面代码的装置还可以包括操作提取模块、生成模块和发送模块,其中,操作提取模块用于利用所述语义识别模型,从所述界面需求文档中提取得到界面操作信息,所述界面操作信息包括操作方式和操作预期结果。生成模块用于基于所述界面操作信息,生成测试用例。发送模块用于将所述测试用例发送至终端设备,以使所述终端设备运行所述测试用例。
根据本公开的实施例,确定界面代码的装置还可以包括设计图模块,所述设计图模块用于:接收界面设计图;利用图像识别模型,从所述界面设计图中提取元素属性信息;以及基于所述元素属性信息,确定界面代码。
根据本公开的实施例,确定界面代码的装置还可以包括对比模块,用于:接收来自终端设备的界面截屏图像;确定所述界面截屏图像与所述界面设计图之间的区别信息;将所述区别信息发送至所述终端设备以便进行展示。
根据本公开的实施例,所述预定数据格式包括可扩展标记语言XML格式和对象标记语言JSON格式中的至少一种。
根据本公开的实施例的模块、子模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路,例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC),或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现,或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者,根据本公开实施例的模块、子模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块,当该计算机程序模块被运行时,可以执行相应的功能。
需要说明的是,本公开的实施例中确定界面代码的装置部分与本公开的实施例中确定界面代码的方法部分是相对应的,确定界面代码的装置部分的描述具体参考确定界面代码的方法部分,在此不再赘述。
根据本公开的实施例,本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。
图10示出了可以用来实施本公开的实施例的示例电子设备1000的示意性框图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本公开的实现。
如图10所示,设备1000包括计算单元1001,其可以根据存储在只读存储器(ROM)1002中的计算机程序或者从存储单元1008加载到随机访问存储器(RAM)1003中的计算机程序,来执行各种适当的动作和处理。在RAM 1003中,还可存储设备1000操作所需的各种程序和数据。计算单元1001、ROM 1002以及RAM 1003通过总线1004彼此相连。输入/输出(I/O)接口1005也连接至总线1004。
设备1000中的多个部件连接至I/O接口1005,包括:输入单元1006,例如键盘、鼠标等;输出单元1007,例如各种类型的显示器、扬声器等;存储单元1008,例如磁盘、光盘等;以及通信单元1009,例如网卡、调制解调器、无线通信收发机等。通信单元1009允许设备1000通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
计算单元1001可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1001的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元1001执行上文所描述的各个方法和处理,例如确定界面代码的方法。例如,在一些实施例中,确定界面代码的方法可被实现为计算机软件程序,其被有形地包含于机器可读介质,例如存储单元1008。在一些实施例中,计算机程序的部分或者全部可以经由ROM 1002和/或通信单元1009而被载入和/或安装到设备1000上。当计算机程序加载到RAM 1003并由计算单元1001执行时,可以执行上文描述的确定界面代码的方法的一个或多个步骤。备选地,在其他实施例中,计算单元1001可以通过其他任何适当的方式(例如,借助于固件)而被配置为执行确定界面代码的方法。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器,使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行,作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本公开的上下文中,机器可读介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
为了提供与用户的交互,可以在计算机上实施此处描述的系统和技术,该计算机具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)和互联网。
计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。
应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本公开公开的技术方案所期望的结果,本文在此不进行限制。
上述具体实施方式,并不构成对本公开保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等,均应包含在本公开保护范围之内。
Claims (12)
1.一种确定界面代码的方法,包括:
接收界面需求文档;
利用语义识别模型,从所述界面需求文档中提取针对至少一个界面组件各自的需求信息;
针对所述至少一个界面组件中的每个界面组件,从预设的组件库中选择与所述每个界面组件的需求信息相匹配的目标组件,并获取所述目标组件的组件信息;以及
基于所述目标组件的组件信息,确定界面代码,以便利用所述界面代码生成界面。
2.根据权利要求1所述的方法,其中,所述组件信息包括组件图;
所述基于所述目标组件的组件信息,确定界面代码包括:
利用图像识别模型,从所述组件图中提取所述组件图的元素属性信息;
将所述元素属性信息转换为具有预定数据格式的数据文件,所述预定数据格式包括适用于多种编程语言的数据交换格式;以及
通过解析所述数据文件来确定界面代码。
3.根据权利要求1所述的方法,其中,所述组件信息包括组件的数据文件,所述数据文件包括组件的元素属性信息并且所述数据文件具有预定数据格式,所述预定数据格式包括适用于多种编程语言的数据交换格式;
所述基于所述目标组件的组件信息,确定界面代码包括:通过解析所述目标组件的数据文件来确定界面代码。
4.根据权利要求1至3中任一项所述的方法,其中,所述组件信息包括用于对组件加以表示的代码;
所述基于所述目标组件的组件信息,确定界面代码包括:将用于对所述目标组件加以表示的代码作为所述界面代码。
5.根据权利要求1所述的方法,还包括:
利用所述语义识别模型,从所述界面需求文档中提取得到界面操作信息,所述界面操作信息包括操作方式和操作预期结果;
基于所述界面操作信息,生成测试用例;以及
将所述测试用例发送至终端设备,以使所述终端设备运行所述测试用例。
6.根据权利要求1所述的方法,还包括:
接收界面设计图;
利用图像识别模型,从所述界面设计图中提取元素属性信息;以及
基于所述元素属性信息,确定界面代码。
7.根据权利要求6所述的方法,还包括:
接收来自终端设备的界面截屏图像;
确定所述界面截屏图像与所述界面设计图之间的区别信息;
将所述区别信息发送至所述终端设备以便进行展示。
8.根据权利要求2或3所述的方法,其中:
所述预定数据格式包括可扩展标记语言XML格式和对象标记语言JSON格式中的至少一种。
9.一种确定界面代码的装置,包括:
接收模块,用于接收界面需求文档;
提取模块,用于利用语义识别模型,从所述界面需求文档中提取针对至少一个界面组件各自的需求信息;
筛选模块,用于针对所述至少一个界面组件中的每个界面组件,从预设的组件库中选择与所述每个界面组件的需求信息相匹配的目标组件,并获取所述目标组件的组件信息;以及
确定模块,用于基于所述目标组件的组件信息,确定界面代码,以便利用所述界面代码生成界面。
10.一种电子设备,包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行权利要求1-8中任一项所述的方法。
11.一种存储有计算机指令的非瞬时计算机可读存储介质,其中,所述计算机指令用于使所述计算机执行根据权利要求1-8中任一项所述的方法。
12.一种计算机程序产品,包括计算机程序,所述计算机程序在被处理器执行时实现根据权利要求1-8中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110157591.3A CN112835579A (zh) | 2021-02-04 | 2021-02-04 | 确定界面代码的方法、装置、电子设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110157591.3A CN112835579A (zh) | 2021-02-04 | 2021-02-04 | 确定界面代码的方法、装置、电子设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112835579A true CN112835579A (zh) | 2021-05-25 |
Family
ID=75932256
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110157591.3A Pending CN112835579A (zh) | 2021-02-04 | 2021-02-04 | 确定界面代码的方法、装置、电子设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112835579A (zh) |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113687830A (zh) * | 2021-10-25 | 2021-11-23 | 深圳市信润富联数字科技有限公司 | 可视化界面生成方法、系统及计算机存储介质 |
CN114327464A (zh) * | 2021-12-31 | 2022-04-12 | 北京瑞莱智慧科技有限公司 | 一种组件构建方法、装置及存储介质 |
CN116841506A (zh) * | 2023-06-30 | 2023-10-03 | 北京百度网讯科技有限公司 | 程序代码生成方法及装置、模型训练方法及装置 |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103197932A (zh) * | 2013-04-19 | 2013-07-10 | 济南大学 | 一种开发无模式文档型数据库应用的业务组件模型 |
US20160357526A1 (en) * | 2015-06-02 | 2016-12-08 | Sap Portals Israel Ltd | Declarative design-time experience platform for code generation |
CN110162457A (zh) * | 2019-04-12 | 2019-08-23 | 深圳壹账通智能科技有限公司 | 用户界面的测试方法、装置、设备及存储介质 |
CN111045675A (zh) * | 2019-12-20 | 2020-04-21 | 深圳乐信软件技术有限公司 | 一种基于Flutter的页面生成方法、装置、设备和存储介质 |
CN111124409A (zh) * | 2019-12-24 | 2020-05-08 | 深圳乐信软件技术有限公司 | 基于Sketch的业务页面生成方法、装置、设备和存储介质 |
CN111367516A (zh) * | 2018-12-25 | 2020-07-03 | 北京微播视界科技有限公司 | 应用界面生成方法、装置及电子设备 |
CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
CN111475160A (zh) * | 2020-03-13 | 2020-07-31 | 深圳壹账通智能科技有限公司 | 产品页面的生成方法、装置及计算机设备 |
CN112181416A (zh) * | 2020-10-12 | 2021-01-05 | 上海赛可出行科技服务有限公司 | 一种从视觉稿直接生成ui代码的方法及装置 |
-
2021
- 2021-02-04 CN CN202110157591.3A patent/CN112835579A/zh active Pending
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103197932A (zh) * | 2013-04-19 | 2013-07-10 | 济南大学 | 一种开发无模式文档型数据库应用的业务组件模型 |
US20160357526A1 (en) * | 2015-06-02 | 2016-12-08 | Sap Portals Israel Ltd | Declarative design-time experience platform for code generation |
CN111367516A (zh) * | 2018-12-25 | 2020-07-03 | 北京微播视界科技有限公司 | 应用界面生成方法、装置及电子设备 |
CN111414165A (zh) * | 2019-01-06 | 2020-07-14 | 阿里巴巴集团控股有限公司 | 界面代码的生成方法及设备 |
CN110162457A (zh) * | 2019-04-12 | 2019-08-23 | 深圳壹账通智能科技有限公司 | 用户界面的测试方法、装置、设备及存储介质 |
CN111045675A (zh) * | 2019-12-20 | 2020-04-21 | 深圳乐信软件技术有限公司 | 一种基于Flutter的页面生成方法、装置、设备和存储介质 |
CN111124409A (zh) * | 2019-12-24 | 2020-05-08 | 深圳乐信软件技术有限公司 | 基于Sketch的业务页面生成方法、装置、设备和存储介质 |
CN111475160A (zh) * | 2020-03-13 | 2020-07-31 | 深圳壹账通智能科技有限公司 | 产品页面的生成方法、装置及计算机设备 |
CN112181416A (zh) * | 2020-10-12 | 2021-01-05 | 上海赛可出行科技服务有限公司 | 一种从视觉稿直接生成ui代码的方法及装置 |
Non-Patent Citations (2)
Title |
---|
张晶;黄小锋;: "基于业务模型和界面模型的代码生成工具", 电脑与信息技术, no. 02, 15 April 2016 (2016-04-15) * |
杨春蓉;: "XML技术在动态界面设计中的应用探究", 电子制作, no. 20, 22 November 2013 (2013-11-22) * |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113687830A (zh) * | 2021-10-25 | 2021-11-23 | 深圳市信润富联数字科技有限公司 | 可视化界面生成方法、系统及计算机存储介质 |
CN114327464A (zh) * | 2021-12-31 | 2022-04-12 | 北京瑞莱智慧科技有限公司 | 一种组件构建方法、装置及存储介质 |
CN114327464B (zh) * | 2021-12-31 | 2023-02-17 | 北京瑞莱智慧科技有限公司 | 一种组件构建方法、装置及存储介质 |
CN116841506A (zh) * | 2023-06-30 | 2023-10-03 | 北京百度网讯科技有限公司 | 程序代码生成方法及装置、模型训练方法及装置 |
CN116841506B (zh) * | 2023-06-30 | 2024-05-03 | 北京百度网讯科技有限公司 | 程序代码生成方法及装置、模型训练方法及装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9274934B2 (en) | System and method for creating change-resilient scripts | |
CN112835579A (zh) | 确定界面代码的方法、装置、电子设备和存储介质 | |
US8745521B2 (en) | System and method for annotating graphical user interface | |
US10951486B2 (en) | Terminal device, UI expansion method, and UI expansion program | |
CN114445047A (zh) | 工作流生成方法、装置、电子设备及存储介质 | |
CN112784588B (zh) | 用于标注文本的方法、装置、设备以及存储介质 | |
CN114115681A (zh) | 页面生成方法及装置、电子设备和介质 | |
CN116737928B (zh) | 平台用户需求的文本挖掘方法、系统及云平台 | |
CN112667517A (zh) | 自动化测试脚本的获取方法、装置、设备及存储介质 | |
US20160292067A1 (en) | System and method for keyword based testing of custom components | |
CN115469849B (zh) | 一种业务处理系统、方法、电子设备和存储介质 | |
KR20180076020A (ko) | 애플리케이션 테스트 자동화 장치 및 방법 | |
JP7029557B1 (ja) | 判定装置、判定方法および判定プログラム | |
CN114489639A (zh) | 文件生成方法、装置、设备及存储介质 | |
CN113642295A (zh) | 页面排版方法、装置及计算机程序产品 | |
CN112597012A (zh) | 应用程序的遍历方法、装置、电子设备和存储介质 | |
CN113221035A (zh) | 用于确定异常网页的方法、装置、设备、介质和程序产品 | |
CN117033185A (zh) | 页面测试方法、装置、电子设备及存储介质 | |
US20240126978A1 (en) | Determining attributes for elements of displayable content and adding them to an accessibility tree | |
CN113836291B (zh) | 数据处理方法、装置、设备和存储介质 | |
CN113641933B (zh) | 异常网页识别方法、异常站点识别方法及装置 | |
US20230282013A1 (en) | Automated key-value pair extraction | |
CN114721964A (zh) | 一种测试用例的自动生成方法、装置、设备及介质 | |
CN116361177A (zh) | 一种应用程序的处理方法、装置、设备和存储介质 | |
CN112560462A (zh) | 事件抽取服务的生成方法、装置、服务器以及介质 |
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 |