Intelligent speech recognition editor for efficiently processing large-scale texts

Abstract

The invention provides an intelligent speech recognition editor capable of efficiently processing large-scale texts. Belongs to the technical field of speech recognition and text editing. The editor comprises a voice recognition module which is used for receiving audio input, converting the audio input into a text and transmitting the text to a front end in real time through WebSocket / SSE; the text editing module is used for rendering and editing a text through a WebAssembly + virtualization technology; the data storage module is used for carrying out text caching by using IndexedDB / Local Storage; and the front-end UI interaction module is used for carrying out task distribution by adopting React / Vue in combination with WebWorker. According to the method, only the currently visible text area is rendered by adopting a block rendering technology and a virtualization technology, and the historical text is loaded as required in a lazy loading mode, so that the processing of million-level characters can be easily supported, and smooth operation and no blockage of an editor are ensured.

Description

Technical Field

[0001] The invention proposes an intelligent speech recognition editor for efficiently processing large-scale texts, belonging to the technical field of speech recognition and text editing. Background Art

[0002] With the development of artificial intelligence and natural language processing technologies, automatic speech recognition (ASR) has been widely used in scenarios such as judicial trials, meeting records, and subtitle generation. However, existing speech recognition editors generally have the following problems when processing large amounts of text:

[0003] Performance bottleneck: Most text editors based on DOM or traditional virtual DOM experience severe page performance degradation when receiving and rendering large amounts of text (over 100,000 words), resulting in lag or even crashes.

[0004] Real-time update issue: Voice recognition content needs to be appended to the text area in real time. However, when the current editor appends content, the cursor position may be incorrect or the part the user is editing may be affected.

[0005] Editing conflicts: While receiving speech recognition text in real time, users may need to go back and modify existing content. Existing solutions make it difficult to balance a smooth editing experience with real-time text updates. Summary of the Invention

[0006] The present invention provides an intelligent speech recognition editor that can efficiently process large amounts of text, to solve the problems mentioned in the above background technology:

[0007] The present invention proposes an intelligent speech recognition editor for efficiently processing large-scale texts, the editor comprising:

[0008] Speech recognition module: used to receive audio input, convert it into text, and transmit it to the front end in real time via WebSocket / SSE;

[0009] Text editing module: used to render and edit text using WebAssembly+virtualization technology;

[0010] Data storage module: used to use IndexedDB / LocalStorage for text caching;

[0011] Front-end UI interaction module: used to distribute tasks using React / Vue combined with WebWorker.

[0012] Beneficial effects of the present invention:

[0013] The present invention adopts block rendering technology and virtualization technology to render only the currently visible text area, and loads historical text on demand through lazy loading, so it can easily support the processing of millions of words and ensure that the editor runs smoothly without lag.

[0014] The double-buffered text update mechanism and incremental DOM update are used to ensure that when appending speech recognition text in real time, the entire page will not be redrawn, but only the visible area will be partially rendered, thereby improving the efficiency of page updates.

[0015] While receiving voice recognition text in real time, users may need to go back and modify existing content. The present invention uses a cursor state manager and a marking node mechanism to ensure that when new recognized content is added, the user's editing operations in the historical text will not be affected, and the cursor can be accurately kept in place, thereby improving the user's editing experience.

[0016] This invention uses IndexedDB and WebAssembly for local caching, supporting fast access to large amounts of text. It also provides a timeline playback function that allows for retracing speech recognition content by time period and supports version management, thereby improving data security and traceability.

[0017] This invention is applicable to a variety of scenarios, including court hearings, news interviews, academic conferences, and subtitle production, meeting the needs of different fields for real-time speech transcription and efficient text editing. For example, in court hearings, it can support real-time transcription of court transcripts, ensuring that large-scale text recordings are not interrupted. In news interviews, reporters can record and edit speech transcriptions in real time, improving work efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 This is a diagram of the editor module described in the present invention. DETAILED DESCRIPTION

[0019] The preferred embodiments of the present invention are described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0020] One embodiment of the present invention, as Figure 1 As shown, an intelligent speech recognition editor for efficiently processing large-scale texts includes:

[0021] Speech recognition module: used to receive audio input, convert it into text, and transmit it to the front end in real time via WebSocket / SSE;

[0022] Text editing module: used to render and edit text using WebAssembly+virtualization technology;

[0023] Data storage module: used to use IndexedDB / LocalStorage for text caching and support history backtracking;

[0024] Front-end UI interaction module: used to distribute tasks using React / Vue combined with WebWorker.

[0025] The working principle of the above technical solution is as follows: the user records audio through a device (such as a microphone); the speech recognition module in the editor receives these audio inputs; the speech recognition technology converts these audios into text in real time; the converted text is transmitted to the front end in real time via WebSocket (WebSocket provides a way to conduct full-duplex communication on a single TCP connection) or SSE (Server-SentEvents, an HTML5 technology that allows the server to push new data to the client), ensuring that the user can see the recognition results immediately; after the front end receives the text, the text editing module starts working; the module uses WebAssembly technology, which is a bytecode format that can efficiently run compiled code in modern Web browsers, improving the efficiency of text processing; at the same time, through virtualization technology, the text editing module can efficiently render and update large amounts of text data, reduce DOM operations, and improve performance; users can edit the text on the front end, such as inserting, deleting, modifying, etc. Some operations will also be updated in real time; the data storage module uses IndexedDB (a low-level API for clients to store large amounts of structured data, including files / binary data) or LocalStorage (a simple key-value pair storage for storing data on web pages) to cache text data; this method allows users to continue editing text even when the network is unstable or disconnected, and synchronizes data after the network is restored; the data storage module also supports historical backtracking, allowing users to view and restore to previous text states; the front-end UI interaction module uses modern front-end frameworks such as React or Vue, which provide efficient component-based development methods, making the interface more flexible and maintainable; combined with WebWorker technology, the front-end UI interaction module can distribute time-consuming tasks (such as text rendering, searching, etc.) to background threads for execution, avoiding blocking the main thread, thereby improving user experience; users interact with the editor through the UI interface, such as inputting audio, viewing recognition results, editing text, etc.

[0026] The above technical solution achieves the following: By integrating an advanced speech recognition module, the editor can receive audio input and convert it into text in real time. This feature not only improves work efficiency but also allows users to instantly view and edit their voice content. The use of WebSocket / SSE technologies ensures real-time and reliable transmission of text data to the front-end, reducing latency and enhancing the user experience. Utilizing WebAssembly technology, the editor can efficiently run compiled code, resulting in excellent performance when processing large amounts of text. This helps improve the speed and accuracy of text rendering. The introduction of virtualization technology makes text editing smoother, reducing the frequency of DOM operations, further improving performance. Users can easily insert, delete, and modify text in the editor without noticeable lag or delay. The use of storage technologies such as IndexedDB / LocalStorage provides the editor with reliable text caching. This helps maintain data integrity even in unstable or disconnected network conditions, allowing users to resume editing later. A history reversal feature allows users to view and restore previous text states, which is extremely useful for text editing tasks that require frequent revisions and optimizations. Using modern front-end frameworks such as React / Vue, the editor provides an intuitive and easy-to-use user interface. The component-based development approach of these frameworks makes the interface more flexible and maintainable. Combined with WebWorker technology, the editor can offload time-consuming tasks to background threads, avoiding blocking the main thread. This helps maintain a smooth and responsive interface and enhance the user experience. By integrating multiple modules and advanced technologies, this technical solution achieves overall efficiency and scalability. The editor can easily handle large-scale text processing and supports future feature expansion and optimization.

[0027] In one embodiment of the present invention, the speech recognition method of the speech recognition module includes:

[0028] S11, receiving an audio signal from a microphone or other audio device in real time through the audio input interface of the speech recognition module;

[0029] S12. Preprocessing the received audio signal, including noise reduction, sound enhancement, and format conversion; utilizing a speech recognition algorithm (e.g., a deep learning model); and converting the preprocessed audio signal into text.

[0030] S13. Transmit the recognized text to the front-end editor in real time via WebSocket or SSE (Server-SentEvents) protocol.

[0031] The working principle of the above technical solution is as follows: the voice recognition module captures the audio signal from the microphone or other audio device in real time through its built-in audio input interface. This step is the starting point of voice recognition, ensuring that the module can continuously receive the user's voice input; and then performs preprocessing, which includes:

[0032] Noise reduction: First, the received audio signal is subjected to noise reduction processing to reduce the impact of background noise on speech recognition accuracy.

[0033] Sound enhancement: Next, sound enhancement technology is used to improve the clarity and intelligibility of the voice signal, ensuring that subsequent algorithms can accurately recognize the voice content.

[0034] Format conversion: Finally, the audio signal is converted into a format suitable for processing by the speech recognition algorithm, such as converting the audio data into a feature representation such as a spectrogram or Mel-frequency cepstral coefficients (MFCC).

[0035] Deep learning models (such as long short-term memory (LSTM) and Transformer) are used to convert preprocessed audio signals into text. These models undergo extensive training and can accurately map speech features to corresponding text characters. The speech recognition algorithm supports multiple languages ​​and can automatically recognize and convert user input speech content to meet the needs of different users. Through continuous algorithm optimization and model training, the speech recognition module achieves high recognition rate and accuracy, ensuring that user input speech content is accurately converted to text. The WebSocket protocol provides a full-duplex communication method over a single TCP connection, allowing the speech recognition module to transmit recognized text to the front-end editor in real time. This two-way communication method ensures real-time and interactivity, allowing users to instantly view and edit their speech content. When only one-way data push is required, the SSE protocol can be used. This protocol allows the server to push new data to the client without establishing a persistent HTTP connection. Using SSE reduces the burden on the server while ensuring that the client receives the recognized text in real time.

[0036] The above technical solution achieves the following benefits: By receiving audio signals from a microphone or other audio device in real time and immediately performing preprocessing and text conversion, the speech recognition module can rapidly respond to user voice input. The use of the WebSocket protocol ensures two-way, real-time communication of text data, enabling the front-end editor to instantly display recognition results and allowing users to edit and provide feedback in real time, significantly enhancing interactivity and user experience. The preprocessing phase includes steps such as noise reduction, sound enhancement, and format conversion, which effectively improve the quality of the audio signal and provide more accurate input for the subsequent speech recognition algorithm. Utilizing advanced speech recognition algorithms such as deep learning models, the module can accurately recognize multiple languages ​​with high recognition rates, helping to reduce recognition errors and improve the accuracy and efficiency of text editing. The use of the SSE (Server-SentEvents) protocol enables the server to push data to the client in a one-way manner without establishing a persistent HTTP connection. This approach reduces server resource consumption and burden, significantly improving server performance and stability, especially when handling a large number of concurrent connections. The speech recognition module supports recognition in multiple languages, meeting the language needs of different users. This helps broaden the application scenarios, enabling the module to be widely used in various cross-language communication scenarios. The technical solution adopts a modular design approach, allowing each module to be independently developed and optimized. This helps improve the scalability and flexibility of the system, facilitating the introduction of new technologies and features in the future. Real-time text transmission and accurate recognition results enhance the user editing experience. Users can enter and edit text content more efficiently, reducing the repeated revisions and corrections caused by recognition errors.

[0037] In one embodiment of the present invention, the step S13 includes:

[0038] S131. Before transmitting the recognized text via the WebSocket or SSE protocol, formatting the text includes removing unnecessary spaces, correcting punctuation, and adjusting semantics based on the context; and encapsulating the text into a specific data packet format.

[0039] S132. Dynamically select WebSocket or SSE protocol for real-time text transmission based on actual application scenarios and needs. When two-way communication is required (e.g., a user is editing text and needs to receive new speech recognition content), use the WebSocket protocol. When only one-way data push is required (e.g., a user only views speech recognition results and does not edit them), select the SSE protocol to reduce server burden.

[0040] S133. During the transmission process, a compression algorithm is used to compress the text data. At the same time, based on the retransmission mechanism and timeout detection, packet loss or delay problems that occur during the transmission process are handled. For transmission errors, the front-end editor can accurately identify the error code and error description information and take appropriate error handling measures.

[0041] S134. The front-end editor receives the transmitted text data packet through the WebSocket or SSE client interface; after receiving the data packet, the front-end editor parses and processes the data packet to extract the text content and other related information (such as timestamp, recognition confidence, etc.), and correctly inserts the newly received text content into the corresponding position in the editor based on the current state of the editor and user operation;

[0042] S135. During the real-time transmission and reception of text, a real-time feedback mechanism is provided through the front-end editor; for example, a text reception progress bar, a recognition confidence indicator, and possible error prompts are displayed on the editor interface;

[0043] S136. When a user is editing a new text while receiving it, the front-end editor integrates the newly received text with the content being edited by the user. This includes identifying and resolving possible text conflicts (e.g., where the portion being edited by the user overlaps with the newly received text) and maintaining text consistency and integrity. This achieves a smooth editing experience and efficient text integration by employing technologies such as a double buffer structure, incremental DOM updates, and intelligent cursor positioning.

[0044] The working principle of the above technical solution is as follows: before transmission, the recognized text is formatted, including removing unnecessary spaces, punctuation correction and semantic adjustment to ensure the accuracy and readability of the text content; the formatted text is encapsulated into a specific data packet format, containing necessary information such as text content, timestamp, recognition confidence, etc., so that the front-end editor can correctly parse and process it; when two-way communication is required, such as when the user is editing the text and needs to receive new voice recognition content at the same time, the WebSocket protocol is selected to provide real-time two-way data transmission; when only one-way data push is required, such as when the user only views the voice recognition results without editing, the SSE protocol is selected to reduce the server burden and achieve efficient data push; during the transmission process, the text data is compressed using a compression algorithm to reduce the transmission bandwidth occupancy and improve transmission efficiency; the packet loss or delay problems that may occur during the transmission process are handled, and the integrity and real-time nature of the data are ensured through the retransmission mechanism and timeout detection; for transmission errors, the front-end editor can accurately identify and take corresponding error handling measures through the error code and error description information, such as retrying the transmission , display error prompts, etc.; the front-end editor receives the transmitted text data packets through the WebSocket or SSE client interface, parses and processes them, and extracts the text content and other relevant information; according to the current state of the editor and user operations, the newly received text content is correctly inserted into the corresponding position in the editor to maintain the consistency and integrity of the text; the text reception progress bar and recognition confidence indicator are displayed on the editor interface so that the user can understand the status of text reception and recognition in real time; for possible errors, such as transmission errors, parsing errors, etc., feedback is provided to the user through error prompts to help the user discover problems in time and take corresponding solutions; when the user performs editing operations while receiving new text, the front-end editor can identify and handle possible text conflicts, such as the part that the user is editing overlaps with the newly received text content, and resolves the conflict through intelligent merging or prompting the user to choose; using double buffer structure, incremental DOM update and intelligent cursor positioning and other technical means to achieve a smooth editing experience and efficient text integration, ensuring that users can seamlessly receive and process new text content during the editing process.

[0045] The effects of the above technical solution are: by removing unnecessary spaces, punctuation correction and semantic adjustment, the transmitted text content is ensured to be more accurate and clear; the text is encapsulated into a specific data packet format, which not only facilitates the correct parsing and processing of the front-end editor, but also improves the standardization and reliability of data transmission; according to the actual application scenario and needs, the WebSocket or SSE protocol is dynamically selected for real-time text transmission, which not only meets the needs of two-way communication, but also reduces the burden on the server; this flexible protocol selection mechanism enables the system to make the best transmission strategy according to the real-time situation, thereby improving resource utilization efficiency; the compression algorithm is used to compress the text data, which reduces the transmission bandwidth occupancy and improves the transmission efficiency; based on the retransmission mechanism and timeout detection, the packet loss or delay problems that may occur during the transmission process are effectively handled to ensure the integrity and real-time nature of the data; through error codes and error Descriptive information, the front-end editor can accurately identify and take corresponding error handling measures, improving the stability and reliability of the system; during the real-time transmission and reception of text, the real-time feedback mechanism provided by the front-end editor, such as the text reception progress bar, recognition confidence indicator and error prompt information, enables users to understand the status of text reception and recognition in real time; this real-time feedback mechanism not only improves user satisfaction and trust, but also helps users to discover and solve problems in a timely manner; when users perform editing operations while receiving new text, the front-end editor can identify and handle possible text conflicts, maintaining the consistency and integrity of the text; by adopting technical means such as double buffer structure, incremental DOM update and intelligent cursor positioning, a smooth editing experience and efficient text integration are achieved; this optimized text integration and editing experience enables users to edit and process text more efficiently.

[0046] In one embodiment of the present invention, the step S136 includes:

[0047] While receiving new text, the front-end editor monitors the user's editing operations in real time. It detects text conflicts in real time by comparing the overlapping parts of the user's editing area with the newly received text. When a conflict is detected, the conflict handling process is immediately triggered.

[0048] Detected text conflicts are classified and identified. Common conflict types include complete overlap conflicts (i.e., the user edited content and the new text content are exactly the same), partial overlap conflicts (i.e., the user edited content and the new text content partially overlap), and non-overlap conflicts (i.e., the user edited content and the new text content do not overlap, but may affect the overall logic or format of the text). Different handling strategies are adopted for different types of text conflicts. For example, for complete overlap conflicts, the user edited content is retained first; for partial overlap conflicts, an intelligent merge option is provided, allowing the user to choose which part to retain; and for non-overlap conflicts, intelligent prompts or suggestions are provided to guide the user to make manual adjustments.

[0049] During the conflict handling process, a double buffer structure is used to maintain the consistency and integrity of the text; one buffer is used to store the content being edited by the user, and the other buffer is used to receive and store new text content; after the conflict is resolved, the contents of the two buffers are merged;

[0050] When integrating newly received text content with user edits, we use incremental DOM updates to render only the text that needs updating, avoiding performance degradation caused by full redrawing. Furthermore, an intelligent cursor positioning mechanism ensures accurate cursor positioning during the integration process, without affecting the user's editing experience.

[0051] The working principle of the above technical solution is as follows: while receiving new text, the front-end editor monitors the user's editing operations in real time. This is typically achieved through an event monitoring mechanism that captures every user action, such as keyboard input and mouse movement. By comparing the overlapping portions of the user's editing area with the newly received text, text conflicts are detected in real time. This requires precise comparison and analysis of the text content to determine whether there is content overlap or logical inconsistency. Detected text conflicts are classified into full overlap, partial overlap, and non-overlap. This classification facilitates the implementation of targeted handling strategies. Prioritizes retaining user edits, as user actions typically reflect their most recent intent. Intelligent merging options are provided, allowing users to choose which content to retain. This can be achieved by highlighting the conflicting areas and providing a selection button. Intelligent prompts or suggestions can be used to guide users through manual adjustments. For example, a prompt can be displayed to inform the user that the new text may be logically inconsistent with existing content and suggest appropriate modifications. A dual-buffer structure is used to maintain text consistency and integrity. One buffer stores the content currently being edited, while the other receives and stores the new text. After the conflict is resolved, the contents of the two buffers are merged. This typically involves rearranging and integrating text content to ensure that a coherent and consistent text is ultimately presented to the user. Incremental DOM update technology is used when integrating newly received text content and user-edited content. This means only the text portion that needs to be updated is rendered, rather than redrawing the entire page or editor area. This can significantly improve performance and reduce user waiting time. An intelligent cursor positioning mechanism ensures that the cursor position is accurate during the integration process. This helps maintain the user's editing experience unaffected, allowing users to continue editing smoothly.

[0052] The above technical solution achieves the following effects: By real-time monitoring of the overlap between the user's editing operations and the newly received text, text conflicts can be instantly detected and the conflict resolution process can be immediately triggered. This immediate feedback mechanism reduces user waiting time and improves editing efficiency. Detected text conflicts are classified and identified, and different handling strategies are adopted for different types of conflicts. This refined handling approach not only improves the accuracy of conflict resolution but also makes the process more flexible and efficient. A dual-buffer structure is used to store the content currently being edited and the newly received text, ensuring the consistency and integrity of the text during conflict resolution. This structure avoids the risks associated with directly modifying the original text content, improving data security. After the conflict is resolved, the contents of the two buffers are merged to form a coherent and consistent text. This provides users with clear and accurate editing results, reducing confusion and errors caused by conflicts. Incremental DOM update technology is used to render only the text sections that need to be updated, avoiding the performance degradation caused by full redrawing. This technology improves the editor's responsiveness and smoothness, ensuring a good user experience even when editing large amounts of text. An intelligent cursor positioning mechanism ensures accurate cursor positioning during the integration process. This ensures that the editing process is not interrupted by changes in the cursor position, further improving the user's editing experience. For partially overlapping conflicts, a smart merge option is provided, allowing users to choose which part to retain. This intelligent handling method reduces the workload of manual adjustments and improves the usability of the editor. For non-overlapping conflicts, smart prompts or suggestions guide users through manual adjustments. This prompt mechanism not only helps users quickly understand the cause and solution of the conflict, but also improves the intelligence of the editor.

[0053] In one embodiment of the present invention, the text editing method of the text editing module includes:

[0054] S21. Leverage WebAssembly technology to compile computationally intensive tasks related to text rendering and editing into efficient machine code.

[0055] S22. Use virtualization technology to divide text content into multiple chunks and render only the text chunks within the currently visible area, avoiding performance bottlenecks caused by loading the entire document at once. Dynamically load and render new text chunks based on user scrolling, achieving smooth scrolling and efficient memory usage.

[0056] S23, using a double buffer structure, while the text is being updated in the background, the foreground is displaying and editing normally, and after the background update is completed, only the visible area is partially rendered;

[0057] S24. When the voice recognition content is appended in real time, the incremental DOM update technology is used to update only the newly added text part.

[0058] The above technical solution works as follows: WebAssembly (Wasm) is a binary format that can be compiled directly into machine code in the browser, avoiding the JavaScript parsing and compilation process, thereby achieving faster execution speed. It supports a variety of low-level operations, such as integer and floating-point calculations, fully leveraging hardware capabilities and achieving higher execution efficiency. In the text editing module, computationally intensive tasks related to text rendering and editing (such as complex text layout calculations and rendering path optimization) are written in high-efficiency languages ​​​​such as C / C++ and compiled into WebAssembly modules using toolchains such as Emscripten. When running in the browser, these modules can execute at speeds close to native code, significantly improving the editor's responsiveness and performance. Virtualization technology is a technology that abstracts physical resources (such as memory and CPU) into virtual resources. In text editing, virtualization technology divides text content into multiple chunks and only renders the text chunks within the currently visible area. When the user scrolls the text, the editor dynamically loads and renders new text chunks based on the scroll position, while unloading text chunks that are no longer visible. This approach avoids the performance bottleneck caused by loading the entire document all at once, achieving smooth scrolling and efficient memory usage. Furthermore, by optimizing the loading and rendering strategies for text blocks, rendering latency can be further reduced and the user experience improved. A double-buffer structure is a common graphics processing technique that uses two buffers to store image data. While image updates are being performed in the background, the image data from the previous buffer can be displayed normally in the foreground. Once the background update is complete, the new image data is copied to the foreground buffer for display. In the text editing module, a double-buffer structure is used to handle text updates. While the user is editing or modifying text in the background, the previous text content can still be displayed and edited normally in the foreground. Once the background update is complete (such as undo / redo operations, text formatting, etc.), the editor performs a partial rendering of only the visible area, displaying the updated text content on the screen. This approach reduces the number of full repaints and improves update efficiency. Incremental DOM updates are a technique that updates only the changed portions of the DOM tree. This avoids repainting the entire DOM tree, thereby improving page rendering performance and smoothness. When voice recognition content is appended to the text editor in real time, the editor uses incremental DOM updates to update only the newly added text. It first determines the location and range of the newly added text, and then updates and redraws only the DOM elements within this range. This approach reduces unnecessary DOM operations and rendering overhead, ensuring the smoothness and responsiveness of the page.

[0059] The above technical solution significantly improves the editor's speed and responsiveness by compiling computationally intensive tasks related to text rendering and editing into efficient machine code, reducing the JavaScript engine's parsing and compilation overhead. This is particularly important when working with large documents or performing complex text editing tasks, providing users with a smoother and more efficient editing experience. By dividing text content into multiple blocks and rendering only the text blocks within the currently visible area, the system effectively avoids the performance bottleneck caused by loading the entire document all at once. This approach not only reduces memory usage but also makes scrolling smoother and more efficient. As the user scrolls, new text blocks are dynamically loaded and rendered, ensuring content continuity and integrity. While text updates are being processed in the background, the foreground continues to display and edit normally. Once the background update is complete, only the visible area is partially rendered, rather than redrawing the entire document. This approach reduces unnecessary rendering overhead and improves the efficiency of text updates. Furthermore, the double-buffer structure ensures that updates are free of flickering or lag, enhancing the user editing experience. When voice recognition content is appended to the editor in real time, only the newly added text is updated, rather than redrawing the entire DOM tree. This approach reduces the complexity and overhead of DOM operations, ensuring page fluidity and responsiveness. This is particularly important for scenarios that require real-time input and editing, providing users with a more natural and smooth interactive experience.

[0060] In one embodiment of the present invention, the S21 includes:

[0061] Configure the WebAssembly runtime environment in the editor's front-end environment, including ensuring that the browser or client supports WebAssembly and loading the necessary WebAssembly modules and dependent libraries. Through appropriate configuration, provide an efficient and secure computing environment for the editor. Conduct in-depth analysis of text rendering and editing tasks in the editor to identify computationally intensive tasks, including large-scale text search, replacement, and formatting operations, as well as complex text layout and rendering algorithms.

[0062] Design specialized WebAssembly modules for identified compute-intensive tasks. WebAssembly modules are written in efficient low-level programming languages ​​(such as Rust and C++) and compiled into WebAssembly bytecode. During the compilation process, WebAssembly's parallel processing and memory management features are fully utilized to improve module execution efficiency and memory utilization.

[0063] Integrate the compiled WebAssembly module into the editor's front-end code and provide an access interface through high-level languages ​​such as JavaScript. The access interface encapsulates the core functionality of the WebAssembly module, allowing the front-end code to easily call and benefit from the module's high performance. At the same time, ensure that the interface design has good compatibility and scalability to accommodate possible future functional expansion and performance optimization needs;

[0064] Performance monitoring tools are integrated into the editor to track and analyze the execution efficiency and memory usage of WebAssembly modules in real time. Based on the monitoring results, the modules are continuously optimized and iterated, including algorithm improvements, memory management optimization, and code streamlining. Through continuous optimization and iteration, the editor is ensured to always provide excellent performance.

[0065] The above technical solution works as follows: In the editor's front-end environment, it first checks whether the browser or client supports WebAssembly. It then ensures that the necessary WebAssembly modules and dependent libraries are loaded. These modules and libraries are required to execute WebAssembly code. Through appropriate configuration, the editor is provided with an efficient and secure computing environment. This includes setting appropriate memory limits and execution permissions to ensure that WebAssembly modules run in a controlled environment. Furthermore, it conducts in-depth analysis of text rendering and editing tasks in the editor to identify compute-intensive tasks. These tasks typically involve extensive data processing and computation, such as large-scale text search, replacement, and formatting operations, as well as complex text layout and rendering algorithms. It identifies which tasks are compute-intensive and evaluates their performance bottlenecks and potential optimization areas. Specifically, it designs WebAssembly modules for these identified compute-intensive tasks. These modules are written in efficient low-level programming languages ​​(such as Rust and C++) to fully leverage their performance advantages. Appropriate compilers (such as LLVM) are used to compile the low-level programming language code into WebAssembly bytecode. During the compilation process, WebAssembly's parallel processing and memory management features are fully utilized to improve module execution efficiency and memory utilization. The compiled WebAssembly module is integrated into the editor's front-end code. This typically involves embedding the WebAssembly bytecode file into HTML or JavaScript code, or loading it via a network request. APIs are provided through high-level languages ​​like JavaScript to access the WebAssembly module. These APIs encapsulate the module's core functionality, allowing the front-end code to conveniently call and benefit from the module's high performance. Furthermore, the API design ensures good compatibility and extensibility to accommodate future functionality expansion and performance optimization needs. Performance monitoring tools are integrated into the editor to track and analyze the execution efficiency and memory usage of WebAssembly modules in real time. These tools provide runtime performance data on the module, such as execution time and memory usage. Based on the performance monitoring results, the WebAssembly module is continuously optimized and iterated. This includes algorithm improvements, memory management optimizations, and code streamlining. Through continuous optimization and iteration, the editor consistently delivers superior performance.

[0066] The above technical solution significantly improves editor execution efficiency by designing specialized WebAssembly modules for computationally intensive tasks and writing and compiling these modules using efficient low-level programming languages. WebAssembly's parallel processing and memory management features enable these modules to run at speeds close to native code, significantly improving the editor's responsiveness and overall performance. This is particularly important when processing large documents, performing complex text operations, or using the editor in high-load environments. During compilation, WebAssembly modules can fully leverage their memory management features to optimize memory usage. This helps reduce memory leaks, improve memory utilization, and ensure editor stability during long runs or when processing large amounts of data. Furthermore, using performance monitoring tools to track and analyze WebAssembly module memory usage in real time can further identify potential memory management issues and optimize them. Encapsulating computationally intensive tasks in independent WebAssembly modules and providing access interfaces through high-level languages ​​like JavaScript facilitates code modularity. This design makes the editor's front-end code more concise and easier to maintain, facilitating future feature expansion and performance optimization. At the same time, ensuring good compatibility and scalability of access interfaces ensures that the editor can easily adapt to changing requirements and technical environments. Integrated performance monitoring tools enable real-time tracking and analysis of WebAssembly module execution efficiency and memory usage. This provides data support for continuous optimization and iteration, allowing developers to promptly identify and resolve performance bottlenecks. Through continuous optimization and iteration in areas such as algorithm improvements, memory management optimization, and code streamlining, the editor ensures consistently superior performance, meeting user needs and expectations.

[0067] In one embodiment of the present invention, the S22 includes:

[0068] S221. Select the virtualization framework that best suits the needs of this editor; factors to consider include the maturity of the technology, the activity of the community, compatibility with the existing technology stack, and performance; after selecting the framework, integrate it into the editor's development environment to ensure smooth operation and debugging; divide the text content into multiple chunks according to the logical or physical structure; the division strategy can be determined based on factors such as the length of the text, paragraphs, chapters, or user-defined split points.

[0069] S222. At the same time, in order to ensure the continuity and smoothness of rendering, a certain overlapping area or buffer is set between adjacent text blocks to avoid flickering or line breaks during scrolling;

[0070] S223. Build a virtual DOM tree for each text block. The DOM tree structure only contains the text block and its child elements within the currently visible area. The construction of the virtual DOM is accelerated using high-efficiency computing technologies such as WebAssembly. During the rendering phase, by comparing the differences between the virtual DOM and the real DOM, only the changed parts are updated, thereby reducing unnecessary DOM operations and improving rendering efficiency.

[0071] S224. Set a scroll event listener in the editor to track the user's scrolling operation in real time; when the user scrolls close to the boundary of the text block, trigger the dynamic loading mechanism to load and render the next one or several text blocks from the server or local cache; during the loading process, use lazy loading technology to reduce resource consumption and loading time.

[0072] The above technical solution works as follows: Based on the specific needs of the editor, the most suitable virtualization framework is selected, taking into account factors such as technology maturity, community activity, compatibility with existing technology stacks, and performance. The selected virtualization framework is integrated into the editor's development environment to ensure smooth operation and debugging. This may involve configuring project dependencies and adjusting code structure. The text content is divided into multiple chunks based on logical or physical structure. The division strategy can be determined based on factors such as text length, paragraphs, chapters, or user-defined split points. To ensure continuous and smooth rendering, a certain overlap area or buffer is set between adjacent text chunks. This helps avoid flickering or line breaks during scrolling. A virtual DOM tree is constructed for each text chunk. The virtual DOM tree structure only contains the text chunk and its child elements within the currently visible area. High-efficiency computing technologies such as WebAssembly are used to accelerate the construction of the virtual DOM, improving construction efficiency. During the rendering phase, the virtual DOM is compared with the real DOM to determine the parts that need to be updated. DOM operations are performed only on the parts that have changed, thus reducing unnecessary DOM operations and improving rendering efficiency. A scroll event listener is set in the editor to track the user's scrolling operations in real time. When the user scrolls close to the boundary of a text block, the dynamic loading mechanism is triggered, loading and rendering the next one or more text blocks from the server or local cache. This helps ensure that the user can continuously see the text content during scrolling. During the loading process, lazy loading technology is used to reduce resource consumption and loading time. Lazy loading means that text blocks are loaded only when needed, avoiding unnecessary resource consumption and delays.

[0073] The above technical solution significantly reduces the number of DOM operations by dividing text content into multiple blocks and constructing a virtual DOM tree for each block. During the rendering phase, the virtual DOM is compared with the real DOM, and only the changed parts are updated, avoiding unnecessary DOM redraws and reflows, significantly improving rendering efficiency. This is particularly important for editors working with large documents or text-intensive content, significantly enhancing the user experience. Virtualization technology effectively reduces memory usage by loading and rendering text blocks on demand. During scrolling, only the text blocks and their child elements within the currently visible area are loaded into memory, eliminating the need to load the entire document all at once. This not only reduces memory usage but also improves editor responsiveness and stability. By setting an overlap area or buffer between adjacent text blocks and utilizing lazy loading, this solution ensures the continuity and smoothness of text content during scrolling. This avoids flickering, line breaks, or lags during scrolling, improving the user experience. In selecting the virtualization framework, this solution comprehensively considered factors such as technology maturity, community activity, and compatibility with existing technology stacks. This ensures seamless integration of the virtualization framework with the rest of the editor, reducing the difficulty and cost of technical integration. During the construction of the virtual DOM, this technical solution fully leverages efficient computing technologies such as WebAssembly. This not only speeds up virtual DOM construction but also further enhances the overall performance of the editor. WebAssembly's parallel processing and memory management features enable more efficient execution of complex text operations. This technical solution is designed to be scalable and flexible. As editor functionality continues to grow and performance requirements increase, performance can be further improved by optimizing the virtual DOM construction algorithm, improving the scroll event listening mechanism, or introducing more advanced lazy loading strategies. This allows the editor to continuously adapt to changing needs and technical environments.

[0074] In one embodiment of the present invention, the step S222 includes:

[0075] Build a user behavior prediction model based on historical scrolling data (such as scrolling speed, direction, and pause time) and dynamically adjust the size of the overlapping area; for example, increase the buffer when scrolling quickly and reduce redundant loading when browsing slowly.

[0076] Predict the user's likely scrolling target area through machine learning models and preload potential areas in advance; preload two additional text blocks for complex content such as code blocks, tables, and formulas to avoid rendering interruptions; and reduce redundancy for plain text;

[0077] Dynamically calculate the buffer threshold based on the structural complexity of the text block (such as nesting level and number of elements); divide the basic blocks according to the actual file structure (such as chapters and function definitions), and retain a fixed proportion (such as 10%) of the tail content of each block as a hard overlap area;

[0078] Identify paragraph boundaries based on semantic analysis and set soft overlap areas at logical breakpoints to avoid cutting incoherent content. Use the LRU strategy to store the current view and buffer data, and reuse them directly when hit.

[0079] For loaded but inactive areas, serialize them into binary format for persistence to reduce repeated parsing overhead. For unloaded overlapping areas, use a lightweight placeholder DOM (such as a gray background box) to maintain a stable layout and then asynchronously fill in the real content.

[0080] When scrolling into the overlapped area, only the differences (such as newly added paragraphs) are rendered, and the new and old content are compared using a Diff algorithm (such as the Myers algorithm). For dynamic elements in the overlapped area (such as the cursor position and comment markers), WebSocket bidirectional synchronization is used to ensure state consistency.

[0081] Set scroll event throttling (e.g., trigger once every 16ms), but enable anti-shake for fast response in key areas (e.g., buffer boundaries); trigger loading of the next block in advance when the user's finger touches the screen (touchstart event);

[0082] Monitor network bandwidth (e.g., through the Navigator.connection API) and reduce the buffer to a minimum safe threshold (e.g., 0.5 blocks) when the network speed is low. Automatically expand the overlap area of ​​the local cache in offline mode to support a seamless scrolling experience.

[0083] When multiple users collaborate on editing, content may fork in overlapping areas; the OperationalTransformation algorithm is used to merge changes and mark conflicting areas with colors.

[0084] The working principle of the above technical solution is: by analyzing historical scrolling data (such as scrolling speed, direction, pause time, etc.), the area that the user is about to scroll to is predicted. This allows the system to load content that the user may need to view in advance. For example, when the user scrolls quickly, the system will increase the buffer to ensure that the content can be loaded smoothly; when the user scrolls slowly, redundant loading is reduced to improve performance; through machine learning models and text structure analysis, the system can predict the scroll target area and load potential content in advance. Additional preloading is performed for complex content (such as code blocks, tables, formulas), and for plain text, redundant content is reduced. The overlapping area (including hard overlap area and soft overlap area) is dynamically adjusted according to the structural complexity of the text block to ensure seamless transition; the least recently used (LRU) strategy is used to store the current view and buffer data. When scrolling into the overlapping area, the system compares the new and old content through the Diff algorithm and only renders the different parts, thereby avoiding unnecessary rendering overhead. If some areas have been loaded but not accessed yet, the system will serialize them into binary format for storage to reduce subsequent parsing overhead; monitor network bandwidth and reduce the buffer size when the network speed is slow to ensure a minimum safety threshold; in offline mode, the system will automatically expand the overlapping area of ​​the local cache to ensure that the scrolling experience is not affected; when multiple users collaborate on editing, the system will merge changes through the Operational Transformation algorithm to avoid content bifurcation, and display conflicting areas with color markings to facilitate conflict resolution; by setting scroll event throttling (such as triggering once every 16ms), unnecessary performance overhead is reduced. Anti-shake mechanisms are enabled in key areas (such as buffer boundaries) to ensure fast response. At the same time, the next text block is loaded in advance at the moment the user touches the screen to improve the smoothness of the interaction.

[0085] The effect of the above technical solution is: through dynamic buffer adjustment based on scrolling data, the page rendering performance can be significantly improved. When the user scrolls quickly, the buffer is increased to reduce loading delays and rendering interruptions. When scrolling slowly, reducing redundant loading can reduce resource consumption and improve overall performance; by predicting the user's scrolling target area and preloading content in advance, the freeze or delay during the scrolling process can be reduced to ensure the smooth display of content, especially in the rendering process of complex content (such as code, tables, formulas, etc.); through the early loading trigger mechanism of touch events (such as touchstart), it can ensure that the content can respond immediately when the user operates, thereby improving the user's interactive experience. In addition, anti-shake technology can ensure that key areas (such as buffer boundaries) respond quickly, avoiding unnecessary rendering overhead; the LRU strategy and binary serialization storage of loaded inactive areas reduce repeated parsing and unnecessary memory usage, thereby optimizing resource management and system response speed; by adapting to network bandwidth and offline mode, it can ensure that users can still get a smooth scrolling experience in low network speed or offline state, expanding the applicable scenarios of this technology; for scenarios where multiple users collaborate on editing, changes are merged through the Operational Transformation algorithm to avoid content bifurcation problems, and conflicting areas are marked with color to improve the efficiency and accuracy of team collaboration; the application of the Diff algorithm ensures that only the newly added content is rendered, reducing unnecessary rendering overhead, especially during the loading of dynamic content or large amounts of data, which can significantly improve rendering efficiency.

[0086] In one embodiment of the present invention, the S23 includes:

[0087] Design and implement a dual-buffer structure consisting of two independent text buffers: a foreground buffer and a background buffer. The foreground buffer stores the text currently being displayed and edited, while the background buffer stores the text to be updated. The two buffers are coordinated through a synchronization mechanism to ensure the accuracy and efficiency of text updates.

[0088] When text content needs to be updated, operations are performed in the background buffer, including adding new text, deleting old text, and modifying existing text. During the update process, high-efficiency computing technologies such as WebAssembly are used to accelerate text processing. At the same time, to ensure the atomicity and consistency of text updates, concurrency conflicts and data inconsistencies are resolved through locking mechanisms or transaction processing mechanisms.

[0089] While the back buffer is updating the text, the foreground buffer remains accessible to the user for display and editing. A flag or status code is set to indicate the progress and status of the current text update. When the user performs an editing operation, the editor checks the flag or status code to ensure that the editing operation does not conflict with the background update. If a conflict occurs, the editor can take appropriate measures to prompt the user or automatically handle the conflict.

[0090] When the back buffer completes the text update, it renders the updated content into the front buffer. Through the local rendering strategy, only the text content in the visible area of ​​the front buffer is rendered, and the corresponding DOM elements are updated as needed. During the rendering process, virtualization technology and incremental DOM update technology can be used to further improve rendering efficiency.

[0091] Use the browser's performance monitoring tools or custom performance indicators to monitor rendering speed and memory usage; based on the monitoring results, you can optimize and adjust the double buffer structure, rendering algorithm, synchronization mechanism, etc. to improve the editor's overall performance and user experience.

[0092] The working principle of the above technical solution is as follows: the text content currently being displayed is stored in the foreground buffer; the user can display, view and edit the text in the foreground buffer; when the text content needs to be updated, the operation is performed in the background buffer, including adding new text, deleting old text, modifying existing text, etc.; during the update process, high-efficiency computing technologies such as WebAssembly are used to accelerate the speed of text processing and improve update efficiency; in order to ensure the atomicity and consistency of text updates, concurrency conflicts and data inconsistencies are resolved through locking mechanisms or transaction processing mechanisms to avoid data competition and errors; the two buffers are coordinated through a certain synchronization mechanism to ensure the correctness and efficiency of text updates; a flag or status code is set to indicate the progress and status of the current text update so that the foreground buffer can perceive the status of the background update; when the user performs editing operations in the foreground buffer , the editor will check the flag or status code; if it detects that the background is updating, the editor will take appropriate measures to prompt the user or perform automatic processing, such as pausing editing, prompting the user to wait for the update to complete, etc., to ensure that the editing operation does not conflict with the background update; when the background buffer completes the text update, the updated content is rendered to the foreground buffer; a local rendering strategy is adopted to only render the text content in the visible area of ​​the foreground buffer, and update the corresponding DOM elements as needed; during the rendering process, virtualization technology, incremental DOM update technology and other means can be used to further improve rendering efficiency and reduce unnecessary DOM operations and rendering time; the browser's performance monitoring tools or custom performance indicators are used to monitor rendering speed and memory usage; based on the monitoring results, the double buffer structure, rendering algorithm, synchronization mechanism, etc. can be optimized and adjusted to improve the overall performance of the editor and user experience.

[0093] The above technical solution achieves the following effects: By introducing a dual-buffer structure, text content display and update operations are separated. Text content update operations, such as adding, deleting, and modifying, are performed in the back buffer, while the front buffer continues to provide user display and editing functions. This design allows text updates to be performed without affecting user operations, thereby improving text update efficiency. When text updates are performed in the back buffer, locking or transaction processing mechanisms are used to resolve concurrency conflicts and data inconsistencies. This ensures the atomicity and consistency of text updates, avoiding data errors or inconsistencies caused by concurrent operations. After the text update is completed in the back buffer, the updated content is rendered to the front buffer. A local rendering strategy is used to render only the text content within the visible area of ​​the front buffer, and the corresponding DOM elements are updated as needed. This design reduces unnecessary DOM operations and improves rendering speed. Furthermore, by combining virtualization technology with incremental DOM update technology, the frequency and complexity of DOM operations can be further reduced, thereby improving the user experience. Rendering speed and memory usage can be monitored using browser performance monitoring tools or custom performance metrics. This provides users with real-time performance data, making it easier for them to understand the performance of the editor. Based on the monitoring results, the double-buffer structure, rendering algorithms, and synchronization mechanisms can be optimized and adjusted to improve the editor's overall performance. The double-buffer design makes the editor more efficient when handling large texts or complex editing operations. Furthermore, this technical solution combines a variety of efficient computing technologies and rendering optimizations, ensuring that the editor maintains good performance and user experience when handling text content of varying types and sizes. This design enhances the editor's scalability and flexibility, enabling it to adapt to changing needs and technical environments.

[0094] In one embodiment of the present invention, the data storage method of the data storage module includes:

[0095] S31. Use IndexedDB as the local database to store text in segments. IndexedDB supports asynchronous operations and will not block the main thread, ensuring efficient operation of the editor.

[0096] S32. Divide the text content into multiple paragraphs or chapters and store them in IndexedDB respectively; and perform fast retrieval and incremental update to improve the efficiency of data storage and access;

[0097] S33. Through the index and transaction mechanism of IndexedDB, historical records can be quickly traced back. Users can view previous text content by time period or version number, and perform backtracking and version management.

[0098] S34. Use LocalStorage as the backup storage for IndexedDB; when a problem occurs in IndexedDB, restore data from LocalStorage.

[0099] The working principle of the above technical solution is as follows: use IndexedDB as the local database, which allows data to be stored in the form of key-value pairs and supports the storage of large amounts of structured data; store the text in segments, that is, cut the text into multiple parts according to a certain logic (such as paragraphs, chapters, etc.) and store them separately; the asynchronous operation feature of IndexedDB ensures that the main thread will not be blocked when performing database operations, thereby ensuring the efficient operation of the editor. All operations (such as adding, reading, updating, deleting, etc.) are performed asynchronously, and the operation results are processed through callback functions, Promises, or async / await syntax; the text content is divided into multiple paragraphs or chapters, which are stored in IndexedDB as independent data units; each paragraph or chapter is identified by a unique key in IndexedDB for fast retrieval and access; IndexedDB supports an indexing mechanism that can create indexes for stored data fields to achieve fast search and sorting; through indexing, the paragraph or chapter to be retrieved can be quickly located, improving the efficiency of data storage and access; at the same time, IndexedDB supports incremental updates, that is, only updating the changed data part instead of the entire data set, which further improves the efficiency of data updates; using IndexedDB's index and transaction mechanism, historical records can be quickly traced back; users can view previous text content by time period or version number, which is very useful for text editing, version management, etc.; through the transaction mechanism, data consistency and integrity can be ensured during the backtracking process; LocalStorage is used as the backup storage of IndexedDB. LocalStorage is part of the Web Storage API and provides client-side data storage. However, its storage space is relatively small, and data is stored in key-value pairs, which does not support complex query operations. When IndexedDB encounters problems (such as data corruption or inaccessibility), data can be restored from LocalStorage. This provides a data recovery mechanism to ensure data reliability and security.

[0100] The above technical solution has the following benefits: IndexedDB supports asynchronous operations, meaning that database queries, inserts, updates, or deletes are performed without blocking the main thread. This feature ensures that the editor remains smooth, even when users are performing extensive background data storage and retrieval operations. By dividing text content into multiple paragraphs or chapters and storing them separately, the solution implements modular data management. This segmented storage method not only facilitates data organization and management but also improves data access efficiency. Users can quickly locate the required paragraph or chapter without having to load the entire text file. IndexedDB's indexing mechanism makes data retrieval fast and efficient. Users can quickly find the required text content based on keywords, time periods, or version numbers. Furthermore, the solution supports incremental updates, which means that only the changed data sections are updated, rather than the entire dataset. This further improves data update efficiency and reduces unnecessary resource consumption. Through IndexedDB's indexing and transaction mechanisms, the solution enables fast historical review. Users can view previous text content by time period or version number, which is very useful for text editing and version management. At the same time, the transaction mechanism ensures data consistency and integrity, avoiding data conflicts and errors caused by concurrent operations. LocalStorage, as a backup storage for IndexedDB, provides additional protection for data security and reliability. When problems with IndexedDB occur, users can restore data from LocalStorage, thus avoiding data loss and corruption. This backup mechanism improves data fault tolerance and recovery speed. By combining the advantages of IndexedDB and LocalStorage, this technical solution achieves comprehensive optimization of text editor data storage performance. It improves data storage efficiency, access speed, retrieval accuracy, and data security, providing users with a smoother, more stable, and reliable editing experience.

[0101] In one embodiment of the present invention, the step S34 includes:

[0102] Develop a backup strategy, including:

[0103] Regular backup: Set a time interval (such as every hour or every day) to automatically serialize key data in IndexedDB (such as text content, index information, user settings, etc.) and store it in LocalStorage.

[0104] Triggered backup: Before detecting that IndexedDB is about to perform a major operation (such as large-scale data writing or structural changes), the backup process is proactively triggered to ensure data security.

[0105] Incremental backup: Consider implementing an incremental backup mechanism to only back up data that has changed since the last backup to reduce the space occupied by LocalStorage.

[0106] Use JSON or other efficient data exchange formats to convert the data structure in IndexedDB into string form for easy storage and transmission; store the serialized data through the setItem method of LocalStorage, and the key name contains timestamp or version number information for subsequent identification during recovery.

[0107] Set up a monitoring mechanism for IndexedDB exceptions in the editor; for example, use the onerror event to capture database operation failures. If an IndexedDB exception is detected, immediately trigger the backup process and back up the currently accessible data to LocalStorage to prevent data loss.

[0108] When the editor starts or when an IndexedDB operation fails, check whether there is valid backup data in LocalStorage; read the backup data from LocalStorage and convert it back to the original data structure through JSON parsing or other deserialization methods;

[0109] If IndexedDB does not work properly, try deleting the existing database (if it exists and is accessible) or creating a new database instance and rewriting the deserialized data into IndexedDB.

[0110] After data recovery is completed, perform data consistency and integrity verification; for example, ensure that the restored data is consistent with the backup data through hash value comparison, key field verification, etc.; if the verification fails, provide an error message, and try to restore the data from an earlier backup or take other remedial measures.

[0111] During the data backup or recovery process, progress information, success or failure prompts are displayed to the user through the editor interface or notification system.

[0112] The working principle of the above technical solution is as follows: backup strategy formulation and execution, including:

[0113] Regular backups:

[0114] The system sets a fixed time interval (such as every hour, every day) to automatically trigger the backup process.

[0115] During the backup process, key data in IndexedDB (such as text content, index information, user settings, etc.) is serialized and converted into string form.

[0116] Use the setItem method of LocalStorage to store the serialized data. The key name contains timestamp or version number information for subsequent identification and management.

[0117] Triggered backup:

[0118] The system monitors IndexedDB operations and proactively triggers the backup process when it detects that a major operation (such as large amounts of data written or structural changes) is about to take place.

[0119] This ensures that a recent backup is available before any significant changes are made to the data.

[0120] Incremental backup:

[0121] The system considers implementing an incremental backup mechanism to only back up data that has changed since the last backup.

[0122] This can reduce the space occupied by LocalStorage and improve the efficiency of backup and recovery.

[0123] The editor sets up a monitoring mechanism for IndexedDB exceptions, such as capturing database operation failures through the onerror event; once an IndexedDB exception is detected, the backup process is immediately triggered to back up the currently accessible data to LocalStorage to prevent data loss; when the editor starts or when an IndexedDB operation fails, the system checks whether there is valid backup data in LocalStorage; if there is backup data, it is converted back to the original data structure through JSON parsing or other deserialization methods; if IndexedDB cannot be used normally, the system attempts to delete the existing database ( If it exists and is accessible, it will create a new database instance; the deserialized data will be rewritten into a new IndexedDB to restore the data; after the data recovery is completed, the system will implement data consistency and integrity verification; it will ensure that the restored data is consistent with the backup data through hash value comparison, key field verification, etc.; if the verification fails, the system will provide an error message and try to restore the data from an earlier backup or take other remedial measures; during the data backup or recovery process, the system will display progress information, success or failure prompts to the user through the editor interface or notification system; this will help users understand the status of the backup and recovery, and whether further action is required.

[0124] The above technical solution ensures timely and effective backup of critical data in IndexedDB by setting scheduled and triggered backups. This significantly reduces the risk of data loss due to unexpected events (such as system crashes and power failures). The IndexedDB exception monitoring mechanism set up in the editor can immediately trigger the backup process when a database operation failure is detected. This further enhances data security and ensures data integrity even in the event of database anomalies. By implementing incremental backups, only data that has changed since the last backup is backed up, significantly reducing the space occupied by LocalStorage. This not only improves storage efficiency but also extends the storage life of the device. Using JSON or other efficient data exchange formats, the data structures in IndexedDB are converted to string form for storage and transmission. This improves data readability and portability, and also facilitates data backup and recovery. When the editor is launched or an IndexedDB operation fails, the system automatically checks for valid backup data in LocalStorage and performs data recovery. This significantly simplifies the user's operation process and improves the efficiency and accuracy of data recovery. After the data recovery is complete, the system performs data consistency and integrity checks to ensure that the restored data is consistent with the backup. This further enhances data reliability and avoids errors and failures caused by data corruption or inconsistencies. During the data backup or restore process, the system displays progress information and success or failure notifications to the user through the editor interface or notification system. This helps users understand the status of backup and restore and whether further action is required. This also improves user engagement and satisfaction.

[0125] In one embodiment of the present invention, the UI interaction method of the front-end UI interaction module includes:

[0126] S41. Build responsive UI interfaces based on React or Vue front-end frameworks; update and render UIs using React's virtual DOM and Vue's responsive data binding mechanism.

[0127] S42. Use WebWorker technology to distribute computationally intensive tasks (such as text rendering and searching) to background threads for execution, avoiding blocking the main thread and improving page responsiveness and user experience.

[0128] S43. Intelligent cursor positioning and content protection are performed through the CursorStateManager and MarkerNode mechanisms. When voice recognition content is appended, the part currently being edited by the user is not affected, ensuring that the cursor position is accurate and the user's editing content is not affected.

[0129] S44. Users can perform text editing, format adjustment, search and other corresponding operations through customized shortcut keys and toolbar buttons. At the same time, users are supported to customize settings according to their personal habits.

[0130] S45. Leverage the cross-platform features of React / Vue to adapt the editor to multiple platforms such as web and mobile; ensuring a consistent and smooth user experience on different devices.

[0131] The above technical solution works as follows: Using its virtual DOM technology, React first compares the virtual DOM with the real DOM when data changes, and then updates only the changes that need to be made, thereby improving the performance of large applications. React also supports component-based programming, allowing developers to break down the UI into a series of independent, reusable components, improving code maintainability and reusability. Its responsive data binding mechanism ensures that the interface automatically updates when data changes. Vue also supports component-based development. Developers can easily create, reuse, and combine components using Vue.component or single-file components (.vue files). With these two frameworks, developers can build responsive UIs that adapt to user actions or data changes. WebWorker technology creates a multi-threaded environment for JavaScript, allowing computationally intensive tasks (such as text rendering and searching) to be offloaded to background threads. This prevents the main thread (typically responsible for UI interactions) from being blocked or slowed down, improving page responsiveness and user experience. React manages and maintains the cursor state, including its position and shape. This manager enables intelligent cursor positioning, automatically adjusting the cursor's position based on user actions or data changes. In the editor, marked nodes are used to indicate the portion being edited or selected by the user. This mechanism protects the content being edited by the user from being affected by other operations. For example, when appending content through voice recognition, the cursor position is accurate and the user's editing is not affected. The editor provides a variety of shortcut keys and toolbar buttons, allowing users to perform operations such as text editing, formatting, and searching. The editor also supports user customization based on personal preferences, such as custom shortcut keys and the arrangement of toolbar buttons. React and Vue both have excellent cross-platform features, allowing developers to use the same code or similar code structures for development on different platforms. For the editor, this means that it can be adapted to multiple platforms, such as web and mobile, ensuring a consistent and smooth user experience across different devices.

[0132] The above technical solution achieves the following: a responsive UI interface built with the React or Vue front-end framework can adapt its layout to different devices and screen sizes, ensuring a positive visual experience for users on all devices. Furthermore, React's virtual DOM and Vue's responsive data binding mechanism make UI updates and rendering more efficient, reducing page lag and flickering, and improving user experience. WebWorker technology is used to offload computationally intensive tasks to background threads, preventing the main thread from being blocked. This means that even when users are performing operations like text rendering and searching, the page remains responsive without lag or freezes, significantly improving the user experience. The CursorStateManager and MarkerNode mechanisms enable intelligent cursor positioning and content protection. This not only ensures cursor accuracy during text editing but also protects the user's editing session when voice recognition is appended. This intelligent processing significantly improves the usability and user satisfaction of the editor. The editor provides a rich set of shortcuts and toolbar buttons for users to use, and supports customization based on personal preferences. This flexible operation not only improves editing efficiency but also meets the personalized needs of different users. Leveraging the cross-platform nature of React / Vue, the editor is adaptable across multiple platforms, including web and mobile. This means users experience a consistent and smooth user experience across different devices. This cross-platform consistency not only enhances the editor's usability and popularity but also reduces development and maintenance costs.

[0133] In one embodiment of the present invention, the step S42 includes:

[0134] Use separate JavaScript files as WebWorkers, which will handle computationally intensive tasks such as text rendering and searching;

[0135] In the main thread (i.e. UI thread), create a WebWorker instance through newWorker('worker.js') and set up the corresponding message passing mechanism;

[0136] Identify which tasks in the editor are computationally intensive, such as large-scale text search and complex format rendering, and categorize and organize these tasks; prioritize different types of tasks based on their urgency and importance, giving priority to critical tasks;

[0137] Dynamically distribute tasks to background threads based on the current system load and user operations to avoid overloading the main thread;

[0138] Communication between the main thread and the WebWorker is carried out through a message passing interface; the message contains information such as the task type, task data, and callback function. The asynchronous message processing mechanism is used, so the main thread can continue to perform other operations after sending the task to the background thread without waiting for the task to complete.

[0139] When the background thread completes the task, it returns the result to the main thread through the message passing mechanism. The main thread updates the UI or performs other related operations based on the result.

[0140] For large-scale data processing tasks, a block processing method is used to split the large data set into multiple small blocks, which are processed by different WebWorker instances respectively;

[0141] When large amounts of data need to be exchanged frequently, SharedArrayBuffer is used to share data between the main thread and the WebWorker, reducing the overhead of data copying and transmission.

[0142] For particularly computationally intensive tasks, WebAssembly can be combined with WebWorker to further improve task processing speed by leveraging WebAssembly's efficient execution performance.

[0143] The working principle of the above technical solution is: in the main thread (UI thread), a new WebWorker instance is created through newWorker('worker.js'). This independent JavaScript file ('worker.js') will serve as a WebWorker, responsible for processing computationally intensive tasks; identifying computationally intensive tasks in the editor, such as large-scale text search, complex format rendering, etc.; classifying and organizing these tasks, and setting priorities based on the urgency and importance of the tasks. Prioritize critical tasks to ensure user experience and system performance; dynamically distribute tasks to background threads (WebWorkers) for execution based on the current system load and user operations; this helps avoid main thread overload and maintain the smoothness of the user interface; the main thread and WebWorker communicate through a message passing interface; the message contains task type, task data, callback function and other information; using an asynchronous message processing mechanism, the main thread can continue to perform other operations after sending the task to the background thread without waiting for the task to complete; improving the concurrency and response speed of the system; WebWorker receives and executes tasks in the background thread; for large-scale data processing tasks, a block processing method is adopted to process large data The data set is divided into multiple small blocks, each of which is processed by a different WebWorker instance. When the background thread completes the task, it returns the result to the main thread through a message passing mechanism. The main thread updates the UI or performs other related operations based on the returned result. When large amounts of data need to be exchanged frequently, SharedArrayBuffer is used to share data between the main thread and the WebWorker. This reduces the overhead of data copying and transmission and improves data processing efficiency. For particularly computationally intensive tasks, WebAssembly is combined with WebWorker. The efficient execution performance of WebAssembly can further improve task processing speed, thereby optimizing system performance.

[0144] The above technical solution achieves the following: By distributing computationally intensive tasks (such as large-scale text searches and complex format rendering) to background threads (WebWorkers), the system avoids interface lag and response delays caused by running these tasks on the main thread (UI thread). This significantly improves system responsiveness and user experience. Tasks are dynamically distributed to background threads based on the current system load and user operations, and are prioritized based on their urgency and importance. This mechanism ensures that critical tasks receive priority processing, further improving system responsiveness and user experience. After sending a task to the background thread, the main thread can continue executing other operations without waiting for the task to complete. This asynchronous processing method improves system concurrency and resource utilization, enabling the system to handle multiple tasks more efficiently. For large-scale data processing tasks, a block-based processing approach is used to divide large data sets into multiple small blocks, each of which is processed by a different WebWorker instance. Furthermore, when large amounts of data need to be frequently exchanged, SharedArrayBuffer is used for data sharing, reducing the overhead of data copying and transmission. Together, these measures optimize system performance and improve task processing efficiency. For particularly computationally intensive tasks, WebAssembly is combined with WebWorker, leveraging WebAssembly's efficient execution to further accelerate task processing. This technical combination expands WebWorker's application scenarios, enabling it to handle more complex and computationally intensive tasks. Because WebWorker is part of the web standard, this technical solution offers excellent cross-platform compatibility. It can run on different browsers and operating systems without requiring additional adaptation. Encapsulating computationally intensive tasks in independent JavaScript files as WebWorkers makes the code more modular and easier to manage and maintain. This design also facilitates debugging and optimizing tasks. Communication between the main thread and WebWorker is carried out via a message-passing interface, with messages containing information such as task type, task data, and callback functions. This clear communication mechanism makes task distribution and result return more controllable and predictable, helping to improve development efficiency and code quality.

[0145] Obviously, those skilled in the art may make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if such changes and modifications fall within the scope of the claims and their equivalents, the present invention is intended to include such changes and modifications.

Claims

1. An intelligent speech recognition editor that can efficiently process large amounts of text, characterized by: The editor includes: Speech recognition module: used to receive audio input, convert it into text, and transmit it to the front end in real time via WebSocket / SSE; Text editing module: used to render and edit text using WebAssembly+virtualization technology; Data storage module: used to use IndexedDB / LocalStorage for text caching; Front-end UI interaction module: used to distribute tasks using React / Vue combined with WebWorker.

2. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 1, characterized in that: The speech recognition method of the speech recognition module includes: S11, receiving an audio signal from a microphone or other audio device in real time through the audio input interface of the speech recognition module; S12, pre-processing the received audio signal, using a speech recognition algorithm; converting the pre-processed audio signal into text; S13. Transmit the recognized text to the front-end editor in real time via WebSocket or SSE protocol.

3. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 2, characterized in that: Said S13 comprises: S131, formatting the recognized text before transmitting it via the WebSocket or SSE protocol, and encapsulating the text into a specific data packet format; S132. Dynamically select WebSocket or SSE protocol for real-time text transmission based on actual application scenarios and requirements; S133. During the transmission process, the text data is compressed using a compression algorithm; at the same time, packet loss or delay problems that occur during the transmission process are handled based on a retransmission mechanism and timeout detection; S134. The front-end editor receives the transmitted text data packet through the WebSocket or SSE client interface; performs parsing processing to extract the text content and other related information, and correctly inserts the newly received text content into the corresponding position in the editor based on the current state of the editor and the user operation; S135. Provide real-time feedback mechanism through the front-end editor during the real-time transmission and reception of text; S136. When the user performs editing operations while receiving new text, the front-end editor integrates the newly received text content and the content edited by the user.

4. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 3, characterized in that: Said S136 comprises: While receiving new text, the front-end editor monitors the user's editing operations in real time. It detects text conflicts in real time by comparing the overlapping parts of the user's editing area with the newly received text. When a conflict is detected, the conflict handling process is immediately triggered. Classify and identify detected text conflicts; adopt different processing strategies for different types of text conflicts; In the conflict handling process, a double buffer structure is used to maintain the consistency and integrity of the text; When integrating newly received text content and user-edited content, incremental DOM update technology is used to render only the text parts that need to be updated.

5. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 1, characterized in that: The text editing method of the text editing module includes: S21. Leverage WebAssembly technology to compile computationally intensive tasks related to text rendering and editing into efficient machine code. S22. Use virtualization technology to divide text content into multiple blocks, render only the text blocks within the currently visible area, and dynamically load and render new text blocks based on user scrolling operations, achieving smooth scrolling and efficient memory usage; S23, using a double buffer structure, while the text is being updated in the background, the foreground is displaying and editing normally, and after the background update is completed, only the visible area is partially rendered; S24. When the voice recognition content is appended in real time, the incremental DOM update technology is used to update only the newly added text part.

6. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 5, characterized in that: The S21 includes: Configure the WebAssembly runtime environment in the editor's front-end environment; conduct in-depth analysis of text rendering and editing tasks in the editor to identify compute-intensive tasks; Design specialized WebAssembly modules for identified compute-intensive tasks. WebAssembly modules are written in efficient low-level programming languages ​​and compiled into WebAssembly bytecode. Integrate the compiled WebAssembly module into the editor's front-end code and provide an access interface through a high-level language; Integrate performance monitoring tools into the editor to track and analyze the execution efficiency and memory usage of WebAssembly modules in real time; based on the monitoring results, continuously optimize and iterate the modules.

7. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 5, characterized in that: The S22 includes: S221. Select a virtualization framework. After selecting the framework, integrate it into the editor's development environment and divide the text content into multiple blocks according to the logical or physical structure. S222, setting a certain overlapping area or buffer zone between adjacent text blocks; S223. Build a virtual DOM tree for each text block. The DOM tree structure only contains the text block and its child elements in the current visible area. S224. Set a scroll event listener in the editor to track the user's scrolling operation in real time; when the user scrolls close to the boundary of the text block, trigger the dynamic loading mechanism to load and render the next one or several text blocks from the server or local cache.

8. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 7, characterized in that: The S222 includes: Build a user behavior prediction model based on historical rolling data and dynamically adjust the size of the overlapping area; The machine learning model predicts the user's likely scrolling target area and preloads the potential area in advance; for complex content, two additional text blocks are preloaded; for plain text, redundancy is reduced; Dynamically calculate the buffer threshold; divide the basic blocks according to the actual file structure, and retain a fixed proportion of the tail content of each block as a hard overlap area; Identify paragraph boundaries based on semantic analysis and set soft overlap areas at logical breakpoints; use the LRU strategy to store the current view and buffer data, and reuse them directly when hit; For loaded but inactive areas, serialize them into binary format for persistence; for unloaded overlapping areas, use lightweight placeholder DOM to maintain a stable layout and asynchronously fill in the real content; When scrolling into the overlapping area, only the different parts are rendered, and the new and old content are compared using the Diff algorithm. For dynamic elements in the overlapping area, WebSocket bidirectional synchronization is used to ensure consistent state. Set scroll event throttling, but enable anti-shake and fast response in key areas; trigger loading of the next block in advance when the user's finger touches the screen; Monitor network bandwidth and reduce the buffer to the minimum safety threshold when the network speed is low; automatically expand the overlapping area of ​​the local cache in offline mode; When multiple users edit collaboratively, content may fork in overlapping areas; merge changes and mark conflicting areas with colors.

9. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 1, characterized in that: The data storage method of the data storage module includes: S31. Use IndexedDB as the local database to store the text in segments; S32, dividing the text content into multiple paragraphs or chapters, and storing them in IndexedDB respectively; S33. Through the index and transaction mechanism of IndexedDB, historical records can be quickly traced back. Users can view previous text content by time period or version number, and perform backtracking and version management. S34. Use LocalStorage as the backup storage for IndexedDB; when a problem occurs in IndexedDB, restore data from LocalStorage.

10. The intelligent speech recognition editor for efficiently processing large-scale text according to claim 1, characterized in that: The UI interaction method of the front-end UI interaction module includes: S41. Build responsive UI interfaces based on React or Vue front-end frameworks; update and render UIs using React's virtual DOM and Vue's responsive data binding mechanism. S42. Use WebWorker technology to distribute computationally intensive tasks to background threads for execution; S43. Perform intelligent cursor positioning and content protection through a cursor state manager and a marked node mechanism; S44. Users can perform corresponding operations by customizing shortcut keys and toolbar buttons. At the same time, users are supported to customize settings according to their personal habits. S45. Use the cross-platform features of React / Vue to adapt the editor to multiple platforms.

Images