[发明专利]页面设计中前端代码的智能识别方法及相关设备

说明书

本申请涉及页面设计技术领域，尤其涉及一种页面设计中前端代码的智能识别方法及相关设备，包括：获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。本申请有效解决了人工书写代码和页面显示情况不一致的问题。

技术领域

本申请涉及页面设计技术领域，尤其涉及一种页面设计中前端代码的智能识别方法及相关设备。

背景技术

随着互联网技术的发展，互联网的应用越来越广泛，越来越多的用户可以通过互联网进行网页浏览。用户想要浏览某网页时，用户终端可以从服务器获取该网页的前端代码，用户终端运行该前端代码，以显示该网页。网页通常由不同类别的内容元素组成，比如图片、表格和输入框等类别，其中，前端代码包含有网页中各内容元素的显示代码。

技术人员在编写前端代码时，需要针对网页中的每个内容元素，分别编写其对应的显示代码，从而得到该网页的前端代码。例如，对于某网页包含两个表格和一个图片，技术人员需要编写两个表格对应的显示代码，以及图片对应的显示代码，然后根据这三个内容元素的显示代码，得到该网页的前端代码。

但是，在技术人员编写代码时存在着人工编写的代码与网页页面不一致的情况，比如，像素、尺寸、比例、文案大小、颜色等都会有偏差，因而导致在进行UI设计时需要实时对人工编写的代码进行校验以满足UI设计的需要。

发明内容

基于此，有必要针对目前UI设计过程中，人工编写的代码与网页页面需要展示的图像存在着误差的问题，提供一种页面设计中前端代码的智能识别方法及相关设备。

一种页面设计中前端代码的智能识别方法，包括如下步骤：

获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；

获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；

查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。

在其中一个可能的实施例中，所述获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库，包括：

接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；

根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。

在其中一个可能的实施例中，获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码，包括：

获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；

将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；