Data-driven client-side page rendering systems, methods, media, terminals, and application products

Abstract

This application provides a data-driven client-side page rendering system, method, medium, terminal, and program product. The system includes: a network layer for acquiring multimodal data streams output by an artificial intelligence server and converting the multimodal data streams into standard data packets; a data management layer for constructing a data model based on the received standard data packets and assigning version numbers to the structured data in the data model for data version management; an event notification layer for detecting changes in the received structured data and generating event notification instructions based on the detected data changes; and a user interface rendering layer for rendering the user interface based on the received event notification instructions. This application enables real-time incremental data management and precise user interface refresh under streaming protocols, improving page rendering efficiency.

Description

Technical Field

[0001] This application relates to the field of page rendering technology, and in particular to a data-driven client-side page rendering system, method, medium, terminal, and program product. Background Technology

[0002] With the increasing prevalence of large-scale AI models (such as GPT, Claude, Gemini, etc.) in mobile applications, more and more AI conversational apps (such as AI assistants, AI search, intelligent customer service, etc.) need to display multimodal content generated by server-side large-scale models in real time on mobile devices.

[0003] In such applications, the server typically pushes streaming data generated by a large model continuously via Server-Sent Events (SSE) or WebSocket. This data may include: continuously generated text content, real-time speech recognition or synthesized segments, images, tables or structured data, and inference states and control signals.

[0004] However, existing mobile rendering mechanisms still have the following problems when dealing with such real-time, multimodal, and incremental data streams:

[0005] (1) High coupling between data and UI (User Interface) rendering: Most current apps update interface components (such as RecyclerView, ListAdapter, SwiftUI View List, etc.) directly after receiving SSE events, lacking an intermediate data layer; this architecture will trigger a complete redraw or rebinding of the view every time the data changes, resulting in high performance overhead;

[0006] (2) Lack of a unified data model and version management mechanism: Due to the scattered multimodal data formats and the lack of standardized structure definition and version tracking mechanism, the client cannot compare the differences between different data versions, resulting in difficulties in incremental calculation;

[0007] (3) Insufficient recognition of data change granularity: When a large model only updates a part of the content, such as adding rows to a table, extending the audio stream, or generating a part of an image, the client usually cannot recognize the specific change location, resulting in only a whole refresh, which in turn causes problems such as interface jumping, display lag, and scrolling interruption.

[0008] (4) The multimodal asynchronous rendering process is complex: During the model generation process, text, images and audio arrive alternately, and it is difficult for mobile devices to schedule and render them in a unified manner, resulting in chaotic interface updates and a lack of a unified data change-view refresh path mechanism to solve the problem.

[0009] Therefore, it is necessary to provide a data-driven client-side page rendering system, method, medium, terminal, and program product to solve the aforementioned problems in the prior art. Summary of the Invention

[0010] In view of the shortcomings of the prior art described above, the purpose of this application is to provide a data-driven client-side page rendering system, method, medium, terminal and program product to solve the technical problems of high coupling between data and UI rendering, lack of unified data model and version management mechanism, insufficient identification of data change granularity and complex multimodal asynchronous rendering process in the prior art.

[0011] To achieve the above and other related objectives, a first aspect of this application provides a data-driven client-side page rendering system, comprising: a network layer for acquiring multimodal data streams output by an artificial intelligence server and converting the multimodal data streams into standard data packets; a data management layer for constructing a data model based on the received standard data packets and assigning version numbers to the structured data in the data model for data version management; an event notification layer for detecting changes in the received structured data and generating event notification instructions based on the detected data changes; and a user interface rendering layer for rendering the user interface based on the received event notification instructions.

[0012] In some embodiments of the first aspect of this application, the network layer includes: a communication management unit, configured to establish a long connection with an artificial intelligence server to receive the multimodal data stream sent by the artificial intelligence server; a data parsing unit, configured to identify and segment the received multimodal data stream according to its data type to obtain data fragments; and a data distribution unit, configured to encapsulate the parsed data fragments into a unified data structure to obtain encapsulated standard data packets, and send them to the data management layer.

[0013] In some embodiments of the first aspect of this application, the data management layer includes: a data model building unit, configured to classify standard data packets output by the data distribution unit into corresponding sessions to build a data model; the session includes multiple message nodes; each message node has a message ID; a version management unit, configured to generate a version number and hash value for each message node; and perform difference calculation based on the new and old hash values ​​of message nodes with the same message ID using a Diff algorithm to determine whether the content of the message node has changed; if it has not changed, it is ignored; if it has changed, the version number of the message node is updated, and version difference metadata is generated.

[0014] In some embodiments of the first aspect of this application, the data management layer further includes: a hierarchical storage unit for storing active data in the current session in a memory cache and writing complete historical session and message snapshots to a local database; an index table creation unit for creating an index table based on session ID, message ID, data type, and version number; and a state recovery and synchronization unit for loading data from the local database to re-establish the session state after the mobile application restarts and reporting the version number to the artificial intelligence server.

[0015] In some embodiments of the first aspect of this application, the event notification layer includes: a data difference detection unit, configured to perform difference detection on message nodes of new and old versions based on a Merkle tree, and generate difference data to locate the node with the smallest change; an event generation unit, configured to generate standardized event objects according to the change type of the difference data; each standardized event object has a unique identifier, difference information and a timestamp of the node with the smallest change; and an event scheduling and dispatching unit, configured to sort the received standardized event objects according to a preset priority strategy, generate an event notification instruction according to the sorted priority queue, and dispatch the event notification instruction to the user interface rendering layer.

[0016] In some embodiments of the first aspect of this application, the user interface rendering layer includes: a view node mapping table construction unit, configured to construct a view node mapping table based on the correspondence between each message node and a user interface component; a rendering driver unit, configured to parse the event notification instruction dispatched by the event scheduling and dispatching unit, and search for the corresponding user interface component based on the parsed target node identifier and the view node mapping table; and a minimum rendering update unit, configured to issue an update instruction to the found user interface component, so that the user interface component performs a rendering operation according to the update instruction.

[0017] To achieve the above and other related objectives, a second aspect of this application provides a data-driven client-side page rendering method, comprising: acquiring a multimodal data stream output by an artificial intelligence server and converting the multimodal data stream into a standard data packet; constructing a data model based on the received standard data packet and assigning version numbers to the structured data in the data model for data version management; detecting changes in the received structured data and generating an event notification instruction based on the detected data changes; and rendering the user interface based on the received event notification instruction.

[0018] To achieve the above and other related objectives, a third aspect of this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method.

[0019] To achieve the above and other related objectives, a fourth aspect of this application provides a computer program product comprising computer program code that, when executed on a computer, causes the computer to implement the method.

[0020] To achieve the above and other related objectives, a fifth aspect of this application provides an electronic terminal, including a memory, a processor, and a computer program stored in the memory; the processor executes the computer program to implement the method.

[0021] As described above, the data-driven client-side page rendering system, method, medium, terminal, and program product of this application have the following beneficial effects:

[0022] (1) By adopting a layered architecture of network layer - data management layer - event notification layer - user interface rendering layer, each layer has clear responsibilities, clear functions, low coupling, decouples data flow and rendering, improves the scalability of the system, and designs an event notification layer to realize logical isolation between data changes and user interface rendering.

[0023] (2) By designing the network layer, the multimodal data stream from the artificial intelligence server is obtained and converted into standard data packets. The data management layer establishes a data model for the received standard data packets to achieve unified structured data management. At the same time, version numbers are assigned to the structured data for data version management, which facilitates comparison of differences between different data versions.

[0024] (3) By designing an event notification layer to detect changes in the received structured data and generating event notification instructions based on the detected data changes, it is possible to identify the specific nodes where data changes have occurred. Only the nodes where data changes have been detected need to be updated, which improves the ability to identify the granularity of data changes.

[0025] (4) By designing a user interface rendering layer to render the user interface according to the received event notification instructions, the interface changes are clear, the rendering process is smooth, and the transition is natural. This reduces the complexity of the multimodal asynchronous rendering process. Attached Figure Description

[0026] Figure 1 The diagram shown is a block diagram of a data-driven client-side page rendering system according to an embodiment of this application.

[0027] Figure 2 The diagram shown illustrates the working principle of a data-driven client-side page rendering system according to one embodiment of this application.

[0028] Figure 3The diagram shown is a flowchart of a data-driven client-side page rendering method according to an embodiment of this application.

[0029] Figure 4 The diagram shown is a structural schematic of an electronic terminal according to an embodiment of this application. Detailed Implementation

[0030] The following specific examples illustrate the implementation of this application. Those skilled in the art can easily understand other advantages and effects of this application from the content disclosed in this specification. This application can also be implemented or applied through other different specific embodiments, and various details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of this application. It should be noted that, unless otherwise specified, the following embodiments and features in the embodiments can be combined with each other.

[0031] In the embodiments of this application, terms such as "first" and "second" are used to distinguish identical or similar items with essentially the same function and effect. For example, "first XX" and "second XX" are merely used to distinguish different XXs and do not limit their order. Those skilled in the art will understand that terms such as "first" and "second" do not limit the quantity or execution order, and that "first" and "second" do not necessarily imply that they are different.

[0032] It should be noted that, in the embodiments of this application, the words "exemplary" or "for example" indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary" or "for example" in this application should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary" or "for example" is intended to present the relevant concepts in a concrete manner.

[0033] In this application embodiment, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone, where A and B can be singular or plural. The character " / " generally indicates that the preceding and following related objects are in an "or" relationship. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can represent: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or multiple.

[0034] Before providing a further detailed description of the present invention, the nouns and terms used in the embodiments of the present invention are explained, and the nouns and terms used in the embodiments of the present invention are subject to the following interpretations:

[0035] <1> User Interface (UI) refers to the medium through which users interact with computer systems, devices, or applications. It includes visual elements (such as icons, buttons, and layouts), multi-sensory elements (such as haptic vibrations, audio prompts, and gesture recognition), operational controls (such as keyboards, touchscreens, or voice input), and feedback mechanisms (such as prompts and animations), aiming to provide an intuitive, efficient, and barrier-free interactive experience.

[0036] <2> The Diff algorithm is an algorithm used to compare the differences between the old and new virtual DOM (Document Object Model) and update the real DOM based on these differences.

[0037] <3> Merkle Tree: A tree-like data structure designed to efficiently and securely verify the integrity and consistency of data. It solves the problem of verifying the existence of specific data in a large dataset by constructing a root hash through layer-by-layer hashing of data blocks. Each leaf node of the Merkle tree stores the hash value of the original data, while the value of the non-leaf nodes is calculated by combining the hash values ​​of their child nodes, ultimately forming a single hash value called the Merkle root.

[0038] <4> SSE (Server-Sent Events) protocol: It is a technology that allows the server to actively push data to the client. Based on the HTTP protocol, it allows the server to send data to the client in the form of an event stream. The client can receive the data pushed by the server in real time by establishing a persistent HTTP connection and listening to the event stream. It is a more lightweight option and is particularly suitable for one-way communication scenarios from server to client.

[0039] <5> WebSocket protocol: It is a network communication protocol designed to enable real-time bidirectional communication between browsers and servers. It is built on top of the TCP protocol and reuses the HTTP handshake channel.

[0040] To facilitate understanding of the embodiments of this application, in conjunction with Figure 1 and Figure 2 Detailed explanation. Figure 1 A block diagram of a data-driven client-side page rendering system according to an embodiment of the present invention is shown. Figure 2This illustration shows a schematic diagram illustrating the working principle of a data-driven client-side page rendering system according to an embodiment of the present invention. The data-driven client-side page rendering system 100 in this embodiment includes: a network layer 101, a data management layer 102, an event notification layer 103, and a user interface rendering layer 104. By designing a bottom-up four-layer architecture, from the bottom-level network data flow access to the top-level precise rendering of the user interface, each layer is decoupled, reducing performance overhead. For ease of description, the user interface will be referred to as UI below.

[0041] Network layer 101 is used to acquire the multimodal data stream output by the artificial intelligence server and convert the multimodal data stream into standard data packets.

[0042] Through the design of the network layer, which serves as the underlying data access layer of the data-driven client-side page rendering system in this application, it is responsible for establishing a continuous connection with the artificial intelligence server and continuously receiving and parsing the multimodal data streams pushed by the artificial intelligence server. During the AI ​​dialogue process on the mobile client, the server will send different types of data in a streaming manner, including but not limited to: text, voice, images, tables, control commands, etc., ensuring that the system can maintain data consistency and order even under weak network conditions, disconnection and reconnection, or multi-source data input.

[0043] In some embodiments of this application, the network layer includes: a communication management unit, configured to establish a long connection with an artificial intelligence server to receive the multimodal data stream sent by the artificial intelligence server; a data parsing unit, configured to identify and segment the received multimodal data stream according to its data type to obtain data fragments; and a data distribution unit, configured to encapsulate the parsed data fragments into a unified data structure to obtain encapsulated standard data packets, and send them to the data management layer.

[0044] Specifically, the communication management unit establishes a long-lived connection with the AI ​​server, for example, receiving multimodal data streams output by the AI ​​server based on the SSE or WebSocket protocol, supporting reconnection, resume interrupted downloads, and stream caching. The data parsing unit automatically identifies data types such as text, images, voice, tables, and charts, and segments and parses the streaming multimodal data according to data type to obtain data fragments. The data distribution unit encapsulates the parsed raw data fragments into a unified data structure, with a unified data structure format such as JSON and Protobuf, and sends the encapsulated standard data packet (containing metadata such as type identifier, version number, timestamp, and hash digest) to the data management layer as input for subsequent storage and computation. It should be understood that JSON is a lightweight, text-based data exchange format; Protobuf is a binary serialization format whose core idea is to first define the "schema" of the data and then only transmit the data itself.

[0045] In this embodiment, a lightweight SSE client is used for encapsulation, which supports block stream parsing; a frame splicing mechanism is adopted for the voice stream to ensure real-time performance; it has error recovery and retransmission capabilities to ensure stability; it merges, reassembles, and verifies the integrity of the data fragments; and for large amounts of data such as voice or images, it also supports breakpoint resumption and segment confirmation mechanisms to ensure the integrity and order of data arrival.

[0046] The data management layer 102 is used to construct a data model based on the received standard data packet and assign version numbers to the structured data in the data model for data version management.

[0047] Through the design of the data management layer, this layer is responsible for the structured storage, version management and persistence of multimodal data streams, providing a stable, high-speed and replayable data foundation, and providing an accurate data source for the difference detection of the event notification layer and UI updates.

[0048] In some embodiments of this application, the data management layer includes: a data model building unit, used to classify the standard data packets output by the data distribution unit into corresponding sessions to build a data model; the session includes multiple message nodes; each message node has a message ID; a version management unit, used to generate a version number and hash value for each message node; and based on the Diff algorithm, perform difference calculations according to the old and new hash values ​​of message nodes with the same message ID to determine whether the content of the message node has changed; if it has not changed, it is ignored; if it has changed, the version number of the message node is updated, and version difference metadata is generated.

[0049] In this embodiment, the data model construction unit categorizes standard data packets into corresponding sessions. Each session consists of a group of message nodes, each with a unique identifier (message ID), data type (text, image, audio, table, etc.), content body, version number, hash value, and child node structure. For complex data types, such as tables or mixed text and images, message nodes are managed in a tree structure, allowing the system to independently identify and update local nodes. The version management unit assigns an auto-incrementing version number to each message node and generates a unique hash value based on the node content and child node hashes to support Diff algorithm calculations. Specifically, when new data arrives, the Diff algorithm compares the old and new hash values. If the hash values ​​are the same, it means the content of the new data has not changed, and the update is ignored. If the hash values ​​are different, the version number of the new data is updated, and the nodes that have changed are accurately identified, generating version difference metadata. This version difference metadata indicates which node has changed what, thus enabling rapid location of data change points without the need for a full scan or redrawing of the entire data structure.

[0050] In some embodiments of this application, the data management layer further includes: a hierarchical storage unit, used to store active data in the current session in a memory cache and write complete historical session and message snapshots to a local database; an index table creation unit, used to create an index table based on session ID, message ID, data type, and version number; and a state recovery and synchronization unit, used to load data from the local database to re-establish the session state after the mobile application restarts and report the version number to the artificial intelligence server.

[0051] Specifically, the tiered storage unit employs a two-tiered storage mechanism: a memory cache and a persistent database. The memory cache stores active data required for real-time rendering in the current session, providing fast read speeds. The local database within the tiered storage unit, such as Room, Realm, or CoreData, persistently stores complete historical session and message snapshots for subsequent offline access and state replay. The index table creation unit builds an index table based on session ID, message ID, data type, and version number, supporting partial queries. When the mobile application is interrupted or the network is lost, the state recovery and synchronization unit re-establishes the session state based on the persistent version information, restoring it to the breakpoint. Simultaneously, a version confirmation mechanism is supported, reporting the last synchronized version number to the server during reconnection for differential synchronization rather than full data re-upload.

[0052] In this embodiment, a serializable data structure (such as JSON Patch) is used to support efficient Diff algorithm calculation; multimodal data streams are stored in layers (text inline, media asynchronous loading); and playback and breakpoint recovery capabilities are provided.

[0053] The event notification layer 103 is used to detect changes in the received structured data and generate event notification instructions based on the detected data changes.

[0054] Through the design of the event notification layer, this layer can detect data changes and trigger precise component-level update events. Based on the aforementioned version number and hash information, it automatically detects incremental changes in data and transforms the changes into precise event notifications to drive the UI rendering layer. Furthermore, the event notification layer achieves logical isolation between data changes and UI rendering through a unified event protocol (Event Dispatcher). Simultaneously, this layer achieves intelligent bridging between data changes and UI updates through hash differentials and event dispatch mechanisms.

[0055] In some embodiments of this application, the event notification layer includes: a data difference detection unit, used to perform difference detection on message nodes of new and old versions based on Merkle tree, and generate difference data to locate the node with the smallest change; an event generation unit, used to generate standardized event objects according to the change type of the difference data; each standardized event object has a unique identifier, difference information and timestamp of the node with the smallest change; and an event scheduling and dispatching unit, used to sort the received standardized event objects according to a preset priority strategy, generate an event notification instruction according to the sorted priority queue, and dispatch the event notification instruction to the user interface rendering layer.

[0056] Specifically, based on session context registration listening rules, the status of message nodes in the data management layer is continuously monitored. Once the data management layer completes version management and hash calculation for new message nodes, a data difference detection unit is triggered. When a new version of the data arrives, the data difference detection unit performs difference detection on the old and new versions of the message nodes using a Merkle tree. First, the hash values ​​of the root nodes are compared. If the hash values ​​of the root nodes match, it means the data has not changed. If the hash values ​​of the root nodes do not match, the hash values ​​of the child nodes are recursively compared layer by layer to locate the node with the smallest change, such as message text appending, image link updates, or table cell modifications, and then the difference data is generated. This reduces the difference detection complexity from O(n²) to O(n). In other words, a Merkle tree is used to maintain the message nodes.

[0057] When a data change is detected, the event generation unit maps it to a specific, standardized event object based on the type of change, such as text appending, voice status change, or table cell update. Examples of such events include text appending, image ready, audio status change, and table update. Each event object has a unique identifier for the smallest changed node, difference information, and a timestamp. In other words, the event generation unit maps each data change to an item-level event. It should be understood that item-level events are a fine-grained event notification mechanism used in software architecture, particularly in models that separate data processing from UI rendering. When the underlying data state of the application changes, the system does not simply send a general "data has changed" signal, but rather precisely identifies the individual data entity (i.e., "Item") that has changed and clearly describes the specific type and content of the change that occurred.

[0058] To ensure user experience, the event scheduling and dispatch unit receives all generated events and sorts them according to a preset priority strategy. For example, real-time perceptible events (voice playback status, image completion) are set as high priority and dispatched immediately; continuous update events (text stream appending) can be batched for a short time (e.g., 50~200ms delay merging) to reduce rendering frequency; historical playback events are low priority and are executed during idle periods. The events are asynchronously dispatched to the UI rendering layer according to the sorted priority queue, supporting parallel event dispatch and merging optimization, avoiding rendering jitter, and ensuring that the system can still run stably in high-frequency data input scenarios.

[0059] In addition, a unified event bus protocol is defined, and the UI rendering layer receives data changes by subscribing to events of the corresponding type. This event bus and subscription mechanism achieves complete decoupling of data logic and display logic, providing convenience for cross-platform expansion.

[0060] User interface rendering layer 104 is used to render the user interface according to the received event notification instructions.

[0061] Through the design of the user interface rendering layer, which is the part of the interface directly perceived by the user, it is responsible for receiving event notification instructions from the event notification layer and performing precise component-level updates to achieve the smallest granularity of interface updates. At the same time, the UI rendering layer transforms changes in event data into visual updates with minimal cost, realizing a precise mapping from data to UI, enabling AI-generated multimodal content to be dynamically presented on mobile clients with extremely low latency.

[0062] In some embodiments of this application, the user interface rendering layer includes: a view node mapping table construction unit, used to construct a view node mapping table based on the correspondence between each message node and a user interface component; a rendering driving unit, used to parse the event notification instructions dispatched by the event scheduling and dispatching unit, and to find the corresponding user interface component based on the parsed target node identifier and the view node mapping table; and a minimum rendering update unit, used to issue update instructions to the found user interface component, so that the user interface component performs rendering operations according to the update instructions.

[0063] Specifically, the view node mapping table constructed by the view node mapping table construction unit records the correspondence between each message node and UI components (such as message bubbles, image units, voice controls, and table rows). When an event is received, the rendering driver unit parses the event notification instruction and finds the corresponding UI component based on the parsed target node identifier. It is responsible for selecting the rendering strategy according to the event type. The minimum rendering update unit issues update instructions to the found UI components, updating only the affected components or subtrees and performing partial update operations, rather than a complete redraw. Minimum unit-level refresh, for example, for text data, only appends or replaces the specified text fragments; for image data, directly replaces the original placeholder image with the actual image resource; for table data, only refreshes the changed cells; for voice playback status, only updates the play button or progress indicator without affecting other elements. Through the fine-grained refresh at the minimum unit level, the rendering cost is significantly reduced, and the consumption of CPU and GPU resources is greatly optimized.

[0064] Meanwhile, the system supports animation and state transition processing during partial refreshes, such as smooth text appending, image fade-in, and table row insertion transitions, to maintain visual continuity. If the user is scrolling or interacting, the system decides whether to automatically scroll to the latest position or delay rendering based on the context strategy to avoid interface jumps. Furthermore, through frame scheduling and main thread optimization, the system can maintain a smooth frame rate even in multi-event concurrent scenarios. The loading of various resources (images, audio) is performed asynchronously in the background, and the view is updated through event callbacks upon completion. It should be understood that frame scheduling refers to the process by which the operating system or application framework (such as a game engine or mobile UI system) allocates CPU and GPU computing tasks to each frame cycle in rhythm with the screen refresh rate.

[0065] In this embodiment, events and UI components are bound together by a two-way binding mechanism; asynchronous update merging is supported (to prevent high-frequency flickering); and frame-level rendering scheduling is provided to ensure smooth animation.

[0066] To further illustrate the workflow of the data-driven client-side page rendering system of this application, a specific example based on the Android platform and a particular application scenario—an intelligent psychological counseling expert system—is provided below:

[0067] Step S0: User input and session initiation. Specifically, the user enters the text "I've been having some relationship problems lately, I'm feeling down, and I don't know what to do" on the mobile client (APP). The data-driven client-side page rendering system of this application creates a unique session ID for this request and establishes an SSE long connection with the AI ​​large model server through the network layer, entering a real-time streaming response state. At this time, a "user message bubble" is generated on the user interface, and a status prompt component "AI is thinking..." appears simultaneously.

[0068] Step S1: The AI ​​server begins continuously sending response data from the large model via SSE stream. The system's network layer is responsible for receiving and parsing the data in real time. Specifically, the network layer parses the incoming fields of the SSE data stream, identifies the message type as "text," assigns an initial version number (e.g., v1.0), and generates a unique node identifier. Next, the server sends a voice generation stream containing encoded fragments. The network layer automatically identifies this as audio and enters a streaming merge state. The AI ​​generates suggested meditation images for the user (image stream "type": "image", "content": "base64-...") and a sentiment analysis table (table stream "type": "table", "content": {...}"). The network layer automatically identifies the data types and packages them into standardized data packets, which are then passed to the data management layer. Finally, the network layer outputs a series of unified structured data packets containing type identifiers, timestamps, and hash digests.

[0069] Step S2: The data management layer performs structured storage and version management on the received standardized data packets. Specifically, it creates message nodes and generates child nodes based on data types, such as text_node (comforting text), audio_node (soothing audio content), image_node (meditation images), and table_node (psychological state analysis table). The node structure forms a tree-like data model, where the parent node represents an AI response and the child nodes represent different modalities. The initial text content generates a hash H1. Subsequent appended sentence streams cause changes in the text content. The system calculates a new hash H2, compares it with H1 to confirm the difference, updates the node's version number to v1.1, and records the difference data. Simultaneously, the current session's active data is stored in a memory cache and asynchronously written to the SQLite database to ensure session replayability. If network jitter interrupts the session, the system can re-request the SSE stream based on the last version number to achieve differential recovery. It should be understood that SQLite is a software library that implements a self-sufficient, serverless, zero-configuration, transactional SQL database engine.

[0070] Step S3: After the data management layer completes the update, the event notification layer immediately detects data changes, performs differential recognition and event dispatch. Specifically, the hash tree comparison finds that two comforting phrases have been added to the text_node content, generating a TextAppendEvent event carrying the newly added text segment and version information, i.e., detecting the text stream; after the audio file fragment reception is completed, the hash change triggers an AudioReadyEvent, the event content of which includes metadata such as audio URL and playback duration, i.e., detecting the audio stream; after the image node content is parsed, an ImageReadyEvent is triggered, and the table structure update triggers a TableUpdateEvent, used to render the sentiment analysis table, i.e., monitoring image and table events; text stream events have medium priority and are dispatched after being merged according to time windows; audio and image events have high priority and are dispatched in real time; table events are dispatched after the first two are completed to ensure visual continuity, i.e., scheduling is performed according to the set priority, and various events are accurately delivered to the corresponding UI component listeners through the event bus system.

[0071] Step S4: After receiving the event, the UI rendering layer performs the smallest unit update and user interface presentation. Specifically, it updates the text in the "AI Reply Bubble" according to the TextAppendEvent, dynamically adding new content. If the fade-in animation is enabled, the user can see the natural transition effect of the text gradually appearing, which is to refresh the text; the AudioReadyEvent triggers the voice button to switch from the "loading" state to the "play" state, and the user can immediately play the voice. The interface progress bar changes dynamically with the playback, which is to update the voice playback control; the ImageReadyEvent notifies the image component to replace the placeholder image with a meditation image, and the rendering engine executes a fade-in animation for smooth display, which is to display the image; the TableUpdateEvent triggers a partial refresh of the table component, updating only the mood rating row and suggestion column, which is to update the table presentation. During the entire update process, the system does not perform a full redraw, but only refreshes the affected components locally, which greatly improves rendering efficiency and response speed.

[0072] The data-driven client-side page rendering system of this application can realize real-time parsing of streaming SSE data in AI dialogue scenarios, as well as persistence and version management. Based on the difference detection of the Diff algorithm and the event-driven mechanism, it can automatically trigger the refresh of local components, realizing real-time and incremental page updates of mobile clients in AI dialogue scenarios.

[0073] Figure 3 This is a flowchart illustrating the data-driven client-side page rendering method provided in an embodiment of this application. Figure 3 As shown, the data-driven client-side page rendering method includes the following steps:

[0074] Step S31: Obtain the multimodal data stream output by the artificial intelligence server and convert the multimodal data stream into a standard data packet.

[0075] Step S32: Construct a data model based on the received standard data packet, and assign version numbers to the structured data in the data model for data version management.

[0076] Step S33: Detect changes in the received structured data and generate an event notification instruction based on the detected data changes.

[0077] Step S34: Render the user interface according to the received event notification instruction.

[0078] It should be understood that the data-driven client-side page rendering method in this application embodiment can achieve the functions of the data-driven client-side page rendering system described above, and will not be repeated here for the sake of brevity.

[0079] It should also be understood that the module division in the embodiments of this application is illustrative and only represents a logical functional division; in actual implementation, there may be other division methods. Furthermore, the functional modules in the various embodiments of this application can be integrated into a single processor, exist as separate physical entities, or be integrated into a single module. The integrated modules described above can be implemented in hardware or as software functional modules.

[0080] Figure 4 This is a schematic block diagram of the electronic terminal provided in an embodiment of this application. Figure 4 As shown, the electronic terminal 400 includes at least one processor 401, a memory 402, at least one network interface 403, and a user interface 405. The various components in the electronic terminal 400 are coupled together via a bus system 404. It is understood that the bus system 404 is used to implement communication between these components. In addition to a data bus, the bus system 404 also includes a power bus, a control bus, and a status signal bus. However, for clarity, in… Figure 4 The general will label all buses as bus systems.

[0081] The user interface 405 may include a monitor, keyboard, mouse, trackball, clicker, button, touchpad, or touch screen.

[0082] It is understood that memory 402 can be volatile memory or non-volatile memory, or both. Non-volatile memory can be read-only memory (ROM) or programmable read-only memory (PROM), used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM) and synchronous static random access memory (SSRAM). The memories described in the embodiments of this invention are intended to include, but are not limited to, these and any other suitable categories of memory.

[0083] In this embodiment of the invention, the memory 402 is used to store various types of data to support the operation of the electronic terminal 400. Examples of this data include: any executable program for operation on the electronic terminal 400, such as the operating system 4021 and application programs 4022; the operating system 4021 contains various system programs, such as the framework layer, core library layer, driver layer, etc., for implementing various basic services and handling hardware-based tasks. The application program 4022 may contain various applications, such as a media player, browser, etc., for implementing various application services. The methods provided in this embodiment of the invention can be included in the application program 4022.

[0084] The methods disclosed in the above embodiments of the present invention can be applied to processor 401, or implemented by processor 401. Processor 401 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the integrated logic circuit of the hardware in processor 401 or by instructions in the form of software. The processor 401 may be a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Processor 401 can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. General-purpose processor 401 may be a microprocessor or any conventional processor, etc. The steps of the accessory optimization method provided in the embodiments of the present invention can be directly reflected as being executed by a hardware decoding processor, or being executed by a combination of hardware and software modules in the decoding processor. The software module may be located in a storage medium, which is located in a memory. The processor reads the information in the memory and combines it with its hardware to complete the steps of the aforementioned method.

[0085] In an exemplary embodiment, the electronic terminal 400 may be used by one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), or complex programmable logic devices (CPLDs) to execute the aforementioned method.

[0086] According to the method provided in the embodiments of this application, this application also provides a computer program product, which includes: computer program code, which, when run on a computer, causes the computer to execute... Figure 3 The method in the illustrated embodiment.

[0087] According to the method provided in the embodiments of this application, this application also provides a computer-readable storage medium storing program code, which, when executed on a computer, causes the computer to perform... Figure 3 The method in the illustrated embodiment.

[0088] As used in this specification, the terms "component," "module," "system," etc., are used to refer to computer-related entities, hardware, firmware, combinations of hardware and software, software, or software in execution. For example, a component can be, but is not limited to, a process running on a processor, a processor, an object, an executable file, an execution thread, a program, and / or a computer. As illustrated, applications running on computing devices and computing devices can both be components. One or more components may reside in a process and / or an execution thread, and components may be located on a single computer and / or distributed among two or more computers. Furthermore, these components can be executed from various computer-readable media on which various data structures are stored. Components can communicate, for example, via local and / or remote processes based on signals having one or more data packets (e.g., data from two components interacting with another component between a local system, a distributed system, and / or a network, such as the Internet interacting with other systems via signals).

[0089] Those skilled in the art will recognize that the various illustrative logical blocks and steps described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this application.

[0090] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0091] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0092] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0093] In addition, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0094] In the above embodiments, the functions of each functional unit can be implemented entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. A computer program product includes one or more computer instructions (programs). When the computer program instructions (programs) are loaded and executed on a computer, all or part of the flow or function according to the embodiments of this application is generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. Computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available media can be magnetic media (e.g., floppy disks, hard disks, magnetic tapes), optical media (e.g., high-density digital video discs, DVDs), or semiconductor media (e.g., solid-state disks, SSDs, etc.).

[0095] If a function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0096] In summary, in view of the technical problems of high coupling between data and UI rendering, lack of unified data model and version management mechanism, insufficient identification of data change granularity and complex multimodal asynchronous rendering process in the existing technology, this application provides a data-driven client page rendering system, method, medium, terminal and program product, which has the following beneficial effects: (1) By calculating the data difference between the old and new versions based on the data version number and Merkle tree structure, the accurate change identification of multimodal data such as text, image, voice, and table is realized. When data change is detected, only the affected UI components are updated with the smallest granularity rendering, avoiding high-cost operations such as overall list redrawing and control rebinding, significantly improving rendering performance and response speed, and realizing accurate perception of incremental data and update of the smallest rendering unit; (2) The network layer automatically parses the SSE data stream from the large model, supporting text, image, voice, table and JSON. Multiple formats such as structures; the data management layer adopts a unified structured storage model, supporting two-level storage of memory caching and persistent storage; through data index tables and version management, the time serialization and consistency maintenance of different modal data are realized, providing a consistent data view for multimodal scenarios, and supporting unified management and real-time storage of multimodal data; (3) by adopting a layered architecture of network layer-data management layer-event notification layer-user interface rendering layer, the responsibilities of each layer are clear, the functions are well-defined, the coupling is low, the data flow and rendering are decoupled, the scalability of the system is improved, and the event notification layer is designed to realize the logical isolation between data changes and user interface rendering; (4) the asynchronous rendering mechanism driven by data flow is implemented, which can effectively reduce frame drops and stuttering in high-concurrency dialogue scenarios; compared with the traditional overall refresh method, the CPU usage is reduced by 30%-50%, and the UI response latency is shortened by 40%. The above (based on experimental example scenarios); the rendering process is smooth and the transition is natural, which improves the interactive experience of audio stream playback, dynamic table generation, and gradual image loading, and significantly improves performance and user experience; (5) the system supports real-time persistence and version archiving of SSE stream data, ensuring that the data state can be replayed after application restart or network interruption, and automatically restores rendering consistency; the data structure is clear and the log is complete, providing data layer support for debugging and problem backtracking. This replayable and persistent mechanism enhances stability and maintainability. Therefore, this application effectively overcomes the various shortcomings of the prior art and has high industrial utilization value.

[0097] The above embodiments are merely illustrative of the principles and effects of this application and are not intended to limit this application. Any person skilled in the art can modify or alter the above embodiments without departing from the spirit and scope of this application. Therefore, all equivalent modifications or alterations made by those skilled in the art without departing from the spirit and technical concept disclosed in this application should still be covered by the claims of this application.

Claims

1. A data-driven client-side page rendering system, characterized in that, include: The network layer is used to acquire the multimodal data stream output by the artificial intelligence server and convert the multimodal data stream into standard data packets; The network layer includes: a communication management unit, used to establish a long connection with the artificial intelligence server to receive the multimodal data stream sent by the artificial intelligence server; a data parsing unit, used to identify and segment the received multimodal data stream according to the data type to obtain data fragments; and a data distribution unit, used to encapsulate the parsed data fragments into a unified data structure to obtain encapsulated standard data packets and send them to the data management layer. A data management layer is used to construct a data model based on the received standard data packets and assign version numbers to the structured data in the data model for data version management. The data management layer includes: a data model construction unit, used to classify the standard data packets output by the data distribution unit into corresponding sessions to construct a data model; each session includes multiple message nodes; each message node has a message ID; and a version management unit, used to generate a version number and hash value for each message node; and based on a Diff algorithm, to perform difference calculations on the old and new hash values ​​of message nodes with the same message ID to determine whether the content of the message node has changed; if it has not changed, it is ignored; if it has changed, the version number of the message node is updated, and version difference metadata is generated. An event notification layer is used to detect changes in received structured data and generate event notification instructions based on the detected data changes. The event notification layer includes: a data difference detection unit, used to perform difference detection on message nodes of old and new versions based on a Merkle tree and generate difference data to locate the node with the smallest change; an event generation unit, used to generate standardized event objects based on the change type of the difference data; each standardized event object has a unique identifier, difference information, and timestamp of the node with the smallest change; and an event scheduling and dispatch unit, used to sort the received standardized event objects based on a preset priority strategy, generate event notification instructions according to the sorted priority queue, and dispatch the event notification instructions to the user interface rendering layer. The user interface rendering layer is used to render the user interface according to the received event notification instructions.

2. The data-driven client-side page rendering system according to claim 1, characterized in that, The data management layer also includes: Tiered storage units are used to store active data in the current session in a memory cache and write complete historical session and message snapshots to a local database; The index table creation unit is used to create an index table based on session ID, message ID, data type, and version number; The state recovery and synchronization unit is used to load data from the local database to re-establish the session state after the mobile application restarts; and to report the version number to the artificial intelligence server.

3. The data-driven client-side page rendering system according to claim 1, characterized in that, The user interface rendering layer includes: The view node mapping table construction unit is used to construct the view node mapping table based on the correspondence between each message node and the user interface component; The rendering driver unit is used to parse the event notification instructions dispatched by the event scheduling and dispatching unit and look up the corresponding user interface component based on the view node mapping table according to the parsed target node identifier. The smallest rendering update unit is used to issue update instructions to the found user interface components so that the user interface components can perform rendering operations according to the update instructions.

4. A data-driven client-side page rendering method, characterized in that, The system applied to the data-driven client-side page rendering system as described in any one of claims 1 to 3 includes: Acquire the multimodal data stream output by the artificial intelligence server and convert the multimodal data stream into standard data packets; A data model is constructed based on the received standard data packet, and version numbers are assigned to the structured data in the data model for data version management. Detect changes in the received structured data and generate event notification instructions based on the detected data changes; The user interface is rendered based on the received event notification instructions.

5. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method as described in claim 4.

6. A computer program product, characterized in that, The computer program product includes computer program code that, when run on a computer, causes the computer to implement the method as described in claim 4.

7. An electronic terminal, comprising a memory, a processor, and a computer program stored in the memory, characterized in that, The processor executes the computer program to implement the method as described in claim 4.

Images