Low-code page generation method, system and equipment and storage medium

Abstract

The invention relates to the technical field of artificial intelligence, and particularly provides a low-code page generation method, system and device and a storage medium, and the method comprises the steps: receiving a natural language design input of a user, carrying out semantic analysis, and then generating a structured intention map which comprises intention nodes, semantic attributes and dependency relationships among the nodes; based on an intention-code bidirectional mapping mechanism, generating an intermediate code with a semantic identifier according to the intention graph; executing code rendering to generate a page effect, and capturing page vision, structure and interaction features to generate an actual effect feature vector; comparing the vector with an expected feature vector in the intention map to generate a difference vector; and on the basis of the difference vector, parameters of the design intention model and the bidirectional mapping mechanism are adjusted through a closed-loop correction model, and self-adaptive optimization of subsequent code generation is realized. According to the method, by constructing a real-time closed loop of'design intention-code-effect ', the problems of intention fuzziness and feedback lag in a natural language generation webpage are effectively solved.

Description

Technical Field

[0001] This invention belongs to the field of artificial intelligence technology, specifically relating to a low-code page generation method, system, device, and storage medium. Background Technology

[0002] Currently, low-code technology for generating web pages using natural language is booming, but existing methods generally rely on a one-way conversion model from natural language to code. This method has inherent flaws: First, the user's vague design intent is difficult to accurately parse into structured layout and logic, leading to generated results that do not meet expectations. Second, there is a lack of effective real-time feedback mechanisms after code generation. When page rendering deviates, the system cannot automatically understand the root cause of the problem and make corrections, relying solely on users to manually modify descriptions or directly adjust the code, a cumbersome and inefficient process. Furthermore, because the generated code lacks semantic connection with the original design intent, the reverse tracing link between "effect-intent" is broken, rendering the system lacking self-learning and adaptive optimization capabilities. Therefore, the industry urgently needs an intelligent generation method that can achieve a real-time closed loop of "design-generation-feedback-correction". Summary of the Invention

[0003] In view of the above-mentioned shortcomings of the prior art, the present invention provides a low-code page generation method, system, device and storage medium to solve the above-mentioned technical problems.

[0004] In a first aspect, the present invention provides a low-code page generation method, comprising: The system receives natural language design text input by the user, performs semantic parsing on the natural language design text, and generates a structured intent graph, which includes multiple intent nodes, semantic attributes of each node, and dependencies between nodes. Based on a two-way mapping mechanism between intent and code, intermediate code with semantic identifiers is generated according to the intent graph; The intermediate code is executed to render and generate page effects, and the visual, structural, or interactive features of the page effects are captured to generate actual effect feature vectors. The actual effect feature vector is compared with the expected feature vector in the intent map to generate a difference vector; The parameters of the structured design intent model and the bidirectional mapping mechanism are adjusted based on the difference vector to adaptively optimize subsequent code generation.

[0005] In one optional implementation, natural language design text input by a user is received, and semantic parsing of the natural language design text is performed to generate a structured intent graph, including: The natural language design text is processed by a dedicated semantic parser, which is based on a large language model fine-tuned for the intent recognition task. One or more semantic units are identified and extracted from the text, and each semantic unit is mapped to an intent node, which corresponds to a layout component, interactive element or style theme on the page; One or more semantic attributes are attached to each intent node, the semantic attributes including at least one of size, position, color, data binding fields, or event triggering conditions; Establish dependencies among multiple intent nodes, wherein the dependencies include at least one of hierarchical inclusion relationships, logical sequence relationships, or style inheritance relationships; The intent nodes, their corresponding semantic attributes, and the dependencies between nodes are organized together into a machine-readable intent graph, which serves as an intermediate representation layer connecting natural language and code generation.

[0006] In an optional implementation, establishing dependencies among the plurality of intent nodes includes: Identify the logical relationships between the intent nodes, wherein the logical relationships include at least one of the following: hierarchical containment relationship: used to represent the parent-child container relationship between user interface components, and to generate the corresponding document object model tree structure based on this relationship; logical sequence relationship: used to represent the sequence or conditional dependency between interactive actions, where the output of one node serves as the input of another node; style inheritance relationship: used to represent the transmission and overriding of style themes or rules between nodes with specific semantic relationships; The identified logical connections are stored and represented in the intent graph in the form of directed edges or attribute references. When generating code based on the intent graph, the component nesting structure, event handling sequence, or cascading style sheet rules are synthesized according to the dependencies.

[0007] In an optional implementation, based on a bidirectional mapping mechanism between intent and code, intermediate code with semantic identifiers is generated according to the intent graph, including: The mapping engine receives the intent graph, which includes intent nodes, semantic attributes, and dependencies. The mapping engine determines the matching probability between nodes and attributes in the intent graph and predefined code patterns by querying and calculating the intent embedding matrix; Based on the matching probability, select and assemble the corresponding code snippets from the code template library; During the assembly and generation of intermediate code, each code segment is bound to a unique identifier corresponding to its intent node, and this identifier is retained in the generated intermediate code in the form of semantic annotations or custom data attributes, thereby forming the intermediate code with semantic identifiers. The semantic identifier is used to trace the rendering deviation back to a specific intent node in the subsequent effect feedback stage.

[0008] In an optional implementation, executing the intermediate code to render the generated page effect includes: Send the semantically labeled intermediate code to a separate front-end rendering engine; The front-end rendering engine loads and executes the intermediate code in the browser environment, thereby instantiating user interface components, applying cascading style sheet rules and binding interactive event logic. The browser's document object model and rendering engine pipeline transform the page structure, style, and behavior described in the intermediate code into visual page effects.

[0009] In one optional implementation, the visual, structural, or interactive features of the page effect are captured to generate an actual effect feature vector, including: By using an effect monitor, the browser's Document Object Model interface, style calculation interface, or performance observation interface can be called to collect the actual data of the rendered page in a programmatic manner. The actual data collected includes: structural features, including component position, size, and hierarchical relationship obtained through the Document Object Model interface; visual features, including component color, font, and margin style attributes obtained through the style calculation interface; and interactive features, including component response time or state changes obtained through the performance observation interface or event listener.

[0010] The collected structural features, visual features, and interaction features are numerically and normally processed, and combined into a multi-dimensional feature vector of actual effect, which is used for subsequent quantitative comparison with the expected intent.

[0011] In an optional implementation, based on the difference vector, the parameters of the structured design intent model and the bidirectional mapping mechanism are adjusted through a closed-loop correction model, including: The difference vector is input into the difference analysis engine in the closed-loop correction model; The difference analysis engine executes a reverse dependency propagation algorithm, which traces back to the code segment that caused the deviation based on the deviation features indicated by the difference vector, and further maps the semantic identifiers in the code segment back to one or more corresponding intent nodes in the structured design intent model. Based on the correlation between the deviation characteristics and the intent node, the adjustment amount ΔW for the intent node attributes and the weights of the mapping matrix is ​​calculated; Based on the adjustment amount ΔW, perform at least one of the following correction operations: local correction, which includes directly modifying the semantic attributes of the intention nodes related to the bias, or adjusting their corresponding code template parameters; global learning, which includes updating the mapping weight parameters of relevant entries in the intention-code mapping matrix to optimize the overall performance of the model in subsequent generation. The corrected parameters are persisted and applied to the next generation loop, thereby achieving adaptive optimization of the system.

[0012] Secondly, this invention provides a low-code page generation system, comprising: The intent recognition module is used to receive natural language design text input by the user, perform semantic parsing on the natural language design text, and generate a structured intent graph, which includes multiple intent nodes, semantic attributes of each node, and dependencies between nodes. The intent mapping module is used to generate intermediate code with semantic identifiers based on the intent graph through a bidirectional mapping mechanism between intent and code. The page rendering module is used to execute the intermediate code to render and generate page effects, and capture the visual, structural or interactive features of the page effects to generate actual effect feature vectors. The difference calculation module is used to compare the actual effect feature vector with the expected feature vector in the intent map to generate a difference vector; The parameter correction module is used to adjust the parameters of the structured design intent model and the bidirectional mapping mechanism according to the difference vector, so as to adaptively optimize the subsequent code generation.

[0013] Thirdly, a device is provided, comprising: Memory, used to store low-code page generators; A processor is configured to implement the steps of the low-code page generation method as provided in the first aspect when executing the low-code page generation program.

[0014] Fourthly, a computer-readable storage medium is provided, on which a low-code page generation program is stored, wherein when the low-code page generation program is executed by a processor, it implements the steps of the low-code page generation method provided in the first aspect.

[0015] The beneficial effects of this invention are as follows: the low-code page generation method, system, device, and storage medium provided by this invention effectively solve the core pain points in natural language web page generation by constructing a real-time closed loop of "design intent-code-effect". Its beneficial effects are mainly reflected in the following aspects: First, by accurately capturing the user's design intent through a structured intent model, the accuracy and completeness of the generated page are significantly improved; second, relying on the intent-code bidirectional mapping and difference analysis mechanism, self-feedback correction from effect deviation to intent parameters is achieved, greatly reducing the cost of manual debugging; finally, the system has continuous evolution capabilities, continuously optimizing the generation quality through parameter self-adjustment, significantly improving the intelligence level of low-code development and user experience. Attached Figure Description

[0016] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 This is a schematic flowchart of a method according to an embodiment of the present invention.

[0018] Figure 2 This is a schematic block diagram of a system according to an embodiment of the present invention.

[0019] Figure 3 This is a schematic diagram of the structure of a device provided in an embodiment of the present invention. Detailed Implementation

[0020] To enable those skilled in the art to better understand the technical solutions of this invention, the technical solutions of the embodiments of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this invention.

[0021] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this invention pertains. The terminology used herein in the description of the invention is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention.

[0022] The low-code page generation method provided in this embodiment of the invention is executed by a computer device, and correspondingly, the low-code page generation system runs on the computer device.

[0023] Figure 1This is a schematic flowchart illustrating a method according to an embodiment of the present invention. Wherein, Figure 1 The executing entity can be a low-code page generation system. Depending on different requirements, the order of the steps in this flowchart can be changed, and some can be omitted.

[0024] like Figure 1 As shown, the method includes: S1. Receive natural language design text input by the user, perform semantic parsing on the natural language design text, and generate a structured intent graph, wherein the intent graph includes multiple intent nodes, semantic attributes of each node, and dependencies between nodes; S2. Based on the bidirectional mapping mechanism between intent and code, generate intermediate code with semantic identifiers according to the intent graph; S3. Execute the intermediate code to render and generate page effects, and capture the visual, structural, or interactive features of the page effects to generate an actual effect feature vector; S4. Compare the actual effect feature vector with the expected feature vector in the intent map to generate a difference vector; S5. Adjust the parameters of the structured design intent model and the bidirectional mapping mechanism according to the difference vector to adaptively optimize subsequent code generation.

[0025] In one embodiment of the present invention, based on step S1, the following will provide a possible embodiment and describe its specific implementation in a non-limiting manner.

[0026] S101. Construction and Processing of Semantic Parsers First, the system requires a dedicated semantic parser. This parser is not a general-purpose language model, but rather a fine-tuned version of a large language model (such as BERT, GPT, or variants) for intent recognition tasks, using a dataset containing a large corpus of web design descriptions and corresponding UI structure annotations. This fine-tuning process enables the model to accurately identify key design elements such as "login page" and "blue theme" from vague descriptions like "I want a blue-themed login page."

[0027] When a user enters a piece of natural language design text (e.g., "Create a top navigation bar with a three-column content area below it and a submit button"), the fine-tuned parser is invoked. It performs tokenization, semantic understanding, and named entity recognition and relation extraction on the input text, identifying and extracting multiple semantic units from it.

[0028] S102. Generation of Intent Nodes and Semantic Attributes Each identified semantic unit will be mapped to an intent node. These nodes are the basic units of design intent, directly corresponding to specific elements in the final page: During the semantic parsing process, the system identifies and maps design elements one by one: the user-described "top navigation bar" is instantiated as a Header node, the "three-column layout content area" is instantiated as a ThreeColumnLayout node, and the "submit button" is instantiated as a SubmitButton node.

[0029] The system then attaches one or more semantic attributes to each intent node to quantify its design constraints. These attributes are stored as key-value pairs: Attach attributes to the Header node: {"position":"top","backgroundColor":"blue"}.

[0030] Attach attributes to ThreeColumnLayout nodes: {"layoutType":"flex","columns":3}.

[0031] Attach attributes to the SubmitButton node: {"type":"button","event":"onClick"}.

[0032] S103. Dependency Establishment and Graph Representation Next, the system establishes dependencies between multiple intent nodes, which is crucial for forming complete design logic. This step includes: Identifying logical relationships: The system analyzes the semantics between nodes and identifies three core relationships: Hierarchical containment relationships: used to construct the parent-child structure of the UI. For example, identifying a ThreeColumnLayout node as a sibling of the Header node, and the three content sections as children of the ThreeColumnLayout node. This relationship will be directly used to generate the correct Document Object Model (DOM) tree structure.

[0033] Logical sequence of events: This describes the interaction logic. For example, recognizing that the onClick event of the SubmitButton node depends on the data validation nodes of the input fields within the form. This relationship will be used to synthesize the correct sequence of event handling.

[0034] Style inheritance: Used to manage style rules. For example, it identifies all child nodes under a ThreeColumnLayout node that inherit its font and margin style themes. This relationship will be used to generate efficient Cascading Style Sheets (CSS) rules.

[0035] Graph-based storage: These identified logical relationships are stored and represented in the intent graph in the form of directed edges (such as parent-child, triggered-by) or attribute references (such as parentId:"layout-1"). Ultimately, all intent nodes, semantic attributes, and dependencies are organized into a complete graph-structured data model—the intent graph.

[0036] S104. Downstream Applications This intent graph, serving as an intermediate representation layer connecting natural language and code generation, will be directly invoked by the subsequent code generation engine. During code generation, the engine will strictly adhere to the dependencies in the graph to synthesize the nested structure of components, the sequence of event handling, and style rules, ensuring that the final generated page is highly consistent with the user's design intent in terms of structure, behavior, and visuals.

[0037] In one embodiment of the present invention, based on step S2, the following will provide a possible embodiment and describe its specific implementation in a non-limiting manner.

[0038] S201. Input and Initialization of the Mapping Engine The mapping engine receives an intent graph as input from the upstream structured design intent model. This graph contains a complete set of intent nodes, semantic attributes of each node (such as size, color, and event type), and dependencies between nodes (such as hierarchical inclusion and logical sequence).

[0039] S202. Intent-Code Matching Calculation The mapping engine internally maintains a learnable intent embedding matrix and a predefined code template library. The engine achieves precise matching through the following steps: Each node and its attributes in the intent graph are represented in a high-dimensional vector to form an intent feature vector. By querying the intent embedding matrix, the similarity between these intent feature vectors and the feature vectors of various code patterns (such as Vue components, React functional components, and CSS layout templates) in the code template library is calculated. A matching probability distribution is generated based on similarity calculation, and one or more most matching predefined code patterns are determined for each intent node.

[0040] S203. Selection and Assembly of Code Snippets Based on the matching probability results, the mapping engine performs code synthesis: For high-confidence matches (e.g., probability > 85%), directly select the corresponding code template; When there are multiple candidate templates, a weighted fusion strategy is adopted to combine the advantages of multiple templates; Based on the dependencies in the intent map, the code snippets are assembled in the correct logical order and nested structure. For example, the code corresponding to nodes with parent-child relationships will be nested according to the correct DOM structure.

[0041] S204. Embedding and Preservation of Semantic Tags During code assembly, the system assigns a unique identifier (such as a UUID) to each generated code fragment, corresponding to its intent node. This crucial step is implemented in two ways: Semantic comments: Insert specially formatted comments at key locations in the code, such as<!--intent-id:header-nav--> Or / INTENT:primary-button / ; Custom data attributes: Embed the data attribute in the HTML tag, such as<divdata-intent-id="three-column-layout"> .

[0042] These semantic identifiers do not affect the execution of the code, but they provide the necessary metadata for subsequent deviation tracking.

[0043] S205. Closed-loop preparation for downstream applications The generated intermediate code with semantic identifiers is sent to the rendering engine for execution. When the effect monitoring module detects rendering deviations, the system can accurately locate the deviations to specific code snippets by parsing these semantic identifiers, and further backmap them to the corresponding nodes in the intent graph, thereby achieving precise parameter adjustment and closed-loop optimization.

[0044] In one embodiment of the present invention, based on step S3, the following will provide a possible embodiment and describe its specific implementation in a non-limiting manner.

[0045] S301. Execute the intermediate code to render the generated page effect, including: Code distribution and rendering environment initialization: The system sends the semantically tagged intermediate code generated in the previous step (usually a complete front-end project fragment containing HTML, CSS, and JavaScript) to a separate front-end rendering engine. This rendering engine can be a WebView component embedded within the application (such as the Electron framework or mobile WebView) or a headless browser environment, whose core responsibility is to create an isolated and controllable browser runtime environment.

[0046] Code execution and UI instantiation: After receiving the intermediate code, the rendering engine loads it into the browser environment and begins execution. This process triggers a series of standardized web rendering flows: Component instantiation: The browser parses the HTML code and creates a corresponding DOM node tree based on its tags and structure. For example, a...<divdata-intent-id="three-column-layout"> The tag is created as a specific DOM element, thus building the complete structural skeleton of the page in memory.

[0047] Style Application: The engine simultaneously loads and parses CSS rules, applying the visual properties (such as color, layout, and font) defined in the Cascading Style Sheets (CSS) to the corresponding DOM nodes. Elements with semantic markup are rendered according to their preset style rules, ensuring visual consistency with the design intent. Figure 1 To.

[0048] Logic binding: JavaScript embedded in the code is executed to bind event handling logic to interactive UI components (such as forms and buttons). For example, binding an onClick event handler function to a button with data-intent-id="submit-button".

[0049] The final generation of the visual page: Through the browser's rendering engine pipeline, the system integrates the above-mentioned structural, style, and behavioral information, ultimately transforming it into pixel-level visual output. This process includes: Layout calculation: Calculates the exact position and size of each DOM element in the viewport.

[0050] Drawing: Drawing elements with style calculations onto the screen.

[0051] Ultimately, the user sees a fully interactive webpage in the browser window, with its visual effects and interactive behavior all driven by the intermediate code.

[0052] S302. Capture the visual, structural, or interactive features of the page effect to generate an actual effect feature vector, including: 1. Initialization and data acquisition of the effect monitor The system initializes a dedicated effect monitoring module, which is activated after the page has finished rendering. The monitor programmatically collects the actual rendering data of the page by calling a series of standard APIs provided by the browser. Structural Feature Acquisition: The monitor obtains the DOM tree structure of the page through the Document Object Model (DOM) interface. Specific data collected includes: Component position: Obtain the absolute and relative coordinates of the element using methods such as getBoundingClientRect(); Component size: Reads the element's width, height, and other geometric properties; Hierarchical relationship: The parent-child relationship tree of elements is constructed through attributes such as parentNode and children.

[0053] Visual feature acquisition: Using the style calculation interface, methods such as getComputedStyle() are called to obtain the final applied style properties of the element. Color values: Extract the RGB values ​​of background color, font color, border color, etc. Font attributes: Retrieves font family, size, weight, and other layout information; Margin style: Reads the layout spacing values ​​of inner margin, outer margin, border, etc.

[0054] Interactive feature acquisition: through performance observation interfaces and event listening mechanisms: Component response time: Use the PerformanceObserver API to monitor input latency for click events; State changes: Capture component state transitions such as show / hide, enable / disable through custom event listeners.

[0055] 2. Standardization processing of feature data The collected raw data needs to undergo numerical and normalization processing to eliminate differences in units and ensure the comparability of feature vectors: Numerical conversion: Converting non-numerical features into numerical representations. For example, color values ​​are converted into RGB three-channel values; font families are converted into enumerated values ​​through a predefined font mapping table; and state changes are converted into binary flags.

[0056] Normalization: All numerical features are normalized and scaled to a uniform numerical range [0,1]. For example, position coordinates are divided by the viewport size, RGB color values ​​are divided by 255, and response time is compressed to the 0-1 range using the sigmoid function.

[0057] 3. Generation of feature vectors for actual effects The processed structural features, visual features, and interaction features are concatenated in a predetermined order to form a unified multidimensional feature vector of actual effect: V_actual=[x_pos,y_pos,width,height,R,G,B,font_size,padding_top,...,response_time] Each dimension of this feature vector corresponds to a specific page feature, and its value represents the normalized state of that feature. This vectorized representation provides a standardized data foundation for subsequent precise quantitative comparison with expected features in the intent graph.

[0058] In one embodiment of the present invention, based on step S4, the following will provide a possible embodiment and describe its specific implementation in a non-limiting manner.

[0059] S401. Construction of the expected feature vector Before generating the difference vector, the system first needs to construct the expected feature vector from the structured intent graph: The system traverses all intent nodes in the intent graph and extracts the semantic attributes of each node and its dependencies. These design constraints are transformed into numerical features: layout attributes (such as position coordinates and size) are directly converted into normalized values; color themes obtain brightness and chromaticity values ​​through color space conversion formulas (such as RGB to LAB); and interaction logic is transformed into the expected response time threshold through a state machine model.

[0060] Organize all features according to the exact same dimensional order and normalization standard as the actual feature vector to form the expected feature vector: V_expected=[x_pos_expected,y_pos_expected,width_expected,height_expected, R_expected,G_expected,B_expected,font_size_expected,..., response_time_expected].

[0061] S402. Vector Alignment and Difference Calculation The system performs the following comparison process through the difference analysis engine: Dimension alignment: Ensures that the actual feature vector V_actual and the expected feature vector V_expected correspond perfectly in the feature dimensions; Element-wise difference calculation: Perform the difference operation on each corresponding dimension of the two vectors: Δ[i] = V_actual[i] - V_expected[i] (For continuous numerical features) or Δ[i]=I(V_actual[i]≠V_expected[i]) (for discrete categorical features) Where i represents the i-th dimension of the feature vector.

[0062] Weight Adjustment: Based on the differences in importance of different feature types, apply the feature weight matrix W: Δ_weighted[i] = W[i] × Δ[i] Layout and structural features are typically assigned a high weight (e.g., W=0.4), visual style features a medium weight (e.g., W=0.3), and interaction features a relatively low weight (e.g., W=0.3). S403. Generation and Standardization of Difference Vectors Vector assembly: Assemble all weighted difference values ​​in the original dimensional order to form the original difference vector. ΔE_raw=[Δ_weighted[1],Δ_weighted[2],...,Δ_weighted[n]] Standardization: The original difference vector is standardized to eliminate the influence of extreme values. ΔE_normalized=tanh(ΔE_raw) / / Use the hyperbolic tangent function to compress the difference values ​​to the interval [-1,1].

[0063] The resulting standardized difference vector ΔE contains both the direction (sign) and the degree (absolute value) of the deviation, providing a precise and quantifiable basis for subsequent closed-loop correction.

[0064] In one embodiment of the present invention, based on step S5, a possible embodiment will be given below, and its specific implementation will be described in a non-limiting manner.

[0065] S501. Initialization and Input of the Difference Analysis Engine The system initializes the difference analysis engine in the closed-loop correction model, which receives the standardized difference vector ΔE from the previous stage as input. Simultaneously, the engine acquires complete contextual information for the current generation cycle, including: semantically labeled intermediate code, a structured intent graph, and the current state parameters of the intent-code mapping matrix.

[0066] S502. Reverse Dependency Propagation and Root Cause Localization The difference analysis engine executes the reverse dependency propagation algorithm, and the specific process is as follows: Code snippet localization: Based on the significance of the deviations in each dimension of the difference vector ΔE, the code regions that cause the main deviations are identified. For example, when a significant deviation in the layout dimension is detected (ΔE[layout]>0.8), the engine focuses on analyzing the CSS and HTML code snippets that affect the layout.

[0067] Semantic identifier parsing: Extract predefined semantic identifiers (such as data-intent-id="three-column-layout") from the located code snippet, and establish a reverse mapping from code to intent nodes through these identifiers.

[0068] Intent Node Association: Matching semantic identifiers with corresponding nodes in the structured intent graph to accurately determine the set of intent nodes that need adjustment. For example, layout deviations may be associated with multiple container nodes with hierarchical relationships.

[0069] S503. Calculation of parameter adjustment amount The system calculates precise parameter adjustments based on the correlation strength between deviation features and intent nodes. ΔW=α×ΔE×S in: α is the learning rate coefficient, which is dynamically adjusted according to the system operation stage (α=0.1 in the initial stage and α=0.01 in the stable stage). ΔE is the standardized difference vector; S is the correlation strength matrix, representing the contribution of each intent node to a specific feature dimension.

[0070] S504. Implementation of Multi-Level Correction Strategy The core of local correction is "precision surgery," which involves quickly fixing specific problems that have been identified to ensure the output quality of the current generation cycle.

[0071] 1. Correction of semantic attributes for intent nodes: Step 1: Rule-based attribute mapping and replacement The system maintains a "property deviation-correction rule" library. When a deviation of a specific attribute is detected (such as a positive and large ΔW value for width), the system will query this rule library.

[0072] Example: The rule might be defined as: IF attribute="width" AND ΔW > threshold THEN new value = original value * (1 + ΔW * scaling factor). For a width correction from "300px" to "320px", ΔW might correspond to a scaling factor that makes 300 * (1 + ΔW) ≈ 320.

[0073] Advantages: Direct and fast response, suitable for attributes with clear numerical relationships (size, position, quantity, etc.).

[0074] Step 2: Classification-based semantic attribute replacement For enumerated or categorical attributes (such as colorTheme:"blue", layoutType:"flex"), the system maintains a "candidate attribute similarity matrix". When the current attribute is determined to be a mismatch, the system will select a more suitable attribute from the candidate set based on the direction and semantic similarity of ΔW.

[0075] Example: The user intent is "warm," but the system's initial mapping is colorTheme: "blue" (calm), causing the visual feature vector to deviate from the expectation (ΔW is negative). The corrected model will select "warmYellow" from the candidate set ["warmYellow", "softPink", "cozyOrange"], which is closest to the semantic embedding of "warm," to replace "blue."

[0076] 2. Corrections to code template parameters: Step 1: Dynamic adjustment of interpolation variables within the template Description: The code template is not a fixed string, but rather a template containing adjustable parameters (such as {{flex_basis_ratio}}, {{font_size}}). During the correction phase, the system directly adjusts these parameter values ​​bound to specific intent nodes.

[0077] Example: In a three-column layout CSS template, the initial flex-basis is {{ratio1}}%. If the actual proportion of the middle column is too small after rendering, the correction model will calculate a new ratio1_new = ratio1 + ΔW * 100 based on ΔW and update the parameters of the template instance.

[0078] Step 2: Conditional Template Fragment Replacement For structural deviations, the correction operation may involve replacing the entire code snippet. The system pre-defines multiple implementation variants for the same intent node and triggers the replacement based on the deviation type.

[0079] Example: The user describes "element vertically centered". The initial mapped template uses `margin:auto`, but the rendering effect is poor. After the correction model detects layout feature vector deviations, it may trigger template replacement, switching to a template implementation based on Flexbox: `justify-content:center; align-items:center;`.

[0080] The core of global learning is "experience accumulation". By adjusting the parameters of the core mapping model, the system can "learn from its mistakes" in future generation.

[0081] 1. Update the weight parameters of the intent-code mapping matrix: Step 1: Gradient descent update based on backpropagation The mapping process from intent graph to code is viewed as a differentiable computational graph. The vector representation of the intent node (after embedding the matrix) is matched with the vector representation of the code template to generate a matching probability. The difference vector ΔE serves as the loss signal, and the gradients of the embedding matrix and the matching network weights are calculated using the backpropagation algorithm.

[0082] Simplified formula: W_new = W_old - η* L, where L is the loss function consisting of ΔE, and η is the learning rate. L is the gradient. ΔW here represents the combined result of the calculated gradient direction and the learning rate.

[0083] This reduces the weight of biased intent-code mapping paths (such as mapping "atmosphere" to a specific layout) while increasing the weight of validated correct paths.

[0084] Step 2: Confidence-based reinforcement learning update The system maintains a "confidence score" for each path in the mapping matrix. Each generation is considered a "trial and error".

[0085] Update rules: Negative feedback (large bias): Confidence = Confidence * (1 - Attenuation factor). Significantly reduces the confidence of the path leading to the problem.

[0086] Positive feedback (small or no bias): Confidence = Confidence + (1 - Confidence) * Reward Factor. Slowly increase the confidence of well-performing paths until it approaches 1.

[0087] Advantages: More stable, less susceptible to deviations from single abnormalities, and focused on long-term performance.

[0088] 2. Optimize the overall generation strategy of the model: Step 1: Context-Aware Mapping Strategy Selection The system learns which mapping strategy should be prioritized in a specific context. For example, when the "mobile" attribute is detected in the intent graph, a mobile-optimized CSS layout template library should be preferred over a general-purpose template library.

[0089] By mining historical correction records, an association index is established between "contextual features (such as equipment type and project style) -> optimal sub-model / template library", which is then prioritized in subsequent generation.

[0090] Step 2: Disambiguation Optimization of Ambiguous Intents When user input is ambiguous (such as a "modernization" button), the initial mapping may be random or based on common choices. The correction model gradually builds a personalized "intent disambiguation profile" for the user by recording each user's (or automatically evaluated) actual preference for "modernization" (such as eventually correcting to features like flatness or shadows).

[0091] Update the embedding vector in the user profile or session context so that the system is more likely to choose a mapping that matches the user's historical preferences the next time it encounters "modernization".

[0092] S505. Parameter Persistence and Loop Optimization All corrected parameters are serialized and persistently stored in the system's parameter database, including: the updated intent node attribute set, the optimized intent-code mapping matrix, correction history, and effect evaluation data.

[0093] These parameters are automatically loaded and applied in the next generation cycle, enabling the system to continuously optimize generation quality based on historical experience and form a continuous self-evolution capability.

[0094] In some embodiments, the low-code page generation system may include multiple functional modules composed of computer program segments. The computer programs for each program segment in the low-code page generation system may be stored in the memory of a computer device and executed by at least one processor to perform (see details). Figure 1 (Description) The functionality for generating low-code pages.

[0095] In this embodiment, the low-code page generation system can be divided into multiple functional modules based on its functions, such as... Figure 2 As shown. The module referred to in this invention is a series of computer program segments that can be executed by at least one processor and perform a fixed function, and is stored in memory. In this embodiment, the functions of each module will be described in detail in subsequent embodiments.

[0096] The intent recognition module is used to receive natural language design text input by the user, perform semantic parsing on the natural language design text, and generate a structured intent graph, which includes multiple intent nodes, semantic attributes of each node, and dependencies between nodes. The intent mapping module is used to generate intermediate code with semantic identifiers based on the intent graph through a bidirectional mapping mechanism between intent and code. The page rendering module is used to execute the intermediate code to render and generate page effects, and capture the visual, structural or interactive features of the page effects to generate actual effect feature vectors. The difference calculation module is used to compare the actual effect feature vector with the expected feature vector in the intent map to generate a difference vector; The parameter correction module is used to adjust the parameters of the structured design intent model and the bidirectional mapping mechanism according to the difference vector, so as to adaptively optimize the subsequent code generation.

[0097] Figure 3 The low-code page generation method provided in the embodiments of this application can be applied to devices. Those skilled in the art will understand that the device structures involved in the embodiments of this invention do not constitute a limitation on the device. A device may include more or fewer components than illustrated, or combine certain components, or have different component arrangements. In the embodiments of this invention, the device includes, but is not limited to, laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the embodiments of this application described and / or claimed herein.

[0098] The device 300 may include a processor 310, a memory 320, and a communication unit 330. These components communicate via one or more buses. Those skilled in the art will understand that the server structure shown in the figure does not constitute a limitation of the present invention. It may be a bus topology or a star topology, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0099] The memory 320 can be used to store execution instructions of the processor 310. The memory 320 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. When the execution instructions in the memory 320 are executed by the processor 310, the device 300 is able to perform some or all of the steps in the above method embodiments.

[0100] The processor 310 serves as the control center of the storage device, connecting various parts of the electronic device via various interfaces and lines. It executes software programs and / or modules stored in the memory 320, and calls data stored in the memory to perform various functions of the electronic device and / or process data. The processor can be composed of integrated circuits (ICs), such as a single packaged IC or multiple packaged ICs with the same or different functions connected together. For example, the processor 310 may consist only of a central processing unit (CPU). In this embodiment of the invention, the CPU may have a single processing core or include multiple processing cores.

[0101] The communication unit 330 is used to establish a communication channel, enabling the storage device to communicate with other devices. It can receive user data sent by other devices or send user data to other devices.

[0102] The present invention also provides a computer storage medium, wherein the computer storage medium may store a program, which, when executed, may include some or all of the steps provided in the embodiments of the present invention. The storage medium may be a magnetic disk, an optical disk, read-only memory (ROM), or random access memory (RAM), etc.

[0103] Those skilled in the art will clearly understand that the techniques in the embodiments of the present invention can be implemented using software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solutions in the embodiments of the present invention, or the parts that contribute to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk, or any other medium capable of storing program code. It includes several instructions to cause a computer device (which may be a personal computer, a server, or a second device, network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention.

[0104] The same or similar parts between the various embodiments in this specification can be referred to mutually. In particular, the device embodiments are basically similar to the method embodiments, so the description is relatively simple, and the relevant parts can be referred to the description in the method embodiments.

[0105] In the embodiments provided by this invention, it should be understood that the disclosed systems and methods can be implemented in other ways. For example, the system embodiments described above are merely illustrative. For instance, the division of modules is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple modules or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between systems or modules may be electrical, mechanical, or other forms.

[0106] The modules described as separate components may or may not be physically separate. The components shown as modules may or may not be physical modules; that is, they may be located in one place or distributed across multiple network modules. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0107] In addition, the functional modules in the various embodiments of the present invention can be integrated into one processing module, or each module can exist physically separately, or two or more modules can be integrated into one module.

[0108] Although the present invention has been described in detail with reference to the accompanying drawings and preferred embodiments, the present invention is not limited thereto. Various equivalent modifications or substitutions can be made to the embodiments of the present invention by those skilled in the art without departing from the spirit and essence of the invention, and such modifications or substitutions should all be within the scope of the present invention. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should also be covered within the protection scope of the present invention.

Claims

1. A low-code page generation method, characterized by, include: The system receives natural language design text input by the user, performs semantic parsing on the natural language design text, and generates a structured intent graph, which includes multiple intent nodes, semantic attributes of each node, and dependencies between nodes. Based on a bidirectional mapping mechanism between intent and code, the intent graph is converted into intermediate code with semantic identifiers; The intermediate code is executed to render and generate page effects, and the visual, structural, or interactive features of the page effects are captured to generate actual effect feature vectors. The actual effect feature vector is compared with the expected feature vector in the intent map to generate a difference vector; The parameters of the structured design intent model and the bidirectional mapping mechanism are adjusted based on the difference vector to adaptively optimize subsequent code generation.

2. The method according to claim 1, characterized in that, The system receives natural language design text input by the user, performs semantic parsing on the natural language design text, and generates a structured intent graph, including: The natural language design text is processed by a semantic parser, wherein the parser is implemented based on a large language model fine-tuned for an intent recognition task; One or more semantic units are identified and extracted from the text, and each semantic unit is mapped to an intent node, which corresponds to a layout component, interactive element or style theme on the page; One or more semantic attributes are attached to each intent node, the semantic attributes including at least one of size, position, color, data binding fields, or event triggering conditions; Establish dependencies among multiple intent nodes, wherein the dependencies include at least one of hierarchical inclusion relationships, logical sequence relationships, or style inheritance relationships; The intent nodes, their corresponding semantic attributes, and the dependencies between nodes are organized together into a machine-readable intent graph, which serves as an intermediate representation layer connecting natural language and code generation.

3. The method according to claim 2, characterized in that, Establishing dependencies among multiple intent nodes includes: Identify the logical relationships between the intent nodes, wherein the logical relationships include at least one of the following: hierarchical containment relationship: used to represent the parent-child container relationship between user interface components, and to generate the corresponding document object model tree structure based on this relationship; logical sequence relationship: used to represent the sequence or conditional dependency between interactive actions, where the output of one node serves as the input of another node; style inheritance relationship: used to represent the transmission and overriding of style themes or rules between nodes with specific semantic relationships; The identified logical connections are stored and represented in the intent graph in the form of directed edges or attribute references. When generating code based on the intent graph, the component nesting structure, event handling sequence, or cascading style sheet rules are synthesized according to the dependencies.

4. The method according to claim 1, characterized in that, Based on a bidirectional mapping mechanism between intent and code, intermediate code with semantic identifiers is generated according to the intent graph, including: The mapping engine receives the intent graph, which includes intent nodes, semantic attributes, and dependencies. The mapping engine determines the matching probability between nodes and attributes in the intent graph and predefined code patterns by querying and calculating the intent embedding matrix; Based on the matching probability, select and assemble the corresponding code snippets from the code template library; During the assembly and generation of intermediate code, each code segment is bound to its corresponding unique identifier of intent node, and it is retained in the generated intermediate code in the form of semantic annotation or custom data attributes, forming the intermediate code with semantic identifier; The semantic identifier is used to trace the rendering deviation back to a specific intent node in the subsequent effect feedback stage.

5. The method according to claim 4, characterized in that, Executing the intermediate code to render the generated page effect includes: Send the semantically labeled intermediate code to a separate front-end rendering engine; The front-end rendering engine loads and executes the intermediate code in the browser environment, thereby instantiating user interface components, applying cascading style sheet rules and binding interactive event logic. The browser's document object model and rendering engine pipeline transform the page structure, style, and behavior described in the intermediate code into visual page effects.

6. The method according to claim 1, characterized in that, Capture the visual, structural, or interactive features of the page effect to generate an actual effect feature vector, including: By using an effect monitor, the browser's Document Object Model interface, style calculation interface, or performance observation interface can be called to collect the actual data of the rendered page in a programmatic manner. The actual data collected includes: structural features, including component position, size, and hierarchical relationship obtained through the Document Object Model interface; visual features, including component color, font, and margin style attributes obtained through the style calculation interface; and interactive features, including component response time or state changes obtained through the performance observation interface or event listener. The collected structural features, visual features, and interaction features are numerically and normally processed, and combined into a multi-dimensional feature vector of actual effect, which is used for subsequent quantitative comparison with the expected intent.

7. The method according to claim 1, characterized in that, Based on the difference vector, the parameters of the structured design intent model and the bidirectional mapping mechanism are adjusted through a closed-loop correction model, including: The difference vector is input into the difference analysis engine in the closed-loop correction model; The difference analysis engine executes a reverse dependency propagation algorithm, which traces back to the code segment that caused the deviation based on the deviation features indicated by the difference vector, and further maps the semantic identifiers in the code segment back to one or more corresponding intent nodes in the structured design intent model. Based on the correlation between the deviation characteristics and the intent node, the adjustment amount ΔW for the intent node attributes and the weights of the mapping matrix is ​​calculated; Based on the adjustment amount ΔW, perform at least one of the following correction operations: local correction, which includes directly modifying the semantic attributes of the intention nodes related to the bias, or adjusting their corresponding code template parameters; global learning, which includes updating the mapping weight parameters of relevant entries in the intention-code mapping matrix to optimize the overall performance of the model in subsequent generation. The corrected parameters are persisted and applied to the next generation loop, thereby achieving adaptive optimization of the system.

8. A low-code page generation system, characterized in that, include: The intent recognition module is used to receive natural language design text input by the user, perform semantic parsing on the natural language design text, and generate a structured intent graph, which includes multiple intent nodes, semantic attributes of each node, and dependencies between nodes. The intent mapping module is used to generate intermediate code with semantic identifiers based on the intent graph through a bidirectional mapping mechanism between intent and code. The page rendering module is used to execute the intermediate code to render and generate page effects, and capture the visual, structural or interactive features of the page effects to generate actual effect feature vectors. The difference calculation module is used to compare the actual effect feature vector with the expected feature vector in the intent map to generate a difference vector; The parameter correction module is used to adjust the parameters of the structured design intent model and the bidirectional mapping mechanism according to the difference vector, so as to adaptively optimize the subsequent code generation.

9. A low-code page generation device, characterized in that, include: Memory, used to store low-code page generators; A processor, configured to implement the steps of the low-code page generation method as described in any one of claims 1-7 when executing the low-code page generation program.

10. A computer-readable storage medium storing a computer program, characterized in that, The readable storage medium stores a low-code page generation program, which, when executed by a processor, implements the steps of the low-code page generation method as described in any one of claims 1-7.

Images