Multimedia information guide method and system

Abstract

The invention relates to the technical field of multimedia guide, in particular to a multimedia information guide method and system, and the method comprises the following steps: obtaining a background pixel boundary to construct a line segment set, recognizing an overlapping region to generate a relocation coordinate, mapping a hierarchy number to generate a state matrix, deviating the coordinate to determine an anchor point position, and exporting a configuration list of combined contents. According to the method, a line segment set is constructed through continuous recognition of image boundary pixels, the separation effect of a content area and a background area is improved, the interactive recognition mode of path points and bounding boxes is improved, arrangement reasonability is improved, the primary and secondary relation of the content is distinguished through a hierarchical number mapping mode, and the parallel display logic of multiple items of content is improved; a coordinate offset strategy is combined with a display boundary limitation rule, so that ordered organization and efficient response of display content are ensured, a closed-loop mechanism from identification, collision and layering to display is integrally realized, and information presentation orderliness, interface space utilization and interaction response efficiency are optimized.

Description

Technical Field

[0001] The present invention relates to the field of multimedia guidance technology, and in particular to a multimedia information guidance method and system. Background Art

[0002] The field of multimedia wayfinding technology encompasses technical means for displaying information and facilitating user interaction through various media formats, such as audio, video, images, and text. These technologies are used to provide convenient and intuitive navigation and guidance services in diverse scenarios. The core concept is the integration of diverse media resources and the use of graphical user interfaces to convey and guide information. It is widely used in public services, commercial displays, transportation hubs, and smart terminals. Overall, multimedia wayfinding technology effectively organizes and guides target information through screen displays, human-computer interaction, and control logic. Its development trends are toward the visualization of information structures, the facilitation of interactive operations, and the diversification of guide content.

[0003] Among them, the multimedia information guidance method refers to a method based on graphical user interface design, combined with visual information such as image animation and text, through preset information classification logic and page jump mechanism to provide users with information navigation. It mainly targets information display and path guidance issues, covering content organization, information entry setting, page transition control and content layout sorting and other matters. Specifically, it is completed by dividing information sections by page labels, realizing content jump through touch operation, using embedded media player to load multimedia resources, and guiding users to pay attention to the path by setting visual focus elements. It uses fixed structure and interactive logic to combine multiple types of information in a unified view, and regulates the switching between different interfaces according to the preset order.

[0004] Existing multimedia information guides lack refined edge analysis methods in their boundary recognition mechanisms. Content area definition is typically achieved through a crude division of graphical areas, which can lead to unclear recognition or amplified errors, resulting in uneven distribution of guide content and a lack of interface cleanliness. At the path scheduling level, the jump logic fails to consider the actual interface layout structure. Path node configuration is static and lacks the ability to dynamically update anchor points, causing guide paths to break or stray from the intended target. The lack of clear priority standards for content hierarchy makes it difficult to effectively distinguish similar information within the interface, hindering users' understanding of the sequence of operations. Display parameter management lacks a unified allocation mechanism, resulting in coordinate misalignment, transparency confusion, and response delays. For example, in information-dense touch terminal display scenarios, multiple overlapping panels make it difficult to distinguish between primary and secondary, leading to frequent user inadvertent touches, chaotic system responses, and reduced user efficiency and interaction accuracy. These technical limitations undermine the guide system's capabilities in dynamic layout, adaptive navigation, and concurrent operation management. Summary of the Invention

[0005] The purpose of the present invention is to solve the shortcomings of the prior art and to propose a multimedia information guidance method.

[0006] In order to achieve the above object, the present invention adopts the following technical solution: a multimedia information guidance method, comprising the following steps:

[0007] S1: Obtain the pixel value set of the outer contour of the background image area of ​​the multimedia guide page, calculate the three-dimensional Euclidean distance and filter the pixel point coordinate set greater than the color similarity threshold, establish a continuous line segment set, and generate the image edge detection result;

[0008] S2: Based on the path point sequence of the clustered line segments in the guide interface in the image edge detection result, combined with the guide information content area bounding box coordinate table, identifying the content overlapping area, counting the nearest valid layout coordinates, and obtaining a content relocation coordinate set;

[0009] S3: Based on the content relocation coordinate set, read the tree structure level number corresponding to the content, perform correlation mapping between the content number and the level number, identify the boundary overlapping content items, establish an interactive hot zone information table, and generate a content level status matrix;

[0010] S4: Based on the coordinate set of the lower right corner boundary point of the activated item in the content hierarchy state matrix, the current lower rightmost coordinate point is offset rightward and downward by a preset offset, and the offset is compared with the page safe display area range, and the position of the next content display anchor point is updated to obtain a layout update index table;

[0011] S5: Update the index table according to the layout, search for each guide content, combine them in index order, and export the guide content configuration list.

[0012] As a further solution of the present invention, the image edge detection result includes an edge pixel coordinate set, a continuous line segment set, and an image area outer contour identifier; the content repositioning coordinate set includes non-overlapping valid coordinates, grid-aligned coordinates, and nearest coordinates in the same block; the content level status matrix includes a content number and level number mapping table, an activation status mark set, and an interactive hot zone information table; the layout update index table includes a lower right offset anchor point set, display content anchor point coordinates, and a Z-order index list; the guide content configuration list includes coordinate position parameters, transparency attributes, stacking level identifiers, and event listener identifiers.

[0013] As a further solution of the present invention, the step of obtaining the image edge detection result is specifically as follows:

[0014] S111: Based on the outer contour pixel value set of the background image area in the multimedia guide page, the RGB three-channel values ​​between adjacent pixels are detected in sequence, the numerical differences of the adjacent pixels in the R, G, and B channels are obtained, and the three-dimensional Euclidean distance is calculated. The pixel coordinate set with a color similarity greater than a threshold is selected to obtain a color difference coordinate set;

[0015] S112: Calculating the spatial positional relationship between adjacent coordinate points based on the color difference coordinate set to obtain a set of pixel points with continuous positions in the image matrix, analyzing whether conditions for forming a closed and connected boundary are formed in the image grid, establishing a set of line segments with continuous boundary features, and obtaining a set of pixel connected line segments;

[0016] S113: Based on the pixel-connected line segment set, calculate the total image edge detection response value of the line segment through line segment length, directional gradient, pixel density, position discreteness, and segment gap value to establish an image edge detection result.

[0017] As a further solution of the present invention, the steps of obtaining the content relocation coordinate set are specifically as follows:

[0018] S211: Based on the path point sequence extended from each clustered line segment in the guide interface in the image edge detection result, the image coordinate value corresponding to each path point is obtained, and the coordinates of the upper left corner and lower right corner of each rectangular area in the guide information content area bounding box coordinate table are extracted. A position intersection judgment is performed on each path point and all rectangular bounding boxes to obtain a path overlapping coordinate set;

[0019] S212: Based on the path overlapping coordinate set, the number distribution of all path points entering the rectangular area is counted, and the number of overlaps after each path point enters the area is counted. The relative position index of each path point within the area to which it belongs is obtained by coordinate sorting. The legal coordinates of all non-overlapping areas are extracted in combination with the coordinate grid of the guide interface grid system, and the image coordinate values ​​of all free cells are obtained to obtain a conflict distribution index sequence.

[0020] S213: According to the original position coordinates of each conflict point in the conflict distribution index sequence, the boundary coordinate values ​​of the grid cells to which they belong are extracted in sequence, and the optimal relocation score value of the spatial position between the j-th conflict path point and the relocatable candidate point is calculated. According to the score value, the corresponding target coordinates are selected for each path point, and the target position with the minimum movement amount that matches the area where the original point is located is obtained, and a content relocation coordinate set is established.

[0021] As a further solution of the present invention, the steps of obtaining the content level state matrix are specifically as follows:

[0022] S311: Based on the content relocation coordinate set, traverse the content number corresponding to each relocation coordinate, locate the number item in the content structure table of the media aggregation platform, and extract the corresponding DOM tree structure level number. After reading all content numbers, form a mapping structure between content numbers and level numbers, establish an index correspondence table, and obtain a content level mapping matrix;

[0023] S312: Extracting content ID pairs with overlapping boundaries based on the content hierarchy mapping matrix, extracting their respective hierarchy IDs for pairwise comparison, determining the hierarchical relationship of the structure, setting the primary display item, marking it as active, and marking the remaining items as inactive, thereby obtaining a content status marking sequence;

[0024] S313: Assign values ​​to the content numbers in the active set and the inactive set according to the classified active and inactive content numbers in the content status mark sequence, mark all assigned contents at the corresponding coordinate positions in the interface, rearrange the order according to the content numbers, and establish a content hierarchical status matrix.

[0025] As a further solution of the present invention, the steps of obtaining the layout update index table are specifically as follows:

[0026] S411: Based on the content items set as activated in the content hierarchy state matrix, extract the coordinates of the lower right corner boundary points of all activated content, select the maximum coordinate point, determine the current lower rightmost boundary point position, perform a standard offset on the coordinate point as a candidate display starting point, and obtain the candidate anchor point coordinate value;

[0027] S412: Based on the candidate anchor point coordinate values ​​and the safe display range of the current page display area, the maximum display boundary is read to determine whether the candidate coordinate point is out of bounds. If not, the coordinates are updated to the new anchor point position for the current content display, thereby obtaining updated display anchor point coordinate values.

[0028] S413: Update the coordinate value according to the display anchor point, determine the starting point for the arrangement of subsequent content display items, set the content position stacking order according to the content sequence starting from the coordinate point, assign a corresponding Z-sequence value to each content item, record the mapping structure between the corresponding number and the Z-sequence value, and establish a layout update index table.

[0029] As a further solution of the present invention, the steps for obtaining the guide content configuration list are specifically as follows:

[0030] S511: Based on the content numbers listed in the layout update index table, the basic structure fields of each content item are searched one by one to extract the corresponding text content field, media resource path field, event monitoring identifier field, and display status identification field, and the integrity is uniformly verified to obtain a content field extraction set;

[0031] S512: extracting the content field set, sorting the set in ascending order of the Z-order indexes listed in the layout update index table, and constructing a configuration file field for each content item according to the sorted numbering sequence to obtain a content configuration data sequence;

[0032] S513: According to the content configuration data sequence, the fields of each content configuration are aggregated and structured, and the coordinate position, transparency value, stacking level and event binding fields in each content configuration item are sequentially integrated into independent items, and the items are numbered and sequenced to establish a guide content configuration list.

[0033] A multimedia information guidance system, comprising:

[0034] The image edge extraction module obtains the RGB values ​​of pixels within the image area, calculates the three-dimensional Euclidean distance between adjacent points and compares it with the color similarity threshold, filters out abnormal points, merges coordinates to establish continuous line segments, and generates image edge detection results through classification and clustering.

[0035] The path relocation module extends the path points based on the image edge detection result, performs inclusion relationship judgment with the content bounding box coordinates, and filters non-overlapping path points to generate a content relocation coordinate set;

[0036] The level mapping module obtains the content level number based on the content relocation coordinate set, compares the two items to determine the active item, marks the transparency, constructs the interaction data, and generates the content level state matrix;

[0037] The anchor point index module extracts the coordinate offset based on the content level state matrix, determines whether it is out of bounds, records the legal anchor point position, and generates a layout update index table;

[0038] The configuration generation module retrieves the content number based on the layout update index table, sets the coordinates, transparency, and event binding information, and generates a guide content configuration list.

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

[0040] In the present invention, a line segment set is constructed through continuous identification of image boundary pixels to improve the separation effect of the content area and the background area, enhance visual clarity, and interactive identification of path points and boundary boxes to avoid content overlap and improve layout rationality. The hierarchical number mapping method distinguishes the primary and secondary relationships of content and improves the parallel display logic of multiple contents. The coordinate offset strategy is combined with the display boundary restriction rules to enhance the adaptability of dynamic layout, and a configuration set including position, transparency, hierarchy and event is uniformly output to ensure orderly organization and efficient response of the displayed content. The overall closed-loop mechanism from identification, collision, layering to display is realized, and the information presentation order, interface space utilization and interactive response efficiency are optimized. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 It is a flow chart of the main steps of the present invention;

[0042] Figure 2 This is a flow chart for obtaining image edge detection results of the present invention;

[0043] Figure 3 A flow chart for obtaining a coordinate set for content relocation of the present invention;

[0044] Figure 4 Obtaining a flow chart for the content level state matrix of the present invention;

[0045] Figure 5 Obtaining a flow chart for the layout update index table of the present invention;

[0046] Figure 6 A flowchart for obtaining a configuration list of guide content of the present invention. DETAILED DESCRIPTION

[0047] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0048] In the description of the present invention, it should be understood that the terms "length," "width," "up," "down," "front," "back," "left," "right," "vertical," "horizontal," "top," "bottom," "inside," "outside," and the like, indicating positions or relationships, are based on the positions or relationships shown in the accompanying drawings and are intended only to facilitate the description of the present invention and simplify the description. They do not indicate or imply that the devices or elements referred to must have a specific orientation, be constructed, or operate in a specific orientation. Therefore, they should not be construed as limiting the present invention. Furthermore, in the description of the present invention, "plurality" means two or more, unless otherwise expressly and specifically defined.

[0049] See also Figure 1 , a multimedia information guidance method, comprising the following steps:

[0050] S1: Obtain the outer contour pixel value set of the background image area in the multimedia guide page, detect the RGB three-channel values ​​between adjacent pixels in sequence, calculate the three-dimensional Euclidean distance and compare it with the color similarity threshold (the color distinction threshold set according to the human eye perception characteristics (usually ΔE>5 is distinguishable)), select the pixel coordinate set greater than the threshold, merge the adjacent pixel coordinate points and establish a continuous line segment set to generate the image edge detection result;

[0051] S2: Based on the sequence of path points extended from each clustered segment in the guide interface in the image edge detection results, combined with the guide information content area bounding box coordinate table (a standardized data structure that records UI element position information), collision detection (an algorithm in computer graphics that determines whether two bounding boxes overlap) is performed between the path points and each content rectangular boundary. Any path point entering any rectangular area is considered a content overlap area. The conflicting coordinates are counted, and the nearest valid layout coordinates (legal layout position coordinates that meet the requirements of the grid system) within the same block as the original position are located in the non-overlapping area to obtain a set of content relocation coordinates.

[0052] S3: Based on the content relocation coordinate set, read the corresponding tree structure level number (the node level identification method in the DOM tree structure) in the content structure table of the media aggregation platform, establish an association mapping between different content numbers and their corresponding level numbers, identify content items with overlapping boundaries, compare the corresponding level numbers pairwise, set the content with the higher level number as the current active state, assign an active state flag (alpha value 255), set the remaining display items to the inactive state (alpha value 128), establish an interactive hot zone information table, and generate a content level state matrix;

[0053] S4: Based on the coordinate set of the lower right corner boundary point of the activated item in the content hierarchy state matrix, the current lower right coordinate point is offset to the right and downward by a preset offset (complying with the base offset unit of the Material Design layout specification (8dp multiples, 64px)), and compared with the page safe display area range (the content safe display boundary calculated based on the device screen size) to determine whether it is out of bounds. If it is not out of bounds, it is updated to the next content display anchor point position, and a Z-order index list of the current content display item is generated (a set of z-index attribute values ​​that records the element stacking order) to obtain a layout update index table;

[0054] S5: Update the index table according to the layout, retrieve the text content, media resource path, event listening identifier and display status identifier of each guide content, combine them in index order and set the coordinate position, transparency, stacking context level, DOM event binding identifier (comply with the W3C standard event listener naming convention (such as onClick)) for each content configuration file, and export the guide content configuration list.

[0055] The image edge detection results include a set of edge pixel coordinates, a set of continuous line segments, and an outer contour identifier of the image area. The content repositioning coordinate set includes non-overlapping valid coordinates, grid-aligned coordinates, and nearest coordinates within the same block. The content level status matrix includes a content number and level number mapping table, an activation status mark set, and an interactive hot zone information table. The layout update index table includes a lower right offset anchor point set, display content anchor point coordinates, and a Z-order index list. The guide content configuration list includes coordinate position parameters, transparency attributes, stacking level identifiers, and event listener identifiers.

[0056] See also Figure 2 , S1 step is:

[0057] S111: Based on the outer contour pixel value set of the background image area in the multimedia guide page, the RGB three-channel values ​​between adjacent pixels are detected in sequence, the numerical differences of the adjacent pixels in the R, G, and B channels are obtained, and the three-dimensional Euclidean distance is calculated. The pixel coordinate set with a color similarity greater than a threshold is selected to obtain a color difference coordinate set;

[0058] Based on the outer contour pixel value set of the background image area in the multimedia guide page, the outer boundary pixel position of the image is first extracted according to the pixel grid, and the two-dimensional coordinate set of all contour points in the edge envelope is obtained. Then, according to the RGB three-channel matrix stored after the image is loaded, the pixels around the contour points are traversed, and the differences in the R, G, and B channels between adjacent pixels are detected in turn. The difference calculation is performed using the absolute value comparison method. For example, point A and point B are 125 and 132 in the R channel respectively, and the difference is 7. During the calculation process, for all adjacent edge pixel combinations in the image, the RGB three-channel differences are calculated and the results are stored in the corresponding pixel pair coordinates. A three-dimensional vector is established for each set of channel differences, and the three-dimensional Euclidean distance formula is called. The color difference value is calculated, and the pixel coordinate set whose color difference value exceeds the set color similarity threshold is screened; the color similarity threshold selects a critical value of 5 based on the human eye perception characteristics. When the three-dimensional Euclidean distance ΔE is greater than 5, it is determined that the colors of the two points are significantly different. During the screening, a coordinate array is established to record pixel pairs with a value greater than ΔE=5. For example, if the three-channel color difference of the pixel pair P(45, 68)-(45, 69) is 6.4, then this coordinate pair is included in the screening set; finally, the coordinates of all pixel pairs that meet the threshold condition are called to form a set of areas with significant color differences, and a color difference coordinate set is obtained.

[0059] S112: Calculating the spatial positional relationship between adjacent coordinate points based on the color difference coordinate set to obtain a set of pixel points with continuous positions in the image matrix, analyzing whether conditions for forming a closed and connected boundary are formed in the image grid, establishing a set of line segments with continuous boundary features, and obtaining a set of pixel connected line segments;

[0060] According to the color difference coordinate set, the image space position analysis is performed on the filtered pixel points, and their horizontal and vertical coordinate distribution in the image matrix is ​​extracted. The distance between any two points is calculated to determine whether they are directly adjacent or connected within the eight-neighborhood area of ​​the image. If the connectivity is satisfied, they are merged into the same pixel-connected line segment group. All adjacent difference points are merged in sequence to form an initial line segment set. The number of pixels of each line segment in the line segment set is counted to obtain its length value, and the direction of its linear extension in the image coordinate system is extracted to form the line segment direction gradient information. In this process, the starting and ending point vectors of the line segment are obtained by coordinate difference, thereby obtaining the direction vector angle value; further calling the spatial coordinates, the center distance between each line segment and its surrounding line segments is calculated respectively to form a dispersion index, and then the pixel density is calculated based on the number of pixels in the area where the line segment is located and the number of valid pixels. For example, if the total number of pixels in the line segment area is 20, of which the number of color change points is 12, the density is 0.6; all calculation results are statistically analyzed to form a line segment feature data table, where the data structure example is as follows:

[0061] Table 1 Image edge segment parameters:

[0062]

[0063] As shown in Table 1, different numbered segments have their own morphological characteristics and spatial parameters, which provide basic support for the calculation of subsequent edge response values. Based on this data, further processing can extract image edge feature segments and form a set of pixel-connected segments.

[0064] S113: Based on the pixel-connected line segment set, the formula is used through the line segment length, directional gradient, pixel density, position discreteness, and segment gap value:

[0065]

[0066] Calculate the total image edge detection response value E of the line segment f , establish the image edge detection result, where L i represents the pixel length of the i-th line segment, D i Represents the directional gradient of the i-th line segment, G i Represents the pixel density corresponding to the i-th line segment, S i represents the spatial position discreteness of the i-th line segment, J i Represents the gap value between the i-th line segment and the adjacent line segment, Represents the mean of all line segment gap values;

[0067] After connecting the pixel segments, the contribution of each segment in the image edge response is calculated one by one, using the segment length L i , directional gradient D i, pixel density G i , position dispersion S i Gap J with line segment i The constructed composite function is substituted into the parameter values ​​listed in Table 1, and the average gap value is calculated as Each line segment is calculated as follows: The numerator of line segment 1 is The denominator is 3+|1-2|=4, and the contribution value is 3.0; the numerator of segment 2 is The denominator is 4+|3-2|=5, and the contribution value is approximately 4.167; the contribution value of segment 3 is The denominator is 2+|2-2|=2, the contribution value is 5.59, and the total contribution value of the three line segments is approximately:

[0068] E f =|3.0+4.167+5.59|=12.76;

[0069] Among them, L i represents the pixel length of the i-th line segment, in pixels, which is derived from the actual number of pixels connecting the line segments; D i The tangent value of the angle between the line segment and the horizontal line in the image coordinate system represents the directional gradient; G i Indicates pixel density, which is obtained by dividing the number of effective pixels by the total number of pixels; S i is the average distance from each line segment to the center point of other line segments, indicating the position dispersion; J i is the gap distance between line segments, in pixels, is the average value of all line segment gaps; the result shows that the edge feature aggregation density of the line segments in the current area is high, the directional structure continuity is good, the distribution gap is reasonable, and the total edge response value exceeds the reference benchmark value of 10, which meets the extraction conditions and obtains the image edge detection result.

[0070] The total image edge detection response value is used to measure the overall significance of the edge structure in the entire image or a specified image area. It is specifically reflected as the edge strength performance of all pixel line segments with edge features under the comprehensive effect of multiple dimensions such as morphological attributes, directional consistency, pixel density, and spatial continuity. The higher the value, the more concentrated and coherent the edge structure in the area is, and it has good directional organization, obvious boundary transition, clear morphology, and is suitable for being identified as effective edge information in the image. Conversely, if the response value is low, it means that the line segments in the area are quite different, the directions are messy, the structure is dispersed, and the overall edge features are not significant. It may belong to the texture or noise area. Therefore, the total image edge detection response value can be used as an important criterion for edge extraction and background removal, and realize the structural distinction between the image foreground and background in multimedia guide images.

[0071] The calculation logic of the formula is based on the principle of multi-dimensional feature fusion, which integrates and evaluates the length, directionality, density, spatial position and structural coherence of the line segment in the image. i With the directional gradient D i and pixel density G i The square root of the square and the square root of the square root multiply the value to reflect the coupling strength between the extension of the line segment in the image and the consistency of direction and the richness of content. The square root of the square and the square root constructs the "synthetic influence" composed of direction and density, and then multiplies it by the length to reflect the actual scope of the influence in the image space. The denominator is the position discreteness S i The structural constraint factor is constructed by the sum of the absolute values ​​of the differences between the line segment gap value and the global average gap, which represents the balance and continuity of the structure in spatial distribution. The larger the value, the looser the structure and the less clear the boundary, which suppresses the positive contribution of this part to the edge response. Therefore, the ratio of the numerator to the denominator is set to construct a "contribution modulation factor", which combines the line segment significance with the structural consistency. Finally, the contribution values ​​of all line segments are added together and the absolute value is taken to represent the total response intensity of the overall edge structure in the current image area, which is used to characterize the significance of the edge features in this area.

[0072] See also Figure 3 , step S2 is:

[0073] S211: Based on the path point sequence extended from each clustered line segment in the guide interface in the image edge detection result, the image coordinate value corresponding to each path point is obtained, and the coordinates of the upper left corner and lower right corner of each rectangular area in the guide information content area bounding box coordinate table are extracted. The position intersection judgment is performed on each path point and all rectangular bounding boxes to obtain a path overlapping coordinate set;

[0074] Based on the path point sequence extended by each cluster segment in the guide interface in the image edge detection result, the two-dimensional image coordinates of each path point in the sequence are first extracted into a structured array. For example, path point P1 is (120, 80), path point P2 is (350, 420), and path point P3 is (600, 260). Then, the guide information content area bounding box coordinate table is called to extract the boundary coordinates of each UI element rectangular area. Assuming that the upper left corner of a UI area rectangle A is (100, 60) and the lower right corner is (200, 160), its X range can be defined as [100, 200] and the Y range is [60, 160]. The whole structure is constructed in this way. There is coordinate range information of the bounding box; on this basis, for each path point, a range judgment method is used to perform regional collision detection to determine whether the X coordinate of the path point is within the X range of the bounding box, and whether the Y coordinate is within the Y range of the bounding box. If both conditions are met, the path point is considered to fall into the rectangular area; taking the path point P1 (120, 80) as an example, its X=120 and Y=80 are both within the X and Y ranges of rectangle A, it is judged as an overlapping point, P1 is marked as entering rectangle A, and an overlapping point path index table is constructed; this process traverses all path points and all area coordinates to form a complete path point rectangle mapping table, which is used for subsequent layout analysis to obtain the path overlapping coordinate set.

[0075] S212: Based on the path overlapping coordinate set, the number distribution of all path points entering the rectangular area is counted, and the number of overlaps after each path point enters the area is counted. The relative position index of each path point within its area is obtained by coordinate sorting. The legal coordinates of all non-overlapping areas are extracted based on the coordinate grid of the guide interface grid system, and the image coordinate values ​​of all free cells are obtained to obtain a conflict distribution index sequence.

[0076] Based on the path overlapping coordinate set, we first count the number and position index of all path points entering the UI rectangular area, generate a distribution sequence of conflicting path points, and group the path points according to the area number to which they belong. The number of overlapping path points in each group is calculated, and the area number with high path congestion and its corresponding path point index are extracted by sorting by the number of conflicting points. Then, we traverse the standard grid system of the guide interface to obtain the coordinates of the free layout cells in the current interface that are not occupied by any UI rectangle. During the acquisition process, it is necessary to ensure that the legal coordinate position must be in the same block as the area to which the original path point belongs and does not overlap with any UI area. For example, P2 and P3 appear in UI area B as overlapping points, and the free position candidates are (360, 430) and (370, 440). Both points do not overlap with the boundary of rectangle B and are considered legal candidate coordinates and added to the candidate set. In this process, we also need to extract the content density parameter of each area, that is, the number of path points per unit area in each rectangular area, for subsequent layout selection. The final structure is as follows:

[0077] Table 2 Conflicting path points and legal candidate coordinates:

[0078] Area Number Waypoint number Waypoint coordinates Legal candidate coordinates 1 Legal candidate coordinates 2 Content density A <![CDATA[P1]]> (120，80) (130，90) (140，100) 0.12 B <![CDATA[P2]]> (350，420) (360，430) (370，440) 0.18 B <![CDATA[P3]]> (600，260) (610，270) (620，280) 0.18

[0079] As shown in Table 2, different path points correspond to multiple legal candidate locations within their original falling areas. All candidate locations will be further screened in the next step by combining spatial and directional information to establish a conflict distribution index sequence.

[0080] S213: According to the original position coordinates of each conflict point in the conflict distribution index sequence, the boundary coordinate values ​​of the corresponding grid cells are extracted in sequence using the formula:

[0081]

[0082] Calculate the optimal relocation score C of the spatial position between the jth conflict path point and the relocatable candidate point rj , select the corresponding target coordinates for each path point according to the score value, obtain the minimum moving target position that matches the area where the original point is located, and establish the content relocation coordinate set, where x j ,y j Represents the original coordinates of the jth path point, x k ,y k represents the coordinates of candidate position k, Ω j is the set of candidate points in the same block as point j, θ j is the extension direction angle of the path point, θ k Estimate the arrangement direction angle for the candidate points, δ j is the path density value corresponding to the content rectangle number of point j, which is used to describe the degree of regional congestion, δ j The +1 ratio setting is based on verification through simulation experiments with an actual UI grid density of 20×30.

[0083] According to the original coordinates of the path point in the conflict distribution index sequence, the Euclidean distance calculation is performed on the candidate coordinates in the area to which it belongs, and the scores are obtained by combining with the angle difference adjustment item. For example, the original coordinates of the path point P1 are (120, 80), and the candidate point is (130, 90). The Euclidean distance between the two points is If the P1 extension direction is 45 degrees and the candidate point arrangement direction is 50 degrees, the direction difference is 5 degrees, the regional path density is 4, and the corresponding adjustment item is The total score is 14.14 + 1 = 15.14. Process the candidate coordinates of P2 and P3 in the same way and record the scores in turn. The calculation results are as follows:

[0084] Table 3 Content retargeting scoring table:

[0085]

[0086] As shown in Table 3, all path points have completed the score calculation and are within the reasonable range. The score reference benchmark is set to 16. All values ​​are less than this upper limit, so the candidate position with the lowest score is used as the final relocation target to obtain the content relocation coordinate set.

[0087] The optimal relocation score represents the comprehensive cost of migrating a path point from its original conflicting position to a candidate position during the layout adjustment of the image guide interface. This score combines the spatial distance difference and directional offset between the path point and the candidate coordinates. A smaller score indicates that the candidate coordinate is geometrically closer to the original position and more consistent in the path extension direction. Furthermore, the path density in the area supports directional adjustment, making it considered more suitable as the new layout position for the current path point. This score not only reflects the movement overhead during the image element rearrangement process, but also quantifies the structural adaptability and layout rationality of the candidate coordinates. It is a key quantitative indicator used to screen the optimal target position during the path point relocation process.

[0088] The operational logic of the formula is based on the joint evaluation of two dimensions, namely spatial distance and directional consistency. Its core is to measure the minimum cost required for the path point to migrate from the original position to the candidate position, where the Euclidean distance part It reflects the physical distance difference of the spatial position and is used to characterize the actual coordinate offset. The square root operation is used to ensure the positive output of the distance value and reflect the geometric displacement in the real two-dimensional image. It is used to introduce the evaluation of path direction continuity. Its absolute value reflects the angle difference between the original path extension direction and the expected arrangement direction of the candidate position. The δ in the denominator j +1 is used to adjust the direction influence weight when the path density δ j The larger the value is, the more crowded the area is, and a certain direction angle adjustment is allowed. Therefore, the adjustment item will correspondingly reduce the impact of the direction difference on the overall score. On the contrary, if the regional paths are sparse and the direction consistency requirement is stronger, the impact of the direction angle will be amplified in the score. Finally, by adding and merging the distance item and the direction item, a composite evaluation of spatial proximity and arrangement rationality is achieved, taking into account both position compactness and layout direction rules, thereby providing a basis for selecting the optimal relocation coordinates for content elements within the same block.

[0089] See also Figure 4 , S3 steps are:

[0090] S311: Based on the content relocation coordinate set, traverse the content number corresponding to each relocation coordinate, locate the number item in the content structure table of the media aggregation platform, and extract the corresponding DOM tree structure level number. After reading all content numbers, form a mapping structure between content numbers and level numbers, establish an index correspondence table, and obtain a content level mapping matrix;

[0091] Based on the content relocation coordinate set, extract the content number corresponding to each coordinate point, locate the numbered item in the content structure table of the media aggregation platform, and obtain its level number in the DOM tree structure. The level number is defined in a step-by-step increasing manner starting from the root node and is represented by a positive integer. Each number represents the nesting depth of the content in the structure tree. For example, the content numbered C001 has a relocation coordinate of (120,90), and the corresponding level number in the structure table is 3, indicating that it is in the middle level. The coordinates corresponding to number C002 are (340,220), and the level is 100. The level number is 2, indicating that it is more shallowly nested. The coordinates of number C003 are (560, 330), and the level number is 4, indicating that it is a deeply nested node. The coordinates of number C004 are (750, 410), and the level number is 1, indicating that it is the outermost node. To ensure data integrity, it is necessary to compare the content numbers in the content structure table with the relocation set. If there is content in the structure table that does not appear in the relocation set, its initial coordinate value needs to be supplemented to construct a complete set. Finally, a clear mapping relationship is established according to the content number, coordinates, and level number. The results are shown in Table 4:

[0092] Table 4 DOM structure level mapping table:

[0093] Content Number Relocation coordinate X Reposition coordinate Y Level Number C001 120 90 3 C002 340 220 2 C003 560 330 4 C004 750 410 1

[0094] As shown in Table 4, a complete one-to-one correspondence is established between the content number and its corresponding coordinate and level number, and the content level mapping matrix is ​​obtained.

[0095] S312: Extracting content ID pairs with overlapping boundaries based on the content hierarchy mapping matrix, extracting their respective hierarchy IDs for pairwise comparison, determining the hierarchical relationship of the structure, setting the primary display item, marking it as active, and marking the remaining items as inactive, thereby obtaining a content status marking sequence;

[0096] According to the content level mapping matrix, the boundary relationship between all content numbers is traversed, and content pairs with overlapping coordinates are extracted in the visualization area. The corresponding level number of each content number pair is extracted and judged, and the priority is determined based on the level number value. For example, if the boundary area of ​​content C001 and C002 overlaps, the level of C001 is 3 and that of C002 is 2, then C001 is judged to be the high-level content and marked as active, and C002 is inactive. Repeat this operation, judge all overlapping content groups and record the activation status and its corresponding number, and establish two types of sets, one is the active set and the other is the inactive set. When there are content pairs with the same level, the one with the earlier number in the lexicographical order is set as the active content and the other as the inactive one to avoid unsolvable situations. Finally, the activation state division operation is completed, forming a one-to-one matching relationship between content number and status value, and generating a content status marking sequence.

[0097] S313: Assign values ​​to the content numbers in the active and inactive sets according to the classified active and inactive content numbers in the content status mark sequence, mark all assigned content at corresponding coordinate positions in the interface, and rearrange the order of the content numbers to establish a content hierarchical status matrix;

[0098] According to the content status mark sequence, the status value is converted into a transparency Alpha value for each number. If it is in the active state, the Alpha value is set to 255, and if it is in the inactive state, it is set to 128. The status value is combined with the original coordinates and the level number to construct a four-field structure item, which is the content number, transparency value, coordinate position and level number. Then, the structure items are reorganized in the order of numbers to construct a unified two-dimensional structure data. During the construction process, it is ensured that all fields are not repeated or missing. For example, C001 is the active state, the Alpha is 255, the coordinates are (120, 90), and the level is 3; C002 is the inactive Alpha is 128, the coordinates are (340, 220), and the level is 2; all structure items are uniformly sorted and recorded, and finally integrated into a complete state description table to establish a content level state matrix.

[0099] See also Figure 5 , step S4 is:

[0100] S411: Based on the content items set as active in the content hierarchy state matrix, extract the coordinates of the lower right corner boundary points of all active content, select the maximum coordinate point, determine the current lower rightmost boundary point position, perform a standard offset on the coordinate point as a candidate display starting point, and obtain the candidate anchor point coordinate value;

[0101] Based on the set of activated content in the content hierarchy state matrix, the coordinates of the lower right corner boundary points of all activated items are extracted one by one. Each coordinate is traversed and its X-axis and Y-axis values ​​are recorded respectively. After comparison, the maximum X and Y values ​​are selected to determine the lower right boundary point of all currently activated items. For example, the boundary points of activated item A01 are (560, 400), A02 is (620, 370), and A03 is (580, 410). The maximum X value is 620 and the maximum Y value is 410. The lower right boundary reference point is (620, 410), which is the end reference coordinate of the current display layout area. Then, the base offset operation required by the Material Design specification is performed on this coordinate, setting the offset to 64 pixels. The X and Y values ​​are added separately to obtain the offset coordinates (684, 474). This is used as a candidate display anchor point and input into the next stage judgment process. The data is as follows:

[0102] Table 5 Active content boundary and offset table:

[0103] Activation Number X in the lower right corner Y in the lower right corner Max X Maximum Y Offset X Offset Y A01 560 400 620 410 684 474 A02 620 370 620 410 684 474 A03 580 410 620 410 684 474

[0104] As shown in Table 5, the new coordinates of the current maximum coordinate point after offset are (684, 474), and the coordinate values ​​of the candidate anchor points are obtained.

[0105] S412: Based on the candidate anchor point coordinate values ​​and the safe display range of the current page display area, the maximum display boundary is read to determine whether the candidate coordinate point is out of bounds. If not, the coordinates are updated to the new anchor point position for the current content display, thereby obtaining the updated display anchor point coordinate values.

[0106] Based on the candidate anchor point coordinate value (684, 474), the safe display area boundary data of the device page is called to perform an out-of-bounds judgment. The safe range of the current page display area is set to 720 pixels horizontally and 1280 pixels vertically. The display boundary information in the system or adaptation configuration file is read. Using 720 pixels in the X direction and 1280 pixels in the Y direction as the comparison benchmark, it is determined whether the current candidate coordinate X=684 is less than or equal to 720 and whether Y=474 is less than or equal to 1280. If both conditions are met, it is determined that there is no out-of-bounds. If either coordinate is greater than the safe boundary, it is determined to be out-of-bounds. In this example, both X and Y are within the boundary range, so it is determined to be a valid position, and the candidate coordinate (684, 474) is updated as the current content display anchor point, and the updated coordinate value of the display anchor point is obtained.

[0107] S413: Update the coordinate value based on the display anchor point, determine the starting point for arranging subsequent content display items, set the content position stacking order according to the content sequence starting from the coordinate point, assign a corresponding Z sequence value to each content item, record the mapping structure between the corresponding number and the Z sequence value, and establish a layout update index table;

[0108] Update the coordinate value according to the display anchor point, use the coordinate as the arrangement starting point for subsequent content items, set the stacking order according to the order of the content numbers, read the structural level number of each display item and its arrangement index in the content sequence, and set its Z-order stacking order on the page by combining the difference between the two. For example, if the level of content number B01 is 3 and the arrangement index is 5, its Z-order index is 8. Generate Z-order index values ​​for all content items in this way, and construct structured mapping data to record the content number and its corresponding Z-order index value for subsequent page rendering and layer overlay order setting, and finally establish a layout update index table.

[0109] See also Figure 6 , step S5 is:

[0110] S511: Based on the content numbers listed in the layout update index table, the basic structure fields of each content item are searched one by one to extract the corresponding text content field, media resource path field, event monitoring identifier field, and display status identification field. The integrity is verified uniformly to obtain a content field extraction set.

[0111] According to the layout update index table, all content numbers listed are compared one by one with the field structure in the guide content data source. The four core fields of each content are extracted, namely the text content field, the media resource path field, the event monitoring identifier field, and the display status identification field. All fields need to be matched and queried based on the content number, and the field integrity is verified. For example, the text corresponding to content number T001 is "Welcome Page", the media path is / media / start.jpg, the event identifier is onClickStart, and the display status is active. The fields corresponding to number T002 are "Function Navigation",

[0112] / media / nav.png, onClickNav, inactive, field number T003 is "Graphic Module",

[0113] / media / imgtext.jpg, onClickText, active, ensure that all content numbers have four field data and form a standard structure. The extraction results are as follows:

[0114] Table 6 Example of guide content fields:

[0115] Content Number Text content Media Path Event Listening Display Status T001 Welcome Page / media / start.jpg onClickStart active T002 Functional Navigation / media / nav.png onClickNav inactive T003 Graphics module / media / imgtext.jpg onClickText active

[0116] As shown in Table 6, the content fields have been uniformly organized according to the numbers, and a content field extraction set is obtained.

[0117] S512: extracting a set based on the content fields, sorting the set in ascending order of the Z-order indexes listed in the layout update index table, and constructing a configuration file field for each content item according to the sorted numbering sequence to obtain a content configuration data sequence;

[0118] Extract the collection based on the content field, call the layout update index table for each item corresponding to the Z-order index, sort the content in ascending order, obtain the order of each number in the display hierarchy, and then combine the display coordinates and status data obtained in the previous step to perform parameter setting for each content configuration. The coordinate position field is directly assigned to the determined display anchor coordinates. The transparency field is determined by the display status field. If the status is active, the transparency is set to 255, and if it is inactive, it is set to 128. The stacking level field is directly assigned by the Z-order index. The event listening field is set using the W3C standard naming format, such as onClick, onMouseOver, onChange, etc., to ensure that the structure of each field is consistent and the value type is standardized. Generate configuration data entries in sequence to obtain a content configuration data sequence.

[0119] S513: Based on the content configuration data sequence, the fields of each content configuration are grouped and structured. The coordinate position, transparency value, stacking level, and event binding fields of each content configuration item are sequentially integrated into independent items. The items are numbered and sequenced to create a guide content configuration list.

[0120] According to the content configuration data sequence, the configuration information fragments of each content module in the page are constructed item by item. The coordinate position, transparency value, Z-order index and binding event identifier in the configuration field are written in field order to form a complete content configuration entry. All entries maintain the same number of fields and field types in structure, and the numbering sequence remains consistent with the layout update index table. Verify that there is only one content number in the configuration list, the transparency range is between [0,255], the Z-order index is a positive integer, and the event identifier fields are all standard event names. After outputting line by line according to the configuration structure, integrate them into a unified file format for export to establish a guide content configuration list.

[0121] A multimedia information guidance system, comprising:

[0122] The image edge extraction module obtains the RGB values ​​of pixels within the image area, calculates the three-dimensional Euclidean distance between adjacent points and compares it with the color similarity threshold, filters out abnormal points, merges coordinates to establish continuous line segments, and generates image edge detection results through classification and clustering.

[0123] The path relocation module extends the path points based on the image edge detection results, determines the inclusion relationship with the content bounding box coordinates, and filters non-overlapping path points to generate a content relocation coordinate set;

[0124] The hierarchical mapping module obtains the content hierarchical number based on the content relocation coordinate set, compares the two items to determine the active item, marks the transparency, constructs the interaction data, and generates the content hierarchical state matrix;

[0125] The anchor index module extracts the coordinate offset based on the content level state matrix, determines whether it is out of bounds, records the legal anchor position, and generates a layout update index table;

[0126] The configuration generation module retrieves the content number based on the layout update index table, sets the coordinates, transparency, and event binding information, and generates a guide content configuration list.

[0127] The above are merely preferred embodiments of the present invention and do not limit the present invention in any other form. Any technician familiar with the profession may use the technical content disclosed above to change or modify it into an equivalent embodiment with equivalent changes and apply it to other fields. However, any simple modification, equivalent change and modification made to the above embodiment based on the technical essence of the present invention without departing from the content of the technical solution of the present invention shall still fall within the scope of protection of the technical solution of the present invention.

Claims

1. A multimedia information guidance method, characterized in that: The following steps are involved: S1: Obtain the pixel value set of the outer contour of the background image area of ​​the multimedia guide page, calculate the three-dimensional Euclidean distance and filter the pixel point coordinate set greater than the color similarity threshold, establish a continuous line segment set, and generate the image edge detection result; S2: Based on the path point sequence of the clustered line segments in the guide interface in the image edge detection result, combined with the guide information content area bounding box coordinate table, identifying the content overlapping area, counting the nearest valid layout coordinates, and obtaining a content relocation coordinate set; S3: Based on the content relocation coordinate set, read the tree structure level number corresponding to the content, perform correlation mapping between the content number and the level number, identify the boundary overlapping content items, establish an interactive hot zone information table, and generate a content level status matrix; S4: Based on the coordinate set of the lower right corner boundary point of the activated item in the content hierarchy state matrix, the current lower rightmost coordinate point is offset rightward and downward by a preset offset, and the offset is compared with the page safe display area range, and the position of the next content display anchor point is updated to obtain a layout update index table; S5: Update the index table according to the layout, search for each guide content, combine them in index order, and export the guide content configuration list.

2. The multimedia information guidance method according to claim 1, wherein: The image edge detection result includes a set of edge pixel coordinates, a set of continuous line segments, and an outer contour identifier of the image area; the content repositioning coordinate set includes non-overlapping valid coordinates, grid-aligned coordinates, and nearest coordinates within the same block; the content level status matrix includes a content number and level number mapping table, an activation status mark set, and an interactive hot zone information table; the layout update index table includes a lower right offset anchor point set, display content anchor point coordinates, and a Z-order index list; the guide content configuration list includes coordinate position parameters, transparency attributes, stacking level identifiers, and event listener identifiers.

3. The multimedia information guidance method according to claim 1, wherein: The steps for obtaining the image edge detection result are specifically as follows: S111: Based on the outer contour pixel value set of the background image area in the multimedia guide page, the RGB three-channel values ​​between adjacent pixels are detected in sequence, the numerical differences of the adjacent pixels in the R, G, and B channels are obtained, and the three-dimensional Euclidean distance is calculated. The pixel coordinate set with a color similarity greater than a threshold is selected to obtain a color difference coordinate set; S112: Calculating the spatial positional relationship between adjacent coordinate points based on the color difference coordinate set to obtain a set of pixel points with continuous positions in the image matrix, analyzing whether conditions for forming a closed and connected boundary are formed in the image grid, establishing a set of line segments with continuous boundary features, and obtaining a set of pixel connected line segments; S113: Based on the pixel-connected line segment set, calculate the total image edge detection response value of the line segment through line segment length, directional gradient, pixel density, position discreteness, and segment gap value to establish an image edge detection result.

4. The multimedia information guidance method according to claim 1, wherein: The steps for obtaining the content relocation coordinate set are specifically as follows: S211: Based on the path point sequence extended from each clustered line segment in the guide interface in the image edge detection result, the image coordinate value corresponding to each path point is obtained, and the coordinates of the upper left corner and lower right corner of each rectangular area in the guide information content area bounding box coordinate table are extracted. A position intersection judgment is performed on each path point and all rectangular bounding boxes to obtain a path overlapping coordinate set; S212: Based on the path overlapping coordinate set, the number distribution of all path points entering the rectangular area is counted, and the number of overlaps after each path point enters the area is counted. The relative position index of each path point within the area to which it belongs is obtained by coordinate sorting. The legal coordinates of all non-overlapping areas are extracted in combination with the coordinate grid of the guide interface grid system, and the image coordinate values ​​of all free cells are obtained to obtain a conflict distribution index sequence. S213: According to the original position coordinates of each conflict point in the conflict distribution index sequence, the boundary coordinate values ​​of the grid cells to which they belong are extracted in sequence, and the optimal relocation score value of the spatial position between the j-th conflict path point and the relocatable candidate point is calculated. According to the score value, the corresponding target coordinates are selected for each path point, and the target position with the minimum movement amount that matches the area where the original point is located is obtained, and a content relocation coordinate set is established.

5. The multimedia information guidance method according to claim 1, characterized in that: The steps for obtaining the content level state matrix are specifically as follows: S311: Based on the content relocation coordinate set, traverse the content number corresponding to each relocation coordinate, locate the number item in the content structure table of the media aggregation platform, and extract the corresponding DOM tree structure level number. After reading all content numbers, form a mapping structure between content numbers and level numbers, establish an index correspondence table, and obtain a content level mapping matrix; S312: Extracting content ID pairs with overlapping boundaries based on the content hierarchy mapping matrix, extracting their respective hierarchy IDs for pairwise comparison, determining the hierarchical relationship of the structure, setting the primary display item, marking it as active, and marking the remaining items as inactive, thereby obtaining a content status marking sequence; S313: Assign values ​​to the content numbers in the active set and the inactive set according to the classified active and inactive content numbers in the content status mark sequence, mark all assigned contents at the corresponding coordinate positions in the interface, rearrange the order according to the content numbers, and establish a content hierarchical status matrix.

6. The multimedia information guidance method according to claim 1, characterized in that: The steps for obtaining the layout update index table are specifically as follows: S411: Based on the content items set as activated in the content hierarchy state matrix, extract the coordinates of the lower right corner boundary points of all activated content, select the maximum coordinate point, determine the current lower rightmost boundary point position, perform a standard offset on the coordinate point as a candidate display starting point, and obtain the candidate anchor point coordinate value; S412: Based on the candidate anchor point coordinate values ​​and the safe display range of the current page display area, the maximum display boundary is read to determine whether the candidate coordinate point is out of bounds. If not, the coordinates are updated to the new anchor point position for the current content display, thereby obtaining updated display anchor point coordinate values. S413: Update the coordinate value according to the display anchor point, determine the starting point for the arrangement of subsequent content display items, set the content position stacking order according to the content sequence starting from the coordinate point, assign a corresponding Z-sequence value to each content item, record the mapping structure between the corresponding number and the Z-sequence value, and establish a layout update index table.

7. The multimedia information guidance method according to claim 1, characterized in that: The steps for obtaining the guide content configuration list are as follows: S511: Based on the content numbers listed in the layout update index table, the basic structure fields of each content item are searched one by one to extract the corresponding text content field, media resource path field, event monitoring identifier field, and display status identification field, and the integrity is uniformly verified to obtain a content field extraction set; S512: extracting the content field set, sorting the set in ascending order of the Z-order indexes listed in the layout update index table, and constructing a configuration file field for each content item according to the sorted numbering sequence to obtain a content configuration data sequence; S513: According to the content configuration data sequence, the fields of each content configuration are aggregated and structured, and the coordinate position, transparency value, stacking level and event binding fields in each content configuration item are sequentially integrated into independent items, and the items are numbered and sequenced to establish a guide content configuration list.

8. A multimedia information guidance system, characterized in that: The system is used to implement the multimedia information guidance method according to any one of claims 1 to 7, comprising: The image edge extraction module obtains the RGB values ​​of pixels within the image area, calculates the three-dimensional Euclidean distance between adjacent points and compares it with the color similarity threshold, filters out abnormal points, merges coordinates to establish continuous line segments, and generates image edge detection results through classification and clustering. The path relocation module extends the path points based on the image edge detection result, performs inclusion relationship judgment with the content bounding box coordinates, and filters non-overlapping path points to generate a content relocation coordinate set; The level mapping module obtains the content level number based on the content relocation coordinate set, compares the two items to determine the active item, marks the transparency, constructs the interaction data, and generates the content level state matrix; The anchor point index module extracts the coordinate offset based on the content level state matrix, determines whether it is out of bounds, records the legal anchor point position, and generates a layout update index table; The configuration generation module retrieves the content number based on the layout update index table, sets the coordinates, transparency, and event binding information, and generates a guide content configuration list.

Images