SaaS front-end UI generation system based on structural constraint and self-correction

Abstract

The invention discloses a SaaS front-end UI generation system based on structural constraint and self-correction, and the system comprises a demand perception and analysis module which analyzes a user demand through semantic prompt and natural language dialogue; the code generation module is used for generating personalized CSS codes based on the structured requirements and the structure constraint template extracted from the original CSS; the similarity correction module is used for calculating the structural consistency score of the generated code and the original code at the selector hierarchy and triggering regeneration when the score is lower than a threshold value to form a self-correction cycle; and the rendering display module is used for integrating and rendering the final UI. According to the method, the original CSS abstract syntax tree is used as a hard constraint template, and the efficiency and reliability of SaaS software front-end customization are remarkably improved while the system stability is kept through a closed-loop self-correction mechanism of a selector hierarchy.

Description

Technical Field

[0001] This invention relates to the field of web front-end technology, and more specifically, to a SaaS front-end UI generation system based on structural constraints and self-correction. Background Technology

[0002] Driven by digital transformation, B2B SaaS has become an important software delivery model in fields such as industrial manufacturing and engineering operations. This type of software needs to share a unified code framework across multiple tenants while supporting personalized customization of the user interface and brand style at the tenant level.

[0003] However, current SaaS platform UI customization still primarily relies on front-end developers and designers manually modifying HTML, CSS, and JavaScript code. This approach is not only time-consuming and labor-intensive, with high communication costs, but also easily disrupts the existing DOM structure and CSS selector bindings when adjusting styles, leading to style failures in core functional modules or abnormal interaction logic. This has become a key bottleneck restricting the rapid evolution of enterprise-level SaaS.

[0004] In recent years, generative artificial intelligence technology has made significant progress in the field of code generation. Large language models such as GPT-4o and Claude, as well as specialized platforms such as V0.dev, can automatically generate front-end code based on natural language descriptions or design drafts.

[0005] However, these existing technologies are primarily geared towards open-domain web page or prototyping scenarios, and their decoding process lacks explicit modeling and structural constraints on the specific B2B SaaS platform front-end architecture. When directly applied to B2B SaaS front-end generation, the model is prone to problems such as missing selectors, redundancy, or DOM hierarchy misalignment, resulting in the generated CSS code being unable to match the platform's original HTML structure, thereby breaking existing functionality and making it difficult to securely and stably integrate into complex multi-tenant production environments.

[0006] Therefore, there is an urgent need in this field for a technical solution that can achieve efficient and automated UI customization without disrupting the original architecture of the SaaS platform, while improving customization efficiency and strictly ensuring the structural compatibility and system stability of the generated results. Summary of the Invention

[0007] In view of this, the present invention provides a SaaS front-end UI generation system based on structural constraints and self-correction, comprising: a requirement perception and parsing module, used to receive and parse the user's visual and functional requirements through semantic prompt constraints and natural language dialogue, and generate a structured requirement description; a code generation module, connected to the requirement perception and parsing module, used to generate personalized CSS code based on the structured requirement description and a structural constraint template extracted from the original CSS file of the target SaaS platform; a similarity correction module, connected to the code generation module, used to calculate the structural consistency score between the generated CSS code and the original CSS file at the selector level, and trigger the code generation module to regenerate when the score is lower than a preset threshold; and a rendering and display module, connected to the similarity correction module, used to integrate the structurally consistent generated CSS code with the original front-end file of the platform, and render and display the customized UI interface.

[0008] Furthermore, the requirement perception and parsing module specifically includes: a semantic prompting constraint unit, used to provide users with preset style, color and layout options, guiding users to make combination selections; a natural language dialogue unit, integrated with a large language model agent, used to perform semantic parsing and reconstruction of the user's ambiguous or unstructured expressions through multi-round natural language interaction; wherein, the selection result of the semantic prompting constraint unit is fused with the requirement parsed by the natural language dialogue unit to generate the structured requirement description.

[0009] Furthermore, in the code generation module, the structural constraint template is constructed by using a PostCSS parser to process the original CSS file, generating its abstract syntax tree, and extracting a set of all valid style selectors from the abstract syntax tree.

[0010] Furthermore, the code generation module uses the structural constraint template as a hard constraint to control the underlying large language model to inherit the selector set from the original CSS file when generating CSS code, and only generates style properties and property values ​​corresponding to user requirements.

[0011] Further, the similarity correction module performs the following operations: extracting all valid selectors from the generated CSS code to form a generated selector set G; using the valid selector set T of the original CSS file as a benchmark, calculating the precision P and recall R of G relative to T; and applying the formula F1=2× Calculate the structural consistency score S struct ;S struct Compared with a preset threshold θ, if S struct If the value is less than θ, then the regeneration process is triggered.

[0012] Furthermore, the preset threshold θ is set to 0.98, and the maximum number of regeneration attempts is 3.

[0013] Furthermore, the system also includes a visual semantic consistency evaluation module, which is used to evaluate the visual quality of the UI interface output by the rendering and display module. The evaluation module adopts a combination of objective evaluation based on the CLIP model and expert manual review to calculate the comprehensive weighted score of the generated interface and user requirements in terms of style, color, and form.

[0014] Furthermore, the visual semantic consistency evaluation module calculates the comprehensive visual consistency score Swcs using the following formula: Swcs = α∙S human +(1-α)∙S abj， Among them, S human S is the normalized mean of human ratings. abj The score is the objective evaluation score based on the CLIP model, and α is the consistency weight that is dynamically adjusted according to the difference between subjective and objective scores.

[0015] Furthermore, the system achieves fully automated execution of the entire process from demand perception to rendering and display through a proxy.

[0016] On the other hand, this application also provides a SaaS front-end UI generation method based on structural constraints and self-correction, including the following steps: Step S1: Receive and parse the user's visual and functional requirements through semantic prompt constraints and natural language dialogue to generate a structured requirement description; Step S2: Based on the structured requirement description and the structural constraint template extracted from the original CSS file of the target SaaS platform, generate personalized CSS code; Step S3: Calculate the structural consistency score between the generated CSS code and the original CSS file at the selector level, and determine whether the score is lower than a preset threshold; Step S4: If yes, return to step S2 for regeneration; if no, or if the maximum number of generation times is reached, proceed to the next step; Step S5: Integrate the structurally consistent generated CSS code with the original front-end file of the platform, and render and display the customized UI interface.

[0017] Compared with the prior art, the beneficial effects of the present invention are as follows: 1. Using the abstract syntax tree of the SaaS platform's original CSS as a structural constraint template, selector and hierarchy compatibility with the existing front-end architecture is explicitly maintained during the code generation phase. By introducing an F1 similarity correction and self-correction loop mechanism for the selector hierarchy, it can automatically detect and correct missing or redundant selectors, ensuring that the generated UI code does not break the platform's original DOM-CSS binding relationships and functional logic. This fundamentally solves the structural drift problem caused by the general generation model and provides a reliable guarantee for the application of generative UI in complex production environments.

[0018] 2. By using a proxy, the entire process from requirement perception and code generation to correction and rendering is automated. It directly converts the natural language descriptions of non-professional users into runnable front-end code, reduces the dependence on professional engineers for front-end customization, shortens the delivery cycle, and saves labor costs.

[0019] 3. Through a dual-modal demand perception mechanism combining semantic prompts and natural language dialogue, users are effectively guided to clearly express and accurately interpret their visual and functional needs. Combined with a visual semantic consistency evaluation framework based on the CLIP model and human review, the generated interface is ensured to highly match user expectations in core visual dimensions such as style, color, and form, thereby improving subjective satisfaction and brand consistency of the customized results. Attached Figure Description

[0020] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the invention. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings: Figure 1 This is a schematic diagram of the modules of this system; Figure 2 This is a diagram of the overall architecture of the system. Figure 3 This is a flowchart illustrating the process of parsing the CSS Abstract Syntax Tree (AST) using PostCSS in this system; Figure 4 This is an example of the interface effect customized for the SaaS platform in this system; Figure 5 A comparison chart of the average structural consistency index of different methods in this system in customized tasks; Figure 6 The F1 score distribution of structural consistency for different methods under various customized requirements of this system; Figure 7 A comparative curve of the structural consistency F1 score of the four models in this system under multiple customized requirements; Figure 8 This is a comparison chart of the visual semantic consistency scores of different models in this system across the dimensions of style, color, and form. Figure 9 A comparison chart showing the efficiency of UI customization under different development modes for this system. Detailed Implementation

[0021] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the disclosure to those skilled in the art. It should be noted that, unless otherwise specified, embodiments and features in the embodiments of the present invention can be combined with each other. The present invention will now be described in detail with reference to the accompanying drawings and embodiments.

[0022] See Figure 1 As shown, in some embodiments of this application, a SaaS front-end UI generation system based on structural constraints and self-correction includes a requirement perception and parsing module, used to receive and parse the user's visual and functional requirements through semantic prompt constraints and natural language dialogue, and generate a structured requirement description; a code generation module, connected to the requirement perception and parsing module, used to generate personalized CSS code based on the structured requirement description and structural constraint templates extracted from the original CSS file of the target SaaS platform; a similarity correction module, connected to the code generation module, used to calculate the structural consistency score between the generated CSS code and the original CSS file at the selector level, and trigger the code generation module to regenerate when the score is lower than a preset threshold; and a rendering and display module, connected to the similarity correction module, used to integrate the structurally consistent generated CSS code with the original front-end file of the platform, and render and display the customized UI interface.

[0023] Therefore, the core process of this system includes four stages: requirement perception and parsing, code generation, similarity correction, and rendering. The system first receives user input through the requirement perception and parsing module.

[0024] See Figure 2 As shown, this module employs a dual-modal mechanism: on one hand, it provides users with preset visual element options through semantic prompts, including styles such as tech, industrial, minimalist, business, and card styles; color schemes based on the Muzli Colors color library (see Table 1); and page layout modes such as left-side navigation, top navigation, and right-side navigation. On the other hand, it interacts with users in multiple rounds through natural language dialogue units that integrate large language models such as GPT-4 and Claude, parsing and reconstructing their vague or unstructured requirement descriptions, such as "I want a dark blue interface that looks more professional and reliable." Finally, the system merges the two parts of information to generate a structured requirement description, which serves as input for the next stage.

[0025] Table 1: Examples of Style and Color Matching

[0026] Specifically, in the code generation module, the structural constraint template is constructed as follows: the original CSS file is processed using a PostCSS parser to generate its abstract syntax tree, and a set of all valid style selectors is extracted from this abstract syntax tree. The code generation module uses this structural constraint template as a hard constraint to control the underlying large language model to inherit the selector set from the original CSS file when generating CSS code, generating only style properties and property values ​​corresponding to the user's requirements.

[0027] See Figure 3 As shown, in the code generation module, the system performs the crucial structural constraint generation. First, the PostCSS parser is used to parse the original global CSS file of the target SaaS platform, such as a railway engineering operation and maintenance platform, to construct its abstract syntax tree (AST), and extract all valid style selectors to form a selector set T, which serves as the structural constraint template. Subsequently, the system calls the underlying large language model; in this embodiment, Claude 3.5 is preferred, and the structured requirement description and the structural constraint template are used as input prompts.

[0028] Under this hard constraint, the model generates code with the task of keeping the selector set T unchanged and only generating or modifying the CSS style properties and values ​​corresponding to these selectors based on user needs. For example, if the user requests to change the main color, the model will only modify color-related properties (such as `color`, `background-color`) without adding or deleting any selectors.

[0029] Specifically, the similarity correction module performs the following operations: extracts all valid selectors from the generated CSS code to form a generated selector set G; calculates the precision P and recall R of G relative to T, using the valid selector set T of the original CSS file as a benchmark; and applies the formula F1=2× Calculate the structural consistency score S struct ;S struct Compared with a preset threshold θ, if S struct If the value is less than θ, then the regeneration process is triggered.

[0030] Therefore, after generating the initial CSS code, the similarity correction module is entered. This module executes a closed-loop self-correction process as defined in Algorithm 1. The specific steps are as follows: using the same PostCSS method, valid selectors are extracted from the generated CSS code to form a set G; based on the original selector set T, the precision P, recall R, and F1 score of the generated selector set G are calculated; the calculated Sstruct is compared with a preset threshold θ; if Sstruct ≥ θ, the generated result structure is deemed acceptable, and the process proceeds to the next stage; if Sstruct < θ, the code regeneration process is automatically triggered, with a maximum of 3 attempts. This mechanism can effectively correct selector bias caused by model illusion.

[0031] Specifically, the system also includes a visual semantic consistency evaluation module, which is used to evaluate the visual quality of the UI interface output by the rendering and display module. The evaluation module adopts a combination of objective evaluation based on the CLIP model and expert manual review to calculate the comprehensive weighted score of the generated interface and user needs in terms of style, color, and form.

[0032] Therefore, in the rendering and display module, the system uses an automated proxy to integrate the corrected and structurally sound CSS code with the original HTML and JavaScript files of the SaaS platform, forming a complete and runnable front-end project. This project then renders the final customized UI interface in a browser or preview environment, as shown in the image. Figure 4 As shown.

[0033] In another preferred embodiment, to quantitatively assess the visual matching degree between the generated UI and user needs, the system also integrates a visual semantic consistency assessment module. This assessment can serve as part of system performance monitoring or optimization feedback.

[0034] Therefore, the evaluation consists of two parts: objective and subjective. Objective evaluation: The CLIP model based on the Vision Transformer-B / 32 architecture was adopted. The user's request text description and the generated interface screenshots were encoded into feature vectors, and their similarity Sim(v,t) was calculated. Corresponding text prompts were constructed for the three dimensions of style, color, and form, such as t... style ,t color ,t shape Calculate the consistency scores for each component. The final objective score is obtained by weighted summation of the three scores, S. abj .

[0035] Human evaluation: Domain experts such as UI / UX designers and railway engineering personnel were invited to rate the generated interface using the 5-point Likert scale shown in Table 2, from four dimensions: style, color, form, and overall satisfaction. The original scores were then normalized to obtain the S... human .

[0036] Table 2: User Interface Generation Consistency and Satisfaction Assessment Scale

[0037] Ultimately, the Comprehensive Visual Consistency Score (WCS) is calculated by weighting subjective and objective scores. The weight α is dynamically adjusted based on the difference between subjective and objective scores: when |S human -S abj When |≤0.1, α=0.7, indicating greater reliance on human intervention; when the difference is in (0.1,0.2], α=0.5; when the difference is >0.2, α=0.3 to balance the contributions of both parties.

[0038] In another preferred embodiment, the system of the present invention was comprehensively evaluated using the front-end customization of a railway engineering operation and maintenance B2B SaaS platform as an example: As shown in Table 3 and Figure 5 , Figure 6 As shown, our system achieved an average structural consistency F1 score of 0.995 across eight customized tasks, with all F1 scores exceeding the threshold of 0.98, resulting in a 100% pass rate. In contrast, the baseline models without structural constraints (Claude 3.5, GPT-4o, V0.dev) achieved F1 scores of 0.888, 0.773, and 0.975, with pass rates of 0%, 0%, and 62.5%, respectively. This demonstrates the effectiveness of the structural constraint and self-correction mechanism of our invention.

[0039] Table 3: Average selector structure hierarchy precision (P) and recall (R) obtained based on 8 custom tasks. pass rate

[0040] As shown in Table 4 and Figure 7 , Figure 8 As shown, the overall visual consistency score (WCS) of this system is 0.895, significantly higher than all baseline models. Paired t-test results show that the improvement is statistically significant (p < 0.01). This indicates that the present invention ensures structural compatibility without sacrificing visual accuracy in meeting requirements.

[0041] Table 4: Results of Comprehensive Evaluation (Subjective and Objective)

[0042] As shown in Table 5 and Figure 9As shown, in four identical UI customization tasks, SaaSUIGen's average development time was only 0.48 hours, and the average number of manual debugging sessions was only 23.8. Compared to traditional manual development (3.75 hours, 833.5 debugging sessions), efficiency was improved by 87.2% and 97.1%, respectively. Compared to the best baseline model V0.dev (1.02 hours, 186 debugging sessions), efficiency was still significantly improved.

[0043] Table 5: Average time spent customizing the same 4 sets of UIs under different development modes and corresponding average number of manual debugging sessions

[0044] The above scenarios are merely preferred embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

[0045] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program goods. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program goods embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0046] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program goods according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0047] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0048] These computer program instructions can also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0049] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and not to limit it. Although the present invention has been described in detail with reference to the above embodiments, those skilled in the art should understand that modifications or equivalent substitutions can still be made to the specific implementation of the present invention. Any modifications or equivalent substitutions that do not depart from the spirit and scope of the present invention should be covered within the scope of protection of the claims of the present invention.

Claims

1. A SaaS front-end UI generation system based on structural constraints and self-correction, characterized in that, include: The requirement perception and parsing module is used to receive and parse the user's visual and functional requirements through semantic prompts and natural language dialogue, and generate a structured requirement description. The code generation module, connected to the requirement perception and parsing module, is used to generate personalized CSS code based on the structured requirement description and the structural constraint template extracted from the original Cascading Style Sheets (CSS) file of the target SaaS platform. A similarity correction module, connected to the code generation module, is used to calculate the structural consistency score between the generated CSS code and the original CSS file at the selector level, and to trigger the code generation module to regenerate when the score is lower than a preset threshold. The rendering and display module, connected to the similarity correction module, is used to integrate the generated CSS code with the original front-end files of the platform that have passed the structural consistency test, and to render and display the customized UI interface.

2. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 1, characterized in that, The demand perception and analysis module specifically includes: The semantic prompt constraint unit is used to provide users with preset style, color and layout options to guide users to make combination selections; The natural language dialogue unit integrates a large language model agent, which is used to perform semantic parsing and reconstruction of users' ambiguous or unstructured expressions through multi-turn natural language interaction; The selection result of the semantic prompt constraint unit is fused with the requirements parsed by the natural language dialogue unit to generate the structured requirement description.

3. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 1, characterized in that, In the code generation module, the structural constraint template is constructed by using a PostCSS parser to process the original CSS file, generating its abstract syntax tree, and extracting a set of all valid style selectors from the abstract syntax tree.

4. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 3, characterized in that, The code generation module uses the structural constraint template as a hard constraint to control the underlying large language model to inherit the selector set from the original CSS file when generating CSS code, and only generates style properties and property values ​​that correspond to the user's requirements.

5. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 1, characterized in that, The similarity correction module performs the following operations: Extract all valid selectors from the generated CSS code to form a set of generated selectors G; Using the valid selector set T of the original CSS file as a benchmark, calculate the precision P and recall R of G relative to T; According to the formula F1=2× Calculate the structural consistency score S struct ; S struct Compared with a preset threshold θ, if S struct If the value is less than θ, then the regeneration process is triggered.

6. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 5, characterized in that, The preset threshold θ is set to 0.98, and the maximum number of regeneration attempts is 3.

7. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 1, characterized in that, The system also includes a visual semantic consistency evaluation module, which is used to evaluate the visual quality of the UI interface output by the rendering and display module. The evaluation module adopts a combination of objective evaluation based on the CLIP model and expert manual review to calculate the comprehensive weighted score of the generated interface and user needs in terms of style, color, and form.

8. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 7, characterized in that, The visual semantic consistency evaluation module calculates the comprehensive visual consistency score Swcs using the following formula: Swcs=α∙S human +(1-α)∙S abj Among them, S human S is the normalized mean of human ratings. abj The score is the objective evaluation score based on the CLIP model, and α is the consistency weight that is dynamically adjusted according to the difference between subjective and objective scores.

9. The SaaS front-end UI generation system based on structural constraints and self-correction according to claim 1, characterized in that, The system achieves fully automated execution of the entire process from demand perception to rendering and display through a proxy.

10. A SaaS front-end UI generation method based on structural constraints and self-correction, applied to any one of claims 1-9 above, characterized in that, The method includes the following steps: Step S1: Receive and parse the user's visual and functional requirements through semantic prompts and natural language dialogue to generate a structured requirement description; Step S2: Based on the structured requirement description and the structural constraint template extracted from the original CSS file of the target SaaS platform, generate personalized CSS code; Step S3: Calculate the structural consistency score between the generated CSS code and the original CSS file at the selector level, and determine whether the score is lower than a preset threshold; Step S4: If yes, return to step S2 to regenerate; if no, or if the maximum number of generation attempts has been reached, proceed to the next step. Step S5: Integrate the generated CSS code with acceptable structural consistency with the platform's original front-end files, and render and display the customized UI interface.

Images