WO2020211380A1 - 页面设计中前端代码的智能识别方法及相关设备 - Google Patents
页面设计中前端代码的智能识别方法及相关设备 Download PDFInfo
- Publication number
- WO2020211380A1 WO2020211380A1 PCT/CN2019/120550 CN2019120550W WO2020211380A1 WO 2020211380 A1 WO2020211380 A1 WO 2020211380A1 CN 2019120550 W CN2019120550 W CN 2019120550W WO 2020211380 A1 WO2020211380 A1 WO 2020211380A1
- Authority
- WO
- WIPO (PCT)
- Prior art keywords
- code
- page design
- end code
- new page
- image
- Prior art date
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
- 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
Definitions
- This application relates to the technical field of page design, and in particular to a method for intelligently identifying front-end codes in page design and related equipment.
- the user terminal can obtain the front-end code of the webpage from the server, and the user terminal runs the front-end code to display the webpage.
- a web page is usually composed of content elements of different categories, such as pictures, tables, and input boxes.
- the front-end code contains the display code of each content element in the web page.
- a technician When a technician writes the front-end code, he needs to write its corresponding display code for each content element in the webpage, so as to obtain the front-end code of the webpage. For example, for a web page containing two tables and a picture, the technician needs to write the display code corresponding to the two tables and the display code corresponding to the picture, and then obtain the front-end code of the web page according to the display code of the three content elements.
- a method for intelligently identifying front-end code in page design including the following steps:
- the front-end code template library to obtain a code template corresponding to the front-end code corresponding to the code image of the new page design draft, and extract the front-end code corresponding to the new page design draft code image from the code template The matching code field.
- An intelligent recognition device for front-end code in page design including the following modules:
- Establish a template library module set to obtain the basic code of the target content element, generate the front-end code of the target content element according to the basic code and view parameters, and cluster the front-end code according to the category of the target content element Front-end code template library;
- the code recognition module is configured to obtain the code image of the new page design draft, and perform character recognition on the code image of the new page design draft to obtain the front-end code corresponding to the code image of the new page design draft;
- the matching design module is configured to query the front-end code template library to obtain a code template corresponding to the front-end code corresponding to the code image of the new page design draft, and extract from the code template the new page design draft The code field that matches the front-end code corresponding to the code image.
- a computer device including a memory and a processor
- the memory stores computer readable instructions
- the processor executes the intelligence of the front-end code in the page design Identify the steps of the method.
- a storage medium storing computer-readable instructions.
- the one or more processors execute the steps of the intelligent identification method of the front-end code in the page design.
- FIG. 1 is an overall flowchart of a method for intelligently identifying front-end codes in a page design in an embodiment of this application;
- FIG. 2 is a schematic diagram of a process of establishing a template library in a method for intelligently identifying front-end codes in page design in an embodiment of the present application;
- FIG. 3 is a schematic diagram of a code recognition process in a method for intelligently recognizing front-end codes in a page design in an embodiment of this application;
- FIG. 4 is a schematic diagram of a matching design process in a method for intelligently identifying front-end codes in page design in an embodiment of the present application
- Fig. 5 is a structural diagram of a device for intelligent recognition of front-end code in a page design in an embodiment of the application.
- Figure 1 is an overall flowchart of a method for intelligently identifying front-end codes in page design in an embodiment of this application. As shown in Figure 1, a method for intelligently identifying front-end codes in page design includes the following steps:
- the basic code can be determined according to the attributes of the page to be designed.
- the basic code of HTML5 page design contains information such as the size of the page.
- the types of target content elements can be different components such as scroll bars and search boxes.
- S2 Obtain a code image of a new page design draft, and perform character recognition on the code image of the new page design draft to obtain a front-end code corresponding to the code image of the new page design draft;
- the code image of the new page design draft input by the user can be denoised first to remove the non-code part of the code image, and then perform OCR character recognition on the code part.
- OCR character recognition each A character area. Perform character stroke recognition for each area, obtain character information according to the character stroke recognition result, and obtain the front-end code corresponding to the code image of the new page design draft after summarizing the character information.
- each front-end code template when constructing the front-end code library, each front-end code template must be numbered, and when querying the front-end code template library, each front-end code template can be queried sequentially according to the number.
- the code type information can be obtained from the code image of the new page design draft, for example, the front-end code in the code image of the new page design draft is based on which programming language is written. For example, is it C language or JAVA language? Then, according to the type information, all front-end code templates of this type are extracted from the front-end code template library to match the code fields one by one.
- FIG. 2 is a schematic diagram of the process of establishing a template library in a method for intelligently identifying front-end codes in page design in an embodiment of the application.
- the S1 obtains the basic code of the target content element, according to the The basic code and view parameters are used to generate the front-end code of the target content element, and cluster the front-end code to form a front-end code template library according to the category of the target content element, including:
- the user may install an application program for generating front-end code of a webpage on the terminal, and the application program may include preset basic codes of multiple content elements.
- the content element is any content element in the webpage, such as a title, a picture, a table, and an input box.
- the module address corresponding to the display code of the target content element in the basic code database may be obtained first; according to the module address corresponding to the display code of the target content element obtained , Obtain the original front-end code of the target content element from the basic code database; classify the original display code according to the parameter value of the view parameter input by the user to obtain the final front-end code and other codes.
- the original display code when categorizing the original display code, the original display code is traversed, the parameter value of the view parameter contained in the original display code is queried, and the field containing the parameter value is selected from all Extracted from the original display code, the extracted length is generally marked by the separator between the code and the code, and the separator can be ",” or ",” and so on.
- the feature identifier of the target content element may be a contour feature, for example, the target element is a polygon, or it may be a color feature identifier, for example, red. That is, the feature identifiers of the target content elements with the same shape can be clustered according to the contour feature value, or the feature identifiers with the same color can be clustered.
- a front-end code template is established so that the unknown front-end code can obtain a corresponding reference standard, thereby saving manual verification steps.
- Fig. 3 is a schematic diagram of the code recognition process in a method for intelligently recognizing front-end codes in a page design in an embodiment of this application.
- the S2 obtains the code image of the new page design draft
- the Character recognition is performed on the code image of the new page design draft to obtain the front-end code corresponding to the code image of the new page design draft, including:
- S201 Obtain a code image of a new page design draft input by a user, and filter the code image of the new page design draft to remove moiré in the code image of the new page design draft;
- the difference between the pixel value of the standard image corresponding to the pixel position of the page design code image to be filtered and the standard image pixel value of the pixels in the adjacent area is obtained , If the difference is less than or equal to the filter threshold, the pixel with the largest pixel value in the page design code image is removed; if the difference is greater than the filter threshold, the pixel in the page design code image is removed The pixel with the smallest value.
- the code image segmentation can be equal-size segmentation or unequal-size segmentation, but no matter which segmentation method, it is necessary to ensure that each sub-block contains at least one character.
- the initial front-end code corresponding to the new page design draft code image is obtained;
- mark each sub-block for example, assign the number "1" to the first sub-block located at the upper left corner of the code image of the original page design draft, then it will be in the spliced sub-block
- the character is displayed, put the character corresponding to this sub-block in the first position.
- the sentence rules corresponding to the initial front-end code corresponding to the page design draft from the plurality of sentence rules according to the type attribute of the page design draft, wherein the The type attribute of the page design draft is determined according to the file format of the page design draft; for example, if the file format of the page design draft is .doc, the corresponding category attribute is "document", and the file format of the page design draft is .jpg, then the corresponding The category attribute is "image”.
- the initial front-end code corresponding to the page design draft is revised, and characters that do not meet the sentence rules are removed to obtain the final front-end code corresponding to the page design draft code image .
- the manually input code character can be accurately recognized.
- Figure 4 is a schematic diagram of a matching design process in a method for intelligently identifying front-end codes in page design in an embodiment of the application.
- the S3 queries the front-end code template library to obtain the The code template corresponding to the front-end code corresponding to the code image of the new page design draft is extracted from the code template and the code fields that match the front-end code corresponding to the new page design draft code image include:
- the characteristic attribute refers to the file type and size of the new page design draft.
- Obtain the file type of the new page design draft query the main node of the front-end code template according to the file type setting; obtain the file size of the new page design draft, and query the front-end code template according to the file size setting
- the slave node connect any two of the master node and the slave node to obtain the query path, and according to the query path, query the front-end code template library to obtain the front-end code corresponding to the new page design draft code image template.
- the file type can correspond to the main index of the code template index
- the file size can correspond to the sub-index of the code template index. According to the index, all code template libraries can be effectively queried.
- the text comparison algorithm can be used for character comparison when calculating the similarity.
- the strokes of two characters can be compared. Only when the strokes of the two characters are exactly the same can the two characters be described. Characters are the same character.
- the similarity of two strings of characters the number of inconsistent characters can be extracted, and the similarity of the two strings of characters can be obtained according to the number. If the similarity is greater than the threshold, the two strings of characters will match, otherwise they will not match.
- the code field corresponding to the code image can be accurately obtained, thereby effectively completing the manual code recognition work.
- the step S103, acquiring the category feature identifier of the target content element, and clustering the front-end code of the target content element according to the category feature identifier to form the front-end code template library includes:
- the target content element is displayed on the page, the contour recognition algorithm is used to identify the size of the visual image of the target element, the visual image is traversed, and all the pixels on the visualized image are obtained according to adjacent The difference in the value of the pixel points, the pixel feature points of the visual image are obtained, and the feature identification of the target content element is obtained according to the position identification of the pixel feature point.
- the pixel value of the feature pixel point is R215, G112, B12, corresponding The location coordinate is (12,35), the feature identification is R215G112B12.12.35.
- the feature identifier of the same category may be an outline identifier or a color identifier, for example, red as a category identifier.
- the front-end code group is assigned a number, and the front-end code group is sequentially arranged according to the number to form the front-end code template library.
- an orderly front-end code template library is established by effectively arranging feature identifiers.
- the step S202 dividing the code image of the new page design draft after removing the moiré into several code image sub-blocks, and extracting the characters in the code image sub-blocks, includes:
- OCR refers to a process in which electronic devices (such as scanners or digital cameras) examine characters printed on paper, determine their shapes by detecting dark and light patterns, and then use character recognition methods to translate the shapes into computer text. It has the effect of accurately recognizing characters.
- the characteristic information of the character string group may be special characters in the character string, such as ",”, ",” and so on.
- the elements in the characteristic information matrix can be divided into different types such as numbers, special characters and characters, and then according to the row and column transformation methods, the same type of elements are gathered to form several characteristic information sub-matrices.
- the gray value of each element in the feature information sub-matrix is extracted and compared with the gray value of the preset standard element. If the gray value of a certain element is completely equal to the gray value of a certain standard element If they are consistent, the gray value of the one element is used as the feature feature of the feature information sub-matrix, and the character information in the sub-block is obtained after summarizing all feature features.
- the code field that matches the front-end code corresponding to the code image includes:
- the first simhash value corresponding to the front-end code corresponding to the code image of the new page design draft and the second simhash value corresponding to each code in the front-end code template are respectively calculated according to the simhash algorithm; according to the first simhash value and The second simhash value calculates the Hamming distance.
- the main idea of the simhash algorithm is dimensionality reduction, which maps high-dimensional feature vectors into low-dimensional feature vectors; that is, it is the number of characters that need to be replaced to transform one string into another.
- the Hamming distance between 1011101 and 1001001 is 2.
- the Hamming distance is less than the preset Hamming distance threshold, use a cosine algorithm to calculate the cosine value between the front-end code corresponding to the code image of the new page design draft and any code field in the front-end code template; If the Hamming distance is greater than the preset Hamming distance threshold, discard the code field;
- the cosine algorithm is also called the cosine similarity algorithm, which evaluates the similarity of two vectors by calculating the cosine of the angle between them.
- Cosine similarity draws a vector into a vector space based on coordinate values, such as the most common two-dimensional space.
- Cosine similarity measures the similarity between two vectors by measuring the cosine of the angle between them.
- the cosine value of a 0 degree angle is 1, and the cosine value of any other angle is not greater than 1; and its minimum value is -1.
- the cosine of the angle between the two vectors thus determines whether the two vectors point roughly in the same direction.
- the cosine similarity value When two vectors have the same direction, the cosine similarity value is 1; when the angle between the two vectors is 90°, the cosine similarity value is 0; when the two vectors point in completely opposite directions, the cosine similarity value is Is -1. This result has nothing to do with the length of the vector, only the direction of the vector. Cosine similarity is usually used in positive space, so the value given is between 0 and 1.
- a is the n-dimensional word vector value in the front-end code corresponding to the code image of the new page design draft
- b is the n-dimensional vector value of any code field in the front-end code template.
- ⁇ is the angle between a word vector and b word vector in n-dimensional space.
- the preset Hamming distance threshold is obtained based on statistical historical data.
- the Hamming distance is used in the data transmission error control code.
- the Hamming distance is a concept, which means that two (same length) characters correspond to different numbers. , We use d(x,y) to represent the Hamming distance between two characters x,y. Perform an XOR operation on two strings, and count the number of 1, then this number is the Hamming distance.
- the cosine value is compared with a preset cosine threshold, and if the cosine value is greater than or equal to the cosine threshold, the code field is extracted; otherwise, the code field is not extracted.
- the cosine threshold is obtained by statistics based on historical data.
- the cosine algorithm is a commonly used algorithm for calculating similarity.
- the cosine threshold can be set to 80°.
- the front-end code corresponding to the code image of the new page design draft is calculated for similarity with any code field in the front-end code template, and the front-end code template with the greatest similarity is extracted as the most similar.
- Great code template by calculating the Hamming distance and cosine value, the front-end code corresponding to the code image of the new page design draft is calculated for similarity with any code field in the front-end code template, and the front-end code template with the greatest similarity is extracted as the most similar.
- Great code template is calculated for calculating the Hamming distance and cosine value
- an intelligent recognition device for front-end code in page design is proposed, as shown in Figure 5, including the following modules:
- the template library module 51 is established to obtain the basic code of the target content element, generate the front-end code of the target content element according to the basic code and view parameters, and cluster the front-end code according to the category of the target content element Form a front-end code template library;
- the code recognition module 52 is configured to obtain a code image of a new page design draft, and perform character recognition on the code image of the new page design draft to obtain a front-end code corresponding to the code image of the new page design draft;
- the matching design module 53 is configured to query the front-end code template library to obtain a code template corresponding to the front-end code corresponding to the code image of the new page design draft, and extract the code template from the code template that matches the new page design The code field that matches the front-end code corresponding to the draft code image.
- a computer device in one embodiment, includes a memory and a processor.
- the memory stores computer-readable instructions.
- the processor executes the foregoing embodiments. The steps of the intelligent identification method of front-end code in the page design described in.
- a storage medium storing computer-readable instructions.
- the computer-readable instructions are executed by one or more processors, the one or more processors execute all the above-mentioned embodiments. Describe the steps of the intelligent identification method of front-end code in page design.
- the storage medium may be a non-volatile storage medium or a volatile storage medium, which is not specifically limited in this application.
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Character Input (AREA)
- Character Discrimination (AREA)
Abstract
一种页面设计中前端代码的智能识别方法及相关设备，包括：获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库(S1)；获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码(S2)；查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段(S3)。有效解决了人工书写代码和页面显示情况不一致的问题。
Description
本申请要求于2019年4月15日提交中国专利局、申请号为201910298699.7、发明名称为“页面设计中前端代码的智能识别方法及相关设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
本申请涉及页面设计技术领域，尤其涉及一种页面设计中前端代码的智能识别方法及相关设备。
随着互联网技术的发展，互联网的应用越来越广泛，越来越多的用户可以通过互联网进行网页浏览。用户想要浏览某网页时，用户终端可以从服务器获取该网页的前端代码，用户终端运行该前端代码，以显示该网页。网页通常由不同类别的内容元素组成，比如图片、表格和输入框等类别，其中，前端代码包含有网页中各内容元素的显示代码。
技术人员在编写前端代码时，需要针对网页中的每个内容元素，分别编写其对应的显示代码，从而得到该网页的前端代码。例如，对于某网页包含两个表格和一个图片，技术人员需要编写两个表格对应的显示代码，以及图片对应的显示代码，然后根据这三个内容元素的显示代码，得到该网页的前端代码。
但是，在技术人员编写代码时存在着人工编写的代码与网页页面不一致的情况，比如，像素、尺寸、比例、文案大小、颜色等都会有偏差，因而导致在进行UI设计时需要实时对人工编写的代码进行校验以满足UI设计的需要。
发明内容
基于此，有必要针对目前UI设计过程中，人工编写的代码与网页页面需要展示的图像存在着误差的问题，提供一种页面设计中前端代码的智能识别方法及相关设备。
一种页面设计中前端代码的智能识别方法，包括如下步骤：
获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
一种页面设计中前端代码的智能识别装置，包括如下模块：
建立模板库模块，设置为获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
代码识别模块，设置为获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
匹配设计模块，设置为查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行上述页面设计中前端代码的智能识别方法的步骤。
一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述页面设计中前端代码的智能识别方法的步骤。
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本申请的限制。
图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的个数，那么这个数就是汉明距离。
具体计算过程如下:
其中，i＝0,1,..n-1，x表示所述新页面设计稿的代码图像对应的前端代码的编码，y表示所述前端代码模板中任一代码字段，
表示异或。
将所述余弦值与预设的余弦阈值进行比较，若所述余弦值大于或者等于所述余弦阈值，则抽取所述代码字段，否则不抽取。
其中，所述余弦阈值是根据历史数据统计得到的，余弦算法是一种常用的计算相似度的算法，在本实施例中余弦阈值可以设为80°。
本实施例，通过计算汉明距离和余弦值，对新页面设计稿的代码图像对应的前端代码与前端代码模板中任一代码字段进行了相似度计算，提取相似度最大的前端代码模板作为最佳的代码模板。
在一个实施例中，提出了一种页面设计中前端代码的智能识别装置，如图5所示，包括如下模块：
建立模板库模块51，设置为获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；
代码识别模块52，设置为获取新页面设计稿的代码图像，对所述新页面设 计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；
匹配设计模块53，设置为查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
在一个实施例中，提出了一种计算机设备，所述计算机设备包括存储器和处理器，存储器中存储有计算机可读指令，计算机可读指令被处理器执行时，使得处理器执行上述各实施例中的所述页面设计中前端代码的智能识别方法的步骤。
在一个实施例中，提出了一种存储有计算机可读指令的存储介质，该计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述各实施例中的所述页面设计中前端代码的智能识别方法的步骤。其中，所述存储介质可以为非易失性存储介质，也可以为易失性存储介质，具体本申请不做限定。
以上所述实施例仅表达了本申请一些示例性实施例，其中描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。
Claims (20)
- 一种页面设计中前端代码的智能识别方法，其中，包括：获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
- 根据权利要求1所述的页面设计中前端代码的智能识别方法，其中，所述获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库，包括：接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。
- 根据权利要求1所述的页面设计中前端代码的智能识别方法，其中，所述获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码，包括：获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；汇总每一个所述代码图像子块中的字符后，得到新页面设计稿的代码图像对应的初始前端代码，根据预设的代码规则对所述新页面设计代码进行修正后得到新页面设计稿的代码图像对应的最终前端代码。
- 根据权利要求1所述的页面设计中前端代码的智能识别方法，其中，所述查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端 代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段，包括：获取所述新页面设计稿的代码图像对应的前端代码的特征属性，根据所述特征属性得到所述新页面设计稿的代码图像对应的前端代码在所述前端代码模板库中的查询路径，根据所述查询路径查询所述前端代码模板库后得到所述新页面设计稿的代码图像对应的前端代码模板；计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段。
- 根据权利要求2所述的页面设计中前端代码的智能识别方法，其中，所述获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库，包括：获取所述目标内容元素的可视化图像，从所述可视化图像中提取像素特征点，根据所述像素特征点的位置，确定所述目标内容元素的类别特征标识；获取具有同一类别特征标识的目标内容元素所对应的前端代码，根据所述前端代码的首字母排序后，生成一前端代码组；根据所述前端代码组的生成时间，赋予所述前端代码组以编号，根据所述编号依次排列所述前端代码组后形成所述前端代码模板库。
- 根据权利要求3所述的页面设计中前端代码的智能识别方法，其中，所述将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符，包括：将所述图像子块进行光学字符识别OCR以生成OCR识别结果，所述OCR识别结果为字符串数组；抽取各所述字符串数据组的特征信息，根据所述特征信息建立特征信息矩阵，所述特征信息矩阵中的元素是所述特征信息中的字符；按照所述特征信息矩阵中的元素的类型，将所述特征信息矩阵中的元素进行归类，形成数个特征信息子矩阵；提取所述特征信息子矩阵中的每一个元素的灰度值，与预设的标准元素的灰度值进行比较，若某一个元素的灰度值与某一个所述标准元素的灰度值完全一致，则将所述某一个元素的灰度值作为所述特征信息子矩阵的要素特征，汇总所有要素特征后得到所述子块中的字符信息。
- 根据权利要求4所述的页面设计中前端代码的智能识别方法，其中，所述计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所 有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段，包括：获取所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中任一代码字段之间的汉明距离；若所述汉明距离小于预设汉明距离阈值，则使用余弦算法计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中的任一代码字段之间的余弦值；若所述汉明距离大于所述预设汉明距离阈值，则抛弃所述代码字段；将所述余弦值与预设的余弦阈值进行比较，若所述余弦值大于或者等于所述余弦阈值，则抽取所述代码字段，否则不抽取。
- 一种页面设计中前端代码的智能识别装置，其中，包括：建立模板库模块，设置为获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；代码识别模块，设置为获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；匹配设计模块，设置为查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
- 根据权利要求8所述的页面设计中前端代码的智能识别装置，其中，所述建立模板库模块还设置为：接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。
- 根据权利要求8所述的页面设计中前端代码的智能识别装置，其中，所述代码识别模块还设置为：获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；汇总每一个所述代码图像子块中的字符后，得到新页面设计稿的代码图像对应的初始前端代码，根据预设的代码规则对所述新页面设计代码进行修正后得到新页面设计稿的代码图像对应的最终前端代码。
- 根据权利要求8所述的页面设计中前端代码的智能识别装置，其中，所述匹配设计模块还设置为：获取所述新页面设计稿的代码图像对应的前端代码的特征属性，根据所述特征属性得到所述新页面设计稿的代码图像对应的前端代码在所述前端代码模板库中的查询路径，根据所述查询路径查询所述前端代码模板库后得到所述新页面设计稿的代码图像对应的前端代码模板；计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段。
- 根据权利要求9所述的页面设计中前端代码的智能识别装置，其中，所述建立模板库模块还设置为：获取所述目标内容元素的可视化图像，从所述可视化图像中提取像素特征点，根据所述像素特征点的位置，确定所述目标内容元素的类别特征标识；获取具有同一类别特征标识的目标内容元素所对应的前端代码，根据所述前端代码的首字母排序后，生成一前端代码组；根据所述前端代码组的生成时间，赋予所述前端代码组以编号，根据所述编号依次排列所述前端代码组后形成所述前端代码模板库。
- 根据权利要求10所述的页面设计中前端代码的智能识别装置，其中，所述代码识别模块还设置为：将所述图像子块进行光学字符识别OCR以生成OCR识别结果，所述OCR识别结果为字符串数组；抽取各所述字符串数据组的特征信息，根据所述特征信息建立特征信息矩阵，所述特征信息矩阵中的元素是所述特征信息中的字符；按照所述特征信息矩阵中的元素的类型，将所述特征信息矩阵中的元素进行归类，形成数个特征信息子矩阵；提取所述特征信息子矩阵中的每一个元素的灰度值，与预设的标准元素的灰度值进行比较，若某一个元素的灰度值与某一个所述标准元素的灰度值完全 一致，则将所述某一个元素的灰度值作为所述特征信息子矩阵的要素特征，汇总所有要素特征后得到所述子块中的字符信息。
- 根据权利要求11所述的页面设计中前端代码的智能识别装置，其中，所述代码识别模块还设置为：获取所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中任一代码字段之间的汉明距离；若所述汉明距离小于预设汉明距离阈值，则使用余弦算法计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中的任一代码字段之间的余弦值；若所述汉明距离大于所述预设汉明距离阈值，则抛弃所述代码字段；将所述余弦值与预设的余弦阈值进行比较，若所述余弦值大于或者等于所述余弦阈值，则抽取所述代码字段，否则不抽取。
- 一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，使得所述处理器执行以下步骤：获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
- 一种存储有计算机可读指令的存储介质，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行以下步骤：获取目标内容元素的基础代码，根据所述基础代码和视图参数，生成所述目标内容元素的前端代码，根据所述目标内容元素的类别，聚类所述前端代码形成前端代码模板库；获取新页面设计稿的代码图像，对所述新页面设计稿的代码图像进行字符识别，以得到与所述新页面设计稿的代码图像对应的前端代码；查询所述前端代码模板库，得到与所述新页面设计稿的代码图像对应的前端代码所对应的代码模板，从所述代码模板中抽取出与所述新页面设计稿代码图像对应的前端代码相匹配的代码字段。
- 根据权利要求16所述的存储有计算机可读指令的存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行所述获取客户端请求信息，抽取所述客户端请求信息中的特征代码，获取所述特征代码与预设的过滤规则的对应关系，根据所述对应关系对所述客户端请求信息进行过滤的步骤时，还执行如下步骤：接收所述目标内容元素的基础代码选择指令，所述基础代码选择指令中包含至少一个视图参数；根据所述基础代码选择指令，从基础代码数据库中抽取出与所述目标内容元素对应的基础代码，根据所述基础代码和用户输入的所述视图参数的参数值，生成所述目标内容元素的前端代码；获取所述目标内容元素的类别特征标识，根据所述类别特征标识将所述目标内容元素的前端代码进行聚类后形成所述前端代码模板库。
- 根据权利要求16所述的存储有计算机可读指令的存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行所述获取过滤后的客户端请求信息，发送所述过滤后的客户端请求信息于服务器端，获取服务器端的熔断数据，分析所述熔断数据，得到熔断阈值的步骤时，还执行如下步骤：获取用户输入的新页面设计稿的代码图像，将所述新页面设计稿的代码图像进行滤波处理，去除所述新页面设计稿的代码图像中的摩尔纹；将去除摩尔纹后的新页面设计稿的代码图像分割成数个代码图像子块，抽取所述代码图像子块中的字符；汇总每一个所述代码图像子块中的字符后，得到新页面设计稿的代码图像对应的初始前端代码，根据预设的代码规则对所述新页面设计代码进行修正后得到新页面设计稿的代码图像对应的最终前端代码。
- 根据权利要求16所述的存储有计算机可读指令的存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行所述根据所述熔断阈值，设定客户端系统资源分配方案，监控客户端系统的工作状态，根据所述客户端系统的工作状态修正所述客户端系统资源分配方案的步骤时，还执行如下步骤：获取所述新页面设计稿的代码图像对应的前端代码的特征属性，根据所述特征属性得到所述新页面设计稿的代码图像对应的前端代码在所述前端代码模板库中的查询路径，根据所述查询路径查询所述前端代码模板库后得到所述新页面设计稿的代码图像对应的前端代码模板；计算所述新页面设计稿的代码图像对应的前端代码与所述前端代码模板中所有代码字段的相似度，根据相似度计算结果确定与所述新页面设计稿的代码图像对应的前端代码相匹配的代码字段。
- 根据权利要求17所述的存储有计算机可读指令的存储介质，其中，所述计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行所述根据所述特征代码与所述特征值的对应关系对所述客户端请求信息进行过滤的步骤时，还执行如下步骤：获取所述目标内容元素的可视化图像，从所述可视化图像中提取像素特征点，根据所述像素特征点的位置，确定所述目标内容元素的类别特征标识；获取具有同一类别特征标识的目标内容元素所对应的前端代码，根据所述前端代码的首字母排序后，生成一前端代码组；根据所述前端代码组的生成时间，赋予所述前端代码组以编号，根据所述编号依次排列所述前端代码组后形成所述前端代码模板库。
Applications Claiming Priority (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910298699.7A CN110147516A (zh) | 2019-04-15 | 2019-04-15 | 页面设计中前端代码的智能识别方法及相关设备 |
| CN201910298699.7 | 2019-04-15 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| WO2020211380A1 true WO2020211380A1 (zh) | 2020-10-22 |
Family
ID=67589769
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| PCT/CN2019/120550 WO2020211380A1 (zh) | 2019-04-15 | 2019-11-25 | 页面设计中前端代码的智能识别方法及相关设备 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN110147516A (zh) |
| WO (1) | WO2020211380A1 (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110147516A (zh) * | 2019-04-15 | 2019-08-20 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
| CN111596925B (zh) * | 2020-06-18 | 2023-11-07 | 腾讯科技（深圳）有限公司 | 自动生成代码的方法、装置、计算机设备及介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150234732A1 (en) * | 2012-10-31 | 2015-08-20 | Hewlett-Packard Development Company, L.P. | Executable software specification generation |
| CN106650437A (zh) * | 2016-12-29 | 2017-05-10 | 广州华多网络科技有限公司 | webshell检测方法和装置 |
| CN107193554A (zh) * | 2017-04-27 | 2017-09-22 | 北京小米移动软件有限公司 | 一种生成前端代码的方法和装置 |
| CN110147516A (zh) * | 2019-04-15 | 2019-08-20 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105631486A (zh) * | 2014-10-27 | 2016-06-01 | 深圳Tcl数字技术有限公司 | 图像文字识别方法及装置 |
| CN108304183A (zh) * | 2018-02-26 | 2018-07-20 | 北京车和家信息技术有限公司 | 一种用户界面生成方法、装置及电子设备 |
| CN108345456A (zh) * | 2018-03-07 | 2018-07-31 | 平安普惠企业管理有限公司 | 页面代码生成方法、装置、计算机设备和存储介质 |
| CN108764352B (zh) * | 2018-05-25 | 2022-09-27 | 百度在线网络技术（北京）有限公司 | 重复页面内容检测方法和装置 |
-
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 (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150234732A1 (en) * | 2012-10-31 | 2015-08-20 | Hewlett-Packard Development Company, L.P. | Executable software specification generation |
| CN106650437A (zh) * | 2016-12-29 | 2017-05-10 | 广州华多网络科技有限公司 | webshell检测方法和装置 |
| CN107193554A (zh) * | 2017-04-27 | 2017-09-22 | 北京小米移动软件有限公司 | 一种生成前端代码的方法和装置 |
| CN110147516A (zh) * | 2019-04-15 | 2019-08-20 | 深圳壹账通智能科技有限公司 | 页面设计中前端代码的智能识别方法及相关设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110147516A (zh) | 2019-08-20 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10572725B1 (en) | Form image field extraction | |
| WO2021072885A1 (zh) | 识别文本的方法、装置、设备及存储介质 | |
| CN110334346B (zh) | 一种pdf文件的信息抽取方法和装置 | |
| US10482174B1 (en) | Systems and methods for identifying form fields | |
| US10878173B2 (en) | Object recognition and tagging based on fusion deep learning models | |
| US20220004878A1 (en) | Systems and methods for synthetic document and data generation | |
| US11816138B2 (en) | Systems and methods for parsing log files using classification and a plurality of neural networks | |
| Al-Zaidy et al. | A machine learning approach for semantic structuring of scientific charts in scholarly documents | |
| US8687886B2 (en) | Method and apparatus for document image indexing and retrieval using multi-level document image structure and local features | |
| US9594981B2 (en) | Image search apparatus and control method thereof | |
| US10402640B1 (en) | Method and system for schematizing fields in documents | |
| CN106844481B (zh) | 字体相似度及字体替换方法 | |
| WO2020211380A1 (zh) | 页面设计中前端代码的智能识别方法及相关设备 | |
| CN114612921B (zh) | 表单识别方法、装置、电子设备和计算机可读介质 | |
| CN106933824B (zh) | 在多个文档中确定与目标文档相似的文档集合的方法和装置 | |
| US11443504B2 (en) | Image box filtering for optical character recognition | |
| CN113780276A (zh) | 一种结合文本分类的文本检测和识别方法及系统 | |
| US20130321867A1 (en) | Typographical block generation | |
| CN110083731B (zh) | 图像检索方法、装置、计算机设备及存储介质 | |
| Yang et al. | Automatic single page-based algorithms for medieval manuscript analysis | |
| Al-Maadeed et al. | Automatic handedness detection from off-line handwriting | |
| CN113806472A (zh) | 一种对文字图片和图像型扫描件实现全文检索的方法及设备 | |
| CN115880702A (zh) | 数据处理方法、装置、设备、程序产品及存储介质 | |
| CN112329426B (zh) | 电子文件的页眉页脚识别方法、装置、设备和介质 | |
| WO2021151274A1 (zh) | 图像文档处理方法、装置、电子设备及计算机可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| 121 | Ep: the epo has been informed by wipo that ep was designated in this application |
Ref document number: 19924683 Country of ref document: EP Kind code of ref document: A1 |
|
| NENP | Non-entry into the national phase |
Ref country code: DE |
|
| 32PN | Ep: public notification in the ep bulletin as address of the adressee cannot be established |
Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 03/02/2022) |
|
| 122 | Ep: pct application non-entry in european phase |
Ref document number: 19924683 Country of ref document: EP Kind code of ref document: A1 |