一种生成前端代码的方法及装置制造方法及图纸

本发明专利技术提供一种生成前端代码的方法及装置，该方法包括：接收用户输入的网页图像信息；采用图像识别模型对网页图像信息的特征进行提取，获得特征提取结果，根据特征提取结果生成至少一个待处理区域，并根据特征提取结果确定待处理区域的种类；对待处理区域的边缘进行定位，获取待处理区域的位置标记信息；获取网页组件库中的组件，根据组件的组件属性与待处理区域的种类进行匹配，将组件设置在待处理区域的位置标记信息的对应位置中，并根据组件属性和待处理区域的位置标记信息生成组件对应的组件代码。本发明专利技术中，通过根据网页图像信息设计稿识别各业务组件，以组件化思想自动搭建代码样板，提高自动生成代码的可控性和可读性。性。性。

【技术实现步骤摘要】
一种生成前端代码的方法及装置


[0001]本专利技术涉及网页开发领域，尤其涉及一种生成前端代码的方法及装置。

技术介绍

[0002]目前，在网页开发业务中，同一个团队设计的页面组件风格基本一致，开发人员可基于已有的组件库和样式库完成开发，但由于组件具有高度封装性，新页面的开发往往出现重复性工作，影响开发效率；目前网页开发业务中采用的方式主要有手动重复搭建页面和经过图像识别后生成底层前端代码，其他解决方案中对图像识别方法的研究较多，但缺乏对生成代码的深入研究。

技术实现思路

[0003]本专利技术提供了一种生成前端代码的方法及装置，用于解决现有技术中手动重复搭建工作量大，开发效率低，并且生成的代码无法准确匹配到开发人员的业务场景，需要大量增删的问题。
[0004]为了解决上述问题，本专利技术是这样实现的：第一方面，本专利技术提供一种生成前端代码的方法，包括：接收用户输入的网页图像信息；采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种生成前端代码的方法，其特征在于，包括：接收用户输入的网页图像信息；采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。2.根据权利要求1所述的生成前端代码的方法，其特征在于，接收用户输入的图像信息之前还包括：对所述图像识别模型进行训练；其中，所述对所述图像识别模型进行训练包括：获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。3.根据权利要求1所述的生成前端代码的方法，其特征在于，所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及其他区域。4.根据权利要求1所述的生成前端代码的方法，其特征在于，所述组件库中的组件的配置包括以下至少一项：组件标签、组件属性和组件扩展功能。5.根据权利要求4所述的生成前端代码的方法，其特征在于，所述组件库中的组件包括以下至少一项：通用组件、布局组件、导航组件、数据录入组件和数据展示组件。6.一种生成前端代码的装置，其特征在于，包括：接收模块，用于接收用户输入的网页图像信息；特征提取模块，用于采用图像识别...

【专利技术属性】
技术研发人员：姜旭，杨欢，李钿，邹永强，杨晖，
申请(专利权)人：云账户技术天津有限公司，
类型：发明
国别省市：