Front-end page dynamic recommendation method and device, storage medium and computer device
By processing user behavior data in real time on the front end and utilizing front-end recommendation models and incremental update technology, the response latency and poor user experience of traditional back-end recommendation methods are solved, achieving efficient personalized recommendations and improving user experience and system performance.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- GUANGZHOU FENGQUN INTERNET TECH CO LTD
- Filing Date
- 2025-08-26
- Publication Date
- 2026-05-19
AI Technical Summary
Traditional backend recommendation methods suffer from response latency and poor user experience, making it difficult to meet the real-time and interactive requirements of the frontend.
By acquiring real-time tracking data of target users at the front end, and using the front-end recommendation model for local processing and dynamic adjustment, combined with WebWorker and Wasm technologies to optimize calculations, millisecond-level recommendation adjustments are achieved, and model consistency is ensured by incrementally updating model weights.
It significantly improved recommendation relevance, increased click-through rate by 20-30%, reduced server load by 30%, increased product conversion rate by 15-30%, and increased user satisfaction by 20%.
Smart Images

Figure CN121092774B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of page optimization technology, and in particular to a method, apparatus, storage medium and computer equipment for dynamic recommendation of front-end pages. Background Technology
[0002] In today's rapidly developing internet technology landscape, personalized recommendations have become a crucial means of enhancing user experience. Traditional recommendation systems largely rely on backend servers for complex calculations and processing before sending the recommendations to the frontend for display. However, with the continuous advancement of frontend technology and users' increasing demands for real-time performance and interactivity, traditional backend recommendation methods have gradually revealed problems such as response latency and poor user experience. Summary of the Invention
[0003] The purpose of this application is to at least address one of the aforementioned technical defects, particularly the technical defects of response delay and poor user experience in the backend recommendation method of the prior art.
[0004] This application provides a method for dynamic recommendation on a front-end page, the method comprising:
[0005] Obtain real-time event tracking data from the target user;
[0006] The real-time data is input into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model. The model weights in the front-end recommendation model are incrementally updated based on the back-end recommendation model.
[0007] The recommended list is used to dynamically adjust the content displayed on the current page.
[0008] Optionally, obtaining the real-time tracking data of the target user includes:
[0009] Obtain the target user's raw event tracking data on the front-end page;
[0010] WebWorker technology is used to perform local preprocessing operations on the original data points to obtain real-time data points.
[0011] Optionally, the step of using WebWorker technology to perform local preprocessing operations on the original event tracking data to obtain real-time event tracking data includes:
[0012] WebWorker technology is used to clean and standardize the original tracking data, and feature extraction and dimensionality reduction are performed on the standardized original tracking data. Then, the dimensionality-reduced original tracking data is processed into a structure to obtain real-time tracking data.
[0013] Optionally, the step of inputting the real-time tracking data into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model includes:
[0014] The real-time tracking data is input into the latest front-end recommendation model, and the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended are determined by the front-end recommendation model.
[0015] The cosine similarity between the latest user embedding vector and each latest item embedding vector in the latest item embedding vector set is calculated using the front-end recommendation model to obtain the calculation result;
[0016] The front-end recommendation model sorts the candidate items according to the calculation results, and then generates and outputs a corresponding recommendation list based on the sorting results.
[0017] Optionally, determining the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed or to be recommended on the current page through the front-end recommendation model includes:
[0018] The front-end recommendation model is used to determine whether the real-time tracking data represents new user behavior.
[0019] If so, after updating the locally stored user embedding vector corresponding to the target user and the item embedding vector corresponding to the real-time event tracking data according to the real-time event tracking data, determine the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended.
[0020] Otherwise, directly retrieve the latest user embedding vector from local storage, as well as the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended.
[0021] Optionally, the step of calculating the cosine similarity between the latest user embedding vector and each latest item embedding vector in the set of latest item embedding vectors through the front-end recommendation model to obtain the calculation result includes:
[0022] The front-end recommendation model determines the task type of the current computation task, and when it is determined that the task type is a computationally intensive task, the latest user embedding vector and the latest item embedding vector set are sent to the pre-configured Wasm function.
[0023] The front-end recommendation model receives the calculation results of the cosine similarity between the latest user embedding vector returned by the Wasm function and each latest item embedding vector in the latest item embedding vector set;
[0024] The step of sorting the candidate items according to the calculation results using the front-end recommendation model, and generating and outputting a corresponding recommendation list based on the sorting results, includes:
[0025] The front-end recommendation model determines the task type of this ranking task, and when it is determined that the task type of the ranking task is a computationally intensive task, the calculation result and the candidate items are sent to the Wasm function.
[0026] The front-end recommendation model receives the candidate items returned by the Wasm function, sorts them according to the calculation results, and outputs the recommendation list generated based on the sorting results.
[0027] Optionally, the incremental update process of the model weights in the front-end recommendation model includes:
[0028] User behavior data generated within a preset time period is sent to the backend, so that the backend can train a preset backend recommendation model based on the user behavior data, and send the model weight increment of the trained backend recommendation model to the frontend.
[0029] The system receives the incremental model weights from the backend and updates the frontend recommendation model based on these incremental model weights.
[0030] Optionally, receiving the incrementally distributed model weights from the backend and updating the frontend recommendation model based on the incrementally distributed model weights includes:
[0031] The validity of the version package corresponding to the incrementally distributed model weights from the backend is checked, and the check results are obtained.
[0032] When the detection result indicates that the version package is valid, the latest user embedding vector in the incrementally distributed model weights is updated to the corresponding user record stored in IndexedDB;
[0033] And / or, update the latest item embedding vector in the incrementally issued model weights to the corresponding item record stored in IndexedDB.
[0034] Optionally, dynamically adjusting the displayed content of the current page using the recommendation list includes:
[0035] Obtain the front-end rendering strategy;
[0036] Based on the recommended list and the front-end rendering strategy, and in conjunction with the real-time feedback mechanism, the content displayed on the current page is dynamically adjusted.
[0037] Optionally, the step of dynamically adjusting the displayed content of the current page based on the recommendation list and the front-end rendering strategy, combined with a real-time feedback mechanism, includes:
[0038] Based on the recommended list and the front-end rendering strategy, and in conjunction with the real-time feedback mechanism, the content displayed on the current page is partially reordered, highlighted, dynamically adjusted in UI layout, intelligently preloaded, expanded / collapsed, and / or the recommended content is refreshed.
[0039] This application also provides a front-end page dynamic recommendation device, including:
[0040] The data acquisition module is used to acquire real-time tracking data of the target user.
[0041] The recommendation list generation module is used to input the real-time tracking data into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model, wherein the model weights in the front-end recommendation model are incrementally updated based on the back-end recommendation model;
[0042] The dynamic adjustment module is used to dynamically adjust the content displayed on the current page using the recommendation list.
[0043] This application also provides a computer-readable storage medium storing computer-readable instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps of the front-end page dynamic recommendation method as described in any of the above embodiments.
[0044] This application also provides a computer device, including: one or more processors, and memory;
[0045] The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the front-end page dynamic recommendation method as described in any of the above embodiments.
[0046] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:
[0047] The front-end dynamic recommendation method, apparatus, storage medium, and computer equipment provided in this application acquire real-time tracking data of target users through front-end tracking technology, and then input this data into the latest front-end recommendation model. This model uses the real-time tracking data to generate a recommendation list corresponding to user behavior and dynamically adjusts the content displayed on the current page accordingly. In this process, the system processes user behavior data in real time through the front end, achieving millisecond-level recommendation adjustments. Even offline, the front-end recommendation model can provide basic recommendation functions, thus responding to changes in user interests in real time, significantly improving recommendation relevance, and increasing click-through rate by 20-30%. Furthermore, this system migrates 50-70% of recommendation calculations to the client, significantly reducing server load and lowering the total cost of the recommendation system by 30%. Simultaneously, by adjusting recommendation content and display methods in real time, this application increases product conversion rates by 15-30%, and the personalized real-time recommendation experience also improves user satisfaction scores by 20%. Furthermore, the model weights in the front-end recommendation model of this application can be incrementally updated based on the back-end recommendation model. This allows the front-end to make real-time recommendation adjustments and provide immediate feedback, while the back-end periodically receives user behavior data packets sent by the front-end for in-depth analysis and sends the updated model weight increments back to the front-end so that the front-end can update its local model based on these increments, ensuring model consistency. Attached Figure Description
[0048] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0049] Figure 1 A flowchart illustrating a front-end page dynamic recommendation method provided in an embodiment of this application;
[0050] Figure 2 A schematic diagram illustrating the process of generating a recommendation list through a front-end recommendation model, provided for an embodiment of this application;
[0051] Figure 3 A flowchart illustrating the dynamic adjustment of the displayed content of the current page, provided for an embodiment of this application;
[0052] Figure 4 A schematic diagram of the structure of a front-end page dynamic recommendation device provided in an embodiment of this application;
[0053] Figure 5 This is a schematic diagram of the internal structure of a computer device provided in an embodiment of this application. Detailed Implementation
[0054] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0055] In one embodiment, such as Figure 1 As shown, Figure 1 This application provides a flowchart illustrating a front-end page dynamic recommendation method. The front-end page dynamic recommendation method provided in this application may include:
[0056] S110: Obtain real-time tracking data of the target user.
[0057] In this step, when the target user is detected to have engaged in relevant behavior in a relevant scenario, real-time tracking data of the target user can be captured in real time through front-end tracking technology, thereby providing a foundation for subsequent local preprocessing and recommendation models.
[0058] The target users of this application refer to users who are currently using or will soon use the dynamic recommendation service on the front-end page. These users can be visitors to internet platforms or users of specific applications or websites. When capturing real-time event tracking data, this application can collect user behavior data, interaction data, click data, browsing data, etc., which can reflect users' interests, preferences, and needs.
[0059] For example, in the scenario of a mini-program e-commerce platform (including video accounts, live streaming, and products), in order to achieve real-time and accurate recommendations, this application can obtain the following types of event tracking data:
[0060] Product browsing behavior data: Product Impression: When a user sees a product on a page (including product lists, recommended positions, search results, etc.), the product ID, location, exposure duration, etc. are recorded.
[0061] Product Click: When a user clicks to enter a product details page, the product ID, click time, source page, etc. are recorded.
[0062] Product Detail View: This includes the duration of a user's stay on the product detail page, the depth of scrolling, whether they viewed reviews, and detail images.
[0063] Interaction behavior data: Favorites / Likes: When a user favorites or likes a product, video, or live stream, the corresponding ID and time are recorded.
[0064] Add to Cart: Users add items to their shopping cart, recording the item ID, quantity, and time.
[0065] Purchase / Order: When a user completes a purchase, the system records the product ID, quantity, price, order ID, payment time, etc.
[0066] Share: Users share products, videos, or live streams, recording the shared content ID and sharing channel.
[0067] Search: User search keywords and search result clicks.
[0068] Video / Live Behavior Data: Video / Live View: When a user enters a video content or live room, the video / live ID, viewing duration, playback progress, whether they liked, commented, or tipped are recorded.
[0069] Video / Live Interaction: Users send comments, ask questions, and click on product links in the live stream.
[0070] Follow / Unfollow: Users follow or unfollow video accounts / broadcasters.
[0071] Page / session behavior data:
[0072] Page Stay: The length of time a user stays on a page.
[0073] Page Navigation: Which page a user navigates to from which page?
[0074] Session Start / End: Records the time each time a user opens / closes the mini-program.
[0075] Scrolling behavior: The depth and speed of a user's scrolling on a page, used to determine the area the user is focused on.
[0076] User attribute data (not real-time, but can be used as context): user ID, device information, geolocation (if authorized), network status, etc.
[0077] It's important to note that the capture and processing of real-time event tracking data is transparent to users. Users can enjoy personalized recommendations from the dynamic recommendation service on the front-end page without needing to perform any additional operations or grant any authorization. Furthermore, this data is used solely to improve the accuracy of the recommendation service and user experience, and will not leak users' privacy information.
[0078] S120: Input the real-time tracking data into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model. The model weights in the front-end recommendation model are incrementally updated based on the back-end recommendation model.
[0079] In this step, after obtaining the target user's real-time event tracking data via S110, this application can use this real-time event tracking data as input and transmit it to the latest front-end recommendation model already loaded on the front-end device. This model is specifically designed to fully utilize this real-time data to generate a recommendation list that highly matches the user's current interests and needs.
[0080] Furthermore, to maintain the accuracy and timeliness of the front-end recommendation model, this system periodically receives incremental updates to the model weights from the back-end. These updates are based on the latest training results of the back-end recommendation model, ensuring that the front-end model can capture the latest changes in user behavior patterns. When these incremental updates are received, the front-end recommendation model automatically adjusts the weights without retraining the entire model, thus significantly saving computational resources and time.
[0081] Once the latest front-end recommendation model is determined, this model, upon receiving real-time event tracking data, quickly calculates the most relevant item recommendations based on user behavior using built-in algorithms and logic. This process typically involves complex machine learning algorithms, such as deep neural networks and collaborative filtering, but thanks to the computing power of the front-end device and optimization algorithms, it can be completed in milliseconds. For example, this application can implement a lightweight collaborative filtering model using TensorFlow.js, which can be achieved using matrix factorization or embedding-based methods.
[0082] In one possible implementation, this application can deploy a lightweight collaborative filtering model in the following way:
[0083] 1. Data preparation:
[0084] User-item interaction data: Pre-processed event tracking data, such as which products a user clicked or which videos they watched. These interactions can be quantified as implicit feedback (e.g., 0 / 1 indicating whether an interaction occurred, or the number of interactions).
[0085] User and item ID mapping: Maps actual user IDs and item / video IDs to consecutive integer indices.
[0086] 2. Model Architecture (Taking matrix factorization as an example):
[0087] User Embeddings: Maintain a low-dimensional vector (Embedding) for each user, which represents the user's interests and preferences.
[0088] Item Embeddings: Maintain a low-dimensional vector for each product, video, and live stream, and these vectors represent the features of the item.
[0089] Model Building: In TensorFlow.js, you can define two trainable tf.Variable matrices: one to store user embeddings and one to store item embeddings. Given a user ID and an item ID, the model looks up the corresponding user embedding vector and item embedding vector. It predicts the user's interest in the item by calculating the dot product or cosine similarity of these two vectors. A larger dot product indicates higher interest. You can also add a bias term to improve model performance.
[0090] Loss function: For implicit feedback, binary cross-entropy loss or Bayesian Personalized Ranking (BPR) loss can be used. The goal is to give high predicted scores to items that the user has actually interacted with, and low predicted scores to items that have not been interacted with.
[0091] Optimizer: Use optimizers such as Adam and SGD to update model parameters (user and item embeddings).
[0092] 3. Training / Update Process:
[0093] Initial model: A base model can be trained by the backend, and the initial embedding vectors of users and items can be sent to the frontend.
[0094] Incremental learning at the front end: When a user performs a new action at the front end (such as clicking on a product), the model obtains the user's embedding vector and the product's (or video's) embedding vector. Based on the new interaction, the model fine-tunes the user's embedding vector and the product's embedding vector through backpropagation and an optimizer, so that the predicted score is more consistent with the actual interaction.
[0095] Understandably, TensorFlow.js's advantage lies in its ability to run machine learning models in a browser, support GPU acceleration (via WebGL), and its API, similar to the Python version of TensorFlow, making model development and deployment relatively convenient. For the lightweight model in this application, it can meet the requirements of real-time computation.
[0096] Finally, the front-end recommendation model outputs a list containing multiple recommended items. These items are sorted based on the user's current interests and behavior, ensuring that items most relevant to the user's needs are displayed first. The front-end page then dynamically adjusts the displayed content based on this recommendation list, providing a personalized recommendation experience for the user.
[0097] S130: Use the recommendation list to dynamically adjust the content displayed on the current page.
[0098] In this step, after generating the recommendation list through S120, this application can use the recommendation list to dynamically adjust the content displayed on the current page in order to provide users with personalized recommendation services.
[0099] For example, after the front-end recommendation model of this application receives the real-time tracking data of the target user, the model will update its internal parameters and predict the target user's interest score for uninterrupted items and output it. Then, the system can dynamically change the page content based on the interest score output by the model, combined with the front-end rendering strategy and real-time feedback mechanism.
[0100] It should be noted that this dynamic adjustment is not limited to product recommendations, but can also be applied to various scenarios such as content recommendations, video recommendations, and advertising recommendations. Therefore, the scope of dynamic adjustment includes, but is not limited to, dynamically adjusting the recommendation list and UI display content. When a user browses a page, the system can capture the user's interests and preferences in real time and dynamically adjust the content on the page to ensure that the information the user sees is the most interesting and relevant to them. This instant feedback and personalized recommendation method greatly improves user experience and satisfaction. At the same time, because the front-end device undertakes part of the recommendation calculation task, it reduces the server load, making the entire recommendation system more efficient and stable.
[0101] In the above embodiments, after obtaining real-time tracking data of target users through front-end tracking technology, this data can be input into the latest front-end recommendation model. This model uses the real-time tracking data to generate a recommendation list corresponding to user behavior and dynamically adjusts the content displayed on the current page accordingly. During this process, the system processes user behavior data in real-time through the front end, achieving millisecond-level recommendation adjustments. Even offline, the front-end recommendation model can provide basic recommendation functions, thus responding to changes in user interests in real time, significantly improving recommendation relevance, and increasing click-through rate by 20-30%. Furthermore, this system migrates 50-70% of recommendation calculations to the client, significantly reducing server load and lowering the total cost of the recommendation system by 30%. Simultaneously, this application improves product conversion rate by 15-30% by adjusting recommendation content and display methods in real time, and the personalized real-time recommendation experience also improves user satisfaction scores by 20%. In addition, the model weights in the front-end recommendation model of this application can be incrementally updated based on the back-end recommendation model. This allows the front end to make real-time recommendation adjustments and provide immediate feedback, while the back end periodically receives user behavior data packets sent by the front end for in-depth analysis and sends the updated model weight increments back to the front end, enabling the front end to update its local model based on these increments, ensuring model consistency.
[0102] In one embodiment, obtaining the real-time tracking data of the target user in S110 may include:
[0103] S111: Obtain the target user's original event tracking data on the front-end page.
[0104] S112: Use WebWorker technology to perform local preprocessing on the original data points to obtain real-time data points.
[0105] In this embodiment, after capturing the target user's original event tracking data, WebWorker technology is used for local preprocessing to improve data processing efficiency and protect user privacy. WebWorker, introduced in HTML5, allows scripts to run in background threads without interfering with or blocking the main thread's UI rendering and interaction. This feature enables us to efficiently process large amounts of real-time event tracking data without sacrificing front-end page responsiveness.
[0106] In this application, the raw event tracking data is first transmitted to one or more WebWorker threads. These threads then perform a series of preprocessing operations, such as data cleaning, format conversion, and noise filtering, to ensure the quality of the data input to the front-end recommendation model. These preprocessing operations aim to extract the information most relevant to the target user's current interests and needs, while removing irrelevant or redundant data. Through this process, this application obtains more refined and accurate real-time event tracking data, which is then transmitted back to the main thread for use by the front-end recommendation model.
[0107] It's worth noting that the use of WebWorker technology not only improves data processing efficiency but also effectively protects user privacy. Because preprocessing operations are performed locally, the user's raw event tracking data does not need to be uploaded to a server, thus reducing the risk of data leakage. At the same time, communication between WebWorker threads and the main thread is strictly limited, further enhancing data security.
[0108] Real-time event tracking data processed by WebWorker technology not only better meets the input requirements of front-end recommendation models, but also provides users with a more personalized recommendation experience while ensuring data accuracy and timeliness.
[0109] In one embodiment, S112, which uses WebWorker technology to perform local preprocessing on the original tracking data to obtain real-time tracking data, may include:
[0110] S1121: The WebWorker technology is used to clean and standardize the original tracking data, and the standardized original tracking data is subjected to feature extraction and dimensionality reduction. The dimensionality-reduced original tracking data is then processed into a structure to obtain real-time tracking data.
[0111] In this embodiment, during the local preprocessing of the original event tracking data using WebWorker technology, the application first performs cleaning and normalization operations. This step aims to remove invalid or abnormal data points while ensuring that all data items follow a unified format and standard. For example, for missing values, the application can use imputation methods (such as mean imputation or median imputation) or deletion methods; for outliers, statistical methods or domain knowledge-based methods can be used for identification and correction; when filtering invalid data, duplicate, incorrectly formatted, or incomplete event tracking data can be removed; when constructing standardized fields, the naming and format of fields such as event name, product ID, and user ID can be unified; when processing timestamps, the timestamps are unified to a standard format, and the time difference of the event occurrence (such as dwell time) is calculated.
[0112] After cleaning and normalization, this application further extracts features from the normalized raw event tracking data. Feature extraction is a crucial step in machine learning, aiming to extract the most useful information for the prediction target from the raw data. In this application, feature extraction can involve statistical methods (such as calculating the mean, variance, maximum, and minimum values), text processing methods (such as word frequency statistics, TF-IDF calculation, etc.), or other domain-specific methods. Through feature extraction, this application can extract key information reflecting user interests and needs from the raw event tracking data. Furthermore, to reduce computational complexity and improve model efficiency, this application also performs dimensionality reduction after feature extraction. Dimensionality reduction aims to reduce the number of features in the data while preserving as much useful information as possible from the original data. Commonly used dimensionality reduction methods include Principal Component Analysis (PCA), Linear Discriminant Analysis (LDA), and t-SNE. In this application, an appropriate dimensionality reduction method can be selected based on the specific application scenario and data characteristics.
[0113] For example, this application can encode behavioral types such as "click," "browse," and "purchase" as numerical features. Then, it extracts contextual information related to the recommendation from the raw data, such as:
[0114] Product characteristics: Mapping product ID to product category, brand, price range, etc.
[0115] User history behavior summary: For example, calculating the distribution of product categories clicked by a user in the last N minutes, the total duration of videos watched, etc.
[0116] Sequence features: Extract the sequence of the user's most recent N actions, such as "browse A -> click B -> purchase C".
[0117] After extracting the context, this application can aggregate similar behaviors that occur locally within a short period of time. For example, it can merge multiple clicks by a user on the same product within one second into a single valid click, or calculate the total viewing time of a user on a video. For high-cardinality IDs such as product IDs and video IDs, this application can also perform hash encoding or directly pass them as IDs to the model layer for embedding lookup.
[0118] Finally, this application performs structured processing on the raw event tracking data after dimensionality reduction to obtain real-time event tracking data. Structured processing aims to organize the data into an easily understandable and usable format, such as tables or databases. For example, this application can organize the preprocessed data into a structure easily consumed by the model, such as JSON objects or arrays. Furthermore, to reduce data transmission volume, this application can also package multiple small-granularity behavioral events into a single data packet and send it to the backend periodically or under specific conditions (such as when a user leaves the page or a certain number of events are reached). Through structured processing, this application ensures that the real-time event tracking data meets the input requirements of the front-end recommendation model and provides strong support for subsequent recommendation calculations.
[0119] This application executes the aforementioned preprocessing logic within a WebWorker. The WebWorker runs in an independent thread, preventing it from blocking the browser's main thread and ensuring UI smoothness. The main thread is only responsible for capturing raw event tracking data and sending it to the WebWorker. After processing, the WebWorker can notify the main thread of the processing results (such as the updated user interest model and data packets to be sent to the backend). Through these preprocessing steps, the front-end recommendation model can directly utilize structured and refined features, reducing the computational burden on the model and optimizing data transmission efficiency.
[0120] In one embodiment, such as Figure 2 As shown, Figure 2 This is a schematic diagram of the process for generating a recommendation list through a front-end recommendation model, as provided in an embodiment of this application. In step S120, the real-time tracking data is input into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model, which may include:
[0121] S121: Input the real-time tracking data into the latest front-end recommendation model, and determine the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended through the front-end recommendation model.
[0122] S122: Calculate the cosine similarity between the latest user embedding vector and each latest item embedding vector in the latest item embedding vector set using the front-end recommendation model, and obtain the calculation result.
[0123] S123: The front-end recommendation model sorts the candidate items according to the calculation results, and then generates and outputs the corresponding recommendation list based on the sorting results.
[0124] In this embodiment, after the real-time event tracking data is input into the latest front-end recommendation model, the model first parses the data to extract information related to the target user's current behavior and interests. This information is then used to determine the latest user embedding vector, which is a point in a high-dimensional space representing the user's interests and preferences. Simultaneously, the model also determines the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended, based on the item information in the real-time event tracking data. Each latest item embedding vector in this set also represents a point in a high-dimensional space, reflecting the item's features and attributes.
[0125] With the latest user embedding vectors and item embedding vectors in hand, the front-end recommendation model then calculates the cosine similarity between the latest user embedding vector and each latest item embedding vector. Cosine similarity is a metric that measures the degree of similarity between two vectors in terms of direction, with a value ranging from -1 to 1. In this application, the closer the cosine similarity value is to 1, the higher the user's interest in that item.
[0126] After calculating the cosine similarity, the front-end recommendation model sorts the candidate items based on these similarity values. The sorting can be based on the magnitude of the similarity values or on similarity values after some weighting process. Once sorted, the model generates a list of recommended items, ordered according to the user's current interests and behavior, ensuring that items most relevant to the user's needs are displayed first.
[0127] Finally, the front-end recommendation model outputs this recommendation list for use by the front-end page. Upon receiving the recommendation list, the front-end page dynamically adjusts the displayed content based on it, providing users with a personalized recommendation experience. This dynamic recommendation method, based on real-time event tracking data and the front-end recommendation model, can capture changes in user interests and preferences in real time, providing users with more accurate and personalized recommendation services.
[0128] In one embodiment, determining the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended through the front-end recommendation model in step S121 may include:
[0129] S1211: Determine whether the real-time tracking data is a new user behavior through the front-end recommendation model.
[0130] S1212: If so, after updating the locally stored user embedding vector corresponding to the target user and the item embedding vector corresponding to the real-time tracking data according to the real-time tracking data, determine the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended.
[0131] S1213: Otherwise, directly obtain the latest user embedding vector stored locally, as well as the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended.
[0132] In this embodiment, the front-end recommendation model has the ability to intelligently determine whether real-time tracking data represents new user behavior. This determination is based on a series of preset rules and algorithms, aiming to identify whether the user's current behavior represents a new change in their interests and preferences. In this application, new user behavior refers to newly occurring interaction events that have not yet been processed and learned by the current front-end recommendation model. The judgment criteria are mainly based on timestamps and processing status, as follows:
[0133] 1. Timestamp Comparison: Each data point is accompanied by a timestamp. The front-end recommendation model maintains a "last processing time" or "latest timestamp of the processed behavior," and any behavior with a timestamp later than this value is considered new.
[0134] 2. Event Queue / Buffer: The front end has a real-time behavior event queue. Newly captured events are added to this queue. WebWorker or model processing modules will retrieve unprocessed events from the queue for learning.
[0135] 3. Unique Identifier: Some behaviors may contain unique IDs (such as click event IDs) to avoid duplicate processing.
[0136] Furthermore, if the real-time event tracking data in this application is determined to be new user behavior, the front-end recommendation model will immediately initiate an update process. This process includes updating the locally stored user embedding vectors based on the newly acquired event tracking data to reflect the user's current interest state. Simultaneously, the model will also update the item embedding vectors associated with this event tracking data to ensure they accurately reflect the characteristics and attributes of the items. These updated embedding vectors are then used as the basis for generating the latest recommendation list.
[0137] In one specific implementation, this application can update the locally stored user embedding vector and item embedding vector through the following steps, specifically including the following:
[0138] 1. Capture new behaviors: The front end captures new user behaviors such as clicks, browsing, purchases, and video viewing in real time and performs local preprocessing.
[0139] 2. Identify relevant parameters: For each new user action (e.g., user A watched video B):
[0140] Identify the user involved (User A) and its corresponding user embedding vector U_A.
[0141] Identify the items involved (video B) and their corresponding item embedding vectors V_B.
[0142] 3. Calculate the loss and gradient:
[0143] Predict user A's interest score for video B based on the current model (U_A and V_B).
[0144] This predicted score is compared to the actual behavior (e.g., user A actually watched video B, which can be considered a positive sample), and a loss (e.g., binary cross-entropy loss) is calculated. Based on the calculated loss value, the gradients (i.e., the direction and magnitude that need to be adjusted) with respect to U_A and V_B are calculated.
[0145] 4. Parameter Update (Weight Adjustment):
[0146] Using a small learning rate, U_A and V_B are updated along the calculated gradient direction. For example, if user A watches video B, then U_A will be adjusted to be closer to V_B, and V_B will also be adjusted to be closer to U_A, ultimately resulting in the following parameters:
[0147] U_A_new = U_A_old - learning_rate * gradient_U_A;
[0148] V_B_new = V_B_old - learning_rate * gradient_V_B.
[0149] 5. Model State Preservation: The updated user embedding vectors are immediately used for subsequent real-time recommendation calculations and stored locally (such as in IndexedDB) to enable continuous learning across sessions.
[0150] 6. Backend Collaboration: The frontend periodically packages and sends this new user behavior data to the backend. The backend performs more comprehensive offline / near real-time training to generate more stable and global user and item embeddings, and then sends the updated model weights (incremental or full) to the frontend to correct and synchronize the frontend model.
[0151] Furthermore, if the real-time tracking data in this application is not identified as new user behavior—that is, if the user's current behavior is consistent with or shows no significant change from past behavior—the front-end recommendation model will directly retrieve the latest user embedding vector and the latest item embedding vector set stored locally. This avoids unnecessary computational overhead while ensuring the real-time performance and efficiency of the recommendation service.
[0152] Through this intelligent judgment and update mechanism, the front-end recommendation model can track changes in user interests and preferences in real time, providing users with more accurate and personalized recommendation services. At the same time, the model's efficiency and real-time performance are fully guaranteed, making the entire recommendation system more stable and reliable.
[0153] In one embodiment, in S122, the cosine similarity between the latest user embedding vector and each latest item embedding vector in the latest item embedding vector set is calculated using the front-end recommendation model to obtain the calculation result, which may include:
[0154] S1221: Determine the task type of this computation task through the front-end recommendation model, and when it is determined that the task type of the computation task is a computationally intensive task, send the latest user embedding vector and the latest item embedding vector set to the pre-configured Wasm function.
[0155] S1222: Receive the calculation result of the cosine similarity between the latest user embedding vector returned by the Wasm function and each latest item embedding vector in the latest item embedding vector set through the front-end recommendation model.
[0156] S123 involves sorting the candidate items according to the calculation results using the front-end recommendation model, generating a corresponding recommendation list based on the sorting results, and then outputting the list. This process may include:
[0157] S1231: The task type of this ranking task is determined by the front-end recommendation model, and when the task type of the ranking task is determined to be a computationally intensive task, the calculation result and the candidate items are sent to the Wasm function.
[0158] S1232: The front-end recommendation model receives the candidate items returned by the Wasm function, sorts them according to the calculation results, and outputs the recommendation list generated according to the sorting results.
[0159] In this embodiment, the front-end recommendation model demonstrates intelligent identification and optimized processing capabilities for different types of computational tasks. This feature enables the model to flexibly select the most suitable computing resources based on current task requirements, thereby improving the accuracy and efficiency of recommendations.
[0160] For the task of calculating cosine similarity, the front-end recommendation model first determines whether it is a computationally intensive task. Computationally intensive tasks typically involve a large amount of numerical computation and logical operations, placing high demands on CPU resources. For example, when calculating the interest scores of a current user for a large number of candidate items, this involves batch dot product or cosine similarity calculation between the user embedding vector and all item embedding vectors. If the number of candidate items is large, this will be the main computational bottleneck. Therefore, when this application determines that the computational task is computationally intensive, the front-end recommendation model can send the latest user embedding vector and the latest set of item embedding vectors to a pre-configured Wasm function for processing. Wasm (WebAssembly) is an efficient binary instruction format designed for web browsers, capable of running at near-native code speeds. By offloading the computationally intensive task to the Wasm function, this application allows the front-end recommendation model to fully utilize Wasm's high-performance computing advantages and quickly obtain the cosine similarity calculation results.
[0161] Similarly, in subsequent ranking tasks, the front-end recommendation model can also determine the task type. If the ranking task is also determined to be a computationally intensive task, the model will send the calculation results and candidate items to the Wasm function for ranking. The Wasm function can efficiently rank the candidate items based on the calculation results and generate a ranked recommendation list. The front-end recommendation model will then receive the recommendation list returned by the Wasm function and output it for use by the front-end page.
[0162] Through this intelligent task identification and optimization mechanism, the front-end recommendation model can significantly improve computational efficiency and response speed while ensuring recommendation accuracy. This not only provides users with a smoother and more real-time recommendation experience, but also enables the entire recommendation system to remain efficient and stable when facing large-scale users and data.
[0163] In one embodiment, the incremental update process of the model weights in the front-end recommendation model may include:
[0164] S210: Send user behavior data generated within a preset time period to the backend, so that the backend can train a preset backend recommendation model based on the user behavior data, and send the model weight increment of the trained backend recommendation model to the frontend.
[0165] S220: Receive the incremental model weights from the backend and update the frontend recommendation model based on the incremental model weights.
[0166] In this embodiment, the incremental update method enables the front-end recommendation model to continuously learn and evolve, keeping its recommendation capabilities up-to-date. When incrementally updating the model weights in the front-end recommendation model, this application can first send user behavior data generated within a preset time period to the back-end. The selection of the preset time period is crucial; it must ensure that the back-end has sufficient data for model training to avoid overfitting or underfitting, and that the front-end recommendation model can obtain the latest model weights in a timely manner to respond to rapid changes in user interests and preferences. This time period can be flexibly adjusted according to specific application scenarios and user behavior patterns, and is not limited here.
[0167] On the backend, after receiving user behavior data from the frontend, this data can be used to train a pre-defined backend recommendation model. The backend will run more complex and larger-scale recommendation model training. Unlike the lightweight model on the frontend, the backend can utilize powerful computing resources (such as GPU clusters) and longer time windows for training, aiming to extract useful features from the data and learn the potential relationships between user behavior and item features.
[0168] In one specific implementation, the backend can choose to train the following:
[0169] 1. Deep Collaborative Filtering Models: For example, deep learning-based matrix factorization (such as Neural Collaborative Filtering), two-tower models (such as YouTube DNN), graph neural networks (GNNs), etc., can capture more complex non-linear relationships between users and items.
[0170] 2. Hybrid Recommendation Model: Combining multiple strategies such as collaborative filtering, content recommendation, and rule-based recommendation to address issues such as cold start and data sparsity.
[0171] 3. Multi-objective optimization: In addition to click-through rate, the backend model also considers multiple optimization objectives such as conversion rate, dwell time, user satisfaction, and product diversity.
[0172] After selecting a model, the backend can set the training cycle. Model training can be offline batch processing (e.g., training daily or weekly) or near real-time training (e.g., small-batch updates every hour or every few minutes based on new data). After training, offline metrics (such as RMSE, Precision@K, Recall@K, NDCG) and online A / B testing can be used to evaluate the model's performance and effectiveness. After training and optimization, the backend model generates a new, more accurate, and comprehensive set of model parameters, namely model weights. These weights typically include user embedding vectors: updated representations of user interests, which may be more stable and comprehensive than those on the frontend; item embedding vectors: updated feature representations of products, videos, and live streams; and other model parameters: such as layer weights and bias terms of neural networks. These updated weights are the product of deep analysis by the backend; they reflect long-term trends and global patterns of user behavior and are the "cornerstone" for real-time adjustments to the frontend model.
[0173] After training is complete, the backend will distribute these incremental changes to the frontend. Upon receiving the model weights from the backend, the frontend will update its local recommendation model accordingly. This process may include loading, merging, and validating weights to ensure the new weights are correctly applied to the model and to maintain its stability and accuracy. The updated frontend recommendation model will then possess stronger recommendation capabilities and be better able to adapt to changes in user interests and preferences.
[0174] Furthermore, the methods by which the backend sends the updated model weight increments to the frontend in this application may include the following:
[0175] 1. API Interface / HTTP Long-lived Connection (Polling / Long Polling):
[0176] Periodic polling: The frontend can set a timer to send a request to the backend at regular intervals (e.g., every few minutes or hours) to inquire whether there are any new model weight updates. If the backend detects an update, it returns the updated data.
[0177] Long Polling: After the frontend sends a request, the backend maintains the connection until new model weight updates become available or a timeout period is reached. The frontend initiates a new request immediately upon receiving the response.
[0178] Data format: The backend can return a data packet in JSON or binary format, which contains: version number / timestamp: indicating the currently updated version.
[0179] Update types: such as "user embedding update", "new item embedding", "model parameter fine-tuning".
[0180] Specific updates:
[0181] For user embeddings: Only send the latest embedding vectors of users with active behavior or significant model changes.
[0182] For item embedding: Only embedding of newly listed products / videos, or embedding of existing products / videos that have undergone significant changes.
[0183] For other model parameters: send differentiated update packets.
[0184] 2. WebSocket connection:
[0185] WebSocket provides a full-duplex communication channel, allowing the server to proactively push data to the client without requiring frequent client requests.
[0186] Mechanism: When the front-end mini-program starts or enters a specific page, a WebSocket connection can be established to the back-end. When the back-end updates new model weights, the data can be directly pushed to the front-end through this WebSocket connection.
[0187] Advantages: High real-time performance, low latency, and reduced unnecessary HTTP request overhead.
[0188] Data format: Similar to the API interface, but can be transmitted via a more efficient binary protocol.
[0189] 3. CDN distribution (for large model files):
[0190] If some model weight files (such as the entire item embedding matrix) are too large to be frequently transmitted via API or WebSocket, the backend can upload these files to a CDN (Content Delivery Network).
[0191] Mechanism: When there are significant model updates, the backend generates new model files and uploads them to the CDN. The frontend can download these files from the CDN upon startup or under specific conditions. Incremental updates can be performed by downloading the difference package (…). This is achieved by having the front end download a small difference package and then apply it to the local old model file.
[0192] Advantages: Leveraging CDN's global distribution capabilities accelerates file downloads and reduces pressure on backend servers.
[0193] In this way, a closed-loop feedback mechanism is formed between the front-end and back-end recommendation models. The front-end is responsible for capturing user behavior data in real time and sending it to the back-end for model training; the back-end then continuously optimizes the model based on this data and sends the optimized model weight increments back to the front-end. This process is continuously repeated, enabling the front-end recommendation model to learn and evolve continuously, providing users with more accurate and personalized recommendation services. At the same time, the incremental update method also reduces the cost and complexity of model updates, improving the efficiency and stability of the entire recommendation system.
[0194] In one embodiment, receiving the incrementally distributed model weights from the backend in step S220 and updating the frontend recommendation model based on the incrementally distributed model weights may include:
[0195] S221: Detect the validity of the version package corresponding to the incrementally distributed model weights from the backend, and obtain the detection result.
[0196] S222: When the detection result indicates that the version package is valid, update the latest user embedding vector in the incrementally issued model weights to the corresponding user record stored in IndexedDB.
[0197] S223: and / or, update the latest item embedding vector in the incrementally issued model weights to the corresponding item record stored in IndexedDB.
[0198] In this embodiment, when the front-end recommendation model receives incrementally distributed model weights from the back-end, it first performs a validity check. These checks aim to ensure that the distributed model weight version package is complete, undamaged, and suitable for the current front-end recommendation model. The check process may involve multiple steps, such as digital signature verification of the version package, file integrity verification, and version compatibility checks.
[0199] If the detection result indicates that the version package is valid, the front-end recommendation model will officially enter the weight update process. For the latest user embedding vectors included in the incrementally distributed model weights, the model will update the corresponding user record stored in IndexedDB. IndexedDB is a high-performance browser-native database that allows websites to store large amounts of structured data, including file / binary data. By storing the latest user embedding vectors in IndexedDB, the front-end recommendation model can quickly access and update the user interest model, ensuring the real-time performance and accuracy of the recommendation service.
[0200] Similarly, for the latest item embedding vectors included in the incrementally distributed model weights, the model will also update the corresponding item record stored in IndexedDB. This process ensures the real-time nature and accuracy of item feature information, providing a solid foundation for recommendation services.
[0201] Through this meticulous weight update mechanism, the front-end recommendation model ensures it always possesses the latest recommendation capabilities, responding promptly to changes in user interests and preferences. Simultaneously, leveraging IndexedDB's high-performance storage capabilities, the model enables rapid data access and updates, further enhancing the efficiency and stability of the recommendation service.
[0202] In one embodiment, such as Figure 3 As shown, Figure 3 This is a flowchart illustrating the dynamic adjustment of the displayed content of the current page according to an embodiment of this application; S130, which uses the recommendation list to dynamically adjust the displayed content of the current page, may include:
[0203] S131: Obtain the front-end rendering strategy.
[0204] S132: Based on the recommendation list and front-end rendering strategy, and combined with a real-time feedback mechanism, dynamically adjust the content displayed on the current page.
[0205] In this embodiment, after the front-end recommendation model generates the recommendation list, the system does not directly apply it to the display of the front-end page. Instead, it first obtains the front-end rendering strategy, which is a set of rules and algorithms that define how to present the data in the recommendation list to the user in the best way. The front-end rendering strategy may involve multiple aspects, such as page layout, style design, animation effects, and interaction logic, which together determine the final page effect seen by the user.
[0206] After obtaining the front-end rendering strategy, this application can dynamically adjust the content displayed on the current page based on the data in the recommendation list and these strategies. This process may involve adding, deleting, modifying, and querying page elements, as well as real-time updates to styles and animations. Simultaneously, to ensure the accuracy and effectiveness of the adjustments, the front-end recommendation model will also be dynamically optimized in conjunction with a real-time feedback mechanism. The real-time feedback mechanism may include various data such as user clicks, dwell time, and scrolling behavior, which can reflect the user's interest and preferences for the current page content in real time. Therefore, this application can quickly implement recommendation adjustments triggered by user behavior through a real-time feedback application mechanism.
[0207] By combining front-end rendering strategies with real-time feedback mechanisms for dynamic adjustments, the front-end recommendation model can ensure that recommended content is presented in a way that best meets user expectations, while continuously improving the personalization and accuracy of the recommendation service. This not only enhances user satisfaction and loyalty but also brings more traffic and revenue to the website or application.
[0208] In one embodiment, S132, dynamically adjusting the displayed content of the current page based on the recommendation list and the front-end rendering strategy, combined with a real-time feedback mechanism, may include:
[0209] S1321: Based on the recommended list and the front-end rendering strategy, and in conjunction with the real-time feedback mechanism, perform partial reordering, content highlighting, dynamic adjustment of UI layout, intelligent preloading, content expansion / collapse, and / or refresh of recommended content on the current page.
[0210] In this embodiment, the front-end recommendation model demonstrates high flexibility and intelligence when combined with recommendation lists, front-end rendering strategies, and real-time feedback mechanisms. It can dynamically adjust the content displayed on the current page in various ways to meet the specific needs and preferences of different users.
[0211] Local reordering refers to the front-end recommendation model reordering items in the recommendation list based on user behavior data collected through real-time feedback mechanisms. For example, if a user frequently clicks on a certain type of item, the model may move these items to the front of the list so that the user can find them more quickly. Content highlighting involves making specific recommended content more prominent in the user interface by increasing font size, changing color, or adding animation effects, thereby attracting the user's attention.
[0212] Dynamic UI layout adjustment refers to the front-end recommendation model automatically adjusting the page layout and style based on the content of the recommendation list and the user's device information (such as screen size and resolution) to ensure that recommended content is presented optimally on different devices. Intelligent preloading utilizes the user's browsing history and real-time behavior data to predict content the user might be interested in and preloads this content in the background to reduce user waiting time and improve user experience.
[0213] The content expand / collapse function allows users to view or hide detailed information about recommended content as needed. For example, based on user interests, product details and comment sections can be automatically expanded or collapsed, reducing user interaction and directly displaying information the user is interested in. This interaction method provides users with rich information while maintaining page simplicity and avoiding information overload. Recommended content refresh refers to the front-end recommendation model periodically or triggered by user behavior to update the content in the recommendation list. For example, in certain specific areas of the current page (such as the "You May Like" module), recommended content can be replaced or refreshed in real time based on the latest user interest model to ensure that users always see the latest and most relevant recommendations.
[0214] Through these nuanced and intelligent dynamic adjustments, front-end recommendation models can provide users with a more personalized, accurate, and seamless recommendation experience. This not only enhances user engagement and satisfaction but also brings greater user stickiness and commercial value to websites or applications.
[0215] The front-end page dynamic recommendation device provided in the embodiments of this application is described below. The front-end page dynamic recommendation device described below can be referred to in correspondence with the front-end page dynamic recommendation method described above.
[0216] In one embodiment, such as Figure 4 As shown, Figure 4 This application provides a schematic diagram of a front-end page dynamic recommendation device according to an embodiment of the present application. The present application also provides a front-end page dynamic recommendation device, which may include a data acquisition module 210, a recommendation list generation module 220, and a dynamic adjustment module 230, specifically including the following:
[0217] The data acquisition module 210 is used to acquire real-time data tracking information of the target user.
[0218] The recommendation list generation module 220 is used to input the real-time tracking data into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model, wherein the model weights in the front-end recommendation model are incrementally updated based on the back-end recommendation model.
[0219] The dynamic adjustment module 230 is used to dynamically adjust the content displayed on the current page using the recommendation list.
[0220] In the above embodiments, after obtaining real-time tracking data of target users through front-end tracking technology, this data can be input into the latest front-end recommendation model. This model uses the real-time tracking data to generate a recommendation list corresponding to user behavior and dynamically adjusts the content displayed on the current page accordingly. During this process, the system processes user behavior data in real-time through the front end, achieving millisecond-level recommendation adjustments. Even offline, the front-end recommendation model can provide basic recommendation functions, thus responding to changes in user interests in real time, significantly improving recommendation relevance, and increasing click-through rate by 20-30%. Furthermore, this system migrates 50-70% of recommendation calculations to the client, significantly reducing server load and lowering the total cost of the recommendation system by 30%. Simultaneously, this application improves product conversion rate by 15-30% by adjusting recommendation content and display methods in real time, and the personalized real-time recommendation experience also improves user satisfaction scores by 20%. In addition, the model weights in the front-end recommendation model of this application can be incrementally updated based on the back-end recommendation model. This allows the front end to make real-time recommendation adjustments and provide immediate feedback, while the back end periodically receives user behavior data packets sent by the front end for in-depth analysis and sends the updated model weight increments back to the front end, enabling the front end to update its local model based on these increments, ensuring model consistency.
[0221] This application also provides a computer-readable storage medium storing computer-readable instructions, which, when executed by one or more processors, cause the one or more processors to perform the steps of the front-end page dynamic recommendation method as described in any of the above embodiments.
[0222] In one embodiment, this application also provides a computer device, including: one or more processors, and memory.
[0223] The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the front-end page dynamic recommendation method as described in any of the above embodiments.
[0224] Indicatively, such as Figure 5 As shown, Figure 5 This is a schematic diagram of the internal structure of a computer device 300 provided in an embodiment of this application. The computer device 300 can be provided as a server. (Refer to...) Figure 5 The computer device 300 includes a processing component 302, which further includes one or more processors, and memory resources represented by memory 301 for storing instructions, such as application programs, that can be executed by the processing component 302. The application programs stored in memory 301 may include one or more modules, each corresponding to a set of instructions. Furthermore, the processing component 302 is configured to execute instructions to perform the front-end page dynamic recommendation method of any of the above embodiments.
[0225] The computer device 300 may also include a power supply component 303 configured to perform power management of the computer device 300, a wired or wireless network interface 304 configured to connect the computer device 300 to a network, and an input / output (I / O) interface 305. The computer device 300 may operate on an operating system stored in memory 301, such as Windows Server™, Mac OS X™, Unix™, Linux™, Free BSD™, or similar.
[0226] Those skilled in the art will understand that Figure 5 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.
[0227] Finally, 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.
[0228] The various embodiments in this specification are described in a progressive manner. Each embodiment focuses on the differences from other embodiments. The various embodiments can be combined as needed, and the same or similar parts can be referred to each other.
[0229] The above description of the disclosed embodiments enables those skilled in the art to make or use this application. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this application. Therefore, this application is not to be limited to the embodiments shown herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A method for dynamic recommendation on a front-end page, characterized in that, The method includes: Obtain real-time event tracking data of the target user; The real-time data is input into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model. The model weights in the front-end recommendation model are incrementally updated based on the back-end recommendation model. The recommended list is used to dynamically adjust the content displayed on the current page; The acquisition of real-time tracking data of the target user includes: Obtain the target user's raw event tracking data on the front-end page; WebWorker technology is used to clean and standardize the original tracking data, and feature extraction and dimensionality reduction are performed on the standardized original tracking data. In addition, the dimensionality-reduced original tracking data is structured to obtain real-time tracking data. The incremental update process of the model weights in the front-end recommendation model includes: User behavior data generated within a preset time period is sent to the backend, so that the backend can train a preset backend recommendation model based on the user behavior data, and send the model weight increment of the trained backend recommendation model to the frontend. The system receives incrementally distributed model weights from the backend and updates the frontend recommendation model based on these incrementally distributed model weights. The incrementally distributed model weights include the updated user embedding vector, the updated item embedding vector, and other model parameters.
2. The front-end page dynamic recommendation method according to claim 1, characterized in that, The step of inputting the real-time tracking data into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model includes: The real-time tracking data is input into the latest front-end recommendation model, and the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended are determined by the front-end recommendation model. The cosine similarity between the latest user embedding vector and each latest item embedding vector in the latest item embedding vector set is calculated using the front-end recommendation model to obtain the calculation result; The front-end recommendation model sorts the candidate items according to the calculation results, and then generates and outputs a corresponding recommendation list based on the sorting results.
3. The front-end page dynamic recommendation method according to claim 2, characterized in that, The step of determining the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended through the front-end recommendation model includes: The front-end recommendation model is used to determine whether the real-time tracking data represents new user behavior. If so, after updating the locally stored user embedding vector corresponding to the target user and the item embedding vector corresponding to the real-time event tracking data according to the real-time event tracking data, determine the latest user embedding vector corresponding to the target user and the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended. Otherwise, directly retrieve the latest user embedding vector from local storage, as well as the latest item embedding vector set corresponding to the candidate items displayed on the current page or to be recommended.
4. The front-end page dynamic recommendation method according to claim 2, characterized in that, The calculation of the cosine similarity between the latest user embedding vector and each latest item embedding vector in the latest item embedding vector set using the front-end recommendation model yields the following results: The front-end recommendation model determines the task type of the current computation task, and when it is determined that the task type is a computationally intensive task, the latest user embedding vector and the latest item embedding vector set are sent to the pre-configured Wasm function. The front-end recommendation model receives the calculation results of the cosine similarity between the latest user embedding vector returned by the Wasm function and each latest item embedding vector in the latest item embedding vector set; The step of sorting the candidate items according to the calculation results using the front-end recommendation model, and generating and outputting a corresponding recommendation list based on the sorting results, includes: The front-end recommendation model determines the task type of this ranking task, and when it is determined that the task type of the ranking task is a computationally intensive task, the calculation result and the candidate items are sent to the Wasm function. The front-end recommendation model receives the candidate items returned by the Wasm function, sorts them according to the calculation results, and outputs the recommendation list generated based on the sorting results.
5. The front-end page dynamic recommendation method according to claim 1, characterized in that, The step of receiving the incrementally distributed model weights from the backend and updating the frontend recommendation model based on the incrementally distributed model weights includes: The validity of the version package corresponding to the incrementally distributed model weights from the backend is checked, and the check results are obtained. When the detection result indicates that the version package is valid, the latest user embedding vector in the incrementally distributed model weights is updated to the corresponding user record stored in IndexedDB; And / or, update the latest item embedding vector in the incrementally issued model weights to the corresponding item record stored in IndexedDB.
6. The front-end page dynamic recommendation method according to any one of claims 1-5, characterized in that, The step of dynamically adjusting the content displayed on the current page using the recommendation list includes: Obtain the front-end rendering strategy; Based on the recommended list and the front-end rendering strategy, and in conjunction with the real-time feedback mechanism, the content displayed on the current page is dynamically adjusted.
7. The front-end page dynamic recommendation method according to claim 6, characterized in that, The step of dynamically adjusting the content displayed on the current page based on the recommendation list and the front-end rendering strategy, combined with a real-time feedback mechanism, includes: Based on the recommended list and the front-end rendering strategy, and in conjunction with the real-time feedback mechanism, the content displayed on the current page is partially reordered, highlighted, dynamically adjusted in UI layout, intelligently preloaded, expanded / collapsed, and / or the recommended content is refreshed.
8. A front-end page dynamic recommendation device, characterized in that, include: The data acquisition module is used to acquire real-time tracking data of the target user. The recommendation list generation module is used to input the real-time tracking data into the latest front-end recommendation model to obtain the recommendation list output by the front-end recommendation model, wherein the model weights in the front-end recommendation model are incrementally updated based on the back-end recommendation model; The dynamic adjustment module is used to dynamically adjust the content displayed on the current page using the recommendation list; The data acquisition module includes: Obtain the target user's raw event tracking data on the front-end page; WebWorker technology is used to clean and standardize the original tracking data, and feature extraction and dimensionality reduction are performed on the standardized original tracking data. In addition, the dimensionality-reduced original tracking data is structured to obtain real-time tracking data. The incremental update process of the model weights in the front-end recommendation model includes: User behavior data generated within a preset time period is sent to the backend, so that the backend can train a preset backend recommendation model based on the user behavior data, and send the model weight increment of the trained backend recommendation model to the frontend. The system receives incrementally distributed model weights from the backend and updates the frontend recommendation model based on these incrementally distributed model weights. The incrementally distributed model weights include the updated user embedding vector, the updated item embedding vector, and other model parameters.
9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions that, when executed by one or more processors, cause the one or more processors to perform the steps of the front-end page dynamic recommendation method as described in any one of claims 1 to 7.
10. A computer device, characterized in that, include: One or more processors, and memory; The memory stores computer-readable instructions, which, when executed by the one or more processors, perform the steps of the front-end page dynamic recommendation method as described in any one of claims 1 to 7.