Front-end dynamic layout optimization system based on artificial intelligence

Abstract

The invention belongs to the technical field of user interface design and front-end development of artificial intelligence, and provides an artificial intelligence-based front-end dynamic layout optimization system, which comprises a behavior acquisition module, a data preprocessing module, a machine learning model module, a layout generation engine module, a real-time rendering module and a feedback module, the behavior acquisition module is connected with the data preprocessing module, the data preprocessing module is connected with the machine learning model module, the machine learning model module is further connected with the layout generation engine module and the feedback module, and the real-time rendering module is connected with the layout generation engine module and the feedback module. The interactive behavior data of the user can be captured in real time, and the layout parameters are adjusted in real time, so that personalized interface display is realized, the user experience is improved, and the manual intervention cost is reduced.

Description

Technical Field

[0001] The present invention belongs to the technical field of user interface design and front-end development of artificial intelligence. Background Art

[0002] In existing front-end web design, traditional layout optimization often relies on manual adjustments and pre-set templates. This not only increases developer workload but can also lead to inconsistent user experiences and poor interface adaptability. Especially in diverse device and resolution environments, traditional layouts cannot effectively adapt to diverse user needs. Furthermore, dynamic layout adjustments are inefficient and fail to reflect changes in user behavior in real time, often resulting in suboptimal optimization results. Therefore, developing an automatic, intelligent, and personalized front-end layout optimization system has become a pressing technical challenge. Summary of the Invention

[0003] In order to solve technical problems in existing front-end layout optimization such as high manual intervention cost, poor user experience consistency, and low dynamic adjustment efficiency, the present invention provides a front-end dynamic layout optimization system and method based on artificial intelligence.

[0004] The front-end dynamic layout optimization system based on artificial intelligence includes a behavior acquisition module, a data preprocessing module, a machine learning model module, a layout generation engine module, a real-time rendering module, and a feedback module. The behavior acquisition module is connected to the data preprocessing module, which is connected to the machine learning model module. The machine learning model module is also connected to the layout generation engine module and the feedback module respectively. The real-time rendering module is connected to the layout generation engine module and the feedback module respectively.

[0005] The behavior collection module is used to capture and record user interaction behavior data in real time and use it as raw data;

[0006] The data preprocessing module is used to preprocess the collected raw data and generate a data format suitable for input into the machine learning model module;

[0007] The machine learning model module is used to analyze raw data to predict user preferences and usage habits;

[0008] The layout generation engine module is used to dynamically calculate the position, size, and arrangement of page elements based on the output results of the machine learning model module and generate a layout plan;

[0009] The real-time rendering module is used to ensure that layout adjustments are fast and smooth, avoiding disruption to the user experience.

[0010] The feedback module is used to collect users' ratings and improvement suggestions for the current layout, and feed this data back to the machine learning model module for online updating and optimization.

[0011] The specific process of the behavior collection module is as follows: collecting user interaction information and capturing user operation behaviors in real time by monitoring page events; monitoring and recording the collected user behavior data, and storing it in the back-end database after structured processing; in this process, the user's sensitive identity information is de-identified.

[0012] The data preprocessing module includes: cleaning the original data to achieve denoising, filling missing values ​​and correcting format errors; normalizing the cleaned data to map data of different dimensions and distributions into a unified range to ensure data consistency and comparability; then extracting feature information related to the target, screening key features, and performing dimensionality reduction to reduce redundancy; generating standardized feature vectors and inputting them into the machine learning model module.

[0013] The machine learning model module uses a convolutional neural network (CNN) to extract and analyze visual features related to the front-end layout, and extracts visual information at different levels through multi-level convolution and pooling operations. It uses a convolutional neural network (CNN) algorithm to process users' time series behavior data and model their behavior patterns in the time dimension to predict their future interactive behavior. It uses a cross-validation method to evaluate and optimize the model performance, and finally applies the model to the front-end layout. The layout parameters are dynamically adjusted according to the analysis results to optimize the user experience and achieve personalized interface display.

[0014] The layout generation engine module uses the TensorFlow.js library to convert the trained machine learning model into the SavedModel format suitable for the front-end environment. It adopts a mechanism of real-time calculation and dynamic update of layout parameters to automatically adjust the key elements of each component in the page to adapt to changes in user input or environmental conditions.

[0015] The real-time rendering module uses vGPU technology to split the interface components into small rendering units, combined with the GPU's parallel computing capabilities, to render the page in blocks and accelerate graphics processing; CSS media queries are used to design responsive layouts to adapt to various device environments.

[0016] The feedback module builds a data foundation for dynamic optimization by collecting user interaction behavior data and layout feedback information in real time; uses support vector machines (SVM) to continuously train user preferences and behavior patterns, and updates the machine learning model in real time to ensure that the system can quickly adapt to new layout requirements and design trends.

[0017] Technical effects:

[0018] The present invention provides a front-end dynamic layout optimization system based on artificial intelligence, which can capture user interaction behavior data in real time, and use encryption algorithms to protect user privacy and ensure data transmission security; optimize the front-end web page layout through intelligent and automated means, adopt convolutional neural networks (CNN) to predict user preferences and needs, and adjust layout parameters in real time to achieve personalized interface display, improve user experience, and reduce the cost of manual intervention; ensure that the layout maintains consistency and clarity under different devices and screen sizes through CSS media queries, and realize dynamic layout adjustment in different devices and environments; at the same time, the system also supports incremental learning, and ensures continuous improvement of layout optimization without adding additional computing overhead by collecting feedback data in real time and continuously training machine learning models. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 This is a block diagram of the overall structure of the present invention. DETAILED DESCRIPTION

[0020] The technical solution of the present invention will be described in detail below with reference to exemplary embodiments.

[0021] like Figure 1 As shown, the front-end dynamic layout optimization system based on artificial intelligence includes a behavior acquisition module, a data preprocessing module, a machine learning model module, a layout generation engine module, a real-time rendering module and a feedback module. The behavior acquisition module is connected to the data preprocessing module, the data preprocessing module is connected to the machine learning model module, the machine learning model module is also connected to the layout generation engine module and the feedback module respectively, and the real-time rendering module is connected to the layout generation engine module and the feedback module respectively;

[0022] The behavior collection module is used to capture and record user interaction behavior data in real time and use it as raw data;

[0023] The data preprocessing module is used to preprocess the collected raw data and generate a data format suitable for input into the machine learning model module;

[0024] The machine learning model module is used to analyze raw data to predict user preferences and usage habits;

[0025] The layout generation engine module is used to dynamically calculate the position, size, and arrangement of page elements based on the output results of the machine learning model module and generate a layout plan;

[0026] The real-time rendering module is used to ensure that layout adjustments are fast and smooth, avoiding disruption to the user experience.

[0027] The feedback module is used to collect users' ratings and improvement suggestions for the current layout, and feed this data back to the machine learning model module for online updating and optimization.

[0028] Furthermore, the behavior collection module specifically processes the following: collecting user interaction information, monitoring page events such as clicks, slides, scrolls, inputs, and page dwell time through page event listeners, and capturing the user's attention and usage habits for each part of the interface in real time; simultaneously monitoring and recording the collected user behavior data, and storing it in a backend database after structured processing. During this process, the user's sensitive identity information is de-identified, and personal privacy data is removed to ensure compliance; finally, the encryption algorithm RSA is used to encrypt and protect user behavior data in storage or transmission, and the data is securely transmitted via the HTTPS protocol to prevent data leakage and unauthorized access.

[0029] Furthermore, the data preprocessing module includes: cleaning the original data to achieve denoising, filling missing values ​​and correcting format errors, removing unnecessary redundant data and noise information, and ensuring the accuracy and reliability of the data; more specifically, the moving average algorithm (Moving Average) in the statistical method can be used to eliminate random noise and eliminate redundant data; the cleaned data is normalized to map data of different dimensions and distributions into a unified range to ensure data consistency and comparability; then, feature information related to the target is extracted, and key features are screened through the PCA dimensionality reduction algorithm to reduce data dimensions to reduce redundancy; the Z-score normalization algorithm is used to generate standardized feature vectors, and finally an optimized and standardized data set is generated and input into the machine learning model module.

[0030] Furthermore, the machine learning model module uses a convolutional neural network (CNN) to extract and analyze visual features related to the front-end layout, and extracts visual information at different levels through multi-level convolution and pooling operations to capture key elements such as structure, color, and size in the layout; uses a convolutional neural network (CNN) algorithm to process users' time series behavior data (such as users' click streams, sliding trajectories, etc.) and models users' behavior patterns in the time dimension to predict users' future interactive behaviors; uses a cross-validation method to evaluate and tune the model performance to ensure its generalization ability and accuracy in different scenarios; finally, applies the model to the front-end layout, and dynamically adjusts the layout parameters according to the analysis results to optimize the user experience and achieve personalized interface display.

[0031] Furthermore, the layout generation engine module uses the TensorFlow.js library to convert the trained machine learning model into the SavedModel format suitable for the front-end environment; in response to problems such as user input or changes in environmental conditions, a mechanism of real-time calculation and dynamic update of layout parameters is adopted to automatically adjust the size, position, spacing and other key elements of each component in the page to adapt to changes in user input or environmental conditions, such as changes in resolution and rotation angle; further, to ensure a smooth transition of the interface, virtual DOM technology is used to avoid frequent direct operations on the native DOM; in addition, data loading adopts a lazy loading or asynchronous loading strategy to ensure that the main thread will not be blocked when loading data in the background, to avoid freezes or delays in the display of the user interface, to ensure that the interface switching is natural and smooth, and to avoid visual freezes and abruptness.

[0032] Furthermore, the real-time rendering module adopts vGPU technology, which splits the interface components into small rendering units, combines the parallel computing capabilities of the GPU, and renders the page in blocks, avoiding the performance bottleneck caused by large-scale page redrawing and accelerating the processing of graphics operations. By introducing delayed rendering and asynchronous rendering strategies, the system can give priority to rendering the page area that the user is currently concerned about based on the user's real-time interactive behavior, thereby effectively reducing unnecessary calculations and resource consumption, and improving page loading speed and operating efficiency; using css media queries to design responsive layouts to adapt to a variety of device environments, covering factors such as different screen sizes, device types and content priorities, to ensure consistent and clear display effects on different device screens; and finally, through the collaborative work of the above functions, achieve real-time, smooth and high-quality interface rendering, improve user experience and support complex front-end layout optimization needs.

[0033] Furthermore, the feedback module collects user interaction behavior data and layout feedback information in real time, extracts user pain points and needs in layout, and builds a data foundation for dynamic optimization; uses support vector machines (SVM) to continuously train user preferences and behavior patterns, and updates the machine learning model in real time, achieving incremental learning without adding additional computing overhead, avoiding resource waste, and ensuring that the system can quickly adapt to new layout requirements and design trends.

[0034] The contents not described in detail in this specification belong to the existing technology known to those skilled in the art. At the same time, for those skilled in the art, according to the concept of the present invention, there may be changes in the specific implementation methods and application scope. In summary, the contents of this specification should not be understood as limiting the present invention.

Claims

1. The front-end dynamic layout optimization system based on artificial intelligence is characterized by: It includes a behavior acquisition module, a data preprocessing module, a machine learning model module, a layout generation engine module, a real-time rendering module and a feedback module. The behavior acquisition module is connected to the data preprocessing module, the data preprocessing module is connected to the machine learning model module, the machine learning model module is also connected to the layout generation engine module and the feedback module respectively, and the real-time rendering module is connected to the layout generation engine module and the feedback module respectively; The behavior collection module is used to capture and record user interaction behavior data in real time and use it as raw data; The data preprocessing module is used to preprocess the collected raw data and generate a data format suitable for input into the machine learning model module; The machine learning model module is used to analyze raw data to predict user preferences and usage habits; The layout generation engine module is used to dynamically calculate the position, size, and arrangement of page elements based on the output results of the machine learning model module and generate a layout plan; The real-time rendering module is used to ensure that layout adjustments are fast and smooth, avoiding disruption to the user experience. The feedback module is used to collect users' ratings and improvement suggestions for the current layout, and feed this data back to the machine learning model module for online updating and optimization.

2. The artificial intelligence-based front-end dynamic layout optimization system according to claim 1, characterized in that: The specific process of the behavior collection module is as follows: collecting user interaction information and capturing user operation behaviors in real time by monitoring page events; monitoring and recording the collected user behavior data, and storing it in the back-end database after structured processing; in this process, the user's sensitive identity information is de-identified.

3. The front-end dynamic layout optimization system based on artificial intelligence according to claim 1 is characterized in that: The data preprocessing module includes: cleaning the original data to achieve denoising, filling missing values ​​and correcting format errors; normalizing the cleaned data to map data of different dimensions and distributions into a unified range to ensure data consistency and comparability; then extracting feature information related to the target, screening key features, and performing dimensionality reduction to reduce redundancy; generating standardized feature vectors and inputting them into the machine learning model module.

4. The artificial intelligence-based front-end dynamic layout optimization system according to claim 1, characterized in that: The machine learning model module uses a convolutional neural network (CNN) to extract and analyze visual features related to the front-end layout, and extracts visual information at different levels through multi-level convolution and pooling operations. It uses a convolutional neural network (CNN) algorithm to process users' time series behavior data and model their behavior patterns in the time dimension to predict their future interactive behavior. It uses a cross-validation method to evaluate and optimize the model performance, and finally applies the model to the front-end layout. The layout parameters are dynamically adjusted according to the analysis results to optimize the user experience and achieve personalized interface display.

5. The artificial intelligence-based front-end dynamic layout optimization system according to claim 1, characterized in that: The layout generation engine module uses the TensorFlow.js library to convert the trained machine learning model into the SavedModel format suitable for the front-end environment. It adopts a mechanism of real-time calculation and dynamic update of layout parameters to automatically adjust the key elements of each component in the page to adapt to changes in user input or environmental conditions.

6. The artificial intelligence-based front-end dynamic layout optimization system according to claim 1, characterized in that: The real-time rendering module uses vGPU technology to split the interface components into small rendering units, combined with the GPU's parallel computing capabilities, to render the page in blocks and accelerate graphics processing; CSS media queries are used to design responsive layouts to adapt to various device environments.

7. The artificial intelligence-based front-end dynamic layout optimization system according to claim 1, characterized in that: The feedback module collects user interaction behavior data and layout feedback information in real time, builds a data foundation for dynamic optimization, uses support vector machines (SVM) to continuously train user preferences and behavior patterns, and updates the machine learning model in real time to ensure that the system can quickly adapt to new layout requirements and design trends.

Images