CN110147516A - 页面设计中前端代码的智能识别方法及相关设备 - Google Patents
页面设计中前端代码的智能识别方法及相关设备 Download PDFInfo
- Publication number
- CN110147516A CN110147516A CN201910298699.7A CN201910298699A CN110147516A CN 110147516 A CN110147516 A CN 110147516A CN 201910298699 A CN201910298699 A CN 201910298699A CN 110147516 A CN110147516 A CN 110147516A
- Authority
- CN
- China
- Prior art keywords
- code
- end code
- original text
- new page
- image
- 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.)
- Pending
Links
- 238000013461 design Methods 0.000 title claims abstract description 156
- 238000000034 method Methods 0.000 title claims abstract description 38
- 239000000284 extract Substances 0.000 claims description 18
- 239000011159 matrix material Substances 0.000 claims description 14
- 230000000007 visual effect Effects 0.000 claims description 10
- 238000004364 calculation method Methods 0.000 claims description 8
- 238000012545 processing Methods 0.000 claims description 4
- 230000003287 optical effect Effects 0.000 claims description 3
- 239000013598 vector Substances 0.000 description 16
- 230000008569 process Effects 0.000 description 6
- 230000008901 benefit Effects 0.000 description 4
- 238000012938 design process Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000000605 extraction Methods 0.000 description 3
- 238000001914 filtration Methods 0.000 description 3
- 230000018109 developmental process Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000011218 segmentation Effects 0.000 description 2
- 238000009416 shuttering Methods 0.000 description 2
- 108091029480 NONCODE Proteins 0.000 description 1
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000003709 image segmentation Methods 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000011946 reduction process Methods 0.000 description 1
- 238000011524 similarity measure Methods 0.000 description 1
- 238000000638 solvent extraction Methods 0.000 description 1
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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Character Discrimination (AREA)
- Character Input (AREA)
Abstract
本申请涉及页面设计技术领域，尤其涉及一种页面设计中前端代码的智能识别方法及相关设备，包括：获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。本申请有效解决了人工书写代码和页面显示情况不一致的问题。
Description
技术领域
本申请涉及页面设计技术领域，尤其涉及一种页面设计中前端代码的智能识别方法及相关设备。
背景技术
随着互联网技术的发展，互联网的应用越来越广泛，越来越多的用户可以通过互联网进行网页浏览。用户想要浏览某网页时，用户终端可以从服务器获取该网页的前端代码，用户终端运行该前端代码，以显示该网页。网页通常由不同类别的内容元素组成，比如图片、表格和输入框等类别，其中，前端代码包含有网页中各内容元素的显示代码。
技术人员在编写前端代码时，需要针对网页中的每个内容元素，分别编写其对应的显示代码，从而得到该网页的前端代码。例如，对于某网页包含两个表格和一个图片，技术人员需要编写两个表格对应的显示代码，以及图片对应的显示代码，然后根据这三个内容元素的显示代码，得到该网页的前端代码。
但是，在技术人员编写代码时存在着人工编写的代码与网页页面不一致的情况，比如，像素、尺寸、比例、文案大小、颜色等都会有偏差，因而导致在进行UI设计时需要实时对人工编写的代码进行校验以满足UI设计的需要。
发明内容
基于此，有必要针对目前UI设计过程中，人工编写的代码与网页页面需要展示的图像存在着误差的问题，提供一种页面设计中前端代码的智能识别方法及相关设备。
一种页面设计中前端代码的智能识别方法，包括如下步骤：
获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
在其中一个可能的实施例中，所述获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库，包括：
接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；
根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。
在其中一个可能的实施例中，获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码，包括：
获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；
将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；
汇总每一个所述代码图像子块中的字符后，得到新页面设计稿的代码图像对应的初始前端代码，根据预设的代码规则对所述新页面设计代码进行修正后得到新页面设计稿的代码图像对应的最终前端代码。
在其中一个可能的实施例中，所述查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段，包括：
获取所述新页面设计稿的代码图像对应的前端代码的特征属性，根据所述特征属性得到所述新页面设计稿的代码图像对应的前端代码在所述前端代码模板库中的查询路径，根据所述查询路径查询所述前端代码模板库后得到所述新页面设计稿的代码图像对应的前端代码模板；
计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段。
在其中一个可能的实施例中，所述获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库，包括：
获取所述目标内容元素的可视化图像，从所述可视化图像中提取像素特征点，根据所述像素特征点的位置，确定所述目标内容元素的类别特征标识；
获取具有同一类别特征标识的目标内容元素所对应的前端代码，根据所述前端代码的首字母排序后，生成一前端代码组；
根据所述前端代码组的生成时间，赋予所述前端代码组以编号，根据所述编号依次排列所述前端代码组后形成所述前端代码模板库。
在其中一个可能的实施例中，所述将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符，包括：
将所述图像子块进行光学字符识别OCR以生成OCR识别结果，所述OCR识别结果为字符串数组；
抽取各所述字符串数据组的特征信息，根据所述特征信息建立特征信息矩阵，所述特征信息矩阵中的元素是所述特征信息中的字符；
按照所述特征信息矩阵中的元素的类型，将所述特征信息矩阵中的元素进行归类，形成数个特征信息子矩阵；
提取所述特征信息子矩阵中的每一个元素的灰度值，与预设的标准元素的灰度值进行比较，若某一个元素的灰度值与某一个所述标准元素的灰度值完全一致，则将所述某一个元素的灰度值作为所述特征信息子矩阵的要素特征，汇总所有要素特征后得到所述子块中的字符信息。
在其中一个可能的实施例中，计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段，包括：
获取所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中任一代码字段之间的汉明距离；
若所述汉明距离小于预设汉明距离阈值，则使用余弦算法计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中的任一代码字段之间的余弦值；若所述汉明距离大于所述预设汉明距离阈值，则抛弃所述代码字段；
将所述余弦值与预设的余弦阈值进行比较，若所述余弦值大于或者等于所述余弦阈值，则抽取所述代码字段，否则不抽取。
一种页面设计中前端代码的智能识别装置，包括如下模块：
建立模板库模块，设置为获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
代码识别模块，设置为获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
匹配设计模块，设置为查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行上述页面设计中前端代码的智能识别方法的步骤。
一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述页面设计中前端代码的智能识别方法的步骤。
与现有机制相比，本申请具有如下优点：
(1)通过构建前端代码模板库，应用图像识别技术将使用者书写的前端代码与前端代码库进行有效匹配，从而解决了人工编写的代码与网页页面展示效果不一致的问题；
(2)通过建立前端代码模板从而使未知前端代码获得对应的参考标准，从而节约了人工核验的步骤；
(3)通过对代码图像进行有效处理，从而能够准确地识别出人工输入的代码字符；
(4)通过将代码图像与前端代码模板进行相似性比较，能够准确地获得代码图像对应的代码字段，从而有效地完成人工代码识别工作。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。
图1为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法的整体流程图；
图2为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法中的建立模板库过程示意图；
图3为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法中的代码识别过程示意图；
图4为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法中的匹配设计过程示意图；
图5为本申请在一个实施例中的一种页面设计中前端代码的智能识别装置的结构图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。
图1为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法的整体流程图，如图1所示，一种页面设计中前端代码的智能识别方法，包括以下步骤：
S1，获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
具体的，基础代码可以根据所要设计的页面属性进行确定，比如，HTML5的页面设计基础代码中包含有页面的尺寸等信息。目标内容元素的类别可以是滚动条、搜索框等不同的组件。在进行聚类时，可以将上述组件进行数值化处理，然后根据数值之间的差值进行聚类，即两个组件对应的数值差在预设的差额阈值内则归为一类。
S2，获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
具体的，对用户输入的新页面设计稿的代码图像可以先进行降噪处理，去除代码图像中的非代码部分，然后对代码部分进行OCR字符识别，在进行OCR字符识别时，可以划定每一个字符的区域。对每一个区域进行字符笔画识别，根据字符笔画识别结果得到字符信息，汇总字符信息后得到所述新页面设计稿的代码图像对应的前端代码。
S3，查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
具体的，在构建所述前端代码库时，每一个前端代码模板都要进行编号，在查询所述前端代码模板库时，可以根据编号依次查询各个前端代码模板。从新页面设计稿代码图像中可以先获得代码的类型信息，比如，新页面设计稿代码图像中的前端代码是基于何种程序开发语言编写的。比如，是C语言还是JAVA语言等。然后根据类型信息，从前端代码模板库中抽取出该类型的所有前端代码模板进行逐个代码字段的匹配。
本实施例，通过构建前端代码模板库，应用图像识别技术将使用者书写的前端代码与前端代码库进行有效匹配，从而解决了人工编写的代码与网页页面展示效果不一致的问题。
图2为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法中的建立模板库过程示意图，如图所示，所述S1，获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库，包括：
S101、接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；
具体的，用户可以在终端安装用于生成网页的前端代码的应用程序，该应用程序中可以包括预设的多个内容元素的基础代码。其中，该内容元素是网页中的任意内容元素，比如标题、图片、表格和输入框等。
S102、根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；
具体的，在从基础代码数据库中进行抽取前端代码时，可以先获取所述目标内容元素的显示代码在基础代码数据库中对应的模块地址；根据获取所述目标内容元素的显示代码对应的模块地址，从基础代码数据库中获取所述目标内容元素的原始前端代码；根据所述用户输入的所述视图参数的参数值，对所述原始显示代码进行归类，得到最终前端代码和其它代码。
其中，在对所述原始显示代码进行归类时，遍历所述原始显示代码，查询出所述原始显示代码中包含的所述视图参数的参数值，将包含有所述参数值的字段从所述原始显示代码中提取出来，提取的长度一般以代码与代码之间的分隔符作为标记，分割符可以是“、”或者“，”等。
S103、获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。
具体的，目标内容元素的特征标识可以是轮廓特征，比如目标元素为一个多边形，也可以是一个颜色特征标识，比如，红色。即可以根据轮廓特征值将具有同一形状的目标内容元素的特征标识进行聚类，或者将具有同一颜色特征标识的进行聚类。
本实施例，通过建立前端代码模板从而使未知前端代码获得对应的参考标准，从而节约了人工核验的步骤。
图3为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法中的代码识别过程示意图，如图所示，所述S2，获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码，包括：
S201、获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；
具体的，在对页面设计代码图像进行滤波处理时，获取待滤波处理的页面设计代码图像像素点位置所对应的标准图像的像素值与相邻区域中的像素点的标准图像像素值的差值，若所述差值小于等于滤波阈值，则去除所述页面设计代码图像中的像素值最大的像素点，若所述差值大于所述滤波阈值，则去除所述页面设计代码图像中的像素值最小的像素点。
S202、将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；
具体的，在进行代码图像分割时可以是等大小分割，也可以是不等大小分割，但是无论哪种分割方式都需要保证在每一个子块中含有至少一个字符。
S203、汇总每一个所述代码图像子块中的字符后，得到新页面设计稿的代码图像对应的初始前端代码，根据预设的代码规则对所述新页面设计代码进行修正后得到新页面设计稿的代码图像对应的最终前端代码。
具体的，根据所述代码图像子块在原所述新页面设计稿代码图像的位置，拼接每一个所述代码图像子块中的字符后，得到新页面设计稿代码图像对应的初始前端代码；在对所述页面设计稿代码图像进行分割时，对每一个子块进行标记，比如，赋予位于原页面设计稿代码图像左上角的第一块子块以编号“1”，则在拼接子块中的字符时，将此子快对应的字符放置在首位上。获取前端代码对应的多个语句规则，根据所述页面设计稿的类型属性，从多个所述语句规则中抽取出所述页面设计稿对应的初始前端代码所对应的语句规则，其中，所述页面设计稿的类型属性根据页面设计稿的文件格式确定；比如，页面设计稿的文件格式是.doc，则对应的类别属性为“文档”，页面设计稿的文件格式为.jpg，则对应的类别属性为“图像”，根据所述语句规则，对所述页面设计稿对应的初始前端代码进行修正，去除不符合所述语句规则的字符后得到所述页面设计稿代码图像对应的最终前端代码。
本实施例，通过对代码图像进行有效处理，从而能够准确的识别出人工输入的代码字符。
图4为本申请在一个实施例中的一种页面设计中前端代码的智能识别方法中的匹配设计过程示意图，如图所示，所述S3，查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段，包括：
S301、获取所述新页面设计稿的代码图像对应的前端代码的特征属性，根据所述特征属性得到所述新页面设计稿的代码图像对应的前端代码在所述前端代码模板库中的查询路径，根据所述查询路径查询所述前端代码模板库后得到所述新页面设计稿的代码图像对应的前端代码模板；
其中，特征属性是指新页面设计稿的文件类型和大小等参数。获取所述新页面设计稿的文件类型，根据所述文件类型设置查询所述前端代码模板的主节点；获取所述新页面设计稿的文件大小，根据所述文件大小设置查询所述前端代码模板的从节点；连接任意两个所述主节点和所述从节点得到所述查询路径，根据所述查询路径，查询所述前端代码模板库后得到所述新页面设计稿代码图像对应的前端代码模板。在查询所述前端代码模板时，文件类型可以对应代码模板索引的主索引，文件大小可以对应代码模板索引的子索引，根据索引既可以有效的查询所有代码模板库。
S302、计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段。
具体的，在进行相似度计算时可以应用文本比较算法进行字符比较，具体在比较两个字符相似度的时候可以比较两个字符的笔画，只有当两个字符的笔画完全一致时，才能说明两个字符为同一个字符。在两串字符进行相似度比较时，可以抽取出不一致字符的数量，根据数量可以得到这两串字符的相似度，相似度大于阈值则两串字符匹配，否则不匹配。
本实施例，通过将代码图像与前端代码模板进行相似性比较，能够准确的获得代码图像对应的代码字段，从而有效的完成人工代码识别工作。
在一个实施例中，所述S103、获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库，包括：
获取所述目标内容元素的可视化图像，从所述可视化图像中提取像素特征点，根据所述像素特征点的位置，确定所述目标内容元素的类别特征标识；
具体的，将所述目标内容元素在页面上进行展示，应用轮廓识别算法识别出所述目标元素的可视化图像的尺寸，遍历所述可视化图像，获取所可视化图像上的所有像素点，根据相邻像素点数值的差异，获得所述可视化图像的像素特征点，根据所述像素特征点的位置标识，得到目标内容元素的特征标识，比如特征像素点的像素值为R215，G112，B12，对应的位置坐标为(12,35)则特征标识为R215G112B12.12.35。
获取具有同一类别特征标识的目标内容元素所对应的前端代码，根据所述前端代码的首字母排序后，生成一前端代码组；
其中，同一类别特征标识可以是轮廓标识也可以是颜色标识，比如，红色作为一个类别标识。
根据所述前端代码组的生成时间，赋予所述前端代码组以编号，根据所述编号依次排列所述前端代码组后形成所述前端代码模板库。
本实施例，通过对特征标识进行有效排列建立了一个有序的前端代码模板库。
在一个实施例中，所述S202、将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符，包括：
将所述图像子块进行光学字符识别OCR以生成OCR识别结果，所述OCR识别结果为字符串数组；
具体的，OCR是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文字的过程。具有对字符进行精准识别的效果。
抽取各所述字符串数据组的特征信息，根据所述特征信息建立特征信息矩阵，所述特征信息矩阵中的元素是所述特征信息中的字符；
具体的，字符串组的特征信息可以是字符串中的特殊字符，如“，”、“、”等。
按照所述特征信息矩阵中的元素的类型，将所述特征信息矩阵中的元素进行归类，形成数个特征信息子矩阵；
其中，在特征信息矩阵中的元素可以分为数字、特殊字符和文字等不同的类型，然后根据行、列变换的方式，将同一类型的元素聚集后形成数个特征信息子矩阵。
提取所述特征信息子矩阵中的每一个元素的灰度值，与预设的标准元素的灰度值进行比较，若某一个元素的灰度值与某一个所述标准元素的灰度值完全一致，则将所述某一个元素的灰度值作为所述特征信息子矩阵的要素特征，汇总所有要素特征后得到所述子块中的字符信息。
本实施例，通过建立特征信息矩阵，从而对代码图像中的字符进行了有效识别。
在一个实施例中所述S302、计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段，包括：
获取所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中任一代码字段之间的汉明距离；
具体的，根据simhash算法分别计算所述新页面设计稿代码图像对应的前端代码对应的第一simhash值以及所述前端代码模板中各代码对应的第二simhash值；根据所述第一simhash值和所述第二simhash值计算所述汉明距离。
其中，simhash算法的主要思想是降维，将高维的特征向量映射成低维的特征向量；也就是说，它就是将一个字符串变换成另外一个字符串所需要替换的字符个数。例如：1011101与1001001之间的汉明距离是2。
若所述汉明距离小于预设汉明距离阈值，则使用余弦算法计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中的任一代码字段之间的余弦值；若所述汉明距离大于所述预设汉明距离阈值，则抛弃所述代码字段；
其中，余弦算法又称为余弦相似度算法，是通过计算两个向量的夹角余弦值来评估他们的相似度。余弦相似度将向量根据坐标值，绘制到向量空间中，如最常见的二维空间。余弦相似性通过测量两个向量的夹角的余弦值来度量它们之间的相似性。0度角的余弦值是1，而其他任何角度的余弦值都不大于1；并且其最小值是-1。从而两个向量之间的角度的余弦值确定两个向量是否大致指向相同的方向。两个向量有相同的指向时，余弦相似度的值为1；两个向量夹角为90°时，余弦相似度的值为0；两个向量指向完全相反的方向时，余弦相似度的值为-1。这结果是与向量的长度无关的，仅仅与向量的指向方向相关。余弦相似度通常用于正空间，因此给出的值为0到1之间。
常见的余弦相似度公式为：
式子中，a为新页面设计稿的代码图像对应的前端代码中的n维词向量值，和b为前端代码模板中任一代码字段的n维向量值。θ为a词向量和b词向量在n维空间的夹角。
所述预设汉明距离阈值根据统计历史数据后得到的，汉明距离是使用在数据传输差错控制编码里面的，汉明距离是一个概念，它表示两个(相同长度)字对应不同的数量，我们以d(x,y)表示两个字x,y之间的汉明距离。对两个字符串进行异或运算，并统计结果为1的个数，那么这个数就是汉明距离。
具体计算过程如下:d(x,y)＝∑x[i]⊕y[i]，其中，i＝0,1,..n-1，x表示所述新页面设计稿的代码图像对应的前端代码的编码，y表示所述前端代码模板中任一代码字段，⊕表示异或。
将所述余弦值与预设的余弦阈值进行比较，若所述余弦值大于或者等于所述余弦阈值，则抽取所述代码字段，否则不抽取。
其中，所述余弦阈值是根据历史数据统计得到的，余弦算法是一种常用的计算相似度的算法，在本实施例中余弦阈值可以设为80°。
本实施例，通过计算汉明距离和余弦值，对新页面设计稿的代码图像对应的前端代码与前端代码模板中任一代码字段进行了相似度计算，提取相似度最大的前端代码模板作为最佳的代码模板。
在一个实施例中，提出了一种页面设计中前端代码的智能识别装置，如图5所示，包括如下模块：
建立模板库模块51，设置为获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
代码识别模块52，设置为获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
匹配设计模块53，设置为查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
在一个实施例中，提出了一种计算机设备，所述计算机设备包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述各实施例中的所述页面设计中前端代码的智能识别方法的步骤。
在一个实施例中，提出了一种存储有计算机可读指令的存储介质，该计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述各实施例中的所述页面设计中前端代码的智能识别方法的步骤。其中，所述存储介质可以为非易失性存储介质。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，该程序可以存储于一计算机可读存储介质中，存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁盘或光盘等。
以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请一些示例性实施例，其中描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (10)
1.一种页面设计中前端代码的智能识别方法，其特征在于，包括：
获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
2.根据权利要求1所述的页面设计中前端代码的智能识别方法，其特征在于，所述获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库，包括：
接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；
根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；
获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。
3.根据权利要求1所述的页面设计中前端代码的智能识别方法，其特征在于，所述获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码，包括：
获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；
将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；
汇总每一个所述代码图像子块中的字符后，得到新页面设计稿的代码图像对应的初始前端代码，根据预设的代码规则对所述新页面设计代码进行修正后得到新页面设计稿的代码图像对应的最终前端代码。
4.根据权利要求1所述的页面设计中前端代码的智能识别方法，其特征在于，所述查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段，包括：
获取所述新页面设计稿的代码图像对应的前端代码的特征属性，根据所述特征属性得到所述新页面设计稿的代码图像对应的前端代码在所述前端代码模板库中的查询路径，根据所述查询路径查询所述前端代码模板库后得到所述新页面设计稿的代码图像对应的前端代码模板；
计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段。
5.根据权利要求2所述的页面设计中前端代码的智能识别方法，其特征在于，所述获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库，包括：
获取所述目标内容元素的可视化图像，从所述可视化图像中提取像素特征点，根据所述像素特征点的位置，确定所述目标内容元素的类别特征标识；
获取具有同一类别特征标识的目标内容元素所对应的前端代码，根据所述前端代码的首字母排序后，生成一前端代码组；
根据所述前端代码组的生成时间，赋予所述前端代码组以编号，根据所述编号依次排列所述前端代码组后形成所述前端代码模板库。
6.根据权利要求3所述的页面设计中前端代码的智能识别方法，其特征在于，所述将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符，包括：
将所述图像子块进行光学字符识别OCR以生成OCR识别结果，所述OCR识别结果为字符串数组；
抽取各所述字符串数据组的特征信息，根据所述特征信息建立特征信息矩阵，所述特征信息矩阵中的元素是所述特征信息中的字符；
按照所述特征信息矩阵中的元素的类型，将所述特征信息矩阵中的元素进行归类，形成数个特征信息子矩阵；
提取所述特征信息子矩阵中的每一个元素的灰度值，与预设的标准元素的灰度值进行比较，若某一个元素的灰度值与某一个所述标准元素的灰度值完全一致，则将所述某一个元素的灰度值作为所述特征信息子矩阵的要素特征，汇总所有要素特征后得到所述子块中的字符信息。
7.根据权利要求4所述的页面设计中前端代码的智能识别方法，其特征在于，所述计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段，包括：
获取所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中任一代码字段之间的汉明距离；
若所述汉明距离小于预设汉明距离阈值，则使用余弦算法计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中的任一代码字段之间的余弦值；若所述汉明距离大于所述预设汉明距离阈值，则抛弃所述代码字段；
将所述余弦值与预设的余弦阈值进行比较，若所述余弦值大于或者等于所述余弦阈值，则抽取所述代码字段，否则不抽取。
8.一种页面设计中前端代码的智能识别装置，其特征在于，包括：
建立模板库模块，设置为获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
代码识别模块，设置为获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
匹配设计模块，设置为查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
9.一种计算机设备，其特征在于，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行如权利要求1至7中任一项权利要求所述页面设计中前端代码的智能识别方法的步骤。
10.一种存储有计算机可读指令的存储介质，其特征在于，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如权利要求1至7中任一项权利要求所述页面设计中前端代码的智能识别方法的步骤。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910298699.7A CN110147516A (zh) | 2019-04-15 | 2019-04-15 | 页面设计中前端代码的智能识别方法及相关设备 |
| PCT/CN2019/120550 WO2020211380A1 (zh) | 2019-04-15 | 2019-11-25 | 页面设计中前端代码的智能识别方法及相关设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910298699.7A CN110147516A (zh) | 2019-04-15 | 2019-04-15 | 页面设计中前端代码的智能识别方法及相关设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110147516A true CN110147516A (zh) | 2019-08-20 |
Family
ID=67589769
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910298699.7A Pending CN110147516A (zh) | 2019-04-15 | 2019-04-15 | 页面设计中前端代码的智能识别方法及相关设备 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN110147516A (zh) |
| WO (1) | WO2020211380A1 (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111596925A (zh) * | 2020-06-18 | 2020-08-28 | 腾讯科技（深圳）有限公司 | 自动生成代码的方法、装置、计算机设备及介质 |
| WO2020211380A1 (zh) * | 2019-04-15 | 2020-10-22 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016065701A1 (zh) * | 2014-10-27 | 2016-05-06 | 深圳Tcl数字技术有限公司 | 图像文字识别方法及装置 |
| CN107193554A (zh) * | 2017-04-27 | 2017-09-22 | 北京小米移动软件有限公司 | 一种生成前端代码的方法和装置 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108764352A (zh) * | 2018-05-25 | 2018-11-06 | 百度在线网络技术（北京）有限公司 | 重复页面内容检测方法和装置 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014070165A1 (en) * | 2012-10-31 | 2014-05-08 | Hewlett-Packard Development Company, L.P. | Executable software specification generation |
| CN106650437A (zh) * | 2016-12-29 | 2017-05-10 | 广州华多网络科技有限公司 | webshell检测方法和装置 |
| CN110147516A (zh) * | 2019-04-15 | 2019-08-20 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
-
2019
- 2019-04-15 CN CN201910298699.7A patent/CN110147516A/zh active Pending
- 2019-11-25 WO PCT/CN2019/120550 patent/WO2020211380A1/zh active Application Filing
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2016065701A1 (zh) * | 2014-10-27 | 2016-05-06 | 深圳Tcl数字技术有限公司 | 图像文字识别方法及装置 |
| CN107193554A (zh) * | 2017-04-27 | 2017-09-22 | 北京小米移动软件有限公司 | 一种生成前端代码的方法和装置 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108764352A (zh) * | 2018-05-25 | 2018-11-06 | 百度在线网络技术（北京）有限公司 | 重复页面内容检测方法和装置 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2020211380A1 (zh) * | 2019-04-15 | 2020-10-22 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
| CN111596925A (zh) * | 2020-06-18 | 2020-08-28 | 腾讯科技（深圳）有限公司 | 自动生成代码的方法、装置、计算机设备及介质 |
| CN111596925B (zh) * | 2020-06-18 | 2023-11-07 | 腾讯科技（深圳）有限公司 | 自动生成代码的方法、装置、计算机设备及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2020211380A1 (zh) | 2020-10-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN113762028B (zh) | 从文本文档进行数据驱动的结构提取 | |
| Cliche et al. | Scatteract: Automated extraction of data from scatter plots | |
| CN110909725A (zh) | 识别文本的方法、装置、设备及存储介质 | |
| Al-Zaidy et al. | Automatic extraction of data from bar charts | |
| US8687886B2 (en) | Method and apparatus for document image indexing and retrieval using multi-level document image structure and local features | |
| US8467614B2 (en) | Method for processing optical character recognition (OCR) data, wherein the output comprises visually impaired character images | |
| CN105930159A (zh) | 一种基于图像的界面代码生成的方法及*** | |
| US8838657B1 (en) | Document fingerprints using block encoding of text | |
| Al-Zaidy et al. | A machine learning approach for semantic structuring of scientific charts in scholarly documents | |
| Iakovidou et al. | Localizing global descriptors for content-based image retrieval | |
| CN113033269B (zh) | 一种数据处理方法及装置 | |
| CN112949476B (zh) | 基于图卷积神经网络的文本关系检测方法、装置及存储介质 | |
| WO2020071558A1 (ja) | 帳票レイアウト解析装置、その解析プログラムおよびその解析方法 | |
| CN114612921B (zh) | 表单识别方法、装置、电子设备和计算机可读介质 | |
| CN112084451B (zh) | 一种基于视觉分块的网页logo提取***及方法 | |
| Yang et al. | MIDI passage retrieval using cell phone pictures of sheet music | |
| CN110147516A (zh) | 页面设计中前端代码的智能识别方法及相关设备 | |
| US20230138491A1 (en) | Continuous learning for document processing and analysis | |
| CN110688998A (zh) | 票据识别方法及装置 | |
| CN114529933A (zh) | 一种合同数据差异性的比对方法、装置、设备和介质 | |
| Lakshmi et al. | An optical character recognition system for printed Telugu text | |
| CN101814141A (zh) | 存储介质、字符识别方法以及字符识别设备 | |
| Baek et al. | TRACE: Table Reconstruction Aligned to Corner and Edges | |
| CN115880702A (zh) | 数据处理方法、装置、设备、程序产品及存储介质 | |
| CN115294593A (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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190820 |