Visual design processing system based on metadata driving

Abstract

The embodiment of the invention provides a visual design processing system based on metadata driving, and the system comprises a metadata loading module which is used for reading and analyzing a metadata definition in a storage medium; the visual design module is used for providing a graphical design interface and receiving user operation; the attribute configuration module is used for providing a component attribute editing function; the real-time rendering module is used for directly reading the metadata and generating visual output; the metadata operation module is used for providing a direct operation interface for metadata; the version management module is used for recording the modification history of the metadata; the persistent storage module is used for storing the metadata in a storage medium; an intermediate conversion link is eliminated through a metadata direct reading technology, real real-time design and preview synchronization is realized, the learning cost and the use threshold are greatly reduced, cross-platform and cross-framework use of a design result is ensured by adopting a declarative metadata description mode, the portability and reusability of metadata are improved, and the development efficiency is remarkably improved.

Description

Technical Field

[0001] The embodiments in this specification relate to the field of design and development technology, and in particular to a metadata-driven visual design processing system. Background Technology

[0002] Currently, low-code development platforms generally adopt intermediate code generation methods. During the design phase, an intermediate representation needs to be created and then converted into executable code. This results in problems such as low conversion efficiency, poor real-time performance, and difficulty in debugging. Users cannot directly see the final effect and need to compile and preview frequently, which seriously affects the development experience and efficiency.

[0003] Therefore, a better solution is urgently needed. Summary of the Invention

[0004] In view of this, the embodiments of this specification provide a metadata-driven visual design processing system to address the technical deficiencies existing in the prior art.

[0005] According to a first aspect of the embodiments of this specification, a metadata-driven visual design processing system is provided, comprising: The metadata loading module is used to read and parse metadata definitions in the storage medium; The visual design module provides a graphical design interface and receives user input. The property configuration module provides component property editing functionality; The real-time rendering module is used to directly read metadata and generate visualization output; The metadata manipulation module provides a direct interface for manipulating metadata. The version management module is used to record the modification history of metadata; The persistent storage module is used to save metadata to the storage medium; After initializing the environment and loading the component library, the system reads or creates a metadata framework, enters the main design loop, waits for the user to add components or modify properties by dragging and dropping, updates the metadata in real time and triggers re-rendering, provides an isolated preview environment, and finally saves the metadata to persistent storage.

[0006] In one possible implementation, the metadata loading module supports importing multiple metadata formats, including JSON, XML, and YAML, and can automatically identify metadata versions and integrity, perform compatibility conversions, and data repair.

[0007] In one possible implementation, the visual design module includes a component selection panel, a design canvas, and a component tree view. The component selection panel displays available components categorized by function, the design canvas uses an absolute positioning layout system, and the component tree view displays the relationships between components in the design in a hierarchical structure.

[0008] In one possible implementation, the property configuration module automatically displays configurable properties when a component is selected, and provides corresponding input controls based on the property type, including text input boxes, numeric adjusters, color pickers, drop-down lists, and Boolean switches.

[0009] In one possible implementation, the real-time rendering module includes a metadata parsing engine and a rendering engine. The metadata parsing engine analyzes the metadata structure in real time, extracts component types, attributes, and layout information, and the rendering engine dynamically creates and updates UI components based on the parsing results.

[0010] In one possible implementation, the rendering engine uses a difference comparison algorithm to calculate the view update range, and the update calculation formula is as follows:

[0011] in, Indicates the view update priority. This indicates the total number of components in the current canvas. This indicates the total number of modifiable properties for each component. Indicates the first The first component The weight coefficients of each attribute, Indicates the first The first component The amount of change in each attribute Indicates the first The display area of ​​each component. Represents the total area of ​​the canvas; weighting coefficient Rendering priority and property change amount defined in the component's property metadata User modification history from the attribute configuration module, component display area Layout calculation results from the real-time rendering module, total canvas area Fixed size derived from the design canvas.

[0012] In one possible implementation, the metadata operation module implements a metadata operation API, supporting batch operations, transactional operations, and undo / redo functionality. All modifications are verified to ensure data consistency and integrity.

[0013] In one possible implementation, the version management module creates version snapshots and records the modification time, author, and modification description, supporting version rollback and comparison functions.

[0014] In one possible implementation, the persistent storage module supports multiple storage backends, including local file systems, databases, and cloud storage services, and employs an incremental save strategy to reduce IO overhead.

[0015] In one possible implementation, the version management module calculates the amount of metadata changes, and its version difference calculation formula is:

[0016] in, Indicates the degree of version difference. This indicates the total number of versionable parameters in the metadata. Indicates the first Importance coefficients of each parameter Indicates the current version of the The values ​​of the parameters, Indicates the first in the previous version The values ​​of the parameters, Indicates the number of components that have changed. Indicates the maximum number of components allowed by the system; importance coefficient. Parameter values ​​derived from metadata schema definition and Snapshot comparison from the version management module, number of changed components Modification statistics from the metadata operation module, maximum number of components From system configuration parameters.

[0017] This specification provides a metadata-driven visual design processing system, comprising: a metadata loading module for reading and parsing metadata definitions in a storage medium; a visual design module for providing a graphical design interface and receiving user operations; an attribute configuration module for providing component attribute editing functions; a real-time rendering module for directly reading metadata and generating visual output; a metadata operation module for providing a direct interface for manipulating metadata; a version management module for recording the modification history of metadata; and a persistent storage module for saving metadata to a storage medium. The system initializes the environment and loads the component library before reading or creating a metadata framework. It then enters the main design loop, waiting for users to add components or modify attributes via drag-and-drop. The system updates metadata in real time and triggers re-rendering, providing an isolated preview environment, and finally saves the metadata to persistent storage. By eliminating intermediate conversion steps through direct metadata reading technology, it achieves true real-time design and preview synchronization, significantly reducing learning costs and the barrier to entry. The declarative metadata description method ensures that design results can be used across platforms and frameworks, improving metadata portability and reusability, and significantly enhancing development efficiency. Attached Figure Description

[0018] Figure 1 This is a system diagram of a metadata-driven visual design processing system provided in one embodiment of this specification. Detailed Implementation

[0019] Many specific details are set forth in the following description to provide a full understanding of this specification. However, this specification can be implemented in many other ways than those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this specification. Therefore, this specification is not limited to the specific implementations disclosed below.

[0020] The terminology used in one or more embodiments of this specification is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of this specification. The singular forms “a” and “the” as used in one or more embodiments of this specification and the appended claims are also intended to include the plural forms, unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in one or more embodiments of this specification refers to and includes any or all possible combinations of one or more associated listed items.

[0021] It should be understood that although the terms first, second, etc., may be used to describe various information in one or more embodiments of this specification, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, first may also be referred to as second without departing from the scope of one or more embodiments of this specification, and similarly, second may also be referred to as first. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to a determination."

[0022] This specification provides a metadata-driven visual design processing system, which will be described in detail in the following embodiments.

[0023] See Figure 1 , Figure 1 This diagram illustrates a system schematic of a metadata-driven visual design processing system according to an embodiment of this specification. Specifically, it includes a metadata loading module for reading and parsing metadata definitions in a storage medium; a visual design module for providing a graphical design interface and receiving user operations; an attribute configuration module for providing component attribute editing functions; a real-time rendering module for directly reading metadata and generating visual output; a metadata operation module for providing a direct interface for manipulating metadata; a version management module for recording the modification history of metadata; and a persistent storage module for saving metadata to a storage medium. The system initializes the environment and loads the component library before reading or creating a metadata framework. It then enters the main design loop, waiting for the user to add components or modify attributes via drag-and-drop. The system updates the metadata in real-time and triggers re-rendering, providing an isolated preview environment, and finally saves the metadata to persistent storage.

[0024] The metadata loading module refers to a system component responsible for reading and parsing metadata from storage devices. It reads and parses metadata definitions from the storage medium. The storage medium can refer to the physical or logical device that stores data and is capable of storing metadata definitions. Metadata definitions describe data structures and attributes, defining component configurations and relationships. The visual design module provides a graphical interface to receive user design input. The graphical design interface displays design elements and receives operations. User operations trigger system responses. The attribute configuration module allows editing component attributes, modifying the component's visual and behavioral characteristics. Component attribute editing functionality allows adjusting component parameters to customize the component's appearance and functionality. The real-time rendering module directly processes metadata and generates visual output, updating the interface display in real-time. Metadata describes application structure and component definitions, storing configuration information. Visual output refers to the system-generated graphical representation showcasing design effects. The metadata operation module provides metadata read / write interfaces for performing query and modification operations. Direct operation interface refers to APIs that allow programmatic access to metadata, ensuring data consistency. Version management module refers to the system portion that records metadata change history, tracking modification records. Modification history refers to the log of metadata version changes, supporting backtracking and comparison. Persistent storage module refers to the component that saves metadata to persistent storage, ensuring data durability. System refers to the entire visual design processing platform, coordinating the operation of various modules. Initialization environment refers to the configuration process during system startup, loading necessary resources. Component library refers to a collection of predefined components providing design elements. Metadata framework refers to the basic structure and schema of metadata, defining how data is organized. Design main loop refers to the core loop of the system waiting for user input, handling continuous interaction. Drag-and-drop component addition refers to the user adding new components via drag-and-drop, simplifying the design process. Modifying properties refers to the user adjusting component parameters, updating metadata in real time. Real-time update refers to the process of immediately reflecting metadata changes to maintain data synchronization. Re-rendering refers to the mechanism that redraws the interface based on metadata changes, refreshing the display. An isolated preview environment refers to a preview area independent of the design environment, capable of displaying the final effect. Saving refers to the operation of writing metadata to storage media, ensuring data persistence.

[0025] As a concrete example: After the user starts the system, the initialization environment loads the component library, including 50 predefined components such as buttons and text boxes, reads the existing metadata framework fromJSON file, and enters the main design loop; the user drags and drops a button component from the graphical design interface to add a canvas, the attribute configuration module displays the button's attributes such as text and color, the user changes the text to "Submit" and the color to blue, the real-time rendering module directly reads the metadata and updates the visual output, showing the button's real-time changes; the user clicks preview, the isolated preview environment displays the final interface simulating real operation; after the user confirms, the persistent storage module saves the metadata to the MySQL database, and the version management module records the modification history, including the timestamp and user ID.

[0026] This invention eliminates intermediate conversion steps through direct metadata reading technology, enabling true real-time design and preview synchronization, significantly reducing learning costs and usage barriers. It adopts a declarative metadata description method to ensure that design results can be used across platforms and frameworks, improving metadata portability and reusability, significantly enhancing development efficiency. At the same time, version management and persistent storage enhance data reliability and maintainability, providing users with a smooth and intuitive design experience.

[0027] In one possible implementation, the metadata loading module supports importing multiple metadata formats, including JSON, XML, and YAML, and can automatically identify metadata versions and integrity, perform compatibility conversions, and data repair.

[0028] Metadata format import refers to the system's ability to accept different structured data formats, supporting multiple data sources. JSON format refers to a lightweight data exchange format capable of storing and transmitting structured data. XML format refers to an Extensible Markup Language format, capable of storing hierarchical data with tags. YAML format refers to a human-readable data serialization standard for expressing data structure and content. Automatic identification refers to the system's function of automatically detecting data characteristics to determine metadata attributes and types. Metadata version refers to the iteration identifier of the metadata structure, distinguishing specifications from different periods. Integrity refers to the state of metadata being complete and error-free, ensuring that all necessary data exists. Compatibility conversion refers to the process of converting data from one format to another to achieve system compatibility. Data repair refers to operations that correct metadata errors or missing data to restore data integrity.

[0029] As a concrete example: The user selects to import a YAML metadata file containing component definitions for version 2.3; the metadata loading module automatically identifies the file format and version, and detects that the file is missing the necessary layout attribute; the system performs data repair, adding the layout attribute according to the default rules and setting it to absolute; then a compatibility conversion is performed, converting the YAML format to the JSON format used internally by the system; the converted metadata is fully loaded into the design environment, and the user can begin visual editing operations.

[0030] This invention enhances system compatibility and flexibility by supporting the import of multiple metadata formats, ensures accurate processing of data from different sources by automatic identification, guarantees seamless connection between new and old data by version identification and compatibility conversion, and effectively improves metadata quality and reliability by data repair function, ultimately providing users with a smoother and more reliable data import experience.

[0031] In one possible implementation, the visual design module includes a component selection panel, a design canvas, and a component tree view. The component selection panel displays available components categorized by function, the design canvas uses an absolute positioning layout system, and the component tree view displays the relationships between components in the design in a hierarchical structure.

[0032] The component selection panel is a visual area showcasing available components, used to present design elements by category. The design canvas is the main workspace for users to layout and arrange components, supporting visual design operations. The component tree view is a panel that displays the hierarchical relationship of components in a tree structure, intuitively showing component nesting relationships. Functional categorization refers to a method of grouping components according to their purpose, helping users quickly locate the required components. Available components refer to predefined design elements available in the system for building user interfaces. The absolute positioning layout system refers to a layout method based on precise coordinate positioning of components, used to achieve pixel-level precise control. The hierarchical structure refers to the parent-child containment relationship between components, reflecting the organization of the interface structure. Component relationships refer to the association and hierarchical structure between different components, describing the logical connections between interface elements.

[0033] As a concrete example: After a user opens the system, the left side of the component selection panel displays available components categorized by function, including eight categories such as form controls, container components, and data display. The user drags a button component from the form controls category onto the design canvas. The canvas uses an absolute positioning layout system that allows users to precisely adjust the button's position to x=100px, y=50px. The user then adds a panel container and drags the button into it. The component tree view immediately displays the parent-child relationship between the panel and the button in a hierarchical structure. The user can directly select the button component nested in the panel through the component tree view and view the changes in component relationships on the canvas in real time.

[0034] This invention improves component search efficiency through the functional classification display of the component selection panel, provides precise component placement control through the absolute positioning layout system of the design canvas, and clearly presents component relationships through the hierarchical structure display of the component tree view. The collaboration of these three elements greatly enhances the intuitiveness and operational efficiency of interface design, providing users with a clearer and more efficient visual design experience.

[0035] In one possible implementation, the property configuration module automatically displays configurable properties when a component is selected, and provides corresponding input controls based on the property type, including text input boxes, numeric adjusters, color pickers, drop-down lists, and Boolean switches.

[0036] The attribute configuration module refers to the functional unit responsible for managing component attribute editing, providing an interactive interface for attribute modification. Component selection refers to the user's operation state when selecting a specific component, triggering the attribute display mechanism. Configurable attributes refer to the set of parameters within a component that users can modify, adjusting the component's appearance and behavior. Attribute type refers to the data category of the attribute to determine the appropriate editing control. Input controls refer to interface elements used to receive user input for collecting attribute values. Text input boxes refer to controls that allow text input, receiving string-type attribute values. Numeric adjusters refer to input boxes with increase and decrease buttons for precise control of numerical attributes. Color pickers refer to visual controls providing color selection functionality for setting color-related attributes. Drop-down lists refer to selection controls providing preset options for choosing attribute values ​​from a limited selection. Boolean switches refer to toggle switches representing true / false states, enabling the setting of binary attributes.

[0037] As a concrete example: When a user selects a text label component on the design canvas, the attribute configuration module automatically displays 12 configurable attributes of the component in the right panel. Based on the attribute type, the system provides corresponding input controls: the text content attribute displays a text input box that allows the input of "Welcome", the font size attribute displays a numeric adjuster that can be adjusted to 16px, the color attribute displays a color picker that selects a blue background, the alignment attribute displays a drop-down list that provides left, center, and right options, and the visibility attribute displays a Boolean switch that is set to the on state. All attribute modifications are synchronized to the metadata in real time and immediately reflected on the design canvas.

[0038] This invention simplifies the user operation process by automatically displaying configurable attributes, improves editing efficiency by intelligently matching input controls according to attribute type, ensures the accuracy and convenience of attribute settings by multiple dedicated input controls, and guarantees that attribute modifications take effect immediately by a real-time synchronization mechanism. Overall, it significantly improves the intuitiveness and operational efficiency of component attribute configuration.

[0039] In one possible implementation, the real-time rendering module includes a metadata parsing engine and a rendering engine. The metadata parsing engine analyzes the metadata structure in real time, extracts component types, attributes, and layout information, and the rendering engine dynamically creates and updates UI components based on the parsing results.

[0040] Metadata structure refers to the organization and relationship definitions within metadata, used to describe the associations and configuration rules between components. Component type refers to the classification identifier of a component, distinguishing different types of interface elements. Layout information refers to the position and size data of a component in the interface, controlling its arrangement and display. Parsing results refer to the structured data output by the metadata parsing engine, providing complete information needed for rendering. UI components refer to the visual elements in the user interface, used to build the application's interactive interface.

[0041] As a concrete example: when a user modifies the text attribute of a button component, the metadata parsing engine analyzes the metadata structure in real time, extracts the component type of the button as Basic Button, the attributes including text and color, and the layout information including x / y coordinates and size; the parsing result is passed to the rendering engine, which dynamically creates the corresponding UI component instance, updates the button's text label and color style, and immediately displays the modified effect on the design canvas. The entire process is completed within 200 milliseconds.

[0042] This invention ensures data accuracy by using a metadata parsing engine to analyze data structures and extract key information in real time, while a rendering engine dynamically creates and updates UI components based on the parsing results to provide instant visual feedback. The two work together to provide a seamless real-time rendering experience, significantly improving design efficiency and reducing development complexity.

[0043] In one possible implementation, the rendering engine uses a difference comparison algorithm to calculate the view update range, and the update calculation formula is as follows:

[0044] in, Indicates the view update priority. This indicates the total number of components in the current canvas. This indicates the total number of modifiable properties for each component. Indicates the first The first component The weight coefficients of each attribute, Indicates the first The first component The amount of change in each attribute Indicates the first The display area of ​​each component. Represents the total area of ​​the canvas; weighting coefficient Rendering priority and property change amount defined in the component's property metadata User modification history from the attribute configuration module, component display area Layout calculation results from the real-time rendering module, total canvas area Fixed size derived from the design canvas.

[0045] Among these, the difference comparison algorithm refers to a calculation method that compares data changes and determines the update range, used to optimize rendering performance. The view update range refers to the interface area that needs to be re-rendered, defining the boundaries of visual updates. The update calculation formula can be a priority calculation model in mathematical form, quantifying the urgency of updates. View update priority refers to the ranking of the importance of view element updates to determine the rendering order. The total number of components in the current canvas refers to the statistical count of existing components within the canvas, used to calculate the update range. The total number of modifiable attributes for each component refers to the number of parameters that a single component can edit, affecting the complexity of update calculations. Weight coefficients are numerical factors representing the importance of attributes, used to adjust the influence of attribute changes in update calculations. Attribute change magnitude refers to the measure of the magnitude of attribute value modification, reflecting the degree of data change. Display area refers to the size of the visual area occupied by a component on the canvas, affecting update priority calculation. Total canvas area refers to the total size of the design canvas, providing a basis for area calculation. Rendering priority refers to the importance level of attributes during the rendering process, used to determine the assignment of weight coefficients. User modification history refers to the historical data of changes made by users to attributes, providing a basis for calculating the amount of change. Layout calculation results refer to the component positions and dimensions calculated by the layout system, which can determine the display area value. Fixed dimensions refer to the preset, unchangeable size parameters of the design canvas, used to provide a baseline value for the total area.

[0046] As a concrete example: A user simultaneously modifies the properties of three components in the canvas, including the background color of a large container component (weight coefficient 0.8, change amount 1.0, area 40,000 pixels) and the font size of two small text components (weight coefficient 0.6, change amount 0.5, area 2,000 pixels each). The rendering engine uses a difference comparison algorithm to calculate the update priority. According to the update calculation formula, the update priority of the container component is 0.8 × 1.0 × 40,000 / 1,000,000 = 0.032, and the update priority of the text components is 0.6 × 0.5 × 2,000 / 1,000,000 = 0.0006. The system updates the container component first and then the text components, ensuring that the most visually important changes perceived by the user are completed first.

[0047] This invention uses a difference comparison algorithm to intelligently calculate the view update range, employs a mathematical priority calculation model to ensure that important changes are rendered first, accurately quantifies update requirements based on weight coefficients and changes, and provides a scientific basis for rendering decisions by combining display area factors, ultimately achieving efficient and reasonable allocation of rendering resources and a smooth user visual experience.

[0048] In one possible implementation, the metadata operation module implements a metadata operation API, supporting batch operations, transactional operations, and undo / redo functionality. All modifications are verified to ensure data consistency and integrity.

[0049] Metadata operation APIs refer to programming interfaces that provide read and write access to metadata, enabling interaction between the system and metadata. Batch operations refer to execution modes that process multiple data operations at once, improving data processing efficiency. Transactional operations refer to operation units with atomicity, consistency, isolation, and durability, ensuring the reliability of data operations. Undo / redo functionality refers to the ability to cancel and repeat operations, supporting user operation rollback and recovery. Data consistency refers to the property of data maintaining logical correctness under different states, ensuring data accuracy and reliability. Data integrity refers to the state of complete and unmissing data, guaranteeing the existence of all necessary data.

[0050] As a concrete example: A user needs to modify the color attributes of five components in a canvas simultaneously and initiates a batch operation request through the metadata operation API; the system packages the five modification operations into a single transactional operation for execution, ensuring that either all operations succeed or all fail; during execution, the system verifies whether each modification conforms to the metadata specification, ensuring data consistency and integrity; if the user finds the modification effect unsatisfactory, they use the undo function to revert to the state before the operation, and then use the redo function to restore the modification. Throughout the entire process, the data remains correct and complete.

[0051] This invention provides a standardized data access interface through a metadata operation API, significantly improves data processing efficiency through batch operation functions, ensures the reliability and security of data modification through transactional operations, enhances user operation flexibility through undo and redo functions, and guarantees data quality through a strict data verification mechanism. Overall, it greatly improves the efficiency and reliability of metadata operations.

[0052] In one possible implementation, the version management module creates version snapshots and records the modification time, author, and modification description, supporting version rollback and comparison functions.

[0053] Among these, a version snapshot refers to a complete record of the metadata's state at a specific moment, used to capture the data's condition at that point in time. Modification time refers to the specific timestamp of the operation, recording the time information when the version was created. Author refers to the user's identity who performed the modification, allowing tracking of the person responsible for the change. Modification description refers to a textual record describing the changes, providing background information on the version change. Version rollback functionality refers to the ability to restore metadata to a historical version, used to revert data state. Version comparison functionality refers to the ability to analyze differences between different versions, displaying the content and scope of changes.

[0054] As a concrete example: After a user completes the interface layout modifications and clicks the save button, the version management module automatically creates a version snapshot, recording the current time as 14:30 on October 15, 2023 as the modification time, the user ID "designer_01" as the author, and "optimized button layout and color scheme" as the modification description. Three days later, the user discovers a problem with the new layout and uses the version rollback function to restore the previous version snapshot. Subsequently, the user uses the version comparison function to view the specific differences between the two versions. The system highlights the 5 modified components and 12 attribute changes, and the user decides to retain some of the modifications based on the comparison results.

[0055] This invention fully preserves historical data status through the version snapshot function, records modification information in detail to provide complete change traceability, ensures data security and operational fault tolerance through the version rollback function, and clearly displays the changes through the version comparison function. Overall, it forms a complete version management system, effectively ensuring data security and project maintainability.

[0056] In one possible implementation, the persistent storage module supports multiple storage backends, including local file systems, databases, and cloud storage services, and employs an incremental save strategy to reduce IO overhead.

[0057] In this context, persistent storage modules refer to system components responsible for long-term data preservation, used to write metadata to persistent storage devices. Storage backends refer to the specific implementation methods of data storage, supporting various storage solutions. Local file systems refer to file storage services provided by the operating system, capable of storing metadata files to the hard drive. Databases refer to structured data management systems, providing efficient metadata storage and retrieval. Cloud storage services refer to internet-based data storage services, used for remote storage and access to metadata. Incremental save strategies refer to storage methods that only save changed portions, reducing data writes. IO overhead refers to the system resource consumption of input / output operations, a metric for measuring storage efficiency.

[0058] As a specific example: After the user completes the design and clicks the save button, the system detects that the modification involves changes to the attributes of three components. It adopts an incremental save strategy to save only the changed data of these three components to the MySQL database, which reduces IO operations by 70% compared to a full save. At the same time, the system supports synchronizing backup data to cloud storage services and keeping a cached copy in the local file system to ensure data security and accessibility.

[0059] This invention provides a flexible storage solution by supporting multiple storage backends, ensuring low latency for data access through a local file system, providing efficient structured data management through a database, guaranteeing remote backup and reliability of data through cloud storage services, and significantly reducing IO overhead and improving storage efficiency through incremental save strategies, thus achieving an overall efficient and reliable persistent data storage solution.

[0060] In one possible implementation, the version management module calculates the amount of metadata changes, and its version difference calculation formula is:

[0061] in, Indicates the degree of version difference. This indicates the total number of versionable parameters in the metadata. Indicates the first Importance coefficients of each parameter Indicates the current version of the The values ​​of the parameters, Indicates the first in the previous version The values ​​of the parameters, Indicates the number of components that have changed. Indicates the maximum number of components allowed by the system; importance coefficient. Parameter values ​​derived from metadata schema definition and Snapshot comparison from the version management module, number of changed components Modification statistics from the metadata operation module, maximum number of components From system configuration parameters.

[0062] This specification provides a metadata-driven visual design processing system, comprising: a metadata loading module for reading and parsing metadata definitions in a storage medium; a visual design module for providing a graphical design interface and receiving user operations; an attribute configuration module for providing component attribute editing functions; a real-time rendering module for directly reading metadata and generating visual output; a metadata operation module for providing a direct interface for manipulating metadata; a version management module for recording the modification history of metadata; and a persistent storage module for saving metadata to a storage medium. The system initializes the environment and loads the component library before reading or creating a metadata framework. It then enters the main design loop, waiting for users to add components or modify attributes via drag-and-drop. The system updates metadata in real time and triggers re-rendering, providing an isolated preview environment, and finally saves the metadata to persistent storage. By eliminating intermediate conversion steps through direct metadata reading technology, it achieves true real-time design and preview synchronization, significantly reducing learning costs and the barrier to entry. The declarative metadata description method ensures that design results can be used across platforms and frameworks, improving metadata portability and reusability, and significantly enhancing development efficiency.

[0063] Among these, version difference refers to a numerical indicator that quantifies the degree of change between versions, used to measure the significance of version changes. The total number of versionable parameters in metadata refers to the number of data parameters that can be version tracked, reflecting the complexity of the metadata. Importance coefficient refers to a weighting factor representing the importance of a parameter, which can adjust the parameter's influence in difference calculation. Parameter value in the current version refers to the specific value of a parameter in the latest version, providing a current baseline for difference calculation. Parameter value in the previous version refers to the specific value of the corresponding parameter in historical versions, providing a historical reference for difference calculation. The number of changed components refers to the total number of components that have changed between two versions, reflecting the scope of components involved in the modification. The maximum number of components allowed by the system refers to the upper limit of the number of components supported by the system design, limiting the scale of system resource usage. Metadata schema definition refers to the standardized description of the metadata structure, used to determine the rules for allocating parameter importance. Snapshot comparison refers to the analysis process of comparing the data states of different versions to obtain parameter value difference data. Modification statistics refer to the quantitative analysis of metadata change records, providing information on the number of component changes. System configuration parameters refer to the set of preset parameters required for system operation, which are used to define system operation constraints.

[0064] As a specific example: The current version of the system has 150 components, and the metadata contains 200 versionable parameters; the user modified the properties of 10 components, involving changes to 30 parameters; the version management module calculates the version difference degree, where the importance coefficient of layout-related parameters is 0.8, style parameters are 0.5, and content parameters are 0.3; by comparing snapshots to obtain parameter value changes, combined with the number of changed components obtained from modification statistics, the final calculated version difference degree is 0.45; based on this value, the system judges that this modification is a moderate change, automatically creates a new version, and generates the corresponding version description.

[0065] This invention provides an objective evaluation standard for version changes by quantitatively calculating version differences. It ensures that key changes are given full attention by using differentiated weighting based on parameter importance coefficients, and comprehensively reflects the scope of modifications by combining the number of component changes. This provides a scientific basis for version management decisions and effectively improves the accuracy and automation level of version management.

[0066] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments in this specification are not limited to the described order of actions, because according to the embodiments in this specification, some steps can be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily essential to the embodiments in this specification.

[0067] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0068] The preferred embodiments disclosed above are merely illustrative of this specification. The optional embodiments do not exhaustively describe all details, nor do they limit the invention to the specific implementations described. Clearly, many modifications and variations can be made based on the embodiments described herein. These embodiments are selected and specifically described in this specification to better explain the principles and practical applications of the embodiments, thereby enabling those skilled in the art to better understand and utilize this specification. This specification is limited only by the claims and their full scope and equivalents.

Claims

1. A metadata-driven visual design processing system, characterized in that, include: The metadata loading module is used to read and parse metadata definitions in the storage medium; The visual design module provides a graphical design interface and receives user input. The property configuration module provides component property editing functionality; The real-time rendering module is used to directly read the metadata and generate visualization output; The metadata operation module provides a direct interface for operating the metadata. The version management module is used to record the modification history of the metadata; A persistent storage module is used to save the metadata to a storage medium; The system initializes the environment and loads the component library, then reads or creates a metadata framework. It enters the main design loop and waits for the user to add components or modify attributes by dragging and dropping. The system updates the metadata in real time and triggers re-rendering, providing an isolated preview environment. Finally, it saves the metadata to persistent storage.

2. The system according to claim 1, characterized in that, The metadata loading module supports importing multiple metadata formats, including JSON, XML, and YAML, and can automatically identify metadata versions and integrity, perform compatibility conversions, and repair data.

3. The system according to claim 1, characterized in that, The visualization design module includes a component selection panel, a design canvas, and a component tree view. The component selection panel displays available components categorized by function. The design canvas uses an absolute positioning layout system. The component tree view displays the relationships between components in the design in a hierarchical structure.

4. The system according to claim 1, characterized in that, The attribute configuration module automatically displays configurable attributes when a component is selected, and provides corresponding input controls according to the attribute type, including text input boxes, numeric adjusters, color pickers, drop-down lists, and Boolean switches.

5. The system according to claim 1, characterized in that, The real-time rendering module includes a metadata parsing engine and a rendering engine. The metadata parsing engine analyzes the metadata structure in real time, extracts component types, attributes, and layout information, and the rendering engine dynamically creates and updates UI components based on the parsing results.

6. The system according to claim 5, characterized in that, The rendering engine uses a difference comparison algorithm to calculate the view update range, and the update calculation formula is as follows: in, Indicates the view update priority. This indicates the total number of components in the current canvas. This indicates the total number of modifiable properties for each component. Indicates the first The first component The weight coefficients of each attribute, Indicates the first The first component The amount of change in each attribute Indicates the first The display area of ​​each component. Represents the total area of ​​the canvas; the stated The rendering priority defined in the component's attribute metadata, the amount of change of the attribute User modification records from the attribute configuration module, the component display area The layout calculation results from the real-time rendering module, the total area of ​​the canvas Fixed size derived from the design canvas.

7. The system according to claim 1, characterized in that, The metadata operation module implements a metadata operation API, supporting batch operations, transactional operations, and undo / redo functions. All modifications are verified to ensure data consistency and integrity.

8. The system according to claim 1, characterized in that, The version management module creates version snapshots and records the modification time, author, and modification description, and supports version rollback and comparison functions.

9. The system according to claim 1, characterized in that, The persistent storage module supports multiple storage backends, including local file systems, databases, and cloud storage services, and adopts an incremental save strategy to reduce IO overhead.

10. The system according to claim 8, characterized in that, The version management module calculates the amount of metadata changes, and the version difference calculation formula is as follows: in, Indicates the degree of version difference. This indicates the total number of versionable parameters in the metadata. Indicates the first Importance coefficients of each parameter Indicates the current version of the The values ​​of the parameters, Indicates the first in the previous version The values ​​of the parameters, Indicates the number of components that have changed. Indicates the maximum number of components allowed by the system; the The parameter values ​​are derived from the metadata schema definition. and Snapshot comparison from the version management module, the Modification statistics from the metadata operation module, the maximum number of components From system configuration parameters.

Images