Mini Program Front-end Page Site Design Method and System

Abstract

The present invention provides a method and system for designing a website building for a mini-program front-end page, and relates to the technical field of mini-program website building, including extracting semantic elements and target requirements based on website building requirements and design styles input by users, and generating a mini-program component recommendation scheme; based on a multi-objective optimization algorithm, by iteratively optimizing a combination of design elements, generating layout style schemes for multiple mini-program front-end pages, extracting topological relationships and semantic dependencies, constructing a graph structure page representation vector, iteratively optimizing the layout style scheme, and obtaining an optimal layout style scheme; adopting a dynamic component construction method, by parsing a page layout structure diagram, identifying UI elements, and automatically mapping them into corresponding program components, combining a context-aware component recommendation mechanism, dynamically recommending and rendering optimized mini-program components according to the functional semantics of the page and the user's interaction intention, and combining an incremental learning algorithm to finally form a customized mini-program front-end page website building design scheme.

Description

Technical Field

[0001] The present invention relates to the field of small program website building technology, and in particular to a small program front-end page website building design method and system. Background Art

[0002] With the rapid development of mobile Internet and the popularity of smart phones, a large number of small program applications have emerged. Small programs are a lightweight application form that can be used without downloading and installing. Users can quickly open small programs and enjoy simple and convenient services. With its advantages of easy dissemination and ease of use, small programs are favored by the majority of users and have become an important application form in the mobile Internet era.

[0003] However, the existing mini-program front-end page design often has the following problems: unreasonable page layout and lack of aesthetics; slow page loading speed and poor performance; unfriendly page interaction, difficult user operation, lack of personalized design, and serious homogeneity; lack of intelligent design and inability to adapt to different scenarios. Although the use of artificial intelligence technology to generate pages can achieve automated design, the quality and diversity of the generated pages need to be improved.

[0004] In summary, in order to further optimize the front-end page design of the mini program and improve the page quality and user experience, it is necessary to study a more intelligent, efficient and flexible page design generation method. The present invention comprehensively uses a variety of artificial intelligence technologies to automatically design and generate personalized, high-quality mini program pages that meet user needs based on multi-dimensional information such as the functional semantics, user portraits, and interaction intentions of the mini program, which can solve the problems in the prior art. Summary of the invention

[0005] The embodiments of the present invention provide a method and system for designing a mini-program front-end page website, which can solve the problems in the prior art.

[0006] According to a first aspect of the embodiments of the present invention,

[0007] A method for designing a mini program front-end page website is provided, including:

[0008] Based on the website building requirements and design style input by the user, semantic analysis is performed through natural language processing to extract semantic elements and target requirements. Based on the semantic elements, matching is performed in the preset domain ontology knowledge base through knowledge graph technology to identify the corresponding mini-program components, and a mapping relationship between the target requirements and the mini-program components is constructed. The semantic similarity calculation model is used to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, and the mapping relationship is dynamically expanded according to the matching results to generate a mini-program component recommendation solution;

[0009] Determine optimization goals for the functions, interactions, layouts, and performance of different mini-program pages, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, divide the page into different functional areas and UI elements, extract topological relationships and semantic dependencies, construct a graph structure page representation vector, and iteratively optimize the layout style scheme based on a graph convolutional neural network to obtain the optimal layout style scheme.

[0010] Based on the optimal layout style solution, a dynamic component construction method is adopted. By parsing the page layout structure diagram, UI elements are identified and automatically mapped into corresponding program components. Combined with the context-aware component recommendation mechanism, it dynamically recommends and renders optimized mini-program components based on the functional semantics of the page and user interaction intentions. Combined with the incremental learning algorithm, it continuously monitors user interaction behavior and feedback data, optimizes and adjusts the recommendation strategy and makes real-time adjustments, ultimately forming a customized mini-program front-end page site design plan.

[0011] In an optional embodiment,

[0012] Based on the website building requirements and design style input by the user, semantic analysis is performed through natural language processing to extract semantic elements and target requirements. Based on the semantic elements, matching is performed in the preset domain ontology knowledge base through knowledge graph technology to identify the corresponding mini-program components, and a mapping relationship between target requirements and mini-program components is constructed. The semantic similarity calculation model is used to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base. The mapping relationship is dynamically expanded according to the matching results to generate mini-program component recommendation solutions, including:

[0013] Preprocess the text corresponding to the website building requirements and design style, divide the text into word sequences, perform part-of-speech tagging and named entity recognition on the word sequences, convert the word sequences into word vectors, use the pre-trained deep bidirectional language model to perform context-aware encoding on the word vectors, obtain context embedding representation, and obtain semantic encoding vectors;

[0014] Based on the clustering algorithm, the semantic coding vector is divided into multiple clusters. Through the clustering evaluation index, the optimal number of clusters is selected to maximize the intra-cluster similarity and minimize the inter-cluster similarity, and the optimal clustering cluster is constructed. The common features and common themes are extracted from the semantic coding vectors in each cluster, and semantic labels are assigned according to the predetermined domain knowledge to generate a semantic element set and a target demand set.

[0015] Map the semantic element set to the pre-built ontology knowledge base, learn vectorized representations of entities and relationships in the ontology knowledge base, obtain entity relationship embedding vectors, calculate the similarity between the semantic element and the entity relationship embedding vector, select the entity relationship embedding vector corresponding to the maximum similarity as the candidate mapping, screen the candidate mapping based on the reasoning rules and constraints of the ontology knowledge base, and obtain the mapping relationship between the semantic element and the concepts, entities and relationships in the ontology knowledge base;

[0016] Based on a preset text corpus, a word embedding model is trained, a semantic element set, a target requirement set, and an existing requirement design solution are represented as an aggregation of word embedding vectors, the similarity of the word embedding vector aggregation is calculated, a semantic similarity score is determined, and a semantic similarity matching result is obtained;

[0017] Based on the interaction data between users and mini-program components, a user-component interaction matrix is ​​constructed. Through matrix decomposition, the latent vector representations of users and components are learned to determine the user's implicit preference for components. Based on the learned latent vector representations, user similarity is calculated to obtain a set of similar users. Using the components corresponding to the preferences of the similar user set, a collaborative filtering recommended component set is generated for the target user. The component similarity of the collaborative filtering recommended component set is calculated to obtain a recommended component set similar to the selected components in the target demand set. The collaborative filtering recommended component set is merged with the recommended component set to obtain a fused recommended component set. The fused recommended component set is merged with the semantic similarity matching result to determine a personalized mini-program component recommendation scheme.

[0018] In an optional embodiment,

[0019] Through matrix decomposition, learning latent vector representations of users and components includes:

[0020] The loss function for learning latent vector representation is as follows:

[0021] ;

[0022] in, L represents the loss function for learning latent vector representation, P represents the user latent vector matrix, Q represents the component latent vector matrix, u Represents the user index, i Represents the component index, I ui Indicates user u With components i Indicator parameter of whether interaction has occurred. R ui Indicates user u and components iThe interaction score, p u Indicates user u The hidden vector, q i Representation Components i The hidden vector of λ represents the regularization parameter, ||·|| F 2 Represents the square of the Frobenius norm.

[0023] In an optional embodiment,

[0024] According to the functions, interactions, layouts and performances of different pages of mini-programs, we determine the optimization goals, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, we divide the pages into different functional areas and UI elements, extract topological relationships and semantic dependencies, and construct a graph structure page representation vector. Based on the graph convolutional neural network, we iteratively optimize the layout style scheme, and obtain the optimal layout style scheme, including:

[0025] Perform interface analysis on each page in the mini-program sample library, obtain the hierarchical structure and style information of the page through DOM tree extraction and CSS style parsing, identify the UI elements in the page through computer vision algorithms, and determine the key UI elements in combination with pre-determined key indicators; cluster the UI elements based on the visual and semantic features of the UI elements through a clustering algorithm to obtain a group of atomic style elements, extract the feature attributes corresponding to the visual and semantic features of each type of atomic style element, perform style encoding, and build a style element embedding dictionary;

[0026] Based on the style element embedding dictionary, the layout search space is defined, and combined with the layout constraints, the layout search space is narrowed. A multi-objective function is constructed according to the optimization goal. The multi-objective optimization algorithm is used to sample and iterate in the layout search space to generate the optimal layout solution and determine the initial layout solution.

[0027] For each initial layout scheme, a layout graph is constructed based on the preset page structured representation model, with UI elements as graph nodes and spatial adjacency relationships of UI elements as graph edges. The information in the style element embedding dictionary is used to attach weights to the edges to determine the association strength. The feature representation of the layout graph is learned through a graph convolutional neural network, and the node neighbor information is aggregated using an information transfer mechanism. Node features are updated, multi-scale layout features are extracted through pooling operations, and the layout embedding vector of the layout graph is generated through a readout function.

[0028] The layout embedding vector is input into the layout optimization model based on reinforcement learning, evolutionary algorithm and user feedback to generate an optimized layout plan. The layout optimization based on reinforcement learning learns the layout strategy through the interaction between the agent and the environment. The layout optimization based on the evolutionary algorithm searches for the local optimal solution based on the initial layout plan. The layout optimization based on user feedback builds a layout quality evaluation model according to the implicit and explicit feedback of the user, generates evaluation results, and guides the layout adjustment and optimization.

[0029] Based on the optimized layout plan, a hybrid method based on rules and machine learning is adopted to extract high-level semantic features from the layout plan, determine multi-dimensional layout features, and based on the multi-dimensional layout features, train the layout quality model to predict the objective quality score of the layout, and at the same time train the user preference model to predict the user's subjective preference ranking; based on the trained layout quality model, select the corresponding layouts with the top K objective quality scores, and comprehensively consider the user's subjective preference ranking to determine the optimal layout style plan.

[0030] In an optional embodiment,

[0031] The multi-objective optimization algorithm includes:

[0032] Split multiple optimization objectives into multiple single objectives, determine the sub-problems of single-objective optimization, each sub-problem corresponds to a weight vector, and minimize the weighted objective function value;

[0033] At the initial moment, a set of weight vectors are uniformly sampled in the target solution space to generate corresponding sub-problems. The layout plan for each sub-problem is generated through heuristic rules, the initial individuals are determined, and all initial individuals constitute the population, and the iterative optimization process begins:

[0034] Taking the initial individual as the parent individual, a set of new layout schemes are generated in the neighborhood of the parent individual as candidate individuals, and the fitness values ​​of the candidate individuals on all targets are evaluated. If the candidate individual dominates the parent individual, the parent individual is replaced by the candidate individual, and the optimal fitness value and evaluation times of the layout scheme are recorded and updated, and the search radius of the current sub-problem is adaptively adjusted;

[0035] Based on the preset elite sharing frequency, the elite sharing operation is performed for the corresponding number of times per interval. For each sub-problem, the individual corresponding to the Pareto dominance optimal solution is selected from the population as the elite individual of the current sub-problem. The current individual in the current sub-problem is compared with all elite individuals. If it is dominated by the elite individual, the elite individual is used to replace the current individual.

[0036] Based on the congestion degree of the area where the current individual of each sub-problem is located, the corresponding cell count is calculated. If the cell count is greater than the preset congestion threshold, the corresponding weight is reduced, otherwise, the corresponding weight is increased;

[0037] The optimization process is iterated until the preset maximum number of iterations is reached, and the current optimal solution of all sub-problems is determined as the optimal layout solution.

[0038] In an optional embodiment,

[0039] Based on the optimal layout style solution, a dynamic component construction method is adopted. By parsing the page layout structure diagram, UI elements are identified and automatically mapped into corresponding program components. Combined with the context-aware component recommendation mechanism, according to the functional semantics of the page and the user's interaction intention, the optimized mini-program components are dynamically recommended and rendered. Combined with the incremental learning algorithm, the user interaction behavior and feedback data are continuously monitored, the recommendation strategy is optimized and adjusted in real time, and finally a customized mini-program front-end page site design solution is formed, including:

[0040] Parsing the optimal layout style scheme, extracting style rules and attribute values, identifying UI elements in the optimal layout style scheme, and acquiring style attributes and layout information of the UI elements;

[0041] Inputting the style attributes and layout information of the UI element into a pre-trained UI element embedding model, learning the embedded feature representation of the UI element through the UI element embedding model, and using a similarity calculation method based on the embedded feature representation to obtain a mini-program component similar to the UI element, and establishing a mapping relationship;

[0042] Based on the mapping relationship, a context-aware mechanism is introduced, and the optimal layout style solution is used to parse the functional semantics of the page and the user's interaction intention. A sequence-based recommendation algorithm is used to predict the interaction component corresponding to the user's next operation based on the user's historical interaction sequence, and the component recommendation probability is determined. At the same time, a recommendation algorithm based on a multi-armed bandit is used to balance the exploration and utilization of components through the Thompson sampling strategy, dynamically adjust the component recommendation probability, and generate a final recommendation list;

[0043] Based on the final recommendation list, component instances are generated in operation through dynamic rendering and inserted into the page position corresponding to the optimal layout style scheme. Through the data binding mechanism, they are associated with the corresponding values ​​in the optimal layout style scheme. Combined with the adaptive layout, adaptive matching of appearance and behavior is achieved, and a customized mini-program front-end page website design scheme is determined.

[0044] In an optional embodiment,

[0045] Based on the mapping relationship, a context-aware mechanism is introduced, and the optimal layout style solution is used to parse the page function semantics and user interaction intentions. A sequence-based recommendation algorithm is used to predict the interactive components corresponding to the user's next operation based on the user's historical interaction sequence, and the component recommendation probability is determined. At the same time, a recommendation algorithm based on a multi-armed bandit is used to balance the exploration and utilization of components through the Thompson sampling strategy, and the component recommendation probability is dynamically adjusted to generate a final recommendation list including:

[0046] Use natural language processing technology to perform word segmentation, part-of-speech tagging and named entity recognition on the text information of the optimal layout style solution, extract page keywords and subject words to build page semantic vectors, analyze page layout structure and UI element position relationship to identify user interaction intentions and operation processes, and combine domain knowledge base and user behavior logs to infer page functional semantics and user interaction intentions;

[0047] Based on the functional semantics of the page and the user's interaction intention, a sequence-based recommendation algorithm is used to collect user historical interaction sequence data to construct a user behavior sequence. The user behavior sequence is deduplicated, filtered, and time-truncated. The word embedding technology is used to map the components in the user behavior sequence into low-dimensional dense vectors. The user's historical interaction sequence is used as input to build a sequence recommendation model based on a recurrent neural network to predict the component corresponding to the next operation. The attention mechanism is introduced to adjust the historical behavior weight, and the correlation between the candidate component and the user's historical interaction sequence is calculated to obtain the recommendation probability of the first component.

[0048] Based on the recommendation probability of the first component, candidate components are extracted, and the candidate components are regarded as gambling machine arms and the component recommendation probability is used as the expected return. The component Beta distribution parameters are initialized, and Thompson sampling is performed on the component Beta distribution for each recommendation to generate the posterior expected return. The second component recommendation probability is calculated based on the posterior expected return, and the component Beta distribution parameters are updated in combination with user feedback. The posterior expected return is iteratively adjusted to determine the final recommendation probability of the component and generate the final recommendation list.

[0049] According to a first aspect of the embodiments of the present invention,

[0050] Provide a mini program front-end page site design system, including:

[0051] The first unit is used to perform semantic analysis based on the website building requirements and design style input by the user through natural language processing, extract semantic elements and target requirements, match them in a preset domain ontology knowledge base based on the semantic elements through knowledge graph technology, identify the corresponding mini-program components, build a mapping relationship between the target requirements and the mini-program components, use a semantic similarity calculation model to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, dynamically expand the mapping relationship according to the matching results, and generate a mini-program component recommendation solution;

[0052] The second unit is used to determine the optimization goals for the functions, interactions, layouts, and performances of different pages of the mini-programs, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, the pages are divided into different functional areas and UI elements, topological relationships and semantic dependencies are extracted, and a graph structure page representation vector is constructed. Based on the graph convolutional neural network, the layout style scheme is iteratively optimized to obtain the optimal layout style scheme.

[0053] The third unit is used to adopt a dynamic component construction method based on the optimal layout style solution. By parsing the page layout structure diagram, it identifies UI elements and automatically maps them into corresponding program components. Combined with the context-aware component recommendation mechanism, it dynamically recommends and renders optimized mini-program components based on the functional semantics of the page and user interaction intentions. Combined with the incremental learning algorithm, it continuously monitors user interaction behavior and feedback data, optimizes and adjusts the recommendation strategy in real time, and finally forms a customized mini-program front-end page website design plan.

[0054] According to a third aspect of the embodiments of the present invention,

[0055] An electronic device is provided, comprising:

[0056] processor;

[0057] a memory for storing processor-executable instructions;

[0058] The processor is configured to call the instructions stored in the memory to execute the aforementioned method.

[0059] A fourth aspect of the embodiments of the present invention is:

[0060] A computer-readable storage medium is provided, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the aforementioned method is implemented.

[0061] In an embodiment of the present invention, the semantic elements and target requirements extracted by natural language processing technology are matched with the existing requirements and design solutions in the domain ontology knowledge base, which can help the system accurately identify the specific needs of users and avoid recommending components that do not match the user's intentions. Users can get high-quality mini-program component recommendation solutions that meet their website building needs; based on the semantic similarity calculation model, not only can user needs be matched with existing mini-program components, but the mapping relationship can also be dynamically expanded. Even if the user inputs new requirements or design styles, new potential components can be discovered through semantic similarity, thereby improving the adaptability and diversity of recommendations; through multi-objective optimization algorithms and page structured representation models, the function, interaction, layout and performance optimization goals are combined into a unified framework, and the front-end layout solution is automatically generated and optimized, reducing the workload of manual page design and improving design efficiency; by extracting the topological relationship and semantic dependency of UI elements and optimizing them using graph convolutional neural networks, the page layout solution is more in line with user usage habits in terms of function and interaction, ensuring that the page structure is clear and easy to operate, and ultimately optimizing the user experience; using Using a multi-objective optimization algorithm, it is possible to simultaneously consider multiple design goals such as function, interaction, layout, and performance, achieve iterative optimization of the combination of design elements, find the optimal layout solution that takes into account all aspects of the needs, and achieve a balance between visual beauty, complete functionality, and excellent performance; by parsing the page layout structure diagram and identifying UI elements, it automatically maps them into program components to achieve automatic matching of pages and functional components, thereby improving the adaptability and rendering efficiency of components; combined with the context-aware mechanism, it dynamically recommends optimized mini-program components based on the functional semantics of the page and the user's interaction intentions, achieves personalized and context-adaptive front-end design, and enhances the accuracy of the user experience; uses incremental learning algorithms to continuously monitor user interaction behaviors and feedback data, and dynamically adjusts recommendation strategies based on real-time user feedback, so that page design can better meet user needs, thereby improving user satisfaction and page practicality. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] Figure 1 A schematic diagram of the process of designing a website building method for a mini-program front-end page according to an embodiment of the present invention;

[0063] Figure 2 This is a structural diagram of the mini-program front-end page website design system according to an embodiment of the present invention. DETAILED DESCRIPTION

[0064] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0065] The technical solution of the present invention is described in detail with specific embodiments below. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0066] Figure 1 Schematic diagram of the process of designing a website building method for a mini program front-end page according to an embodiment of the present invention. Figure 1 As shown, the method includes:

[0067] S101. Based on the website building requirements and design style input by the user, semantic analysis is performed through natural language processing to extract semantic elements and target requirements. Based on the semantic elements, matching is performed in the preset domain ontology knowledge base through knowledge graph technology to identify the corresponding mini-program components, and a mapping relationship between the target requirements and the mini-program components is constructed. The semantic similarity calculation model is used to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, and the mapping relationship is dynamically expanded according to the matching results to generate a mini-program component recommendation solution;

[0068] The semantic elements specifically refer to the core content extracted from the website building requirements and design styles input by users through natural language processing technology, representing the specific characteristics or key concepts of user requirements, such as certain functions, design styles, layout elements, etc.; for example, in website building requirements, semantic elements may include keywords or phrases such as "shopping cart function", "simple design", "responsive layout", etc. These words reflect the main functions or design features that users hope to achieve in the mini program;

[0069] The target requirements specifically refer to the core needs or expectations expressed by the user in the input, which are usually specific goals about the main functions or designs of the website. They are structured into a form that the system can understand through semantic analysis and knowledge graph technology, and then matched with corresponding mini-program components. For example, target requirements may include "supporting online payment", "achieving fast loading time", "providing a personalized recommendation system", etc. These are the functions and goals that users hope the mini-program will eventually achieve.

[0070] In this embodiment, the semantic elements and target requirements extracted by natural language processing technology are matched with the existing requirements and design solutions in the domain ontology knowledge base, which can help the system accurately identify the specific needs of users and avoid recommending components that do not match the user's intentions. Users can get high-quality mini-program component recommendation solutions that meet their website building needs; based on the semantic similarity calculation model, not only can user needs be matched with existing mini-program components, but the mapping relationship can also be dynamically expanded. Even if the user inputs new requirements or design styles, new potential components can be discovered through semantic similarity, improving the adaptability and diversity of recommendations; the recommendation process based on semantic analysis and knowledge graph can effectively understand the real needs of users, and provide users with personalized recommendations in combination with existing design solutions, saving users time for self-configuration and adjustment, and improving the efficiency and experience of users' website building; through automated semantic analysis and knowledge graph technology, users do not need to have professional design or development knowledge, and the system can automatically match the appropriate component combination to generate a mini-program solution with high adaptability for users, reducing the technical threshold for users to build websites.

[0071] In an optional embodiment, based on the website building requirements and design style input by the user, semantic analysis is performed through natural language processing to extract semantic elements and target requirements. Based on the semantic elements, matching is performed in a preset domain ontology knowledge base through knowledge graph technology to identify the corresponding mini-program components, and a mapping relationship between the target requirements and the mini-program components is constructed. The semantic similarity calculation model is used to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, and the mapping relationship is dynamically expanded according to the matching results to generate a mini-program component recommendation solution, including:

[0072] Preprocess the text corresponding to the website building requirements and design style, divide the text into word sequences, perform part-of-speech tagging and named entity recognition on the word sequences, convert the word sequences into word vectors, use the pre-trained deep bidirectional language model to perform context-aware encoding on the word vectors, obtain context embedding representation, and obtain semantic encoding vectors;

[0073] Based on the clustering algorithm, the semantic coding vector is divided into multiple clusters. Through the clustering evaluation index, the optimal number of clusters is selected to maximize the intra-cluster similarity and minimize the inter-cluster similarity, and the optimal clustering cluster is constructed. The common features and common themes are extracted from the semantic coding vectors in each cluster, and semantic labels are assigned according to the predetermined domain knowledge to generate a semantic element set and a target demand set.

[0074] Map the semantic element set to the pre-built ontology knowledge base, learn vectorized representations of entities and relationships in the ontology knowledge base, obtain entity relationship embedding vectors, calculate the similarity between the semantic element and the entity relationship embedding vector, select the entity relationship embedding vector corresponding to the maximum similarity as the candidate mapping, screen the candidate mapping based on the reasoning rules and constraints of the ontology knowledge base, and obtain the mapping relationship between the semantic element and the concepts, entities and relationships in the ontology knowledge base;

[0075] Based on a preset text corpus, a word embedding model is trained, a semantic element set, a target requirement set, and an existing requirement design solution are represented as an aggregation of word embedding vectors, the similarity of the word embedding vector aggregation is calculated, a semantic similarity score is determined, and a semantic similarity matching result is obtained;

[0076] Based on the interaction data between users and mini-program components, a user-component interaction matrix is ​​constructed. Through matrix decomposition, the latent vector representations of users and components are learned to determine the user's implicit preference for components. Based on the learned latent vector representations, user similarity is calculated to obtain a set of similar users. Using the components corresponding to the preferences of the similar user set, a collaborative filtering recommended component set is generated for the target user. The component similarity of the collaborative filtering recommended component set is calculated to obtain a recommended component set similar to the selected components in the target demand set. The collaborative filtering recommended component set is merged with the recommended component set to obtain a fused recommended component set. The fused recommended component set is merged with the semantic similarity matching result to determine a personalized mini-program component recommendation scheme.

[0077] Preprocess the text corresponding to the website building requirements and design style, divide the text into word sequences, perform part-of-speech tagging on the word sequences, perform named entity recognition on the word sequences, convert the word sequences into word vectors, use the pre-trained deep bidirectional language model to perform context-aware encoding on the word vectors, and obtain the contextual embedding representation of the text, that is, the semantic encoding vector.

[0078] The semantic coding vectors are clustered based on the clustering algorithm and divided into multiple clusters. The optimal number of clusters is selected through the clustering evaluation index. The optimal clustering cluster is constructed with the goal of maximizing the intra-cluster similarity and minimizing the inter-cluster similarity. Common features and common themes are extracted from the semantic coding vectors in each cluster, and semantic labels are assigned according to predetermined domain knowledge to generate a set of semantic elements and a set of target requirements.

[0079] The set of semantic elements is mapped to a pre-built ontology knowledge base, the vectorized representation of entities and relationships in the ontology knowledge base is learned, the entity relationship embedding vector is obtained, the similarity between the semantic elements and the entity relationship embedding vector is calculated, and the entity relationship embedding vector corresponding to the maximum similarity is selected as the candidate mapping. The candidate mapping is screened based on the inference rules and constraints of the ontology knowledge base to obtain the mapping relationship between the semantic elements and the concepts, entities and relationships in the ontology knowledge base.

[0080] Calculate the semantic similarity matching results, train the word embedding model based on the preset text corpus, represent the semantic element set, target requirement set and existing requirement design plan as an aggregation of word embedding vectors, calculate the similarity of the word embedding vector aggregation, determine the semantic similarity score, and obtain the semantic similarity matching results.

[0081] Generate a personalized mini-program component recommendation scheme, build a user-component interaction matrix based on the interaction data between users and mini-program components, learn the latent vector representation of users and components through matrix decomposition, determine the user's implicit preference for components, calculate user similarity based on the learned latent vector representation, obtain a set of similar users, use the components corresponding to the preferences of the similar user set to generate a collaborative filtering recommended component set for the target user, calculate the component similarity of the collaborative filtering recommended component set, obtain a recommended component set similar to the selected components in the target demand set, fuse the collaborative filtering recommended component set with the recommended component set to obtain a fused recommended component set, fuse the fused recommended component set with the semantic similarity matching result, and determine a personalized mini-program component recommendation scheme.

[0082] For example, there is a website building requirement: "Design a concise and elegant corporate website for a technology company to highlight the company's innovation and professionalism";

[0083] Preprocess the demand text to extract keywords such as "simple", "generous", "technology company", "corporate official website", "innovation", "professionalism", etc., and convert them into semantic coding vectors; divide the semantic coding vectors into different clusters through clustering algorithms, such as "simple style", "sense of technology", "corporate image", etc., and generate semantic element sets and target demand sets; map the semantic elements to the ontology knowledge base, find the design style entity corresponding to "simple style", such as "minimalist style", and inherit its relevant attributes and design specifications; search for solutions with high semantic similarity to the current demand in the existing demand design solution library, such as the official website of a technology startup company designed before; combine the user's preferences for different components, recommend mini program components that are suitable for current needs and user tastes, such as "minimalist navigation bar", "innovative product display area", "professional team introduction page", etc., to form a personalized mini program component recommendation solution.

[0084] In this embodiment, through natural language processing technology, core semantic elements and target needs can be extracted from the user's website building needs and design style, which helps to better understand the user's true intentions, reduce the semantic gap between needs and design solutions, and improve recommendation accuracy; using knowledge graph technology and ontology knowledge base, the system can match user needs with existing design solutions or mini-program components, and dynamically expand the mapping relationship through semantic similarity, flexibly adjust the recommendation results according to existing component resources, continuously expand the matchable component set, and improve the system's adaptability and recommendation diversity; through clustering algorithms, semantic coding vectors are classified to effectively discover common themes of different needs and design styles, ensuring a more refined classification of different styles or needs, and further clarifying the characteristics of each category by assigning semantic labels. This optimization method can improve the accuracy of design proposal recommendations; based on semantic similarity calculation, the system can identify the match between current needs and existing design proposals, ensure that the recommended proposals are more targeted, meet user-specific needs and design styles, and improve user satisfaction with recommended components; by constructing a user-component interaction matrix and user implicit preferences, combined with collaborative filtering recommendations and semantic matching results, personalized mini-program components can be better recommended to users, so that the components obtained by users are more in line with their needs, and optimized according to historical behavior and preferences to improve user experience; combined with semantic similarity matching and collaborative filtering mechanisms, recommendation information of different dimensions is integrated to recommend the most suitable components from multiple angles to meet the diverse needs of users.

[0085] In an optional embodiment, learning latent vector representations of users and components through matrix decomposition includes:

[0086] The loss function for learning latent vector representation is as follows:

[0087] ;

[0088] in, L represents the loss function for learning latent vector representation, P represents the user latent vector matrix, Q represents the component latent vector matrix, u Represents the user index, i Represents the component index, I ui Indicates user u With components i Indicator parameter of whether interaction has occurred. R ui Indicates user u and components i The interaction score, p u Indicates user u The hidden vector, qi Representation Components i The hidden vector of λ represents the regularization parameter, ||·|| F 2 Represents the square of the Frobenius norm.

[0089] The formula describes a method of learning latent vector representations of users and components through matrix decomposition, with the goal of approximating the interaction scores between users and components as much as possible by optimizing a loss function. The structure of the formula consists of two parts: the first part is the error of the interaction score, which represents the difference between the inner product of the user and component latent vectors and the actual interaction score; the second part is the regularization term, which is used to prevent overfitting. The formula optimizes the user latent vector matrix and the component latent vector matrix by minimizing the sum of these errors and the regularization term.

[0090] The interaction score between the user and the component is decomposed into the inner product of the latent vector. By optimizing the latent vector, the system can accurately predict the user's preference for components that have not yet been exposed based on historical interaction data, thereby achieving accurate recommendations; the first part guides the learning of the latent vector by measuring the error between the inner product of the user-component latent vector and the actual interaction score. By minimizing this error, the formula enables the latent vector representation to accurately reflect the interaction relationship between the user and the component, thereby improving the accuracy of the recommendation; the second part of the formula introduces the Frobenius norm as a regularization term to control the complexity of the model and prevent overfitting problems during the latent vector learning process. By penalizing excessively large latent vector values, the formula encourages the model to learn more generalized features and improve performance on new users or new components.

[0091] In this embodiment, the formula can learn the potential characteristics of each user and component through the matrix decomposition method, better capture the association between user preferences and component characteristics, and improve the accuracy of recommendations; since the actual user-component interaction data is usually sparse, matrix decomposition can capture the potential user-component relationship through hidden vectors, effectively alleviate the recommendation challenges caused by data sparsity, and realize a more generalized recommendation system; the design of introducing regularization terms effectively prevents the model from overfitting on the training data, so that the recommendation system can maintain good generalization ability in test data or real environments, and can still make reasonable recommendations when facing new users or new components; matrix decomposition maps the high-dimensional interaction data of users and components to a low-dimensional hidden vector space, greatly reducing the complexity of calculations and improving the efficiency of large-scale recommendation systems. This is very critical for real-time recommendations in practical applications and can significantly reduce computational overhead.

[0092] S102. Determine optimization goals for the functions, interactions, layouts, and performances of different Mini Program pages, extract design elements from a preset Mini Program sample library, generate layout style schemes for multiple Mini Program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm, divide the pages into different functional areas and UI elements based on a page structured representation model, extract topological relationships and semantic dependencies, construct a graph structure page representation vector, iteratively optimize the layout style scheme based on a graph convolutional neural network, and obtain the optimal layout style scheme;

[0093] The functions refer to the specific functional modules and business logic provided by the Mini Program page, such as the login module, search function, shopping cart, etc. The functions determine what operations users can perform on the page.

[0094] The interaction refers to the interaction behavior and experience between the user and the page, including clicks, slides, form submissions and other operations. The interaction method needs to meet the user's usage habits and improve the user experience. For example, button click feedback, page switching animation, etc.

[0095] The layout refers to the typesetting and structural arrangement of page elements, that is, the spatial layout and arrangement of different UI components (such as pictures, text, buttons). The layout not only affects the visual beauty of the page, but also affects the user's operational convenience and the efficiency of information transmission.

[0096] The performance refers to the page loading speed, response time, rendering efficiency, etc., which measures the page's running performance on different devices and network environments. Performance optimization can ensure that the page is smooth and does not cause noticeable delays during loading and operation.

[0097] The topological relationship refers to the structural connection or adjacency relationship between UI elements in a page, describing the spatial positions of different components of the page and the relationship between them. For example, a button is next to an input box, and such an adjacency relationship belongs to the topological relationship. It helps describe the spatial structural characteristics of the page.

[0098] The semantic dependency refers to the functional or logical dependency between UI elements. For example, a form submission button depends on the validity of the input box content, or there is a logical association between a shopping cart button and product display. This dependency describes the functional and semantic relevance of page elements, which helps to understand the logical association and interaction between page elements.

[0099] In this embodiment, through a multi-objective optimization algorithm and a page structured representation model, the function, interaction, layout and performance optimization goals are combined into a unified framework, and the front-end layout plan is automatically generated and optimized, which reduces the workload of manual page design and improves design efficiency; by extracting the topological relationship and semantic dependency of UI elements and optimizing them using a graph convolutional neural network, the page layout plan is more in line with user habits in terms of function and interaction, ensuring that the structure of the page is clear and easy to operate, and ultimately optimizing the user experience; using a multi-objective optimization algorithm, multiple design goals such as function, interaction, layout, and performance can be considered at the same time, and iterative optimization of the combination of design elements can be achieved, and the optimal layout plan that takes into account all aspects of needs can be found, achieving a balance between visual beauty, complete functions and excellent performance; based on the graph structure representation, the page layout plan can be made more scalable and robust. By introducing topological relationships and semantic dependencies, the page can better adapt to functional changes and expansion requirements, and remain stable in structural design.

[0100] In an optional embodiment, the optimization target is determined for the functions, interactions, layouts and performances of different pages of the mini-program, and design elements are extracted from a preset mini-program sample library. Based on a multi-objective optimization algorithm, the combination of design elements is iteratively optimized to generate layout style schemes for multiple mini-program front-end pages. Based on a page structured representation model, the page is divided into different functional areas and UI elements, topological relationships and semantic dependencies are extracted, and a graph structure page representation vector is constructed. Based on a graph convolutional neural network, the layout style scheme is iteratively optimized to obtain the optimal layout style scheme, including:

[0101] Perform interface analysis on each page in the mini-program sample library, obtain the hierarchical structure and style information of the page through DOM tree extraction and CSS style parsing, identify the UI elements in the page through computer vision algorithms, and determine the key UI elements in combination with pre-determined key indicators; cluster the UI elements based on the visual and semantic features of the UI elements through a clustering algorithm to obtain a group of atomic style elements, extract the feature attributes corresponding to the visual and semantic features of each type of atomic style element, perform style encoding, and build a style element embedding dictionary;

[0102] Based on the style element embedding dictionary, the layout search space is defined, and combined with the layout constraints, the layout search space is narrowed. A multi-objective function is constructed according to the optimization goal. The multi-objective optimization algorithm is used to sample and iterate in the layout search space to generate the optimal layout solution and determine the initial layout solution.

[0103] For each initial layout scheme, a layout graph is constructed based on the preset page structured representation model, with UI elements as graph nodes and spatial adjacency relationships of UI elements as graph edges. The information in the style element embedding dictionary is used to attach weights to the edges to determine the association strength. The feature representation of the layout graph is learned through a graph convolutional neural network, and the node neighbor information is aggregated using an information transfer mechanism. Node features are updated, multi-scale layout features are extracted through pooling operations, and the layout embedding vector of the layout graph is generated through a readout function.

[0104] The layout embedding vector is input into the layout optimization model based on reinforcement learning, evolutionary algorithm and user feedback to generate an optimized layout plan. The layout optimization based on reinforcement learning learns the layout strategy through the interaction between the agent and the environment. The layout optimization based on the evolutionary algorithm searches for the local optimal solution based on the initial layout plan. The layout optimization based on user feedback builds a layout quality evaluation model according to the implicit and explicit feedback of the user, generates evaluation results, and guides the layout adjustment and optimization.

[0105] Based on the optimized layout plan, a hybrid method based on rules and machine learning is adopted to extract high-level semantic features from the layout plan, determine multi-dimensional layout features, and based on the multi-dimensional layout features, train the layout quality model to predict the objective quality score of the layout, and at the same time train the user preference model to predict the user's subjective preference ranking; based on the trained layout quality model, select the corresponding layouts with the top K objective quality scores, and comprehensively consider the user's subjective preference ranking to determine the optimal layout style plan.

[0106] Use a web rendering engine or parsing library to parse the HTML structure of the mini-program page, generate a DOM tree, traverse the DOM tree, extract the hierarchical structure of the page, identify each UI component and its nested relationship, and generate a component tree representation of the page to facilitate subsequent analysis of the attribute characteristics of each component.

[0107] Get the CSS style sheet in the page, including inline styles, internal style sheets and external style sheets, use the CSS parser to parse the style sheet, extract the style rules of each selector, and determine the style attributes of each UI component based on the matching relationship between the selector and the DOM element, such as font, color, size, inner and outer margins, etc., generate the style attribute dictionary of the UI component, and record the style characteristics of each component.

[0108] Input the page screenshot or rendering result into the pre-trained visual model, identify the UI elements in the image, calibrate the position of the identified UI elements, obtain their coordinate position, width, height and other geometric properties, combine the recognition result with the DOM tree, and establish a mapping relationship between UI elements and DOM nodes.

[0109] The importance of UI elements on the page is evaluated based on their geometric properties such as size and position. The larger the size of the element and the closer the position is to the front, the greater its impact on the page layout is considered. At the same time, the functional attributes of the elements are comprehensively considered. Key functional components such as navigation bars and search boxes are also key factors in page layout. Finally, a number of key UI elements with a greater impact on page layout are determined to guide subsequent layout design.

[0110] For each UI element, extract its visual features, such as aspect ratio, area ratio, etc., and represent them as vectors. Use OCR, semantic segmentation and other technologies to extract the text content and functional attributes of the UI element and represent them as vectors. Combine the visual features with the semantic features to obtain the clustering feature vector of each UI element.

[0111] Select a suitable clustering algorithm, such as K-means, hierarchical clustering, etc., to cluster UI elements. Based on the clustering results, divide UI elements into different atomic component categories, such as buttons, titles, paragraphs, cards, etc. Manually evaluate the clustering results and make adjustments when necessary to optimize the clustering effect.

[0112] For each type of atomic component, the distribution pattern of its style attributes is counted respectively, and the representative style features of each type of component, such as font size, line height, padding, etc., are extracted to establish a style feature vector, encode the style feature vector of the atomic component, and generate a style embedding representation. Preferably, one-hot encoding is applied to convert the style features into a fixed-length vector, and a style element embedding dictionary is constructed with the atomic component as the key and the style embedding as the value to facilitate subsequent style matching and generation.

[0113] Based on the style element embedding dictionary, the layout search space is defined. Each search point represents a UI layout method, which is composed of the style embedding combination of different atomic components. The dimension of the search space is determined by the number of categories of atomic components, and the value of each dimension is the embedding vector of the corresponding atomic component.

[0114] Define the constraints that the UI layout needs to meet, such as alignment, spacing, overlap, etc., and formalize the constraints as mathematical inequalities or equations to constrain the search space. During the search process, prune the layout solutions that do not meet the constraints to narrow the search scope.

[0115] Select evaluation indicators to measure the quality of layout, such as element visibility, page consistency, etc., express each indicator as a mathematical function, map the layout scheme to a real value, and perform weighted combination of multiple indicator functions to form a multi-objective evaluation function to guide the search direction.

[0116] A multi-objective optimization algorithm is used to perform sampling and iteration in the layout search space. During the search process, the optimization algorithm continuously updates the search population according to the multi-objective evaluation values ​​of the layout. After the search is terminated, several layout schemes are selected from the Pareto frontier as the initial layout for subsequent optimization.

[0117] For each initial layout scheme, a structured representation is established based on the DOM tree or grid system. The DOM tree is represented as a nested component hierarchy, and the grid is represented as a plane-divided grid structure. The page is divided into several layout units, each of which corresponds to an atomic component.

[0118] Convert the structured representation of the page into a graph data structure and construct a layout graph, with each layout unit as a node of the graph and the spatial adjacency relationship between units as the edge of the graph. The adjacency relationship is determined according to the relative position of the units, such as up and down, left and right, and included.

[0119] The style element embedding dictionary is used to calculate the weight value for each edge. The weight value represents the style similarity between adjacent layout units. The closer the style embeddings are, the larger the weight value is. The similarity between style embeddings is calculated using metrics such as cosine similarity and Euclidean distance.

[0120] The layout graph is input into the graph convolutional neural network to learn its topological structure and style features. The graph convolution layer updates the feature representation of the node by aggregating the neighbor information of the node. Multiple layers of graph convolutional layers are superimposed to achieve hierarchical propagation and fusion of node features.

[0121] After the graph convolutional network, the overall features of the layout graph are extracted through the pooling layer. Common pooling operations such as maximum pooling and average pooling are used to aggregate multi-scale features. The pooled features are passed through the fully connected layer to generate an embedded vector representation of the layout graph.

[0122] Layout generation is regarded as a sequential decision-making process. The optimal layout strategy is found through reinforcement learning. The layout plan is represented as the state, the layout operation is represented as the action, and the layout evaluation value is represented as the reward. The mapping strategy from state to action is learned through the policy gradient algorithm.

[0123] The initial layout plan is regarded as a population, and local search is performed through an evolutionary algorithm to encode the layout plan to form a genotype representation for genetic operations. Through selection, crossover, mutation and other operations, the layout population is updated to screen out a better layout plan.

[0124] Collect users' implicit feedback on layout plans, such as user behavior data such as clicks and browsing time, and collect users' explicit feedback on layout plans, such as layout scores, rankings and other subjective evaluations. Build a layout quality assessment model based on user feedback to predict the quality score of the layout. Use the quality score as guiding information for layout optimization to generate a layout that better meets user preferences.

[0125] A combination of heuristic rules and machine learning is used to extract multi-dimensional features from layout schemes. Based on design principles such as alignment and proportion, a series of layout evaluation rules are designed to extract quantifiable layout features such as spacing and font size from the geometry and style attributes of the layout scheme.

[0126] Select a model structure, such as a regression model, a ranking model, etc., to predict the quality score of the layout. Use the layout features and the manually annotated quality scores to train the layout quality assessment model. After the model is trained, the quality of the new layout solution can be predicted and its pros and cons can be automatically evaluated.

[0127] Select user preference learning models, such as collaborative filtering and matrix decomposition, to predict users' subjective preferences for layouts, establish user portraits based on user groups, extract user features, such as age and gender, and use feedback data such as user features and layout ranking to train user preference prediction models.

[0128] Among all the candidate layout schemes, the quality assessment model is used to score and rank them, and the top k schemes are selected. The preference prediction model is used to predict user satisfaction for the top k schemes. The scheme with the highest satisfaction is selected, and the quality score and user satisfaction are weighted and summed to obtain a comprehensive score for the layout. The layout scheme with the highest comprehensive score is selected as the final generation scheme and applied to the actual page.

[0129] In this embodiment, the structure and style of the page are automatically identified, which greatly reduces the workload of manual page analysis and improves the parsing speed and accuracy. Through UI element recognition and key element determination, combined with visual models and geometric properties, the key UI components and their functions in the page are accurately located, providing reliable basic data for subsequent layout optimization. Through the combination of multi-objective search, layout representation learning, reinforcement learning, and evolutionary algorithms, the automatic generation and continuous optimization of layout plans are achieved, which helps to quickly generate layout style plans that meet user needs. The quality of the layout plan is scored through machine learning, and the advantages and disadvantages of the layout are automatically evaluated in combination with the user preference prediction model, which improves the efficiency of layout quality evaluation and ensures the high quality of the layout plan and user satisfaction. The layout optimization and search process takes into account the constraints of the page, so that the generated page layout is highly adaptive and suitable for a variety of devices and screen sizes.

[0130] In an optional embodiment, the multi-objective optimization algorithm includes:

[0131] Split multiple optimization objectives into multiple single objectives, determine the sub-problems of single-objective optimization, each sub-problem corresponds to a weight vector, and minimize the weighted objective function value;

[0132] At the initial moment, a set of weight vectors are uniformly sampled in the target solution space to generate corresponding sub-problems. The layout plan for each sub-problem is generated through heuristic rules, the initial individuals are determined, and all initial individuals constitute the population, and the iterative optimization process begins:

[0133] Taking the initial individual as the parent individual, a set of new layout schemes are generated in the neighborhood of the parent individual as candidate individuals, and the fitness values ​​of the candidate individuals on all targets are evaluated. If the candidate individual dominates the parent individual, the parent individual is replaced by the candidate individual, and the optimal fitness value and evaluation times of the layout scheme are recorded and updated, and the search radius of the current sub-problem is adaptively adjusted;

[0134] Based on the preset elite sharing frequency, the elite sharing operation is performed for the corresponding number of times per interval. For each sub-problem, the individual corresponding to the Pareto dominance optimal solution is selected from the population as the elite individual of the current sub-problem. The current individual in the current sub-problem is compared with all elite individuals. If it is dominated by the elite individual, the elite individual is used to replace the current individual.

[0135] Based on the congestion degree of the area where the current individual of each sub-problem is located, the corresponding cell count is calculated. If the cell count is greater than the preset congestion threshold, the corresponding weight is reduced, otherwise, the corresponding weight is increased;

[0136] The optimization process is iterated until the preset maximum number of iterations is reached, and the current optimal solution of all sub-problems is determined as the optimal layout solution.

[0137] Analyze the multiple optimization objectives involved in the layout optimization problem, select several key objectives as optimization objects based on the correlation and importance between the objectives, and set a corresponding evaluation function for each objective to quantitatively measure the performance of the layout solution on the objective.

[0138] Each objective is regarded as an independent sub-problem, corresponding to a single-objective optimization problem. For each sub-problem, a weight vector is set to indicate the importance of the objective in the overall optimization. The total objective function in the form of weighted sum is constructed, and the objective functions of each sub-problem are linearly combined according to the weights.

[0139] A set of weight vectors are uniformly sampled in the target solution space to generate corresponding sub-problems, covering different areas of the weight space. The number of sampled weight vectors determines the number of sub-problems, affecting the granularity and efficiency of the optimization.

[0140] For each sub-problem, the initial layout plan is generated using heuristic rules. Several layout templates can be manually designed as initial solutions based on design experience, aesthetic principles, etc., or a rule engine can be used to automatically generate a batch of random initial layouts according to preset rules. The generated layout plan is used as the initial individual, and each individual corresponds to a potential optimal solution to a sub-problem.

[0141] For example, it is assumed that the goals of layout optimization include page visibility, content consistency, and layout diversity. It can be divided into three sub-problems, each of which corresponds to an optimization goal. Sampling generates 10 sets of weight vectors and constructs 10 sub-problems. For the "visibility" sub-problem, 5 initial layout schemes are designed, of which 2 are generated based on artificial experience and 3 are randomly generated using rules. Each layout scheme corresponds to an initial individual of the sub-problem, and a total of 50 initial individuals are generated.

[0142] For each parent individual, a set of new layout schemes are generated in its neighborhood as candidate solutions. The neighborhood defines the scope of the layout search. New solutions can be generated by changing the position, size and other attributes of the layout elements. The generation of new solutions can be achieved by using random perturbations, heuristic mutations and other operations to explore the optimization direction in the local space.

[0143] For each candidate solution, evaluate its fitness value on all objectives. The fitness value can be calculated by the evaluation function of each objective, which indicates the pros and cons of the candidate solution on the objective. The higher the fitness value, the better the candidate solution performs on the objective and the more likely it is to become the optimal layout.

[0144] Compare the fitness values ​​of the candidate solution and the parent individual, and replace them according to the dominance relationship. If the candidate solution is better than the parent individual in all objectives, it is considered to dominate the parent individual, and the dominated parent individual is replaced by the candidate solution, completing an iterative update.

[0145] Record and update the optimal fitness value and evaluation times of the layout solution in each sub-problem. Adaptively adjust the search radius of the current sub-problem based on historical search information. The search radius controls the scope of neighborhood search and affects the accuracy and efficiency of local optimization. The search radius can adopt an adaptive control strategy. For example, the more iterations, the smaller the radius and the more refined the search.

[0146] For example, for an individual of the "visibility" subproblem, 10 new candidate layouts are generated in its neighborhood by randomly changing the size of the page elements. The fitness values ​​of the candidate layouts on the three objectives of visibility, consistency, and diversity are calculated respectively. If a candidate layout is better than the parent layout in all objectives, it is used to replace the parent as a new individual. The fitness value of the new individual is recorded, and the historical optimal value of the visibility objective is updated. The search radius is dynamically adjusted according to the number of evaluations. For example, when the current number of iterations is large, the radius is reduced for a fine search.

[0147] Based on the preset elite sharing frequency, elite sharing is triggered every fixed number of iterations, all individuals in the population are non-dominated sorted, and individuals on the Pareto front are selected as elite individuals. Elite individuals have better performance in multi-objective optimization and guide the evolution of the population.

[0148] The current individual of each sub-problem is compared with all elite individuals one by one, and the comparison adopts the dominance relationship. If the current individual is dominated by the elite individual, the elite individual is considered to be better. The dominance judgment criterion is that the fitness value of the elite individual is better than or equal to the current individual in all goals.

[0149] For the current individual dominated by the elite individual, the corresponding elite individual is used to replace the current individual. The replacement process shares high-quality solutions between different sub-problems and accelerates the convergence of the population. After the replacement occurs, the search state of the replaced individual is reset and the search is restarted at the new position.

[0150] For example, assume that elite sharing is triggered every 50 iterations, and the current iteration has been 200. Perform non-dominated sorting on the 50 individuals in the population and select 5 elite individuals. For the "consistency" subproblem, compare the current individual with the 5 elite individuals and find that 2 elite individuals dominate the current individual. Randomly select a dominant elite to replace the current individual, reset its search state, and re-search for the local optimal solution at the new position.

[0151] For each subproblem, the number of individuals in the layout space area where the current individual is located is counted to obtain the cell count. The cell defines the local neighborhood range of the layout space. A cell with dense individuals indicates that the area is searched repeatedly. The cell count reflects the search status of each subproblem and is the basis for adjusting the weight.

[0152] The cell count of each sub-problem is compared with the preset congestion threshold. If the cell count is greater than the threshold, it means that the area is too crowded and has been fully searched. If the cell count is less than the threshold, it means that the area still has the potential for further search.

[0153] According to the result of crowding judgment, the weight value of each sub-problem is adjusted dynamically. For crowded sub-problems, its weight is reduced to reduce its contribution to the total objective function and encourage the search for other targets. For non-crowded sub-problems, its weight is increased to increase its contribution to the total objective function and guide the search for the target. The adjustment range of the weight can be set to a fixed value or an adaptive value, which changes dynamically according to the optimization process.

[0154] For example, assume that the crowding threshold is set to 5, that is, if the number of individuals in a cell exceeds 5, the area is considered crowded. For the "diversity" subproblem, the number of individuals in the cell where the current individual is located is 8, which is greater than the crowding threshold. Reduce the weight of this subproblem from 0.3 to 0.2 to reduce its impact on the overall objective function. For the "visibility" subproblem, the number of individuals in the current cell is 3, which does not reach the threshold. Increase its weight from 0.4 to 0.5 to encourage searching for this target. The adjusted weight vector is (0.5, 0.3, 0.2), and continue to the next round of iteration.

[0155] Set the maximum number of iterations of the optimization algorithm. As one of the termination conditions of the algorithm, the maximum number of iterations controls the time overhead and computing resources of the optimization. It needs to be set reasonably according to the scale of the problem. When the number of iterations reaches the maximum value, it is considered that the algorithm has been fully evolved and the search process can be terminated.

[0156] After reaching the maximum number of iterations, for each subproblem, the optimal solution found in the search process is selected as the current optimal layout. The optimal solution is the layout scheme with the highest evaluated fitness value in the search history of the corresponding subproblem. The optimal solution of each subproblem together constitutes a set of Pareto optimal solutions for the multi-objective optimization problem.

[0157] From the optimal solutions of multiple sub-problems, the final layout solution is selected according to design requirements and preferences. The advantages and disadvantages of each optimal solution can be manually evaluated based on factors such as the visual effect and interactive experience of the layout. The layout that can achieve a good balance between the various optimization objectives and meet the design requirements is selected as the optimal solution.

[0158] For example, assume that the maximum number of iterations of the algorithm is set to 1000 times, and 1000 iterations have been completed, reaching the termination condition. For each sub-problem, the layout with the highest fitness value is selected from its search history as the optimal solution. The optimal solution to the "visibility" sub-problem is layout A, the optimal solution to the "consistency" sub-problem is layout B, and the optimal solution to the "diversity" sub-problem is layout C. Through manual evaluation, layout A has the best visual effect, layout B has the best interactive experience, and layout C has the most reasonable page structure. Finally, layout B was selected as the optimal layout solution adopted by the design, which balanced the sub-problem goals and took into account the aesthetics and usability of the layout.

[0159] In this embodiment, by decomposing sub-problems and setting weights for each goal, it is ensured that the final layout can take into account multiple optimization directions and achieve a balance between visual effects and functionality; by generating the initial layout and candidate solutions heuristically, combined with random perturbations and mutation operations, the search efficiency of layout optimization is improved and the time for finding the optimal solution is shortened; the control strategy of dynamic weight adjustment and adaptive search radius makes the optimization process more flexible, and can gradually refine the search according to the progress of optimization, thereby avoiding falling into the local optimal solution, and also improves the accuracy and effectiveness of the overall optimization; through the non-dominated sorting and elite sharing mechanism of elite individuals, the population evolution process is accelerated, and a better layout solution is quickly found, which effectively shortens the number of iterations and accelerates the convergence of the layout; the application of congestion evaluation and cell counting ensures the reasonable allocation of search resources, avoids excessive search in certain areas, thereby improving resource utilization efficiency and guiding the search of potential areas that have not been fully explored; the final layout selection stage allows the combination of manual evaluation, and can make a trade-off selection of the optimal solution according to the dynamic changes of design requirements, ensuring that the optimization result meets both the automation indicators and the design aesthetics and user experience.

[0160] S103. Based on the optimal layout style solution, a dynamic component construction method is adopted to parse the page layout structure diagram, identify UI elements, and automatically map them into corresponding program components. Combined with the context-aware component recommendation mechanism, it dynamically recommends and renders optimized mini-program components based on the functional semantics of the page and user interaction intentions. Combined with the incremental learning algorithm, it continuously monitors user interaction behavior and feedback data, optimizes and adjusts the recommendation strategy in real time, and finally forms a customized mini-program front-end page site design plan.

[0161] In this embodiment, by parsing the page layout structure diagram and identifying UI elements, they are automatically mapped to program components, thereby achieving automatic matching of pages and functional components, and improving the adaptability and rendering efficiency of components; combined with the context-aware mechanism, the optimized mini-program components are dynamically recommended according to the page functional semantics and user interaction intentions, to achieve personalized and situational adaptive front-end design and enhance the accuracy of user experience; the incremental learning algorithm is used to continuously monitor the user's interaction behavior and feedback data, and the recommendation strategy is dynamically adjusted according to the user's real-time feedback, so that the page design can better meet user needs, thereby improving user satisfaction and the practicality of the page; the recommendation system continuously learns and optimizes during the user's continuous use, and the page layout and component configuration will automatically adapt to user preferences, thereby forming a personalized and customized mini-program front-end design to meet the needs of different users and scenarios; through automated component recommendation and dynamic adjustment mechanisms, the front-end design iteration time is greatly shortened, manual intervention and development costs are reduced, and development efficiency is improved.

[0162] In an optional embodiment, based on the optimal layout style solution, a dynamic component construction method is adopted to parse the page layout structure diagram, identify UI elements, and automatically map them into corresponding program components. In combination with the context-aware component recommendation mechanism, according to the functional semantics of the page and the user's interaction intention, the optimized mini-program components are dynamically recommended and rendered. In combination with the incremental learning algorithm, the user interaction behavior and feedback data are continuously monitored, the recommendation strategy is optimized and adjusted in real time, and finally a customized mini-program front-end page site design solution is formed, including:

[0163] Parsing the optimal layout style scheme, extracting style rules and attribute values, identifying UI elements in the optimal layout style scheme, and acquiring style attributes and layout information of the UI elements;

[0164] Inputting the style attributes and layout information of the UI element into a pre-trained UI element embedding model, learning the embedded feature representation of the UI element through the UI element embedding model, and using a similarity calculation method based on the embedded feature representation to obtain a mini-program component similar to the UI element, and establishing a mapping relationship;

[0165] Based on the mapping relationship, a context-aware mechanism is introduced, and the optimal layout style solution is used to parse the functional semantics of the page and the user's interaction intention. A sequence-based recommendation algorithm is used to predict the interaction component corresponding to the user's next operation based on the user's historical interaction sequence, and the component recommendation probability is determined. At the same time, a recommendation algorithm based on a multi-armed bandit is used to balance the exploration and utilization of components through the Thompson sampling strategy, dynamically adjust the component recommendation probability, and generate a final recommendation list;

[0166] Based on the final recommendation list, component instances are generated in operation through dynamic rendering and inserted into the page position corresponding to the optimal layout style scheme. Through the data binding mechanism, they are associated with the corresponding values ​​in the optimal layout style scheme. Combined with the adaptive layout, adaptive matching of appearance and behavior is achieved, and a customized mini-program front-end page website design scheme is determined.

[0167] Parse the optimal layout style scheme and identify the style rules and attribute values ​​therein. The style rules include visual attributes such as layout type, size, color, font, etc. The parsing process can be achieved through regular expression matching, CSS parser and other technologies; identify each UI element in the layout scheme, such as buttons, pictures, text boxes, etc. UI elements can be identified based on their tag type, class name, ID and other features. The identification result is the type and unique identifier of each UI element; for each UI element, extract its corresponding style attributes and values. Style attributes include the element's position, size, background color, font style, etc. The extraction process can be achieved by parsing the element's inline style or external CSS rules; obtain the position and relative relationship information of the UI element in the layout. The layout information includes the element's coordinates, spacing, alignment, hierarchy, etc. The layout attributes of the element are calculated by parsing the layout's HTML structure and CSS box model.

[0168] For example, assuming that the optimal layout style scheme is an e-commerce homepage, the following UI elements are parsed: top navigation bar, carousel, product list, bottom tab bar. Extract the style attributes of the navigation bar: height 60px, background color #FFFFFF, font size 18px. Get the layout information of the product list: center alignment, vertical spacing 10px, two-column layout, cell width 150px.

[0169] The extracted UI element style attributes and layout information are input into the pre-trained embedding model. The embedding model can use technologies such as word vectors and convolutional neural networks to learn the low-dimensional feature representation of the element. The learned feature vector represents the semantic and visual features of the element. The element's embedded feature representation is used to calculate its similarity with the components in the mini-program component library. The similarity calculation can use metrics such as cosine similarity and Euclidean distance to select several components with the highest similarity and establish a mapping relationship from UI elements to mini-program components. The context-aware mechanism is introduced to analyze the page functional semantics and user interaction intentions of the optimal layout solution. By parsing the page structure, keywords, interaction events, etc., the business domain and user goals of the page are inferred. The context information is used to guide component recommendations to improve the accuracy and personalization of recommendations. A sequence-based recommendation algorithm is used to predict the next action based on the user's historical interaction sequence. By analyzing the user's click, swipe and other behavior sequences on the page, behavior patterns and preferences are discovered. Combined with contextual information, the components that users are most likely to interact with are predicted, and component recommendation probabilities are generated. Multi-armed bandit algorithms such as Thompson sampling are used to balance the exploration and utilization of components, dynamically adjust the recommendation probability of each component, explore new possibilities while utilizing known preferences, and adaptively optimize component recommendation strategies through continuous trials and feedback. The final component recommendation list is generated by comprehensively considering factors such as component similarity, recommendation probability, and exploration value. The recommendation list contains a series of mini-program components that best match the UI elements and are most likely to be accepted by users. The length and presentation of the recommendation list can be adjusted according to actual needs.

[0170] For example, for the carousel element on the e-commerce homepage, its feature vector is obtained through embedding model learning. In the mini-program component library, the most similar image carousel component and card component are found. According to the user's browsing history, it is found that the user prefers interactive carousels, and the recommendation probability of the carousel component is increased. At the same time, through Thompson sampling, the card component is given a certain exploration opportunity. The final recommendation list generated is: image carousel component (probability 0.7), card component (probability 0.3).

[0171] Based on the recommendation list, the corresponding mini-program component instance is dynamically generated at runtime. By calling the component constructor of the mini-program framework and passing in the necessary parameters, the component object is created. The dynamic rendering process can be achieved through technologies such as template engines and virtual DOM. The generated component instance is inserted into the page position corresponding to the optimal layout style scheme. According to the layout information of the UI elements, the coordinates and size of the component are calculated, and its position in the page is adjusted. The insertion process needs to consider the hierarchical relationship and coverage order of the components to ensure the correct display of the page. Through the data binding mechanism, the properties and events of the component are associated with the corresponding values ​​in the optimal layout style scheme. Data binding can be achieved through the syntax and API provided by the mini-program framework, such as interpolation expressions, property binding, etc. After binding, the content and behavior of the component can be automatically updated according to changes in the data to achieve dynamic interaction. Using the adaptive layout capability of the mini-program, The generated page presents the best effect on different devices and screen sizes. Through CSS technologies such as elastic box and grid layout, automatic arrangement and scaling of components are achieved. Combined with media query and responsive design, different layout rules are applied to different devices. For the recommended components, they are matched with the optimal layout style scheme according to their appearance and behavior characteristics. By adjusting the style properties of the components, such as color, font, margin, etc., their appearance is consistent with the overall design style, and the interactive behavior of the components is customized and adjusted as necessary to meet the functional requirements of the page. After a series of steps such as dynamic rendering, data binding, and adaptive layout, the final mini program page design scheme is generated. The scheme includes various aspects of the page structure, style, interaction, etc., which can meet the user's functional and experience requirements. Developers can further fine-tune and improve it based on this scheme to form a complete mini program front-end page.

[0172] For example, for the generated image carousel component, it is associated with the image URL and title text in the optimal layout through data binding. Adjust the style of the carousel component so that its width adapts to the screen and its height is 30% of the screen. Customize the interactive mode of the carousel switching to support left and right sliding and bottom dot switching. Through the elastic box layout, the carousel component can be displayed in the center on different devices and maintain the appropriate spacing. Finally, an adaptive and personalized e-commerce homepage applet page design solution is generated.

[0173] In this embodiment, the style rules and UI elements in the layout are quickly parsed and automatically mapped to corresponding program components, which reduces the workload of manual coding and improves development efficiency. The context-aware mechanism and user interaction intention analysis are used to accurately recommend small program components that best match the page function semantics and user needs, thereby enhancing the personalization and accuracy of the recommendation and improving the user experience. The incremental learning algorithm and the multi-armed bandit algorithm are combined to dynamically adjust the recommendation probability of the component, balance exploration and utilization, and ensure that the component recommendation can not only meet current needs but also adapt to changes in user preferences. The generated small program components can adapt to different devices and screen sizes, and can automatically Dynamically adjust the position and size of components to ensure the best display effect in various screen environments; quickly and dynamically generate and render component instances through template engines, virtual DOM and other technologies, realize efficient page construction, and consider the component hierarchy and layout structure to ensure the correctness and aesthetics of page display; through the data binding mechanism, associate component properties and events with style values ​​in the layout, realize automatic update of component content and behavior, and improve the interactivity and dynamism of the page; by monitoring user behavior and feedback, the recommendation algorithm continuously optimizes the component recommendation strategy to ensure that the page design continues to improve with the changes in user needs, and the generated solution can better fit the user's actual usage scenario.

[0174] In an optional embodiment, based on the mapping relationship, a context-aware mechanism is introduced, and the optimal layout style scheme is used to parse the page function semantics and user interaction intentions. A sequence-based recommendation algorithm is used to predict the interactive component corresponding to the user's next operation according to the user's historical interaction sequence, and the component recommendation probability is determined. At the same time, a recommendation algorithm based on a multi-armed bandit is used to balance the exploration and utilization of components through the Thompson sampling strategy, and the component recommendation probability is dynamically adjusted to generate a final recommendation list including:

[0175] Use natural language processing technology to perform word segmentation, part-of-speech tagging and named entity recognition on the text information of the optimal layout style solution, extract page keywords and subject words to build page semantic vectors, analyze page layout structure and UI element position relationship to identify user interaction intentions and operation processes, and combine domain knowledge base and user behavior logs to infer page functional semantics and user interaction intentions;

[0176] Based on the functional semantics of the page and the user's interaction intention, a sequence-based recommendation algorithm is used to collect user historical interaction sequence data to construct a user behavior sequence. The user behavior sequence is deduplicated, filtered, and time-truncated. The word embedding technology is used to map the components in the user behavior sequence into low-dimensional dense vectors. The user's historical interaction sequence is used as input to build a sequence recommendation model based on a recurrent neural network to predict the component corresponding to the next operation. The attention mechanism is introduced to adjust the historical behavior weight, and the correlation between the candidate component and the user's historical interaction sequence is calculated to obtain the recommendation probability of the first component.

[0177] Based on the recommendation probability of the first component, candidate components are extracted, and the candidate components are regarded as gambling machine arms and the component recommendation probability is used as the expected return. The component Beta distribution parameters are initialized, and Thompson sampling is performed on the component Beta distribution for each recommendation to generate the posterior expected return. The second component recommendation probability is calculated based on the posterior expected return, and the component Beta distribution parameters are updated in combination with user feedback. The posterior expected return is iteratively adjusted to determine the final recommendation probability of the component and generate the final recommendation list.

[0178] The Beta distribution specifically refers to a continuous probability distribution defined on the interval [0, 1], which is usually used to represent the uncertainty of the probability of an event occurring. The Beta distribution is controlled by two parameters, usually expressed as Beta(α, β), where α usually represents the number of successful events or the prior assumption of success, and β (Beta) usually represents the number of failed events or the prior assumption of failure.

[0179] When α>1 and β>1, the Beta distribution presents a bell-shaped curve, indicating that there is more confidence in the success and failure of the event; when α=1 and β=1, the Beta distribution is a uniform distribution, indicating that there is no preference for the probability of the event; when α>1 and β<1, the distribution is biased towards 1, indicating that there is a greater tendency to believe that the event will occur; when α<1 and β>1, the distribution is biased towards 0, indicating that there is a greater tendency to believe that the event will not occur.

[0180] Use natural language processing technology to process the text information of the optimal layout style solution, segment the text, split the text into the smallest semantic units, perform part-of-speech tagging on the segmentation results, identify the part of speech of each word, such as noun, verb, adjective, etc., perform named entity recognition, identify specific entities such as names of people, places, and institutions in the text, extract page keywords and subject words, find out the keywords and subject words that can express the main content of the page through word frequency statistics and TF-IDF methods, construct a page semantic vector, and use word embedding technology to map keywords and subject words to a low-dimensional dense vector space to form a semantic representation of the page.

[0181] Analyze the page layout structure and the position relationship of UI elements, identify different layout areas in the page, such as header, navigation, content area, sidebar, footer, etc., analyze the position relationship of UI elements in different layout areas, such as relative position, alignment, spacing, etc., and infer the user's interaction intention and operation process based on the position relationship and layout structure of UI elements.

[0182] Combine the domain knowledge base and user behavior logs to infer the page functional semantics and user interaction intentions. Use the pre-built domain knowledge base to match page keywords and subject terms with the concepts in the knowledge base to infer the page functional semantics. Analyze the user's historical behavior logs on the page, such as clicking, scrolling, filling out forms, etc., to infer the user's interaction intentions. Combine the page functional semantics and user interaction intentions to form a comprehensive understanding of page functions and user needs.

[0183] A sequence-based recommendation algorithm is used to recommend the component corresponding to the next operation. User historical interaction sequence data is collected, including the user's operation records on the page. The user behavior sequence is deduplicated, filtered, and time-truncated to remove repeated and irrelevant operations. The most recent operation sequence is selected according to the time window. The components in the user behavior sequence are mapped into low-dimensional dense vectors using word embedding technology to form a semantic representation of the component. A sequence recommendation model based on a recurrent neural network, preferably LSTM, is constructed with the user's historical interaction sequence as input to predict the component corresponding to the next operation. An attention mechanism is introduced to adjust the weight of the historical behavior according to the correlation between the current operation and the historical operation, so that the model can better capture the user's dynamic preferences. The correlation between the candidate component and the user's historical interaction sequence is calculated to obtain the recommendation probability of the first component.

[0184] Based on the recommendation probability of the first component, a multi-armed bandit algorithm (such as Thompson sampling) is used for exploration and utilization to generate a final component recommendation list, extract candidate components, and regard the candidate components as bandit arms. The component recommendation probability is used as the expected return, and the Beta distribution parameters of each component are initialized to model the expected return distribution of the component. Each time a recommendation is made, Thompson sampling is performed on the Beta distribution of each component to generate the posterior expected return. The second component recommendation probability is calculated based on the posterior expected return as the exploration factor of the component. The first component recommendation probability and the second component recommendation probability are combined to obtain the final recommendation probability of the component. A recommendation list is generated based on the final recommendation probability, with components with high recommendation probabilities ranked first. Based on user feedback on the recommendation results (such as clicks, ignores, etc.), the Beta distribution parameters of the component are updated, and the expected return estimate of the component is adjusted. The above steps are repeated to continuously iterate and optimize the recommendation results, balance exploration and utilization, and improve the accuracy and diversity of recommendations.

[0185] Finally, a recommended list of optimized layout styles is output for users to select and apply.

[0186] In this embodiment, through word frequency statistics and TF-IDF methods, the keywords and subject words of the page are effectively extracted, which can help the system accurately capture the core content of the page and construct a page semantic vector, which has a positive effect on the subsequent layout analysis, functional semantic inference and accuracy of recommended components; by analyzing the layout relationships such as the relative position, alignment, and spacing of UI elements, the user's interaction intentions and operation processes in different areas can be better inferred, and the rationality and applicability of layout recommendations can be improved; combined with the domain knowledge base and user behavior logs, the functional semantics of the page can be accurately matched with the user's actual needs, forming a deep understanding of the page function and user needs, and optimizing the user experience; through the sequence-based recommendation algorithm and attention mechanism, according to the user's historical behavior, the user's next operation is predicted, the recommended component list is adjusted, and the component recommendation strategy is gradually optimized to improve the accuracy of the recommendation and user satisfaction; combined with the multi-armed bandit algorithm, it can balance exploration and utilization, and dynamically adjust the recommendation strategy, which not only improves the accuracy of the recommendation, but also ensures the diversity of the recommendation results and avoids overly limited recommendations.

[0187] Figure 2 Schematic diagram of the structure of the mini program front-end page design system according to the embodiment of the present invention. Figure 2 As shown, the system comprises:

[0188] The first unit is used to perform semantic analysis based on the website building requirements and design style input by the user through natural language processing, extract semantic elements and target requirements, match them in a preset domain ontology knowledge base based on the semantic elements through knowledge graph technology, identify the corresponding mini-program components, build a mapping relationship between the target requirements and the mini-program components, use a semantic similarity calculation model to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, dynamically expand the mapping relationship according to the matching results, and generate a mini-program component recommendation solution;

[0189] The second unit is used to determine the optimization goals for the functions, interactions, layouts, and performances of different pages of the mini-programs, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, the pages are divided into different functional areas and UI elements, topological relationships and semantic dependencies are extracted, and a graph structure page representation vector is constructed. Based on the graph convolutional neural network, the layout style scheme is iteratively optimized to obtain the optimal layout style scheme.

[0190] The third unit is used to adopt a dynamic component construction method based on the optimal layout style solution. By parsing the page layout structure diagram, it identifies UI elements and automatically maps them into corresponding program components. Combined with the context-aware component recommendation mechanism, it dynamically recommends and renders optimized mini-program components based on the functional semantics of the page and user interaction intentions. Combined with the incremental learning algorithm, it continuously monitors user interaction behavior and feedback data, optimizes and adjusts the recommendation strategy in real time, and finally forms a customized mini-program front-end page website design plan.

[0191] According to a third aspect of the embodiments of the present invention,

[0192] An electronic device is provided, comprising:

[0193] processor;

[0194] a memory for storing processor-executable instructions;

[0195] The processor is configured to call the instructions stored in the memory to execute the aforementioned method.

[0196] A fourth aspect of the embodiments of the present invention is:

[0197] A computer-readable storage medium is provided, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the aforementioned method is implemented.

[0198] The present invention may be a method, an apparatus, a system and / or a computer program product. The computer program product may include a computer-readable storage medium carrying computer-readable program instructions for executing various aspects of the present invention.

[0199] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. The method for designing the front-end page of a mini program is characterized by: include: Based on the website building requirements and design style input by the user, semantic analysis is performed through natural language processing to extract semantic elements and target requirements. Based on the semantic elements, matching is performed in the preset domain ontology knowledge base through knowledge graph technology to identify the corresponding mini-program components, and a mapping relationship between the target requirements and the mini-program components is constructed. The semantic similarity calculation model is used to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, and the mapping relationship is dynamically expanded according to the matching results to generate a mini-program component recommendation solution; Determine optimization goals for the functions, interactions, layouts, and performance of different mini-program pages, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, divide the page into different functional areas and UI elements, extract topological relationships and semantic dependencies, construct a graph structure page representation vector, and iteratively optimize the layout style scheme based on a graph convolutional neural network to obtain the optimal layout style scheme. Based on the optimal layout style solution, a dynamic component construction method is adopted. By parsing the page layout structure diagram, UI elements are identified and automatically mapped into corresponding program components. Combined with the context-aware component recommendation mechanism, according to the functional semantics of the page and the user's interaction intention, the optimized mini-program components are dynamically recommended and rendered. Combined with the incremental learning algorithm, the user interaction behavior and feedback data are continuously monitored, the recommendation strategy is optimized and adjusted in real time, and finally a customized mini-program front-end page site design solution is formed; Based on the website building requirements and design style input by the user, semantic analysis is performed through natural language processing to extract semantic elements and target requirements. Based on the semantic elements, matching is performed in the preset domain ontology knowledge base through knowledge graph technology to identify the corresponding mini-program components, and a mapping relationship between target requirements and mini-program components is constructed. The semantic similarity calculation model is used to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base. The mapping relationship is dynamically expanded according to the matching results to generate mini-program component recommendation solutions, including: Preprocess the text corresponding to the website building requirements and design style, divide the text into word sequences, perform part-of-speech tagging and named entity recognition on the word sequences, convert the word sequences into word vectors, use the pre-trained deep bidirectional language model to perform context-aware encoding on the word vectors, obtain context embedding representation, and obtain semantic encoding vectors; Based on the clustering algorithm, the semantic coding vector is divided into multiple clusters. Through the clustering evaluation index, the optimal number of clusters is selected to maximize the intra-cluster similarity and minimize the inter-cluster similarity, and the optimal clustering cluster is constructed. The common features and common themes are extracted from the semantic coding vectors in each cluster, and semantic labels are assigned according to the predetermined domain knowledge to generate a semantic element set and a target demand set. Map the semantic element set to the pre-built ontology knowledge base, learn vectorized representations of entities and relationships in the ontology knowledge base, obtain entity relationship embedding vectors, calculate the similarity between the semantic element and the entity relationship embedding vector, select the entity relationship embedding vector corresponding to the maximum similarity as the candidate mapping, screen the candidate mapping based on the reasoning rules and constraints of the ontology knowledge base, and obtain the mapping relationship between the semantic element and the concepts, entities and relationships in the ontology knowledge base; Based on a preset text corpus, a word embedding model is trained, a semantic element set, a target requirement set, and an existing requirement design solution are represented as an aggregation of word embedding vectors, the similarity of the word embedding vector aggregation is calculated, a semantic similarity score is determined, and a semantic similarity matching result is obtained; Based on the interaction data between users and mini-program components, a user-component interaction matrix is ​​constructed. Through matrix decomposition, latent vector representations of users and components are learned to determine the user's implicit preference for components. Based on the learned latent vector representations, user similarity is calculated to obtain a set of similar users. Using the components corresponding to the preferences of the similar user set, a collaborative filtering recommendation component set is generated for the target user. The component similarity of the collaborative filtering recommendation component set is calculated to obtain a recommended component set similar to the selected components in the target demand set. The collaborative filtering recommendation component set is merged with the recommended component set to obtain a merged recommendation component set. The merged recommendation component set is merged with the semantic similarity matching result to determine a personalized mini-program component recommendation scheme. According to the functions, interactions, layouts and performances of different pages of mini-programs, we determine the optimization goals, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, we divide the pages into different functional areas and UI elements, extract topological relationships and semantic dependencies, and construct a graph structure page representation vector. Based on the graph convolutional neural network, we iteratively optimize the layout style scheme, and obtain the optimal layout style scheme, including: Perform interface analysis on each page in the mini-program sample library, obtain the hierarchical structure and style information of the page through DOM tree extraction and CSS style parsing, identify the UI elements in the page through computer vision algorithms, and determine the key UI elements in combination with pre-determined key indicators; cluster the UI elements based on the visual and semantic features of the UI elements through a clustering algorithm to obtain a group of atomic style elements, extract the feature attributes corresponding to the visual and semantic features of each type of atomic style element, perform style encoding, and build a style element embedding dictionary; Based on the style element embedding dictionary, the layout search space is defined, and combined with the layout constraints, the layout search space is narrowed. A multi-objective function is constructed according to the optimization goal. The multi-objective optimization algorithm is used to sample and iterate in the layout search space to generate the optimal layout solution and determine the initial layout solution. For each initial layout scheme, a layout graph is constructed based on the preset page structured representation model, with UI elements as graph nodes and spatial adjacency relationships of UI elements as graph edges. The information in the style element embedding dictionary is used to attach weights to the edges to determine the association strength. The feature representation of the layout graph is learned through a graph convolutional neural network, and the node neighbor information is aggregated using an information transfer mechanism. Node features are updated, multi-scale layout features are extracted through pooling operations, and the layout embedding vector of the layout graph is generated through a readout function. The layout embedding vector is input into the layout optimization model based on reinforcement learning, evolutionary algorithm and user feedback to generate an optimized layout plan. The layout optimization based on reinforcement learning learns the layout strategy through the interaction between the agent and the environment. The layout optimization based on the evolutionary algorithm searches for the local optimal solution based on the initial layout plan. The layout optimization based on user feedback builds a layout quality evaluation model according to the implicit and explicit feedback of the user, generates evaluation results, and guides the layout adjustment and optimization. Based on the optimized layout plan, a hybrid method based on rules and machine learning is adopted to extract high-level semantic features from the layout plan, determine multi-dimensional layout features, and based on the multi-dimensional layout features, train the layout quality model to predict the objective quality score of the layout, and at the same time train the user preference model to predict the user's subjective preference ranking; based on the trained layout quality model, select the corresponding layouts with the top K objective quality scores, and comprehensively consider the user's subjective preference ranking to determine the optimal layout style plan.

2. The method according to claim 1, characterized in that Through matrix decomposition, learning latent vector representations of users and components includes: The loss function for learning latent vector representation is as follows: Where L represents the loss function of learning latent vector representation, P represents the user latent vector matrix, Q represents the component latent vector matrix, u represents the user index, i represents the component index, and I ui Indicator parameter indicating whether user u has interacted with component i, R ui represents the interaction score between user u and component i, p u represents the latent vector of user u, q i represents the latent vector of component i, λ represents the regularization parameter, ||·|| F 2 Represents the square of the Frobenius norm.

3. The method according to claim 1, characterized in that The multi-objective optimization algorithm includes: Split multiple optimization objectives into multiple single objectives, determine the sub-problems of single-objective optimization, each sub-problem corresponds to a weight vector, and minimize the weighted objective function value; At the initial moment, a set of weight vectors are uniformly sampled in the target solution space to generate corresponding sub-problems. The layout plan for each sub-problem is generated through heuristic rules, the initial individuals are determined, and all initial individuals constitute the population, and the iterative optimization process begins: Taking the initial individual as the parent individual, a set of new layout schemes are generated in the neighborhood of the parent individual as candidate individuals, and the fitness values ​​of the candidate individuals on all targets are evaluated. If the candidate individual dominates the parent individual, the parent individual is replaced by the candidate individual, and the optimal fitness value and evaluation times of the layout scheme are recorded and updated, and the search radius of the current sub-problem is adaptively adjusted; Based on the preset elite sharing frequency, the elite sharing operation is performed for the corresponding number of times per interval. For each sub-problem, the individual corresponding to the Pareto dominance optimal solution is selected from the population as the elite individual of the current sub-problem. The current individual in the current sub-problem is compared with all elite individuals. If it is dominated by the elite individual, the elite individual is used to replace the current individual. Based on the congestion degree of the area where the current individual of each sub-problem is located, the corresponding cell count is calculated. If the cell count is greater than the preset congestion threshold, the corresponding weight is reduced, otherwise, the corresponding weight is increased; The optimization process is iterated until the preset maximum number of iterations is reached, and the current optimal solution of all sub-problems is determined as the optimal layout solution.

4. The method according to claim 1, characterized in that: Based on the optimal layout style solution, a dynamic component construction method is adopted. By parsing the page layout structure diagram, UI elements are identified and automatically mapped into corresponding program components. Combined with the context-aware component recommendation mechanism, according to the functional semantics of the page and the user's interaction intention, the optimized mini-program components are dynamically recommended and rendered. Combined with the incremental learning algorithm, the user interaction behavior and feedback data are continuously monitored, the recommendation strategy is optimized and adjusted in real time, and finally a customized mini-program front-end page site design solution is formed, including: Parsing the optimal layout style scheme, extracting style rules and attribute values, identifying UI elements in the optimal layout style scheme, and acquiring style attributes and layout information of the UI elements; Inputting the style attributes and layout information of the UI element into a pre-trained UI element embedding model, learning the embedded feature representation of the UI element through the UI element embedding model, and using a similarity calculation method based on the embedded feature representation to obtain a mini-program component similar to the UI element, and establishing a mapping relationship; Based on the mapping relationship, a context-aware mechanism is introduced, and the optimal layout style solution is used to parse the functional semantics of the page and the user's interaction intention. A sequence-based recommendation algorithm is used to predict the interaction component corresponding to the user's next operation based on the user's historical interaction sequence, and the component recommendation probability is determined. At the same time, a recommendation algorithm based on a multi-armed bandit is used to balance the exploration and utilization of components through the Thompson sampling strategy, dynamically adjust the component recommendation probability, and generate a final recommendation list; Based on the final recommendation list, component instances are generated in operation through dynamic rendering and inserted into the page position corresponding to the optimal layout style scheme. Through the data binding mechanism, they are associated with the corresponding values ​​in the optimal layout style scheme. Combined with the adaptive layout, adaptive matching of appearance and behavior is achieved, and a customized mini-program front-end page website design scheme is determined.

5. The method according to claim 4, characterized in that Based on the mapping relationship, a context-aware mechanism is introduced, and the optimal layout style solution is used to parse the page function semantics and user interaction intentions. A sequence-based recommendation algorithm is used to predict the interactive components corresponding to the user's next operation based on the user's historical interaction sequence, and the component recommendation probability is determined. At the same time, a recommendation algorithm based on a multi-armed bandit is used to balance the exploration and utilization of components through the Thompson sampling strategy, and the component recommendation probability is dynamically adjusted to generate a final recommendation list including: Use natural language processing technology to perform word segmentation, part-of-speech tagging and named entity recognition on the text information of the optimal layout style solution, extract page keywords and subject words to build page semantic vectors, analyze page layout structure and UI element position relationship to identify user interaction intentions and operation processes, and combine domain knowledge base and user behavior logs to infer page functional semantics and user interaction intentions; Based on the functional semantics of the page and the user's interaction intention, a sequence-based recommendation algorithm is used to collect user historical interaction sequence data to construct a user behavior sequence. The user behavior sequence is deduplicated, filtered, and time-truncated. The word embedding technology is used to map the components in the user behavior sequence into low-dimensional dense vectors. The user's historical interaction sequence is used as input to build a sequence recommendation model based on a recurrent neural network to predict the component corresponding to the next operation. The attention mechanism is introduced to adjust the historical behavior weight, and the correlation between the candidate component and the user's historical interaction sequence is calculated to obtain the recommendation probability of the first component. Based on the recommendation probability of the first component, candidate components are extracted, and the candidate components are regarded as gambling machine arms and the component recommendation probability is used as the expected return. The component Beta distribution parameters are initialized, and Thompson sampling is performed on the component Beta distribution for each recommendation to generate the posterior expected return. The second component recommendation probability is calculated based on the posterior expected return, and the component Beta distribution parameters are updated in combination with user feedback. The posterior expected return is iteratively adjusted to determine the final recommendation probability of the component and generate the final recommendation list.

6. A mini program front-end page building and design system, used to implement the method described in any one of claims 1 to 5, characterized in that: include: The first unit is used to perform semantic analysis based on the website building requirements and design style input by the user through natural language processing, extract semantic elements and target requirements, match them in a preset domain ontology knowledge base based on the semantic elements through knowledge graph technology, identify the corresponding mini-program components, build a mapping relationship between the target requirements and the mini-program components, use a semantic similarity calculation model to match the semantic elements and target requirements with the existing requirements and design solutions in the domain ontology knowledge base, dynamically expand the mapping relationship according to the matching results, and generate a mini-program component recommendation solution; The second unit is used to determine the optimization goals for the functions, interactions, layouts, and performances of different pages of the mini-programs, extract design elements from the preset mini-program sample library, and generate layout style schemes for multiple mini-program front-end pages by iteratively optimizing the combination of design elements based on a multi-objective optimization algorithm. Based on the page structured representation model, the pages are divided into different functional areas and UI elements, topological relationships and semantic dependencies are extracted, and a graph structure page representation vector is constructed. Based on the graph convolutional neural network, the layout style scheme is iteratively optimized to obtain the optimal layout style scheme. The third unit is used to adopt a dynamic component construction method based on the optimal layout style solution. By parsing the page layout structure diagram, it identifies UI elements and automatically maps them into corresponding program components. Combined with the context-aware component recommendation mechanism, it dynamically recommends and renders optimized mini-program components based on the functional semantics of the page and user interaction intentions. Combined with the incremental learning algorithm, it continuously monitors user interaction behavior and feedback data, optimizes and adjusts the recommendation strategy in real time, and finally forms a customized mini-program front-end page website design plan.

7. An electronic device, characterized in that: include: processor; a memory for storing processor-executable instructions; The processor is configured to call the instructions stored in the memory to execute the method described in any one of claims 1 to 5.

8. A computer-readable storage medium having computer program instructions stored thereon, characterized in that: When the computer program instructions are executed by a processor, the method according to any one of claims 1 to 5 is implemented.

Images