Front-end code generation method, electronic device, storage medium and program product

Abstract

The application relates to the technical field of artificial intelligence, and discloses a front-end code generation method, an electronic device, a storage medium and a program product. The method comprises the following steps: obtaining interaction design data and exclusive dependent resources of a target project; generating original front-end code of the target project by using a preset code generation model according to the interaction design data and the exclusive dependent resources; configuring exclusive dependent resources for a target browser, and loading the original front-end code into the target browser; obtaining a rendering result of the target browser by using an interaction protocol supported by the target browser; verifying the rendering result according to the interaction design data, and generating a verification result containing error information; and optimizing the original front-end code by using a preset code optimization model according to the verification result, so as to obtain target front-end code of the target project. The application can guarantee the accuracy of the finally generated target front-end code, and can also reduce the cost of manual code modification.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, specifically to methods for generating front-end code, electronic devices, storage media, and program products. Background Technology

[0002] With the development of artificial intelligence technology, AI code generation technology has been widely applied in the software development field, especially in front-end development. AI can quickly generate demo-level front-end code based on interaction design data or natural language requirements, significantly improving development efficiency. The core requirement of front-end development is to achieve "design and implementation consistency." Production-grade front-end code must strictly adapt to the project's custom component libraries, public method sets, and style constraint rules.

[0003] However, current AI code generation technology is difficult to adapt to project-specific custom component libraries, resulting in low accuracy of generated code and difficulty in obtaining production-grade front-end code that can be directly deployed to the online environment. Summary of the Invention

[0004] In view of this, this application provides a method for generating front-end code, an electronic device, a storage medium, and a program product to solve the problem of difficulty in generating production-grade front-end code.

[0005] Firstly, this application provides a method for generating front-end code, the method comprising: Obtain the interaction design data and specific dependency resources of the target project; Based on the interaction design data and the dedicated dependency resources, the original front-end code of the target project is generated using a preset code generation model; the original front-end code includes debugging markers set for each element; Configure the dedicated dependency resources for the target browser, and load the original front-end code into the target browser; The rendering result of the target browser is obtained through the interaction protocol supported by the target browser; The rendering result is validated based on the interaction design data to generate a validation result containing error information; the rendering result includes the actual element information of each element and / or rendering error logs. Based on the verification results, the original front-end code is optimized using a preset code optimization model to obtain the target front-end code for the target project. The step of validating the rendering result based on the interaction design data and generating a validation result containing error information includes: Identify the target element to be verified in the original front-end code; Based on the debugging flags of the target element, query the rendering results to determine the actual element information of the target element and / or the target error entries related to the target element in the rendering error log; If the rendering result includes actual element information, the target element information of the target element is determined based on the interaction design data; and error information of the target element is generated based on the difference between the target element information and the actual element information of the target element. If the rendering result includes a rendering error log, the error information of the target element is determined based on the target error entries associated with the target element.

[0006] Secondly, this application provides a front-end code generation apparatus, the apparatus comprising: The acquisition module is used to acquire the interaction design data and specific dependency resources of the target project. The code generation module is used to generate the original front-end code of the target project based on the interaction design data and the dedicated dependency resources using a preset code generation model; the original front-end code includes debugging markers set for each element; The rendering module is used to configure the dedicated dependency resources for the target browser and load the original front-end code into the target browser; and to obtain the rendering result of the target browser through the interaction protocol supported by the target browser; the rendering result includes the actual element information of each element and / or rendering error logs; The processing module is used to verify the rendering result based on the interaction design data and generate a verification result containing error information. The code optimization module is used to optimize the original front-end code based on the verification results using a preset code optimization model to obtain the target front-end code for the target project. The step of validating the rendering result based on the interaction design data and generating a validation result containing error information includes: Identify the target element to be verified in the original front-end code; Based on the debugging flags of the target element, query the rendering results to determine the actual element information of the target element and / or the target error entries related to the target element in the rendering error log; If the rendering result includes actual element information, the target element information of the target element is determined based on the interaction design data; and error information of the target element is generated based on the difference between the target element information and the actual element information of the target element. If the rendering result includes a rendering error log, the error information of the target element is determined based on the target error entries associated with the target element.

[0007] Thirdly, this application provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the front-end code generation method of the first aspect or any corresponding embodiment described above.

[0008] Fourthly, this application provides a computer-readable storage medium storing computer instructions for causing a computer to execute the front-end code generation method of the first aspect or any corresponding embodiment described above.

[0009] Fifthly, this application provides a computer program product, including computer instructions for causing a computer to execute the front-end code generation method of the first aspect or any corresponding embodiment described above.

[0010] The front-end code generation method provided in this application generates the original front-end code for the target project. Then, it uses a target browser that supports the interaction protocol to render the original front-end code. The rendering effect of the front-end code can be verified using the interaction design data of the target project, thereby automatically identifying and correcting errors. This achieves a closed-loop technology of "information input - code generation - visual feedback - autonomous optimization," ensuring the accuracy of the final generated front-end code and reducing the cost of manual code modification. It facilitates the direct generation of production-grade front-end code, significantly improving development efficiency. Furthermore, by generating code based on the target project's dedicated dependency resources, it can integrate any custom component library and public method set, adapting to project needs and exhibiting strong compatibility. This effectively solves problems such as component generalization and incompatibility with projects in related solutions. Attached Figure Description

[0011] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0012] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this application; Figure 2 This is a schematic diagram of the first method for generating front-end code according to an embodiment of this application; Figure 3 This is a schematic diagram of a second method for generating front-end code according to an embodiment of this application; Figure 4 This is a schematic diagram of a third method for generating front-end code according to an embodiment of this application; Figure 5 This is a structural block diagram of a front-end code generation apparatus according to an embodiment of this application; Figure 6 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0014] It is understood that before using the technical solutions disclosed in the various embodiments of this application, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this application in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.

[0015] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.

[0016] Before providing a detailed description of the embodiments of this application, some of the terms and concepts involved in the embodiments of this application will be explained. These explanations are intended to make the embodiments of this application easier to understand and should not be considered as limiting the scope of protection claimed in this application.

[0017] (1) AI (Artificial Intelligence) refers to a computer system that has the ability to simulate human thinking and decision-making. In this embodiment, it is used for the generation and optimization of front-end code.

[0018] (2) LLM (Large Language Model) is an artificial intelligence model with powerful natural language processing and code generation capabilities. In this embodiment, it is the core engine for code generation.

[0019] (3) SSIM (Structural Similarity Index Measure), an algorithm for measuring the similarity between two images. In this embodiment, it is used to compare the difference between the UI target and the actual rendering effect.

[0020] (4) MCP (Machine Control Protocol), a machine interaction protocol provided by Chrome DevTools, supports external programs to call and control the browser's debugging functions.

[0021] (5) DOM (Document Object Model) is a programming interface used to represent the structure of an HTML document. In this embodiment, it is obtained through MCP to analyze the page layout.

[0022] (6) CSS (Cascading Style Sheets) is a language used to define the styles of HTML elements, and is one of the optimization objects in this embodiment.

[0023] The most representative technical solutions related to AI front-end code generation are as follows: Option 1. AI-driven pure text code generation: This solution uses a large language model as its core, taking text descriptions of interaction design data or simple image recognition results as input, and outputting generalized front-end code. This solution generates front-end code using knowledge from general component libraries (such as ElementUI and Ant Design) accumulated during model training, and can generate demo-level front-end code.

[0024] Option 2. AI + Sandbox Verification Code Optimization Solution: After AI generates code, it is loaded through an embedded browser sandbox (such as a lightweight instance of the browser kernel) to obtain basic rendering results. The code is then adjusted based on user-initiated feedback. This solution relies on human feedback for optimization, and its core is a human-computer interaction model of "AI generation - user feedback - iteration".

[0025] Option 3. AI-Assisted Solution for Low-Code Platforms: For domain-specific models on low-code platforms, AI generates DSL (Domain-Specific Language) code, which is then visualized and verified using the platform's built-in UI rendering tools, and optimized based on preset rules. This solution focuses on low-code scenarios and does not adapt to project-specific resources that are not compatible with general front-end technology stacks. Since project technology stacks are diverse, each with its own unique project-specific resources, the generated code is difficult to use directly without human modification if it is not compatible.

[0026] While the relevant technical solutions have achieved AI-assisted front-end development to some extent, they suffer from the following problems in production-level front-end code generation scenarios, failing to meet the requirements of low modification costs and high accuracy: Issue 1. Lack of project-specific resource adaptation: The existing solution only relies on the general component library knowledge built into the AI ​​model and does not access the target project's custom component library, public method set and other specific resources. This results in the inability to adapt to the specific custom component library. When generating code to call the component, there may be parameter errors and style rule conflicts. For example, the project's "button component" specific property "theme-type" is incorrectly written as the general property "type", causing style deviation.

[0027] Question 2. AI lacks autonomous visualization and debugging capabilities: In the relevant solutions, AI cannot autonomously obtain the real rendering effect of the code. The pure text-driven solution relies entirely on the one-way process of "text input-code output" without any effect verification step. The sandbox verification solution and the low-code platform solution require human review of the effect and feedback on modifications. AI is only a passive executor and cannot simulate the autonomous programming logic of human developers in "writing-debugging-modifying".

[0028] Problem 3. Lack of optimization loop and high modification costs: The "generation-optimization" link of related solutions is broken. After AI generates code, manual identification of style deviations, analysis of root causes and modification are required. Especially in complex projects, deviations caused by component nesting and style inheritance require a lot of time to investigate. According to statistics, the average workload of style modification for existing AI-generated production-grade front-end code is 45%, which seriously affects development efficiency.

[0029] As one optional application scenario in the embodiments of this application, such as Figure 1 As shown, application 101 is installed in terminal device 110, and user 130 can interact with application 101 through terminal device 110 and / or access device of terminal device 110.

[0030] For example, application 101 can be arbitrary, such as a code development application. Figure 1 In the application scenario shown, if application 101 is active, the terminal device 110 can display the interface 102 of application 101. The interface 102 may include various pages that application 101 can provide, such as interactive pages, settings pages, query pages, etc.

[0031] In some embodiments, terminal device 110 is communicatively connected to server 120 to provide services to application 101. Terminal device 110 may be a mobile terminal, fixed terminal, or portable terminal, including but not limited to mobile phones, desktop computers, laptop computers, multimedia tablets, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, terminal device 110 may also support any type of interface, and server 120 may be various types of computing systems or servers capable of providing computing power, including but not limited to mainframes, edge computing nodes, and computing devices in cloud environments.

[0032] It should be noted that, Figure 1 This is merely an example of an application scenario and does not limit the scope of protection of this application.

[0033] To address issues in relevant AI front-end code generation technologies, such as poor adaptation to project-specific resources, lack of AI's autonomous visual debugging capabilities, and missing optimization loops, the front-end code generation method provided in this application can simulate the entire process of "requirements analysis - code writing - debugging and optimization" for human front-end developers, constructing a technical closed loop of "information input - code generation - visual feedback - autonomous optimization." This can improve the accuracy of production-grade front-end code, reduce modification costs, and adapt to project needs with strong compatibility.

[0034] According to an embodiment of this application, a method for generating front-end code is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0035] This embodiment provides a method for generating front-end code, which can be used in the aforementioned terminal devices or servers. Figure 2 This is a flowchart of a front-end code generation method according to an embodiment of this application, such as... Figure 2 As shown, the process includes the following steps.

[0036] Step S201: Obtain the interaction design data and dedicated dependent resources of the target project.

[0037] In this embodiment, for any project related to front-end development, the front-end developers need to provide design data related to page interaction, i.e., interaction design data; for ease of description, this project is referred to as the target project. It can be understood that the target project can be specifically determined based on actual business needs. For example, the target project can be a web-based music player, an attendance check-in mini-program, a data visualization interface, etc.

[0038] Specifically, interaction design data can be UI (user interface) design drafts. UI design drafts are visual mockups or visual interface prototypes created by UI designers using professional design software (such as Figma, Sketch, etc.) based on product requirements and user experience principles. UI design drafts can specifically include: page layout (e.g., element position and size), component styles (e.g., color styles of elements such as buttons), and interaction states (visual representations of different states such as hover, click, and loading).

[0039] Furthermore, each target project depends on certain proprietary resources, namely proprietary dependency resources; these proprietary dependency resources may specifically include at least one of the following: a project-specific custom component library, a public method set, and style constraint rules (such as CCS variable files).

[0040] The custom component library contains specific attribute configurations and style linkage logic, the public method set covers utility functions, interface encapsulation and other project-specific logic, and style constraint rules include usage rules such as project color variables, font specifications, spacing specifications, and naming specifications. These dedicated dependency resources directly determine the usability of the code and the accuracy of the styles.

[0041] For different projects, the proprietary dependency resources they rely on can be the same or different, depending on the actual needs of the project.

[0042] Step S202: Based on the interaction design data and dedicated dependency resources, generate the original front-end code of the target project using a preset code generation model.

[0043] In this embodiment, a code generation model is pre-set, which can be implemented based on a large language model. This code generation model can be a custom or self-trained Transformer architecture large model, or it can be an open-source or other commercial large model, such as an autoregressive language model or a multimodal large language model.

[0044] After obtaining the interaction design data and dedicated dependency resources, the code generation model can be called to generate the front-end code corresponding to the interaction design data and dedicated dependency resources, that is, the original front-end code of the target project.

[0045] For example, prompts for generating front-end code can be generated based on the interaction design data and dedicated dependency resources. These prompts can then be input into the code generation model, enabling the model to generate the original front-end code.

[0046] Optionally, a project component call sample set can be built based on the custom component library in the dedicated dependency resources. This sample set contains the correspondence between the property configuration of multiple components in the project and the correct front-end code. By using the project component call sample set to train the code generation model, the code generation model can learn the calling rules of the project components. Subsequently, the original front-end code can be generated using the fine-tuned code generation model, which can minimize basic errors.

[0047] Step S203: Configure dedicated dependency resources for the target browser and load the original front-end code into the target browser.

[0048] In this embodiment, a browser that meets the requirements is used as the target browser. After the original front-end code is generated, the rendering effect of the original front-end code is detected based on the target browser to see if it meets the requirements.

[0049] Specifically, the target browser is a browser that supports interactive protocols, allowing external systems to obtain the rendering results of the target browser. For example, the target browser supports the MCP protocol, enabling external programs to call and control the target browser's debugging functions through the MCP protocol. In other words, the interactive protocol can be a machine control protocol that allows external programs to control the browser's debugging functions and obtain rendering data such as DOM structure, calculated styles, and screenshots.

[0050] The target browser can be a Chromium-based browser that supports the MCP protocol, allowing external programs to directly call debugging and control functions. For example, the target browser can be Chrome, Edge, Opera, etc.

[0051] To ensure proper rendering in the target browser, it's necessary to configure the project's specific dependency resources, such as the component libraries required by the project. Furthermore, the original front-end code is loaded into the target browser to enable it to run correctly.

[0052] For example, the MCP protocol can be used to send corresponding instructions to the target browser to inject project dependencies and load the generated raw front-end code.

[0053] Step S204: Obtain the rendering result of the target browser through the interaction protocol supported by the target browser.

[0054] In this embodiment, the target browser runs the original front-end code, which generates the rendering result of the original front-end code. Then, through the interaction protocol supported by the target browser, the rendering result generated by the target browser can be obtained. This rendering result represents the execution effect of the original front-end code.

[0055] Step S205: Verify the rendering result based on the interaction design data and generate a verification result containing error information.

[0056] In this embodiment, the interaction design data (e.g., UI design draft) represents the result required by the user, while the rendering result generated by the target browser is the actual result of the current code (i.e., the original front-end code). By comparing the two, the rendering result representing the actual result can be verified to determine whether there are any errors in the rendering result. If there are errors in the rendering result, it indicates that there are errors in the original front-end code, and the original front-end code needs to be corrected.

[0057] Specifically, by using interaction design data to validate the rendering results, errors in the rendering results can be identified, and relevant error information can be extracted. For example, it can be determined that there are erroneous elements in the page, and the error information corresponding to these elements can be determined. Finally, a validation result containing this error information can be generated.

[0058] For example, if, after verification, it is found that the color of a button is abnormal (inconsistent with the button color specified in the interaction design data), an error message for that button can be generated.

[0059] Step S206: Based on the verification results, optimize the original front-end code using a preset code optimization model to obtain the target front-end code for the target project.

[0060] In this embodiment, after determining the verification result containing error information, the original front-end code can be optimized to obtain optimized (or corrected) code, i.e., the target front-end code. Specifically, the original front-end code is optimized using a code optimization model. By optimizing the front-end code, the generated target front-end code can avoid previously detected errors as much as possible.

[0061] This code optimization model can be implemented using a large language model. For example, this code optimization model may be the same as or different from the code generation model described above. Alternatively, the code optimization model can also be a rule-based model capable of optimizing code according to certain optimization rules; this embodiment does not limit this. For example, the code optimization model can be a custom or self-trained Transformer architecture large model, or it can be an open-source or other commercial large model, such as an autoregressive language model, a multimodal large language model, etc.

[0062] It is understandable that automated closed-loop optimization of the front-end code can be performed. Specifically, the target front-end code is loaded into the target browser, a new rendering result is obtained and validated again; if the new rendering result still contains errors, optimization continues; and if the new rendering result meets preset conditions, the final target front-end code is output.

[0063] For example, after obtaining the target front-end code, steps S203 to S205 can be re-executed. This time, the target front-end code needs to be loaded into the target browser. Using the interaction protocol supported by the target browser, the rendering result of the target browser running the target front-end code is obtained. The new rendering result is then verified again based on the interaction design data. If the new rendering result still contains errors, further optimization is needed. If the new rendering result is error-free, the target front-end code can be considered compliant and can be output as the generated front-end code. Even if the target front-end code still contains errors undetected by the system, adjustments can be made through manual verification. However, since most errors have been automatically identified and corrected by the system, the workload of manual verification is minimal.

[0064] The front-end code generation method provided in this embodiment generates the original front-end code for the target project. Then, it uses a target browser that supports the interaction protocol to actually render the original front-end code. The rendering effect of the front-end code can be verified using the interaction design data of the target project, thereby automatically identifying and correcting errors. This achieves a closed-loop technology of "information input - code generation - visual feedback - autonomous optimization," ensuring the accuracy of the final generated front-end code and reducing the cost of manual code modification. It facilitates the direct generation of production-grade front-end code, significantly improving development efficiency. Furthermore, by generating code based on the target project's dedicated dependency resources, it can integrate any custom component library and public method set, adapting to project needs and exhibiting strong compatibility. This effectively solves problems such as component generalization and incompatibility with projects in related solutions.

[0065] This embodiment provides a method for generating front-end code, which can be used in the aforementioned terminal devices or servers. Figure 3 This is a flowchart of a front-end code generation method according to an embodiment of this application, such as... Figure 3 As shown, the process includes the following steps.

[0066] Step S301: Obtain the interaction design data and dedicated dependent resources of the target project.

[0067] Please see details Figure 2 Step S201 of the illustrated embodiment will not be described again here.

[0068] Step S302: Based on the interaction design data and dedicated dependency resources, generate the original front-end code of the target project using a preset code generation model.

[0069] Specifically, step S302, "using a preset code generation model to generate the original front-end code of the target project," may include steps S3021 to S3022.

[0070] Step S3021: Query the preset optimization knowledge base to obtain the target optimization knowledge entries corresponding to the target project.

[0071] Step S3022: Optimize the prompt words according to the target optimization knowledge entries, input the optimized prompt words into the code generation model, and generate the original front-end code of the target project; the optimization knowledge base includes optimization knowledge entries used to represent the optimization method.

[0072] In this embodiment, an optimization knowledge base is pre-established. This knowledge base records optimization knowledge entries related to code optimization. These optimization knowledge entries can specifically represent optimization methods or correction rules for code optimization. For example, an optimization knowledge entry could be something like changing the color of an element to a specific color required by the project.

[0073] After obtaining the interaction design data and dedicated dependency resources, you can also query the optimization knowledge base and combine it with the optimization knowledge entries related to the target project (i.e. target optimization knowledge entries) to generate the original front-end code. This will make the original front-end code conform to the requirements of the optimization knowledge entries as much as possible, reduce errors in the original front-end code, and reduce the amount of processing for subsequent verification and correction.

[0074] Specifically, by querying the optimization knowledge base, one or more target optimization knowledge entries required for the target project can be identified. These target optimization knowledge entries are then formatted as constraint text and embedded into prompts used to generate the original front-end code, thus optimizing the prompts. The optimized prompts can then be input into the code generation model to obtain the original front-end code. Alternatively, the optimization knowledge base can be queried using RAG (Retrieval-augmented Generation), but this embodiment does not limit this approach.

[0075] In some optional implementations, step S302, "generating the original front-end code of the target project based on the interaction design data and the dedicated dependency resources using a preset code generation model," may include steps a1 to a4.

[0076] Step a1: Extract visual features from the interaction design data to determine the target visual feature dataset.

[0077] Step a2: parse the exclusive dependency resources and determine the constraint rule set of the target project.

[0078] Step a3: Generate structured input text based on the target visual feature dataset and the constraint rule set.

[0079] Step a4: Input the structured input text into the preset code generation model to generate the original front-end code for the target project.

[0080] In this embodiment, the user uploads a UI design draft (supporting formats such as Figma and Sketch) and imports the target front-end project's dedicated dependency resource package (including custom component libraries, public method sets, style constraint rules, etc.). The system can extract visual features such as layout, color, and font of the UI design draft through image recognition technology, and parse the dedicated dependency resources to convert them into AI-recognizable structured data.

[0081] Specifically, vector data of UI design drafts can be obtained through tools such as Figma API or Sketch plugins, and then pixel-level parsing can be performed to accurately extract the UI visual features of each front-end element. These visual features can include detailed visual parameters such as element coordinates (accurate to px), color values ​​(e.g., RGB / Hex format), font (type, size, line height), spacing, border style (1px solid #e8e8e8), and rounded corners (border-radius: 4px), and are converted into AI-recognizable structured data, such as JSON format data, to form a target visual feature dataset.

[0082] Furthermore, the JSON configuration file of the custom component library is parsed using an AST (Abstract Syntax Tree) analysis tool to extract information such as component name, attribute list, and default value (e.g., the attribute list and value range of the CustomButton component, such as theme-type supporting only primary / success and size supporting only small / medium). The public method set is parsed to extract method name, parameter requirements, and return value (e.g., the parameter requirements and return value format of the request method). The style constraint rules such as CSS variable files are parsed to extract variable names and corresponding values ​​(e.g., --btn-color-primary: #1890ff, --btn-font-size: 16px). By combining the various parsing results, a set of project technical constraint rules that can be recognized by AI is generated.

[0083] For example, the constraint rule set may include: {"Component Name":"CustomButton", "Attributes":{"Theme-Type":["Primary", "Success"], "Size":["Small", "Medium"]}, "Style Constraints":"Color:var(--btn-color)"}.

[0084] Next, the target visual feature dataset and constraint rule set are merged and converted into structured input text that can be understood by a large language model. For example, prompt engineering can be used to convert it into structured input text that LLM can understand. This structured input text is then input into a preset code generation model to generate the original front-end code for the target project. The generated structured input text clearly defines the visual requirements and binds them to the project's technical constraints, solving the problems of AI-generated code being out of touch with the project's reality and component call errors from the source, achieving a seamless connection between "visual analysis - resource analysis - AI input".

[0085] For example, the structured input text could be: "Generating front-end code based on the following visual requirements and technical constraints: Visual requirements: button coordinates (100, 200), color #1890ff, size medium; Technical constraints: using the project component CustomButton, with the theme-type attribute set to primary, and the style dependent on var(--btn-color)".

[0086] In this embodiment, the original front-end code generated by the code generation model has a corresponding element identifier for each element. This element identifier can serve as a debug flag (debug-id), acting as a unique index for the data, facilitating subsequent verification. For example, this element identifier can be the component ID of a corresponding component, or a style association identifier based on coordinate position. For instance, data-debug-id="btn-001" can be added to the component tag to associate it with the corresponding element in the target visual feature dataset. This debug flag corresponds one-to-one with UI visual features and project components, providing a unique association basis for the accurate location of data collection and deviation identification in subsequent MCP debugging. This enables a front-end linkage between AI generation, debugging, and identification, avoiding invalid data collection and significantly improving the efficiency and accuracy of deviation location.

[0087] Step S303: Configure dedicated dependency resources for the target browser and load the original front-end code into the target browser.

[0088] Please see details Figure 2 Step S203 of the illustrated embodiment will not be described again here.

[0089] In some alternative implementations, the method further includes step b1.

[0090] Step b1: Based on the interaction protocols supported by the target browser, predefine a set of debugging instructions that conforms to the interaction protocols.

[0091] In this embodiment, based on the interaction protocol provided by the target browser, such as the MCP protocol, a debugging instruction set conforming to this interaction protocol can be defined, enabling subsequent interaction between the various debugging instructions in this instruction set and the target browser. This debugging instruction set can also conform to other browser debugging interaction protocols, such as the WebSocket debugging interface, providing flexible compatibility with multiple browser environments.

[0092] The instruction design is tailored to the characteristics of AI-generated code, enabling precise code loading and collection of rendering data for corresponding elements based on debugging markers. These debugging instructions include: code loading instructions, element information retrieval instructions, screenshot retrieval instructions, and error log retrieval instructions.

[0093] Specifically, the code loading instruction loadcode(code:string) is used to inject the generated front-end code into the browser and load it, and automatically configure project dependencies, such as importing component library resources through CDN.

[0094] The `getRenderedData(debugId:string)` directive is used to retrieve the DOM structure, calculated styles (such as `computedStyle.color`), and position information of a given element based on its identifier.

[0095] The screenshot capture command getScreenshot(area?:string) is used to capture a rendered screenshot of the entire page or a specified area.

[0096] The `etStyleErrors()` directive is used to retrieve style error logs output to the browser console, such as "Unknown property themeType".

[0097] Among them, information such as DOM structure, calculated style, rendering screenshots, and error logs obtained based on the MCP protocol can be bound one by one with the debugging tags of AI-generated code to generate a related dataset of component elements, rendering effects, and error information. This enables the linkage of AI code generation, MCP collection, and deviation identification, and realizes AI autonomous debugging.

[0098] Optionally, the method further includes: configuring the target browser's runtime environment; the runtime environment includes at least one of domain proxy, login status, and viewport size.

[0099] In this embodiment, the debugging instruction set may also include environment configuration instructions, which configure the target browser's runtime environment based on the environment configuration instructions. Specifically, this may include setting a domain proxy (matching the project interface domain name), simulating login status (e.g., injecting cookies), setting the viewport size (which needs to be adapted to the target device in the production environment), etc., to ensure that the rendering effect is consistent with the production environment.

[0100] Step S304: Obtain the rendering result of the target browser through the interaction protocol supported by the target browser.

[0101] Please see details Figure 2 Step S204 of the illustrated embodiment will not be described again here.

[0102] Optionally, as shown in step b1 above, a debugging instruction set can be preset, and step S304 above, "obtain the rendering result of the target browser through the interaction protocol supported by the target browser", may include: obtaining the rendering result of the target browser according to the rendering result acquisition instruction in the debugging instruction set.

[0103] In this embodiment, the debugging instruction set includes rendering result acquisition instructions, which may specifically include the aforementioned element information acquisition instructions, screenshot acquisition instructions, and error log acquisition instructions. After the target browser completes the rendering of the original front-end code, the corresponding rendering results can be obtained according to these rendering result acquisition instructions. It can be understood that the rendering results may specifically include rendered images, element information, rendering error logs, etc.

[0104] In this embodiment, by setting a standard set of debugging instructions, interaction with the target browser can be achieved by calling the debugging instructions, without the need to develop additional code, and the instructions can be called repeatedly.

[0105] Step S305: Verify the rendering result based on the interaction design data and generate a verification result containing error information.

[0106] Please see details Figure 2 Step S205 of the illustrated embodiment will not be described again here.

[0107] In some optional implementations, the rendering result includes a rendered image of the area to be verified, and also includes actual element information and / or rendering error logs for each element. The actual element information refers to the true information of a particular element after rendering in the rendering result. This true information may be the same as or different from the element information expected in the interaction design data (e.g., the target element information described below). For example, for an icon element, its shape is expected to be circular (i.e., the target element information indicates the icon shape is circular), but the rendering result in the target browser indicates its shape is square (i.e., the actual element information indicates the icon shape is square). By comparing the actual element information with the expected target element information, it is possible to determine which elements have errors after rendering.

[0108] Furthermore, in step S305, "verify the rendering result based on the interaction design data and generate a verification result containing error information," the target element to be verified in the original front-end code can be determined first, and then the error information of the target element can be determined. Specifically, this process may include steps c1 to c3.

[0109] Step c1: Determine the target image corresponding to the area to be verified based on the interaction design data.

[0110] Step c2: Compare the target image with the rendered image; if the comparison results indicate that there is a visual difference between the target image and the rendered image, determine the target element within the area to be verified.

[0111] Step c3: Determine the error information of the target element based on the actual element information and / or rendering error log.

[0112] In this embodiment, the interaction design data includes the required image, i.e., the target image; wherein, the entire page can be used as the area to be verified, i.e., the target image of the entire page is obtained. Alternatively, for each page element (such as buttons, input boxes, etc.), the target image corresponding to each element can also be obtained, i.e., the area where each element is located is used as the area to be verified.

[0113] For a region to be verified, the difference between the target image and the rendered image of the region can be determined by comparing the two.

[0114] Optionally, the image similarity between the target image and the rendered image can be calculated, for example, by calculating their SSIM (similarity index). A preset similarity threshold is set; if the image similarity is greater than this threshold (e.g., 95%), it indicates that there is no difference between the two; otherwise, a difference exists, meaning the actual rendered image does not match the target image required by the user, i.e., there is a problem with the rendering result. In this case, problematic elements within the area to be verified, i.e., the target elements, can be identified. By comparing the image similarity between the target image and the rendered image, visual differences in the images can be automatically identified.

[0115] For example, if the image similarity between the target image and the rendered image is less than a preset similarity threshold, the area to be verified is marked as a deviation area; then, the element corresponding to the deviation area, i.e. the target element, is located by coordinate matching, and the element identifier of the target element can be associated to facilitate subsequent optimization of the target element.

[0116] After identifying the target element that may contain errors, the specific error type of the target element can be further determined based on the actual element information and / or the rendered error log, thus obtaining the error information for that target element. Any element on the page (or the area to be validated) can be processed in the same way, and will not be elaborated upon here.

[0117] Optionally, as shown above, the original front-end code contains debug flags set for each element, and step c3, "determine the error information of the target element based on the actual element information of the target element and / or the rendering error log", may include steps c31 and c32.

[0118] Step c31: Based on the debug flags of the target element, query the rendering results to determine the actual element information of the target element and / or the target error entries related to the target element in the rendering error log.

[0119] Step c32: If the rendering result includes actual element information, determine the target element information of the target element based on the interaction design data; generate error information for the target element based on the difference between the target element information and the actual element information of the target element.

[0120] Step c33: If the rendering result includes a rendering error log, determine the error information of the target element based on the target error entries related to the target element.

[0121] In this embodiment, the target element in the original front-end code has corresponding debug flags. If the rendering result includes actual element information—for example, if the actual element information of each element is obtained through an element information retrieval command—then each actual element information page will have corresponding debug flags. Therefore, by querying the rendering result, the actual element information corresponding to the target element can be determined, and thus, based on the actual element information of the target element, the errors existing in the target element can be determined. Specifically, the element information can be the element's DOM object data, which includes the element's tags, attributes, styles, etc.

[0122] Furthermore, the interaction design data (such as UI design drafts) contains information that each element should have, namely the target element information. For the target element, the difference between its target element information and the actual element information can be determined, and then the error information of the target element can be generated based on the difference. The error information can specifically represent the error content of the target element, or it can further include the correction method of the error.

[0123] If the rendering result includes a rendering error log, for example, if the rendering error log is obtained through an error log retrieval command, then the debugging markers of each error entry in the rendering error log can be identified, and the error information of the corresponding element can be generated based on the error entry; among them, the error entry corresponding to the target element is the target error entry, and the two have the same debugging markers. The error information of the target element can be determined based on the content of the target error entry.

[0124] It's understandable that the rendering error log can be parsed all at once, allowing for the identification of error information for each element recorded in the log. Furthermore, for the same element, multiple different errors may be identified based on the element information and the rendering error log, and error information for each of these errors needs to be generated.

[0125] This allows for the preset of multiple error types, which can be recorded in the error message for easy optimization later. Specific error types can include: attribute errors, style errors, component composition errors, missing dependencies, etc.

[0126] For example, element information contains CSS style values. By comparing the target CSS style values ​​with the actual CSS style values, it can be determined whether there are style errors. For instance, if the target color of an element, #1890ff, is inconsistent with the actual color, #333, then it can be determined that the element has a style error, and corresponding error messages can be generated. Or, if an element requires "nested icons on buttons," but the actual element information indicates that the element is actually an element without icons, then it can be determined that the element's component composition is incorrect.

[0127] Alternatively, if the rendering error log displays "CustomButton: Invalid property type", it indicates that the element has a component property call error, which is a property error.

[0128] In this embodiment, the error information of each element can be directly used as the verification result, or a structured verification result, such as a JSON format verification result, can be generated using a large model, which is convenient for subsequent code optimization of the model.

[0129] For example, the validation result could be a list of deviations, including error messages in JSON format for each element. For instance, the validation result could be: {"debugId":"btn-001", ComponentName":"customButton", "DeviationType":"Attribute Error + Style Deviation", "TargetFeature":{"theme-type":"primary", "color":"#1890ff"}, "ActualFeature":{"type":"primary", "color":"#333"}, "ErrorLog":"CustomButton:Invalid attribute type", "Correction Direction":"Change attribute type to theme-type, adjust color to var(--btn-color-primary)"}.

[0130] In this embodiment, the target screenshot of the target element is compared with the actual rendered screenshot to determine the similarity deviation between the two. Furthermore, based on the MCP protocol, the DOM structure, CSS calculated styles, error logs, etc. of each element can be obtained, and in-depth linkage analysis can be performed: first, the visual deviation area is identified through SSIM, then the code segment corresponding to the deviation can be located through the DOM structure, and the root cause of the deviation (such as component attribute errors, CSS conflicts, etc.) can be analyzed through the error log. Finally, a deviation list corresponding to the debugging mark is generated, which includes the deviation location, root cause type, correction direction, etc. of each deviation. This helps to achieve deviation identification and root cause location in one step, avoiding the limitation of not being able to locate the root cause of the code.

[0131] Step S306: Based on the verification results, optimize the original front-end code using a preset code optimization model to obtain the target front-end code for the target project.

[0132] Please see details Figure 2 Step S206 of the illustrated embodiment will not be described again here.

[0133] In some optional implementations, as shown above, the error message may include an error type. Furthermore, step S306, "Based on the verification results, optimize the original front-end code using a preset code optimization model to obtain the target front-end code for the target project," may include steps d1 to d2.

[0134] Step d1: Determine the target optimization strategy for the target element based on the error type of the target element in the verification results.

[0135] Step d2: Using a preset code optimization model, optimize the code corresponding to the target element in the original front-end code according to the target optimization strategy to obtain the target front-end code of the target project.

[0136] In this embodiment, corresponding optimization strategies are pre-defined for various error types, i.e., a correspondence is established between error types and optimization strategies. As shown above, specific error types may include: attribute errors, style errors, component composition errors, missing dependencies, etc. Correspondingly, the optimization strategies for various error types are shown in Table 1 below: Table 1

[0137] When code optimization is required for a target element, the corresponding optimization strategy can be determined based on the error type of the target element. Then, the code corresponding to the target element in the original front-end code can be optimized based on the optimization strategy to correct the code corresponding to the target element.

[0138] Specifically, the original front-end code can be located by the element identifier of the target element, the code corresponding to the target element can be determined, and then the code can be optimized according to the corresponding optimization strategy.

[0139] Step S307: Generate corresponding optimization knowledge entries based on the optimization method of the original front-end code and record them in the optimization knowledge base.

[0140] Existing solutions do not allow for the reuse of optimization experience: they do not record the relationship between "deviation type - correction logic" in the code optimization process. For deviations of the same type of component in the same project, repeated debugging is required every time code is generated, which makes it impossible to form a project-specific optimization knowledge accumulation.

[0141] In this embodiment, while optimizing the original front-end code, specific optimization methods can also be determined. For example, for the optimization method of the target element that contains errors, the optimization method is recorded, and optimization knowledge entries for the target element can be generated and recorded in the optimization knowledge base.

[0142] This knowledge base can record information based on element debugging identifiers, and the optimization knowledge entries can specifically include error types and specific corrective logic. Furthermore, it can implement more refined knowledge management mechanisms, such as project isolation, to adapt to the needs of different projects.

[0143] In this embodiment, strategies and root causes of deviations can be associated. Based on the root cause type in the deviation list, a preset optimization strategy is matched (such as matching component attribute errors with component library configuration correction). Furthermore, strategies and project resources can also be linked. When modifying code, the project resource rules parsed by AST analysis are called synchronously to ensure that the optimized code conforms to project specifications. In addition, the code optimization process is linked with the knowledge base. The associated data of "error type-correction logic-component name" is stored in the knowledge base as optimization experience. When AI generates code in the future, it will first query the knowledge base to avoid repeating the same deviations. This realizes the linkage of code optimization → experience reuse → subsequent generation, and continuously improves the accuracy of the system.

[0144] For example, the optimization knowledge entry can be associated data in the form of "Error Type - Correction Logic - Component Name", thus forming a project-specific optimization knowledge base. For instance, an optimization knowledge entry could be: {"Component Name":"CustomButton", "Error Type":"Attribute Error", "Error Attribute":"type", "Correct Attribute":"theme-type"}. When generating code based on the code generation model, this knowledge base is queried first, effectively avoiding duplicate errors.

[0145] The following section uses a specific scenario to illustrate the process and effects of this method. The process can be described as follows: Figure 4 As shown.

[0146] A React management system project uses a custom component library `@company / ui`, where the button component is `CustomButton` with a unique property `theme-type` (values ​​`primary / success`) and a style dependent on the CSS variable `--btn-color-primary:#1890ff`. Users upload UI designs with the requirement of "a button with a primary theme, located at position (100, 200) on the page".

[0147] Input and parsing of UI design drafts and project information. First, the UI design draft can be parsed to obtain visual features (coordinates, colors), project resources can be parsed to obtain component rules, and finally the structured input text can be output: "Generate React code, use the CustomButton component, theme-type is primary, color #1890ff, coordinates (100, 200), import path @company / ui".

[0148] AI code generation. The structured input text is fed into the code generation model to obtain the original front-end code, and an element identifier (debug marker) `data-debug-id="btn-001"` is added. Due to model inertia, the attribute `type:import{ CustomButton} from '@company / ui'; function App() { return ;}` is incorrectly used.

[0149] Visualization rendering and data acquisition based on MCP. The original front-end code is loaded via the MCP protocol, and rendering data is obtained: actual color #333, error log "CustomButton: Invalid attribute type".

[0150] Rendering effect verification and error identification. A screenshot of the button was taken; its image SSIM similarity was 90%, less than the preset threshold. Furthermore, deviations in the component were identified, specifically attribute errors and color deviations. Based on this, a corresponding deviation list was generated, with the correction direction being "change attribute type to theme-type, and use --btn-color-primary for color".

[0151] AI code iterative optimization. Optimization is based on code optimization models, for example, by... <custombutton type="primary">Modified to <custombutton theme-type="primary" style="{{color:" 'var(--btn-color-primary)'}}>.

[0152] Then, MCP verification is performed again, for example, to determine whether SSIM is greater than or equal to 95%. At this point, the image SSIM similarity is 98%, which meets the requirements, and the final target front-end code is output.

[0153] Among these, the knowledge of "CustomButton-attribute error-typetheme-type" can be stored in the optimization knowledge base for knowledge accumulation and future use.

[0154] The front-end code generation method provided in this embodiment constrains the code generation direction through structured input. For example, the MCP protocol establishes a visual feedback link, combined with intelligent algorithms to make deviation decisions, and a knowledge base is built to accumulate experience. Specifically, the interaction protocol enables AI to autonomously acquire code rendering effects, achieving bidirectional communication between AI and browser debugging tools, replacing the manual review of effects; it constructs an automated optimization closed loop of "generation-rendering-recognition-correction," reducing manual modification workload and eliminating the need for manual intervention in the optimization process, making it particularly suitable for batch code generation scenarios in large-scale projects; it records optimization process data to form a project-specific knowledge base, accumulating project-specific optimization knowledge, improving the accuracy and efficiency of subsequent code generation, and enabling experience reuse.

[0155] This method is based on the mature MCP protocol, eliminating the need to develop entirely new debugging tools. Enterprises can quickly integrate it into their existing development workflows, making it highly scalable. Verification shows that through project-specific resource adaptation and automated optimization, the style deviation rate of AI-generated code has decreased from 45% to below 8%, reducing manual modification workload by over 80%, significantly improving development efficiency. Furthermore, it supports mainstream technology stacks such as Vue and React, and can integrate with any custom component library and public method set, adapting to complex project needs with strong compatibility. Utilizing a project optimization knowledge base can shorten the generation and optimization time of similar code by 50%, and with increased usage, the AI's adaptability to projects continuously improves, forming a virtuous cycle of "use-optimization-becoming smarter."

[0156] This embodiment also provides a front-end code generation apparatus for implementing the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0157] This embodiment provides a front-end code generation device, such as... Figure 5 As shown, the device includes: Module 501 is used to obtain the interaction design data and specific dependency resources of the target project. The code generation module 502 is used to generate the original front-end code of the target project based on the interaction design data and the exclusive dependency resources using a preset code generation model; the original front-end code includes debugging markers set for each element; The rendering module 503 is used to configure the exclusive dependency resources for the target browser and load the original front-end code into the target browser; and to obtain the rendering result of the target browser through the interaction protocol supported by the target browser; the rendering result includes the actual element information of each element and / or rendering error logs; Processing module 504 is used to verify the rendering result based on the interaction design data and generate a verification result containing error information; The code optimization module 505 is used to optimize the original front-end code according to the verification result using a preset code optimization model to obtain the target front-end code of the target project. The step of validating the rendering result based on the interaction design data and generating a validation result containing error information includes: Identify the target element to be verified in the original front-end code; Based on the debugging flags of the target element, query the rendering results to determine the actual element information of the target element and / or the target error entries related to the target element in the rendering error log; If the rendering result includes actual element information, the target element information of the target element is determined based on the interaction design data; and error information of the target element is generated based on the difference between the target element information and the actual element information of the target element. If the rendering result includes a rendering error log, the error information of the target element is determined based on the target error entries associated with the target element.

[0158] In some optional implementations, the step of generating the original front-end code of the target project based on the interaction design data and the dedicated dependency resources using a preset code generation model includes: Visual features are extracted from the interaction design data to determine the target visual feature dataset; The specific dependency resources are parsed to determine the constraint rule set of the target project; Based on the target visual feature dataset and the constraint rule set, generate structured input text; The structured input text is input into a preset code generation model to generate the original front-end code of the target project.

[0159] In some optional implementations, the rendering result includes a rendered image of the region to be verified; Determining the target element to be verified in the original front-end code includes: The target image corresponding to the area to be verified is determined based on the interaction design data. The target image is compared with the rendered image; if the comparison result indicates that there is a visual difference between the target image and the rendered image, the target element within the area to be verified is determined.

[0160] In some optional implementations, the comparison of the target image and the rendered image includes: Calculate the image similarity between the target image and the rendered image; If the image similarity is less than a preset similarity threshold, it is determined that there is a visual difference between the target image and the rendered image.

[0161] In some optional implementations, the error message includes an error type; The step of optimizing the original front-end code using a preset code optimization model based on the verification result to obtain the target front-end code for the target project includes: Based on the error type of the target element in the verification result, determine the target optimization strategy for the target element; Using a preset code optimization model, the code corresponding to the target element in the original front-end code is optimized according to the target optimization strategy to obtain the target front-end code of the target project.

[0162] In some optional implementations, generating the original front-end code of the target project using a preset code generation model includes: The system queries a pre-defined optimization knowledge base to obtain target optimization knowledge entries corresponding to the target project; it optimizes prompt words based on the target optimization knowledge entries, inputs the optimized prompt words into the code generation model, and generates the original front-end code for the target project; the optimization knowledge base includes optimization knowledge entries used to represent optimization methods; The processing module is also used for: Based on the optimization method of the original front-end code, corresponding optimization knowledge entries are generated and recorded in the optimization knowledge base.

[0163] In some optional implementations, the processing module is further configured to: Based on the interaction protocols supported by the target browser, a set of debugging instructions conforming to the interaction protocols is predefined; The step of obtaining the rendering result of the target browser through the interaction protocol supported by the target browser includes: Based on the rendering result acquisition instruction in the debugging instruction set, obtain the rendering result of the target browser.

[0164] The front-end code generation apparatus provided in this disclosure can execute the front-end code generation method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the various modules and units described above are the same as in the corresponding embodiments described above, and will not be repeated here.

[0165] Figure 6 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0166] The following is a detailed reference. Figure 6 This diagram illustrates a suitable structural schematic for implementing the electronic device described in the embodiments of this application. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 601, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 602 or a program loaded from memory 608 into random access memory (RAM) 603. The RAM 603 also stores various programs and data required for the operation of the electronic device. The processor 601, ROM 602, and RAM 603 are interconnected via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0167] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0168] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 609, or installed from a memory 608, or installed from a ROM 602. When the computer program is executed by the processor 601, it performs the functions defined in the front-end code generation method of embodiments of this application.

[0169] Figure 6 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.

[0170] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the front-end code generation method shown in the above embodiments is implemented.

[0171] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0172] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and all such modifications and variations fall within the scope defined by the appended claims.< / custombutton> < / custombutton>

Claims

1. A method for generating front-end code, characterized in that, The method includes: Obtain the interaction design data and specific dependency resources of the target project; Based on the interaction design data and the dedicated dependency resources, the original front-end code of the target project is generated using a preset code generation model; the original front-end code includes debugging markers set for each element; Configure the dedicated dependency resources for the target browser, and load the original front-end code into the target browser; The rendering result of the target browser is obtained through the interaction protocol supported by the target browser; The rendering result is validated based on the interaction design data to generate a validation result containing error information; the rendering result includes the actual element information of each element and / or rendering error logs. Based on the verification results, the original front-end code is optimized using a preset code optimization model to obtain the target front-end code for the target project. The step of validating the rendering result based on the interaction design data and generating a validation result containing error information includes: Identify the target element to be verified in the original front-end code; Based on the debugging flags of the target element, query the rendering results to determine the actual element information of the target element and / or the target error entries related to the target element in the rendering error log; If the rendering result includes actual element information, the target element information of the target element is determined based on the interaction design data; and error information of the target element is generated based on the difference between the target element information and the actual element information of the target element. If the rendering result includes a rendering error log, the error information of the target element is determined based on the target error entries associated with the target element.

2. The method according to claim 1, characterized in that, The step of generating the original front-end code of the target project based on the interaction design data and the dedicated dependency resources using a preset code generation model includes: Visual features are extracted from the interaction design data to determine the target visual feature dataset; The specific dependency resources are parsed to determine the constraint rule set of the target project; Based on the target visual feature dataset and the constraint rule set, generate structured input text; The structured input text is input into a preset code generation model to generate the original front-end code of the target project.

3. The method according to claim 1, characterized in that, The rendering result includes the rendered image of the area to be verified; Determining the target element to be verified in the original front-end code includes: The target image corresponding to the area to be verified is determined based on the interaction design data. The target image is compared with the rendered image; if the comparison result indicates that there is a visual difference between the target image and the rendered image, the target element within the area to be verified is determined.

4. The method according to claim 3, characterized in that, The comparison between the target image and the rendered image includes: Calculate the image similarity between the target image and the rendered image; If the image similarity is less than a preset similarity threshold, it is determined that there is a visual difference between the target image and the rendered image.

5. The method according to claim 1, characterized in that, The error message includes the error type; The step of optimizing the original front-end code using a preset code optimization model based on the verification result to obtain the target front-end code for the target project includes: Based on the error type of the target element in the verification result, determine the target optimization strategy for the target element; Using a preset code optimization model, the code corresponding to the target element in the original front-end code is optimized according to the target optimization strategy to obtain the target front-end code of the target project.

6. The method according to claim 1, characterized in that, The process of generating the original front-end code for the target project using a preset code generation model includes: The system queries a pre-defined optimization knowledge base to obtain target optimization knowledge entries corresponding to the target project; it optimizes prompt words based on the target optimization knowledge entries, inputs the optimized prompt words into the code generation model, and generates the original front-end code for the target project; the optimization knowledge base includes optimization knowledge entries used to represent optimization methods; The method further includes: Based on the optimization method of the original front-end code, corresponding optimization knowledge entries are generated and recorded in the optimization knowledge base.

7. The method according to claim 1, characterized in that, The method further includes: Based on the interaction protocols supported by the target browser, a set of debugging instructions conforming to the interaction protocols is predefined; The step of obtaining the rendering result of the target browser through the interaction protocol supported by the target browser includes: Based on the rendering result acquisition instruction in the debugging instruction set, obtain the rendering result of the target browser.

8. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory storing computer instructions, and the processor executing the computer instructions to perform the front-end code generation method of any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to execute the method for generating front-end code according to any one of claims 1 to 7.

10. A computer program product, characterized in that, Includes computer instructions for causing a computer to execute the method for generating front-end code according to any one of claims 1 to 7.

Images