Front-end display method and system combining fixed text and streaming output

Abstract

The invention discloses a fixed text and streaming output combined front-end display method and system, and the method comprises the steps: sending a service parameter request, and receiving a fixed text and streaming output combined mixed structure array responded by a server; determining a state object, a temporary result array and a streaming output Id array in the mixed structure array; sending all streaming output requests in parallel based on the streaming output Id array, and receiving streaming output results returned by the server; based on a streaming output result and the initialized mixed structure array, rendering and displaying a service parameter request result combining the fixed text and streaming output through a sequential typewriter; through interaction between a front end and an AI server, return and analysis of a structured array are realized, the array is mixed with a fixed text and streaming output elements, and a state object, a temporary result array and a streaming output Id array are used for coordinating the display sequence and state of the two arrays, so that smooth display in sequence is ensured.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data processing, and in particular to a front-end display method and system combining fixed text and streaming output. BACKGROUND

[0002] With the popularization of AI question and answer technology, streaming output has become a core technology for improving interactive immersion. However, the current mainstream AI system generally adopts a character-by-character streaming generation method for answers, and its output logic is still mainly in a single streaming channel. Specifically, the rendering process of fixed text (such as system prompts and operation instructions) and streaming content is independent of each other. This mode is difficult to meet the user's demand for information coherence and interactive flexibility in complex scenarios such as multi-turn dialogue and multi-modal content display.

[0003] In the prior art, the AI system only supports single streaming output, and only operates on the current single streaming output, which cannot effectively support the information display demand in complex scenarios. Further, if multiple fixed texts and multiple streaming outputs are mixed and displayed, since the fixed text is returned between AI servers, the front end can directly know the content to be displayed, but the streaming output still needs the front end to send a streaming output request again, wait for the return result of the streaming output, and there may be more than one streaming output request, and there may be multiple streaming outputs. This causes confusion in the front-end page display.

[0004] Therefore, the prior art has obvious deficiencies in front-end page mixed display, and more advanced methods are needed to improve the coherence, real-time performance and accuracy of front-end page mixed display content. It is necessary to provide a front-end display method combining fixed text and streaming output to solve the above problems. SUMMARY

[0005] The present application provides a front-end display method and system combining fixed text and streaming output to solve the problem of confusion in the mixed display of the front-end page in the prior art.

[0006] In a first aspect, the embodiments of the present application provide a front-end display method combining fixed text and streaming output, comprising: sending a business parameter request, receiving a mixed structure array combining fixed text and streaming output returned by the server in response to the request, wherein the mixed structure array contains fixed text corresponding to the business parameter request; determining the core data in the mixed structure array and initializing, wherein the core data includes a state object, a temporary result array and an Id array of streaming output; based on the Id array of streaming output, sending all streaming output requests in parallel, and receiving the streaming output result returned by the server; Based on the streaming output result and the initialized mixed structure array, the business parameter request result combined with the fixed text and the streaming output is rendered and displayed through a sequential typewriter.

[0007] Optionally, the core data in the mixed structure array is determined and initialized, including: Each element in the mixed structure array is iterated and the element type is determined; If the element type is fixed text, the state of the state object of the element is set to complete, the fixed text corresponding to the business parameter request is pushed into the temporary result array, and null is pushed into the Id array of the streaming output; If the element type is streaming output, the state of the state object of the element is set to waiting, and an empty array is pushed into the temporary result array, and the id of the element is pushed into the Id array of the streaming output.

[0008] Optionally, based on the Id array of the streaming output, all streaming output requests are sent in parallel, and the streaming output result returned by the server is received, including: Non-null elements in the Id array of the streaming output are determined; The streaming output request of the non-null element is sent in parallel; The streaming output result returned by the server is received, and the streaming output result is pushed into the temporary result array.

[0009] Optionally, based on the streaming output result and the initialized mixed structure array, the business parameter request result combined with the fixed text and the streaming output is rendered and displayed through a sequential typewriter, including: The streaming output result and the fixed text in the temporary result array are iterated to generate a display result array; Based on the display result array, the business parameter request result combined with the fixed text and the streaming output is rendered and displayed through a typewriter in the data structure order of the mixed structure array.

[0010] Optionally, the streaming output result and the fixed text in the temporary result array are iterated to generate a display result array, including: The temporary result array is iterated repeatedly in the data structure order of the mixed structure array through a first time interval timer; Until the state of the state object corresponding to the streaming output result and the fixed text in the temporary result array is complete, the iteration is stopped.

[0011] Optionally, the temporary result array is iterated repeatedly in the data structure order of the mixed structure array through a first time interval timer, including: If the element type is fixed text, the state of the state object is complete, the fixed text content corresponding to the business parameter request is pushed into the display result array in the first traversal, and the subsequent traversal is skipped; If the element type is streaming output, the state of the state object is complete, the streaming output result is pushed into the display result array, and the next time the traversal is performed, it is determined whether the temporary result array has new content, and if so, the new content is synchronized to the display result array; If the element type is streaming output, the state of the state object is processing, the existing streaming output result in the temporary result array is pushed into the display result array, and the traversal is stopped, the next time the traversal is repeated based on the first time interval timer, and it is repeatedly determined whether the temporary result array has new content, and if so, the new content is synchronized to the display result array.

[0012] Optionally, the business parameter request result combined with the fixed text and the streaming output is rendered and displayed by a sequential typewriter based on the display result array, including: The business parameter request result combined with the fixed text and the streaming output in the display result array is rendered and displayed by a sequential typewriter based on a second time interval timer; If the display result array is displayed, it is determined whether the state in the state object is complete; If not, the new content in the display result array is continuously rendered based on a second time interval timer; If yes, the display is ended.

[0013] In a second aspect, an embodiment of the present application provides a front-end display system for fixed text and streaming output mixing, which is used to execute the front-end display method for fixed text and streaming output mixing in any one of the embodiments of the present application, and includes: A first processing module is configured to send a business parameter request and receive a mixed structure array combined with fixed text and streaming output returned by a server, wherein the mixed structure array includes fixed text corresponding to the business parameter request; An initialization module is configured to determine core data in the mixed structure array and perform initialization, wherein the core data includes a state object, a temporary result array, and an Id array of streaming output; A second processing module is configured to send all streaming output requests in parallel based on the Id array of streaming output, and receive streaming output results returned by the server; The display module is used for rendering the business parameter request result combined with the fixed text and the streaming output through the sequential typewriter based on the streaming output result and the initialized mixed structure array.

[0014] (1) The application constructs three core data structures of state object, temporary result array and streaming ID array synchronously through receiving the mixed structure array (containing sequential arrangement of fixed text and streaming output) predefined by the server; the fixed text (state marked as "completed") can immediately enter the rendering process, and the streaming output (state marked as "waiting / processing") is accurately positioned and triggered by ID to make parallel requests; compared with the interleaving misplacement problem caused by independent rendering of fixed text and streaming content in the prior art, the application realizes mixed rendering with zero sequence deviation, strictly follows the business logic sequence set by the server (such as [fixed→streaming→fixed]), and completely eliminates semantic confusion; the user can obtain a coherent information flow experience.

[0015] (2) The application adopts two independent timers working independently: the first timer (50 ms interval) polls the state object changes, and synchronizes the new content in the temporary result array to the display result array according to the original order; the second timer (20 ms interval) renders the content of the display result array to the page word by word; through the double timer mechanism, data synchronization and content display are decoupled; compared with the traditional scheme of single-threaded processing of data reception and rendering, the application can maintain a high smooth frame rate even when facing a million characters stream; the user can perceive the "thinking-output" rhythm without stuttering.

[0016] (3) When the streaming output state is "processing", the application synchronizes the arrived segment content to the display result array in real time, and renders it to the current position word by word through the 20 ms timer; at the same time, the context position of the incomplete streaming element is preserved, and the subsequent data is inserted incrementally when it arrives. Compared with the mode of the prior art that needs to wait for the streaming content to be completely loaded before displaying, the application realizes the progressive experience of "partially visible + dynamic growth", the user can observe the AI generation process in real time, reduces the user's cognitive burden, and enhances the user's trust in AI capability.

[0017] (4) The application filters non-empty elements based on the streaming ID array, concurrently requests all streaming requests at one time, and eliminates serial waiting delay; at the same time, the streaming result is anchored to the preset position of the temporary result array through the sequential index (index), so that even if multiple streaming responses arrive out of order (such as stream_4 returns earlier than stream_2), they can also be returned to the original order. Compared with the network redundancy and position disorder caused by independent requests in the traditional scheme, the application effectively reduces invalid requests, maintains content sequence consistency in asynchronous scenarios, maintains response speed in complex business scenarios, and has strong scalability.

[0018] It is to be understood that the embodiments described herein are merely exemplary of the application and that a person skilled in the art can devise other embodiments without departing from the scope of the present application. It is also to be understood that not all of the benefits described herein need necessarily be realized in any particular embodiment of the application and that various embodiments of the present application can be directed to one or more particular benefits or be directed to no benefits at all. It should also be understood that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting. BRIEF DESCRIPTION OF DRAWINGS

[0019] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments will be briefly introduced as follows. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without any creative effort based on these drawings.

[0020] Figure 1 A flow chart of a front-end display method combining fixed text and streaming output provided for the first embodiment of the present application; Figure 2 A flow chart of a front-end display method combining fixed text and streaming output provided for the second embodiment of the present application; Figure 3 A full flow chart of front-end and server interaction provided for the second embodiment of the present application; Figure 4 A framework diagram of a front-end display system combining fixed text and streaming output provided for the third embodiment of the present application. DETAILED DESCRIPTION

[0021] In order to make the technical personnel in the art better understand the present application, the technical solutions in the embodiments of the present application will be described clearly and completely in the following with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without any creative effort should be within the scope of protection of the present application.

[0022] It should be noted that the terms "first", "second", and the like in the description and claims of the present application and the above drawings are used to distinguish similar objects, and do not necessarily indicate a specific order or sequence. It should be understood that the data used in this way can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not necessarily limit to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0023] Embodiment 1:

[0024] Figure 1 This is a flow chart of a front-end display method combining fixed text and streaming output provided by the first embodiment of the present invention. This embodiment is applicable to the mixed display of fixed text and streaming output. This method is applied to the front-end display system combining fixed text and streaming output. Figure 1 As shown, the method includes: S110 : Send a service parameter request, and receive a hybrid structure array of a fixed text response from a server combined with a streaming output, wherein the hybrid structure array includes the fixed text corresponding to the service parameter request.

[0025] Among them, the business parameter request may refer to a structured data request containing specific business information sent by the front end to the server, and the business parameters include but are not limited to: user intent identification: semantic classification identification of user queries, for example, FAQ queries, data analysis requests, content generation instructions, etc. Fixed text may refer to static text content pre-generated or preset by the server, which has completed content generation before the business request arrives, and the content does not change with the number of requests, and can be displayed without secondary processing. Streaming output may refer to progressive content output dynamically generated by the server, which can continuously generate content during the response process, and is completed through multiple data transmissions, and the final content length is unknown at the time of the initial response. The server may refer to an AI server.

[0026] Specifically, the front end can send a request containing business parameters to the AI ​​server, and the server responds by returning a structured array, that is, a hybrid structure array containing fixed text and streaming output. The response array includes the fixed text corresponding to the business parameter request. For example: [ {type: "text", content: "Fixed text 1", id: "text_1"}, {type: "stream", id: "stream_2"}, {type: "text", content: "Fixed text 3", id: "text_3"}, {type: "stream", id: "stream_4"}, ] Among them, "text" may refer to fixed text, "stream" may refer to streaming output, and "fixed text 1" and "fixed text 3" may refer to the fixed text content corresponding to the business parameter request in the mixed structure array.

[0027] In this embodiment, a service parameter request is sent, and a mixed structure array combining fixed text and streaming output in response of the server is received, wherein the mixed structure array contains fixed text corresponding to the service parameter request, and global display framework is obtained through one request, so as to realize sequential cooperative control of multiple types of contents; the structured array returned by the server defines the arrangement order of fixed text and streaming output in advance, and the front end can initialize the display framework in sequence without additional logic, so as to avoid misplacement and confusion of multiple contents from the root.

[0028] In S120, core data in the mixed structure array is determined and initialized, wherein the core data includes a status object, a temporary result array and an Id array of streaming output.

[0029] The status object (statusMap) can refer to a processing state of each element of the array returned by the server, which is completed (completed) or pending. The temporary result array (tempResults) can refer to a processing result of each element of the array returned by the server (i.e. the mixed structure array). The Id array of streaming output (streamIds) can refer to all Ids of streaming output in the array returned by the server. Initialization can refer to a process of creating and assigning initial values to the three core data simultaneously according to the element type in the mixed structure array when the mixed structure array returned by the server is parsed.

[0030] Specifically, the array returned by the server (i.e. the mixed structure array) is traversed, and the three core data structures are initialized, including: if the traversed element is fixed text text, a state value completed is set in the status object statusMap, i.e. statusMap[id]=completed, the content content of the element is pushed into the temporary result array tempResults, and a null is pushed into the Id array of streaming output streamIds. If the traversed element is streaming output stream, a state value pending is set in the status object statusMap, i.e. statusMap[id]=pending, an empty array [] is pushed into the temporary result array tempResults, and the id of the element is pushed into streamIds.

[0031] In this embodiment, the core data in the mixed structure array is determined and initialized, wherein the core data includes a status object, a temporary result array, and an Id array of streaming output. The status object (statusMap) is used to track the processing progress (completed / waiting) of each element in real time, thereby providing a basis for subsequent sequential synchronization. The temporary result array (tempResults) is used to store fixed text (string) and streaming content (data block queue) uniformly, thereby eliminating the rendering discontinuity caused by the difference in data types. The streaming ID array (streamIds) is used to mark the position of elements that need to be requested asynchronously, thereby realizing one-to-one binding between concurrent requests and temporary result array indexes and avoiding content misplacement. The initialization mechanism enables the subsequent process to strictly handle mixed content according to the server-defined order, thereby solving the order confusion problem caused by independent rendering in traditional solutions from the root cause and effectively reducing the misplacement rate of displayed content.

[0032] In S130, all streaming output requests are sent in parallel based on the Id array of streaming output, and the streaming output results returned by the server are received.

[0033] The streaming output request can refer to an asynchronous data acquisition operation initiated by the front end based on the Id array of streaming output (non-null elements in streamIds), and the target of the request is the server-side streaming content generation interface. The streaming output result can refer to the data segments returned by the server in batches.

[0034] Specifically, all streaming output requests corresponding to the non-null elements in the Id array of streaming output streamIds, i.e., the non-null elements in streamIds, can be sent in parallel based on the non-null elements in the Id array of streaming output streamIds, i.e., the non-null elements in streamIds, thereby improving the data transmission efficiency. The results returned by the streaming output are pushed into the temporary result array tempResults each time, and if the streaming output ends, the corresponding state in the status object statusMap is modified, i.e., the state is modified from processing to completed.

[0035] For example, the streaming output results can be accumulated piece by piece: tempResults[index] gradually changes from [] to ["He", "llo", "World"]; that is, the text stream arriving in blocks is finally spliced into complete content in the temporary result array. After the streaming output ends, the statusMap state update (pending→completed) is triggered.

[0036] In this embodiment, all streaming output requests are sent in parallel based on the Id array of streaming output, and the streaming output results returned by the server are received. The non-null elements in streamIds are screened to avoid initiating invalid requests for fixed text bits and reduce network redundancy. All streaming requests are concurrently requested at one time to eliminate serial waiting delays and improve data transmission efficiency.

[0037] S140, based on the streaming output result and the initialized mixed structure array, rendering and displaying the business parameter request result combined with the fixed text and the streaming output by a sequential typewriter.

[0038] The sequential typewriter rendering can refer to character-level progressive rendering and display. The business parameter request result can refer to the heterogeneous structured data returned by the server after responding to the business parameter request.

[0039] Specifically, the position index of each element in the temporary result array tempResults can be determined according to the data structure of the mixed structure array, and the streaming output result and the fixed text content returned in the initialization stage are pushed into the temporary result array tempResults according to the position index of each element. That is, the fixed text has been pushed into the corresponding position in the temporary result array in the initialization stage, and after the streaming output result is obtained in real time, the streaming output result is pushed into the corresponding position in the temporary result array in real time. Through the sequential typewriter rendering technology, each element in the temporary result array is pushed into the display result array (displayResults) character by character in strict accordance with the data structure sequence of the mixed structure array, and based on each character-level element in the display result array, rendering and display is performed on the front-end display page.

[0040] For example, if the data structure order of the mixed structure array is {“text_1”, “stream_1”, “text_2”, “stream_2”}, the temporary result array after initialization is [[“fixed text 1 content”], [], [“fixed text 3 content”], []], i.e., the order of each element in the temporary result array is the same as the data structure order of the mixed structure array. If the fixed text 1 content is “please reply:”, and the fixed text 3 content is “please reply:”, the temporary result array after initialization is [[“please reply:”], [], [“please reply:”], []], and if the segmented stream output result is “He”, “llo”, “Wor”, the temporary result array is [[“please reply:”], [“He”, “llo”, “Wor”], [“please reply:”], []]. Pushing each element in the temporary result array into the display result array word by word, the display result array is [“please”, “reply:”, “He”, “llo”, “Wor”], which is displayed on the front-end display page as: “please”→“reply:”→“H”→“e”→“l”→“l”→“o”→“W”→“o”→“r”. At this time, the state in the state object corresponding to the stream output stream_1 is pending, so even if the fixed text 3 (text_2) content “please reply:” exists, it will not be pushed into the display result array until the stream output result of the stream output stream_1 is completely output, and the state in the state object corresponding to the stream output stream_1 is updated from pending to completed. Then, the fixed text 3 (text_2) content is pushed into the display result array for rendering and display.

[0041] In this embodiment, a mixed structure array of fixed text combined with streaming output is received by sending a service parameter request, wherein the mixed structure array contains the fixed text corresponding to the service parameter request; core data in the mixed structure array is determined and initialized, wherein the core data includes a state object, a temporary result array and an Id array of streaming output; based on the Id array of streaming output, all streaming output requests are sent in parallel, and streaming output results returned by the server are received; based on the streaming output results and the initialized mixed structure array, the service parameter request results of the fixed text combined with the streaming output are rendered and displayed by a sequential typewriter; the problem of mixed display confusion of a front-end page in the prior art is solved, multiple fixed texts and multiple segments of streaming output can be mixed together and displayed in a fixed arrangement order, the experience of a user in receiving a message generated by an AI server is significantly improved; no matter how complex and huge the message content is, the user can feel a smooth and non-stuttering display effect, thereby enhancing the satisfaction and trust of the AI service; further, the diversified needs of the user in AI custom professional skills are met, the organic combination of fixed scripts and AI replies is realized; the AI service is more flexible and diverse, and can better adapt to the needs and scenarios of different users.

[0042] Optionally, the determination of the core data in the mixed structure array and the initialization include: traversing each element in the mixed structure array and determining an element type; if the element type is fixed text, setting the state of the state object of the element to complete, pushing the fixed text corresponding to the service parameter request into the temporary result array, and pushing null into the Id array of streaming output; if the element type is streaming output, setting the state of the state object of the element to waiting, pushing an empty array into the temporary result array, and pushing the id of the element into the Id array of streaming output.

[0043] Wherein, the traversal can refer to the sequential access, type identification and real-time update of three core structures (state object, temporary result array and streaming ID array) of each element in the mixed structure array (results) returned by the server according to the original order of the front end. Sequential access means starting from the first element of the array, processing each element (index from 0 to n-1) in turn, and strictly following the order defined by the server, that is, the traversal order must be completely consistent with the array order returned by the server. The element can refer to each independent unit in the mixed structure array results returned by the server, which is essentially a heterogeneous data object organized in display order; the type of the element is determined according to the type field, and the element type can specifically include fixed text and streaming output.

[0044] Specifically, the traversal server returns each element (results) in the mixed structure array, and determines the element type. If the element type of the traversed element is fixed text text, a status value is set to completed in the status object statusMap, statusMap[id]=completed, the content of the element, i.e., the fixed text content corresponding to the business parameter request, is pushed into the temporary result array tempResults, and a null is pushed into the stream output Id array streamIds. If the element type of the traversed element is stream, a status value is set to pending in the status object statusMap, i.e., statusMap[id]=pending, an empty array [] is pushed into the temporary result array tempResults, and the id of the element is pushed into the stream output Id array streamIds. The specific initialization operation logic is shown in Table 1 as follows: Table 1

[0045] Exemplarily, the three core data after initialization can be as follows: statusMap: { text_1: "completed", stream_2: "pending", text_3: "completed", stream_4: "pending", } tempResults: [["fixed text 1"], [], ["fixed text 3"], [],] streamIds: [null, stream_2, null, stream_4] In this embodiment, by traversing each element in the mixed structure array, the element type is determined; if the element type is fixed text, the state of the element's state object is set to complete, and the fixed text corresponding to the business parameter request is pushed into the temporary result array, and null is pushed into the Id array of stream output; if the element type is stream output, the state of the element's state object is set to pending, and an empty array is pushed into the temporary result array, and the id of the element is pushed into the Id array of stream output, to clearly distinguish between completed fixed text (completed) and pending stream output (pending), and to provide a basis for judging the subsequent state polling mechanism; through sequential traversal, the order of the content defined by the server is converted into the order of the front-end data structure (such as the index position of tempResults), to ensure that the subsequent display is not disordered; through the streamIds array, the stream output ID (filtering null values) that needs to be requested concurrently is accurately positioned, to avoid invalid requests.

[0046] Optionally, based on the Id array of stream output, all stream output requests are sent in parallel, and the stream output results returned by the server are received, including: determining the non-null elements in the Id array of stream output; sending the stream output requests of the non-null elements in parallel; receiving the stream output results returned by the server, and pushing the stream output results into the temporary result array.

[0047] Specifically, the non-null elements are determined from the Id array of stream output streamIds, and the stream output requests of all non-null elements are sent to the server in parallel. The data segments returned by the server are received in batches, and each returned data segment is pushed into the corresponding element in the temporary result array tempResults. The elements in the temporary result array can refer to the content storage of the corresponding mixed array position, and the index can ensure that the results are written to the correct position. Further, the reserved empty array in tempResults can be located by the sequential index index, and each request corresponds to a separate stream output position, wherein the sequential index index can refer to the sequential index of the elements in the mixed structure array (results) returned by the server, which is an integer starting from 0, the first element index=0, and the subsequent elements are incremented by 1, 2, 3,... The unified coordinates of the main fixed text and stream output, regardless of the element type, each element occupies an index position.

[0048] Exemplarily, the correspondence between the element positions in the temporary result array and the sequential index index is shown in Table 2: Table 2

[0049] By index, the result can be written to the correct position, even if the stream request response sequence is random (e.g. stream_4 is returned before stream_2), stream_4 can be fixedly written to tempResults[3] and stream_2 can be fixedly written to tempResults[1] according to index, avoiding the page disorder caused by multiple stream output results returned by the server, maintaining the original order defined by the server in the asynchronous scenario, and making the two types of elements share the same index system, so that fixed text and asynchronous stream output can be orderly cooperated in the same framework, making fixed text become the cornerstone of smooth experience, stream output become progressive enhancement, and finally realizing the immersive effect of "static content immediately visible and dynamic content seamlessly inserted". Exemplarily, concurrent stream requests can be as follows: Promise.all(streamIds.map((id,index)=>fetchStreamData(id,index))); fetchStreamData(id,index){ const evtSource = new EventSource(res); evtSource.onmessage = (e) =>{ tempResults[index].push(e); if(done){ statusMap[id] = “completed”; } } }。

[0050] In the embodiment, non-null elements in the Id array of the stream output are determined, stream output requests of the non-null elements are sent in parallel, stream output results returned by the server are received and pushed into a temporary result array, the ID-driven precise concurrency mechanism is used to maximize the stream output efficiency under the premise of ensuring the content order, non-null elements in streamIds are screened to avoid invalid requests to fixed text bits and reduce network redundancy, all stream requests are concurrently sent at one time to eliminate serial waiting delay, and stream results are pushed into the corresponding empty array of tempResults in real time according to the preset index (index), so that the content is always anchored to the original position and the original order defined by the server can be maintained in the asynchronous scenario.

[0051] Embodiment 2:

[0052] Figure 2 A flowchart of a front-end display method combining fixed text and streaming output is provided for Embodiment Two of the present application. The technical solution of this embodiment is further refined on the basis of the above-mentioned embodiment. As shown in the figure, the method comprises the following steps. Figure 2 S210, sending a service parameter request and receiving a hybrid structure array combining fixed text and streaming output in response to the server, wherein the hybrid structure array contains fixed text corresponding to the service parameter request.

[0053] S220, determining core data in the hybrid structure array and initializing, wherein the core data includes a state object, a temporary result array and an Id array of streaming output.

[0054] S230, sending all streaming output requests in parallel based on the Id array of streaming output and receiving streaming output results returned by the server.

[0055] S240, traversing streaming output results and fixed text in the temporary result array to generate a display result array.

[0056] The display result array can refer to a character-level ordered sequence array generated for front-end page display. Each element of the display result array is a single character (such as Chinese characters, letters, punctuation marks), and strictly follows the element order of the original hybrid structure array, expands in real time with streaming content (i.e. streaming output results), and can directly drive the typewriter effect display. For example, the display result array can be ["You", "good", "!", "when", "front", "day", "weather", ":"].

[0057] Specifically, the temporary result array is traversed to determine the element type. If the element type is fixed text, the fixed text content is pushed into the display result array (displayResults) character by character. If the element type is streaming output, the state of the streaming output is queried in the state object statusMap. If the state of the streaming output is completed (completed), the entire result of the streaming output is pushed into the display result array (displayResults) character by character. If the state of the streaming output is pending, the existing result of the streaming output is pushed into the display result array (displayResults) character by character, and the traversal of the temporary result array is stopped. The newly added streaming output result in the temporary result array is pushed into the display result array character by character repeatedly until all states are completed (completed).

[0058] ​In this embodiment, by sequentially traversing the stream output buffer and fixed text content in the temporary result array, a display result array is dynamically generated, and unified time sequence arrangement of multi-source heterogeneous data is achieved.

[0059] S250, based on the display result array, the data structure order of the mixed structure array is rendered by the typewriter to display the business parameter request result combined with the fixed text and the stream output.

[0060] The data structure order of the mixed structure array can refer to the topological order of the element arrangement in the response array returned by the server, which determines the absolute order of content display. The data structure order of the mixed structure array is the same as the element position order in the temporary result array and the display order of the display result array. For details, see Table 2, which is corresponded by the sequential index index.

[0061] Specifically, according to the display order of the display result array, the fixed text content and the stream output result are extracted from the display result array by the typewriter rendering technology and rendered to the front-end display page. The rendering end condition is that all characters in the display result array have been rendered, and all states in the state object are complete.

[0062] In this embodiment, based on the display result array, the data structure order of the mixed structure array is rendered by the typewriter to display the business parameter request result combined with the fixed text and the stream output; by sequentially traversing the stream output buffer and fixed text content in the temporary result array, a display result array is dynamically generated, and unified time sequence arrangement of multi-source heterogeneous data is achieved, and by strictly following the original order of the mixed structure array, the content in the display result array is outputted by the typewriter rendering method, and seamless fusion display of fixed text and stream output is achieved.

[0063] Optionally, the traversing the stream output result and the fixed text in the temporary result array to generate the display result array comprises: repeatedly traversing the temporary result array in the data structure order of the mixed structure array by a first time interval timer; until the state of the state object corresponding to the stream output result and the fixed text in the temporary result array is complete, the traversal is stopped.

[0064] The first time interval timer can refer to a state polling timer, which is used to periodically check the state object (statusMap) and the temporary result array (tempResults), and synchronize the new content in the temporary result array to the display result array (displayResults) according to the state; the first time interval can refer to 50ms.

[0065] Specifically, set a timer A to query the status of the status object statusMap every 50ms, and query in the order of the temporary result array tempResults (that is, the order of the data structure in the mixed structure array). If the status is completed, compare the temporary result array to see if there is a new part. If so, synchronize it to the display result array (displayResults); if the status is pending, synchronize the new content in the temporary result array tempResults corresponding to the element to the display result array (displayResults), then end the query, wait 50ms, and perform the next query until all the states in the status objects corresponding to the streaming output results and fixed text in the temporary result array are completed, end timer A, and stop traversal. The specific algorithm for status polling based on the first time interval timer can be as follows: setInterval(()=>{ let allCompleted = true; for(key in statusMap){ if(statusMap[key] ==="completed"){ Synchronize tempResults to displayResults; } if(statusMap[key] ==="pending"){ Synchronize tempResults to displayResults; allCompleted = false; break; } } if(allCompleted){ clearInterval(); } },50).

[0066] In this embodiment, the temporary result array is repeatedly traversed in the data structure order in the mixed structure array through a first time interval timer until the state of the state object corresponding to the stream output result and the fixed text in the temporary result array is complete, then the traversal is stopped. Through the accurate 50ms polling period, strict data structure order maintenance and intelligent state interruption mechanism, seamless connection of fixed text and stream content is realized, cognitive burden caused by content jumping is avoided, and "zero perception waiting" effect of mixed content rendering is realized.

[0067] Optionally, the repeatedly traversing the temporary result array in the data structure order in the mixed structure array through the first time interval timer comprises: If the element type is fixed text and the state of the state object is complete, the fixed text content corresponding to the business parameter request is pushed into the display result array word by word when the first traversal is performed, and the subsequent traversal is skipped. If the element type is stream output and the state of the state object is complete, the result of the stream output is pushed into the display result array word by word, and whether there is new content in the temporary result array is judged in the next traversal. If there is new content, the new content is synchronized to the display result array word by word. If the element type is stream output and the state of the state object is processing, the result of the stream output already existing in the temporary result array is pushed into the display result array word by word, and the traversal is stopped. The next traversal is repeated based on the first time interval timer, whether there is new content in the temporary result array is repeatedly judged, and if there is new content, the new content is synchronized to the display result array word by word.

[0068] Specifically, a timer A is set to query the state of the state object statusMap every 50ms, and the query is performed in the order of the temporary result array tempResults (i.e. the data structure order in the mixed structure array). If the element type is fixed text and the state of the state object is complete, the fixed text content corresponding to the business parameter request in the temporary result array is pushed into the display result array word by word when the first traversal is performed, and the subsequent traversal is skipped.

[0069] If the element type is stream output, the state of the state object is completed, then the results of the stream output are pushed into the display result array character by character, and in the next iteration, it is determined whether there is new content in the temporary result array, if yes, the new content is synchronized to the display result array character by character; if not, skip in the subsequent iteration; the new content can refer to the newly returned stream output result of the server. If the element type is stream output, the state of the state object is processing, then in the first iteration, the results of the stream output already existing in the temporary result array are pushed into the display result array character by character, and the iteration is stopped, based on the first time interval timer, every 50 ms, the iteration is performed once, and it is determined whether there is new content in the temporary result array, if yes, the new content is synchronized to the display result array character by character. Until all states in the state objects corresponding to the stream output results and fixed texts in the temporary result array are completed (completed), the timer A is ended, and the iteration is stopped.

[0070] In this embodiment, based on the first time interval timer, the iteration is performed once every 50 ms; strictly follow the original element order returned by the server (for example, fixed text → stream → fixed text → stream), ensure that the business logic and visual presentation are completely consistent, solve the interleaving misplacement problem caused by asynchronous stream return in the traditional scheme; the stream content is inserted into the display queue character by character in the order of data block arrival, and the user can perceive part of the result in real time; only when there is new content in the stream buffer or the fixed text is not synchronized, the display array is updated, avoiding invalid iteration; when an unfinished stream element is encountered, the generation is immediately paused, the position context of the arrived content is preserved, and a precise anchor point is provided for subsequent incremental synchronization, ensuring that the content is coherent and there is no jump when the rendering is resumed after interruption.

[0071] Optionally, the business parameter request result combined with the fixed text and the stream output is rendered and displayed by a sequential typewriter based on the display result array, including: The business parameter request result combined with the fixed text and the stream output in the display result array is rendered and displayed by a sequential typewriter based on the second time interval timer; If the display result array is displayed, it is determined whether the states in the state objects are all completed; If not, the new content in the display result array is continuously rendered based on the second time interval timer; If yes, the display is ended.

[0072] The second time interval can refer to 20 ms, and the new content in the display result array can refer to the stream output result characters newly synchronized from the temporary result array to the display result array.

[0073] Specifically, a timer B is set, and the renderer adopts a typewriter technique, which is executed once every 20 ms, to combine the fixed text in the display result array with the streaming output of the business parameter request result, and render and display the characters in the display result array to the front-end display page in the display order in the display result array. It can be simply understood that the renderer outputs a character in the display result array every 20 ms. Exemplarily, it can be "please" -> "back" -> "H" -> "e" -> "hello".

[0074] If the display result array (displayResults) is completely displayed, it is necessary to determine whether all the status objects statusMap are completed (allCompleted). If not all are completed, timer B continues to be executed, and the renderer queries every 20 ms whether there is a new character in the display result array. When it is determined that there is a new character, the rendering operation is executed again until all the new content in the display result array is completely displayed. Then, it is determined again whether all the status objects statusMap are completed (allCompleted). The above steps are repeated until the status in the status object is completed, and the display is ended and timer B is stopped.

[0075] Exemplarily, if the current display result array is ["please", "back", "H", "e"], the characters in the display result array have been completely rendered and displayed, and it is determined whether the status in the status object is completed. If not, a flashing cursor is inserted, and every 20 ms, it is queried whether there is a new character in the display result array. For example, if timer B continues to query for 3 times, i.e., after 60 ms, it is determined that there is a new character ["l", "l"] in the display result array, the rendering operation is executed again until all the new content in the display result array is completely displayed. Then, it is determined again whether all the status objects statusMap are completed (allCompleted). The above steps are repeated until the status in the status object is completed. During the continuous query stage of timer B, the cursor in the front-end display page flashes continuously at 20 ms. The specific result display algorithm can be as follows: let displayIndex = 0; setInterval(()=>{ const str = displayResults[displayIndex]; renderFunction(str); displayIndex++; if(displayIndex === displayResults.length-1){ if (allCompleted) { clearInterval(); } } }, 20); In this embodiment, the seamless sequential mixed rendering of fixed text and streaming output content is realized through the independently set second time interval timer (such as 20 ms), the rendering termination condition is intelligently judged while the smoothness of the typewriter effect is ensured, when the content of the display result array is not completely rendered and there is uncompleted streaming content, the newly added content is continuously monitored and rendered in real time; only when all the content is synchronized and the display queue is exhausted, the rendering is ended; the character-by-character mixed rendering of fixed text and streaming content has no garbled code, strictly depends on the state object to judge the global completion degree, eliminates content truncation or premature termination, and ensures the complete display of the business parameter request result.

[0076] In one specific embodiment, Figure 3 A full flowchart of front-end and server interaction is provided for the second embodiment of the application. As shown in Figure 3 , the specific steps of the front-end and server interaction are as follows: 1. The front-end page sends business parameters to the AI server; 2. The server responds and returns a structured array (i.e., a mixed structure array); 3. The front-end initializes the core data, parses the array to generate a state object, a temporary result array, and an Id array for streaming output; 4. The streaming output request of the non-null element is sent in parallel; 5. The streaming output result is received and stored in the temporary result array; 6. Through the 50 ms timer polling, the fixed text / streaming content in the temporary result array is pushed into the display result array (not shown in the figure) according to the data structure order in the mixed structure array.

[0077] 7. Through the 20 ms timer, the fixed text / streaming content is extracted character by character from the display result array and rendered to the front-end display page; 8. When all the states in the state object are complete and all the characters in the display result array are rendered, the front-end page display process is ended.

[0078] Embodiment 3:

[0079] Figure 4 A framework diagram of a front-end display system combining fixed text and streaming output is provided for the third embodiment of the application. As shown in Figure 4 , the system includes: The first processing module 310 is configured to send a service parameter request and receive a hybrid structure array of fixed text combined with streaming output in response to the server, wherein the hybrid structure array includes fixed text corresponding to the service parameter request. The initialization module 320 is configured to determine core data in the hybrid structure array and perform initialization, wherein the core data includes a state object, a temporary result array and an Id array of streaming output. The second processing module 330 is configured to send all streaming output requests in parallel based on the Id array of streaming output and receive streaming output results returned by the server. The display module 340 is configured to render and display the service parameter request result of the fixed text combined with the streaming output by a sequential typewriter based on the streaming output result and the initialized hybrid structure array.

[0080] Optionally, the initialization module 320 is specifically configured to: traverse each element in the hybrid structure array and determine an element type; if the element type is fixed text, set the state of the state object of the element to complete, push the fixed text corresponding to the service parameter request into the temporary result array and push null into the Id array of streaming output; if the element type is streaming output, set the state of the state object of the element to waiting and push an empty array into the temporary result array and push the id of the element into the Id array of streaming output.

[0081] Optionally, the second processing module 330 is specifically configured to: determine non-null elements in the Id array of streaming output; send streaming output requests of the non-null elements in parallel; receive streaming output results returned by the server and push the streaming output results into the temporary result array.

[0082] Optionally, the display module 340 specifically includes: a generating unit configured to traverse the streaming output result and the fixed text in the temporary result array and generate a display result array; a display unit configured to render and display the service parameter request result of the fixed text combined with the streaming output by a typewriter based on the display result array and in the data structure order of the hybrid structure array.

[0083] Optionally, the generating unit is specifically configured to: repeat the traversal of the temporary result array by a first time interval timer and in the data structure order of the hybrid structure array. until the state of the state object corresponding to the fixed text and the stream output result in the temporary result array is complete, the traversal is stopped.

[0084] Optionally, the generating unit is specifically further configured to: if the element type is fixed text and the state of the state object is complete, the fixed text content corresponding to the business parameter request is pushed into the display result array character by character when the first traversal is performed, and the subsequent traversal is skipped; if the element type is stream output and the state of the state object is complete, the result of the stream output is pushed into the display result array character by character, and when the next traversal is performed, it is determined whether there is new content in the temporary result array, and if so, the new content is synchronized to the display result array character by character; if the element type is stream output and the state of the state object is processing, the result of the stream output already existing in the temporary result array is pushed into the display result array character by character, and the traversal is stopped, the next traversal is repeated based on the first time interval timer, and it is repeatedly determined whether there is new content in the temporary result array, and if so, the new content is synchronized to the display result array character by character.

[0085] Optionally, the display unit is specifically configured to: based on the second time interval timer, the business parameter request result of the combination of the fixed text and the stream output in the display result array is rendered and displayed by a sequential typewriter; if the display result array is displayed completely, it is determined whether the state in the state object is complete; if not, the new content in the display result array is continuously rendered based on the second time interval timer; if yes, the display is ended.

[0086] The embodiment of the application provides a front-end display system combining fixed text and stream output, returns and analyzes a structured array through the interaction between the front end and the AI server, the array mixes fixed text and stream output elements, and the display order and state of the two are coordinated by using a state object, a temporary result array and an Id array of stream output, so that the display is smooth in sequence; a double timer mechanism is adopted, one timer is responsible for regularly querying the state of the state object, and the temporary result array is synchronized to the display result array according to the state change; the other timer is responsible for displaying the content in the display result array character by character on the page, and through the cooperative working mode of the double timers, the coherence, real-time performance and accuracy of the display content are ensured.

[0087] Embodiment 4:

[0088] In some embodiments, a method of fixed text and streaming output combined front-end presentation can be implemented as a computer program tangibly embodied in a computer readable storage medium, e.g., one or more steps of the method of fixed text and streaming output combined front-end presentation described above can be executed by a processor when the computer program is loaded into a RAM and executed by the processor. Alternatively, in other embodiments, the processor can be configured to perform the method of fixed text and streaming output combined front-end presentation by any other suitable means, e.g., by means of firmware.

[0089] Various implementations of the systems and techniques described above can be realized in digital electronic circuitry, integrated circuitry, a Field Programmable Gate Array (FPGA), an Application Specific Integrated Circuit (ASIC), a System on Chip (SOC), a Complex Programmable logic device (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include implementation in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which can be special or general purpose, coupled to receive data and instructions from, and to transmit data and instructions to, a storage system, at least one input device, and at least one output device.

[0090] Computer programs used to implement the methods of the present application can be written in any combination of one or more programming languages. These computer programs can be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the computer program, when executed by the processor of the computer or other programmable data processing apparatus, enables the systems and methods as claimed in the claims to be implemented. The computer program can be executed entirely on a machine, partially on a machine, partially on a machine as part of a standalone software package, and partially on a remote machine or server.

[0091] In the context of the present application, the computer readable storage medium stores computer instructions for causing a processor to implement the front-end presentation issuance of fixed text combined with streaming output provided by the present application when executed. The computer readable storage medium can be a tangible medium that can contain or store a computer program for use by or in connection with an instruction execution system, apparatus, or device. The computer readable storage medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. Alternatively, the computer readable storage medium can be a machine-readable signal medium. More specific examples of the machine readable storage medium will include one or more lines of electrical connections, portable computer disks, hard disk drives, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fibers, portable compact disc read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0092] To provide for interaction with a user, the systems and techniques described here can be implemented on an electronic device having a display device (e.g., a Cathode Ray Tube (CRT) or a Liquid Crystal Display (LCD) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the electronic device. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.

[0093] The systems and techniques described herein can be implemented in a computing system that includes a back end component, e.g., as a data server, or that includes a middleware component, e.g., an application server, or that includes a front end component, e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described herein, or any combination of such back end, middleware, or front end components. The components of the system can be interconnected by any form or medium of digital data communication, e.g., a communication network. Examples of communication networks include a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0094] The computing system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. A server can be a cloud server, also known as a cloud computing server or cloud host, which is a host product in the cloud computing service system, to solve the defects of large management difficulty and weak business scalability in traditional physical host and virtual private server (VPS) services.

[0095] It should be understood that the various forms of flow shown above can be re-ordered, added to, or deleted from without departing from the scope of the present disclosure. For example, the steps recited in the present disclosure can be executed in parallel, executed in sequence, or executed in different orders, as long as the desired results of the technical solutions of the present disclosure can be achieved, and the present disclosure is not limited herein.

[0096] The above detailed description does not constitute a limitation on the protection scope of the present application. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent replacements, and improvements made within the spirit and principles of the present application shall be included in the protection scope of the present application.

Claims

1. A front-end display method combining fixed text and streaming output, characterized in that: include: Sending a service parameter request, and receiving a hybrid structure array of a fixed text response from the server combined with a stream output, wherein the hybrid structure array includes the fixed text corresponding to the service parameter request; Determine the core data in the hybrid structure array and initialize it, wherein the core data includes a state object, a temporary result array, and an ID array for streaming output; Based on the ID array of the streaming output, all streaming output requests are sent in parallel, and the streaming output results returned by the server are received; Based on the streaming output result and the initialized hybrid structure array, the business parameter request result combining the fixed text and the streaming output is displayed through sequential typewriter rendering.

2. The method according to claim 1, characterized in that The determining of the core data in the hybrid structure array and initializing the core data includes: Traversing each element in the mixed structure array and determining the element type; If the element type is fixed text, set the status of the element's status object to completed, push the fixed text corresponding to the business parameter request into the temporary result array, and push null into the stream output Id array; If the element type is streaming output, the state of the state object of the element is set to waiting, and an empty array is pushed into the temporary result array, and the id of the element is pushed into the Id array of streaming output.

3. The method according to claim 2, characterized in that The method includes sending all streaming output requests in parallel based on the ID array of the streaming output and receiving the streaming output results returned by the server, including: Determine the non-null elements in the Id array of the streaming output; Sending streaming output requests for the non-null elements in parallel; Receive the streaming output results returned by the server and push the streaming output results into a temporary result array.

4. The method according to claim 3, characterized in that Based on the streaming output result and the initialized hybrid structure array, the business parameter request result combining the fixed text and the streaming output is displayed through sequential typewriter rendering, including: Traversing the streaming output results and fixed text in the temporary result array to generate a display result array; Based on the display result array, the business parameter request result combining the fixed text and the streaming output is displayed through typewriter rendering in the data structure order of the mixed structure array.

5. The method according to claim 4, characterized in that The traversing the stream output results and fixed text in the temporary result array to generate a display result array includes: Repeatedly traversing the temporary result array in the order of the data structures in the mixed structure array by using a first time interval timer; The traversal is stopped until the status of the status objects corresponding to the streaming output result and the fixed text in the temporary result array is completed.

6. The method according to claim 5, characterized in that Repeating the traversal of the temporary result array in the order of the data structures in the mixed structure array by using the first time interval timer includes: If the element type is fixed text and the status of the status object is completed, the fixed text content corresponding to the business parameter request is pushed word by word into the display result array during the first traversal and skipped during subsequent traversals; If the element type is streaming output and the status of the status object is completed, the result of the streaming output is pushed word by word into the display result array, and during the next traversal, it is determined whether the temporary result array has new content. If so, the new content is synchronized word by word to the display result array; If the element type is streaming output and the status of the status object is processing, the results of the streaming output already in the temporary result array are pushed word by word into the display result array, and the traversal is stopped. Based on the first time interval timer, the next traversal is repeated to repeatedly determine whether there is new content in the temporary result array. If so, the new content is synchronized word by word to the display result array.

7. The method according to claim 4, characterized in that The business parameter request result of displaying the fixed text combined with the streaming output by sequential typewriter rendering based on the display result array includes; Based on a second time interval timer, displaying the business parameter request result combining the fixed text in the display result array and the streaming output by sequential typewriter rendering; If the display result array is displayed, determine whether the status in the status object is all completed; If not, then based on the second time interval timer, continue to render the newly added content in the display result array; If so, end the display.

8. A front-end display system that mixes fixed text and streaming output, characterized in that: The system is used to execute the front-end display method for mixing fixed text and streaming output according to any one of claims 1 to 7, comprising: A first processing module is configured to send a service parameter request and receive a hybrid structure array of a fixed text response from a server and a stream output, wherein the hybrid structure array includes the fixed text corresponding to the service parameter request; An initialization module, configured to determine and initialize the core data in the hybrid structure array, wherein the core data includes a state object, a temporary result array, and an ID array for stream output; A second processing module is configured to send all streaming output requests in parallel based on the streaming output ID array and receive streaming output results returned by the server; A display module is used to display the business parameter request result combining the fixed text and the streaming output through sequential typewriter rendering based on the streaming output result and the initialized mixed structure array.

Images