本申请提供一种页面开发处理方法、装置、电子设备及存储介质。该方法包括：获取开发请求，所述开发请求中包括：待识别的Web UI图片；根据所述开发请求，采用预先训练好的识别模型，分析获取所述待识别的Web UI图片中的每个UI组件的类别和坐标；输出每个UI组件的类别和坐标，以实现对Web页面进行开发处理。本申请的方法，可以提高Web页面的开发效率。可以提高Web页面的开发效率。可以提高Web页面的开发效率。
【技术实现步骤摘要】
页面开发处理方法、装置、电子设备及存储介质
[0001]本申请涉及目标检测识别技术，尤其涉及一种页面开发处理方法、装置、电子设备及存储介质。
技术介绍
[0002]Web页面开发通常包括需求分析、原型图(User Interface；简称UI)设计、前端开发、测试与修复以及上线发布等几个阶段，其中，原型图设计是指依据需求分析结果，绘制页面布局、功能模块等，并设计页面的颜色、风格、布局、图标和图片等。前端开发是指前端人员根据原型图中各UI组件的类别、坐标以及样式，利用HTML、CSS和JavaScript等技术，完成网站的前端开发工作，构建web页面。
[0003]传统方式中，通常是前端开发人员查看原型图，对原型图中的UI组件进行分析，确定各UI组件的类别和坐标。尤其是，在前端开发人员确定一个原型图中多个UI组件的位置时，需要前端人员将鼠标悬停于各个UI组件四周，以确定各UI组件的准确位置。
[0004]然而，在原型图较多的情况下，人为分析原型图中UI组件的效率较低，进而导致web页面的开发效率较低的技术问题。
技术实现思路
[0005]本申请提供一种页面开发处理方法、装置、电子设备及存储介质，用以解决现有技术中，人为分析原型图中UI组件，影响前端页面开发效率的技术问题。
[0006]第一方面，本申请提供一种页面开发处理方法，包括：
[0007]获取开发请求，所述开发请求中包括：待识别的Web UI图片，所述待识别的Web UI图片为原型图；
[0008]根据所述开发请求，采用预先训练好的识别模型，分析获取所述待识别的Web UI图片中的每个UI组件的类别和坐标；
[0009]输出每个UI组件的类别和坐标，以实现对Web页面进行开发处理。
[0010]第二方面，本申请提供一种页面开发处理装置，包括：
[0011]原型图获取模块，用于获取开发请求，所述开发请求中包括：待识别的Web UI图片，所述待识别的Web UI图片为原型图；
[0012]UI组件识别模块，用于根据所述开发请求，采用预先训练好的识别模型，分析获取所述待识别的Web UI图片中的每个UI组件的类别和坐标；
[0013]识别输出模块，用于输出每个UI组件的类别和坐标，以实现对前端页面进行开发处理。
[0014]第三方面，本申请提供一种电子设备，包括：处理器，以及与所述处理器通信连接的存储器；
[0015]所述存储器存储计算机执行指令；
[0016]所述处理器执行所述存储器存储的计算机执行指令，以实现如第一方面所述的方
法。
[0017]第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如第一方面所述的方法。
[0018]第五方面，本申请提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现如第一方面所述的方法。
[0019]本申请提供的页面开发处理方法、装置、电子设备及存储介质，获取开发请求，所述开发请求中包括：待识别的Web UI图片，所述待识别的Web UI图片为原型图；根据所述开发请求，采用预先训练好的识别模型，分析获取所述待识别的Web UI图片中的每个UI组件的类别和坐标；输出每个UI组件的类别和坐标，以实现对Web页面进行开发处理。针对待识别的Web UI图片，将待识别的Web UI图片输入至预先训练好的识别模型中，通过预先训练好的识别模型即可识别Web UI图片各UI组件的类别和坐标，整个过程无需人为进行分析，从而在原型图较多的情况下，可以提高分析原型图中UI组件的效率，也可以在一定程度上可以Web页面开发的效率。
附图说明
[0020]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。
[0021]图1为实现本申请实施例的页面开发处理方法的一种应用场景图；
[0022]图2为本申请一实施例的实现页面开发处理方法的流程示意图；
[0023]图3为本申请另一实施例的实现页面开发处理方法的流程示意图；
[0024]图4为本申请实现页面开发处理方法的结构示意图；
[0025]图5为用来实现页面开发处理方法中的电子设备的结构示意图。
[0026]通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。
具体实施方式
[0027]这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
[0028]需要说明的是，本申请的页面开发处理方法、装置、电子设备及存储介质，可用于金融领域，也可用于除金融领域之外的任意领域，本申请页面开发处理方法、装置、电子设备及存储介质的应用领域不做限定。
[0029]为了清楚理解本申请的技术方案，首先对现有技术的方案进行详细介绍。
[0030]Web开发通常包括需求分析、原型图(User Interface；简称UI)设计、前端开发、测试与修复以及上线发布等几个阶段，其中，原型图设计是指依据需求分析结果，绘制页面布局、功能模块等，并设计页面的颜色、风格、布局、图标和图片等。前端开发是指前端人员根
据原型图中各UI组件的类别、坐标以及样式，利用HTML、CSS和JavaScript等技术，完成网站的前端开发工作，构建前端页面。
[0031]传统方式中，通常是前端开发人员查看原型图，对原型图中的UI组件进行分析，确定各UI组件的类别和坐标。尤其是，在前端开发人员确定一个原型图中多个UI组件的位置时，需要前端人员将鼠标悬停于各个UI组件四周，以确定各UI组件的准确位置。然而，在原型图较多的情况下，人为分析原型图中UI组件的效率较低，进而导致web页面开发效率较低。
[0032]所以在面对现有技术的技术问题时，专利技术人通过创造性的研究后发现，为了提高web页面开发效率，缩短web页面开发时长。因此，采用预先训练好的识别模型对Web UI组件进行识别分类以及确定坐标，可以为前端开发人员更快速地分析理解原型图提供帮助，进而提高前端开发人员对Web页面进行开发处理的开发效率。
[0033]如图1所示，本申请实施例提供的页面开发处理方法的应用场景，在该应用场景中对应的网络架构中包括电子设备10和终端20，二者进行通信。当前端开发人员需要获取Web UI图片中各UI组件的类别和坐标时，前端开发人员通过终端20向电子设备10发起开发请求，开发请求中包括待识别的Web UI图片。在实际开发本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种页面开发处理方法，其特征在于，所述方法包括：获取开发请求，所述开发请求中包括：待识别的Web UI图片，所述待识别的Web UI图片为原型图；根据所述开发请求，采用预先训练好的识别模型，分析获取所述待识别的Web UI图片中的每个UI组件的类别和坐标；输出每个UI组件的类别和坐标，以实现对Web页面进行开发处理。2.根据权利要求1所述的方法，其特征在于，所述预先训练好的识别模型包括训练好的特征提取网络、训练好的区域生成网络、训练好的感兴趣区域池化层和训练好的分类网络；所述采用所述预先训练好的识别模型，分析获取所述待识别的Web UI图片中的每个UI组件的类别和坐标，包括：通过所述训练好的特征提取网络对所述待识别的Web UI图片进行特征提取，获得特征图；通过所述训练好的区域生成网络生成所述特征图的多个推荐候选区域；通过所述训练好的感兴趣区域池化层对各所述推荐候选区域进行池化，获得多个尺寸相同的区域特征图；将各所述区域特征图输入至所述训练好的分类网络中进行分类识别，确定所述待识别的Web UI图片的每个UI组件的类别和坐标。3.根据权利要求2所述的方法，其特征在于，所述训练好的分类网络包括全卷积网络、第一分类全连接层和第一回归全连接层；所述将各所述区域特征图输入至所述训练好的分类网络中进行分类识别，确定所述待识别的Web UI图片的每个UI组件的类别和坐标，包括：将各所述区域特征图输入至所述全卷积网络中，通过所述全卷积网络将各所述区域特征图分别映射为第一特征向量；将各所述第一特征向量分别输入第一分类全连接层和第一回归全连接层，通过所述第一分类全连接层确定各所述区域特征图中UI组件的类别，并通过所述第二回归全连接层确定各所述区域特征图中UI组件的坐标；基于各所述区域特征图中UI组件的类别和UI组件的坐标，确定所述待识别的Web UI图片的每个UI组件的类别和坐标。4.根据权利要求2所述的方法，其特征在于，所述通过所述训练好的区域生成网络生成所述特征图的多个推荐候选区域，包括：通过所述训练好的区域生成网络在所述特征图上以预设步长滑动n
×
n大小的窗口，每滑动至一个位置，则获取该位置对应窗口的特征，并确定该位置对应的多个候选区域；其中，n为正整数；针对所述特征图中的多个位置，均执行以下步骤：将该位置对应窗口的特征通过所述训练好的区域生成网络的卷积层映射为第二特征向量；将所述第二特征向量输入到第二分类全连接层和第二回归全连接层中，通过所述第二回归全连接层确定该位置的各所述候选区域的坐标，并通过所述第二分类全连接层确定该位置的各所述候选区域的背景概率和前景概率；将各前景概率大于背景概率的候选区域作为推荐候选区域。
5.根...
【专利技术属性】
技术研发人员：谢姗删，
申请(专利权)人：中国银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。