Free grid layout conversion system and method based on WEB end and storage medium

Abstract

The invention discloses a free grid layout conversion system and method based on a WEB end and a storage medium, and relates to the technical field of grid layout optimizing.The free grid layout conversion system comprises a user interface module, a layout analysis module, a grid self-adaption module, a response type design module, a grid optimization module and a data storage module, the modules are in electric signal connection; and the user interface module is used for providing an interactive interface and supporting real-time preview, so that a user can check the layout adjustment effect in real time. According to the method, the grid size and layout are dynamically adjusted, so that the flexibility and adaptability of the webpage layout are improved, the grid layout adaptive to different equipment and screen sizes can be automatically generated according to the input parameters and rules of the user, the webpage content can be ensured to keep good readability and layout effect in various environments, and the user experience is improved. The user experience is further improved, and the workload of customizing layouts for different devices is reduced.

Description

Technical Field

[0001] The present invention relates to the technical field of grid layout optimization, and in particular to a free grid layout conversion system, method and storage medium based on a WEB terminal. Background Art

[0002] With the continuous development of Web technology and the increasing diversification of user needs, web design has gradually changed from simple static page layouts to complex, dynamic and interactive interfaces. In addition, in the modern Internet era, the popularity of mobile devices has brought about tremendous changes in the way web pages are browsed. Users access web pages through mobile devices such as mobile phones and tablets of different sizes, which puts higher requirements on the adaptive layout of web pages.

[0003] For example, Chinese patent publication number: CN117473195A is a method for converting a free grid layout on a WEB side. Two straight line arrays are established: a horizontal straight line array hArray for accommodating horizontal straight lines; and a vertical straight line array vArray for accommodating vertical straight lines. The cells of the free grid layout are traversed to convert the cell information into straight line information. The straight line information is processed and the processed line segment information is added to the straight line array. The straight line array is deduplicated. Based on the deduplicated straight line array, a free grid layout that is staggered horizontally and vertically is drawn, thereby realizing the conversion of the free grid layout.

[0004] In the prior art, the conversion of a table-like free grid layout is achieved by establishing a straight line array, converting cell information into straight line information, processing the straight line information and adding it to the straight line array, deduplicating the straight line array, and drawing a free grid layout. However, in a grid environment, grid computing is suitable for application scenarios that require parallel processing of multiple tasks. For a single application, it is difficult to divide it into components that run in parallel. Grid computing cannot provide significant performance improvements, and it is difficult to adaptively adjust the grid layout to match multiple tasks processed in parallel. Therefore, a free grid layout conversion system, method and storage medium based on the WEB end are urgently needed to solve the problems existing in the prior art. Summary of the invention

[0005] The present invention aims to provide a free grid layout conversion system, method and storage medium based on a WEB terminal to solve the problems raised in the above background technology.

[0006] In order to solve the above technical problems, the technical solution adopted by the present invention is: In the first aspect, a free grid layout conversion system based on a WEB terminal includes a user interface module, a layout parsing and analysis module, a grid adaptation module, a responsive design module, a grid optimization module, and a data storage module, wherein electrical signals are connected between the modules; The user interface module is used to provide a user-friendly interactive interface, allowing users to freely define and adjust the grid layout by dragging, scaling, and adjusting parameters. The interface is intuitive and easy to use, and supports real-time preview, allowing users to instantly view the effect of layout adjustment; The layout parsing and analysis module is used to parse the layout parameters and rules input by the user through the interactive interface, generate corresponding layout instructions, and can handle complex layout requirements; The grid adaptation module is used to dynamically generate the required grid layout according to the instructions generated by the layout parsing and analysis module; The responsive design module, based on CSS media query technology, optimizes styles for different devices and screen sizes, builds responsive layouts, improves the adaptability of layouts, and ensures that web pages can maintain good layouts and readability at different resolutions; The grid optimization module is used to calculate the grid node estimation error and metric tensor field of the grid, automatically adjust the grid size layout to match the needs of different tasks, improve the calculation accuracy, save computing resources, and improve the calculation efficiency; The data storage module uses a database storage method to store layout parameters and rules set by users and generated grid layout data, ensuring data persistence and security, and supporting data backup and recovery functions.

[0007] A further improvement of the technical solution of the present invention is that: in the layout parsing and analysis module, the process of generating the layout instruction includes: Collect layout parameters and rules entered by users through the user interface module, including the size, shape, position, color, spacing attributes of the grid, as well as the overall structure, alignment, and arrangement order rules of the layout, and verify whether the parameters entered by the user meet the system requirements, check whether the values ​​are within a reasonable range, and whether there are any necessary parameters missing; Use the parser to parse the received layout parameters and rules, identify the specific meaning of each parameter and the relationship between them, and perform layout calculations based on the collected parameters and rules to clarify the grid division method, accurate cell positioning, and information on the size allocation of each cell; After the parameters and rules are parsed, the layout calculation results are converted into corresponding layout instructions, where the layout instructions include operations of creating grid units, setting grid properties, adjusting grid positions, and applying layout rules. For setting grid properties, instructions for setting grid size, color, and border properties are generated. For applying layout rules, instructions for applying alignment and arrangement order layout rules are generated, and the converted layout instructions are output to the grid adaptation module for processing.

[0008] A further improvement of the technical solution of the present invention is that: the layout calculation process of the grid division method is as follows: for a total width of , the total height is The grid is divided into Line and Columns, the formula for calculating the height of each row and the width of each column is: ; ; in, It is The height of the row, It is the width of the column, and is a user-defined parameter, which is an arbitrary real number and represents the relative size of each row and column. Is a user-defined Relative size parameters for rows, Is a user-defined Relative size parameters for rows, is the sum of the exponential functions of all rows, so that The sum of , is the sum of the exponential functions of all columns, so that The sum of , and The value range is and ; The cell positioning is determined by calculating the cumulative height and width of each row and column. Row and The cell of the column, its upper left corner coordinates The calculation formula is: ; ; in, It is Row and The upper left corner of the column's cell coordinate, It is Row and The upper left corner of the column's cell coordinate, It is the width of the column, It is The height of the row, is the index of the column, is the index of the row; During the process of allocating the size of each cell, the cell width is equal to , the cell height is equal to .

[0009] A further improvement of the technical solution of the present invention is that in the responsive design module, the construction process of the responsive layout includes: Identify the type of access device by analyzing the user agent string, detect and collect information about the user's device screen size, resolution, operating system, and browser type, obtain information through JavaScript or backend server logs, and analyze the devices and screen sizes commonly used by the target user group based on the collected device information; Develop responsive design strategies based on target devices and screen sizes, including layout, font size, and image processing; According to the responsive design strategy, optimize the HTML structure to ensure that the page elements can be displayed correctly on different screen sizes, and use the meta tag to set the viewport attribute so that the browser can correctly scale and display the web page content; Analyze the different layout rules applied under different screen sizes, determine the key breakpoints (i.e. the switching points under different screen sizes), and use CSS media query technology to define the style rules under different breakpoints. Define the default style and layout of web page elements by writing basic CSS styles; According to different screen sizes, set CSS media queries, write corresponding style rules, and use relative units (percentage, vw / vh, rem, etc.) to define the width and height attributes of page elements so that the layout can be scaled with changes in screen size; Optimize the images on the web page, use the CSS srcset and sizes attributes to provide images of different sizes for devices with different resolutions, and select images of different resolutions to load based on the screen size.

[0010] A further improvement of the technical solution of the present invention is that: in the grid adaptation module, the generation process of the required grid layout includes: Receive layout instructions from the layout parsing and analysis module, including grid creation, property setting, position adjustment, and layout rule application, and parse the received layout instructions, analyze the specific requirements and parameters of each instruction, identify the instruction type (create cells, set attributes), instruction parameters (grid size, color), and dependencies between instructions; Create a basic grid layout based on the initial settings in the layout instructions, including generating rows and columns, determining the number of rows and columns in the grid, and setting the default grid cell size and properties; According to the layout instructions, grid cells are created one by one, and properties, including size, color, and border, are set for the created grid cells. The position and size of the grid cells are adjusted according to the layout instructions so that the cells are arranged according to the specified layout. According to the responsive design requirements in the layout instructions, combined with the responsive layout built by the responsive design module, dynamically adjust the grid layout to adapt to different devices and screen sizes, including changing the size of grid units, rearranging grid units, or applying different style rules; After the responsive adjustment, the grid adaptation module generates a grid layout and calculates the layout verification index to verify whether the generated grid layout conforms to the layout parameters and rules entered by the user through the user interface module, and checks whether there are layout errors or style problems. If the verification passes, the generated grid layout is output to the grid optimization module for optimization. If the verification fails, an error message is returned and adjustments are made.

[0011] A further improvement of the technical solution of the present invention is that the calculation formula of the layout verification index is: ; ; in, is the layout verification index, is the first in the actual layout parameter set parameters, including the actual grid size, color value, etc. is the first in the set of expected layout parameters parameters, namely the layout parameters and rules entered by the user through the user interface module, is the tolerance threshold, which is a preset benchmark value used to determine the acceptable range of parameter deviation. is the standard deviation, which is the square root of the average of the sum of squares of the deviations between the expected and actual values ​​of all parameters. It is used to measure the degree of dispersion of the parameter distribution. is the total number of parameters, i.e. and the number of parameters in the collection, The value range is between 0 and 1. The closer the value is to 1, the closer the actual layout is to the expected layout.

[0012] A further improvement of the technical solution of the present invention is that: in the grid optimization module, the grid size layout adjustment process includes: receiving as input the grid layout output from the grid adaptation module, including the positions of the grid nodes, and the size and shape information of the grid cells; For each node in the mesh, the numerical solution is compared with the mesh representation, the mesh node estimation error is calculated, and the distribution of the error throughout the mesh is analyzed to quantify the accuracy of the mesh representation and identify areas of high and low error; Calculate the metric tensor field on the grid, evaluate the degree of stretching and compression of the grid in different directions, identify the distorted or irregular areas in the grid, and further analyze the gradient and curvature of the metric tensor field to clarify the rate of change and curvature of the grid in different directions; According to the results of error estimation and metric tensor field, a grid size adjustment strategy is formulated to automatically adjust the grid size to match the needs of different tasks, increase the grid density in high error or high distortion areas to improve calculation accuracy, and reduce the grid density in low error or low distortion areas to save computing resources; The grid size is gradually adjusted through an iterative process. The error and metric tensor field are recalculated after each iteration. The grid is adjusted according to the new information, and the calculation accuracy of the optimized grid layout is verified. If the accuracy does not meet the expected target, the grid size and layout are continued to be iteratively adjusted. After the accuracy meets the standard, the final optimized grid is output for subsequent storage and calculation simulation.

[0013] A further improvement of the technical solution of the present invention is that the calculation formula of the grid node estimation error is: ; in, is the grid node estimation error, Is a node The numerical solution at , represents the exact solution, Is a node The grid at represents the solution, that is, the approximate solution obtained by the grid model. Is a node The reference value at , used to normalize the error, is a value determined based on prior knowledge so that the error estimate is not affected by the size of the problem. is a positive constant used to adjust the impact of the logarithmic term. Is a node The local grid size at is the size of the grid unit, reflecting the local characteristics of the grid. is the total number of grid nodes, The value range of is non-negative real numbers, that is, , The smaller the value of, the higher the accuracy of the grid representation; The calculation formula of the metric tensor field on the grid is: ; in, are the components of the metric tensor, representing two parameters on the surface and The dot product of the tangent vector in the direction, and They are two parameters on the surface and The tangent vector of the direction, and The parameters are and No. and components, which represent the partial derivatives of the tangent vector in the parameter space.

[0014] In the second aspect, a free grid layout conversion method based on a WEB end is used to implement a free grid layout conversion system based on a WEB end, comprising the following steps: Step 1: receiving grid layout parameters input by the user through the user interface module, including the position of grid nodes, the size and shape requirements of grid units, and generating an initial grid layout according to the user input as a starting point for subsequent optimization; Step 2: For each node in the grid, compare its numerical solution with the grid representation, calculate the grid node estimation error, analyze the distribution of the error in the entire grid, and calculate the metric tensor field on the grid to evaluate the degree of stretching and compression of the grid in different directions and identify the distorted or irregular areas in the grid; Step 3: According to the results of error distribution and metric tensor field, formulate the adjustment strategy of grid size and layout, increase the grid density in high error or high distortion area to improve the calculation accuracy, reduce the grid density in low error or low distortion area to save computing resources, and further optimize the grid layout according to user needs and task requirements; Step 4: Gradually adjust the grid size and layout through an iterative process. Recalculate the error and metric tensor field after each iteration to verify the calculation accuracy of the optimized grid layout. If the accuracy does not meet the expected target, continue to adjust the grid according to the new information. If the accuracy meets the target, proceed to the next step. Step 5: Take the optimized grid layout as the final output, convert the final grid layout into a format that the front-end can understand, and render it on the WEB page for users to view and use.

[0015] In a third aspect, a non-temporary computer-readable storage medium stores a computer program, which, when executed by a processor, implements a free grid layout conversion system based on a WEB end.

[0016] Due to the adoption of the above technical solution, the present invention has the following technical advances compared with the prior art: 1. The present invention provides a free grid layout conversion system, method and storage medium based on the WEB end, which improves the flexibility and adaptability of the web page layout by dynamically adjusting the grid size and layout. According to the user's input parameters and rules, the grid layout that adapts to different devices and screen sizes can be automatically generated, ensuring that the web page content can maintain good readability and layout effects in various environments, further improving the user experience, and reducing the workload of customizing layouts for different devices; 2. The present invention provides a free grid layout conversion system, method and storage medium based on the WEB end. By calculating the estimated error and metric tensor field of the grid nodes, the grid size is automatically adjusted to match the needs of different tasks, the grid density is increased in the high error or high distortion area, and the grid density is reduced in the low error or low distortion area, so that the computing task can be executed more efficiently. In addition, the grid size is gradually adjusted through an iterative process, and the error and metric tensor field are recalculated, which can ensure that the optimized grid layout achieves the expected computing accuracy, which not only improves the accuracy of the simulation results, but also improves the computing efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present invention. For ordinary technicians in this field, other drawings can also be obtained based on these drawings.

[0018] Figure 1 It is a module diagram of the present invention; Figure 2 A flow chart for generating a grid layout according to the present invention; Figure 3 The figure is a flow chart of the method of the present invention. DETAILED DESCRIPTION

[0019] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0020] Embodiment 1, as Figure 1 , Figure 2As shown, the present invention provides a free grid layout conversion system based on a WEB end, the free grid layout conversion system includes a user interface module, a layout parsing and analysis module, a grid adaptation module, a responsive design module, a grid optimization module and a data storage module, wherein the modules are connected by electrical signals; The user interface module is used to provide a user-friendly interactive interface, allowing users to freely define and adjust the grid layout by dragging, scaling, and adjusting parameters. The interface is intuitive and easy to use, and supports real-time preview, allowing users to instantly view the effects of layout adjustments; The layout parsing and analysis module is used to parse the layout parameters and rules input by the user through the interactive interface, generate corresponding layout instructions, and can handle complex layout requirements. It collects the layout parameters and rules input by the user through the user interface module, including the size, shape, position, color, spacing attributes of the grid, and the overall structure, alignment, and arrangement order rules of the layout, and verifies the parameters input by the user to verify whether the parameters input by the user meet the system requirements, check whether the values ​​are within a reasonable range, and whether there are any missing necessary parameters. The received layout parameters and rules are parsed using a parser to identify the specific meaning of each parameter and the relationship between them. According to the collected parameters and rules, layout calculations are performed to clarify the grid division method, accurate cell positioning, and information on the size allocation of each cell. After the parameters and rules are parsed, the layout calculation results are converted into corresponding layout instructions, wherein the layout instructions include operations of creating grid cells, setting grid attributes, adjusting grid positions, and applying layout rules. For setting grid attributes, instructions for setting grid size, color, and border attributes are generated. For applying layout rules, instructions for applying alignment and arrangement order layout rules are generated, and the converted layout instructions are output to the grid adaptation module for processing; Furthermore, the layout calculation process of the grid division method is as follows: for a total width of , the total height is The grid is divided into Line and Columns, the formula for calculating the height of each row and the width of each column is: ; ; in, It is The height of the row, It is the width of the column, and is a user-defined parameter, which is an arbitrary real number and represents the relative size of each row and column. Is a user-defined Relative size parameters for rows, Is a user-defined Relative size parameters for rows, is the sum of the exponential functions of all rows, so that The sum of , is the sum of the exponential functions of all columns, so that The sum of , and The value range is and ,along with The increase, Row height will increase with The increase, Column Width will increase; Cell positioning is determined by calculating the cumulative height and width of each row and column. Row and The cell of the column, its upper left corner coordinates The calculation formula is: ; ; in, It is Row and The upper left corner of the column's cell coordinate, It is Row and The upper left corner of the column's cell coordinate, It is the width of the column, It is The height of the row, is the index of the column, is the index of the row; During each cell size allocation, the cell width is equal to , the cell height is equal to ; The grid adaptation module is used to dynamically generate the required grid layout according to the instructions generated by the layout parsing and analysis module, receive layout instructions from the layout parsing and analysis module, including grid creation, property setting, position adjustment and layout rule application, and parse the received layout instructions, analyze the specific requirements and parameters of each instruction, identify the instruction type (create unit, set attributes), instruction parameters (grid size, color) and the dependencies between instructions, create a basic grid layout according to the initial settings in the layout instructions, including the generation of rows and columns, determine the number of rows and columns of the grid, and set the default grid unit size and attributes, create grid units one by one according to the layout instructions, and set attributes for the created grid units, including size, color, border, Adjust the position and size of the grid unit according to the layout instructions so that the cells are arranged according to the specified layout. According to the responsive design requirements in the layout instructions and in combination with the responsive layout built by the responsive design module, dynamically adjust the grid layout to adapt to different devices and screen sizes, including changing the size of the grid unit, rearranging the grid unit, or applying different style rules. After the responsive adjustment, the grid adaptation module generates the grid layout and calculates the layout verification index to verify whether the generated grid layout complies with the layout parameters and rules input by the user through the user interface module, and check whether there are layout errors or style problems. If the verification passes, the generated grid layout is output to the grid optimization module for optimization. If the verification fails, an error message is returned and adjustments are made. Furthermore, the calculation formula of the layout verification index is: ; ; in, is the layout verification index, is the first in the actual layout parameter set parameters, including the actual grid size, color value, etc. is the first in the set of expected layout parameters parameters, namely the layout parameters and rules entered by the user through the user interface module, is the tolerance threshold, which is a preset benchmark value used to determine the acceptable range of parameter deviation. is the standard deviation, which is the square root of the average of the sum of squares of the deviations between the expected and actual values ​​of all parameters. It is used to measure the degree of dispersion of the parameter distribution. is the total number of parameters, i.e. and the number of parameters in the collection, The value range is between 0 and 1. The closer the value is to 1, the closer the actual layout is to the expected layout, that is, the higher the possibility of passing the layout verification. With expected parameters When they are completely equal, The value of is close to 1. When the actual parameter deviates from the expected parameter, The closer the value is to 0, the more likely it is that the layout verification has failed; The responsive design module is based on CSS media query technology. It optimizes styles for different devices and screen sizes, builds responsive layouts, improves the adaptability of layouts, and ensures that web pages maintain good layouts and readability at different resolutions. It identifies the type of access device by analyzing the user agent string, detects and collects information about the screen size, resolution, operating system, and browser type of the user's device, obtains it through JavaScript or back-end server logs, and analyzes the commonly used devices and screen sizes of the target user group based on the collected device information. According to the target device and screen size, a responsive design strategy is formulated, including layout methods, font sizes, and image processing plans. According to the responsive design strategy, the HTML structure is optimized to ensure that page elements can be displayed correctly at different screen sizes. The viewport attribute is set using the meta tag so that the browser can correctly scale and display web page content. Analysis of different screen sizes Different layout rules applied under different screen sizes, determine key breakpoints (i.e. switching points under different screen sizes), and use CSS media query technology to define style rules under different breakpoints. By writing basic CSS styles, define the default style and layout of web page elements. According to different screen sizes, set CSS media queries, write corresponding style rules, and use relative units (percentage, vw / vh, rem, etc.) to define the width and height attributes of page elements, so that the layout can be scaled with the change of screen size. Optimize the pictures in the web page, use CSS srcset and sizes attributes to provide pictures of different sizes for devices with different resolutions, and select pictures of different resolutions to load according to the screen size to improve the loading speed of the web page and user experience. Among them, the srcset attribute allows the specification of a set of pictures and their corresponding sizes and resolutions, and the sizes attribute defines the display size of the picture under different screen sizes; The grid optimization module is used to calculate the grid node estimation error and metric tensor field of the grid, automatically adjust the grid size layout to match the needs of different tasks, improve the calculation accuracy, save computing resources, and improve the calculation efficiency. It receives the output grid layout from the grid adaptation module as input, including the location of the grid nodes, the size and shape information of the grid cells. For each node in the grid, the numerical solution is compared with the grid representation, the grid node estimation error is calculated, and the distribution of the error in the entire grid is analyzed to quantify the accuracy of the grid representation, determine the areas with high and low errors, calculate the metric tensor field on the grid, evaluate the degree of stretching and compression of the grid in different directions, identify the distorted or irregular areas in the grid, and further analyze Metrics measure the gradient and curvature of the tensor field, clarify the rate of change and degree of curvature of the grid in different directions, formulate a grid size adjustment strategy based on the results of error estimation and metric tensor field, automatically adjust the grid size to match the needs of different tasks, increase the grid density in high error or high distortion areas to improve calculation accuracy, and reduce the grid density in low error or low distortion areas to save computing resources. The grid size is gradually adjusted through an iterative process. After each iteration, the error and metric tensor field are recalculated, the grid is adjusted according to the new information, and the calculation accuracy of the optimized grid layout is verified. If the accuracy does not meet the expected goal, the grid size and layout are adjusted iteratively. After the accuracy meets the standard, the final optimized grid is output for subsequent storage and computational simulation; Furthermore, the calculation formula of the grid node estimation error is: ; in, is the grid node estimation error, Is a node The numerical solution at , represents the exact solution, Is a node The grid at represents the solution, that is, the approximate solution obtained by the grid model. Is a node The reference value at , used to normalize the error, is a value determined based on prior knowledge so that the error estimate is not affected by the size of the problem. is a positive constant used to adjust the impact of the logarithmic term. Is a node The local grid size at is the size of the grid unit, reflecting the local characteristics of the grid. is the total number of grid nodes, The value range of is non-negative real numbers, that is, , The smaller the value of is, the higher the accuracy of the grid representation is. and The difference between them is very small, the error will be small, indicating that the grid representation is accurate. If the difference is large, then will be very large, indicating low accuracy of the grid representation, and the logarithmic term Used to give higher weights to areas with smaller mesh sizes, as these areas usually have a greater impact on the overall error; The calculation formula of the metric tensor field on the grid is: ; in, are the components of the metric tensor, representing two parameters on the surface and The dot product of the tangent vector of the two directions describes the angle and length ratio relationship between the two directions on the surface, and is used to describe geometric properties such as length, angle, and curvature on the surface. and They are two parameters on the surface and The tangent vector of the direction, and The parameters are and No. and Components, used to represent the partial derivatives of the tangent vector in the parameter space, metric tensor The value range of is real number, and since is positive definite, and its determinant , ensuring that the local geometric properties of the surface are well defined, the metric tensor The value reflects the degree of stretching and compression of the surface in different directions. When the value of is large, it means that the surface is stretched in the corresponding direction. When the value of is small, it means that the surface is compressed in the corresponding direction, and the symmetry It ensures that the metric tensor is symmetrical, that is, the angle and length ratio relationship does not depend on the order of the measurement direction; the data storage module uses database storage to store user-set layout parameters, rules and generated grid layout data to ensure data persistence and security, and support data backup and recovery functions.

[0021] Embodiment 2, as Figure 3 As shown, based on Example 1, the present invention provides a free grid layout conversion method based on the WEB end, which is used to implement a free grid layout conversion system based on the WEB end, including the following steps: Step 1: receiving grid layout parameters input by the user through the user interface module, including the position of grid nodes, the size and shape requirements of grid units, and generating an initial grid layout according to the user input as a starting point for subsequent optimization; Step 2: For each node in the grid, compare its numerical solution with the grid representation, calculate the grid node estimation error, analyze the distribution of the error in the entire grid, and calculate the metric tensor field on the grid to evaluate the degree of stretching and compression of the grid in different directions and identify the distorted or irregular areas in the grid; Step 3: According to the results of error distribution and metric tensor field, formulate the adjustment strategy of grid size and layout, increase the grid density in high error or high distortion area to improve the calculation accuracy, reduce the grid density in low error or low distortion area to save computing resources, and further optimize the grid layout according to user needs and task requirements; Step 4: Gradually adjust the grid size and layout through an iterative process. Recalculate the error and metric tensor field after each iteration to verify the calculation accuracy of the optimized grid layout. If the accuracy does not meet the expected target, continue to adjust the grid according to the new information. If the accuracy meets the target, proceed to the next step. Step 5: Take the optimized grid layout as the final output, convert the final grid layout into a format that the front-end can understand, and render it on the WEB page for users to view and use.

[0022] Embodiment 3, as Figures 1 to 3 As shown, based on embodiments 1 and 2, the present invention further provides a non-temporary computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the system mentioned above is implemented.

[0023] Generally speaking, the computer instructions for implementing the system of the present invention can be carried by any combination of one or more computer-readable storage media. Non-transitory computer-readable storage media can include any computer-readable media except for the signal itself that is temporarily propagating.

[0024] Computer readable storage media can be, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or components, or any combination thereof. More specific examples (non-exhaustive list) of computer readable storage media include: an electrical connection with one or more conductors, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this document, a computer readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device, or device.

[0025] Computer program codes for performing the operations of the present invention may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages, in particular, Python suitable for neural network computing and platform frameworks based on TensorFlow, PyTorch, etc. may be used. The program code may be executed entirely on the user's computer, partially on the user's computer, as an independent software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer, or to an external computer (e.g., connected via the Internet using an Internet service provider) through any type of network, including a local area network (LAN) or a wide area network (WAN).

[0026] The above-mentioned non-temporary computer-readable storage medium can refer to the implementation content and beneficial effects of the specific description of the system mentioned above, which will not be repeated here.

[0027] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

Claims

1. A free grid layout conversion system based on the WEB side, characterized by: The free grid layout conversion system includes a user interface module, a layout parsing and analysis module, a grid adaptation module, a responsive design module, a grid optimization module and a data storage module, wherein the modules are connected by electrical signals; The user interface module is used to provide an interactive interface and support real-time preview, so that users can instantly view the effect of layout adjustment; The layout parsing and analysis module is used to parse the layout parameters and rules input by the user through the interactive interface and generate corresponding layout instructions; The grid adaptation module is used to dynamically generate the required grid layout according to the instructions generated by the layout parsing and analysis module; The responsive design module optimizes styles for different devices and screen sizes based on CSS media query technology to build a responsive layout; The grid optimization module is used to calculate the grid node estimation error and the metric tensor field of the grid, and automatically adjust the grid size layout to match the requirements of different tasks; The data storage module uses a database storage method to store layout parameters and rules set by users and generated grid layout data.

2. The free grid layout conversion system based on the WEB end according to claim 1 is characterized in that: In the layout parsing and analysis module, the generation process of the layout instruction includes: Collect layout parameters and rules input by users through the user interface module, including the size, shape, position, color, spacing attributes of the grid, as well as the overall structure, alignment, and arrangement order rules of the layout, and verify the parameters input by users; Use the parser to parse the received layout parameters and rules, identify the specific meaning of each parameter and the relationship between them, and perform layout calculations based on the collected parameters and rules to clarify the grid division method, cell positioning, and the size allocation of each cell; After the parameters and rules are parsed, the layout calculation results are converted into corresponding layout instructions, where the layout instructions include operations such as creating grid cells, setting grid properties, adjusting grid positions, and applying layout rules. The converted layout instructions are output to the grid adaptation module for processing.

3. The free grid layout conversion system based on the WEB end according to claim 2 is characterized in that: The layout calculation process of the grid division method is as follows: , the total height is The grid is divided into and Columns, the formula for calculating the height of each row and the width of each column is: ； ； in, It is The height of the row, It is the width of the column, Is a user-defined Relative size parameters for rows, Is a user-defined Relative size parameters for rows, and The value range is and ; The cell positioning is determined by calculating the cumulative height and width of each row and column. Row and The cell of the column, its upper left corner coordinates The calculation formula is: ； ； in, It is Row and The upper left corner of the column's cell coordinate, It is Row and The upper left corner of the column's cell coordinate, It is the width of the column, It is The height of the row, is the index of the column, is the index of the row; During the process of allocating the size of each cell, the cell width is equal to , the cell height is equal to .

4. The free grid layout conversion system based on the WEB end according to claim 3 is characterized in that: In the responsive design module, the construction process of the responsive layout includes: Identify the type of access device by analyzing the user agent string, detect and collect information about the user's device screen size, resolution, operating system, and browser type, and analyze the devices and screen sizes commonly used by the target user group based on the collected device information; Develop responsive design strategies based on target devices and screen sizes, including layout, font size, and image processing; According to the responsive design strategy, optimize the HTML structure and use the meta tag to set the viewport attribute so that the browser can correctly scale and display the web page content; Analyze different layout rules applied under different screen sizes, determine key breakpoints, and use CSS media query technology to define style rules under different breakpoints. Define the default style and layout of web page elements by writing basic CSS styles; According to different screen sizes, set CSS media queries, write corresponding style rules, and use relative units to define the width and height attributes of page elements so that the layout can be scaled with changes in screen size; Optimize the images on the web page, use the CSS srcset and sizes attributes to provide images of different sizes for devices with different resolutions, and select images of different resolutions to load based on the screen size.

5. The free grid layout conversion system based on the WEB end according to claim 4 is characterized in that: In the grid adaptation module, the generation process of the required grid layout includes: Receive layout instructions from the layout parsing and analysis module, including grid creation, property setting, position adjustment, and layout rule application, and parse the received layout instructions, analyze the specific requirements and parameters of each instruction, and identify the instruction type, instruction parameters, and dependencies between instructions; Create a basic grid layout based on the initial settings in the layout instructions, including generating rows and columns, determining the number of rows and columns in the grid, and setting the default grid cell size and properties; According to the layout instructions, grid cells are created one by one, and properties, including size, color, and border, are set for the created grid cells. The position and size of the grid cells are adjusted according to the layout instructions so that the cells are arranged according to the specified layout. According to the responsive design requirements in the layout instructions, the responsive layout built in combination with the responsive design module dynamically adjusts the grid layout to adapt to different devices and screen sizes; After the responsive adjustment, the grid adaptation module generates a grid layout and calculates the layout verification index to verify whether the generated grid layout conforms to the layout parameters and rules input by the user through the user interface module. If the verification passes, the generated grid layout is output to the grid optimization module for optimization. If the verification fails, an error message is returned and adjustments are made.

6. The free grid layout conversion system based on the WEB end according to claim 5 is characterized in that: The calculation formula of the layout verification index is: ； ； in, is the layout verification index, is the first in the actual layout parameter set parameters, is the first in the set of expected layout parameters parameters, is the tolerance threshold, is the standard deviation, which is the square root of the average of the sum of squares of the deviations between the expected and actual values ​​of all parameters. is the total number of parameters, The value range is between 0 and 1. The closer the value is to 1, the closer the actual layout is to the expected layout.

7. The free grid layout conversion system based on the WEB end according to claim 6 is characterized in that: In the grid optimization module, the grid size layout adjustment process includes: receiving as input the grid layout output from the grid adaptation module, including the positions of the grid nodes, and the size and shape information of the grid cells; For each node in the grid, the numerical solution is compared with the grid representation, the grid node estimation error is calculated, and the distribution of the error in the entire grid is analyzed to determine the areas of high and low error; Calculate the metric tensor field on the grid, evaluate the degree of stretching and compression of the grid in different directions, identify the distorted or irregular areas in the grid, and further analyze the gradient and curvature of the metric tensor field to clarify the rate of change and curvature of the grid in different directions; According to the results of error estimation and metric tensor field, a grid size adjustment strategy is formulated to automatically adjust the grid size to match the needs of different tasks, increase the grid density in high error or high distortion areas, and reduce the grid density in low error or low distortion areas; The grid size is gradually adjusted through an iterative process. The error and metric tensor field are recalculated after each iteration. The grid is adjusted according to the new information, and the calculation accuracy of the optimized grid layout is verified. If the accuracy does not meet the expected target, the grid size and layout are adjusted iteratively. After the accuracy meets the target, the final optimized grid is output.

8. The free grid layout conversion system based on the WEB end according to claim 7 is characterized in that: The calculation formula of the grid node estimation error is: ； in, is the grid node estimation error, Is a node The numerical solution at Is a node The grid at represents the solution, Is a node The baseline value at is a positive constant used to adjust the impact of the logarithmic term. Is a node The local mesh size at is the total number of grid nodes, The value range of is non-negative real numbers, that is, , The smaller the value of, the higher the accuracy of the grid representation; The calculation formula of the metric tensor field on the grid is: ; in, are the components of the metric tensor, representing two parameters on the surface and The dot product of the tangent vector in the direction, and They are two parameters on the surface and The tangent vector of the direction, and The parameters are and No. and components, which represent the partial derivatives of the tangent vector in the parameter space.

9. A free grid layout conversion method based on a WEB end, used to implement a free grid layout conversion system based on a WEB end as claimed in any one of claims 1 to 8, characterized in that: The following steps are involved: Step 1: receiving grid layout parameters input by a user through a user interface module, and generating an initial grid layout according to the user input; Step 2: For each node in the grid, compare its numerical solution with the grid representation, calculate the grid node estimation error, analyze the distribution of the error in the entire grid, and calculate the metric tensor field on the grid to evaluate the degree of stretching and compression of the grid in different directions; Step 3: According to the results of error distribution and metric tensor field, formulate the adjustment strategy of grid size and layout, and further optimize and adjust the grid layout according to user needs and task requirements; Step 4: gradually adjust the grid size and layout through an iterative process, recalculate the error and metric tensor field after each iteration, and verify the calculation accuracy of the optimized grid layout; Step 5: Take the optimized grid layout as the final output, convert the final grid layout into a format that the front-end can understand, and render it on the WEB page for users to view and use.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the free grid layout conversion system based on the WEB side as described in any one of claims 1 to 8 is implemented.

Images