Front-end code generation method, device, computer equipment and storage medium

Abstract

The present application relates to a front-end code generation method, device, computer equipment and storage medium, and relates to the field of computer technology. It can be used in the field of financial technology or other related fields. The method includes: when the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing; determining the input box elements in the front-end design drawing according to the spacing of the text elements, and determining the button elements in the front-end design drawing according to the content of the text elements; generating the front-end code corresponding to the front-end design drawing according to the text elements, the input box elements and the button elements. The use of this method can improve the efficiency of front-end code development.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end code generation method, apparatus, computer equipment and storage medium. Background Art

[0002] Currently, in the process of generating front-end code based on user interface design drawings, the style to be implemented is first determined based on the user interface design drawings, and then the interface program is written from top to bottom and from left to right based on the design drawings, and elements such as LABEL (text), INPUT (input box), BUTTON (button) are manually written. Finally, according to the style and position specified by the design drawings, the styles of LABEL, INPUT, BUTTON and other elements are manually written.

[0003] However, the above front-end code generation method relies on editing tools, requiring users to edit the interface in the corresponding interface editing tool and drag and drop components to complete. When there are many interfaces or interface elements to be processed, the development efficiency is low.

[0004] Therefore, the current front-end code generation technology has the problem of low development efficiency. Summary of the invention

[0005] Based on this, it is necessary to provide a front-end code generation method, device, computer equipment, computer-readable storage medium and computer program product that can improve development efficiency in response to the above technical problems.

[0006] In a first aspect, the present application provides a front-end code generation method. The method comprises:

[0007] In the case where the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing;

[0008] Determine the input box element in the front-end design drawing according to the spacing of the text elements, and determine the button element in the front-end design drawing according to the content of the text elements;

[0009] A front-end code corresponding to the front-end design drawing is generated according to the text element, the input box element and the button element.

[0010] In one embodiment, determining the input box element in the front-end design drawing according to the spacing of the text elements includes:

[0011] When the text element is located at the first position in the front-end design drawing and the distance between the text element and the target text element exceeds a preset distance, the input box element is generated on the right side of the text element; the first position is a position other than the first row in the front-end design drawing, and the target text element is located on the right side of the text element.

[0012] In one embodiment, determining the button element in the front-end design diagram according to the content of the text element includes:

[0013] When the text element is located at the second position in the front-end design drawing and the content of the text element matches the preset content, the button element is generated at the text element position; the second position is the position of the last line in the front-end design drawing.

[0014] In one embodiment, generating a front-end code corresponding to the front-end design drawing according to the text element, the input box element and the button element includes:

[0015] According to the code type of the front-end code, determine the text element code, input box element code and button element code corresponding to the text element, the input box element and the button element respectively;

[0016] The front-end code is generated according to the text element code, the input box element code and the button element code.

[0017] In one embodiment, the method further comprises:

[0018] In the case where the front-end design drawing matches the target design drawing template in the design drawing template library, a front-end code corresponding to the front-end design drawing is generated according to the code corresponding to the target design drawing template.

[0019] In one of the embodiments, when the front-end design drawing matches the target design drawing template in the design drawing template library, before generating the front-end code corresponding to the front-end design drawing according to the code corresponding to the target design drawing template, the method further includes:

[0020] Determine the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library;

[0021] Performing weighted summation on the text matching rate, frame matching rate and overall matching rate to obtain the template recognition rate corresponding to each of the design drawing templates;

[0022] From the design drawing templates, a design drawing template whose template recognition rate exceeds a preset threshold is determined as the target design drawing template.

[0023] In one embodiment, determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library includes:

[0024] Respectively replace the text in the front-end design drawing and the design drawing template with preset text to obtain a replaced front-end design drawing and a replaced design drawing template;

[0025] The matching rate between the replaced front-end design drawing and the replaced design drawing template is determined to obtain the text matching rate.

[0026] In one embodiment, determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library further includes:

[0027] Determine the basic gradients of the front-end design drawing and the design drawing template respectively, and obtain the front-end design drawing basic gradient and the design drawing template basic gradient;

[0028] The matching rate between the basic gradient of the front-end design drawing and the basic gradient of the design drawing template is determined to obtain the frame matching rate.

[0029] In a second aspect, the present application also provides a front-end code generation device. The device comprises:

[0030] An element recognition module, used to recognize text elements in the front-end design drawing when the front-end design drawing does not match the design drawing template in the design drawing template library;

[0031] An element determination module, used to determine the input box element in the front-end design drawing according to the spacing of the text element, and to determine the button element in the front-end design drawing according to the content of the text element;

[0032] A code generation module is used to generate a front-end code corresponding to the front-end design drawing according to the text element, the input box element and the button element.

[0033] In a third aspect, the present application further provides a computer device. The computer device includes a memory and a processor, the memory stores a computer program, and the processor implements the following steps when executing the computer program:

[0034] In the case where the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing;

[0035] Determine the input box element in the front-end design drawing according to the spacing of the text elements, and determine the button element in the front-end design drawing according to the content of the text elements;

[0036] A front-end code corresponding to the front-end design drawing is generated according to the text element, the input box element and the button element.

[0037] In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0038] In the case where the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing;

[0039] Determine the input box element in the front-end design drawing according to the spacing of the text elements, and determine the button element in the front-end design drawing according to the content of the text elements;

[0040] A front-end code corresponding to the front-end design drawing is generated according to the text element, the input box element and the button element.

[0041] In a fifth aspect, the present application further provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the following steps are implemented:

[0042] In the case where the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing;

[0043] Determine the input box element in the front-end design drawing according to the spacing of the text elements, and determine the button element in the front-end design drawing according to the content of the text elements;

[0044] A front-end code corresponding to the front-end design drawing is generated according to the text element, the input box element and the button element.

[0045] The above-mentioned front-end code generation method, device, computer equipment, storage medium and computer program product, when the front-end design drawing does not match the design drawing template in the design drawing template library, first identify the text elements in the front-end design drawing, then determine the input box elements in the front-end design drawing according to the spacing of the text elements, determine the button elements in the front-end design drawing according to the content of the text elements, and finally generate the front-end code corresponding to the front-end design drawing according to the text elements, input box elements and button elements; by identifying the text in the front-end design drawing, determining the input box and buttons in the front-end design drawing according to the text, and automatically generating the code for each element in the front-end design drawing, the development efficiency of the front-end code is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 A schematic diagram of a process of generating a front-end code in an embodiment;

[0047] Figure 2 A schematic diagram of a flow chart of a front-end code generation method in another embodiment;

[0048] Figure 3 A schematic diagram of a process for automatically identifying images and generating front-end codes in one embodiment;

[0049] Figure 4 A schematic diagram of a flow chart of a code generation step in an embodiment;

[0050] Figure 5 is a structural block diagram of a front-end code generating device in one embodiment;

[0051] Figure 6 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0052] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0053] The front-end code generation method provided in the embodiment of the present application can be applied to a terminal or a server. The terminal can be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, Internet of Things devices and portable wearable devices. The Internet of Things devices can be smart speakers, smart TVs, smart air conditioners, smart car devices, etc. The portable wearable device can be a smart watch, a smart bracelet, a head-mounted device, etc. The server can be implemented as an independent server or a server cluster consisting of multiple servers.

[0054] In one embodiment, Figure 1As shown, a front-end code generation method is provided, which is described by taking the method applied to a terminal as an example, and includes the following steps:

[0055] Step S110, when the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing.

[0056] Among them, the front-end design drawing can be a design drawing of the front-end user interface.

[0057] Among them, the design drawing template can be a template of the front-end design drawing.

[0058] In a specific implementation, the front-end design drawing can be directly drawn on the terminal, or the front-end design drawing can be drawn on a drawing, the drawing can be scanned or photographed, a picture of the front-end design drawing can be obtained, and the picture can be input into the terminal. The terminal can pre-store multiple design drawing templates to form a design drawing template library, wherein each design drawing template corresponds to a section of code, and the code is the generation code of the design drawing template. The terminal compares the obtained front-end design drawing with each design drawing template in the design drawing template library. If there is a design drawing template matching the front-end design drawing in the design drawing template library, the code corresponding to the design drawing template is used as the generation code of the front-end design drawing. Otherwise, if there is no design drawing template matching the front-end design drawing in the design drawing template library, that is, the front-end design drawing does not match the design drawing templates in the design drawing template library, then the front-end design drawing is identified by optical character recognition technology to obtain each text element in the front-end design drawing.

[0059] For example, OCR (Optical Character Recognition) can be used to recognize text in the front-end design drawing and generate a text element LABEL.

[0060] Step S120, determining the input box element in the front-end design drawing according to the spacing between the text elements, and determining the button element in the front-end design drawing according to the content of the text elements.

[0061] In the specific implementation, the terminal can obtain the position of the text element in the front-end design drawing, the content of the text element, and the distance between adjacent text elements in the front-end design drawing. According to the position of the text element in the front-end design drawing and the distance between adjacent text elements, the input box element in the front-end design drawing can be determined. According to the position of the text element in the front-end design drawing and the content of the text element, the button element in the front-end design drawing can be determined.

[0062] For example, there are texts A and B in the front-end design, B is adjacent to A and is located on the right side of A. If A is not in the first line of the front-end design, and the distance between A and B exceeds the threshold T, it can be determined that there is an input box element INPUT between A and B. There is also text C in the front-end design. If C is in the last line of the front-end design, and the content of C is the specified content, it can be determined that there is a button element BUTTON at the location of text C. The specified content can be OK, Submit, Reset, Return, or Query.

[0063] Step S130, generating a front-end code corresponding to the front-end design drawing according to the text elements, input box elements and button elements.

[0064] The front-end code may be a generated code of the front-end design drawing.

[0065] In a specific implementation, the terminal can obtain the color and style of the text element, the input box element and the button element, load the color and style on the text element, the input box element and the button element, and generate the front-end code corresponding to the front-end design drawing.

[0066] For example, the colors and styles of the elements LABEL, INPUT, and BUTTON can be loaded to obtain the generated code of the front-end design drawing.

[0067] The above-mentioned front-end code generation method, when the front-end design drawing does not match the design drawing template in the design drawing template library, first identifies the text elements in the front-end design drawing, then determines the input box elements in the front-end design drawing according to the spacing of the text elements, determines the button elements in the front-end design drawing according to the content of the text elements, and finally generates the front-end code corresponding to the front-end design drawing according to the text elements, input box elements and button elements; by identifying the text in the front-end design drawing, determining the input box and buttons in the front-end design drawing according to the text, and automatically generating the code for each element in the front-end design drawing, the development efficiency of the front-end code is improved.

[0068] In one embodiment, the above step S120 may specifically include: when the text element is located at the first position in the front-end design drawing and the distance between the text element and the target text element exceeds a preset distance, generating an input box element on the right side of the text element; the first position is a position other than the first line in the front-end design drawing, and the target text element is located on the right side of the text element.

[0069] In a specific implementation, when the current text element is located at a position other than the first line in the front-end design drawing, it can be detected whether the distance between the current text element and the adjacent text element on the right exceeds a preset distance. If it exceeds the preset distance, an input box element can be generated on the right side of the current text element. Otherwise, if it does not exceed the preset distance, the input box element is not generated, and the above-mentioned detection is continued for the next text element.

[0070] The preset distance can be adjusted. Specifically, the preset distance can be adjusted according to the content of the text element. When it is recognized that there is a lot of content to be filled in for the text element content, the preset distance is increased, and when it is recognized that there is less content to be filled in for the text element content, the preset distance is reduced; the preset distance can also be adjusted according to the resolution of the user interface to be designed. When the resolution of the user interface to be designed is high, the preset distance is reduced, and when the resolution of the user interface to be designed is low, the preset distance is increased.

[0071] For example, the first line of the front-end design drawing is usually the title, and the title does not contain an input box. Therefore, you can first detect whether the current text A is located in the first line of the front-end design drawing. If it is located in the first line, determine not to generate an input box element. Otherwise, if it is not located in the first line, further measure the distance AB between the current text A and the adjacent text B on the right, and set the distance threshold T. If AB>T, you can generate an input box element INPUT between A and B. Otherwise, if AB≤T, do not generate an input box element.

[0072] In this embodiment, by generating an input box element on the right side of the text element when the text element is located in the first position in the front-end design drawing and the distance between the text element and the target text element exceeds a preset distance, the input box in the front-end design drawing can be automatically determined, thereby improving code development efficiency.

[0073] In one embodiment, the above step S120 may further specifically include: when the text element is located at the second position in the front-end design drawing and the content of the text element matches the preset content, generating a button element at the position of the text element; the second position is the position of the last line in the front-end design drawing.

[0074] The preset content may be at least one of confirmation, submission, reset, return or query.

[0075] In the specific implementation, when the current text element is located in the last line of the front-end design drawing, it can be detected whether the content of the current text element is the preset content. If it is the preset content, a button element BUTTON can be generated at the location of the current text element. Otherwise, if it is not the preset content, the button element will not be generated.

[0076] For example, if the current text C is located in the last line of the front-end design drawing and it is detected that the content of C is "OK", a button element BUTTON can be generated at the location of C. Otherwise, if the content of C is not the preset content, the button element will not be generated.

[0077] In this embodiment, by generating a button element at the position of the text element when the text element is located at the second position in the front-end design drawing and the content of the text element matches the preset content, the button in the front-end design drawing can be automatically determined, thereby improving code development efficiency.

[0078] In one embodiment, the above step S130 may specifically include: determining the text element code, input box element code and button element code corresponding to the text element, input box element and button element respectively according to the code type of the front-end code; and generating the front-end code according to the text element code, input box element code and button element code.

[0079] The code type may be HTML (Hyper Text Markup Language), IFTide or Unicorn Mobile UI. IFTide may be a front-end framework developed based on react-native (a cross-platform mobile application development framework). Unicorn Mobile UI may be a front-end framework developed based on VUE (a web log editing tool).

[0080] In a specific implementation, the code corresponding to each element can be determined in advance according to different code types, and the corresponding relationship between the elements and the codes can be stored in a data table. After determining the text elements, input box elements and button elements in the front-end design drawing, the codes corresponding to the text elements, input box elements and button elements can be searched in the data table according to the code type to obtain the text element code, input box element code and button element code, and the generated code of the front-end design drawing can be obtained according to the text element code, input box element code and button element code.

[0081] For example, for the code type HTML, the codes corresponding to LABEL, INPUT, and BUTTON can be determined as label, input, and button respectively; for the code type IFTide, the codes corresponding to LABEL, INPUT, and BUTTON can be determined as Label, TextField, and Button respectively; for the code type Unicorn Mobile UI, the codes corresponding to LABEL, INPUT, and BUTTON can be determined as unm-label, unm-textfield, and unm-button respectively, and the above mapping relationships are stored in the data table. After determining the text elements, input box elements, and button elements in the front-end design diagram, if the user selects the code type HTML, the codes label, input, and button can be output for the text elements, input box elements, and button elements, respectively.

[0082] In this embodiment, by determining the text element codes, input box element codes and button element codes corresponding to the text elements, input box elements and button elements respectively according to the code type of the front-end code, and generating the front-end code according to the text element codes, input box element codes and button element codes, the code can be automatically generated according to the elements in the front-end design drawing, thereby improving the code generation efficiency.

[0083] In one embodiment, the above-mentioned front-end code generation method may further specifically include: when the front-end design drawing matches the target design drawing template in the design drawing template library, generating the front-end code corresponding to the front-end design drawing according to the code corresponding to the target design drawing template.

[0084] In a specific implementation, the recognition rate of each design drawing template in the design drawing template library can be determined for the front-end design drawing, and the design drawing template whose recognition rate exceeds a preset threshold is determined as the target design drawing template. The target design drawing template matches the front-end design drawing, and the code corresponding to the target design drawing template is determined as the front-end code corresponding to the front-end design drawing. Otherwise, if the recognition rates of the design drawing templates in the design drawing template library do not exceed the preset threshold, it is determined that the target design drawing template is not detected, that is, the front-end design drawing does not match the design drawing templates in the design drawing template library. At this time, the front-end code can be generated according to the front-end code generation method described in steps S110-S130.

[0085] In this embodiment, by matching the front-end design drawing with the target design drawing template in the design drawing template library, a front-end code corresponding to the front-end design drawing is generated according to the code corresponding to the target design drawing template. The generated code of the front-end design drawing can be obtained by searching the design drawing template in the design drawing template library, thereby further improving the code development efficiency.

[0086] In one embodiment, the above-mentioned front-end code generation method may further specifically include: determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library; performing weighted summation on the text matching rate, border matching rate and overall matching rate to obtain the template recognition rate corresponding to each design drawing template; and from each design drawing template, determining a design drawing template whose template recognition rate exceeds a preset threshold as the target design drawing template.

[0087] The text matching rate may be a probability that pixels corresponding to text in the user interface match each other.

[0088] The frame matching rate may be a probability that pixels corresponding to the frame in the user interface match each other.

[0089] The overall matching rate may be a probability that pixels corresponding to the user interface match each other.

[0090] In the specific implementation, the number of pixels of all texts in the front-end design drawing can be counted, and the front-end design drawing is compared with the design drawing template, the number of pixels of text overlap is counted, and the ratio between the number of pixels of text overlap and the number of pixels of all texts is determined as the text matching rate. The number of pixels of all borders in the front-end design drawing can also be counted, and the front-end design drawing is compared with the design drawing template, the number of pixels of border overlap is counted, and the ratio between the number of pixels of border overlap and the number of pixels of all borders is determined as the border matching rate. The front-end design drawing and the design drawing template can also be binarized and resized to obtain the processed front-end design drawing and the processed design drawing template with the same size, the total number of pixels of the processed front-end design drawing (or the processed design drawing template) is counted, and the processed front-end design drawing and the processed design drawing template are compared, the number of overlapping pixels is counted, and the ratio between the number of overlapping pixels and the total number of pixels is determined as the overall matching rate. The text matching rate, the border matching rate and the overall matching rate are weighted and summed to obtain the template recognition rate. If the template recognition rate of the design drawing template exceeds the preset threshold, the design drawing template can be determined as the target design drawing template. Otherwise, if the template recognition rate of the design drawing template does not exceed the preset threshold, it is not the target design drawing template.

[0091] In this embodiment, by determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library, the text matching rate, border matching rate and overall matching rate are weightedly summed to obtain the template recognition rate corresponding to each design drawing template. From each design drawing template, a design drawing template whose template recognition rate exceeds a preset threshold is determined as the target design drawing template. The recognition rate can be used to determine whether the design drawing template matches the front-end design drawing, which facilitates automatic and rapid detection of the target design drawing template from the design drawing template library, and then the generated code of the front-end design drawing is obtained according to the target design drawing template, thereby improving the code generation efficiency.

[0092] In one embodiment, the above-mentioned steps of determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library may specifically include: replacing the text in the front-end design drawing and the design drawing template with preset text respectively to obtain the replaced front-end design drawing and the replaced design drawing template; determining the matching rate between the replaced front-end design drawing and the replaced design drawing template to obtain the text matching rate.

[0093] In the specific implementation, the text in the front-end design drawing and the design drawing template can be replaced with preset text, and the obtained text can be drawn on a new white background image to obtain the replaced front-end design drawing and the replaced design drawing template, the number of pixels of all texts in the replaced front-end design drawing can be counted, and the replaced front-end design drawing can be compared with the replaced design drawing template to count the number of pixels where the texts overlap, and the ratio between the number of pixels where the texts overlap and the number of pixels of all the texts can be determined as the text matching rate.

[0094] For example, the text in the front-end design drawing and the design drawing template can be uniformly replaced with "A", the numbers can be uniformly replaced with "8", and redrawn on a white background image to obtain a replaced front-end design drawing and a replaced design drawing template.

[0095] In this embodiment, by replacing the text in the front-end design drawing and the design drawing template with preset text respectively, a replaced front-end design drawing and a replaced design drawing template are obtained, and the matching rate between the replaced front-end design drawing and the replaced design drawing template is determined to obtain the text matching rate. This can facilitate the comparison of the front-end design drawing with the design drawing template, facilitate the determination of the text matching rate, and increase the reliability of the text matching rate.

[0096] In one embodiment, the above-mentioned steps of determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library may specifically include: respectively determining the basic gradients of the front-end design drawing and the design drawing template to obtain the basic gradient of the front-end design drawing and the basic gradient of the design drawing template; determining the matching rate between the basic gradient of the front-end design drawing and the basic gradient of the design drawing template to obtain the border matching rate.

[0097] The basic gradient may be the result of the graph dilation minus the result of the erosion.

[0098] In a specific implementation, the basic gradients of the front-end design drawing and the design drawing template can be determined respectively, and the obtained basic gradient of the front-end design drawing is determined as the border of the front-end design drawing, and the obtained basic gradient of the design drawing template is determined as the border of the design drawing template. The total number of pixels of the basic gradient of the front-end design drawing is counted, and the basic gradient of the front-end design drawing is compared with the basic gradient of the design drawing template, the number of overlapping pixels is counted, and the ratio between the number of overlapping pixels and the total number of pixels is determined as the border matching rate.

[0099] In this embodiment, by respectively determining the basic gradients of the front-end design drawing and the design drawing template, the basic gradient of the front-end design drawing and the basic gradient of the design drawing template are obtained, the matching rate between the basic gradient of the front-end design drawing and the basic gradient of the design drawing template is determined, and the border matching rate is obtained. This can facilitate the comparison of the front-end design drawing with the design drawing template, facilitate the determination of the border matching rate, and increase the reliability of the border matching rate.

[0100] In one embodiment, the above-mentioned steps of determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library may specifically include: binarizing the front-end design drawing and the design drawing template to obtain the binarized front-end design drawing and the binarized design drawing template; scaling the binarized front-end design drawing and the binarized design drawing template to obtain the scaled front-end design drawing and the scaled design drawing template; determining the matching rate between the scaled front-end design drawing and the scaled design drawing template to obtain the overall matching rate.

[0101] In a specific implementation, the front-end design drawing and the design drawing template may be binarized first, for example, the grayscale value of the image may be converted to 0 or 255, and then the binarized front-end design drawing and the binarized design drawing template may be scaled to the same size to obtain the scaled front-end design drawing and the scaled design drawing template. The total number of pixels of the scaled front-end design drawing is counted, and the scaled front-end design drawing is compared with the basic gradient of the scaled design drawing template, the number of overlapping pixels is counted, and the ratio between the number of overlapping pixels and the total number of pixels is determined as the overall matching rate.

[0102] In this embodiment, by binarizing the front-end design drawing and the design drawing template to obtain the binarized front-end design drawing and the binarized design drawing template, the interference of color on image comparison can be reduced. The binarized front-end design drawing and the binarized design drawing template are scaled to obtain the scaled front-end design drawing and the scaled design drawing template, which can reduce the interference of resolution on comparison. The matching rate between the scaled front-end design drawing and the scaled design drawing template is determined to obtain the overall matching rate, which can increase the accuracy of the overall matching rate.

[0103] In one embodiment, Figure 2As shown, a front-end code generation method is provided, which is described by taking the method applied to a terminal as an example, and includes the following steps:

[0104] Step S210, determining the text matching rate, frame matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library;

[0105] Step S220, performing weighted summation on the text matching rate, the frame matching rate and the overall matching rate to obtain the template recognition rate corresponding to each design drawing template;

[0106] Step S230, determining, from among the design drawing templates, a design drawing template whose template recognition rate exceeds a preset threshold value as a target design drawing template;

[0107] Step S231, generating a front-end code corresponding to the front-end design drawing according to the code corresponding to the target design drawing template;

[0108] Step S240, identifying text elements in the front-end design drawing when the template recognition rate corresponding to each design drawing template does not exceed a preset threshold;

[0109] Step S241, determining the input box element in the front-end design drawing according to the spacing of the text elements, and determining the button element in the front-end design drawing according to the content of the text elements;

[0110] Step S242, generating the front-end code corresponding to the front-end design drawing according to the text elements, input box elements and button elements.

[0111] In this embodiment, by determining the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library, the text matching rate, border matching rate and overall matching rate are weighted and summed to obtain the template recognition rate corresponding to each design drawing template, thereby increasing the accuracy of the template recognition rate; from each design drawing template, a design drawing template whose template recognition rate exceeds a preset threshold is determined as the target design drawing template, and the front-end code corresponding to the front-end design drawing is generated according to the code corresponding to the target design drawing template. The code can be directly determined according to the design drawing template, thereby improving the code development efficiency; when the template recognition rate corresponding to each design drawing template does not exceed the preset threshold, the text elements in the front-end design drawing are identified, the input box elements in the front-end design drawing are determined according to the spacing between the text elements, the button elements in the front-end design drawing are determined according to the content of the text elements, and the front-end code corresponding to the front-end design drawing is generated according to the text elements, the input box elements and the button elements. When no matching design drawing template can be found, the front-end code can be automatically generated through text recognition, thereby further improving the code development efficiency.

[0112] In order to facilitate those skilled in the art to have a deeper understanding of the embodiments of the present application, a specific example will be described below.

[0113] Figure 3 Provides a flow chart of a method for automatically identifying images and generating front-end code. Set the elements to be converted to include LABEL (text), INPUT (input box) and BUTTON (button). Figure 3 , the method for automatically identifying images and generating front-end codes may include the following steps:

[0114] 1. Match the page template library according to the UI (User Interface) design drawing. If there is a similar one, take the code corresponding to the page template;

[0115] 2. If there is no similar page template in the page template library, identify the image elements through OCR based on the UI design drawing;

[0116] 3. Generate LABEL from the obtained elements (text);

[0117] 4. If (text) is not the first line and the text appears only when the right side of (text) exceeds the specified distance, INPUT will be automatically generated on the right side according to (input box);

[0118] 5. If (text) is in the last line and the content is the specified text (OK, Submit, Reset, Return, Query), the obtained element (button) is generated as BUTTON;

[0119] 6. Generate the styles of LABEL, INPUT, and BUTTON using the obtained feature coordinate positions and color styles;

[0120] 7. In addition to HTML, the language conversion module also supports the conversion of IFTide and Unicorn Mobile UI frameworks. According to the selected conversion type, the corresponding type of code is output.

[0121] It should be noted that the above method of automatically identifying images and generating front-end code can support parameter adjustment, including:

[0122] 1. If (text) is not the first line and the text appears only when the right side of (text) exceeds the specified distance, INPUT will be automatically generated on the right side according to (input box). The distance here supports manual adjustment, on the one hand, to flexibly set according to the different distances between text and input box in different interfaces, and on the other hand, to support different image resolutions and sizes.

[0123] 2. If (text) is in the last line and the content is the specified text (OK, Submit, Reset, Return, Query), the obtained element (button) will be generated as BUTTON. The button text here supports input and is compatible with different button texts.

[0124] 3. The template recognition rate parameter can be configured. The recognition rate range can be 0.7 to 1. The higher the recognition rate, the higher the image similarity.

[0125] 4. The text matching rate, border matching rate and overall matching rate parameters support configuration, and the sum of the three is 1.

[0126] It should also be noted that the step of matching the page template in the above method of automatically identifying images and generating front-end codes may specifically include:

[0127] 1. Page templates include confirmation page, details page, form page, home page, list page, agreement page, and result page, which can cover commonly used pages.

[0128] 2. The text in the picture is replaced with the same text, such as "A", and the number is replaced with 8. The text in the template is also displayed in the same way. The obtained text is drawn on a new white background image, and the page template image is obtained by the same method to obtain the text image, and the text matching rate is obtained by comparing the images.

[0129] 3. Generate the basic gradient of the image and the page template to outline the edge of the image, and then compare the basic gradients of the two images to obtain the border matching rate.

[0130] 4. Convert the image to grayscale through binarization algorithm, and convert the template image to grayscale through binarization algorithm to reduce the interference of color on image matching.

[0131] 5. Scale the image and template image to the same size ratio to reduce the impact of resolution on the recognition rate, and obtain the overall matching rate through image comparison.

[0132] 6. Calculate the recognition rate: text matching rate*0.2+frame matching rate*0.2+overall matching rate*0.6=recognition rate. The proportions of text matching rate, frame matching rate and overall matching rate are the default parameter values, which support custom adjustment. The sum of the three proportions is 1. The main elements to be recognized are text and input boxes, which are respectively corresponded by text matching rate and frame matching rate, so the proportions are 0.2 each. The overall matching rate represents the similarity of the entire image, and the proportion is at least half, so the proportion is set to 0.6. This proportion setting can greatly improve the recognition accuracy.

[0133] 7. Through image comparison, if the recognition rate reaches the specified coefficient (template recognition rate parameter), the template is considered to be similar to the image, and the code of the template is used as output.

[0134] Figure 4 A flowchart of the code generation steps is provided. Figure 4 , you can determine the code type, which can include HTML, IFTide and Unicorn Mobile UI. According to different code types, the codes corresponding to LABEL, INPUT and BUTTON are generated respectively.

[0135] The above method of automatically identifying images and generating front-end codes solves the problem of low efficiency and easy errors in manually writing front-end codes to implement interfaces, and overcomes the difficulty of insufficient manpower for multiple interfaces. The front-end code generation tool supports automatically generating front-end codes based on the images in the requirements document, regardless of whether the images contain multiple layers; supports the conversion of IFTide and UnicornMobile UI frameworks, and outputs the corresponding type of code according to the selected conversion framework type. Supports matching page template library to output code. Reduce repetitive work, improve R&D efficiency, and R&D personnel can focus more on core logic processing.

[0136] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0137] Based on the same inventive concept, the embodiment of the present application also provides a front-end code generation device for implementing the front-end code generation method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more front-end code generation device embodiments provided below can refer to the limitations of the front-end code generation method above, and will not be repeated here.

[0138] In one embodiment, Figure 5 As shown, a front-end code generation device is provided, including: an element identification module 310, an element determination module 320 and a code generation module 330, wherein:

[0139] An element identification module 310, for identifying text elements in the front-end design drawing when the front-end design drawing does not match any design drawing template in the design drawing template library;

[0140] An element determination module 320, configured to determine an input box element in the front-end design drawing according to the spacing of the text elements, and to determine a button element in the front-end design drawing according to the content of the text elements;

[0141] The code generation module 330 is used to generate a front-end code corresponding to the front-end design drawing according to the text element, the input box element and the button element.

[0142] In one embodiment, the above-mentioned element determination module 320 is also used to generate the input box element on the right side of the text element when the text element is located at the first position in the front-end design drawing and the distance between the text element and the target text element exceeds a preset distance; the first position is a position other than the first line in the front-end design drawing, and the target text element is located on the right side of the text element.

[0143] In one embodiment, the above-mentioned element determination module 320 is also used to generate the button element at the position of the text element when the text element is located at the second position of the front-end design drawing and the content of the text element matches the preset content; the second position is the position of the last line in the front-end design drawing.

[0144] In one embodiment, the above-mentioned code generation module 330 is also used to determine the text element code, input box element code and button element code corresponding to the text element, the input box element and the button element respectively according to the code type of the front-end code; and generate the front-end code according to the text element code, input box element code and button element code.

[0145] In one embodiment, the front-end code generation device further includes:

[0146] The code corresponding module is used to generate a front-end code corresponding to the front-end design drawing according to the code corresponding to the target design drawing template when the front-end design drawing matches the target design drawing template in the design drawing template library.

[0147] In one embodiment, the front-end code generation device further includes:

[0148] A matching rate determination module, used to determine the text matching rate, frame matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library;

[0149] A recognition rate calculation module, used to perform weighted summation on the text matching rate, the frame matching rate and the overall matching rate to obtain the template recognition rate corresponding to each of the design drawing templates;

[0150] The target template determination module is used to determine, from the various design drawing templates, a design drawing template whose template recognition rate exceeds a preset threshold value as the target design drawing template.

[0151] In one embodiment, the above-mentioned matching rate determination module is also used to replace the text in the front-end design drawing and the design drawing template with preset text respectively to obtain the replaced front-end design drawing and the replaced design drawing template; determine the matching rate between the replaced front-end design drawing and the replaced design drawing template to obtain the text matching rate.

[0152] In one embodiment, the above-mentioned matching rate determination module is also used to respectively determine the basic gradients of the front-end design drawing and the design drawing template to obtain the basic gradient of the front-end design drawing and the basic gradient of the design drawing template; determine the matching rate between the basic gradient of the front-end design drawing and the basic gradient of the design drawing template to obtain the border matching rate.

[0153] Each module in the above-mentioned front-end code generation device can be implemented in whole or in part by software, hardware and a combination thereof. Each of the above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory in the computer device in the form of software, so that the processor can call and execute the operations corresponding to each of the above modules.

[0154] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Figure 6 As shown. The computer device includes a processor, a memory, a communication interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be achieved through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. When the computer program is executed by the processor, a front-end code generation method is implemented. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covered on the display screen, or a key, trackball or touchpad set on the computer device housing, or an external keyboard, touchpad or mouse, etc.

[0155] Those skilled in the art will understand that Figure 6 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0156] In one embodiment, a computer device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps in the above method embodiments when executing the computer program.

[0157] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0158] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0159] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0160] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0161] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0162] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A front-end code generation method, characterized in that: The method comprises: In the case where the front-end design drawing does not match the design drawing template in the design drawing template library, identifying the text elements in the front-end design drawing; Determine the input box element in the front-end design drawing according to the spacing of the text elements, and determine the button element in the front-end design drawing according to the content of the text elements; Generate a front-end code corresponding to the front-end design drawing according to the text element, the input box element and the button element; Determining the input box element in the front-end design drawing according to the spacing of the text elements includes: When the text element is located at the first position in the front-end design drawing and the distance between the text element and the target text element exceeds a preset distance, the input box element is generated on the right side of the text element; the first position is a position other than the first line in the front-end design drawing, and the target text element is located on the right side of the text element; The step of determining the button element in the front-end design drawing according to the content of the text element includes: When the text element is located at the second position in the front-end design drawing and the content of the text element matches the preset content, the button element is generated at the text element position; the second position is the position of the last line in the front-end design drawing.

2. The method according to claim 1, characterized in that: The generating of the front-end code corresponding to the front-end design drawing according to the text element, the input box element and the button element comprises: According to the code type of the front-end code, determine the text element code, input box element code and button element code corresponding to the text element, the input box element and the button element respectively; The front-end code is generated according to the text element code, the input box element code and the button element code.

3. The method according to claim 1, characterized in that The method further comprises: In the case where the front-end design drawing matches the target design drawing template in the design drawing template library, a front-end code corresponding to the front-end design drawing is generated according to the code corresponding to the target design drawing template.

4. The method according to claim 3, characterized in that In the case where the front-end design drawing matches the target design drawing template in the design drawing template library, before generating the front-end code corresponding to the front-end design drawing according to the code corresponding to the target design drawing template, the method further includes: Determine the text matching rate, border matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library; Performing weighted summation on the text matching rate, frame matching rate and overall matching rate to obtain the template recognition rate corresponding to each of the design drawing templates; From the design drawing templates, a design drawing template whose template recognition rate exceeds a preset threshold is determined as the target design drawing template.

5. The method according to claim 4, characterized in that Determining the text matching rate, frame matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library includes: Respectively replace the text in the front-end design drawing and the design drawing template with preset text to obtain a replaced front-end design drawing and a replaced design drawing template; The matching rate between the replaced front-end design drawing and the replaced design drawing template is determined to obtain the text matching rate.

6. The method according to claim 4, characterized in that The determining of the text matching rate, frame matching rate and overall matching rate between the front-end design drawing and each design drawing template in the design drawing template library further includes: Determine the basic gradients of the front-end design drawing and the design drawing template respectively, and obtain the front-end design drawing basic gradient and the design drawing template basic gradient; The matching rate between the basic gradient of the front-end design drawing and the basic gradient of the design drawing template is determined to obtain the frame matching rate.

7. A front-end code generation device, characterized in that: The device comprises: An element recognition module, used to recognize text elements in the front-end design drawing when the front-end design drawing does not match the design drawing template in the design drawing template library; An element determination module, used to determine the input box element in the front-end design drawing according to the spacing of the text element, and to determine the button element in the front-end design drawing according to the content of the text element; A code generation module, used to generate a front-end code corresponding to the front-end design drawing according to the text element, the input box element and the button element; The element determination module is specifically used to generate the input box element on the right side of the text element when the text element is located at the first position in the front-end design drawing and the distance between the text element and the target text element exceeds a preset distance; the first position is a position other than the first row in the front-end design drawing, and the target text element is located on the right side of the text element; when the text element is located at the second position in the front-end design drawing and the content of the text element matches the preset content, generate the button element at the position of the text element; the second position is the position of the last row in the front-end design drawing.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images