Front-end interaction method, system and device based on artificial intelligence, medium and product

Abstract

The invention relates to the technical field of computers, in particular to a front-end interaction method based on artificial intelligence, and the method comprises the steps: obtaining a user input instruction through a first communication channel, sending the user input instruction to a rear-end agent for communication service, and receiving a response data stream fed back by the rear-end agent through a second communication channel. The method comprises the following steps: performing response type state management through a response data stream to update dialogue state information, performing asynchronous streaming processing on the updated dialogue state information, generating display content word by word, performing analysis rendering according to the display content to obtain rich text content, and performing interface updating of a dialogue display area through the rich text content. And the dialogue message corresponding to the rich text content is displayed in the user interface, so that the front-end response and interaction efficiency is improved, and the resource consumption load is reduced.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a front-end interaction method, system, device, medium and product based on artificial intelligence. Background Technology

[0002] With the rapid development of artificial intelligence technology, artificial intelligence (AI) assistants, as the core interactive carrier connecting users with complex intelligent services, have been widely used in various scenarios such as smart terminals, IoT devices, and enterprise service platforms. They aim to reduce the user threshold and improve the convenience and popularity of intelligent services through natural language interaction.

[0003] However, traditional AI assistant front-end implementations typically rely on short polling or simple long-connection technologies, resulting in high real-time response latency and heavy server resource load, failing to meet the real-time response requirements of AI assistants. Furthermore, traditional front-ends require frequent requests, leading to significant server pressure and high client-side resource consumption. Inadequate handling of message delays and connection drops also greatly degrades the user experience.

[0004] Therefore, there is an urgent need for an AI-based front-end interaction method to improve front-end response and interaction efficiency while reducing resource consumption load. Summary of the Invention

[0005] This invention provides a front-end interaction method, system, device, medium, and product based on artificial intelligence, which can improve front-end response and interaction efficiency and reduce resource consumption load.

[0006] In a first aspect, this application provides a front-end interaction method based on artificial intelligence, the method comprising: User input commands are acquired based on a preset first communication channel, and the user input commands are sent to a backend intelligent agent for communication services. The response data stream fed back by the backend intelligent agent is received based on a preset second communication channel. The first communication channel is an uplink transmission channel in request-response communication mode, and the second communication channel is a downlink transmission channel for unidirectional streaming push. Responsive state management is performed based on the response data stream to update the dialogue state information; Asynchronous streaming processing is performed based on the updated dialogue state information to generate display content word by word; Based on the displayed content, the rich text content is obtained by parsing and rendering. The interface of the dialogue display area is updated based on the rich text content, and the dialogue message corresponding to the rich text content is displayed in the user interface.

[0007] Secondly, this application provides a front-end interaction system based on artificial intelligence, the system comprising: The communication layer module is used to acquire user input commands based on a preset first communication channel, send the user input commands to the backend intelligent agent for communication services, and receive response data streams fed back by the backend intelligent agent based on a preset second communication channel; the first communication channel is an uplink transmission channel of request-response communication mode, and the second communication channel is a downlink transmission channel of unidirectional streaming push. The state management layer module is used to perform reactive state management based on the response data stream in order to update the dialogue state information; The response streaming output module is used to perform asynchronous streaming processing based on the updated dialogue state information and generate display content word by word; The content rendering module is used to parse and render the displayed content to obtain rich text content. The dialogue display module is used to update the interface of the dialogue display area based on the rich text content, and to display the dialogue message corresponding to the rich text content in the user interface.

[0008] Optionally, the reactive state management based on the response data stream includes: Based on a preset proxy mechanism, fine-grained data change detection is performed on the dialogue state information; Upon confirmation of data changes, the interface update operation is automatically triggered based on the corresponding interface update function.

[0009] Optionally, the asynchronous streaming processing based on the updated dialogue state information includes: Based on a preset character event slicing strategy, data fragments are obtained from the response data stream; The data fragments are temporarily stored using a streaming buffer, and then pushed to the main thread based on a preset amount of data. Based on a preset anti-shake rendering strategy, the pushed data fragments are batch-updated to the display content.

[0010] Optionally, the temporary storage of the data segment based on the streaming buffer includes: Based on a preset first buffer, receive raw data segments; Based on a preset second buffer, receive the processed data segment to be displayed; Based on a preset frame rate threshold, the original data segments in the first buffer are transferred to the second buffer.

[0011] Optionally, the step of parsing and rendering the displayed content to obtain rich text content includes: Based on a preset incremental parser, the displayed content is parsed to construct a corresponding abstract syntax tree; Based on preset security filtering rules, the node content of the abstract syntax tree is filtered to obtain secure intermediate content; Based on a preset webpage worker thread, syntax highlighting is performed on the code blocks of the secure intermediate content to obtain the rich text content.

[0012] Optionally, the system further includes a dialogue history management module, used for: Based on a preset dual-storage strategy, the dialogue state information is stored in the main storage space; When the main storage space is unavailable, the dialogue state information is stored in the degraded cache space; Based on the time parameter of the stored data, conflict detection and merging are performed on the concurrent modifications of the stored data across multiple terminals.

[0013] Optionally, updating the interface based on the rich text content includes: Based on a preset virtual interface structure technology, the differences in interface changes corresponding to the rich text content are calculated. Based on the aforementioned differences in change, the actual interface structure of the rich text content is minimized and updated. Based on a preset anchor point positioning strategy, the view of the dialog display area is scrolled to the current dialog content position to update the interface.

[0014] Optionally, the communication layer module is further configured to calculate the time interval for the next reconnection based on a preset exponential backoff algorithm when it is determined that the connection is interrupted; Based on the aforementioned time interval, a reconnection request is sent to the backend agent.

[0015] Thirdly, this application provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement any one of the artificial intelligence-based front-end interaction methods described in the first aspect above.

[0016] Fourthly, this application provides a computer storage medium storing computer program instructions, which are executed by a processor to perform any one of the artificial intelligence-based front-end interaction methods described in the first aspect above.

[0017] Fifthly, an embodiment of this application provides a computer program product, including computer program instructions, which, when executed by a processor, implement any one of the artificial intelligence-based front-end interaction methods described in the first aspect above.

[0018] The beneficial effects of this invention are as follows: This application provides an AI-based front-end interaction method, system, device, medium, and product. The method acquires user input commands through a first communication channel, sends the user input commands to a back-end intelligent agent for communication services, and receives response data streams from the back-end intelligent agent through a second communication channel. Responsive state management is performed through the response data stream to update dialogue state information. The updated dialogue state information is then asynchronously streamed to generate display content character by character. The display content is parsed and rendered to obtain rich text content, which is then used to update the interface of the dialogue display area. The corresponding dialogue message is then displayed in the user interface, thereby improving front-end response and interaction efficiency and reducing resource consumption load. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, the drawings described below are only embodiments of this application. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0020] Figure 1 A flowchart illustrating an artificial intelligence-based front-end interaction method provided in an embodiment of this application; Figure 2 A schematic diagram of a system interaction process provided in an embodiment of this application; Figure 3 A schematic diagram of system module calls provided in an embodiment of this application; Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0021] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application. Unless otherwise specified, the embodiments and features in the embodiments of this application can be arbitrarily combined with each other. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than that shown here.

[0022] The terms "first" and "second" in the specification, claims, and accompanying drawings of this application are used to distinguish different objects, not to describe a specific order. Furthermore, the term "comprising" and any variations thereof are intended to cover non-exclusive protection. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or devices. The term "multiple" in this application can mean at least two, for example, two, three, or more, and this application does not impose limitations.

[0023] The term "and / or" in the embodiments of this application is merely a description of the association relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Additionally, the character " / " in this document generally indicates that the preceding and following related objects have an "or" relationship.

[0024] It is understood that the following specific embodiments of this application involve user and other related data. When the various embodiments of this application are applied to specific products or technologies, relevant licenses or consents are required, and the collection, use, and processing of related data must comply with the relevant laws, regulations, and standards of the relevant countries and regions. For example, relevant volunteers can be recruited and agreements can be signed to authorize their data, thereby enabling the use of these volunteers' data for implementation; or, implementation can be carried out within the authorized scope of an organization, using data from members within the organization to implement the following implementation methods for data management; or, the relevant data used in specific implementations may be simulated data, such as simulated data generated in a virtual scene.

[0025] The design concept of the embodiments of this application is briefly introduced below: With the rapid development of artificial intelligence technology, AI assistants, as the core interactive carrier connecting users with complex intelligent services, have been widely used in various scenarios such as smart terminals, IoT devices, and enterprise service platforms. They aim to reduce the user threshold and improve the convenience and popularity of intelligent services through natural language interaction.

[0026] However, traditional AI assistant front-end implementations typically rely on short polling or simple long-connection technologies, resulting in high real-time response latency and heavy server resource load, failing to meet the real-time response requirements of AI assistants. Furthermore, traditional front-end implementations require frequent requests, leading to high server pressure and client-side resource consumption. Inadequate message latency and disconnection handling significantly degrade the user experience. On the other hand, traditional front-end development requires manual integration of multiple communication protocols (e.g., HTTP polling, WebSocket) and state management libraries, resulting in high code redundancy and significantly reduced development efficiency.

[0027] In view of the above problems, embodiments of this application provide a front-end interaction method, system, device, medium, and product based on artificial intelligence. This method determines a target flash evaporation calculation mode and a corresponding initial value estimation strategy from a preset set of flash evaporation calculation modes based on the input parameters of the mixture, thereby determining the corresponding flash evaporation estimation parameters. Based on the preset iterative calculation strategy and combined with the flash evaporation estimation parameters, a preset piecewise gas-liquid equilibrium equation is calculated to obtain the target variable corresponding to the target flash evaporation calculation mode. Convergence is determined based on the flash evaporation estimation parameters and the target variable. When the preset convergence condition is met, the current gas-liquid phase composition of the mixture and the target variable are output, thereby improving the efficiency and accuracy of gas-liquid flash evaporation calculation.

[0028] Furthermore, this application provides a comprehensive front-end solution for AI interaction scenarios. By integrating functional modules such as a dialogue display module, a response streaming output module, a content rendering module, a dialogue history management module, and a responsive design module, it achieves end-to-end optimization from user input to AI response display. This includes efficient message rendering and positioning through the real-time dialogue display module, providing a typewriter-like real-time interactive experience through the AI ​​response streaming output module, achieving session persistence, search, and cross-platform synchronization through the Markdown content rendering module, and adapting to full-size devices and multiple interaction methods through the responsive design module. Thus, this application, supported by a UI component layer, a state management layer, an API communication layer, and a content processing layer, constructs a loosely coupled and highly scalable front-end architecture, ensuring efficient collaborative operation of each module. It achieves real-time, streaming transmission and rendering of AI assistant messages, reduces front-end implementation complexity, improves development efficiency, optimizes resource utilization, reduces unnecessary network requests, and provides a complete error handling and reconnection mechanism, supporting multiple message types and rich interactive experiences.

[0029] In summary, the embodiments of this application provide a front-end implementation framework and method for a general AI assistant, which solves the core pain points of "difficult adaptation, poor collaboration, slow expansion, and chaotic experience" in the front-end implementation of traditional general AI assistants. It achieves the effects of reducing development costs, improving operating efficiency, and ensuring consistent user experience, and provides front-end technical support for the large-scale application of general AI assistants in multiple scenarios and on multiple devices.

[0030] To facilitate understanding of the technical solutions provided in the embodiments of this disclosure, some key terms used in the embodiments of this disclosure will be explained below: Server-Sent Events (SSE) is an HTML5 technology that allows servers to proactively push real-time updates to clients (such as browsers) via HTTP connections, instead of clients periodically requesting data from the server. SSE can be used to implement applications such as real-time chat, notifications, and live updates.

[0031] Token-based authentication: The front end obtains an access token through mechanisms such as OAuth2.0 / JWT and carries it in every API request to verify the user's identity and permissions. For example, after the user logs in, the front end stores the token to maintain the AI ​​assistant's session state.

[0032] Virtual Document Object Model (Virtual DOM): A lightweight in-memory data structure in front-end frameworks that efficiently compares UI changes using a Diff algorithm, updating only the necessary parts of the actual DOM. It optimizes the performance of dynamic interfaces for AI assistants (such as rendering conversation history).

[0033] State Management (Pinia): A centralized state management architecture where users maintain the global state of the AI ​​assistant's front-end application (such as user configuration and session history). It ensures the predictability of complex interaction logic through unidirectional data flow.

[0034] Browser multithreading technology (Web Worker): Moves time-consuming tasks (such as AI response parsing and big data processing) to background threads to avoid blocking the main thread and causing interface lag.

[0035] Tailwind Cascading Style Sheets (Tailwind CSS): A feature-first CSS framework that builds designs directly into HTML by combining atomic utility classes, eliminating the need to write large amounts of additional CSS code. Its core features include high customizability, responsive design support, and the ability to generate minimal stylesheets on demand.

[0036] Please refer to Figure 1 The following is a schematic diagram of a front-end interaction method based on artificial intelligence, provided in an embodiment of this application. The specific implementation process of this method is as follows: Step 101: Obtain user input instructions based on the preset first communication channel, send the user input instructions to the backend intelligent agent for communication service, and receive the response data stream fed back by the backend intelligent agent based on the preset second communication channel.

[0037] In this embodiment, the first communication channel adopts a request-response communication mode as an uplink transmission channel, responsible for encapsulating user input commands into structured data packets and sending them to the backend agent. The second communication channel adopts a one-way streaming push mode as a downlink transmission channel, used to continuously receive response data streams from the backend agent. The channels are also associated with each other through session identifiers to ensure a strict correspondence between uplink requests and downlink responses, avoiding data misalignment. Thus, a reliable interaction between user commands and backend responses can be achieved through this dual-channel architecture.

[0038] In one possible implementation, when a connection is determined to be interrupted, the present application embodiment will calculate the time interval for the next reconnection based on a preset exponential backoff algorithm, and send a reconnection request to the backend agent according to the time interval.

[0039] Specifically, this application can automatically identify the communication environment through the protocol adapter, and start the exponential backoff algorithm to reconnect when network fluctuations are detected, thereby ensuring the continuity and integrity of data transmission.

[0040] In one possible implementation, embodiments of this application may also select an adaptation protocol from preset protocols such as SSE and WebSocket to establish a second communication channel, depending on browser support.

[0041] Specifically, this application utilizes a pre-defined first communication channel and a request-response communication mode to encapsulate user input commands into a standardized data format and send them to the backend intelligent agent service via an uplink transmission channel, ensuring the accuracy and integrity of command transmission. Simultaneously, a pre-defined second communication channel, employing unidirectional streaming push technology, establishes a persistent connection to continuously receive response data streams from the backend. This avoids the resource waste of traditional polling methods by using a downlink transmission channel, achieving real-time data push. Thus, in this application, the first communication channel is suitable for transmitting discrete commands, while the second communication channel is designed specifically for continuous data streams. Working together, through an automatic retry mechanism and protocol adaptation strategy (e.g., selecting SSE or WebSocket protocols based on browser support), the stability and low latency of the communication process are ensured, providing a reliable data source for subsequent processing and achieving efficient and reliable data transmission.

[0042] Step 102: Perform reactive state management based on the response data stream to update the dialogue state information.

[0043] In this embodiment of the application, a state machine model is established to parse the response data stream into state change events and drive the update process of the dialogue state information.

[0044] In one possible implementation, the present application embodiment can use a preset proxy mechanism to perform fine-grained data change detection on the dialogue state information, and automatically trigger the interface update operation based on the corresponding interface update function when the data change is confirmed.

[0045] Specifically, embodiments of this application may employ a snapshot mechanism to record the historical state before each state change, while using dependency tracking technology to identify the relationships between state variables, ensuring that only necessary update calculations are triggered when local state changes. During this process, this application may also perform state verification logic, validating the integrity of the response data stream. If data anomalies are detected, a state rollback operation is triggered, thereby ensuring state consistency.

[0046] Step 103: Perform asynchronous streaming processing based on the updated dialogue state information to generate display content word by word.

[0047] In this embodiment, the processing task is asynchronously scheduled through an event loop mechanism, the status information is divided into processing units at the character granularity, and the character output frequency is controlled by a streaming buffer.

[0048] In one possible implementation, embodiments of this application can obtain data fragments from the response data stream through a preset character event slicing strategy, temporarily store the data fragments through a streaming buffer, and then push the data fragments to the main thread according to a preset push data volume, thereby updating the displayed content in batches through a preset anti-jitter rendering strategy.

[0049] Specifically, in the processing of this application, debouncing technology is used to merge high-frequency state update events to avoid frequent interface refreshes. Simultaneously, a priority queue is used to manage data streams from different sources, ensuring that responses to user commands are processed first. During this process, this application can also perform flow control, dynamically adjusting the character generation rate according to system load to prevent processing blockage.

[0050] In one possible implementation, the embodiments of this application can receive raw data segments through a preset first buffer and receive processed data segments to be displayed through a second buffer, thereby transferring the raw data segments in the first buffer to the second buffer according to a preset frame rate threshold.

[0051] Specifically, in this embodiment, events or character streams pushed by the backend through a server or network socket can be concatenated character by character into the same dialog bubble to achieve a typewriter effect. Furthermore, streaming buffer technology can be used to control the amount of data appended to each frame by slicing characters or events, preventing main thread blocking. Debouncing rendering technology can also be used to batch update the document object model using the request animation frame interface, reducing the number of reflows. In addition, this application supports breakpoint resume functionality, recording the offset of received characters after a network interruption, and resuming processing from that offset upon reconnection. It can also receive character stream events from the application programming interface communication layer, call the content processing layer for incremental parsing of markup language, and thus write the generated message content to the state management layer in real time.

[0052] Step 104: Analyze and render the displayed content to obtain rich text content.

[0053] In this embodiment, an incremental parser is used to analyze the text structure and style tags in the displayed content segment by segment, while a security filtering module removes potential malicious scripts. The rendering engine constructs a rendering tree based on the parsing results, calculates layout attributes in conjunction with style rules, and utilizes hardware acceleration technology to improve rendering efficiency.

[0054] In one possible implementation, the present application embodiment can parse the displayed content through a preset incremental parser, construct a corresponding abstract syntax tree, and filter the node content of the abstract syntax tree according to preset security filtering rules to obtain secure intermediate content. Then, through a preset web page worker thread, the code blocks of the secure intermediate content are syntax highlighted to obtain rich text content.

[0055] Specifically, for complex content elements such as code blocks or mathematical formulas, this application can activate a dedicated renderer for syntax highlighting or formula conversion, ultimately outputting rich text content containing style information. Furthermore, the rendering result undergoes consistency verification to ensure semantic consistency with the original data stream.

[0056] Step 105: Update the interface of the dialogue display area based on the rich text content, and display the dialogue message corresponding to the rich text content in the user interface.

[0057] In this embodiment, a difference comparison algorithm is used to calculate the range of changes in the rich text content between two consecutive frames, and only the changed areas are locally redrawn to avoid a full interface refresh. During the update process, smooth animation transition technology is used to achieve visual continuity for operations such as content insertion and deletion. Simultaneously, a window clipping mechanism optimizes the rendering performance of a large number of historical messages. Furthermore, this application supports accessibility by converting rich text content into semantic descriptions recognizable by voice-reading devices, ensuring that the updated interface can be correctly parsed by assistive tools.

[0058] In one possible implementation, the embodiments of this application can also use a preset dual storage strategy to store the dialogue state information in the main storage space, and when the main storage space is unavailable, store the dialogue state information in the degraded cache space. At the same time, based on the time parameter of the stored data, conflict detection and merging are performed on the concurrent modifications of the stored data by multiple terminals.

[0059] In one possible implementation, the embodiments of this application can also use a preset virtual interface structure technology to calculate the interface change difference corresponding to the rich text content, and use the change difference to minimize and update the actual interface structure of the rich text content, thereby using a preset anchor point positioning strategy to scroll the view of the dialog display area to the current dialog content position to achieve interface update.

[0060] The following describes, in conjunction with embodiments, a front-end interaction system based on artificial intelligence provided by an exemplary implementation of this application. The system includes: The communication layer module is used to acquire user input commands based on a preset first communication channel, send the user input commands to the backend intelligent agent for communication services, and receive response data streams from the backend intelligent agent based on a preset second communication channel; the first communication channel is an uplink transmission channel for request-response communication mode, and the second communication channel is a downlink transmission channel for unidirectional streaming push. The state management layer module is used for reactive state management based on response data streams to update dialogue state information; The response streaming output module is used to perform asynchronous streaming processing based on the updated dialogue state information and generate display content word by word; The content rendering module is used to parse and render the displayed content to obtain rich text content; The dialogue display module is used to update the interface of the dialogue display area based on rich text content, and to display the dialogue messages corresponding to the rich text content in the user interface.

[0061] In one possible implementation, the communication layer module in this application embodiment can also calculate the time interval for the next reconnection based on a preset exponential backoff algorithm when it is determined that the connection is interrupted, and send a reconnection request to the backend agent according to the time interval.

[0062] In one possible implementation, the communication layer module in this application embodiment may also select an adaptation protocol from preset protocols such as SSE protocol and WebSocket protocol to establish a second communication channel, depending on browser support.

[0063] In one possible implementation, the communication layer module serves as the system's data entry point, responsible for encapsulating all network input / output operations, interacting with backend services' requests and responses, and supporting streaming data transmission. This module can receive operation instructions from the state management layer and return corresponding data, push character streams to the AI ​​response streaming output module for processing, and report detailed log information to the performance and exception governance layer when an exception occurs. This module can also provide upper layers with two calling methods: Promise and event streams, employing dual-channel encapsulation technology. It combines axios or fetch tools, representing the state transition architecture, to implement regular requests, while establishing a real-time communication channel through WebSocket or the native EventSource (server-pushed events) and the Socket.io library. Furthermore, this module can control the retry interval through an automatic retry mechanism, using an exponential backoff algorithm combined with a random jitter strategy, with the maximum number of retries flexibly configurable. Additionally, this module has protocol upgrade capabilities, automatically selecting server-pushed events or WebSockets as the communication scheme based on the browser's support for real-time protocols.

[0064] In one possible implementation, the state management layer module in this application embodiment can perform fine-grained data change detection on the dialogue state information through a preset proxy mechanism, and automatically trigger the interface update operation based on the corresponding interface update function when the data change is confirmed.

[0065] Specifically, the state management layer module in this system serves as the single trusted data source, responsible for managing atomic states such as dialogue history, current input, and loading state, including core data such as the session array, current draft, loading animation, and error messages. This module utilizes a proxy-based reactivity mechanism, leveraging Vue 3's reactive() and watch() functions to achieve fine-grained state updates, ensuring that data changes automatically trigger UI synchronization. Simultaneously, a modular storage architecture is adopted, independently managing repositories for different domains such as sessions, user interface, and user data, and communicating through an event bus to maintain low coupling between modules. Furthermore, this module employs an optimistic update strategy, performing state addition, deletion, and modification operations locally first, and then correcting discrepancies after backend confirmation, thereby improving the perceived responsiveness for users. During system interaction, this state management layer module also provides real-time data support to the UI component layer, calls the API communication layer to complete asynchronous write operations, and synchronizes persistent data with the dialogue history management module, thereby ensuring data consistency and overall system collaboration efficiency.

[0066] Thus, in this application, the state management layer, through the response data stream passed in from the communication layer module and combined with the agent-based automatic tracking technology, detects data changes in real time and triggers the corresponding state update process. Furthermore, the dialogue state information can be abstracted into a structured data model, including atomic states such as session arrays and loading states. When the response data stream arrives, fine-grained dependency collection updates only the affected state parts, avoiding unnecessary global re-rendering. Simultaneously, state changes are first executed in local modular storage, and then synchronously corrected after backend confirmation, ensuring data consistency and smooth interaction, enabling state changes to be automatically mapped to UI components.

[0067] In one possible implementation, the response streaming output module in this application embodiment can obtain data fragments from the response data stream through a preset character event slicing strategy, temporarily store the data fragments through a streaming buffer, and then push the data fragments to the main thread according to a preset push data volume, thereby updating the displayed content in batches through a preset anti-jitter rendering strategy.

[0068] In one possible implementation, the response streaming output module in this application embodiment can receive raw data segments through a preset first buffer and receive processed data segments to be displayed through a second buffer, thereby transferring the raw data segments in the first buffer to the second buffer according to a preset frame rate threshold.

[0069] Specifically, the responsive streaming output module uses asynchronous streaming technology to convert the updated dialogue state information from the state management module into visual content displayed character by character. It then segments the incoming data stream using a streaming buffer, dividing it into fragments based on characters or event units and controlling the frequency of these fragments being pushed to the main thread to prevent main thread blocking. Next, using anti-jitter rendering technology, based on a preset frame rate threshold, it updates the displayed content in batches by requesting animation frame interfaces, reducing the number of DOM operations and achieving a smooth, character-by-character output effect. Furthermore, the module supports a breakpoint resume function, which records character offsets when the network is interrupted and resumes processing from the breakpoint upon reconnection, ensuring the continuity and reliability of data processing and facilitating the generation of easily rendered display content.

[0070] In one possible implementation, the content rendering module in this application embodiment can parse the displayed content through a preset incremental parser, construct a corresponding abstract syntax tree, and filter the node content of the abstract syntax tree according to preset security filtering rules to obtain secure intermediate content. Then, through a preset web page worker thread, the code blocks of the secure intermediate content are syntax highlighted to obtain rich text content.

[0071] Specifically, in this embodiment, the content rendering module is responsible for converting the original text into rich text or hypertext markup language format, and supports functions such as syntax highlighting for titles, lists, tables, code blocks, line number display, and copy buttons. It can securely parse and convert the display content generated by the response streaming output module into rich text. This module can use an event-driven incremental parser to build an abstract syntax tree while receiving the display content, avoiding the overhead of overall re-parsing. It also removes potential malicious code through security filtering rules (e.g., filtering cross-site scripting attacks using whitelisted document object model purification rules, removing dangerous tags and attributes) to prevent XSS attacks. Simultaneously, it utilizes background threads (such as Web Worker threads) to perform syntax highlighting and formatting on complex content such as code blocks, for example, using tools like Prism.js or Shiki for highlighting before returning the result. In this way, the module converts the parsed structured content into a secure rich text format (such as HTML), ensuring it conforms to security standards and providing directly usable rich text content for the interface display.

[0072] In one possible implementation, the dialogue display module in this application can use a preset virtual interface structure technology to calculate the interface change difference corresponding to the rich text content, and use the change difference to minimize and update the actual interface structure of the rich text content. In this way, the view of the dialogue display area can be scrolled to the current dialogue content position through a preset anchor point positioning strategy to achieve interface update.

[0073] Specifically, the dialogue display module in this application is responsible for presenting user questions and AI answers in real-time and sequentially within the user's viewport, supporting infinite scrolling, navigation to the latest message, and reading status markers. This module employs virtual scrolling technology, rendering only message nodes within the visible area, maintaining high smoothness even with tens of thousands of messages. Furthermore, through differential rendering technology, new messages can be partially inserted into the dialogue list, avoiding a complete list rearrangement. Further, the module can utilize anchor point positioning to automatically scroll the view to the latest message position or retain the user's reading position after manually scrolling through historical messages. Thus, through differential rendering and virtual scrolling technology, this module renders only message nodes within the visible area, optimizing the rendering performance of large-scale dialogue lists and ensuring the real-time and smoothness of interface updates.

[0074] In one possible implementation, the system in this application embodiment further includes a dialogue history management module. This module can use a preset dual storage strategy to store dialogue state information in the main storage space, and when the main storage space is unavailable, store the dialogue state information in the degraded cache space. At the same time, based on the time parameter of the stored data, it performs conflict detection and merging on concurrent modifications corresponding to the stored data from multiple terminals.

[0075] Specifically, the conversation history management module in this application is responsible for persistently storing local and remote conversation records, supporting search, filtering, export, and cross-device synchronization. This module employs a dual-storage strategy, using an index database as the primary storage for large volumes of data and local storage as a fallback cache for small volumes of data. It also automatically resolves concurrent modifications across multiple devices through a conflict merging strategy based on vector clocks or the last written timestamp. Furthermore, this module utilizes a paginated search mechanism to sort the conversation list chronologically and build a full-text search index, supporting keyword retrieval at the second level. Moreover, this module provides the conversation list and details to the user interface component layer, automatically triggering incremental synchronization after login at the application programming interface communication layer, and providing import and export interfaces to the system settings module.

[0076] In one possible implementation, the system in this application embodiment further includes a responsive design module, which is used to obtain the width information of interface components through a preset style container query strategy, and adjust the interface layout of the user interface and the display style of each component according to the width information.

[0077] Specifically, the responsive design module in this application is responsible for using a single codebase to present a reasonable layout on screens ranging from 320 pixels to 4K, while supporting touch and keyboard interaction. This module employs Cascading Style Sheets (CSS) container query technology, setting breakpoints based on the component's own width rather than the viewport width to avoid performance issues caused by excessive media queries. It also utilizes flexible boxes and grid layout techniques to implement flexible cards, adaptive sidebars, and automatic lifting of input fields when the keyboard pops up. A unified pointer event handling system allows mouse hover and touch long presses to share the same event logic. Thus, all user interface component layer elements rely on the style system provided by this module, and when breakpoints change, signals are sent to the state management layer to flexibly adjust the size of the virtual scroll buffer.

[0078] In one possible implementation, the system of this application embodiment further includes a user interface component layer module. This module is responsible for visualizing data and collecting user interactions, maintaining high reusability and pluggability. This module also follows atomic design principles, constructing from atomic components such as buttons, speech bubbles, and avatars to session list molecules and then to page templates. Furthermore, this module can subscribe to reactive data from the state management layer, send messages to the application programming interface communication layer by triggering events, and receive rendering results returned by the content processing layer to insert into the document object model.

[0079] In one possible implementation, the system of this application embodiment further includes a content processing layer module. This module is responsible for parsing the raw string stream into structured content and performing secure rendering. This module adopts a plug-in architecture, supporting the registration of extended functions such as LaTeX (a technical typesetting system), Mermaid (a flowchart tool), and ECharts (a chart library) as plug-ins into the parser. This module also uses a caching mechanism to calculate hash values ​​for the same markup language content and store the rendering results, avoiding resource consumption caused by repeated processing. Furthermore, it utilizes security sandbox technology to isolate the execution environment of third-party rendering scripts through inline frames or shadow document object models, ensuring system security. Thus, this module can be frequently called by the dialog display module and the responsive streaming output module. After completing code highlighting, it returns code block data containing line number information and a copy button function to the user interface component layer for display.

[0080] In one possible implementation, refer to Figure 2 The diagram illustrates a system interaction flow according to an embodiment of this application. The user first enters a message on the interface and clicks "send." The UI component layer obtains the input and passes it to the state management layer, then sends an HTTP POST request to the backend service via the API communication layer. The state management layer updates the current input state and adds the new message to the list. Simultaneously, the backend service returns a message ID to the API communication layer and updates the message status of the state management layer. Markdown rendering parses the Markdown content, the content processing layer returns the rendering result and renders HTML, the real-time dialogue display updates the DOM display of the UI component layer, and the backend service returns an SSE / WebSocket string to the API communication layer. The process also includes scrolling to the latest message and scrolling to historical messages. When scrolling to historical messages, a request for historical pagination is triggered. The historical management layer requests historical data, the backend service returns historical messages, the content processing layer performs Markdown rendering and batch Markdown parsing, returns HTML fragments and rendering results, renders HTML in real-time and updates the DOM display, the historical management layer synchronizes messages to local storage and IndexedDB storage, and synchronizes them to the cloud via the API communication layer, uploading session data. The backend service confirms successful synchronization and updates the synchronization status.

[0081] In one possible implementation, refer to Figure 3The diagram illustrates a system module call according to an embodiment of this application. This system adopts a layered design, comprising an infrastructure layer, a business logic layer, a user interaction layer, and a UI component layer. The infrastructure layer provides core support and consists of a responsive design module and a state management module. The business logic layer includes functional modules such as content processing, history management, Markdown rendering, and real-time dialogue display. The user interaction layer acts as a central coordinator for data flow and logical calls between the layers. The UI component layer specifically implements interactive interfaces such as AI streaming output. The entire system exchanges data and maintains persistent storage with external dependencies (including backend services and the IndexedDB local database) through an API communication module. This constructs a front-end architecture with clear layers, well-defined inter-module dependencies, and close collaboration with external systems.

[0082] Please see Figure 4 As shown, based on the same technical concept, this application also provides a computer device 40. In one embodiment, the computer device can be a device specifically designed for artificial intelligence-based front-end interaction. Figure 4 As shown, it includes a memory 401, a communication module 403, and one or more processors 402.

[0083] The memory 401 is used to store computer programs executed by the processor 402. The memory 401 may mainly include a program storage area and a data storage area. The program storage area may store the operating system and programs required to run instant messaging functions, etc.; the data storage area may store various instant messaging information and operation instruction sets, etc.

[0084] Memory 401 may be volatile memory, such as random-access memory (RAM); memory 401 may also be non-volatile memory, such as read-only memory, flash memory, hard disk drive (HDD), or solid-state drive (SSD); or memory 401 may be any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but is not limited thereto. Memory 401 may be a combination of the above-mentioned memories.

[0085] Processor 402 may include one or more central processing units (CPUs) or digital processing units, etc. Processor 402 is used to implement the above-mentioned artificial intelligence-based front-end interaction method when calling computer programs stored in memory 401.

[0086] The communication module 403 is used to communicate with other terminals and systems.

[0087] This application embodiment does not limit the specific connection medium between the memory 401, communication module 403, and processor 402 described above. This application embodiment... Figure 4 The memory 401 and the processor 402 are connected via a bus 404, and the bus 404 is in Figure 4 The diagram uses thick lines to describe the connections between other components; these are for illustrative purposes only and should not be considered limiting. The 404 bus can be divided into address bus, data bus, control bus, etc. For ease of description, Figure 4 It is described using only a thick line, but does not indicate that there is only one bus or one type of bus.

[0088] The memory 401 stores a computer storage medium, which stores computer-executable instructions. The computer-executable instructions are used to implement the AI-based front-end interaction method of the embodiments of this application. The processor 402 is used to execute the AI-based front-end interaction method of the above embodiments.

[0089] Based on the same inventive concept, embodiments of this application also provide a storage medium storing a computer program that, when run on a computer, causes the computer to perform the steps in the artificial intelligence-based front-end interaction method according to various exemplary embodiments of this application described above.

[0090] In some possible implementations, various aspects of the AI-based front-end interaction method provided in this application can also be implemented in the form of a computer program product, which includes a computer program. When the program product is run on a computer device, the computer program is used to cause the computer device to perform the steps in the AI-based front-end interaction method according to various exemplary embodiments of this application described above. For example, the computer device can perform the steps of the various embodiments.

[0091] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0092] The program product of the embodiments of this application may employ a portable compact disc read-only memory (CD-ROM) and include a computer program, and may run on a computer device. However, the program product of this application is not limited thereto. In this application, the readable storage medium may be any tangible medium that contains or stores a program, and the computer program included therein may be used by or in conjunction with a command execution system, apparatus, or device.

[0093] A readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying a readable computer program. This propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium, capable of sending, propagating, or transmitting a program for use by or in conjunction with a command execution system, apparatus, or device.

[0094] Computer programs contained on readable media may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0095] Computer programs for performing the operations of this application can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages.

[0096] It should be noted that although several units or sub-units of the device have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of this application, the features and functions of two or more units described above can be embodied in one unit. Conversely, the features and functions of one unit described above can be further divided and embodied by multiple units.

[0097] Furthermore, although the operations of the method of this application are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0098] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0099] Although preferred embodiments of this application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of this application.

[0100] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. An artificial intelligence-based front-end interaction method, characterized in that, The method comprises: Based on the preset first communication channel, the user input instruction is obtained, the user input instruction is sent to the backend intelligent agent for communication service, and the response data stream fed back by the backend intelligent agent is received based on the preset second communication channel; the first communication channel is an uplink transmission channel in a request-response communication mode, and the second communication channel is a downlink transmission channel in a one-way stream push mode; Based on the response data stream, responsive state management is performed to update the conversation state information; Based on the updated conversation state information, asynchronous stream processing is performed to generate display content word by word; Based on the display content, the rich text content is obtained by parsing and rendering; Based on the rich text content, the interface of the conversation display area is updated, and the conversation message corresponding to the rich text content is displayed in the user interface.

2. The method of claim 1, wherein, The responsive state management based on the response data stream comprises: Based on the preset proxy mechanism, fine-grained data change detection is performed on the conversation state information; When data change is confirmed, the interface update operation is automatically triggered based on the corresponding interface update function.

3. The method of claim 1, wherein, The asynchronous stream processing based on the updated conversation state information comprises: Based on the preset character event slicing strategy, data segments are obtained from the response data stream; Based on the stream buffer, the data segments are temporarily stored, and the data segments are pushed to the main thread based on the preset push data volume; Based on the preset anti-shake rendering strategy, the pushed data segments are batch-updated to the display content.

4. The method of claim 3, wherein, The temporary storage of the data segments based on the stream buffer comprises: Based on the preset first buffer, raw data segments are received; Based on the preset second buffer, processed data segments to be displayed are received; Based on the preset frame rate threshold, the raw data segments in the first buffer are transferred to the second buffer.

5. The method of claim 1, wherein, The parsing and rendering based on the display content to obtain the rich text content comprises: Based on the preset incremental parser, the display content is parsed to construct a corresponding abstract syntax tree; Based on the preset security filtering rule, the node content of the abstract syntax tree is filtered to obtain safe intermediate content; Based on the preset web worker, the code blocks of the safe intermediate content are syntax highlighted to obtain the rich text content.

6. The method of claim 1, wherein, The method further comprises: Based on the preset dual-storage strategy, the conversation state information is stored in the main storage space; When the main storage space is unavailable, the conversation state information is stored in the degraded cache space; Based on the time parameter of the stored data, conflict detection and merging are performed on the multi-end concurrent modifications corresponding to the stored data.

7. The method of claim 1, wherein, The interface update based on the rich text content comprises: Based on the preset virtual interface structure technology, the interface change difference corresponding to the rich text content is calculated; Based on the change difference, the actual interface structure of the rich text content is minimized and updated; Based on the preset anchor positioning strategy, the view of the conversation display area is scrolled to the current conversation content position to realize interface update.

8. The method of claim 1, wherein, The method further comprises: When determining the connection interruption, a time interval for the next reconnection is calculated based on a preset exponential backoff algorithm; Based on the time interval, a reconnection request is sent to the backend agent.

9. The method of claim 1, wherein, The method further comprises: Based on the browser support, a target protocol is selected from a preset protocol set to construct the second communication channel; the preset protocol set at least includes a server push event protocol and a browser multithreading protocol.

10. An artificial intelligence-based front-end interaction system, characterized in that, The system comprises: A communication layer module is configured to obtain a user input instruction based on a preset first communication channel, send the user input instruction to a backend agent for communication service, and receive a response data stream fed back by the backend agent based on a preset second communication channel; the first communication channel is an uplink transmission channel in a request-response communication mode, and the second communication channel is a downlink transmission channel in a unidirectional streaming push mode; A state management layer module is configured to perform responsive state management based on the response data stream to update conversation state information; A response streaming output module is configured to perform asynchronous streaming processing based on the updated conversation state information to generate display content word by word; A content rendering module is configured to perform parsing and rendering based on the display content to obtain rich text content; A conversation display module is configured to perform interface update of a conversation display area based on the rich text content, and display a conversation message corresponding to the rich text content in a user interface.

Images