A method for solving fine layout of page components in a web-based H5 scenario

Abstract

This invention discloses a method for refining the layout of page components in a text-based H5 scenario, belonging to the field of artificial intelligence technology, and includes the following steps: Step S1, requirement analysis and component structuring: semantic analysis of the page generation requirements input by the user; Step S2, calculation of the multi-dimensional priority weight W of each component; Step S3, competitive space pre-allocation: placing the components into a layout container of a preset size. If the sum of the initial size requirements of all components exceeds the capacity of the layout container, a space compression and redistribution loop is executed: calculating the competitiveness value of each component based on its multi-dimensional priority weight W; Step S4, dynamic gap generation: dynamically calculating and setting the visual gap between components based on the weight difference between adjacent components; Step S5, layout rendering: generating a visual H5 page layout within the layout container based on the final size and position information of all components determined in steps S3 and S4.

Description

Technical Field

[0001] This invention relates to the field of artificial intelligence technology, and in particular to a method for refining the layout of page components in the context of H5 (HTML5) applications. Background Technology

[0002] With the widespread application of low-code and no-code development platforms and the rapid evolution of AI-generated content technology, automatically generating H5 pages based on natural language descriptions has become a core method for building marketing campaigns, product displays, and lightweight web content. In this scenario, users input page requirements through natural language, and the system needs to automatically parse the intent, select and combine corresponding components from the component library, and finally render an H5 page that meets the requirements. However, the automated layout process faces significant bottlenecks, especially in achieving refined, adaptive, and visually logical layouts of components. Existing technologies mainly rely on three types of solutions: First, layouts based on fixed templates and rules. The system pre-sets a limited number of templates and mechanically matches components based only on their type or quantity, resulting in a severe lack of flexibility. This makes it impossible to respond to complex and ever-changing natural language requirements, and the generated results are highly homogenized, making it difficult to meet personalized and refined layout requirements. Second, automated methods based on traditional CSS layout models generate Flexbox or Grid layout code through algorithms. Although these methods support basic responsive adaptation, their rules are mostly statically set or rely on simple heuristic strategies, failing to integrate layout decisions with the semantic content importance of components. First, the business process is critical and deeply related to the value of user interaction. For example, when screen space is limited, key operation components such as the "Buy Now" button may be over-compressed and lose their function, while secondary text components occupy too much space, disrupting the user guidance logic. Second, end-to-end layout generation based on deep learning uses neural networks to directly output component coordinates, but such methods have black box characteristics, poor controllability and interpretability of the generated results, difficulty in embedding clear business rules or responding to user interaction adjustments in real time, and the processing mechanism is crude when space is insufficient, often causing key information to be covered or layout imbalance, and lacking the ability to progressively optimize.

[0003] The aforementioned limitations are particularly prominent in the Wensheng H5 scenario. When the total initial size requirements of components exceed the capacity of the layout container, the existing technology cannot intelligently assess the differences in component priorities, nor can it dynamically perform space compression and redistribution. This results in high-priority components failing to achieve sufficient visual expressiveness, while low-priority components occupy redundant space, ultimately affecting the overall harmony of the page, the effect of guiding user behavior, and the usability of the system. Summary of the Invention

[0004] To address the aforementioned problems, this invention aims to solve the issues described above. One objective of this invention is to provide a method for refining the layout of page components in a text-based H5 scenario.

[0005] The solution adopted by the present invention is: a method for refining the layout of page components in the H5 scenario, including the following steps: Step S1, requirement analysis and component structuring: semantic analysis of the page generation requirements input by the user, identification and extraction of the set of components to be laid out, wherein each component has an initial size requirement;

[0006] Step S2, weight calculation: For each component in the component set, calculate its multidimensional priority weight W, which comprehensively reflects at least the content importance, business criticality and user interaction popularity of the component.

[0007] Step S3, competitive space pre-allocation: Place the components into a layout container of a preset size. If the sum of the initial size requirements of all components exceeds the capacity of the layout container, perform a space compression and redistribution loop: Calculate the competitiveness value of each component based on its multi-dimensional priority weight W; iteratively compress the space occupied by the component with the lowest competitiveness value to its minimum acceptable size, and redistribute the released space to the components with high competitiveness values ​​according to the competitiveness value ratio, until the sum of the adjusted size requirements of all components matches the capacity of the layout container;

[0008] Step S4, Dynamic Gap Generation: Based on the weight difference between adjacent components, dynamically calculate and set the visual gap between components; at the same time, extract the shape boundary of each component, identify its protrusion and concavity features, and dynamically adjust the orientation of the components within their respective preset rotatable angle range, so that the protrusion part and concavity area of ​​adjacent components match each other through the algorithm.

[0009] Step S5, Layout rendering: Based on the final size and position information of all components determined in steps S3 and S4, a visual H5 page layout is generated within the layout container.

[0010] Furthermore, in step S1, semantic parsing is performed on the page generation requirements input by the user, specifically including: using a pre-trained natural language processing model to parse the requirement text and identify the component types, quantities, and attribute constraints described therein;

[0011] Based on the recognition results and combined with a preset component library, a structured component description object is generated. The component description object includes at least a component type identifier, initial width and height dimensions, content padding, and layout priority tags.

[0012] The preferred technical solution is that, in step S2, the multidimensional priority weight W of the component is calculated using the following formula: W = α × W_c + β × W_b + γ × W_h, where W_c is the content weight, determined based on the component's text information volume, media resource size, and content uniqueness; W_b is the business weight, determined based on the component's criticality in the business process and the real-time data update requirements; W_h is the behavior weight, calculated based on the historical user interaction frequency and duration of this component or similar components using a time decay function; α, β, and γ are configurable weighting coefficients, and α + β + γ = 1.

[0013] The preferred technical solution is that, in step S3, the space compression and redistribution loop specifically includes: S31, Space overflow determination: Calculate the difference between the initial total required area of ​​the component set and the available area of ​​the layout container; S32, Competition sorting: Calculate the competitiveness value K of each component according to the multi-dimensional priority weight W of each component in the current iteration, and sort all components in descending order of K value; S33, Selective compression: Select at least one component with the lowest K value, trigger the space compression protocol, compress the space it occupies from the current value to the preset minimum acceptable size or compress it by a certain proportion, and record the amount of space released ΔS; S34, Priority redistribution: Distribute the released space ΔS according to the proportion of K value of the remaining components except the compressed component, increase their occupied space, but not exceeding their respective maximum size limits; S35, Loop iteration: Repeat steps S31 to S34 until the total required area does not exceed the available area of ​​the container or the preset maximum number of iterations is reached.

[0014] The preferred technical solution is that the space compression protocol adopts a layered progressive compression strategy, and performs the following operations in sequence: First, compress the non-content area of ​​the component, including the inner margin and the outer margin; second, compress the content display area of ​​the component proportionally; if the component contains text, intelligent text adaptation is triggered, including reducing the font size, adjusting the line height, or abbreviating; if the component contains images or media, proportional scaling is triggered.

[0015] The preferred technical solution is that, in step S4, the formula for dynamically calculating the visual interval Gap between components is: Gap=BGap+|W_i-W_j|×EC, where BGap is a preset basic interval value, W_i and W_j are the weights of two adjacent components, and EC is an elasticity coefficient; the larger the weight difference, the larger the gap generated, so as to visually enhance the priority difference of components.

[0016] The preferred technical solution is that step S4 optimizes the spatial layout based on the component's outer boundary, protruding features, and rotatable angle, specifically including the following steps: S41, extracting the precise outer boundary of each component after adjustment in step S3, identifying the protruding and recessed feature areas on the boundary through contour scanning and curvature calculation, and obtaining their geometric parameters; S42, for each component, enumerating multiple candidate rotation angles within its preset rotatable angle range; S43, calculating the shape complementarity matching degree between the protruding part of any component and the recessed area of ​​its adjacent component at a specific rotation angle, wherein the matching degree is determined by a weighted average of at least three factors: area overlap, contour proximity, and angle similarity; S44, initially selecting a rotation angle for each component based on the matching degree, so that it forms a preliminary tessellation relationship with the surrounding components in terms of shape.

[0017] The preferred technical solution is that step S4 further includes the following steps: S45, using an iterative optimization algorithm to coordinately adjust the angles and positions of components to maximize space utilization; specifically, based on the initially selected angles and positions, multiple rounds of iterative optimization loops are initiated. In each iteration, the rotation angle and position coordinates of each component are finely adjusted sequentially, and adjustment schemes that can reduce the gap area of ​​the overall layout or improve the matching degree between components are evaluated and adopted; S46, during the optimization process, the rotation adjustment of the components is forcibly constrained not to exceed its preset rotatable angle range, and it is ensured that there is no content overlap between components; S47, when the iteration reaches a preset number of times or the improvement in space utilization is lower than a threshold, the optimization is terminated, the final rotation angle and position coordinates of each component are output, and the proximity relationship and gap value between components based on the actual shape are recorded as direct input for performing step S5 to dynamically calculate the visual interval.

[0018] The preferred technical solution also includes a layout performance optimization step: for pages with more than a threshold number of components, window virtualization technology is used to perform complete steps S2 to S4 calculation and rendering only for components in the currently visible area and adjacent buffer areas; for components in non-visible areas, only their metadata and the calculated layout results are retained, and when the user scrolls the page, the components that are about to enter the window are dynamically calculated and rendered.

[0019] The preferred technical solution further includes a feedback learning optimization step: the system records the layout scheme finally confirmed by the user, as well as the data on the compressed components and their compression degree during the layout process; using the recorded dataset, the system periodically fine-tunes the model parameters used to calculate the content multidimensional priority weight W_c, business multidimensional priority weight W_b, and behavior multidimensional priority weight W_h, or optimizes the weighting coefficients α, β, γ, so that the weight calculation is more in line with the user's actual layout preferences.

[0020] Compared with existing technologies, the method of the present invention for refining the layout of page components in the Wensheng H5 scenario has the following technical effects:

[0021] This application proposes a method for refining the layout of page components in the Wensheng H5 scenario. By semantically parsing user needs to extract a set of components, calculating multi-dimensional priority weights, and iteratively compressing the space of low-priority components and reallocating it to high-priority components when space is insufficient, while dynamically setting visual intervals, this method solves the problem of unreasonable space allocation caused by the inability of existing technologies to intelligently assess component priorities. It has the advantages of intelligently optimizing component space allocation through multi-dimensional priority weights and competitive space pre-allocation mechanisms, ensuring that high-priority components receive sufficient visual expression, and low-priority components are reasonably compressed, thereby improving the harmony of page layout, the effect of user behavior guidance, and the usability of the system.

[0022] Step S4 accurately identifies the protrusions and indentations of the components and allows the components to rotate within a defined range, enabling the outlines of adjacent components to be pieced together like a jigsaw puzzle. Figure 1 The components interlock. This interlocking mechanism transforms previously unused dead space into usable area, securing more display space for high-priority components or making it possible to accommodate more components without increasing the container size, thus maximizing the use of physical space. By embedding the protruding parts of components into the recessed areas of adjacent components, the page eliminates harsh linear divisions and abrupt geometric conflicts, forming a continuous and smooth visual whole. This organic arrangement endows the page with a strong sense of design and artistry, elevating the H5 page from a simple accumulation of information into a carefully arranged visual work. Attached Figure Description

[0023] Other features and advantages of the invention will become clear when reading the following description of exemplary embodiments with reference to the accompanying drawings.

[0024] Figure 1 This is a flowchart illustrating the method for refining the layout of page components in a text-based H5 scenario, provided in a specific embodiment of the present invention.

[0025] Figure 2 This is a detailed flowchart illustrating step S3 of the method for refining the layout of page components in a text-based H5 scenario, provided in a specific embodiment of the present invention. Detailed Implementation

[0026] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below.

[0027] Traditional automated layout methods for H5 pages, such as those based on fixed templates, traditional CSS models, or deep learning-based end-to-end generation, have significant limitations in the context of Wensheng H5. These methods lack flexibility and struggle to adapt to complex and ever-changing user needs; layout decisions fail to be deeply integrated with the semantic content of components, business importance, and user interaction value, resulting in an inability to intelligently allocate space and effectively highlight key elements when space is limited; furthermore, the generated results have poor controllability and interpretability, and lack a progressive optimization mechanism.

[0028] In response, this application proposes a method for refining the layout of page components in the context of H5.

[0029] For ease of understanding, the following explains some key terms in this embodiment:

[0030] The Wensheng H5 scenario refers to an application environment where users describe their page requirements using natural language, and the system automatically generates H5 pages. In this scenario, the system needs to understand the user's intent and intelligently lay out the page components.

[0031] A component collection refers to all the elements identified and extracted after parsing user requirements, which are intended for layout on an H5 page. Each component can be a button, a piece of text, an image, or a video, and has its own initial size requirements.

[0032] The multidimensional priority weight W is a comprehensive value calculated for each component in the component set. This multidimensional priority weight W is used to quantify the importance of a component on the page, and its calculation comprehensively considers multiple dimensions such as the component's content importance, business criticality, and user interaction frequency.

[0033] A layout container is a pre-defined area that holds all components to be laid out. All component layout operations are performed within this container, and its capacity limits the total space available to the components.

[0034] The competitiveness value is a dynamic numerical value calculated based on the multidimensional priority weights W of components during the space pre-allocation process. This value reflects the relative advantage of components in space competition and is used to guide decisions on space compression and reallocation.

[0035] The minimum acceptable size refers to the minimum space a component occupies to maintain its basic functionality and readability under extremely space-constrained conditions. When space is limited, the size of the component can be compressed to this size.

[0036] Visual gap refers to the blank area between components that is dynamically calculated and set during the layout process based on the priority differences between adjacent components. This gap helps to visually distinguish and organize components and reinforces priority differences.

[0037] This embodiment provides a method for refining the layout of page components in a text-based H5 scenario. For example... Figure 1 As shown, in step S1, requirement analysis and component structuring are performed. The user's page generation requirements can be received by the system, for example, through a text input box or voice command. The system performs semantic analysis on the requirements to understand the user's intent. This semantic analysis can use keyword matching to identify predefined component types and quantities from the requirement text. For example, when a user inputs "I need a title, an image, and two buttons," the system can identify the title, image, and buttons as components and determine their quantities. Subsequently, the system extracts a set of components to be laid out, where each component is assigned an initial size requirement, which can be set based on the component's default size or the size preference mentioned by the user in the requirement. In step S2, the multidimensional priority weight W of the components is calculated. For each component in the component set, the system calculates its multidimensional priority weight W. This multidimensional priority weight W aims to comprehensively reflect the component's importance on the page. For example, this multidimensional priority weight W can be simply determined by a manually preset priority level or by categorizing and assigning values ​​based on component type. A title component may be assigned a higher weight, while a supplementary text component may be assigned a lower weight. The multidimensional priority weight W comprehensively reflects at least the component's content importance, business criticality, and user interaction frequency. Content importance can be initially judged based on the length of the text or the size of the media file contained in the component; business criticality can be determined based on the component's criticality in the business process and the real-time requirements of data updates; user interaction frequency can be calculated based on the frequency and duration of historical user interactions with this component or similar components, using a time decay function. In step S3, competitive space pre-allocation is performed. First, all components are placed in a layout container of a preset size. If the sum of the initial size requirements of all components exceeds the capacity of the layout container, a space compression and reallocation loop needs to be executed. In this loop, the system calculates the competitiveness value of each component based on its multidimensional priority weight W. This competitiveness value can be simply proportional to the multidimensional priority weight W. Subsequently, the system iteratively compresses the space occupied by the component with the lowest competitiveness value. For example, the component with the lowest current competitiveness value can be selected each time, and its size can be reduced proportionally by a fixed percentage until its minimum acceptable size is reached. The freed-up space is then redistributed proportionally to components with high competitiveness, for example, by evenly distributing the freed-up space to all uncompressed components. This cycle continues until the sum of the adjusted size requirements of all components fits the capacity of the layout container.

[0038] In step S4, dynamic gap generation is performed. Based on the weight difference between adjacent components, the system dynamically calculates and sets the visual gap between components. For example, a base gap value can be preset, and then this base gap value is simply linearly adjusted according to the weight difference between adjacent components. If the weight difference between two adjacent components is large, a larger visual gap can be set to visually emphasize the priority difference between them. Conversely, if the weight difference is small, the gap can be smaller. To make the gap more reasonable and the overall page layout more cohesive, this embodiment also adds a unique dynamic gap generation and shape fitting optimization step: First, a base visual gap Gap_base is dynamically calculated based on the multidimensional priority weight difference between adjacent components. This base gap is used as a reference for the minimum spacing that should be maintained between components in subsequent steps. Its calculation formula can be set as Gap_base = k * |W_i - W_j|, where k is a preset proportional coefficient to visually enhance the priority difference.

[0039] Secondly, the precise outline boundary of each component is extracted, that is, its preset polygonal contour is obtained from the component description object. This contour is defined by a series of vertex coordinates, reflecting the geometry of the component, such as the rounded rectangle of a button, the irregular cropping of an image, or a specific concave or convex pattern. The system traverses the contour vertices and uses the cross product notation of vectors to determine the convexity or concavity of each vertex: for each vertex v_i of the polygon, the cross product of adjacent edge vectors v_i v_{i-1} and v_i v_{i+1} is calculated. If the cross product direction is perpendicular to the polygon plane and points outward, the vertex is determined to be convex or concave based on the sign. Usually, all vertices of a convex polygon have the same sign, while irregular components have both convex and concave points. This method can identify all convex parts and concave areas on the component contour and record their geometric positions and normal information. Subsequently, within the preset rotation angle range of each component, such as 0° to 10°, but this range can be narrowed according to actual layout constraints, a local fitting optimization process is initiated. This aims to match the convex and concave parts of adjacent components through rotation adjustment, thereby reducing unnecessary blank spaces. This process can be achieved by following these steps:

[0040] First, based on the initial component location area determined in step S3, typically the minimum bounding rectangle, an adjacency graph is constructed to identify all spatially adjacent component pairs. Second, for each pair of adjacent components (A, B), discrete sampling or continuous optimization methods are used within the rotatable angle range of A and B to calculate the degree of embedding for each angle combination. The degree of embedding can be comprehensively scored using the following indicators: ① The distance from the convex vertex to the concave region, the smaller the better; ② The minimum interval between the two polygonal contours, and its closeness to Gap_base; ③ Whether there is overlap, which is prohibited. A scoring function can be designed: Score = α * (1 - d / d_max) + β * (1 - |gap - Gap_base| / gap_max), where d is the distance between the convex and concave regions, gap is the actual contour spacing, and α and β are weights. Third, the angle combination that yields the highest embedding score is selected, and the orientations of components A and B are updated. To avoid global conflicts, an iterative greedy strategy can be adopted: first, sort components by priority from high to low, and process each component and its adjacent components sequentially; or fine-tune gradually in multiple iterations until the chirping scores of all adjacent pairs converge or the maximum number of iterations is reached. Fourth, if the optimization requirements of different components conflict, for example, if the rotation of one component causes it to overlap with another non-target component, a conflict resolution mechanism is introduced: prioritize satisfying the chirping requirements of high-weight components, impose additional rotation range restrictions on low-weight components, or introduce a global energy function that includes chirping scores, overlap penalties, and angle deviation penalties for overall optimization. After the chirping adjustment is completed, the actual visual interval Gap_final between all adjacent components is recalculated. Since rotation may change the relative position of the contours, Gap_final may deviate from Gap_base. In this case, the component positions can be slightly translated without overlap to make the actual interval as close as possible to Gap_base, thereby preserving the visual cues of weight differences. If overlap occurs after translation, non-overlap is prioritized, and the current interval is accepted. Ultimately, the precise positions and orientations of all components are determined for subsequent rendering.

[0041] In step S5, layout rendering is performed. Based on the final size and position information of all components determined in steps S3 and S4, the system generates a visual H5 page layout within the layout container. This rendering process can utilize standard web technologies, such as generating HTML and CSS code. The final layout result will be presented visually on the user interface for user preview and interaction.

[0042] In the context of Wensheng H5, the refined layout of page components relies on an accurate understanding of user needs and the structured extraction of component information. To address this, this application further proposes a specific method for semantically parsing the user-inputted page generation requirements in the requirement analysis and component structuring step S1. This method includes: using a pre-trained natural language processing model to parse the requirement text and identify the component types, quantities, and attribute constraints described therein; based on the identification results and combined with a pre-set component library, generating a structured component description object, wherein the component description object at least includes a component type identifier, initial width and height dimensions, content padding and layout priority tags, polygon vertex coordinates, and a rotatable angle range.

[0043] Specifically, a pre-trained natural language processing (NLP) model is used to parse the requirement text and identify the component types, quantities, and attribute constraints described within. The pre-trained NLP model refers to a model trained on a large-scale text corpus with general language understanding capabilities, such as BERT and GPT series models. After fine-tuning, these models can efficiently identify specific entities in the H5 page generation domain, such as buttons, images, text blocks, and relationships, thereby accurately extracting key information from the user's requirements regarding component types and quantities (e.g., one title, two buttons, three images) and attribute constraints (e.g., red, centered, large size). Based on the identification results and a pre-defined component library, a structured component description object is generated. The identification results are the structured information extracted from the requirement text by the NLP model. The pre-defined component library is a collection of various H5 page component templates, each defining the component's default attributes, behaviors, and possible size range. The system matches the identified component information with the templates in the component library, instantiating a data structure for each component to be laid out. The component description object includes at least a component type identifier, initial width and height dimensions, content padding, and a layout priority tag. The component type identifier uniquely identifies the type of component, such as Button, Image, TextBlock, etc.; the initial width and height dimensions represent the suggested or default size of the component before layout, which can be determined based on the user's requirements or the default values ​​in the component library; the content padding refers to the specific content the component will contain, such as the text content of a text component or the image URL of an image component; the layout priority tag is a preliminary priority indicator used as a reference in subsequent weight calculations, such as high, medium, low, etc.

[0044] In some of the embodiments described above in this application, semantic parsing of user-inputted page generation requirements is proposed to identify and extract the set of components to be laid out, and to calculate the multi-dimensional priority weight W for each component to guide subsequent layout optimization. However, in practical applications, how to accurately and comprehensively quantify the priority of components so that it truly reflects the importance of components in the H5 page is a key challenge in achieving refined layout. If the weight calculation is not accurate or comprehensive enough, the layout result may fail to fully reflect the actual value of the components, affecting user experience and business objectives. To address this, this application further proposes that in step S2 above, the multi-dimensional priority weight W of the component be calculated using the following formula: W = α × W_c + β × W_b + γ × W_h, where W_c is the content weight, determined based on the component's text information volume, media resource size, and content uniqueness; W_b is the business weight, determined based on the component's criticality in the business process and the real-time data update requirements; W_h is the behavior weight, calculated using a time decay function based on the historical user interaction frequency and duration of this component or similar components; α, β, and γ are configurable weighting coefficients, and α + β + γ = 1. Specifically, the calculation formula W = α × W_c + β × W_b + γ × W_h aims to integrate multiple importance dimensions of the component into a unified priority value through weighted summation. Here, W_c represents the content weight, used to measure the value and richness of the information carried by the component. For example, the information content of text can be assessed based on word count, keyword density, or semantic complexity; for media resources, their size is often positively correlated with their visual importance; and content uniqueness reflects the scarcity or originality of the component's content. W_b represents business weight, used to evaluate the component's strategic position and functional criticality within the entire business process. For example, a button or information display that directly impacts user conversion typically has high business criticality; conversely, components with high real-time data update requirements should have correspondingly higher business weight. W_h represents behavioral weight, reflecting the component's actual attractiveness or user attention by analyzing historical user interaction data. This can be based on statistics such as the number of clicks, dwell time, and scroll depth of users on the component or similar components, processed using a time decay function to ensure that recent behavioral data has a greater impact on weight calculation, thus reflecting dynamic changes in user preferences. Furthermore, α, β, and γ are configurable weighting coefficients that allow the system to flexibly adjust the relative contributions of content, business, and behavior dimensions in the total weight according to different H5 scenarios, product strategies, or operational goals, with the sum of the three being 1, ensuring the standardization of the weights. Through the above technical solution, this application provides a systematic, quantitative and configurable component priority weight calculation mechanism.This mechanism comprehensively considers the content value, business importance, and user behavior preferences of components, enabling the calculated multi-dimensional priority weight W to more comprehensively and accurately reflect the actual importance of components. This effectively solves the potential one-sidedness or subjectivity problems of traditional weight calculations, providing a more reliable basis for the subsequent competitive space pre-allocation step S3. It ensures that when space is limited, truly important components receive better display space, while secondary components are reasonably compressed. Simultaneously, in the dynamic gap generation step S4, the weight difference calculated based on this precise weight allows for a more reasonable setting of visual intervals between components, thereby visually reinforcing the priority differences between components, guiding user attention, and improving the overall layout quality and user experience of the H5 page.

[0045] In some embodiments described above in this application, although a cyclical mechanism for space compression and reallocation based on component weights is proposed, its description is rather macroscopic. In actual operation, how to accurately determine space overflow, how to dynamically adjust the competitiveness of components, and how to efficiently and fairly release and reallocate space to ensure the rationality of the layout and the convergence of iterations still present specific implementation challenges. To address this, this application further proposes that in the aforementioned competitive space pre-allocation step S3, the space compression and reallocation cycle specifically includes the following steps: as follows... Figure 2As shown, firstly, space overflow determination S31 is performed. This step aims to calculate the difference between the initial total required area of ​​the component set and the available area of ​​the layout container. Specifically, the system calculates the sum of the current occupied areas of all components to be laid out and compares it with the preset available area of ​​the layout container. If the total required area of ​​the components exceeds the available area of ​​the container, it indicates that there is space overflow, and the subsequent compression and reallocation process needs to be initiated; if there is no overflow or the requirements are met, the loop terminates. This determination mechanism provides clear triggering conditions and quantitative targets for space adjustment. Secondly, competitive sorting S32 is performed. In the current iteration, the system calculates the competitiveness value K of each component based on its multi-dimensional priority weight W. This competitiveness value K can be directly derived from the multi-dimensional priority weight W, or dynamically adjusted by combining factors such as the current occupied area of ​​the component, to more accurately reflect the importance of the component in the current layout stage. Subsequently, all components are arranged in descending order according to their competitiveness value K. This sorting method ensures that when space is limited, it is possible to clearly identify which components have higher space reservation or acquisition priority and which components are relatively less important, providing a basis for subsequent selective compression. Next, selective compression S33 is performed. The system selects at least one component with the lowest K value in the competitive ranking and triggers a preset space compression protocol. This protocol compresses the space occupied by the selected component until it reaches a preset minimum acceptable size, or compresses it proportionally. For example, for text components, the inner and outer margins can be compressed first, and then the font size or line height can be adjusted; for image components, they can be scaled proportionally. This step records the amount of space ΔS released due to compression. By strategically compressing low-priority components, valuable layout space can be effectively freed up. Subsequently, priority reallocation S34 is performed. The amount of space ΔS released in step S33 is redistributed according to the proportion of the competitiveness value K of the remaining components excluding the compressed component. This means that components with higher competitiveness values ​​K will receive more extra space to increase their occupied area, but the allocated size will not exceed their respective preset maximum size limits. This allocation mechanism ensures that the released space can flow to more important components first, thereby visually strengthening their priority. Finally, iterative iteration S35 is performed. Steps S31 to S34 above will be repeated until the total required area of ​​the component set no longer exceeds the available area of ​​the layout container, or the preset maximum number of iterations is reached. The iterative mechanism ensures continuous optimization of the space compression and redistribution process until the size requirements of all components can be adapted to the container capacity, or an acceptable layout scheme is provided when the maximum number of iterations is reached.

[0046] By introducing space overflow judgment S31, the system can accurately identify and quantify the space shortage of the layout container, providing clear triggering conditions and targets for subsequent compression and reallocation. Competitive sorting S32 allows the component's competitiveness value K to dynamically reflect its importance in the current iteration, ensuring that when space is tight, the system can intelligently identify and prioritize the compression of relatively less critical components, thereby protecting the display of core content. The synergistic effect of selective compression S33 and priority reallocation S34 achieves effective reallocation and optimized allocation of space resources, that is, releasing space from low-priority components and allocating it proportionally to high-priority components. This not only solves the space overflow problem but also further enhances the visual prominence of important components. The iterative loop mechanism S35 ensures the convergence and robustness of the entire compression and reallocation process, ensuring that the final generated H5 page layout can both adapt to the container capacity and maximize the reflection of component priority differences, thus achieving a more refined and intelligent page layout in the Wensheng H5 scenario. In some embodiments described above, it is proposed that when the total initial size requirements of all components exceed the capacity of the layout container, the space occupied by the component with the lowest competitiveness value should be iteratively compressed according to the multi-dimensional priority weight W of each component, and the released space should be redistributed to components with high competitiveness values. However, in actual implementation, simply compressing the size of components may result in the component content being truncated, images being distorted, or text being difficult to read, thereby impairing the visual quality and information delivery efficiency of the page. To address this, this application further proposes that the space compression protocol adopts a layered progressive compression strategy, performing the following operations in sequence: First, compress the non-content areas of the component, including inner and outer margins; second, compress the content display area of ​​the component proportionally; if the component contains text, intelligent text adaptation is triggered, including reducing font size, adjusting line height, or abbreviation; if the component contains images or media, proportional scaling is triggered. The layered progressive compression strategy is a refined space reduction method. Its core idea is that when a component needs to be reduced in size, areas with less visual impact or those that can be flexibly adjusted are compressed first, and then the compression gradually extends to the core content area to maximize the preservation of the component's usability and visual effect. This strategy makes the compression process more intelligent and controllable by defining different compression stages and corresponding operations, avoiding information loss or layout disruption that may result from simple and crude size reduction. For example, the system can preset a compression priority list, such as non-content areas, content display areas, text content, and image / media content, and apply compression operations layer by layer in this order. Specifically, the first operation performed is to compress the non-content areas of the component, which includes padding and margin. Non-content areas refer to the blank areas between the component's border and the content, as well as the blank areas between the component's border and other components or container boundaries. These areas are typically used to provide visual breathing space and isolation between components.Prioritizing the compression of these areas can effectively free up space without directly affecting the display of the core content of the component, with a relatively small impact on the user experience. For example, the system can preset the minimum allowable values ​​for inner and outer margins. When compression is needed, these margin values ​​are first gradually reduced from their current values ​​until they reach the preset minimum values.

[0047] Secondly, when compression of non-content areas is still insufficient to meet space requirements, the content display area of ​​the component is compressed proportionally. The content display area refers to the area within the component used to carry actual information such as text, images, and videos. Proportional compression ensures that the relative layout and visual proportions of elements within the component are maintained, avoiding visual imbalance caused by uneven scaling. This typically involves adjusting the width and / or height of the component. The system calculates a uniform scaling ratio based on the amount of space to be released, and then multiplies the width and height of the component by this ratio. If the component contains text, intelligent text adaptation is triggered, including reducing font size, adjusting line height, or abbreviation. Text content is the core information carrier of many components. When the content display area is compressed, if the text cannot be fully displayed, the intelligent text adaptation mechanism can handle it in a more elegant way, rather than simply truncating or hiding it. Reducing font size and adjusting line height can directly display more text within limited space, while abbreviation simplifies the text content when semantically permissible. For example, the system can preset the minimum font size and line height of the text, and during compression, gradually reduce the font size and line height until the text can adapt to the new content area or reach the minimum readable font size. For abbreviations, natural language processing techniques can be used to identify and remove modifiers that do not affect the core semantics, or ellipses can be used to indicate that some content is omitted. If a component contains images or media, proportional scaling is triggered. Images and media are important components of visual information. Proportional scaling is a standard practice for handling such content when space is limited. It ensures that the aspect ratio of images or videos remains unchanged, avoiding stretching or compression distortion, thereby maintaining visual quality and content integrity. When the content display area of ​​a component is compressed, the system calculates the maximum adaptable size of the image or media based on the new available space and scales it while maintaining the original aspect ratio. Through the above technical solution, during the competitive space pre-allocation process, when the total initial size requirements of components exceed the layout container capacity, this application can avoid simply and crudely reducing the size of components, thus effectively solving the problem that component content may be truncated, distorted, or difficult to read under space constraints. This layered progressive compression strategy first compresses the non-content areas of the component, such as inner and outer margins, which frees up valuable space without affecting the presentation of core information. Subsequently, the content display area is compressed proportionally to ensure visual harmony. For components containing text, the intelligent text adaptation mechanism maximizes readability and information integrity by reducing font size, adjusting line height, or using abbreviations. For components containing images or media, proportional scaling ensures lossless presentation of visual content. This refined compression method enables the generation of high-quality, highly readable H5 page layouts even under tight layout space, significantly improving user experience and the effective delivery of page content.

[0048] Existing technologies may fail to effectively and intuitively reflect the priority differences between components, or make it difficult to flexibly adjust the visual emphasis under different design styles, thus affecting the overall aesthetics and information delivery efficiency of the page. To address this, this application further proposes a formula for dynamically calculating the visual interval Gap between components in step S4: Gap = BGap + |W_i - W_j| × EC; where BGap is a preset base interval value, W_i and W_j are the weights of two adjacent components, and EC is an elasticity coefficient; the larger the weight difference, the larger the generated gap, thus visually reinforcing the priority differences between components. This formula provides a quantitative and controllable mechanism for determining the visual interval between adjacent components. It not only considers the base interval but also introduces the weight difference as an adjustment factor, allowing the interval size to directly reflect the importance differences between components, thereby visually reinforcing the priority hierarchy of components. Specifically, BGap is a preset constant representing the minimum or default interval that should be maintained between all components. This value can be configured according to the overall design specifications, visual style, or user experience requirements of the page. For example, it can be set to a fixed pixel value, such as 10px, 16px, or a percentage value based on the container size. Its purpose is to ensure that even if the priority difference between adjacent components is not significant, a certain visual separation is maintained between components, avoiding overly crowded page elements and ensuring basic readability and aesthetics. W_i and W_j represent the multi-dimensional priority weights of two adjacent components, respectively. These weights are calculated based on the results in step S2 above, comprehensively reflecting the content importance, business criticality, and user interaction frequency of the components. By comparing the weight values ​​of adjacent components, their relative importance differences on the page can be quantified.

[0049] The core of this preferred technical solution lies in using the geometric shape of components as a key dimension for layout optimization. By identifying protruding and concave features and allowing components to rotate within a limited range, adjacent components can interlock like puzzle pieces, thereby reducing blank gaps, improving space utilization, and enhancing the visual integrity of the page. The specific implementation includes the following sub-steps: S41, Precise shape boundary extraction and feature recognition: The system obtains the preset polygonal outline of each component from the component description object. This outline is not a simple rectangle, but a complex polygon that reflects the true appearance of the component, such as buttons with rounded corners, irregularly cropped images, or cards with decorative embossing. Through outline scanning and curvature calculation, the system automatically identifies protruding and concave feature areas on the boundary. The recognition method is based on the convexity / concavity determination of polygon vertices: traversing the contour vertices, calculating the cross product of adjacent edge vectors, distinguishing convex and concave points based on the cross product sign, and recording the geometric parameters of each feature area, such as position, radius of curvature, normal direction, and area. This data provides the foundation for subsequent matching degree calculations.

[0050] In S42, each component is assigned a range of rotatable angles during design. For example, icon components may allow free rotation from 0° to 30°, while text components may only allow a limited rotation of 10° to ensure readability. The system samples within this range in discrete steps, such as 2°, to generate a list of candidate angles. For scenarios requiring high precision, a continuous optimization method can also be used for direct searching, but discrete enumeration has the advantages of simple implementation and controllable computation.

[0051] S43, for each pair of adjacent components, based on the adjacency graph constructed from the initial location regions, the system calculates the shape complementarity matching degree between the protruding part and the recessed area under candidate angle combinations. The matching degree is obtained by weighted summation of three factors: Area overlap: Projecting the protrusion of component A onto the recessed area of ​​component B, the system calculates the proportion of the overlapping area to the total area of ​​the protrusion. The higher the overlap, the more perfectly the protrusion can be embedded in the recess. Contour proximity: Measuring the average nearest distance between the protrusion boundary and the recess boundary; the smaller the distance, the tighter the fit. Angle similarity: Evaluating the angle difference between the main direction of the protrusion and the opening direction of the recess; the smaller the angle, the better the directional consistency. By weighting and summing the three factors with preset weights, a matching degree score between 0 and 1 is obtained; the higher the score, the better the embedding effect under that angle combination.

[0052] S44. Based on the matching degree calculation results, a rotation angle is initially selected for each component. A greedy strategy can be adopted: components are processed sequentially from high to low priority, and the angle that maximizes the sum of matching degrees between the current component and all processed adjacent components is selected; or a global optimization method is used to maximize the matching degree of adjacent pairs. The initially selected angles enable the component to form an initial mosaic relationship with its surroundings, providing a good initial solution for subsequent collaborative optimization.

[0053] S45. Although initial angle matching has been achieved locally, gaps or conflicts may still exist globally. Therefore, the system initiates multiple iterative optimization cycles to collaboratively fine-tune the angles and positions of the components. In each iteration, small adjustments are made to the rotation angle and position coordinates of each component, and the objective function of the overall layout after adjustment is evaluated, such as the weighted combination of the sum of the matching degrees of all adjacent components and the total area of ​​the gaps. If the objective function improves, the adjustment is adopted; otherwise, the original state is maintained. Through multiple iterations, the angles and positions of each component gradually approach the globally optimal tessellation state.

[0054] S46. During the optimization process, two hard constraints are always applied: first, the rotation angle must not exceed the preset range to ensure that the final orientation conforms to the component design limitations; second, there must be no content overlap between components, that is, the minimum distance between all contours must be greater than zero. Any adjustment attempts that violate these constraints are rejected.

[0055] S47, the iteration continues until the maximum number of iterations is reached or the space utilization improvement in multiple consecutive rounds falls below a preset threshold. After termination, the system outputs the final rotation angle and position coordinates of all components, and records the proximity relationship and gap values ​​between components based on their actual shapes. These gap values ​​will serve as direct input for subsequent dynamic visual interval calculations to generate the final layout rendering.

[0056] In some of the embodiments described above in this application, a method for generating H5 page layouts through an automated process is proposed. However, in practical applications, users may have personalized adjustment needs for the initial layout scheme automatically generated by the system. For example, they may want a certain component to be larger, the position of a certain component to be slightly adjusted, or they may be dissatisfied with the spacing between components. Without direct and convenient intervention methods, users will find it difficult to make fine-grained corrections to the layout, thereby affecting the satisfaction and usability of the final layout.

[0057] To address this, this application further proposes a visualization intervention and real-time rendering step. This step aims to provide users with an intuitive and interactive platform, enabling them to directly participate in the layout adjustment process and instantly see the changes. Its purpose is to compensate for the shortcomings of purely automated layout in meeting personalized needs, enhancing users' control and satisfaction with the layout scheme. Specifically, this step includes providing a graphical user interface (GUI), which serves as the bridge between the user and the layout system. This interface is typically presented as a web page editor, desktop application, or integrated development environment (IDE) plugin. It is responsible for transforming abstract layout data into visual elements that users can understand and capturing user commands. The interface should possess good responsiveness and ease of use to ensure users can smoothly adjust the layout.

[0058] First, the graphical user interface displays the initial layout scheme generated by step S5 above. Before user intervention, the system presents the automated layout result on the graphical user interface, providing a baseline for modification rather than starting from scratch. The display is typically a WYSIWYG preview mode, simulating the actual display of an H5 page in a browser.

[0059] Secondly, the system receives user commands to modify the layout of any component through drag-and-drop and resizing operations. This is the core interaction method for user visual intervention. Drag-and-drop operations allow users to change the position of a component within the layout container, such as moving a component from the left to the right, or adjusting its vertical order. Resizing operations allow users to change the width and / or height of a component using mouse or touch gestures to meet specific visual or content display needs. These operation commands are captured and parsed by the system as input for subsequent layout adjustments.

[0060] Furthermore, based on the modification instructions, the system partially updates the weights or constraints of the affected components. When a user modifies the component layout through operations such as dragging or resizing, the system does not directly and forcibly fix these modifications. Instead, it translates the user's intent into adjustments to component attributes. For example, if a user drags a component to a certain position, the system can interpret this as an update to the component's position preference or position constraints. If a user resizes a component, the system can interpret this as an update to the component's size requirements or size constraints, or an implicit increase in its content importance multidimensional priority weight W, allowing it to obtain more space in subsequent space allocation. This transformation allows the user's modifications to be integrated into the existing automated layout algorithm, rather than completely escaping algorithm control, thereby maintaining the overall coordination of the layout.

[0061] Subsequently, the system re-triggers the calculations for steps S3 and S4. After locally updating the weights or constraints of the affected components, the system re-executes steps S3 and S4. Re-triggering step S3 is to reallocate space under the new weights or constraints, ensuring that the size and position of all components remain optimized and adapted to the container capacity under the new user intent. Re-triggering step S4 is to recalculate the visual gap between adjacent components based on the new component sizes and positions, and possibly updated weights, to maintain visual consistency. This local recalculation avoids starting the entire layout process from scratch, improving response speed.

[0062] Finally, the system updates the layout rendering effect in real time on the interface. After recalculation, the system immediately reflects the new layout result on the graphical user interface. This real-time feedback mechanism is crucial for user experience, allowing users to instantly see the changes brought about by their actions and make further adjustments based on the feedback, forming an efficient interactive loop. Users can observe the evolution of the layout without waiting or refreshing the page.

[0063] By introducing visual intervention and real-time rendering steps, the above method addresses the limitation that automated layout solutions may not fully meet users' personalized needs. Users can directly modify the layout of page components through an intuitive graphical user interface using drag-and-drop, resizing, and other operations. The system intelligently translates user modification commands into local updates to component weights or constraints, and quickly re-triggers the calculation of the competitive space pre-allocation step S3 and the dynamic gap generation step S4. This local recalculation mechanism ensures that user modifications are integrated into the overall layout optimization, avoiding layout fragmentation. Simultaneously, by updating the rendering effect in real-time on the interface, it provides users with immediate feedback, greatly improving the efficiency of layout adjustments and the user experience. Ultimately, this solution enables the refined layout of Wensheng H5 pages to not only possess the efficiency of automation but also the flexibility and precision of manual intervention, thereby generating a final layout scheme that better meets user expectations and aesthetic preferences.

[0064] In some of the embodiments described above in this application, the fine-grained layout method for page components requires performing complete weight calculations, space pre-allocation, and dynamic gap generation for each component in the component set, and finally rendering the layout. However, in the Wensheng H5 scenario, user-generated requirements may lead to a page containing a large number of components. Especially on mobile devices or in resource-constrained environments, performing comprehensive calculations and rendering on all components will result in significant computational overhead and rendering latency, thereby affecting page loading speed, scrolling smoothness, and overall user experience.

[0065] To address this, this application further proposes a layout performance optimization step. This step aims to improve the layout calculation and rendering efficiency of H5 pages when the number of components is large. Its function is to intelligently manage the calculation and rendering timing of components, avoiding unnecessary resource consumption, thereby ensuring that the page maintains good responsiveness and a smooth user experience even in complex scenarios. Specifically, for pages with more than a threshold number of components, the system will employ window virtualization technology. The threshold refers to a preset upper limit on the number of components. When the number of components to be laid out on the page exceeds this upper limit, the system considers the page to have a large number of components and automatically triggers the layout performance optimization strategy. This threshold can be configured according to the performance of the target device, the network environment, and the user's expectations for page response speed; for example, it can be set to 5, 20, or more components. Window virtualization technology is a technique for optimizing the rendering of long lists or large amounts of data. Its core idea is to render only the content within the user's currently visible area, as well as a small amount of content in the buffer area that is about to enter or has just left the window, while not actually rendering most of the content outside the window. This can significantly reduce the number of DOM elements and the rendering tasks that the browser needs to handle, thereby improving page performance and responsiveness. Implementation methods typically include listening to scroll events, calculating the position of components in the viewport, and dynamically adding or removing DOM elements.

[0066] Based on this, only components within the currently visible area and adjacent buffer areas undergo complete calculations and rendering of steps S2 to S4. The currently visible area refers to the portion of the page actually visible on the user's screen. The adjacent buffer area refers to a small area immediately above and below the currently visible area; its purpose is to pre-calculate and render components that will soon enter the viewport to avoid blank spaces or loading delays when the user scrolls. Performing complete calculations and rendering of steps S2, S3, and S4 on components in these areas ensures that the content currently visible and about to be visible to the user is presented with the highest accuracy and best effect. Meanwhile, for components outside the visible area, only their metadata and the calculated layout results are retained. The non-visible area refers to the portion of the page outside the current viewport and adjacent buffer areas. Metadata typically refers to basic component information, such as component type, ID, and content padding, but does not include its complete DOM structure or rendering state. The calculated layout results refer to the theoretically expected final size and position information of these components; this information may have been calculated once during the initial layout phase but is not immediately used for rendering. Retaining only this information significantly reduces memory usage and the burden on the browser's rendering engine, while providing the necessary foundational data for rapid rendering of subsequent components when they enter the visible area. As the user scrolls the page, the system continuously listens for scroll events and, based on the scroll direction and distance, determines which non-visible components are about to enter the adjacent buffer area or the current visible area. Once a component is determined to be about to enter the visible range, the system triggers the complete S2 to S4 calculations and rendering, ensuring a smooth presentation to the user. This dynamic, on-demand calculation and rendering mechanism ensures that computing resources are consumed only when necessary, thus maintaining high page performance.

[0067] By introducing layout performance optimization steps, this application effectively solves the performance bottleneck problem caused by performing comprehensive weight calculations, space pre-allocation, dynamic gap generation, and rendering on all components in H5 pages containing a large number of components. Specifically, by employing viewport virtualization technology, the system only needs to perform the complete steps S2 to S4 calculations and rendering on components in the currently visible area and adjacent buffer areas, while for components in non-visible areas, only their metadata and the calculated layout results are retained. This on-demand calculation and rendering strategy significantly reduces unnecessary calculation and rendering loads, significantly reduces CPU and GPU usage, thereby improving page loading speed and scrolling smoothness. When the user scrolls the page, the system can dynamically calculate and render components that are about to enter the viewport, ensuring smooth content transitions and seamless presentation, avoiding stuttering or delays caused by an excessive number of components, and providing users with a more responsive and smooth interactive experience.

[0068] In some of the above implementations, although multi-dimensional priority weights are calculated by comprehensively considering the content importance, business criticality, and user interaction popularity of components, and this guides the fine-grained layout of page components, the setting of these weight parameters and weighting coefficients may not be able to fully capture the implicit preferences and dynamic needs of users in the actual layout process. As a result, the generated initial layout scheme may still require manual adjustment by the user, failing to achieve continuous optimization and adaptation of the layout strategy.

[0069] In response, this application further proposes a feedback learning optimization step, which includes the system recording the layout scheme finally confirmed by the user, as well as the data on the compressed components and their compression degree during the layout process; using the recorded dataset, periodically fine-tuning the calculation rules or model parameters used to calculate the content multidimensional priority weight W_c, business multidimensional priority weight W_b, and behavior multidimensional priority weight W_h, or optimizing the weighting coefficients α, β, γ, so that the weight calculation is more in line with the user's actual layout preferences.

[0070] Specifically, the system records the final layout configuration determined by the user after all manual adjustments. This configuration data includes information such as the size, position, and spacing of each component, serving as an important basis for reflecting user preferences. Simultaneously, during the competitive space pre-allocation process, when a component is compressed due to space constraints, the system records in detail the component's identifier, its original size requirement, the compressed size, and the specific compression ratio or absolute value. This data on compressed components and their degree of compression quantifies the difference between the system's assessment of component importance under space constraints and the user's actual acceptance.

[0071] Based on these recorded datasets, the system periodically fine-tunes the model parameters used to calculate the content multidimensional priority weights W_c, W_b, and W_h. For example, if the calculation of these weights depends on specific functions or weighting factors, these parameters will be iteratively updated based on user feedback. Furthermore, the weighting coefficients α, β, and γ used to balance the influence of these weights are also optimized. For instance, if a user frequently zooms in on a component with high business criticality, the system may increase the value of β accordingly to enhance the influence of the business weight in the overall weight calculation.

[0072] Through the aforementioned feedback-based learning and optimization steps, this application enables the layout method of page components to possess adaptive and self-learning capabilities. The system no longer relies solely on preset rules and parameters but can continuously learn from users' actual operations and preferences, constantly refining its assessment of component importance. This mechanism effectively resolves potential discrepancies between initial weight settings and actual user preferences, significantly reducing the frequency and workload of manual adjustments after layout generation. Over time and with the accumulation of user interaction data, the system can generate more intelligent, personalized, and user-friendly H5 page layouts, thereby greatly improving layout efficiency and user satisfaction.

[0073] The following example will provide a more detailed explanation of the above technical solution:

[0074] Suppose a user needs to generate an H5 marketing page to promote a newly released smartwatch. The user inputs their requirements via natural language: "Please create a marketing page about our new smartwatch. The page needs to include a large product image, a prominent title, a product description, a 'Buy Now' button, a list showcasing core features, a user review section, and social media sharing icons. The 'Buy Now' button and the product image are particularly important."

[0075] To address this need, this method constructs a refined layout according to the following steps: First, in step S1, the system performs semantic parsing on the user's input page generation requirements. Using a pre-trained natural language processing model, the system identifies the user's desired component types, quantities, and attribute constraints. For example, it identifies an image component corresponding to "product main image," a text component corresponding to "eye-catching title," and a button component corresponding to "buy now." Based on the identification results, the system combines a pre-set component library to generate structured component description objects. Each object includes a component type identifier (such as "Image," "Text," or "Button"), initial width and height dimensions (e.g., the initial size of the product main image is 300x200 pixels, the title is 280x40 pixels, and the button is 150x50 pixels), content padding (such as the image URL of the product main image and the text content of the title), and layout priority tags (e.g., the "buy now" button is marked as "critical").

[0076] Next, in step S2, the system calculates the multidimensional priority weight W for each component in the component set. This multidimensional priority weight W comprehensively reflects the component's content importance, business criticality, and user interaction popularity. For example, for the "Buy Now" button, its business criticality W_b will be very high because it is directly related to the conversion goal; its behavior multidimensional priority weight W_h will also be high because historical data shows that similar buttons have high click-through rates. For the product main image, its content multidimensional priority weight W_c is high because it contains important visual information; its business multidimensional priority weight W_b is also high because it directly displays the product. However, for the user review area, its content multidimensional priority weight W_c and business multidimensional priority weight W_b may be relatively low. Using the formula W=α×W_c+β×W_b+γ×W_h, the system calculates a specific weight value for each component. For example, the multidimensional priority weight W of the "Buy Now" button may be 0.9, the multidimensional priority weight W of the "Product Main Image" may be 0.8, and the multidimensional priority weight W of the "User Reviews" may be 0.3.

[0077] Subsequently, in step S3, the system performs competitive space pre-allocation. Assume the current layout container is a mobile screen area of ​​a preset size. The system first calculates the sum of the initial size requirements of all components. If this sum exceeds the capacity of the layout container, the system enters a space compression and reallocation loop. In this loop, the system calculates the competitiveness value K of each component based on its multi-dimensional priority weight W (e.g., the K value is directly related to the W value). The system sorts all components in descending order of K value. For example, the "Buy Now" button and "Product Main Image" have the highest K value, while "User Reviews" and "Social Media Sharing Icon" have the lowest. The system iteratively selects the component with the lowest K value (such as the "Social Media Sharing Icon") and triggers a space compression protocol. This protocol employs a layered, progressive compression strategy: first, it compresses the non-content areas of the component (such as padding and margin), freeing up some space; if further compression is needed, it proportionally compresses the content display area of ​​the component (e.g., reducing the size of the social media icon); if the component contains text (such as "User Reviews"), it triggers intelligent text adaptation, including reducing font size, adjusting line height, or using abbreviations. The system records the amount of space released, ΔS. Then, the system allocates this released space ΔS according to the K-value ratio of all components except the compressed component, increasing their occupied space without exceeding their respective maximum size limits. This process is repeated until the sum of the adjusted size requirements of all components fits the capacity of the layout container. In this way, the system ensures that high-priority components such as the "Buy Now" button and "Product Image" receive or maintain sufficient visual space when space is limited, while low-priority components such as "User Reviews" or "Social Media Sharing Icons" are moderately compressed. This contrasts with the situation in traditional layouts where all components may be treated equally.

[0078] Next, in step S4, the system performs dynamic gap generation. Based on the weight difference between adjacent components, the system dynamically calculates and sets the visual spacing gap between components. For example, between the "Product Main Image" (multi-dimensional priority weight W=0.8) and the "Title" (multi-dimensional priority weight W=0.7), the gap may be smaller due to the smaller weight difference. However, between the "Title" (multi-dimensional priority weight W=0.7) and the "User Reviews" (multi-dimensional priority weight W=0.3), the gap will be larger due to the larger weight difference, visually reinforcing the priority difference between components and guiding users to focus on core information. This better reflects the design intent than a traditional fixed-space layout.

[0079] Furthermore, to enhance the design's aesthetics, the client had specific requirements regarding the component shapes. These requirements included: a main product image component (circular with slightly jagged edges, mimicking a clock face), a title component (rectangular with semi-circular protrusions at both ends), a "Buy Now" button (rounded rectangle with a triangular protrusion at the bottom to indicate click), a core function list component (rectangular with multiple recesses on the right side for embedding with other icons), and three social media sharing icons (circular, square (with rounded corners), and hexagonal, all capable of 360° rotation). Traditional rectangular layout methods simplify all components to their smallest bounding rectangles, allocating and arranging space according to priority. However, due to the varying shapes of the components, numerous irregular blank areas inevitably arise between the rectangles. For example, four arc-shaped gaps exist between the circular main image and the rectangular title, resulting in wasted space and a loose, uncoordinated page. Users may need to manually adjust the positions and spacing, but the rectangular constraints make a tight fit difficult.

[0080] The application of this preferred technical solution involves shape feature recognition: the system extracts the precise contours of each component, identifying the jagged protrusions in the main product image, the semi-circular protrusions at both ends of the title, the triangular protrusion at the bottom of the button, the recessed groove on the right side of the function list, and the individual shapes of the three icons. Rotation enumeration: a rotation range of 0° to 30° is set for the three share icons, with a step size of 5°; other components have smaller rotation ranges set according to design constraints, such as buttons only allowing ±10° fine-tuning, and the main image having a fixed orientation. Matching degree calculation: the system finds that the triangular protrusion of the button can perfectly fit into the recessed groove on the right side of the function list, and when the button rotates 5°, the direction of the protrusion is consistent with the angle of the recessed opening, achieving a matching degree as high as 0.92. Simultaneously, there is a certain complementary potential between the jagged protrusions of the main product image and the semi-circular protrusion of the title, but the title position needs to be adjusted. Preliminary angle selection: the button is selected to rotate 5° so that its triangular protrusion aligns with the recessed area of ​​the function list; the title remains at 0°, but the system records its matching potential with the main image. Iterative Optimization: During iterations, the system attempted to slightly shift the title 2 pixels to the left, bringing the semi-circular protrusion closer to the jagged gaps in the main image. Simultaneously, the circular share icon was rotated 45° so that its curved surface tangentially contacts the edge of the main image, reducing gaps. After multiple rounds of fine-tuning, the overall gap area was reduced by 30%, and the overall matching accuracy improved by 25%. Constraint Guarantee: All adjustments were within the allowable range of the components and there was no overlap. Final Output: The layout is as follows: the main image is centered slightly above, the title is close to its lower right side, the button is embedded to the right of the function list, and three share icons surround the lower left side of the main image, forming a well-arranged and interlocking organic whole. The gaps between components are minimal, and the visual flow is natural and smooth, allowing users to immediately perceive the connection between the button and the function list. Comparison results: Traditional rectangular layouts may require an additional 20% container height to accommodate all components, and the page appears fragmented; while this solution perfectly accommodates all components within the same container, creating a visually cohesive whole. It highlights the core components and strengthens the logical connections between components through integration, significantly improving user experience and page conversion potential.

[0081] Finally, in step S5, the system generates a visual H5 page layout within the layout container based on the final size and position information of all components determined in steps S3 and S4. Furthermore, this method also possesses responsive adaptation capabilities. When a user views the page on a desktop, if the system detects that the screen width falls within the desktop breakpoint range, it will adopt the corresponding layout container baseline size and re-trigger the layout calculation process that started in step S2. At this time, the "product main image" may be assigned a larger size, and the core function list may change from a vertical arrangement to a horizontal arrangement to adapt to a wider screen, generating a layout scheme adapted to the new screen size.

[0082] After the layout is generated, the system also provides visual intervention and real-time rendering steps. Users can drag and drop or resize the generated initial layout through the graphical user interface. For example, a user might feel that the "User Reviews" area is too small and manually increase its height. Upon receiving this modification instruction, the system will locally update the weights or constraints of the affected components and re-trigger the calculations in steps S3 and S4, updating the layout rendering effect in real time on the interface and providing immediate feedback. This differs from some black-box layout generation models, which are difficult to implement with fine-grained manual intervention.

[0083] To further optimize the system, a feedback learning optimization step is also included. The system records the layout scheme finally confirmed by the user, as well as data on the components compressed during the layout process and the degree of compression. This data is used to periodically fine-tune the model parameters for calculating the multi-dimensional priority weights W_c (content), W_b (business), and W_h (behavior), or to optimize the weighting coefficients α, β, and γ, so that the weight calculations better reflect the user's actual layout preferences, thereby continuously improving the accuracy of automated layout and user satisfaction.

[0084] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that an article or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such an article or apparatus. Without further limitations, an element defined by the phrase "comprising..." does not exclude the presence of other identical elements in the article or apparatus that includes that element.

[0085] The above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit it. The present invention has been described in detail with reference to preferred embodiments. Those skilled in the art should understand that modifications or equivalent substitutions can be made to the technical solutions of the present invention without departing from the spirit and scope of the present invention, and all such modifications and substitutions should be covered within the scope of the claims of the present invention.

Claims

1. A method for solving the fine layout of page components in a WebH5 scenario, characterized in that: Includes the following steps: Step S1: Perform semantic parsing on the page generation requirements input by the user, identify and extract the set of components to be laid out, where each component has an initial size requirement; Step S2: For each component in the component set, calculate its multidimensional priority weight W, which comprehensively reflects at least the component's content importance, business criticality, and user interaction popularity. Step S3: Place the components into a layout container of a preset size. If the sum of the initial size requirements of all components exceeds the capacity of the layout container, perform a space compression and redistribution loop: calculate the competitiveness value of each component based on the multidimensional priority weight W; iteratively compress the space occupied by the component with the lowest competitiveness value to its minimum acceptable size, and redistribute the released space to the components with high competitiveness values ​​according to the competitiveness value ratio, until the sum of the adjusted size requirements of all components matches the capacity of the layout container. Step S4: Based on the weight difference between adjacent components, dynamically calculate and set the visual interval gap between components; at the same time, extract the shape boundary of each component, identify its protrusion and concavity features, and dynamically adjust the orientation of the components within their respective preset rotatable angle range, so that the protrusion part and concavity area of ​​adjacent components match each other through the algorithm. Specifically, the steps are as follows: S41, extract the precise shape boundary of each component after adjustment in step S3, identify the convex and concave feature areas on the boundary through contour scanning and curvature calculation, and obtain their geometric parameters; S42, for each component, enumerate multiple candidate rotation angles within its preset rotatable angle range; S43, calculate the shape complementarity matching degree between the convex part of any component and the concave area of ​​its adjacent component at a specific rotation angle, the matching degree is determined by a comprehensive weighted sum of three factors: area overlap, contour proximity, and angle similarity; S44, based on the matching degree, initially select a rotation angle for each component so that it forms a preliminary tessellation relationship with the surrounding components in terms of shape. Step S5: Based on the final size and position information of all components determined in steps S3 and S4, generate a visual H5 page layout within the layout container.

2. The method for refining the layout of page components in a text-based H5 scenario according to claim 1, characterized in that: In step S1, semantic parsing is performed on the page generation requirements input by the user, specifically including: using a pre-trained natural language processing model to parse the requirement text and identify the component types, quantities and attribute constraints described therein; Based on the recognition results and combined with a preset component library, a structured component description object is generated. The component description object includes at least the component type identifier, initial width and height dimensions, content padding and layout priority tags, polygon vertex coordinates, and rotatable angle range.

3. The method for refining the layout of page components in a text-based H5 scenario according to claim 1, characterized in that: In step S2, the multidimensional priority weight W of the component is calculated using the following formula: W = α × W_c + β × W_b + γ × W_h, where W_c is the content weight, determined based on the component's text information volume, media resource size, and content uniqueness; W_b is the business weight, determined based on the component's criticality in the business process and the real-time data update requirements; W_h is the behavior weight, calculated based on the frequency and duration of historical user interactions with this component or similar components, using a time decay function; α, β, and γ are configurable weighting coefficients, and α + β + γ = 1.

4. A method for refining the layout of page components in a text-based H5 scenario according to claim 1 or 3, characterized in that: In step S3, the space compression and redistribution loop specifically includes: Step S31: Calculate the difference between the initial total required area of ​​the component set and the available area of ​​the layout container; Step S32: Calculate the competitiveness value K of each component based on the multidimensional priority weight W of each component in the current iteration, and sort all components in descending order of K value; Step S33: Select at least one component with the lowest K value, trigger the space compression protocol, compress the space it occupies from the current value to the preset minimum acceptable size or compress it by a certain proportion, and record the amount of space released ΔS. Step S34: Distribute the released space ΔS according to the K value ratio of the remaining components except the compressed component, increasing their occupied space, but not exceeding their respective maximum size limits; Step S35: Repeat steps S31 to S34 until the total required area does not exceed the available area of ​​the container or the preset maximum number of iterations is reached.

5. The method for refining the layout of page components in a text-based H5 scenario according to claim 4, characterized in that: The space compression protocol described in step S33 adopts a layered progressive compression strategy and performs the following operations in sequence: First, compress the non-content area of ​​the component, including the inner and outer margins; second, compress the content display area of ​​the component proportionally; if the component contains text, intelligent text adaptation is triggered, including reducing the font size, adjusting the line height, or abbreviating; if the component contains images or media, proportional scaling is triggered.

6. The method for refining the layout of page components in a text-based H5 scenario according to claim 1, characterized in that: In step S4, the formula for dynamically calculating the visual gap between components is: Gap = BGap + |W_i - W_j| × EC, where BGap is the preset base gap value, W_i and W_j are the weights of two adjacent components, and EC is the elasticity coefficient; the larger the weight difference, the larger the gap is generated, so as to visually enhance the priority difference of components.

7. The method for refining the layout of page components in a text-based H5 scenario according to claim 1, characterized in that: Step S4 further includes the following steps: S45, based on the initially selected angle and position, start a multi-round iterative optimization loop. In each round of iteration, try to fine-tune the rotation angle and position coordinates of each component in turn, evaluate and adopt adjustment schemes that can reduce the gap area of ​​the overall layout or improve the matching degree between components; S46, during the optimization process, forcibly constrain the rotation adjustment of the components to not exceed their preset rotation angle range, and ensure that there is no content overlap between components; S47, when the iteration reaches the preset number of times or the space utilization rate is lower than the threshold, terminate the optimization, output the final rotation angle and position coordinates of each component, and record the proximity relationship and gap value between components based on the actual shape, as the direct input for performing step S5 to dynamically calculate the visual interval.

8. The method for refining the layout of page components in a text-based H5 scenario according to claim 1, characterized in that: It also includes layout performance optimization steps: for pages with more than a threshold number of components, window virtualization technology is used to perform the full calculation and rendering of steps S2 to S4 only for components in the currently visible area and adjacent buffer areas; for components in non-visible areas, only their metadata and the calculated layout results are retained, and when the user scrolls the page, the components that are about to enter the window are dynamically calculated and rendered.

9. A method for refining the layout of page components in a text-based H5 scenario according to claim 3, characterized in that: It also includes feedback learning and optimization steps: the system records the layout scheme finally confirmed by the user, as well as the data on the compressed components and their degree of compression during the layout process; using the recorded dataset, it periodically fine-tunes the model parameters used to calculate the content multidimensional priority weight W_c, business multidimensional priority weight W_b, and behavior multidimensional priority weight W_h, or optimizes the weighting coefficients α, β, γ, so that the weight calculation is more in line with the user's actual layout preferences.

Images