Micro-front-end real-time visual automatic rendering method and system

Abstract

The invention relates to the technical field of data processing, and discloses a micro-front-end real-time visualization automatic rendering method and system, and the method comprises the steps: obtaining a data stream, carrying out the windowing processing, abnormal value elimination and feature extraction of the data stream, and generating a standardized data block; sending the standardized data block into a containerized model service for reasoning to obtain a reasoning result; determining a target visual component based on the reasoning result; packaging the meta-information of the target visual component into a standardized instruction, and pushing the standardized instruction to a front end for rendering to obtain a first rendering result; and capturing an interaction event of a user on the target visual component, and refreshing the first rendering result based on the interaction event to obtain a second rendering result. According to the method, the problems that a traditional scheme has the defects of poor expansibility, lack of automation capability and lack of a component hot plug mechanism, so that components cannot be matched according to data characteristics or model types, and different visual components cannot be flexibly replaced or updated are solved.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and particularly to a method and system for real-time visualization and automatic rendering of micro front-ends. Background Art

[0002] With the rapid development of industrial Internet of Things, intelligent manufacturing, and real-time data processing technologies, various business scenarios have put forward higher requirements for the real-time performance, flexibility, and scalability of data visualization. In the fields of industrial production monitoring, intelligent decision-making support, real-time data analysis, etc., parallel operation of multiple models has become the norm. By using multiple models such as machine learning models and statistical analysis models to process massive streaming data in real time, diversified conclusions such as prediction results, anomaly warnings, and trend analysis can be output. These conclusions need to be presented in an intuitive way through visualization components to help users quickly understand the data rules and make decisions. However, when dealing with the scenario of multi-model integration, existing data visualization platforms gradually expose the problem of insufficient adaptability.

[0003] Traditional visualization platforms mostly adopt a static configuration mode, and their core logic is to manually write visualization components, bind data sources, and configure display rules by front-end engineers. For example, general BI tools require users to pre-define chart types and manually associate database fields or API interfaces to achieve data display. This mode can meet the basic needs in a single model and fixed scenario, but there are significant limitations in the scenario of dynamic switching of multiple models and high-frequency data stream updates: on the one hand, when a new model type is added, front-end developers need to re-write the component code adapted to this model and adjust the data interface and rendering logic, resulting in a long system expansion cycle and high maintenance costs; on the other hand, the data structures output by different models are different (such as time series data, matrix data, classification data, etc.), and statically configured components are difficult to adaptively match data characteristics, often resulting in poor display effects or information loss. In addition, the demand for linked analysis of multi-model results is becoming increasingly prominent. For example, an anomaly warning output by a certain model needs to trigger in-depth analysis of other models and dynamically update the display content through associated components, but existing platforms lack a unified event interaction mechanism, and the coupling degree between components is high, making it difficult to achieve flexible linked responses.

[0004] These shortcomings further hinder the intelligent development of visualization systems. First, poor scalability is a core pain point: due to the strong binding between components and model types, each new model or updated model output format requires systematic modifications to the front-end code, failing to meet the needs of rapidly iterating business scenarios. Second, a lack of automation capabilities: the platform cannot automatically select the optimal visualization components based on model type or data characteristics, relying on manual experience for configuration, which is not only inefficient but may also lead to data interpretation errors due to improper configuration. Third, insufficient component reuse and hot-swappable mechanisms: different visualization components are usually developed based on fixed frameworks, making it difficult to replace or update them without restarting the system, limiting the system's flexible upgrade capabilities. Finally, weak multi-component collaboration capabilities: the lack of a unified event bus and interaction specifications means that data transfer and state synchronization between components require customized development, making it impossible to achieve linked display and dynamic feedback of multi-model results, and difficult to support decision analysis in complex scenarios.

[0005] Therefore, how to build a visualization architecture that supports multi-model integration and enables automatic component matching, dynamic rendering, and flexible linkage has become an urgent problem to be solved. Summary of the Invention

[0006] In view of this, the present invention provides a micro-frontend real-time visualization automatic rendering method and system to solve the problems of poor scalability, lack of automation capabilities and lack of hot-swappable component mechanism in traditional solutions, which makes it impossible to match components according to data characteristics or model type, and different visualization components cannot be flexibly replaced or updated.

[0007] In a first aspect, the present invention provides a micro-frontend real-time visualization automatic rendering method, the method comprising: acquiring a data stream; performing windowing processing, outlier removal, and feature extraction on the data stream to generate standardized data blocks; sending the standardized data blocks into a containerized model service for inference to obtain an inference result; determining a target visualization component based on the inference result; encapsulating the meta-information of the target visualization component into standardized instructions and pushing them to the front end for rendering to obtain a first rendering result; capturing user interaction events on the target visualization component and refreshing the first rendering result based on the interaction events to obtain a second rendering result.

[0008] The real-time visualization automatic rendering method for micro frontends provided in this embodiment first generates standardized data blocks by obtaining data streams and performing windowing processing, outlier removal, and feature extraction. It can achieve the orderly cutting and integration of high-frequency real-time data streams by means of the windowing mechanism of the stream processing framework, ensure data quality through outlier removal methods such as Z-Score and 3σ method, and then clarify the core attributes such as the number of fields and distribution characteristics of the data through feature extraction, providing a unified and standardized input basis for subsequent model inference, avoiding inference deviations caused by chaotic data formats or noise interference, and improving the reliability of the entire process from the source; then, by sending the standardized data blocks into the containerized model service for inference to obtain inference results, the flexible expansion and efficient resource scheduling of the model service are realized by using the containerized deployment method. Combined with the high-efficiency data transmission ability, it ensures that real-time data can be quickly inferred and output results containing key information such as model type, feature fields, and structured results, solving the problems of poor scalability and low inference efficiency in traditional model deployment, and providing an accurate model output basis for subsequent component matching; then, by determining the target visualization component based on the inference result, and relying on the standardized management of component meta-information by the component registration center, the direct matching of model type and component is achieved. At the same time, for the case without a model type, vectors are generated through data feature extraction and the fitness is calculated in combination with the decision tree algorithm to intelligently recommend the optimal component, overcoming the limitations of relying on manual component configuration in the prior art and improving the automation and accuracy of component matching; furthermore, by encapsulating the meta-information of the target visualization component into a standardized instruction and pushing it to the front-end for rendering to obtain the first rendering result, the meta-information is encapsulated in JSON format and transmitted after GZIP compression. Combined with the real-time push ability of the protocol and the micro front-end architecture, the dynamic loading and data binding of components are realized, achieving a high degree of decoupling between the front and back ends, solving the problems of difficult hot plugging of traditional front-end components and high update and maintenance costs, and ensuring that the rendering process is efficient and flexible; finally, by capturing user interaction events and refreshing the rendering result to obtain the second rendering result, the user operations are encapsulated as JSON events and broadcast through the event bus, triggering the refresh or secondary inference of associated components, realizing the联动交互 and dynamic feedback of multiple components, breaking the isolated state between components, and improving the interactivity and practicality of the visualization system, meeting the user's real-time analysis and decision-making needs in complex scenarios. The present invention solves the defects of the traditional solution, such as poor scalability, lack of automation ability, and lack of component hot plugging mechanism, so that components cannot be matched according to data characteristics or model types, and different visualization components cannot be flexibly replaced or updated.

[0009] In one optional implementation, the process of acquiring a data stream, performing windowing processing, outlier removal, and feature extraction on the data stream to generate standardized data blocks includes: acquiring a real-time data stream using at least one protocol among Kafka, MQTT, and WebSocket; performing windowing processing on the data stream using a stream processing framework; removing outliers from the data stream using at least one algorithm among Z-Score and 3σ methods; performing feature extraction on the windowed and outlier-removed data stream, the feature extraction including: field quantity extraction, data distribution feature extraction, and matrix shape extraction; and integrating the feature processing results to generate standardized data blocks.

[0010] In one optional implementation, the process of sending the standardized data block into a containerized model service for inference to obtain an inference result includes: determining the backend framework of the model service and receiving the standardized data block; deploying the model service in a Docker container and orchestrating it using Kubernetes; performing inference calculations on the standardized data block using the containerized model service to generate an inference result containing model type, feature fields, structured results, and timestamps; and writing the inference result back to the corresponding output Topic according to the topic-model mapping table maintained in the database.

[0011] In one alternative implementation, the inference result is supported for front-end subscription via the WebSocket protocol.

[0012] In one optional implementation, when the inference result contains a model type, the above-mentioned determination of the target visualization component based on the inference result includes: extracting the model type parameter from the inference result; querying the component registry center for components whose "supported model types" match the model type of the above-mentioned model type parameter; determining the queried component as the target visualization component; if there are multiple matching components, selecting the optimal component as the target visualization component based on the component version number and the priority of the default rendering parameters.

[0013] In one optional implementation, the component registry center uses at least one of MySQL and Redis to store the metadata of the target visualization component. The metadata includes the component's unique identifier, component name, function description, version number, remote entry address, supported model types, and default rendering parameters.

[0014] In an optional implementation, when the inference result does not include a model type, the determination of the target visualization component based on the inference result includes: extracting features from the structured data of the inference result, including field statistics, data distribution analysis and data shape judgment, and integrating the extracted features into a feature vector; inputting the feature vector into a pre-trained decision tree algorithm; calculating the fit score of each component through the decision tree algorithm; and selecting the component with the highest score as the target visualization component.

[0015] In one optional implementation, the above-mentioned encapsulation of the metadata of the target visualization component into standardized instructions and pushes them to the front end for rendering to obtain a first rendering result includes: encapsulating the metadata of the target visualization component into standardized instructions in JSON format; compressing the standardized instructions using the GZIP algorithm; pushing the compressed standardized instructions to the front end via at least one of the WebSocket and SSE protocols; receiving the standardized instructions using the front-end event bus and broadcasting them to each visualization component; dynamically loading the corresponding micro-front-end sub-application component according to the instructions using the front-end rendering engine, and binding the data to the micro-front-end sub-application component to complete the rendering to obtain the first rendering result.

[0016] In one optional implementation, the process of capturing user interaction events on the target visualization component and refreshing the first rendering result based on the interaction events to obtain the second rendering result includes: capturing user interaction operations on the target visualization component; encapsulating the interaction operations into JSON format event messages; broadcasting the event messages to each visualization component via an event bus; and refreshing the first rendering result based on the interaction events to obtain the second rendering result.

[0017] Secondly, the present invention provides a micro-frontend real-time visualization automatic rendering system, the system comprising: a data acquisition module for acquiring a data stream, performing windowing processing, outlier removal, and feature extraction on the data stream to generate standardized data blocks; an inference module for sending the standardized data blocks into a containerized model service for inference to obtain an inference result; a determination module for determining a target visualization component based on the inference result; a rendering module for encapsulating the metadata of the target visualization component into standardized instructions, pushing them to the front end for rendering to obtain a first rendering result; and an update module for capturing user interaction events on the target visualization component, refreshing the first rendering result based on the interaction events, and obtaining a second rendering result. Attached Figure Description

[0018] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0019] Figure 1 This is a flowchart illustrating the real-time visualization and automatic rendering method for micro-frontends according to an embodiment of the present invention.

[0020] Figure 2 This is a diagram of the real-time data visualization processing and interaction architecture according to an embodiment of the present invention;

[0021] Figure 3 This is a structural block diagram of a micro-frontend real-time visualization automatic rendering system according to an embodiment of the present invention. Detailed Implementation

[0022] With the rapid development of the Industrial Internet of Things (IIoT), intelligent manufacturing, and real-time data processing technologies, various business scenarios are placing higher demands on the real-time performance, flexibility, and scalability of data visualization. In fields such as industrial production monitoring, intelligent decision support, and real-time data analysis, parallel computation of multiple models has become the norm. Real-time processing of massive streaming data using various models, such as machine learning models and statistical analysis models, can output diverse conclusions, including predictions, anomaly warnings, and trend analysis. These conclusions need to be presented intuitively through visualization components to help users quickly understand data patterns and make informed decisions. However, existing data visualization platforms are increasingly revealing their insufficient adaptability when dealing with multi-model integration scenarios.

[0023] Traditional visualization platforms mostly adopt a static configuration mode. The core logic is that front-end engineers manually write visualization components, bind data sources, and configure display rules. For example, general BI tools require users to pre-define chart types and manually associate database fields or API interfaces to achieve data display. This mode can meet basic requirements in a single model and fixed scenario, but there are significant limitations in scenarios of multi-model dynamic switching and high-frequency data stream updates: on the one hand, when a new model type is added, front-end developers need to rewrite the component code adapted to this model and adjust the data interface and rendering logic, resulting in a long system expansion cycle and high maintenance costs; on the other hand, there are differences in the data structures output by different models (such as time series data, matrix data, categorical data, etc.), and statically configured components are difficult to adaptively match data characteristics, often resulting in poor display effects or information loss. In addition, the need for linked analysis of multi-model results is becoming increasingly prominent. For example, an anomaly warning output by a certain model needs to trigger in-depth analysis of other models and dynamically update the display content through associated components, but existing platforms lack a unified event interaction mechanism, and the coupling degree between components is high, making it difficult to achieve flexible linked responses.

[0024] The above defects further restrict the intelligent development of the visualization system. First, poor scalability is the core pain point: due to the strong binding between components and model types, every time a new model is added or the model output format is updated, systematic modification of the front-end code is required, which cannot meet the rapidly iterative business requirements. Second, the lack of automation ability: the platform cannot automatically select the optimal visualization components according to the model type or data characteristics, relying on manual experience configuration, which is not only inefficient but may also lead to data interpretation deviations due to improper configuration. Third, the lack of component reuse and hot pluggable mechanisms: different visualization components are usually developed based on fixed frameworks and are difficult to replace or update without restarting the system, restricting the flexible upgrade of the system. Finally, the weak multi-component collaboration ability: lacking a unified event bus and interaction specifications, data transfer and status synchronization between components require customized development, and it is impossible to achieve linked display and dynamic feedback of multi-model results, making it difficult to support decision-making analysis in complex scenarios.

[0025] Therefore, how to build a visualization architecture that supports multi-model integration, realizes automatic matching, dynamic rendering, and flexible linkage of components has become an urgent problem to be solved.

[0026] The real-time visual automatic rendering method for micro frontends provided in this embodiment first generates standardized data blocks by obtaining data streams and performing windowing, outlier removal, and feature extraction. It can achieve the orderly cutting and integration of high-frequency real-time data streams with the help of the windowing mechanism of the stream processing framework, ensure data quality through outlier removal methods such as Z-Score and 3σ method, and then clarify the core attributes such as the number of fields and distribution characteristics of the data through feature extraction, providing a unified and standardized input basis for subsequent model inference, avoiding inference deviations caused by chaotic data formats or noise interference, and improving the reliability of the entire process from the source; then, the standardized data blocks are sent to the containerized model service for inference to obtain inference results. The containerized deployment method is used to achieve flexible expansion and efficient resource scheduling of the model service. Combined with the high-efficiency data transmission ability, it ensures that real-time data can be quickly inferred and the results containing key information such as model type, feature fields, and structured results are output, solving the problems of poor scalability and low inference efficiency in traditional model deployment, and providing an accurate model output basis for subsequent component matching; then, the target visualization component is determined based on the inference result. With the help of the standardized management of component meta-information by the component registry, the direct matching of model type and component is achieved. At the same time, in the case of no model type, vectors are generated through data feature extraction and combined with the decision tree algorithm to calculate the fitness, and the optimal component is intelligently recommended, overcoming the limitations of relying on manual component configuration in the prior art and improving the automation and accuracy of component matching; furthermore, the meta-information of the target visualization component is encapsulated into a standardized instruction and pushed to the front-end for rendering to obtain the first rendering result. The meta-information is encapsulated in JSON format and transmitted after GZIP compression. Combined with the real-time push ability of the protocol and the micro front-end architecture, the dynamic loading and data binding of components are achieved, realizing the high decoupling of the front and back ends, solving the problems of difficult hot plugging and high update and maintenance costs of traditional front-end components, and ensuring that the rendering process is efficient and flexible; finally, the user interaction event is captured and the rendering result is refreshed to obtain the second rendering result. With the help of the event bus, the user operation is encapsulated into a JSON event broadcast, triggering the refresh or secondary inference of the associated components, realizing the linkage interaction and dynamic feedback of multiple components, breaking the isolated state between components, and improving the interactivity and practicality of the visualization system, meeting the user's real-time analysis and decision-making needs in complex scenarios. The present invention solves the defects of the traditional solution, such as poor scalability, lack of automation ability, and lack of component hot plugging mechanism, so that components cannot be matched according to data characteristics or model types, and different visualization components cannot be flexibly replaced or updated.

[0027] In this embodiment, a real-time visual automatic rendering method for micro frontends is provided. Figure 1 It is a flowchart of the real-time visual automatic rendering method for micro frontends according to an embodiment of the present invention, as Figure 1 shown. The process includes the following steps:

[0028] Step S1: Obtain the data stream, perform windowing processing, outlier removal, and feature extraction on the data stream to generate standardized data blocks.

[0029] Specifically, step S1 above includes:

[0030] Step a1: Obtain the real-time data stream using at least one of the protocols Kafka, MQTT, and WebSocket.

[0031] Furthermore, in data-driven visualization, stable access to real-time data streams is a fundamental and crucial element. By being compatible with multiple protocols such as Kafka, MQTT, and WebSocket, flexible data acquisition channels can be built. Kafka, with its high throughput and persistent storage features, is suitable for scenarios with massive inflows of mixed offline and online data, efficiently aggregating historical and real-time generated data in industrial big data, log analysis, and other businesses. MQTT, with its lightweight publish-subscribe model, has significant advantages in data transmission from IoT devices, meeting the real-time data reporting needs under low bandwidth and unstable networks. WebSocket, based on full-duplex communication, ensures real-time interaction between the front-end and back-end, and between model inference services. Scenarios such as dynamic refresh of visualization dashboards and user interaction feedback rely on it to achieve millisecond-level data push. This multi-protocol integration can cover diverse business scenarios, ensuring stable and efficient acquisition of data regardless of whether it comes from large-scale server clusters, distributed IoT terminals, or front-end interaction feedback.

[0032] Step a2: Window the above data stream using a stream processing framework.

[0033] Furthermore, window types and parameters can be flexibly set based on business needs for data timeliness and relevance. A tumbling window segments the data stream by fixed time intervals or data volumes; for example, in an industrial production line, equipment operating parameters are statistically analyzed every 5 minutes, clearly dividing data into different time periods for easier analysis of short-term production fluctuations. A sliding window allows window overlap, enabling simultaneous analysis of data from the current second and the last 10 seconds in network traffic anomaly detection, capturing sudden traffic trends. A session window focuses on user interaction, accurately aggregating continuous operation data from a single user session in the operational behavior analysis of a visualization platform. Through windowing, the unbounded data stream is transformed into manageable "data segments," providing clear targets for subsequent outlier removal, feature extraction, and other operations, ensuring the orderliness and targeted nature of data processing.

[0034] Step a3: Use at least one algorithm, either Z-Score or 3σ, to remove outliers from the data stream.

[0035] Furthermore, algorithms such as Z-Score and 3σ are employed to construct a data "health defense line." Z-Score identifies data points deviating from the overall distribution by calculating the standard deviation of data from the mean, quickly marking abnormal transaction amounts in financial transaction data monitoring. 3σ utilizes the characteristics of normal distribution to filter out extremely low-probability extreme values, eliminating abnormal readings caused by equipment malfunctions or electromagnetic interference in industrial sensor data verification. These two algorithms can be flexibly selected or combined to adapt to the data characteristics of different businesses. For example, 3σ is efficient and accurate for production process parameters with a clear normal distribution; Z-Score is more adaptable to complex user behavior data. Outlier removal ensures that data entering subsequent processes accurately reflects the business status, laying the foundation for precise visualization.

[0036] Step a4 involves extracting features from the data stream after windowing and outlier processing. These features include: field quantity extraction, data distribution feature extraction, and matrix shape extraction.

[0037] Furthermore, after windowing and outlier handling, in-depth feature mining is conducted on the data stream. Field quantity extraction clearly outlines the data dimensions and clarifies the information categories contained in the data, such as operation type, timestamp, and device ID in user behavior data, providing a foundation for matching visualization components. Data distribution feature extraction analyzes the inherent patterns of the data, identifying whether it is a uniform, skewed, or clustered distribution. For example, the periodic distribution characteristics of product sales data determine the appropriate visualization format, such as line charts or bar charts. Matrix shape extraction focuses on the data structure, clarifying the row and column relationships, providing structural support for the adaptation of components such as heatmaps and scatter plots in matrix data processing for image recognition and industrial quality inspection. Through multi-dimensional feature extraction, the inherent attributes of the data are comprehensively analyzed, making the data "structured" and facilitating subsequent standardized integration and accurate adaptation to visualization components.

[0038] Step a5: Integrate the feature processing results to generate standardized data blocks.

[0039] Further, after completing windowing, outlier removal, and feature extraction, the process moves to the generation stage of standardized data blocks. Windowing cuts the unbounded real-time data stream into ordered "data segments," outlier removal ensures the data is free from noise interference, and feature extraction uncovers the data's inherent attributes. At this point, integrating these processing results requires adherence to unified data specifications and format requirements. For example, this involves setting naming rules for data fields, data type conversion standards, and data storage structure templates. Through this integration process, the multi-stage data stream is transformed into standardized data blocks with clear structure, well-defined attributes, and a unified format. These data blocks not only contain the core information of the original data but also include metadata such as data features and processing identifiers. This provides "ready-to-use" input for subsequent model inference services, allowing the model to focus directly on inference operations without needing to handle data format adaptation issues, thus improving the data flow efficiency and collaboration of the entire visualization system from the data source.

[0040] Step S2: Send the above standardized data blocks into the containerized model service for inference to obtain the inference result.

[0041] Specifically, step S2 above includes:

[0042] Step b1: Determine the backend framework of the model service and receive standardized data blocks.

[0043] Furthermore, in the data processing workflow, the efficient operation of the model service begins with the construction of the backend framework and data access. Based on the business scenario and model characteristics, a suitable backend framework is selected. For example, FastAPI, with its lightweight, efficient, and asynchronous support, is suitable for low-latency real-time inference scenarios; Flask, due to its flexible extensibility, is easier to customize for multi-model hybrid inference needs. Once the framework is determined, a data channel is established through standardized interfaces to receive pre-processed standardized data blocks. During this process, the framework needs to have data validation and format conversion capabilities to ensure that the input data is compatible with the model input layer. For example, it should automatically identify data dimensions and types, complete the conversion from JSON to tensors, lay a solid foundation for inference computation, and allow standardized data blocks to accurately flow into the model inference stage.

[0044] Step b2 involves deploying the model service in a Docker container and orchestrating and managing it using Kubernetes.

[0045] Furthermore, the model service architecture is restructured using containerization technology, encapsulating the model and its dependencies into Docker containers to eliminate inference biases caused by environmental differences. Based on this, Kubernetes is used for orchestration and management, dynamically scheduling container resources according to the inference task load. When real-time data volume surges, container instances are automatically scaled up; during off-peak periods, resources are scaled down to ensure efficient system operation. Simultaneously, Kubernetes' self-healing mechanism monitors container health and automatically restarts faulty instances, ensuring the model service remains stable online 24 / 7, providing an elastic and reliable operating environment for inference computation.

[0046] Step b3: Use the containerized model service to perform inference calculations on the standardized data blocks to generate inference results that include model type, feature fields, structured results, and timestamps.

[0047] Furthermore, after the containerized model service is launched, standardized data blocks enter the inference computation phase. The model processes the input data according to its own algorithmic logic. During inference, key information is recorded in real time: model type is marked for subsequent matching with visualization components; feature fields are extracted and associated with features from the data preprocessing stage to ensure front-end and back-end data mapping; structured results are output in standardized formats such as tables and matrices; and timestamps are added to mark the time of inference, supporting time-series data analysis. Through multi-dimensional information integration, the inference results not only contain the conclusions needed for business decisions but also retain metadata related to model operation and data association, providing a basis for visualization component adaptation and interactive analysis.

[0048] Step b4: Based on the topic-model mapping table maintained in the database, write back the above inference results to the corresponding output topic.

[0049] Furthermore, after inference is completed, the results need to be accurately written back to the corresponding data channel to achieve a closed-loop data flow. By maintaining a topic-model mapping table, association rules between inference results and output topics are established. The table stores the unique identifier of the model, the correspondence between the output data type and the topic. When inference results are generated, the target output topic is located based on the model type and result features matched to the mapping table, such as "anomaly-detect-result" or "trend-predict-data". The inference results are then asynchronously written to the corresponding topic via a message queue.

[0050] In some alternative embodiments, the above inference results are supported for front-end subscription via the WebSocket protocol.

[0051] Furthermore, the inference results can be subscribed to and consumed by downstream visualization components and data analysis modules, which decouples the model inference and data consumption processes, ensures accurate data distribution according to business logic, supports parallel consumption of inference results by multiple components, and lays the foundation for dynamic interaction and collaborative analysis in the visualization system.

[0052] Step S3: Determine the target visualization component based on the above reasoning results.

[0053] When the inference result contains a model type, step S3 above includes:

[0054] Step c1: Extract the model type parameter from the above reasoning results.

[0055] Furthermore, in the process of matching visualization components based on inference results, model type parameter extraction is the starting point for accurate adaptation. As the output of model computation, the inference result contains core identifying information about the model during training and execution, among which the model type parameter is crucial for distinguishing model functionality from data processing logic. By parsing the metadata fields of the inference result, the model type parameter is located and extracted. This parameter carries both the characteristics of the model's algorithmic architecture and implicitly contains data output patterns. The extraction process must adhere to data parsing specifications, supporting the parsing of multiple result formats such as JSON and Protobuf, ensuring accurate capture of the model type parameter from complex inference results, and providing clear "functional labels" for subsequent component matching.

[0056] Step c2: Query the components in the component registry whose "Supported Model Types" match the model type parameter mentioned above.

[0057] Furthermore, the component registry, acting as a "repository" for visual components, stores metadata for all components, building a bridge between model types and components. After obtaining the model type parameter, the registry is searched based on this parameter, filtering for components whose "supported model type" field matches the parameter. The search logic is based on standardized storage of metadata. The registry persists metadata using MySQL or caches frequently accessed component metadata using Redis. For example, if the inference result comes from an LSTM time series prediction model, components with "supported model type" of LSTM are searched, filtering out suitable components such as time series line charts and trend prediction dashboards. By accurately matching model functionality with supported component types, the range of component selection is narrowed, resolving the problem of component compatibility issues in multi-model scenarios.

[0058] Step c3: Identify the queried components as the target visualization components. If multiple matching components exist, select the optimal component as the target visualization component based on the component version number and the priority of the default rendering parameters.

[0059] Furthermore, when multiple components matching the model type are found, a filtering mechanism needs to be established to ensure the optimal component is selected. A two-layer filtering logic is constructed using component version numbers and default rendering parameter priorities: First, the version numbers are compared, selecting the newest and more functionally complete component version; if the version numbers are identical, the priority of the default rendering parameters is then analyzed. These parameters include weighted indicators such as the component's adaptability to data features and the completeness of interactive functions. A weighted priority score is calculated, and the component with the highest score is selected. This mechanism ensures component functionality adaptability and improves visualization and interactive experience through version iteration and parameter optimization. It solves the problems of low efficiency and error-proneness in manual selection when matching multiple components, transforming component filtering from experience-driven to rule-driven, and improving the automation and accuracy of visual component matching.

[0060] In some alternative embodiments, the component registry uses at least one of MySQL and Redis to store the metadata of the target visualization component, including the component's unique identifier, component name, functional description, version number, remote entry address, supported model types, and default rendering parameters.

[0061] Furthermore, the component registry, acting as a "database" for component metadata, employs a collaboration between MySQL and Redis to ensure efficient storage and retrieval of metadata. MySQL, leveraging its structured storage advantages, persistently stores static metadata such as unique component identifiers, names, and functional descriptions, supporting complex conditional queries. Redis utilizes its in-memory storage capabilities to cache frequently accessed component metadata, achieving millisecond-level response times and reducing MySQL query pressure. Metadata covers the entire lifecycle attributes of a component: a "unique component identifier" ensures accurate component location within the system; a "remote entry address" supports dynamic component loading under a micro-frontend architecture; "supported model types" establishes a connection with model inference results; and "default rendering parameters" define the component's initial display logic. Through this dual-storage architecture and rich metadata management, the component registry provides data support for dynamic matching and hot-swapping updates of visual components, enabling component management to move from fragmented development to standardized and configurable approaches, adapting to the flexible scheduling needs of components in multi-model integration scenarios.

[0062] When the inference result does not contain a model type, step S3 above includes:

[0063] Step d1 involves extracting features from the structured data of the reasoning results, including field statistics, data distribution analysis, and data shape judgment, and integrating the extracted features into a feature vector.

[0064] Furthermore, when the inference result does not carry a model type, features need to be mined from the data itself to match the visualization components. Feature extraction and vector integration become crucial. The structured data of the inference result contains rich information. Field statistics can sort out the dimensions contained in the data and clarify what the data "is"; data distribution analysis, through statistical means, variance, extreme values, etc., determines whether the data is centrally or discretely distributed, and understands "how the data is distributed"; data shape judgment identifies the row and column scale of the data matrix, clarifying "what the data looks like". Transforming these features into feature vectors of a unified dimension integrates the scattered data features into a computable and comparable vector form, providing "data fingerprints" for subsequent algorithm matching components. This solves the problem of lack of basis for component matching when there is no model type, making data features a bridge connecting the inference result and the visualization components.

[0065] Step d2 involves inputting the feature vectors into the pre-trained decision tree algorithm.

[0066] Furthermore, after constructing the feature vectors, intelligent algorithms are needed to achieve component matching. Decision tree algorithms, due to their strong interpretability and high adaptability to structured data, are chosen as the core algorithm for component matching. A decision tree model is pre-trained based on historical data: different data feature vectors are used as input, and known compatible components are used as output labels. The feature space is recursively partitioned to construct mapping rules from feature vectors to component types. When the feature vectors of the real-time inference results are generated, they are input into the pre-trained decision tree model. The algorithm, based on the trained branching logic, quickly outputs component matching suggestions, transforming human experience into algorithmic rules and improving the intelligence level of component matching in scenarios without model types.

[0067] Step d3: Calculate the fit score of each component using the decision tree algorithm.

[0068] Furthermore, when matching components, the decision tree algorithm does not simply output a single result, but rather ranks multiple components by calculating a fit score. As the algorithm traverses the decision tree branches, it simultaneously evaluates the matching degree between feature vectors and each component: based on indicators such as the distance between the feature vector and the component's training samples, and the fit of the decision path, it assigns a fit score to each candidate component. For example, if a feature vector matches a line chart component's training samples in the "time-series data distribution" branch, and the matrix row-to-column ratio differs little from the sample, the component receives a high score; conversely, if it matches a histogram component, the score is low due to the low fit of the "time-series distribution" feature. By quantifying the score, the fit degree of multiple candidate components with the current inference result can be clearly compared. This not only outputs recommended components but also explains the reasons for the fit, providing an interpretable and traceable basis for subsequent component selection, solving the "black box decision" problem of algorithm matching, and improving the credibility and transparency of component matching.

[0069] Step d4: Select the component with the highest score as the target visualization component.

[0070] Furthermore, after calculating the fit score of each candidate component, the target visualization component is selected according to the principle of "selecting the best". The algorithm sorts the component list from high to low scores and directly selects the component with the highest score as the target. In this process, the scoring mechanism of the decision tree algorithm has fully considered factors such as the fit between data features and component functions, and the historical performance of the component, ensuring that the highest-scoring component is more in line with the current inference result requirements in terms of data display effect and interactive experience. When there are components with the same score, additional rules can be superimposed to break the tie and ensure that a unique and optimal target component is output. Through the algorithm-driven scoring and selection process, the component matching in model-free scenarios is automated and intelligent, transforming component selection from relying on manual trial and error to accurate decision-making based on data features and algorithm training, thereby improving the response efficiency and fit accuracy of the visualization system.

[0071] Step S4: Encapsulate the metadata of the above target visualization components into standardized instructions, push them to the front end for rendering, and obtain the first rendering result.

[0072] Specifically, step S4 above includes:

[0073] Step e1: Encapsulate the metadata of the target visualization component into standardized instructions in JSON format.

[0074] Furthermore, the metadata of the target visualization component includes key information such as the component's unique identifier, remote entry address, default rendering parameters, and structured data to be rendered. This information needs to be parsed uniformly by both the front-end and back-end through a standardized format. Encapsulating this metadata into JSON-formatted instructions leverages JSON's lightweight, readable, and cross-platform compatibility to ensure efficient information parsing by back-end services and front-end frameworks across different technology stacks. For example, the component's unique identifier is used by the front-end to accurately locate resources to be loaded, the remote entry address points to the deployment path of the micro-front-end sub-application, the default rendering parameters define the initial display style, and the data to be rendered is associated with the structured information in the model's inference results. Through standardized encapsulation in JSON format, scattered metadata is integrated into logically clear and field-consistent instructions, providing a standardized "blueprint" for subsequent compression, transmission, and rendering, avoiding parsing errors caused by format differences, and ensuring the accuracy of information transmission.

[0075] Step e2: Compress the above standardized instructions using the GZIP algorithm.

[0076] Furthermore, to improve command transmission efficiency, especially in scenarios with high real-time requirements to reduce data transmission time, the GZIP algorithm is used to compress standardized commands in JSON format. GZIP uses a lossless compression algorithm to compress recurring fields (such as fixed field names in component metadata) and redundant spaces in the commands, significantly reducing command size—for commands containing large amounts of structured data, the compression rate can reach over 50%. Compressed commands consume less bandwidth in network transmission, not only speeding up transmission and reducing latency, but also reducing the communication load between the server and the front end. Especially in scenarios with high-frequency data updates, such as the Industrial Internet of Things (IIoT), this avoids visualization stuttering caused by transmission congestion, providing a smooth data channel for real-time rendering.

[0077] Step e3: Push the compressed standardized instructions to the front end using at least one of the WebSocket and SSE protocols.

[0078] Furthermore, the compressed, standardized instructions need to be pushed to the front end via an efficient real-time communication protocol, compatible with both WebSocket and SSE protocols to adapt to different scenario requirements. WebSocket, based on full-duplex communication mode, supports bidirectional real-time interaction between the front end and back end. In scenarios requiring high-frequency data refresh, persistent connections can be established to achieve instant instruction push, avoiding the connection establishment overhead of the traditional HTTP protocol. SSE (Server Send Event) uses simplex communication, with the server pushing data unidirectionally to the front end. In scenarios with low data update frequency but requiring continuous reception (such as periodic report updates), it saves more resources. By flexibly selecting the two protocols, it is ensured that the compressed instructions can be delivered to the front end in the optimal way, guaranteeing the timeliness and stability of instruction push regardless of whether the business scenario involves high-concurrency real-time interaction or low-frequency data updates.

[0079] Step e4: Receive standardized instructions using the front-end event bus and broadcast them to each visualization component.

[0080] Furthermore, the front-end event bus, acting as the core hub for inter-component communication, is responsible for receiving standardized instructions pushed from the backend and broadcasting them globally. After compressed instructions are decompressed and restored to JSON format by the front-end, the event bus first verifies the integrity and validity of the instructions to ensure they can be executed safely. Upon successful verification, the event bus broadcasts the instructions to all registered visualization components, allowing each component to respond according to its own responsibilities—the target component prepares to load and render, while other components ignore instructions irrelevant to them. This event bus-based broadcasting mechanism achieves centralized distribution of instructions and decoupling of components, avoiding dependency chaos caused by direct communication between components, and making the front-end system more flexible and scalable when handling parallel rendering of multiple components.

[0081] Step e5: The front-end rendering engine dynamically loads the corresponding micro-front-end sub-application component according to the instructions, and binds the data to the micro-front-end sub-application component to complete the rendering and obtain the first rendering result.

[0082] Furthermore, upon receiving standardized instructions, the front-end rendering engine first performs in-depth analysis of the component metadata in the instructions, focusing on extracting the remote entry address of the micro-frontend sub-application component. This address points to the component's resource storage path, containing the scripts, styles, and configuration files required for component execution. The rendering engine initiates resource requests to the remote server through the micro-frontend framework's loading mechanism. During resource retrieval, dependency checks are performed simultaneously to ensure that the basic libraries required for component execution are loaded or automatically completed, preventing component loading failures due to missing dependencies. After resource loading is complete, the rendering engine initiates the component activation process: according to the isolation rules of the micro-frontend architecture, an independent runtime context is allocated to the sub-application component, including a dedicated DOM container, style scope, and global variable space, preventing style conflicts or script interference with other components. Subsequently, the engine maps and binds the structured data to be rendered in the instructions (derived from model inference results) to the component's preset data interfaces. For example, if the component is a time-series data display component, the engine binds the timestamp field in the inference result to the component's horizontal axis dimension and the corresponding numerical field to the vertical axis dimension; if it is an anomaly detection component, the anomaly score is associated with the component's color gradient and warning threshold. After data binding is complete, the rendering engine triggers the component's rendering function. The component then generates a visual interface based on the bound data and default rendering parameters. During this process, the engine monitors the rendering status in real time. If issues such as data format mismatch or resource loading timeouts occur, it automatically triggers a retry mechanism or fallback solution to ensure the stability of the rendering process.

[0083] Step S5: Capture user interaction events on the aforementioned target visualization component, refresh the first rendering result based on the interaction events, and obtain the second rendering result.

[0084] Specifically, step S5 above includes:

[0085] Step f1 captures the user's interactive actions on the target visualization component.

[0086] Furthermore, after completing the initial rendering, the target visualization component needs to be able to sense user actions to achieve dynamic feedback and interactive analysis. The system uses a front-end event listening mechanism to capture various user interactions on the components in real time, such as selecting a time range on the time series data component, clicking to view details on the PCA instrument component, and setting filter conditions on the root cause analysis component. These operations are accurately captured by the component's built-in event listeners, including key information such as operation type, operation location, and operation parameters, providing raw interactive data for subsequent processing and enabling the visualization system to transform from "passively displaying" to "actively responding" to user needs.

[0087] Step f2 encapsulates the interactive operation into an event message in JSON format.

[0088] Furthermore, to ensure efficient transmission of interactive information between front-end components and between the front-end and back-end, captured interactive operations are encapsulated into JSON-formatted event messages. The standardization of the JSON format unifies the structure of event information; for example, the "type" field marks the operation type, the "payload" field contains specific operation parameters, and the "source" field records the unique identifier of the component from which the operation originated, avoiding message confusion. This encapsulation method transforms fragmented interactive information into structured, parsable messages, facilitating front-end event bus recognition and broadcasting, and providing a standardized input format for possible subsequent back-end secondary reasoning, ensuring that interactive information remains undistorted and unambiguous during transmission.

[0089] Step f3: Broadcast event messages to all visualization components via the event bus, refresh the first rendering result based on the interactive events, and obtain the second rendering result.

[0090] Furthermore, the event bus, acting as the core hub for communication between front-end components, immediately broadcasts JSON-formatted event messages to all registered visualization components upon receiving them. Each component determines whether a response is needed based on the "source" field in the message and its own identifier. Components related to interactive operations parse the "payload" parameter in the message and trigger the corresponding refresh logic. For example, when a user adjusts the time range on the root cause analysis component, after the event message is broadcast, the time series data component reloads the data for that interval based on the new time parameters and updates the chart, while the PCA instrument component synchronously refreshes the corresponding time period's indicator values. If the interactive operation requires deeper analysis, the event bus also forwards the message to the backend. After the model returns new inference results, the components are re-matched and rendered according to steps S3 to S4, ultimately generating a second rendering result containing the latest interactive feedback. Through the event bus's broadcast mechanism and component linkage logic, a closed loop from "static display" to "dynamic response" is achieved in the visualization system, improving the depth of user interaction with data and the efficiency of analysis.

[0091] Figure 2 This is a diagram of the real-time data visualization processing and interaction architecture according to an embodiment of the present invention. Figure 2 It presents the entire process of real-time data visualization processing and interaction, divided into two parts: backend and frontend. The backend obtains real-time data through WebSocket, processes it through stream processing and model inference services, and then outputs it through component-driven modules. The frontend relies on the event bus and rendering engine to render the backend data to sub-application components such as time series data, PCA instruments, and root cause analysis, realizing user interaction and building a complete system from data collection, processing to visualization interaction.

[0092] The micro-frontend real-time visualization automatic rendering method provided in this embodiment first generates standardized data blocks by obtaining data streams and performing windowing, outlier removal, and feature extraction. It can achieve the orderly cutting and integration of high-frequency real-time data streams with the help of the windowing mechanism of the stream processing framework, ensure data quality through outlier removal methods such as Z-Score and 3σ method, and then clarify the core attributes such as the number of data fields and distribution characteristics through feature extraction, providing a unified and standardized input basis for subsequent model inference, avoiding inference deviations caused by chaotic data formats or noise interference, and improving the reliability of the entire process from the source; then, by sending the standardized data blocks into the containerized model service for inference to obtain the inference results, the flexible expansion and efficient resource scheduling of the model service are realized by using the containerized deployment method. Combined with the high-efficiency data transmission ability, it ensures that real-time data can be quickly inferred and the results containing key information such as model type, feature fields, and structured results are output, solving the problems of poor scalability and low inference efficiency in traditional model deployment, and providing an accurate model output basis for subsequent component matching; then, by determining the target visualization component based on the inference result, with the help of the standardized management of component meta-information by the component registration center, the direct matching of model type and component is achieved. At the same time, in the case of no model type, vectors are generated by data feature extraction and the adaptability is calculated in combination with the decision tree algorithm to intelligently recommend the optimal component, overcoming the limitation of relying on manual component configuration in the prior art and improving the automation and accuracy of component matching; furthermore, by encapsulating the meta-information of the target visualization component into a standardized instruction and pushing it to the front-end for rendering to obtain the first rendering result, the meta-information is encapsulated in JSON format and transmitted after GZIP compression. Combined with the real-time push ability of the protocol and the micro-frontend architecture, the dynamic loading and data binding of components are realized, achieving a high degree of decoupling between the front and back ends, solving the problems of difficult hot plugging of traditional front-end components and high update and maintenance costs, and ensuring the efficiency and flexibility of the rendering process; finally, by capturing user interaction events and refreshing the rendering result to obtain the second rendering result, the user operations are encapsulated as JSON events and broadcast through the event bus, triggering the refresh or secondary inference of associated components, realizing the linkage interaction and dynamic feedback of multiple components, breaking the isolated state between components, and improving the interactivity and practicality of the visualization system, meeting the user's real-time analysis and decision-making needs in complex scenarios. The present invention solves the defects of the traditional solution, such as poor scalability, lack of automation ability, and lack of component hot plugging mechanism, so that components cannot be matched according to data characteristics or model types, and different visualization components cannot be flexibly replaced or updated.

[0093] The above is the embodiment of the micro-frontend real-time visualization automatic rendering system provided by this application. The following will introduce other embodiments of the micro-frontend real-time visualization automatic rendering provided by this application. For details, please refer to the following.

[0094] This embodiment also provides a micro-frontend real-time visualization automatic rendering system, which is used to implement the above embodiments and preferred embodiments, and will not be repeated for details already described. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the system described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0095] This embodiment provides a micro-frontend real-time visualization automatic rendering system, such as Figure 3 As shown, it includes:

[0096] The data acquisition module is used to acquire data streams, perform windowing processing, outlier removal, and feature extraction on the data streams, and generate standardized data blocks.

[0097] The inference module is used to feed the standardized data blocks into the containerized model service for inference and obtain the inference results.

[0098] The determination module is used to determine the target visualization component based on the above reasoning results;

[0099] The rendering module is used to encapsulate the metadata of the above-mentioned target visualization components into standardized instructions, push them to the front end for rendering, and obtain the first rendering result;

[0100] The update module is used to capture user interaction events on the aforementioned target visualization component, refresh the first rendering result based on the interaction events, and obtain the second rendering result.

[0101] The real-time visualization automatic rendering system for micro frontends provided in this embodiment first generates standardized data blocks by obtaining data streams and performing windowing processing, outlier removal, and feature extraction. It can achieve the orderly cutting and integration of high-frequency real-time data streams with the help of the windowing mechanism of the stream processing framework, ensure data quality through outlier removal methods such as Z-Score and 3σ method, and then clarify the core attributes such as the number of data fields and distribution characteristics through feature extraction, providing a unified and standardized input basis for subsequent model inference, avoiding inference deviations caused by chaotic data formats or noise interference, and improving the reliability of the entire process from the source; Then, by sending the standardized data blocks into the containerized model service for inference to obtain inference results, the containerized deployment method is used to achieve flexible expansion and efficient resource scheduling of the model service. Combined with the high-efficiency data transmission ability, it ensures that real-time data can quickly complete inference and output results containing key information such as model type, feature fields, and structured results, solving the problems of poor scalability and low inference efficiency in traditional model deployment, and providing an accurate model output basis for subsequent component matching; After that, by determining the target visualization component based on the inference result, with the help of the standardized management of component meta-information by the component registry, the direct matching of the model type and the component is achieved. At the same time, for the case without a model type, vectors are generated through data feature extraction and the fitness is calculated in combination with the decision tree algorithm to intelligently recommend the optimal component, overcoming the limitations of relying on manual component configuration in the prior art and improving the automation and accuracy of component matching; Furthermore, by encapsulating the meta-information of the target visualization component into a standardized instruction and pushing it to the front-end for rendering to obtain the first rendering result, the meta-information is encapsulated in JSON format and transmitted after GZIP compression. Combined with the real-time push ability of the protocol and the micro front-end architecture, it realizes the dynamic loading and data binding of components, achieves high decoupling between the front and back ends, solves the problems of difficult hot plugging and high update and maintenance costs of traditional front-end components, and ensures that the rendering process is efficient and flexible; Finally, by capturing user interaction events and refreshing the rendering result to obtain the second rendering result, the user operations are encapsulated as JSON events and broadcast through the event bus, triggering the refresh or secondary inference of associated components, realizing the联动 interaction and dynamic feedback of multiple components, breaking the isolated state between components, and improving the interactivity and practicality of the visualization system, meeting the real-time analysis and decision-making needs of users in complex scenarios. The present invention solves the defects of the traditional solution, such as poor scalability, lack of automation ability, and lack of component hot plugging mechanism, so that components cannot be matched according to data characteristics or model types, and different visualization components cannot be flexibly replaced or updated.

[0102] The further function descriptions of the above-mentioned various modules and units are the same as those in the corresponding embodiments above, and will not be repeated here.

Claims

1. A micro-frontend real-time visualization automatic rendering method, characterized in that, The method includes: Acquire the data stream, perform windowing processing, outlier removal, and feature extraction on the data stream, and generate standardized data blocks; The standardized data blocks are fed into the containerized model service for inference to obtain the inference results. The target visualization component is determined based on the reasoning results; The metadata of the target visualization component is encapsulated into standardized instructions and pushed to the front end for rendering to obtain the first rendering result; Capture user interaction events on the target visualization component, refresh the first rendering result based on the interaction events, and obtain the second rendering result.

2. The method according to claim 1, characterized in that, The process of acquiring the data stream, performing windowing, outlier removal, and feature extraction on the data stream, and generating standardized data blocks includes: Obtain real-time data streams using at least one of the following protocols: Kafka, MQTT, and WebSocket. The data stream is processed using a stream processing framework in a windowed manner; At least one of the Z-Score method and the 3σ method is used to remove outliers from the data stream; Feature extraction is performed on the data stream after windowing and outlier processing. The feature extraction includes: field quantity extraction, data distribution feature extraction, and matrix shape extraction. Integrate the feature processing results to generate standardized data blocks.

3. The method according to claim 2, characterized in that, The step of sending the standardized data block into the containerized model service for inference to obtain the inference result includes: Determine the backend framework for the model service and receive standardized data blocks; The model service is deployed in a Docker container and orchestrated and managed using Kubernetes; Utilize containerized model services to perform inference computations on standardized data blocks, generating inference results that include model type, feature fields, structured results, and timestamps; Based on the topic-model mapping table maintained in the database, the inference results are written back to the corresponding output topic.

4. The method according to claim 3, characterized in that, The inference results are supported for front-end subscription via the WebSocket protocol.

5. The method according to claim 4, characterized in that, When the inference result contains a model type, determining the target visualization component based on the inference result includes: Extract the model type parameter from the inference results; Query the components in the component registry whose "Supported Model Types" match the model type parameter. The found components are identified as the target visualization components. If multiple matching components exist, the optimal component is selected as the target visualization component based on the component version number and the priority of the default rendering parameters.

6. The method according to claim 5, characterized in that, The component registry uses at least one of MySQL and Redis to store the metadata of the target visualization component. The metadata includes the component's unique identifier, component name, function description, version number, remote entry address, supported model types, and default rendering parameters.

7. The method according to claim 6, characterized in that, When the inference result does not contain a model type, determining the target visualization component based on the inference result includes: Feature extraction is performed on the structured data of the reasoning results, including field statistics, data distribution analysis and data shape judgment, and the extracted features are integrated into a feature vector; Input the feature vectors into a pre-trained decision tree algorithm; The fit score of each component is calculated using a decision tree algorithm; Select the component with the highest score as the target visualization component.

8. The method according to claim 7, characterized in that, The step of encapsulating the metadata of the target visualization component into standardized instructions and pushing them to the front end for rendering to obtain a first rendering result includes: Encapsulate the metadata of the target visualization component into standardized instructions in JSON format; The standardized instructions are compressed using the GZIP algorithm; The compressed, standardized instructions are pushed to the front end using at least one of the WebSocket and SSE protocols. Utilize the front-end event bus to receive standardized commands and broadcast them to various visualization components; The front-end rendering engine dynamically loads the corresponding micro-frontend sub-application components according to the instructions, and binds the data to the micro-frontend sub-application components to complete the rendering and obtain the first rendering result.

9. The method according to claim 8, characterized in that, The process of capturing user interaction events on the target visualization component, refreshing the first rendering result based on the interaction events, and obtaining the second rendering result includes: Capture user interactions on the target visual component; Encapsulate interactive operations as JSON-formatted event messages; Event messages are broadcast to various visualization components via the event bus, and the first rendering result is refreshed based on the interactive events to obtain the second rendering result.

10. A micro-frontend real-time visual automatic rendering system, characterized in that, The system includes: The data acquisition module is used to acquire data streams, perform windowing processing, outlier removal, and feature extraction on the data streams, and generate standardized data blocks. The inference module is used to send the standardized data blocks into the containerized model service for inference and obtain the inference results. The determination module is used to determine the target visualization component based on the reasoning result; The rendering module is used to encapsulate the metadata of the target visualization component into standardized instructions, push them to the front end for rendering, and obtain the first rendering result; The update module is used to capture user interaction events on the target visualization component, refresh the first rendering result based on the interaction events, and obtain the second rendering result.

Images