Method and system for generating and updating front-end code

Abstract

According to one aspect of the present application, a method for generating and updating front-end code is provided, the method comprising: determining feature information of components in a front-end design file and determining a feature semantic tree based on the feature information, the feature information comprising visual feature information, semantic feature information and interaction feature information; inputting the feature semantic tree into a pre-trained model to obtain code of multiple framework types; creating a structured directory corresponding to code of a target framework type among the code of the multiple framework types and assigning the code of the target framework type to the structured directory to obtain structured code, optimizing and packaging the structured code to generate front-end code for deployment; and in response to an update instruction, determining a target update node in the feature semantic tree corresponding to the update instruction to update front-end code associated with the target update node in the front-end code according to the update instruction.

Description

Technical Field

[0001] This application relates to the field of computer technology, and more specifically to methods and systems for generating and updating front-end code, computer-readable storage media for implementing the above methods, and computer program products. Background Technology

[0002] With the rapid development of cloud computing technology, cloud platforms have formed an ecosystem containing dozens or even hundreds of cloud products, and the frequency of new product iterations and additions continues to increase. These cloud products generally adopt a front-end and back-end separation deployment model. The front-end console serves as the entry point for users to interact with back-end services, and the linkage with back-end interfaces is achieved through an API gateway. The development workload increases with the growth in the number of products.

[0003] Currently, the development of front-end consoles for cloud products mainly relies on manual processes, from interpreting front-end design files, coding components, configuring engineering processes, to deployment and debugging. This not only consumes a significant amount of front-end development resources but also easily leads to issues such as version inconsistencies and low adaptation efficiency due to manual operation, making it difficult to meet the rapid iteration needs of cloud platforms. Furthermore, while general development tools can generate some front-end code, front-end developers still need to invest considerable time in code organization, logic completion, and engineering configuration, severely restricting the iteration efficiency of cloud products. Summary of the Invention

[0004] To address or at least alleviate one or more of the above problems, the following technical solutions are provided.

[0005] According to a first aspect of this application, a method for generating and updating front-end code is provided, the method comprising the following steps: determining feature information of components in a front-end design file and determining a feature semantic tree based on the feature information, the feature information including visual feature information, semantic feature information, and interaction feature information; inputting the feature semantic tree into a pre-trained model to obtain code for multiple frame types; creating a structured directory corresponding to code for a target frame type among the multiple frame types and assigning the code for the target frame type to the structured directory to obtain structured code; optimizing and packaging the structured code to generate front-end code for deployment; and determining a target update node in the feature semantic tree corresponding to the update instruction in response to the update instruction, so as to update the front-end code associated with the target update node according to the update instruction.

[0006] According to an embodiment of this application, a method for generating and updating front-end code includes determining the feature information of components in a front-end design file by: determining the type and visual feature information of the components in the front-end design file based on the target detection results of the front-end design file using a target detection model; retrieving semantic feature information of the components that matches the type and visual feature information of the components from a component feature database based on the type and visual feature information of the components; and using a natural language processing model to determine the front-end label of the components and the interaction feature information corresponding to the front-end label based on the visual feature information and the semantic feature information of the components.

[0007] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein the visual feature information includes visual attributes and layout attributes, and the layout attributes are determined based on the bounding box coordinates of the component in the target detection result.

[0008] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein the component feature database includes multiple types of components and visual feature information, semantic feature information and interaction feature information of each type of component.

[0009] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein the plurality of framework types include React framework type, Vue framework type and HTML framework type, and the feature semantic tree is a feature semantic tree in JSON format.

[0010] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein inputting the feature semantic tree into a pre-trained model to obtain code for multiple frame types includes using the pre-trained model to: generate a structural layer of code for the multiple frame types based on labels and child nodes in the feature semantic tree; generate a style layer of code for the multiple frame types based on style fields in the feature semantic tree; and generate a logical layer of code for the multiple frame types based on event fields in the feature semantic tree.

[0011] According to one embodiment or any of the above embodiments of this application, the method for generating and updating front-end code, wherein the structured directory includes a source code area subdirectory, a static resource area subdirectory, a dependency configuration area subdirectory, and a packaging configuration area subdirectory, and allocating the code of the target framework type to the structured directory includes: allocating the source code to be compiled in the code of the target framework type to the source code area subdirectory; allocating the static resources in the code of the target framework type to the static resource area subdirectory; allocating the dependency configuration data in the code of the target framework type to the dependency configuration area subdirectory; and allocating the packaging configuration data in the code of the target framework type to the packaging configuration area subdirectory.

[0012] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein optimizing and packaging the structured code to generate front-end code for deployment includes: performing compatibility processing on the structured code to generate optimized structured code suitable for multiple types of browsers; and performing code compression and static resource processing on the optimized structured code to generate front-end code for deployment.

[0013] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein determining a target update node in the feature semantic tree corresponding to the update instruction in response to the update instruction includes: determining a target update component indicated by the update instruction; and determining a child node in the feature semantic tree corresponding to the target update component as the target update node.

[0014] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein updating the front-end code associated with the target update node in the front-end code according to the update instruction includes: determining the code path and code position corresponding to the target update node in a code mapping table; determining the target update field of the target update node in the feature semantic tree corresponding to the update instruction; and locating the front-end code associated with the target update node in the front-end code through the code path and the code position, and updating the front-end code associated with the target update node according to the target update field.

[0015] The method for generating and updating front-end code according to one embodiment or any of the above embodiments of this application, wherein the code mapping table is used to establish the mapping relationship between child nodes in the feature semantic tree and code paths and code locations.

[0016] According to a second aspect of this application, a system for generating and updating front-end code is provided, the data association model including a first sub-model and a second sub-model, the system comprising: a memory; a processor coupled to the memory; and a computer program stored on the memory and running on the processor, the execution of the computer program causing the following operations: determining feature information of components in a front-end design file and determining a feature semantic tree based on the feature information, the feature information including visual feature information, semantic feature information, and interaction feature information; inputting the feature semantic tree into a pre-trained model to obtain code for multiple frame types; creating a structured directory corresponding to code for a target frame type among the multiple frame types and assigning the code for the target frame type to the structured directory to obtain structured code; optimizing and packaging the structured code to generate front-end code for deployment; and determining a target update node in the feature semantic tree corresponding to the update instruction in response to the update instruction, so as to update the front-end code associated with the target update node according to the update instruction.

[0017] According to a third aspect of this application, a computer-readable storage medium is provided, comprising instructions that, when executed, perform the steps of the method for generating and updating front-end code according to a first aspect of this application.

[0018] According to a fourth aspect of this application, a computer program product is provided, the computer program product including instructions that, when executed by a processor, implement the steps of the method for generating and updating front-end code according to a first aspect of this application.

[0019] The scheme for generating and updating front-end code according to one or more embodiments of this application constructs a feature semantic tree by determining the feature information of components in the front-end design file, inputs the feature semantic tree into a pre-trained model to obtain code for multiple framework types, and generates front-end code for deployment based on the code for multiple framework types. This achieves fully automated generation from the front-end design file to the front-end code for deployment, significantly reducing the development cost of the cloud product front-end console, improving development efficiency, and thus meeting the needs of rapid iteration on cloud platforms. Furthermore, the scheme for generating and updating front-end code according to one or more embodiments of this application can determine the target update node in the feature semantic tree corresponding to the update instruction and update the front-end code associated with the target update node according to the update instruction, eliminating the need for manual code location. This effectively reduces iterative optimization costs and improves iterative optimization efficiency. Attached Figure Description

[0020] The above and / or other aspects and advantages of this application will become clearer and more readily understood from the following description taken in conjunction with the accompanying drawings, in which the same or similar elements are denoted by the same reference numerals. The drawings include: Figure 1 A flowchart illustrating a method for generating and updating front-end code according to one or more embodiments of this application is shown.

[0021] Figure 2 A block diagram of an apparatus for generating and updating front-end code according to one or more embodiments of this application is shown.

[0022] Figure 3 A block diagram of a system for generating and updating front-end code according to one or more embodiments of this application is shown. Detailed Implementation

[0023] The present application will now be described more fully with reference to the accompanying drawings, which illustrate exemplary embodiments thereof. However, the present application may be implemented in various forms and should not be construed as being limited to the embodiments given herein. The foregoing embodiments are intended to make the disclosure herein complete and thorough, so as to more fully convey the scope of protection of the present application to those skilled in the art.

[0024] In this specification, terms such as “comprising” and “including” indicate that, in addition to having the units and steps that are directly and explicitly stated in the specification and claims, the technical solution of this application does not exclude the presence of other units and steps that are not directly or explicitly stated.

[0025] Unless otherwise specified, terms such as “first” and “second” do not indicate the order of units in terms of time, space, size, etc., but are merely used to distinguish between units.

[0026] In the following, various exemplary embodiments according to this application will be described in detail with reference to the accompanying drawings.

[0027] Figure 1 A flowchart illustrating a method for generating and updating front-end code according to one or more embodiments of this application is shown.

[0028] like Figure 1 As shown, in step S101, the feature information of the components in the front-end design file is determined and a feature semantic tree is determined based on the feature information. The feature information includes visual feature information, semantic feature information and interaction feature information.

[0029] Optionally, in step S101, the type and visual feature information of components in the front-end design file can be determined based on the target detection results of the target detection model. Semantic feature information of components matching the type and visual feature information can be retrieved from the component feature database. Furthermore, a natural language processing model can be used to determine the front-end label of the component and the corresponding interaction feature information based on the visual and semantic feature information of the component. It should be noted that the front-end design file can be understood as the visual design drawing of each page of the front-end console of a cloud product, which can be drawn by a front-end UI designer using tools such as Figma, Sketch, and Photoshop.

[0030] In one embodiment, visual feature information may include visual attributes and layout attributes, whereby the layout attributes can be determined based on the bounding box coordinates of the component in the object detection results. In one embodiment, the object detection model may be implemented as a YOLOv8 model, which can perform object detection on the front-end design file to generate object detection results. The object detection results may include the component type (e.g., Button, Input, and its confidence score of 0.96), bounding box coordinates (e.g., x1, y1, x2, y2), and visual attributes (e.g., color #165DFF, rounded corners of 8px, text content "Submit", etc.). For example, the target detection result can be { "component_type": "button", "confidence": 0.96,"bbox": {"x1": 300, "y1": 400, "x2": 420, "y2":436}, "visual_attrs": { "color":"#165DFF", "border_radius": 8, "text": "Submit", "font_size": 14}}. In one embodiment, the horizontal and vertical spacing between components can be calculated based on the bounding box coordinates of the components. If the spacing variance is less than 5px, it is determined to be an aligned layout; if the components are neatly arranged in rows and columns with consistent row height and column width, it is determined to be a Grid layout; otherwise, it is determined to be a Flex layout. In one embodiment, before performing target detection on the front-end design file, preprocessing operations such as grayscale conversion, noise reduction (e.g., Gaussian filtering), and size normalization (e.g., scaling to 1920×1080 pixels) can be performed on the front-end design file, and then the preprocessed front-end design file is input into the target detection model.

[0031] In one embodiment, the component feature database may include multiple types of components and visual feature information, semantic feature information, and interaction feature information for each type of component. For example, the multiple types of components may include buttons, input boxes, selection boxes, icons, tooltips, forms, dialog boxes, cards, layouts (rows / columns), tables, etc.

[0032] For example, in the component feature database, the visual feature information of a component may include the component's size range, color, style parameters, etc., as shown in Table 1 below: Table 1 Component name Size range (width × height) Color (Normal / Hover / Disabled) Rounded corners (px) Text styles (size / weight) Button auto×24px ~ auto×48px #165DFF / #0E42D2 / #E5E6EB 4 14px / 500 For example, in the component feature database, the semantic feature information of a component may include text association rules (e.g., "submit" corresponds to type="submit"), scene tags, framework tags, etc., as shown in Table 2 below: Table 2 Component name Text-Function Mapping Scene tags Framework tags (React / Vue) Button {"Submit": "submit", "Cancel": "close"} ["form", "modal", "primary"] <button type="primary">< / button> / <el-button type="primary" / > For example, in the component feature database, the interactive feature information of a component may include the following: which components the Button component is associated with, such as input boxes and forms, where related components with a threshold <= 60px are considered associated components, and when clicked, form validation and API request initiation are performed, as shown in Table 3 below: Table 3 Component name Related components Spacing threshold (px) Event templates (onClick / onChange) Button ["Input", "Form"] 60 () =>{ form.validate().then(() =>api.submit());} In one embodiment, semantic feature information that is most similar to the detected component type "Button" and visual feature information can be retrieved from the component feature database based on the detected component type "Button" and visual feature information. For example, multiple records with the component name "Button" can be filtered from the component feature database by component type "Button", the similarity between the detected visual feature information and the visual feature information in each of the filtered records with the component name "Button" can be calculated, and the semantic feature information corresponding to the record with the highest similarity to the component name "Button" can be selected as the most similar semantic feature information.

[0033] In one embodiment, the natural language processing model can be implemented as a Transformer model, which determines the front-end tags of components and the corresponding interaction features based on the visual and semantic features of the components. In another embodiment, the feature information of components in the front-end design file can be converted into a JSON-formatted semantic tree. This JSON-formatted semantic tree is compatible with the front-end technology stack; for example, JavaScript natively supports JSON, and it is clearly structured and easily extensible. For example, the JSON-formatted semantic tree may include a root node (e.g., page container), child nodes (e.g., components), and attribute nodes (e.g., layout, style, events), as shown in the example structure below: { "node_id": "root-1", / / Unique identifier for the root node "tag": "div", / / Root node tag "type": "root", / / Node type: root node / / Root node's attribute nodes (layout, style) "layout": { / / Layout attribute node "type": "flex", "direction": "column", "padding": "20px" }, "style": { / / Style attribute node "background": "#FFFFFF", width: 100% }, / / Child nodes (components contained in the root node) "children": [ / / Array of child nodes] { "node_id": "form-1", / / Unique identifier for child node 1 "tag": "form", / / Child node tag "type": "container", / / Node type "layout": { / / Layout attribute node "type": "grid", "columns": 2 }, "event": { / / Event property node "onSubmit": "handleSubmit" }, / / Child nodes of child node 1 (nested components) "children": [ { "node_id": "input-1", / / Unique identifier for child nodes 1.1 "tag": "input", / / Child node tag "type": "component", / / Node type: basic component "style": { / / Style attribute node "height": "40px", border: 1px solid #E5E6EB }, "props": { / / Component property node "name": "username", "placeholder": "Please enter your username" }, "event": { / / Event property node "onChange": "handleInputChange" } } ] } ] } By constructing a 3D component feature database that integrates visual features, semantic features, and interaction features, and by collaboratively identifying the feature information of components in the front-end design file that includes visual feature information, semantic feature information, and interaction feature information through object detection model and natural language processing model, the front-end design file can be converted into a feature semantic tree with layout logic and interaction semantics, ensuring that the subsequently generated front-end code has front-end business logic relevance, without the need for manual secondary annotation of component semantics and interaction rules.

[0034] In step S103, the feature semantic tree is input into the pre-trained model to obtain code for multiple frame types.

[0035] Optionally, in step S103, a pre-trained model can be used to generate a structural layer of code for multiple frame types based on tags and child nodes in the feature semantic tree, a style layer of code for multiple frame types based on style fields in the feature semantic tree, and a logic layer of code for multiple frame types based on event fields in the feature semantic tree. In one embodiment, during structural layer generation, the tag and child nodes of the semantic tree can be parsed to output an HTML / JSX skeleton, as shown in the following example: tag in the semantic tree: "button" → <button>< / button> (HTML); The semantic tree contains multiple nodes for the children group → nested structure (e.g., children). <button>< / button> In one embodiment, during style layer generation, style code can be generated based on the `style` field, as shown in the following example: CSS module mode: generate `style.module.css` with the content `.button { background: #165DFF; ...}`. In another embodiment, during logic layer generation, interactive code (such as the `submitForm` function containing null value validation and API requests) can be generated by calling a business logic template based on the `event` field. In one embodiment, multiple framework types can include React, Vue, and HTML framework types. This multi-framework adaptation capability supports the automatic generation of code for various framework types based on user needs, adapting to scenarios where multiple technology stacks coexist on cloud platforms.

[0036] In one embodiment, a pre-built front-end semantic tree and multi-framework code can be used as a training dataset to train a code generation model (e.g., a CodeLlama model, such as CodeLlama-34B) to obtain a pre-trained model. In one embodiment, the pre-trained model can include a trained code generation model and a front-end constraint decoder. The front-end constraint decoder can set CSS priority rules (e.g., !important > inline styles), React Hook usage guidelines (e.g., useState at the top level of functional components), etc., so that the code generated by the trained code generation model automatically meets front-end constraints such as CSS priority rules and React Hook usage guidelines, without requiring manual secondary correction. In one embodiment, the ESLint tool can be used to perform syntax validation on the generated code for multiple framework types, correcting errors through framework-specific rules (e.g., uppercase validation of React component names), ensuring that the generated code conforms to framework specifications. By generating the structural, style, and logical layers of code in stages based on the semantic tree, and embedding the front-end constraint decoder, framework adaptation and logical integrity are ensured, avoiding incomplete logic in the generated code.

[0037] In step S105, a structured directory corresponding to the code of the target frame type among multiple frame types is created, and the code of the target frame type is assigned to the structured directory to obtain structured code. The structured code is then optimized and packaged to generate front-end code for deployment.

[0038] Optionally, in step S105, based on the framework type selected by the user, the code of the target framework type can be selected from the code of multiple framework types, and a corresponding structured directory can be created. The structured directory may include a source code subdirectory, a static resource subdirectory, a dependency configuration subdirectory, and a packaging configuration subdirectory. The source code to be compiled in the target framework type's code can be assigned to the source code subdirectory, the static resources in the target framework type's code can be assigned to the static resource subdirectory, the dependency configuration data in the target framework type's code can be assigned to the dependency configuration subdirectory, and the packaging configuration data in the target framework type's code can be assigned to the packaging configuration subdirectory. Taking the React framework type as an example, an example structured directory could be as follows: project / ├── src / │ ├── components / # Component files │ ├── hooks / # Custom Hooks │ ├── App.jsx # Root component │ └── index.js # Entry file ├── public / # Static Resources ├── package.json # Dependency configuration └── vite.config.js # Packaging configuration In one embodiment, dependencies can be identified by matching import statements in structured code using regular expressions (e.g., import { Button} from 'antd'), extracting the dependency name and version, automatically adding dependency declarations to package.json (e.g., "antd": "^5.8.0"), and then executing npm install to complete the installation.

[0039] Optionally, in step S105, the structured code can undergo compatibility processing to generate optimized structured code suitable for various browser types, and the optimized structured code can be compressed and statically processed to generate front-end code for deployment. In the compatibility processing, the PostCSS plugin autoprefixer can be used to automatically add browser prefixes to CSS properties based on the target browser list (browserslist). For example, configuring browserslist:["last 2 versions", "ie>= 11"] will automatically add prefixes to CSS properties (such as border-radius → -webkit-border-radius). Here, browserslist can define the range of browsers the project needs to be compatible with (e.g., ie>= 11), serving as input to the autoprefixer plugin. This compatibility processing enables compatibility of CSS properties across different browsers (e.g., Chrome, IE, Safari) without manual coding. In one embodiment, the Vite build tool can be used to compress and statically process the optimized structured code, generating a dist directory and outputting directly deployable front-end code. By automatically creating a structured directory for the target framework type in code across multiple framework types, resolving and installing dependencies, integrating compatibility fixes and packaging optimizations, and outputting front-end code that can be directly deployed, it fills the gap between code generation and engineering.

[0040] In step S107, in response to the update instruction, a target update node in the feature semantic tree corresponding to the update instruction is determined, so as to update the front-end code associated with the target update node in the front-end code according to the update instruction.

[0041] Optionally, in step S107, the target update component indicated by the update instruction can be determined; the child node corresponding to the target update component can be determined as the target update node in the feature semantic tree; the code path and code location corresponding to the target update node can be determined in the code mapping table; the target update field of the target update node in the feature semantic tree corresponding to the update instruction can be determined; and the front-end code associated with the target update node in the front-end code can be located by the code path and code location, and the front-end code associated with the target update node can be updated according to the target update field. In one embodiment, the code mapping table can be used to establish the mapping relationship between the child nodes in the feature semantic tree and the code path and code location. For example, the code mapping table can be as shown in Table 4 below: Table 4 field name meaning Example value node_id The unique identifier of a semantic tree child node (e.g., "btn-1") "btn-1" file_path Corresponding code file path "src / components / Button / index.jsx" code_start The starting line number of the code snippet in the file 15 code_end The end line number of the code snippet in the file 20 In one embodiment, the update instruction can be a natural language instruction input by the user (e.g., "change the background color of the submit button to red"). The target update component "submit button" indicated by the update instruction can be determined through natural language parsing. The child node btn-1 corresponding to the target update component "submit button" is determined in the feature semantic tree as the target update node. The attribute "background color" corresponds to the style.background of the semantic tree btn-1 node, and the value "red" corresponds to #FF0000. For example, the code path "src / components / Button / index.jsx" and the code position line 15-20 corresponding to the btn-1 node can be determined in the code mapping table of Table 4 above. The target update field is determined as style.background=''#FF0000''. Thus, the front-end code associated with the btn-1 node is located in the front-end code through the code path and code position, and the front-end code associated with the btn-1 node is updated according to the target update field style.background=''#FF0000''. Through the above operations, users can update and modify corresponding code snippets in the front-end code using natural language commands, without having to manually locate the code, which can effectively reduce the cost of iterative optimization and improve the efficiency of iterative optimization.

[0042] The method for generating and updating front-end code according to one or more embodiments of this application constructs a feature semantic tree by determining the feature information of components in the front-end design file, inputs the feature semantic tree into a pre-trained model to obtain code for multiple framework types, and generates front-end code for deployment based on the code for multiple framework types. This achieves fully automated generation of front-end code for deployment, from front-end design files to API gateways that can be connected, support multiple browsers, and contain complete business logic. This significantly reduces the development cost of the front-end console for cloud products, improves development efficiency, and meets the needs of rapid iteration of cloud platforms.

[0043] Figure 2 A block diagram of an apparatus for generating and updating front-end code according to one or more embodiments of this application is shown.

[0044] like Figure 2 As shown, the apparatus 200 for generating and updating front-end code includes a semantic parsing unit 210, a code generation unit 220, an engineering construction unit 230, and a code updating unit 240.

[0045] The semantic parsing unit 210 is configured to determine the feature information of components in the front-end design file and determine a feature semantic tree based on the feature information. The feature information includes visual feature information, semantic feature information, and interaction feature information. Optionally, the semantic parsing unit 210 can determine the type and visual feature information of components in the front-end design file based on the target detection results of the target detection model, retrieve the semantic feature information of components that match the type and visual feature information of components in the component feature database according to the type and visual feature information of the components, determine the front-end tags of the components and the corresponding interaction feature information based on the visual feature information and semantic feature information of the components using a natural language processing model, and determine a JSON-formatted feature semantic tree based on the visual feature information, semantic feature information, and interaction feature information.

[0046] The code generation unit 220 is configured to input the feature semantic tree into the pre-trained model to obtain code for multiple framework types, which may include React framework type, Vue framework type and HTML framework type.

[0047] The project building unit 230 is configured to create a structured directory for the code of the target frame type among multiple frame types, and to assign the code of the target frame type to the created structured directory to obtain structured code. The structured code is then optimized and packaged to generate front-end code for deployment.

[0048] The code update unit 240 is configured to determine a target update node in the feature semantic tree corresponding to the update instruction in response to the update instruction, so as to update the front-end code associated with the target update node in the front-end code according to the update instruction. Optionally, the code update unit 240 may determine the target update component indicated by the update instruction, determine the child node corresponding to the target update component as the target update node in the feature semantic tree, determine the code path and code position corresponding to the target update node in the code mapping table, determine the target update field of the target update node in the feature semantic tree corresponding to the update instruction, and locate the front-end code associated with the target update node in the front-end code through the code path and code position and update the front-end code associated with the target update node according to the target update field.

[0049] Figure 3 A block diagram of a system for generating and updating front-end code according to one or more embodiments of this application is shown.

[0050] like Figure 3As shown, the system 300 for generating and updating front-end code includes a memory 310, a processor 320, and a computer program 330 stored on the memory 310 and executable on the processor 320. The processor 320 executes the computer program 330 to implement the method for generating and updating front-end code according to one aspect of this application.

[0051] This application can also be implemented as a computer-readable storage medium including instructions that, when executed, perform a method for generating and updating front-end code according to one aspect of this application.

[0052] Where applicable, the various embodiments provided in this application may be implemented using hardware, software, or a combination of hardware and software. Furthermore, where applicable, without departing from the scope of this application, the various hardware and / or software components described herein may be combined into composite components comprising software, hardware, and / or both. Where applicable, without departing from the scope of this application, the various hardware and / or software components described herein may be divided into sub-components comprising software, hardware, or both. Additionally, where applicable, it is contemplated that software components may be implemented as hardware components, and vice versa.

[0053] The software (such as program code and / or data) according to this application can be stored on one or more computer storage media. It is also contemplated that the software identified herein can be implemented using one or more networked and / or otherwise general-purpose or special-purpose computers and / or systems. Where applicable, the order of the various steps described herein can be changed, combined into compound steps, and / or divided into sub-steps to provide the features described herein.

[0054] The embodiments and examples presented herein are provided to best illustrate embodiments of this application and its particular applications, thereby enabling those skilled in the art to implement and use this application. However, those skilled in the art will understand that the above description and examples are provided for ease of illustration and example only. The descriptions presented are not intended to cover all aspects of this application or to limit this application to the precise forms disclosed.

Claims

1. A method for generating and updating front-end code, characterized in that, The method includes the following steps: The feature information of components in the front-end design file is determined and a feature semantic tree is determined based on the feature information, wherein the feature information includes visual feature information, semantic feature information and interaction feature information; The feature semantic tree is input into a pre-trained model to obtain code for multiple frame types; Create a structured directory corresponding to the code of the target framework type among the multiple framework types, and assign the code of the target framework type to the structured directory to obtain structured code. Optimize and package the structured code to generate front-end code for deployment. as well as In response to an update instruction, a target update node in the feature semantic tree corresponding to the update instruction is determined, so as to update the front-end code associated with the target update node in the front-end code according to the update instruction.

2. The method according to claim 1, wherein determining the feature information of components in the front-end design file includes: Based on the target detection results of the target detection model, the type and visual feature information of the components in the front-end design file are determined; Based on the type and visual feature information of the component, retrieve the semantic feature information of the component that matches the type and visual feature information of the component from the component feature database; as well as The front-end label of the component and the interaction feature information corresponding to the front-end label are determined using a natural language processing model based on the visual feature information and the semantic feature information of the component.

3. The method according to claim 2, wherein the visual feature information includes visual attributes and layout attributes, and the layout attributes are determined based on the bounding box coordinates of the component in the target detection result.

4. The method according to claim 2, wherein the component feature database includes multiple types of components and visual feature information, semantic feature information and interaction feature information of each type of component.

5. The method according to claim 1, wherein the plurality of framework types includes React framework type, Vue framework type and HTML framework type, and the feature semantic tree is a feature semantic tree in JSON format.

6. The method of claim 1, wherein inputting the feature semantic tree into a pre-trained model to obtain multiple frame types includes utilizing the pre-trained model: The structural layer of code for the multiple framework types is generated based on the tags and child nodes in the feature semantic tree; A style layer for the code of the multiple frame types is generated based on the style fields in the feature semantic tree; and The logical layer that generates the code for the multiple framework types based on the event fields in the feature semantic tree.

7. The method according to claim 1, wherein the structured directory includes a source code subdirectory, a static resource subdirectory, a dependency configuration subdirectory, and a packaging configuration subdirectory, and allocating the code of the target framework type to the structured directory includes: The source code to be compiled in the target framework type is assigned to the subdirectory of the source code area; Assign static resources from the code of the target framework type to the subdirectory of the static resource area; Assign the dependency configuration data in the code of the target framework type to the subdirectory of the dependency configuration area; as well as The packaging configuration data in the code of the target framework type is allocated to the packaging configuration area subdirectory.

8. The method of claim 1, wherein optimizing and packaging the structured code to generate front-end code for deployment comprises: The structured code is subjected to compatibility processing to generate optimized structured code suitable for various types of browsers; as well as The optimized structured code is then compressed and static resources are processed to generate front-end code for deployment.

9. The method of claim 1, wherein determining the target update node in the feature semantic tree corresponding to the update instruction in response to the update instruction comprises: Determine the target update component indicated by the update instruction; as well as In the feature semantic tree, the child node corresponding to the target update component is determined as the target update node.

10. The method of claim 1, wherein updating the front-end code associated with the target update node in the front-end code according to the update instruction comprises: Determine the code path and code location corresponding to the target update node in the code mapping table; Determine the target update field of the target update node in the feature semantic tree corresponding to the update instruction; as well as The front-end code associated with the target update node is located using the code path and the code location, and the front-end code associated with the target update node is updated according to the target update field.

11. The method according to claim 10, wherein the code mapping table is used to establish a mapping relationship between child nodes in the feature semantic tree and code paths and code locations.

12. A system for generating and updating front-end code, characterized in that, The system includes: Memory; A processor coupled to the memory; and A computer program stored in the memory and running on the processor, the execution of which causes the following operations: The feature information of components in the front-end design file is determined and a feature semantic tree is determined based on the feature information, wherein the feature information includes visual feature information, semantic feature information and interaction feature information; The feature semantic tree is input into a pre-trained model to obtain code for multiple frame types; Create a structured directory corresponding to the code of the target framework type among the multiple framework types, and assign the code of the target framework type to the structured directory to obtain structured code; optimize and package the structured code to generate front-end code for deployment; and In response to an update instruction, a target update node in the feature semantic tree corresponding to the update instruction is determined, so as to update the front-end code associated with the target update node in the front-end code according to the update instruction.

13. The system of claim 12, wherein the execution of the computer program results in determining characteristic information of components in the front-end design file, including: Based on the target detection results of the target detection model, the type and visual feature information of the components in the front-end design file are determined; Based on the type and visual feature information of the component, retrieve the semantic feature information of the component that matches the type and visual feature information of the component from the component feature database; as well as The front-end label of the component and the interaction feature information corresponding to the front-end label are determined using a natural language processing model based on the visual feature information and the semantic feature information of the component.

14. The system of claim 13, wherein the visual feature information includes visual attributes and layout attributes, the layout attributes being determined based on the bounding box coordinates of the component in the target detection result.

15. The system according to claim 13, wherein the component feature database includes multiple types of components and visual feature information, semantic feature information and interaction feature information of each type of component.

16. The system according to claim 12, wherein the plurality of framework types includes a React framework type, a Vue framework type, and an HTML framework type, and the feature semantic tree is a feature semantic tree in JSON format.

17. The system of claim 12, wherein the execution of the computer program causes code that inputs the feature semantic tree into a pre-trained model to obtain multiple frame types to utilize the pre-trained model: The structural layer of code for the multiple framework types is generated based on the tags and child nodes in the feature semantic tree; A style layer for the code of the multiple frame types is generated based on the style fields in the feature semantic tree; and The logical layer that generates the code for the multiple framework types based on the event fields in the feature semantic tree.

18. The system of claim 12, wherein the structured directory includes a source code subdirectory, a static resource subdirectory, a dependency configuration subdirectory, and a packaging configuration subdirectory, and the execution of the computer program causing the code of the target framework type to be allocated to the structured directory includes: The source code to be compiled in the target framework type is assigned to the subdirectory of the source code area; Assign static resources from the code of the target framework type to the subdirectory of the static resource area; Assign the dependency configuration data in the code of the target framework type to the subdirectory of the dependency configuration area; as well as The packaging configuration data in the code of the target framework type is allocated to the packaging configuration area subdirectory.

19. The system of claim 12, wherein the execution of the computer program causes the structured code to be optimized and packaged to generate front-end code for deployment, comprising: The structured code is subjected to compatibility processing to generate optimized structured code suitable for various types of browsers; as well as The optimized structured code is then compressed and static resources are processed to generate front-end code for deployment.

20. The system of claim 12, wherein execution of the computer program causes determination of a target update node in the feature semantic tree corresponding to an update instruction in response to the update instruction, comprising: Determine the target update component indicated by the update instruction; as well as In the feature semantic tree, the child node corresponding to the target update component is determined as the target update node.

21. The system of claim 12, wherein the execution of the computer program causes the front-end code associated with the target update node in the front-end code to be updated according to the update instruction, comprising: Determine the code path and code location corresponding to the target update node in the code mapping table; Determine the target update field of the target update node in the feature semantic tree corresponding to the update instruction; as well as The front-end code associated with the target update node is located using the code path and the code location, and the front-end code associated with the target update node is updated according to the target update field.

22. The system according to claim 21, wherein the code mapping table is used to establish a mapping relationship between child nodes in the feature semantic tree and code paths and code locations.

23. A computer-readable storage medium, characterized in that, The computer storage medium includes instructions that, when executed, perform the method for generating and updating front-end code according to any one of claims 1-11.

24. A computer program product, characterized in that, The computer program product includes instructions that, when executed by a processor, implement the method for generating and updating front-end code according to any one of claims 1-11.

Images