前端组件库维护的方法、装置与存储介质与流程

专利2025-11-07  9


本申请涉及前端组件库维护的,具体而言,涉及一种前端组件库维护的方法、装置与存储介质。


背景技术:

1、构建组件库的主要目的是为了提高开发效率和保证产品的一致性。组件库是一个开发人员可以重复使用的集合,其中包含已经经过测试和优化的可重用组件,这些组件可以用于构建用户界面。构建组件库有很多好处:(1)提高开发效率:组件库为开发人员提供了一个可重用的工具箱,可以帮助他们更快地构建应用程序,减少开发时间和成本。(2)保证产品的一致性:组件库确保了应用程序中使用的组件都是相同的,从而可以提高应用程序的一致性和可维护性。(3)提高代码量:组件库中的组件已经经过测试和优化,因此可以减少错误和漏洞,并提高代码的可靠性和质量。(4)促进团队协作:组件库可以促进团队协作,因为它为开发人员提供了一种标准化的方式来开发应用程序,从而使得不同开发人员之间的代码更容易合并和集成。(5)降低开发难度:组件库为开发人员提供了一个预先构建的集合,这些组件已经实现了常见的功能,从而降低了开发人员的工作难度。

2、前端页面的高效开发离不开组件库,因此创建维护好一个组件库十分有必要。现有的一些开源组件库,例如element,虽然已经提高了开发人员的开发效率,但是这些组件由于面向的用户群体较为广泛,所以提供的组件较为基础,粒度较小,并且组件库的可扩展性十分有限。而常见的前端组件的代码生成工具生成的代码主要有两种,一种是原生代码,由于一些原生代码风格样式不一致,导致不支持与前端各大框架的绑定,不兼容问题突出;另一种则是从已有组件库中找出满足要求的组件,返回其源码。与常用开源组件库类似,可扩展性较差。

3、也就是说,现有技术中对组件库的处理方式可扩展性较差。


技术实现思路

1、本申请的主要目的在于提供一种前端组件库维护的方法、前端组件库维护的装置、存储介质、处理器和电子设备,以至少解决现有技术对组件库的处理方式可扩展性较差的问题。

2、为了实现上述目的,根据本申请的一个方面,提供了一种前端组件库维护的方法,包括:获取用户上传的目标ui图片,并获取与所述用户上传的所述目标ui图片对应的基础组件库,其中,组件库中包括多个所述基础组件库;使用训练后的目标检测模型对所述目标ui图片进行分析处理,检测所述目标ui图片的组件是否存在于所述组件库内;在所述目标ui图片的所述组件不存在于所述组件库内的情况下,根据所述基础组件库生成目标组件,将所述目标组件更新到所述组件库。

3、可选地,使用训练后的目标检测模型对所述目标ui图片进行分析处理,检测所述目标ui图片的组件是否存在于所述组件库内,包括:采用训练后的深度网络模型提取所述目标ui图片的特征,得到特征图,同时采用rpn模型生成候选区域;对所述特征图与所述候选区域进行提取处理得到候选区特征图,将所述候选区特征图输入所述目标检测模型中,得到检测结果,根据所述检测结果确定所述目标ui图片的所述组件是否存在于所述组件库内。

4、可选地,在所述目标ui图片的所述组件不存在于所述组件库内的情况下,根据所述基础组件库生成目标组件,将所述目标组件更新到所述组件库,包括:在确定所述目标ui图片的所述组件不存在于所述组件库内的情况下,使用所述目标检测模型确定所述ui图片在所述基础组件库中对应的基础组件;获取所述ui图片中目标模块的位置信息;根据所述基础组件与所述位置信息生成所述ui图片的目标组件代码;根据所述目标组件代码生成目标组件,且将所述目标组件更新到所述组件库。

5、可选地,在根据所述目标组件代码生成目标组件之后,所述方法还包括:将所述目标组件代码发送至所述用户。

6、可选地,将所述目标组件更新到所述组件库之后,所述方法还包括:添加一个所述目标检测模型的分类器,根据所述目标组件对所述分类器进行训练得到训练后分类器,将所述训练后分类器同步更新到所述目标检测模型中,其中,所述目标检测模型包含多个所述分类器。

7、可选地,在使用训练后的目标检测模型根据所述组件库对所述目标ui图片进行检测分析处理之前,所述方法还包括:构建初始目标检测模型;采用训练数据集对所述初始目标检测模型进行训练得到训练后的所述目标检测模型,其中,所述训练数据集中的每一组数据包括输入至所述目标检测模型的所述基础组件以及与所述基础组件对应的ui图片。

8、可选地,并获取与所述用户上传的所述目标ui图片对应的基础组件库,包括:获取所述目标ui图片的相关特征,其中,所述相关特征包括视觉样式、组件结构、交互行为;根据所述目标ui图片的相关特征确定对应的所述基础组件库。

9、根据本申请的另一方面,提供了一种前端组件库维护的装置,包括:获取单元,用于获取用户上传的目标ui图片,并获取与所述用户上传的所述目标ui图片对应的基础组件库,其中,组件库中包括多个所述基础组件库;检测单元,用于使用训练后的目标检测模型对所述目标ui图片进行分析处理,检测所述目标ui图片的组件是否存在于所述组件库内;更新单元,用于在所述目标ui图片的所述组件不存在于所述组件库内的情况下,根据所述基础组件库生成目标组件,将所述目标组件更新到所述组件库。

10、根据本申请的再一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质包括存储的程序,其中,在所述程序运行时控制所述计算机可读存储介质所在设备执行任意一种所述的前端组件库维护的方法。

11、根据本申请的又一方面,提供了一种电子设备,包括:一个或多个处理器,存储器,以及一个或多个程序,其中,所述一个或多个程序被存储在所述存储器中,并且被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行任意一种所述的前端组件库维护的方法。

12、应用本申请的技术方案,获取用户上传的目标ui图片,并获取与所述用户上传的所述目标ui图片对应的基础组件库,使用训练后的目标检测模型对所述目标ui图片进行分析处理,检测所述目标ui图片的组件是否存在于所述组件库内;在所述目标ui图片的所述组件不存在于所述组件库内的情况下,根据所述基础组件库生成目标组件,将所述目标组件更新到所述组件库。通过采用目标检测深度神经网络模型,对用户上传的ui图片进行检测,根据检测结果确定组件库是否已存在ui图片对应的组件,在不存在的情况下,自动生成ui图片对应的组件,并更新组件库,这样可以自动维护组件库,提高了组件库的扩展性并增强了组件库的实用性。



技术特征:

1.一种前端组件库维护的方法,其特征在于,包括:

2.根据权利要求1所述的方法,其特征在于,使用训练后的目标检测模型对所述目标ui图片进行分析处理,检测所述目标ui图片的组件是否存在于所述组件库内,包括:

3.根据权利要求2所述的方法,其特征在于,在所述目标ui图片的所述组件不存在于所述组件库内的情况下,根据所述基础组件库生成目标组件,将所述目标组件更新到所述组件库,包括:

4.根据权利要求3所述的方法,其特征在于,在根据所述目标组件代码生成目标组件之后,所述方法还包括:

5.根据权利要求1所述的方法,其特征在于,在将所述目标组件更新到所述组件库之后,所述方法还包括:

6.根据权利要求1所述的方法,其特征在于,在使用训练后的目标检测模型根据所述组件库对所述目标ui图片进行检测分析处理之前,所述方法还包括:

7.根据权利要求1所述的方法,其特征在于,并获取与所述用户上传的所述目标ui图片对应的基础组件库,包括:

8.一种前端组件库维护的装置,其特征在于,包括:

9.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质包括存储的程序,其中,在所述程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至7中任意一项所述的前端组件库维护的方法。

10.一种电子设备,其特征在于,包括:一个或多个处理器,存储器,以及一个或多个程序,其中,所述一个或多个程序被存储在所述存储器中,并且被配置为由所述一个或多个处理器执行,所述一个或多个程序包括用于执行权利要求1至7中任意一项所述的前端组件库维护的方法。


技术总结
本申请提供了一种前端组件库维护的方法、装置与存储介质。该方法包括:获取用户上传的目标UI图片,并获取与用户上传的目标UI图片对应的基础组件库,其中,组件库中包括多个基础组件库;使用训练后的目标检测模型对目标UI图片进行分析处理,检测目标UI图片的组件是否存在于组件库内;在目标UI图片的组件不存在于组件库内的情况下,根据基础组件库生成目标组件,将目标组件更新到组件库;通过采用目标检测深度神经网络模型,对用户上传的UI图片进行检测,根据检测结果确定组件库不存在UI图片对应的组件的情况下,自动生成UI图片对应的组件,并更新组件库,这样可以自动维护组件库,提高了组件库的扩展性并增强了组件库的实用性。

技术研发人员:朱礼华,王鹏,李朝霞,刘晓龙,武静雯
受保护的技术使用者:中国邮政储蓄银行股份有限公司
技术研发日:
技术公布日:2024/6/26
转载请注明原文地址:https://doc.8miu.com/read-1824570.html

最新回复(0)