A multi-granularity process visualization method, device and system based on dynamic anchoring

Abstract

The application discloses a multi-granularity process visualization method, device and system based on dynamic anchoring, and relates to the technical field of human-computer interaction and graphical user interface. The method encapsulates several steps of a complex dynamic execution process in an outer session container of an instant messaging bubble paradigm, and constructs a micro time line composed of step cards and continuous paths in the container. Each step card supports independent switching of K-grade progressive information density, so that users can independently select an arbitrary intermediate gear between high summary and full expansion. The application guarantees that the physical position of a non-interactive step does not drift in any interactive process through a time line global virtual bit counter algorithm, eliminates visual return jump of text reading type layout through snake type arrangement, establishes cognitive redundancy coding through double anchoring, and eliminates cognitive tearing through consistency constraints of three-way consistency of time direction, execution direction and visual direction.

Description

Technical Field

[0001] This invention belongs to the field of human-computer interaction, graphical user interface, and conversational artificial intelligence visualization technology, specifically a multi-granularity process visualization method, device, and system based on dynamic anchoring. Background Technology

[0002] With the rapid improvement of large language model capabilities, conversational AI (intelligent agents) capable of autonomously planning, calling tools, and generating structured outputs are becoming a new paradigm for human-computer interaction. Unlike traditional question-and-answer chatbots, intelligent agents often trigger multi-step heterogeneous internal action chains when executing a single user request. These include goal decomposition, information retrieval, tool invocation, phased output, and follow-up questions and clarifications with the user. These actions appear in heterogeneous forms such as natural language paragraphs, structured data, attachments, and embedded follow-up forms, forming an execution trajectory with high information density, deep logical hierarchy, and tight temporal coupling. How to effectively present this execution trajectory to the user has become a core bottleneck for conversational intelligent agent products in terms of key indicators such as user understanding, trust building, and long-term user retention.

[0003] In existing technologies, trajectory visualization generally adopts five types of solutions, all of which have significant drawbacks. The fully expanded approach unfolds all internal actions into a linear message flow in chronological order, resulting in information overload and excessive cognitive burden on users; the black-box approach only displays the final output and hides the execution process, causing a lack of trust; the independent panel approach is disconnected from the conversation context, requiring frequent switching between multiple views and is not suitable for mobile devices; multi-branch trees or workflow diagrams occupy a large amount of space, cannot intuitively convey chronological information, and cause position drift when nodes are expanded; Gantt diagrams also occupy a large amount of space and do not support nested dialogues or temporary follow-up questions.

[0004] In order to solve the above problems, the present invention provides a multi-granularity process visualization method, device and system based on dynamic anchoring. Summary of the Invention

[0005] To address the problems of the aforementioned solutions, this invention provides a multi-granularity process visualization method, device, and system based on dynamic anchoring. This allows users to identify the sequence and specific locations of all system actions solely through visual paths, without reading text, thus achieving a two-stage cognition: "chronological first, then detailed." Each action provides K levels (K≥2) of progressive information density, allowing users to freely choose the information granularity for any action. This creates a progressive, continuous spectrum that can be adjusted by the user between the "full exposure vs. black box" dilemma. When a user delves deeper into a particular action, the physical locations of other non-interactive actions remain strictly unchanged, ensuring that the user's established "spatial-temporal" impressions are not disturbed.

[0006] The objective of this invention can be achieved through the following technical solutions: This invention provides a multi-granularity process visualization method based on dynamic anchoring, comprising the following steps: Step S1: Encapsulate a complete human-computer interaction round into an outer conversation container. The outer conversation container adopts the instant messaging bubble paradigm and includes an avatar area, a content area, and a status indicator area. Step S2: Divide the multi-step execution process within the interaction round into N step cards (N≥1), each step card corresponds to an execution action, and write them sequentially into the content area of ​​the outer session container according to the order of occurrence; Step S3: Configure a progressive information density of K level (K≥2) for each step card and provide a switching control so that the user can independently switch the information density level of any step card; Step S4: Construct a continuous visual path in the content area of ​​the outer session container. The visual path traverses all step cards in chronological order of occurrence, forming a micro timeline nested within the outer session container. Step S5: When any step card switches the information density level, the dynamic anchoring algorithm is invoked to recalculate the geometric topology of the visual path and the physical position of each step card, so that the physical position of the non-interactive step cards that existed before the switch remains unchanged. Step S6: Render the visual path and each step card to the display device in real time.

[0007] The core technical principles of this invention include: Granularity Sovereignty: Sovereignty over information granularity is transferred from the system side to the user side. On each step card, the user can independently select any level of progressive information density from K levels (K≥2), thereby gaining the autonomy to choose any intermediate level between "highly summarized (black box equivalent)" and "fully expanded (full exposure equivalent)".

[0008] Dual-Anchor Mapping: Each step card has both a temporal anchor (position in the push sequence) and a spatial anchor (physical coordinates on the display device). The visual path continuously traverses all step cards, mapping the temporal anchor and the spatial anchor to each other to form multi-channel perceptual redundancy coding.

[0009] Direction Coherence: Strictly enforce the same-direction consistency constraint on all visual direction indicators, including but not limited to: temporal direction (the order in which step cards occur), execution direction (the direction in which visual paths are drawn), visual animation direction (the flow direction of dynamic decorations on the path, such as the flow direction of a marquee effect), and pointer direction (the direction in which the path's starting point, ending point, and ending arrow point point).

[0010] Dynamic Anchor Invariance: When any step card switches its information density level, the physical positions of other non-interactive step cards remain visually unchanged.

[0011] Snake-shaped layout mechanism: To support "visual path continuously traversing all step cards," this invention further provides a serpentine arrangement mechanism: all step cards are arranged in multiple rows according to their occurrence sequence, with odd-numbered rows arranged from left to right (L→R) and even-numbered rows arranged from right to left (R→L), forming a boustrophedon-style matrix of step cards with alternating directions between rows. The visual path folds down vertically at the end of each row to the next, ensuring visual continuity across all segments and eliminating the "return sweep" visual jumps inherent in text-based layouts (where each row is L→R).

[0012] Timeline Global Virtual Counter Algorithm: To ensure that the physical position of non-interactive step cards remains unchanged, this invention further provides a global dummy counter algorithm for the timeline. The algorithm includes: (1) Maintain a global virtual counter. Each step card is assigned a virtual column number V according to its push timing when it is added to the timeline. The virtual column number V is determined by the following formula: V = ((counter-1)modcolsCount) + 1 Where counter is the global push sequence number of the card in this step (starting from 1), and colsCount is the preset maximum number of columns per row; For example, the serial number 1 has the column number: (0)mod4+1=1; Serial number 5, column number: 4mod4+1=1, column 1 (first column of newline).

[0013] The formula can also be written as: The virtual column number V = ((step number - 1) mod maximum number of columns per row) + 1.

[0014] (2) Once the virtual column number V of each step card is assigned, it will never be changed, regardless of whether subsequent interactions such as expansion / collapse occur; (3) When a step card is switched to a high information density level (e.g., limited height display or fully expanded state), the step card visually occupies an entire row (occupying the entire row width from the leftmost column to the rightmost column), but its virtual column number V remains unchanged and does not affect the allocation of virtual column numbers for subsequent step cards. (4) When the visual path is drawn, the step card that occupies the whole row is visually presented as a vertical cylindrical shape with the x-coordinate of the column center corresponding to the original virtual column number V as the central axis. The path enters from the virtual column center above and exits from the virtual column center below. (5) For ordinary step cards in the same row that are cut due to the expansion state step card, the step cards before the cut point are classified as starting point segment and the step cards after the cut point are classified as ending point segment, and their respective virtual column numbers V remain unchanged.

[0015] Imaginary lines and geometric inflection point anchor algorithm: To support the realization of axiom D on the visual path, this invention further provides a virtual line and geometric inflection point anchor algorithm. The algorithm includes: (1) Each unfolded step card corresponds to a virtual line, which is a vertical straight line and its x-coordinate is equal to the x-coordinate of the column center corresponding to the virtual column number V of the step card; (2) Before entering the unfolded step card, the visual path passes through the extraction anchor point, which is a geometric inflection point on the path, located at the intersection of the imaginary line where the unfolded step card is located and the upper edge of the unfolded step card. (3) After exiting the unfolded step card, the visual path first passes through the projection anchor point, which is also a geometric inflection point on the path, located at the intersection of the virtual line where the unfolded step card is located and the lower edge of the unfolded step card. (4) The extracted anchor point and the projected anchor point are inflection points on the path geometry, and are not independent rendering elements; (5) The unfolded step card, which is composed of the extracted anchor point, the virtual line, and the projection anchor point, is visually presented as a "detail container that expands on the original time slot" rather than a floating layer that is detached from the original slot.

[0016] Five-stage unidirectional data flow rendering pipeline: This invention further provides a five-stage unidirectional data flow rendering pipeline as the engineering basis for the method. The pipeline includes: Phase P1 (probeNodes): Probes the current display state, takes a DOM reference as input, and outputs an array of step card nodes. Each node contains the coordinates of the four edge connection points, geometric boundaries, and display state classification.

[0017] Phase P2 (buildSnakeRows): Constructs a snake-shaped row structure. Input the step card node array and the maximum number of columns per row, call the global virtual counter algorithm of the timeline, output the row structure array arranged in the path access order, and write the explicit grid row number and grid column number to each step card node.

[0018] Phase P3 (splitRowsForCaps): Processes the splitting of the row by the expanded step card, calls the virtual line and geometric inflection point anchor algorithm, and outputs a complete row array containing the starting point fragment, the exclusive whole row expanded segment, and the ending point fragment.

[0019] Phase P4 (assignPortsAndProject): Solve for the input and output ports of each step card node, project the ports of the expanded step card onto the virtual line, and output a flattened path node sequence containing complete port information.

[0020] Phase P5 (drawPath): Converts the abstract path into scalable vector graphics (SVG) and builds a multi-layer rendering stack, including but not limited to: road surface background layer, halo layer, main path layer, motion flow layer, start point dot layer, end point dot layer, pointer arrow layer, and debug number layer.

[0021] The data flows unidirectionally across the five stages, with no side effects or backflow between stages, and each stage has a single responsibility.

[0022] A method for configuring K-level progressive information density based on user-personalized needs includes: The system aggregates various information display requirements in real time, including display format requirements and information density requirements; it sets corresponding information display methods based on each information display requirement and marks the information display methods with corresponding information density levels; it aggregates various information display methods to establish an information density reserve; and it pre-sets various card categories for each step card. Configure an initial K-level progressive information density for the user based on the user information; Access to the information density reserve database is granted to each user. Users can adjust the information display methods corresponding to the K-level progressive information density according to their personalized needs, and make progressive adjustments based on the information density level corresponding to each information display method after adjustment. When a user adjusts the information display method of the corresponding step card, the card category of the step card is identified, and the user decides whether to adjust the information display method of each step card corresponding to the card category synchronously.

[0023] Compared with the prior art, the beneficial effects of the present invention are: By using K-level progressive information density, the traditional binary switching is transformed into a continuous spectrum that users can adjust at will. A single interface can simultaneously adapt to both deep-verification users and final-output users, fundamentally resolving the dilemma of choosing between information overload and black-box distrust. By establishing cognitive redundancy coding with dual mapping of time anchors and spatial anchors, the speed of users' recall and understanding of the system execution process is improved. Through the serpentine layout mechanism, the visual path remains continuous and unidirectional across all segments, avoiding the visual breakpoints at the end of each line in traditional L→R uniform layout, and eliminating the back-view jumps of text-reading layout. Through the timeline global virtual counter algorithm and the virtual line geometric inflection point anchor algorithm, the physical position of non-interactive step cards remains strictly unchanged during any interaction, supporting non-destructive exploration. It also ensures that the anchor does not drift during dynamic interactions.

[0024] The core rendering algorithm is purely functional, relying only on the state snapshots of all current step cards as input. It is completely decoupled from the sources that trigger the state (user-initiated operation, system automatic response, end of streaming output, historical playback, etc.), so that adding a new trigger source does not require modification of the core algorithm. The outer conversation container adopts the instant messaging bubble paradigm, reusing the user's existing cognitive habits of instant messaging software and eliminating the learning cost of new interaction paradigms. It is not limited to conversational intelligent agent scenarios, but can be extended to any "human-machine collaboration scenario with complex dynamic processes" such as collaborative editing tool timelines, CI / CD pipeline execution visualization, autonomous driving decision reasoning visualization, and medical auxiliary diagnosis reasoning process visualization. Attached Figure Description

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

[0026] Figure 1 This is a schematic diagram of the overall system architecture of the present invention; Figure 2 This is a comparison diagram between the present invention and the prior art; Figure 3 This is a schematic diagram of the K-level progressive information density grading of the present invention; Figure 4 This is a comparison diagram of the serpentine arrangement of the present invention; Figure 5 This is a schematic diagram of the five-stage unidirectional data flow rendering pipeline of the present invention; Figure 6 This is a schematic diagram of the global virtual counter and unfolded geometry of the timeline of the present invention; Figure 7This is a schematic diagram of the scalable vector graphics multi-layer rendering stack of the present invention. Detailed Implementation

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

[0028] like Figures 1 to 7 As shown, a multi-granularity process visualization method based on dynamic anchoring is presented, the method comprising: Step S101: Receive a request message from the user and trigger the execution process of the intelligent agent.

[0029] The request message may include heterogeneous content such as natural language instructions, attachments, and cited materials.

[0030] Step S102: Create an outer session container. The outer session container adopts the instant messaging bubble paradigm, including an avatar area (for displaying the agent's identity icon), a content area (for nesting and displaying the execution process), and a status indicator area (for displaying the current overall execution status, such as running, completed, error, etc.).

[0031] Step S103: During execution, the agent gradually generates N step cards (N≥1). Each step card corresponds to a specific action, including but not limited to: reasoning segment, information retrieval segment, tool invocation segment, phased output segment, and follow-up questioning segment. Each step card is assigned a global push sequence number counter (incrementing from 1) upon generation and is written to the content area of ​​the outer session container according to the push sequence.

[0032] Step S104: Configure K-level progressive information density for each step card.

[0033] In this embodiment, K=4 as shown in the table below:

[0034] It should be noted that the scope of protection of this invention is not limited to the specific number of gears when K=4, and K can be any integer greater than or equal to 2.

[0035] Each step card provides a toggle control in its card header area. The toggle control includes at least one "reduce information density" button and at least one "increase information density" button. Users can click the toggle control to independently switch the information density level of that step card, and the switching does not affect other step cards.

[0036] Step S105: Construct a continuous visual path in the content area of ​​the outer session container. The visual path is implemented using Scalable Vector Graphics (SVG) and traverses all step cards in the push sequence to form a micro timeline nested within the outer session container.

[0037] Step S106: When the information density level of any step card changes, the dynamic anchoring algorithm is triggered.

[0038] The dynamic anchoring algorithm is implemented using a five-stage unidirectional data flow rendering pipeline, and the specific steps are as follows.

[0039] Step S106-1 (Phase P1, probeNodes): Retrieve all elements with a specific display state attribute (e.g., `data-snake-node-state`) within the outer session container using the DOM query interface (e.g., `querySelectorAll`), and perform the following operation on each element: The geometric boundaries of the element, including its position, width, and height, can be read through the `getBoundingClientRect()` interface. Calculate the coordinates of the midpoints of the four sides of the element as candidate locations for the wiring ports, denoted as top, right, bottom, and left respectively; The display state of the element is determined based on its display state attribute, and it is classified into one of four categories: mini (icon state), line (inline state), cap (height limit state), and full (fully expanded state). Assign a full-width block number to each full-width element (line / cap / full); The above information is encapsulated into a node object (PathNode) and added to the node array.

[0040] Phase P1 outputs the node array nodes[0..N-1].

[0041] Sub-step S106-2 (Stage P2, buildSnakeRows): Invoke the global virtual counter algorithm for the timeline to construct the snake-shaped row structure. Details are as follows: miniCounter=0 virtualRowIdx=1 buffer=[] nextMiniRowIsOdd=true flushBuffer(reason): If the buffer is empty: return if nextMiniRowIsOdd is true: direction='L→R' for i in 0..buffer.length-1: buffer[i].virtualPhysicalCol=i+1 else: direction='R→L' for i in 0..buffer.length-1: buffer[i].virtualPhysicalCol=colsCount-i buffer.reverse() rows.push({index:virtualRowIdx,kind:'normal-row',direction,chips:buffer}) if reason=='satured': nextMiniRowIsOdd=NOT nextMiniRowIsOdd buffer=[] virtualRowIdx=virtualRowIdx+1 for chip in nodes: miniCounter=miniCounter+1 if chip.kind=='mini': buffer.push(chip) if buffer.length==colsCount: flushBuffer('satured') else: flushBuffer('capCame') rows.push({index:virtualRowIdx,kind:'cap-block-row',chips:[chip]}) virtualRowIdx=virtualRowIdx+1 flushBuffer('end') for row in rows: For the chip in row.chips: chip.el.style.gridRowStart=row.index chip.el.style.gridColumnStart=chip.virtualPhysicalCol Phase P2 outputs a row structure array `rows` containing a snake-like true physical row flip, and the grid row number and grid column number have been written to each step card element via inline styles.

[0042] Sub-step S106-3 (Stage P3, splitRowsForCaps): Processes the splitting of the row containing the expanded step card. For each row structure, if its type is an expanded cap-block-row, calculate the x-coordinate of the imaginary line corresponding to that expanded step card: virtualLineX=paddingLeft+(virtualPhysicalCol-1)*(colWidth+gap)+colWidth / 2 Where paddingLeft is the left inner margin of the outer session container, colWidth is the width of each column, and gap is the gap between columns.

[0043] Sub-step S106-4 (Stage P4, assignPortsAndProject): Solve for the input and output ports of each step card node. Specifically, for each node n[i]: If i = 0 (first node): n.inPort = 'none'; if n.kind == 'mini', then n.outPort = 'right'; otherwise, n.outPort = 'bottom'. If i == N-1 (last node): n.outPort = 'none'; if n.kind == 'mini', then call pickPort(n, prev_anchor) to solve for n.inPort, otherwise n.inPort = 'top'; Otherwise (intermediate node): call pickPort to solve for n.inPort and n.outPort.

[0044] The pickPort algorithm is as follows: function pickPort(n,other,otherIsFullwidth): dx = other.xn.centerX dy = other.yn.centerY if otherIsFullwidth is true: if abs(dx)<=1: return(dy<0)?'top':'bottom' return (dx<0)?'left':'right' if abs(dy) > abs(dx): return(dy<0)?'top':'bottom' return(dx<0)?'left':'right' Where otherIsFullwidth indicates whether the peer node is in full-width state (line / cap / full). This algorithm introduces "peer node type" as a decision dimension, forcing the selection of a horizontal connection port when a mini node connects to a full-width node, thereby ensuring that the turning point is located on the dummy line of the expanded state step card.

[0045] Subsequently, the x-coordinate projection is performed on the wiring port of each full-width node: if n.kind!='mini': targetX=n.virtualLineX TOP_INTRUSION=2 BOTTOM_INTRUSION=2 topY=n.ports.top.y+TOP_INTRUSION bottomY=n.ports.bottom.y-BOTTOM_INTRUSION if n.inPort=='top': n.ports.top={x:targetX,y:topY} if n.outPort=='bottom': n.ports.bottom={x:targetX,y:bottomY} The TOP_INTRUSION and BOTTOM_INTRUSION are preset visual symmetry intrusion parameters, which cause the start and end points of the path to slightly intrude into the card to achieve a visually symmetrical aesthetic.

[0046] Sub-step S106-5 (Stage P5, drawPath): Convert the abstract path to SVG. The specific steps are as follows: Construct path data string d: d='M'+start.x+' '+start.y for i in 1..N-1: prev=path[i-1] curr=path[i] d+=buildConnector(prev,prev.outPort,curr,curr.inPort) d+='M'+curr.ports[curr.outPort].x+' '+curr.ports[curr.outPort].y The buildConnector function generates a connector path segment: function buildConnector(fromN,fromPort,toN,toPort): from=fromN.ports[fromPort] to=toN.ports[toPort] if abs(from.x-to.x)<=1 OR abs(from.y-to.y)<=1: return'L'+to.x+' '+to.y if fromN.kind!='mini' AND toN.kind!='mini' AND fromPort=='bottom' AND toPort=='top': wpY=(from.y+to.y) / 2 return'L'+from.x+' '+wpY +'L'+to.x +' '+wpY +'L'+to.x+' '+to.y isHorizontalOut=(fromPort=='left' OR fromPort=='right') if isHorizontalOut: wp={x:to.x,y:from.y} else: wp={x:from.x,y:to.y} return'L'+wp.x+''+wp.y+'L'+to.x+''+to.y A multi-layer rendering stack is constructed, from bottom to top: road surface base color halo layer, halo diffusion layer, main path layer, animation flow layer, starting point dot layer, and ending point dot layer. Each layer shares the same path data string d, differing only in stroke width, color, transparency, and animation attributes.

[0047] Step S107: Output the rendering result to the display device.

[0048] Step S108: Continuously monitor changes in the state properties of the step card (via MutationObserver) and changes in the size of the outer session container (via ResizeObserver). When a change is detected, repeat steps S106-S107.

[0049] It should be noted that the listening mechanism completely decouples the core algorithm of this invention from the trigger source. Any trigger source that causes a change in the state of the step card (user actively clicks to switch controls, system automatically responds, streaming output ends, historical playback, etc.) triggers the rendering pipeline through the same listening mechanism, without the need to write different algorithm branches for different trigger sources.

[0050] In one embodiment, as users' personalization needs increase, a preset fixed K-level progressive information density cannot meet these needs, resulting in low flexibility. Therefore, to address this issue, a method for configuring K-level progressive information density for each step card includes: The system can aggregate various information display requirements in real time, and can also collect user feedback on adjustments to the progressive information density of the K-level, forming various information display requirements. These requirements include display format requirements, information density requirements, etc. Intelligent models can be built based on machine learning and deep learning algorithms to intelligently analyze and generate various information display requirements; alternatively, clustering algorithms can be used to cluster various information, and corresponding information display requirements can be set manually based on each cluster; or the platform can set various information display requirements itself. Set up corresponding information display methods according to various information display needs, and mark the information display methods with corresponding information density levels; such as the first level icon mode, the second level inline mode, the third level height-limited mode, and the fourth level fully expanded mode; summarize all information display methods to establish an information density reserve library; users can access the information density reserve library to view various information display methods, such as the display format of information display methods, such as pictures, images, etc., so that users can intuitively understand the information display methods; Grant access to the information density reserve database to each user. Users can choose K information display methods according to their personalized needs, and the selected information display methods are progressively sorted according to information density levels to complete the configuration of K-level progressive information density.

[0051] In one embodiment, when a user needs to readjust the K-level progressive information density after it has been configured, the user can remove or add the corresponding information display methods and perform progressive sorting adjustments based on the information density level of the corresponding information display methods.

[0052] In one embodiment, in order to fully meet the personalized needs of different users, various step cards can be pre-classified to form various card categories, such as clustering based on the K-means clustering algorithm, or classification can be done manually, etc. Users can configure different K-level progressive information densities for different card categories.

[0053] In one embodiment, to facilitate users in adjusting the K-level progressive information density of different card categories, users can adjust the K-level progressive information density of the corresponding step cards according to the actual results. The system identifies the card category of the step card and automatically synchronizes the K-level progressive information density within that card category. Users can also manually decide whether to synchronize the same type of cards in batches.

[0054] In one embodiment, based on the above embodiments, a corresponding recommendation algorithm can be loaded to recommend corresponding K-level progressive information density to the user based on user profiles, user information, historical records, and other relevant information.

[0055] For example, several sets of K-level progressive information densities are pre-set, and standard user information is set for each set of K-level progressive information densities. Then, the similarity between each user and each standard user information is calculated, and the corresponding K-level progressive information density is matched according to the similarity for initial application. Subsequently, individual personalized recommendations are made based on the accumulated user information details.

[0056] This embodiment provides a multi-granularity process visualization device based on dynamic anchoring, including the following modules: The outer container building module is used to encapsulate a complete human-computer interaction round into an outer session container that adopts the instant messaging bubble paradigm. The step card management module is used to split the multi-step execution process within the interaction round into N step cards (N≥1). Each step card corresponds to an execution action and is written into the content area of ​​the outer session container in the order of occurrence. The information density configuration module is used to configure a progressive information density of K levels (K≥2) for each step card and provides a switching control; The visual path building module is used to construct a continuous visual path in the content area of ​​the outer session container. The dynamic anchoring algorithm module includes sub-modules: node detection sub-module, serpentine line construction sub-module, expansion and cutting processing sub-module, wiring port solving sub-module, and path drawing sub-module, which respectively correspond to the five-stage unidirectional data flow rendering pipeline. The state monitoring module is used to monitor changes in the state attributes of the step cards and changes in the size of the outer session container, and to trigger the recalculation of the dynamic anchoring algorithm module. The rendering output module is used to output the rendering results to the display device.

[0057] A multi-granularity process visualization system based on dynamic anchoring includes: The Session Unit component, deployed on the client, is used to present the outer session container and step cards; The visualization engine, deployed on the client, encapsulates the five-stage unidirectional data flow rendering pipeline. The state management module, deployed on the client, is used to maintain the current state of each step card; The communication module is used for bidirectional communication between the client and the server, and receives execution process data pushed by the server. Server-side modules include, but are not limited to: agent execution engine, streaming output engine, and status push engine.

[0058] Expanding application scenarios: The method, apparatus, and system described in this invention are not limited to conversational intelligent agent scenarios, but can also be applied to the following scenarios: Collaborative editing tools display a collaborative timeline: multiple users' editing operations on the same document are displayed as step cards, and a collaborative timeline is constructed to ensure that the editing history of each collaborator remains visually sequential.

[0059] Visualization of Continuous Integration and Continuous Delivery (CI / CD) pipeline execution: Each stage in the pipeline is treated as a step card, and an execution timeline is constructed. It supports switching the K-level information density of each stage (icon mode displays status, inline mode displays summary, and expanded mode displays complete log).

[0060] Visualization of decision-making reasoning in autonomous driving systems: The reasoning process of autonomous driving systems at each decision moment is used as a step card to construct a decision timeline, allowing the vehicle owner or safety officer to review the reasoning details at any decision moment afterward.

[0061] Visualization of the reasoning process in medical assisted diagnosis: The various examinations, judgments, and cited literature called by medical AI in the diagnosis process are used as step cards to construct a diagnostic timeline, allowing doctors to review and verify the AI ​​reasoning process item by item.

[0062] The above embodiments are only used to illustrate the technical methods of the present invention and are not intended to limit it. Although the present invention has been described in detail with reference to preferred embodiments, those skilled in the art should understand that modifications or equivalent substitutions can be made to the technical methods of the present invention without departing from the spirit and scope of the technical methods of the present invention.

Claims

1. A multi-granularity process visualization method based on dynamic anchoring, characterized in that, The methods include: Encapsulate a complete human-computer interaction round into an outer session container; The multi-step execution process within the human-computer interaction round is divided into N step cards, where N≥1. Each step card corresponds to an execution action and is written into the content area of ​​the outer session container in the order of occurrence. Each step card is configured with a progressive information density of K levels, where K≥2, and a switching control is provided to allow users to switch the information density level of any step card based on the switching control. A continuous visual path is constructed in the content area of ​​the outer session container. The visual path traverses all step cards in the order of occurrence, forming a micro timeline nested within the outer session container. When any step card switches information density levels, a preset dynamic anchoring algorithm is invoked to recalculate the geometric topology of the visual path and the physical position of each step card, so that the physical position of the non-interactive step cards that existed before the switch remains unchanged. Render the visual path and each step card to the display device.

2. The multi-granularity process visualization method based on dynamic anchoring according to claim 1, characterized in that, The arrangement rules for the step cards are as follows: All step cards are arranged in multiple rows according to their occurrence sequence, with odd-numbered rows arranged from left to right and even-numbered rows arranged from right to left, forming a step card matrix with alternating directions between rows; the visual path folds down vertically at the end of each row to the next row, so that the path maintains visual continuity across all segments.

3. The multi-granularity process visualization method based on dynamic anchoring according to claim 1, characterized in that, On the visual path, the time movement, execution movement, visual animation direction, and pointer movement are all strictly in the same direction; the time movement is the direction in which the step cards occur; the execution movement is the direction in which the visual path is drawn; the visual animation direction is the direction in which the dynamic decorations flow on the path; and the pointer movement is the direction in which the starting point, ending point, and ending arrow of the path point are pointing.

4. The multi-granularity process visualization method based on dynamic anchoring according to claim 1, characterized in that, The dynamic anchoring algorithm includes a timeline global virtual bit counter sub-algorithm, which includes: Maintain a global virtual counter. Each step card is assigned a virtual column number V according to its push sequence when it is added to the timeline, and the virtual column number V assigned to each step card must not be changed. The formula for calculating the virtual column number V is: The virtual column number V = ((step number - 1) mod maximum number of columns per row) + 1; When the step card is switched to the height-limited display state or the fully expanded state, the step card visually occupies an entire row, but the virtual column number V of the step card remains unchanged.

5. The multi-granularity process visualization method based on dynamic anchoring according to claim 4, characterized in that, The dynamic anchoring algorithm also includes an algorithm for using imaginary lines and geometric inflection points as anchors: Each unfolded step card corresponds to a virtual line, which is a vertical straight line, and its x-coordinate is equal to the x-coordinate of the column center corresponding to the virtual column number V of the step card. Before entering the unfolded step card, the visual path first passes through the extraction anchor point, which is a geometric inflection point on the path. After exiting the unfolded step card, the visual path first passes through the projection anchor point, which is also a geometric inflection point on the path. The extracted anchor point and the projected anchor point are located above the virtual line and are not independent rendering elements.

6. The multi-granularity process visualization method based on dynamic anchoring according to claim 1, characterized in that, The dynamic anchoring algorithm is implemented as a pure function without side effects. The input of the pure function is only a snapshot of the state of all current step cards, and the output is the visual path geometry and the physical layout instructions of the step cards. The pure function is completely decoupled from the triggering source that causes the state change of the step cards.

7. The multi-granularity process visualization method based on dynamic anchoring according to claim 1, characterized in that, The dynamic anchoring algorithm is implemented using a five-stage unidirectional data flow rendering pipeline, which includes the following stages in sequence: Node detection phase: Detect the current display status and output the step card node array; Snake-shaped row construction phase: Construct a row structure array based on the timeline global virtual counter sub-algorithm, and write explicit grid row number and grid column number to each step card node; Expand and cut processing stage: Process the cut of the expanded step card to the row it belongs to, and calculate the coordinates of the imaginary line; Wiring port solving stage: Solve the input and output wiring ports of each step card node, and project the wiring ports of the expanded step card onto the virtual lines; Path drawing stage: Convert abstract paths into scalable vector graphics and build a multi-layer rendering stack; Furthermore, data flows unidirectionally between each stage, with no side effects or backflow.

8. The multi-granularity process visualization method based on dynamic anchoring according to claim 7, characterized in that, In the terminal selection stage, the terminal selection function is used to solve the terminal of each step card node; When the peer node is in full-width state, force the selection of the horizontal wiring port so that the turning point is located on the virtual line of the expanded state step card; When the peer node is not in full-width mode, select the horizontal or vertical wiring port according to the relative magnitude of the distance in the x-direction and the distance in the y-direction.

9. The multi-granularity process visualization method based on dynamic anchoring according to claim 7, characterized in that, In the path drawing stage, Z-shaped connectors are constructed between adjacent unfolded step cards; When both consecutive step cards are in the unfolded state and the generator card exits from the lower edge port and the receiver card enters from the upper edge port, the connector path includes three segments: the first segment is a short vertical segment, the second segment is a horizontal segment, and the third segment is a short vertical segment. The horizontal segment is located at the geometric midpoint of the gap between the lower edge of the generator card and the upper edge of the receiver card.

10. A multi-granularity process visualization device based on dynamic anchoring, characterized in that, include: The outer container construction module, step card management module, information density configuration module, visual path construction module, dynamic anchoring algorithm module, state monitoring module, and rendering output module are all included. Each module collaboratively executes the steps of the multi-granularity process visualization method based on dynamic anchoring as described in any one of claims 1 to 9.

11. A multi-granularity process visualization system based on dynamic anchoring, characterized in that, include: Session unit components, visualization engine, state management module, and communication module; The visualization engine encapsulates the dynamic anchoring algorithm of the multi-granularity process visualization method based on dynamic anchoring as described in any one of claims 1 to 9.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the multi-granularity process visualization method based on dynamic anchoring as described in any one of claims 1 to 9.

Images