CN113779482A - 一种生成前端代码的方法及装置 - Google Patents

一种生成前端代码的方法及装置 Download PDF

Info

Publication number
CN113779482A
CN113779482A CN202111335972.2A CN202111335972A CN113779482A CN 113779482 A CN113779482 A CN 113779482A CN 202111335972 A CN202111335972 A CN 202111335972A CN 113779482 A CN113779482 A CN 113779482A
Authority
CN
China
Prior art keywords
component
image
training
processed
area
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.)
Granted
Application number
CN202111335972.2A
Other languages
English (en)
Other versions
CN113779482B (zh
Inventor
姜旭
杨欢
李钿
邹永强
杨晖
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Accumulus Technologies Tianjin Co Ltd
Original Assignee
Accumulus Technologies Tianjin Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Accumulus Technologies Tianjin Co Ltd filed Critical Accumulus Technologies Tianjin Co Ltd
Priority to CN202111335972.2A priority Critical patent/CN113779482B/zh
Publication of CN113779482A publication Critical patent/CN113779482A/zh
Application granted granted Critical
Publication of CN113779482B publication Critical patent/CN113779482B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00—Pattern recognition
    • G06F18/20—Analysing
    • G06F18/21—Design or setup of recognition systems or techniques; Extraction of features in feature space; Blind source separation
    • G06F18/214—Generating training patterns; Bootstrap methods, e.g. bagging or boosting
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00—Pattern recognition
    • G06F18/20—Analysing
    • G06F18/22—Matching criteria, e.g. proximity measures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00—Pattern recognition
    • G06F18/20—Analysing
    • G06F18/24—Classification techniques
    • 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/31—Programming languages or programming paradigms
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/04—Architecture, e.g. interconnection topology
    • G06N3/044—Recurrent networks, e.g. Hopfield networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/04—Architecture, e.g. interconnection topology
    • G06N3/045—Combinations of networks
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06N—COMPUTING ARRANGEMENTS BASED ON SPECIFIC COMPUTATIONAL MODELS
    • G06N3/00—Computing arrangements based on biological models
    • G06N3/02—Neural networks
    • G06N3/08—Learning methods

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Software Systems (AREA)
  • Evolutionary Computation (AREA)
  • Computing Systems (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Evolutionary Biology (AREA)
  • Health & Medical Sciences (AREA)
  • Biomedical Technology (AREA)
  • Biophysics (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Molecular Biology (AREA)
  • Bioinformatics & Computational Biology (AREA)
  • Mathematical Physics (AREA)
  • Bioinformatics & Cheminformatics (AREA)
  • Databases & Information Systems (AREA)
  • Image Analysis (AREA)

Abstract

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

Description

一种生成前端代码的方法及装置
技术领域
本发明涉及网页开发领域，尤其涉及一种生成前端代码的方法及装置。
背景技术
目前，在网页开发业务中，同一个团队设计的页面组件风格基本一致，开发人员可基于已有的组件库和样式库完成开发，但由于组件具有高度封装性，新页面的开发往往出现重复性工作，影响开发效率；目前网页开发业务中采用的方式主要有手动重复搭建页面和经过图像识别后生成底层前端代码，其他解决方案中对图像识别方法的研究较多，但缺乏对生成代码的深入研究。
发明内容
本发明提供了一种生成前端代码的方法及装置，用于解决现有技术中手动重复搭建工作量大，开发效率低，并且生成的代码无法准确匹配到开发人员的业务场景，需要大量增删的问题。
为了解决上述问题，本发明是这样实现的：
第一方面，本发明提供一种生成前端代码的方法，包括：
接收用户输入的网页图像信息；
采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；
对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；
获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。
可选的，接收用户输入的图像信息之前还包括：
对所述图像识别模型进行训练；
其中，所述对所述图像识别模型进行训练包括：
获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；
将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；
采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。
可选的，所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及其他区域。
可选的，所述组件库中的组件的配置包括以下至少一项：组件标签、组件属性和组件扩展功能。
可选的，所述组件库中的组件包括以下至少一项：通用组件、布局组件、导航组件、数据录入组件和数据展示组件。
第二方面，本发明提供一种生成前端代码的装置，包括：
接收模块，用于接收用户输入的网页图像信息；
特征提取模块，用于采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；
定位模块，用于对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；
代码生成模块，用于获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。
可选的，还包括：模型训练模块，用于对所述图像识别模型进行训练；
其中，所述模型训练模块包括：
获取模块，用于获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；
训练模块，用于将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；
测试模块，用于采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。
可选的，所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及其他区域。
可选的，所述组件库中的组件的配置包括以下至少一项：组件标签、组件属性和组件扩展功能。
可选的，所述组件库中的组件包括以下至少一项：通用组件、布局组件、导航组件、数据录入组件和数据展示组件。
第三方面，本发明提供一种服务器，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如第一方面中任一项所述的生成前端代码的方法的步骤。
第四方面，本发明提供一种可读存储介质，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如第一方面中任一项所述的生成前端代码的方法的步骤。
本发明中，通过利用图像识别算法，对网页图像信息设计稿中页面的各部分完成目标识别，并匹配已有的组件库，依据业务场景选择具体组件标签与属性，自动生成前端代码样板，并且可根据开发人员所用前端框架实现定制化搭建，避免了繁杂的底层代码，具有一定可控性，提升了开发的效率与便捷性。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1为本发明实施例提供的一种生成前端代码的方法流程示意图；
图2为本发明实施例提供的一种生成前端代码的方法的网页图像信息示意图；
图3为本发明实施例提供的一种生成前端代码的方法的总体流程示意图；
图4为本发明实施例提供的一种生成前端代码的装置的结构示意图；
图5为本发明实施例提供的一种服务器的结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
请参考图1，本发明实施例提供了一种生成前端代码的方法，包括：
步骤11：接收用户输入的网页图像信息；
步骤12：采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；
步骤13：对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；
步骤14：获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。
本发明实施例中，在步骤11、12中，接收用户输入的网页图像信息的设计稿，并采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成待处理区域，如图2所示，并根据所述特征提取结果确定所述待处理区域的种类；所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及相关内容推荐区等其他区域；在步骤13中，分类完成后对各区域边缘进行精确定位，确定所述待处理区域的位置标记信息，即具体坐标数值；边缘精修后将分类结果展示给开发人员，由开发人员确定分类结果是否符合预期结果，若不符合，开发人员可手动标记区域边缘或分类，开发人员的修正有利于提升识别精确度；在步骤14中，确定所述待处理区域的类别后，在组件库中匹配对应组件，所述组件库中的组件包括：通用组件、布局组件、导航组件、数据录入组件和数据展示组件；所述通用组件包括以下至少一项：按钮、图标和排版；所述布局组件包括以下至少一项：分割线、栅格、布局和间距；所述导航组件包括以下至少一项：固钉、面包屑、下拉菜单、导航菜单、页头、分页和步骤条；所述数据录入组件包括以下至少一项：自动完成、级联选择、多选框、日期选择框、表单、输入框、数字输入框、提及、单选框、评分、选择器、滑动输入条、开关、时间选择框、穿梭框、树选择和上传；所述数据展示组件包括以下至少一项：头像、徽标数、日历、卡片、走马灯、折叠面板、评论、描述列表、空状态、图片、列表、气泡卡片、统计数值、表格、标签页、标签和时间轴；根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，根据当前应用场景确定具体组件使用方式，以输入框为例，所述输入框还可分为基本输入框和多行输入框，此外还可以有密码输入框和数字输入框，不同的输入框拥有不同的属性或标签，生成的代码也不同，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码，代码的各部分都以具体组件使用方式组成，使用此方法生成的代码框架无需开发人员过多改动，将数据类型、数据名等业务相关填入指定位置即可，有利于提高开发效率。
本发明实施例中，通过利用图像识别算法，对网页图像信息设计稿中页面的各部分完成目标识别，并匹配已有的组件库，依据业务场景选择具体组件标签与属性，自动生成前端代码样板，并且可根据开发人员所用前端框架实现定制化搭建，避免了繁杂的底层代码，具有一定可控性，提升了开发的效率与便捷性。
本发明实施例中，可选的，接收用户输入的图像信息之前还包括：
对所述图像识别模型进行训练；
其中，所述对所述图像识别模型进行训练包括：
获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；
将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；
采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。
本发明实施例中，使用通用的视觉图构建图像识别模型，首先人为对所述通用的视觉图进行标记区域范围与含义，准备多张标记好的视觉图并分为训练集与测试集，然后将图片输入系统中进行训练，利用卷积神经网络和前后向长短时记忆网络对已标记图像数据、目标图像数据、文本数据进行建模，卷积神经网络采用卷积层与采样层交替设置，通过卷积层提取特征，采样层组合特征的方式逐步形成对图像对特征描述，前后向长短时记忆网络作为一种可同时考虑前后两类信息的神经网络，帮助模型检测页面中的细节，并且对长文本的检测效果更好，通过这两种算法在迭代训练中不断寻找最优解，最后完成图像识别系统的训练。
本发明实施例中，可选的，所述组件库中的组件的配置包括以下至少一项：组件标签、组件属性和组件扩展功能。
请参考图3，本发明实施例中，前期网络训练过程为使用通用的视觉图构建图像识别模型，首先人为对所述通用的视觉图进行标记区域范围与含义，准备多张标记好的视觉图并分为训练集与测试集，然后将图片输入系统中进行训练，利用卷积神经网络和前后向长短时记忆网络对已标记图像数据、目标图像数据、文本数据进行建模，卷积神经网络采用卷积层与采样层交替设置，通过卷积层提取特征，采样层组合特征的方式逐步形成对图像对特征描述，前后向长短时记忆网络作为一种可同时考虑前后两类信息的神经网络，帮助模型检测页面中的细节，并且对长文本的检测效果更好，通过这两种算法在迭代训练中不断寻找最优解，最后完成图像识别系统的训练。
正式生成过程中，首先将设计稿图像输入图像识别系统中，图像识别系统中的特征提取模块对输入图像进行特征提取，生成候选区域，接着对各个区域进行分类，分类完成后对各区域边缘进行精确定位，确定具体坐标数值，并进行边缘精修，边缘精修后将分类结果展示给开发人员，由开发人员确定分类结果是否符合预期结果，若不符合，开发人员可手动标记区域边缘或分类，开发人员的修正有利于提升识别精确度；确定区域分类后，在组件库中匹配对应组件，并根据当前应用场景确定具体组件使用方式，并生成组件代码，生成的组件化代码框架，各部分都以具体组件使用方式组成，使用此方法生成的代码框架无需开发人员过多改动，将数据类型、数据名等业务相关填入指定位置即可，有利于提高开发效率。
本发明实施例中，通过利用图像识别算法，对网页图像信息设计稿中页面的各部分完成目标识别，并匹配已有的组件库，依据业务场景选择具体组件标签与属性，自动生成前端代码样板，并且可根据开发人员所用前端框架实现定制化搭建，避免了繁杂的底层代码，具有一定可控性，提升了开发的效率与便捷性。
请参考图4，本发明提供一种生成前端代码的装置，包括：
接收模块41，用于接收用户输入的网页图像信息；
特征提取模块42，用于采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；
定位模块43，用于对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；
代码生成模块44，用于获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。
本发明实施例中，可选的，还包括：模型训练模块，用于对所述图像识别模型进行训练；
其中，所述模型训练模块包括：
获取模块，用于获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；
训练模块，用于将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；
测试模块，用于采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。
本发明实施例中，可选的，所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及其他区域。
本发明实施例中，可选的，所述组件库中的组件的配置包括以下至少一项：组件标签、组件属性和组件扩展功能。
本发明实施例中，可选的，所述组件库中的组件包括以下至少一项：通用组件、布局组件、导航组件、数据录入组件和数据展示组件。
本发明实施例提供的生成前端代码的装置能够实现图1的方法实施例中生成前端代码的方法实现的各个过程，为避免重复，这里不再赘述。
请参考图5，本发明实施例还提供一种服务器50，包括处理器51，存储器52及存储在存储器52上并可在所述处理器51上运行的计算机程序，该计算机程序被处理器51执行时实现上述生成前端代码的方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现上述生成前端代码的方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器（Read-Only Memory，ROM）、随机存取存储器（Random Access Memory，RAM）、磁碟或者光盘等。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质（如ROM/RAM、磁碟、光盘）中，包括若干指令用以使得一台终端（可以是手机，计算机，服务器，空调器，或者终端等）执行本发明各个实施例所述的方法。
上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。

Claims (10)

1.一种生成前端代码的方法，其特征在于，包括：
接收用户输入的网页图像信息；
采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；
对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；
获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。
2.根据权利要求1所述的生成前端代码的方法，其特征在于，接收用户输入的图像信息之前还包括：
对所述图像识别模型进行训练；
其中，所述对所述图像识别模型进行训练包括：
获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；
将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；
采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。
3.根据权利要求1所述的生成前端代码的方法，其特征在于，
所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及其他区域。
4.根据权利要求1所述的生成前端代码的方法，其特征在于，
所述组件库中的组件的配置包括以下至少一项：组件标签、组件属性和组件扩展功能。
5.根据权利要求4所述的生成前端代码的方法，其特征在于，
所述组件库中的组件包括以下至少一项：通用组件、布局组件、导航组件、数据录入组件和数据展示组件。
6.一种生成前端代码的装置，其特征在于，包括：
接收模块，用于接收用户输入的网页图像信息；
特征提取模块，用于采用图像识别模型对所述网页图像信息的特征进行提取，获得特征提取结果，根据所述特征提取结果生成至少一个待处理区域，并根据所述特征提取结果确定所述待处理区域的种类；
定位模块，用于对所述待处理区域的边缘进行定位，获取所述待处理区域的位置标记信息；
代码生成模块，用于获取网页组件库中的组件，根据所述组件的组件属性与待处理区域的种类进行匹配，将所述组件设置在所述待处理区域的位置标记信息的对应位置中，并根据所述组件属性和所述待处理区域的位置标记信息生成所述组件对应的组件代码。
7.根据权利要求6所述的生成前端代码的装置，其特征在于，还包括：
模型训练模块，用于对所述图像识别模型进行训练；
其中，所述模型训练模块包括：
获取模块，用于获取训练图像集和测试图像集；所述训练图像为包括位置标记信息和组件属性的网页图像；所述测试图像为无位置标记信息和组件属性的图像；
训练模块，用于将所述训练图像输入至待训练的图像识别模型中进行训练，根据训练结果优化所述图像识别模型的参数；其中，所述图像识别模型采用卷积神经网络和前后向长短时记忆网络对所述训练图像进行训练；
测试模块，用于采用所述测试图像对优化后的所述图像识别模型进行测试，根据测试结果判断优化后的图像识别模型是否符合预期，如果是，停止训练，否则，返回将所述训练图像输入至待训练的图像识别模型中进行训练的步骤，继续进行训练。
8.根据权利要求6所述的生成前端代码的装置，其特征在于，
所述待处理区域的种类包括以下至少一项：用户信息区域、横幅图区域、图文内容区域、评论区以及其他区域。
9.一种服务器，其特征在于，包括处理器，存储器及存储在所述存储器上并可在所述处理器上运行的程序或指令，所述程序或指令被所述处理器执行时实现如权利要求1-6中任一项所述的生成前端代码的方法的步骤。
10.一种可读存储介质，其特征在于，所述可读存储介质上存储程序或指令，所述程序或指令被处理器执行时实现如权利要求1-6中任一项所述的生成前端代码的方法的步骤。
CN202111335972.2A 2021-11-12 2021-11-12 一种生成前端代码的方法及装置 Active CN113779482B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111335972.2A CN113779482B (zh) 2021-11-12 2021-11-12 一种生成前端代码的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111335972.2A CN113779482B (zh) 2021-11-12 2021-11-12 一种生成前端代码的方法及装置

Publications (2)

Publication Number Publication Date
CN113779482A true CN113779482A (zh) 2021-12-10
CN113779482B CN113779482B (zh) 2022-02-25

Family

ID=78957064

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111335972.2A Active CN113779482B (zh) 2021-11-12 2021-11-12 一种生成前端代码的方法及装置

Country Status (1)

Country Link
CN (1) CN113779482B (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115221452A (zh) * 2022-09-19 2022-10-21 广东省信息工程有限公司 基于可视化配置的门户构建方法、系统、电子设备及介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108228253A (zh) * 2017-12-29 2018-06-29 武汉璞华大数据技术有限公司 一种app构建方法及系统
CN109408058A (zh) * 2018-10-31 2019-03-01 北京影谱科技股份有限公司 基于机器学习的前端辅助开发方法和装置
CN109683871A (zh) * 2018-11-01 2019-04-26 中山大学 基于图像目标检测方法的代码自动生成装置及方法
CN111190600A (zh) * 2019-12-31 2020-05-22 中国银行股份有限公司 基于gru注意力模型的前端代码自动生成的方法及系统
CN111630936A (zh) * 2017-12-30 2020-09-04 英特尔公司 用于无线通信的方法和设备
CN113448552A (zh) * 2020-03-27 2021-09-28 北京沃东天骏信息技术有限公司 代码生成方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108228253A (zh) * 2017-12-29 2018-06-29 武汉璞华大数据技术有限公司 一种app构建方法及系统
CN111630936A (zh) * 2017-12-30 2020-09-04 英特尔公司 用于无线通信的方法和设备
CN109408058A (zh) * 2018-10-31 2019-03-01 北京影谱科技股份有限公司 基于机器学习的前端辅助开发方法和装置
CN109683871A (zh) * 2018-11-01 2019-04-26 中山大学 基于图像目标检测方法的代码自动生成装置及方法
CN111190600A (zh) * 2019-12-31 2020-05-22 中国银行股份有限公司 基于gru注意力模型的前端代码自动生成的方法及系统
CN113448552A (zh) * 2020-03-27 2021-09-28 北京沃东天骏信息技术有限公司 代码生成方法和装置

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115221452A (zh) * 2022-09-19 2022-10-21 广东省信息工程有限公司 基于可视化配置的门户构建方法、系统、电子设备及介质

Also Published As

Publication number Publication date
CN113779482B (zh) 2022-02-25

Similar Documents

Publication Publication Date Title
CN105094775B (zh) 网页生成方法和装置
CN110706314A (zh) 元素布局方法、装置、电子设备及可读存储介质
CN111488186B (zh) 数据处理方法、装置、电子设备及计算机存储介质
US10558745B2 (en) Information processing apparatus and non-transitory computer readable medium
CN114119949A (zh) 一种增强文本合成图像的生成方法和系统
CN114238575A (zh) 文档解析方法、系统、计算机设备及计算机可读存储介质
CN110990010A (zh) 一种软件界面代码的生成方法及装置
CN113361525A (zh) 基于ocr的页面生成方法、装置、计算机设备及存储介质
CN113779482B (zh) 一种生成前端代码的方法及装置
JP2018120286A (ja) 広告作成支援プログラム、装置、及び方法
CN108133209B (zh) 一种文本识别中的目标区域搜索方法及其装置
CN111369294A (zh) 软件造价估算方法及装置
CN117058275B (zh) 商品宣传图生成方法、装置、计算机设备及存储介质
CN109658485A (zh) 网页动画绘制方法、装置、计算机设备和存储介质
JP2019101889A (ja) テスト実行装置及びプログラム
CN109542299B (zh) 用于电子书的金句展示方法、电子设备及计算机存储介质
CN113283432A (zh) 图像识别、文字排序方法及设备
Budig Extracting spatial information from historical maps: algorithms and interaction
CN110580297A (zh) 基于菜品图像的商户及菜品匹配方法、装置、电子设备
CN110609968B (zh) 图文信息的排序处理方法、装置及设备
US10095802B2 (en) Methods and systems for using field characteristics to index, search for, and retrieve forms
US20210182477A1 (en) Information processing apparatus and non-transitory computer readable medium storing program
CN112312189B (zh) 一种视频生成方法及视频生成系统
CN113936187A (zh) 文本图像合成方法、装置、存储介质及电子设备
CN110378566B (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
GR01 Patent grant
GR01 Patent grant