A layout parameter prediction model training method, a layout optimization method and device
By constructing a layout parameter prediction model and combining user interaction data and device characteristics, the page layout is optimized, solving the problem that traditional layout methods cannot meet user needs and improving the ease of operation and information acquisition efficiency.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- BEIJING QIYI CENTURY SCI & TECH CO LTD
- Filing Date
- 2026-03-23
- Publication Date
- 2026-06-26
AI Technical Summary
Traditional page layouts are difficult to meet the usage habits and business needs of different users, resulting in low user operation convenience and low information acquisition efficiency.
By acquiring behavioral heatmaps, business configuration data, terminal physical data, and user operation sequences from sample pages, a layout parameter prediction model is constructed using convolutional neural networks, long short-term memory networks, and fully connected layers. The model parameters are then adjusted to optimize the page layout, resulting in predictions that better align with user interaction habits and device characteristics.
Optimize page layout to improve user convenience and information retrieval efficiency, and provide a clear and convenient operation path.
Smart Images

Figure CN122285153A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of page layout technology, and in particular to a method for training a layout parameter prediction model, a layout optimization method, and an apparatus. Background Technology
[0002] In user terminal applications, a fixed checkout page layout is insufficient to meet the needs of different users' usage habits and business scenarios. Traditional layout methods often lack consideration for actual user interaction behaviors, such as low click-through rates for important operation buttons and insufficient information display, resulting in low user operation convenience and low information acquisition efficiency. Summary of the Invention
[0003] The purpose of this invention is to provide a layout parameter prediction model training method, a layout optimization method, and an apparatus to optimize page layout, improve user operation convenience, and enhance information retrieval efficiency. The specific technical solution is as follows:
[0004] In a first aspect of this invention, a method for training a layout parameter prediction model is provided, the method comprising:
[0005] The system acquires a behavioral heatmap, service configuration data, terminal physical data, user operation sequence, and layout parameter ground truth values for a sample page on a sample terminal. The behavioral heatmap characterizes the frequency of user interaction with different areas of the sample page during access. The service configuration data characterizes the number and type of services displayed on the sample page. The terminal physical data characterizes the display parameters of the sample terminal. The user operation sequence characterizes the temporal pattern of user interaction with different areas of the sample page during access.
[0006] The behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence are input into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model.
[0007] The difference between the predicted layout parameters and the true values of the layout parameters is calculated, and the model parameters of the original layout parameter prediction model are adjusted in the direction of reducing the difference to obtain the target layout parameter prediction model.
[0008] In one possible implementation, the original layout parameter prediction model includes a convolutional neural network, a long short-term memory network, and a fully connected layer;
[0009] The step of inputting the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model includes:
[0010] The behavior heatmap, the service configuration data, and the terminal physical data are input into the convolutional neural network to obtain the spatial features output by the convolutional neural network.
[0011] The user operation sequence is input into the Long Short-Term Memory network to obtain the temporal features output by the Long Short-Term Memory network;
[0012] The spatial features and the temporal features are input into the fully connected layer to obtain the layout parameters output by the fully connected layer, which are used as the predicted layout parameters.
[0013] In one possible implementation, adjusting the model parameters of the original layout parameter prediction model in a direction that reduces the difference to obtain the target layout parameter prediction model includes:
[0014] Based on the differences, the adjustment method of the model parameters of the original layout parameter prediction model is calculated layer by layer from the fully connected layer to the convolutional neural network;
[0015] The model parameters of the original layout parameter prediction model are adjusted according to the adjustment method to obtain the target layout parameter prediction model.
[0016] In one possible implementation, calculating the difference between the predicted layout parameters and the true values of the layout parameters includes:
[0017] Calculate the mean square error between the predicted layout parameters and the true values of the layout parameters, and use it as the first difference;
[0018] Calculate the overlap between the predicted layout parameters and the true values of the layout parameters, as a second difference;
[0019] The first difference and the second difference are weighted and summed to obtain the difference between the predicted layout parameter and the true value of the layout parameter.
[0020] In a second aspect of the present invention, a layout optimization method is also provided, the method comprising:
[0021] The system acquires a behavior heatmap, service configuration data, terminal physical data, and user operation sequence for a target page on a target terminal. The behavior heatmap represents the frequency of interaction between the user and various areas within the target page during the user's access to the target page. The service configuration data represents the number and type of services displayed on the target page. The terminal physical data represents the display parameters of the target terminal. The user operation sequence represents the temporal pattern of interaction between the user and various areas within the target page during the user's access to the target page.
[0022] The behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence are input into the target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using any of the steps described in the first aspect;
[0023] The target page is rendered and displayed based on the predicted layout parameters.
[0024] In one possible implementation, the step of inputting the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the target layout parameter prediction model to predict the predicted layout parameters of the target page includes:
[0025] In response to a new interaction between the user and the target page, the target layout parameter prediction model uses a first prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence.
[0026] In response to the arrival of a preset update time, the target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence; wherein, the algorithm complexity of the second prediction method is lower than that of the first prediction method.
[0027] In one possible implementation, the step of inputting the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the target layout parameter prediction model to predict the predicted layout parameters of the target page includes:
[0028] In response to the arrival of a preset update time, and the receipt of a new interactive behavior within the waiting time before the arrival of the preset update time, the target layout parameter prediction model uses a first prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence.
[0029] or,
[0030] In response to the arrival of the preset update time, and if no new interactive behavior is received within the waiting period before the arrival of the preset update time, the target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence.
[0031] The algorithmic complexity of the second prediction method is lower than that of the first prediction method.
[0032] In one possible implementation, the method further includes:
[0033] If it is detected that the predicted layout parameters meet a preset abnormal condition before the target page is re-rendered and displayed according to the predicted layout parameters, and / or the re-rendering is not completed within a preset time period, then the target page is re-rendered and displayed according to the target layout parameters preset for the target terminal.
[0034] In a third aspect of the present invention, a layout parameter prediction model training apparatus is also provided, the apparatus comprising:
[0035] The first acquisition module is used to acquire behavioral heatmaps, service configuration data, terminal physical data, user operation sequences, and layout parameter truth values of a sample page in a sample terminal. The behavioral heatmap represents the frequency of interaction between the user and various areas within the sample page during the user's access to the sample page. The service configuration data represents the number and type of services displayed on the sample page. The terminal physical data represents the display parameters of the sample terminal. The user operation sequence represents the temporal pattern of interaction between the user and various areas within the sample page during the user's access to the sample page.
[0036] The first prediction module is used to input the behavior heatmap, the service configuration data, the terminal physical data and the user operation sequence into the original layout parameter prediction model, and obtain the predicted layout parameters output by the original layout parameter prediction model.
[0037] The parameter adjustment module is used to calculate the difference between the predicted layout parameters and the true values of the layout parameters, and adjust the model parameters of the original layout parameter prediction model in the direction of reducing the difference to obtain the target layout parameter prediction model.
[0038] In one possible implementation, the original layout parameter prediction model includes a convolutional neural network, a long short-term memory network, and a fully connected layer;
[0039] The first prediction module includes:
[0040] The prediction first submodule is used to input the behavior heatmap, the service configuration data and the terminal physical data into the convolutional neural network to obtain the spatial features output by the convolutional neural network;
[0041] The second prediction submodule is used to input the user operation sequence into the long short-term memory network to obtain the temporal features output by the long short-term memory network.
[0042] The prediction third submodule is used to input the spatial features and the temporal features into the fully connected layer to obtain the layout parameters output by the fully connected layer, which are used as the prediction layout parameters.
[0043] In one possible implementation, the parameter adjustment module includes:
[0044] The first submodule is adjusted to determine the adjustment method of the model parameters of the original layout parameter prediction model, calculated layer by layer from the fully connected layer to the convolutional neural network, based on the differences.
[0045] The second submodule is adjusted to adjust the model parameters of the original layout parameter prediction model according to the adjustment method, so as to obtain the target layout parameter prediction model.
[0046] In one possible implementation, the parameter adjustment module includes:
[0047] The third submodule is adjusted to calculate the mean square error between the predicted layout parameters and the true values of the layout parameters, which is used as the first difference.
[0048] The fourth submodule is adjusted to calculate the overlap between the predicted layout parameters and the true values of the layout parameters, as a second difference.
[0049] The fifth submodule is adjusted to perform a weighted summation of the first difference and the second difference to obtain the difference between the predicted layout parameters and the true values of the layout parameters.
[0050] In a fourth aspect of the invention, a layout optimization apparatus is also provided, the apparatus comprising:
[0051] The second acquisition module is used to acquire a behavior heatmap, service configuration data, terminal physical data, and user operation sequence of a target page in a target terminal; wherein, the behavior heatmap is used to characterize the frequency of interaction between the user and each area within the target page during the user's access to the target page; the service configuration data is used to characterize the number and type of services displayed on the target page; the terminal physical data is used to characterize the display screen parameters of the target terminal; and the user operation sequence is used to characterize the timing pattern of interaction between the user and each area within the target page during the user's access to the target page.
[0052] The second prediction module is used to input the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using any of the steps described in the first aspect;
[0053] The first optimization module is used to render and display the target page based on the predicted layout parameters.
[0054] In one possible implementation, the second prediction module includes:
[0055] The fourth sub-module is used to respond to new user interaction behaviors with the target page. The target layout parameter prediction model uses the first prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence.
[0056] The fifth prediction submodule is used to predict the layout parameters of the target page in response to the arrival of a preset update time. The target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence. The algorithm complexity of the second prediction method is lower than that of the first prediction method.
[0057] In one possible implementation, the second prediction module includes:
[0058] The sixth submodule is used to predict the layout parameters of the target page in response to the arrival of a preset update time and the receipt of a new interactive behavior within the waiting time before the arrival of the preset update time. The target layout parameter prediction model uses the first prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data and the user operation sequence.
[0059] or,
[0060] The seventh prediction submodule is used to respond to the arrival of the preset update time and the fact that no new interactive behavior is received within the waiting time before the arrival of the preset update time. In this case, the target layout parameter prediction model uses the second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data and the user operation sequence.
[0061] The algorithmic complexity of the second prediction method is lower than that of the first prediction method.
[0062] In one possible implementation, the device further includes:
[0063] The second optimization module is used to re-render and display the target page according to the target layout parameters preset for the target terminal if it is detected that the predicted layout parameters meet the preset abnormal conditions before the target page is re-rendered and displayed according to the predicted layout parameters, and / or the re-rendering is not completed within the preset time period.
[0064] In a fifth aspect of the present invention, an electronic device is also provided, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus.
[0065] Memory, used to store computer programs;
[0066] When a processor executes a program stored in memory, it implements any of the layout parameter prediction model training methods or layout optimization methods described above.
[0067] In another aspect of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored therein, and when the computer program is executed by a processor, it implements any of the above-described layout parameter prediction model training methods or layout optimization methods.
[0068] In another aspect of the present invention, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to execute any of the layout parameter prediction model training methods or layout optimization methods described above.
[0069] This invention provides a layout parameter prediction model training method, layout optimization method, and apparatus. The method involves acquiring a behavior heatmap, service configuration data, terminal physical data, user operation sequences, and true values of layout parameters from a sample page on a sample terminal. The behavior heatmap represents the frequency of interaction between the user and various areas within the sample page during user access. The service configuration data represents the quantity and type of services displayed on the sample page. The terminal physical data represents the display parameters of the sample terminal. The user operation sequences represent the temporal patterns of interaction between the user and various areas within the sample page during user access. The behavior heatmap, service configuration data, terminal physical data, and user operation sequences are input into an original layout parameter prediction model to obtain the predicted layout parameters output by the original model. The difference between the predicted layout parameters and the true values of the layout parameters is calculated, and the model parameters of the original layout parameter prediction model are adjusted to reduce this difference, resulting in a target layout parameter prediction model. By applying this method, a target layout parameter prediction model is trained, taking into account users' actual interaction habits and the physical characteristics of different devices. This makes the layout parameters predicted by the target layout parameter prediction model closer to the true values of the layout parameters, thereby making the layout design more in line with user scenarios and device conditions, optimizing the page layout, providing users with a clear and convenient operation path within a limited space, and improving the convenience of user operation and the efficiency of information acquisition. Attached Figure Description
[0070] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below.
[0071] Figure 1 This is a flowchart illustrating a layout parameter prediction model training method provided in an embodiment of the present invention.
[0072] Figure 2 This is a schematic diagram of the target layout parameter prediction model provided in an embodiment of the present invention;
[0073] Figure 3 This is another flowchart illustrating the layout parameter prediction model training method provided in this embodiment of the invention.
[0074] Figure 4 This is another flowchart illustrating the layout parameter prediction model training method provided in this embodiment of the invention.
[0075] Figure 5 This is another flowchart illustrating the layout parameter prediction model training method provided in this embodiment of the invention.
[0076] Figure 6This is a schematic flowchart of a layout optimization method provided in an embodiment of the present invention;
[0077] Figure 7 This is another flowchart illustrating the layout optimization method provided in this embodiment of the invention;
[0078] Figure 8 This is another flowchart illustrating the layout optimization method provided in this embodiment of the invention;
[0079] Figure 9 This is a schematic diagram of the page layout optimization framework provided in an embodiment of the present invention;
[0080] Figure 10 This is a schematic diagram of the data acquisition process provided in an embodiment of the present invention;
[0081] Figure 11 This is a schematic diagram of the structure of the layout parameter prediction model training device provided in an embodiment of the present invention;
[0082] Figure 12 A schematic diagram of the layout optimization device provided in an embodiment of the present invention;
[0083] Figure 13 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation
[0084] The technical solutions of the present invention will now be described with reference to the accompanying drawings in the embodiments of the present invention.
[0085] This invention provides a method for training a layout parameter prediction model. In one possible embodiment, see [link to relevant documentation]. Figure 1 The methods include:
[0086] Step S101: Obtain the behavior heatmap, service configuration data, terminal physical data, user operation sequence, and true values of layout parameters for the sample page in the sample terminal. The behavior heatmap represents the frequency of interaction between the user and various areas within the sample page during the user's access to the sample page. The service configuration data represents the number and type of services displayed on the sample page. The terminal physical data represents the display parameters of the sample terminal. The user operation sequence represents the temporal pattern of interaction between the user and various areas within the sample page during the user's access to the sample page. Step S102: Input the behavior heatmap, service configuration data, terminal physical data, and user operation sequence into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model. Step S103: Calculate the difference between the predicted layout parameters and the true values of the layout parameters, and adjust the model parameters of the original layout parameter prediction model in the direction of reducing the difference to obtain the target layout parameter prediction model. In this embodiment, the target layout parameter prediction model is trained considering the user's actual interaction habits and the physical characteristics of different devices. This makes the layout parameters predicted by the target layout parameter prediction model closer to the true values of the layout parameters, thereby making the layout design more suitable for the user's usage scenario and device conditions, optimizing the page layout, providing users with a clear and convenient operation path in a limited space, and improving the convenience of user operation and the efficiency of information acquisition.
[0087] The following will explain steps S101-S103:
[0088] In step S101 of this embodiment, the behavioral heatmap is used to characterize the frequency of interaction between the user and various areas within the sample page during the process of accessing the sample page through the sample terminal identified by the terminal physical data. The user's interaction behavior with the sample page includes operations such as clicking and swiping.
[0089] Business configuration data is used to represent the quantity and type of services displayed on the sample page. Specifically, taking the cashier page as an example, the business configuration data may include the number of packages, add-on purchase types, and price tag positions.
[0090] The physical parameters of the sample terminal are used to characterize the display parameters of the sample terminal. Specifically, these include screen size, safe area inset, and system version. The safe area is the region on the screen where content can be safely displayed without being obstructed by inherent device features (such as sensors, cameras, rounded corners, etc.). The safe area inset describes the distance between the safe area and the screen boundary, usually expressed as inner margin values in four directions (top, bottom, left, and right). Different device screen sizes and system versions will affect the display effect of the page and the user's operation.
[0091] User operation sequences are used to characterize the temporal order of user interactions with different areas within a sample page during the user's visit to that page. Specifically, user operation sequences include the sequential sequence of interactions and the time interval sequence of interactions. For example, taking the cashier page as the sample page and the interactions as clicks and swipes, after obtaining the "click event data" and "swipe operation data," the time interval of the interactions can be obtained by calculating the timestamp difference between two adjacent click events. When multiple click events occur, the time interval sequence of interactions can be calculated. This time interval sequence refers to the ordered sequence of time differences between two adjacent clicks by the same user within the cashier page, used to reflect the temporal order of user interactions. For example, if the user's first click is at 10:00:00, the second at 10:00:03, and the third at 10:00:08, then the click interval sequence is [3 seconds, 5 seconds]; if the user only clicks once, the sequence is empty (filled with the default value 0). The interaction speed is calculated by the ratio of "pixel distance of the swipe operation" to "swipe time". For example, if a user swipes 200 pixels in 1 second, the interaction speed is 200 pixels / second.
[0092] It is understandable that when acquiring behavior heatmaps, service configuration data, terminal physical data, and user operation sequences, these data should be acquired within the same time window, meaning the statistical period should be the same. Taking a 5-minute sliding window as an example, acquire the behavior heatmap within 5 minutes and obtain the value of the last service configuration update within that sliding window as the service configuration data (if there are no updates during this period, use the value at the beginning of the window). Acquire terminal physical data and statistically analyze the user operation sequence within 5 minutes.
[0093] In step S102 of this embodiment, the original layout parameter prediction model can be any model that can obtain layout parameters based on behavior heatmaps, service configuration data, terminal physical data, and user operation sequences.
[0094] In step S103 of this embodiment, for some layout parameters, such as the coordinates, width, and height of an element, the difference between the coordinate values, width values, and height values can be used as the difference between the predicted layout parameter and the true value of the layout parameter; for other layout parameters, such as the element category, cross-entropy loss is used as the difference between the predicted layout parameter and the true value of the layout parameter.
[0095] In one possible embodiment, see Figure 2 The target layout parameter prediction model 200 is a three-layer network structure, including a convolutional neural network layer 201, a long short-term memory network layer 202, and a fully connected layer 203.
[0096] See Figure 3 Compared to Figure 1 The example shown, Figure 3 Step S102 is further refined into steps S1021 to S1023. Figure 3 The methods shown include:
[0097] Step S101: Obtain the behavior heatmap, service configuration data, terminal physical data, user operation sequence, and true values of layout parameters for the sample page in the sample terminal. The behavior heatmap represents the frequency of interaction between the user and various areas within the sample page during the user's access to the sample page. The service configuration data represents the number and type of services displayed on the sample page. The terminal physical data represents the display parameters of the sample terminal. The user operation sequence represents the temporal sequence of interaction between the user and various areas within the sample page during the user's access to the sample page. Step S1021: Input the behavior heatmap, service configuration data, and terminal physical data into a convolutional neural network to obtain the spatial features output by the convolutional neural network. Step S1022: Input the user operation sequence into a long short-term memory network to obtain the temporal features output by the long short-term memory network. Step S1023: Input the spatial features and temporal features into a fully connected layer to obtain the layout parameters output by the fully connected layer, which are used as the predicted layout parameters. Step S103: Calculate the difference between the predicted layout parameters and the true values of the layout parameters, and adjust the model parameters of the original layout parameter prediction model in the direction of reducing the difference to obtain the target layout parameter prediction model. In this embodiment, the target layout parameter prediction model integrates convolutional neural networks, long short-term memory networks, and fully connected layers. The convolutional neural network obtains spatial features based on behavioral heatmaps, business configuration data, and terminal physical data. The long short-term memory network captures the patterns of user operations over time in the user operation sequence to obtain temporal features. The fully connected layer is used to obtain predicted layout parameters based on multiple types of features. This model improves the accuracy of page layout parameter prediction, thereby optimizing page layout, enhancing user convenience and experience, and ultimately increasing user satisfaction and conversion rates.
[0098] Because of steps S101, S103 and Figure 1 The example shown is the same, so please refer to [link / reference]. Figure 1 The relevant explanations will not be repeated here; the following text will only address... Figure 3 The detailed steps S1021 to S1023 are explained below:
[0099] In step S1021 of this embodiment, the CNN (Convolutional Neural Network) layer 201, employing a 3×3 convolutional kernel × 16-layer structure, extracts spatial features from the heatmap. CNNs possess spatial feature extraction capabilities, enabling them to learn spatial patterns and features of user interactions from behavioral heatmaps. The behavioral heatmap characterizes the frequency of user interaction with various areas within a sample page during the process of accessing the sample page through the sample terminal identified by the physical data of the sample terminal. It contains rich spatial information, such as the frequency and intensity of user interactions in different areas. Based on the behavioral heatmap, the CNN obtains the spatial patterns and features of user interactions as spatial features. For example, the CNN can identify the distribution patterns of areas frequently clicked by users on the page, and the spatial relationships between different functional areas.
[0100] In step S1022 of this embodiment, the LSTM (Long Short-Term Memory) layer 202 uses a 128-neuron LSTM layer to process temporal operation patterns. LSTM is a special type of recurrent neural network that can effectively process long sequence data, capture temporal dependencies in the data, and is suitable for processing the temporal features of user interaction behavior.
[0101] Because user operation sequences characterize the temporal order of interactions between a user and different areas within a sample page during the user's access to that page, the temporal features derived from these sequences are used to characterize the order, time intervals, and speed of interactive behaviors. For example, the frequency, speed, and sequence of user interactions at different times reflect the user's operating habits and needs. Business features are used to characterize the quantity and type of business activities.
[0102] In step S1023 of this embodiment, the fully connected layer 203 integrates and maps the features (i.e., spatial features and temporal features) extracted by the CNN layer and LSTM layer, and finally outputs 6-dimensional layout parameters related to the page layout. Specifically, the spatial features and temporal features are concatenated into a 256-dimensional vector and input into the fully connected layer.
[0103] Taking the sample page as the cashier page as an example, the 6-dimensional layout parameters include the width ratio of the package card, the folding threshold of the add-on purchase, the horizontal offset of the payment button, the scaling factor of the label font, the sliding damping factor, and the element spacing ratio, etc.
[0104] In another possible embodiment, the temporal features also include linguistic features, which characterize the type and length of text used on the user's terminal. Different languages have different text lengths and layouts, which can affect page layout. Adding linguistic features allows the model to better adapt to the layout requirements of different languages.
[0105] When temporal features also include linguistic features, the data input to the convolutional neural network also includes multilingual data. Multilingual data enables the model to learn user interaction behaviors and layout preferences in different languages, improving the model's prediction accuracy in different language environments. This training data will serve as the model's input.
[0106] In one possible embodiment, see Figure 4 Compared to Figure 3 The example shown, Figure 3 Step S103 is further refined into steps S1031 and S1032. Figure 4 The methods shown include:
[0107] Step S101: Obtain the behavior heatmap, service configuration data, terminal physical data, user operation sequence, and layout parameter ground truth of the sample page in the sample terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the sample page during the user's access to the sample page; the service configuration data is used to characterize the number and type of services displayed on the sample page; the terminal physical data is used to characterize the display parameters of the sample terminal; the user operation sequence is used to characterize the interaction time sequence pattern between the user and each area within the sample page during the user's access to the sample page; Step S1021: Input the behavior heatmap, service configuration data, and terminal physical data into a convolutional neural network to obtain the convolutional neural network... The spatial features output by the convolutional neural network are analyzed. Step S1022 involves inputting the user operation sequence into the Long Short-Term Memory (LSTM) network to obtain the temporal features output by the LSM network. Step S1023 involves inputting the spatial and temporal features into the fully connected layer to obtain the layout parameters output by the fully connected layer, which are used as the predicted layout parameters. Step S1031 involves calculating the difference between the predicted layout parameters and the true values of the layout parameters. Based on the difference, the adjustment method for the model parameters of the original layout parameter prediction model is calculated layer by layer from the fully connected layer to the convolutional neural network. Step S1032 involves adjusting the model parameters of the original layout parameter prediction model according to the adjustment method to obtain the target layout parameter prediction model. This embodiment reduces parameter trial and error, lowers computational power consumption and optimization costs, and improves the efficiency of model parameter adjustment. Adjusting model parameters avoids blind optimization, effectively improving the accuracy of layout parameter prediction, reducing errors, and making the model output more closely match actual needs.
[0108] Because steps S101, S1021, S1022, and S1023 are related to... Figure 3 The example shown is the same, so please refer to [link / reference]. Figure 3 The relevant explanations will not be repeated here; the following text will only address... Figure 4 The detailed steps S1031 to S1032 are explained below:
[0109] In step S1031 of this embodiment, after calculating the difference, the adjustment method of the model parameters of the original layout parameter prediction model is calculated layer by layer from the fully connected layer to the convolutional neural network using the backpropagation algorithm. For example, it is calculated that the weight of a certain convolutional kernel in the convolutional neural network is reduced by 0.001.
[0110] In step S1032 of this embodiment, the model parameters of the original layout parameter prediction model are adjusted according to the adjustment method calculated in step S1031 to obtain the target layout parameter prediction model.
[0111] In one possible embodiment, see Figure 5 Compared to Figure 1 The example shown, Figure 5 Step S103 is further refined into steps S1033 to S1035. Figure 5 The methods shown include:
[0112] Step S101: Obtain the behavior heatmap, service configuration data, terminal physical data, user operation sequence, and layout parameter truth values of the sample page in the sample terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the sample page during the user's access to the sample page; the service configuration data is used to characterize the number and type of services displayed on the sample page; the terminal physical data is used to characterize the display screen parameters of the sample terminal; the user operation sequence is used to characterize the interaction timing pattern between the user and each area within the sample page during the user's access to the sample page; Step S102: Combine the behavior heatmap, service configuration data, terminal physical data, and layout parameter truth values of the sample page with the actual values of the layout parameters of the sample page. Data and user operation sequences are input into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model; in step S1033, the mean square error between the predicted layout parameters and the true values of the layout parameters is calculated as the first difference; in step S1034, the overlap between the predicted layout parameters and the true values of the layout parameters is calculated as the second difference; in step S1035, the first difference and the second difference are weighted and summed to obtain the difference between the predicted layout parameters and the true values of the layout parameters. The model parameters of the original layout parameter prediction model are adjusted in the direction of reducing the difference to obtain the target layout parameter prediction model. In this embodiment, by weighted fusion of "numerical deviation and spatial matching deviation", a comprehensive and accurate quantification of the layout parameter prediction deviation is achieved. This difference calculation method makes the model parameter adjustment more targeted, improving the practicality and iterative efficiency of the target layout parameter prediction model.
[0113] Because of steps S101, S102 and Figure 1 The example shown is the same, so please refer to [link / reference]. Figure 1 The relevant explanations will not be repeated here; the following text will only address... Figure 5 The detailed steps S1033 to S1035 are explained below:
[0114] In step S1033 of this embodiment, the mean square error (MSE) between the predicted layout parameters and the true values of the layout parameters is calculated. That is, the numerical difference between the predicted layout parameters and the true values of the layout parameters is calculated. For example, if the actual package width ratio is 0.3 and the predicted value is 0.32, the mean square error is a deviation of 0.02.
[0115] In step S1034 of this embodiment, the overlap between the predicted layout parameters and the true layout parameters (Dice coefficient) is calculated. The Dice coefficient is an index used to measure the similarity between two sets. That is, the degree of overlap between the predicted layout parameters and the true layout parameters is calculated. For example, the higher the overlap between the predicted payment button position and the true payment button position, the closer the Dice coefficient is to 1, the smaller the loss, that is, the smaller the difference.
[0116] In steps S1033 and S1034 of this embodiment, the loss is calculated jointly using "MSE + Dice coefficient" to avoid the limitations of a single loss.
[0117] In step S1035 of this embodiment, the first difference and the second difference are weighted and summed to obtain the difference between the predicted layout parameters and the true values of the layout parameters. That is, the mean square error and overlap between the predicted layout parameters and the true values of the layout parameters are weighted and summed. For example, the difference = 0.6 × MSE + 0.4 × Dice coefficient. Through weighted balancing, the accuracy of the predicted layout parameters is high, while ensuring that the layout is reasonable.
[0118] In one possible implementation, during training, the model is trained using the Adam (Adaptive Moment Estimation) optimizer with a learning rate of 0.001. The Adam optimizer is an adaptive moment estimation optimization algorithm that adaptively adjusts the learning rate based on historical gradient information for each parameter.
[0119] The above training process involves training the model on an offline dataset, with 100 training epochs. As the number of training epochs increases, the difference between the predicted layout parameters and the true layout parameters gradually decreases, and the prediction accuracy gradually improves. After 100 epochs of training, the prediction error rate of the layout parameters output by the layout parameter prediction model can be less than 5%, meeting the needs of practical applications.
[0120] During training, the model's training process needs to be monitored in real time. This can be achieved by plotting loss function curves and accuracy curves to observe the model's training status and convergence. If overfitting or underfitting is observed during training, the model's structure and parameters need to be adjusted promptly. For example, if overfitting occurs, methods such as adding regularization terms, reducing model complexity, or increasing training data can be used to alleviate it; if underfitting occurs, methods such as increasing model complexity, adjusting the learning rate, or optimizing the model structure can be tried to improve it.
[0121] In one possible implementation, to further improve the accuracy of the target layout parameter prediction model, the model can be optimized based on user ratings of historical layout parameters. Specifically, a monitoring tool can be used to monitor the crash rate (target <0.01%), collect user feedback (such as layout abruptness ratings), iterate model parameters weekly, and continuously optimize the layout effect. The monitoring tool can monitor application crashes in real time, promptly identify and fix problems. Collecting user feedback allows understanding user satisfaction with the layout optimization method and suggestions for improvement. Based on the feedback results, the model parameters can be iterated to continuously improve the layout optimization effect and user experience.
[0122] In another possible embodiment, a phased grayscale strategy can be used to iteratively optimize the layout parameter prediction model, which includes three phases: an internal testing phase, a beta testing phase, and a full pre-validation phase (i.e., the aforementioned optimization based on user ratings).
[0123] The internal testing phase involves only 0.1% of users and conducts initial testing in an internal environment to verify the basic functionality and stability of the target layout parameter prediction model. The beta testing phase involves 1% of users to expand the testing scope, collect feedback and issues from more users, and further optimize and adjust the target layout parameter prediction model. The full-scale pre-validation phase involves 10% of users to conduct testing with a larger user base, ensuring that the target layout parameter prediction model functions correctly in various user scenarios.
[0124] To deploy a trained model to a user terminal, the trained Keras model needs to be converted to TFLite format. Keras model is a broad concept; the aforementioned layout parameter prediction model is a specific type of Keras model. TFLite is a lightweight model format for TensorFlow, a toolkit for deploying deep learning models to user terminals. It is optimized for mobile and embedded devices, reducing model size and computational resource consumption. TensorFlow is an open-source learning framework, and by using the model conversion tools provided by TensorFlow, Keras models can be converted to TFLite format, that is, layout parameter prediction models can be converted to TFLite format.
[0125] To further reduce model size, layout parameter prediction models can be quantized. For example, post-training quantization tools can be used to compress weights from 32-bit floating-point numbers to 8-bit integers. Model quantization reduces the storage requirements and computational complexity of the model by decreasing the number of bits in the weights, thereby improving the model's running speed on mobile devices. After quantization, the model size is reduced, which reduces the storage space occupied by the model on mobile devices. At the same time, model quantization can better adapt to the resource constraints of user terminals while maintaining model performance, enabling the model to run efficiently on user terminals with limited resources.
[0126] After explaining the aforementioned layout parameter prediction model, the layout optimization method applying the aforementioned target layout parameter prediction model will be explained below. (See [link to relevant documentation]). Figure 6 The methods include:
[0127] Step S601: Obtain the behavior heatmap, service configuration data, terminal physical data, and user operation sequence of the target page in the target terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the target page during the user's access to the target page; the service configuration data is used to characterize the number and type of services displayed on the target page; the terminal physical data is used to characterize the display screen parameters of the target terminal; and the user operation sequence is used to characterize the interaction timing pattern between the user and each area within the target page during the user's access to the target page; Step S602: Input the behavior heatmap, service configuration data, terminal physical data, and user operation sequence into the target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using any of the aforementioned layout parameter prediction model training methods; Step S603: Render and display the target page according to the predicted layout parameters. In this embodiment, the target layout parameter prediction model, trained considering the user's actual interaction habits and the physical characteristics of different devices, is used to predict the layout parameters. Since the layout parameters predicted by the target layout parameter prediction model are closer to the true values of the layout parameters, the layout design is more in line with the user's usage scenario and device conditions, optimizes the page layout, provides users with a clear and convenient operation path in a limited space, and improves the convenience of user operation and the efficiency of information acquisition.
[0128] The following will explain the aforementioned steps S601-S603:
[0129] For details regarding steps S601 and S602, please refer to the aforementioned text. Figure 1 The relevant explanations for steps S101 and S102 will not be repeated here. The behavioral heatmap, service configuration data, terminal physical data, and user operation sequence obtained in step S601 are all obtained during the interaction between the user and the target page on the target terminal.
[0130] In step S603 of this embodiment, taking the cashier page as the target page as an example, the predicted layout parameters are a six-dimensional layout parameter vector, including the width ratio of the package deal card, the add-on purchase folding threshold, the horizontal offset of the payment button, the scaling factor of the label font, the sliding damping factor, and the element spacing ratio. Based on this, the width of the package deal card in the re-rendered cashier page is set according to the width ratio of the package deal card; the add-on purchase price list is displayed folded according to the add-on purchase folding threshold, or expanded; the position of the controls is set according to the horizontal offset of the payment button, the sliding damping factor, and the element spacing ratio; the size and position of the information are set according to the scaling factor of the label font and the element spacing ratio.
[0131] In one possible embodiment, see Figure 7 Compared to Figure 6 The example shown, Figure 7 Step S602 is further refined into steps S6021 and S6022. Figure 7 The methods shown include:
[0132] Step S601: Obtain the behavior heatmap, service configuration data, terminal physical data, and user operation sequence of the target page in the target terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the target page during the user's access to the target page; the service configuration data is used to characterize the number and type of services displayed on the target page; the terminal physical data is used to characterize the display screen parameters of the target terminal; the user operation sequence is used to characterize the interaction timing pattern between the user and each area within the target page during the user's access to the target page; Step S6021: In response to new user interaction behavior with the target page, the target layout parameter prediction model uses the first prediction method to... Based on the behavior heatmap, business configuration data, terminal physical data, and user operation sequence, the predicted layout parameters of the target page are predicted. In step S6022, in response to reaching a preset update time, the target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, business configuration data, terminal physical data, and user operation sequence. The algorithm complexity of the second prediction method is lower than that of the first prediction method. The target layout parameter prediction model is trained in advance using any of the aforementioned layout parameter prediction model training methods. In step S603, the target page is rendered and displayed based on the predicted layout parameters. This embodiment utilizes high-accuracy and low-complexity prediction methods for both real-time user interaction and timed updates, ensuring the accuracy of page layout prediction while reducing system computational overhead, balancing interaction optimization efficiency and resource consumption, and improving the overall performance of page layout adaptation.
[0133] Because of steps S601, S603 and Figure 6 The example shown is the same, so please refer to [link / reference]. Figure 6 The relevant explanations will not be repeated here; the following text will only address... Figure 7 The detailed steps S6021 and S6022 are explained below:
[0134] In step S6021 of this embodiment, the layout parameter prediction is implemented through event-driven operation, which is implemented through a real-time inference tool. Specifically, the user terminal integrates a real-time inference tool, which triggers model prediction when it detects new interactive behavior operations between the user and the cashier page, such as swiping, clicking, or rotating the terminal device.
[0135] In step S6022 of this embodiment, the layout parameter prediction is achieved through timing-driven operation. Timing-driven operation is achieved by pre-setting a preset update time, which can be set by professionals based on their experience or industry regulations. If it is necessary to reduce computational resource consumption, fewer update times can be set within a time period; if computational resource consumption is not a concern, more update times can be set within a time period to increase the model prediction frequency.
[0136] The preset update time can be set by professional technicians based on their work experience or industry standards, and no specific restrictions are made here.
[0137] The first prediction method uses a high-complexity algorithm, which combines new interactive behaviors with in-depth analysis of four types of data to adapt to the latest user habits. The second prediction method uses a low-complexity algorithm, which uses simple statistics and rule matching to quickly output a layout that conforms to historical patterns when there are no new interactions.
[0138] For example, the first prediction method is highly complex and accurate. It uses CNN to analyze heatmaps to locate the optimal position for "size selection", uses LSTM to capture changes in the timing of operations to move its modules up, integrates various types of data to optimize the size, and outputs layout parameters that adapt to the new interaction.
[0139] The second prediction method is low-complexity and high-speed. It can be a traditional statistical and rule-matching method. It counts the historical high-frequency click areas, reuses the historical optimal layout, and after simple verification that the data has not changed, it fine-tunes the spacing to adapt to the terminal and quickly outputs layout parameters that conform to historical patterns.
[0140] In one possible embodiment, see Figure 8 Compared to Figure 6 The example shown, Figure 8 Step S602 is further refined into steps S6023 and S6024. Figure 8 The methods shown include:
[0141] Step S601: Obtain the behavior heatmap, service configuration data, terminal physical data, and user operation sequence of the target page in the target terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the target page during the user's access to the target page; the service configuration data is used to characterize the number and type of services displayed on the target page; the terminal physical data is used to characterize the display parameters of the target terminal; and the user operation sequence is used to characterize the interaction timing pattern between the user and each area within the target page during the user's access to the target page; Step S6023: In response to reaching the preset update time, and receiving a new interaction behavior within the waiting time before reaching the preset update time, the target layout parameter prediction model uses the first prediction method based on the behavior heatmap. The target layout parameter prediction model uses a second prediction method based on the behavior heatmap, business configuration data, terminal physical data, and user operation sequence to predict the predicted layout parameters of the target page; or, in step S6024, in response to reaching a preset update time, and if no new interactive behavior is received within the waiting period before reaching the preset update time, the target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, business configuration data, terminal physical data, and user operation sequence; wherein, the algorithm complexity of the second prediction method is lower than that of the first prediction method; wherein, the target layout parameter prediction model is trained in advance using any of the aforementioned layout parameter prediction model training methods; in step S603, the target page is rendered and displayed according to the predicted layout parameters. In this embodiment, the prediction method used in the model prediction process is determined by whether a new interactive behavior is received at the preset update time. By selecting prediction methods of different complexities according to different situations, computing resources are reasonably allocated, avoiding resource waste and excessive system load, thus improving overall operating efficiency.
[0142] For details on steps S6023 and S6024, please refer to [link / reference]. Figure 7 The relevant explanations will not be repeated here.
[0143] In one possible embodiment, the method further includes:
[0144] If, before re-rendering and displaying the target page based on the predicted layout parameters, it is detected that the predicted layout parameters meet preset abnormal conditions, and / or, re-rendering is not completed within a preset time period, then the target page is re-rendered and displayed based on the preset target layout parameters for the target terminal. Using this embodiment, a double-insurance rollback strategy is pre-set, including rollback for model output anomalies and rollback for page rendering time consumption, resulting in better page optimization and higher efficiency.
[0145] The target layout parameters include historically optimal parameters and simplified layout parameters. When the aforementioned fallback mechanism is triggered, either layout parameter can be selected to re-render the checkout page. Historically optimal parameters were determined for the user's terminal during previous testing and optimization, ensuring the basic rationality and stability of the page layout. Simplified layout reduces the computational load of page rendering, improves rendering speed, and avoids a decline in user experience due to excessively long rendering times.
[0146] The preset exception conditions and preset durations can be set by professionals based on their work experience or industry regulations. For example, preset exception conditions could include the width ratio of a package card exceeding a preset threshold, the folding threshold for add-on purchases being significantly greater than the number of add-on prices that can be displayed on the checkout page, and the horizontal offset of the payment button exceeding the device size.
[0147] The aforementioned fallback logic uses a watchdog to monitor main thread performance and ensure that the user experience is not degraded. The watchdog can monitor the main thread's running status in real time, and when it detects a main thread lag, it promptly triggers the fallback mechanism to ensure page smoothness and responsiveness.
[0148] The following section will use the optimization of a half-screen POS page as an example to explain the system framework of the page optimization system used in the layout optimization process. (See [link to documentation]). Figure 9 The page layout optimization framework includes a data acquisition layer 901, a feature engineering layer 902, a model inference layer 903, a rendering control layer 904, and an application interaction layer 905.
[0149] The following will combine Figure 9 The layout optimization process is explained in detail for each layer and its function:
[0150] The data acquisition layer 901 is used to acquire the aforementioned user interaction behavior data, terminal physical parameters, and business configuration data in real time, providing basic data for subsequent analysis and processing. Specifically, the various steps performed by the data acquisition layer 901 can be found in [link to relevant documentation]. Figure 10 The methods include:
[0151] S1001, Initialize the data acquisition component; specifically, develop the data acquisition component using the data tracking framework.
[0152] S1002, Register click event listener;
[0153] S1003, Obtain terminal physical parameters; specifically, collect terminal device physical parameters based on terminal device information.
[0154] S1004, detect user operation; if user operation is detected, execute step S1005; specifically, collect user interaction behavior data based on user operation.
[0155] S1005, capture click coordinates and time; specifically, user interaction behavior data can be obtained by capturing click operations.
[0156] S1006, collect service configuration data; specifically, collect service configuration data based on package add-on purchase data.
[0157] Business configuration data includes information such as the number of data collection packages, add-on purchase types, and price tag placement. Business configuration affects the page's content display and layout structure.
[0158] S1007, Serialization of data; specifically, after collecting user interaction behavior data, device physical parameters, and business configuration data, the collected data is serialized using a serialization protocol.
[0159] S1008, sent to the edge node; specifically, after the collected data is serialized using a serialization protocol, it is transmitted to the edge computing node via a long-lived Socket connection. The long-lived Socket connection ensures real-time data transmission, with the acquisition latency controlled within 50ms, ensuring the timeliness and accuracy of the data.
[0160] After obtaining user interaction behavior data, terminal physical parameters, and business configuration data through the above steps and sending them to the edge node, a click heatmap (i.e., the aforementioned behavior heatmap) is generated based on the user interaction behavior data. For example, OpenCV can be used to perform Gaussian blur processing on the click coordinate data. OpenCV is an open-source computer vision and machine learning software library. Gaussian blur can smooth the click coordinate data, reduce noise interference, and make the behavior heatmap more accurately reflect the user's interaction hotspots. The pixels of the behavior heatmap are determined based on the user terminal's screen size. Specifically, a "device aspect ratio mapping" strategy is adopted. First, the actual pixel size of the current device's half-screen checkout is obtained as the target user terminal size. The click coordinates are scaled according to the ratio of "target user terminal size / reference user terminal size" to generate a heatmap that matches the current user terminal's half-screen size, ensuring that the hotspot area positions are aligned with the actual page elements without stretching or offset.
[0161] For example, if a user terminal has a half-screen size of 3.05 inches, a 200×375 pixel behavioral heatmap can be generated, which can clearly show the frequency of user interaction in different areas.
[0162] After obtaining the behavior heatmap, hotspot regions are extracted through threshold segmentation. This threshold can be set by professionals based on their experience or industry standards. Threshold segmentation separates areas with high interaction frequency from the heatmap. The centroid coordinates and coverage area of the hotspots are then calculated. The centroid coordinates represent the concentrated location of user interaction, and the coverage area reflects the degree of user attention to that area. These metrics can provide a reference for subsequent layout parameter adjustments.
[0163] Feature engineering layer 902 is used for feature extraction and data cleaning. Specifically, the target layout parameter prediction model also operates on feature engineering layer 902, inputting the behavior heatmap obtained from user interaction behavior data acquired by data acquisition layer 901, the terminal physical parameters acquired by data acquisition layer 901, and business configuration data into the convolutional neural network in the target layout parameter prediction model to obtain the spatial features output by the convolutional neural network.
[0164] User operation sequence data obtained based on user interaction behavior data is input into the long short-term memory network in the target layout parameter prediction model to obtain the temporal features of the long short-term memory network output.
[0165] The spatial and temporal features comprise a total of 256 dimensions. To reduce computational complexity and improve model training efficiency, the feature dimensions can be reduced. For example, PCA can be used to reduce the 256-dimensional features to 64 dimensions.
[0166] After dimensionality reduction to 64 dimensions, spliced features are generated using a sliding window to provide input for the fully connected layer in the target layout parameter prediction model. During this process, the spliced features can be cleaned and preprocessed to remove noise and outliers, ensuring data quality.
[0167] Model inference layer 903 is used to predict and generate layout parameters using the layout parameter prediction model. Model inference layer 903 includes a TensorFlowLite engine and a target layout parameter prediction model. The TensorFlowLite engine runs the target layout parameter prediction model on the user terminal. The target layout parameter prediction model predicts the page layout parameters based on the input concatenation features.
[0168] Taking the cashier page as an example, as mentioned earlier, the predicted layout parameters are a six-dimensional layout parameter vector, including the width ratio of the package card, the folding threshold of the add-on purchase, the horizontal offset of the payment button, the scaling factor of the label font, the sliding damping factor, and the element spacing ratio.
[0169] The parameter range is determined through Bayesian optimization. For example, the folding threshold ∈ [1, 4] and the offset ∈ [-10%, 10%]). Bayesian optimization is a parameter optimization method that can find the optimal parameter range with fewer experiments, ensuring that the layout adjustment is within the visual comfort zone and avoiding page layout inconsistencies caused by excessive parameter adjustments.
[0170] In addition, during the page optimization process, in order to further reduce the power consumption of the user terminal during the page optimization process, a three-level power consumption optimization strategy can be preset, including idle state optimization (that is, the optimization process described in the aforementioned steps S6022 and S6024), low power mode optimization, and background state optimization.
[0171] The idle state optimization reduces the model inference frequency to 1Hz during idle periods (i.e., the state where no new interaction is received within the aforementioned waiting period before the preset update time). Reducing the model inference frequency when the user is idle can reduce unnecessary consumption of computing resources and lower device power consumption.
[0172] In addition, the low power mode is optimized to disable GPU acceleration and switch to lightweight CPU rendering. While GPU acceleration can improve rendering efficiency, it also consumes more power. Disabling GPU acceleration in low power mode can extend the device's battery life.
[0173] The background state optimization involves pausing all data collection while the application is in the background. Pausing data collection when the application is in the background reduces data transmission and processing, thus lowering device power consumption.
[0174] The aforementioned power consumption monitoring can be performed via the PowerMonitor API to ensure that the optimization scheme has a minimal impact on battery life. The PowerMonitor API can monitor the device's power consumption in real time and adjust the energy consumption optimization strategy based on the monitoring results, ensuring that while achieving layout optimization, it does not have an excessive impact on the device's battery life.
[0175] The rendering control layer 904 is used to render and display the page based on the layout parameters. Specifically, it generates page rendering instructions based on the layout parameters.
[0176] Before rendering the page, the predicted layout parameters are parsed to ensure they conform to the page layout rules and constraints. Specifically, a constraint mapping tool is developed to convert layout parameters into layout constraints. For example, layout parameters can be converted into Auto Layout constraints. Auto Layout is a commonly used layout technique in development that can automatically adjust the position and size of page elements according to constraints, achieving flexible page layout.
[0177] Taking the target page as the cashier page as an example, the specific constraints are implemented as follows:
[0178] The width of the package card is set according to the package card width ratio. For example, the AspectRatioConstraint can be used to adapt the width to ensure that the package card maintains a suitable width-to-height ratio on different user terminals.
[0179] The display of the add-on price list is dynamically adjusted based on the add-on price collapse threshold, enabling either a collapsed or expanded display of the add-on price list. For example, this can be achieved using the sectionHeader or SectionFooter of a UICollectionView. UICollectionView is a data display method.
[0180] The position of a control is set based on its horizontal offset, sliding damping coefficient, and element spacing ratio. For example, taking a payment button as an example, the position is adjusted using NSLayoutYAxisAnchor, placing the button in a suitable position based on its horizontal offset for easy user operation. NSLayoutYAxisAnchor is a vertical layout constraint.
[0181] The size and position of the information are set according to the label font scaling factor and the element spacing ratio. This information includes text, labels, numbers, and other elements on the page.
[0182] The above constraint updates are performed using batch transaction commits to avoid page flickering. Batch committing constraint updates reduces the number of page repaints, improves page responsiveness and stability, and prevents users from experiencing noticeable lag or flickering during layout adjustments.
[0183] The rendering control layer 904 contains a rendering engine that can convert layout parameters into GPU shader instructions. Shaders are programs that run on the GPU and can perform various transformations and processes on graphics. By converting layout parameters into shader instructions, dynamic layout and rendering of page elements can be achieved.
[0184] During the rendering process, parallel computing units (Compute Pipeline) are used to batch process the geometric transformations of each element on the page, including translation, scaling and other changes, thereby improving rendering efficiency and making page layout adjustments smoother.
[0185] During this process, texture mapping can be used to visually overlay behavioral heatmaps with the layout. Texture mapping can apply heatmaps as texture maps to the page, allowing users to intuitively see the relationship between their interactive hotspots and the page layout, making it easier for users to understand and operate.
[0186] The application interaction layer 905 is used to interface with user terminal page components, enabling user interaction with the page. Specifically, it receives user interaction operations and transmits feedback information to the system for subsequent optimization and adjustments. Taking the cashier page as an example, the half-screen cashier page serves as the final page display. Based on the instructions generated by the rendering control layer 904, it presents an optimized page layout, including the reasonable arrangement of elements such as meal cards, add-on purchase lists, controls, and information.
[0187] Through this five-layer architecture, the system can collect and process data in real time, use machine learning models to predict the optimal page layout parameters, and efficiently render them onto the user's page, thereby improving user experience and operational efficiency.
[0188] In practical applications, to achieve better page optimization results, an A / B testing traffic splitting framework can be used. For example, Firebase Remote Config can be used to build a traffic splitting system, dividing users into four groups: a fixed layout control group, a convolutional neural network model only group, a long short-term memory network model only group, and a hybrid model experimental group.
[0189] The fixed-layout control group used a traditional fixed-layout method as a baseline. The convolutional neural network (CNN) model-only group used only the aforementioned CNN model for layout parameter prediction, verifying the effectiveness of the CNN model in layout optimization. The long short-term memory (LSTM) network model-only group used only the LSM network model for layout parameter prediction, verifying the effectiveness of the LSM network model in layout optimization. The hybrid model experimental group used a layout parameter prediction model for layout parameter prediction, combining the advantages of both models to verify the effectiveness of the hybrid model.
[0190] By tracking click-through rates, swipe counts, and conversion rates for each group, significance is calculated in real time, and the traffic ratio for the experimental groups is dynamically adjusted. A / B testing can objectively evaluate the effectiveness of different layout schemes, and the traffic ratio can be dynamically adjusted based on the test results, allowing more users to experience the optimal layout scheme and improving the efficiency and effectiveness of layout optimization.
[0191] To verify the effectiveness of the layout scheme, multiple verification metrics can be designed, including the click-through rate (CTR) of core buttons, the number of swipe operations, and screen utilization. The CTR of core buttons includes the click-through rate of the payment or activation buttons, reflecting user engagement with core operations. The number of swipe operations is the number of swipes per minute, reflecting the frequency of user interaction with the page. Screen utilization is the percentage of effective information visible on the first screen, measuring the efficiency of page information display and the ease with which users can access information. Verification test cases can be written using the XCTest framework to simulate different user terminal sizes and business scenarios to verify the layout's adaptability.
[0192] Corresponding to the aforementioned layout parameter prediction model training method, this embodiment of the invention also provides a layout parameter prediction model training device, see [link to relevant documentation]. Figure 11 The device includes:
[0193] The first acquisition module 1101 is used to acquire the behavior heatmap, service configuration data, terminal physical data, user operation sequence, and layout parameter true values of the sample page in the sample terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the sample page during the user's access to the sample page; the service configuration data is used to characterize the number and type of services displayed on the sample page; the terminal physical data is used to characterize the display screen parameters of the sample terminal; and the user operation sequence is used to characterize the interaction timing pattern between the user and each area within the sample page during the user's access to the sample page; the first prediction module 1102 is used to input the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model; and the parameter adjustment module 1103 is used to calculate the difference between the predicted layout parameters and the layout parameter true values, and adjust the model parameters of the original layout parameter prediction model in the direction of reducing the difference to obtain the target layout parameter prediction model.
[0194] In one possible implementation, the original layout parameter prediction model includes a convolutional neural network, a long short-term memory network, and a fully connected layer; the first prediction module includes: a first prediction submodule, used to input the behavior heatmap, the service configuration data, and the terminal physical data into the convolutional neural network to obtain the spatial features output by the convolutional neural network; a second prediction submodule, used to input the user operation sequence into the long short-term memory network to obtain the temporal features output by the long short-term memory network; and a third prediction submodule, used to input the spatial features and the temporal features into the fully connected layer to obtain the layout parameters output by the fully connected layer, which are used as the predicted layout parameters.
[0195] In one possible implementation, the parameter adjustment module includes: an adjustment first submodule, used to calculate the adjustment method of the model parameters of the original layout parameter prediction model layer by layer from the fully connected layer to the convolutional neural network according to the difference; and an adjustment second submodule, used to adjust the model parameters of the original layout parameter prediction model according to the adjustment method to obtain the target layout parameter prediction model.
[0196] In one possible implementation, the parameter adjustment module includes: a third adjustment submodule for calculating the mean square error between the predicted layout parameter and the true value of the layout parameter as a first difference; a fourth adjustment submodule for calculating the overlap between the predicted layout parameter and the true value of the layout parameter as a second difference; and a fifth adjustment submodule for performing a weighted summation of the first difference and the second difference to obtain the difference between the predicted layout parameter and the true value of the layout parameter.
[0197] Corresponding to the aforementioned layout optimization method, this embodiment of the invention also provides a layout optimization device, see [link to relevant documentation]. Figure 12 The device includes:
[0198] The second acquisition module 1201 is used to acquire a behavior heatmap, service configuration data, terminal physical data, and user operation sequence of a target page in a target terminal; wherein, the behavior heatmap is used to characterize the interaction frequency between the user and each area within the target page during the user's access to the target page; the service configuration data is used to characterize the number and type of services displayed on the target page; the terminal physical data is used to characterize the display parameters of the target terminal; and the user operation sequence is used to characterize the interaction timing pattern between the user and each area within the target page during the user's access to the target page; the second prediction module 1202 is used to input the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into a target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using any of the aforementioned layout parameter prediction model training methods; and the first optimization module 1203 is used to render and display the target page according to the predicted layout parameters.
[0199] In one possible implementation, the second prediction module includes: a fourth prediction submodule, configured to predict the predicted layout parameters of the target page based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence in response to a new interaction behavior between the user and the target page; and a fifth prediction submodule, configured to predict the predicted layout parameters of the target page based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence in response to reaching a preset update time; wherein the algorithm complexity of the second prediction method is lower than that of the first prediction method.
[0200] In one possible implementation, the second prediction module includes: a sixth prediction submodule, configured to, in response to reaching a preset update time and receiving a new interactive behavior within a waiting period before reaching the preset update time, predict the predicted layout parameters of the target page using a first prediction method based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence; or, a seventh prediction submodule, configured to, in response to reaching the preset update time and not receiving a new interactive behavior within a waiting period before reaching the preset update time, predict the predicted layout parameters of the target page using a second prediction method based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence; wherein the algorithm complexity of the second prediction method is lower than that of the first prediction method.
[0201] In one possible implementation, the apparatus further includes: a second optimization module, configured to re-render and display the cashier page according to the target layout parameters preset for the target terminal if it is detected that the predicted layout parameters meet preset abnormal conditions before re-rendering and displaying the target page according to the predicted layout parameters, and / or the re-rendering is not completed within a preset time period.
[0202] This invention also provides an electronic device, such as... Figure 13 As shown, it includes a processor 1301, a communication interface 1302, a memory 1303, and a communication bus 1304. The processor 1301, the communication interface 1302, and the memory 1303 communicate with each other through the communication bus 1304.
[0203] Memory 1303 is used to store computer programs;
[0204] When processor 1301 executes a program stored in memory 1303, it performs the following steps:
[0205] The system acquires a behavioral heatmap, service configuration data, terminal physical data, user operation sequence, and layout parameter ground truth values for a sample page on a sample terminal. The behavioral heatmap characterizes the frequency of user interaction with different areas of the sample page during access. The service configuration data characterizes the number and type of services displayed on the sample page. The terminal physical data characterizes the display parameters of the sample terminal. The user operation sequence characterizes the temporal pattern of user interaction with different areas of the sample page during access.
[0206] The behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence are input into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model.
[0207] The difference between the predicted layout parameters and the true values of the layout parameters is calculated, and the model parameters of the original layout parameter prediction model are adjusted in the direction of reducing the difference to obtain the target layout parameter prediction model.
[0208] or,
[0209] The system acquires a behavior heatmap, service configuration data, terminal physical data, and user operation sequence for a target page on a target terminal. The behavior heatmap represents the frequency of interaction between the user and various areas within the target page during the user's access to the target page. The service configuration data represents the number and type of services displayed on the target page. The terminal physical data represents the display parameters of the target terminal. The user operation sequence represents the temporal pattern of interaction between the user and various areas within the target page during the user's access to the target page.
[0210] The behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence are input into the target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using any of the steps described in the first aspect;
[0211] The target page is rendered and displayed based on the predicted layout parameters.
[0212] The communication bus mentioned above can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.
[0213] The communication interface is used for communication between the aforementioned terminal and other devices.
[0214] The memory may include random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.
[0215] The processors mentioned above can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.
[0216] In another embodiment of the present invention, a computer-readable storage medium is also provided, wherein a computer program is stored in the computer-readable storage medium, and when the computer program is executed by a processor, it implements the layout parameter prediction model training method or layout optimization method described in any of the above embodiments.
[0217] In another embodiment of the present invention, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to execute any of the layout parameter prediction model training methods or layout optimization methods described in the above embodiments.
[0218] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state disk (SSD)).
[0219] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0220] The various embodiments in this specification are described in a related manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the system embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the method embodiments.
[0221] The above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.
Claims
1. A method for training a layout parameter prediction model, characterized in that, The method includes: The system acquires a behavioral heatmap, service configuration data, terminal physical data, user operation sequence, and layout parameter ground truth values for a sample page on a sample terminal. The behavioral heatmap characterizes the frequency of user interaction with different areas of the sample page during access. The service configuration data characterizes the number and type of services displayed on the sample page. The terminal physical data characterizes the display parameters of the sample terminal. The user operation sequence characterizes the temporal pattern of user interaction with different areas of the sample page during access. The behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence are input into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model. The difference between the predicted layout parameters and the true values of the layout parameters is calculated, and the model parameters of the original layout parameter prediction model are adjusted in the direction of reducing the difference to obtain the target layout parameter prediction model.
2. The method according to claim 1, characterized in that, The original layout parameter prediction model includes a convolutional neural network, a long short-term memory network, and a fully connected layer; The step of inputting the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the original layout parameter prediction model to obtain the predicted layout parameters output by the original layout parameter prediction model includes: The behavior heatmap, the service configuration data, and the terminal physical data are input into the convolutional neural network to obtain the spatial features output by the convolutional neural network. The user operation sequence is input into the Long Short-Term Memory network to obtain the temporal features output by the Long Short-Term Memory network; The spatial features and the temporal features are input into the fully connected layer to obtain the layout parameters output by the fully connected layer, which are used as the predicted layout parameters.
3. The method according to claim 2, characterized in that, The step of adjusting the model parameters of the original layout parameter prediction model in a direction that reduces the difference to obtain the target layout parameter prediction model includes: Based on the differences, the adjustment method of the model parameters of the original layout parameter prediction model is calculated layer by layer from the fully connected layer to the convolutional neural network; The model parameters of the original layout parameter prediction model are adjusted according to the adjustment method to obtain the target layout parameter prediction model.
4. The method according to claim 1, characterized in that, The calculation of the difference between the predicted layout parameters and the true values of the layout parameters includes: Calculate the mean square error between the predicted layout parameters and the true values of the layout parameters, and use it as the first difference; Calculate the overlap between the predicted layout parameters and the true values of the layout parameters, as a second difference; The first difference and the second difference are weighted and summed to obtain the difference between the predicted layout parameter and the true value of the layout parameter.
5. A layout optimization method, characterized in that, The method includes: The system acquires a behavior heatmap, service configuration data, terminal physical data, and user operation sequence for a target page on a target terminal. The behavior heatmap represents the frequency of interaction between the user and various areas within the target page during the user's access to the target page. The service configuration data represents the number and type of services displayed on the target page. The terminal physical data represents the display parameters of the target terminal. The user operation sequence represents the temporal pattern of interaction between the user and various areas within the target page during the user's access to the target page. The behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence are input into the target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using the method steps of any one of claims 1-4; The target page is rendered and displayed based on the predicted layout parameters.
6. The method according to claim 5, characterized in that, The step of inputting the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the target layout parameter prediction model to predict the predicted layout parameters of the target page includes: In response to a new interaction between the user and the target page, the target layout parameter prediction model uses a first prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence. In response to the arrival of a preset update time, the target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence; wherein, the algorithm complexity of the second prediction method is lower than that of the first prediction method.
7. The method according to claim 5, characterized in that, The step of inputting the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the target layout parameter prediction model to predict the predicted layout parameters of the target page includes: In response to the arrival of a preset update time, and the receipt of a new interactive behavior within the waiting time before the arrival of the preset update time, the target layout parameter prediction model uses a first prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence. or, In response to the arrival of the preset update time, and if no new interactive behavior is received within the waiting period before the arrival of the preset update time, the target layout parameter prediction model uses a second prediction method to predict the predicted layout parameters of the target page based on the behavior heatmap, the business configuration data, the terminal physical data, and the user operation sequence. The algorithmic complexity of the second prediction method is lower than that of the first prediction method.
8. The method according to claim 5, characterized in that, The method further includes: If it is detected that the predicted layout parameters meet a preset abnormal condition before the target page is re-rendered and displayed according to the predicted layout parameters, and / or the re-rendering is not completed within a preset time period, then the target page is re-rendered and displayed according to the target layout parameters preset for the target terminal.
9. A training device for a layout parameter prediction model, characterized in that, The device includes: The first acquisition module is used to acquire behavioral heatmaps, service configuration data, terminal physical data, user operation sequences, and layout parameter truth values of a sample page in a sample terminal. The behavioral heatmap represents the frequency of interaction between the user and various areas within the sample page during the user's access to the sample page. The service configuration data represents the number and type of services displayed on the sample page. The terminal physical data represents the display parameters of the sample terminal. The user operation sequence represents the temporal pattern of interaction between the user and various areas within the sample page during the user's access to the sample page. The first prediction module is used to input the behavior heatmap, the service configuration data, the terminal physical data and the user operation sequence into the original layout parameter prediction model, and obtain the predicted layout parameters output by the original layout parameter prediction model. The parameter adjustment module is used to calculate the difference between the predicted layout parameters and the true values of the layout parameters, and adjust the model parameters of the original layout parameter prediction model in the direction of reducing the difference to obtain the target layout parameter prediction model.
10. A layout optimization device, characterized in that, The device includes: The second acquisition module is used to acquire a behavior heatmap, service configuration data, terminal physical data, and user operation sequence of a target page in a target terminal; wherein, the behavior heatmap is used to characterize the frequency of interaction between the user and each area within the target page during the user's access to the target page; the service configuration data is used to characterize the number and type of services displayed on the target page; the terminal physical data is used to characterize the display screen parameters of the target terminal; and the user operation sequence is used to characterize the timing pattern of interaction between the user and each area within the target page during the user's access to the target page. The second prediction module is used to input the behavior heatmap, the service configuration data, the terminal physical data, and the user operation sequence into the target layout parameter prediction model to obtain the predicted layout parameters of the target page; wherein, the target layout parameter prediction model is trained in advance using the method steps of any one of claims 1-4; The first optimization module is used to render and display the target page based on the predicted layout parameters.
11. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; Memory, used to store computer programs; A processor, when executing a program stored in memory, implements the steps of the method described in any one of claims 1-4 or 5-8.
12. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the method described in any one of claims 1-4 or 5-8.