Intelligent adaptive layout engine and page component reconstruction method and device

Abstract

The invention relates to the technical field of medical science and technology and front-end development, and discloses an intelligent self-adaptive layout engine and page component reconstruction method, device, equipment and medium, and the method comprises the steps: analyzing the use conditions of user equipment and a screen through a client based on a machine learning algorithm, and dynamically generating an initial layout rule for adjusting a page component according to an analysis result, collecting user behaviors and screen size to dynamically adjust the layout and style of the page component, reconstructing the self-adaptive layout rule of the page component in real time on the basis of the initial layout rule so as to adapt to the equipment model and the screen size, and calculating and rendering the page component based on a layout calculation and rendering algorithm. According to the method, the self-adaptive opportunity and the self-adaptive range of a self-adaptive layout rule are calculated, a unified layout engine is set according to the self-adaptive opportunity and the self-adaptive range, the unified layout engine automatically processes the compatibility problem of different browsers and intelligent devices, and the self-adaptive layout rule is set according to the actual support condition of the intelligent devices and the browsers. And dynamically adjusting a layout rule based on a unified layout engine.

Description

Technical Field

[0001] The present invention relates to the fields of medical technology and front-end development technology, and in particular to an intelligent adaptive layout engine and page component reconstruction method, device, equipment and medium. Background Art

[0002] In the prior art, intelligent adaptive layout engines and component reconstruction mainly use media queries to adjust layout and style through responsive design to adapt to different screen sizes and device types; or flow layout uses relative units (such as percentages) to implement page layout, allowing pages to be dynamically adjusted on different screens. However, the above technical content has deficiencies or defects. Media queries and flow layouts usually rely on static breakpoint configurations, which are difficult to dynamically adapt to new devices and screen size changes. Summary of the invention

[0003] The present invention provides an intelligent adaptive layout engine and page component reconstruction method, device, computer equipment and medium to solve the technical problems that the intelligent adaptive layout engine and component reconstruction have poor matching and are difficult to dynamically adapt to new devices and screen size changes.

[0004] In a first aspect, an intelligent adaptive layout engine and a page component reconstruction method are provided, including:

[0005] Analyze user device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results;

[0006] Collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to device models and screen sizes;

[0007] Based on the layout calculation and rendering algorithm, calculate the adaptive timing and adaptive range of the adaptive layout rules;

[0008] A unified layout engine is set according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices;

[0009] According to the actual support of smart devices and browsers, layout rules are dynamically adjusted based on a unified layout engine.

[0010] In a second aspect, an intelligent adaptive layout engine and a page component reconstruction device are provided, including:

[0011] The analysis module is used to analyze the user's device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results;

[0012] The reconstruction module is used to collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to the device model and screen size;

[0013] A calculation module, used for calculating the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm;

[0014] A unified layout engine module is used to set a unified layout engine according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices;

[0015] The unified layout adjustment module is used to dynamically adjust layout rules based on a unified layout engine according to the actual support of smart devices and browsers.

[0016] In a third aspect, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps of the above-mentioned intelligent adaptive layout engine and page component reconstruction method when executing the computer program.

[0017] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the above-mentioned intelligent adaptive layout engine and page component reconstruction method are implemented.

[0018] In the scheme implemented by the above-mentioned intelligent adaptive layout engine and page component reconstruction method, device, computer equipment and storage medium, the client can analyze the user device and screen usage based on the machine learning algorithm, and dynamically generate the initial layout rules for adjusting the page components based on the analysis results, collect the user's behavior and screen size to dynamically adjust the layout and style of the page components, and reconstruct the adaptive layout rules of the page components in real time based on the initial layout rules, so as to adapt to the device model and screen size, calculate the adaptive timing and adaptive range of the adaptive layout rules based on the layout calculation and rendering algorithm, set a unified layout engine according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility of different browsers and smart devices In order to solve the problem of responsiveness, the layout rules are dynamically adjusted based on a unified layout engine according to the actual support of smart devices and browsers, and the layout rules are fed back to the client. In the present invention, for smart devices or page components and other intelligent adaptive layout engines, the system can automatically adapt to new devices and screen sizes through intelligent algorithms and dynamic adjustments, without the need to manually configure breakpoints, optimize layout calculation and rendering processes, reduce performance overhead, improve page loading speed and response performance, ensure consistency of user experience on different devices and browsers through a unified layout engine and automatic compatibility processing, reduce static configuration and breakpoint management, simplify the maintenance and adjustment of responsive design, and the system can adjust component layout in real time to provide a more flexible user interface and a better user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative labor.

[0020] Figure 1 It is a schematic diagram of an application environment of an intelligent adaptive layout engine and a page component reconstruction method in one embodiment of the present invention;

[0021] Figure 2 It is a flow chart of an intelligent adaptive layout engine and a page component reconstruction method in one embodiment of the present invention;

[0022] Figure 3 yes Figure 1 A schematic flow chart of a specific implementation of step S40;

[0023] Figure 4 It is a structural schematic diagram of an intelligent adaptive layout engine and a page component reconstruction device in one embodiment of the present invention;

[0024] Figure 5is a schematic diagram of a structure of a computer device in one embodiment of the present invention;

[0025] Figure 6 It is another structural schematic diagram of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION

[0026] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions 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.

[0027] The intelligent adaptive layout engine and page component reconstruction method provided by the embodiments of the present invention can be applied in the following aspects: Figure 1 In the application environment, the client analyzes the user's device and screen usage based on a machine learning algorithm, and dynamically generates the initial layout rules for adjusting the page components based on the analysis results, collects user behavior and screen size to dynamically adjust the layout and style of the page components, and reconstructs the adaptive layout rules of the page components in real time based on the initial layout rules, so as to adapt to the device model and screen size, calculate the adaptive timing and adaptive range of the adaptive layout rules based on the layout calculation and rendering algorithm, and set a unified layout engine according to the adaptive timing and adaptive range, which automatically handles the compatibility issues of different browsers and smart devices by the unified layout engine, and adjusts the layout according to the actual support of the smart device and the browser. According to the support situation, the layout rules are dynamically adjusted based on a unified layout engine, and the layout rules are fed back to the client. In the present invention, for intelligent adaptive layout engines such as smart devices or page components, through intelligent algorithms and dynamic adjustments, the system can automatically adapt to new devices and screen sizes, without manually configuring breakpoints, optimizing layout calculations and rendering processes, reducing performance overhead, and improving page loading speed and responsiveness. Through a unified layout engine and automatic compatibility processing, the consistency of user experience on different devices and browsers is ensured, static configuration and breakpoint management are reduced, and the maintenance and adjustment of responsive design are simplified. The system can adjust the component layout in real time to provide a more flexible user interface and a better user experience. Among them, the client can be but is not limited to various personal computers, laptops, smart phones, tablet computers and portable wearable devices. The server can be implemented with an independent server or a server cluster consisting of multiple servers. The present invention is described in detail below through specific embodiments.

[0028] See also Figure 2 As shown, Figure 2 A flow chart of an intelligent adaptive layout engine and a page component reconstruction method provided by an embodiment of the present invention includes the following steps:

[0029] S10: Analyze user device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results;

[0030] The intelligent adaptive layout engine and page component reconstruction method provided by the present invention can be applied to intelligent adaptive layout engines such as smart devices or page components in various application scenarios. The intelligent adaptive layout engine is usually implemented through a server, which can receive user device feedback data in real time. For example, in the field of insurance applications, the page adaptation of a new insurance policy needs to be adjusted through the present invention to be compatible with user devices to increase the user's experience of reading the page. The intelligent adaptive layout engine and page component reconstruction method are also applicable to financial and medical scenarios.

[0031] Specifically, data on user devices and screen usage are collected, and the data includes at least screen size, resolution, user-screen interaction mode (such as click, slide, zoom, etc.), user-preferred layout style, etc. Data collection can be obtained through front-end monitoring, user behavior analysis tools, or directly from user devices. The collected data is preprocessed to extract features that are helpful for layout adjustment. The features include at least the device screen size, resolution, the screen orientation most commonly used by users (horizontal or vertical), the frequency of user interaction with specific components, etc. The feature data is then trained using a machine learning algorithm to establish a mapping relationship between layout rules and user devices and screen usage. The training model uses supervised learning, in which layout rules are used as labels and user device and screen usage features are used as inputs. The trained model can predict the best layout rules based on new user device and screen usage features, and these rules include at least the size, position, stacking order, etc. of components. The machine learning model is integrated into the adaptive layout engine, so that it can analyze user devices and screen usage at runtime and adjust the page layout in real time, which involves front-end JavaScript code for monitoring changes in user device characteristics and applying layout rules predicted by the model. To ensure the real-time and smoothness of layout adjustment, the performance of the machine learning model and layout adjustment algorithm is optimized, including model simplification, implementation of caching strategy, and optimization of layout adjustment algorithm. Obtain user feedback on layout adjustment and input this feedback as additional data into the machine learning model to further optimize the layout rules, which helps to improve user satisfaction and make the layout more personalized. User behavior and preferences may change over time, so the machine learning model needs to be updated regularly to incorporate new user data and behavior patterns. The adaptive layout engine can use machine learning algorithms to dynamically generate and adjust the initial layout rules of page components for different users and devices, thereby providing a more personalized and optimized user experience.

[0032] S20: Collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to device models and screen sizes;

[0033] Specifically, through front-end monitoring tools such as Google Analytics or custom scripts, collect the interaction data between users and page components, including clicks, scrolling, sliding and other behaviors. These data will be used to analyze user preferences and behavior patterns. Use JavaScript's window.innerWidth and window.innerHeight to obtain the screen size, and detect other characteristics of the user's device, such as operating system, browser type, etc. Analyze the collected data and extract layout-related features, such as the screen size most commonly used by users, the frequency of user interaction with specific components, etc. Based on design principles and experience, set a set of initial layout rules for page components, which take into account the characteristics of most users and devices. Use machine learning algorithms such as decision trees, random forests or neural networks to train models to learn the relationship between user behavior and layout preferences. Model training requires a large amount of labeled data, which can come from user feedback, A / B testing or expert knowledge. Integrate the trained machine learning model into the adaptive layout engine. When a user visits a page, the engine will analyze the user's device characteristics and behavior data in real time, and then use the model to predict the layout rules that the user may prefer. According to the prediction results of the machine learning model, dynamically adjust the style and layout of the page components. This may involve changing the size, position, color, or other visual attributes of the component. As user behavior data continues to accumulate, the machine learning model is retrained and optimized regularly to improve the accuracy of predictions and the adaptability of the layout. Allow users to provide feedback on layout adjustments, and input this feedback as additional data into the machine learning model to further optimize the layout rules. Through this step, the adaptive layout engine is able to generate and adjust the layout rules of page components in real time based on user behavior and device characteristics to adapt to different device models and screen sizes, providing a more personalized and optimized user experience.

[0034] S30: Calculating the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm;

[0035] The layout calculation includes the following steps: selecting a suitable layout algorithm according to the application scenario; setting relevant parameters according to the layout algorithm requirements, inputting the page components into the layout algorithm, and running the layout algorithm to obtain the layout result of the adaptive layout rule.

[0036] Specifically, clarify the usage scenarios and target user groups of the page. This includes the functional requirements of the page (such as information display, interactive operation, entertainment games, etc.), the type of target device (such as desktop, mobile, tablet, etc.), and the browsing habits of users (such as vertical scrolling, horizontal sliding, etc.). According to the specific scenarios and requirements of the application, analyze and determine the goals and requirements of the layout. Different application scenarios may require different layout strategies. For example, a news website may require a scrolling layout, while an e-commerce website may prefer a grid layout. According to the results of the demand analysis, select a suitable layout algorithm. The layout algorithms include Flexbox, Grid, Fluid Layout, and Responsive Design. For example, for interfaces that require complex layouts, a grid layout may be selected because it provides more fine-grained control. After selecting a suitable layout algorithm, you need to set relevant parameters according to the requirements of the algorithm. These parameters may include the width, height, spacing, alignment, etc. of the element. For example, in Flexbox, you can set flex-grow, flex-shrink, and flex-basis to control the scalability of the element. Provide the various components of the page as input to the layout algorithm. These components may include text, images, buttons, lists, etc. Each component needs to have clear size and position information so that the layout algorithm can place them correctly. After setting all the necessary parameters and entering the page components, run the layout algorithm. The algorithm will calculate the final position and size of each component on the page based on the set parameters and the input components. After the layout algorithm runs, a set of adaptive layout rules will be generated. These rules define how the page adjusts on different screen sizes and devices to maintain the consistency and usability of the layout. After the adaptive layout rules are generated, they need to be tested on different devices and screen sizes to ensure the adaptability of the layout and user experience. Depending on the test results, it may be necessary to go back to the previous steps for adjustment and optimization. As user behavior data accumulates, machine learning algorithms can be used to analyze user preferences and further optimize the layout rules, which involves retraining the model to incorporate new user data and behavior patterns.

[0037] The rendering algorithm includes the following steps: dynamically generate and update the layout template through the rendering algorithm, and adjust the adaptive range of the updated layout module according to the screen width and content priority. This step includes: learning and analyzing the rendering data based on the deep learning model to obtain scene characteristics and rendering requirements; identifying the key factors that affect the rendering efficiency and quality, and generating suggestions for improving the rendering data; automatically adjusting the scene characteristics and rendering requirements according to the key factors and improved rendering data until the rendering is generated and the layout module is updated.

[0038] Specifically, the rendering algorithm continuously collects rendering data by obtaining initial rendering parameters and performing rendering operations. Based on the deep learning model, the rendering data is learned and analyzed to obtain scene characteristics and rendering requirements, identify key factors affecting rendering efficiency and quality, and generate improvement suggestion data. According to these key factors and improvement suggestion data, the rendering parameters are automatically adjusted until the rendering results are generated. This method can continuously and automatically adjust the rendering parameters during the rendering process to achieve efficient and high-quality rendering output. The rendering calculation process involves the use of CSS media queries and JavaScript to dynamically adapt the content. For example, when the screen width is less than a certain value, the layout direction of the navigation bar can be changed to columnar to meet the needs of smaller screens. At the same time, JavaScript can be used to detect changes in window size, and then adjust the size and position of the elements accordingly, or perform animation effects such as fading in and out on the elements to achieve dynamic style changes.

[0039] In order to avoid performance problems caused by secondary layout, a series of optimization measures can be taken. For example, use matchContent() instead of fontSize() to change dynamically to avoid triggering secondary layout; use animation to smoothly transition size changes to reduce layout triggering; pre-set a maximum size to reduce layout adjustments caused by content changes; use placeholders to display the status of content loading to avoid layout adjustments caused by sudden content changes.

[0040] Responsive layout design dynamically adjusts the layout according to the device's screen size and orientation to reduce layout re-arrangement caused by device differences. This includes conditional rendering and custom Builder functions to create interfaces that adapt to different devices, and using responsive layout frameworks such as Bootstrap to simplify the layout adaptation process. In VR rendering, based on the sampling strategy of distance and viewing angle, the sampling rate and resolution are dynamically adjusted to achieve effective allocation of rendering resources. At the same time, advanced anti-aliasing technology and edge retention algorithms are used to ensure the overall quality of the picture, even while reducing the rendering accuracy. According to the real-time changes of rendering tasks, GPU resources are reasonably allocated to ensure rendering efficiency and response speed in high-concurrency scenarios. Combined with system load and user experience thresholds, dynamic frame rate control strategies are implemented to balance performance and smoothness. According to the changes in real-time environmental lighting conditions, lightmap and environment mapping parameters are automatically adjusted to reduce unnecessary computing overhead. According to changes in scenes and viewing angles, the surface material properties of objects, such as reflection, refraction, transparency, etc., are adaptively adjusted to improve the rendering realism. The combination of rendering algorithms and adaptive layouts provides a smoother and more efficient user experience while maintaining high-quality visual output.

[0041] S40: a unified layout engine is set according to the adaptation timing and the adaptation range, and the unified layout engine automatically handles compatibility issues between different browsers and smart devices;

[0042] like Figure 3 As shown, step S40 includes the following steps:

[0043] S41, setting the middleware and abstraction layer of the smart device according to the adaptation timing and the adaptation range;

[0044] S42. Create a unified interface to connect the abstraction layer and different browsers through the unified interface;

[0045] S43. The unified layout engine connects different browsers and smart devices through a unified interface, so that the unified layout engine can automatically handle compatibility issues between different browsers and smart devices.

[0046] For steps S41-43, the unified layout engine is an abstract layer located between the page layout logic and the underlying rendering technology. It provides consistent visual effects and functional support for different browsers and devices by standardizing layout rules, component behaviors and rendering methods. Among them, the unified layout engine is responsible for parsing markup languages ​​such as HTML and CSS, and rendering the user interface of the web page or application according to these instructions. The unified layout engine is cross-platform, which means that it can run on different operating systems (such as Windows, macOS, Linux, iOS, Android, etc.) and different browsers (such as Chrome, Firefox, Safari, Edge, etc.). In addition to basic HTML and CSS parsing and rendering, the unified layout engine may also include font processing, image rendering, animation effects, interactive logic processing and other functions. It also needs to have the ability to efficiently handle complex layouts and responsive designs to ensure that the content can be well displayed at various screen sizes and resolutions. Different browsers may have different interpretations and implementations of HTML and CSS standards, resulting in different display effects of the same web page on different browsers. The unified layout engine can automatically adjust the rendering strategy through the built-in standard interpreter and optimization algorithm to meet the expected behavior of most browsers, thereby reducing or eliminating these differences.

[0047] Smart devices (such as smartphones, tablets, smart TVs, etc.) have different screen sizes, resolutions, operating systems, and browser environments. The unified layout engine uses responsive design techniques (such as media queries, fluid layouts, etc.) and device-specific optimization strategies to ensure that content can be presented in the best way on a variety of devices.

[0048] As web standards continue to evolve and new devices emerge, unified layout engines need to be updated regularly to support new features and fix known issues. Through the automatic update mechanism, developers can ensure that their web pages or applications can always take advantage of the latest layout technology while reducing the workload of manual testing and fixing compatibility issues.

[0049] By shielding browser and device differences, we can achieve one-time definition and multi-terminal adaptation; dynamically adjust the layout according to device characteristics to adapt to various screen sizes, resolutions and directions; developers do not need to manually deal with compatibility issues and can focus on layout logic and function development; ensuring that the page has the same performance on different browsers, operating systems and devices. The core of the unified layout engine is to integrate browser features, standardized layout rules and dynamic adaptation logic.

[0050] S50: Dynamically adjust layout rules based on a unified layout engine according to actual support of smart devices and browsers.

[0051] First, collect device information to identify the type of device the user is using (such as smartphones, tablets, desktop computers, smart TVs, etc.) as well as the screen size and resolution. Determine the type of browser the user is using (such as Chrome, Firefox, Safari, Edge, etc.) and version information. Second, analyze support to understand the support of different devices and browsers for modern Web technologies such as CSS3, HTML5, JavaScript, etc.; identify the layout engines used by different devices and browsers (such as WebKit, Blink, Gecko, Trident, etc.) and the subtle differences between them.

[0052] Determine a unified layout engine and choose a widely supported and powerful layout engine, such as WebKit or Blink, as the basis for page layout. Formulate basic layout rules and set basic CSS styles for page elements, including fonts, colors, margins, padding, etc.; use the flow layout characteristics of CSS to ensure that the content can be adaptively adjusted according to different screen sizes; use CSS media queries to define layout rules under different screen sizes to achieve responsive design. According to the actual support of smart devices and browsers, based on a unified layout engine combined with front-end technology and responsive design technology, dynamically adjust the interface layout and style.

[0053] Detect device and browser features. Use JavaScript code to detect the features of the user's device and browser, such as screen size, resolution, and whether specific CSS properties are supported. Adjust layout rules to dynamically modify the CSS style of the page based on the detected device and browser features. For example, for browsers that do not support Flexbox, a floating layout can be used as an alternative. Adjust the behavior of JavaScript code based on different devices and browsers to ensure the correctness and smoothness of interactive functions.

[0054] Apply adaptive design strategies to dynamically adjust the layout structure of the page according to changes in screen size and resolution, such as changing the position of the navigation bar, adjusting the width of the content area, etc. Dynamically adjust the resolution and loading method of images and media according to the screen size of the device and network conditions to improve page loading speed and user experience.

[0055] In another embodiment, the performance and compatibility of the layout engine are tested on the device and different browsers, and the test results are collected for feedback, and optimization and adjustment are performed according to the test results. User feedback is collected through questionnaires, user comments, etc. User feedback on page layout and compatibility is collected. Device and browser updates are monitored, and new devices and browsers are regularly released to understand their support for Web technologies. Layout rules are optimized, and the layout rules and compatibility strategies of the page are continuously optimized according to user feedback and device and browser updates. This ensures that the web page or application interface can provide a consistent and high-quality user experience on various devices and browsers.

[0056] It can be seen that in the above scheme, for intelligent adaptive layout engines such as smart devices or page components, the client first analyzes the user's device and screen usage based on the machine learning algorithm, and dynamically generates the initial layout rules for adjusting the page components based on the analysis results, collects the user's behavior and screen size to dynamically adjust the layout and style of the page components, and reconstructs the adaptive layout rules of the page components in real time based on the initial layout rules, calculates the adaptive timing and adaptive range of the adaptive layout rules based on the layout calculation and rendering algorithm, and sets a unified layout engine according to the adaptive timing and adaptive range, which automatically handles different browsers and smart phones. Device compatibility issues, according to the actual support of smart devices and browsers, the layout rules are dynamically adjusted based on a unified layout engine, and the layout rules are fed back to the client. In the present invention, through intelligent algorithms and dynamic adjustments, the system can automatically adapt to new devices and screen sizes, without the need to manually configure breakpoints, optimize layout calculation and rendering processes, reduce performance overhead, improve page loading speed and responsiveness, and ensure consistency of user experience on different devices and browsers through a unified layout engine and automatic compatibility processing, reduce static configuration and breakpoint management, simplify the maintenance and adjustment of responsive design, and the system can adjust component layout in real time to provide a more flexible user interface and a better user experience.

[0057] It should be understood that the order of execution of the steps in the above embodiment does not necessarily mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiment of the present invention.

[0058] In one embodiment, an intelligent adaptive layout engine and a page component reconstruction device are provided, and the intelligent adaptive layout engine and the page component reconstruction device correspond one-to-one to the intelligent adaptive layout engine and the page component reconstruction method in the above embodiment. Figure 4 As shown, the intelligent adaptive layout engine and page component reconstruction device includes an analysis module 101, a reconstruction module 102, a calculation module 103, a unified layout engine module 104, and a unified layout adjustment module 105. The functional modules are described in detail as follows:

[0059] The analysis module 101 is used to analyze the user's device and screen usage based on a machine learning algorithm, and dynamically generate initial layout rules for adjusting page components based on the analysis results;

[0060] The reconstruction module 102 is used to collect user behaviors and screen sizes to dynamically adjust the layout and style of page components, and to reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to the device model and screen size;

[0061] A calculation module 103, used to calculate the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm;

[0062] The unified layout engine module 104 is used to set a unified layout engine according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices;

[0063] The unified layout adjustment module 105 is used to dynamically adjust the layout rules based on the unified layout engine according to the actual support of the smart device and the browser.

[0064] In one embodiment, the calculation module 103 is specifically configured to:

[0065] Select the appropriate layout algorithm according to the application scenario;

[0066] Set relevant parameters according to the requirements of the layout algorithm, input the page components into the layout algorithm, and run the layout algorithm to obtain the layout result of the adaptive layout rule.

[0067] In one embodiment, the calculation module 103 is further configured to:

[0068] Dynamically generate and update layout templates through rendering algorithms, and adjust the adaptive range of update layout modules according to screen width and content priority;

[0069] Learn and analyze rendering data based on deep learning models to obtain scene features and rendering requirements;

[0070] Identify key factors that affect rendering efficiency and quality, and generate suggestions to improve rendering data;

[0071] Based on key factors and improved rendering data, the scene characteristics and rendering requirements are automatically adjusted until the rendering is generated and the layout module is updated.

[0072] In one embodiment, the unified layout engine module 104 is specifically configured to:

[0073] Set up the middleware and abstraction layer of smart devices according to the adaptation timing and adaptation scope;

[0074] Create a unified interface to connect the abstraction layer and different browsers;

[0075] A unified layout engine connects different browsers and smart devices through a unified interface, so that the unified layout engine can automatically handle compatibility issues between different browsers and smart devices.

[0076] In one embodiment, the unified layout adjustment module 105 is specifically used to:

[0077] According to the actual support of smart devices and browsers, the interface layout and style are dynamically adjusted based on a unified layout engine combined with front-end technology and responsive design technology.

[0078] In one embodiment, the apparatus further comprises:

[0079] The feedback module is used to test the performance and compatibility of the layout engine on devices and different browsers, collect feedback test results, and make optimizations and adjustments based on the test results.

[0080] The present invention provides an intelligent adaptive layout engine and a page component reconstruction device. The device first analyzes the user device and screen usage based on a machine learning algorithm through a client, and dynamically generates an initial layout rule for adjusting the page component based on the analysis result, collects the user's behavior and screen size to dynamically adjust the layout and style of the page component, and reconstructs the adaptive layout rule of the page component in real time based on the initial layout rule, so as to adapt to the device model and screen size, calculate the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm, set a unified layout engine according to the adaptive timing and adaptive range, and automatically handle the compatibility issues of different browsers and smart devices by the unified layout engine. According to the actual support of the smart device and the browser, the layout rule is dynamically adjusted based on the unified layout engine, and the layout rule is fed back to the client. In the present invention, through the intelligent algorithm and dynamic adjustment, the system can automatically adapt to the new device and screen size, without manually configuring the breakpoint, optimize the layout calculation and rendering process, reduce the performance overhead, improve the page loading speed and response performance, ensure the consistency of user experience on different devices and browsers through the unified layout engine and automatic compatibility processing, reduce static configuration and breakpoint management, simplify the maintenance and adjustment of responsive design, and the system can adjust the component layout in real time to provide a more flexible user interface and a better user experience.

[0081] For the specific definition of the intelligent adaptive layout engine and the page component reconstruction device, please refer to the definition of the intelligent adaptive layout engine and the page component reconstruction method above, which will not be repeated here. Each module in the above-mentioned intelligent adaptive layout engine and the page component reconstruction device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0082] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 5As shown. The computer device includes a processor, a memory, a network interface and a database connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile and / or volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external client through a network connection. When the computer program is executed by the processor, it realizes the functions or steps of a server-side of an intelligent adaptive layout engine and a page component reconstruction method.

[0083] In one embodiment, a computer device is provided. The computer device may be a client, and its internal structure diagram may be as follows: Figure 6 As shown. The computer device includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external server through a network connection. When the computer program is executed by the processor, it realizes the functions or steps of the client side of an intelligent adaptive layout engine and a page component reconstruction method

[0084] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the following steps when executing the computer program:

[0085] Analyze user device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results;

[0086] Collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to device models and screen sizes;

[0087] Based on the layout calculation and rendering algorithm, calculate the adaptive timing and adaptive range of the adaptive layout rules;

[0088] A unified layout engine is set according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices;

[0089] According to the actual support of smart devices and browsers, layout rules are dynamically adjusted based on a unified layout engine.

[0090] In one embodiment, a computer readable storage medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the following steps are implemented:

[0091] Analyze user device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results;

[0092] Collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to device models and screen sizes;

[0093] Based on the layout calculation and rendering algorithm, calculate the adaptive timing and adaptive range of the adaptive layout rules;

[0094] A unified layout engine is set according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices;

[0095] According to the actual support of smart devices and browsers, layout rules are dynamically adjusted based on a unified layout engine.

[0096] It should be noted that the above functions or steps that can be implemented by the computer-readable storage medium or computer device can refer to the relevant descriptions on the server side and the client side in the aforementioned method embodiment. To avoid repetition, they will not be described one by one here.

[0097] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0098] Those skilled in the art can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0099] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included in the protection scope of the present invention.

Claims

1. An intelligent adaptive layout engine and page component reconstruction method, characterized in that: include: Analyze user device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results; Collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to device models and screen sizes; Based on the layout calculation and rendering algorithm, calculate the adaptive timing and adaptive range of the adaptive layout rules; A unified layout engine is set according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices; According to the actual support of smart devices and browsers, layout rules are dynamically adjusted based on a unified layout engine.

2. The intelligent adaptive layout engine and page component reconstruction method according to claim 1, characterized in that: The step of calculating the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm includes: Select the appropriate layout algorithm according to the application scenario; Set relevant parameters according to the requirements of the layout algorithm, input the page components into the layout algorithm, and run the layout algorithm to obtain the layout result of the adaptive layout rule.

3. The intelligent adaptive layout engine and page component reconstruction method according to claim 2, characterized in that: The step of calculating the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm also includes: The updated layout template is dynamically generated through the rendering algorithm, and the adaptive range of the updated layout module is adjusted according to the screen width and content priority.

4. The intelligent adaptive layout engine and page component reconstruction method according to claim 3, characterized in that: The step of dynamically generating and updating the layout template by using the rendering algorithm comprises: Learn and analyze rendering data based on deep learning models to obtain scene features and rendering requirements; Identify key factors that affect rendering efficiency and quality, and generate suggestions to improve rendering data; Based on key factors and improved rendering data, the scene characteristics and rendering requirements are automatically adjusted until the rendering is generated and the layout module is updated.

5. The intelligent adaptive layout engine and page component reconstruction method according to claim 1, characterized in that: The steps of setting a unified layout engine according to the adaptation timing and the adaptation range, and automatically processing the compatibility issues of different browsers and smart devices by the unified layout engine include: Set up the middleware and abstraction layer of smart devices according to the adaptation timing and adaptation scope; Create a unified interface to connect the abstraction layer and different browsers; A unified layout engine connects different browsers and smart devices through a unified interface, so that the unified layout engine can automatically handle compatibility issues between different browsers and smart devices.

6. The intelligent adaptive layout engine and page component reconstruction method according to claim 1, characterized in that: The step of dynamically adjusting the layout rules based on a unified layout engine according to the actual support of the smart device and the browser includes: According to the actual support of smart devices and browsers, the interface layout and style are dynamically adjusted based on a unified layout engine combined with front-end technology and responsive design technology.

7. The intelligent adaptive layout engine and page component reconstruction method according to claim 1, characterized in that: After the step of dynamically adjusting the layout rules based on a unified layout engine according to the actual support of the smart device and the browser, the method further includes: Test the performance and compatibility of the layout engine on devices and different browsers, collect feedback on the test results, and make optimizations and adjustments based on the test results.

8. An intelligent adaptive layout engine and page component reconstruction device, characterized in that: include: The analysis module is used to analyze the user's device and screen usage based on machine learning algorithms, and dynamically generate initial layout rules for adjusting page components based on the analysis results; The reconstruction module is used to collect user behavior and screen size to dynamically adjust the layout and style of page components, and reconstruct the adaptive layout rules of page components in real time based on the initial layout rules to adapt to the device model and screen size; A calculation module, used for calculating the adaptive timing and adaptive range of the adaptive layout rule based on the layout calculation and rendering algorithm; A unified layout engine module is used to set a unified layout engine according to the adaptive timing and adaptive range, and the unified layout engine automatically handles the compatibility issues of different browsers and smart devices; The unified layout adjustment module is used to dynamically adjust layout rules based on a unified layout engine according to the actual support of smart devices and browsers.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the intelligent adaptive layout engine and page component reconstruction method as described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the intelligent adaptive layout engine and page component reconstruction method as described in any one of claims 1 to 7 are implemented.

Images