A method and system for visualizing configuration of a voice social product campaign page

Abstract

The present application relates to the technical field of voice visualization, in particular to a voice social product activity page visualization configuration method and system, comprising the following steps: disassembling voice display content, identifying page composition and sound attributes, generating a sound segment set, generating a time sequence chain group according to trigger types and sequences, corresponding to playing instructions and interaction actions, generating nested sequence diagrams and dependency chain diagrams, and finally generating a visualization configuration scheme.In the present application, structured identification and unified mapping are completed in the voice display content, an ordered trigger chain is constructed in combination with page loading and interaction actions, voice playing and page flow synchronization are realized, interaction coordination is improved through logical correspondence of playing instructions and operation actions, time offset and dependent path are integrated in series to link playing logic, page state changes and voice sequences are fused, redundant content is eliminated, a reusable configuration structure is constructed, building efficiency is improved, and deployment and maintenance costs are reduced.

Description

Technical Field

[0001] This invention relates to the field of voice visualization technology, and in particular to a visualization configuration method and system for activity pages of voice social products. Background Technology

[0002] The field of voice visualization technology primarily involves presenting voice data and voice interaction processes graphically within a user interface to improve information delivery efficiency and interactive intuitiveness. This technology encompasses key technical aspects such as the structural visualization of speech-to-text conversion, the graphical expression of voice emotions or intonation, visual feedback of voice control status, and the interface display of voice event flows. It is widely applied in voice-based social networking, virtual voice assistants, voice control systems, and multimodal human-computer interaction platforms. Currently, common visualization methods in this field include static icon display, voice waveform animation, text pop-up prompts, and voice event log display. These methods rely on graphical user interface development frameworks and basic web page rendering technologies to construct visual output forms based on voice content. Traditionally, the visualization configuration method for activity pages in voice-based social networking products involves developers manually creating new pages based on existing templates or past project code during holidays or platform operation activities. This typically involves using front-end technologies such as HTML, CSS, and JavaScript to develop holiday-themed styles, manually combining page component structures, updating configuration script files, and connecting to back-end services through interface documentation to implement the activity's functional logic configuration. This type of approach relies on front-end development engineers to perform repeated development and debugging. After the operations team puts forward the page requirements, the technical team completes the UI construction, style adaptation and functional script integration and deployment. The page must go through a complete development and testing process before it goes online.

[0003] Existing technologies build event pages based on a build-from-beginner approach, requiring developers to code and configure scripts separately for each event-themed page. This can lead to excessively long development cycles and response delays when dealing with high-frequency event demands. Furthermore, business personnel cannot directly participate in configuration adjustments for page styles and functional logic, resulting in continuously increasing communication costs. Duplicated component code leads to a chaotic maintenance structure, and increased code redundancy impacts overall project performance. In terms of resource allocation, a significant amount of manpower is tied up in repetitive development, making it difficult to focus on structural optimization and technological evolution. In scenarios with frequent changes in voice content, the lack of standardized configuration paths, chaotic voice trigger locations, and loose process control result in insufficient interaction continuity, ultimately affecting user experience and platform configuration efficiency. Summary of the Invention

[0004] To address the technical problems existing in the prior art, embodiments of the present invention provide a visual configuration method for the activity page of a voice-based social product, comprising the following steps:

[0005] To achieve the above objectives, the present invention adopts the following technical solution: a visual configuration method for an activity page of a voice-based social product, comprising the following steps:

[0006] S1: Deconstruct the display content with voice broadcast, prompts, and voice entry points on the voice social activity page, identify the page area composition in segments, classify the sound attribute fields, distinguish between sound and images, use layer attributes and bounding box alignment for identification, and generate a set of sound segments;

[0007] S2: Compare the page trigger action types of the sound segment set in order, identify click, autoplay, and hover voice content, and calculate the sound trigger point position by combining the page loading and interaction order, and generate a sound time sequence chain group;

[0008] S3: Call the audio content of the audio timing chain group, match the playback command with the upper-level trigger action, identify the page click, swipe, and scroll distribution, merge the response and loading logic, insert unbound playback commands, and generate a nested sequence diagram;

[0009] S4: Based on the playback path component nodes in the nested sequence diagram, compare the offsets of the action trigger points before and after, establish the dependent path and exclude disordered jumps, and generate a dependency chain diagram.

[0010] S5: Call the nodes and paths in the dependency chain graph, connect page state changes with audio playback, determine content switching, adjust playback order, delete broken content, and generate a visual configuration scheme for the activity page.

[0011] As a further aspect of the present invention, the sound segment set includes voice content type, sound effect attribute, and layer alignment information; the sound temporal chain group includes trigger action type, sound trigger position, and segment arrangement order; the nested sequence diagram includes playback instruction node, trigger action mapping, and component response relationship; the dependency chain diagram includes time offset data, playback order relationship, and jump node filtering result; and the visualization configuration scheme of the activity page includes page status node, voice playback order, content switching logic, and playback flow structure.

[0012] As a further aspect of the present invention, the upper-layer triggering action refers to the initial event of the voice playback operation caused by direct user interaction and automatic page behavior.

[0013] As a further aspect of the present invention, establishing the dependency path and eliminating disordered jumps refers to comparing the triggering order and position offset of the voice playback component to filter playback paths that conform to the logical order and eliminate irregular jump behaviors.

[0014] As a further aspect of the present invention, the specific steps of S1 are as follows:

[0015] S101: Based on the content displayed on the voice social activity page, identify layers including voice broadcasts, prompts, and voice entry points, and classify and label them by binding fields and bounding box positions to obtain a set of sound function classification information;

[0016] S102: Call the sound function classification information set, calculate the overlap with the voice entry point according to the layer index and bounding box coordinates, filter the layers that meet the interaction recognition threshold, and obtain the voice function region set;

[0017] S103: Based on the layer and bounding box information in the set of voice function areas, perform unified mapping and aggregation on the content with independent sound functions on the page to obtain a set of sound segments.

[0018] As a further aspect of the present invention, the specific steps of S2 are as follows:

[0019] S201: Based on the page trigger action type field of the sound segments in the sound segment set, the corresponding events are identified as click trigger, automatic playback when the page loads, and component hover start. By extracting the action type tags of the events, they are classified and coded according to the event type to generate a trigger action type identifier sequence.

[0020] S202: Call the trigger action type identifier sequence, combine the page loading order index value corresponding to each type of action with the component interaction trigger order number, compare the index value with the number, calculate the order of the sound segment trigger position in the page flow, and obtain the sound trigger order index set;

[0021] S203: Based on the trigger sequence number recorded in the sound trigger sequence index set, the sound segment set is indexed and sorted, and the sorted sound segments are recombined into an ordered sequence to establish a sound timing chain group.

[0022] As a further aspect of the present invention, the specific steps of S3 are as follows:

[0023] S301: Call the audio segments in the audio timing chain group, match each playback instruction with the type field of the trigger action at the upper layer of the page according to the sequential number of the playback instructions, and establish a set of audio instruction correspondences by searching the trigger conditions and instruction binding relationships of click, slide and scroll actions;

[0024] S302: Based on the page distribution location field of the action type in the voice command correspondence set, calculate the position index value of the trigger area of ​​each type of action in the page area grid, and call the loading order number of the voice content to perform position alignment sorting on the two types of sequential data to obtain the action response sequence structure.

[0025] S303: For the binding status field of each node in the action response sequence structure, retrieve the unbound voice control components that do not include voice commands, insert the corresponding playback command according to the action number of the component, and merge the insertion result with the original sequence to establish a nested sequence diagram.

[0026] As a further aspect of the present invention, the specific steps of S4 are as follows:

[0027] S401: Based on the component nodes identified as action playback paths in the nested sequence diagram, extract the trigger point timestamp of each sound playback action, and calculate the difference with the trigger times of the preceding and following adjacent actions respectively. Determine whether the difference is less than the offset overlap threshold, and obtain the trigger point offset difference set.

[0028] S402: Call the time offset and action sorting number corresponding to the difference in the set of trigger point offset differences. If the difference is lower than the offset overlap threshold, establish the dependency path according to the trigger order. If there is no order dependency, remove the jump relationship of the corresponding node and generate a playback action dependency path group.

[0029] S403: Based on the action sequence index value and playback node number recorded in the playback action dependency path group, connect all playback actions sequentially according to the time number and string them together to form a continuous playback structure, and establish a dependency chain graph.

[0030] As a further aspect of the present invention, the specific steps of S5 are as follows:

[0031] S501: Call all audio playback nodes and path information in the dependency chain diagram, combine them with page state event data, match the time points of the four types of state changes (page entry, component interaction, content stay and page exit), and align them with the corresponding audio nodes to generate a set of state trigger mapping relationships.

[0032] S502: Based on the playback node and state node time periods recorded in the state trigger mapping relationship set, cross-determine the time intervals before and after playback of each voice action. If there is a page content switching behavior between adjacent voices, adjust the sequence number of the voice actions and delete the voice segments in the broken state to obtain the content-related playback sequence set.

[0033] S503: Based on the synchronization relationship between the audio and state sequences in the content-related playback sequence set, the structure is combined and transformed, the sequentially arranged playback path and page state behavior are structurally integrated, and the configuration attributes are encapsulated to establish a visual configuration scheme for the activity page.

[0034] A visual configuration system for the activity page of a voice-based social product, comprising:

[0035] The sound extraction module is used to implement S1: decompose the display content with voice broadcast, prompts and voice entry in the voice social activity page, identify the page area composition in segments, classify the sound attribute fields, distinguish between sound and image, use layer attributes and bounding box alignment to identify, and generate a set of sound segments;

[0036] The timing generation module is used to implement S2: compare the page trigger action types of the sound segment set in order, identify click, autoplay, and hover voice content, and calculate the sound trigger point position by combining the page loading and interaction order, and generate a sound timing chain group;

[0037] The sequence construction module is used to implement S3: call the audio content of the audio timing chain group, match the playback command with the upper-level trigger action, identify the page click, swipe, and scroll distribution, merge the response and loading logic, insert unbound playback commands, and generate a nested sequence diagram;

[0038] The dependency chain module is used to implement S4: based on the playback path component nodes in the nested sequence diagram, compare the offsets of the trigger points of the actions before and after, establish the dependency path and exclude disordered jumps, and generate a dependency chain diagram;

[0039] The configuration generation module is used to implement S5: call the nodes and paths in the dependency chain graph, connect page state changes with audio playback, determine content switching, adjust playback order, delete broken content, and generate a visual configuration scheme for the activity page.

[0040] Compared with the prior art, the advantages and positive effects of the present invention are as follows:

[0041] In this invention, structured recognition and unified mapping are completed in the voice display content. An orderly trigger chain is constructed by combining page loading and interactive actions to realize the synchronization of voice playback and page flow. The logical correspondence between playback instructions and operation actions improves the coordination of interaction. The playback logic is connected by time offset and dependent path. The page state changes and voice sequence are merged. Redundant content is eliminated and a reusable configuration structure is constructed to improve the efficiency of construction and reduce deployment and maintenance costs. Attached Figure Description

[0042] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying 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.

[0043] Figure 1 This is a schematic diagram of the steps of the present invention;

[0044] Figure 2This is a detailed schematic diagram of S1 of the present invention;

[0045] Figure 3 This is a detailed schematic diagram of S2 of the present invention;

[0046] Figure 4 This is a detailed schematic diagram of S3 of the present invention;

[0047] Figure 5 This is a detailed schematic diagram of S4 of the present invention;

[0048] Figure 6 This is a detailed schematic diagram of S5 of the present invention;

[0049] Figure 7 This is a system module diagram of the present invention. Detailed Implementation

[0050] The technical solution of the present invention will now be described with reference to the accompanying drawings.

[0051] In embodiments of the present invention, words such as "exemplarily," "for example," etc., are used to indicate that something is an example, illustration, or description. Any embodiment or design described as "exemplary" in the present invention should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of the word "exemplary" is intended to present the concept in a concrete manner. Furthermore, in embodiments of the present invention, the meaning expressed by "and / or" can be both, or either one.

[0052] In the embodiments of this invention, the terms "image" and "picture" may sometimes be used interchangeably. It should be noted that, without emphasizing the distinction between them, they convey the same meaning. Similarly, the terms "of," "corresponding (relevant)," and "corresponding" may sometimes be used interchangeably. It should be noted that, without emphasizing the distinction between them, they convey the same meaning.

[0053] In this embodiment of the invention, sometimes a subscript such as W1 may be written in a non-subscript form such as W1. When the difference is not emphasized, the meaning they express is the same.

[0054] To make the technical problems, technical solutions and advantages of the present invention clearer, a detailed description will be given below in conjunction with the accompanying drawings and specific embodiments.

[0055] Please see Figure 1 This invention provides a method for visually configuring an activity page of a voice-based social product, comprising the following steps:

[0056] S1: Decompose the display content with voice broadcast, prompts and voice entry functions on the voice social activity page, segment and identify the components of each content in the page area, distinguish the sound part from the image part by classifying the sound function attribute field and decomposing it according to structure, and use the layer attributes and bounding boxes bound to the sound playback for alignment and recognition, and put all display content with independent sound functions into the same mapping space to generate a set of sound segments;

[0057] S2: Based on the page trigger action type of the audio segment in the audio segment set, compare the action order and identify the audio content whose playback logic is click trigger, automatic playback when the page loads, and component hover start. According to the page loading order and the interaction trigger order, calculate the position of the audio trigger point in the page usage flow, and organize the audio segment sequence according to the order of appearance to generate audio time sequence chain group.

[0058] S3: Call the audio content arranged in sequence in the audio timing chain group, process each playback command with the upper-level trigger action, identify the distribution position of page click, swipe, and scroll actions, merge and sort the response logic of the action body and the audio loading logic, check whether there are unbound voice control components, if there are, insert the playback command and place it in the internal node of the action command chain, and generate a nested sequence diagram.

[0059] S4: Based on the component nodes of the nested sequence diagram that have identified the action playback path, compare the offset difference between the trigger points of the current sound action and the previous and next playback actions. If there is an overlap, establish the attachment path according to the priority of time. If there is no sequential dependency, exclude the jump node. Generate a dependency chain diagram by connecting all playback content triggered in time order.

[0060] S5: Call all nodes and playback paths in the dependency chain graph, connect the four types of page state changes (page entry, component interaction, content stay, and page exit) with the playing audio, determine whether there is content switching behavior before and after the audio playback, if so, adjust the order of audio actions and delete the broken audio content, integrate the playback process and state change behavior, and generate a visual configuration scheme for the activity page.

[0061] The audio segment set includes audio content type, audio function attributes, and layer alignment information; the audio timing chain group includes trigger action type, audio trigger position, and segment arrangement order; the nested sequence diagram includes playback instruction nodes, trigger action mapping, and component response relationships; the dependency chain diagram includes time offset data, playback order relationships, and jump node filtering results; and the activity page's visual configuration scheme includes page status nodes, audio playback order, content switching logic, and playback flow structure.

[0062] Please see Figure 2The specific steps of S1 are as follows:

[0063] S101: Based on the content displayed on the voice social activity page, identify layers including voice broadcasts, prompts, and voice entry points, and classify and label them by binding fields and bounding box positions to obtain a set of sound function classification information;

[0064] First, all visible components need to be retrieved from the layer structure after the page loads. This is done by iterating through the layers to obtain the component attributes of each layer, including the layer ID, component type, text fields, layer level, and bounding box coordinates. Then, semantic parsing is performed on the field content, comparing the text tags appearing in the fields with a predefined set of voice function keywords. This keyword set consists of pre-compiled common voice function fields, including keywords such as "voice_play," "audio_tip," and "audio_entry." During the matching process, a field-by-field matching method is used to determine if a keyword appears in the field tag string. If the field contains the keywords "voice_play" or "speak_button," the layer is presumed to be used to trigger the voice playback function. If the field contains "audio_tip" or "sound_icon," and the layer's bounding box size is small (e.g., width and height both not exceeding 64 pixels), it is presumed to be a notification sound function layer. If the field tag is "audio_entry," "entry_voice," etc., and the layer is located in the top or bottom 10% of the page area (i.e., based on the overall page height), it is considered a layer for triggering voice playback. The layers are divided by height. For example, if the page height is 1920 pixels, then layers with an upper boundary less than 192 pixels or a lower boundary greater than 1728 pixels are considered navigation entry areas and can be presumed to be voice entry layers. After classification, the layer ID, function field, layer position, and corresponding voice function type are written into a structured information set, i.e., the sound function classification information set. For example, if there is a button with layer ID 101, a field of "voice_play_btn", and bounding box coordinates of [100, 200, 300, 250], the field name contains "voice_play". Furthermore, the layer with the button type is identified as a voice broadcast layer; the layer with layer ID 102 has the field "sound_tip_icon", the bounding box coordinates are [400, 100, 420, 120], and the size is 20×20 pixels, so it is identified as a prompt sound layer; the layer with layer ID 103 has the field "main_audio_entry", the bounding box coordinates are [0, 1800, 1080, 1920], and the lower boundary is located within the bottom 10% of the page, so it is identified as a voice entry layer. Finally, the sound function classification information set includes the type and bounding box position of these three layers.

[0065] S102: Call the sound function classification information set, calculate the overlap with the voice entry point based on the layer index and bounding box coordinates, filter the layers that meet the interaction recognition threshold, and obtain the set of voice function regions;

[0066] First, all layers marked as voice entry points are extracted, and their bounding box positions are used as references. Then, all other layers on the page are traversed, and an overlap analysis is performed on the voice entry layer for each layer. The overlap analysis focuses on the intersection area between the bounding boxes of the two layers. The four coordinate values ​​of each layer's bounding box are compared with the coordinates of the voice entry layer to determine if there is an intersection. If an intersection exists, the ratio between the area of ​​the intersection area and the area of ​​the original layer is calculated to further determine the degree of overlap. To identify valid voice function areas, an interaction recognition threshold needs to be set. This threshold is used to determine whether a layer is close enough to the voice entry area and may be associated with it. This threshold is set to 0.3, meaning that the overlap area between a layer and the voice entry layer must reach more than 30% of the layer's area to be considered a valid area. This threshold is verified through a large number of pages. Based on the frequency of user operation locations obtained from sample statistics, in most voice entry area interaction designs, components that are close to the voice entry layer and have more than 30% overlap are more likely to be related to voice functions. For example, if there is a layer with ID 201 and a bounding box of [100, 1800, 300, 1900], and it overlaps with the bounding box of the voice entry layer [0, 1780, 1080, 1920] by 200×100 pixels, accounting for 100% of the area of ​​layer 201 itself, then it meets the interaction threshold. If the bounding box of layer with ID 202 is [800, 1600, 900, 1700], and it only overlaps with the voice entry layer at the corners, less than 10% of the total area of ​​the layer, then it does not meet the filtering conditions. Finally, by comparing the overlap ratio between each layer and the voice entry layer, layers that meet the interaction recognition threshold are selected and grouped into a voice function area set for subsequent operations.

[0067] S103: Based on the layer and bounding box information in the voice function area set, perform unified mapping and aggregation of content with independent sound functions on the page to obtain a set of sound segments;

[0068] First, extract the field names and their bounding box coordinates corresponding to the layers. Then, extract the associated page content based on the field identifiers. The extracted content may be the text information displayed by the layer, button prompts, or linked audio resource paths, etc. Then, classify these field contents according to their semantics to determine whether they belong to the voice broadcast category, prompt tone category, or voice entry category. Aggregate them according to their functional categories. The aggregation method is to arrange the content information of layers of the same category according to the order of appearance on the page. The order of appearance is sorted by the vertical coordinate value of the layers. Layers with smaller y-coordinate values ​​are considered to be above and are prioritized. For example, if the voice broadcast layer has a field "voice_intro" with the content "Welcome to use the voice function" and bounding box coordinates [50, 100, 400, 140], and another field "voice_i If the content of "instruction" is "Click to start speaking", with coordinates [50, 200, 400, 240], then first extract "Welcome to use the voice function", then concatenate "Click to start speaking" to form a complete broadcast segment. If it is a prompt sound layer, then extract its audio resource path. For example, if the field is "audio_tip_icon", the corresponding audio resource is " / audio / tip.wav", and record it as a prompt sound segment. If it is a voice entry layer, then extract its bound operation command or voice recognition trigger field, such as "start_voice_session". This information is summarized into independent voice segment data items and written into a sound segment set. This set is identified and grouped according to function category, and finally constitutes a complete sound segment set for subsequent use in voice recognition or playback logic.

[0069] Please see Figure 3 The specific steps of S2 are as follows:

[0070] S201: Based on the page trigger action type field of the sound segments in the sound segment set, the corresponding events are identified as three types: click trigger, page load autoplay, and component hover start. By extracting the action type tags of the events, classifying and encoding them according to the event type, a trigger action type identifier sequence is generated.

[0071] First, the action type-related field value is extracted from each sound segment. This field is usually a key-value pair configured in the sound segment attribute data structure, such as "trigger_type:click" or "trigger_type:auto_load". During the traversal of all sound segments, the string value of this field is precisely compared. By determining whether the field value is exactly the same as "click", "auto_load", or "hover", the trigger mode of the sound segment is identified. If the field value is "click", it is determined that the sound segment is triggered when the user clicks a component on the page, such as clicking the play button; if the field value is "auto_load", it means that the sound plays automatically when the page is loaded, such as background prompts or guides; if the field value is... "hover" indicates that the sound clip is automatically triggered when the user hovers the mouse over a component, such as the sound feedback on a tooltip button. After recognition, different types of triggering methods are classified and processed, and each is assigned a fixed event type code. For example, click events are uniformly marked as T001, autoplay events are marked as T002, and hover events are marked as T003. If the field of sound clip A is "click", then its code is T001; if the field of sound clip B is "hover", then its code is T003, and so on, forming a code sequence corresponding to the original set of sound clips. The entire encoding process does not depend on any ambiguous semantics in the fields, but only on the explicit matching of field values, and the code values ​​use fixed strings for subsequent sequential processing and clustering. This code sequence is the final generated trigger action type identifier sequence.

[0072] S202: Call the trigger action type identifier sequence, combine the page loading order index value corresponding to each type of action with the component interaction trigger order number, compare the index value and the number, calculate the order of the sound segment trigger position in the page flow, and obtain the sound trigger order index set;

[0073] To pinpoint the triggering sequence of sound segments, it's necessary to combine the page load order index value corresponding to each action type with the component interaction triggering sequence number. The load order index value is generated based on the component loading order recorded in the page document structure, numbered from top to bottom according to the order in which components appear in the DOM structure, with the first loaded component's index value set to 1, and incremented sequentially. The interaction triggering sequence number originates from the user's actual actions on page components recorded in the front-end interaction log, with the first user interaction's sound segment numbered as 1, and each subsequent action incrementing by one. Both serve as the basis for time positioning. The action type, page load index, and interaction number for each sound segment are extracted separately, and the primary sorting criterion is determined based on the action type. For example, for sound segments of the "auto_load" type, the page load order index value is prioritized as the triggering sequence criterion because this type of sound plays automatically after the page is rendered and is usually closely related to the loading order. For "click" and "hover" type fragments, the interaction trigger number is taken into account first, because these sounds are related to the user's click or hover operation, and the actual interaction order better reflects the trigger sequence. During the comparison process, for the same event type, they are sorted by their primary reference value from smallest to largest, while secondary reference values ​​are introduced for parallel sorting. For example, if sound fragment A is "auto_load" with a loading index of 2, sound fragment B is "click" with an interaction number of 1, and sound fragment C is "click" with an interaction number of 2, then it is determined that sound fragment A is triggered first after the page loads, followed by B, and finally C. If the interaction numbers of the two fragments are the same, the page loading index is used as an auxiliary basis for comparison, thus forming a unique trigger sequence number for each sound fragment. This number is used as the basis for the subsequent construction of the timing chain group. All sound fragments and their number information constitute the sound trigger sequence index set.

[0074] S203: Based on the trigger order number recorded in the sound trigger order index set, sort the sound segment set by index, recombine the sorted sound segments into an ordered sequence, and establish a sound timing chain group;

[0075] The audio segment set is reordered using this ID as the primary key. During the sorting process, each item in the audio trigger order index set is traversed, and the original audio segment set is reorganized according to the ID values ​​from smallest to largest. This ensures that the position of each audio segment in the new set matches its actual trigger order. If multiple audio segments have the same ID, the loading order index value is used as an auxiliary sorting parameter for fine-tuning. The reordered audio segment set forms a clear audio logic playback chain. Based on this, an ordered audio timing chain is constructed. This chain stores each audio segment in a queue, along with a call field and trigger field for each audio segment. The chain group is defined as a linear sequence of sequential playback, including the playback method, playback resource path, and corresponding page component identifier. If multiple sound segments need to be played concurrently or respond to the same event, a concurrent flag is inserted into the chain group structure to indicate the independent or parallel state of the segment. For example, if segment A is numbered 1, segment B is numbered 2, and segment C is numbered 3, the final chain group arrangement order is [A, B, C]. If A and B need to be triggered concurrently, A and B are marked as playing concurrently, and a branch structure flag is inserted into the chain group. Finally, through this structural organization, the process of building a sequential playback chain from unordered sound segments is completed, and the output is the established sound timing chain group.

[0076] Please see Figure 4 The specific steps of S3 are as follows:

[0077] S301: Call the audio segments in the audio timing chain group, match each playback instruction with the type field of the trigger action at the upper level of the page according to the sequential number of the playback instructions, and establish a set of audio instruction correspondences by searching the trigger conditions and instruction binding relationships of click, swipe and scroll actions;

[0078] First, each playback instruction is processed by traversing its sequential number, which indicates the playback order of sound segments in the page interaction flow. For each playback instruction, the upper-level trigger action type field is extracted, usually a structure field "trigger_type". Its value may be one of three types: "click", "scroll", or "swipe", corresponding to typical page interaction actions such as click, scroll, and swipe, respectively. By identifying the trigger type field value of each playback instruction, this field value is compared with the action type field in the page component interaction configuration data to identify the corresponding page component. If the instruction field value is "click", then the button component with the trigger event defined as "click" is found on the page and its ID is extracted; if the field value is "scroll", then the scroll container area component with a scroll response event is found; if the field value is "swipe", then the scrollable carousel area or gesture interaction area is found, and the trigger condition fields of these components are read in sequence. For example, click events are usually bound to the component's click completion status field, such as "clicked=true", and scroll events may be bound to the page. The scroll distance field, such as "scrollTop>300", is used to bind the swipe event to the swipe direction and distance fields, such as "swipeLeft=trueanddistance>150". By matching the instruction field with the component action field and checking whether the condition fields are consistent, if both logical conditions are met, the voice playback instruction is paired with the page component. For example, the trigger_type of playback instruction I is "scroll", the action type defined by component A on the page is "scroll", and it has the trigger condition "scrollTop>280". If the condition field of instruction I is "scrollTop>250", and the page scroll threshold is set to [200, 500], then the two conditions are consistent and a pairing relationship can be established. This scroll threshold is determined through page interaction statistics, that is, when the scroll value is greater than 200 pixels, it is a valid scroll trigger condition, and less than 200 is considered invalid. Finally, all successfully matched playback instructions are semantically bound to their page components, generating a set of one-to-one correspondence records between voice instructions and page actions, and the output is a set of voice instruction correspondence relationships.

[0079] S302: Based on the page distribution location field of the action type in the voice command correspondence set, calculate the position index value of the trigger area of ​​each action in the page area grid, call the loading order number of the voice content, perform position alignment sorting on the two types of sequential data, and obtain the action response sequence structure.

[0080] First, extract the page position of each action type. Pages are typically scrollable vertically, so divide the page into several grid regions, each a rectangle of equal height. The page height is divided into 10 regions by default, meaning each region's height is 10% of the total page height. If the total page height is 2000 pixels, each grid is 200 pixels high. For each component bound to an action, extract the vertical coordinate Y_top of its bounding box's top edge. Position this coordinate relative to the page height grid to determine which grid region the Y_top value falls into. For example, if Y_top is 450 pixels, it falls into the 3rd region, and its page position index is recorded as 3. This process is repeated for all instructions, forming a grid index sequence of action types on the page. Then, call the loading order number recorded in the sound timing chain for each audio content. This number is a positive integer, starting from 1 and sequentially indicating the playback order. For example, instruction A is numbered 1, instruction B... The instruction number is 2. This loading number is compared and sorted with the page position index. During the comparison, the instructions are sorted according to the physical order of the page from top to bottom, and then sorted in ascending order of grid numbers. At the same time, it is checked whether the loading order is consistent with the page spatial order. If there is a case where the loading number is 1 but the page position is grid 8, it means that the instruction is physically lower on the page but was played earlier. This is recorded as an order inconsistency mark, triggering the sorting adjustment mechanism to rearrange the playback order to match the page grid distribution order. The adjustment logic is that if the physical order deviates from the loading order by more than 2 grids, it is considered a misalignment. For example, if the instruction number is 1 but the page is grid 9, sorting adjustment is triggered. The sorting threshold is set to a deviation of no more than 2 grids to be considered a valid match. This threshold is calculated based on the page interaction delay and the average duration of the voice rhythm. Finally, all instructions are aligned and rearranged according to the page position and playback loading number to generate a set of action response sequence structures with clear structure and consistent position and order.

[0081] S303: For the binding status field of each node in the action response sequence structure, retrieve the unbound voice control components that do not include voice commands, insert the corresponding playback command according to the action number of the component, and merge the insertion result with the original sequence to establish a nested sequence diagram;

[0082] During the traversal, nodes with a field value of "unbound" are identified. This indicates that the node is an interactive component that actually exists on the page, but has not yet been bound to a voice command. The page component tree structure is then used to further retrieve a list of all interactive components with voice control capabilities. Components not included in the action response sequence are filtered out and marked as "unbound voice-controlled components." For each of these components, an action number extraction operation is performed. The number information comes from the order of operations performed on the component in the page interaction record. For example, component number 7 indicates that it appeared in the 7th user action. Components of this type are arranged in ascending order of action number, and a voice command insertion operation is performed sequentially. The insertion position is determined by finding the empty space between two adjacent numbered items in the response sequence. If component number 6 is present and no command is assigned between numbers 5 and 7 in the response sequence, then the command will be inserted. The new playback instruction number is set to 6 and inserted in the middle position. The newly generated playback instruction content is set to the default voice content according to the component's action type field. Click-type actions are configured with "Activate after clicking", and swipe-type actions are configured with general prompts such as "Swipe left to continue". The playback field is automatically generated and bound to the component, and the binding status field is set to "Auto-complete". The inserted item is structurally merged with the original action response sequence. During the merging process, the original sequence number and page position index are retained. The inserted item is positioned and sorted according to the action number. The final generated new sequence structure will organize the nodes of the existing bound instructions and the nodes of the newly added automatically inserted instructions in a unified manner to form a complete playback structure path. The output is a nested sequence diagram. Each node in the diagram contains a component identifier, action type, page grid position, voice playback content, and binding status field.

[0083] Please see Figure 5 The specific steps of S4 are as follows:

[0084] S401: Based on the component nodes identified as action playback paths in the nested sequence diagram, extract the trigger point timestamp of each sound playback action, and calculate the difference between the timestamp and the trigger times of the adjacent actions before and after. Determine whether the difference is less than the offset overlap threshold, and obtain the trigger point offset difference set.

[0085] From all nodes in the graph, nodes with the attribute field "Playback Path Identifier" set to "Yes" are selected. For each of these nodes, the timestamps of the playback action trigger points are extracted. These timestamps are typically recorded in milliseconds and sorted according to the playback sequence. Then, the difference between the timestamps of adjacent nodes is calculated: the time of the later node minus the time of the earlier node. The resulting value is the trigger time interval between the two actions. After the difference calculation, it is determined whether this time difference is less than a set offset overlap threshold of 300 milliseconds. This threshold is based on the average response time of continuous user operations in typical social voice applications. This threshold was determined through statistical analysis of 1000 actual user voice interaction samples. In 90% of the samples, an interval between voice triggers less than 300 milliseconds typically constitutes content interference or semantic continuity. To address the issue of sexual conflict, this value is set as a benchmark. If the time difference is less than 300 milliseconds, it is recorded as a valid offset. Simultaneously, the corresponding start node number, end node number, and their respective timestamps are added to the structure record, and the difference is added as the "Time Offset" field, forming a set of trigger point offset differences. For example, if node A's trigger time is 1200 milliseconds and node B's is 1450 milliseconds, the difference is 250 milliseconds, which is below the offset overlap threshold of 300 milliseconds. This item is recorded, and the field "below threshold = true" is added. If subsequent node C's trigger time is 1900 milliseconds, the difference between C and B is 450 milliseconds, which is above the threshold. This item is not included in the offset difference set. Finally, this processing result will be used for subsequent dependency relationship construction and playback path optimization, outputting a set of trigger point offset differences.

[0086] S402: Call the time offset and action sort number corresponding to the difference in the trigger point offset difference set. If the difference is lower than the offset overlap threshold, establish the dependency path according to the trigger order. If there is no order dependency, remove the jump relationship of the corresponding node and generate the playback action dependency path group.

[0087] The "Time Offset" field is read, along with the corresponding numbers of the two preceding and following playback actions. For records where the time offset is less than the offset overlap threshold of 300 milliseconds, dependency analysis is performed. First, it's determined whether there's sequential numbering continuity between the two actions. For example, if there's a 220-millisecond offset difference between action numbers 4 and 5, and 5 immediately follows 4, satisfying the basic condition of sequential dependency, then the dependency field "Attached to Node 4" is set on node 5, and the dependency status is marked as "Valid." Conversely, if the two node numbers are not consecutive, for example, the difference between numbers 3 and 6 is 290 milliseconds, although the difference is below the threshold, there's a jump in the numbering. Then, it's further checked whether there are other closer valid dependency relationships for this playback action. If not, then the node... Without setting any dependencies, the system checks if there are any historically defined jump relationship fields. If a field exists but lacks logical validity (e.g., the target node's time is earlier than the current node's trigger time), the jump relationship is deemed invalid and removed. For example, if node 6 was originally set to jump to node 2, but node 2's trigger time is 1100 milliseconds while node 6's is 1400 milliseconds, the logic is flawed. The jump relationship field is cleared, and a field "Jump Status = Removed" is added. After the dependency path is constructed, all dependencies between nodes are recorded as path entries using the starting number, target number, and dependency validity fields. The dependency path group ultimately consists of a series of node connection information that meet the time offset threshold conditions and form a logical dependency chain. The output is the playback action dependency path group.

[0088] S403: Based on the action sequence index value and playback node number recorded in the playback action dependency path group, connect all playback actions sequentially according to the time number and string them together to form a continuous playback structure, and establish a dependency chain graph.

[0089] The dependent path entries are arranged in ascending order of their sequential numbers. A playback chain is built starting with the node with the smallest number. Each node is checked for subsequent nodes that depend on the current node. If a node does, a direct playback connection is established between the current node and its subsequent nodes, forming a playback channel. For example, if node 1 depends on no parent node, node 2 depends on node 1, and node 3 depends on node 2, the connection path is 1→2→3. If a node has no dependent relationships but its number is consecutive to the previous node, and it does not have any jump or removal markers, it is added to the playback chain as a sequential node, and the connection type is marked as "sequential connection". If a node is marked as "jump status = removed", it is not included in the connection. During the construction process, connecting edges are added to each node, and the starting point number, ending point number, connection type, and trigger time difference are recorded on each edge to ensure consistency between the time sequence and structural logic. After all connections are completed, a complete playback chain graph is formed. This graph is a directed graph structure, indicating that each playback action is linked sequentially in time order, and distinguishing between dependent connections and sequential connections. For example, if the playback action nodes are [1, 2, 3, 4], where 2 is dependent on 1, 3 is sequentially connected to 2, and 4 does not constitute a dependency due to a time offset of more than 300 milliseconds, the graph structure will be 1→2 (dependent), 2→3 (sequential), 3→4 (sequential). The final output is the dependency chain graph.

[0090] Please see Figure 6 The specific steps of S5 are as follows:

[0091] S501: Call all audio playback nodes and path information in the dependency chain graph, combine page state event data, match the time points of the four types of state changes (page entry, component interaction, content stay and page exit), and align them with the corresponding audio nodes to generate a set of state trigger mapping relationships.

[0092] The system sequentially reads the playback trigger timestamp and corresponding playback number of each audio playback node, and extracts the connection relationship field between the start and end nodes in each path. Then, it loads page state event data and categorizes it chronologically into four main categories: page entry events, component interaction events, content dwell events, and page exit events. Each category contains a start and end time point or duration field, corresponding to the fields "enter_time", "interaction_time", "hold_time", and "leave_time", respectively. These event times are compared and matched with the playback time of the audio nodes. The matching process determines whether the audio node's playback timestamp falls within the start and end time period of a certain state event. For example, if the audio node's playback time is 1450 milliseconds, and the page... If the component interaction time period in the state event is between 1400ms and 1600ms, then this node is determined to be associated with the component interaction state, and the matching state type is recorded as "component interaction". If the playback time of a certain voice node is exactly within 200ms after the page load time, its associated state is determined to be "page entry". The threshold for judging the page entry state is set to 300ms, which is based on the average delay time of the user's first visual focus. If the playback time is earlier than the page entry time or later than the page exit time, it is marked as "no matching state". The above judgment process is repeated for all nodes. Finally, each voice playback node is matched with one or more of the four types of page state changes, and the results are recorded in a field structure. The fields include voice node number, playback time, corresponding state type, state start and end time, etc. The output is a set of state trigger mapping relationships.

[0093] S502: Based on the playback node and state node time periods recorded in the state trigger mapping relationship set, cross-determine the time intervals before and after playback of each voice action. If there is a page content switching behavior between adjacent voices, adjust the sequence number of the voice actions and delete the voice segments in the broken state to obtain the content-related playback sequence set.

[0094] For each voice action, a cross-check is performed on the time intervals before and after playback. The check determines whether there is a change in the page content state between two adjacent voice actions, such as a page switching from a static state to an interactive state or from an enter state to an exit state. The criteria for this check are whether the current voice playback end time is at the end of the current state and the next voice playback start time is at the beginning of the next state. If this condition is met, a page state transition is determined between the two voice nodes. Further checks are then performed to determine if the voice action numbering order needs to be adjusted. If the current voice node has a smaller logical number but its actual playback time is later than subsequent nodes, a numbering adjustment operation is performed, shifting the number of the node that was played later but triggered earlier to the front and updating the path connections in the dependency chain graph. Simultaneously, the voice nodes... The binding fields between the audio and page state events are reordered to ensure that the numbering order is consistent with the page state event change logic. To determine whether there is a broken link between adjacent audio segments, it is necessary to check whether the current audio node has a direct page state connection with the next audio node. If the audio playback time is outside a state and there is no jump behavior or page event record between the two states, the audio segment is considered to be broken. The broken link standard is defined as the interval between two adjacent states before and after the audio playback exceeds 1000 milliseconds and there are no other component events or states in between. Such nodes are recorded as "broken link nodes" and deleted from the sequence. At the same time, their edge relationship in the dependency chain graph is removed. The final output is a set of content association playback sequences that are logically continuous, reasonably numbered, and closely related to the page content.

[0095] S503: Based on the synchronization relationship between audio and state sequences in the content-related playback sequence, the structure is combined and transformed, the sequentially arranged playback path and page state behavior are structurally integrated, and the configuration attributes are encapsulated to establish a visual configuration scheme for the activity page.

[0096] The entire structure undergoes a combination transformation operation. First, the playback time, page event state type, and path type fields of the starting and ending nodes connected in each audio playback path are extracted. Using sequential numbering as the main thread, all playback paths are arranged in chronological order and integrated with the state switching time periods recorded in the page state behavior on the time axis to establish a new structural mapping relationship. Each audio action node in the structure is nested within its corresponding page state time period, while the page state segment serves as the parent node to form a unified structural hierarchy. Based on this, the playback configuration attributes of each audio node are encapsulated. The encapsulated content includes audio file path, playback trigger method, associated component ID, status label, and playback number. During the encapsulation process, all attributes are filled into the preset structure according to the configuration item field template. For example, the field "voice_path" is set as the specific audio file name, "bind_component" as the component ID, "status_label" as the page state type, and "sequence_index" as the playback sequence number. All node information in the structure is uniformly formatted and output, and constructed into a JSON structure or a visual configuration table for configuration control of display and interactive playback during the page rendering stage. The final output is the visual configuration scheme of the activity page.

[0097] Please see Figure 7 A visual configuration system for the activity page of a voice-based social product, comprising:

[0098] The sound extraction module is used to implement S1: decompose the display content with voice broadcast, prompts and voice entry in the voice social activity page, identify the page area composition in segments, classify the sound attribute fields, distinguish between sound and image, use layer attributes and bounding box alignment to identify, and generate a set of sound segments;

[0099] The timing generation module is used to implement S2: compare the page trigger action types of the sound segment set in order, identify click, autoplay, and hover voice content, and calculate the sound trigger point position by combining the page loading and interaction order, and generate sound timing chain group;

[0100] The sequence construction module is used to implement S3: call the audio content of the audio timing chain group, match the playback command with the upper-level trigger action, identify the page click, swipe and scroll distribution, merge the response and loading logic, insert unbound playback commands, and generate nested sequence diagrams;

[0101] The dependency chain module is used to implement S4: based on the playback path component nodes in the nested sequence diagram, compare the offset of the trigger points of the actions before and after, establish the dependency path and exclude disordered jumps, and generate a dependency chain diagram;

[0102] The configuration generation module is used to implement S5: call nodes and paths in the dependency chain graph, connect page state changes with audio playback, determine content switching, adjust playback order, delete broken content, and generate a visual configuration scheme for the activity page.

[0103] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for visually configuring an activity page of a voice-based social product, characterized in that, Includes the following steps: S1: Deconstruct the display content with voice broadcast, prompts, and voice entry points on the voice social activity page, identify the page area composition in segments, classify the sound attribute fields, distinguish between sound and images, use layer attributes and bounding box alignment for identification, and generate a set of sound segments; S2: Compare the page trigger action types of the sound segment set in order, identify click, autoplay, and hover voice content, and calculate the sound trigger point position by combining the page loading and interaction order, and generate a sound time sequence chain group; S3: Call the audio content of the audio timing chain group, match the playback command with the upper-level trigger action, identify the page click, swipe and scroll distribution, merge the response and loading logic, insert unbound playback command, and generate a nested sequence diagram; S4: Based on the playback path component nodes in the nested sequence diagram, compare the offsets of the action trigger points before and after, establish the dependent path and exclude disordered jumps, and generate a dependency chain diagram. S5: Call the nodes and paths in the dependency chain diagram, connect page state changes with audio playback, determine content switching, adjust playback order, delete broken chain content, and generate a visual configuration scheme for the activity page. The specific steps for S3 are as follows: S301: Call the audio segments in the audio timing chain group, match each playback instruction with the type field of the trigger action at the upper layer of the page according to the sequential number of the playback instructions, and establish a set of audio instruction correspondences by searching the trigger conditions and instruction binding relationships of click, slide and scroll actions; S302: Based on the page distribution location field of the action type in the voice command correspondence set, calculate the position index value of the trigger area of ​​each type of action in the page area grid, and call the loading order number of the voice content to perform position alignment sorting on the two types of sequential data to obtain the action response sequence structure. S303: For the binding status field of each node in the action response sequence structure, retrieve the unbound voice control components that do not include voice commands, insert the corresponding playback command according to the action number of the component, and merge the insertion result with the original sequence to establish a nested sequence diagram; The specific steps of S4 are as follows: S401: Based on the component nodes identified as action playback paths in the nested sequence diagram, extract the trigger point timestamp of each sound playback action, and calculate the difference with the trigger times of the preceding and following adjacent actions respectively. Determine whether the difference is less than the offset overlap threshold, and obtain the trigger point offset difference set. S402: Call the time offset and action sorting number corresponding to the difference in the set of trigger point offset differences. If the difference is lower than the offset overlap threshold, establish the dependency path according to the trigger order. If there is no order dependency, remove the jump relationship of the corresponding node and generate a playback action dependency path group. S403: Based on the action sequence index value and playback node number recorded in the playback action dependency path group, connect all playback actions sequentially according to the time number and string them together to form a continuous playback structure, and establish a dependency chain graph. The specific steps of S5 are as follows: S501: Call all audio playback nodes and path information in the dependency chain diagram, combine them with page state event data, match the time points of the four types of state changes (page entry, component interaction, content stay and page exit), and align them with the corresponding audio nodes to generate a set of state trigger mapping relationships. S502: Based on the playback node and state node time periods recorded in the state trigger mapping relationship set, cross-determine the time intervals before and after playback of each voice action. If there is a page content switching behavior between adjacent voices, adjust the sequence number of the voice actions and delete the voice segments in the broken state to obtain the content-related playback sequence set. S503: Based on the synchronization relationship between the audio and state sequences in the content-related playback sequence set, the structure is combined and transformed, the sequentially arranged playback path and page state behavior are structurally integrated, and the configuration attributes are encapsulated to establish a visual configuration scheme for the activity page.

2. The visual configuration method for the activity page of a voice-based social product according to claim 1, characterized in that, The audio segment set includes audio content type, audio effect attributes, and layer alignment information. The audio timing chain group includes trigger action type, audio trigger position, and segment arrangement order. The nested sequence diagram includes playback instruction nodes, trigger action mapping, and component response relationships. The dependency chain diagram includes time offset data, playback order relationships, and jump node filtering results. The visualization configuration scheme of the activity page includes page status nodes, audio playback order, content switching logic, and playback flow structure.

3. The visual configuration method for the activity page of a voice-based social product according to claim 1, characterized in that, The upper-layer triggering action refers to the initial event of the voice playback operation caused by direct user interaction and automatic page behavior.

4. The visual configuration method for the activity page of a voice-based social product according to claim 1, characterized in that, The establishment of dependency paths and the elimination of disordered jumps refer to comparing the triggering order and position offset of the voice playback components to filter playback paths that conform to the logical order and eliminate irregular jump behaviors.

5. The visual configuration method for the activity page of a voice-based social product according to claim 1, characterized in that, The specific steps of S1 are as follows: S101: Based on the content displayed on the voice social activity page, identify layers including voice broadcasts, prompts, and voice entry points, and classify and label them by binding fields and bounding box positions to obtain a set of sound function classification information; S102: Call the sound function classification information set, calculate the overlap with the voice entry point according to the layer index and bounding box coordinates, filter the layers that meet the interaction recognition threshold, and obtain the voice function region set; S103: Based on the layer and bounding box information in the set of voice function areas, perform unified mapping and aggregation on the content with independent sound functions on the page to obtain a set of sound segments.

6. The visual configuration method for the activity page of a voice-based social product according to claim 1, characterized in that, The specific steps of S2 are as follows: S201: Based on the page trigger action type field of the sound segments in the sound segment set, the corresponding events are identified as click trigger, automatic playback when the page loads, and component hover start. By extracting the action type tags of the events, they are classified and coded according to the event type to generate a trigger action type identifier sequence. S202: Call the trigger action type identifier sequence, combine the page loading order index value corresponding to each type of action with the component interaction trigger order number, compare the index value with the number, calculate the order of the sound segment trigger position in the page flow, and obtain the sound trigger order index set; S203: Based on the trigger sequence number recorded in the sound trigger sequence index set, sort the sound segment set by index, recombine the sorted sound segments into an ordered sequence, and establish a sound timing chain group.

7. A visual configuration system for the activity page of a voice-based social product, characterized in that, The system is used to implement the visual configuration method for the activity page of a voice social product as described in any one of claims 1-6, and the system includes: The sound extraction module is used to implement S1: decompose the display content with voice broadcast, prompts and voice entry in the voice social activity page, identify the page area composition in segments, classify the sound attribute fields, distinguish between sound and image, use layer attributes and bounding box alignment to identify, and generate a set of sound segments; The timing generation module is used to implement S2: compare the page trigger action types of the sound segment set in order, identify click, autoplay, and hover voice content, and calculate the sound trigger point position by combining the page loading and interaction order, and generate a sound timing chain group; The sequence construction module is used to implement S3: call the audio content of the audio timing chain group, match the playback command with the upper-level trigger action, identify the page click, swipe, and scroll distribution, merge the response and loading logic, insert unbound playback commands, and generate a nested sequence diagram; The dependency chain module is used to implement S4: based on the playback path component nodes in the nested sequence diagram, compare the offsets of the trigger points of the actions before and after, establish the dependency path and exclude disordered jumps, and generate a dependency chain diagram; The configuration generation module is used to implement S5: call the nodes and paths in the dependency chain graph, connect page state changes with audio playback, determine content switching, adjust playback order, delete broken content, and generate a visual configuration scheme for the activity page.

Images