Design draft conversion code method and system based on component library coding mapping

Abstract

The present invention belongs to the technical field of front-end development, and specifically discloses a design draft code conversion method and system based on component library coding mapping. The method sets an image recognition model and performs recognition enhancement training on it, and uses the image recognition model to extract and identify component information from the design draft; divides the component categories of all components in the design draft; determines the coding format of the components of the referenced component library, establishes a component category coding library and code templates; marks and encodes the component information extracted and identified from the design draft; and performs coding matching between the identified components and the component codes in the referenced component library to achieve secondary encoding of the components and output code. With this technical solution, the code of the component is implemented using the syntax of the specific component library, which reduces code redundancy, simplifies the code structure, and improves maintainability.

Description

Technical Field

[0001] The present invention belongs to the technical field of front-end development, and relates to a design draft code conversion method and system based on component library coding mapping. Background Art

[0002] In the field of front-end development technology, developers can usually use some tools to directly convert the design draft interface designed by designers into code, eliminating the process of front-end personnel manually writing the interface, thereby reducing some repetitive work, that is, the technology of generating code from design drafts.

[0003] Existing methods for generating code from design drafts primarily fall into the following categories: 1. Directly identifying the design draft through deep learning models and converting it into code; 2. Converting the design draft's layer information into an intermediate DSL (domain-specific language) and then generating code according to a specific syntax; 3. Combining deep learning models or design draft-to-code conversion with manual annotation intervention for code generation. However, current generation methods all directly generate code from components identified in the design draft using a specific framework's native syntax or a custom syntax.

[0004] In front-end development, most projects introduce specific component libraries to implement most of the components on some pages. This is not considered in most design draft-to-code conversion methods. Furthermore, most of the generated code requires adjustments and subsequent maintenance. Therefore, the native syntax code format is not conducive to actual development and maintenance, resulting in low code maintainability. Furthermore, for pages that require long-term iterative development, this generation model can reduce the workload to a certain extent, but in the long run, it has the following disadvantages: 1. Component code generation is not combined with the component library referenced by the project, and the generated code does not match the overall project code style, resulting in poor compatibility. 2. The generated code is highly redundant and has a complex code structure. 3. The generated code needs to be manually repackaged into components. Summary of the Invention

[0005] The purpose of the present invention is to provide a design draft code conversion method and system based on component library code mapping to solve the problems of unnecessary redundancy and poor maintainability generated by traditional methods.

[0006] In order to achieve the above object, the basic solution of the present invention is: a design draft code conversion method based on component library coding mapping, comprising the following steps:

[0007] Set up an image recognition model and perform recognition enhancement training on it, and use the image recognition model to extract and identify component information from the design draft;

[0008] Divide all components in the design into component categories;

[0009] Determine the coding format of the components in the referenced component library, and establish a component category coding library and code template;

[0010] Mark and encode the component information extracted and identified from the design draft;

[0011] The identified components are matched with the component codes in the referenced component library to achieve secondary coding of the components and output the codes.

[0012] This basic solution's working principle and beneficial effects lie in improving upon the traditional design-to-code method. During code conversion, users can first select a specific component library as the standard. The components in the design will then be primarily implemented within that library during code generation. Code generation is then performed using native syntax, ensuring that the code generated for each identified component implements the specific library's syntax. This, to a certain extent, addresses the unnecessary redundancy and poor maintainability inherent in traditional methods.

[0013] Furthermore, the method for performing recognition enhancement training on the image recognition model is:

[0014] Obtain the referenced component library example images as data samples, and based on the characteristics of each type of component library example images, find multiple design drafts to train the image recognition model, thereby enhancing the image recognition model's recognition ability on the corresponding component library.

[0015] Perform recognition enhancement training on the image recognition model to facilitate its use.

[0016] Furthermore, the component categories include simple basic components, complex basic components and common layout templates.

[0017] The structure is simple and easy to divide.

[0018] Furthermore, the coding format of the component is component category-component name-component feature. In the component library, the component name represents a specific mode of the component in the current type of components; the component feature is used as a supplementary description and is coded as mod if i ed. Mod ifi ed means that the component with this code can be used as a substitute for the component to be modified.

[0019] Set the corresponding format to facilitate code generation.

[0020] Furthermore, the method of establishing the component category coding library and code template is as follows:

[0021] Establish a maintainable component category code index library, and save the code of each type of component as an object as a component category code table;

[0022] For each component, write in advance the code template of how the component library uses this component. The code template of each type of component is placed in the same JavaScript file. The file naming format adopts the component category naming, and the content of the code template file is organized into an array object.

[0023] This satisfies mapping needs and speeds up matching.

[0024] Furthermore, in the process of identifying component information in the design draft, the component category and component name fields are filled with corresponding tags, and for regular components or layouts, the component category field is filled with common (ordinary type) code.

[0025] It is used to mark components identified in the design draft that do not need to be implemented based on the component library. During the subsequent component category matching, it is first checked whether the component category code is common. If it is, the matching process is skipped directly. At the same time, during code generation, components coded as common are generated according to the framework's native syntax.

[0026] Furthermore, the method for re-encoding the component is as follows:

[0027] The component category of the identified component is compared and matched with the component category code library of the component library one by one. First, check whether the component category of the component is common. If so, fill the component code field of the identified component with common and skip the matching process. Otherwise, find out which component category the component belongs to.

[0028] If the category to which the component belongs is found in the component category code library of the component library, the component name of the component is compared with the component code object list under the corresponding component category one by one to check whether there is a matching component name code;

[0029] If a matching component name code is found, the component code corresponding to the component name is used as the component code of the identified component;

[0030] If no component name code matching the component is found, the component code whose component feature code is mod ifi ed is selected as the component code of the component.

[0031] The component implementation method identified in this way can be consistent with the implementation style of the component library referenced by the project to the greatest extent, reducing code redundancy, streamlining the code structure, and improving maintainability.

[0032] Furthermore, after completing the design draft information extraction and identification and component secondary coding operations, code output begins. The steps for code output are as follows:

[0033] For regular layouts or page nodes, they are generated according to native syntax, and class names and data binding are performed based on the information extracted from the design draft;

[0034] For component code generation, the component category encoding is used to match the corresponding code template file, and then the component encoding is used to match the corresponding code block to perform document structure filling, CSS style and data binding operations.

[0035] Get the code you need, it's easy.

[0036] Furthermore, it also includes adjusting and optimizing the output code. The specific methods are as follows:

[0037] Adjust component-related coding, including:

[0038] Enable preview mode for the generated code, compare the actual effect with the original design, and manually adjust the component-related coding;

[0039] Specify the component code of a certain identified component as the component code of the component library;

[0040] Adjust the component category coding library based on the codes of the identified components, and adjust the scope of each category coding to a wider or narrower angle;

[0041] For the identified components, if they are implemented according to the currently referenced component library and their codes are not included in the component category code library, then the codes will be expanded to the component category code library of the component library, which is a wider angle. For those implemented according to the component library, but the deviation between the preview image and the original design draft is large and the effect is not good, then such codes will be deleted from the component category code library of the component library, which is a narrower angle.

[0042] Adjust the grouping of pages and specify the corresponding component codes so that they can be generated according to the components contained in the component library;

[0043] Based on the adjustment of the similarity between the design draft and the generated image, an image recognition algorithm is used to calculate the similarity between the design draft and the preview image generated by code generation. The case with the highest similarity is used for code generation. The specific steps are as follows:

[0044] First, save the design draft and the generated preview image as images. Use the average hashing algorithm to obtain the hash values of the two images. Then calculate the Hamming distance between the two images. The smaller the Hamming distance, the more similar they are. The case with the smallest Hamming distance is selected for code generation.

[0045] Select a specific component that has been identified and set the specified component category code;

[0046] The component implementation methods corresponding to all component codes under the component category code are implemented once. After each completion, the image recognition algorithm is used to calculate the similarity between the design draft and the preview image generated by the code. The similarity in all cases is recorded, and finally the case with the highest similarity is selected as the final code output.

[0047] This solution provides a manual intervention solution based on component coding to further improve the accuracy of design draft code conversion.

[0048] The present invention also provides a design draft conversion system based on component library coding mapping, including a data acquisition unit and a processor. The data acquisition unit is used to obtain the required design draft. The output end of the data acquisition unit is connected to the input end of the processor. The processor executes the method described in the present invention to perform design draft conversion processing.

[0049] The system is used to perform code mapping between the components in the component library and the identified components, and then generate code based on the code mapping to complete component code generation. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] Figure 1 It is a flow chart of the design draft code conversion method based on component library coding mapping of the present invention. DETAILED DESCRIPTION

[0051] The following describes embodiments of the present invention in detail. Examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended only to explain the present invention and are not to be construed as limiting the present invention.

[0052] In the description of the present invention, it should be understood that the terms "longitudinal", "transverse", "up", "down", "front", "back", "left", "right", "vertical", "horizontal", "top", "bottom", "inside", "outside", etc., indicating the orientation or position relationship, are based on the orientation or position relationship shown in the accompanying drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention.

[0053] In the description of the present invention, unless otherwise specified and limited, it should be noted that the terms "installed", "connected" and "connected" should be understood in a broad sense. For example, it can be a mechanical connection or an electrical connection, or it can be the internal communication between two components. It can be a direct connection or an indirect connection through an intermediate medium. For ordinary technicians in this field, the specific meanings of the above terms can be understood according to the specific circumstances.

[0054] The present invention discloses a method for converting a design draft into code based on component library coding mapping, which is mainly an improvement on the traditional method for converting a design draft into code. When performing code conversion, the user can first select a specific component library as the standard. When generating code for the components in the design draft, the implementation form of the component library will be the main focus. Secondly, the code will be generated using the native syntax, so that the code generated by the identified component is the code of the component implemented using the syntax of the specific component library. At the same time, it solves the problems of unnecessary redundancy and poor maintainability caused by the traditional method to a certain extent. Figure 1 As shown, the design draft code conversion method includes the following steps:

[0055] Set up an image recognition model (such as pi x2code, pi pcook, and other deep learning models) and perform recognition enhancement training on it. Use the image recognition model to extract and identify component information from the design draft;

[0056] Divide all components in the design into component categories. Optimally, these categories include simple basic components (such as buttons, input boxes, radio buttons, and checkboxes); complex basic components (such as calendar components and picker selectors, which are more complex); and commonly used layout templates (such as tab templates and card templates, which are classic page elements). When building a component category code library, you can manually divide the code categories according to these three component specifications.

[0057] In the process of converting the design draft information into specific code after it is extracted, it is necessary to map the identified components to a specific component in the component library so as to realize code generation based on the component library. The specific approach is to perform relevant coding work on the components of the referenced component library, determine the coding format of the components of the referenced component library, and establish a component category coding library and code template; the coding format of the component is component category-component name-component feature. In the component library, a component generally has multiple configuration modes to achieve different effects. The component name indicates a specific mode of the component in the current category of components; the component feature is used as a supplementary description and is coded as mod ifi ed. mod ifi ed indicates that the component with this code can be used as a substitute for the component to be modified. For example, the specific format of the component coding object is:

[0058] {

[0059] "componentCode": "xxx" / / Component code: component category - component name - component feature composition

[0060] "componentType":"XXX" / / component category

[0061] "componentName": "xxx" / / component name,

[0062] “componentCharacter i st i cs”: “xxx” / / component characteristics

[0063] }.

[0064] Mark and encode the component information extracted and identified from the design draft;

[0065] The identified components are matched with the component codes in the referenced component library to achieve secondary coding of the components and output the codes.

[0066] In a preferred embodiment of the present invention, the method for performing recognition enhancement training on the image recognition model is:

[0067] The image recognition model is trained by obtaining sample images from the referenced component libraries. Based on the characteristics of each component library sample image, multiple design drafts are searched for training, strengthening the image recognition model's recognition capabilities for the corresponding component libraries. The layer information of the design draft and its own image information are input into the image recognition model to extract and identify component information.

[0068] In a preferred embodiment of the present invention, the method for establishing the component category code library and code template is as follows:

[0069] In order to map the needs and speed up the matching speed, a maintainable component category code index library is established. The code of each type of component is saved as an object as a component category code table. The specific format of the component category code table is, for example:

[0070]

[0071] For each component, write in advance the code template for how the component library uses this component. The code template for each type of component is placed in the same JavaScript file. The file naming format follows the component category name. The content of the code template file is organized into an array object. The specific format is:

[0072]

[0073] In a preferred embodiment of the present invention, during the process of identifying component information in the design draft, the identified components are tagged and coded accordingly. The tag is composed of component category-component name-component code. The component category and component name fields are filled with corresponding tags. For regular components or layouts, the component category field is filled with common code. The specific format is:

[0074] {

[0075] "componentType":"XXX" / / component category

[0076] "componentName": "xxx" / / component name

[0077] “componentCode”: “xxx” / / component code

[0078] }.

[0079] It is used to mark components identified in the design draft that do not need to be implemented based on the component library. During the subsequent component category matching, it is first checked whether the component category code is common. If it is, the matching process is skipped directly. At the same time, during code generation, components coded as common are generated according to the framework's native syntax.

[0080] In a preferred embodiment of the present invention, when generating code, it is necessary to match the identified components with the relevant component coding table of the referenced component library. The method for secondary encoding the components is as follows:

[0081] Component category matching: The component category of the identified component is compared and matched with the component category code library of the component library. First, check whether the component category of the component is common. If so, fill the component code field of the identified component with common and skip the matching process. Otherwise, find out which component category the component belongs to.

[0082] Component name matching and secondary coding: If the category to which the component belongs is found in the component category coding library of the component library, the component name of the component is compared one by one with the component coding object list under the corresponding component category to check whether there is a matching component name code;

[0083] If a matching component name code is found, the component code corresponding to the component name is used as the component code of the identified component;

[0084] If no component name code matching the component is found, the component code whose component feature code is mod ifi ed is selected as the component code of the component.

[0085] In a preferred embodiment of the present invention, after the design draft information extraction and identification and component secondary encoding operations are completed, the code output is started. The steps of outputting the code are as follows:

[0086] For regular layouts or page nodes, they are generated according to native syntax, and class names and data binding are performed based on the information extracted from the design draft;

[0087] For component code generation, the component category encoding is used to match the corresponding code template file, and then the component encoding is used to match the corresponding code block to perform document structure filling, CSS (Cascading Style Sheets) style and data binding operations.

[0088] In a preferred embodiment of the present invention, the design draft code conversion method further includes adjusting and optimizing the output code, and the specific method is as follows:

[0089] Adjust component-related coding, including:

[0090] Enable preview mode for the generated code, compare the actual effect with the original design, and manually adjust the component-related coding;

[0091] Specify the component code of a certain identified component as the component code of the component library;

[0092] Adjust the component category coding library based on the codes of the identified components, and adjust the scope of each category coding to a wider or narrower angle;

[0093] For the identified components, if they are implemented according to the currently referenced component library and their codes are not included in the component category code library, then the codes will be expanded to the component category code library of the component library, which is a wider angle. For those implemented according to the component library, but the deviation between the preview image and the original design draft is large and the effect is not good, then such codes will be deleted from the component category code library of the component library, which is a narrower angle.

[0094] Adjust the page grouping and assign corresponding component codes so that it can be generated according to the components contained in the component library. Adjust the layout and grouping of related elements in the design draft so that they can be identified as a certain category of components, thereby changing their coding so that they can be implemented based on the component library. The number of implementation methods depends on the number of component codes contained in the component category code table, and the specific number of component codes depends on the referenced component library and how many implementation methods the component library has for the current component.

[0095] Based on the adjustment of the similarity between the design draft and the generated image, an image recognition algorithm is used to calculate the similarity between the design draft and the preview image generated by code generation. The case with the highest similarity is used for code generation. The specific steps are as follows:

[0096] First, save the design draft and the generated preview image as images. Use the average hashing algorithm to obtain the hash values of the two images. Then calculate the Hamming distance between the two images. The smaller the Hamming distance, the more similar they are. The case with the smallest Hamming distance is selected for code generation.

[0097] Select a specific component that has been identified and set the specified component category code;

[0098] The component implementation methods corresponding to all component codes under the component category code are implemented once. After each completion, the image recognition algorithm is used to calculate the similarity between the design draft and the preview image generated by the code. The similarity in all cases is recorded, and finally the case with the highest similarity is selected as the final code output.

[0099] The present invention also provides a design draft conversion system based on component library coding mapping, including a data acquisition unit and a processor. The data acquisition unit is used to obtain the required design draft. The output end of the data acquisition unit is connected to the input end of the processor. The processor executes the method described in the present invention to perform design draft conversion processing.

[0100] The technical solution of the present invention proposes an intensive training scheme for deep learning models based on component libraries, and establishes three specific component types that can be generated based on component libraries. Specific encoding methods are provided for all components of the component library referenced in the project, and code templates and their file encoding formats and content formats are established. It proposes encoding methods for components identified in the design draft, encoding mapping methods for components in the component library and identified components, and a method for completing component code generation based on encoding mapping during the code generation process. This scheme is based on a manual intervention scheme for component library encoding adjustment, and a component library implementation scheme based on similarity comparison after multiple generations under multiple encoding conditions.

[0101] Throughout this specification, reference to terms such as "one embodiment," "some embodiments," "examples," "specific examples," or "some examples" means that a specific feature, structure, material, or characteristic described in conjunction with that embodiment or example is included in at least one embodiment or example of the present invention. In this specification, schematic representations of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.

[0102] While embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions, and variations may be made to the embodiments without departing from the principles and spirit of the invention, and that the scope of the invention is defined by the claims and their equivalents.

Claims

1. A design draft code conversion method based on component library coding mapping, characterized in that: The steps include: Set up an image recognition model and perform recognition enhancement training on it, and use the image recognition model to extract and identify component information from the design draft; Divide all components in the design into component categories; Determine the coding format of the components in the referenced component library, and establish a component category coding library and code template; Mark and encode the component information extracted and identified from the design draft; Match the identified components with the component codes in the referenced component library to achieve secondary coding of the components and output the code; After completing the design draft information extraction and identification and component secondary coding operations, the code is output. The steps for outputting the code are as follows: For regular layouts or page nodes, they are generated according to native syntax, and class names and data binding are performed based on the information extracted from the design draft; For component code generation, the component category code is used to match the corresponding code template file, and then the component code is used to match the corresponding code block to perform document structure filling, CSS style and data binding operations; It also includes adjusting and optimizing the output code. The specific methods are as follows: Adjust component-related coding, including: Enable preview mode for the generated code, compare the actual effect with the original design, and manually adjust the component-related coding; Specify the component code of a certain identified component as the component code of the component library; Adjust the component category coding library based on the codes of the identified components, and adjust the scope of each category coding to a wider or narrower angle; For the identified components, if they are implemented according to the currently referenced component library and their codes are not included in the component category code library, then the codes will be expanded to the component category code library of the component library, which is a wider angle. For those implemented according to the component library, but the deviation between the preview image and the original design draft is large and the effect is not good, then such codes will be deleted from the component category code library of the component library, which is a narrower angle. Adjust the grouping of pages and specify the corresponding component codes so that they can be generated according to the components contained in the component library; Based on the adjustment of the similarity between the design draft and the generated image, an image recognition algorithm is used to calculate the similarity between the design draft and the preview image generated by code generation. The case with the highest similarity is used for code generation. The specific steps are as follows: First, save the design draft and the generated preview image as images. Use the average hashing algorithm to obtain the hash values of the two images. Then calculate the Hamming distance between the two images. The smaller the Hamming distance, the more similar they are. The case with the smallest Hamming distance is selected for code generation. Select a specific component that has been identified and set the specified component category code; The component implementation methods corresponding to all component codes under the component category code are implemented once. After each completion, the image recognition algorithm is used to calculate the similarity between the design draft and the preview image generated by the code. The similarity in all cases is recorded, and finally the case with the highest similarity is selected as the final code output.

2. The design draft code conversion method based on component library code mapping according to claim 1 is characterized in that: The method for performing recognition enhancement training on the image recognition model is: Obtain the referenced component library example images as data samples, and based on the characteristics of each type of component library example images, find multiple design drafts to train the image recognition model, thereby enhancing the image recognition model's recognition ability on the corresponding component library.

3. The design draft code conversion method based on component library code mapping according to claim 1 is characterized in that: The component categories include simple basic components, complex basic components and common layout templates.

4. The method for converting a design draft into code based on component library coding mapping according to claim 1, wherein: The encoding format of the component is: component category-component name-component feature. In the component library, the component name represents a specific mode of the component in the current type of components; the component feature is used as a supplementary description and is coded as modified. Modified means that the component with this code can be used as a substitute for the component to be modified.

5. The method for converting a design draft into code based on component library coding mapping according to claim 1, wherein: The method of establishing component category coding library and code template is as follows: Establish a maintainable component category code index library, and save the code of each type of component as an object as a component category code table; For each component, write in advance the code template of how the component library uses this component. The code template of each type of component is placed in the same JavaScript file. The file naming format adopts the component category naming format, and the content of the code template file is organized into an array object.

6. The method for converting a design draft into code based on component library coding mapping according to claim 1, wherein: In the process of identifying component information in the design draft, the component category and component name fields are filled with corresponding tags. For regular components or layouts, the component category field is filled with common codes.

7. The method for converting a design draft into code based on component library coding mapping according to claim 1, wherein: The method for re-encoding the component is as follows: The component category of the identified component is compared and matched with the component category code library of the component library one by one. First, check whether the component category of the component is common. If so, fill the component code field of the identified component with common and skip the matching process. Otherwise, find out which component category the component belongs to. If the category to which the component belongs is found in the component category code library of the component library, the component name of the component is compared with the component code object list under the corresponding component category one by one to check whether there is a matching component name code; If a matching component name code is found, the component code corresponding to the component name is used as the component code of the identified component; If no component name code matching the component is found, the component code with the component feature code modified is selected as the component code of the component.

8. A design draft code conversion system based on component library coding mapping, characterized in that: The invention comprises a data acquisition unit and a processor, wherein the data acquisition unit is used to acquire the required design draft, the output end of the data acquisition unit is connected to the input end of the processor, and the processor executes the method according to one of claims 1 to 7 to perform code conversion processing of the design draft.

Images