VUE front-end code generation method based on AI and layout component

Abstract

The invention discloses a VUE front-end code generation method based on AI and layout components, and the method comprises the steps: obtaining a UI design manuscript file, extracting the inherent style of each component, analyzing the layout constraint demand of each component, and generating a component structure tree; generating a code according to a condition generation adversarial network model of double-stage training, learning a layout mode, generating a reward signal through a layout reduction degree evaluation function, and optimizing the response type adaptation capability of the generated code; and performing grammar inspection on the final code, and adjusting component constraint configuration according to an inspection result. According to the method, the workload of manually compiling codes in the front-end development process is reduced through design draft analysis, component matching and code generation processes, the problem of style conflict of multilayer nested components is solved by introducing a constraint transfer mechanism and a style priority strategy, the layout reduction degree of generated codes is ensured, and the development efficiency is improved. Through component library matching and constraint declaration analysis, a developer declarates a constraint type and range supported by a component.

Description

Technical Field

[0001] This invention relates to the field of front-end development, specifically to a Vue front-end code generation method based on AI and layout components. Background Technology

[0002] In the field of front-end development, Vue, as a popular JavaScript framework, is widely used to build user interfaces. Traditional Vue front-end coding primarily relies on developers manually writing HTML, CSS, and JavaScript code, using Vue's directives and component system to implement page interactions and functionality.

[0003] Currently, when developers manually write HTML, CSS, and JavaScript code using Vue, nesting child and parent components presents challenges. Since child components may be designed as reusable units with fixed size or positioning properties, in page-level templates, if the parent component's size is smaller than the child component's, the child component overflows the parent component's boundaries, causing layout errors. Conversely, if the parent component's size is larger than the child component's, the nested components cannot fully utilize the space provided by the parent component, resulting in layout inconsistencies. This severely impacts page aesthetics and user experience. Furthermore, it leads to low development efficiency and is prone to human error when dealing with complex pages and large-scale projects. Summary of the Invention

[0004] Based on this, the purpose of this invention is to provide a VUE front-end code generation method based on AI and layout components, which aims to solve the problem of layout disorder or inconsistency caused by size mismatch when nesting child and parent components.

[0005] To achieve the above objectives, this invention proposes a Vue front-end code generation method based on AI and layout components, wherein the Vue front-end code generation method based on AI and layout components includes: Obtain the UI design file, extract the inherent styles of each component, parse the layout constraints of each component, and generate a component structure tree; Code generation is performed based on a two-stage trained conditional generative adversarial network model, which learns layout patterns and generates reward signals through a layout fidelity evaluation function to optimize the responsiveness of the generated code. The final code is then subjected to syntax validation, and the component constraint configuration is adjusted based on the validation results.

[0006] According to one aspect of the above technical solution, the steps of obtaining the UI design draft file, extracting the inherent styles of each component, parsing the layout constraint requirements of each component, and generating a component structure tree include: A pre-built layout component library, which includes an atomic component layer, a molecular component layer, and a template component layer; The system receives UI design draft files, which at least contain layer structure, size attributes, and style description information. Based on the graphics parsing engine, it extracts the inherent styles of each component in the UI design draft file and parses the layout constraint requirements of each component in the design draft. The parsed layout information is then standardized to generate a standardized layout description tree containing position, size, hierarchy, and preliminary constraint information.

[0007] According to one aspect of the above technical solution, the steps following the generation of the layout description tree include: Match the layout description tree with the pre-built layout component library, read the constraint declarations of each component in the layout component library, establish the mapping relationship between design elements and the attributes of each component, and generate a component structure tree; The layout constraint requirements extracted from the design draft are initially matched with the constraint declarations of each component, and conflicting constraint points are marked on the component structure tree.

[0008] According to one aspect of the above technical solution, the steps of generating code based on a two-stage trained conditional generative adversarial network model, learning layout patterns, generating reward signals through a layout fidelity evaluation function, and optimizing the responsiveness of the generated code include: In the first stage of supervised learning, the historical design draft-code dataset is used for supervised learning. The generator network learns the transformation pattern from layout features to code snippets. The layout features include at least component size, hierarchical relationship, and preliminary constraint information. It learns how the inherent style of each component is combined with the basic layout constraints. When generating basic Vue template code, a constraint transmission channel is established between parent and child components based on the nesting relationship of the component structure tree. The maximum width and alignment of the layout constraints of the parent component are then passed to the child component through the constraint transmission channel.

[0009] Based on one aspect of the above technical solution, the first stage of supervised learning is completed, and the second stage of reinforcement learning begins: A reinforcement learning mechanism is introduced to generate reward signals through a layout fidelity evaluation function. The evaluation function comprehensively considers the constraint conflict resolution and the matching degree between the layout rendering and the design draft, thereby optimizing the responsiveness and constraint conflict handling capabilities of the generated code. In this process, a style adapter is used for dynamic style calculation. The style adapter prioritizes the alignment of spacing between sibling elements, device size adaptation across breakpoints, z-index hierarchy, and dynamic content overflow handling constraints. It identifies the conflict points between the inherent styles of each component and external constraints, and generates the final code according to preset priority rules.

[0010] According to one aspect of the above technical solution, the step of performing syntax verification on the final code and adjusting the component constraint configuration based on the verification results is as follows: The generated code undergoes syntax validation, layout constraint verification is performed based on constraint information in the layout description tree, and the system detects whether there are irreconcilable conflicts between the inherent styles of child components and the constraints passed from the parent component. If a conflict is detected, a warning message is generated to prompt the developer and automatic repair suggestions are provided.

[0011] According to one aspect of the above technical solution, if no conflict is detected: Package the validated final code into a Vue project file, and save the component constraint configurations involved in the final code generation process to the layout component library for later use.

[0012] This invention also proposes a Vue front-end code generation system based on AI and layout components. This system is used to implement the aforementioned Vue front-end code generation method based on AI and layout components. The system includes: The generation module is used to obtain UI design files, extract the inherent styles of each component, parse the layout constraints of each component, and generate a component structure tree. The optimization module is used to generate code based on the conditional generative adversarial network model trained in the two-stage training, learn layout patterns, generate reward signals through the layout fidelity evaluation function, and optimize the responsiveness of the generated code. The adjustment module is used to perform syntax checks on the final code and adjust the component constraint configuration based on the check results.

[0013] The present invention also proposes a computer-readable storage medium storing a computer program that, when executed by a processor, implements the VUE front-end code generation method based on AI and layout components as described above.

[0014] The present invention also proposes an electronic device, including a memory, a processor, and a computer program stored in the memory and running on the processor, wherein the processor executes the computer program to implement the VUE front-end code generation method based on AI and layout components as described above.

[0015] In summary, the Vue front-end code generation method based on AI and layout components proposed in this invention significantly reduces the workload of manually writing code during front-end development through automated design draft parsing, component matching, and code generation processes. Traditional Vue front-end development requires front-end engineers to write HTML, CSS, and JavaScript code line by line to implement page layout and interactive functions. This method, however, only requires uploading UI design draft files to quickly generate basic Vue template code, greatly shortening the development cycle. Taking an e-commerce project with multiple pages and complex interactions as an example, using this method for front-end development can reduce the development time from several weeks to several days, increasing development efficiency several times over, enabling faster project iteration and deployment, and meeting market demands for rapid product delivery.

[0016] By introducing a constraint propagation mechanism and style priority strategy, the style conflict problem of multi-level nested components is effectively resolved, ensuring the layout fidelity of the generated code. In practical applications, it ensures that the generated front-end page accurately presents the style and layout of the design draft on different devices and browsers, improving the user experience. Compared with existing technologies where page layout errors are caused by style conflicts, the code generated by this method is of higher quality and more stable, reducing the extensive debugging and repair work required later due to style issues, and lowering project maintenance costs. Simultaneously, the constraint conflict verification and handling function of the code verification module can promptly identify and resolve potential problems in the code, further improving the reliability and robustness of the code.

[0017] By using component library matching and constraint declaration parsing, component developers can clearly declare the types and scope of constraints supported by their components. In different projects or page layouts, when a component is needed, the appropriate component can be quickly found based on its constraint declaration. Through the constraint propagation mechanism, the component can better adapt to different layout environments, achieving efficient reuse in different scenarios. For example, a button component can be declared to support different width types such as fixed, flexible, or responsive. In different page layouts, whether a button with a fixed width is needed or one that adapts to the width of its parent container, the button component can be reused. Simply pass the corresponding constraints according to the layout requirements, greatly improving component reusability, reducing redundant development, and increasing the utilization of development resources.

[0018] Additional aspects and advantages of the invention will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of the invention. Attached Figure Description

[0019] Figure 1This is a flowchart of the VUE front-end code generation method based on AI and layout components in Embodiment 1 of the present invention; Figure 2 This is a schematic diagram of the structure of the VUE front-end code generation system based on AI and layout components in Embodiment 3 of the present invention; Figure 3 This is a structural block diagram of the electronic device in Embodiment 5 of the present invention. Detailed Implementation

[0020] To facilitate understanding of the present invention, a more complete description will be given below with reference to the accompanying drawings. Several embodiments of the invention are illustrated in the drawings. However, the invention can be implemented in many different forms and is not limited to the embodiments described herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete.

[0021] It should be noted that when a component is said to be "fixed to" another component, it can be directly on the other component or there may be an intervening component. When a component is said to be "connected to" another component, it can be directly connected to the other component or there may be an intervening component. The terms "vertical," "horizontal," "left," "right," and similar expressions used in this document are for illustrative purposes only.

[0022] 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. The term "and / or" as used herein includes any and all combinations of one or more of the associated listed items.

[0023] Example 1 like Figure 1 The diagram shows a flowchart of a Vue front-end code generation method based on AI and layout components according to Embodiment 1 of the present invention. The Vue front-end code generation method based on AI and layout components includes the following steps S01-S03, wherein: S01. Obtain the UI design file, extract the inherent styles of each component, parse the layout constraints of each component, and generate a component structure tree.

[0024] In the field of front-end development, Vue, as a popular JavaScript framework, is widely used to build user interfaces. Traditional Vue front-end coding primarily relies on developers manually writing HTML, CSS, and JavaScript code, using Vue's directives and component system to implement page interactions and functionality.

[0025] After receiving the UI design draft file uploaded by the user, which contains layer structure, size attributes and style description information, the system uses a graphics parsing engine to extract the inherent styles of each component, such as fixed width and positioning attributes, and parses the layout constraints of the components in the design draft, such as the maximum width and alignment required by the parent component. The system then standardizes the parsed layout information.

[0026] The UI design files include Sketch, Figma, and PSD files. For Sketch files, their JSON metadata is extracted; for Figma files, REST API is called for parsing; for PSD files, their layer structure is recursively traversed, and the parsed layout information is standardized to generate a standardized layout description tree containing position, size, hierarchy, and preliminary constraint information.

[0027] After generating the layout description tree, node matching is performed in conjunction with the pre-built layout component library. The layout component library contains a three-layer structure of the Vue framework: atomic component layer, sub-component layer, and template component layer. The atomic component layer consists of native HTML tags and basic CSS classes, and is an indivisible unit, such as buttons, input boxes, and icon elements. The sub-component layer encapsulates composite elements through Vue single-file components, and has a preset props configuration interface and event response mechanism. The template component layer contains page-level layout templates and uses a slot mechanism to realize the dynamic replacement of content areas.

[0028] During the matching process, the constraint declarations of each component in the layout component library are read, that is, the width type supported by each component is fixed, flexible or responsive, the minimum / maximum width limit, the mapping relationship between design elements and the attributes of each component is established, and the component structure tree is generated.

[0029] At the same time, the layout constraint requirements extracted from the design draft are initially matched with the constraint declarations of each component, and potentially conflicting constraint points are marked in the component structure tree.

[0030] It should be noted that each component in the layout component library contains constraint declaration information. Specifically, component developers declare the types and ranges of constraints supported by the component by extending the component definition specification. The specific definition interface ButtonComponentConstraints includes supportWidth, which takes values ​​such as 'fixed' / 'flexible' / 'responsive', minWidth, and maxWidth, to describe the component's support for width constraints. During the component matching process, components with corresponding constraint declarations are matched from the component library according to the layout requirements of the components in the design draft, ensuring the reusability and constraint compatibility of the components.

[0031] S02. Based on the conditional generative adversarial network model trained in the two-stage training, code is generated, layout patterns are learned, and a reward signal is generated through the layout fidelity evaluation function to optimize the responsiveness of the generated code.

[0032] After generating the mapped component structure tree, a conditional generative adversarial network model is trained in two stages.

[0033] In the first stage of supervised learning, the historical design draft-code dataset is used for supervised learning. The generator network learns the transformation pattern from layout features to code snippets. The layout features include component size, hierarchical relationship, and preliminary constraint information. The focus is on learning how the inherent style of the component is combined with the basic layout constraints.

[0034] When generating basic Vue template code, a constraint transmission channel is established between parent and child components based on the nesting relationship of the component structure tree. The maximum width and alignment of the layout constraints of the parent component are then passed to the child component through the constraint transmission channel.

[0035] The specific method for establishing a constraint transmission channel is as follows: During the component structure tree construction process, a constraints property is defined for each component to store the constraints passed from the parent component and its own inherent constraints; when the parent component is rendered, it passes its own layout constraints, namely width and alignment, to the child component through the applyConstraints method of the component base class; after merging the parent component's constraints, its own default constraints, and user-defined constraints, the child component generates the final style code.

[0036] After completing the first stage of supervised learning, we move on to the second stage of reinforcement learning. We introduce a reinforcement learning mechanism and generate reward signals through a layout fidelity evaluation function. The evaluation function comprehensively considers the constraint conflict resolution, the matching degree between the layout rendering and the design draft, and optimizes the responsiveness and constraint conflict handling capabilities of the generated code. This enables the model to better handle constraint propagation and style conflicts between parent and child components.

[0037] In this process, a style adapter is used for dynamic style calculation. The style adapter prioritizes the alignment of spacing between sibling elements, device size adaptation across breakpoints, z-index hierarchy, and dynamic content overflow handling constraints. It identifies the conflict points between the inherent styles of each component and external constraints, and generates the final code according to preset priority rules.

[0038] Furthermore, the priority rules specifically include: In basic layout properties, flex / grid-related layout parameters, width, margins, and alignment are prioritized using constraints passed from the parent component to meet overall layout requirements; in visual style properties, colors, fonts, and border styles retain the component's inherent styles to ensure consistency in visual characteristics; a configuration interface is provided to allow component developers to specify which properties can be overridden by external constraints, by setting the `allowOverrideProps` array in the component definition to specify the list of properties affected by parent component constraints; when generating styles, the style adapter merges constraints passed from the parent component, inherent component styles, and user-defined styles according to the above priority rules to resolve style conflict issues.

[0039] Furthermore, during dynamic style calculations, it can identify conflicts between the component's inherent style and external constraints. For example, when the inherent width of an atomic component button is a fixed 100px, while the parent component requires its width to be fill, a conflict in the width attribute is detected. According to the preset priority rules, conflicting attributes are handled. If the conflict is a basic layout attribute, the parent component constraint overrides the component's inherent style. If the conflict is a visual style attribute, the component's inherent style is preserved. When layout changes such as window size adjustment or parent component size change are detected at runtime, the style parameters of child components are dynamically adjusted to ensure the correctness of responsive layout. For example, the flex / grid layout parameters of child elements are dynamically calculated based on the size of the parent container using an adaptive grid algorithm.

[0040] S03. Perform syntax checks on the final code and adjust the component constraint configuration based on the check results.

[0041] The generated code undergoes syntax validation and layout constraint verification based on constraint information in the layout description tree. It detects irreconcilable conflicts between the inherent styles of child components and the constraints passed from the parent component. These conflicts typically arise between fixed-size components and flexible layout parent components. If a conflict is detected, specific warning messages are generated, indicating the location of the conflicting component, the conflicting constraint attributes, and the impact, including buttons overflowing the parent container. Automatic repair suggestions are provided, such as changing the component's `supportWidth` property from 'fixed' to 'flexible', or adjusting the component's constraint declaration or the constraint parameters passed from the parent component. Detected conflict cases are automatically collected as new training samples. These training samples include design draft features, conflicting constraint information, and manually corrected code information, used for incremental training of the AI ​​model to improve its ability to handle constraint conflicts.

[0042] If no conflicts are detected, the final verified code will be packaged into a Vue project file containing the component directory structure, props type definition files, reactive breakpoint configuration preset files, and style variable declaration files. The component constraint configurations involved in the final code generation process will be saved to the layout component library for later use.

[0043] In summary, the Vue front-end code generation method based on AI and layout components proposed in this invention significantly reduces the workload of manually writing code during front-end development through automated design draft parsing, component matching, and code generation processes. Traditional Vue front-end development requires front-end engineers to write HTML, CSS, and JavaScript code line by line to implement page layout and interactive functions. This method, however, only requires uploading UI design draft files to quickly generate basic Vue template code, greatly shortening the development cycle. Taking an e-commerce project with multiple pages and complex interactions as an example, using this method for front-end development can reduce the development time from several weeks to several days, increasing development efficiency several times over, enabling faster project iteration and deployment, and meeting market demands for rapid product delivery.

[0044] By introducing a constraint propagation mechanism and style priority strategy, the style conflict problem of multi-level nested components is effectively resolved, ensuring the layout fidelity of the generated code. In practical applications, it ensures that the generated front-end page accurately presents the style and layout of the design draft on different devices and browsers, improving the user experience. Compared with existing technologies where page layout errors are caused by style conflicts, the code generated by this method is of higher quality and more stable, reducing the extensive debugging and repair work required later due to style issues, and lowering project maintenance costs. Simultaneously, the constraint conflict verification and handling function of the code verification module can promptly identify and resolve potential problems in the code, further improving the reliability and robustness of the code.

[0045] By using component library matching and constraint declaration parsing, component developers can clearly declare the types and scope of constraints supported by their components. In different projects or page layouts, when a component is needed, the appropriate component can be quickly found based on its constraint declaration. Through the constraint propagation mechanism, the component can better adapt to different layout environments, achieving efficient reuse in different scenarios. For example, a button component can be declared to support different width types such as fixed, flexible, or responsive. In different page layouts, whether a button with a fixed width is needed or one that adapts to the width of its parent container, the button component can be reused. Simply pass the corresponding constraints according to the layout requirements, greatly improving component reusability, reducing redundant development, and increasing the utilization of development resources.

[0046] Example 2 This embodiment uses the development of a Vue front-end page for an online store as an example to illustrate in detail the specific implementation process of the Vue front-end code generation method based on AI and layout components of this invention: Design Draft Analysis and Constraint Extraction: The designer provided a Sketch design file for the online store's homepage, containing components such as a product display area, navigation bar, search box, and shopping cart icon. Upon receiving this file, the JSON metadata of the Sketch file was extracted. This revealed that the product images in the product display area are 200px x 200px in size and must maintain proportional scaling across different screen sizes; the navigation bar has a fixed height of 50px and needs to be horizontally centered; the search box's width must adapt to its parent container, with a minimum width of 300px; and the shopping cart icon is fixed in the upper right corner of the page. The inherent style and layout constraints of these components were extracted, generating a standardized layout description tree.

[0047] The layout description tree is matched against the pre-built layout component library. For the product image component in the product display area, the corresponding image component is found in the atomic component layer of the component library. The constraint declaration of this component has supportWidth set to 'flexible', minWidth set to 100px, and maxWidth set to 500px, which matches the constraint requirement in the design draft to maintain proportional scaling and adapt within a certain width range. The navigation bar component is matched against the existing navigation bar template in the template component layer. Its constraint declaration has a fixed height value of 50px and supports horizontal center alignment. The search box component is matched against the input box component with adaptive width in the sub-component layer. Its constraint declaration has minWidth set to 200px and maxWidth set to 800px. By adjustment, it can meet the requirements of a minimum width of 300px and adaptive parent container in the design draft. The shopping cart icon is matched against the icon component in the atomic component layer. Its position constraint declaration supports fixing it to the upper right corner of the page. During the matching process, the layout constraints in the design draft are matched with the constraint declarations of the components themselves, and potentially conflicting constraint points are marked. For example, the minWidth of the search box component differs from the minimum width of 300px required in the design draft, which requires further processing.

[0048] The component structure tree containing constraint information is obtained after mapping, and a conditional generative adversarial network (GAN) model trained in two stages is used for code generation. In the first stage of supervised learning, the model learns how the product image component maintains proportional scaling under different layout constraints, and how the navigation bar component achieves horizontal centering, among other layout patterns. In the second stage of reinforcement learning, a reward signal is generated through a layout fidelity evaluation function to optimize the responsiveness of the generated code. When a change in page width is detected, the model can dynamically adjust the size of the product image according to the constraints to ensure that it can be displayed reasonably on different screen sizes. When generating basic Vue template code, a constraint propagation channel is established from parent component to child component. Taking the parent container component of the product display area as an example, when the width of the parent container changes, the new width constraint is passed to the product image child component through the applyConstraints method. After the product image child component merges the constraints passed from the parent component, its own default constraints, and user-defined constraints, it generates the final style code, realizing proportional scaling of the image on different screen sizes. When dynamically calculating styles, the style adapter prioritizes constraints such as alignment of spacing between sibling elements and cross-breakpoint device size adaptation. When arranging multiple product images in the product display area, ensure that the spacing between images remains consistent across different screen sizes, and that images display correctly on different devices (such as mobile phones, tablets, and computers). Simultaneously, based on preset priority rules, when the inherent minWidth of the search box component conflicts with constraints passed from the parent component, the minimum width of 300px required by the parent component is used first to generate the final style, effectively resolving constraint conflict issues.

[0049] The generated code undergoes syntax validation and layout constraint verification. Syntax validation ensures the generated Vue code is free of syntax errors. During layout constraint verification, based on constraint information in the layout description tree, it is detected that the search box component may fail to meet design requirements in certain situations due to width constraint conflicts. A warning message is generated, alerting developers that the search box component may have insufficient width on specific screen sizes, and providing automatic repair suggestions, such as adjusting the constraint declaration of the search box component, changing `minWidth` to 300px. Simultaneously, this conflict case is collected as a new training sample for incremental training of the subsequent AI model, improving the model's ability to handle similar constraint conflicts.

[0050] The validated code is packaged into a Vue project file. This file contains a component directory structure divided by functional modules, such as product display components, navigation bar components, and search box components; automatically generated props type definition files to facilitate developers' understanding and use of component properties; preset files for reactive breakpoint configuration to ensure good layout performance on different devices; and style variable declaration files corresponding to the design drafts for unified management and modification of styles. Simultaneously, component constraint configurations involved in this generation process, such as scaling constraints for the product image component, alignment constraints for the navigation bar component, and width constraints for the search box component, are saved to the layout component library for direct reuse in future projects with similar requirements, improving development efficiency.

[0051] Example 3 Another aspect of this invention provides a Vue front-end code generation system based on AI and layout components; please refer to [link / reference]. Figure 2 The diagram shows a schematic of the Vue front-end code generation system based on AI and layout components in Embodiment 2 of the present invention. The Vue front-end code generation system based on AI and layout components includes: Module 11 is used to obtain UI design files, extract the inherent styles of each component, parse the layout constraint requirements of each component, and generate a component structure tree. Optimization module 12 is used to generate code based on the conditional generative adversarial network model trained in the two-stage training, learn layout patterns, generate reward signals through the layout fidelity evaluation function, and optimize the responsiveness of the generated code. Adjustment module 13 is used to perform syntax checks on the final code and adjust the component constraint configuration based on the check results.

[0052] In the field of front-end development, Vue, as a popular JavaScript framework, is widely used to build user interfaces. Traditional Vue front-end coding primarily relies on developers manually writing HTML, CSS, and JavaScript code, using Vue's directives and component system to implement page interactions and functionality.

[0053] After receiving the UI design draft file uploaded by the user, which contains layer structure, size attributes and style description information, the system uses a graphics parsing engine to extract the inherent styles of each component, such as fixed width and positioning attributes, and parses the layout constraints of the components in the design draft, such as the maximum width and alignment required by the parent component. The system then standardizes the parsed layout information.

[0054] The UI design files include Sketch, Figma, and PSD files. For Sketch files, their JSON metadata is extracted; for Figma files, REST API is called for parsing; for PSD files, their layer structure is recursively traversed, and the parsed layout information is standardized to generate a standardized layout description tree containing position, size, hierarchy, and preliminary constraint information.

[0055] After generating the layout description tree, node matching is performed in conjunction with the pre-built layout component library. The layout component library contains a three-layer structure of the Vue framework: atomic component layer, sub-component layer, and template component layer. The atomic component layer consists of native HTML tags and basic CSS classes, and is an indivisible unit, such as buttons, input boxes, and icon elements. The sub-component layer encapsulates composite elements through Vue single-file components, and has a preset props configuration interface and event response mechanism. The template component layer contains page-level layout templates and uses a slot mechanism to realize the dynamic replacement of content areas.

[0056] During the matching process, the constraint declarations of each component in the layout component library are read, that is, the width type supported by each component is fixed, flexible or responsive, the minimum / maximum width limit, the mapping relationship between design elements and the attributes of each component is established, and the component structure tree is generated.

[0057] At the same time, the layout constraint requirements extracted from the design draft are initially matched with the constraint declarations of each component, and potentially conflicting constraint points are marked in the component structure tree.

[0058] It should be noted that each component in the layout component library contains constraint declaration information. Specifically, component developers declare the types and ranges of constraints supported by the component by extending the component definition specification. The specific definition interface ButtonComponentConstraints includes supportWidth, which takes values ​​such as 'fixed' / 'flexible' / 'responsive', minWidth, and maxWidth, to describe the component's support for width constraints. During the component matching process, components with corresponding constraint declarations are matched from the component library according to the layout requirements of the components in the design draft, ensuring the reusability and constraint compatibility of the components.

[0059] After generating the mapped component structure tree, a conditional generative adversarial network model is trained in two stages.

[0060] In the first stage of supervised learning, the historical design draft-code dataset is used for supervised learning. The generator network learns the transformation pattern from layout features to code snippets. The layout features include component size, hierarchical relationship, and preliminary constraint information. The focus is on learning how the inherent style of the component is combined with the basic layout constraints.

[0061] When generating basic Vue template code, a constraint transmission channel is established between parent and child components based on the nesting relationship of the component structure tree. The maximum width and alignment of the layout constraints of the parent component are then passed to the child component through the constraint transmission channel.

[0062] The specific method for establishing a constraint transmission channel is as follows: During the component structure tree construction process, a constraints property is defined for each component to store the constraints passed from the parent component and its own inherent constraints; when the parent component is rendered, it passes its own layout constraints, namely width and alignment, to the child component through the applyConstraints method of the component base class; after merging the parent component's constraints, its own default constraints, and user-defined constraints, the child component generates the final style code.

[0063] After completing the first stage of supervised learning, we move on to the second stage of reinforcement learning. We introduce a reinforcement learning mechanism and generate reward signals through a layout fidelity evaluation function. The evaluation function comprehensively considers the constraint conflict resolution, the matching degree between the layout rendering and the design draft, and optimizes the responsiveness and constraint conflict handling capabilities of the generated code. This enables the model to better handle constraint propagation and style conflicts between parent and child components.

[0064] In this process, a style adapter is used for dynamic style calculation. The style adapter prioritizes the alignment of spacing between sibling elements, device size adaptation across breakpoints, z-index hierarchy, and dynamic content overflow handling constraints. It identifies the conflict points between the inherent styles of each component and external constraints, and generates the final code according to preset priority rules.

[0065] Furthermore, the priority rules specifically include: In basic layout properties, flex / grid-related layout parameters, width, margins, and alignment are prioritized using constraints passed from the parent component to meet overall layout requirements; in visual style properties, colors, fonts, and border styles retain the component's inherent styles to ensure consistency in visual characteristics; a configuration interface is provided to allow component developers to specify which properties can be overridden by external constraints, by setting the `allowOverrideProps` array in the component definition to specify the list of properties affected by parent component constraints; when generating styles, the style adapter merges constraints passed from the parent component, inherent component styles, and user-defined styles according to the above priority rules to resolve style conflict issues.

[0066] Furthermore, during dynamic style calculations, it can identify conflicts between the component's inherent style and external constraints. For example, when the inherent width of an atomic component button is a fixed 100px, while the parent component requires its width to be fill, a conflict in the width attribute is detected. According to the preset priority rules, conflicting attributes are handled. If the conflict is a basic layout attribute, the parent component constraint overrides the component's inherent style. If the conflict is a visual style attribute, the component's inherent style is preserved. When layout changes such as window size adjustment or parent component size change are detected at runtime, the style parameters of child components are dynamically adjusted to ensure the correctness of responsive layout. For example, the flex / grid layout parameters of child elements are dynamically calculated based on the size of the parent container using an adaptive grid algorithm.

[0067] The generated code undergoes syntax validation and layout constraint verification based on constraint information in the layout description tree. It detects irreconcilable conflicts between the inherent styles of child components and the constraints passed from the parent component. These conflicts typically arise between fixed-size components and flexible layout parent components. If a conflict is detected, specific warning messages are generated, indicating the location of the conflicting component, the conflicting constraint attributes, and the impact, including buttons overflowing the parent container. Automatic repair suggestions are provided, such as changing the component's `supportWidth` property from 'fixed' to 'flexible', or adjusting the component's constraint declaration or the constraint parameters passed from the parent component. Detected conflict cases are automatically collected as new training samples. These training samples include design draft features, conflicting constraint information, and manually corrected code information, used for incremental training of the AI ​​model to improve its ability to handle constraint conflicts.

[0068] If no conflicts are detected, the final verified code will be packaged into a Vue project file containing the component directory structure, props type definition files, reactive breakpoint configuration preset files, and style variable declaration files. The component constraint configurations involved in the final code generation process will be saved to the layout component library for later use.

[0069] In summary, the Vue front-end code generation system based on AI and layout components proposed in this invention significantly reduces the workload of manually writing code during front-end development through automated design draft parsing, component matching, and code generation processes. Traditional Vue front-end development requires front-end engineers to write HTML, CSS, and JavaScript code line by line to implement page layout and interactive functions. This method, however, only requires uploading UI design draft files to quickly generate basic Vue template code, greatly shortening the development cycle. Taking an e-commerce project with multiple pages and complex interactions as an example, using this method for front-end development can reduce the development time from several weeks to several days, increasing development efficiency several times over, enabling faster project iteration and deployment, and meeting the market's demand for rapid product delivery.

[0070] By introducing a constraint propagation mechanism and style priority strategy, the style conflict problem of multi-level nested components is effectively resolved, ensuring the layout fidelity of the generated code. In practical applications, it ensures that the generated front-end page accurately presents the style and layout of the design draft on different devices and browsers, improving the user experience. Compared with existing technologies where page layout errors are caused by style conflicts, the code generated by this method is of higher quality and more stable, reducing the extensive debugging and repair work required later due to style issues, and lowering project maintenance costs. Simultaneously, the constraint conflict verification and handling function of the code verification module can promptly identify and resolve potential problems in the code, further improving the reliability and robustness of the code.

[0071] By using component library matching and constraint declaration parsing, component developers can clearly declare the types and scope of constraints supported by their components. In different projects or page layouts, when a component is needed, the appropriate component can be quickly found based on its constraint declaration. Through the constraint propagation mechanism, the component can better adapt to different layout environments, achieving efficient reuse in different scenarios. For example, a button component can be declared to support different width types such as fixed, flexible, or responsive. In different page layouts, whether a button with a fixed width is needed or one that adapts to the width of its parent container, the button component can be reused. Simply pass the corresponding constraints according to the layout requirements, greatly improving component reusability, reducing redundant development, and increasing the utilization of development resources.

[0072] Example 4 In another aspect, the present invention also proposes a computer-readable storage medium having stored thereon one or more computer programs that, when executed by a processor, implement the above-described VUE front-end code generation method based on AI and layout components.

[0073] Those skilled in the art will understand that the logic or steps represented in the flowchart or otherwise described herein, for example, can be considered as a sequenced list of executable instructions for implementing logical functions, and can be embodied in any computer-readable storage medium for use by, or in conjunction with, an instruction execution system, apparatus, or device (such as a computer-based system, a processor-included system, or other system that can fetch and execute instructions from, an instruction execution system, apparatus, or device). For the purposes of this specification, "computer-readable storage medium" can mean any means that can contain, store, communicate, propagate, or transmit programs for use by, or in conjunction with, an instruction execution system, apparatus, or device.

[0074] More specific examples (a non-exhaustive list) of computer-readable storage media include: electrical connections (electronic devices) having one or more wires, portable computer disk drives (magnetic devices), random access memory (RAM), read-only memory (ROM), erasable and editable read-only memory (EPROM or flash memory), fiber optic devices, and portable optical disc read-only memory (CDROM). Furthermore, computer-readable storage media can even be paper or other suitable media on which the program can be printed, since the program can be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, interpreting, or otherwise processing as necessary, and then stored in computer memory.

[0075] Example 5 Figure 3 This is a structural block diagram of an electronic device provided in Embodiment 5. The electronic device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, it implements the Vue front-end code generation method based on AI and layout components described in the above embodiments. Figure 3 The electronic device 30 shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of the present invention.

[0076] like Figure 3 As shown, the electronic device 30 can be manifested as a general-purpose computing device, such as a server device. The components of the electronic device 30 may include, but are not limited to: at least one processor 31, at least one memory 32, and a bus 33 connecting different system components (including memory 32 and processor 31).

[0077] Bus 33 includes a data bus, an address bus, and a control bus.

[0078] The memory 32 may include volatile memory, such as RAM 321 (random access memory), and / or cache memory 322, and may further include ROM 323 (read-only memory).

[0079] The memory 32 may also include a program tool 325 having a set (at least one) of program modules 324, including but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of these examples may include an implementation of a network environment.

[0080] The processor 31 executes various functional applications and data processing by running computer programs stored in the memory 32, such as the VUE front-end code generation method based on AI and layout components as described above.

[0081] Electronic device 30 can also communicate with one or more external devices 34 (e.g., keyboard, pointing device, etc.). This communication can be performed via I / O interface 35 (input / output interface). Furthermore, the model-generated electronic device 30 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 36. Figure 3 As shown, network adapter 36 communicates with other modules of the model-generated electronic device 30 via bus 33. It should be understood that, although not shown in the figure, other hardware and / or software modules can be used in conjunction with the model-generated electronic device 30, including but not limited to: microcode, device drivers, redundant processors, disk drive arrays, RAID (disk array) systems, tape drives, and data backup storage systems.

[0082] It should be noted that although several units / modules or sub-units / modules of the electronic device have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of the present invention, the features and functions of two or more units / modules described above can be embodied in one unit / module. Conversely, the features and functions of one unit / module described above can be further divided and embodied by multiple units / modules.

[0083] In the description of this specification, references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of the invention. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples.

[0084] The embodiments described above are merely illustrative of several implementations of the present invention, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of the present invention, and these modifications and improvements all fall within the scope of protection of the present invention. Therefore, the scope of protection of this patent should be determined by the appended claims.

Claims

1. A Vue front-end code generation method based on AI and layout components, characterized in that, The Vue front-end code generation method based on AI and layout components includes: Obtain the UI design file, extract the inherent styles of each component, parse the layout constraints of each component, and generate a component structure tree; Code generation is performed based on a two-stage trained conditional generative adversarial network model, which learns layout patterns and generates reward signals through a layout fidelity evaluation function to optimize the responsiveness of the generated code. The final code is then subjected to syntax validation, and the component constraint configuration is adjusted based on the validation results.

2. The Vue front-end code generation method based on AI and layout components according to claim 1, characterized in that, The steps of obtaining the UI design file, extracting the inherent styles of each component, parsing the layout constraints of each component, and generating a component structure tree include: A pre-built layout component library, which includes an atomic component layer, a molecular component layer, and a template component layer; The system receives UI design draft files, which at least contain layer structure, size attributes, and style description information. Based on the graphics parsing engine, it extracts the inherent styles of each component in the UI design draft file and parses the layout constraint requirements of each component in the design draft. The parsed layout information is then standardized to generate a standardized layout description tree containing position, size, hierarchy, and preliminary constraint information.

3. The Vue front-end code generation method based on AI and layout components according to claim 2, characterized in that, The steps following the generation of the layout description tree include: Match the layout description tree with the pre-built layout component library, read the constraint declarations of each component in the layout component library, establish the mapping relationship between design elements and the attributes of each component, and generate a component structure tree; The layout constraint requirements extracted from the design draft are initially matched with the constraint declarations of each component, and conflicting constraint points are marked on the component structure tree.

4. The Vue front-end code generation method based on AI and layout components according to claim 1, characterized in that, The steps of generating code based on a two-stage trained conditional generative adversarial network model, learning layout patterns, generating reward signals through a layout fidelity evaluation function, and optimizing the responsiveness of the generated code include: In the first stage of supervised learning, the historical design draft-code dataset is used for supervised learning. The generator network learns the transformation pattern from layout features to code snippets. The layout features include at least component size, hierarchical relationship, and preliminary constraint information. It learns how the inherent style of each component is combined with the basic layout constraints. When generating basic Vue template code, a constraint transmission channel is established between parent and child components based on the nesting relationship of the component structure tree. The maximum width and alignment of the layout constraints of the parent component are then passed to the child component through the constraint transmission channel.

5. The Vue front-end code generation method based on AI and layout components according to claim 4, characterized in that, Having completed the first phase of supervised learning, we will now proceed to the second phase of intensive learning. A reinforcement learning mechanism is introduced to generate reward signals through a layout fidelity evaluation function. The evaluation function comprehensively considers the constraint conflict resolution and the matching degree between the layout rendering and the design draft, thereby optimizing the responsiveness and constraint conflict handling capabilities of the generated code. In this process, a style adapter is used for dynamic style calculation. The style adapter prioritizes the alignment of spacing between sibling elements, device size adaptation across breakpoints, z-index hierarchy, and dynamic content overflow handling constraints. It identifies the conflict points between the inherent styles of each component and external constraints, and generates the final code according to preset priority rules.

6. The Vue front-end code generation method based on AI and layout components according to claim 1, characterized in that, The steps of performing syntax checks on the final code and adjusting the component constraint configuration based on the check results are as follows: The generated code undergoes syntax validation, layout constraint verification is performed based on the constraint information in the layout description tree, and conflicts are detected between the inherent styles of child components and the constraints passed from the parent component. If a conflict is detected, a warning message is generated to prompt the developer and automatic repair suggestions are provided.

7. The Vue front-end code generation method based on AI and layout components according to claim 6, characterized in that, If no conflict is detected: Package the validated final code into a Vue project file, and save the component constraint configurations involved in the final code generation process to the layout component library for later use.

8. A Vue front-end code generation system based on AI and layout components, characterized in that, The AI-based and layout component-based Vue front-end code generation system is used to implement the AI-based and layout component-based Vue front-end code generation method according to any one of claims 1-7, the system comprising: The generation module is used to obtain UI design files, extract the inherent styles of each component, parse the layout constraints of each component, and generate a component structure tree. The optimization module is used to generate code based on the conditional generative adversarial network model trained in the two-stage training, learn layout patterns, generate reward signals through the layout fidelity evaluation function, and optimize the responsiveness of the generated code. The adjustment module is used to perform syntax checks on the final code and adjust the component constraint configuration based on the check results.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the VUE front-end code generation method based on AI and layout components as described in any one of claims 1-7.

10. An electronic device comprising a memory, a processor, and a computer program stored in the memory and running on the processor, characterized in that, When the processor executes a computer program, it implements the VUE front-end code generation method based on AI and layout components as described in any one of claims 1-7.

Images