A CSS architecture generation method, system, device and medium based on artificial intelligence

Abstract

The present invention relates to the technical field of web page development, and in particular to a method, system, device and medium for generating a CSS architecture based on artificial intelligence, wherein the method specifically comprises: obtaining project development framework data, identifying and analyzing the project development framework data through a deep learning model, and generating a first CSS atomic class set; performing preliminary optimization on the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization comprises selector nesting level optimization, redundant style definition optimization and naming specification optimization; obtaining web page design requirement data, adjusting the second CSS atomic class set according to the web page design requirement data, and generating an initial CSS code file; performing optimization processing on the initial CSS code file through a PostCSS postprocessor, and obtaining a target CSS code file. The present invention realizes the automatic generation and optimization of CSS architecture, and improves web page development efficiency and code quality.

Description

Technical Field

[0001] The present invention relates to the technical field of web page development, and in particular to a method, system, device and medium for generating a CSS architecture based on artificial intelligence. Background Art

[0002] In front-end development, CSS is the core of web page style design, and its architecture design is directly related to the performance, maintainability and scalability of the web page. Atomic CSS, one of the traditional CSS architecture methods, has indeed shown significant advantages in improving style reusability, reducing code redundancy and maintaining style consistency by defining a series of small and highly focused atomic classes in a fine-grained manner. However, as the scale and complexity of front-end projects continue to increase, Atomic CSS has gradually exposed some problems and limitations that cannot be ignored.

[0003] 1. Class name management and memory burden increase: As the project progresses, the number of atomic classes increases dramatically. These class names are often short and lack descriptive, making management and memory a difficult task. Developers not only need to memorize a large number of class names, but also need to accurately understand the style details represented by each class name, which undoubtedly increases the cost of learning and use and reduces development efficiency.

[0004] 2. High setup costs at the beginning of the project: At the start of the project, a lot of time and resources need to be invested to predefine and organize the atomic class library. This process not only requires in-depth analysis of design requirements, but also requires consideration of possible future changes to ensure the comprehensiveness and applicability of the atomic class. However, this kind of upfront investment is often time-consuming and costly, increasing the difficulty and cycle of project startup.

[0005] 3. Increased HTML structure complexity: In order to take full advantage of the reusability of atomic CSS, developers may apply multiple atomic classes to HTML elements to achieve complex style effects. This approach may be acceptable in small projects, but in large projects, the HTML structure may become extremely complex, filled with lengthy class name lists, reducing the readability and maintainability of the code.

[0006] 4. Limitations of static atomic class collections: Atomic CSS usually relies on pre-defined static class collections, which makes it incapable of dealing with dynamically changing design requirements. Whenever the design is adjusted or new style requirements are added, the atomic class library needs to be re-evaluated and updated, which increases the maintenance workload and may introduce unnecessary risks.

[0007] 5. Reduced flexibility and control of style combinations: Although atomic CSS provides a high degree of style reusability, it may not provide sufficient flexibility and control in complex layouts and style combinations. Developers may need to spend more time combining and adjusting atomic classes to achieve the desired visual effect, which reduces development efficiency to a certain extent. Summary of the invention

[0008] The purpose of the present invention is to provide a CSS architecture generation method, system, device and medium based on artificial intelligence, which realizes the automatic generation and optimization of the CSS architecture, improves the web page development efficiency and code quality, and solves at least one of the above-mentioned prior art problems.

[0009] In a first aspect, the present invention provides a method for generating a CSS architecture based on artificial intelligence, the method specifically comprising:

[0010] Acquire project development framework data, identify and analyze the project development framework data through a deep learning model, and generate a first CSS atomic class set;

[0011] Preliminarily optimizing the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization includes selector nesting level optimization, redundant style definition optimization, and naming specification optimization;

[0012] Acquire webpage design requirement data, adjust the second CSS atomic class set according to the webpage design requirement data, and generate an initial CSS code file;

[0013] Optimizing the initial CSS code file by using a PostCSS postprocessor to obtain a target CSS code file;

[0014] The UI screenshot data of the actually generated web page is obtained, and by comparing the UI screenshot data with the expected design effect of the target CSS code file, it is determined whether the target CSS code file meets the expected requirements of the project.

[0015] In a second aspect, the present invention provides a CSS architecture generation system based on artificial intelligence, the system specifically comprising:

[0016] A first generation module is used to obtain project development framework data, identify and analyze the project development framework data through a deep learning model, and generate a first CSS atomic class set;

[0017] A second generation module is used to perform preliminary optimization on the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization includes selector nesting level optimization, redundant style definition optimization, and naming specification optimization;

[0018] A third generating module is used to obtain webpage design requirement data, adjust the second CSS atomic class set according to the webpage design requirement data, and generate an initial CSS code file;

[0019] A fourth generation module is used to optimize the initial CSS code file through a PostCSS postprocessor to obtain a target CSS code file;

[0020] The fifth generation module is used to obtain UI screenshot data of the actually generated web page, and determine whether the target CSS code file meets the expected requirements of the project by comparing the UI screenshot data with the expected design effect of the target CSS code file.

[0021] In a third aspect, the present invention provides a computer device, comprising: a memory and a processor and a computer program stored in the memory, and when the computer program is executed on the processor, it implements the artificial intelligence-based CSS architecture generation method as described in any one of the above methods.

[0022] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the method for generating a CSS architecture based on artificial intelligence as described in any one of the above methods is implemented.

[0023] Compared with the prior art, the present invention has at least one of the following technical effects:

[0024] 1. Realize the automatic generation and optimization of CSS architecture, improve web development efficiency and code quality.

[0025] 2. Use deep learning models to identify and analyze project development framework data, automatically generate a preliminary set of CSS atomic classes, and undergo preliminary optimization (such as selector nesting level optimization, redundant style definition optimization, and naming specification optimization) to reduce manual intervention and improve generation efficiency.

[0026] 3. According to the web design demand data, natural language processing algorithms and genetic algorithms are used to accurately match CSS atomic class sets and optimize attribute values ​​to ensure that the generated CSS code files meet design requirements and have high adaptability and flexibility.

[0027] 4. Use the PostCSS postprocessor to optimize the initial CSS code file, including syntax checking, compression, and browser compatibility processing, to ensure that the final generated CSS code file is both efficient and compatible with multiple browsers.

[0028] 5. By comparing the UI screenshot data of the actual generated web page with the expected design effect of the target CSS code file, the effect can be automatically verified. When it is found that it does not meet expectations, the difference area can be quickly located and the code optimization and adjustment can be performed to form a closed-loop iteration, continuously improving the quality of the CSS code and the overall performance of the project. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0030] Figure 1 It is a flowchart of a CSS architecture generation method based on artificial intelligence provided by an embodiment of the present invention;

[0031] Figure 2 It is a structural diagram of a CSS architecture generation system based on artificial intelligence provided by an embodiment of the present invention;

[0032] Figure 3 It is a structural schematic diagram of a computer device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0033] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0034] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.

[0035] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0036] As used in the specification and appended claims of this application, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce [described condition or event] is detected" or "in response to detecting [described condition or event]", depending on the context.

[0037] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0038] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0039] In the embodiment of the present application, the execution subject of the process includes a terminal device, which includes but is not limited to: a server, a computer, a smart phone, a tablet computer, and other devices capable of executing the method disclosed in the present application. Figure 1 A flowchart of a method for generating a CSS architecture based on artificial intelligence disclosed in an embodiment of the present invention is shown, and the details are as follows:

[0040] S101, obtaining project development framework data, identifying and analyzing the project development framework data through a deep learning model, and generating a first CSS atomic class set.

[0041] In this embodiment, in a large-scale Web project development, in order to improve development efficiency, ensure style consistency and maintainability, deep learning technology is used to automatically identify and analyze commonly used CSS style rules from the project development framework data, and then generate a set of optimized CSS atomic class sets (i.e., the first CSS atomic class set). First, collect existing HTML, CSS and JavaScript files from the project development framework, especially those containing repeated style definitions and component libraries, and then use crawlers or scripting tools to batch download and organize files, parse the CSS code, extract all style rules (selectors, attributes and values), clean the extracted style rules, remove useless or repeated rules, and standardize attribute names and values. The cleaned style rules are converted into vector representations, and word embedding models (such as Word2Vec, BERT) can be used to embed CSS properties and values. Considering the combinatorial characteristics of CSS styles, features can be designed to capture the co-occurrence relationship between different attributes, such as the frequency of attribute pairs, the position of attributes in rules, etc.

[0042] Use deep learning models, such as convolutional neural networks (CNN) combined with long short-term memory networks (LSTM) or Transformer structures, to process sequence data and capture contextual information. Divide the preprocessed style rules into training sets and test sets. The training set is used to train the model, and the test set is used to evaluate the model performance. Input the style rules into the model as a sequence. The model predicts whether each style rule should be included in the first CSS atomic class set, or more precisely, predicts which specific atomic class the rule should belong to. Use the cross entropy loss function to optimize the model parameters through the back propagation algorithm, and evaluate the model performance on the test set, such as accuracy, recall, and F1 score. According to the model prediction results, classify the style rules with high confidence into the corresponding atomic class. Remove redundant and conflicting rules to ensure the independence and consistency of atomic classes. Generate documents and sample code to facilitate developers to use these atomic classes in their projects. Integrate the generated first CSS atomic class set into the project development framework to replace or supplement the existing style definitions. Developers can directly use these atomic classes when writing new components or modifying existing components to improve development efficiency and style consistency.

[0043] In this embodiment, by automatically generating a CSS atomic class set, the workload of manually writing and maintaining style rules is reduced, and development efficiency is improved. The style data in the project development framework is analyzed by a deep learning model, and the generated atomic class set can reflect the commonly used style patterns in the project, thereby ensuring the consistency of the style. The atomic class set has a high degree of reusability and composability, making the style code more concise and easy to manage. When the style needs to be modified, only the atomic class needs to be adjusted, reducing potential errors and duplication of work.

[0044] In some embodiments, in the above step S101, the identifying and analyzing the project development framework data by using a deep learning model to generate a first CSS atomic class set specifically includes:

[0045] After preprocessing the project development framework data, the preprocessed project development framework data is converted into vector data by using word embedding technology;

[0046] Performing feature extraction on the vector data through a convolutional neural network to obtain a feature vector, wherein the feature vector includes a project directory structure, a project naming specification, and a project code style;

[0047] Constructing a regular expression pattern according to a preset CSS atomic class generation rule, and judging whether the feature vector satisfies the CSS atomic class generation rule by using the regular expression pattern;

[0048] If the CSS atomic class generation rule is met, the corresponding CSS atomic class is generated according to the CSS atomic class generation rule, and all CSS atomic classes are merged to form a first CSS atomic class set.

[0049] In this embodiment, according to the preprocessed project development framework data, the word embedding technology is used to convert the text data into a numerical vector representation to obtain vector data; for the obtained vector data, a convolutional neural network model is constructed, and the vector data is feature extracted through a combination of a convolutional layer and a pooling layer to obtain a high-level abstract feature representation; according to the features extracted by the convolutional neural network, it is determined whether the feature vector contains key information such as the project directory structure, naming conventions and code style, and if so, it is marked; the feature vector extracted by the convolutional neural network is dimensionally reduced to reduce the dimension of the feature vector to obtain a more refined feature representation; the reduced feature vector is input into the fully connected layer, and the feature is mapped to the classification label space of the project development framework through a nonlinear transformation; the output of the fully connected layer is normalized using the softmax function to obtain the probability distribution of each category, and the category with the largest probability is selected as the final prediction result; according to the prediction result, the classification label of the project development framework is output to determine the directory structure, naming conventions and code style to which the project belongs.

[0050] Obtain a preset CSS atomic class generation rule, and construct a corresponding regular expression pattern according to the CSS atomic class generation rule; obtain a feature vector to be judged, and use the constructed regular expression pattern to match and judge the feature vector. If the feature vector satisfies the regular expression pattern, it is judged that the feature vector meets the CSS atomic class generation rule; for the feature vector that meets the CSS atomic class generation rule, generate a corresponding CSS atomic class according to the corresponding CSS atomic class generation rule; merge all generated CSS atomic classes to obtain a first CSS atomic class set.

[0051] For example, in the data preprocessing stage of the project development framework, methods such as word segmentation, stop word removal, and part-of-speech tagging can be used to clean and standardize text data. Then, each word is mapped to a real vector of fixed dimension using word embedding techniques such as Word2Vec. The commonly used word vector dimension is 100 to 300 dimensions. Then, a one-dimensional convolutional neural network is used to extract features from the word vector sequence. The convolution kernel size can be set to 3 to 5, and the number of convolution kernels can be set to 128 to 256. The extracted feature vector can well represent the project's directory structure, naming conventions, and code style information. For the generation rules of CSS atomic classes, some common naming patterns can be summarized, such as the "attribute-value" form (for example, font-bold means bold font), and corresponding regular expressions can be constructed to match CSS atomic classes in feature vectors. When the feature vector meets the regular pattern of the CSS atomic class, the corresponding atomic class name and attribute value are generated according to the matching result, and merged into the CSS atomic class set. The final set of atomic classes can be used as a CSS code style guide for the project to standardize style writing during the development process and improve code quality and maintainability.

[0052] S102, performing preliminary optimization on the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization includes selector nesting level optimization, redundant style definition optimization, and naming specification optimization.

[0053] In this embodiment, each style rule in the first CSS atomic class set is traversed to analyze the nesting level of each selector. Too deep a nesting level may lead to inefficient CSS selector parsing and increase rendering time. If a nested selector can be replaced by a simpler direct selector, it is replaced. When multiple selectors share the same style definition, try to merge them into a more general selector to reduce duplication and improve efficiency. Use CSS preprocessor features (such as Sass's & symbol) to optimize the nested structure, but ensure that the final output CSS remains low-level.

[0054] By comparing and contrasting the style definitions in the first CSS atomic class set, those style rules that are repeated in different atomic classes without any differences are identified. The repeated style rules are merged into one or more atomic classes to reduce the size of the style sheet. Those style definitions that are completely unused, i.e. "dead code", are deleted to further reduce the size of the style sheet.

[0055] Develop a clear and consistent CSS naming convention based on the project or team's conventions. This may include using short and meaningful class names, following the BEM (block, element, modifier) ​​naming convention, etc. Review the class names in the first CSS atomic class set to check whether they meet the naming conventions. Adjust the class names that do not meet the conventions to ensure that they are both easy to understand and meet the project standards.

[0056] In this embodiment, by optimizing the nesting level of selectors, the complexity and parsing time of CSS selectors are reduced, thereby improving the rendering performance of web pages. By merging and deleting redundant style definitions, the size of CSS style sheets is significantly reduced, the loading speed is accelerated, and bandwidth consumption is reduced. The optimization of naming conventions makes CSS code clearer, consistent, and easy to understand. Team members can locate and understand style definitions more quickly, reducing maintenance costs.

[0057] In some embodiments, in the above step S102, the preliminary optimization of the first CSS atomic class set specifically includes:

[0058] A recursive algorithm is used to analyze the nesting level of the selectors of the first CSS atomic class set, and if the nesting level exceeds a preset number of levels, it is determined that the nesting is too deep;

[0059] A hash table is used to store style attributes of deeply nested selectors, and the deeply nested selectors whose similarity is greater than a first preset similarity threshold are merged by calculating the similarity of the style attributes;

[0060] Based on the CSSLint tool, a CSS rule tree is constructed by using the first CSS atomic class set, and a post-order traversal algorithm of the tree is used to compare the style definitions of leaf nodes of the CSS rule tree from bottom to top, and leaf nodes with duplicate style definitions or useless style definitions are pruned;

[0061] According to the preset BEM naming specification, a regular expression is used to match all types of the first CSS atomic class set, and the class names that do not conform to the BEM naming specification are automatically modified.

[0062] In this embodiment, a set of CSS atomic class selectors to be analyzed is obtained, and for each selector, a recursive algorithm is used to analyze the depth of its nesting level. In the process of recursively analyzing the nesting level of the selector, if the nesting level of the current selector exceeds the preset maximum number of layers, it is determined that the selector is nested too deeply and is added to the list of deeply nested selectors. For each selector in the deeply nested selector list, the corresponding style attributes are extracted, and a hash table is used to store the correspondence between the selector and the style attribute. The key of the hash table is the selector, and the value is the style attribute set. By traversing the deeply nested selector hash table, the style attribute sets corresponding to different selectors are compared, and the similarity of the style attributes is calculated. The similarity of the style attributes can be measured by algorithms such as cosine similarity. According to the calculated style attribute similarity, the deeply nested selectors whose similarity is greater than the preset threshold are merged. When merging, a new selector is generated, which matches all the original selectors that can be merged, and the corresponding style attribute takes the union of all the style attributes of the mergeable selectors. For the merged new selector, a recursive algorithm is used again to check whether its nesting level meets the requirements. If the nesting level of the merged selectors still exceeds the preset value, repeat the above steps until no more merging is possible. Output the processed CSS atomic class selector set, where the selectors that are too deeply nested have been merged and the nesting level is controlled within the preset range. The original deeply nested selectors are replaced by the merged new selectors, realizing the flattening and optimization of CSS selectors.

[0063] The first CSS atomic class set is analyzed by the CSSLint tool to obtain the atomic class style definition information and construct a CSS rule tree model. The post-order traversal algorithm of the tree is adopted, starting from the leaf node of the CSS rule tree, and the nodes of the CSS rule tree are traversed layer by layer from the bottom to the top. In the process of post-order traversal of the CSS rule tree, for each leaf node, its style definition information is extracted and compared with the style definitions of other leaf nodes in the same layer. By comparing the style definitions of the leaf nodes, it is determined whether there are repeated style definitions. If there are repeated style definitions, the leaf node is marked as a prunable node. On the basis of the comparison of the leaf node style definitions, it is further analyzed whether the style definition of each leaf node is used in actual applications. If it is not used, it is determined to be a useless style definition and the leaf node is marked as a prunable node. According to the pruning mark of the leaf node, the CSS rule tree is pruned to remove the leaf nodes and their ancestor nodes where the marked repeated style definitions and useless style definitions are located. Based on the pruned CSS rule tree, the optimized CSS atomic class set is regenerated, the repeated and useless style definitions are removed, and the streamlined and optimized CSS atomic class set is obtained.

[0064] According to the preset BEM naming specification, the matching pattern of the BEM naming specification is obtained, and the matching pattern is converted into a regular expression; all class names of the first CSS atomic class set are obtained, and the regular expression is used to match each class name; if the match is successful, it is determined that the class name complies with the BEM naming specification and the class name is kept unchanged; if the match fails, it is determined that the class name does not comply with the BEM naming specification, and a modified class name is automatically generated according to the BEM naming specification; the original class name in the first CSS atomic class set is replaced with the modified class name to obtain a second CSS atomic class set after normalization of the naming.

[0065] Exemplarily, when analyzing the nesting level of the selectors of the first CSS atomic class set, a recursive algorithm can be used to set the preset number of layers to 5 layers, and nesting exceeding 5 layers is judged to be too deeply nested. For selectors that are too deeply nested, their style attributes are stored in a hash table, and the similarity of the style attributes is calculated, for example, the color similarity threshold is set to 10, and the size similarity threshold is set to 5px, and the selectors whose similarity exceeds the threshold are merged. Then, the CSSLint tool is used to build a CSS rule tree, and the post-order traversal algorithm of the tree is used to compare the style definitions from the bottom up starting from the leaf nodes, for example, to determine whether the margin and padding are the same. If they are the same, they are regarded as duplicate style definitions. Invalid style definitions such as width:auto are pruned and optimized. Finally, a regular expression is used to match the class names of the first CSS atomic class set. For example, class names separated by "-" are regarded as complying with the BEM specification, and class names named in camel case are automatically modified to be separated by "-", such as "redTextBold" is modified to "red-text-bold", to ensure that the class name style is unified and standardized. By optimizing the above steps, you can effectively streamline atomic CSS classes and improve the readability and maintainability of the code.

[0066] S103, obtaining web page design requirement data, adjusting the second CSS atomic class set according to the web page design requirement data, and generating an initial CSS code file.

[0067] In this embodiment, the web design requirements are compared with the second CSS atomic class set to identify which atomic classes can be used directly and which need to be adjusted or added. For styles that need to be adjusted or added, the difference between them and the existing atomic class set is evaluated to determine the direction and scope of the adjustment. According to the results of the demand analysis, the relevant classes in the second CSS atomic class set are modified, including the adjustment of attribute values, the increase and decrease of attributes, etc. For styles that are unique to the requirements, the corresponding atomic classes are added to the set. Ensure that the newly added atomic classes follow the previous naming specifications and optimization principles.

[0068] According to the web design requirements, write global basic styles, such as reset styles, font styles, color definitions, etc. Use the adjusted second CSS atomic class set to build the specific style of the page by combining different atomic classes and save it as the initial CSS code file.

[0069] In this embodiment, through detailed demand analysis and adjustment of the second CSS atomic class set, it is ensured that the generated initial CSS code file can accurately realize the webpage design requirements.

[0070] In some embodiments, in the above step S103, adjusting the second CSS atomic class set according to the webpage design requirement data to generate an initial CSS code file specifically includes:

[0071] Extracting key demand information of the webpage design demand data according to a natural language processing algorithm, and generating a key demand vector according to the word frequency of the key demand information;

[0072] The key requirement vector and the second CSS atom class set are matched by using a cosine similarity algorithm, and a plurality of target CSS atom classes having a similarity greater than a second preset similarity threshold are selected from the second CSS atom class set;

[0073] The property values ​​of the target CSS atomic classes are optimized according to a genetic algorithm to obtain multiple target CSS atomic classes with the highest fitness, and the multiple target CSS atomic classes with the highest fitness are filled into a preset CSS file template to form an initial CSS code file.

[0074] In this embodiment, web page design requirement data is obtained, natural language processing is performed on it, and key requirement information is extracted; based on the extracted key requirement information, word frequency is counted to generate a key requirement vector; a pre-constructed second CSS atomic class set is obtained as a candidate matching set; a cosine similarity algorithm is used to calculate the similarity between the key requirement vector and each atomic class in the second CSS atomic class set; a second preset similarity threshold is set, and CSS atomic classes with a similarity greater than the threshold are selected as candidate target CSS atomic classes; based on the similarity ranking results of the candidate target CSS atomic classes, several with the highest similarity are selected as the final target CSS atomic classes.

[0075] According to the preset CSS file template, determine the basic structure and properties of the target CSS atomic class. Use a genetic algorithm to randomly generate an initial population with the property values ​​of the CSS atomic class as genes. Through crossover and mutation operations, generate new combinations of CSS atomic class property values ​​to form a new population. According to the fitness function, evaluate the fitness of each CSS atomic class. The higher the fitness, the better the atomic class. Select multiple CSS atomic classes with the highest fitness as the optimized target CSS atomic class. Fill the property values ​​of the optimized target CSS atomic class into the preset CSS file template. Output the filled CSS file template to obtain the initial CSS code file, and complete the optimization of the CSS atomic class property values.

[0076] Exemplarily, the TF-IDF algorithm in the natural language processing algorithm is first used to extract keywords in the web design demand data. For example, the word frequency threshold is set to 3, and the demand keywords such as "layout", "color matching", and "navigation" are extracted, and the corresponding key demand vector is generated according to the word frequency, and the dimension is set to 10 dimensions. Then, the cosine similarity algorithm is used to match the key demand vector with the class name vector of the second CSS atomic class set, and the second preset similarity threshold is set to 8, and several target CSS atomic classes with similarity greater than 8 are selected. Then, the genetic algorithm is used to optimize the attribute value of the target CSS atomic class, and the population size is set to 50, the number of iterations is set to 100, the crossover probability is set to 8, and the mutation probability is set to 1. The fitness of each individual is calculated by the fitness function, and the 10 target CSS atomic classes with the highest fitness are selected. Finally, these 10 target CSS atomic classes are filled into the preset CSS file template to generate an initial CSS code file. During the filling process, the order of the atomic classes can be automatically adjusted according to the writing order of CSS attributes, such as positioning, box model, text style, etc., to improve the readability of the code. At the same time, semantic analysis technology can also be used to automatically add necessary comments based on the naming of atomic classes to facilitate subsequent maintenance and modification. After the above steps, an initial CSS code file can be quickly generated according to the web design requirements, greatly improving development efficiency.

[0077] S104, optimizing the initial CSS code file by using a PostCSS postprocessor to obtain a target CSS code file.

[0078] In this embodiment, in Web development, the optimization of CSS code is an important part of improving the loading speed and rendering performance of web pages. PostCSS is a post-processor that uses JavaScript tools and plug-ins to convert CSS code. It allows you to use future CSS syntax and can perform various optimizations and conversions on CSS through the plug-in system. Specifically, use package management tools such as npm or yarn to install PostCSS and its required plug-ins. Common optimization plug-ins include autoprefixer (automatically adding browser prefixes), cssnano (compressing CSS code), cssdeclarationSorter (sorting CSS declarations to improve compression), etc. Create a postcss.config.js file in which PostCSS and its plug-ins are configured. The configuration items include specifying which plug-ins need to be used and their respective options. In the package.json file of the project, add a script command to perform PostCSS processing, which will read the initial CSS code file, apply the configured plug-ins, and output the optimized target CSS code file.

[0079] In this embodiment, by compressing and deleting unnecessary CSS code (such as comments, spaces, repeated rules, etc.), PostCSS significantly reduces the size of the target CSS code file, thereby speeding up the loading speed of the web page. Using PostCSS and its plug-ins for CSS optimization processing automates some repetitive and tedious work and improves the work efficiency of developers.

[0080] In some embodiments, in the above step S104, the optimizing the initial CSS code file by using a PostCSS postprocessor to obtain a target CSS code file specifically includes:

[0081] Performing syntax checking on the initial CSS code file according to the PostCSS postprocessor;

[0082] If a grammatical error is found during the grammatical check, specific error information related to the grammatical error is output and the subsequent processing flow is terminated;

[0083] If no syntax error is found during the syntax check, the initial CSS code file is compressed and the compressed initial CSS code file is passed to the browser compatibility plug-in;

[0084] In the browser compatibility plug-in, according to the preset browser compatibility rules, prefixes adapted to different browsers are automatically added to the compressed initial CSS code file to obtain the target CSS code file.

[0085] In this embodiment, a PostCSS postprocessor and an initial CSS code file are obtained, and the initial CSS code file is passed to the PostCSS postprocessor for syntax checking. If the PostCSS postprocessor finds a syntax error during the syntax check, it outputs specific error information related to the syntax error and terminates the subsequent compression and compatibility processing flow. If the PostCSS postprocessor does not find a syntax error during the syntax check, it determines whether the initial CSS code file needs to be compressed. If compression is required, the initial CSS code file is compressed using a CSS compression tool to obtain a compressed CSS code file. The compressed CSS code file is passed to a browser compatibility plug-in, and the compressed CSS code file is checked and processed by the plug-in for browser compatibility. During the browser compatibility plug-in processing, according to the preset browser compatibility rules, the necessary CSS prefixes are automatically added or other compatibility adjustments are made to ensure the compatibility of the CSS code in different browsers. After the compatibility processing is completed, the final CSS code file is output and used in subsequent web page development and deployment processes to achieve a consistent display effect across browsers.

[0086] Exemplarily, the initial CSS code file is firstly checked for syntax using the PostCSS postprocessor. PostCSS will use the CSS syntax analyzer to parse the code into an abstract syntax tree (AST), and then traverse the AST to check whether each node complies with the CSS syntax specification, such as whether the attribute name and attribute value match, whether there are redundant semicolons, etc. If a syntax error is found, the error line number, column number, and error description will be output, and subsequent processing will be terminated. If the syntax check passes, the code is compressed using a CSS compression tool, such as the CleanCSS tool, which increases the code compression rate to more than 60% by deleting comments, blank characters, shortening color values, etc. The compressed code is then passed to a browser compatibility plug-in such as Autoprefixer. The plug-in automatically identifies the compatibility of CSS properties under different browsers based on the data of the Can I Use website, and automatically adds prefixes such as -webkit- and -moz- according to the preset compatibility rules (such as covering browser versions with a market share of more than 1%). Finally, a target CSS code file compatible with multiple browsers is obtained. The entire process does not require manual intervention and is automatically completed by the tool, greatly improving the quality and development efficiency of CSS code.

[0087] S105, obtaining UI screenshot data of the actually generated web page, and determining whether the target CSS code file meets the expected requirements of the project by comparing the UI screenshot data with the expected design effect of the target CSS code file.

[0088] In this embodiment, a web page containing a target CSS code file is deployed and run in a development environment, an automated testing tool (such as Selenium, Puppeteer, etc.) is used or a browser is manually operated to access the web page that needs to be verified, and a screenshot tool (such as a built-in function of the browser, a system screenshot tool, or a third-party screenshot software) is used to capture a UI screenshot of the web page, ensuring that the screenshot covers all areas that need to be verified, and trying to keep the screenshot as clear and accurate as possible.

[0089] Obtain or create design drafts or design previews corresponding to the target CSS code files. These design drafts should contain detailed visual specifications, such as color, layout, font, spacing, etc. Use image comparison tools (such as ImageMagick, PerceptualDiff, etc.) or visual review software (such as BrowserStack Automate, Applitools Eyes, etc.) to automatically or manually compare UI screenshots with the expected design effects. During the comparison process, focus on the consistency of key elements such as color, layout, font, spacing, and interactive effects, record any visual differences or inconsistencies, and evaluate whether they have a significant impact on the user experience. Based on the comparison results, evaluate whether the target CSS code file meets the expected requirements of the project.

[0090] In this embodiment, by ensuring that the visual effects and interactive behaviors of the web page meet the expected design, the user's browsing experience and satisfaction are improved.

[0091] In some embodiments, in the above step S105, determining whether the target CSS code file meets the expected requirements of the project by comparing the UI screenshot data with the expected design effect of the target CSS code file specifically includes:

[0092] Acquire expected design effect data of the target CSS code file, and generate a corresponding expected effect diagram according to the expected design effect data;

[0093] Obtain a UI screenshot of the actual generated webpage of the target CSS code file through an automated testing tool, and obtain an actual generated rendering according to the UI screenshot;

[0094] A structural similarity algorithm is used to calculate a similarity score between the actually generated rendering and the expected design rendering. If the similarity score is greater than or equal to a third preset similarity threshold, it is determined that the target CSS code file meets the expected requirements of the project; otherwise, it is determined that the target CSS code file does not meet the expected requirements of the project.

[0095] In this embodiment, expected design effect data of the target CSS code file is obtained, and a corresponding expected effect diagram is generated according to the expected design effect data; a screenshot of the web page interface actually generated by the target CSS code file is obtained through an automated testing tool, and the screenshot of the web page interface is used as the actual generated effect diagram; image segmentation processing is performed on the expected effect diagram to obtain a local area image of the expected effect diagram; image segmentation processing is performed on the actual generated effect diagram to obtain a local area image of the actual generated effect diagram; the local area image of the expected effect diagram is compared with the local area image of the actual generated effect diagram, and the similarity between the two is calculated; if the similarity is greater than a preset threshold, it is determined that the actual generated effect of the target CSS code file is consistent with the expected design effect; if the similarity is less than or equal to the preset threshold, it is determined that the actual generated effect of the target CSS code file is inconsistent with the expected design effect, and a test report is generated.

[0096] Furthermore, the method further includes: when the target CSS code file does not meet the expected requirements of the project, obtaining the coordinates of the difference area between the actually generated rendering and the expected design rendering;

[0097] The corresponding code segment in the target CSS code file is located according to the coordinates of the difference area, and the code segment is optimized and adjusted.

[0098] In this embodiment, the corresponding code segment in the target CSS code file is located according to the obtained coordinates of the difference area. The located code segment is analyzed to determine the specific CSS attributes and attribute values ​​that need to be optimized and adjusted. The heuristic algorithm and simulated annealing algorithm are used to automatically adjust and optimize the CSS attribute values ​​that need to be optimized to obtain the optimized CSS code. The optimized CSS code is applied to the target code file, and the actual effect diagram is generated again, and compared with the expected effect diagram to determine whether the actual effect after optimization is consistent with the expected effect. If it is consistent, the optimization is completed. If it is not consistent, it returns to continue the optimization until the actual effect is consistent with the expected effect.

[0099] For example, firstly, according to the UI design draft, key parameters such as color value, font size, spacing, etc. are extracted, and the expected effect diagram in PNG format is generated using design tools such as Sketch. Then, an automated testing framework such as Selenium is used to drive the Chrome browser to load the web page rendered by the target CSS code file, and the takeScreenshot method of WebDriver is used to capture the PNG format screenshot of the actual generated web page. Then, the scikit-image library of Python is used to calculate the structural similarity of the two PNG images, and the SSIM (structural similarity) algorithm is used. The algorithm comprehensively considers factors such as brightness, contrast, and structure, and outputs a similarity score between 0 and 1, and generally takes 85 as the similarity threshold. If the SSIM score is greater than or equal to 85, it is considered that the target CSS code file meets the expected design effect, otherwise it is considered to be non-compliant. When it does not meet the requirements, the two images are compared pixel by pixel using computer vision libraries such as OpenCV, the coordinates of the difference area are marked, and then mapped back to the corresponding code lines in the target CSS file according to the coordinates. For example, if the color of the rectangular area from the upper left corner (100,200) to the lower right corner (400,600) is inconsistent, check the CSS selector corresponding to the area, adjust its background-color property, and repeat the test until the SSIM score reaches the standard. The whole process realizes UI automated testing and CSS code automated repair, improving the efficiency and accuracy of CSS development.

[0100] Reference Figure 2 An embodiment of the present invention provides a CSS architecture generation system 2 based on artificial intelligence, and the system 2 specifically includes:

[0101] The first generating module 201 is used to obtain project development framework data, identify and analyze the project development framework data through a deep learning model, and generate a first CSS atomic class set;

[0102] A second generation module 202 is used to perform preliminary optimization on the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization includes selector nesting level optimization, redundant style definition optimization, and naming specification optimization;

[0103] The third generating module 203 is used to obtain webpage design requirement data, adjust the second CSS atomic class set according to the webpage design requirement data, and generate an initial CSS code file;

[0104] The fourth generating module 204 is used to optimize the initial CSS code file through a PostCSS post-processor to obtain a target CSS code file;

[0105] The fifth generation module 205 is used to obtain UI screenshot data of the actually generated web page, and determine whether the target CSS code file meets the expected requirements of the project by comparing the UI screenshot data with the expected design effect of the target CSS code file.

[0106] It is understandable that if Figure 1 The contents of the embodiment of the CSS architecture generation method based on artificial intelligence shown in the figure are all applicable to the embodiment of the CSS architecture generation system based on artificial intelligence. The functions specifically implemented by the embodiment of the CSS architecture generation system based on artificial intelligence are similar to those in the embodiment of the CSS architecture generation method based on artificial intelligence shown in the figure. Figure 1 The embodiment of the CSS architecture generation method based on artificial intelligence is the same as shown, and the beneficial effects achieved are the same as those of Figure 1 The beneficial effects achieved by the embodiment of the CSS architecture generation method based on artificial intelligence are also the same.

[0107] It should be noted that the information interaction, execution process and other contents between the above-mentioned systems are based on the same concept as the embodiment of the method of the present invention. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0108] Those skilled in the art can clearly understand that, for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0109] Reference Figure 3 The embodiment of the present invention further provides a computer device 3, comprising: a memory 302 and a processor 301 and a computer program 303 stored in the memory 302. When the computer program 303 is executed on the processor 301, the artificial intelligence-based CSS architecture generation method described in any one of the above methods is implemented.

[0110] The computer device 3 may be a computing device such as a desktop computer, a notebook, a PDA, or a cloud server. The computer device 3 may include, but is not limited to, a processor 301 and a memory 302. Those skilled in the art will appreciate that Figure 3 It is only an example of computer device 3 and does not constitute a limitation on computer device 3. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components, for example, it may also include input and output devices, network access devices, etc.

[0111] The processor 301 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.

[0112] In some embodiments, the memory 302 may be an internal storage unit of the computer device 3, such as a hard disk or memory of the computer device 3. In other embodiments, the memory 302 may also be an external storage device of the computer device 3, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (Flash Card), etc. equipped on the computer device 3. Further, the memory 302 may also include both an internal storage unit of the computer device 3 and an external storage device. The memory 302 is used to store an operating system, an application program, a boot loader (Boot Loader), data, and other programs, such as the program code of the computer program, etc. The memory 302 may also be used to temporarily store data that has been output or is to be output.

[0113] An embodiment of the present invention further provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the method for generating a CSS architecture based on artificial intelligence as described in any one of the above methods is implemented.

[0114] In this embodiment, if the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium. When the computer program is executed by the processor, the steps of the above-mentioned various method embodiments can be implemented. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium can at least include: any entity or device that can carry the computer program code to the camera / terminal device, recording medium, computer memory, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), electric carrier signal, telecommunication signal and software distribution medium. For example, a USB flash drive, a mobile hard disk, a disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0115] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0116] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0117] In the embodiments disclosed in the present application, it should be understood that the disclosed devices / terminal equipment and methods can be implemented in other ways. For example, the device / terminal equipment embodiments described above are only schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0118] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

Claims

1. A CSS architecture generation method based on artificial intelligence, characterized in that: The method specifically comprises: Acquire project development framework data, identify and analyze the project development framework data through a deep learning model, and generate a first CSS atomic class set; The step of identifying and analyzing the project development framework data through a deep learning model to generate a first CSS atomic class set specifically includes: After preprocessing the project development framework data, the preprocessed project development framework data is converted into vector data by using word embedding technology; Performing feature extraction on the vector data through a convolutional neural network to obtain a feature vector, wherein the feature vector includes a project directory structure, a project naming specification, and a project code style; Constructing a regular expression pattern according to a preset CSS atomic class generation rule, and judging whether the feature vector satisfies the CSS atomic class generation rule by using the regular expression pattern; If the CSS atomic class generation rule is met, the corresponding CSS atomic class is generated according to the CSS atomic class generation rule, and all CSS atomic classes are merged to form a first CSS atomic class set; Preliminarily optimizing the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization includes selector nesting level optimization, redundant style definition optimization, and naming specification optimization; The preliminary optimization of the first CSS atomic class set specifically includes: A recursive algorithm is used to analyze the nesting level of the selectors of the first CSS atomic class set, and if the nesting level exceeds a preset number of levels, it is determined that the nesting is too deep; A hash table is used to store style attributes of deeply nested selectors, and the deeply nested selectors whose similarity is greater than a first preset similarity threshold are merged by calculating the similarity of the style attributes; Based on the CSSLint tool, a CSS rule tree is constructed by using the first CSS atomic class set, and a post-order traversal algorithm of the tree is used to compare the style definitions of leaf nodes of the CSS rule tree from bottom to top, and leaf nodes with duplicate style definitions or useless style definitions are pruned; According to the preset BEM naming specification, a regular expression is used to match all types of the first CSS atomic class set, and class names that do not conform to the BEM naming specification are automatically modified; Acquire webpage design requirement data, adjust the second CSS atomic class set according to the webpage design requirement data, and generate an initial CSS code file; Optimizing the initial CSS code file by using a PostCSS postprocessor to obtain a target CSS code file; The step of optimizing the initial CSS code file by using a PostCSS postprocessor to obtain a target CSS code file specifically includes: Performing syntax checking on the initial CSS code file according to the PostCSS postprocessor; If a grammatical error is found during the grammatical check, specific error information related to the grammatical error is output and the subsequent processing flow is terminated; If no syntax error is found during the syntax check, the initial CSS code file is compressed and the compressed initial CSS code file is passed to the browser compatibility plug-in; In the browser compatibility plug-in, according to the preset browser compatibility rules, prefixes adapted to different browsers are automatically added to the compressed initial CSS code file to obtain the target CSS code file; The UI screenshot data of the actually generated web page is obtained, and by comparing the UI screenshot data with the expected design effect of the target CSS code file, it is determined whether the target CSS code file meets the expected requirements of the project.

2. The method according to claim 1, characterized in that The adjusting the second CSS atomic class set according to the webpage design requirement data to generate an initial CSS code file specifically includes: Extracting key demand information of the webpage design demand data according to a natural language processing algorithm, and generating a key demand vector according to the word frequency of the key demand information; Using a cosine similarity algorithm to match the key requirement vector with the second CSS atom class set, and selecting a plurality of target CSS atom classes having a similarity greater than a second preset similarity threshold from the second CSS atom class set; The property values ​​of the target CSS atomic classes are optimized according to a genetic algorithm to obtain a plurality of target CSS atomic classes with the highest fitness, and the plurality of target CSS atomic classes with the highest fitness are filled into a preset CSS file template to form an initial CSS code file.

3. The method according to claim 1, characterized in that The step of comparing the UI screenshot data with the expected design effect of the target CSS code file to determine whether the target CSS code file meets the expected requirements of the project specifically includes: Acquire expected design effect data of the target CSS code file, and generate a corresponding expected effect diagram according to the expected design effect data; Obtain a UI screenshot of the actual generated webpage of the target CSS code file through an automated testing tool, and obtain an actual generated rendering according to the UI screenshot; A structural similarity algorithm is used to calculate a similarity score between the actually generated rendering and the expected design rendering. If the similarity score is greater than or equal to a third preset similarity threshold, it is determined that the target CSS code file meets the expected requirements of the project; otherwise, it is determined that the target CSS code file does not meet the expected requirements of the project.

4. The method according to claim 3, characterized in that The method further comprises: When the target CSS code file does not meet the expected requirements of the project, obtaining the coordinates of the difference area between the actually generated rendering and the expected design rendering; The corresponding code segment in the target CSS code file is located according to the coordinates of the difference area, and the code segment is optimized and adjusted.

5. A CSS architecture generation system based on artificial intelligence, characterized in that: The system specifically comprises: A first generation module is used to obtain project development framework data, identify and analyze the project development framework data through a deep learning model, and generate a first CSS atomic class set; The step of identifying and analyzing the project development framework data through a deep learning model to generate a first CSS atomic class set specifically includes: After preprocessing the project development framework data, the preprocessed project development framework data is converted into vector data by using word embedding technology; Performing feature extraction on the vector data through a convolutional neural network to obtain a feature vector, wherein the feature vector includes a project directory structure, a project naming specification, and a project code style; Constructing a regular expression pattern according to a preset CSS atomic class generation rule, and judging whether the feature vector satisfies the CSS atomic class generation rule by using the regular expression pattern; If the CSS atomic class generation rule is met, the corresponding CSS atomic class is generated according to the CSS atomic class generation rule, and all CSS atomic classes are merged to form a first CSS atomic class set; A second generation module is used to perform preliminary optimization on the first CSS atomic class set to obtain a second CSS atomic class set, wherein the preliminary optimization includes selector nesting level optimization, redundant style definition optimization, and naming specification optimization; The preliminary optimization of the first CSS atomic class set specifically includes: A recursive algorithm is used to analyze the nesting level of the selectors of the first CSS atomic class set, and if the nesting level exceeds a preset number of levels, it is determined that the nesting is too deep; A hash table is used to store style attributes of deeply nested selectors, and the deeply nested selectors whose similarity is greater than a first preset similarity threshold are merged by calculating the similarity of the style attributes; Based on the CSSLint tool, a CSS rule tree is constructed by using the first CSS atomic class set, and a post-order traversal algorithm of the tree is used to compare the style definitions of leaf nodes of the CSS rule tree from bottom to top, and leaf nodes with duplicate style definitions or useless style definitions are pruned; According to the preset BEM naming specification, a regular expression is used to match all types of the first CSS atomic class set, and class names that do not conform to the BEM naming specification are automatically modified; A third generating module is used to obtain webpage design requirement data, adjust the second CSS atomic class set according to the webpage design requirement data, and generate an initial CSS code file; A fourth generation module is used to optimize the initial CSS code file through a PostCSS postprocessor to obtain a target CSS code file; The step of optimizing the initial CSS code file by using a PostCSS postprocessor to obtain a target CSS code file specifically includes: Performing syntax checking on the initial CSS code file according to the PostCSS postprocessor; If a grammatical error is found during the grammatical check, specific error information related to the grammatical error is output and the subsequent processing flow is terminated; If no syntax error is found during the syntax check, the initial CSS code file is compressed and the compressed initial CSS code file is passed to the browser compatibility plug-in; In the browser compatibility plug-in, according to the preset browser compatibility rules, prefixes adapted to different browsers are automatically added to the compressed initial CSS code file to obtain the target CSS code file; The fifth generation module is used to obtain UI screenshot data of the actually generated web page, and determine whether the target CSS code file meets the expected requirements of the project by comparing the UI screenshot data with the expected design effect of the target CSS code file.

6. A computer device, characterized in that: include: A memory, a processor, and a computer program stored in the memory. When the computer program is executed on the processor, the method for generating a CSS architecture based on artificial intelligence as claimed in any one of claims 1 to 4 is implemented.

7. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor, the method for generating a CSS architecture based on artificial intelligence as claimed in any one of claims 1 to 4 is implemented.

Images