Code generation method and device based on semantic label, equipment and medium

Abstract

The application relates to the technical field of front-end development, and in particular to a code generation method and device based on semantic marking, equipment and a medium. The method system performs semantic recognition on a design draft, determines component requirement information, extracts the design intention in the design draft, then matches the component requirement information with meta information, associates the design intention with code semantics, after the matching is completed, extracts the code structure of the component element, extracts the text content of the corresponding to-be-converted component, and injects the text content into the code structure, realizes the restoration of the static structure, injects the variable declaration into the code after the text injection, realizes the support for dynamic data binding, and generates the final code. The application can be applied to business scenarios such as digital finance and intelligent medical treatment, thereby automatically matching the component intention in the design draft with the code library component semantic understanding, so as to accurately generate code according to the design draft.

Description

Technical Field

[0001] This application relates to the field of front-end development technology, and in particular to a method, apparatus, device and medium for generating code based on semantic markup. Background Technology

[0002] With the development of front-end development technologies, the complexity and iteration frequency of user interfaces are increasing daily. Converting designer drafts into executable front-end code is applied across various business domains. For example, in the financial insurance sector, intelligent systems automatically generate front-end code for policy management pages from design drafts. In healthcare, systems automatically convert design drafts into responsive code for electronic medical record interfaces, allowing doctors to use them seamlessly on tablets and computers. However, traditional design-to-code conversion technologies still suffer from drawbacks such as low automation and poor versatility.

[0003] Currently, design-to-code tools primarily rely on visual recognition technology to match components in practical applications. This approach is prone to misjudgment when faced with complex components or similar visual elements, resulting in generated code that does not match the design intent. For example, in an insurance service scenario, an automatic conversion of a design draft containing nested tables and similar visual elements might misjudge the tables as multiple independent containers, or generate the same component for the "Submit" and "Cancel" buttons in the design draft, leading to a disordered layout and incorrect interaction logic on the generated premium calculation page.

[0004] Furthermore, current design-to-code conversion tools typically require separate training or rule writing for different component libraries, lacking versatility and extensibility, thus increasing development and maintenance costs. For example, in smart healthcare scenarios, if a hospital system needs to switch from one component library to another, existing conversion tools cannot automatically adapt. This results in complex medical record forms, appointment calendars, and other components in the doctor's workstation interface requiring retraining of models or rewriting of matching rules, significantly increasing the maintenance costs and time associated with interface migration.

[0005] Therefore, how to automatically match the component intent in the design draft with the semantic understanding of the components in the code library in order to accurately generate code based on the design draft has become an urgent problem to be solved. Summary of the Invention

[0006] This invention provides an artificial intelligence-based code generation method, apparatus, computer device, and medium based on semantic tagging, to solve the technical problem of automatically matching the component intent in the design draft with the semantic understanding of the code library components, so as to accurately generate code based on the design draft.

[0007] Firstly, a code generation method based on semantic markup is provided, including: Obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information in the design draft that represents the component to be transcoded; The component description document of each code component in the preset code component library is parsed to obtain the component meta information of the corresponding code component; The component requirement information is matched with the meta information of all code components to obtain the matching code components. The component description document of the matching code components is parsed to determine the component element corresponding to the component requirement information and extract the code structure of the component element. Extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the code after text injection; Extract the component description document of the matched code component to obtain variable declarations, inject the variable declarations into the text-injected code to obtain the variable-injected code, and generate the final code based on the variable-injected code.

[0008] Secondly, an embodiment of this application provides a code generation apparatus based on semantic markup, comprising: The semantic recognition module is used to obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information representing the component to be transcoded in the design draft; The metadata acquisition module is used to parse the component description document of each code component in the preset code component library to obtain the component metadata of the corresponding code component; The code structure extraction module is used to match the component requirement information with the meta information of all code components to obtain the matching code components, parse the component description document of the matching code components, determine the component elements corresponding to the component requirement information, and extract the code structure of the component elements. The code injection module is used to extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the text-injected code. The code generation module is used to extract the component description documents of the matched code components, obtain variable declarations, inject the variable declarations into the text-injected code, obtain the variable-injected code, and generate the final code based on the variable-injected code.

[0009] Thirdly, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the semantic tag-based code generation method described above.

[0010] Fourthly, a computer-readable storage medium is provided, which stores a computer program that, when executed by a processor, implements the steps of the above-described semantic tag-based code generation method.

[0011] The beneficial effects of this application embodiment compared with the prior art are as follows: A design draft to be transcoded is obtained; semantic recognition is performed on the design draft to determine the component requirement information representing the component to be transcoded in the design draft; the component description document of each code component in the preset code component library is parsed to obtain the component meta-information of the corresponding code component; the component requirement information is matched with the meta-information of all code components to obtain the matched code component; the component description document of the matched code component is parsed to determine the component element corresponding to the component requirement information; the code structure of the component element is extracted; the text content of the corresponding component to be transcoded is extracted from the design draft; the text content is injected into the code structure to obtain the text-injected code; the component description document of the matched code component is extracted to obtain variable declarations; the variable declarations are injected into the text-injected code to obtain the variable-injected code; and the final code is generated based on the variable-injected code. This application can be applied to business scenarios such as digital finance and smart healthcare. First, the system performs semantic recognition on the design draft to determine component requirement information and extract the design intent. Simultaneously, by parsing the component documentation for each code component, it obtains component meta-information, completing a semantic understanding of the code component library. Then, by matching the component requirement information with the meta-information, the design intent is associated with the code semantics. After matching, the code structure of the component elements is extracted, the text content of the corresponding component to be transcoded is extracted, and the text content is injected into the code structure to restore the static structure. Then, variable declarations are injected into the text-injected code to support dynamic data binding, generating the final code. Thus, it automatically matches the component intent in the design draft with the semantic understanding of the code library components to accurately generate code based on the design draft. Attached Figure Description

[0012] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0013] Figure 1 This is a schematic diagram of an application environment for a code generation method based on semantic tagging provided in an embodiment of this application; Figure 2 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application; Figure 3 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application; Figure 4 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application; Figure 5 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application; Figure 6 This is a schematic diagram of the structure of a code generation device based on semantic tagging provided in an embodiment of this application; Figure 7 This is a schematic diagram of the structure of a computer device according to an embodiment of the present invention; Figure 8 This is another structural schematic diagram of a computer device according to one embodiment of the present invention. Detailed Implementation

[0014] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0015] The semantic tag-based code generation method provided in Embodiment 1 of this application can be applied to, for example, Figure 1 In this application environment, on the client side, users can set semantic recognition conditions, submit design drafts, define code generation requirements, and send operation instructions. The server side, acting as the processing engine, receives the aforementioned information from the client and fully executes the semantic tagging-based code generation process proposed in this invention. This includes semantic recognition and component requirement matching of the design draft, extracting and assembling the code structure from the code component library, injecting text and variable declarations, and finally generating usable code.

[0016] See Figure 2 This is a flowchart illustrating a semantic tag-based code generation method according to an embodiment of this application. The semantic tag-based code generation method described above can be applied to... Figure 1 The server-side component.

[0017] like Figure 2 As shown, the semantic tag-based code generation method may include the following steps: Step S201: Obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information representing the component to be transcoded in the design draft.

[0018] The system receives transcoded design drafts through an interface (such as a local file reading module or a design tool). The design draft to be transcoded is a source file in a specific format or an exported high-fidelity image description file, compatible with multiple file formats, and can extract structured layer data (such as layer name, position, size, style, and hierarchical relationship) for analysis, rather than just pixel images.

[0019] The process of semantic recognition in design drafts can utilize computer vision and machine learning pattern recognition. Semantic recognition means going beyond simple graphic detection to understand the intent and function of design elements. Semantic recognition includes visual element recognition, component-level pattern recognition, and understanding contextual relationships.

[0020] Visual element recognition refers to using trained models (such as object detection and segmentation models) to identify basic visual elements in a design draft, such as rectangles, icons, text blocks, and images. These are the atoms of the recognition process.

[0021] Component-level pattern recognition refers to the process of identifying a set of atoms with specific permutations and combinations as a component with specific semantics, based on the identified atomic elements and using predefined pattern rules or machine learning models. For example, a combination of a rectangle, text, and an internal icon, in a specific location and style, might be identified as a button; a regular arrangement of multiple cards might be identified as a list or grid layout.

[0022] Contextual understanding refers to inferring the logical relationships (such as subordinate, parallel, and cyclic) between elements by combining the layer hierarchy, spacing, and alignment of the design draft.

[0023] The component requirement information that represents the component to be transcoded is the output result of semantic recognition. The component requirement information is a data object that standardizes and structures the visual recognition result.

[0024] For example, in insurance service scenarios, when a design team delivers a new mobile interface design draft for an insurance contract, artificial intelligence can obtain the design draft and automatically identify the component requirements such as the "insurance information entry area," "premium calculator," and "exclusion clause display box," providing a structured basis for the subsequent automatic generation of front-end code.

[0025] For example, in the scenario of online medical consultation services, by obtaining the design draft of the interactive consultation page to be transcoded, semantic recognition is performed on the design draft to determine the component requirement information represented therein, such as the "symptom check box", "rich text input box for disease description" and "electronic prescription display module", in order to support the subsequent automatic transcoding development.

[0026] Step S202: Parse the component description document of each code component in the preset code component library to obtain the component meta-information of the corresponding code component.

[0027] Optionally, parsing the component description document of each code component in the preset code component library to obtain the component meta-information of the corresponding code component may include the following steps: Extract the component sub-file identifier that represents any component identifier and the corresponding sub-file content from the component specification document; Using the component sub-file identifier as the key and the sub-file content as the value, component meta-information containing the mapping relationship between the component sub-file identifier and the sub-file content is constructed based on the key and the value.

[0028] The pre-defined code component library is a pre-defined, structured collection of front-end components, serving as the target code reference system for the entire transcoding system. This library can be a unified internal component library within an enterprise, an open-source component set, or something similar.

[0029] Component documentation is the carrier of component information and includes type definition files, documents, configuration files, and description documents.

[0030] Component metadata contains all the descriptive information about a component, comprising a structured data object or database entry. It allows the system to quickly find relevant component information by keyword, much like using a dictionary, without having to dynamically parse lengthy documentation during matching. Metadata should at least include the component name, a list of properties (each property includes name, type, default value, an enumeration of optional values, and a description), a list of slots, a list of events, and dependencies.

[0031] In this context, a component subfile identifier is a unique identifier within the document that points to a specific component or part of a component. This can be the component's name, the path to a component's property, the name of a component's method, etc. The corresponding subfile content is the specific descriptive information pointed to by the aforementioned identifier. The mapping relationship is constructed through a combination of static code analysis tools (such as parsing abstract syntax trees) and natural language processing techniques. The key is the component subfile identifier, which constitutes the entry point for the query. The value is the subfile content, which is the result returned by the query. Component metadata is a data structure containing a large number of such key-value pairs.

[0032] For example, in the development scenario of an insurance claims progress query page, by parsing the documentation of the "claims progress timeline component", sub-file identifiers are extracted, and a mapping relationship between them and style files and logic files is constructed to form component meta-information to support intelligent assembly.

[0033] For example, in the development scenario of a medical department appointment interface, by parsing the documentation of the "department selector component", extracting the sub-file identifiers, and constructing the mapping relationship between them and the layout configuration and filtering logic files, component meta-information is formed to support visual construction.

[0034] Step S203: Match the component requirement information with the meta information of all code components to obtain the matching code components, parse the component description document of the matching code components, determine the component elements corresponding to the component requirement information, and extract the code structure of the component elements.

[0035] Optionally, matching the component requirement information with the meta-information of all code components to obtain the matching code components may include the following steps: Extract the attribute requirement information that represents the component attributes from the component requirement information, and match the key according to the attribute requirement information to obtain the matching key and the matching value corresponding to the matching key; Based on the matching key and the matching value, the matching code component is obtained.

[0036] Optionally, parsing the component description document of the matched code component to determine the component element corresponding to the component requirement information may include the following steps: Extract the composition table representing the component elements from the component description document of the matched code component; Based on the component requirement information, the composition table is matched to obtain the component elements corresponding to the component requirement information.

[0037] The process of matching component requirement information with the metadata of all code components is an information retrieval process. The system needs to evaluate the degree of matching between the requirements from the design draft and each candidate component in the component library, and find the code components that meet the requirement constraints in the metadata through rule engine or vector similarity calculation.

[0038] The process of parsing the component documentation of the matching code component involves delving into the documentation of the matching code component to find the specific structure that perfectly matches the requirements details.

[0039] The component elements corresponding to the component requirements information are the specific code elements located in the component's detailed documentation. A component element refers to the smallest code unit that constitutes a component instance, containing information about how the component is used, such as the component's tag name, attributes that need to be set, and the content of the slots that need to be filled.

[0040] The code structure is a reusable, standardized code template snippet generated based on the located component elements, containing the code skeleton of the component elements. This code structure is parameterized, with text content, event handler function names, etc., existing as variables or placeholders so that they can be populated by business logic or data in subsequent steps.

[0041] The process involves extracting attribute requirement information, matching keys, and extracting specific attribute requirements from the requirement information. This attribute requirement information is then used to query the metadata database. Based on the matching keys and values, the system retrieves the matching code components. A single query may match multiple keys for multiple components. The system then sorts all matching results (e.g., a component matching multiple requirements such as type, size, and shape) using a scoring algorithm (e.g., the number of matched attributes, weighted summation) and selects the component with the highest overall matching degree as the final result.

[0042] Composition tables are a more granular, predefined collection of use cases within component documentation, often presented as code examples or variations. Composition tables include basic buttons, icon buttons, loading buttons, disable buttons, etc.

[0043] Based on the component requirement information, the system matches it against the composition table. This involves comparing the component requirement information obtained in S201 with each entry in the composition table to find a specific, complete code example. For example, if the requirement is "a button of a primary color, medium size, with a right-hand arrow," the system will search the composition table for the best-matching example and confirm whether its style and size match.

[0044] The component element, which is the successfully matched entry in the component table, is the component element to be extracted, and the accompanying sample code is the component element.

[0045] For example, in the development scenario of an insurance product introduction page, the system extracts the attribute requirements of the "insurance terms fold panel" from the component requirements information, finds the matching terms fold component by matching the key with the code component meta information, parses the composition table of its component specification document, determines the component elements such as fold title and expanded content, and then extracts the code structure of these elements for page construction.

[0046] For example, in the transcoding scenario of an online medical consultation page, the system extracts the attribute requirements of the "symptom checkbox" from the requirement information, locates the matching multi-select symptom checkbox component by matching the key of the meta information in the component library, then parses the composition table in its documentation to determine the corresponding checkbox group, label text, status icon and other component elements, and extracts the code structure of these elements to generate the final page.

[0047] Step S204: Extract the text content corresponding to the component to be transcoded from the design draft, and inject the text content into the code structure to obtain the text-injected code.

[0048] Step S205: Extract the component description document of the matched code component to obtain variable declarations, inject the variable declarations into the text-injected code to obtain the variable-injected code, and generate the final code based on the variable-injected code.

[0049] In this context, "locating the component to be converted" refers to the system identifying a specific UI element in the design draft that needs to be converted into code (such as a button, a title, or a paragraph). "Extracting text content" means reading the displayed text content from the UI element's layers or attributes. For example, a button might display "Buy Now," and a title might display "Welcome to my website." "Injecting code structure" refers to the system having a preset, generic code template or framework, where placeholders are reserved for text content. The extracted "Buy Now" text from the previous step is used to replace the placeholder within the button label in the code template.

[0050] Extracting variable declarations involves the system searching for a matching component documentation (which might come from a UI component library or internal team specifications). From this documentation, the system finds the property or variable definitions used by the component to receive external data. Injecting variable declarations means the system modifies the code obtained in the previous step based on the extracted variable names to arrive at the final code. After variable injection, the code is no longer hard-coded text, but rather the displayed content is controlled by variables or properties.

[0051] For example, in the development scenario of an insurance policy generation page, the system extracts text content such as the corresponding policy number and policyholder information from the design draft based on the matched table component, injects the text into the corresponding cells of the table in the code structure, then extracts variable declarations from the component documentation and injects them into the code with the filled text, forming variable injection code containing dynamic data binding logic, and finally generating policy rendering code that can run on the front end.

[0052] For example, in the development scenario of the inpatient expense list page, the system extracts the text of expense items such as medicines and examinations from the design draft and injects them into the corresponding cells based on the code structure of the matched expense details table component. Then, it extracts the total amount of expenses, the unit price of items and other variable declarations from the component documentation and injects them into the code after the text is filled. Finally, it generates the page code for dynamically rendering the inpatient expense list.

[0053] In this embodiment, the system first performs semantic recognition on the design draft to determine component requirement information, thereby extracting the design intent from the design draft. Simultaneously, by parsing the component documentation for each code component, component meta-information is obtained, completing the semantic understanding of the code component library. Then, by matching the component requirement information with the meta-information, the design intent is associated with the code semantics. After matching, the code structure of the component elements is extracted, the text content of the corresponding component to be transcoded is extracted, and the text content is injected into the code structure to restore the static structure. Then, variable declarations are injected into the text-injected code to support dynamic data binding, generating the final code. This automatically matches the component intent in the design draft with the semantic understanding of the code library components to accurately generate code based on the design draft.

[0054] See Figure 3 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application. Figure 3 As shown, the step S204 above, which involves extracting the text content corresponding to the component to be transcoded from the design draft and injecting the text content into the code structure to obtain the text-injected code, may include the following steps: Step S301: Extract the component configuration table representing the component configuration type from the component description document of the code component.

[0055] Step S302: Determine the component configuration type of the component to be transcoded according to the component configuration table.

[0056] Step S303: If the component configuration type is attribute injection type, then extract the attribute content of the text content, inject the attribute content into the code structure, and obtain the code after attribute content injection.

[0057] Step S304: If the component configuration type is function processing type, then a preset processing function is used to segment the text content to obtain segmented content, and the segmented content is injected into the code structure to obtain code after segmented content injection.

[0058] Step S305: Based on the code injected with the attribute content and the code injected with the segmented content, obtain the code injected with the text.

[0059] The component documentation includes a configuration table listing all configurable properties, their types, and descriptions. The system parses the official documentation for this code component and extracts its definition table, i.e., the component configuration table. Determining the component configuration type means judging, based on the configuration table, how the component expects to receive and display text content. Component configuration types include property injection and function processing.

[0060] Among them, property injection means that the component's text is passed in as a direct value of a property. Most basic components belong to this category. Function-based processing means that the component's text is not passed in directly, but needs to be dynamically generated or organized through a pre-defined processing function (often a callback function or rendering function).

[0061] Extracting attribute content means that if the system determines that the component to be transcoded is of the attribute injection type, the text extracted from the design draft is itself the attribute value to be injected. Locate the corresponding attribute name in the code structure, fill in this attribute value, and obtain the code after attribute content injection.

[0062] If the system determines that the component to be transcoded is a function-processing type, it uses a preset function for segmentation. The text in the design draft may be a complete list (e.g., name, age, address). The system will call a preset logical function (e.g., split by line breaks, commas, or visual grouping) to segment this long text into structured data fragments. The segmented structured data (usually arrays or objects) is injected into predefined attributes in the code structure to receive the data structure, resulting in the injected code for the segmented content. After integrating the injected code for the attribute content and the injected code for the segmented content, a text-injected code is generated.

[0063] In this embodiment of the application, based on attribute content injection and segmentation content injection, a higher quality integrated code after text injection is generated.

[0064] See Figure 4 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application. Figure 4 As shown, after injecting the variable declaration into the text-injected code in step S205 to obtain the variable-injected code, the following steps may also be included: Step S401: Extract the custom information corresponding to the component to be transcoded from the design draft.

[0065] Step S402: The custom information is merged into the code after the variable injection to obtain the final code.

[0066] Custom information includes design comments, semantics in layer naming conventions, and symbols.

[0067] Among these, design annotations refer to the text notes added by designers next to layers. The semantics of layer naming conventions refer to layer names containing business logic or status information. Special marks or symbols refer to visual marks added by designers for specific interactions (such as hover effects or animation triggers).

[0068] The custom information is merged into the code after variable injection to obtain the final code. The system then determines the type of this custom information (logic, style, or comment). If it is a comment, it is directly inserted above the corresponding component. If it is related to logic (condition, event), it is injected into the tag of the component in the template or around its parent component. If it is a state or method declaration, it is added to the script section. If it is related to style, it is added to the style section or the global configuration file.

[0069] In this embodiment, the designer's design intent and notes are transformed into comments, logic, and configurations in the code, making the generated code more intelligent and closer to business needs.

[0070] See Figure 5 This is a flowchart illustrating a code generation method based on semantic tagging provided in an embodiment of this application. Figure 5 As shown, after injecting the variable declaration into the text-injected code in step S205 to obtain the variable-injected code, the following steps may also be included: Step S501: Extract the custom layout format from the custom information.

[0071] Step S502: Extract the component layout format from the component description document of the matched code component.

[0072] Step S503: Merge the custom layout format and the component layout format to obtain a merged format.

[0073] Step S504: Generate the final code based on the code after variable injection and the merging format.

[0074] This involves extracting custom layout formats from custom information, specifically extracting layout-related parts from the special styles set for a component in the design draft. Custom layout formats refer to visual attributes that affect the spatial layout and appearance of elements, including size and position, layout, text typography, borders, and shapes.

[0075] Component layout formatting refers to the style rules that come with the component, including structural constraints, non-overridable dimensions, responsiveness rules, etc.

[0076] The custom layout format and the component layout format are merged to obtain the merged format. For attributes that are explicitly defined as unchangeable by the component, the component format shall prevail. Such custom settings may be ignored or warned. For layout attributes that the component is allowed to override, the custom format shall prevail. If the custom format and the component format conflict on overrideable attributes, an append enhancement method shall be used.

[0077] Based on the code after variable injection and the merged format, the final code is generated, and the merged layout style is applied to the code after variable injection generated by S205 in the correct form.

[0078] The two main methods of combining styles are inline style injection and generating style blocks.

[0079] Inline style injection refers to the ability to directly generate and insert a small number of specific custom layout attributes into a component tag.

[0080] Generating a style block refers to generating a unique class name for this component instance with custom typography. In the style section of the code, this class name is used in conjunction with the merge format to write rules and add the class name to the component.

[0081] In this embodiment, by merging the custom layout of the design draft with the default layout of the component library, a final version that conforms to visual specifications and has complete styles is generated, achieving intelligent style adaptation. This preserves the designer's customized details while ensuring consistency with the styles of the component library, thereby improving code usability and fidelity.

[0082] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0083] In one embodiment, a semantic tag-based code generation apparatus is provided, which corresponds one-to-one with the semantic tag-based code generation method described in the above embodiments. For example... Figure 6 As shown, the semantic tagging-based code generation device includes a semantic recognition module 61, a metadata acquisition module 62, a code structure extraction module 63, a code injection module 64, and a code generation module 65. Detailed descriptions of each functional module are as follows: The semantic recognition module 61 is used to obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information representing the component to be transcoded in the design draft; The metadata acquisition module 62 is used to parse the component description document of each code component in the preset code component library to obtain the component metadata of the corresponding code component; The code structure extraction module 63 is used to match the component requirement information with the meta information of all code components to obtain the matching code components, parse the component description document of the matching code components, determine the component elements corresponding to the component requirement information, and extract the code structure of the component elements. The code injection module 64 is used to extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the text-injected code. The code generation module 65 is used to extract the component description document of the matched code component, obtain variable declarations, inject the variable declarations into the text-injected code, obtain the variable-injected code, and generate the final code based on the variable-injected code.

[0084] Optionally, the metadata acquisition module 62 includes: The content extraction unit is used to extract the component sub-file identifier that represents any component identifier and the sub-file content corresponding to the component sub-file identifier from the component description document; The meta-information construction unit is used to construct component meta-information containing the mapping relationship between the component sub-file identifier and the sub-file content, using the component sub-file identifier as the key and the sub-file content as the value.

[0085] Optionally, the code structure extraction module 63 includes: The matching unit is used to extract the attribute requirement information that represents the component attributes from the component requirement information, and match the key according to the attribute requirement information to obtain the matching key and the matching value corresponding to the matching key. The code component matching unit is used to obtain the matching code component based on the matching key and the matching value.

[0086] Optionally, the code structure extraction module 63 includes: The composition table extraction unit is used to extract the composition table representing the component composition elements in the component description document of the matched code component; The component element acquisition unit is used to match the composition table according to the component requirement information to obtain the component elements corresponding to the component requirement information.

[0087] Optionally, the code injection module 64 includes: The configuration table extraction unit is used to extract the component configuration table representing the component configuration type from the component description document of the code component; The configuration type determination unit is used to determine the component configuration type of the component to be transcoded based on the component configuration table. The attribute injection unit is used to extract the attribute content of the text content if the component configuration type is attribute injection type, and inject the attribute content into the code structure to obtain the code after attribute content injection. The segmentation unit is used to segment the text content using a preset processing function if the component configuration type is function processing type, to obtain segmented content, and to inject the segmented content into the code structure to obtain code after segmented content injection. The text injection unit is used to obtain the text-injected code based on the code injected after the attribute content and the code injected after the segmentation content.

[0088] Optionally, the code generation apparatus includes: A custom extraction module is used to extract custom information corresponding to the component to be transcoded from the design draft after the variable declaration is injected into the code after the text is injected; The merging module is used to merge the custom information into the code after the variable injection to obtain the final code.

[0089] Optionally, the code generation apparatus includes: A custom layout extraction module is used to extract the custom layout format from the custom information after the variable declaration is injected into the code after the text is injected. The component layout extraction module is used to extract the component layout format from the component description document of the matched code component; The format merging module is used to merge the custom format and the component format to obtain a merged format; The format merging and generation module is used to generate the final code based on the code after the variable injection and the merging format.

[0090] This invention provides a code generation device based on semantic tagging. The system performs semantic recognition on the design draft to determine component requirement information and extract the design intent from the design draft. Simultaneously, it parses the component documentation for each code component to obtain component meta-information, completing a semantic understanding of the code component library. Then, by matching the component requirement information with the meta-information, the design intent is associated with the code semantics. After matching, the code structure of the component elements is extracted, the text content of the corresponding component to be transcoded is extracted, and the text content is injected into the code structure to restore the static structure. Variable declarations are then injected into the text-injected code to support dynamic data binding, generating the final code. Thus, it automatically matches the component intent in the design draft with the semantic understanding of the code library components to accurately generate code based on the design draft.

[0091] For specific limitations regarding the semantic tag-based code generation device, please refer to the limitations of the semantic tag-based code generation method above, which will not be repeated here. Each module in the aforementioned semantic tag-based code generation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0092] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 7 As shown, the computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile and / or volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to communicate with external clients via a network connection. When the computer program is executed by the processor, it implements the functions or steps of a semantic markup-based code generation method on the server side.

[0093] In one embodiment, a computer device is provided, which may be a client, and its internal structure diagram may be as follows: Figure 8 As shown, the computer device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to communicate with an external server via a network connection. When the computer program is executed by the processor, it implements the functions or steps of a semantic markup-based code generation method on the client side. In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: Obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information in the design draft that represents the component to be transcoded; The component description document of each code component in the preset code component library is parsed to obtain the component meta information of the corresponding code component; The component requirement information is matched with the meta information of all code components to obtain the matching code components. The component description document of the matching code components is parsed to determine the component element corresponding to the component requirement information and extract the code structure of the component element. Extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the code after text injection; Extract the component description document of the matched code component to obtain variable declarations, inject the variable declarations into the text-injected code to obtain the variable-injected code, and generate the final code based on the variable-injected code.

[0094] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, the computer program performing the following steps when executed by a processor: Obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information in the design draft that represents the component to be transcoded; The component description document of each code component in the preset code component library is parsed to obtain the component meta information of the corresponding code component; The component requirement information is matched with the meta information of all code components to obtain the matching code components. The component description document of the matching code components is parsed to determine the component element corresponding to the component requirement information and extract the code structure of the component element. Extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the code after text injection; Extract the component description document of the matched code component to obtain variable declarations, inject the variable declarations into the text-injected code to obtain the variable-injected code, and generate the final code based on the variable-injected code.

[0095] It should be noted that the functions or steps that can be implemented by the computer-readable storage medium or computer device described above can be referred to the relevant descriptions on the server side and client side in the foregoing method embodiments. To avoid repetition, they will not be described one by one here.

[0096] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0097] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0098] It should be noted that any AI models, software tools, or components not belonging to this company appearing in the embodiments of this application are merely illustrative examples and do not represent actual use. All user personal information involved in the embodiments of this application has been authorized (with the knowledge and consent) by the relevant parties or has been fully authorized by all parties, and the executing entity may obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with relevant laws and regulations and do not violate public order and good morals.

[0099] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A code generation method based on semantic markup, characterized in that, include: Obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information in the design draft that represents the component to be transcoded; The component description document of each code component in the preset code component library is parsed to obtain the component meta information of the corresponding code component; The component requirement information is matched with the meta information of all code components to obtain the matching code components. The component description document of the matching code components is parsed to determine the component element corresponding to the component requirement information and extract the code structure of the component element. Extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the code after text injection; Extract the component description document of the matched code component to obtain variable declarations, inject the variable declarations into the text-injected code to obtain the variable-injected code, and generate the final code based on the variable-injected code.

2. The code generation method according to claim 1, characterized in that, The step of parsing the component description document of each code component in the preset code component library to obtain the component meta-information of the corresponding code component includes: Extract the component sub-file identifier that represents any component identifier and the corresponding sub-file content from the component specification document; Using the component sub-file identifier as the key and the sub-file content as the value, component meta-information containing the mapping relationship between the component sub-file identifier and the sub-file content is constructed based on the key and the value.

3. The code generation method according to claim 2, characterized in that, The step of matching the component requirement information with the meta-information of all code components to obtain the matched code components includes: Extract the attribute requirement information that represents the component attributes from the component requirement information, and match the key according to the attribute requirement information to obtain the matching key and the matching value corresponding to the matching key; Based on the matching key and the matching value, the matching code component is obtained.

4. The code generation method according to claim 1, characterized in that, The step of parsing the component description document of the matched code component to determine the component element corresponding to the component requirement information includes: Extract the composition table representing the component elements from the component description document of the matched code component; Based on the component requirement information, the composition table is matched to obtain the component elements corresponding to the component requirement information.

5. The code generation method according to claim 1, characterized in that, The step of extracting the text content corresponding to the component to be transcoded from the design draft, injecting the text content into the code structure, and obtaining the text-injected code includes: Extract the component configuration table representing the component configuration type from the component description document of the code component; Based on the component configuration table, determine the component configuration type of the component to be transcoded; If the component configuration type is property injection type, then extract the property content of the text content, inject the property content into the code structure, and obtain the code after property content injection; If the component configuration type is function processing type, then the preset processing function is used to segment the text content to obtain segmented content, and the segmented content is injected into the code structure to obtain the code after segmented content injection; Based on the code injected with the attribute content and the code injected with the segmented content, the code injected with the text is obtained.

6. The code generation method according to claim 1, characterized in that, After injecting the variable declaration into the code following the text injection, the code includes: Extract the custom information corresponding to the component to be transcoded from the design draft; The custom information is then incorporated into the code after variable injection to obtain the final code.

7. The code generation method according to claim 6, characterized in that, After injecting the variable declaration into the code following the text injection, the code further includes: Extract the custom layout format from the custom information; Extract the component layout format from the component documentation of the matched code component; The custom layout format and the component layout format are merged to obtain the merged format; Based on the code after variable injection and the merging format, the final code is generated.

8. A code generation device based on semantic markup, characterized in that, include: The semantic recognition module is used to obtain the design draft to be transcoded, perform semantic recognition on the design draft, and determine the component requirement information representing the component to be transcoded in the design draft; The metadata acquisition module is used to parse the component description document of each code component in the preset code component library to obtain the component metadata of the corresponding code component; The code structure extraction module is used to match the component requirement information with the meta information of all code components to obtain the matching code components, parse the component description document of the matching code components, determine the component elements corresponding to the component requirement information, and extract the code structure of the component elements. The code injection module is used to extract the text content corresponding to the component to be transcoded from the design draft, inject the text content into the code structure, and obtain the text-injected code. The code generation module is used to extract the component description documents of the matched code components, obtain variable declarations, inject the variable declarations into the text-injected code, obtain the variable-injected code, and generate the final code based on the variable-injected code.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the code generation method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the code generation method as described in any one of claims 1 to 7.

Images