Deep dsl and knowledge base based large model front-end code generation method and system

Abstract

The present disclosure proposes a deep DSL and knowledge base-based large model front-end code generation method and system. The method comprises: receiving a user's front-end interface requirement; analyzing the front-end interface requirement through a requirement semantic analysis engine, and outputting a natural language requirement description; based on the natural language requirement description, calling a code large model and querying a DSL field knowledge base, selecting a high-score first input-output pair as a reference example to return to the code large model, and generating a front-end pseudo code; the code large model queries the code field knowledge base for each pseudo code segment in turn, selects a high-score second input-output pair as a reference example to return to the code large model, and generates a front-end code segment through the code large model; and combining each front-end code segment to generate the final front-end code and render. Through the method, the accuracy of large model front-end code generation is significantly improved, and the code generation is transformed from "vibe coding" to "viable coding".

Description

Technical Field

[0001] This disclosure relates to the field of artificial intelligence, specifically to a method and system for generating front-end code for large models based on deep DSL and knowledge base. Background Technology

[0002] With the rapid development of Large Language Models (LLM) in the field of automatic code generation, its application in front-end development is gradually increasing, especially in the generation of HTML, CSS, and JavaScript code, which has improved development efficiency to a certain extent. However, existing LLM-based code generation technologies still have the following shortcomings in practical engineering applications:

[0003] 1. The accuracy of the code is unstable. The code generated by the model often has problems such as syntax errors, semantic inconsistencies or incomplete functions, which makes the generated results unable to be run directly or have defects in logical structure.

[0004] 2. The generation process is poorly controllable. The results obtained by users based on natural language prompts are often unpredictable. Even slightly ambiguous prompts can lead to outputs that are significantly different from expectations.

[0005] 3. The model has limitations in context understanding and lacks the ability to generate code for complex interaction logic, multi-state management, or cross-component business scenarios, making it difficult to meet the needs of actual applications.

[0006] 4. The generated code has poor engineering standardization, manifested in chaotic naming, missing comments, or unclear structure, which seriously affects the maintainability of the code and the efficiency of secondary development.

[0007] In summary, although existing LLM technologies can improve code development efficiency, there is still room for improvement in terms of accuracy, controllability, handling of complex logic, and engineering standardization. Summary of the Invention

[0008] This disclosure provides a method and system for generating front-end code for large models based on deep DSL and knowledge base, which is used to improve the accuracy of front-end code generation for large models. The core concept is to realize the transformation of code generation from "vibe coding" to "viable coding".

[0009] Firstly, this disclosure provides a method for generating front-end code for large models based on deep DSL and knowledge base, including:

[0010] Step S1: Receive the user's input of the front-end interface requirements;

[0011] Step S2: The front-end interface requirements are parsed using a requirement semantic parsing engine, and a structured natural language requirement description is output.

[0012] Step S3: Based on the natural language requirement description, call the code big model and query the DSL domain knowledge base to retrieve the Top-K most similar first input results, and select the first input-output pair with a score higher than the first predetermined threshold as a reference sample to return to the code big model to generate front-end pseudocode;

[0013] Step S4: The code big model breaks down the front-end pseudocode into component-level pseudocode fragments, and queries the code domain knowledge base for each pseudocode fragment in turn to retrieve the Top-M most similar second input results. Based on the second input results, it selects second input-output pairs with scores higher than the second predetermined threshold as reference examples and returns them to the code big model. The front-end code fragments are then generated through the code big model.

[0014] Step S5: Combine the various front-end code snippets to generate the final front-end code, and render it in real time in the browser.

[0015] In some embodiments, between step S3 and step S4, the following further step is included:

[0016] S3a. Send the front-end pseudocode generated by the large model to the DSL verification module;

[0017] The S3b and DSL verification modules perform pseudocode syntax and semantics verification, static structure and function verification and scoring;

[0018] S3c: If the score is not lower than the first preset value, the verification is passed and the process proceeds to step S4.

[0019] If the score is lower than the first preset value, the manual correction process is triggered, and the correction result is received and sent to the DSL verification module. If the score is lower than the first preset value, the manual correction process is initiated again until the score is not lower than the first preset value and the verification is passed. The final corrected front-end pseudocode is then returned to the large model and prompted to apply it directly.

[0020] In some embodiments, the validated front-end pseudocode is associated with its corresponding natural language requirement description to form a first input-output pair, and then associated with the scoring information and stored in the DSL domain knowledge base.

[0021] In some embodiments, between step S4 and step S5, the following further step is included:

[0022] S4a. Send the front-end code snippet generated by the large model to the code verification module;

[0023] S4b, the code verification module verifies and scores the front-end code's syntax, semantics, static structure, and functionality.

[0024] S4c: If the score is not lower than the second preset value, the verification is passed and the front-end code snippet is used in the final front-end code output;

[0025] S4d: If the score is lower than the second preset value, a manual correction process is triggered, and the correction result is received and sent to the code verification module. If the score is lower than the second preset value, the manual correction process is initiated again until the score is not lower than the second preset value and the verification is passed. The finally corrected front-end code snippet is then used for the final front-end code output.

[0026] In some embodiments, the validated front-end code snippet is associated with its corresponding front-end pseudocode snippet to form a second input-output pair, and then stored in the code domain knowledge base in association with the scoring information.

[0027] In some embodiments, step S3 specifically includes:

[0028] S31. The code big model calls the first query module through the MCP protocol to convert the natural language requirement description into a vector and retrieve the Top-K most similar first input vectors in the DSL vector library.

[0029] S32. The first query module retrieves the associated first input-output pairs and verification scores from the DSL relational database based on the Top-K first input vectors, selects the first input-output pairs with scores higher than the first predetermined threshold, and returns the selected first input-output pairs as reference examples to the large code model.

[0030] S33. Combine reference examples with the current natural language requirements description to construct prompt words, and generate front-end pseudocode through the code big model.

[0031] In some embodiments, step S4 specifically includes:

[0032] S41. The front-end pseudocode is split into component-level pseudocode fragments. For each pseudocode fragment, the code big model calls the second query module through the MCP protocol to convert the pseudocode fragment into a vector and retrieve the Top-M most similar second input vectors in the code vector library.

[0033] S42. The second query module retrieves the associated second input-output pairs and verification scores from the code relation library based on the Top-M second input vectors, selects the second input-output pairs with scores higher than the second predetermined threshold, and returns the selected second input-output pairs as reference examples to the code big model.

[0034] S43. Combine the reference example with the current front-end pseudocode snippet to construct prompt words, and generate front-end code snippets through the code big model.

[0035] In some embodiments, the front-end pseudocode is in JSON or Markdown format.

[0036] In some embodiments, the large code model employs a general large language model with code capabilities.

[0037] Secondly, this disclosure provides a large model front-end code generation system based on deep DSL and knowledge base, used to run the aforementioned large model front-end code generation method based on deep DSL and knowledge base, including:

[0038] The acquisition module (101) is used to receive front-end interface requirements input by the user;

[0039] The parsing module (102) is used to parse the front-end interface requirements through the requirement semantic parsing engine and output a structured natural language requirement description;

[0040] The pseudocode generation module (103) is used to call the code big model and query the DSL domain knowledge base based on the natural language requirement description, retrieve the top-K most similar first input results, and select the first input-output pair with a score higher than the first predetermined threshold as a reference sample to return to the code big model to generate front-end pseudocode.

[0041] The code generation module (104) is used to split the front-end pseudocode into component-level pseudocode fragments in the code big model, and query the code domain knowledge base for each pseudocode fragment in turn to retrieve the top-M most similar second input results. Based on the second input results, the second input-output pair with a score higher than the second predetermined threshold is selected as a reference sample and returned to the code big model to generate front-end code fragments.

[0042] The code output module (105) is used to combine various front-end code snippets to generate the final front-end code and render it in real time in the browser.

[0043] The beneficial effects of this disclosure are that, compared with the prior art, this disclosure has the following advantages:

[0044] 1. In this embodiment of the disclosure, front-end pseudocode (deep DSL) is introduced as an intermediate layer to construct a "structured buffer" that accurately describes core information such as UI component types and data models, thereby effectively constraining the generation logic and improving the accuracy of front-end code generation.

[0045] 2. In this implementation, high-scoring samples (input-output pairs) are obtained through a domain knowledge base, which guides large models to generate content following "best practices," effectively avoiding the illusion of large models and improving overall code quality. Simultaneously, it reduces reliance on the model's native capabilities, enabling lightweight or localized large models to generate near-high-quality code, thereby effectively lowering the deployment threshold and improving the economic efficiency of computing resources (similar to DeepSeek's use of the MoE model to reduce computing power consumption).

[0046] 3. In this embodiment, the combination of automatic verification (secondary review) and manual correction (precise fine-tuning) effectively avoids the uncontrollable risks associated with directly relying on LLM to generate code. This approach allows users to have precise control over the entire code generation process, ensuring the reliability of the results while improving the controllability and transparency of the generation process. Furthermore, the verified input-output pairs are stored in a knowledge base, driving dynamic updates and continuously optimizing code generation accuracy.

[0047] In summary, this disclosure significantly improves the accuracy of front-end code generation for large models through a system architecture of "deep DSL + knowledge base + automatic verification". The core concept is to realize the transformation of code generation from "vibe coding" to "viable coding". Attached Figure Description

[0048] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.

[0049] Figure 1 A schematic diagram illustrating a method for generating front-end code for a large model based on a deep DSL and a knowledge base, provided in this embodiment of the disclosure;

[0050] Figure 2 Screenshot of an interface design for a complex form structure interface provided in an embodiment of this disclosure;

[0051] Figure 3 This is a schematic diagram of the component structure defined by the front-end pseudocode in an embodiment of the present disclosure;

[0052] Figure 4 A schematic diagram illustrating another method for generating front-end code for a large model based on a deep DSL and knowledge base, provided in this embodiment of the disclosure;

[0053] Figure 5 This is a schematic diagram of a large model front-end code generation system based on deep DSL and knowledge base, provided as an embodiment of this disclosure.

[0054] The accompanying drawings have illustrated specific embodiments of this disclosure, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concepts of this disclosure to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0055] The present disclosure will be further described below with reference to the accompanying drawings. The following embodiments are only used to illustrate the technical solutions of the present disclosure more clearly, and should not be used to limit the scope of protection of the present disclosure.

[0056] Terminology Explanation:

[0057] DSL (Domain-Specific Language): A structured, machine-readable intermediate representation language. It acts as a bridge between user interface requirements (natural language / design drafts) and final code (such as HTML / CSS / JS), aiming to describe the structure, data, and interactions of the final code in JSON or similar formats, providing a standardized intermediate layer representation for the generation of the final code.

[0058] Front-end pseudocode: A deep domain-specific language (DSL) for front-end development. Its key feature is that it uses built-in domain knowledge and business semantics to provide highly semantic descriptions of the interface and logic from four dimensions: components, data, attributes, and styles. This directly guides and strictly constrains the front-end code generation process, achieving a more accurate and consistent final code transformation.

[0059] Front-end page component: refers to an independent and reusable unit (such as Form, Input, Button, etc.) that encapsulates the structure, style and interaction logic of the user interface (UI).

[0060] MCP (Model Context Protocol): An open, standardized communication specification that allows large language models (LLMs) to securely and dynamically interact and integrate with external data sources, tools, and services at runtime.

[0061] Example 1

[0062] like Figure 1 As shown, this disclosure proposes a method for generating front-end code for a large model based on a deep DSL and a knowledge base, including:

[0063] Step S1: Receive the user's input of the front-end interface requirements;

[0064] Step S2: The front-end interface requirements are parsed using a requirement semantic parsing engine, and a structured natural language requirement description is output.

[0065] Step S3: Based on the natural language requirement description, call the code big model and query the DSL domain knowledge base to retrieve the Top-K most similar first input results, and select the first input-output pair with a score higher than the first predetermined threshold as a reference sample to return to the code big model to generate front-end pseudocode;

[0066] Step S4: The code big model breaks down the front-end pseudocode into component-level pseudocode fragments, and queries the code domain knowledge base for each pseudocode fragment in turn to retrieve the Top-M most similar second input results. Based on the second input results, it selects second input-output pairs with scores higher than the second predetermined threshold as reference examples and returns them to the code big model. The front-end code fragments are then generated through the code big model.

[0067] Step S5: Combine the various front-end code snippets to generate the final front-end code, and render it in real time in the browser.

[0068] In this embodiment of the disclosure, the large code model can be a general-purpose large language model with code capabilities, such as qwen-code, qwen2.5-vl, kimi2, claude-sonnet, etc.

[0069] In one alternative implementation, the input for the front-end interface requirements is in the form of UI design images.

[0070] Users can submit interface design images (exported images or screenshots) by dragging and dropping files or clicking upload in the file upload area. Figure 2 shows a screenshot of the interface design for a complex form structure.

[0071] Correspondingly, the requirement semantic parsing engine specifically adopts a multimodal recognition model (such as GPT-4V, Qwen2.5-VL, etc.) to convert interface (UI) design images into structured natural language requirement descriptions.

[0072] In another alternative implementation, the input of front-end interface requirements takes the form of design draft files.

[0073] Users can submit design files (such as .fig or .sketch files) by dragging and dropping files or clicking upload in the file upload area.

[0074] Correspondingly, the requirement semantic parsing engine uses a dedicated design software parsing tool (such as Figma or Sketch parsing tools). With the help of this dedicated design software parsing engine, the system automatically converts the requirement into a structured natural language description.

[0075] In this embodiment of the disclosure, front-end pseudocode is used as an intermediate layer description for the final code generation. Specifically, the front-end pseudocode is in JSON or Markdown format. According to... Figure 2 The interface requirements shown are illustrated in the following pseudocode example:

[0076] {

[0077] "type": "Form",

[0078] "columns": 2,

[0079] "components": [

[0080] {

[0081] "type": "Input",

[0082] "label": "File type",

[0083] "required": true,

[0084] "defaultValue": "Construction Commencement Order"

[0085] },

[0086] {!-- Other components omitted... --} ]

[0088] }

[0089] Based on the above pseudocode example, the output front-end code is shown below:

[0090]

[0091]

[0092] <label>File type * < / label>

[0093] <input type="text" value="工程开工令" required>

[0094]

[0095] <!-- Omit other components... -->

[0096]

[0097] In one optional implementation, the component structure defined in the front-end pseudocode includes component type, data model, component attributes, and component styles, see [reference]. Figure 3 .

[0098] 1) Component types: Provide precise semantic tags (such as Form, Input, Button) to clearly define the type and hierarchical relationship of interface elements;

[0099] 2) Data model with built-in state management logic to clearly distinguish between static properties (props), dynamic states (state), and default value bindings (defaultValue);

[0100] 3) Component properties: Define the constraints of properties and define specific properties for different component types (e.g., Input has placeholder, Select has optionsSource).

[0101] 4) Component styles: Used for structured style descriptions (providing structured styles such as width, height, and color).

[0102] In this embodiment of the disclosure, by introducing front-end pseudocode as an intermediate layer description, a "structured buffer" is constructed for the code output of the large model. This buffer can constrain the generation logic, thereby improving the generation accuracy of the front-end code.

[0103] Unlike other types of DSLs, front-end pseudocode, as a deep DSL, can accurately describe the type, data model, component attributes, and component styles of UI components. As an input standard for generating front-end code from a large model, it significantly improves the accuracy and consistency of front-end code generation and avoids generation deviations caused by ambiguity in natural language.

[0104] Example 2

[0105] Based on Example 1, step S3 involves calling the large code model and querying the DSL domain knowledge base based on the natural language requirement description, retrieving the Top-K most similar first input results, and selecting first input-output pairs with scores higher than a first predetermined threshold as reference examples to return to the large code model, generating front-end pseudocode, including:

[0106] S31. The code big model calls the first query module through the MCP protocol to convert the natural language requirement description into a vector and retrieve the Top-K most similar first input vectors in the DSL vector library.

[0107] S32. The first query module retrieves the associated first input-output pairs and verification scores from the DSL relational database based on the Top-K first input vectors, selects the first input-output pairs with scores higher than the first predetermined threshold, and returns the selected first input-output pairs as reference examples to the large code model.

[0108] S33. Combine reference examples with the current natural language requirements description to construct prompt words, and generate front-end pseudocode through the code big model.

[0109] For each first input-output pair, the first input represents the natural language requirement description, the first output represents its corresponding front-end pseudocode, and the first input vector is the semantic vector of the natural language requirement description.

[0110] The first predetermined threshold can be dynamically configured. Preferably, the first predetermined threshold is set to 85 points.

[0111] Specifically, the DSL domain knowledge base consists of a DSL vector library and a DSL relation library.

[0112] The DSL vector library supports semantic retrieval matching of the Top-K most similar first input vectors; it stores key information for matching, including the first input vectors and the ID number of the corresponding complete input-output pair record in the DSL relational library.

[0113] The DSL relational database stores complete first input / output pairs, and also associates and stores ID numbers, ratings, contributor information (such as AI-generated or manually corrected), version numbers, and other content.

[0114] Optionally, in step S4, the code big model breaks down the front-end pseudocode into component-level pseudocode fragments, and for each pseudocode fragment, sequentially queries the code domain knowledge base to retrieve the Top-M most similar second input results. Based on the second input results, it selects second input-output pairs with scores higher than a second predetermined threshold as reference examples and returns them to the code big model. The code big model then generates front-end code fragments, including:

[0115] S41. The front-end pseudocode is split into component-level pseudocode fragments. For each pseudocode fragment, the code big model calls the second query module through the MCP protocol to convert the pseudocode fragment into a vector and retrieve the Top-M most similar second input vectors in the code vector library.

[0116] S42. The second query module retrieves the associated second input-output pairs and verification scores from the code relation library based on the Top-M second input vectors, selects the second input-output pairs with scores higher than the second predetermined threshold, and returns the selected second input-output pairs as reference examples to the code big model.

[0117] S43. Combine the reference example with the current front-end pseudocode snippet to construct prompt words, and generate front-end code snippets through the code big model.

[0118] In each second input-output pair, the second input represents the front-end pseudocode fragment, the second output represents its corresponding front-end code fragment, and the second input vector is the semantic vector of the front-end pseudocode fragment.

[0119] The second predetermined threshold can be dynamically configured. Preferably, the second predetermined threshold is set to 85 points.

[0120] Specifically, the code domain knowledge base consists of a code vector library and a code relation library.

[0121] The code vector library supports semantic retrieval matching of the Top-M most similar second input vectors; it stores key information for matching, including the second input vectors and the ID number of the corresponding complete input-output pair record in the code relation library.

[0122] The code relationship library stores complete second input-output pairs, and also associates and stores ID numbers, ratings, contributor information (such as AI-generated or manually corrected), version numbers, and other information.

[0123] In this embodiment of the disclosure, high-scoring samples (input-output pairs) are obtained through a domain knowledge base, which can guide large models to generate content in accordance with "best practices," effectively avoiding the illusion of large models. This makes the generated front-end code superior to the average level of hand-coded code in terms of performance, accuracy, and maintainability, thereby improving the overall code quality.

[0124] Furthermore, by combining a large model generation mechanism with a domain knowledge base, the reliance on the model's native capabilities is significantly reduced. Even when using lightweight or localized large models with limited code capabilities (such as Qwen2.5-VL), near-high-quality code outputs can still be generated, effectively lowering the deployment threshold and improving the economic efficiency of computing resources. This effect is similar to DeepSeek's use of MoE (Mixture of Experts) models to reduce computing power consumption.

[0125] Example 3

[0126] Based on Examples 1-2, this embodiment further includes the following verification and correction loop between steps S3 and S4:

[0127] S3a. Send the front-end pseudocode generated by the large model to the DSL verification module;

[0128] The S3b and DSL verification modules perform pseudocode syntax and semantics verification, static structure and function verification and scoring;

[0129] S3c: If the score is not lower than the first preset value, the verification is passed and the process proceeds to step S4.

[0130] If the score is lower than the first preset value, the manual correction process is triggered, and the correction result is received and sent to the DSL verification module. If the score is lower than the first preset value, the manual correction process is initiated again until the score is not lower than the first preset value and the verification is passed. The final corrected front-end pseudocode is then returned to the large model and prompted to apply it directly.

[0131] Understandably, in the subsequent step S4, when the large code model generates front-end code, it will be based on the directly generated front-end pseudo-code or the front-end pseudo-code that has been manually corrected.

[0132] Example 4

[0133] Based on Example 3, this embodiment further includes: associating the verified front-end pseudocode with its corresponding natural language requirement description to form a first input-output pair, and storing it in the DSL domain knowledge base in association with the scoring information.

[0134] Specifically, the complete record, including the complete input-output pair (i.e., the natural language requirement description and its corresponding front-end pseudocode), along with the associated storage ID number, rating, contributor information (such as AI-generated or manually corrected), version number, etc., is stored in the DSL relational database. The input is converted into a semantic vector and associated with the ID number of the corresponding complete first input-output pair record in the DSL relational database, and then stored in the DSL vector database.

[0135] This embodiment achieves driven updates to the knowledge base by filtering high-scoring DSL input / output pairs and storing them in the DSL domain knowledge base.

[0136] Example 5

[0137] Based on Examples 1-4, this embodiment further includes the following verification and correction loop between step S4 and step S5:

[0138] S4a. Send the front-end code snippet generated by the large model to the code verification module;

[0139] S4b, the code verification module verifies and scores the front-end code's syntax, semantics, static structure, and functionality.

[0140] S4c: If the score is not lower than the second preset value, the verification is passed and the front-end code snippet is used in the final front-end code output;

[0141] S4d: If the score is lower than the second preset value, a manual correction process is triggered, and the correction result is received and sent to the code verification module. If the score is lower than the second preset value, the manual correction process is initiated again until the score is not lower than the second preset value and the verification is passed. The finally corrected front-end code snippet is then used for the final front-end code output.

[0142] Example 6

[0143] Based on Example 5, this embodiment further includes: associating the verified front-end code fragment with its corresponding front-end pseudo-code fragment to form a second input-output pair, and storing it in the code domain knowledge base in association with the scoring information.

[0144] Specifically, the complete record, including the complete input-output pair (i.e., the front-end pseudocode snippet and its corresponding front-end code snippet), along with the associated storage ID number, rating, contributor information (such as AI-generated or manually corrected), version number, etc., is stored in the code relation library. The input is converted into a semantic vector and associated with the ID number of the corresponding complete second input-output pair record in the code relation library, and then stored in the code vector library.

[0145] The first input-output pair and the second input-output pair are stored in the domain knowledge base, which can be done synchronously or asynchronously.

[0146] For example, both the first and second preset values ​​are set to 80 points. If the total score is >= 80 points, proceed to the next step and / or the data will be automatically entered into the database. If the total score is < 80 points, it is determined to be a result to be optimized, and the task is routed to the manual correction process. After manual correction, the verification and data entry process can be repeated and / or the data will be entered into the database again.

[0147] See Figure 4 The diagram illustrates the process flow of the large model front-end code generation method based on deep DSL and knowledge base provided in Example 6.

[0148] In this embodiment, by introducing a deep DSL intermediate layer description and combining automatic verification with manual correction, dual safeguards are achieved for the code generation process. Specifically, the automatic verification mechanism undertakes the task of secondary review, while manual correction is used for fine-tuning, thereby effectively avoiding the uncontrollable risks associated with directly relying on LLM to generate code. This approach allows users to have precise control over the entire code generation process, ensuring the reliability of the results while improving the controllability and transparency of the generation process.

[0149] In addition, the system will store the verified input and output pairs into the domain knowledge base, driving the knowledge base to be updated dynamically, thereby continuously optimizing the accuracy of code generation.

[0150] Example 7

[0151] The DSL verification module is implemented by a pseudocode rule engine.

[0152] The pseudocode rules engine includes a standard JSON / Markdown parser and records a list of pseudocode attributes, required fields, an abstract syntax tree (AST), and front-end interaction test cases (events, interfaces, and interface specifications). It has functions such as syntax and semantic verification (including syntax compliance checks and attribute compliance checks), static structure verification, and functional verification.

[0153] Understandably, front-end interaction test cases can be automatically generated based on Abstract Syntax Tree (AST) processing.

[0154] Optionally, users can maintain the pseudocode rule engine content through a configuration entry. For example, adding a shopping cart component requires configuring the pseudocode attribute list, required fields, abstract syntax tree (AST), and front-end interaction test cases (events, interfaces, and interface specifications) for the shopping cart component. Test cases for the same component are then synchronously applied to the next code verification module.

[0155] It is evident that the pseudocode rule engine reflects both the functionality and business logic of the components.

[0156] Specifically, the DSL verification module performs pseudocode syntax and semantics, static structure, and functional verification and scoring as follows:

[0157] 1. Syntactic and semantic verification:

[0158] 1) Grammar compliance check

[0159] The pseudocode is parsed using a standard JSON / Markdown parser to ensure that it is a valid, malformed JSON / Markdown file.

[0160] Any error that causes parsing to fail (such as missing quotes, mismatched parentheses, trailing commas, incorrect data types, etc.) is considered a failure (i.e., the return value is 0).

[0161] 2) Attribute compliance check

[0162] The attribute list of the pseudocode rule engine is used for verification. If an unknown field or a field value does not conform to the preset type and range, it is considered a failure (i.e., the return value is 0).

[0163] For example, checkpoint 1: Does the top-level field (such as type, class, defaultValue, id) exist and is of the correct data type (such as type being a string)?

[0164] Checkpoint 2: Validate the validity of predefined enumeration values ​​(e.g., the value of the type field must be one of ["Input", "Select", "Group", ...]).

[0165] The validation is performed against the required fields of the pseudocode rule engine. The absence of any required field is considered a failure (i.e., the return value is 0).

[0166] 2. Static structural verification:

[0167] The algorithm is verified against the abstract syntax tree (AST) of the pseudocode rule engine. During the check, for each error found (such as illegal nesting, reference errors, etc.), detailed information about each error is output, including rule ID, severity, and location.

[0168] 3. Functional verification:

[0169] Run the preset test cases corresponding to the pseudocode to verify the accuracy of the function.

[0170] Record the number of verifications passed Total number of test cases executed .

[0171] The test case types include test cases for correct event settings (e.g., some areas are clickable, while others are not) and test cases for correct event interaction (e.g., where asynchronous access to the service interface API is required).

[0172] 4. Scoring Calculation:

[0173] The scoring module comprehensively verifies the results and calculates the total score using the following formula:

[0174] Total score = Syntax and semantic compliance score ( - Deductions for static structural inspection () ) + Functional accuracy score ( );

[0175] Among them, the grammatical and semantic compliance score ( ): Directly take the binary result of the syntax and semantic compliance check and multiply it by 50. That is... = Syntax and semantic compliance check result * 50.

[0176] If any one of the syntax and semantic compliance check items fails, the result of this syntax and semantic compliance check is failure (corresponding value 0). Only when all check items pass, the result of this syntax and semantic compliance check is success (corresponding value 1).

[0177] Static structure inspection deduction ( : This refers to the cumulative deduction of points for all errors in this check. For each error (such as illegal nesting, reference errors, etc.), the corresponding points are deducted according to the predefined severity level (e.g., 10 points for major errors, 5 points for minor errors, and 2 points for minor errors).

[0178] Functional accuracy score ( ): Calculate the pass rate based on the test cases and multiply it by 50. = ( / ) *50.

[0179] This embodiment ensures, through pseudocode syntax and semantics, static structure, and functional verification, that the generated pseudocode is a JSON / Markdown object with correct structure, valid type, and conforms to syntax specifications, and can be parsed by the code generation module. On the other hand, it ensures that the generated pseudocode accurately expresses the expected interface requirements and business logic, and that it can correctly implement functions, pass test cases, and remain consistent with user requirements after being converted into real code.

[0180] Example 8

[0181] The code verification module performs and scores the front-end code's syntax, semantics, static structure, and functionality. The specific steps are as follows:

[0182] Call a static syntax analysis tool to perform syntax and semantic verification and static structure verification on the front-end code.

[0183] 1. Syntactic and semantic verification:

[0184] 1) Syntax compliance check: Any error that causes syntax parsing to fail (such as missing quotes, mismatched parentheses, trailing commas, incorrect data types, etc.) will return a failure result (i.e., a return value of 0).

[0185] 2) Attribute Compliance Check: If an unknown field or a field value does not conform to the preset type and range, it is considered a failure (i.e., the return value is 0). Check required fields; if any required field is missing, it is considered a failure (i.e., the return value is 0).

[0186] 2. Static structural inspection:

[0187] The detection includes issues such as illegal nesting, infinite loops, and incorrect references. For each error detected (such as illegal nesting, infinite loops, or incorrect references), detailed information about the error is output, including the rule ID, severity, and location.

[0188] This embodiment can use existing general-purpose static parsing tools, such as ESLint, TypeScript compilers, etc., and this disclosure does not limit it.

[0189] 3. Functional verification:

[0190] Run the preset test cases corresponding to the target component to verify the accuracy of the function.

[0191] Record the number of verifications passed Total number of test cases executed .

[0192] The test case types include test cases for correct event settings (e.g., some areas are clickable, while others are not) and test cases for correct event interaction (e.g., where asynchronous access to the service interface API is required).

[0193] 4. Scoring Calculation:

[0194] The total score is calculated based on the comprehensive evaluation results of the scoring module, using the following formula:

[0195] Total score = Syntax and semantic compliance score ( - Deductions for static structural inspection () ) + Functional accuracy score ( );

[0196] Among them, the grammatical and semantic compliance score ( ): Directly take the binary result of the syntax and semantic compliance check and multiply it by 50. That is... = Syntax compliance check result * 50.

[0197] If any one of the syntax and semantic compliance check items fails, the result of this syntax and semantic compliance check is failure (corresponding value 0). Only when all check items pass, the result of this syntax and semantic compliance check is success (corresponding value 1).

[0198] Static structure inspection deduction ( : This refers to the cumulative deduction of points for all errors in this check. For each error (such as illegal nesting, reference errors, etc.), the corresponding points are deducted according to the predefined severity level (e.g., 10 points for major errors, 5 points for minor errors, and 2 points for minor errors).

[0199] Functional accuracy score ( ): Calculate the pass rate based on the test cases and multiply it by 50. = ( / ) *50.

[0200] This embodiment ensures that the generated front-end code is grammatically compliant, correctly implements interaction logic, and is consistent with user needs through code syntax and semantics, static structure, and functional verification.

[0201] Example 9

[0202] like Figure 5 As shown, this disclosure proposes a large model front-end code generation system 100 based on deep DSL and knowledge base, used to run the large model front-end code generation method based on deep DSL and knowledge base as described in Embodiments 1-8. The system includes:

[0203] The acquisition module 101 is used to receive user input for the front-end interface requirements;

[0204] The parsing module 102 is used to parse the front-end interface requirements through the requirement semantic parsing engine and output a structured natural language requirement description.

[0205] The pseudocode generation module 103 is used to call the code big model and query the DSL domain knowledge base based on the natural language requirement description, retrieve the top-K most similar first input results, and select the first input-output pair with a score higher than a first predetermined threshold as a reference sample to return to the code big model to generate front-end pseudocode.

[0206] The code generation module 104 is used to split the front-end pseudocode into component-level pseudocode fragments in the code big model, and for each pseudocode fragment, query the code domain knowledge base in sequence to retrieve the top-M most similar second input results, and select second input-output pairs with scores higher than a second predetermined threshold as reference examples to return to the code big model, and generate front-end code fragments through the code big model.

[0207] The code output module 105 is used to combine various front-end code snippets to generate the final front-end code and render it in real time in the browser.

[0208] The first verification and correction module 106 is used to automatically verify and manually correct the front-end pseudocode generated by the pseudocode generation module 103, and output the verified front-end pseudocode to the code generation module 104.

[0209] The first update module 107 is used to associate the validated front-end pseudocode with its corresponding natural language requirement description to form a second input-output pair, and then associate it with the scoring information and store it in the DSL domain knowledge base.

[0210] The second verification and correction module 108 is used to automatically verify and manually correct the front-end code fragments generated by the code generation module 104, and output the verified front-end code fragments to the code output module 105.

[0211] The second update module 109 is used to associate the validated front-end code snippet with its corresponding front-end pseudo-code snippet to form a second input-output pair, and associate it with the scoring information to store it in the code domain knowledge base.

[0212] In this embodiment of the disclosure, the basic implementation framework uses PocketFlow to connect multiple module nodes and actions to form a knowledge base optimization task route.

[0213] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0214] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0215] It should be understood that the above embodiments are only used to illustrate the technical solutions of this disclosure, and not to limit them; although this disclosure has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this disclosure.

Claims

1. A deep DSL and knowledge base based large model front-end code generation method, characterized in that, Comprise: S1, receiving user input front-end interface requirements; S2, the front-end interface requirements are parsed through the requirement semantic analysis engine, and a structured natural language requirement description is output; S3, based on the natural language requirement description, calling a code large model and querying a DSL domain knowledge base, retrieving Top-K most similar first input results, and selecting a first input-output pair with a score higher than a first predetermined threshold based on the first input results as reference examples to return to the code large model to generate front-end pseudo code; S4, the code large model splits the front-end pseudo code into component-level pseudo code segments, and queries the code domain knowledge base for each pseudo code segment in turn, retrieves Top-M most similar second input results, and selects a second input-output pair with a score higher than a second predetermined threshold based on the second input results as reference examples to return to the code large model to generate front-end code segments through the code large model; S5, combining each front-end code segment to generate the final front-end code and rendering it in real time in the browser; The first input result is a first input vector, and the first input vector is a semantic vector of the natural language requirement description; for each first input-output pair, the first input represents the natural language requirement description, and the first output represents the front-end pseudo code corresponding to the first input; The second input result is a second input vector, and the second input vector is a semantic vector of the front-end pseudo code segment; for each second input-output pair, the second input represents the front-end pseudo code segment, and the second output represents the front-end code segment corresponding to the second input.

2. The deep DSL and knowledge base based large model front-end code generation method according to claim 1, characterized in that, Between step S3 and step S4, further comprising: S3a, sending the front-end pseudo code generated by the large model to the DSL verification module; S3b, the DSL verification module performs syntax and semantics, static structure and function verification and scoring of the pseudo code; S3c, if the score is not lower than the first preset value, the verification is passed and step S4 is entered; S3d, if the score is lower than the first preset value, an artificial correction process is triggered, and the correction result is received and sent to the DSL verification module; if the score is lower than the first preset value, the artificial correction process is entered again until the score is not lower than the first preset value, the verification is passed, and the finally corrected front-end pseudo code is returned to the large model and a direct application is prompted.

3. The deep DSL and knowledge base based large model front-end code generation method according to claim 2, characterized in that, The front-end pseudo code that passes the verification is associated with the corresponding natural language requirement description to form a first input-output pair, and is stored in association with the score information in the DSL domain knowledge base.

4. The deep DSL and knowledge base based large model front-end code generation method according to claim 1, characterized in that, Between step S4 and step S5, further comprising: S4a, sending the front-end code segment generated by the large model to the code verification module; S4b, the code verification module performs syntax and semantics, static structure and function verification and scoring of the front-end code; S4c, if the score is not lower than the second preset value, the verification is passed and the front-end code segment is used for final front-end code output; S4d, if the score is lower than the second preset value, an artificial correction process is triggered, and the correction result is received and sent to the code verification module; if the score is lower than the second preset value, the artificial correction process is entered again until the score is not lower than the second preset value, the verification is passed, and the finally corrected front-end code segment is used for final front-end code output.

5. The deep DSL and knowledge base based large model frontend code generation method according to claim 4, characterized in that, The front-end code fragment passing the verification is associated with the corresponding front-end pseudo code fragment to form a second input-output pair, and is stored in association with the score information to the code domain knowledge base.

6. The deep DSL and knowledge base based large model frontend code generation method according to claim 1, characterized in that, The step S3 specifically comprises: S31, the code large model calls the first query module through the MCP protocol, converts the natural language requirement description into a vector, and retrieves the top-K most similar first input vectors in the DSL vector library; S32, the first query module acquires the associated first input-output pair and the checking score from the DSL relationship database according to the top-K first input vectors, selects the first input-output pair with a score higher than a first predetermined threshold, and returns the selected first input-output pair to the code large model as a reference example; S33, the prompt word is constructed in combination with the reference example and the current natural language requirement description, and the front-end pseudo code is generated through the code large model.

7. The deep DSL and knowledge base based large model frontend code generation method according to claim 1, characterized in that, The step S4 specifically comprises: S41, the front-end pseudo code is split into pseudo code fragments at the component level, and for each pseudo code fragment, the code large model calls the second query module through the MCP protocol, converts the pseudo code fragment into a vector, and retrieves the top-M most similar second input vectors in the code vector library; S42, the second query module acquires the associated second input-output pair and the checking score from the code relationship database according to the top-M second input vectors, selects the second input-output pair with a score higher than a second predetermined threshold, and returns the selected second input-output pair to the code large model as a reference example; S43, the prompt word is constructed in combination with the reference example and the current front-end pseudo code fragment, and the front-end code fragment is generated through the code large model.

8. The deep DSL and knowledge base based large model frontend code generation method according to claim 1, characterized in that, The front-end pseudo code is in JSON or Markdown format.

9. The deep DSL and knowledge base based large model frontend code generation method according to claim 1, characterized in that, The code large model adopts a general large language model with code capability.

10. A deep DSL and knowledge base based large model frontend code generation system for running the deep DSL and knowledge base based large model frontend code generation method according to any one of claims 1-9, characterized in that, It comprises: An acquisition module (101) configured to receive a front-end interface requirement input by a user; An analysis module (102) configured to analyze the front-end interface requirement through a requirement semantic analysis engine and output a structured natural language requirement description; A pseudo code generation module (103) configured to call a code large model and query a DSL domain knowledge base based on the natural language requirement description, retrieve top-K most similar first input results, select a first input-output pair with a score higher than a first predetermined threshold as a reference example, return the code large model, and generate front-end pseudo code; A code generation module (104) configured to split the front-end pseudo code into pseudo code fragments at the component level, and for each pseudo code fragment, query the code domain knowledge base in turn, retrieve top-M most similar second input results, select a second input-output pair with a score higher than a second predetermined threshold as a reference example, return the code large model, and generate a front-end code fragment through the code large model; A code output module (105) configured to combine each front-end code fragment to generate a final front-end code, and render the front-end code in real time in a browser.

Images