Method and system for realizing progressive user interface rendering through real-time completion

Abstract

The invention provides a method and system for realizing progressive user interface rendering through real-time completion, and the method comprises the steps: S1, receiving data fragments provided by a large language model and forwarded by a server based on a streaming protocol in real time, adding the data fragments to the tail of a buffer region according to a time sequence, and updating the buffer region; s2, extracting all JSON character strings from the updated buffer area, and complementing the JSON character strings on the basis of complementing logic of a heuristic algorithm to generate new JSON character strings; s3, analyzing the new JSON character string to obtain a current object; s4, obtaining an object used in the last successful rendering in the list container from the UI framework, comparing the current object with the object used in the last successful rendering, and updating the list container through difference comparison; and S5, rendering of the UI framework is carried out on the updated list container.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of human-computer interaction and real-time data processing, and in particular to a method and system for realizing progressive user interface rendering through real-time completion. BACKGROUND

[0002] Modern web applications mainly rely on two paradigms of client-side rendering (CSR) and server-side rendering (SSR), which are: 1. In the CSR mode, the browser needs to wait for the complete JavaScript package and data stream to be received and form a syntactically correct JSON file before it can start parsing and rendering, which goes against the original intention of LLM streaming output to improve user experience, resulting in a long time for the user to face a blank screen; 2. In the SSR mode, the server itself must wait for the LLM to complete the generation of its entire content before it can render the final HTML page, which only shifts the waiting time from the client to the server, resulting in extremely slow "first byte time" (TTFB).

[0003] On this basis, in order to improve the loading performance perceived by users, traditional progressive rendering techniques such as lazy loading and skeleton screens are usually used. However, these techniques are based on the basic premise that the final UI structure and content of the page are known or at least predictable. When the data source is a large language model, the UI structure is dynamically generated and unknown in advance, and the above-mentioned traditional progressive rendering techniques cannot create placeholders or perform rendering for an uncertain structure.

[0004] When a large language model constructs a response by generating tokens step by step and continuously sends it to the client through a streaming API (such as server-sent events, SSE), and expects the output to be structured data, this approach will pose a core technical challenge: during most of the data transmission time, the client holds a syntactically invalid and incomplete JSON fragment, and any standard JSON parser will throw a syntax error when trying to process this incomplete string, resulting in rendering failure. Although there are streaming parsing libraries such as stream-json or streaming-json-js in the industry, they either handle large but syntactically valid complete files or provide relatively primitive completion logic, and fail to integrate with a direct association system between real-time completion and progressive UI rendering. Therefore, the existing technology has a clear technical gap when facing streaming structured data from generative AI. SUMMARY

[0005] The application aims to provide a method for realizing progressive user interface rendering through real-time completion, mainly applied to a system architecture composed of a client device, a server / agent and a generative AI model, and proposes a real-time completion algorithm on the system architecture, which can dynamically repair structured data from generation that is not complete in syntax during transmission into a temporarily valid and analyzable object, so that UI rendering does not need to wait for the entire data stream to be transmitted, and solves the fundamental delay problem of the traditional rendering paradigm.

[0006] To solve the above technical problems, the application adopts the following scheme:

[0007] A method for realizing progressive user interface rendering through real-time completion, comprising:

[0008] S1, real-time receiving data segments provided by a large language model based on a streaming protocol forwarded by a server, appending the data segments to the end of a buffer in time sequence, and updating the buffer;

[0009] S2, extracting all JSON strings from the updated buffer, and completing the JSON strings based on a completion logic of a heuristic algorithm to generate new JSON strings;

[0010] S3, parsing the new JSON strings to obtain a current object;

[0011] S4, obtaining an object used in the last successful rendering from a list container on a UI framework, comparing the current object with the object used in the last successful rendering, and updating the list container through difference comparison;

[0012] S5, rendering the updated list container by a UI framework.

[0013] Further preferred technical solutions are that the large language model constructs a response through a plurality of tokens generated step by step, the server continuously sends data segments through a streaming protocol under the response, and the plurality of tokens are spliced to form a JSON string; the buffer refers to a buffer for storing internal text, and the buffer receives all data segments in time sequence to form a streaming structured data.

[0014] Further preferred technical solutions are that the completion logic based on the heuristic algorithm completes the JSON strings in the following process:

[0015] SA1, initializing a state machine and a stack;

[0016] SA2, traversing the JSON string, managing the nested structure in the JSON string by using the stack, and updating the state of the JSON string;

[0017] SA3, judging whether the JSON string is complete, if not, going to step SA4;

[0018] SA4, starting from the end of the JSON string, according to the state and the content of the stack, applying heuristic rules to analyze and complete the data segments in the JSON string in turn to generate a new JSON string.

[0019] A further preferred technical solution is that the state machine is used to traverse the buffer and mark the state of all data segments in the buffer, the state of the data segment including being inside an object, being inside an array, and being inside a string, and the character type of the next data segment is determined by tracking the state of the data segment.

[0020] A further preferred technical solution is that the heuristic rules include structure rules, value rules, comma rules, and key-value pair rules.

[0021] The process of applying the structure rules is to check the stack and add corresponding closing symbols in reverse until all nested structures in the JSON string are closed.

[0022] The process of applying the value rules is to automatically add quotation marks to the position not closed in the JSON string or remove the invalid decimal point at the end of the number.

[0023] The process of applying the comma rules is to remove the extra comma after the last element in the object or array before the closing symbol.

[0024] The process of applying the key-value pair rules is to judge the state of the data segment, analyze the state, and insert a placeholder value when the analyzed state indicates that a value is expected after a key, and then close.

[0025] A further preferred technical solution is that the process of updating the list container by difference comparison is:

[0026] The current object is compared with the object used when the last successful rendering is performed, the incremental content is obtained, and the incremental content is filled into the list container, the incremental content being the content that is different between the current object and the object used when the last successful rendering is performed.

[0027] A further preferred technical solution is that the streaming data forwarded by the server based on the streaming protocol is content generated by a generative AI model in the form of a token stream, the content including text and tables.

[0028] A system for realizing progressive user interface rendering through real-time completion, applying the method for realizing progressive user interface rendering through real-time completion, including:

[0029] Buffer updating module: real-time receiving data segments provided by a large language model based on a streaming protocol forwarded by a server, appending the data segments to the end of the buffer in chronological order, and updating the buffer;

[0030] Heuristic completion module: extracting all JSON strings from the updated buffer, completing the JSON strings based on the completion logic of the heuristic algorithm, and generating new JSON strings;

[0031] Standard analysis module: parsing the JSON strings to obtain objects;

[0032] Difference comparison module: obtaining the objects used in the last successful rendering from the list container on the UI framework, comparing the current objects with the objects used in the last successful rendering, and updating the list container through difference comparison;

[0033] UI updating module: rendering the updated list container on the UI framework.

[0034] Further preferred technical solutions are that the real-time completion module includes the following sub-modules:

[0035] Initialization submodule: initializing the state machine and the stack;

[0036] State machine submodule: traversing the JSON string, managing the nested structure in the JSON string using the stack, and updating the state of the JSON string;

[0037] Complete verification module: judging whether the JSON string is complete;

[0038] Completion submodule: starting from the end of the JSON string, applying heuristic rules to analyze and complete the data segments in the JSON string according to the state and the content of the stack, and generating new JSON strings.

[0039] The beneficial effects of the present application are:

[0040] The application provides a method for realizing progressive user interface rendering through real-time completion, when a large language model constructs a response by generating tokens step by step and continuously sends to a client through a streaming API (such as server-sent event, SSE), and the expected output is structured data, a real-time completion algorithm is proposed on the system architecture composed of a client device, a server / agent and a generative AI model, which adopts a state machine and stack-based algorithm, can accurately track nested structures, handle dangling commas, complete key values and other complex situations, and the completion logic is more robust and intelligent than existing tools, ensuring the accuracy of rendering, so that the application can dynamically repair the structured data stream from the generative, which is not complete in the transmission process, into a temporarily valid and parsable object, so that UI rendering does not need to wait for the entire data stream to be transmitted, solving the fundamental delay problem of the traditional rendering paradigm. BRIEF DESCRIPTION OF DRAWINGS

[0041] Figure 1 It is a schematic diagram of the system architecture in the embodiment 1 of the application;

[0042] Figure 2 It is a flowchart of the method in the embodiment 1 of the application;

[0043] Figure 3 It is a flowchart of the real-time completion algorithm in the embodiment 1 of the application. DETAILED DESCRIPTION

[0044] The technical solutions in the embodiments of the application will be clearly and completely described below with reference to the drawings in the embodiments of the application. Obviously, the described embodiments are only a part of the embodiments of the application, rather than all the embodiments of the application. The following description of at least one exemplary embodiment is actually only illustrative, but not as any limitation on the application and its application or use. Based on the embodiments in the application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of the application.

[0045] Unless otherwise specified, the relative arrangement, numerical expression and numerical value of the components and steps set forth in these embodiments do not limit the scope of the application.

[0046] At the same time, it should be understood that, for the convenience of description, the sizes of the various parts shown in the drawings are not drawn in accordance with the actual proportional relationship.

[0047] In addition, for the sake of clarity and brevity, the description of well-known structures, functions and configurations can be omitted. Those skilled in the art will recognize that various changes and modifications can be made to the examples described herein without departing from the spirit and scope of the present disclosure.

[0048] Techniques, methods, and apparatus known to those of ordinary skill in the relevant art(s) can not be discussed in detail herein. However, where appropriate, the techniques, methods, and apparatus should be considered as part of the written description of the application.

[0049] In all of the examples shown and discussed herein, any specific values should be interpreted as merely exemplary and not limiting. Thus, other examples of the example embodiments can have different values.

[0050] The application will be explained in detail below by referring to the attached drawings and in connection with embodiments:

[0051] Embodiment 1

[0052] In this embodiment, a method for realizing progressive user interface rendering through real-time completion is proposed, which is mainly applied to the case where a large language model constructs a response by generating tokens step by step and continuously sends to the client through a streaming API (such as Server-Sent Events, SSE), and the expected output is structured data. The method includes the following steps:

[0053] S1, real-time receiving data segments provided by a large language model forwarded by a server based on a streaming protocol, appending the data segments to the end of a buffer in chronological order, and updating the buffer;

[0054] S2, extracting all JSON strings from the updated buffer, and completing the JSON strings based on a completion logic of a heuristic algorithm to generate new JSON strings;

[0055] S3, parsing the new JSON strings to obtain a current object;

[0056] S4, obtaining an object used in the last successful rendering from a list container on a UI framework, comparing the current object with the object used in the last successful rendering, and updating the list container through difference comparison;

[0057] S5, rendering the updated list container through a UI framework.

[0058] Further preferred technical solutions are: the large language model constructs a response by generating a plurality of tokens step by step, and the server continuously sends data segments based on a streaming protocol under the response, then the plurality of tokens are spliced to form a JSON string; the buffer refers to a buffer for storing internal text, and the buffer receives all data segments in chronological order to form streaming structured data.

[0059] Further preferred technical solutions are: the process of completing the JSON string based on the completion logic of the heuristic algorithm is:

[0060] SA1, initialize the state machine and the stack;

[0061] SA2, traverse the JSON string, manage the nested structure in the JSON string by using the stack, and update the state of the JSON string;

[0062] SA3, determine whether the JSON string is complete, and if not, go to step SA4;

[0063] SA4, start from the end of the JSON string, and according to the state and the content of the stack, apply heuristic rules to analyze and complete the data segments in the JSON string in sequence to generate a new JSON string.

[0064] Further preferred technical solutions are: the state machine is used to traverse the buffer and mark the state of all data segments in the buffer, and the state of the data segment includes being inside an object, being inside an array, and being inside a string. The state of the data segment is tracked to determine the character type of the next data segment.

[0065] Further preferred technical solutions are: the heuristic rules include structure rules, value rules, comma rules, and key-value pair rules.

[0066] The process of applying the structure rules is: checking the stack and adding corresponding closing symbols in reverse, until all nested structures in the JSON string are closed.

[0067] The process of applying the value rules is: automatically adding quotation marks to the position not closed in the JSON string or removing the invalid decimal point at the end of the number.

[0068] The process of applying the comma rules is: removing the extra comma after the last element in the object or array before the closing symbol.

[0069] The process of applying the key-value pair rules is: determining the state of the data segment, analyzing the state, and when the analyzed state indicates that a value is expected after a key, inserting a placeholder value and then closing.

[0070] Further preferred technical solutions are: the process of updating the list container by difference comparison is:

[0071] Compare the current object with the object used when the last successful rendering is performed, obtain the incremental content, and fill the incremental content into the list container, wherein the incremental content is the content that is different between the current object and the object used when the last successful rendering is performed.

[0072] Further preferred technical solutions are: the streaming data forwarded by the server based on the streaming protocol is content generated by a generative AI model in the form of a token stream, and the content includes text and tables.

[0073] Based on the above principles, the present application is further described as follows:

[0074] When the present application constructs a response by generating tokens step by step in a large language model, and continuously sends to the client through a streaming API (such as Server-Sent Events, SSE), and expects the output to be structured data, a real-time completion algorithm is proposed for the system architecture composed of client devices, servers / agents and generative AI models. The real-time completion algorithm mainly uses a state machine and stack-based algorithm, which can accurately track nested structures, handle dangling commas, complete key-value pairs and other complex situations. The completion logic is more robust and intelligent than existing tools, ensuring the accuracy of rendering, so that the present application can dynamically repair the structured data stream from the generative, incomplete syntax during transmission into a temporarily valid, parsable object, so that UI rendering does not need to wait for the entire data stream to be transmitted, solving the fundamental delay problem of traditional rendering paradigm.

[0075] Firstly, the operation of the present method relies on a system architecture composed of client devices, servers / agents and generative AI models, as shown in Figure 1 The client device can be any computing device capable of running a web browser or a native application, such as a personal computer, a smartphone, etc. The client device includes a rendering engine, a standard parser and a real-time completion module. The server / agent plays the role of an intermediary between the client and the AI model, and its main responsibilities include securely managing communication with the AI model (such as handling API keys), initiating requests to the AI model, and using streaming protocols such as SSE to delay forwarding the token-based streaming data returned by the AI model to the client. The generative AI model serves as the source of the data stream, such as OpenAI's GPT series models or Google's Gemini model. It receives a prompt and generates a response in the form of a token stream, which is intended to form a complete structured data object (such as JSON) after splicing.

[0076] Based on the above system architecture, the present application proposes a real-time completion algorithm, which realizes progressive user interface rendering in the system architecture, as shown in Figure 2 The core process includes the following steps:

[0077] (1) Receive data block: the client application receives a new data block through the connection established with the server. This data block can be raw text, representing the latest tokens generated by the LLM (Large Language Model).

[0078] (2) Append to buffer: the received data block is appended to an internal text buffer, i.e. added to the end, which stores all data received from the beginning of the data stream to the current time.

[0079] (3) Call the completion module: pass the current complete content of the buffer to the real-time completion module.

[0080] (4) Generate a temporarily valid JSON: analyze the incomplete JSON string in the buffer, and output a new, "fixed", and syntactically valid JSON string according to the real-time completion algorithm.

[0081] (5) Parse the completed JSON: the application uses a standard parser (such as JSON.parse()) to try to parse the temporarily valid string generated by the completion module. This step is generally successfully executed.

[0082] (6) Update the UI: if the parsing is successful, a JavaScript object will be obtained. The application (for example, using a framework such as React or Vue) will compare this new object with the object used during the last successful rendering, and through the diffing algorithm, only the part of the UI that needs to be changed will be updated or "hydrated".

[0083] (7) Determine whether the data stream is complete: if not, i.e. the data stream is not complete, repeat the above steps when the next data block arrives; if yes, i.e. the data stream is complete, end the process.

[0084] The real-time completion algorithm uses a state machine and stack-based algorithm to accurately track the context of the current parsing, rather than simply adding missing instructions. Its robustness and intelligence are the key to realizing the smooth and accurate progressive rendering of the application, and the client can realize the following functions through the real-time completion module:

[0085] (1) State tracking: the real-time completion module maintains a state machine inside to determine the type of next character expected at any position in the data stream. Key states include: inobject (inside an object), inarray (inside an array), expectingKey (expecting a key of an object), instring (inside a string, need to handle escape characters), etc. At the same time, a stack is used to manage nested structures ({}) or [], to correctly handle nesting of any depth.

[0086] (2) Completion logic based on heuristic algorithm: when the real-time completion module is called, the real-time completion module starts from the end of the buffer, and according to the current state and the content of the stack, applies the following heuristic rules to generate a temporarily valid JSON, which is:

[0087] Close open structures: Check the stack and add the corresponding closing symbol (} or ]) in reverse until all nested structures are properly closed.

[0088] Handle incomplete raw values: intelligently add quotes to unclosed strings, or remove trailing decimal points from numbers;

[0089] Handle dangling commas: remove the trailing comma after the last element in an object or array before closing the structure (} or ]);

[0090] Key-value pair completion: if the parsing state is waiting for a value after a key (e.g., {"key":!), the module inserts a placeholder value (usually null) before closing the object, which is more intelligent and robust than simple completion logic.

[0091] Based on the above functions, the algorithm flow of the real-time completion module is as shown in Figure 3 , which specifically includes the following steps:

[0092] SA1, initialize the state machine and stack;

[0093] SA2, analyze the buffer content: traverse the JSON string, use the stack to manage the nested structures in the JSON string, and update the state of the JSON string;

[0094] SA3, determine whether completion is needed: determine whether the JSON string is complete, if not, go to step SA4;

[0095] SA4, starting from the end of the JSON string, according to the state and the content of the stack, apply heuristic rules to analyze and complete the data fragments in the JSON string in turn to generate a new JSON string, i.e., output a temporarily valid JSON.

[0096] In order to more intuitively illustrate the workflow of using the above method in the embodiment, the UI progressive rendering is specifically described with a specific example as follows:

[0097] At time T1, receive data block 1, specifically, the client receives the data fragment {"title":"Q3 Report","data":[, then, it is completed to {"title":"Q3 Report","data":[]} by the real-time completion module.

[0098] At this time, the UI is rendered for the first time: the application parses the completed JSON and renders a title "Q3 Report" and an empty list container on the UI, so that the user can immediately see the basic structure of the page.

[0099] At time T2, data chunk 2 is received, specifically, the client receives the new data fragment {"id": 1, "value": 1, and the current buffer content is {"title": "Q3 Report", "data": [{"id": 1, "value": 1, then it is repaired to {"title": "Q3 Report", "data": [{"id": 1, "value": 1}]} by the real-time completion module.

[0100] At this time, the UI is incrementally updated: the application parses the new JSON object, renders the first item content in the list container through differential comparison, and displays its ID and value.

[0101] At time T3, data chunk 3 is received, specifically, the client continues to receive,"status": "comple, and the current buffer is... {"id": 1, "value": 1, "status": "comple, then the real-time completion module repairs it to... {"id": 1, "value": 1, "status": "comple"}}.

[0102] At this time, the UI is updated again: the content of the first item in the UI is updated to display the complete status information.

[0103] As can be seen, through the above process, the user can see the construction and filling process of the UI in real time, rather than waiting for a long loading.

[0104] In summary, the present application has the following advantages in human-computer interaction and real-time data processing:

[0105] (1) Real-time streaming data completion and rendering: the present application proposes a set of real-time completion algorithms based on system architecture, which can dynamically "repair" structured data streams (such as JSON) from generative, incomplete syntax in the transmission process to temporary valid, parsable objects, which makes the UI rendering unnecessary to wait for the entire data stream to be transmitted, solving the fundamental delay problem of traditional rendering paradigm.

[0106] (2) Instant user perception feedback: through progressive rendering, users can immediately see and interact with the formatted content (such as tables, lists) being generated by AI, rather than staring at a blank screen or loading indicator for a long time, which greatly improves the performance and overall experience of user perception.

[0107] (3) Context-aware intelligent repair: the real-time completion module proposed by the present application uses an algorithm based on state machine and stack, which can accurately track nested structures, handle dangling commas, complete key-value pairs, and other complex situations, and its completion logic is more robust and intelligent than existing tools, ensuring the accuracy of rendering.

[0108] (4) Seamless integration of front-end framework: real-time conversion of an originally unrenderable data stream into a renderable state, enabling existing, highly optimized UI frameworks (such as React, Vue) to work seamlessly in a completely new scenario that they do not originally support, utilizing their efficient virtual DOM comparison and update mechanisms to achieve minimal UI redraw.

[0109] (5) Enhancing client computer functionality: direct driving of UI rendering through implementation of robust real-time completion algorithms on the client side, enhancing the functionality of the client computer itself and solving the technical problem of the stack being unable to effectively handle structured data from the generative stream.

[0110] Embodiment 2

[0111] A system for implementing progressive user interface rendering through real-time completion, applying the method for implementing progressive user interface rendering through real-time completion, comprising:

[0112] A buffer updating module: real-time reception of data segments provided by a large language model and forwarded by a server based on a streaming protocol, appending the data segments to the end of the buffer in chronological order, and updating the buffer;

[0113] A heuristic completion module: extracting all JSON strings from the updated buffer, completing the JSON strings based on the completion logic of the heuristic algorithm, and generating new JSON strings;

[0114] A standard parsing module: parsing the JSON strings to obtain objects;

[0115] A difference comparison module: obtaining the objects used in the last successful rendering of the list container from the UI framework, comparing the current objects with the objects used in the last successful rendering, and updating the list container through difference comparison;

[0116] A UI updating module: rendering the updated list container using the UI framework.

[0117] Further preferred technical solutions are: the real-time completion module includes the following sub-modules:

[0118] An initialization sub-module: initializing the state machine and the stack;

[0119] A state machine sub-module: traversing the JSON string, managing the nested structures in the JSON string using the stack, and updating the state of the JSON string;

[0120] A complete verification module: determining whether the JSON string is complete;

[0121] complementing sub-module: starting from the end of the JSON string, according to the state and the content of the stack, applying heuristic rules to analyze and complement the data segments in the JSON string in turn to generate a new JSON string.

[0122] The above is only the preferred embodiment of the present application, and does not limit the present application in any form. According to the technical essence of the present application, any simple modification, equivalent replacement and improvement of the above embodiment within the spirit and principles of the present application are still within the protection scope of the technical solution of the present application.

Claims

1. A method for progressive user interface rendering through real-time autocomplete, characterized in that, include: S1. Receive data segments provided by the large language model from the server based on the streaming protocol in real time, append the data segments to the end of the buffer in chronological order, and update the buffer. S2. Extract all JSON strings from the updated buffer, and complete the JSON strings based on the completion logic of the heuristic algorithm to generate new JSON strings; S3. Parse the new JSON string to obtain the current object; S4. Retrieve the object used in the last successful rendering of the list container from the UI framework, compare the current object with the object used in the last successful rendering, and update the list container based on the difference comparison. S5. Render the UI framework of the updated list container.

2. The method for progressive user interface rendering through real-time autocomplete according to claim 1, characterized in that, The large language pattern constructs a response by generating several tokens step by step. Under the response, the server continuously sends data fragments through a streaming protocol, and the several tokens are concatenated to form a JSON string. The buffer refers to the buffer that stores the internal text. The buffer receives all data fragments in chronological order to form streaming structured data.

3. The method for progressive user interface rendering through real-time autocomplete according to claim 1, characterized in that, The process of completing a JSON string based on heuristic algorithms is as follows: SA1. Initialize the state machine and stack; SA2: Traverse the JSON string, use a stack to manage the nested structure in the JSON string, and update the state of the JSON string at the same time; SA3. Check if the JSON string is complete. If not, proceed to step SA4. SA4. Starting from the end of the JSON string, based on the state and the contents of the stack, apply heuristic rules to analyze and complete the data fragments in the JSON string in sequence to generate a new JSON string.

4. The method for progressive user interface rendering through real-time autocomplete according to claim 3, characterized in that, The state machine is used to traverse the buffer and mark the state of all data segments in the buffer. The state of the data segment includes inside an object, inside an array, and inside a string. By tracking the state of the data segment, the character type of the next data segment is determined.

5. A method for progressive user interface rendering through real-time autocomplete according to claim 3, characterized in that, Heuristic rules include structural rules, value rules, comma rules, and key-value pair rules; The process of applying the structural rules is as follows: check the stack and add the corresponding closing symbols in reverse until all nested structures in the JSON string are closed; The process of applying value rules is as follows: automatically adding quotation marks to unclosed positions in the JSON string or removing invalid decimal points at the end of numbers; The process of applying the comma rule is as follows: before the closing symbol, remove the extra comma after the last element in the object or array; The process of applying key-value pair rules is as follows: determine the state of the data segment, parse the state, and when the parsed state indicates that a value is waiting after a key, insert a placeholder value and then close the segment.

6. The method for progressive user interface rendering through real-time autocomplete according to claim 1, characterized in that, The process of updating the list container by comparing differences is as follows: The current object is compared with the object used in the last successful rendering to obtain incremental content, which is then filled into the list container. The incremental content is the content that differs between the current object and the object used in the last successful rendering.

7. The method for progressive user interface rendering through real-time autocomplete according to claim 1, characterized in that, The streaming data forwarded by the server based on the streaming protocol is content generated in the form of token streams by a generative AI model, and the content includes text and tables.

8. A system for rendering a progressive user interface through real-time autocomplete, characterized in that, The method for progressive user interface rendering via real-time autocomplete, as described in any one of claims 1-7, includes: Buffer update module: Receives data segments provided by the large language model from the server based on the streaming protocol in real time, appends the data segments to the end of the buffer in chronological order, and updates the buffer; Heuristic completion module: Extracts the complete JSON string from the updated buffer, completes the JSON string based on heuristic algorithm completion logic, and generates a new JSON string; Standard parsing module: Parses JSON strings to obtain objects; Difference Comparison Module: Retrieves the object used in the last successful rendering from the list container in the UI framework, compares the current object with the object used in the last successful rendering, and updates the list container through difference comparison; UI Update Module: Renders the UI framework for the updated list container.

9. A system for progressive user interface rendering via real-time autocomplete according to claim 1, characterized in that, The real-time completion module includes the following sub-modules: Initialization submodule: Initializes the state machine and stack; State Machine Submodule: Traverses the JSON string, uses a stack to manage the nested structure within the JSON string, and updates the state of the JSON string simultaneously; Complete validation module: Determines whether a JSON string is complete; The completion submodule starts from the end of the JSON string and, based on the state and the contents of the stack, applies heuristic rules to analyze and complete the data fragments in the JSON string in sequence to generate a new JSON string.

Images