Dynamic interaction and automatic backfilling method, device, equipment and medium for matrix scales

Abstract

The invention relates to the technical field of front-end development, in particular to a matrix scale dynamic interaction and automatic backfilling method and device, equipment and a medium. In the embodiment of the invention, the electronic equipment generates an initial matrix scale according to collected user behavior data, and the user behavior data is used for indicating a matrix quantity table format of the initial matrix scale; processing the to-be-filled form image to obtain structured data; and according to the structured data, performing intelligent backfilling in the initial matrix scale by adopting an AI algorithm in combination with user historical behavior data to obtain a matrix scale. According to the embodiment of the invention, high-performance front-end rendering, flexible dynamic interaction and intelligent AI backfilling are deeply fused, so that the problems of performance bottleneck, insufficient interaction experience, weak automatic data filling capability, poor data expansibility and the like in the visualization process of the matrix scale are solved, and the data visualization and intelligence capabilities of the front-end application are improved.

Description

(19) State Intellectual Property Office (12) Invention Patent Application (10) Application Publication Number (43) Application Publication Date (21) Application Number 202511607171.5 (22) Application Date 2025.11.05 (71) Applicant Beijing Qingsong Yikang Information Technology Co., Ltd. Address Room 716, 7th Floor, Building 2, No. 28, Andingmen East Street, Dongcheng District, Beijing 100007 (72) Inventors Lei Ao, Zhang Da, Gao Yushi (74) Patent Agency Beijing Yimoer Patent Agency (Special General Partnership) 16078 Patent Attorney Wang Lijun (51) Int.Cl. G06F 3 / 0483 (2013.01) G06F 16 / 957 (2019.01) G06V 30 / 146 (2022.01) G06V 30 / 18 (2022.01) G06V 30 / 19(2022.01) G06V 30 / 262(2022.01) G06V 30 / 412(2022.01) G06V 10 / 82(2022.01) G06N 3 / 045(2023.01) G06N 3 / 0464(2023.01) G06F 40 / 30(2020.01) G06F 40 / 174(2020.01) (54) Invention Title Matrix Scale Dynamic Interaction and Automatic Backfilling Method, Apparatus, Equipment and Medium (57) Abstract This application relates to the field of front-end development technology, and in particular to matrix scale dynamic interaction and automatic backfilling method, apparatus, equipment and medium. In this embodiment, the electronic device generates an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; the form image to be filled is processed to obtain structured data; based on the structured data, an AI algorithm combined with the user's historical behavior data is used to intelligently backfill the initial matrix scale, resulting in the matrix scale. This embodiment deeply integrates high-performance front-end rendering, flexible dynamic interaction, and intelligent AI backfilling, solving problems such as performance bottlenecks, insufficient interactive experience, weak data auto-filling capabilities, and poor data scalability in the matrix scale visualization process, thereby improving the data visualization and intelligence capabilities of the front-end application. Claims 2 pages, Description 16 pages, Drawings 2 pages, CN 121433548 A 2026.01.30 CN 1 21 43 35 48 A 1. A method for dynamic interaction and automatic backfilling of a matrix scale, characterized in that the method includes: generating an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; processing the form image to be filled in to obtain structured data;1. Based on the structured data, an AI algorithm combined with user historical behavior data is used to intelligently backfill the initial matrix scale to obtain the matrix scale. 2. The method according to claim 1, wherein the user behavior data collection includes operation path data and statistical data collected in real time through a front-end event listener; the operation path data includes at least one of clicking, selecting, and submitting; the statistical data includes at least one of configuration item changes and matrix item selection frequency. 3. The method according to claim 1, wherein processing the form image to be filled in to obtain structured data includes: performing image preprocessing on the form image, including denoising, contrast enhancement, and tilt correction; using edge detection and template matching algorithms to locate key regions in the intermediate form matrix; and using a character recognition model based on a convolutional neural network to output structured data containing coordinates and content. 4. The method according to claim 3, wherein the character recognition model adopts a ResNet-34 architecture, and the structured data is in JSON format. 5. The method according to claim 1, characterized in that, the step of intelligently backfilling the initial matrix scale based on the structured data using AI algorithms combined with user historical behavior data to obtain the matrix scale includes: automatic matching and filling based on pre-configured field mapping relationships; for unmatched items, generating recommended filling options for users to choose from based on user historical correction records. 6. The method according to claim 1, characterized in that, after generating the initial matrix scale based on the collected user behavior data, the method further includes: dynamically rendering the initial matrix scale using a front-end rendering method based on HTML table optimization and event delegation mechanisms; combining virtual scrolling technology to render only matrix items within the visible area, and optimizing scrolling performance through requestAnimationFrame. 7. The method according to claim 6, characterized in that, the virtual scrolling technology includes: real-time calculation of the visible area and buffer range; dynamic loading and unloading of matrix item DOM elements; and using CSS absolute positioning and transform to correct scrolling positions. 8. A dynamic interactive and automatic backfilling device for a matrix scale, characterized in that the device comprises: a processing module, configured to generate an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; and to process a form image to be filled in to obtain structured data; and a backfilling module, configured to intelligently backfill the initial matrix scale based on the structured data, using an AI algorithm combined with user historical behavior data, to obtain the matrix scale. 9. An electronic device, characterized in that the electronic device includes a processor, the processor being configured to execute memory...The computer program stored in the medium implements the steps of the matrix scale dynamic interaction and automatic backfilling method as described in any one of claims 1-7. 10. A computer-readable storage medium, characterized in that it stores a computer program, which, when executed by a processor, implements the steps of the matrix scale dynamic interaction and automatic backfilling method as described in any one of claims 1-7. Claims 2 / 2 pages 3 CN 121433548 A Matrix Scale Dynamic Interaction and Automatic Backfilling Method, Apparatus, Device and Medium Technical Field

[0001] This application relates to the field of front-end development technology, and in particular to the matrix scale dynamic interaction and automatic backfilling method, apparatus, device and medium. Background Art

[0002] In current data processing and applications, matrix scales, as a common form of data collection and display, are widely used in scenarios such as questionnaire surveys, test reports, and data entry. However, existing implementation schemes have many technical defects.

[0003] First, the static table-based matrix scale display method has poor interactivity, making it difficult to support dynamic data updates. Furthermore, it suffers from significant performance bottlenecks when rendering large-scale data, easily causing page lag and hindering complex data filtering, sorting, and analysis functions. Second, even when using traditional front-end frameworks like Vue.js, rendering performance bottlenecks persist when processing large-scale table data. Its data management scheme is inefficient, leading to inefficient data synchronization and limited interactive methods, making it difficult to meet the needs of complex and ever-changing business scenarios. Regarding data backfilling, while traditional OCR technology can recognize form data, extensive manual intervention is still required for matching and adjustment after recognition, resulting in low efficiency. It also cannot combine user historical behavior data for intelligent prediction and adaptive correction.

[0004] Therefore, there is an urgent need in the art for a comprehensive solution that integrates high-performance rendering, intelligent interaction, and AI-driven data backfilling. Summary of the Invention

[0005] This application provides a matrix scale dynamic interaction and automatic backfilling method, apparatus, device, and medium to provide power matching the user's movement state when the user is in different movement states, thereby improving the assistive effect.

[0006] In a first aspect, embodiments of this application provide a method for dynamic interaction and automatic backfilling of a matrix scale. The method includes: generating an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; processing a form image to be filled in to obtain structured data; and using an AI algorithm combined with user historical behavior data to intelligently backfill the initial matrix scale based on the structured data to obtain the matrix scale.

[0007] Further, the user behavior data collection includes an operation path collected in real time through a front-end event listener.Data and statistical data; The operation path data includes at least one of clicking, selecting, and submitting; The statistical data includes at least one of configuration item changes and matrix item selection frequency.

[0008] Further, the processing of the form image to be filled in to obtain structured data includes: image preprocessing of the form image, including denoising, contrast enhancement, and tilt correction; using edge detection and template matching algorithms to locate key areas of the intermediate form matrix; using a character recognition model based on a convolutional neural network to output structured data containing coordinates and content. Specification 1 / 16 pages 4 CN 121433548 A

[0009] Further, the character recognition model adopts the ResNet-34 architecture, and the structured data is in JSON format.

[0010] Further, the intelligent backfilling of the initial matrix scale based on the structured data and using AI algorithms combined with user historical behavior data to obtain the matrix scale includes: automatic matching and filling based on pre-configured field mapping relationships; for unmatched items, generating recommended filling options for users to choose from by combining user historical correction records.

[0011] Further, after generating the initial matrix scale based on the collected user behavior data, the method further includes: dynamically rendering the initial matrix scale using a front-end rendering method based on HTML table optimization and event delegation mechanism; combining virtual scrolling technology to render only the matrix items within the visible area, and optimizing scrolling performance through requestAnimationFrame.

[0012] Further, the virtual scrolling technology includes: real-time calculation of the visible area and buffer range; dynamic loading and unloading of matrix item DOM elements; and using CSS absolute positioning and transform to correct the scrolling position.

[0013] In a second aspect, embodiments of this application also provide a matrix scale dynamic interaction and automatic backfilling device, the device including: a processing module, used to generate an initial matrix scale based on the collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; processing the form image to be filled to obtain structured data; and a backfilling module, used to intelligently backfill the initial matrix scale based on the structured data, using AI algorithms combined with user historical behavior data, to obtain the matrix scale.

[0014] In a third aspect, embodiments of this application also provide an electronic device, the electronic device including a processor, the processor being configured to execute a computer program stored in a memory to implement the steps of the matrix scale dynamic interaction and automatic backfilling method as described above.

[0015] In a fourth aspect, embodiments of this application also provide a computer-readable storage medium, characterized in that it stores...A computer program is provided, which, when executed by a processor, implements the steps of the matrix scale dynamic interaction and automatic backfilling method described above.

[0016] In this embodiment, the electronic device generates an initial matrix scale based on the collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; the form image to be filled is processed to obtain structured data; based on the structured data, an AI algorithm is used in combination with the user's historical behavior data to perform intelligent backfilling in the initial matrix scale to obtain the matrix scale. This embodiment deeply integrates high-performance front-end rendering, flexible dynamic interaction and intelligent AI backfilling, solving the problems of performance bottlenecks, insufficient interactive experience, weak automatic data filling ability and poor data scalability in the process of matrix scale visualization, and improving the data visualization and intelligence capabilities of front-end applications. Brief Description of the Drawings

[0017] In order to more clearly illustrate the technical solution of this application, the drawings used in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. Instruction Manual 2 / 16 Page 5 CN 121433548 A

[0018] Figure 1 is a schematic diagram of a matrix scale dynamic interaction and automatic backfilling process provided in an embodiment of this application; Figure 2 is a schematic diagram of a matrix scale dynamic interaction and automatic backfilling device provided in an embodiment of this application; Figure 3 is a schematic diagram of an electronic device provided in an embodiment of this application. Detailed Description

[0019] In order to make the purpose, technical solution and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments in this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0020] In current enterprise-level applications (such as digital questionnaire systems, clinical laboratory data entry platforms, etc.), matrix scales are a common form of data collection and display. However, existing implementation schemes have many technical bottlenecks.

[0021] Existing scheme one mainly displays matrix scales based on static HTML tables. The main drawback of this scheme is that the interactivity is extremely poor and it cannot support dynamic data updates and real-time responses. When the amount of data increases, the browser's rendering performance drops sharply due to the need to manipulate a large number of Document Object Model (DOM) elements, resulting in noticeable lag and severely impacting the user experience. Furthermore, this solution struggles to implement complex data filtering, sorting, and multidimensional analysis functions, thus limiting data insight capabilities.

[0022] Existing Solution 2 attempts to implement it using traditional front-end frameworks (such as Vue and React). Although the interactivity is improved, its rendering performance still has a bottleneck when processing large-scale tabular data. The framework's own reactive data management mechanism will bring heavy computational overhead when the data volume is extremely large. At the same time, the synchronization and transmission efficiency of data between components is low, making it difficult to meet the needs of high-frequency data update scenarios. Its interaction methods are also relatively limited, and it cannot flexibly cope with users' complex customization needs for matrix table format, layout and behavior.

[0023] Existing Solution 3 involves traditional data backfilling methods, which usually use OCR technology to recognize data on paper or electronic forms. However, the data recognized by this method still needs to be manually matched and adjusted by the user, which has low automation and low efficiency. More importantly, traditional OCR solutions do not have the ability to make intelligent predictions based on users' historical behavior and preferences, nor can they make adaptive data corrections based on users' correction feedback, resulting in unsatisfactory backfilling accuracy and user experience.

[0024] Therefore, there is an urgent need in the field for a technical solution that can deeply integrate high-performance front-end rendering, flexible dynamic interaction and intelligent AI backfilling to systematically solve the above problems.

[0025] Based on this, in order to improve rendering performance, enhance interactive experience, and achieve intelligent data filling, this application provides a method, apparatus, device, and medium for dynamic interaction and automatic backfilling of a matrix scale.

[0026] Example 1: Figure 1 is a schematic diagram of a process of dynamic interaction and automatic backfilling of a matrix scale provided in this application embodiment. The process includes: S101: Generating an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale.

[0027] The matrix scale dynamic interaction and automatic backfilling method provided in this application embodiment is applied to an electronic device, which may be a server, PC, etc.

[0028] In this application embodiment, the electronic device continuously collects raw user behavior data through event listeners distributed throughout the front-end application. The user behavior data is used to indicate the matrix scale format of the initial matrix scale.

[0029] For example, the display interface of the electronic device is divided into multiple areas, including but not limited to the left area, the middle area, and the right area. The left area can be used to select the type of the initial matrix scale; the middle area, which is the dynamic preview area (page 3 / 16, CN 121433548 A), can be used to configure specific matrix items of the initial matrix scale; the right area is the detailed configuration panel, which can be used to select the input type of the matrix items, such as whether to use a "drop-down list" or a "radio button" as the input type. The functions of each area can also be interchanged, without restriction.

[0030] Users can perform different operations in different areas. The electronic device collects user behavior data and constructs an initial matrix scale based on this user behavior data. Users can perform operations such as clicking, selecting, modifying configuration items, and submitting forms in different areas. The electronic device encapsulates these operations along with corresponding matrix context information (such as matrix ID, operation time, and session ID) into a structured log and performs behavioral analysis.

[0031] In one possible implementation, the electronic device can use stream processing technology to parse the operation paths in the structured log and combine this with statistical data from a historical database—such as the selection frequency of matrix items and the number of times a specific configuration mode is reused—for comprehensive analysis. The goal of the analysis is to infer the matrix scale format that the user is most likely to expect in the current task context.

[0032] For example, the electronic device analysis found that a user used a "five-point Likert scale" in the "Employee Satisfaction Survey" questionnaire 80% of the time in the past week, and always added a "remarks" text column. So, when the user re-enters a similar scenario, the initial matrix scale generated by the electronic device will be automatically preset to a five-level Likert scale format, and a pre-configured "remarks" column will be added. This initial matrix is ​​not a blank canvas, but a "semi-finished product" that has already embedded user preferences and reduced redundant configuration steps, greatly improving the efficiency of questionnaire design.

[0033] S102: Process the form image to be filled in to obtain structured data.

[0034] In this embodiment, after the electronic device generates the initial matrix scale, it can automatically fill in the form image uploaded by the user to obtain the matrix scale corresponding to the form image.

[0035] The form image uploaded by the user may be a hospital test report, a questionnaire, or other structured documents. After receiving the image, the electronic device does not directly perform character recognition, but first performs a series of fine image preprocessing operations to improve recognition accuracy. After preprocessing, the electronic device calls the OCR recognition service to convert the text information in the image into machine-readable text data. However, the text data at this time is fragmented and unstructured. To this end, the built-in data mapping engine of the electronic device starts working, associating and structuring these scattered texts with specific fields in the initial matrix scale according to predefined rules and templates, and finally outputting a well-formatted, semantically labeled structured data, such as a JSON object.

[0036] For example, users can submit form images, such as photos of test reports, through the upload component on the electronic device interface. After receiving the image, the electronic device starts a rigorous, pipelined OCR processing flow to obtain high-quality structured data. This process first focuses on solving image quality problems. Due to the lighting conditions of the shooting environment, scanning...Due to differences in the performance of the scanner or the wrinkles in the paper, the original image often contains noise, low contrast, and geometric distortion. Therefore, image preprocessing is the first step. The electronic device calls digital image processing algorithms to sequentially perform denoising (using median filtering to protect edges), contrast enhancement (using restricted adaptive histogram equalization CLAHE), and tilt correction (based on Hough transform to detect text baseline and rotate), finally outputting a clear and regular intermediate form image, clearing obstacles for subsequent accurate recognition.

[0037] Then, the electronic device needs to accurately find all the information blocks that need to be recognized in this processed intermediate form image, such as "patient name", "test items", "results", "units", and "reference range". The electronic device can use edge detection algorithms (such as Canny) to quickly outline the table lines and text box outlines in the image. At the same time, the electronic device matches with a pre-set expandable form template library. This expandable form template library stores layout instructions for various common test forms 4 / 16 pages 7 CN 121433548 A templates. The electronic device can quickly locate the template most similar to the current image through template matching, and accurately crop out sub-images of each key region based on the predefined coordinate information in the template. For non-standard forms that cannot match the template, the key regions are inferred by finding the minimum bounding rectangle and combining layout heuristic rules based on the edge detection results.

[0038] On each key region sub-image located, the electronic device uses a deep learning-based character recognition model to extract text, and the model outputs the text content of each key region sub-image. The electronic device then integrates and structures these text fragments, their corresponding semantic tags (inferred from templates or rules), and their coordinate information in the original image, and finally assembles them into a standard, machine-readable JSON object. This JSON object accurately describes all the key information on the inspection form, marking the successful conversion from analog images to digital structured data, and providing accurate and reliable input for the final intelligent backfilling.

[0039] S103: Based on the structured data, the AI ​​algorithm is used in combination with user historical behavior data to perform intelligent backfilling in the initial matrix scale to obtain the matrix scale.

[0040] In this embodiment of the application, the electronic device can intelligently backfill the initial matrix scale based on structured data, using AI algorithms combined with user historical behavior data, to obtain the matrix scale.

[0041] Specifically, the electronic device maintains a "standard item - form field" mapping dictionary configured by domain experts. For example, it binds the standard name "white blood cell count" to the field ID of "WBC" in the form. When the item name recognized by OCR exactly matches or is highly similar to the key in the dictionary, the engine will directly perform automatic filling, matching the recognized value with the key in the dictionary.The electronic device can process most standardized and unambiguous data by filling in the target cell with the unit.

[0042] For unmatched items or low-confidence matching items, the electronic device can perform backfilling based on AI algorithms and user historical behavior data. Among them, the AI ​​algorithm is used to calculate the semantic similarity between the identified item and all potential target fields. This is usually achieved through word vector models (such as Word2Vec or Sentence-BERT), which can understand the close relationship between "T4" and "thyroxine" in the medical context. At the same time, the electronic device will deeply query the current user's historical correction record library. This library records the user's modification behavior to the system's automatic filling results each time. Suppose the electronic device finds that the current user has manually corrected the system-filled "T4" to "thyroxine" five times. Then even if "T4" has a higher string similarity to another field, the strong historical behavior evidence will make "thyroxine" the preferred recommendation option.

[0043] The electronic device combines semantic similarity and historical behavior weight. For items that cannot be directly matched, the electronic device will generate a smart recommendation filling list and present it to the user in the form of drop-down options. Users can easily complete the filling with a simple click. More importantly, every user interaction—whether accepting a recommendation or manually correcting—is fed back to the historical behavior database in real time. The electronic device analyzes these correction clusters. For example, if it finds that a user has been consistently changing a certain identified old unit to a new unit recently, it will automatically adjust all subsequent filling strategies for that user, achieving adaptive data correction and forming a complete closed loop of "execution-feedback-learning-optimization". This makes the system more and more accurate with use, and finally outputs a complete, accurate and highly personalized matrix scale, completely revolutionizing the traditional data entry mode.

[0044] Example 2: In order to improve rendering performance, enhance interactive experience and realize intelligent data filling, based on the above embodiments, in this embodiment of the application, the user behavior data collection includes operation path data and statistical data collected in real time through the front-end event listener; the operation path data includes at least one of click, selection and submission; the statistical data includes at least one of configuration item change and matrix item selection frequency.

[0045] The collection of user behavior data is a systematic and multi-dimensional process, mainly divided into two categories: operation path data and statistical data. They together constitute the "digital footprint" of the user's interaction with the matrix scale.

[0046] In this embodiment of the application, the user behavior data collected by the electronic device includes, but is not limited to, operation path data and statistical data collected in real time by the listener through the front-end event specification page 5 / 16 8 CN 121433548 A. The operation path data includes at least one of clicking, selecting, and submitting; the statistical data includes at least one of configuration item changes and matrix item selection frequency.

[0047] Specifically, the collection of operation path data relies on a carefully designed front-end event listening system. Electronic devices use event bubbling to listen to the container elements and their child elements of the matrix table, capturing native DOM events such as click, change, and submit. For example, when a user clicks a matrix header to sort, selects a radio button or checkbox, or fills in content in an input box and submits the entire form, these interactive actions are all recorded by the event listener without omission. The recorded content includes not only the event type, but also the specific element where the event occurred, the timestamp, the block ID of the matrix, and the numerical changes before and after the operation.

[0048] Statistical data is derived data generated after aggregation and processing by the back-end service or front-end computing module based on the operation path data. Statistical data focuses more on reflecting user behavior patterns from a macro and trend perspective. Among them, "configuration item changes" is a key dimension. Electronic devices record user modifications to each configurable parameter in the configuration areas of matrix scales, such as the right-hand area for detailed configuration described in Example 1. For example, a user might change the input type of a matrix item from "text" to "dropdown selection," or modify the default value of an option. These changes are recorded to form a user configuration preference profile. "Matrix item selection frequency" is another important dimension. Electronic devices statistically analyze the frequency of user access to, completion frequency of, and final submitted values ​​for specific matrix items across different types of matrix scales over a period of time. A matrix item can be a row or column within the matrix scale. For example, data analysis might reveal that a user consistently skips the "evaluation of superiors" row in an "employee satisfaction survey" scale, or consistently selects the highest score in the "work environment" column. These statistics reveal the user's core concerns and potential data completion patterns. All this collected behavioral data, after being anonymized and encrypted, is securely transmitted and stored in a user behavior log library, providing a continuous source of data for subsequent AI analysis and intelligent decision-making.

[0049] For example, the matrix component, combined with the open-source framework Element UI, implements a highly flexible and easily extensible C-end configuration display. It adopts a carefully designed three-layer architecture, aiming to enhance user experience and provide extremely high customization capabilities. The specific architecture and functions are as follows: The left-hand area displays different matrix type components. Users can select the desired matrix type by clicking and configure it uniformly in a table format. This design aims to avoid lengthy configuration forms, making the configuration process more intuitive and efficient. This area supports configuration of common input types such as text, dropdown lists, and selection boxes. Users can easily set these elements uniformly, thereby quickly generating the required matrix components.

[0050] The central area displays a dynamically generated questionnaire form page, which renders the corresponding matrix components in real time according to the matrix type selected on the left. Each matrix component uses the Element UI framework, providing a highly consistent user interface and interaction method. In this area, users can clearly view and configure each matrix item to ensure the integrity and consistency of the form content, further enhancing the user experience.

[0051] The right-hand area is the detailed configuration area for specific matrix sub-items, where users can perform highly customized configurations for each sub-item. Compared with common matrix components on the market (such as Wenjuanxing, Tencent Docs, etc.), this component has significant advantages in flexibility and functionality. Users can not only set independent options for each sub-item, but also set specific attributes for different types of options (such as drop-down boxes, selection boxes, etc.), including the number of options, whether they are required, default values, etc. This enables the component to cope with various complex scenarios and support future functional expansion and customized development.

[0052] Compared with existing matrix components on the market, this component not only has high flexibility and customizability, but also provides excellent scalability, which can meet the diverse needs of users in practical applications. Whether for different questionnaire types (6 / 16 pages, 9 CN 121433548 A type, test items) or later functional expansion, it can provide strong support, helping users to achieve personalized configuration and flexible management in various scenarios.

[0053] In the embodiments of this application, the electronic device can combine drag-and-drop adjustment, filtering and sorting and other interactive methods to enhance the user experience, and combine AI analysis data patterns to provide intelligent recommendations and adaptive data display.

[0054] Among them, user behavior data collection includes: recording the user's operation path, selection mode, changes in configuration items, selection frequency of matrix items, etc. This data can be collected in real time through front-end event listeners (such as click, selection, submission, etc.) to store the user's past configuration data, including commonly used matrix types, configuration methods, sub-item selections, etc.

[0055] Through the analysis of data patterns, AI can understand which configurations are more commonly used and can automatically adjust the display method of the matrix according to the complexity and data volume of the matrix. For example, when the amount of data in the matrix is ​​small, a traditional single row or single column display can be selected; while when the amount of data increases, it can automatically switch to pagination and matrix components. The AI ​​automatically adapts to the corresponding different types to avoid information overload. When the user fills out the form, the AI ​​can identify and automatically fill in certain fields based on the corresponding uploaded test form. For example, if a user frequently selects a specific option (such as the option in the drop-down box), the AI ​​can identify the items that the user may select and automatically fill them in to reduce the user's operation time, which is especially important in long forms.

[0056] Example 3: In order to improve rendering performance, enhance interactive experience and realize intelligent data filling, in the above examplesBased on the examples, in this embodiment of the application, the processing of the form image to be filled in to obtain structured data includes: performing image preprocessing on the form image, including denoising, contrast enhancement, and tilt correction; using edge detection and template matching algorithms to locate key regions in the intermediate form matrix; and using a character recognition model based on a convolutional neural network to output structured data containing coordinates and content.

[0057] Since the form images uploaded by users may be taken by mobile phones or scanned, they usually have problems such as uneven lighting, background noise, low contrast, and geometric deformation caused by shooting angle. Based on this, the electronic device can call the image processing module to perform image preprocessing on the form image. The image preprocessing includes at least one of denoising, contrast enhancement, and tilt correction.

[0058] The denoising operation uses Gaussian filtering or median filtering to eliminate random noise in the image while preserving the edge information of the characters as much as possible. Contrast enhancement uses histogram equalization technology to stretch the grayscale range of the image, making the distinction between the foreground text and the background more obvious. Tilt correction is performed by detecting the tilt angle of the text lines in the image through Hough transform or projection contour analysis, and by performing rotation correction through affine transformation to ensure that the text is in a horizontal state, laying a solid foundation for subsequent character recognition. After preprocessing, a clear and regular intermediate form image is obtained.

[0059] After image preprocessing, the electronic device needs to know which parts in the entire form image are the key information areas to be identified (such as patient name, test items, test result values, etc.). Specifically, the electronic device adopts a strategy that combines edge detection and template matching.

[0060] Among them, edge detection algorithms (such as the Canny operator) are used to quickly outline the structural contours of table lines, text boxes, etc. in the form. At the same time, the electronic device maintains a configurable form template library, which stores the structural templates of common forms (such as test forms from different hospitals) and defines the relative position and size of each key area. The template matching algorithm will calculate the similarity between the current image and the templates in the library, quickly locate the matching template, and extract the sub-images of each key area according to the template definition. If no perfectly matching template is found, the electronic device relies on the results of edge detection to infer possible candidate regions by finding closed contours and combining heuristic rules (such as region aspect ratio and positional relationship).

[0061] Finally, on the located key region sub-image, the electronic device uses a character recognition model based on a convolutional neural network to perform text recognition. This model has been trained on a large amount of Chinese and English text, as well as printed and handwritten text data, and has powerful feature extraction and classification capabilities. It receives the sub-image as input, performs multi-layer convolution and pooling operations, and finally outputs the region.The text content contained in the domain. After recognition, the electronic device will bind each recognized text fragment with the coordinate information of its region and the semantic tags (such as "project name", "value", "unit") defined in the template for that region, and assemble them into structured records. Finally, all these records are integrated and output into a complete structured data object, which clearly describes all the key information in the form and their logical relationships, providing accurate input for intelligent backfilling.

[0062] In order to improve rendering performance, enhance interactive experience and realize intelligent data filling, based on the above embodiments, in this embodiment of the application, the character recognition model adopts the ResNet-34 architecture, and the structured data is in JSON format.

[0063] In the selection of the character recognition model, this embodiment of the application preferably adopts a convolutional neural network based on the ResNet-34 architecture. Residual networks are a milestone model in modern deep learning. Their core innovation lies in the introduction of "residual blocks" and "shortcut connections" mechanisms. This design effectively solves the gradient vanishing and network degradation problems that are common in deep neural networks, making it possible to build deeper and more powerful models. The ResNet-34 model has a depth of 34 layers. Compared to shallower networks, it can extract more complex and abstract features from images, exhibiting stronger robustness and higher recognition accuracy for situations such as blurred fonts, slightly connected characters, and complex background interference that may occur in forms. During training, the model uses a large amount of labeled form image data to learn how to map image pixels to corresponding character sequences. In actual inference, the model processes text line images or word images that have been preprocessed and cropped after key region localization, and outputs the text string corresponding to that region.

[0064] The structured data can be in JSON format. JSON is a lightweight data exchange format that uses a text format completely independent of programming languages ​​to store and represent data. Its hierarchical structure is clear, easy for humans to read and write, and also easy for machines to parse and generate. Choosing the JSON format has multiple advantages. First, it is very suitable for representing structured data with hierarchical and key-value pair characteristics in this scheme. For example, a test item can be represented as a JSON object: {"item_ name": "white blood cell count", "value": "6.8", "unit": "10^9 / L", "bounding_box": {"x": 100, "y": 200, "width": 150, "height": 30}}. The "bounding_box" field stores the coordinates of this region in the original image, which is crucial for subsequent visual verification or precise matching. Secondly,JSON is the de facto standard for modern web front-end and back-end communication. Front-end JavaScript can seamlessly parse and process JSON data, greatly facilitating the flow and integration of data between various modules of the system. Finally, the JSON format has good flexibility and scalability. If new fields (such as "confidence level", "font size", etc.) need to be added to the structured data in the future, it can be easily extended without changing the entire data architecture. This combination of model and format ensures the efficiency, accuracy and system compatibility of the process of converting images into structured information.

[0065] In the embodiments of this application, the electronic device provides a data formatting function to support the unified processing of different data types. For example, the electronic device provides out-of-the-box functionality: uploading the corresponding test report, directly uploading the test report of the hospital, etc.; the electronic device also provides intelligent recognition functionality: the system automatically completes, high-definition image preprocessing, key area positioning, requires one-to-one mapping, and achieves the process of automatic matching of test report item name and test value with the pre-configured test item-form field or matrix form field correspondence: test report item name - automatic matching of form input box and test value - automatic filling process.

[0066] Example 4: In order to improve rendering performance, enhance interactive experience, and realize intelligent data filling, based on the above embodiments, in this embodiment of the application, the step of using AI algorithms combined with user historical behavior data to intelligently backfill the initial matrix scale according to the structured data to obtain the matrix scale includes: automatic matching and filling according to the pre-configured field mapping relationship; For unmatched items, recommended filling options are generated by combining user historical correction records for the user to choose from.

[0067] In this embodiment of the application, during the backfilling process, the electronic device can automatically match and fill based on the pre-configured field mapping relationship. Specifically, the administrator or business expert will pre-configure a mapping rule library of "inspection items - form fields" in the electronic device. This rule library defines the correspondence between common identification items and standard fields in the target matrix scale. When the structured data identified by the electronic device through OCR technology flows in, the electronic device will first attempt to perform precise string matching. If a match is successful, automatic filling is performed directly, filling the identified values ​​and units into the corresponding positions in the matrix scale. This process solves most common and standardized data backfilling problems and achieves basic automation.

[0068] However, the reality is complex and varied, with a large number of "unmatched items" that cannot be accurately matched. This may be due to OCR recognition errors, the use of non-standard abbreviations in the form, or new items that the electronic device has never encountered before. Based on this, the electronic device will initiate a complex similarity calculation and decision-making process.

[0069] Specifically, the electronic device will calculate the semantic similarity between the identified item and all target form fields, which is usually done through...Word vector models (such as Word2Vec and BERT) are used to implement this. Simultaneously, the electronic device urgently queries the user's historical correction record database, which records the user's modifications to the autofill results. For example, the electronic device discovers that the current user has manually corrected the system-filled "T4" to "thyroxine" three times. Therefore, when encountering the identified "T4" again, even if the semantic similarity is not the highest, the electronic device will prioritize recommending "thyroxine" as the fill option due to strong historical evidence.

[0070] For unmatched items, the electronic device generates a recommended fill list for the user to choose from. This recommended fill list is not randomly generated but is the optimal candidate set calculated by a ranking model, taking into account multiple dimensions such as semantic similarity score, historical correction frequency, and global fill popularity. The recommended fill list is usually presented to the user in the form of a drop-down menu or pop-up, clearly showing several most likely options. The user can complete the fill with a simple click, and this selection is recorded in the historical correction database for optimizing future recommendations. The backfilling method provided in this application embodiment minimizes manual input operations by users while ensuring accuracy. Especially in long form scenarios such as medical and financial fields where data accuracy is extremely important, it significantly improves efficiency and reduces the risk of errors.

[0071] Embodiment 5: In order to improve rendering performance, enhance interactive experience, and realize intelligent data filling, based on the above embodiments, in this application embodiment, after generating the initial matrix scale according to the collected user behavior data, the method further includes: using a front-end rendering method based on HTML table optimization and event delegation mechanism to dynamically render the initial matrix scale; combining virtual scrolling technology to render only the matrix items within the visible area, and optimizing scrolling performance through requestAnimationFrame.

[0072] In this application embodiment, after the initial matrix scale is generated, its data structure is ready, but how to render and interact efficiently in the front-end browser is a key challenge. This application embodiment adopts a front-end rendering method based on HTML table optimization and event delegation mechanism. Traditional complex table rendering leads to an explosion in the number of DOM elements, becoming a performance bottleneck. This solution deeply optimizes the HTML table structure, for example, by reducing unnecessary nested tables, using `<script>`, `<algorithm>`, `` for semantic grouping, and employing independent positioning and rendering strategies for fixed headers and columns. More importantly, this embodiment uses an event delegation mechanism to optimize interaction logic. Its core idea is to bind the event listeners of numerous child elements (such as input boxes and buttons in each matrix cell) to their parent element (i.e., the container of the entire table). When an event is triggered, the appropriate action is taken by judging the property of the event source (event.target).The corresponding business logic. This method reduces the number of event listeners in memory from O(n) to O(1), greatly reducing memory usage, and for dynamically added or deleted matrix items, there is no need to rebind the event, and it takes effect automatically.

[0073] For matrix tables containing hundreds or even thousands of rows, even if the DOM structure and events are optimized, rendering all rows at once will still cause browser lag. Therefore, the embodiments of this application combine virtual scrolling technology. The principle of virtual scrolling is that not all matrix item data is rendered as real DOM elements, but only a small number of elements in the current visible area and its front and back buffers are rendered. A scrolling container (such as div) is created to wrap part of the entire table and set to a height high enough to simulate the scrollbar of the complete table. By listening to the scroll event of the container and using the browser native API request Animation Frame for throttling optimization, the electronic device can accurately calculate in real time which matrix rows should be displayed at the current scroll position. Request Animation Frame ensures that scroll-related calculations and DOM updates are synchronized with the browser's rendering cycle, avoiding unnecessary layout repaints and style calculations, thus providing a smooth scrolling experience like native applications. Through this dynamic rendering method, regardless of the amount of backend data, the number of real DOM elements existing simultaneously on the frontend remains at a very low and constant level, fundamentally solving the performance bottleneck.

[0074] In this embodiment, the use of virtual DOM technology to improve table performance is key to rendering only the table data within the visible area, thereby reducing unnecessary DOM operations and improving performance, especially when the data volume is large. Virtual DOM technology optimizes performance by simulating DOM updates, avoiding direct manipulation of the real DOM every time data is updated. The key to improving table performance using virtual DOM technology is rendering only the table data within the visible area, thereby reducing unnecessary DOM operations and improving performance, especially when the data volume is large. Virtual DOM technology optimizes performance by simulating DOM updates, avoiding direct manipulation of the real DOM with each data update. It creates a virtual container to store and render data, using a simple div to listen for the table container's scroll events. When the user scrolls the table, it calculates the current visible area position and dynamically loads and unloads table rows as needed. Scroll listening can be combined with request animation frames to optimize scrolling performance and reduce excessive DOM updates. During scrolling, only the data rows in the currently visible area are rendered, and the virtual DOM is updated according to the scroll position. Only DOM elements within the visible area are retained, while other elements are removed from the DOM to save performance.

[0075] In this embodiment of the application, the electronic device can combine the event proxy mechanism to optimize the interaction logic and reduce the overhead of DOM operation.

[0076] Event delegation is an optimization technique that utilizes the event bubbling mechanism. Its core idea is to delegate the event listening of child elements to the parent element for unified processing. By judging the event trigger source (event.target), the corresponding logic is executed, thereby avoiding binding event listeners to a large number of child elements individually.

[0077] Table 1 Specification 10 / 16 pages 13 CN 121433548 A

[0078] Table 1 is a comparison table of event delegation and traditional event binding provided in the embodiments of this application. As shown in Table 1, traditional event binding requires binding each child element individually and requires multiple listeners. When there are dynamic elements, it needs to be re-bound, which is simple to implement. The event delegation in the embodiments of this application is uniformly bound to the parent element, and a single listener can be used. When there are dynamic elements, it needs to take effect automatically. During the implementation process, the event source needs to be judged.

[0079] For example, traditional event binding can be implemented by the following procedure: / / Traditional method (binding each button individually) document.queryS electorAll('.btn').forE ach(btn => {btn.addEventListener('click', handleClick);}); The event delegation in this embodiment can be implemented through the following procedure: / / Event delegation method (only one listener is needed) document.getElementById('button-container').addEventListener('click', (event) => { if (event.target.classList.contains('btn')) { handleClick(event);}}).

[0080] Embodiment 6: In order to improve rendering performance, enhance interactive experience and realize intelligent data filling, based on the above embodiments, in this embodiment, the virtual scrolling technology includes: real-time calculation of the visible area and buffer range; dynamic loading and unloading of matrix item DOM elements; using CSS absolute positioning and transform to correct the scroll position.

[0081] In this embodiment, the implementation of virtual scrolling technology can be decomposed into three core steps: calculation, loading, and correction.

[0082] First, the visible area and buffer range are calculated in real time. During this process, the electronic device needs to maintain several key variables: the height of the scroll container (containerHeight), the vertical position of the current scroll bar (scrollTop), and the height of each matrix item row (itemHeight, which can be a fixed value or dynamically calculated). The starting row index of the current visible area can be calculated by scrollTop / itemHeight, and the number of rows that the visible area can accommodate can be calculated by containerHeight / itemHeight. In order to avoid blanking during fast scrolling, the system sets a buffer, for example, calculating the number of rows of one screen above and below the visible area. The range of this "rendering window" is [startIndex - buffer, endIndex + buffer]. All matrix items outside this window will be temporarily removed from the DOM tree or not rendered.

[0083] Secondly, the DOM elements of the matrix items are dynamically loaded and unloaded. During this process, the electronic device maintains an object pool to manage the creation, reuse, and destruction of the DOM elements of the matrix items. When scrolling occurs, after calculating the new "rendering window," the electronic device performs a difference comparison: identifying which rows newly entering the window need to be rendered and which rows have left the window and can be removed. For new rows that need to be rendered, the electronic device first obtains an idle DOM element from the object pool (if it exists) and then fills its content with the corresponding data items (such as cell text or input box values). If the object pool is empty, a new element is dynamically created. For rows leaving the window, the electronic device does not directly destroy its DOM element, but clears its content and puts it back into the object pool for later reuse. This pooling technique greatly reduces the pressure on the garbage collection mechanism and the performance overhead caused by frequent creation of DOM elements.

[0084] Finally, CSS absolute positioning and transform are used to correct the scroll position to maintain the real scrollbar behavior. Since the actual rendered DOM elements are only a small part of the total data, a "placeholder" element is needed to make the height of the scrollbar and the dragging feel consistent with the actual amount of data. Typically, electronic devices place an invisible element with a total height (totalHeight = totalItemsCount * itemHeight) inside a scrolling container, which expands the container's scrolling area. Then, all the actually rendered matrix item rows no longer follow the normal document flow, but are instead determined by the CSS `position:` property.The `absolute` property is used for absolute positioning, and the items are precisely positioned to their theoretical positions in the complete document flow using the `transform: translateY(itemHeight * startIndex)` property. Thus, when the user scrolls, although the actual rendered DOM is constantly changing, the scrollbar's behavior is visually and interactively identical to when all data is rendered. The user is unaware of the complex calculations behind it and only experiences extremely smooth performance. This set of technical solutions works together to ensure that even in long form scenarios such as medical questionnaires, users can obtain a native application-like operating experience when faced with massive matrix data.

[0085] In the embodiments of this application, the architecture of the electronic device may include, but is not limited to: a data layer, an AI service layer, and an application layer. The data layer includes, but is not limited to, a historical filling database and a user behavior log library; the AI ​​service layer includes, but is not limited to, OCR recognition services and a data mapping engine; the application layer includes, but is not limited to, a front-end interactive interface and a manual correction interface.

[0086] The electronic device provides an intelligent correction mechanism that continuously optimizes the filling strategy based on the user's correction history. When a user makes corrections: the fill values ​​are automatically adjusted for other similar fields in the current session; for example, when a user changes the unit of "white blood cell count", the new unit is automatically synchronized for subsequent related test items; the user's recent correction clusters are analyzed to discover potential filling patterns; personalized field mapping rules are established, for example, it is found that the user always changes "T4" to "thyroxine".

[0087] In the embodiments of this application, the design of the matrix component in the group's internal questionnaire system is flexible and highly customized. By combining with AI technology, users can customize matrix items and their configurations according to specific needs, and the system can automatically adapt to the complexity of the questionnaire, providing a personalized filling experience. The matrix component supports multiple input types, including text boxes, drop-down boxes, selection boxes, etc. Users can flexibly configure each option according to actual needs, thereby efficiently completing the design and presentation of the questionnaire. Based on HTML table, high-performance matrix scale rendering optimization is used. For particularly complex or lengthy forms, AI technology can automatically parse the content according to the context and questionnaire structure, helping users avoid the trouble of lengthy filling. The system will be modularly designed according to the content of the questionnaire and the user's historical operations to ensure that the expansion and updates of subsequent functions will not affect the overall stability and security of the system. The integration of the AI ​​auto-fill function with the questionnaire management system is loosely coupled, allowing for flexible function upgrades or replacements without affecting other functions, and supporting future changes in technical requirements and business scenario expansion.

[0088] This application embodiment also incorporates a dynamic data loading optimization strategy based on virtual scrolling. The core implementation principle of virtual scrolling is as follows: virtual scrolling technology dynamically calculates the form elements that need to be rendered within the visible area, significantly reducing DOM elements.Point count; Viewport calculation: Real-time monitoring of the height and scroll position of the scroll container; Dynamic rendering range: Only renders form fields in the currently visible area and the buffers before and after (e.g., renders two more screens of content above and below the viewport); Position correction: Maintains the realism of scrollbar behavior through absolute positioning and transform.

[0089] The dynamic data loading strategy of this application embodiment includes a segmented loading mechanism, which logically divides a long form into multiple chapters (Chunks). A typical implementation method is a form structure tree: - Basic information block (loaded immediately) - Education experience block (loaded when scrolling to 60%) - Work experience block (loaded when scrolling to 80%) - Attachment upload block (loaded when the user clicks a tab); The intelligent preloading strategy of this application embodiment includes: based on scrolling speed prediction, when fast scrolling is detected, the subsequent 2-3 blocks are preloaded; based on user behavior, a priority loading level is established for frequently accessed blocks (e.g., 90% of users will edit "Work Experience"); and based on device performance: low-end devices reduce the number of preloaded blocks, and high-end devices increase pre-caching; The hybrid optimization scheme of this application embodiment includes: collaborative processing of scrolling and loading; initial rendering: only load the first screen data (about 15-20 fields); progressive enhancement: slow scrolling: load the currently visible blocks on demand; fast scrolling: load the target area and two adjacent blocks; background preloading: preload blocks that may be accessed later when idle; The performance guarantee measures of this application embodiment include: memory management: unloading blocks that are far from the view window (retaining the DOM but clearing the data); error boundary: displaying a placeholder and automatically retrying when loading fails.

[0090] The following is an example of a practical application: optimization effect of medical questionnaire scenario: this solution achieves a native-level smooth experience for long form applications by combining virtual scrolling and intelligent loading strategies.

[0091] Embodiment 7: Based on the above embodiments, this application embodiment also provides a matrix scale dynamic interaction and automatic backfilling device. Figure 2 is a schematic diagram of a matrix scale dynamic interaction and automatic backfilling device provided in an embodiment of this application. The device includes: a processing module 201, used to generate an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; and to process the form image to be filled to obtain structured data; and a backfilling module 202, used to intelligently backfill the initial matrix scale based on the structured data and using an AI algorithm combined with user historical behavior data to obtain the matrix scale.

[0092] In one possible implementation, the user behavior data collection includes operation path data and statistical data collected in real time through a front-end event listener; the operation path data includes at least one of clicking, selecting, and submitting;The statistical data includes at least one of configuration item changes and matrix item selection frequency.

[0093] In one possible implementation, the processing module 201 is specifically used to perform image preprocessing on the form image, including denoising, contrast enhancement and tilt correction; to use edge detection and template matching algorithms to locate key areas of the intermediate form matrix; and to use a character recognition model based on a convolutional neural network to output structured data containing coordinates and content.

[0094] In one possible implementation, the character recognition model adopts the ResNet-34 architecture, and the structured data is in JSON format.

[0095] In one possible implementation, the backfilling module 202 is specifically used to automatically match and fill according to the pre-configured field mapping relationship; for unmatched items, recommended filling options are generated based on the user's historical correction records for the user to choose from.

[0096] In one possible implementation, the processing module 201 is also used to dynamically render the initial matrix scale using a front-end rendering method based on HTML table optimization and event proxy mechanism; combined with virtual scrolling technology, only the matrix items within the visible area are rendered, and scrolling performance is optimized through requestAnimationFrame.

[0097] In one possible implementation, the virtual scrolling technology includes: real-time calculation of the visible area and buffer range; dynamic loading and unloading of matrix item DOM elements; and using CSS absolute positioning and transform to correct the scroll position.

[0098] Example 8: Based on the above examples, this application also provides an electronic device. Figure 3 is a schematic diagram of the structure of an electronic device provided in this application. As shown in Figure 3, it includes: a processor 301, a communication interface 302, a memory 303, and a communication bus 304. The processor 301, the communication interface 302, and the memory 303 communicate with each other through the communication bus 304. The memory 303 stores a computer program. When the program is executed by the processor 301, the processor 301 performs the following steps: Generate an initial matrix scale based on the collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; Process the form image to be filled to obtain structured data; Based on the structured data, use an AI algorithm combined with user historical behavior data to perform intelligent backfilling in the initial matrix scale to obtain the matrix scale.

[0099] In one possible implementation, the user behavior data collection includes operation path data and statistical data collected in real time through a front-end event listener; the operation path data includes at least one of click, selection, and submission;The statistical data includes at least one of configuration item changes and matrix item selection frequency.

[0100] In one possible implementation, processing the form image to be filled to obtain structured data includes: preprocessing the form image, including denoising, contrast enhancement, and tilt correction; using edge detection and template matching algorithms to locate key regions in the intermediate form matrix; and using a character recognition model based on a convolutional neural network to output structured data containing coordinates and content.

[0101] In one possible implementation, the character recognition model adopts the ResNet-34 architecture, and the structured data is in JSON format.

[0102] In one possible implementation, intelligent backfilling of the initial matrix scale based on the structured data using AI algorithms combined with user historical behavior data to obtain the matrix scale includes: automatic matching and filling based on pre-configured field mapping relationships; and generating recommended filling options for users to choose from by combining user historical correction records for unmatched items.

[0103] In one possible implementation, after generating the initial matrix scale based on the collected user behavior data, the method further includes: dynamically rendering the initial matrix scale using a front-end rendering method based on HTML table optimization and event proxy mechanism; combining virtual scrolling technology to render only the matrix items within the visible area, and optimizing scrolling performance through requestAnimationFrame.

[0104] In one possible implementation, the virtual scrolling technology includes: real-time calculation of the visible area and buffer range; dynamic loading and unloading of matrix item DOM elements; and using CSS absolute positioning and transform to correct the scrolling position.

[0105] Since the principle of the above electronic device in solving the problem is similar to the dynamic interaction and automatic backfilling method of the matrix scale, the implementation of the above electronic device can refer to the embodiments of the method, and the repeated parts will not be described again.

[0106] The communication bus mentioned in the above electronic device can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used in the figure, but this does not indicate that there is only one bus or one type of bus. Communication interface 302 is used for communication between the aforementioned electronic device and other devices. The memory may include random access memory (RAM) or non-volatile memory (NVM), for example, at least...A disk storage device. Optionally, the storage device may also be at least one storage device located remotely from the aforementioned processor.

[0107] The aforementioned processor may be a general-purpose processor, including a central processing unit, a network processor (NP), etc.; it may also be a digital signal processing (DSP), a dedicated integrated circuit, a field-programmable gate array or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component, etc.

[0108] Example 9: Based on the above embodiments, this embodiment of the invention also provides a computer-readable storage medium storing a computer program executable by a processor. When the program runs on the processor, the processor executes the following steps: Generate an initial matrix scale based on collected user behavior data, wherein the user behavior data is used to indicate the matrix scale format of the initial matrix scale; Process the form image to be filled to obtain structured data; Based on the structured data, use an AI algorithm combined with user historical behavior data to intelligently backfill the initial matrix scale to obtain the matrix scale.

[0109] In one possible implementation, the user behavior data collection includes operation path data and statistical data collected in real time through a front-end event listener; The operation path data includes at least one of clicking, selecting, and submitting; The statistical data includes at least one of configuration item changes and matrix item selection frequency.

[0110] In one possible implementation, processing the form image to be filled in to obtain structured data includes: preprocessing the form image, including denoising, contrast enhancement, and tilt correction; using edge detection and template matching algorithms to locate key regions in the intermediate form matrix; and using a character recognition model based on a convolutional neural network to output structured data containing coordinates and content.

[0111] In one possible implementation, the character recognition model adopts the ResNet-34 architecture, and the structured data is in JSON format.

[0112] In one possible implementation, intelligent backfilling of the initial matrix scale based on the structured data using AI algorithms combined with user historical behavior data to obtain the matrix scale includes: automatic matching and filling based on pre-configured field mapping relationships; for unmatched items, generating recommended filling options for users to choose from based on user historical correction records.

[0113] In one possible implementation, after generating the initial matrix scale based on the collected user behavior data, the method further includes: using a front-end rendering method based on HTML table optimization and event proxy mechanism to process the initial matrix scale.Dynamic rendering; combined with virtual scrolling technology, only matrix items within the visible area are rendered, and scrolling performance is optimized through requestAnimationFrame.

[0114] In one possible implementation, the virtual scrolling technology includes: real-time calculation of the visible area and buffer range; dynamic loading and unloading of matrix item DOM elements; and using CSS absolute positioning and transform to correct the scrolling position.

[0115] Since the principle of the problem solved by the above-mentioned computer-readable storage medium is similar to the matrix scale dynamic interaction and automatic backfilling method, the implementation of the above-mentioned computer-readable storage medium can refer to the embodiments of the method, and the repeated parts will not be described again.

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

[0117] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in one or more flowchart illustrations and / or one or more block diagrams.

[0118] These computer program instructions may also be stored in a computer-readable storage medium capable of directing a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means that implement the functions specified in one or more flowchart illustrations and / or one or more block diagrams.

[0119] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, such that the instructions, which execute on the computer or other programmable apparatus, provide steps for implementing the functions specified in one or more flowcharts and / or one or more block diagrams.

[0120] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations. Instruction Manual 16 / 16 Page 19 CN 121433548 A Figure 1 Figure 2 Instruction Drawing 1 / 2 Page 20 CN 121433548 A Figure 3 Instruction Drawing 2 / 2 Page 21 CN 121433548 A {HARTEND-26016-HKSPT / 02503876v1} Abstract This application relates to the field of front-end development technology, particularly relates to a dynamic interaction and automatic backfilling method, device, equipment and medium for matrix scales. In the embodiments of this application, an electronic equipment generates an initial matrix scale based on collected user behavior data, where the user behavior data is used to indicate the matrix scale format of the initial matrix scale. apply deeplyintegrate high- performance front-end rendering, flexible dynamic interaction and intelligent AI backfilling, solving problems such as performance bottlenecks, insufficient interaction experience, weak data automatic filling capabilities and poor data scalability in the process of matrix scale visualization, and improving the data visualization and intelligence capabilities of front-end applications.

Claims

1. A method for dynamic interaction and automatic backfilling of a matrix scale, characterized in that, The method comprises: generating an initial matrix form according to collected user behavior data, wherein the user behavior data is used to indicate the matrix form format of the initial matrix form; processing a to-be-filled form image to obtain structured data; performing intelligent backfilling in the initial matrix form according to the structured data by using an AI algorithm combined with user historical behavior data, to obtain a matrix form.

2. The method of claim 1, wherein, The user behavior data collection comprises operation path data collected in real time through a front-end event listener and statistical data; The operation path data comprises at least one of clicking, selecting and submitting; The statistical data comprises at least one of configuration item changes and matrix item selection frequencies.

3. The method of claim 1, wherein, The processing of the to-be-filled form image to obtain structured data comprises: performing image preprocessing on the form image, including denoising, contrast enhancement and tilt correction; performing key region positioning on the intermediate form matrix by using an edge detection and template matching algorithm; outputting structured data containing coordinates and content by using a character recognition model based on a convolutional neural network.

4. The method of claim 3, wherein, The character recognition model adopts a ResNet-34 architecture, and the structured data is in JSON format.

5. The method of claim 1, wherein, The intelligent backfilling in the initial matrix form according to the structured data by using an AI algorithm combined with user historical behavior data comprises: automatically matching and filling according to a preconfigured field mapping relationship; for unmatched items, generating recommended filling options for user selection in combination with user historical correction records.

6. The method of claim 1, wherein, After the initial matrix form is generated according to the collected user behavior data, the method further comprises: performing dynamic rendering on the initial matrix form by using a front-end rendering mode based on HTML table optimization and event proxy mechanism; combining a virtual scrolling technology to render only the matrix items in the visible area, and optimizing scrolling performance by using requestAnimationFrame.

7. The method of claim 6, wherein, The virtual scrolling technology comprises: real-time calculation of the visible area and the buffer range; dynamic loading and unloading of matrix item DOM elements; using CSS absolute positioning and transform correction to correct the scrolling position.

8. A device for dynamic interaction and automatic backfilling of a matrix scale, characterized in that, The device comprises: a processing module configured to generate an initial matrix form according to collected user behavior data, wherein the user behavior data is used to indicate the matrix form format of the initial matrix form, and to process a to-be-filled form image to obtain structured data; a backfilling module configured to perform intelligent backfilling in the initial matrix form according to the structured data by using an AI algorithm combined with user historical behavior data, to obtain a matrix form.

9. An electronic device, comprising: The electronic device comprises a processor configured to implement the steps of the matrix form dynamic interaction and automatic backfilling method according to any one of claims 1-7 when executing a computer program stored in a memory.

10. A computer-readable storage medium, characterized in that, The electronic device has a computer program stored therein, and the computer program is configured to implement the steps of the matrix form dynamic interaction and automatic backfilling method according to any one of claims 1-7 when executed by a processor.

Images