Page component display method and device, equipment and storage medium

Abstract

The application discloses a page component display method, device and equipment and a storage medium, and the method comprises the following steps: obtaining the component position and component size of a target component in a target page in the target page, and obtaining the device resolution of a target device; a scaling ratio prediction model is used to predict the target scaling ratio according to the component size and the device resolution; a position prediction model is used to predict the target position according to the component size, the component position, the device resolution and the target scaling ratio; and the target component is scaled according to the target scaling ratio, and the scaled target component is displayed at the target position on the desktop of the target device. The application can automatically adapt the components in the page, and automatically display the components on the desktop of the device in a suitable size and position, so that when the website is not adapted for mobile devices, the user does not need to manually scale and move to adjust the component position and size, and the user experience is improved.

Description

Technical Field

[0001] This invention relates to the field of user interface technology, and in particular to a method, apparatus, device, and storage medium for displaying page components. Background Technology

[0002] Currently, because some websites are not adapted for mobile devices, when users access unadapted websites via a browser or remote desktop using a mobile device, the entire website page will be displayed on the mobile device's screen. Users need to manually zoom and move the page to complete the input. For example, when a user performs a login operation, they often need to enlarge the login box by a certain proportion and move it to the center of the screen to perform login-related operations, which is complicated and results in a poor user experience. Summary of the Invention

[0003] The main objective of this invention is to provide a method, apparatus, device, and storage medium for displaying page components, aiming to solve the technical problem that when websites are not adapted for mobile devices, the entire page is displayed, requiring users to manually zoom in and out.

[0004] To achieve the above objectives, the present invention provides a method for displaying page components, the method comprising the following steps:

[0005] Obtain the position and size of the target component on the target page, and obtain the device resolution of the target device;

[0006] A scaling ratio prediction model is used to predict the target scaling ratio based on the component size and the device resolution. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target.

[0007] The target position is predicted using a position prediction model based on the component size, the component position, the device resolution, and the target scaling ratio. The position prediction model is trained using the component size on the page, the component position on the page, the device resolution, and the page scaling ratio as input features, and the component's display position on the device desktop as the training target.

[0008] The target component is scaled according to the target scaling ratio, and the scaled target component is displayed at the target location on the target device desktop.

[0009] Optionally, the location prediction model includes a horizontal coordinate prediction model and a vertical coordinate prediction model, and the step of using the location prediction model to predict the target location based on the component size, the device resolution, and the target scaling ratio includes:

[0010] The horizontal coordinate prediction model is used to predict the display horizontal coordinate of the target component on the target device desktop based on the component width in the component size, the component horizontal coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio. The horizontal coordinate prediction model is trained using the component width in the page, the component horizontal coordinate in the page, the device resolution width, and the page scaling ratio as input features, and the horizontal coordinate of the component when it is displayed on the device desktop as the training target.

[0011] The ordinate prediction model is used to predict the display ordinate of the target component on the target device desktop based on the component length in the component size, the component ordinate in the component position, the resolution height in the device resolution, and the target scaling ratio. The ordinate prediction model is trained using the component length on the page, the component ordinate on the page, the device resolution height, and the page scaling ratio as input features, and the ordinate of the component when it is displayed on the device desktop as the training target.

[0012] The displayed horizontal and vertical coordinates are used as the target position.

[0013] Optionally, after the step of scaling the target component according to the target scaling ratio, the method further includes:

[0014] Based on the device resolution and the size of the scaled target component, it is determined whether the scaled target component can be displayed normally on the target device desktop.

[0015] If so, then perform the step of displaying the scaled target component at the target location on the target device desktop;

[0016] If not, the scaled target component will be reduced to the size of the device resolution and displayed in the center of the target device's desktop.

[0017] Optionally, the step of detecting whether the scaled target component can be displayed normally on the target device desktop based on the device resolution and the scaled target component size includes:

[0018] Calculate the target size of the scaled target component based on the component size and the target scaling ratio;

[0019] Detect whether the length of the target size is greater than the resolution height of the device resolution, and detect whether the width of the target size is greater than the resolution width of the device resolution;

[0020] If the length of the dimension is greater than the resolution height or the width of the dimension is greater than the resolution width, then it is determined that the scaled target component cannot be displayed normally on the target device desktop;

[0021] If the length of the dimension is not greater than the resolution height and the width of the dimension is not less than the resolution width, then it is determined that the scaled target component can be displayed normally on the target device desktop.

[0022] Optionally, after the step of scaling the target component down to the device resolution and displaying it at the center of the target device's desktop, the method further includes:

[0023] First training data is generated based on the component size, the device resolution, the target scaling ratio, and the reduction ratio. The first training data is added to the first training dataset of the scaling ratio prediction model to optimize the scaling ratio prediction model based on the first training dataset after adding the training data.

[0024] Second training data is generated based on the component size, component position, device resolution, target scaling ratio, reduction ratio, and center position of the target device desktop. The second training data is added to the second training dataset of the location prediction model to optimize the location dependency model based on the second training dataset after adding the training data.

[0025] Optionally, before the step of predicting the target scaling ratio using a scaling ratio prediction model based on the component size and the device resolution, the method further includes:

[0026] Obtain a training dataset collected based on the input features of the model to be trained and the training objective, and extract multiple training data groups from the training dataset;

[0027] Each of the training data sets is fed into the model to be trained for calculation to obtain multiple sets of candidate model parameters for the model to be trained.

[0028] The effective data volume with error within a preset range when using each set of candidate model parameters to predict training data in the training dataset in the model to be trained is counted respectively.

[0029] The final model parameters are determined based on the candidate model parameters corresponding to the largest effective data volume among the various effective data volumes, and the model to be trained, defined by the final model parameters, is used as the scaling model or the location prediction model.

[0030] Optionally, the step of determining the final model parameters based on the candidate model parameters corresponding to the largest effective data quantity among the effective data quantities includes:

[0031] The candidate model parameter corresponding to the largest effective data volume among the various effective data volumes is taken as the effective model parameter;

[0032] Obtain invalid training data whose error is not within the preset range when using the effective model parameters to predict training data in the training dataset in the model to be trained.

[0033] The training data in which the components of each invalid training data can be displayed normally on the device desktop is taken as the critical training data.

[0034] The critical model parameters of the model to be trained are obtained by using the critical training data.

[0035] The critical model parameters and the effective model parameters are combined to obtain the final model parameters.

[0036] To achieve the above objectives, the present invention also provides a page component display device, the device comprising:

[0037] The acquisition module is used to acquire the component position and component size of the target component in the target page, as well as the device resolution of the target device;

[0038] The first prediction module is used to predict the target scaling ratio based on the component size and the device resolution using a scaling ratio prediction model. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target.

[0039] The second prediction module is used to predict the target position using a position prediction model based on the component size, the component position, the device resolution, and the target scaling ratio. The position prediction model is trained using the component size on the page, the component position on the page, the device resolution, and the page scaling ratio as input features, and the component's display position on the device desktop as the training target.

[0040] The display module is used to scale the target component according to the target scaling ratio and display the scaled target component at the target location on the target device desktop.

[0041] To achieve the above objectives, the present invention also provides a page component display device, the page component display device comprising: a memory, a processor, and a page component display program stored in the memory and executable on the processor, wherein the page component display program, when executed by the processor, implements the steps of the page component display method as described above.

[0042] Furthermore, to achieve the above objectives, the present invention also proposes a computer-readable storage medium storing a page component display program, which, when executed by a processor, implements the steps of the page component display method as described above.

[0043] In this invention, by obtaining the position and size of the target component on the target page, and the device resolution of the target device, a scaling ratio prediction model is used to predict the target scaling ratio based on the component size and device resolution. Then, a position prediction model is used to predict the target position based on the component position, component size, device resolution, and the target scaling ratio. The target component is then scaled according to the target scaling ratio, and the scaled component is displayed at the target position on the target device's desktop. Since the scaling ratio prediction model is trained in advance using the component's size on the page and the device resolution as input features, and the page's scaling ratio as the training target, the target scaling ratio predicted by the scaling ratio prediction model is a relatively appropriate scaling ratio. This ensures that the target component, after being scaled to the target scaling ratio, can be displayed at a suitable size on the target device's desktop, thus eliminating the need for users to perform complex scaling and moving operations to adjust the component's size. Furthermore, since the location prediction model is trained using the component's size and position on the page, the device's resolution, and the page's scaling ratio as input features, and the component's display position on the device's desktop as the training objective, the target position predicted by the model is relatively appropriate. This means that when the target component is displayed in the target device's desktop at the target position, it is appropriately positioned for the user, eliminating the need for complex movement operations to adjust the component's position. Therefore, this invention enables automatic adaptation of components on a page, automatically displaying them at an appropriate size and position on the device's desktop. This improves the user experience, especially when the website is not adapted for mobile devices, as users do not need to manually zoom and move to adjust component positions and sizes. Attached Figure Description

[0044] Figure 1 This is a schematic diagram of the hardware operating environment involved in the embodiments of the present invention;

[0045] Figure 2 This is a flowchart illustrating the first embodiment of the page component display method of the present invention;

[0046] Figure 3 This is a schematic diagram illustrating a scenario where the display size of a page component is adapted according to an embodiment of the present invention;

[0047] Figure 4 This is a schematic diagram of the functional modules of a preferred embodiment of the page component display device of the present invention.

[0048] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0049] It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0050] like Figure 1 As shown, Figure 1 This is a schematic diagram of the device structure of the hardware operating environment involved in the embodiments of the present invention.

[0051] It should be noted that the display device for the page component in this embodiment of the invention can be a smartphone, a personal computer, a server, or other such device, and no specific limitations are imposed here.

[0052] like Figure 1 As shown, the page component display device may include: a processor 1001, such as a CPU, a network interface 1004, a user interface 1003, a memory 1005, and a communication bus 1002. The communication bus 1002 is used to enable communication between these components. The user interface 1003 may include a display screen and an input unit such as a keyboard; optionally, the user interface 1003 may also include a standard wired interface or a wireless interface. The network interface 1004 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface). The memory 1005 may be high-speed RAM or non-volatile memory, such as a disk drive. Optionally, the memory 1005 may also be a storage device independent of the aforementioned processor 1001.

[0053] Those skilled in the art will understand that Figure 1 The device structure shown does not constitute a limitation on the page component display device, and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0054] like Figure 1 As shown, the memory 1005, as a computer storage medium, may include an operating system, a network communication module, a user interface module, and a page component display program. The operating system is a program that manages and controls the device's hardware and software resources, supporting the operation of the page component display program and other software or programs. Figure 1 In the device shown, the user interface 1003 is mainly used for data communication with the client; the network interface 1004 is mainly used for establishing a communication connection with the server; and the processor 1001 can be used to call the page component display program stored in the memory 1005 and perform the following operations:

[0055] Obtain the position and size of the target component on the target page, and obtain the device resolution of the target device;

[0056] A scaling ratio prediction model is used to predict the target scaling ratio based on the component size and the device resolution. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target.

[0057] The target position is predicted using a position prediction model based on the component size, the component position, the device resolution, and the target scaling ratio. The position prediction model is trained using the component size on the page, the component position on the page, the device resolution, and the page scaling ratio as input features, and the component's display position on the device desktop as the training target.

[0058] The target component is scaled according to the target scaling ratio, and the scaled target component is displayed at the target location on the target device desktop.

[0059] Furthermore, the location prediction model includes a horizontal coordinate prediction model and a vertical coordinate prediction model. The step of using the location prediction model to predict the target location based on the component size, the device resolution, and the target scaling ratio includes:

[0060] The horizontal coordinate prediction model is used to predict the display horizontal coordinate of the target component on the target device desktop based on the component width in the component size, the component horizontal coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio. The horizontal coordinate prediction model is trained using the component width in the page, the component horizontal coordinate in the page, the device resolution width, and the page scaling ratio as input features, and the horizontal coordinate of the component when it is displayed on the device desktop as the training target.

[0061] The ordinate prediction model is used to predict the display ordinate of the target component on the target device desktop based on the component length in the component size, the component ordinate in the component position, the resolution height in the device resolution, and the target scaling ratio. The ordinate prediction model is trained using the component length on the page, the component ordinate on the page, the device resolution height, and the page scaling ratio as input features, and the ordinate of the component when it is displayed on the device desktop as the training target.

[0062] The displayed horizontal and vertical coordinates are used as the target position.

[0063] Furthermore, after the step of scaling the target component according to the target scaling ratio, the method further includes:

[0064] Based on the device resolution and the size of the scaled target component, it is determined whether the scaled target component can be displayed normally on the target device desktop.

[0065] If so, then perform the step of displaying the scaled target component at the target location on the target device desktop;

[0066] If not, the scaled target component will be reduced to the size of the device resolution and displayed in the center of the target device's desktop.

[0067] Further, the step of detecting whether the scaled target component can be displayed normally on the target device desktop based on the device resolution and the scaled target component size includes:

[0068] Calculate the target size of the scaled target component based on the component size and the target scaling ratio;

[0069] Detect whether the length of the target size is greater than the resolution height of the device resolution, and detect whether the width of the target size is greater than the resolution width of the device resolution;

[0070] If the length of the dimension is greater than the resolution height or the width of the dimension is greater than the resolution width, then it is determined that the scaled target component cannot be displayed normally on the target device desktop;

[0071] If the length of the dimension is not greater than the resolution height and the width of the dimension is not less than the resolution width, then it is determined that the scaled target component can be displayed normally on the target device desktop.

[0072] Furthermore, after the step of scaling the target component down to the device resolution and displaying it at the center of the target device's desktop, the method further includes:

[0073] First training data is generated based on the component size, the device resolution, the target scaling ratio, and the reduction ratio. The first training data is added to the first training dataset of the scaling ratio prediction model to optimize the scaling ratio prediction model based on the first training dataset after adding the training data.

[0074] Second training data is generated based on the component size, component position, device resolution, target scaling ratio, scaling factor, and center position of the target device desktop. This second training data is then added to the second training dataset of the position prediction model to optimize the position dependency model based on the second training dataset with the added training data. Further, before the step of using the scaling ratio prediction model to predict the target scaling ratio based on the component size and device resolution, the method further includes:

[0075] Obtain a training dataset collected based on the input features of the model to be trained and the training objective, and extract multiple training data groups from the training dataset;

[0076] Each of the training data sets is fed into the model to be trained for calculation to obtain multiple sets of candidate model parameters for the model to be trained.

[0077] The effective data volume with error within a preset range when using each set of candidate model parameters to predict training data in the training dataset in the model to be trained is counted respectively.

[0078] The final model parameters are determined based on the candidate model parameters corresponding to the largest effective data volume among the various effective data volumes, and the model to be trained, defined by the final model parameters, is used as the scaling model or the location prediction model.

[0079] Further, the step of determining the final model parameters based on the candidate model parameters corresponding to the largest effective data quantity among the effective data quantities includes:

[0080] The candidate model parameter corresponding to the largest effective data volume among the various effective data volumes is taken as the effective model parameter;

[0081] Obtain invalid training data whose error is not within the preset range when using the effective model parameters to predict training data in the training dataset in the model to be trained.

[0082] The training data in which the components of each invalid training data can be displayed normally on the device desktop is taken as the critical training data.

[0083] The critical model parameters of the model to be trained are obtained by using the critical training data.

[0084] The critical model parameters and the effective model parameters are combined to obtain the final model parameters.

[0085] Based on the above structure, various embodiments of the page component display method are proposed.

[0086] Reference Figure 2 , Figure 2 This is a flowchart illustrating the first embodiment of the page component display method of the present invention.

[0087] This invention provides an embodiment of a page component display method. It should be noted that although the logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than that shown here. In this embodiment, the page component display method includes:

[0088] Step S10: Obtain the component position and component size of the target component in the target page, and obtain the device resolution of the target device;

[0089] In this embodiment, the device that needs to adapt to the display page is taken as the target device. The target device can be a smartphone, a personal computer, a server, or other devices. The execution subject of the various embodiments of the page component display method of the present invention can be the target device, or it can be other smartphones, personal computers, or servers connected to the target device. For ease of description, the execution subject is omitted in the following embodiments.

[0090] The target page can be the page that needs to be displayed on the target device. For example, after the target device obtains a webpage from the server through a browser, it can use that webpage as the target page. Or, when the target device accesses a remote desktop, the page displayed on the remote desktop can be used as the target page.

[0091] After determining the target page, the position (hereinafter referred to as component position for distinction) and size (hereinafter referred to as component size for distinction) of the target component on the target page can be obtained. Specifically, the component position and component size can be obtained from the page file of the target page. The page file is a file used to describe the information of each page element on the page. From the page file, the position and size of a certain page element on the page can be extracted. A certain component (a component is a type of page element) or a group of components can be designated as the target component in advance, such as the login box as the target component. Based on the element name of the target component, the component position and component size of the target component can be extracted from the page file. The position of the component on the page can be the offset position of a point in the component relative to a point on the page. In specific implementations, a unified convention can be made, for example, using the top left corner of the page as the origin of the coordinate system, the rightward direction as the positive direction of the horizontal coordinate, and the downward direction as the positive direction of the vertical coordinate, and the coordinates of the center point of the component in the coordinate system as the position of the component on the page. The size of the component on the page refers to the size of the component on the page, such as using the length and width of the component.

[0092] Step S20: The scaling ratio prediction model is used to predict the target scaling ratio based on the component size and the device resolution. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target.

[0093] Understandably, if the target page is not adapted for the target device and is directly displayed on the target device, the target components presented to the user may be too small or not in a suitable position on the target device's desktop. In such cases, the user would need to manually zoom in and move the target page displayed on the target device to ensure that the target components are in the appropriate position and size on the target device's desktop. Therefore, in this embodiment, the components in the page are automatically adapted, automatically displaying the components on the device's desktop with an appropriate size and position.

[0094] A scaling ratio prediction model can be pre-trained. This trained model can predict a suitable page scaling ratio based on the component's size on the page and the device's resolution. The scaling ratio prediction model can employ a machine learning model capable of solving regression problems, such as a linear regression model or a decision tree model; this embodiment is not limited to these methods. Specifically, in this embodiment, the scaling ratio prediction model is trained using the component's size on the page and the device's resolution as input features, with the page scaling ratio as the training objective. That is, the aim is to train the model so that it can predict a suitable page scaling ratio based on the component's size and the device's resolution, ensuring that when the component is scaled to that page scaling ratio and displayed on the device's desktop, the size is appropriate for the user. In real-world scenarios, when a user scales the page to display a component at a suitable size on the device's desktop, the scaling ratio is related to the component's size on the page and the user's device resolution. In other words, different device resolutions result in different component sizes on the page, and thus different scaling ratios. Therefore, this embodiment constructs the scaling ratio prediction model based on this characteristic. The training process for the scaling prediction model can refer to the conventional machine learning training process, and is not limited in this embodiment.

[0095] A trained scaling prediction model can be used to predict the target scaling ratio based on the component size and device resolution. In other words, the component size and device resolution can be input into the scaling prediction model, which then processes the data and outputs the target scaling ratio. Because the scaling prediction model is pre-trained with scaling ratio as the training objective, the target scaling ratio predicted by this model is a suitable one. This ensures that the target component, after being scaled to the target scaling ratio, can be displayed at an appropriate size on the target device's desktop, eliminating the need for complex scaling and movement operations by the user.

[0096] Step S30: The target position is predicted by the position prediction model based on the component size, the component position, the device resolution and the target scaling ratio. The position prediction model is trained with the component size on the page, the component position on the page, the device resolution and the page scaling ratio as input features and the component display position on the device desktop as the training target.

[0097] A position prediction model can be pre-trained. This trained model can predict the appropriate display position of a component on the device's desktop based on its size, position, device resolution, and page scaling. The position prediction model can employ machine learning models capable of solving regression problems, such as linear regression or decision tree models; this embodiment is not limited to these methods. Specifically, in this embodiment, the position prediction model is trained using the component's size, position, resolution, and scaling as input features, and its display position on the device's desktop as the training objective. In other words, the aim is to train the model so that it can predict a suitable display position based on these factors, ensuring that displaying the component on the device's desktop at that position is appropriate for the user. In real-world scenarios, when users zoom in and out of a page to ensure components are displayed at an appropriate size on the device's desktop, the final position of the component depends on its size on the page, its position on the page, the user's device resolution, and the page's zoom ratio. In other words, different component sizes, positions, device resolutions, and page zoom ratios will all result in different final positions for the component on the page. Therefore, this embodiment builds its position prediction model based on this characteristic. The training process for the position prediction model can refer to conventional machine learning training processes and is not limited in this embodiment.

[0098] The display position of a component on the device's desktop can be the offset of a point within the component relative to a point on the desktop. In specific implementations, a unified convention can be established, such as using the top-left corner of the desktop as the origin, the rightward direction as the positive x-axis, and the downward direction as the positive y-axis. The coordinates of the component's center point in the coordinate system are used as the component's position on the desktop. It should be noted that in one implementation, both the x-coordinate and y-coordinate of the component on the desktop can be used as prediction targets. In this case, the model structure of the position prediction model can be configured to output two results. In specific implementations, two independent models can be set to predict the x-coordinate and y-coordinate separately, or a multi-task prediction approach can be used to set the model so that it can output two results. In another implementation, only one of the x-coordinate and y-coordinate can be used as the prediction target, while the other can use a default value. For example, the x-coordinate is obtained through prediction, and the y-coordinate is set to half the device height by default.

[0099] The target position can be predicted using a trained position prediction model based on the component size, component position, device resolution, and the target scaling ratio obtained in the previous step. In other words, the component size, component position, device resolution, and target scaling ratio can be input into the position prediction model, and the model outputs the target position after processing. Since the position prediction model is pre-trained and uses the component's display position on the device's desktop as the training target, the target position predicted by the model is a relatively suitable position. This means that when the target component is displayed at the target device desktop in the target position, it is more suitable for the user, thus eliminating the need for complex movement operations.

[0100] Step S40: Scale the target component according to the target scaling ratio, and display the scaled target component at the target location on the target device desktop.

[0101] After obtaining the target scaling ratio and target position, the target component can be scaled according to the target scaling ratio, and the scaled target component can be displayed at the target position on the target device's desktop. It should be noted that when the target scaling ratio is greater than 1, the target component is enlarged; when the target scaling ratio is less than 1, the target component is shrunk. There may also be cases where the target scaling ratio is equal to 1, in which case the original size of the target component on the page is preserved. In one embodiment, only the target component can be scaled and its position adjusted, while the entire target page remains displayed on the desktop. If the target component is enlarged, it may obscure part of the target page; if it is shrunk, the missing parts can be filled with blank areas. In another embodiment, the entire target page can be scaled, in which case the target component will also be scaled simultaneously. After scaling, the target component is displayed at the target position, and a portion of the target page may extend beyond the desktop and not be displayed.

[0102] In this embodiment, by obtaining the component position and size of the target component on the target page, and the device resolution of the target device, a scaling ratio prediction model is used to predict the target scaling ratio based on the component size and device resolution. Then, a position prediction model is used to predict the target position based on the component position, component size, device resolution, and the target scaling ratio. The target component is then scaled according to the target scaling ratio, and the scaled target component is displayed at the target position on the target device's desktop. Since the scaling ratio prediction model is trained in advance using the component's size on the page and the device resolution as input features and the page's scaling ratio as the training target, the target scaling ratio predicted by the scaling ratio prediction model is a relatively appropriate scaling ratio. This ensures that the target component, after being scaled according to the target scaling ratio, can be displayed at a suitable size on the target device's desktop, thus eliminating the need for users to perform complex scaling and moving operations to adjust the component's size. Furthermore, since the location prediction model is trained using the component's size and position on the page, the device's resolution, and the page's scaling ratio as input features, and the component's display position on the device's desktop as the training objective, the target position predicted by the model is relatively appropriate. This means that when the target component is displayed in the target device's desktop at the target position, it is appropriately positioned for the user, eliminating the need for complex movement operations to adjust the component's position. Therefore, this embodiment can automatically adapt components on the page, automatically displaying them at an appropriate size and position on the device's desktop. This improves the user experience when the website is not adapted for mobile devices, eliminating the need for users to manually zoom and move to adjust component positions and sizes.

[0103] Furthermore, based on the first embodiment described above, a second embodiment of the page component display method of the present invention is proposed. In this embodiment, step S30 includes:

[0104] Step S301: Using the horizontal coordinate prediction model, the horizontal coordinate of the target component on the target device desktop is predicted based on the component width in the component size, the component horizontal coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio. The horizontal coordinate prediction model is trained using the component width on the page, the component horizontal coordinate on the page, the device resolution width, and the page scaling ratio as input features, and the horizontal coordinate of the component when it is displayed on the device desktop as the training target.

[0105] In this embodiment, the horizontal and vertical coordinates of the component when it is displayed on the device desktop can be used as prediction targets, and two models, a horizontal coordinate prediction model and a vertical coordinate prediction model, can be trained to predict the horizontal and vertical coordinates respectively.

[0106] Specifically, the horizontal coordinate prediction model can employ machine learning models capable of solving regression problems, such as linear regression models and decision tree models, etc., and this embodiment is not limited to any particular model. In particular, in this embodiment, the horizontal coordinate prediction model is trained using the component's width on the page, the component's horizontal coordinate on the page, the device resolution width, and the page scaling ratio as input features, and using the component's horizontal coordinate when displayed on the device's desktop as the training target. That is, the aim is to train the model so that it can predict a suitable horizontal coordinate based on the component's width on the page, the component's horizontal coordinate on the page, the device resolution width, and the page scaling ratio, ensuring that when the component is displayed on the device's desktop with that horizontal coordinate, its horizontal position is appropriate for the user. In real-world scenarios, when users zoom in and out of a page to ensure components are displayed at an appropriate size on the device's desktop, the final horizontal coordinate of the displayed component is related to the component's width on the page, its horizontal coordinate, the device's resolution, and the page's zoom ratio. In other words, different widths, horizontal coordinates, device resolutions, and page zoom ratios will all result in different final horizontal coordinates for the component. Therefore, this embodiment constructs the horizontal coordinate prediction model based on this characteristic. The training process for the horizontal coordinate prediction model can refer to conventional machine learning training processes and is not limited in this embodiment.

[0107] The trained x-coordinate prediction model can be used to predict the display x-coordinate on the target device desktop based on the component width in the component size, the component x-coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio obtained in the previous step. In other words, the component width in the component size, the component x-coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio can be input into the x-coordinate prediction model, and the model can process and output the display x-coordinate on the target device desktop.

[0108] Step S302: Using the ordinate prediction model, the display ordinate of the target component on the target device desktop is predicted based on the component length in the component size, the component ordinate in the component position, the resolution height in the device resolution, and the target scaling ratio. The ordinate prediction model is trained using the component length on the page, the component ordinate on the page, the device resolution height, and the page scaling ratio as input features, and the ordinate of the component when it is displayed on the device desktop as the training target.

[0109] The ordinate prediction model can employ machine learning models capable of solving regression problems, such as linear regression models and decision tree models, and is not limited in this embodiment. Specifically, in this embodiment, the ordinate prediction model is trained using the component's length on the page, the component's ordinate on the page, the device's resolution, and the page's scaling ratio as input features, and using the ordinate of the component when displayed on the device's desktop as the training target. That is, the aim is to train the model so that it can predict a suitable ordinate based on the component's length on the page, the component's ordinate on the page, the device's resolution, and the page's scaling ratio, so that when the component is displayed on the device's desktop with that ordinate, its vertical position is appropriate for the user. In real-world scenarios, when users zoom in and out of a page to ensure components display at an appropriate size on the device's desktop, the final displayed ordinate of the component is related to its length on the page, its ordinate, the device's resolution, and the page's zoom ratio. In other words, different component lengths, ordinates, device resolutions, and zoom ratios will all result in different displayed ordinates. Therefore, this embodiment constructs its ordinate prediction model based on this characteristic. The training process for the ordinate prediction model can refer to conventional machine learning training processes and is not limited in this embodiment.

[0110] The trained ordinate prediction model can be used to predict the display ordinate on the target device desktop based on the component length in the component size, the component ordinate in the component position, the resolution height in the device resolution, and the target scaling ratio obtained in the previous step. In other words, the component length in the component size, the component ordinate in the component position, the resolution height in the device resolution, and the target scaling ratio can be input into the ordinate prediction model, and the display ordinate on the target device desktop can be obtained after the model is processed.

[0111] Step S303: Use the displayed horizontal coordinate and the displayed vertical coordinate as the target position.

[0112] After predicting the display x-coordinate using the x-coordinate prediction model and the display y-coordinate using the y-coordinate prediction model, the display x-coordinate and display y-coordinate can be used as the target position. After scaling the target component according to the target scaling ratio, it is displayed at that target position on the target device's desktop. For example, if the component's position is represented by the coordinates of its center point, then after displaying the scaled target component at the target position on the target device's desktop, the x-coordinate of the center point on the target device's desktop is the predicted display x-coordinate, and the y-coordinate of the center point on the target device's desktop is the predicted display y-coordinate.

[0113] In this embodiment, the horizontal and vertical coordinates of a component on the device's desktop are predicted separately. A horizontal coordinate prediction model is trained using the relationship between the component's horizontal coordinate on the desktop and its width on the page, the horizontal coordinate of the component on the page, the width of the device's resolution, and the page scaling ratio. This trained model predicts the display horizontal coordinate of the target component on the target device's desktop. Similarly, a vertical coordinate prediction model is trained using the relationship between the component's vertical coordinate on the desktop and its length on the page, the vertical coordinate of the component on the page, the height of the device's resolution, and the page scaling ratio. This trained model predicts the display vertical coordinate of the target component on the target device's desktop. This improves the prediction accuracy of both horizontal and vertical coordinates, ensuring that when the target component is displayed on the target device's desktop with these horizontal and vertical coordinates, it better meets the user's requirements for the target component's display position, thereby further enhancing the user experience.

[0114] Furthermore, based on the first and / or second embodiments described above, a third embodiment of the page component display method of the present invention is proposed. In this embodiment, after the step of scaling the target component according to the target scaling ratio in step S40, the method further includes:

[0115] Step S50: Detect whether the scaled target component can be displayed normally on the target device desktop based on the device resolution and the size of the scaled target component.

[0116] Because the training data used in training the scaling ratio prediction model may not cover all types of devices and all types of pages, especially when a new type of device resolution emerges, the predicted scaling ratio may be inaccurate. This means that after scaling the target component using the predicted scaling ratio, the target component may not display correctly on the target device's desktop. Therefore, in this embodiment, after obtaining the target scaling ratio and target position, and scaling the target component according to the target scaling ratio, the device resolution and the size of the scaled target component can be used to detect whether the scaled target component can display correctly on the target device's desktop. In one embodiment, it can be considered that the target component can display correctly on the target device's desktop if the length of the scaled target component is less than the height in the device resolution or if the width of the scaled target component is less than the width in the device resolution. That is, as long as one side of the target component can be fully displayed on the target device's desktop, it can be considered that the target component can display correctly on the target device's desktop. In another implementation, a target component is considered to be able to be displayed normally on the target device desktop only when the length of the scaled target component is less than the height in the device resolution and the width of the scaled target component is less than the width in the device resolution. That is, both sides of the target component need to be fully displayed on the target device desktop for the target component to be considered to be able to be displayed normally on the target device desktop.

[0117] If so, then the step of displaying the scaled target component at the target location on the target device desktop in step S40 is executed.

[0118] If the scaled target component is detected to be able to be displayed normally on the target device's desktop, then the scaled target component can be displayed at the target location on the target device's desktop.

[0119] Step S70: If not, the scaled target component is reduced to the size of the device resolution and then displayed at the center of the target device desktop.

[0120] If the scaled target component cannot be displayed correctly on the target device's desktop, it means that at least one side of the target component cannot be fully displayed on the target device's desktop. In this case, the scaled target component can be further reduced in size according to the device's resolution and then displayed in the center of the target device's desktop. The ratio between the height of the device's resolution and the length of the scaled target component, and the ratio between the width of the device's resolution and the width of the scaled target component can be calculated. The smaller of these two ratios is selected as the scaling ratio, and the length and width of the scaled target component are then reduced according to this scaling ratio. The reduced target component is then displayed in the center of the target device's desktop; that is, the center point of the target component is displayed in the center of the target device's desktop.

[0121] Further, in one embodiment, step S50 includes:

[0122] Step S501: Calculate the target size of the scaled target component based on the component size and the target scaling ratio;

[0123] The target size of the target component after scaling is calculated based on its size on the target page and the target scaling ratio. Specifically, the component length (from the component dimensions) is multiplied by the target scaling ratio to obtain the scaled component length, and the component width (from the component dimensions) is multiplied by the target scaling ratio to obtain the scaled component width. It should be noted that if the device resolution unit differs from the component size unit, a conversion ratio between the two units is needed. The component width and length, after multiplying by the target scaling ratio, are then converted to units consistent with the device resolution to obtain the target size.

[0124] Step S502: Detect whether the length of the target size is greater than the resolution height of the device resolution, and detect whether the width of the target size is greater than the resolution width of the device resolution;

[0125] Step S503: If the size is greater than the resolution height or the size is greater than the resolution width, then it is determined that the scaled target component cannot be displayed normally on the target device desktop.

[0126] Step S504: If the length of the dimension is not greater than the resolution height and the width of the dimension is not less than the resolution width, then it is determined that the scaled target component can be displayed normally on the target device desktop.

[0127] Suppose there exists an unconventional device resolution with a width of 510 (using standard resolution units) and a height of 240. The original size of the target component on the page (using standard page element size units) is Length. old =710, Breadth old =384; Assuming the conversion ratio α between page element size units and resolution units is 0.3986, the target zoom ratio obtained through the zoom ratio prediction model is 91.465%, and the target position P x and P y The coordinates are (255, 110). The size of the component on the device's desktop after scaling by the zoom ratio can be calculated as follows: Length = α × Zoom × Length old =260.6743, Breadth=α×Zoom×Breadth old =139.9985. If the target component is displayed on the device according to this target position and scaling ratio, the display effect will be as follows: Figure 3As shown on the left. The length of the scaled target component is greater than the resolution height, causing it to not display correctly on the device's desktop. In this case, the scaled target component can be further reduced in size. Using the ratio between the resolution height and the length of the scaled target component, 240 / 260 = 0.92, as the reduction ratio, the size of the scaled target component on the device's desktop will be: Length = 260 × 0.92 = 240, Breadth = 140 × 0.92 = 129. Displaying the target component in the center of the device's desktop according to this size will produce the following display effect: Figure 3 As shown on the right side of the middle section.

[0128] Furthermore, based on the third embodiment described above, a fourth embodiment of the page component display method of the present invention is proposed. In this embodiment, after step S70, the method further includes:

[0129] Step S80: Generate first training data based on the component size, the device resolution, the target scaling ratio, and the reduction ratio; add the first training data to the first training dataset of the scaling ratio prediction model; and optimize the scaling ratio prediction model based on the first training dataset after adding the training data.

[0130] In one embodiment, if a target component, after being scaled according to the predicted target scaling ratio, cannot be displayed correctly on the target device's desktop and requires further scaling to display properly, it indicates that the scaling ratio prediction model is not accurate enough when predicting the scaling ratio based on this type of device resolution and component size. To address this, in this embodiment, training data, referred to as first training data, can be generated based on the component size of the target component on the target page, the device resolution of the target device, the target scaling ratio, and the scaling-down ratio. This first training data is then added to the first training dataset of the scaling ratio prediction model. The first training dataset is a pre-collected dataset used to train the scaling ratio prediction model. Specifically, the component size and device resolution of the target component on the target page can be used as feature data in the first training data, and the target scaling ratio and the scaling-down ratio of the target component can be multiplied together to obtain the label data in the first training data.

[0131] After adding the first training data to the first training dataset, or after adding a certain amount of new training data to the first training dataset, the scaling prediction model can be optimized using the first training dataset with the added training data. Specifically, the optimization method can be to retrain a scaling prediction model, or to fine-tune the original parameters of the scaling prediction model. For details, please refer to existing machine learning model training methods, which will not be elaborated here.

[0132] By adding the first training data to the first training dataset, and then using the first training dataset with the added training data to optimize the scaling prediction model, the generalization ability of the scaling prediction model can be further improved.

[0133] Step S90: Generate second training data based on the component size, component position, device resolution, target scaling ratio, reduction ratio, and center position of the target device desktop; add the second training data to the second training dataset of the location prediction model; and optimize the location dependency model based on the second training dataset after adding the training data.

[0134] Alternatively, a second training dataset can be generated based on the target component's size and position on the target page, the target device's resolution, the target scaling ratio, the scaling factor, and the center position of the target device's desktop. This second training dataset is then added to the second training dataset of the location prediction model. The second training dataset is a pre-collected dataset used to train the location prediction model. Specifically, the actual scaling ratio can be obtained by multiplying the target scaling ratio by the scaling factor of the target component. The component size, component position, device resolution, and actual scaling ratio are used as feature data in the second training dataset, and the center position of the target device's desktop is used as the label data.

[0135] After adding the second training data to the second training dataset, or after the amount of newly added training data in the second training dataset reaches a certain level, the location prediction model can be optimized using the second training dataset with the added training data. Specifically, the optimization method can be to retrain a location prediction model, or to fine-tune the original parameters of the location prediction model. For details, please refer to existing machine learning model training methods, which will not be elaborated here.

[0136] By adding a second training data to the second training dataset and then using the second training dataset with the added training data to optimize the location prediction model, the generalization ability of the location prediction model can be further improved.

[0137] Furthermore, based on the first, second, third, and / or fourth embodiments described above, a fifth embodiment of the page component display method of the present invention is proposed. In this embodiment, the method further includes:

[0138] Step A10: Obtain the training dataset collected based on the input features of the model to be trained and the training objective, and extract multiple training data groups from the training dataset;

[0139] In this embodiment, a superior training method for the scaling ratio prediction model and the location prediction model is proposed. This training method can be used to train the scaling ratio prediction model or the location prediction model.

[0140] A training model is set up based on the input features and training objective. This training model can be a linear regression model or a decision tree model. Specifically, to train a scaling prediction model, a training model can be set up based on the input features and training objective of the scaling prediction model; similarly, to train a location prediction model, a training model can be set up based on the input features and training objective of the location prediction model. The parameters in the training model need to be determined through training. The specific method for setting up the training model based on the input features and training objective varies depending on the model type and is not limited in this embodiment.

[0141] Obtain the training dataset based on the input features of the model to be trained and the training objective. The training dataset includes multiple training data points. Each training data point includes a set of feature data corresponding to the input features and a label data point corresponding to the training objective. For example, to train a scaling prediction model, a training data point includes a set of feature data (component size on the page and device resolution) and a label data point (page scaling ratio). To train a location prediction model, a training data point includes a set of feature data (component size on the page, component position on the page, device resolution, and page scaling ratio) and a label data point (component display position on the device's desktop). There are various ways to collect training data. For example, when a user views a page on their device, they may zoom and move the page to display a component at a suitable size and position. In this case, the device collects the page scaling ratio and the component's position on the device's desktop. Combining the component's size and position on the page with the device resolution generates training data for both the scaling prediction model and the location prediction model. Alternatively, training data tailored to user habits can be manually constructed.

[0142] After obtaining the training dataset, multiple training data sets are selected from it. Each training data set includes multiple training data points, and the number of training data points in each set is sufficient to calculate at least one set of candidate model parameters for the model to be trained. The number of training data sets can be set as needed. To improve the prediction accuracy of the trained model, the combined training data from the selected training data sets must cover at least all training data in the original training dataset; that is, each training data point in the original training dataset must belong to at least one training data set. Since the training data sets are obtained through selection, duplicate training data is allowed within each set.

[0143] Step A20: Each of the training data sets is fed into the model to be trained for calculation to obtain multiple sets of candidate model parameters for the model to be trained.

[0144] Each set of training data is fed into the model to be trained for calculation, resulting in multiple sets of candidate model parameters. In other words, feeding one set of training data into the model yields one set of candidate model parameters; feeding each set of training data into the model yields multiple sets of candidate model parameters. Specifically, this can be understood as treating the model parameters of the model to be trained as unknowns and feeding the training data sets into the model to calculate the solution to these unknowns.

[0145] Step A30: Count the amount of effective data in the training dataset whose error is within a preset range when using the parameters of each set of candidate models to predict the training data in the training dataset in the model to be trained.

[0146] After obtaining multiple sets of candidate model parameters, for each set of candidate model parameters, the model to be trained uses those parameters to predict each training data point in the training dataset. The prediction result for each training data point is obtained. Based on the prediction result and the label data in the training data, the prediction error can be calculated. If the prediction error for a training data point is within a preset range, that training data point is determined to be valid data corresponding to that set of candidate model parameters; otherwise, it is invalid data. The number of valid data points corresponding to that set of candidate model parameters is counted, i.e., the amount of valid data. The same statistical steps are performed on each set of candidate model parameters to obtain the amount of valid data corresponding to each set of candidate model parameters. The preset range can be set according to specific needs, representing the allowable error range.

[0147] Step A40: Determine the final model parameters based on the candidate model parameters corresponding to the largest effective data volume among the effective data volumes, and use the model to be trained, which is defined by the final model parameters, as the scaling model or the location prediction model.

[0148] The final model parameters of the model to be trained are determined based on the candidate model parameters corresponding to the largest effective data volume among the various effective data volumes. The model to be trained, defined by the final model parameters, is used as either the scaling model or the location prediction model. It can be understood that when setting the model to be trained and collecting the training dataset based on the input features and training objective of the scaling prediction model, the model to be trained, defined by the final model parameters, is used as the scaling prediction model; similarly, when setting the model to be trained and collecting the training dataset based on the input features and training objective of the location prediction model, the model to be trained, defined by the final model parameters, is used as the location prediction model.

[0149] Specifically, in one embodiment, the candidate model parameters with the largest amount of corresponding effective data can be directly selected as the final model parameters of the model to be trained.

[0150] In another embodiment, step A40 includes:

[0151] Step A401: Select the candidate model parameter corresponding to the largest effective data quantity among the effective data quantities as the effective model parameter;

[0152] Step A402: Obtain invalid training data whose error is not within the preset range when using the effective model parameters to predict training data in the training dataset in the model to be trained;

[0153] After obtaining the effective training data corresponding to each group of candidate model parameters, the candidate model parameter corresponding to the largest effective data volume among all effective data volumes can be taken as the effective model parameter. Invalid training data is then identified where the error in predicting training data in the training dataset using the effective model parameter is outside a preset range. If a prediction result is obtained by using the effective model parameter to predict a training data point in the training dataset, the prediction error is calculated based on the prediction result and the label data of that training data point. If the prediction error is outside a preset range, that training data point is considered invalid training data corresponding to the effective model parameter.

[0154] Step A403: The training data in each of the invalid training data in which the components can be displayed normally on the device desktop is taken as the critical training data;

[0155] Training data from invalid training data that shows components displaying correctly on the device desktop is used as critical training data. Specifically, the training data for both the scaling prediction model and the location prediction model includes the component's size on the page, the device's resolution, and the page scaling ratio. The component's display on the page, device resolution, and page scaling ratio from invalid training data can be used to detect whether the component can display correctly on the device desktop. The specific detection method can refer to the detection method in the third embodiment described above, and will not be repeated here. If a component in an invalid training data set displays correctly on the device desktop, then that invalid training data set can be used as critical training data.

[0156] Step A404: Use the critical training data to train and obtain the critical model parameters of the model to be trained;

[0157] The critical model parameters are obtained by training the model using critical training data. Specifically, the training method can be the same as that described in steps A10-A40 above, where each critical training data point is treated as a training dataset. The method described in steps A10-A40 above is then used to train this training dataset to obtain a set of model parameters, which serve as the critical model parameters. Alternatively, other machine learning model training methods can be used to train the critical model parameters using the critical training data; no restrictions are placed on this method.

[0158] Step A405: Combine the critical model parameters and the effective model parameters to obtain the final model parameters.

[0159] After obtaining the critical model parameters and the effective model parameters, the two sets of model parameters can be merged to obtain the final model parameters. Specifically, the final parameter values ​​for each parameter can be obtained by averaging or weighted averaging the parameters from the two sets of model parameters. The weights for the weighted average can be set based on the ratio of the amount of effective training data to the amount of critical training data; that is, the more training data a set of model parameters corresponds to, the greater its weight.

[0160] In this embodiment, critical training data that can be displayed normally on the device desktop is also utilized from the training data that did not participate in the training of effective model parameters. The model parameters obtained by training with critical training data and effective training data respectively are combined to obtain the final model parameters, so that the generalization ability of the trained scaling prediction model or location prediction model is stronger.

[0161] Furthermore, in one embodiment, the scaling ratio prediction model, the horizontal axis prediction model, and the vertical axis prediction model can all employ multinomial regression models. Specifically, in the multinomial regression model used for the scaling ratio prediction model, the exponents corresponding to the four feature terms—device resolution width x1, device resolution height x2, component width on the page x3, and component height on the page x4—increase sequentially. For example, the exponents for the four feature terms are 1, 2, 3, and 4, respectively. The expression for the scaling ratio prediction model is as follows:

[0162] Zoom = A1x1 + A2x2 2 +A3x3 3 +A4x4 4

[0163] A1 to A4 are the parameters in the scaling prediction model that needs to be trained.

[0164] Table 1 below shows some of the training data for the scaling prediction model:

[0165]

[0166] Table 1

[0167] In the multinomial regression model used for the horizontal axis prediction model, the exponents corresponding to the four feature terms—device resolution width, component width on the page, component's horizontal axis on the page, and page scaling ratio—increase sequentially. For example, if the exponents of the four feature terms are 1, 2, 3, and 4, the expression for the horizontal axis prediction model is as follows:

[0168] P x =B1y1+B2y2 2 +B3y3 3 +B4y4 4

[0169] B1 to B4 are the parameters in the scaling prediction model that needs to be trained.

[0170] Table 2 below shows some of the training data for the x-axis prediction model:

[0171] Device resolution Width Login box size Breadth Login box location Right Page scaling ratio Zoom Login box position P x ]] 393 384 0 112％ 207 384 630 70 100％ 180 375 400 15 121％ 192 428 380 0 106％ 201 ··· ··· ··· ··· ···

[0172] Table 2

[0173] In the multinomial regression model used as the ordinate prediction model, the exponents corresponding to the four feature terms—high device resolution, component length on the page, component's ordinate on the page, and page scaling ratio—increase sequentially. For example, if the exponents of the four feature terms are 1, 2, 3, and 4, the expression for the ordinate prediction model is as follows:

[0174] P y =C1z1+C2z2 2 +C3z3 3 +C4z4 4

[0175] C1 to C4 are the parameters in the scaling prediction model that needs to be trained.

[0176] Table 3 below shows some of the training data for the ordinate prediction model:

[0177] High device resolution Login box size Length Login box position Top Page scaling ratio Zoom <![CDATA[Login box position P y > 720 318 106 112％ 412 655 867.66 62 100％ 353 548 436 15 121％ 296 780 495 3 106％ 384 ··· ··· ··· ··· ···

[0178] Table 3

[0179] Furthermore, this embodiment of the invention also proposes a page component display device, referring to... Figure 4 The device includes:

[0180] The acquisition module 10 is used to acquire the component position and component size of the target component in the target page, and to acquire the device resolution of the target device;

[0181] The first prediction module 20 is used to predict the target scaling ratio based on the component size and the device resolution using a scaling ratio prediction model. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target.

[0182] The second prediction module 30 is used to predict the target position using a position prediction model based on the component size, the component position, the device resolution, and the target scaling ratio. The position prediction model is trained using the component size on the page, the component position on the page, the device resolution, and the page scaling ratio as input features, and the component display position on the device desktop as the training target.

[0183] Display module 40 is used to scale the target component according to the target scaling ratio and display the scaled target component at the target location on the target device desktop.

[0184] Furthermore, the location prediction model includes a horizontal coordinate prediction model and a vertical coordinate prediction model, and the second prediction module 30 includes:

[0185] The first prediction unit is used to predict the display horizontal coordinate of the target component on the target device desktop using the horizontal coordinate prediction model based on the component width in the component size, the component horizontal coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio. The horizontal coordinate prediction model is trained using the component width in the page, the component horizontal coordinate in the page, the device resolution width, and the page scaling ratio as input features, and the horizontal coordinate of the component when it is displayed on the device desktop as the training target.

[0186] The second prediction unit is used to predict the display ordinate of the target component on the target device desktop using the ordinate prediction model based on the component length in the component size, the component ordinate in the component position, the resolution height in the device resolution, and the target scaling ratio. The ordinate prediction model is trained using the component length on the page, the component ordinate on the page, the device resolution height, and the page scaling ratio as input features, and the ordinate of the component when it is displayed on the device desktop as the training target.

[0187] The first determining unit is used to take the displayed horizontal coordinate and the displayed vertical coordinate as the target position.

[0188] Furthermore, the device also includes:

[0189] The detection module is used to detect whether the scaled target component can be displayed normally on the target device desktop based on the device resolution and the size of the scaled target component.

[0190] The scaling module is used to, if not, reduce the scaled target component to the device resolution and display it at the center of the target device's desktop.

[0191] The display module 40 is used to perform the step of displaying the scaled target component at the target location on the target device desktop if the condition is met.

[0192] Furthermore, the detection module includes:

[0193] A calculation unit is used to calculate the target size of the scaled target component based on the component size and the target scaling ratio;

[0194] The detection unit is used to detect whether the length of the target size is greater than the resolution height of the device resolution, and to detect whether the width of the target size is greater than the resolution width of the device resolution;

[0195] The second determining unit is used to determine that the scaled target component cannot be displayed normally on the target device desktop if the size is greater than the resolution height or the size is greater than the resolution width.

[0196] The third determining unit is used to determine that the scaled target component can be displayed normally on the target device desktop if the length of the dimension is not greater than the resolution height and the width of the dimension is not less than the resolution width.

[0197] Furthermore, the device also includes:

[0198] The first generation module is configured to generate first training data based on the component size, the device resolution, the target scaling ratio, and the reduction ratio, and add the first training data to the first training dataset of the scaling ratio prediction model, so as to optimize the scaling ratio prediction model based on the first training dataset after adding the training data.

[0199] The second generation module is used to generate second training data based on the component size, the component position, the device resolution, the target scaling ratio, the reduction ratio, and the center position of the target device desktop, and add the second training data to the second training dataset of the location prediction model, so as to optimize the location dependency model based on the second training dataset after adding the training data.

[0200] Furthermore, the acquisition module 10 is also used to acquire a training dataset collected based on the input features of the model to be trained and the training objective, and to extract multiple training data groups from the training dataset.

[0201] The device further includes:

[0202] The calculation module is used to input each of the training data sets into the model to be trained for calculation to obtain multiple sets of candidate model parameters for the model to be trained.

[0203] The statistics module is used to count the amount of effective data in the training dataset whose error is within a preset range when using each set of candidate model parameters to predict the training data in the training dataset in the model to be trained.

[0204] The determination module is used to determine the final model parameters based on the candidate model parameters corresponding to the largest effective data volume among the effective data volumes, and to use the model to be trained defined by the final model parameters as the scaling model or the location prediction model.

[0205] Furthermore, the determining module includes:

[0206] The fourth determining unit is used to select the candidate model parameter corresponding to the largest effective data quantity among the effective data quantities as the effective model parameter;

[0207] The acquisition unit is used to acquire invalid training data whose error is not within the preset range when the effective model parameters are used to predict the training data in the training dataset in the model to be trained.

[0208] The fifth determining unit is used to take the training data in each of the invalid training data in which the components can be displayed normally on the device desktop as the critical training data;

[0209] A training unit is used to train the critical model parameters of the model to be trained using the critical training data.

[0210] The merging unit is used to merge the critical model parameters and the effective model parameters to obtain the final model parameters.

[0211] The extended content of the specific implementation of the page component display device of the present invention is basically the same as the various embodiments of the page component display method described above, and will not be repeated here.

[0212] Furthermore, embodiments of the present invention also propose a computer-readable storage medium storing a page component display program, wherein the page component display program, when executed by a processor, implements the steps of the page component display method described below.

[0213] The various embodiments of the page component display device and computer-readable storage medium of the present invention can be referred to the various embodiments of the page component display method of the present invention, and will not be described again here.

[0214] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0215] The sequence numbers of the above embodiments of the present invention are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0216] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of the present invention.

[0217] The above are merely preferred embodiments of the present invention and do not limit the scope of the patent. Any equivalent structural or procedural transformations made based on the description and drawings of the present invention, or direct or indirect applications in other related technical fields, are similarly included within the scope of patent protection of the present invention.

Claims

1. A method for displaying page components, characterized in that, The method includes the following steps: Obtain the position and size of the target component on the target page, and obtain the device resolution of the target device; A scaling ratio prediction model is used to predict the target scaling ratio based on the component size and the device resolution. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target. A location prediction model is used to predict the target location based on the component size, component position, device resolution, and target scaling ratio. The location prediction model is trained using the component's size on the page, component position on the page, device resolution, and page scaling ratio as input features, and the component's display position on the device's desktop as the training objective. The location prediction model includes a horizontal coordinate prediction model and a vertical coordinate prediction model. The step of using the location prediction model to predict the target location based on the component size, component position, device resolution, and target scaling ratio includes: using the horizontal coordinate prediction model to predict the horizontal coordinate of the target component on the target device's desktop based on the component width (component size), the horizontal coordinate of the component position, the resolution width (device resolution), and the target scaling ratio; using the vertical coordinate prediction model to predict the vertical coordinate of the target component on the target device's desktop based on the component length (component size), the vertical coordinate of the component position, the resolution height (device resolution), and the target scaling ratio; and using the horizontal and vertical coordinates as the target location. The target component is scaled according to the target scaling ratio, and the scaled target component is displayed at the target location on the target device desktop; First training data is generated based on the component size, the device resolution, the target scaling ratio, and the reduction ratio. The first training data is added to the first training dataset of the scaling ratio prediction model to optimize the scaling ratio prediction model based on the first training dataset after adding the training data. Second training data is generated based on the component size, component position, device resolution, target scaling ratio, reduction ratio, and center position of the target device desktop. The second training data is added to the second training dataset of the location prediction model to optimize the location prediction model based on the second training dataset after adding the training data.

2. The page component display method as described in claim 1, characterized in that, The horizontal coordinate prediction model is trained using the width of the component on the page, the horizontal coordinate of the component on the page, the width of the device resolution, and the scaling ratio of the page as input features, and the horizontal coordinate of the component when it is displayed on the device desktop as the training target. The ordinate prediction model is trained using the component's length on the page, the component's ordinate on the page, the device's resolution, and the page's scaling ratio as input features, and the ordinate of the component when it is displayed on the device's desktop as the training target.

3. The page component display method as described in claim 1, characterized in that, After the step of scaling the target component according to the target scaling ratio, the method further includes: Based on the device resolution and the size of the scaled target component, it is determined whether the scaled target component can be displayed normally on the target device desktop. If so, then perform the step of displaying the scaled target component at the target location on the target device desktop; If not, the scaled target component will be reduced to the size of the device resolution and displayed in the center of the target device's desktop.

4. The page component display method as described in claim 3, characterized in that, The step of detecting whether the scaled target component can be displayed normally on the target device desktop based on the device resolution and the scaled target component size includes: Calculate the target size of the scaled target component based on the component size and the target scaling ratio; Detect whether the length of the target size is greater than the resolution height of the device resolution, and detect whether the width of the target size is greater than the resolution width of the device resolution; If the length of the dimension is greater than the resolution height or the width of the dimension is greater than the resolution width, then it is determined that the scaled target component cannot be displayed normally on the target device desktop; If the length of the dimension is not greater than the resolution height and the width of the dimension is not less than the resolution width, then it is determined that the scaled target component can be displayed normally on the target device desktop.

5. The page component display method according to any one of claims 1 to 4, characterized in that, Before the step of predicting the target scaling ratio using a scaling ratio prediction model based on the component size and the device resolution, the method further includes: Obtain a training dataset collected based on the input features of the model to be trained and the training objective, and extract multiple training data groups from the training dataset; Each of the training data sets is fed into the model to be trained for calculation to obtain multiple sets of candidate model parameters for the model to be trained. The effective data volume with error within a preset range when using each set of candidate model parameters to predict training data in the training dataset in the model to be trained is counted respectively. The final model parameters are determined based on the candidate model parameters corresponding to the largest effective data volume among the various effective data volumes, and the model to be trained, defined by the final model parameters, is used as the scaling model or the location prediction model.

6. The page component display method as described in claim 5, characterized in that, The step of determining the final model parameters based on the candidate model parameters corresponding to the largest effective data volume among the effective data volumes includes: The candidate model parameter corresponding to the largest effective data volume among the various effective data volumes is taken as the effective model parameter; Obtain invalid training data whose error is not within the preset range when using the effective model parameters to predict training data in the training dataset in the model to be trained. The training data in which the components of each invalid training data can be displayed normally on the device desktop is taken as the critical training data. The critical model parameters of the model to be trained are obtained by using the critical training data. The critical model parameters and the effective model parameters are combined to obtain the final model parameters.

7. A page component display device, characterized in that, The device includes: The acquisition module is used to acquire the component position and component size of the target component in the target page, as well as the device resolution of the target device; The first prediction module is used to predict the target scaling ratio based on the component size and the device resolution using a scaling ratio prediction model. The scaling ratio prediction model is trained with the component size on the page and the device resolution as input features and the page scaling ratio as the training target. The second prediction module is used to predict the target position using a position prediction model based on the component size, the component position, the device resolution, and the target scaling ratio. The position prediction model is trained using the component size on the page, the component position on the page, the device resolution, and the page scaling ratio as input features, and the component's display position on the device desktop as the training target. The location prediction model includes a horizontal coordinate prediction model and a vertical coordinate prediction model. The second prediction module includes: a first prediction unit, used to predict the display horizontal coordinate of the target component on the target device desktop using the horizontal coordinate prediction model based on the component width in the component size, the component horizontal coordinate in the component position, the resolution width in the device resolution, and the target scaling ratio; a second prediction unit, used to predict the display vertical coordinate of the target component on the target device desktop using the vertical coordinate prediction model based on the component length in the component size, the component vertical coordinate in the component position, the resolution height in the device resolution, and the target scaling ratio; and a first determination unit, used to take the display horizontal coordinate and the display vertical coordinate as the target position. The display module is used to scale the target component according to the target scaling ratio and display the scaled target component at the target position on the desktop of the target device; The first generation module is configured to generate first training data based on the component size, the device resolution, the target scaling ratio, and the reduction ratio, and add the first training data to the first training dataset of the scaling ratio prediction model, so as to optimize the scaling ratio prediction model based on the first training dataset after adding the training data. The second generation module is used to generate second training data based on the component size, the component position, the device resolution, the target scaling ratio, the reduction ratio, and the center position of the target device desktop, and add the second training data to the second training dataset of the location prediction model to optimize the location prediction model based on the second training dataset after adding the training data.

8. A page component display device, characterized in that, The page component display device includes: a memory, a processor, and a page component display program stored in the memory and executable on the processor, wherein the page component display program, when executed by the processor, implements the steps of the page component display method as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a page component display program, which, when executed by a processor, implements the steps of the page component display method as described in any one of claims 1 to 6.

Images