Artificial intelligence-based front-end automatic code generation and optimization system and method

Abstract

The invention relates to the technical field of artificial intelligence, and discloses an artificial intelligence-based front-end automatic code generation and optimization system and method.A demand analysis and code generation module analyzes a natural language demand through a natural language processing technology and generates a front-end code; the design draft conversion module analyzes the UI design draft through an image recognition technology and generates a response type code; the compatibility detection and repair module automatically repairs the cross-browser compatibility problem; the code optimization module is used for compressing codes, combining styles and proposing reconstruction suggestions; and the self-learning module dynamically adjusts a generation strategy according to developer behaviors. According to the method, development requirements can be automatically analyzed, a design draft can be converted, front-end codes can be generated and optimized, and intelligent interaction, compatibility detection and performance optimization functions can be provided. Through the tool, the development efficiency, the code quality and the team cooperation ability are greatly improved, multiple challenges in the traditional development process are solved, and the tool has wide application prospects.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, for example, to a system and method for front-end automated code generation and optimization based on artificial intelligence. Background Art

[0002] With the rapid development of Internet technology, the front-end development field is facing multiple challenges: increasingly complex requirements, diversified technology stacks, and tight development cycles. Although there are numerous development tools and frameworks on the market, front-end development still faces many problems, including:

[0003] 1. Low efficiency of manual coding, which requires manually writing HTML, CSS, and JavaScript code, consuming time and effort.

[0004] 2. Complex conversion of design drafts, which requires manual parsing and conversion into code, easily leading to layout deviations.

[0005] 3. Cumbersome compatibility adaptation, which requires manually fixing compatibility issues for different browsers.

[0006] 4. Difficult maintenance of code redundancy, where repetitive code and inefficient logic accumulate into technical debt.

[0007] However, existing tools (such as low-code platforms) have significant limitations:

[0008] 1. Rely on fixed templates and lack flexibility.

[0009] 2. Lack intelligent optimization capabilities and cross-browser adaptation functions.

[0010] 3. Unable to dynamically adjust the generation strategy according to the developer's habits.

[0011] To effectively improve development efficiency and reduce the workload of developers, automated tools based on AI technology have emerged on the market. However, most tools can only solve some problems in front-end development and lack comprehensive, integrated, and intelligent optimization functions.

[0012] Therefore, there is an urgent need for a front-end development tool with intelligent and automated features to comprehensively support the entire process of development from requirement analysis, automated conversion of design drafts, efficient code generation to performance optimization. Such a tool can not only significantly improve development efficiency but also ensure high-quality code, providing strong guarantee for the long-term maintainability of the project.

[0013] It should be noted that the information disclosed in the above background art section is only used to enhance the understanding of the background of this application, and thus may include information that does not constitute the prior art known to those of ordinary skill in the art. Summary of the Invention

[0014] To provide a basic understanding of some aspects of the disclosed embodiments, a simple summary is given below. This summary is not a general review, nor is it intended to identify key / important constituent elements or delineate the scope of protection of these embodiments, but rather serves as a preface to the detailed description that follows.

[0015] Embodiments of the present disclosure provide a system and method for front-end automated code generation and optimization based on artificial intelligence to comprehensively support the entire process of development from requirement analysis, automated conversion of design drafts, efficient code generation to performance optimization.

[0016] In some embodiments, the system includes:

[0017] A requirement analysis and code generation module that parses natural language requirements through natural language processing technology and generates front-end code;

[0018] A design draft conversion module that parses UI design drafts through image recognition technology and generates responsive code;

[0019] A compatibility detection and repair module that automatically repairs cross-browser compatibility issues;

[0020] A code optimization module that compresses code, merges styles, and proposes refactoring suggestions;

[0021] A self-learning module that dynamically adjusts the generation strategy according to developer behavior.

[0022] Optionally, the system achieves full-process automation through semantic alignment, AST real-time repair, and user profile linkage.

[0023] Optionally, the requirement analysis and code generation module includes:

[0024] A pre-trained natural language processing model for extracting page function points, layout requirements, and interaction logic from requirement texts;

[0025] A generative adversarial network for optimizing the generated code structure and balancing readability and execution efficiency.

[0026] Optionally, the design draft conversion module extracts layout, style, and interactive element attributes and generates responsive front-end code.

[0027] Optionally, the system further includes an intelligent interaction and animation generation module for automatically generating interaction logic and animation effects.

[0028] Optionally, the compatibility detection and repair module integrates Selenium for multi-browser testing and dynamically replaces unsupported APIs.

[0029] Optionally, the code optimization module evaluates performance through Lighthouse and recommends strategies for lazy loading images and preloading resources.

[0030] Optionally, the self - learning module recommends a frequently - used UI component library through a collaborative filtering algorithm.

[0031] In some embodiments, the method includes:

[0032] Obtain developer requirements and UI design drafts;

[0033] Through natural language processing technology and AI analysis, extract relevant information of page elements, generate front - end code through AI, and automatically map each UI component in the design draft to front - end code. The relevant information includes type, layout requirements, style requirement information, and position, size, and color attributes;

[0034] Automatically analyze the generated front - end code and perform compatibility tests on different browsers and devices;

[0035] The artificial intelligence tool gradually optimizes the generated code by analyzing the developer's coding habits, commonly used components, and styles;

[0036] According to the developer's preferences, the AI tool recommends the most suitable UI components, layout methods, and technology stacks.

[0037] In some embodiments, for the method of artificial - intelligence - based front - end automated code generation and optimization, based on the aforementioned system of artificial - intelligence - based front - end automated code generation and optimization, the method includes the following collaborative steps:

[0038] Semantic matching of requirement parsing and design draft transformation, analyzing the topological structure similarity through a graph neural network;

[0039] Insert compatibility detection nodes during the AST traversal stage to repair and pre - verify the code in real - time;

[0040] Dynamically adjust the optimization strategy priority based on the developer adoption rate and solidify it into the default generation rules.

[0041] The system and method of artificial - intelligence - based front - end automated code generation and optimization provided by the embodiments of the present disclosure can achieve the following technical effects:

[0042] The present invention provides a system and method for artificial - intelligence - based front - end automated code generation and optimization, which can automatically parse development requirements, transform design drafts, generate and optimize front - end code, and provide intelligent interaction, compatibility detection, and performance optimization functions. Through this tool, front - end development will enter a new stage of automation and intelligence, greatly improving development efficiency, code quality, and team collaboration ability, solving multiple challenges in the traditional development process, and having broad application prospects.

[0043] The above general description and the following description are only exemplary and explanatory, and are not used to limit this application. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] One or more embodiments are exemplarily illustrated by corresponding drawings. These exemplary illustrations and the drawings do not constitute a limitation on the embodiments. Elements with the same reference numerals in the drawings are shown as similar elements. The drawings do not constitute a scale limitation, and:

[0045] Figure 1 is a flowchart of a system for front-end automated code generation and optimization based on artificial intelligence according to the present invention;

[0046] Figure 2 is a specific implementation flowchart of a system for front-end automated code generation and optimization based on artificial intelligence according to the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0047] In order to be able to understand the features and technical content of the embodiments of the present disclosure in more detail, the implementation of the embodiments of the present disclosure will be described in detail below with reference to the drawings. The attached drawings are only for reference and explanation, and are not used to limit the embodiments of the present disclosure. In the following technical description, for the sake of explanation, numerous details are provided to give a thorough understanding of the disclosed embodiments. However, one or more embodiments may still be implemented without these details. In other instances, well-known structures and devices may be shown in a simplified manner to simplify the drawings.

[0048] The terms "first", "second", etc. in the embodiments of the present disclosure are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way may be interchanged under appropriate circumstances, so as to implement the embodiments of the present disclosure described herein. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion.

[0049] Unless otherwise specified, the term "plurality" means two or more.

[0050] In the embodiments of the present disclosure, the character " / " indicates that the objects before and after are in an "or" relationship. For example, A / B means: A or B.

[0051] The term "and / or" is a description of the association relationship of an object, indicating that three relationships may exist. For example, A and / or B means: A or B, or, A and B these three relationships.

[0052] The term "corresponding" may refer to an association relationship or a binding relationship. A corresponding to B means that there is an association relationship or a binding relationship between A and B.

[0053] The present invention provides a front - end automated code generation and optimization system based on artificial intelligence, which includes the following core modules:

[0054] The requirement analysis and code generation module analyzes natural language requirements through natural language processing technology and generates front - end code;

[0055] The design draft conversion module analyzes UI design drafts through image recognition technology and generates responsive code;

[0056] The intelligent interaction and animation generation module is used to automatically generate interaction logic and animation effects;

[0057] The compatibility detection and repair module automatically repairs cross - browser compatibility issues;

[0058] The code optimization module compresses code, merges styles and provides refactoring suggestions;

[0059] The self - learning module dynamically adjusts the generation strategy according to developer behavior.

[0060] It can be understood that the requirement analysis and code generation module analyzes the requirement description provided by the developer through natural language processing (NLP) technology and automatically generates HTML, CSS, and JavaScript code that conforms to front - end development specifications. The developer only needs to provide a brief requirement or function description, and the AI tool can automatically generate the complete front - end page structure and interaction logic.

[0061] Through image recognition technology, the design draft conversion module enables the AI tool to automatically analyze the UI design drafts (such as in Figma, Sketch, etc. formats) provided by the designer, extract design elements, and generate front - end code that conforms to responsive design. The generated code includes HTML structure, CSS styles, and JavaScript interaction logic, and can quickly convert the design draft into a runnable front - end page.

[0062] In the intelligent interaction and animation generation module, the AI tool can automatically generate interaction behaviors and animation effects according to design requirements, such as button clicks, form submissions, page slides, etc., to enhance the user experience. The tool can automatically identify dynamic elements in the design draft and generate corresponding animation code without manual writing.

[0063] The compatibility detection and repair module has a built - in compatibility detection module that automatically scans the generated code, detects cross - browser (such as Chrome, Firefox, Safari, etc.) compatibility issues, and provides repair solutions. The AI tool can automatically add prefixes to incompatible CSS properties and provide Polyfill support for JavaScript functions to ensure that the code behaves consistently in various browsers.

[0064] The code optimization module can optimize and refactor the generated code through AI tools, removing redundant code, merging duplicate styles, compressing script files, etc., to improve the page loading speed and performance. The AI tool will also automatically propose refactoring suggestions based on project requirements and historical usage, reducing technical debt and ensuring the long-term maintainability of the code.

[0065] The self-learning module provides personalized code generation and optimization suggestions gradually by learning the developer's behavior. As the usage time increases, the AI tool can automatically adjust the style and framework of the generated code according to the developer's preferences, improving work efficiency.

[0066] Optionally, the requirement parsing and code generation module includes:

[0067] A pre-trained natural language processing model for extracting page function points, layout requirements, and interaction logic from the requirement text;

[0068] A generative adversarial network for optimizing the generated code structure and balancing readability and execution efficiency.

[0069] It can be understood that: through the input of a short natural language description by the developer, the AI tool will automatically parse the requirements and generate corresponding front-end code according to the requirements. For example, when the developer inputs "Create a responsive product display page", the AI tool will automatically generate HTML structure, CSS styles, and JavaScript interaction code. This process includes the following steps:

[0070] Requirement understanding: Through NLP technology, the AI analyzes the natural language description and extracts information such as the type of page elements, layout requirements, and style requirements.

[0071] Code generation: Based on the extracted information, the AI generates HTML, CSS, and JavaScript code that complies with Web standards through a deep learning model, ensuring the efficiency and compatibility of the code.

[0072] Optimization and repair: The generated code is optimized to reduce redundant code, improve the page loading speed, and ensure consistent performance on different browsers and devices.

[0073] The technical advantages of this module are:

[0074] High efficiency: The whole process from requirement description to code generation is ≤10 seconds (traditional development takes several hours).

[0075] Accuracy: Through NLP+AST technology, the code function matching rate reaches over 95%.

[0076] Flexibility: Supports dynamic adjustment of generation strategies (such as switching UI frameworks, optimizing algorithms).

[0077] Through the above process, this module realizes the automatic generation from natural language requirements to high-quality front-end code, significantly reducing development costs and improving code consistency.

[0078] As an example: The requirement parsing and code generation module parses development requirements through natural language processing (NLP) technology and generates front-end code that complies with specifications, such as HTML, CSS, and JavaScript code. It can use a pre-trained language model (such as BERT) to extract requirement keywords (such as "responsive layout", "form validation"); generate an executable code framework based on the abstract syntax tree (AST) to support the encapsulation of Web Components components.

[0079] Specifically, it is implemented through the following technologies:

[0080] Natural language processing (NLP): Use a pre-trained language model (such as BERT) to parse the requirement text input by developers and extract key function points (such as "responsive layout", "dynamic form validation").

[0081] Abstract syntax tree (AST) generation: According to the extracted requirement semantics, generate a JavaScript code framework that complies with the ES6 standard through a deep learning model (such as Transformer), and encapsulate reusable modules (such as navigation bars, carousels) based on Web Components.

[0082] Collaborative design draft conversion module: Through a semantic alignment algorithm, map the function descriptions in the requirements (such as "product screening") to the UI elements in the design draft (such as screening bars, drop-down menus) to ensure that the code logic is consistent with the visual design.

[0083] Optionally, the design draft conversion module extracts layout, style, and interactive element attributes and generates responsive front-end code.

[0084] It can be understood that: Developers can upload the UI design drafts of designers, and the AI tool converts the design drawings into standard front-end code through image recognition technology. The implementation steps of this process are as follows:

[0085] Image recognition and parsing: The AI analyzes the UI elements in the design drawing (such as buttons, input boxes, cards, etc.) and extracts their position, size, color, and other attributes.

[0086] Automatic code generation: According to the extracted information, the AI tool generates corresponding HTML and CSS code and realizes a responsive layout through technologies such as media queries.

[0087] Optimization and repair: The AI automatically checks for potential problems in the code, such as invalid style rules, inconsistent layouts, etc., and provides repair suggestions or directly repairs them.

[0088] Each UI component in the further design drafts will be automatically mapped to front-end code:

[0089] Layout: According to the grid layout in the design draft, a responsive CSS Grid or Flexbox layout will be automatically generated;

[0090] Colors and fonts: Automatically identify the colors and font styles in the design draft and apply them to CSS;

[0091] Icons and images: Automatically add appropriate HTML tags according to the design elements and ensure the correctness of the image and icon file paths.

[0092] In addition, the AI tool will automatically generate JavaScript code according to the interaction requirements of the design draft, such as interaction behaviors like button clicks, form submissions, and page slides. The tool will embed dynamic effects in the code to ensure that the animations and transition effects in the design draft can be seamlessly implemented.

[0093] The technical advantages of this module are as follows:

[0094] Accurate design restoration: The restoration degree of element positions, colors, fonts, etc. is ≥95%;

[0095] Responsive automation: Supports breakpoint configuration, reducing manual debugging time by 80%;

[0096] Code maintainability: Generates semantic tags, CSS variables, and modular JavaScript, facilitating team collaboration.

[0097] Through the above process, this module realizes the efficient conversion from static design drafts to dynamic front-end code, significantly shortening the collaboration cycle between design and development.

[0098] As an example, the design draft conversion module automatically converts UI design drafts (such as Figma, Sketch, etc.) into responsive front-end code. It can use image recognition technologies (such as OpenCV) to extract element attributes (positions, sizes, colors); generate multi-terminal compatible code by selecting CSS Grid or Flexbox according to layout features.

[0099] Specifically, it is achieved through the following technologies:

[0100] Image parsing: Use OpenCV and semantic segmentation technologies (such as MaskRCNN) to parse the design draft (Figma / Sketch), and extract attributes such as the coordinates, sizes, colors (RGB / HEX values), and fonts (font sizes, font weights) of UI elements.

[0101] Layout generation: According to the grid system of the design draft, automatically select CSS Grid or Flexbox to generate responsive layout code and adapt to breakpoint configurations (such as hiding the sidebar on mobile devices).

[0102] Collaborative compatibility module: When generating CSS styles, it calls the compatibility database (CanIUse) in real time to automatically add the `webkit` prefix to attributes such as `gap`.

[0103] Example:

[0104] Input design draft: An e-commerce home page design diagram containing a card layout.

[0105] Output code: Generate a card container based on CSS Grid, where each card contains a picture placeholder, a title, and a price area, and automatically add a `:hover` animation effect.

[0106] Optionally, the system also includes an intelligent interaction and animation generation module for automatically generating interaction logic and animation effects.

[0107] It can be understood that: In this embodiment, the AI tool automatically generates interaction logic and animation effects by analyzing the interaction requirements (such as clicks, swipes, form submissions, etc.) input by the user and the design of page elements. The implementation process is as follows:

[0108] Interaction logic analysis: The AI generates corresponding JavaScript code to implement interaction functions according to the type of page elements and the user's behavior requirements, such as events triggered when a button is clicked, form validation, data submission, etc.

[0109] Animation effect generation: The AI automatically generates CSS animations and JavaScript scripts for elements by analyzing the design of the page, such as transition effects when a button hovers, fade-in effects when the page loads, etc., to enhance the user experience.

[0110] Furthermore, for example, the AI tool may automatically generate a transition effect when a button in the design draft is hovered over, and the button color changes through the CSS:hover pseudo-class. At the same time, to enhance the user experience, the tool will automatically add animation effects when the page loads and content is rendered, such as using CSS @keyframes to create a smooth transition effect.

[0111] As an example, the intelligent interaction and animation generation module can automatically generate interaction logic (such as click events) and animation effects (such as fade-in, sliding). The artificial intelligence tool parses the interaction annotations in the design draft and binds event listeners (such as `click`, `input`); generates CSS animations (`@keyframes`) or JavaScript-driven dynamic effects.

[0112] Optionally, the compatibility detection and repair module integrates Selenium for multi-browser testing and dynamically replaces unsupported APIs.

[0113] It can be understood that in this implementation, the AI tool can automatically analyze the generated front-end code, perform compatibility testing on different browsers and devices, and ensure the stability and consistency of the code. The implementation method is as follows:

[0114] Compatibility detection: The AI analyzes the performance of the code on mainstream browsers (such as Chrome, Firefox, Safari, Edge, etc.) through a built-in compatibility detection engine and checks for potential compatibility issues.

[0115] Automatic repair: For the detected compatibility issues, the AI tool can automatically repair or provide repair suggestions. For example, automatically adding necessary polyfills for older browsers and replacing unsupported CSS properties, etc.

[0116] Furthermore, the generated code will pass through the compatibility detection module of the tool, which automatically scans for potential cross-browser compatibility issues in the code. This module relies on a browser compatibility database to detect whether various front-end features (such as CSS properties, JavaScript functions, etc.) can work properly on different browsers and devices.

[0117] If incompatible elements are detected, the AI tool will repair them in the following ways:

[0118] Automatically add browser prefixes for CSS properties (such as -webkit-, -moz-, etc.);

[0119] For functions not supported by some browsers, the AI tool will provide Polyfills (such as providing support for the fetch API for older browsers);

[0120] Adjust the CSS layout or JavaScript code to ensure that the function behaves consistently in all mainstream browsers.

[0121] These compatibility repairs can effectively avoid the tedious work of developers testing and adjusting code in a multi-browser environment and improve development efficiency.

[0122] As an example, the compatibility detection and repair module is used to automatically detect and repair browser compatibility issues in the code. When used, it can integrate the Can I Use database to identify unsupported CSS properties (such as `gap`) and APIs (such as `fetch`); automatically add browser prefixes (such as `-webkit-`) or inject Polyfills (such as `core-js`).

[0123] Specifically, it is achieved through the following technologies:

[0124] AST Scanning and Fixing: During the code generation phase, traverse the AST to detect incompatible CSS properties (such as `backdrop-filter`) and JavaScript APIs (such as `Intersection Observer`), and inject Polyfills (such as `intersection-observer-polyfill`) through Babel plugins.

[0125] Multi-browser Testing: Integrate the Selenium automation testing framework, simulate browser environments such as Chrome, Firefox, Safari, etc., generate compatibility reports and mark high-risk issues (such as layout disorders in IE11).

[0126] Collaborative Code Optimization Module: The fixed code directly enters the compression process (such as Webpack Tree Shaking), and unused Polyfills are removed to reduce the size.

[0127] Example: It is detected that the `fetch` API is used in the code, but the target browser includes IE11 → Automatically replace it with `XMLHttpRequest`, and inject the `es6-promise` Polyfill.

[0128] Optionally, the code optimization module evaluates the performance through Lighthouse and recommends image lazy loading and resource preloading strategies.

[0129] It can be understood that in this implementation, the AI tool will perform intelligent optimization on the generated code, reduce redundant code and improve the performance of the page. The specific implementation is as follows:

[0130] Code Optimization: The AI tool automatically optimizes by analyzing duplicate parts, inefficient algorithms, etc. in the code. For example, merging CSS files, compressing JavaScript code, lazy loading resources, etc.

[0131] Code Refactoring: The AI can intelligently analyze the structure of the code and propose refactoring suggestions, such as extracting duplicate code into common components to improve the readability and maintainability of the code.

[0132] Furthermore, the generated code is optimized by the built-in code optimization module. This module will automatically perform the following operations:

[0133] CSS Optimization: Delete redundant style rules, merge the same styles, use compressed CSS syntax to reduce the file size;

[0134] JavaScript Optimization: Remove unnecessary comments and blank lines, compress JavaScript code, and reduce the nesting level of function calls;

[0135] Image Optimization: Automatically compress image files, optimize the way images are loaded (such as lazy loading), and improve page loading speed.

[0136] Further AI tools will perform intelligent refactoring according to the actual needs of the project. Automatically perform the following operations:

[0137] For layouts or styles that are reused, the tool will recommend extracting them as common components or modules.

[0138] For recurring interaction logic, the tool will recommend abstracting it into functions to improve code reusability and maintainability.

[0139] As an example, the code optimization module is used to compress code, merge redundant styles, and provide refactoring suggestions. When used, static analysis tools (ESLint, Stylelint) can be used to detect inefficient code, as well as dynamic optimization strategies (such as image lazy loading, resource preloading).

[0140] Specifically, it is achieved through the following technologies:

[0141] Static Analysis: Detect redundant code (such as unused variables) through ESLint, and merge duplicate CSS rules with Stylelint.

[0142] Dynamic Optimization: Use Lighthouse to analyze page performance and recommend optimization items (such as converting PNG images to WebP format, enabling HTTP / 2 Server Push).

[0143] Refactoring Suggestions: Based on code clone detection algorithms (such as NiCad), identify duplicate logic (such as form submission functions on multiple pages), and prompt to extract them as common modules.

[0144] Collaborative Self-Learning Module: According to the developer's historical operations (such as frequently using the AntDesign component library), preferentially generate Antd-compatible code.

[0145] Example: Before Optimization: 10 duplicate card component CSS classes; After Optimization: Extracted as the `.card-container` common class, reducing the code volume by 40%.

[0146] Optionally, the self-learning module recommends frequently used UI component libraries through collaborative filtering algorithms.

[0147] It is understandable that in this implementation, the AI tool has the ability of self - learning. It can continuously optimize the generated code according to the developer's usage habits and project requirements, providing a personalized development experience. The specific implementation methods are as follows:

[0148] Behavior analysis: The AI tool gradually optimizes the generated code by analyzing the developer's coding habits, commonly used components and styles.

[0149] Personalized recommendation: According to the developer's preferences, the AI tool can recommend the most suitable UI components, layout methods and technology stacks to help developers complete development tasks more efficiently.

[0150] Furthermore, this tool continuously analyzes the developer's operation habits and project requirements through machine - learning algorithms, and gradually optimizes the way of code generation. For example, if a developer often uses certain specific CSS frameworks or JavaScript libraries, the tool will automatically recommend these libraries and give them priority, reducing the time for repeated configuration.

[0151] Furthermore, as the usage time increases, the AI tool will automatically adjust the style and framework of the generated code according to the developer's preferences. For example, if a developer is more inclined to use CSS Grid layout rather than Flexbox, the tool will preferentially generate CSS Grid code, thus improving development efficiency.

[0152] Furthermore, this tool will also intelligently put forward refactoring and optimization suggestions based on the historical data of the project. For example, for a page with poor performance, the tool will provide intelligent optimization suggestions according to the actual usage of the page, such as lazy - loading images and merging resource requests.

[0153] As an example, the self - learning module is used to dynamically adjust the generation strategy according to the developer's behavior. By recording the developer's preferences (such as framework selection, CSS naming convention); by using collaborative filtering algorithms to recommend frequently used technology stacks (such as Ant Design).

[0154] Specifically, it is achieved through the following technologies:

[0155] User profile construction: Record the developer's operation logs (such as framework selection Vue3, CSS naming habit BEM), and classify user types (such as "full - stack developer", "UI engineer") through clustering algorithms (such as K - means).

[0156] Dynamic strategy adjustment: Based on collaborative filtering algorithms, recommend frequently used technology stacks (such as Vuetify component library is preferentially recommended for Vue developers).

[0157] Feedback closed-loop: If the developer manually modifies the generated code (e.g., changing Flexbox to CSSGrid), the system automatically learns and adjusts subsequent generation strategies.

[0158] Example:

[0159] The developer manually replaces the generated Bootstrap code with TailwindCSS three times in a row → The system subsequently defaults to generating Tailwind atomic class styles.

[0160] In addition, the system achieves full-process automation through semantic alignment, AST real-time repair, and user profile linkage.

[0161] It can be understood that there is linkage between modules: The requirements parsing module and the design draft conversion module match functional requirements and visual designs through a semantic alignment algorithm (e.g., "carousel" corresponds to the CSSGrid layout); The compatibility repair module scans the code in real time during the AST generation stage and dynamically injects repair logic; The self-learning module optimizes subsequent code generation strategies based on the developer's operation history (e.g., defaulting to using TailwindCSS).

[0162] In summary, the present invention provides a system for artificial intelligence-based front-end automated code generation and optimization, which can automatically parse development requirements, convert design drafts, generate and optimize front-end code, and provide intelligent interaction, compatibility detection, and performance optimization functions. With this tool, front-end development will enter a new stage of automation and intelligence, greatly improving development efficiency, code quality, and team collaboration ability, solving multiple challenges in the traditional development process, and having broad application prospects.

[0163] The present disclosure also provides a method for artificial intelligence-based front-end automated code generation and optimization, including:

[0164] Obtain the developer's requirements and UI design drafts;

[0165] Through natural language processing technology and AI analysis, extract relevant information of page elements, generate front-end code through AI, and automatically map each UI component in the design draft to front-end code, where the relevant information includes type, layout requirements, style requirement information, and position, size, and color attributes;

[0166] Automatically analyze the generated front-end code and conduct compatibility tests on different browsers and devices;

[0167] The artificial intelligence tool gradually optimizes the generated code by analyzing the developer's coding habits, commonly used components, and styles;

[0168] According to the developer's preferences, the AI tool recommends the most suitable UI components, layout methods, and technology stacks.

[0169] The present disclosure also provides a method for front-end automated code generation and optimization based on artificial intelligence, based on the aforementioned system for front-end automated code generation and optimization based on artificial intelligence. The method includes the following collaborative steps:

[0170] Semantic matching for requirement analysis and design draft conversion, analyzing the topological structure similarity through a graph neural network;

[0171] Insert compatibility detection nodes during the AST traversal stage to repair and pre-verify the code in real time;

[0172] Dynamically adjust the optimization strategy priority based on the developer adoption rate and solidify it into the default generation rules.

[0173] As an example, the requirement analysis and code generation module uses the BERT model to parse natural language requirements, generate ES6 standard code, and collaborate with the design draft conversion module to match requirement keywords (such as "responsive") with design draft layout attributes (such as CSS Grid configuration) through a semantic alignment algorithm to ensure the consistency between functions and designs.

[0174] The design draft conversion module extracts the design draft element attributes based on OpenCV and generates responsive code; at the same time, it collaborates with the compatibility module to scan the AST in real time during the code generation stage and automatically inject browser prefixes (such as `-webkit-`).

[0175] The compatibility detection and repair module integrates the CanIUse database to detect compatibility and performs automated testing through Selenium; at the same time, it collaborates with the code optimization module, and the repaired code directly enters the compression and refactoring process to reduce redundancy.

[0176] Example 1: Development of an e-commerce product details page

[0177] 1. Requirement input:

[0178] - Natural language description: "Generate a responsive product details page that includes an image carousel, specification selection, and an 'Add to Cart' button."

[0179] - Design draft upload: A Figma file that includes the carousel area, specification selection dropdown menu, and button styles.

[0180] 2. Module collaboration process:

[0181] - Step 1: Requirement analysis

[0182] - NLP extracts keywords: "responsive", "carousel", "specification selection".

[0183] - Generate the basic code framework: The HTML structure contains elements `.carousel`, `.spec-select`, and `.add-to-cart`.

[0184] - Step 2: Design draft conversion

[0185] - OpenCV identifies the carousel size (1200x600px), extracts the button color (`#FF5722`), and the font (Roboto, 16px).

[0186] - Generate CSS Grid layout code and add the `scroll-snap` property to the carousel.

[0187] - Step 3: Compatibility fix

[0188] - It is detected that `scroll-snap` is not supported in Safari below version 14 → Automatically replace it with the Swiper.js library, inject the CDN link and the initialization script.

[0189] - Step 4: Code optimization

[0190] - Lighthouse detects that the images are not compressed → Automatically call the Sharp library to convert the carousel PNG to WebP (the size is reduced by 60%).

[0191] - ESLint prompts the unused variable `tempPrice` → Automatically delete it.

[0192] - Step 5: Self-learning

[0193] - The developer manually replaces Swiper.js with Glide.js → The system records this operation and preferentially recommends Glide.js for subsequent similar requirements.

[0194] 3. Final output:

[0195] - HTML / CSS / JavaScript code package, including responsive layout, carousel function, specification selection linkage logic, and shopping cart event binding.

[0196] - Compatibility report: Supports Chrome, Firefox, Safari 15+; IE11 requires additional Polyfill (automatically injected).

[0197] Example 2: Generation of a form in the background management system

[0198] 1. Requirement input:

[0199] - Natural language description: "Create a user management form that supports create, delete, update, and query operations, and includes a search bar and pagination function."

[0200] - Design draft upload: Sketch file, including table components, search input boxes, and pagination controls.

[0201] 2. Module collaboration process:

[0202] - Step 1: Requirement analysis

[0203] - NLP extracts keywords: "Create, read, update, delete", "Search bar", "Pagination".

[0204] - Generate a basic code framework: Vue 3 + Element Plus component library, including ` <el-table> `、` <el-input>`and` <el-pagination>`.

[0205] - Step 2: Design draft conversion

[0206] - Semantic segmentation to identify table columns (username, email, role) and generate ` <el-table-column>`Configuration`

[0207] -Extract the rounded border of the search bar (`border - radius: 8px`) → Generate the corresponding CSS class.

[0208] -Step 3: Compatibility Fix

[0209] -Detect that `ResizeObserver` relied on by Element Plus is not supported in Firefox below version 78 → Automatically inject `resize - observer - polyfill`.

[0210] -Step 4: Code Optimization

[0211] -Enable Tree Shaking during Webpack packaging to remove the unused Element Plus icon library (volume reduced by 35%).

[0212] -Propose a refactoring suggestion: Encapsulate the "Delete" operation of the table into an independent component `DeleteButton.vue`.

[0213] -Step 5: Self - learning

[0214] -Developers use Ant Design Vue to replace Element Plus multiple times → The system subsequently recommends the ` <a-table>`Component.

[0215] 3. Final Output:

[0216] - Vue 3 project code, integrated with table CRUD functions, search filtering, and pagination logic.

[0217] - Performance report: The first screen loading time ≤ 1.5s, compatible with Chrome and Firefox 90+.

[0218] Example 3: Technical Collaboration in Practice (Multi-module Linkage)

[0219] Scenario: Developers need to quickly generate a home page for a corporate website, including a responsive navigation bar, video background, and contact form.

[0220] 1. Requirement Input:

[0221] - Natural language: "Generate a modern-style home page for a corporate website, including a fixed navigation bar, full-screen video background, and contact form.”

[0222] - Design draft: Adobe XD file, including a transparent navigation bar, video placeholder area, and a form in the Material Design style.

[0223] 2. Highlights of the Collaboration Process:

[0224] - Semantic Alignment:

[0225] - NLP parses "fixed navigation bar” → The design draft conversion module identifies the `position: sticky` property of the navigation bar.

[0226] - "Full-screen video background” in the requirements → The image recognition module extracts the `height: 100vh` style of the video container.

[0227] - AST Real-time Fix:

[0228] - Detected ` <video autoplay>`May be blocked on mobile devices → Automatically add the `muted` attribute and generate click-to-play prompt logic.

[0229] - Dynamic optimization strategy:

[0230] - Developers used to manually replace the video format from MP4 to WebM → The self-learning module will subsequently default to using WebM and generate <source> `Multi-format alternative code.

[0231] 3. Output results:

[0232] - The home page code supports automatic video playback in Safari, sticky navigation bar effect, and form validation.

[0233] - Compatibility fix: Add the `-webkit-sticky` prefix for iOS Safari to ensure correct navigation bar positioning.

[0234] The embodiments of the present disclosure provide a computer-readable storage medium storing computer-executable instructions, and the computer-executable instructions are configured to execute the method for front-end automation code generation and optimization based on artificial intelligence as described above.

[0235] The above computer-readable storage medium may be a transient computer-readable storage medium or a non-transient computer-readable storage medium.

[0236] The technical solution of the embodiments of the present disclosure may be embodied in the form of a software product. The computer software product is stored in a storage medium and includes one or more instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in the embodiments of the present disclosure. The foregoing storage medium may be a non-transient storage medium, including: various media such as USB flash drives, external hard drives, read-only memories (ROMs), random access memories (RAMs), magnetic disks, or optical discs that can store program codes, or may also be a transient storage medium.

[0237] The above description and the accompanying drawings fully illustrate the embodiments of the present disclosure, enabling those skilled in the art to practice them. Other embodiments may include structural, logical, electrical, process, and other changes. The embodiments merely represent possible variations. Unless explicitly required, the individual components and functions are optional, and the order of operations may vary. Parts and features of some embodiments may be included in or replace parts and features of other embodiments. Moreover, the terms used in this application are only for describing the embodiments and do not limit the scope of protection. As used in the description herein, unless the context clearly indicates otherwise, the singular forms "a", "an", and "the" are intended to also include the plural forms. Similarly, as used in this application, the term "and / or" refers to any and all possible combinations of one or more of the associated listed items. Additionally, when used in this application, the term "comprise" and its variants "comprises" and / or "comprising" etc. mean the presence of the stated features, wholes, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or groups thereof. Without further limitation, an element defined by the statement "comprising an..." does not exclude the presence of additional identical elements in the process, method, or apparatus comprising the element. Herein, each embodiment may focus on the differences from other embodiments, and the same or similar parts among the embodiments may be referred to each other. For the methods, products, etc. disclosed in the embodiments, if they correspond to the method parts disclosed in the embodiments, the relevant parts may refer to the description of the method parts.

[0238] Those skilled in the art will realize that the units and algorithm steps of each example described in connection with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in hardware or software may depend on the specific application and design constraints of the technical solution. The skilled person may use different methods for each specific application to implement the described functions, but such implementation should not be considered to exceed the scope of the embodiments of the present disclosure. The skilled person can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices, and units described above can refer to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0239] In the embodiments disclosed herein, the disclosed methods, products (including but not limited to devices, equipment, etc.) can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of the units can be merely a logical function division, and in actual implementation, there can be other division methods. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Additionally, the displayed or discussed couplings or direct couplings or communication connections to each other can be through some interfaces. The indirect couplings or communication connections of the devices or units can be in electrical, mechanical, or other forms. The units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they can be located in one place or distributed to multiple network units. Some or all of the units can be selected according to actual needs to implement this embodiment. Additionally, in the embodiments of the present disclosure, the various functional units can be integrated in one processing unit, or each unit can exist physically alone, or two or more units can be integrated in one unit.< / video> < / el-table>

Claims

1. A system for front-end automatic code generation and optimization based on artificial intelligence, characterized in that: include: The requirements analysis and code generation module uses natural language processing technology to analyze natural language requirements and generate front-end code; Design draft conversion module, which uses image recognition technology to analyze UI design drafts and generate responsive code; Compatibility detection and repair module, automatically repair cross-browser compatibility issues; Code optimization module, which compresses code, merges styles and makes refactoring suggestions; Self-learning module that dynamically adjusts generation strategies based on developer behavior.

2. The system according to claim 1, characterized in that The system achieves full-process automation through semantic alignment, real-time AST repair and user portrait linkage.

3. The system according to claim 1, characterized in that The requirement parsing and code generation module includes: Pre-trained natural language processing model to extract page functional points, layout requirements and interaction logic from demand text; Generate adversarial networks to optimize the generated code structure and balance readability and execution efficiency.

4. The system according to claim 1, characterized in that The design draft conversion module extracts layout, style and interactive element attributes, and generates responsive front-end code.

5. The system according to claim 1, characterized in that Also includes: Intelligent interaction and animation generation module, used to automatically generate interaction logic and animation effects.

6. The system according to any one of claims 1 to 5, characterized in that: The compatibility detection and repair module integrates Selenium to perform multi-browser testing and dynamically replaces unsupported APIs.

7. The system according to any one of claims 1 to 5, characterized in that: The code optimization module evaluates performance through Lighthouse and recommends lazy loading of images and preloading of resources.

8. The system according to any one of claims 1 to 5, characterized in that: The self-learning module recommends a frequently used UI component library through a collaborative filtering algorithm.

9. A method for front-end automatic code generation and optimization based on artificial intelligence, characterized in that: include: Obtain developer requirements and UI design drafts; Through natural language processing technology and AI analysis, relevant information of page elements is extracted and front-end code is generated through AI, and each UI component in the design draft is automatically mapped to the front-end code. The relevant information includes type, layout requirements, style requirements, and location, size, and color attributes; Automatically analyze the generated front-end code and perform compatibility tests on different browsers and devices; AI tools gradually optimize the generated code by analyzing developers’ coding habits, common components, and styles; Based on the developer's preferences, AI tools recommend the most suitable UI components, layout methods and technology stacks.

10. A method for front-end automatic code generation and optimization based on artificial intelligence, characterized in that: Based on the artificial intelligence-based front-end automatic code generation and optimization system according to any one of claims 1 to 8, the method comprises the following collaborative steps: Semantic matching between demand analysis and design draft conversion, and topological structure similarity analysis through graph neural network; Insert compatibility detection nodes during the AST traversal phase to fix and pre-verify the code in real time; Dynamically adjust optimization strategy priorities based on developer adoption rates and solidify them as default generation rules.

Images