Differential interaction method for visual editor

Abstract

The invention discloses a difference interaction method for a visual editor, which comprises the following steps: converting bottom data of the visual editor into a tree structure, and setting a unique identifier and a path index for each node in the tree structure; comparing the original tree structure with the newly generated tree structure through a tree difference algorithm according to the path index to obtain difference nodes, generating atomized Patches in one-to-one correspondence, and mapping the atomized Patches and the nodes through unique identifiers; and according to the atomized Patch, semantic description is obtained through a semantic interpretation engine so as to generate semantic Patches, and the semantic Patches are visually displayed so as to respond to user confirmation to perform dynamic updating. Through tree structure modeling, atomization difference analysis and semantic interaction, the problems of black box, version control deficiency, insufficient interaction experience and the like of a generative AI auxiliary visual editor in the prior art are solved.

Description

TECHNICAL FIELD

[0001] The present application belongs to the technical field of visual editor, and particularly relates to a difference interaction method for a visual editor. BACKGROUND

[0002] In a traditional visual editor, a user completes content design by dragging a component, configuring an attribute, or drawing a flowchart. When generative AI assistance is introduced, the system can automatically generate complete design content (such as adding a component, adjusting a layout, or modifying a style) based on user input.

[0003] However, existing technologies usually directly overwrite the original data when processing AI-generated content, that is, the AI-generated content directly replaces the original version in its entirety. For example, existing low-code platforms usually only provide "apply" or "cancel" buttons when generating a component tree with AI, and users cannot view specific modifications (such as "add a button" or "modify the color to red") or selectively accept partial modifications.

[0004] Therefore, AI-generated content is output in its entirety, and users cannot clearly perceive specific modifications (such as additions, deletions, or attribute adjustments), and the "black box" nature of the generated content leads to a lack of trust in the automated results. In addition, due to the complete generation of all differences in the visual editor, there is a lack of difference tracking mechanism, and users cannot confirm or revert modifications item by item.

[0005] Moreover, if users want to understand the differences, they need to manually compare the original data with the new version, which is inefficient and prone to errors, and the interactive experience is insufficient.

[0006] In summary, existing technologies have core problems such as "black box", lack of version control, and insufficient interactive experience in the field of visual editor with generative AI assistance. Therefore, there is an urgent need to develop a difference interaction method for a visual editor to provide technical support for version management and user interaction of the visual editor. SUMMARY

[0007] The present application provides a difference interaction method for a visual editor, which solves the core problems of "black box", lack of version control, and insufficient interactive experience in the field of visual editor with generative AI assistance.

[0008] The technical solution adopted by the present application is as follows:

[0009] A difference interaction method for a visual editor, comprising:

[0010] According to the underlying data of the visual editor, a tree structure is converted, and a unique identifier and a path index are set for each node in the tree structure;

[0011] By a tree difference algorithm, according to the path index, the original tree structure and the newly generated tree structure are compared to obtain a difference node, and an atomized Patch is generated one by one, wherein the atomized Patch is mapped with the node through a unique identifier;

[0012] According to the atomized Patch, a semantic interpretation engine is used to obtain a semantic description to generate a semanticized Patch, and a plurality of semanticized Patches are visually displayed to respond to user confirmation for dynamic updating.

[0013] The difference interaction method for the visual editor provided by the application further has the following additional technical features:

[0014] The underlying data specifically includes:

[0015] The underlying data at least includes any one of graph structure data, JSON format data and XML format data.

[0016] The tree structure is converted, specifically:

[0017] According to the graph structure data, the tree structure is converted through node-edge mapping;

[0018] According to the JSON and / or XML format data, the tree structure is obtained through hierarchical nested key-value pairs.

[0019] The tree difference algorithm is specifically:

[0020] According to the path index, the node path is located through hash calculation, and the node traversal comparison of the original tree structure and the newly generated tree structure is performed;

[0021] The difference node is determined through the difference detection of the time complexity between nodes, and the atomized Patch is generated according to the difference attribute.

[0022] The atomized Patch is generated, specifically:

[0023] When the difference node exists in the newly generated tree structure but does not exist in the original tree structure, the add type atomized Patch is generated.

[0024] When the difference node exists in the original tree structure but does not exist in the newly generated tree structure, the remove type atomized Patch is generated.

[0025] When the difference node exists in the newly generated tree structure and the original tree structure, and the node attributes are inconsistent, the update type atomized Patch is generated.

[0026] When the difference node exists in both the newly generated tree structure and the original tree structure, and the hierarchical relationship between the nodes is inconsistent, it is determined as a move operation, and a move type atomized Patch is generated.

[0027] According to the atomized Patch, a semantic description is obtained through a semantic interpretation engine to generate a semanticized Patch, specifically:

[0028] According to the type of the atomized Patch, a semantic description is set for the corresponding atomized Patch through a predefined semantic rule to generate a semanticized Patch.

[0029] The plurality of semanticized Patches are visually displayed, specifically:

[0030] A card is generated for each semanticized Patch, and the cards are displayed in an array form to respond to user confirmation through the cards for dynamic updating,

[0031] The arrangement order of the cards is set according to the hierarchical order of the corresponding nodes in the tree structure.

[0032] The dynamic updating through the cards in response to user confirmation is specifically:

[0033] In response to a click operation of the user on the card, the card performs differential display of color and / or brightness to confirm the node difference corresponding to the card, and performs a dynamic updating operation on the tree structure.

[0034] The application further provides a storage medium,

[0035] The storage medium stores a computer program, and the computer program is executed to implement the steps of the difference interaction method for the visual editor.

[0036] The application further provides a processing device, which comprises:

[0037] A memory is configured to store a computer program.

[0038] A processor is configured to execute the computer program to implement the steps of the difference interaction method for the visual editor.

[0039] Thanks to the above technical solutions, the application has the following beneficial effects:

[0040] 1. In the present application, by uniformly converting the underlying data of the visual editor into a tree structure, the complexity problem of difference analysis caused by the diversity of data formats in traditional tools is solved. Moreover, the tree structure modeling provides a standardized data format for difference analysis, reducing the adaptation cost across scenes (flowchart, low-code component tree, interface prototype). In addition, a unique identifier (ID) and path index are assigned to each node to accurately locate the node and ensure its uniqueness and traceability, providing a basis for subsequent difference analysis.

[0041] Through the tree difference algorithm, the original tree structure and the newly generated tree structure are compared according to the path index. Not only all nodes are compared to improve the completeness of the comparison, but also efficient difference detection of multiple nodes is achieved according to the path index, significantly improving the comparison efficiency of large-scale tree structures. According to the difference nodes, atomic patches are generated one by one, each patch only operates a single node, minimizing the modification granularity and avoiding redundant operations caused by full replacement, providing minimum granularity data support for user interaction.

[0042] Through the semantic interpretation engine, technical patches are converted into natural language descriptions, allowing users to intuitively understand the specific modification content generated by AI and eliminating the "black box" problem. Multiple semantic patches are visually displayed to support user confirmation and update, improve user controllability, and significantly enhance user intervention capabilities for automatically generated results. Moreover, through the visual display of multiple semantic patches, users can quickly locate the modified content, reducing the error rate of manual comparison and the complexity of operations. In response to user confirmation, dynamic updates are performed to automatically filter invalid patches and update the display after the user regenerates the content, avoiding redundant operations and improving system response speed.

[0043] In summary, the present application solves the "black box" problem, version control deficiency, and insufficient interaction experience of generative AI-assisted visual editors in the prior art through tree structure modeling, atomic difference analysis, and semantic interaction. BRIEF DESCRIPTION OF DRAWINGS

[0044] The accompanying drawings, which are included to provide a further understanding of the application, constitute a part of this specification and illustrate illustrative embodiments of the application and together with their description serve to explain the application. In the drawings:

[0045] Figure 1 A flowchart of the difference interaction method for a visual editor according to an embodiment of the present application. DETAILED DESCRIPTION

[0046] For a more complete understanding of the overall conception of the present application, the following detailed description is made in conjunction with the accompanying drawings.

[0047] In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present application. However, it will be apparent to one skilled in the art that the present application can be practiced without the specific details and other implementations can be employed. Therefore, the scope of the present application is defined by the appended claims, not by the following detailed description.

[0048] As shown in Figure 1 A difference interaction method for a visual editor includes:

[0049] S100: According to the underlying data of the visual editor, convert to a tree structure, and set a unique identifier and a path index for each node in the tree structure.

[0050] The underlying data format of the visual editor is diverse, and if there is a lack of unified data modeling method, it may lead to complex difference analysis. This step proposes a unified tree structure modeling method to unify the underlying data into a tree structure. By unifying the data format, the adaptation cost across scenes (flowchart, low-code component tree, interface prototype) is reduced. In addition, the tree structure provides a unified data basis for subsequent difference analysis (such as node comparison and Patch generation), avoiding the processing complexity caused by the diversity of data formats and improving data processing efficiency.

[0051] In addition, a unique identifier (ID) and a path index are assigned to each node to realize node identification and positioning, ensuring the uniqueness and traceability of the nodes. The unique identifier (ID) is used to ensure the uniqueness of each node and avoid positioning errors caused by nodes with the same name. The path index precisely positions the node position through the hierarchical path, providing a basis for subsequent difference analysis and dynamic updating.

[0052] This step solves the problem of complex difference analysis caused by the diversity of data formats and the lack of positioning ability in the prior art through tree structure modeling and node identification and positioning mechanism, providing a standardized data basis for subsequent atomized Patch generation, semantic interpretation, and visual interaction.

[0053] S200: Through a tree difference algorithm, compare the original tree structure and the newly generated tree structure according to the path index to obtain difference nodes and one-to-one generate atomized Patches, wherein the atomized Patches are mapped to the nodes through unique identifiers.

[0054] The present step proposes an atomized difference analysis method based on a tree difference algorithm. The tree difference algorithm is used to generate atomized patches (minimum modification instructions), which support precise tracking of operations. The patches are mapped to nodes through unique identifiers (IDs) and path indexes, ensuring precise positioning and execution of modification operations. The core purpose is to solve the problems of version control missing and rough modification granularity in generative AI assisted visual editor.

[0055] Using the path index generated in the previous step, the nodes in the original tree and the newly generated tree can be quickly located, significantly reducing the time complexity of difference detection, which is suitable for large-scale tree structures. Moreover, it facilitates the traversal of nodes, avoids the omission of difference nodes, and ensures the integrity of difference node retrieval.

[0056] Generate atomized patches, each patch only operates a single node or attribute (such as modifying the color instead of the entire component), determine the minimum modification granularity, and avoid redundant operations caused by full replacement. This provides a basis for users' item-by-item confirmation operations, improves collaboration efficiency, and avoids uncontrollable risks caused by full coverage.

[0057] In addition, according to the unique identifier mapping, each patch is bound to the corresponding node through the unique identifier (ID) of the node, supporting the tracking of single node modification and ensuring the precise execution of modification operations.

[0058] S300: According to the atomized patch, a semantic interpretation engine is used to obtain a semantic description to generate a semantic patch. Multiple semantic patches are visually displayed to respond to user confirmation for dynamic update.

[0059] This step converts technical patches into natural language descriptions that users can understand through a semantic interpretation engine, eliminating the "black box" problem. Through visual display, users can confirm or rollback modifications item by item, improving user controllability and trust in automated generation results. The core purpose is to solve the problems of "black box", version control missing, and insufficient interactive experience in generative AI assisted visual editor.

[0060] A semantic interpretation engine is constructed, and semantic rules are predefined. According to the type of atomized patch, the predefined rules are mapped to natural language descriptions. Through natural language description, users can better understand the difference operation, which facilitates user confirmation of the difference, thereby improving user experience.

[0061] Each semantic patch corresponds to only a single atomic patch (such as a node operation), avoiding redundant operations caused by full replacement by minimizing the modification granularity. It should be noted that the semantic patch generally includes the following fields: semantic description, natural language description (such as "change the color to red"); target object unique identifier, unique identifier of the node in the tree; operation type, add, remove, update, move.

[0062] Each semantic patch is visually displayed, and users can intuitively understand it through the natural language description therein without understanding the underlying data structure, which not only facilitates overall understanding of all difference nodes and reduces user resistance to automatic results, but also facilitates understanding of a single difference node, thereby facilitating confirmation of differences and reducing user operation complexity.

[0063] As a preferred embodiment of the present application, the underlying data, in particular:

[0064] The underlying data at least includes any one of graph structure data, JSON format data, and XML format data.

[0065] This step is used to determine the type of underlying data for building a tree structure, so as to convert the underlying data into a tree structure for modeling processing, thereby solving the difference analysis complexity problem caused by various data formats in the generative AI assisted visual editor.

[0066] Among them, graph structure data is commonly used in flowchart design, network topology diagram, knowledge graph, etc. Graph structure is composed of nodes (Node) and edges (Edge), which are used to represent complex association relationships between objects (such as flowchart, social network, network topology). The generative AI assisted flowchart tool may involve modification of nodes and edges (such as adding a flow branch, adjusting the connection line).

[0067] JSON (JavaScript Object Notation) is a lightweight key-value pair structure hierarchical nested format, which is widely used for front-end and back-end data exchange, such as component tree of low-code platform, configuration file, API response data. In low-code development, the AI generated component tree (such as button, text box) is usually stored in JSON format, which generally involves attribute modification (such as color, font size).

[0068] XML(eXtensible Markup Language) is a kind of tag-based structured data format, commonly used in configuration files and data storage, commonly used in interface prototype design (such as Android layout files), document structured storage. For interface prototype design requirements, XML files are often used to define the hierarchical structure of UI components, involving component addition, deletion or attribute adjustment.

[0069] It should be noted that in the present embodiment, in addition to the graph structure data, JSON format data, XML format data, YAML format data, CSV / table data, database table structure, etc. can also be involved, and the present application does not limit this.

[0070] As a preferred embodiment of the present embodiment, it is converted into a tree structure, specifically:

[0071] According to the graph structure data, it is converted into a tree structure through node-edge mapping;

[0072] According to the JSON and / or XML format data, the tree structure is obtained through the hierarchical nested key-value pairs.

[0073] The present embodiment converts the graph structure data, JSON / XML format data into a tree structure one by one according to the format of the underlying data, providing a standardized data basis for subsequent tree difference algorithm, atomization Patch generation and semantic interaction. The core purpose is to solve the difference analysis complexity problem caused by the diversity of data formats in the prior art.

[0074] For graph structure data, the nodes and edges in the graph are mapped to nodes in the tree structure, respectively. For example, nodes node_A and node_B are connected by edge edge_E, which is converted into a tree structure, and the difference can be accurately located through path indexing.

[0075] Among them, node mapping converts each node in the graph into a tree node and records its attributes. Edge mapping converts the edge into a child node of the tree node and records the association relationship between the source node and the target node.

[0076] For JSON / XML format data, it is directly constructed into a standard tree structure (such as parent node-child node structure), and the hierarchical relationship of the data is represented through hierarchical nesting. For example, attribute modification (such as changing the color from blue to red) can be directly located through path indexing.

[0077] Specifically, JSON / XML→tree structure, a tree structure is directly constructed through hierarchical nested key-value pairs, and the parent node contains a list of child nodes. Set node identifier, assign a unique identifier (ID) to each node to ensure the uniqueness of the node. Set path index, accurately locate the node position through hierarchical path, provide a basis for subsequent difference analysis.

[0078] The embodiment unifies the graph structure, JSON / XML format data into a tree structure through a unified data model, reduces the adaptation cost across scenes (flowchart, low-code component tree, interface prototype), solves the problem of data format diversity, and adapts to flowchart design, low-code development, interface prototype design and other scenes without the need to develop a difference analysis module separately for different tools.

[0079] The embodiment unifies the graph structure data and JSON / XML format data into a tree structure, and adopts a node-edge mapping and hierarchical nested key-value pair strategy, solves the difference analysis complexity problem caused by data format diversity in the prior art, and provides a standardized data basis for subsequent atomized difference analysis, semantic interpretation and visual interaction.

[0080] As a preferred embodiment of the present application, the tree difference algorithm specifically comprises:

[0081] According to the path index, the node path is located through hash calculation, and the nodes of the original tree structure and the newly generated tree structure are compared;

[0082] By detecting the difference in time complexity between nodes, the difference node is determined, and the atomized Patch is generated according to the difference attribute.

[0083] The embodiment realizes O(n) time complexity difference detection through the hash path index technology, significantly improves the comparison efficiency of large-scale tree structure, and solves the problem of low efficiency of tree structure difference detection in the prior art.

[0084] The nodes of the original tree and the newly generated tree are traversed in the hierarchical order of the tree structure (such as breadth-first search), and whether the nodes are different is compared through the hash path index. By hierarchical traversal, all nodes are compared to avoid missing differences.

[0085] Among them, the path index has been pre-encoded by hash (such as SHA-1 or MD5), which can quickly locate the node position, avoid linear traversal, and reduce redundant calculation. Hash calculation reduces the node positioning time from O(n) to O(1), reduces the time complexity, and significantly improves the comparison efficiency of large-scale tree structure.

[0086] The embodiment realizes hash path index optimization, hierarchical traversal comparison, time complexity difference detection and atomized Patch generation, solves the problem of low efficiency of tree structure difference detection in the prior art, and significantly improves the comparison efficiency of large-scale tree structure.

[0087] As a preferred embodiment of the present embodiment, the atomized Patch is generated, specifically:

[0088] When the difference node exists in the newly generated tree structure but does not exist in the original tree structure, it is determined that the node is added, and an add type atomized Patch is generated;

[0089] When the difference node exists in the original tree structure but does not exist in the newly generated tree structure, it is determined that the node is deleted, and a remove type atomized Patch is generated;

[0090] When the difference node exists in the newly generated tree structure and the original tree structure, and the node attributes are inconsistent, it is determined that the attribute is modified, and an update type atomized Patch is generated;

[0091] When the difference node exists in the newly generated tree structure and the original tree structure, and the hierarchical relationship between the nodes is inconsistent, it is determined that the operation is moved, and a move type atomized Patch is generated.

[0092] The embodiment realizes the minimum modification granularity of the tree structure difference through the four types of atomized Patches (add, remove, update, and move), avoids the redundant operation caused by full replacement, and through the division of operation types, the operation types are refined, the difference analysis result is clear, and the user's understanding and determination are facilitated, thereby improving the user experience and solving the problem of coarse tree structure difference detection granularity and poor interaction effect in the prior art.

[0093] The node exists in the newly generated tree structure but does not exist in the original tree structure, and is determined to be an added node (add type Patch).

[0094] The node exists in the original tree structure but does not exist in the newly generated tree structure, and is determined to be a deleted node (remove type Patch).

[0095] The node exists in the newly generated tree structure and the original tree structure, but the attributes are inconsistent, and is determined to be an attribute modification (update type Patch). Specifically, the attribute modification includes changes in color and position, such as changing the color from red to blue.

[0096] The node exists in the newly generated tree structure and the original tree structure, but the hierarchical relationship is inconsistent (such as different parent node paths), and is determined to be a move operation (move type Patch).

[0097] The embodiment accurately detects node operations through the four types of atomized Patches (add, remove, update, and move) to enable the user to intuitively perceive node changes and solve the pain point of fuzzy difference analysis results of traditional algorithms.

[0098] As a preferred embodiment of the present application, according to the atomized Patch, a semantic interpretation engine is used to obtain a semantic description to generate a semanticized Patch, specifically:

[0099] According to the type of the atomized Patch, a semantic description is set for the corresponding atomized Patch through a predefined semantic rule to generate a semanticized Patch.

[0100] The present embodiment converts atomized Patches (such as add, remove) into user-understandable semantic descriptions through a semantic interpretation engine and predefined semantic rules, achieving the mapping of technical operations and business semantics. Through natural language interaction, the controllability and acceptance of AI-generated content by users are improved. It aims to solve the problem of "black box" technical modification content in the prior art, which is difficult for users to intuitively perceive AI-generated content.

[0101] A semantic interpretation engine is constructed based on natural language processing (NLP) and domain knowledge base construction, which is responsible for converting technical operations (such as add, update) into user-understandable semantic descriptions. For different Patch types (add, remove, update, move), mapping rules are defined to associate technical operations with business semantics.

[0102] Specifically, according to the Patch type (such as add, remove), the corresponding semantic rule is matched. The modification position is located through path indexing, and the description is generated in combination with node attributes. Based on predefined rules and context information (such as node type, attribute value), user-understandable semanticized Patches are generated in real time.

[0103] For example, for an add-type atomized Patch, a "new [component type] is added" (such as "a button component is added") is generated. For a remove-type atomized Patch, a "a [component type] is deleted" (such as "a text box is deleted") is generated. For an update-type atomized Patch, a "modify [component type] [attribute]" (such as "modify the color attribute of the button") is generated. For a move-type atomized Patch, a "move [component type] from [old position] to [new position]" (such as "move the button from the left to the right") is generated.

[0104] In this step, a preset templated description is needed. Through a predefined template (such as "modify [attribute] to [value]"), an NLP model (such as GPT, T5) is used to generate accurate semantic descriptions in combination with node level paths and attribute values.

[0105] The semantic description is attached to the atomized Patch to form a semantic Patch, so as to output the semantic Patch to the user.

[0106] In the embodiment, the technical operation is converted into natural language understandable by the user, the semantic interaction is smooth, the "black box" of technical modification is eliminated, and the problem that the user cannot intuitively perceive the AI generated content is solved. The user does not need to understand the path index, and can directly confirm the modification content through the natural language description, supports natural language interaction and efficient cooperation, reduces the resistance to the automation tool, and improves the user controllability and trust.

[0107] As a preferred embodiment of the present application, a plurality of semantic Patches are visually displayed, specifically:

[0108] A card is generated for each semantic Patch, and the cards are displayed in an array form, and the cards are dynamically updated in response to user confirmation,

[0109] The arrangement order of the cards is set according to the hierarchical order of the corresponding nodes in the tree structure.

[0110] This step displays the semantic Patch in a structured and visual form through the card array and hierarchical order arrangement, improves the intuitive perception and controllability of the user to the modification content. It aims to solve the problems of difficulty in understanding the AI generated content modification by the user and low interaction efficiency in the prior art.

[0111] The semantic Patch is parsed, and key information (such as type, path, and description) is extracted from the semantic Patch to generate an independent card.

[0112] Specifically, a unified UI template (such as a title bar displaying the type, a main body displaying the description, and a path as auxiliary information) is used to ensure information consistency. The card is rendered to the interface in an array form through a front-end framework (such as React or Vue) or a visualization library (such as D3.js).

[0113] It should be noted that through information layering, the card title displays the Patch type (such as add and remove), the main body displays the semantic description (such as "a button component is added"), and the path information is used as auxiliary explanation. In order to visually distinguish, the Patch type can be intuitively identified by color, icon (such as "+" for addition and "-" for deletion) or label (such as "add" and "modify").

[0114] To achieve hierarchical arrangement, the hierarchical relationships of nodes in the tree structure (such as parent node path and sibling node order) are extracted based on the path information in the semantic patch. Using a depth-first or breadth-first traversal of the hierarchical path, the cards are arranged in hierarchical order according to the tree structure. In this step, higher-level nodes are displayed first, followed by expanding child nodes. Therefore, users can quickly locate key modifications (such as core function adjustments) without needing to parse technical patches line by line. Furthermore, it ensures that users review modifications in a logical order (e.g., confirming the addition of a main node before confirming adjustments to child node attributes), avoiding logical conflicts caused by improper modification order (e.g., deleting a node before attempting to modify its attributes).

[0115] Dynamic updates and user interactions are implemented by binding user action events (such as clicking the "Confirm" button) to each card. When a user confirms a card, the execution of the corresponding semantic patch is triggered (such as calling an API or updating the tree structure), and the interface state is synchronized (such as hiding the confirmed card) to achieve real-time updates.

[0116] Users can selectively accept or reject specific modifications through cards (such as accepting only new components while ignoring attribute adjustments), avoiding the uncontrollable risks caused by applying all modifications at once and enhancing controllability.

[0117] This implementation method presents semantic patches in a structured and visual form by arranging them in a card array and hierarchical order. This solves the problems of users having difficulty understanding AI-generated content modifications and low interaction efficiency in the prior art. By dynamically updating and supporting gradual effects, it significantly improves users' controllability and trust in the modified content.

[0118] As a preferred embodiment of this implementation, the card is dynamically updated in response to user confirmation, specifically as follows:

[0119] In response to a user's click on the card, the system performs color and / or brightness differentiation on the card to confirm the node differences corresponding to the card, and performs a dynamic update operation on the tree structure.

[0120] This embodiment provides users with intuitive visual feedback by using differentiated displays of color and / or brightness (such as brightening or changing color after clicking a card) to confirm the effective status of the modifications. It aims to solve the problems of difficulty in understanding AI-generated content modifications and low interaction efficiency in existing technologies.

[0121] This embodiment performs event listening and triggers subsequent logic when the user interacts with the card. When the user clicks on a card, the system captures the event and enters the differentiated display logic (such as brightening or changing color), dynamically updating the tree structure and synchronizing it with the card's confirmation status.

[0122] For brightness adjustment, the brightness or contrast of the card is adjusted through the CSS filter, and the single picture is clicked to be darkened or lightened. Or perform color transformation, change the appearance of the card through the design of the pseudo element of the CSS3 card lighting effect.

[0123] It should be noted that the smooth visual effect (such as 0.3 second gradient) is realized by CSS to realize dynamic transition.

[0124] Specifically, for the card in the confirmed state, the modification item is effective by lightening or highlighting the card. For the unconfirmed state, the card keeps the default style, indicating that the modification item is to be confirmed. The user can distinguish the confirmed and unconfirmed items by color / brightness, selectively accept or reject the modification, and eliminate the "black box" problem of technical operation.

[0125] Similarly, different levels of modification items can be distinguished by color (such as red for the main node and blue for the child node), which helps the user to understand the modification context.

[0126] When the user clicks the card, dynamic update is performed on the tree structure, which is synchronized with the confirmation state of the card. The confirmed semantic patch is applied to the data model of the tree structure, and the tree structure is dynamically modified through virtual DOM or direct DOM operation to realize local update and trigger interface redraw.

[0127] The embodiment solves the problems of user difficulty in understanding AI generated content modification items and low interaction efficiency in the prior art through differentiated display of color and / or brightness and dynamic update of the tree structure, improves the user's intuitive perception of the modified content through visual feedback, realizes the progressive effectiveness of the modification item through dynamic update, and significantly enhances the controllability and trust of the user for the AI generated content.

[0128] The application further provides a storage medium,

[0129] The storage medium has a computer program stored thereon, and the computer program is executed to realize the steps of the difference interaction method for the visual editor.

[0130] Therefore, any effect of the difference interaction method for the visual editor can be realized, which will not be described here.

[0131] The application further provides a processing device, comprising:

[0132] A memory is configured to store a computer program.

[0133] A processor is configured to execute the computer program to realize the steps of the difference interaction method for the visual editor.

[0134] Therefore, any effect of the difference interaction method for the visual editor can be realized, which is not described here.

[0135] The places not described in the present application can be realized by using or referring to the existing technology.

[0136] Each of the embodiments in the specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other. Each of the embodiments mainly describes the difference from other embodiments.

[0137] The above only describes the embodiments of the present application and is not used to limit the present application. The present application can have various changes and variations for those skilled in the art. Any modification, equivalent replacement, improvement, etc. within the spirit and principle of the present application shall be included in the scope of claims of the present application.

Claims

1. A method for differential interaction in a visual editor, characterized in that, include: Based on the underlying data of the visual editor, it is converted into a tree structure, and a unique identifier and path index are set for each node in the tree structure; The tree difference algorithm compares the original tree structure and the newly generated tree structure based on the path index to obtain the difference nodes, and generates atomic patches one by one, wherein the atomic patches and the nodes are mapped by a unique identifier. Based on the atomic patch, a semantic description is obtained through the semantic interpretation engine to generate a semantic patch. Multiple semantic patches are then visualized and dynamically updated in response to user confirmation.

2. The differential interaction method for a visual editor according to claim 1, characterized in that, The underlying data specifically includes: The underlying data includes at least one of graph structure data, JSON format data, and XML format data.

3. The differential interaction method for a visual editor according to claim 2, characterized in that, Convert to a tree structure, specifically: Based on the graph structure data, it is converted into a tree structure through node-edge mapping; A tree structure is obtained from JSON and / or XML format data through hierarchically nested key-value pairs.

4. The differential interaction method for a visual editor according to claim 1, characterized in that, The tree difference algorithm is as follows: Based on the path index, the node path is located through hash calculation, and the node traversal of the original tree structure and the newly generated tree structure is compared. By detecting differences in time complexity between nodes, we identify the nodes with discrepancies and generate atomic patches based on the differences in their attributes.

5. The differential interaction method for a visual editor according to claim 4, characterized in that, Generate atomic patches, specifically: When a difference node exists in the newly generated tree structure but not in the original tree structure, it is determined to be a newly added node, and an atomic patch of type add is generated. When a difference node exists in the original tree structure but not in the newly generated tree structure, it is determined to be a deleted node, and an atomic patch of type remove is generated. When a difference node exists in both the newly generated tree structure and the original tree structure, and the node attributes are inconsistent, it is determined to be an attribute modification, and an atomic patch of type update is generated. When a difference node exists in both the newly generated tree structure and the original tree structure, and the hierarchical relationship between the nodes is inconsistent, it is determined to be a move operation, and an atomic patch of type move is generated.

6. The differential interaction method for a visual editor according to claim 1, characterized in that, Based on the atomic patch, a semantic description is obtained through a semantic interpretation engine to generate a semantic patch, specifically: By using predefined semantic rules, semantic descriptions are set for the corresponding atomic patches according to their types, thereby generating semantic patches.

7. The differential interaction method for a visual editor according to claim 1, characterized in that, The multiple semantic patches are visualized as follows: For each semantic patch, generate cards and display them in an array, dynamically updating in response to user confirmation via these cards. The cards are arranged in the order of their corresponding nodes in the tree structure.

8. The differential interaction method for a visual editor according to claim 7, characterized in that, The card is dynamically updated in response to user confirmation, specifically as follows: In response to a user's click on the card, the system performs color and / or brightness differentiation on the card to confirm the node differences corresponding to the card, and performs a dynamic update operation on the tree structure.

9. A storage medium, characterized in that, The storage medium stores a computer program that, when executed, implements the steps of the differential interaction method for a visual editor as described in any one of claims 1 to 8.

10. A processing apparatus, characterized in that, include: Memory, used to store computer programs; A processor, configured to implement the steps of the differential interaction method for a visual editor as described in any one of claims 1 to 8 when executing the computer program.

Images