Visual component generation method and device, equipment and storage medium

Abstract

The invention belongs to the technical field of artificial intelligence, is suitable for the medical field and the financial field, and discloses a visual component generation method, which comprises the following steps: acquiring multi-source component data; analyzing the multi-source component data to extract component entities and identify the layout, style and interaction attributes of the component entities, and mining and constructing a component knowledge graph through a semantic relationship; obtaining business demand input, converting the business demand input into component design constraints through a semantic mapping model based on the component knowledge graph, and generating layout, style and interaction logic of a target component; and converting the layout, style and interaction logic of the target component into component codes adapted to different terminal platforms, executing multi-terminal synchronous rendering and consistency verification, and generating and outputting a visual component with unified vision and interaction on the Web terminal, the mobile terminal and the desktop terminal. The technical problems that in an existing visual component generation technology, component generation flexibility is insufficient, and cross-platform consistency is poor are solved.

Description

Technical Field

[0001] This invention belongs to the field of artificial intelligence technology and is applicable to the medical and financial fields. In particular, it relates to a method, apparatus, device and storage medium for generating visualization components. Background Technology

[0002] With the widespread adoption of low-code and no-code development models, rapidly generating front-end components visually has become a crucial technique for improving software system development efficiency and lowering the development threshold. Existing technologies largely rely on predefined component templates or style libraries, generating target components through simple configuration of template parameters. This approach struggles to flexibly adjust to different business scenarios, interaction requirements, or user characteristics, failing to meet the differentiated and personalized requirements of complex business systems. Existing visual component generation tools typically treat components as static interface elements, describing their appearance or basic behavior solely through attribute configuration, lacking systematic modeling of component functional semantics, business meaning, and usage context. The generated components are difficult to intelligently expand or adaptively adjust according to business changes, easily leading to mismatches between component functionality and business requirements. Therefore, it is necessary to provide a new visual component generation method and system to overcome the shortcomings of existing technologies, achieve effective modeling of component semantics and business scenarios, improve the flexibility and intelligence of component generation, and enhance the cross-platform compatibility and personalized adaptation capabilities of components. Summary of the Invention

[0003] This invention provides a method, apparatus, device, and storage medium for generating visual components, in order to solve the technical problems of insufficient flexibility in component generation and poor cross-platform consistency in existing visual component generation technologies.

[0004] In a first aspect, the present invention provides a method for generating visual components, comprising: Acquire multi-source component data, including design drafts, code, and business documents; The multi-source component data is parsed and processed to extract component entities and identify the layout, style and interaction attributes of the component entities. The association between the component entities is established through semantic relationship mining, and a component knowledge graph is constructed. Obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints; Based on the preset component description specifications, the layout, style and interaction logic of the target component are converted into component code that adapts to different terminal platforms, and multi-terminal synchronous rendering and consistency verification are performed to generate and output a visual component that maintains visual and interactive consistency on the Web, mobile and desktop terminals.

[0005] In a second aspect, the present invention provides a visualization component generation apparatus, comprising: The multi-source data acquisition module is used to acquire multi-source component data, including design drafts, code, and business documents; The knowledge graph construction module is used to parse and process the multi-source component data to extract component entities and identify the layout, style and interaction attributes of the component entities. It establishes the association between the component entities through semantic relationship mining and constructs a component knowledge graph. The component generation module is used to obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints. The multi-terminal rendering and verification module is used to convert the layout, style and interaction logic of the target component into component code that is adapted to different terminal platforms according to the preset component description specifications, and to perform multi-terminal synchronous rendering and consistency verification to generate and output a visual component that maintains visual and interactive consistency on the Web, mobile and desktop terminals.

[0006] Thirdly, the present invention provides a computer device including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the visualization component generation method.

[0007] Fourthly, the present invention provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the visualization component generation method.

[0008] The aforementioned visualization component generation method, apparatus, device, and storage medium, in their implemented solution, acquire multi-source component data including design drafts, code, and business documents, and parse and process the multi-source component data to extract component entities and identify the layout, style, and interaction attributes of the component entities. Semantic relationship mining is used to establish the association relationships between the component entities, constructing a component knowledge graph. Based on the component knowledge graph, a semantic mapping model is used to transform the acquired business requirement input into component design constraints, and the layout, style, and interaction logic of the target component are generated based on the design constraints. Based on a preset component description specification, the layout, style, and interaction logic of the target component are converted into component code adapted to different terminal platforms, and multi-terminal synchronous rendering and consistency verification are performed to generate and output a visualization component that maintains visual and interactive consistency on Web, mobile, and desktop terminals. In this invention, the semantics of business requirements are understood through component knowledge graphs and semantic mapping models, and transformed into specific design and development constraints. This enables the generated components to not only meet implementation specifications but also fit the original business intent, improving the business fit of the component output. Through an automated multi-terminal code generation and synchronous verification mechanism based on unified description specifications, the consistency of the visuals and interactions of the generated components on different terminal platforms is ensured, eliminating repetitive work and experience deviations in multi-terminal adaptation. Attached Figure Description

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

[0010] Figure 1 This is a schematic diagram of an application environment for a visualization component generation method according to an embodiment of the present invention.

[0011] Figure 2 This is a flowchart illustrating a method for generating visual components according to an embodiment of the present invention.

[0012] Figure 3 yes Figure 2 A flowchart illustrating a specific implementation of step S20.

[0013] Figure 4 yes Figure 2 A flowchart illustrating a specific implementation of step S30.

[0014] Figure 5 yes Figure 2 A flowchart illustrating a specific implementation of step S40.

[0015] Figure 6 yes Figure 2 A schematic diagram of a specific implementation method for step S50.

[0016] Figure 7 This is a schematic diagram of a visualization component generation device in one embodiment of the present invention.

[0017] Figure 8 This is a schematic diagram of the structure of a computer device according to an embodiment of the present invention.

[0018] Figure 9 This is another structural schematic diagram of a computer device according to one embodiment of the present invention. Detailed Implementation

[0019] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0020] The visualization component generation method provided in this embodiment of the invention can be applied to, for example... Figure 1 In the application environment, Figure 1 This is a schematic diagram of an application environment for a visualization component generation method according to an embodiment of the present invention; wherein, the client communicates with the server via a network. The server can acquire multi-source component data, including design drafts, code, and business documents, and parse the multi-source component data to extract component entities and identify the layout, style, and interaction attributes of the component entities. Through semantic relationship mining, the server establishes the association between the component entities and constructs a component knowledge graph. Based on the component knowledge graph, the server uses a semantic mapping model to transform the acquired business requirement input into component design constraints, and generates the layout, style, and interaction logic of the target component based on the design constraints. Based on a preset component description specification, the server converts the layout, style, and interaction logic of the target component into component code adapted to different terminal platforms, and performs multi-terminal synchronous rendering and consistency verification to generate and output a visualization component that maintains visual and interactive consistency on the Web, mobile, and desktop terminals. In this invention, a component knowledge graph and semantic mapping model are used to understand the semantics of business requirements and transform them into specific design and development constraints. This ensures that the generated components not only meet implementation specifications but also align with the original business intent, improving the business fit of the component output. Furthermore, an automated multi-platform code generation and synchronous verification mechanism based on a unified description specification ensures the consistency of the generated components' visual appearance and interaction across different terminal platforms, eliminating repetitive work and experience discrepancies in multi-platform adaptation. The invention will now be described in detail through specific embodiments.

[0021] Please see Figure 2 As shown, Figure 2 This is a flowchart illustrating a method for generating a visualization component according to an embodiment of the present invention. The method for generating a visualization component specifically includes the following steps: S10 acquires multi-source component data, including design drafts, code, and business documents. In the financial sector, it acquires multi-source data such as design drafts, implementation code, and related product manuals and regulatory rules documents for visualization components like investment dashboards and compliance approval forms. In the healthcare sector, it acquires design drafts, implementation code, and document data such as clinical operation guidelines and medical terminology standards for visualization components like electronic medical record display panels, medical image annotation tools, and clinical pathway flowcharts.

[0022] S20 parses and processes the multi-source component data to extract component entities and identify their layout, style, and interaction attributes. Semantic relationship mining is used to establish relationships between these entities, constructing a component knowledge graph. By parsing and processing multi-source component data to extract component entities and identify their attributes, and by constructing a component knowledge graph through semantic relationship mining, deep integration and semantic association of component information in design drafts, code, and business documents can be achieved, forming an understandable and reasonable component knowledge system. This effectively solves the problem of the disconnect between design, development, and product documentation in traditional development, enabling the system to fully understand the composition, attributes, and relationships of components. This provides a unified and accurate knowledge foundation for subsequent intelligent generation, consistency verification, and team collaboration, significantly improving the intelligence and systematization of component management and reuse, and reducing rework and maintenance costs caused by information inconsistencies. In the financial field, by parsing the design drafts, code, and business documents of visual components such as investment dashboards and transaction forms, component entities such as charts, buttons, and compliance declaration texts can be extracted, and their data binding rules, risk visualization styles, and interaction logic can be identified. This helps the system deeply understand the business relationships between financial components, such as the mandatory binding of risk warnings with high-risk assets, thus providing core knowledge support for intelligently generating financial business interfaces that comply with strict regulations and have rigorous logic. In the medical field, by analyzing multi-source data from visualization components such as electronic medical record panels and laboratory report viewers, it is possible to extract component entities such as vital sign time series graphs, medication lists, and warning labels, and identify their clinical display standards, outlier highlighting rules, and interaction constraints. This helps the system grasp the clinical pathways and diagnostic and treatment logic relationships behind medical components, such as the temporal relationship between medication records and changes in vital signs, thus laying an accurate and reliable knowledge foundation for intelligently constructing clinical information interfaces that can assist diagnostic decisions and comply with medical standards.

[0023] Specifically, such as Figure 3 The above, Figure 3This is a flowchart illustrating a specific implementation of step S20, which specifically includes the following steps S21-S23: S21 is a deep learning-based UI parser that automatically extracts component entities and their layout, style, and interaction behavior attributes from the design drafts, code, and business documents. Optionally, the deep learning-based UI parser automatically identifies component entities within the interface by performing unified modeling and feature parsing on design drafts, code, and business documents. Specifically, for design drafts, the parser analyzes the visual features of the interface to determine the position, size, and relative hierarchy of each component, thus obtaining the component's layout attributes. For code, the parser parses the interface-related structural descriptions, style definitions, and event bindings, extracting the corresponding style attributes and interactive behavior attributes of the components. For business documents, the parser performs semantic parsing on the text describing interface functions and operational logic, associating the parsing results with the corresponding component entities to supplement or correct the component's interactive behavior attributes. Through this parsing process, the automatic extraction and structured representation of component entities and their layout, style, and interactive behavior attributes are achieved.

[0024] S22 uses graph neural networks to analyze the extracted component entities, constructs and stores the inheritance, composition and dependency relationships between component entities to form a component semantic association network; Optionally, based on the extracted component entities and their attribute information, each component entity is treated as a node in a graph structure, and the inheritance, composition, and dependency relationships between components are introduced into the graph structure as edges. A graph neural network is used to perform feature propagation and relationship modeling on the graph structure, analyzing the association features of component entities in terms of structural hierarchy, functional composition, and call dependencies, thereby determining and characterizing the semantic relationships between component entities. Based on this, the inheritance, composition, and dependency relationships are stored in a structured form to form a component semantic association network, supporting semantic consistency constraints in subsequent component retrieval, relationship reasoning, or component generation processes.

[0025] S23 forms a component knowledge graph based on the component entities, attributes, and constructed relationships. The component entities are used as nodes in the knowledge graph, and the component's layout attributes, style attributes, and interaction behavior attributes are associated as node attributes. The inheritance, composition, and dependency relationships constructed in step S22 are organized as relationship edges between nodes. Through unified modeling of component entities, attribute information, and inter-component relationships, a structured and scalable component knowledge graph is formed, enabling semantic association among component entities, thereby providing basic data support for subsequent component queries, relationship analysis, or component generation.

[0026] S30 acquires business requirement input, and based on the component knowledge graph, transforms the business requirement input into component design constraints through a semantic mapping model. Based on these design constraints, it generates the layout, style, and interaction logic of the target component. Through the semantic mapping model based on the component knowledge graph, business requirement input described in natural language can be intelligently transformed into precise component design constraints. This method helps designers and developers quickly generate visual component layouts, styles, and interaction logic that meet business objectives, improving the automation and consistency of the process from requirement to implementation, and reducing misunderstandings and rework costs during manual conversion. In financial scenarios, by acquiring business requirement input such as creating a portfolio overview page exclusive to high-net-worth clients, based on a component knowledge graph that integrates financial compliance rules and data visualization models, this requirement can be intelligently transformed into design constraints including components such as asset distribution pie charts, risk-return curves, and compliance disclosure text boxes. It also automatically generates interface layouts, financial theme styles, and data drill-down interaction logic that meet regulatory requirements and user experience standards, thereby quickly building a professional and compliant wealth management interface. In the medical field, by obtaining the business requirement input of "developing a real-time monitoring panel for patient vital signs in the intensive care unit", based on the component knowledge graph that links clinical guidelines and medical data standards, this requirement can be accurately mapped into design constraints including components such as multi-parameter trend charts, outlier alert cards, and medication timelines. It can also automatically generate interface layouts, medical alert styles, and data filtering interaction logic that conform to clinical observation habits, highlight key medical information, and support rapid response, thereby efficiently building a professional and reliable clinical auxiliary decision-making interface.

[0027] Specifically, such as Figure 4 The above, Figure 4 This is a flowchart illustrating a specific implementation of step S30, which specifically includes the following steps S31-S34: S31 performs semantic analysis and understanding of the business requirement input based on natural language processing algorithms; optionally, it performs basic language processing such as word segmentation, part-of-speech tagging, and syntactic analysis on the input business requirement text to form a structured text representation; it identifies key business entities in the text, such as component types, business objects, and operation actions, through named entity recognition technology, and understands the logical relationships between entities by combining dependency parsing; it performs deep semantic encoding on the processed text based on a pre-trained language model to identify the user's fundamental needs and implicit business constraints.

[0028] S32, based on the component entities, attributes, and relationships in the component knowledge graph, maps the semantically analyzed business requirements to the component design constraints; optionally, it performs similarity calculation and matching between the key intents, entities, and operations identified in the semantically analyzed business requirements and the existing component entities and their attributes in the component knowledge graph; based on the component relationships recorded in the knowledge graph, such as combination relationships, inheritance relationships, and usage relationships, it performs extended reasoning on the matched core component entities to identify related components and their constraints that need to be considered together; it transforms the component set obtained from matching and reasoning, and its necessary attributes, such as specific styles required by business rules, mandatory interactive behaviors, and relative position requirements in layout, into a standardized design constraint representation that can be processed by subsequent generation processes.

[0029] S33 employs adversarial networks and reinforcement learning methods to generate the layout and style of the target component based on the design constraints. Optionally, an adversarial network framework consisting of a generator and a discriminator is constructed. The generator attempts to generate component layout and style schemes based on the design constraints, while the discriminator evaluates the authenticity and rationality of the generated schemes based on aesthetic standards, design specifications, and historical high-quality samples in the component knowledge graph. Both are continuously optimized through adversarial training, ensuring that the generated results satisfy both constraints and professional design principles. The component generation process is modeled as a sequential decision-making task, using the comprehensive score of the generated scheme in terms of visualization quality, layout rationality, and constraint satisfaction as the reward signal. Through reinforcement learning methods such as policy gradients, the generation model gradually learns generation strategies that can obtain higher rewards, achieving continuous improvement in generation quality.

[0030] S34, based on the functional logic contained in the design constraints, generates the interaction logic of the target component through a rule engine and a state machine model. Optionally, for the functional logic explicitly defined in the design constraints, such as the requirement to complete validation of all required fields before form submission and the display of a progress indicator during data loading, the logic is parsed and transformed into a logical correspondence between specific triggering conditions and execution actions through the rule engine. Based on the different interface display modes that the component may have, such as initial state, loading, successful validation, failed validation, and submission completed, a state machine model is constructed to clarify the transition conditions between each state and the visual updates or data operations that should be triggered during state transitions. The discrete interaction rules output by the rule engine are integrated with the ordered state sequence defined by the state machine model to generate a complete description of the interaction logic, including event listening, state judgment and switching, and corresponding interface feedback or business processing.

[0031] Based on a pre-defined component description specification, S40 converts the layout, style, and interaction logic of the target component into component code adapted to different terminal platforms. It then performs multi-platform synchronous rendering and consistency verification, generating and outputting a visual component that maintains visual and interactive consistency across web, mobile, and desktop platforms. Through the pre-defined component description specification and multi-platform synchronous rendering verification mechanism, the design elements of the target component can be automatically converted into standardized code adapted to multiple terminal platforms. This method helps development teams quickly generate visual components that maintain visual and interactive consistency across web, mobile, and desktop platforms, improving the efficiency and consistency of multi-platform product development and reducing redundant adaptations and interface inconsistencies caused by platform differences. In the financial sector, based on cross-platform component description specifications, the layout, financial theme styles, and data drill-down interaction logic of wealth management dashboards can be automatically converted into standardized code that simultaneously adapts to web browsers, mobile apps, and desktop clients. Synchronous rendering and verification ensure complete consistency across all terminal interfaces in data visualization, compliance information display, and transaction operation processes, providing high-net-worth clients with a seamless cross-platform professional financial service experience. In the medical field, based on a unified component description specification, the layout of clinical monitoring panels, medical warning styles, and vital sign data filtering and interaction logic can be intelligently transformed into platform-specific code that adapts to desktop workstations, mobile nursing tablets, and Web remote consultation systems. Through consistency verification, the display and operation of vital sign charts, medication reminders, and alarm functions are ensured to be highly consistent across all terminal devices, supporting medical staff to obtain a reliable and consistent clinical information interaction experience in different scenarios.

[0032] Specifically, such as Figure 5 The above, Figure 5 This is a flowchart illustrating a specific implementation of step S40, which specifically includes the following steps S41-S45: S41 defines a set of component description elements independent of specific implementation platforms. These description elements include at least a component type identifier, a set of configurable attributes, a list of supported events, and possible sub-component relationships. Optionally, the abstract definition of these component description elements is constructed in the following ways: the component type identifier uniquely defines the component's functional category at the conceptual level, such as "button," "input box," or "data table"; the set of configurable attributes defines, in key-value pairs, the dimensions of the component that can be externally adjusted in terms of layout parameters, such as width and positioning, style features such as color and font, and behavioral states such as disabled and visible; the list of supported events explicitly enumerates the types of interactive responses that the component can trigger externally, such as click events, data change events, and focus events; the possible sub-component relationships describe, in a tree or nested structure, the internal elements that the component can carry at the composition level and their organizational rules. This set of standardized elements together constitutes an intermediate representation of components independent of specific technology stacks such as iOS, Android, and Web, providing a unified structured description foundation for subsequent multi-platform code generation.

[0033] S42 establishes conversion rules for each of the described elements for different terminal platforms, and standardizes and encapsulates the described elements and their conversion rules to form a unified description of the layout, style, and interaction logic of the target component. Optionally, this standardization and encapsulation process is implemented in the following ways: defining the corresponding native component or custom component class name for the component type identifier in each target platform, such as Web / React, iOS / SwiftUI, Android / Jetpack Compose; establishing cross-platform attribute name mapping and value conversion rules for the configurable attribute set, such as mapping the abstract "primary color" attribute to a CSS variable, UIColor, or Color resource identifier; configuring cross-platform event binding and callback mechanisms for the supported event list, such as converting the onClick event to a click listener for Web, a TapGesture for iOS, or an OnClickListener for Android; and implementing platform-specific nesting syntax or layout container adaptation rules for the relationships between the child components that can be contained. By structurally encapsulating these conversion rules, a reusable and extensible rule library is formed, thereby enabling the generation of specific implementation code that conforms to the technical specifications of each platform based on the same set of abstract described elements, while maintaining the consistency of the core design intent.

[0034] S43 employs a template- and rule-based code generation engine to synchronously generate component code applicable to at least two different platforms—Web, mobile, and desktop—based on the unified description. Optionally, this synchronous code generation process is implemented as follows: the code generation engine loads predefined code templates for each target platform, the templates containing platform-specific basic code structures and placeholders; the engine matches the corresponding template based on the component type identifier in the unified description, and converts the abstract description into platform-specific attribute assignment, event binding code, and subcomponent nesting structures by parsing the configurable attribute set, supported event list, and subcomponent relationships, combined with a conversion rule library; during the generation process, parallel or pipelined processing is performed on multiple platforms to ensure that standardized source code files conforming to technical specifications such as Web (e.g., React / Vue components), mobile (e.g., Swift / Kotlin UI code), and desktop (e.g., Electron / WPF controls) can be synchronously output based on the same unified description.

[0035] S44 performs real-time preview and interactive debugging of the generated component code for at least two different terminal platforms within an integrated sandbox environment. Optionally, this real-time preview and interactive debugging process is implemented in the following ways: An integrated sandbox environment is built, which can simultaneously load and run component code generated for different target platforms; the generated component code is rendered into a visual interface in real time using a platform-adapted rendering engine; a unified interactive debugging interface is provided, allowing developers to simulate user operations, view status, and adjust styles for components on different platform versions within the same environment; a multi-terminal synchronized debugging information feedback mechanism is established to perform real-time comparison and visual annotation of issues such as layout differences and inconsistent interactive responses, supporting consistency verification and problem localization of cross-platform component behavior.

[0036] S45 uses a consistency verification tool to compare and verify the consistency of visual presentation and interactive behavior of components on at least two different platforms. Optionally, this consistency verification process is implemented in the following ways: the consistency verification tool captures and analyzes the rendering output of components on each platform under the same test environment. At the visual level, it detects differences in size, color, font, or relative position between different platforms through image pixel comparison, key area layout parameter measurement, and style attribute extraction. At the interactive behavior level, it simulates standardized user operation sequences, records and compares the state changes, event response timing, and interface feedback results of components on each platform, and identifies inconsistencies in functional logic or response performance. The verification results will be output in the form of a structured report, indicating the specific location and degree of deviation of the differences.

[0037] S50 performs quality assessment and optimization on generated visualization components. In the financial sector, it assesses and optimizes the quality of generated investment dashboards, transaction forms, and other visualization components. By testing the accuracy of data binding, the compliant display of risk warnings, and the smoothness of high-frequency trading operations, it ensures that the components meet financial-grade application standards in terms of business security, information accuracy, and operational performance, thereby building a stable, reliable, and professional financial service interface. In the medical field, it assesses and optimizes the quality of generated electronic medical record views, clinical decision support panels, and other visualization components. By verifying the accuracy of medical data rendering, the timeliness of clinical alarm triggering, and the logical correctness of multi-parameter linkage, it ensures that the components meet medical application requirements in terms of information accuracy, effectiveness of assisted diagnosis, and adaptability to clinical workflows, thereby supporting a secure, efficient, and reliable medical information interaction environment.

[0038] Specifically, such as Figure 6 The above, Figure 6 This is a flowchart illustrating a specific implementation of step S50, which specifically includes the following steps S51-S55: S51 establishes a quality assessment model to evaluate the visualization component across multiple dimensions, including code style, performance metrics, accessibility, and maintainability. Optionally, the establishment and evaluation process of this quality assessment model is implemented in the following ways: In terms of code style, static code analysis tools are used to check whether the generated component code conforms to the coding standards, naming conventions, and best practices of each platform; in terms of performance metrics, runtime performance testing is used to obtain quantitative data such as component loading time, rendering frame rate, and memory usage; in terms of accessibility, automated testing tools are used to verify whether the component meets accessibility design standards, such as whether it has sufficient color contrast and whether it supports screen readers and keyboard navigation; in terms of maintainability, structural complexity analysis, dependency detection, and documentation integrity checks are used to evaluate the code's understandability and scalability. The evaluation results of each dimension will be presented comprehensively through weighted scoring or radar charts, providing a quantitative basis for component optimization.

[0039] Based on the evaluation results, S52 generates automated refactoring suggestions for the visualized component based on static analysis and code difference detection. Optionally, the generation of these automated refactoring suggestions is achieved through the following methods: Deeply scanning the structure, patterns, and potential defects of the component code using static analysis tools to identify code segments that violate best practices or have room for optimization; simultaneously, comparing the differences between the current generated version and the ideal template or historical high-quality samples using a code difference detection mechanism to pinpoint specific areas for improvement; the system matches the above analysis results with a preset refactoring rule base to generate a structured suggestion list containing specific modification locations, suggested refactoring operations, such as extracting common functions, merging duplicate styles, optimizing component splitting, and expected improvement effects. This list can be directly integrated into the development environment or code review process.

[0040] S53 generates or associates corresponding unit test and integration test cases for the visualization component. Optionally, the generation and association of these test cases are achieved through the following methods: based on the attribute configuration, event handling logic, and state transition rules of the visualization component, the system automatically generates corresponding unit test code using a template method to verify whether the independent functional behavior of the component meets expectations. Simultaneously, based on the integration relationship and interaction flow definition of the component in the application, integration test scripts simulating user operation sequences and multi-component collaborative scenarios are generated. The generated test cases adopt a standard test framework format and establish a bidirectional association with component version information, supporting automated test execution, result verification, and coverage analysis.

[0041] S54 constructs a dynamic user profile system, updating user preferences and design habits in real time based on user behavior data. Optionally, the construction and updating of this dynamic user profile system are achieved through the following methods: the system continuously collects user interaction behavior data on the interface, including but not limited to component usage frequency, operation path, style adjustment records, and function preference settings; the data is processed in real time through a behavior analysis model to identify the user's design pattern preferences, interaction habits, and personalized needs; based on the analysis results, the feature tags and preference weights in the user profile are dynamically updated, and the updated profile data is fed back to the component recommendation and generation system to provide data support for subsequent personalized interface adaptation.

[0042] S55 recommends matching components from the component knowledge graph by analyzing the current design task, project specifications, technology stack, and user profile. Optionally, this recommendation process is implemented through the following steps: the system performs multi-dimensional feature extraction and encoding on the current design task's requirement description, project specification document, technology stack constraints, and dynamic user profile; it calculates and matches the similarity of these feature vectors with component entities, attributes, and relationships in the component knowledge graph; based on the matching results, combined with the component's historical usage effect, team preferences, and compatibility information recorded in the graph, it uses a ranking algorithm to filter and output a list of candidate components that best match the current context and their recommendation basis.

[0043] S56 feeds the results of the personalized recommendation and quality assessment back to the component knowledge graph to continuously optimize the component generation effect. Optionally, this feedback optimization process is implemented in the following ways: using the component ultimately adopted by the user during the personalized recommendation process and its usage context as positive feedback signals to update the weights and relationships of the corresponding entities in the component knowledge graph; simultaneously, using the component defects, performance bottlenecks, and optimization suggestions found in the quality assessment results as structural feedback to correct and enrich the attribute information and constraints of the components in the graph. This feedback data is integrated into the knowledge graph through an incremental learning mechanism, enabling it to dynamically reflect the latest design preferences, technological trends, and quality standards, providing a knowledge foundation for continuous optimization of subsequent component generation and recommendation.

[0044] As can be seen, in the above solution, by understanding the semantics of business requirements through component knowledge graphs and semantic mapping models, and transforming them into specific design and development constraints, the generated components not only meet the implementation specifications, but also fit the original business intent, thus improving the business fit of the component output. Through an automated multi-terminal code generation and synchronous verification mechanism based on unified description specifications, the consistency of the visuals and interactions of the generated components on different terminal platforms is ensured, eliminating repetitive work and experience deviations in multi-terminal adaptation.

[0045] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0046] In one embodiment, a visualization component generation apparatus is provided, which corresponds one-to-one with the data processing method for insurance business described in the above embodiments. For example... Figure 7 As shown, Figure 7 This is a schematic diagram of a data processing device for insurance business according to an embodiment of the present invention. The data processing device for insurance business includes a multi-source data acquisition module 71, a knowledge graph construction module 72, a component generation module 73, and a multi-terminal rendering and verification module 74. Detailed descriptions of each functional module are as follows: The multi-source data acquisition module 71 is used to acquire multi-source component data, including design drafts, code, and business documents. The knowledge graph construction module 72 is used to parse and process the multi-source component data to extract component entities and identify the layout, style and interaction attributes of the component entities, establish the association relationship between the component entities through semantic relationship mining, and construct a component knowledge graph. The component generation module 73 is used to obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints. The multi-terminal rendering and verification module 74 is used to convert the layout, style and interaction logic of the target component into component code that is adapted to different terminal platforms according to the preset component description specifications, and to perform multi-terminal synchronous rendering and consistency verification to generate and output a visual component that maintains visual and interactive consistency on the Web terminal, mobile terminal and desktop terminal.

[0047] In one embodiment, the knowledge graph construction module 72 is specifically used for: A deep learning-based UI parser automatically extracts component entities and their layout, style, and interaction attributes from the design drafts, code, and business documents. By using graph neural networks to analyze the extracted component entities, we can construct and store the inheritance, composition, and dependency relationships between component entities to form a component semantic association network. Based on the component entities, attributes, and the relationships constructed, a component knowledge graph is formed.

[0048] In one embodiment, the component generation module 73 is specifically used for: Based on natural language processing algorithms, semantic analysis and understanding of the business requirement input are performed. Based on the component entities, attributes, and relationships in the component knowledge graph, the semantically analyzed business requirements are mapped to the component design constraints. The layout and style of the target component are generated based on the design constraints using adversarial networks and reinforcement learning methods. Based on the functional logic contained in the design constraints, the interaction logic of the target component is generated through a rule engine and a state machine model.

[0049] In one embodiment, the multi-terminal rendering and verification module 74 is specifically used for: Define a set of component description elements that are independent of the specific implementation platform. The description elements include at least a component type identifier, a set of configurable attributes, a list of supported events, and the relationships between the sub-components that can be included. For each of the described elements, conversion rules for different terminal platforms are established. The described elements and their conversion rules are standardized and encapsulated to form a unified description of the layout, style and interaction logic of the target component. A template- and rule-based code generation engine is used to synchronously generate component code applicable to at least two different platforms, namely Web, mobile and desktop, based on the unified description. In an integrated sandbox environment, the generated component code for at least two different terminal platforms can be previewed and interactively debugged in real time. The consistency verification tool is used to compare and verify the consistency of visual presentation and interactive behavior of components on at least two different platforms.

[0050] In one embodiment, the visualization component generation apparatus is further configured to: A quality assessment model is established to evaluate the visualization component across multiple dimensions, including code style, performance metrics, accessibility, and maintainability. Based on the evaluation results, and using static analysis and code difference detection, automated refactoring suggestions are generated for the visualization components. Generate or associate corresponding unit test and integration test cases for the visualization components; Build a dynamic user profile system to update user preferences and design habits in real time based on user behavior data; By analyzing the current design task, project specifications, technology stack, and user profile, matching components are recommended from the component knowledge graph; The results of the personalized recommendations and quality assessments are fed back into the component knowledge graph to continuously optimize the component generation effect.

[0051] This invention provides a visual component generation device that understands business requirement semantics through a component knowledge graph and semantic mapping model, and transforms them into specific design and development constraints. This enables the generated components to not only meet implementation specifications but also fit the original business intent, improving the business fit of the component output. Through an automated multi-terminal code generation and synchronous verification mechanism based on a unified description specification, the consistency of the generated components in terms of visuals and interactions across different terminal platforms is ensured, eliminating repetitive work and experience deviations in multi-terminal adaptation.

[0052] Specific limitations regarding the visualization component generation device can be found in the limitations of the visualization component generation method described above, and will not be repeated here. Each module in the aforementioned visualization component generation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device in hardware form, or stored in the memory of a computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0053] In one embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 8 As shown, Figure 8 This is a schematic diagram of a computer device according to an embodiment of the present invention. The computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile and / or volatile storage media and internal memory. The non-volatile storage media stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The network interface is used to communicate with external clients via a network connection. When the computer program is executed by the processor, it implements the functions or steps of a data processing method for insurance business on the server side.

[0054] In one embodiment, a computer device is provided, which may be a client, and its internal structure diagram may be as follows: Figure 9 As shown, Figure 9 This is another schematic diagram of a computer device according to an embodiment of the present invention. The computer device includes a processor, memory, network interface, display screen, and input device connected via a system bus. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The network interface is used to communicate with an external server via a network connection. When the computer program is executed by the processor, it implements the functions or steps of a client-side visualization component generation method.

[0055] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: Acquire multi-source component data, including design drafts, code, and business documents; The multi-source component data is parsed and processed to extract component entities and identify the layout, style and interaction attributes of the component entities. The association between the component entities is established through semantic relationship mining, and a component knowledge graph is constructed. Obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints; Based on the preset component description specifications, the layout, style and interaction logic of the target component are converted into component code that adapts to different terminal platforms, and multi-terminal synchronous rendering and consistency verification are performed to generate and output a visual component that maintains visual and interactive consistency on the Web, mobile and desktop terminals.

[0056] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, the computer program performing the following steps when executed by a processor: Acquire multi-source component data, including design drafts, code, and business documents; The multi-source component data is parsed and processed to extract component entities and identify the layout, style and interaction attributes of the component entities. The association between the component entities is established through semantic relationship mining, and a component knowledge graph is constructed. Obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints; Based on the preset component description specifications, the layout, style and interaction logic of the target component are converted into component code that adapts to different terminal platforms, and multi-terminal synchronous rendering and consistency verification are performed to generate and output a visual component that maintains visual and interactive consistency on the Web, mobile and desktop terminals.

[0057] It should be noted that the functions or steps that can be implemented by the computer-readable storage medium or computer device described above can be referred to the relevant descriptions on the server side and client side in the foregoing method embodiments. To avoid repetition, they will not be described one by one here.

[0058] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0059] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0060] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A method for generating visual components, characterized in that, include: Acquire multi-source component data, including design drafts, code, and business documents; The multi-source component data is parsed and processed to extract component entities and identify the layout, style and interaction attributes of the component entities. The association between the component entities is established through semantic relationship mining, and a component knowledge graph is constructed. Obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints; Based on the preset component description specifications, the layout, style and interaction logic of the target component are converted into component code that adapts to different terminal platforms, and multi-terminal synchronous rendering and consistency verification are performed to generate and output a visual component that maintains visual and interactive consistency on the Web, mobile and desktop terminals.

2. The method for generating a visualization component as described in claim 1, characterized in that, The step of parsing and processing the multi-source component data, establishing the relationships between component entities through semantic relationship mining, and constructing a component knowledge graph includes: A deep learning-based UI parser automatically extracts component entities and their layout, style, and interaction attributes from the design drafts, code, and business documents. By using graph neural networks to analyze the extracted component entities, we can construct and store the inheritance, composition, and dependency relationships between component entities to form a component semantic association network. Based on the component entities, attributes, and the relationships constructed, a component knowledge graph is formed.

3. The method for generating a visualization component as described in claim 1, characterized in that, The process of obtaining business requirement input, based on the component knowledge graph, involves transforming the business requirement input into component design constraints through a semantic mapping model, including: Based on natural language processing algorithms, semantic analysis and understanding of the business requirement input are performed. Based on the component entities, attributes, and relationships in the component knowledge graph, semantically analyzed business requirements are mapped to component design constraints.

4. The method for generating a visualization component as described in claim 1, characterized in that, The generation of the layout, style, and interaction logic of the target component based on the design constraints includes: The layout and style of the target component are generated based on the design constraints using adversarial networks and reinforcement learning methods. Based on the functional logic contained in the design constraints, the interaction logic of the target component is generated through a rule engine and a state machine model.

5. The method for generating a visualization component as described in claim 1, characterized in that, The pre-defined component description specification converts the layout, style, and interaction logic of the target component into component code adapted to different terminal platforms, and performs multi-terminal synchronous rendering and consistency verification, including: Define a set of component description elements that are independent of the specific implementation platform. The description elements include at least a component type identifier, a set of configurable attributes, a list of supported events, and the relationships between the sub-components that can be included. For each of the described elements, conversion rules for different terminal platforms are established. The described elements and their conversion rules are standardized and encapsulated to form a unified description of the layout, style and interaction logic of the target component. A template- and rule-based code generation engine is used to synchronously generate component code applicable to at least two different platforms, namely Web, mobile and desktop, based on the unified description. In an integrated sandbox environment, the generated component code for at least two different terminal platforms can be previewed and interactively debugged in real time. The consistency verification tool is used to compare and verify the consistency of visual presentation and interactive behavior of components on at least two different platforms.

6. The method for generating a visualization component as described in claim 1, characterized in that, The generation method also includes quality evaluation and optimization of the generated visualization components, including: A quality assessment model is established to evaluate the visualization component across multiple dimensions, including code style, performance metrics, accessibility, and maintainability. Based on the evaluation results, and using static analysis and code difference detection, automated refactoring suggestions are generated for the visualization components. Generate or associate corresponding unit test and integration test cases for the visualization components.

7. The method for generating a visualization component as described in claim 1, characterized in that, The quality assessment and optimization of the generated visualization components also includes: Build a dynamic user profile system to update user preferences and design habits in real time based on user behavior data; By analyzing the current design task, project specifications, technology stack, and user profile, matching components are recommended from the component knowledge graph; The results of the personalized recommendations and quality assessments are fed back into the component knowledge graph to continuously optimize the component generation effect.

8. A visualization component generation device, characterized in that, include: The multi-source data acquisition module is used to acquire multi-source component data, including design drafts, code, and business documents; The knowledge graph construction module is used to parse and process the multi-source component data to extract component entities and identify the layout, style and interaction attributes of the component entities. It establishes the association between the component entities through semantic relationship mining and constructs a component knowledge graph. The component generation module is used to obtain business requirement input, and based on the component knowledge graph, transform the business requirement input into component design constraints through a semantic mapping model, and generate the layout, style and interaction logic of the target component based on the design constraints. The multi-terminal rendering and verification module is used to convert the layout, style and interaction logic of the target component into component code that is adapted to different terminal platforms according to the preset component description specifications, and to perform multi-terminal synchronous rendering and consistency verification to generate and output a visual component that maintains visual and interactive consistency on the Web, mobile and desktop terminals.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the visualization component generation method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the visualization component generation method as described in any one of claims 1 to 7.

Images