Application interface rearrangement method, system and equipment based on artificial intelligence and medium

Abstract

The invention discloses an application interface rearrangement method, system and device based on artificial intelligence and a medium. The method comprises the following steps that an inference model used for predicting the current operation intention of a user or the click probability of each UI assembly is constructed; collecting interaction event features and environment context features, preprocessing the features, and coding the features into vectors; inputting the vectors into an inference model to generate click probabilities or priority scores of the UI components; according to a model output result, according to UI layout constraints and business rules, calling a layout optimization algorithm to calculate an optimal arrangement sequence of UI components; on the basis of the optimal arrangement sequence, components which change relative to the original interface are identified, and a difference patch is generated; and locally updating the UI by using the difference patch to realize dynamic rearrangement of the interface. The method has the characteristics of low delay, high adaptability, offline operation capability and the like, and is suitable for UI personalized layout optimization in various application scenes.

Description

Technical Field

[0001] This invention belongs to the field of human-computer interaction technology, and specifically relates to methods, systems, devices and media for rearranging application interfaces based on artificial intelligence. Background Technology

[0002] User Interface (UI) refers to the overall design of software's human-computer interaction, operational logic, and aesthetics. It serves as the medium for interaction and information exchange between the system and the user, converting information from its internal form to a human-readable format. With the increasing richness of application functions and the high degree of personalization in user behavior, traditional static UI templates are no longer sufficient to meet the interface adaptation needs of different users in different usage scenarios. To improve user interaction efficiency, more and more systems are attempting to dynamically adjust interface content or structure based on user intent or preferences. Among related technologies, some solutions rely on server-side models to predict user intent and distribute customized interfaces, but these methods generally suffer from high response latency, poor offline capabilities, and risks associated with uploading private data.

[0003] Chinese invention patent application CN109478142A discloses a method, system, and medium for presenting a user interface customized for predicted user activity. The method includes: selecting a user of a content delivery service; prompting a user device to provide activity data related to the user's intent when requesting a media content item; training a prediction model based on objective data received from the user device associated with the user and the activity data received from the user device to identify the user's intent in requesting the media content item; wherein the prediction model is trained to identify whether to present a first user interface related to a first user intent or a second user interface related to a second user intent, and causing the first user interface or the second user interface to be presented.

[0004] While the above solutions offer a direction for achieving intent matching at the user interface content level, they still have the following technical problems: coarse granularity and limited templates. The solutions mainly switch at the overall interface template level, only allowing selection between predefined "first user interface" and "second user interface," and cannot perform dynamic layout optimization at the individual component level, lacking finer-grained rearrangement capabilities; lacking layout optimization mechanisms, the solutions do not address how to rearrange component positions within the interface structure to improve user interaction efficiency, and cannot personalize local layouts based on real-time user behavior under a unified UI template structure; Existing technologies still suffer from problems in user interface customization, such as coarse interaction granularity, poor local adjustability, lack of real-time performance and device-side adaptability. There is an urgent need for a dynamic UI reordering method that supports local AI inference, component-level reordering, layout optimization and local update mechanisms to achieve a truly efficient, detailed and personalized dynamic adaptation experience for user interfaces. Summary of the Invention

[0005] This invention provides an application interface rearrangement method, system, device, and medium based on artificial intelligence, aiming to solve the problems of coarse interaction granularity, poor local adjustability, lack of real-time performance and end-side adaptability in existing technologies.

[0006] To address the aforementioned technical problems, a first aspect of this invention proposes an application interface redesign method based on artificial intelligence, comprising the following steps: Construct an inference model to predict the user's current action intent or the click probability of each UI component; Collect interactive event features and environmental context features, and encode them into vectors after preprocessing; The vector is input into the inference model to generate the click probability or priority score for each UI component; Based on the model output, and following UI layout constraints and business rules, the optimal arrangement order of UI components is calculated using a layout optimization algorithm. Based on the optimal arrangement order, identify the components that have changed relative to the original interface and generate differential patches; Apply differential patches to perform partial UI updates, enabling dynamic interface rearrangement.

[0007] Preferably, the inference model is a lightweight deep learning model that uses a simplified self-attention mechanism based on a gated recurrent unit structure to enhance the expressive power of interactive behavior features.

[0008] Preferably, the interaction event features include the type of the user's most recent operations, the target component identifier, and the relative timestamp; the environmental context features include device status, time period, network connection status, geographical location, and UI context information of the current application interface.

[0009] Preferably, the layout optimization algorithm performs component arrangement optimization based on an objective function and constraints; wherein, the objective function is used to maximize the weighted sum of the component click probability and its interface position utility value; the constraints include: logical dependencies between components, interface hierarchy constraints, visual alignment and aesthetic requirements, and component animation transition restrictions.

[0010] Preferably, the layout optimization algorithm adopts the BP-Tree algorithm, which includes the following steps: Construct the current interface layout as a tree structure representing the hierarchy of UI components; Prioritize the set of optimizable components based on the component click probabilities output by the inference model; A branch and bound strategy is used to traverse all possible permutations and combinations, and the permutation scheme with the largest objective function value is searched under the condition of satisfying the constraints. The optimized local subsequences are merged back into the overall layout structure to generate the final arrangement result.

[0011] Preferably, the layout optimization algorithm is based on a directed acyclic graph structure constructed by the automatic layout engine, and includes the following steps: The interface layout engine is used to establish constraints for each UI component relative to other components; Based on the component weights output by the inference model, the priority of the layout constraints is dynamically adjusted or some constraints are added / deleted. The layout engine is triggered to re-solve the DAG constraint system, so that components with higher weights appear in prominent positions on the interface first; Under the premise of satisfying structural stability and user experience, the output component arrangement result conforms to the optimization objective function.

[0012] Preferably, the differential patch is generated by comparing the UI component identifiers, arrangement order, and layout parameters before and after the rearrangement; it includes the following types: insertion patch, deletion patch, movement patch, and attribute update patch, which are used to add new components, remove original components, adjust the order of components in the interface, and modify the size, style, or visibility attributes of components, respectively.

[0013] A second aspect of the present invention also proposes an application interface reordering system based on artificial intelligence, the system being used to implement the application interface reordering method based on artificial intelligence as described in the first aspect of the present invention, comprising: The feature acquisition module is used to collect user interaction event features and environmental context features, and to preprocess and vectorize them. The inference module is used to input the vectors into a locally deployed lightweight artificial intelligence model and output the click probability or user operation intent of each UI component. The layout optimization module is used to calculate the optimal arrangement order of UI components based on the model output results and in combination with the interface structure and business constraints. The patch generation module is used to compare the original interface with the optimized interface and generate differential patches that include insertion, deletion, movement or attribute updates. The UI update module is used to perform partial updates and partial rendering of the interface according to the patch list, so as to achieve dynamic reordering and ensure interface consistency and performance.

[0014] A third aspect of the present invention also provides an electronic device comprising: One or more processors; Memory, used to store one or more computer programs; One or more computer programs stored in the memory are executed by the one or more processors, causing the one or more processors to implement the application interface reordering method as described in the first aspect of the invention.

[0015] In a fourth aspect, the present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the application interface reordering method as described in the first aspect of the present invention.

[0016] Compared with the prior art, the present invention has the following technical effects: 1. The application interface reordering method proposed in this invention solves the problems of coarse granularity, high response latency, and lack of real-time personalization capabilities in the prior art by comprehensively utilizing user behavior modeling, layout optimization, and differential patch update mechanism. It optimizes the reordering by taking UI components as the basic unit. Compared with the existing method of only switching predefined interface templates, it can provide more detailed and flexible interface personalization adjustment, and improve user interaction efficiency and interface adaptability.

[0017] 2. The application interface rearrangement method proposed in this invention optimizes the structure of deep learning models, such as simplifying the attention mechanism and quantization compression through dual-layer GRU fusion. This invention supports the deployment of inference models on mobile devices for local execution without relying on cloud computing resources, and is adaptable to complex or weak network environments.

[0018] 3. The application interface reordering method proposed in this invention improves the controllability of the reordering effect through the BP-Tree layout optimization algorithm. Compared with the existing method based on layout engine weight adjustment, the BP-Tree algorithm can intelligently search for the optimal component arrangement scheme according to the click probability and utility function, under the premise of satisfying a series of UI structure and business constraints. The result is more interpretable and the behavior is more controllable.

[0019] 4. The application interface reflow method proposed in this invention reduces the impact of reflow on performance through differential patching mechanism. By identifying the minimum change range of component position or attribute, it performs partial updates only on the changed components, avoiding full page redraw, effectively improving interface refresh efficiency and avoiding flickering or jumping.

[0020] 5. The application interface reordering method proposed in this invention can achieve differential updates in traditional View systems through custom diff-patch logic, and can also efficiently complete local reordering in modern declarative UI frameworks such as Jetpack Compose and SwiftUI by utilizing the framework's built-in diff mechanism, thus having good cross-platform adaptability. Attached Figure Description

[0021] Figure 1 This is a flowchart illustrating the method described in this invention. Detailed Implementation

[0022] To make the objectives, technical solutions, and advantages of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below in conjunction with specific embodiments of the present application and with reference to the accompanying drawings.

[0023] Example 1 This embodiment describes an application interface rearrangement method based on artificial intelligence, such as... Figure 1 As shown, it includes the following steps one through six: Step 1: Build an inference model to predict the user's current operational intent or the click probability of each UI component.

[0024] Step 2: Collect interactive event features and environmental context features, and encode them into vectors after preprocessing.

[0025] Step 3: Input the vector into the inference model to generate the click probability or priority score of each UI component.

[0026] Step 4: Based on the model output, and following UI layout constraints and business rules, use a layout optimization algorithm to calculate the optimal arrangement order of UI components.

[0027] Step 5: Based on the optimal arrangement order, identify the components that have changed relative to the original interface and generate differential patches.

[0028] Step 6: Apply differential patch to partially update the UI and achieve dynamic interface rearrangement.

[0029] In step one, the constructed inference model is a lightweight deep learning model, which is based on a simplified self-attention mechanism fused with a gated recurrent unit structure to enhance the expressive power of interactive behavior features.

[0030] The deep learning model described in this invention employs a platform-independent core algorithm during the training phase, capable of learning and extracting general features. Conventional mobile devices typically have limited computing power, storage space, and battery life; therefore, unoptimized deep learning models are difficult to deploy directly. To deploy this model on mobile devices with relatively low computing power, this embodiment has lightweighted the model, employing a lightweight deep learning model to predict user intent or UI component click probabilities in real time.

[0031] The constructed inference model is a lightweight deep learning model, characterized by its ability to be deployed locally on terminal devices, low resource consumption, and excellent prediction performance. It is specifically designed for real-time prediction of user operation intentions or the click probability of various UI components in the interface, providing a basis for subsequent layout optimization and dynamic reordering. The model as a whole adopts a hybrid architecture based on a Gated Recurrent Unit (GRU) structure combined with a simplified self-attention mechanism. Combining time series modeling capabilities with context feature modeling capabilities, it can effectively extract key feature patterns from user interaction behavior sequences.

[0032] The model employs a two-layer GRU structure with an input dimension of 128 and 256 hidden units, and sets dropout=0.2 to prevent overfitting. The GRU structure can effectively handle the temporal dependencies of user action sequences, and is particularly suitable for capturing click preferences or behavioral trends that users may form over a period of interaction.

[0033] Following the GRU structure, the model introduces a simplified self-attention module to enhance its ability to focus on key interaction steps or important UI components. Its structural simplification strategy is as follows: Single-head attention: Retaining a single attention head avoids the resource consumption caused by multi-head computation; By omitting the Value projection and directly using the GRU output as the Value, one set of linear transformations is eliminated. Simplified Softmax normalization: Standardization is performed only after the dot product of Query and Key, eliminating unnecessary transformation processes.

[0034] To adapt to computing-constrained terminal devices such as mobile devices, the model has undergone comprehensive lightweight optimization while maintaining performance, including: With parameter control, the model has approximately 300,000 parameters after trimming. The model file is approximately 1.2MB in 32-bit floating-point format and approximately 300KB after quantization to INT8 format. Quantization compression, using 8-bit integer quantization technology, effectively reduces model size and memory usage; TinyML (Micro Machine Learning) optimizations, drawing on the lightweight design principles of MobileNet, compress the number of layers, reduce the number of hidden units, and optimize activation functions and memory access patterns; Local deployment: The model can be directly packaged into the application and deployed to run locally on mobile devices, supporting operation in offline environments that do not rely on the cloud; Inference performance is achieved with inference latency below 10ms when running on mainstream mobile chips such as Qualcomm Snapdragon or Apple ANE, and power consumption is extremely low.

[0035] The inference model is pre-trained on the server using large-scale user interaction data, and knowledge is transferred to a lightweight model through knowledge distillation to balance model compression and accuracy maintenance. The training process uses the Adam optimizer with parameters set to β1=0.9, β2=0.999, a learning rate of 1e-3, and a loss function of cross-entropy or the probability error of click-through rate prediction.

[0036] Ultimately, the model can output the click probability distribution for candidate UI components on the current screen, or the predicted intent score for the next user action, which can drive the subsequent component sorting and layout optimization process.

[0037] In this embodiment, the input data of the inference model consists of two main categories of features: user interaction event features and environmental and interface context features. These two types of features are fused to form a multi-dimensional feature vector characterizing the user's current state, which is then input into the deep learning model for prediction. The interaction event features include the type of the user's most recent operations, the target component identifier, and the relative timestamp. The environmental context features include device status, time period, network connection status, geographical location, and the UI context information of the current application interface.

[0038] The operation type indicates the type of user action, such as click, swipe, long press, zoom, etc., and is encoded using an enumeration type (e.g., click is 1, swipe is 2, etc.). The target component can be represented by an ID or category, which is the identifier of the UI component affected by the user's operation. It can be mapped to a dense vector through embedding. A relative timestamp represents the time interval between the current operation and the previous operation, used to capture the rhythm and activity level of interactions.

[0039] During implementation, the length of the interaction sequence can be freely set. For example, if it is set to the most recent N=5 operations, a sequence input is formed as shown in Table 1 below. Each time step corresponds to a set of event features.

[0040]

[0041] Table 1 Examples of User Interaction Records The aforementioned features will be encoded as sequence vectors. For example, operation types are encoded as dense vectors using one-hot or embedding methods; component IDs are mapped as dense embedding vectors (e.g., 16-dimensional); relative timestamps are normalized and used as continuous numerical inputs; each time step ultimately forms a 20-dimensional feature vector, and the entire interaction sequence forms a 5×20=100-dimensional input.

[0042] Environment and interface context features are used to supplement the background state information of the user during interaction, including but not limited to: current time period (e.g., "morning", "afternoon", "night"); geographical location or location type (e.g., "at home", "at work"); network connection status (Wi-Fi / cellular network); device status (e.g., battery level, high-performance mode on / off); user movement status (stationary, walking, running, determined by posture sensors); current interface module identifier (e.g., "home", "recommendation page", "personal center", etc.); and information on the list of components that can be optimized and their default order.

[0043] For example, at a certain moment, the following environmental context is collected: Time period, afternoon → one-hot encoding is [0,1,0]; Network status, Wi-Fi → encoding is 1; Battery level: 56% → normalized to 0.56; Current module: news_home → embedding vector dimension is 8; Optimizable component sequence: ["video_card", "weather_card", "music_card", "news_card"] → each mapping is independently embedded and then concatenated.

[0044] Taking a user's action at a certain moment as an example, the collected raw input data includes the following JSON format: { "click_sequence": [ {"component_id": "weather", "action": "tap", "timestamp": 1700845800}, {"component_id": "music", "action": "swipe", "timestamp": 1700845860}, {"component_id": "News", "action": "tap", "timestamp": 1700845920}, {"component_id": "video", "action": "swipe", "timestamp": 1700846000} ], "context_features": { "time_of_day": "15:30", "network_status": "WiFi", "location": "Xiamen", "battery_level": 0.85 }, "ui_state": { "visible_components": ["Weather","News","Music","Videos"], "screen_orientation": "portrait" } } The above content is preprocessed and encoded for features, then vectorized to form a set of multi-dimensional structured vectors, which are then input into the GRU+Attention structure for prediction.

[0045] After inference, the model outputs results in the following JSON format: { "predictions": [ {"component_id": "video", "click_probability": 0.42}, {"component_id": "News", "click_probability": 0.30}, {"component_id": "Weather", "click_probability": 0.15}, {"component_id": "music", "click_probability": 0.13} ], "ranking": ["videos","news","weather","music"] } Here, `click_probability` represents the system's prediction of the likelihood of a user clicking the component in the current context; the `ranking` field represents the component reordering priority sequence derived by the system based on the click probability. This output will serve as input for the layout optimization algorithm in subsequent steps, used to calculate the optimal arrangement order of each component in the interface, achieving personalized and dynamic interface reordering.

[0046] Step four describes a layout optimization algorithm that optimizes component arrangement based on an objective function and constraints. The objective function is used to maximize the weighted sum of the component click probability and its interface position utility value. The constraints include: logical dependencies between components, interface hierarchy constraints, visual alignment and aesthetic requirements, and component animation transition restrictions.

[0047] In this embodiment, the inference model outputs the click probability distribution (or intent weight score) of each UI component in the current interface in step three. Based on the output result, the system calls the layout optimization algorithm to rearrange the order of components without destroying the interface structure and logical dependencies, so as to improve user operation efficiency and the personalization of interface response.

[0048] Layout optimization is modeled as a constrained optimization problem with the objective function being:

[0049] Where C represents the set of components that can be rearranged in the current interface. Predict the probability for the component. The rearranged position The utility value can be modeled based on human-computer interaction experience, such as the higher utility value of the top and center areas of the screen.

[0050] In addition, secondary factors such as interface stability and cost of modification can be introduced into the optimization objectives to avoid frequent and drastic layout changes.

[0051] In this embodiment, the layout optimization algorithm adopts the BP-Tree algorithm, which includes the following steps: The current interface layout is constructed as a tree structure representing the hierarchy of UI components; the current interface layout is parsed into a view structure tree, where nodes represent UI components and edges represent hierarchical or sequential dependencies. Sibling components within the same container with variable order form a reorderable set of nodes. For example, in a vertically linear list, the components "Weather," "News," "Music," and "Videos" are sibling nodes at the same level, forming an optimizable node group.

[0052] Prioritize the set of optimizable components based on the click probabilities output by the inference model; assign weights to each component according to the click probabilities output by the inference model. Traverse the entire layout tree to identify the set of nodes whose weight order is inconsistent with the current order and does not violate constraints, and designate them as the sub-blocks that need to be optimized.

[0053] A branch-and-bound strategy is used to traverse possible permutations and combinations, searching for the permutation scheme with the largest objective function value under the constraints. For each optimizable node group, a state space tree is constructed, and possible component permutations are enumerated. A heuristic branch-and-bound strategy is adopted: each branch represents the current permutation selection; pruning is estimated using the upper bound of the current objective function score; if a permutation violates the constraints (such as breaking the fixed order), it is immediately discarded; the permutation scheme corresponding to the optimal solution of the objective function is retained.

[0054] The optimal arrangement of each sub-block is backfilled into the overall layout tree, preserving the original structure of the non-rearranged regions. For multiple independent rearranged blocks, optimization can be performed in parallel and the results merged. For each group of nodes requiring optimization, the BP-Tree finds the optimal arrangement order that maximizes the objective function and satisfies the constraints. Subsequently, the optimized sub-sequences are recombine back into their corresponding positions in the overall layout tree. If multiple independent regions need to be rearranged, each region is calculated separately, and the results are finally merged.

[0055] The optimized local subsequences are merged back into the overall layout structure to generate the final arrangement. The final output arrangement needs to undergo a constraint check to ensure that all hard constraints are satisfied. If an illegal structure is found (such as component positions going out of bounds or master-slave misorder), a minimal repair can be performed, such as restoring part of the original order or adjusting constraint priorities.

[0056] In another embodiment of the present invention, the layout optimization algorithm is solved based on the Directed Acyclic Graph (DAG) structure constructed by the automatic layout engine, and includes the following steps: The interface layout engine is used to establish constraints for each UI component relative to other components; Based on the component weights output by the inference model, the priority of the layout constraints is dynamically adjusted or some constraints are added / deleted. The layout engine is triggered to re-solve the DAG constraint system, so that components with higher weights appear in prominent positions on the interface first; Under the premise of satisfying structural stability and user experience, the output component arrangement result conforms to the optimization objective function.

[0057] If a directed acyclic graph (DAG) structure is used for solving the problem, instead of directly searching and sorting, the layout constraint parameters are adjusted to influence the order in which the interface is presented. For example, in Auto Layout, each component has a set of constraints relative to other components (top, bottom, left, and right relationships). By dynamically modifying the priority of certain constraints, adding / removing constraints, etc., the layout engine can automatically push high-weight components to more prominent positions when recalculating the layout. A simple example is that for a linear list, a higher-weight component can be given a higher "layout priority," causing the system's layout solver to tend to place it in the visible area or at the front. This essentially uses Auto Layout's DAG solution to satisfy the objective function—transforming the objective into appropriate constraint adjustments rather than explicit sorting. Of course, this method requires careful setting of constraints to avoid conflicts with existing rules. Compared to the BP-Tree algorithm, using Auto Layout DAG allows for faster integration but is slightly less flexible.

[0058] The following is an example of a BP-Tree layout optimization algorithm.

[0059] In this example, there are four sample components: "Weather", "News", "Music" and "Video". The inference model predicts that their click probabilities are 0.15, 0.30, 0.13 and 0.42, respectively. The component positions include top left, top right, bottom left and bottom right, with corresponding position utility values ​​of 0.90, 0.70, 0.50 and 0.30, respectively.

[0060] In BP-Tree construction and branch delimitation, the root node contains all components [weather, news, music, video]. A branching example is shown below: Branch 1 Video → Top left; Upper bound estimate: 0.42×0.90+(0.30+0.15+0.13)×0.70=0.781.

[0061] Branch 2 Video → Top right; Upper bound estimate: 0.42 + 0.70 + (0.30 + 0.15 + 0.13) × 0.90 = 0.816.

[0062] If the upper bound of a branch is less than the current best, then prune the branch.

[0063] Based on the example data above, obtain the objective function values ​​for various component arrangements. For example, the arrangement [top left - video, top right - news, bottom left - weather, bottom right - music] has contribution values ​​of 0.42 × 0.90 = 0.378, 0.30 × 0.70 = 0.210, 0.15 × 0.50 = 0.075, and 0.13 × 0.30 = 0.039 respectively. Therefore, the final objective function value for this combination is 0.378 + 0.210 + 0.075 + 0.039 = 0.702. Iterate through all combinations and obtain the combination with the largest objective function value.

[0064] After the layout optimization module outputs the new UI component arrangement, the system needs to compare the changes between the old and new layouts and generate a list of differential patches to update the interface with minimal scope. The core idea of ​​differential updates is to only re-render the UI components that have changed, while leaving the unchanged parts of the interface unchanged, thereby minimizing the overhead and flicker caused by interface refresh.

[0065] The differential patch is generated by comparing the UI component identifiers, arrangement order, and layout parameters before and after the rearrangement; it includes the following types: insertion patch, deletion patch, movement patch, and attribute update patch, which are used to add new components, remove original components, adjust the order of components in the interface, and modify the size, style, or visibility attributes of components, respectively.

[0066] Each UI component is bound to a unique identifier (such as a component ID or a key used in declarative UI frameworks) at build time. The system compares the old and new UI layout states and identifies the following types of changes: The order changes, the component IDs remain the same, but the arrangement position changes; Attribute changes, such as changes to visual attributes like component size, color, border, or visibility; A new component is added; its ID appears in the new layout but does not exist in the old layout. The component was deleted; its ID existed in the old layout but has been removed in the new layout.

[0067] Specifically, after the layout optimization algorithm provides a new component arrangement, it first needs to determine which components have changed position or attributes relative to the original interface. To do this, a unique identifier (e.g., component ID or key in declarative UI) is assigned to each UI component. The new layout result can typically be represented as a sequentially ordered list of component IDs and the target area / attribute for each component. This is then compared to the old layout state: component IDs and their order, and layout parameters are compared one by one. If a component ID has changed its order, position coordinates, or size relative to the old layout in the new layout, that component is marked as "needs to be updated." Additionally, if a new component is added (with an ID that did not previously exist) or a component is deleted, these are also recorded as additions or deletions, respectively. By traversing the entire component list, a change list (diff) can be collected, listing all affected components and their specific change types.

[0068] Based on the above difference identification results, the system constructs a differential patch list. Each patch instruction represents a minimal UI operation, mainly including: Insert: Inserts a new component at a specified position; Remove; removes the old component. Move (Reorder) adjusts the position of an existing component; UpdateProps updates the component's non-structural properties (such as style, size, and interaction state).

[0069] For example, if the new order is: Videos, News, Weather, Music, and the old order is: Weather, News, Music, Videos, then the "Videos" component can be identified as moving from the last to the first position, and the following patch will be generated: [ {"type": "Move", "component_id": "video", "from": 3, "to": 0} ] The patch list will be sorted by operation type (usually delete first, then move, and finally insert) to avoid view confusion caused by the execution order.

[0070] The system performs patch operations item by item through the UI update management module, as follows: Insert calls UI framework interfaces, such as addView() or addComposable(), to insert a new component at the target location; Remove: Removes the view of the specified component. Move: For example, on the Android platform, calling RecyclerView.notifyItemMoved() triggers an animation reflow; in declarative frameworks, it updates the component key binding order, which is then automatically reorganized by the system. UpdateProps adjusts the component's LayoutParams or bound state data, such as modifying the width or highlight status.

[0071] To ensure consistency, the patch application process is executed as a transaction to avoid a "half-update" state occurring midway.

[0072] In this embodiment, a "minimum redraw" strategy is preferred when performing patch operations: After the patch is applied, only the local layout and drawing of the affected containers are triggered; In the native Android UI, requestLayout() and invalidate() are called to target the changing subtree; In declarative UI frameworks like Jetpack Compose or SwiftUI, partial recomposition is triggered by updating state, with the framework automatically diffing and redrawing. Only the latest UI state description needs to be provided; the framework's internal recomposition mechanism calculates the differences between the old and new UI trees and performs the necessary UI updates. For example, in Jetpack Compose, the new arrangement and properties of components are used as input states to the composition function. When these states are updated, Compose re-executes the composition function, builds a new UI tree, and automatically compares the old and new UI hierarchies (this process is done by comparing the keys and values ​​of each Composable). The Compose framework only recombines the changed parts of the UI, skipping redraws of unchanged parts, thus achieving an effect similar to manual Diff-Patch. Similarly, the SwiftUI framework also has a View Diffing algorithm: when the bound state data is updated, SwiftUI diffs the new and old view trees, identifies the UI elements that need modification, and updates them efficiently.

[0073] For scenarios where these declarative frameworks are not used, the Diff-Patch process can be implemented by performing patch operations line by line as described above, ensuring the minimum scope of updates.

[0074] In this way, the system can efficiently update the interface, avoiding the flickering and performance overhead caused by full-page refresh.

[0075] Testing multiple component changes in the prototype system showed that partial updates save over 40% of rendering time on average compared to full-page refreshes; the user interface exhibits no noticeable flickering and maintains a smooth 60FPS during interaction; it supports application in traditional View layouts and declarative frameworks, demonstrating strong adaptability.

[0076] During the implementation of this invention, detailed tests were conducted on inference performance. Due to the small model size and quantization optimization, inference on mainstream mobile chips is highly efficient, achieving millisecond-level latency. In actual testing, the model was deployed on the Qualcomm Snapdragon 8 series mobile platform, and accelerated by calling the Hexagon DSP / NPU hardware unit. Each inference took approximately 5–10 milliseconds. Even when only CPU cores were used (e.g., in mid-to-low-end mobile SoCs), an inference cycle could be completed within 20 milliseconds, with no perceptible latency to the user interface. Regarding power consumption, since the inference time is extremely short and most operations are performed by the efficient tensor acceleration unit, the additional power consumption is negligible. Actual measurements showed that the energy consumption of a single inference cycle on the Snapdragon chip accounted for only a few percentage points of the total frame refresh cycle power consumption, having a minimal impact on battery life. Similar results were observed when running on Apple's Apple Neural Engine (ANE). After converting the model to Core ML format and testing on an iPhone, a single inference cycle typically completed in less than 5 milliseconds. ANE's dedicated low-power design ensures that multiple consecutive inference cycles have a negligible impact on device heat and power consumption. Therefore, local AI inference does not impose a significant performance burden while ensuring real-time performance.

[0077] Multiple rounds of testing were also conducted on the prototype system, and key metrics on user interaction and system performance before and after the interface redesign were collected: Increased Click-Through Rate: Dynamic reflow significantly improved the click probability of target components. Taking a news app as an example, after a period of personalized reflow, the probability of users clicking on news categories they were interested in increased by an average of over 15%. This indicates that the system more accurately displays the content users want to see in advance. In e-commerce recommendation scenarios, the click-through rate of products also increased by about 10% after reflow, indicating that users are more likely to discover products they might purchase. Overall, personalized UI layouts reduce the number of interaction steps required by users, and click-through conversion rates are significantly improved compared to static layouts.

[0078] Interface smoothness (frame rate): By monitoring the impact of UI reflow on interface smoothness, test results show that, regardless of whether it's a flagship phone or a mid-range model, the frame rate remains at a full 60 FPS during dynamic reflow operations, with no perceptible stuttering. This is thanks to the partial update strategy and efficient rendering employed in this embodiment; most frames reuse existing UI elements, with only components whose positions have changed being rearranged and rendered. Even during the reflow, due to the limited number of components involved and the rapid computation, the frame drop rate is almost zero, and the user experience remains smooth throughout the interaction.

[0079] Power Consumption Changes: The overall power consumption of the application did not show a significant increase after introducing this solution. A comparison of battery consumption was made between enabling and disabling dynamic reflow. A one-hour continuous test showed that the power consumption difference was within the statistical error range (no more than 3%). This is because model inference and UI reflow consume very few resources and are triggered infrequently (only once when a significant change in user intent is detected or a new scene is entered). Furthermore, since personalized layouts reduce the time users spend on uninteresting interfaces, they also reduce the energy consumed by ineffective browsing to some extent; therefore, it can be considered that there is almost no negative impact on power consumption.

[0080] Cold start time difference: We measured the application's cold start time, which is the latency from when the user clicks the application icon to when the interface is fully displayed. With the local model loaded and initial inference performed, the cold start time increased slightly compared to when this feature was not present, but the increase was minimal. In the optimized version, model loading and inference are performed asynchronously during the gap between the splash screen and the homepage display. The measured total cold start time increased by only about 50 milliseconds (negligible compared to the typical 2-3 second startup time). Therefore, users can hardly perceive the change in startup latency. Furthermore, the results of the initial inference can be used to customize the interface immediately upon application launch, improving the fit of the initial screen content and potentially indirectly reducing the time users spend searching within the application later.

[0081] For model deployment, this embodiment adopts an edge deployment strategy, directly integrating the model into the mobile app. For the Android platform, the model file (e.g., a .tflite file in TensorFlow Lite format) is packaged into the APK resources and loaded into memory when the application starts or is needed, with predictions executed by the local inference engine. On the Android side, the NNAPI (Neural Networks API) is prioritized to call the device's neural network acceleration hardware for efficient inference. On devices supporting NNAPI, the model automatically runs on the DSP / NPU, ensuring minimal latency and power consumption. On devices that do not support dedicated AI acceleration, the TFLite interpreter runs on the CPU, still meeting real-time requirements. For the iOS platform, the model is converted to .mlmodel format using Core ML tools and embedded in the application bundle, then loaded and executed using the Core ML framework. Core ML automatically utilizes Apple's ANE or GPU for model computation, thereby accelerating the inference process. Furthermore, model deployment adopts an offline working mode, meaning all computations are completed locally without server requests. This not only improves response speed but also protects user privacy (user behavior data does not need to be uploaded to the cloud). Model updates can be achieved by distributing new model files through application version upgrades, or by using a federated learning mechanism for low-frequency local training and updates in the background to adapt to individual user differences. Simultaneously, differential privacy measures are used to aggregate model improvements without transmitting sensitive data. This edge deployment and update strategy ensures the model's continued effectiveness and adaptability while minimizing reliance on the network and backend.

[0082] Example 2 This embodiment is an application interface reordering system based on artificial intelligence. The system is used to implement the application interface reordering method as described in Embodiment 1, including: The feature acquisition module is used to collect user interaction event features and environmental context features, and to preprocess and vectorize them. The inference module is used to input the vectors into a locally deployed lightweight artificial intelligence model and output the click probability or user operation intent of each UI component. The layout optimization module is used to calculate the optimal arrangement order of UI components based on the model output results and in combination with the interface structure and business constraints. The patch generation module is used to compare the original interface with the optimized interface and generate differential patches that include insertion, deletion, movement or attribute updates. The UI update module is used to perform partial updates and partial rendering of the interface according to the patch list, so as to achieve dynamic reordering and ensure interface consistency and performance.

[0083] Example 3 This embodiment is an electronic device, including: One or more processors; Memory, used to store one or more computer programs; One or more computer programs stored in the memory are executed by the one or more processors, causing the one or more processors to implement the application interface reordering method as described in Embodiment 1.

[0084] Example 4 This embodiment is a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the application interface rearrangement method as described in Embodiment 1.

[0085] The above description is only a preferred embodiment of the present invention. It should be noted that those skilled in the art can make several modifications and improvements without departing from the inventive concept of the present invention, and these all fall within the protection scope of the present invention.

Claims

1. An application interface rearrangement method based on artificial intelligence, characterized in that, Includes the following steps: Construct an inference model to predict the user's current action intent or the click probability of each UI component; Collect interactive event features and environmental context features, and encode them into vectors after preprocessing; The vector is input into the inference model to generate the click probability or priority score for each UI component; Based on the model output, and following UI layout constraints and business rules, the optimal arrangement order of UI components is calculated using a layout optimization algorithm. Based on the optimal arrangement order, identify the components that have changed relative to the original interface and generate differential patches; Apply differential patches to perform partial UI updates, enabling dynamic interface rearrangement.

2. The method according to claim 1, characterized in that, The inference model is a lightweight deep learning model that uses a simplified self-attention mechanism based on a gated recurrent unit structure to enhance the expressive power of interactive behavior features.

3. The method according to claim 1, characterized in that, The interactive event features include the type of the user's most recent operations, the target component identifier, and the relative timestamp. The environmental context features include device status, time period, network connection status, geographical location, and UI context information of the current application interface.

4. The method according to claim 1, characterized in that, The layout optimization algorithm performs component arrangement optimization based on an objective function and constraints; wherein, the objective function is used to maximize the weighted sum of the component click probability and its interface position utility value; the constraints include: logical dependencies between components, interface hierarchy constraints, visual alignment and aesthetic requirements, and component animation transition restrictions.

5. The method according to claim 1, characterized in that, The layout optimization algorithm uses the BP-Tree algorithm and includes the following steps: Construct the current interface layout as a tree structure representing the hierarchy of UI components; Prioritize the set of optimizable components based on the component click probabilities output by the inference model; A branch and bound strategy is used to traverse all possible permutations and combinations, and the permutation scheme with the largest objective function value is searched under the condition of satisfying the constraints. The optimized local subsequences are merged back into the overall layout structure to generate the final arrangement result.

6. The method according to claim 1, characterized in that, The layout optimization algorithm is based on a directed acyclic graph structure constructed by an automatic layout engine and includes the following steps: The interface layout engine is used to establish constraints for each UI component relative to other components; Based on the component weights output by the inference model, the priority of the layout constraints is dynamically adjusted or some constraints are added / deleted. The layout engine is triggered to re-solve the DAG constraint system, so that components with higher weights appear in prominent positions on the interface first; Under the premise of satisfying structural stability and user experience, the output component arrangement result conforms to the optimization objective function.

7. The method according to claim 1, characterized in that, The differential patch is generated by comparing the UI component identifiers, arrangement order, and layout parameters before and after the rearrangement; The following types are included: insert patch, delete patch, move patch, and property update patch, which are used to add new components, remove existing components, adjust the order of components in the interface, and modify the size, style, or visibility properties of components, respectively.

8. An application interface redesign system based on artificial intelligence, characterized in that, The system is used to implement the application interface rearrangement method as described in any one of claims 1-7, including: The feature acquisition module is used to collect user interaction event features and environmental context features, and to preprocess and vectorize them. The inference module is used to input the vectors into a locally deployed lightweight artificial intelligence model and output the click probability or user operation intent of each UI component. The layout optimization module is used to calculate the optimal arrangement order of UI components based on the model output results and in combination with the interface structure and business constraints. The patch generation module is used to compare the original interface with the optimized interface and generate differential patches that include insertion, deletion, movement or attribute updates. The UI update module is used to perform partial updates and partial rendering of the interface according to the patch list, so as to achieve dynamic reordering and ensure interface consistency and performance.

9. An electronic device, comprising: One or more processors; Memory, used to store one or more computer programs; The feature is that one or more computer programs stored in the memory are executed by the one or more processors, causing the one or more processors to implement the application interface reordering method as described in any one of claims 1-7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the application interface rearrangement method as described in any one of claims 1-7.

Images