Page generation method and corresponding apparatus

Abstract

The present application provides a page generation method, which is applied to a migration process for a historical page. The method comprises extracting a control image from a page image of a historical page input by a user, and then matching a corresponding control, thereby enabling batch generation of new pages with minimal manual intervention, and improving page generation efficiency while reducing page generation costs.

Description

A method and apparatus for generating a page

[0001] This application claims priority to Chinese Patent Application No. 202411754986.1, filed with the State Intellectual Property Office of China on December 2, 2024, entitled "A Page Generation Method and Corresponding Apparatus", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of software development, specifically to a page generation method and corresponding apparatus. Background Technology

[0003] In the user interfaces (UI) of various software applications, there are a large number of legacy pages. These pages are typically developed using high-code methods, resulting in excessively high maintenance costs and significant risks. Therefore, it is necessary to update these high-code pages to low-code pages to reduce maintenance costs and risks.

[0004] However, the process of updating page versions is cumbersome and costly. When there are a large number of pages, manually redeveloping the pages will result in low efficiency of page updates. Summary of the Invention

[0005] This application provides a page generation method for rapidly generating new interfaces identical to the old ones during the migration of old interfaces, thereby improving the efficiency of user page generation. This application also provides corresponding apparatus, computer-readable storage media, and computer program products.

[0006] This application provides a page generation method applied to a cloud management platform. The cloud management platform manages infrastructure providing cloud services. The infrastructure includes multiple regions, each region including at least one cloud data center. The cloud services run on at least one server in at least one cloud data center located in one of the multiple regions. The method includes: providing an image receiving interface for receiving a first image input by a user; extracting control images from the first image; wherein the first image is used to display static page information of a first page, and the first image is a prototype design of the first page; obtaining a target control matching the control image from a user page control library based on control information; wherein the compilation method of the first page is different from that of the second page, the compilation method of the first page is a programming language-based compilation method, and the compilation method of the second page is a GUI-based graphical compilation method; and generating a second page based on the target control and the position of the control image in the first image.

[0007] In this application, the number of first images can be one or more. When there are multiple first images, the page generation device can perform page generation operations on multiple first images simultaneously.

[0008] In this application, the first image is used to display static page information of the first page. The first image can be a prototype design of the first page or a screenshot of the first page. The prototype design can show the layout, elements, navigation structure, and interaction flow between the user and the first page. The screenshot of the first page can be an image of a page captured in advance by the user, or it can be an image of the entire interface of the first page captured by the user through a screenshot tool or screenshot plugin, or an image of a selected area of ​​the first page before being input into the image receiving interface.

[0009] In this application, the compilation method of the first page is a programming language-based compilation method. The source code of the first page can be written using a programming language (such as HTML, CSS, JavaScript, etc.), and the structure, style and interaction logic of the first page can be defined through the above programming language.

[0010] In this application, the second page is compiled using a GUI-based graphical compilation method. The second page can be quickly created by using a graphical user interface and pre-built components provided by a low-code platform, through dragging and dropping components and configuring a small amount of code.

[0011] In this application, the user page control library contains various graphic elements commonly used in user pages (such as buttons, text boxes, drop-down menus, etc.). The controls in the user page control library can be imported by the user or obtained by connecting to an existing GUI control library interface.

[0012] In this application, the control image can be an image area containing the control in the first image. The number of control images can be one or more. When there are multiple control images, the page generation device can extract the control images sequentially according to the display order of the controls corresponding to the multiple control images.

[0013] In this application, the target control is a control whose control information matches that of the control image. The target control can perform the same or similar functions on the second page as the matched control image on the first page.

[0014] In the first aspect mentioned above, the page generation device extracts the control image from the input first image, obtains the target control that matches the control image from the user page control library, and uses the target control and the position of the control image in the first image to generate the second page. This improves the generation efficiency of the second page that provides similar functions to the first page, reduces the development and maintenance costs of the second page, and can process the first images in batches when different first images exist, thereby improving the development efficiency of the user page.

[0015] In one possible implementation, the target control matching the control image is obtained from the user page control library based on the control information, including: classifying the control image according to the control information; and obtaining controls with similarity within a preset range from the user page control library based on the classification results as the target control.

[0016] In this application, there can be one or more controls with similarity within a preset range. When there are multiple controls, the page generation device selects the control with the highest similarity as the target control. The size of the preset range can be pre-configured in the page generation device based on historical experience values.

[0017] Alternatively, the target control can be selected directly by the user from the user page control library, or the user can select one of the controls with similarity within a preset range.

[0018] In this application, control images are classified according to control information, including: classifying control images based on the control type and the text description of the control image; wherein, the control type is used to indicate the function of the control image, and the text description is used to indicate the specific effect achieved by the control image on the first page.

[0019] In this application, control information includes the control type of the control image and a text description of the control image. The control type includes buttons, labels, text boxes, checkboxes, etc., and the text description includes the specific effect implemented by the button. For example, the text description of a control could be "This control is used to navigate to another control after the user clicks on it."

[0020] In this possible implementation, the page generation device obtains controls with similarity within a preset range from the user page control library based on the control information as the target controls for matching, and generates a second page that provides similar functions to the first page based on the target controls, thereby improving the matching degree between the second page and the first page and improving the development efficiency of the second page through similarity comparison.

[0021] In one possible implementation, extracting control images from the first image includes: generating a marker layer based on the first image; wherein the number of layers in the marker layer is determined by the hierarchical relationship of the control images in the first image, and the hierarchical relationship is used to indicate the display order of the controls corresponding to the control images on the first page; and migrating the control images from the first image to the corresponding layers of the marker layer.

[0022] In this application, the hierarchical relationship of the control images in the first image can be determined according to the rendering order of the components in the first page. The rendering order of the components can be defined by setting their declaration order in the template or their order in the data array.

[0023] Optionally, the display order of the controls corresponding to the control images on the first page can also be changed according to the user's interaction behavior. For example, the user can change the display order of the components by clicking buttons or links and dragging components, so that a component changes from the bottom layer of the page to the top layer of the page.

[0024] In this application, the marker layer is used to store the control images of each level, and the number of marker layers is the same as the number of layers occupied by the controls corresponding to all control images on the first page.

[0025] In this possible implementation, the page generation device generates a marker layer based on the hierarchical relationship of the control images in the first image, and migrates the control images to the corresponding layer of the marker layer, thereby improving the accuracy of the generated second page display.

[0026] In one possible implementation, migrating the control image from the first image to the corresponding layer of the marker layer includes: marking the outline of the control image in the first image based on the hierarchical relationship of the control images in the first image; migrating the content of the first region to the marker layer corresponding to the hierarchical relationship of the control image, wherein the first region is the region marked by the outline of the control image; filling the first region with the color of the second region; wherein the second region is the region remaining in the first image after migrating the first region to the corresponding layer of the marker layer.

[0027] In this application, the outline of the control image is used to mark the area where the control image is located, and the outline of the control image can be annotated using methods such as semantic segmentation and object recognition.

[0028] Optionally, the labeling methods for control images may also include image labeling methods such as rectangle labeling and key point labeling.

[0029] In this application, the second region can be the surrounding area of ​​the first region. Filling the migrated area of ​​the first region with the color of the second region can improve the accuracy of extracting the control image when migrating the control image of the next layer below the first image.

[0030] In this possible implementation, by migrating the current layer control image to the marker layer and then filling in the remaining empty areas after the migration, the recognition rate of the control image can be improved when marking the outline of the control image in the next layer, thereby improving the generation efficiency of the user page.

[0031] In one possible implementation, generating a second page based on a first control and a first image includes: generating a layer container for the second page based on a marker layer, the layer container including multiple page layers, the number of page layers being the same as the number of marker layers; setting the first control in the corresponding layer of the page layer, wherein the number of layers in the marker layer containing the control image matching the first control is the same as the number of layers in the corresponding layer of the page layer; merging the multiple page layers and rendering to generate the second page.

[0032] In this application, a layer container is used to load and manage the page layers that generate the second page, and each page layer contains one or more first controls. The layer number of each first control determines its display order on the second page. That is, the higher the layer number of the first control, the later it is displayed on the second page.

[0033] In this possible implementation, multiple second pages can be generated in batches by merging and rendering multiple page layers in the layer container to generate the second page, thus improving the generation efficiency of the second page.

[0034] One possible implementation also includes obtaining the first coordinate position of the control image within the first image;

[0035] Setting the first control in the corresponding layer of the page layer includes: setting the first control at the second coordinate position in the corresponding layer of the page layer; wherein the second coordinate position of each first control is the same as the first coordinate position of the matching control image, and the size of each first control is the same as the size of the matching control image.

[0036] In this application, the first coordinate position may include the x-coordinate and y-coordinate values ​​of the control image in the first image; the second coordinate position may include the x-coordinate and y-coordinate values ​​of the first control in the page layer.

[0037] In this possible implementation, the first control is set in the same position in the page layer as the control image in the first image, so that the generated second page has the same or similar page display effect as the first page, thereby improving the similarity between the second page and the first page and improving the accuracy of generating the second page.

[0038] A second aspect of this application provides a page generation apparatus, comprising:

[0039] The transceiver unit is used to provide an image receiving interface, which is used to receive the first image input by the user.

[0040] The processing module is used to extract control images from the first image; wherein, the first image is used to display the static page information of the first page, and the first image is the prototype design of the first page;

[0041] The processing module is also used to obtain the target control that matches the control image from the control library on the user page based on the control information; wherein, the compilation method of the first page is different from that of the second page. The compilation method of the first page is a programming language-based compilation method, while the compilation method of the second page is a GUI-based graphical compilation method.

[0042] The processing module is also used to generate a second page based on the position of the target control and its image in the first image.

[0043] In one possible implementation, the processing module is also used to classify control images based on control information;

[0044] Based on the classification results, select controls with similarity within a preset range from the user page control library as target controls.

[0045] In one possible implementation, the control information includes the control type of the control image and a text description of the control image;

[0046] The processing module is also used to classify control images based on their control type and text description; the control type indicates the function of the control image, and the text description indicates the specific effect achieved by the control image on the first page.

[0047] In one possible implementation, the processing module is further configured to generate a marker layer based on the first image; wherein the number of marker layers is determined by the hierarchy of the control images in the first image, and the hierarchy is used to indicate the display order of the controls corresponding to the control images on the first page;

[0048] The processing module is also used to migrate the control image from the first image to the corresponding layer of the marker layer.

[0049] In one possible implementation, the processing module is further used to mark the outline of the control images in the first image based on the hierarchical relationship of the control images in the first image;

[0050] The processing module is also used to migrate the content of the first region to the marker layer corresponding to the hierarchical relationship of the control image. The first region is the region marked by the outline of the control image.

[0051] The processing module is also used to fill the first region with the color of the second region; wherein the second region is the region remaining in the first image after the first region is migrated to the corresponding layer of the marker layer.

[0052] In one possible implementation, the processing module is also used to generate a layer container for the second page based on the marker layer. The layer container includes multiple page layers, and the number of page layers is the same as the number of marker layers.

[0053] The processing module is also used to set the first control in the corresponding layer of the page layer, wherein the layer number of the marker layer where the control image matching the first control is located is the same as the layer number of the corresponding layer of the page layer;

[0054] The processing module is also used to merge multiple page layers and render a second page.

[0055] In one possible implementation, the processing module is also used to obtain the first coordinate position of the control image in the first image;

[0056] The processing module is also used to set the first control at the second coordinate position in the corresponding layer of the page layer; wherein the second coordinate position of each first control is the same as the first coordinate position of the matching control image, and the size of each first control is the same as the size of the matching control image.

[0057] A third aspect of this application provides a page generation apparatus. The apparatus may include at least one processor, a memory, and a communication interface. The processor is coupled to the memory and the communication interface. The memory stores instructions, the processor executes the instructions, and the communication interface communicates with other devices under the control of the processor. When executed by the processor, the instructions cause the processor to perform the methods of the first aspect or any possible implementation thereof.

[0058] Fourthly, this application provides a computing device including a memory and a processor, the memory storing program instructions, and the processor executing the program instructions to perform the methods provided in the first aspect of this application and any possible implementation thereof.

[0059] Fifthly, this application provides a computing device cluster, including multiple computing devices, each computing device including multiple processors and multiple memories, the multiple memories storing program instructions, and the multiple processors executing the program instructions, causing the computing device cluster to perform the methods provided in the first aspect of this application and any possible implementation thereof.

[0060] In a sixth aspect, this application provides a computer-readable storage medium that is a non-volatile computer-readable storage medium, the computer-readable storage medium including program instructions that, when executed on a computing device, cause the computing device to perform the methods provided in the first aspect of this application and any of its possible implementations.

[0061] In a seventh aspect, this application provides a computer program product containing instructions that, when run on a computer, cause the computer to perform the methods provided in the first aspect of this application and any of its possible implementations.

[0062] The technical effects of the second aspect or any possible implementation of the second aspect, the third aspect, the fourth aspect, the fifth aspect, the sixth aspect, or the seventh aspect can be found in the first aspect or the technical effects of different possible implementations of the first aspect, and will not be repeated here.

[0063] Based on the implementation methods provided in the above aspects, this application can be further combined to provide more implementation methods. Attached Figure Description

[0064] Figure 1A is a schematic diagram of the architecture of the cloud management platform provided in an embodiment of this application;

[0065] Figure 1B is a schematic diagram of the architecture of the page generation system provided in an embodiment of this application;

[0066] Figure 2 is a schematic diagram of an embodiment of the page generation method provided in this application;

[0067] Figure 3 is a schematic diagram of another embodiment of the page generation method provided in this application;

[0068] Figure 4 is a schematic diagram of another embodiment of the page generation method provided in this application;

[0069] Figure 5 is a schematic diagram of an embodiment of the page generation method provided in this application for generating a second page;

[0070] Figure 6 is a schematic diagram of another embodiment of the page generation method provided in this application for generating a second page;

[0071] Figure 7 is a schematic diagram of another embodiment of the page generation method provided in this application for generating a second page;

[0072] Figure 8 is a structural schematic diagram of the page generation apparatus provided in an embodiment of this application;

[0073] Figure 9 is a structural schematic diagram of a computing device provided in an embodiment of this application;

[0074] Figure 10 is a schematic diagram of a computing device cluster provided in an embodiment of this application;

[0075] Figure 11 is another structural schematic diagram of the computing device cluster provided in an embodiment of this application. Detailed Implementation

[0076] The embodiments of this application are described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. As those skilled in the art will understand, with the development of technology and the emergence of new scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.

[0077] The terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in a sequence other than that illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0078] In the embodiments of this application, the terms "exemplary" or "for example" are used to indicate that something is an example, illustration, or description. Any embodiment or design that is described as "exemplary" or "for example" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or design. Specifically, the use of the terms "exemplary" or "for example" is intended to present the relevant concepts in a specific manner.

[0079] For ease of understanding, some technical terms involved in the embodiments of this application will be introduced below.

[0080] (1) Cloud database: refers to a database built, deployed, and accessed in a private cloud, public cloud, or hybrid cloud environment. A cloud database can be a database deployed by the customer on the cloud infrastructure, or it can be a fully managed Database as a Service (DBaaS) provided by a cloud provider. Similar to other cloud services, cloud databases have advantages such as agility, support for elastic scaling, and low operation and maintenance costs, and more and more customers are choosing to use cloud databases for backend data storage.

[0081] (2) Cloud data center: refers to a data center based on cloud computing architecture, which integrates computing, storage, network and other resources. It provides the physical environment required for cloud computing, including servers, storage devices, network devices, etc., and provides various cloud services, such as IaaS (Infrastructure as a Service), PaaS (Platform as a Service) and SaaS (Software as a Service).

[0082] (3) User interface (UI): refers to the overall design of the visual and auditory elements such as screen, menu, button, icon, text, audio, and video that users see when interacting with a computer or other electronic devices.

[0083] (4) UI controls: These are the basic elements that make up a user interface. These controls can receive user input or display information, helping users interact with applications or websites.

[0084] (5) A graphical user interface (GUI) is a method of presenting a user interface in a graphical way. It uses graphics, symbols, and colors to replace traditional text commands, allowing users to operate computers or other devices intuitively.

[0085] (6) In the embodiments of this application, "send" and "receive" indicate the direction of signal transmission. For example, "send information to XX" can be understood as the destination of the information being XX, which may include sending directly through the air interface or sending indirectly through the air interface by other units or modules. "Receive information from YY" can be understood as the source of the information being YY, which may include receiving directly from YY through the air interface or receiving indirectly from YY through the air interface by other units or modules. "Send" can also be understood as the "output" of the chip interface, and "receive" can also be understood as the "input" of the chip interface.

[0086] (7) The terms "system" and "network" in the embodiments of this application can be used interchangeably. "Multiple" refers to two or more. "And / or" describes the relationship between related objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist simultaneously, or B exists alone, where A and B can be singular or plural. The character " / " generally indicates that the related objects before and after are in an "or" relationship. "At least one of the following" or similar expressions refer to any combination of these items, including any combination of single or plural items. For example, "at least one of A, B and C" includes A, B, C, AB, AC, BC or ABC. And, unless otherwise specified, the ordinal numbers such as "first" and "second" mentioned in the embodiments of this application are used to distinguish multiple objects and are not used to limit the order, sequence, priority or importance of multiple objects.

[0087] (8) In the embodiments of this application, "instruction" may include direct instruction and indirect instruction, as well as explicit instruction and implicit instruction. The information indicated by a certain piece of information (as described below, the instruction information) is called the information to be instructed. In the specific implementation process, there are many ways to indicate the information to be instructed, such as, but not limited to, directly indicating the information to be instructed, such as the information to be instructed itself or its index. It can also indirectly indicate the information to be instructed by indicating other information, where there is an association between the other information and the information to be instructed; or it can only indicate a part of the information to be instructed, while the other parts of the information to be instructed are known or pre-agreed upon. For example, the instruction can be implemented by using a pre-agreed (e.g., protocol pre-defined or pre-configured) arrangement order of various information, thereby reducing the instruction overhead to a certain extent. This application does not limit the specific method of instruction. It is understood that for the sender of the instruction information, the instruction information can be used to indicate the information to be instructed; for the receiver of the instruction information, the instruction information can be used to determine the information to be instructed.

[0088] In this application, unless otherwise specified, the same or similar parts between the various embodiments can be referred to each other. In the various embodiments of this application, and the various methods / designs / implementations within each embodiment, unless otherwise specified or logically conflicting, the terminology and / or descriptions between different embodiments and between the various methods / designs / implementations within each embodiment are consistent and can be mutually referenced. The technical features in different embodiments and the various methods / designs / implementations within each embodiment can be combined to form new embodiments, methods, or implementations based on their inherent logical relationships. The following descriptions of the embodiments of this application do not constitute a limitation on the scope of protection of this application.

[0089] To make the technical solution of this application clearer and easier to understand, the architecture of the cloud management platform of this application will be described below with reference to the accompanying drawings.

[0090] Referring to Figure 1A, which illustrates an architecture of a cloud management platform 10, the platform includes a cloud server 100 and a connector 200. The cloud server 100 is deployed in a cloud environment, which can be a cluster of computing devices built by a cloud service provider to offer computing, storage, and network resources. The connector 200 is deployed in the user environment. The connector 200 is integrated into the application 20; in other words, both the connector 200 and the application 20 are deployed in the user environment, and the connector 200 aligns with the user's usage scenario. A cloud database 30 is also deployed in the cloud environment. The application 20 can access the cloud database 30 to read and write data, thereby enabling corresponding business operations.

[0091] The cloud server 100 is used to extract control images from the first image. Specifically, the cloud server 100 can receive the first image provided by the user and then extract the control images from it. For example, application 20 can receive the first image input by the user through its UI and then send it to the cloud server 100.

[0092] The user interface can be a GUI or a command user interface (CUI). For ease of understanding, this application uses the example of application 20 receiving a first image through a GUI.

[0093] The system architecture of the page generation system provided in this application can also be seen in Figure 1B. As shown in Figure 1B, the page generation system may include a prototype control layer marker, a UI control matching engine, and a multi-layer UI generation engine.

[0094] Specifically, the prototype control layering marker may include a prototype UI control extractor and a prototype layered control management module. The prototype UI control extractor is used to extract control images from the first image, while the prototype layered control management module is responsible for managing the control images extracted from the first image and sending the control images to the UI control matching engine.

[0095] The UI control matching engine can include a control model matcher, a UI control model management module, and a UI layer marker model. The control model matcher retrieves target controls from the user page control library that match the control images based on control information; the UI control model management module manages the matched target controls; and the UI layer marker model records the position and size information of the target controls within the UI layers.

[0096] The multi-layer UI generation engine can include a UI layer generation engine and a UI page generation engine. The UI layer generation engine is used to generate a layer container corresponding to the first page, and the UI page generation engine is used to generate a second page based on the page layers in the layer container.

[0097] Based on the aforementioned cloud management platform and page generation system, please refer to Figure 2. The page generation method provided in this application includes:

[0098] S201. Provides an image receiving interface.

[0099] In this application, the image receiving interface is used to receive a first image input by the user. The first image includes a pre-captured image of the first page or a prototype design of the first page. The first image can be obtained through user input, import, or extraction from a database. For example, the first image can be pre-stored in a database, and the user inputs the first image to the image receiving interface by calling the database. Of course, the first image can also be pre-collected by the user, for example, by capturing a screenshot of the first page in real time and importing the first image to the image receiving interface. Therefore, there are many ways to input the first image, and no specific limitation is made here.

[0100] S202. Extract the control images from the first image.

[0101] In this application, the first image is used to display static page information of the first page. The first image can be a prototype design of the first page or a screenshot of the first page. The prototype design can show the layout, elements, navigation structure, and interaction flow between the user and the first page. The screenshot of the first page can be an image of a page captured in advance by the user, or it can be an image of the entire interface of the first page captured by the user through a screenshot tool or screenshot plugin, or an image of a selected area of ​​the first page before being input into the image receiving interface.

[0102] In this application, the compilation method of the first page is a programming language-based compilation method. The source code of the first page can be written using a programming language (such as HTML, CSS, JavaScript, etc.), and the structure, style and interaction logic of the first page can be defined through the above programming language.

[0103] In this application, the control image is the image area containing the control in the first image. The number of control images can be one or more. When there are multiple control images, the page generation device can extract the control images sequentially according to the display order of the controls corresponding to the multiple control images.

[0104] In this application, the display order of controls can be determined according to the logical order in which the user uses the first page, or according to the importance of the page content to be displayed on the first page.

[0105] In this application, before extracting the control images, the page generation device may also create a marker layer according to the display order of the controls. The marker layer includes multiple layers, and each layer stores control images with the same display order.

[0106] S203. Based on the control information, retrieve the target control that matches the control image from the control library on the user page.

[0107] In this application, the user page control library contains various graphic elements commonly used in user pages (such as buttons, text boxes, drop-down menus, etc.). The controls in the user page control library can be imported by the user or obtained by connecting to an existing GUI control library interface.

[0108] S204. Generate the second page based on the position of the target control and its image in the first image.

[0109] In this application, the compilation method for the first page differs from that for the second page. The first page is compiled using a programming language-based method, while the second page is compiled using a GUI (Graphical User Interface). The GUI-based page is generated using a graphical user interface and pre-built components provided by a low-code platform, and can be quickly created by dragging and dropping components and configuring minimal code.

[0110] As described above, the solution provided in this application converts a code-based first page into a GUI-based second page using image extraction controls, eliminating the need for users to re-understand and reprogram the first page, thus achieving batch page conversion. When there are a large number of historical code-based pages, corresponding second pages can be quickly created on a low-code GUI platform, reducing user page development and maintenance costs and improving the efficiency of batch user page development.

[0111] In one possible embodiment, the step of obtaining the target control matching the control image from the user page control library based on the control information can also be as shown in Figure 3.

[0112] S301. Categorize control images based on control information.

[0113] In this application, the page generation device classifies control images based on the control type of the control image and the text description of the control image.

[0114] The control type indicates the function of the control image, while the text description indicates the specific effect the control image achieves on the first page. Control types include buttons, labels, text boxes, checkboxes, etc., and the text description includes the specific effect a button achieves. For example, a control's text description could be "This control is used to navigate to another control after the user clicks it."

[0115] S302. Based on the classification results, obtain controls with similarity within a preset range from the user page control library as target controls.

[0116] In this application, the user page control library can store controls in the form of a list, which also includes control number information, style examples, control function information, etc.

[0117] In this application, there can be one or more controls with similarity within a preset range. When there are multiple controls, the page generation device selects the control with the highest similarity as the target control. The size of the preset range can be pre-configured in the page generation device based on historical experience values.

[0118] Alternatively, the target control can be selected directly by the user from the user page control library, or the user can select one of the controls with similarity within a preset range.

[0119] In this possible embodiment, the page generation device obtains controls with similarity within a preset range from the user page control library based on the control information as the matching target controls, and generates a second page that provides similar functions to the first page based on the target controls, thereby improving the matching degree between the second page and the first page and improving the development efficiency of the second page by similarity comparison.

[0120] In one possible embodiment, the step of extracting the control image from the first image may also be as shown in Figure 4.

[0121] S401. Generate a marker layer based on the first image.

[0122] The number of layers in the marker layer is determined by the hierarchy of the control images in the first image. The hierarchy is used to indicate the display order of the controls corresponding to the control images on the first page.

[0123] In this application, the hierarchical relationship of the control images in the first image can be determined according to the rendering order of the components in the first page. The rendering order of the components can be defined by setting their declaration order in the template or their order in the data array.

[0124] In this application, the marker layer is used to store the control images of each level. The number of marker layers is the same as the number of layers occupied by the controls corresponding to all the control images on the first page. For example, if the maximum display order of the controls corresponding to the first image on the first page is 3, then the marker layer also includes 3 marker layers.

[0125] S402. Move the control image from the first image to the corresponding layer of the marker layer.

[0126] In this application, the page generation device marks the outline of the control images in the first image based on the hierarchical relationship of the control images in the first image; migrates the content of the first region to the marker layer corresponding to the hierarchical relationship of the control images, wherein the first region is the region marked by the outline of the control images; and fills the first region with the color of the second region; wherein the second region is the region remaining in the first image after the first region is migrated to the corresponding layer of the marker layer.

[0127] In this application, the outline of the control image is used to mark the area where the control image is located, and the outline of the control image can be annotated using methods such as semantic segmentation and object recognition.

[0128] Optionally, the labeling methods for control images may also include image labeling methods such as rectangle labeling and key point labeling.

[0129] In this application, the second region can be the surrounding area of ​​the first region. Filling the migrated area of ​​the first region with the color of the second region can improve the accuracy of extracting the control image when migrating the control image of the next layer below the first image.

[0130] In one possible embodiment, by migrating the current layer control image to the marker layer and then filling in the remaining empty areas after the migration, the recognition rate of the control image can be improved when marking the outline of the control image in the next layer, thereby improving the generation efficiency of the user page.

[0131] In this application, S401 and S402 described above can also be as shown in Figure 5. Referring to Figure 5, Figure 5 illustrates the process of migrating control image 1 and control image 2 in the first image to the marker layer.

[0132] The first image contains control image 1 and control image 2. The page generation device first marks the outline of control image 1 in the first image, and then migrates the content of the marked area in the outline of control image 1 to mark layer 1 in the mark layer.

[0133] At this point, the original location of control image 1 in the first image is a blank area. Next, the page generation device marks the outline of control image 2 in the first image and migrates the marked area within the outline of control image 2 to markup layer 2 in the markup layer. At this point, the original location of control image 2 in the first image is also a blank area.

[0134] In this application, the page generation device will also fill in the blank area after removing the control image, and the specific process can be seen in Figure 6.

[0135] Specifically, the page generation device uses the area where control image 1 is located as the first area and the surrounding area of ​​control image 1 as the second area. After removing control image 1, the original area where control image 1 was located is a blank area, and the page generation device fills the blank area with the color of the second area.

[0136] The second region can be the surrounding area of ​​the first region, or it can be a region of the same or similar color as the surrounding area of ​​the first region.

[0137] By using the above method, the page generation device can extract control images without being affected by blank areas in the next extraction, thus improving the accuracy of control image extraction.

[0138] In one possible embodiment, the step of the page generation device generating a second page based on the first control and the first image further includes:

[0139] Generate a layer container for the second page based on the marked layer; set the first control in the corresponding layer of the page layer; merge multiple page layers and render to generate the second page.

[0140] In this application, the layer container includes multiple page layers, and the number of page layers is the same as the number of marker layers. That is, the number of marker layers where the control image matching the first control is located is the same as the number of corresponding layers of the page layers.

[0141] In this application, a layer container is used to load and manage the page layers that generate the second page, and each page layer contains one or more first controls. The layer number of each first control determines its display order on the second page. That is, the higher the layer number of the first control, the later it is displayed on the second page.

[0142] In this application, the rendered second page performs the same or similar functions as the input first page.

[0143] In one possible embodiment, the page generation method further includes obtaining the first coordinate position of the control image in the first image;

[0144] Setting the first control in the corresponding layer of the page layer includes: setting the first control at the second coordinate position in the corresponding layer of the page layer; wherein the second coordinate position of each first control is the same as the first coordinate position of the matching control image, and the size of each first control is the same as the size of the matching control image.

[0145] In this application, the first coordinate position can be used to indicate the x and y coordinate values ​​of the control image in the first image; the second coordinate position can be used to indicate the x and y coordinate values ​​of the first control in the page layer. The origin of the coordinates can be the lower left corner of the first image and the lower left corner of the page layer, respectively, and the position of the origin can be set by the user.

[0146] In this possible embodiment, the first control is set in the same position in the page layer as the control image in the first image, and the first control and the matching control image are the same size, so that the generated second page has the same or similar page display effect as the first page, thereby improving the similarity between the second page and the first page and improving the accuracy of generating the second page.

[0147] The above steps can be understood through Figure 7. As shown in Figure 7, the page generation device matches the control images in the obtained mark layer with the controls in the user page control library to obtain the first control 1 that matches control image 1 and the first control 2 that matches control image 2.

[0148] After placing the first control 1 and the second control 2 into the corresponding page layers in the layer container, the page generation device merges and renders the page layers in the entire layer container to generate the second page.

[0149] The above is a detailed description of the page generation method provided in the embodiments of this application. The page generation apparatus provided in the embodiments of this application will be described below. Figure 8 is a schematic structural diagram of a page generation apparatus 800 provided in the embodiments of this application. As shown in Figure 8, the page generation apparatus includes:

[0150] The transceiver module 801 is used to provide an image receiving interface, which is used to receive the first image input by the user;

[0151] The processing module 802 is used to extract control images from the first image; wherein, the first image is used to display static page information of the first page, and the first image is the prototype design of the first page.

[0152] The processing module 802 is also used to obtain the target control that matches the control image from the control library on the user page according to the control information; wherein, the compilation method of the first page is different from that of the second page. The compilation method of the first page is a programming language-based compilation method, while the compilation method of the second page is a GUI-based graphical compilation method.

[0153] Processing module 802 is also used to generate a second page based on the position of the target control and the control image in the first image.

[0154] Optionally, the processing module 802 is also used to classify the control images according to the control information; and to obtain the controls with similarity within a preset range from the user page control library based on the classification results as the target controls.

[0155] Optionally, the control information includes the control type of the control image and a text description of the control image;

[0156] The processing module 802 is also used to classify control images based on the control type and the text description of the control images; wherein, the control type is used to indicate the function of the control image, and the text description is used to indicate the specific effect implemented by the control image on the first page.

[0157] Optionally, the processing module 802 is further configured to generate a marker layer based on the first image; wherein the number of marker layers is determined by the hierarchical relationship of the control images in the first image, and the hierarchical relationship is used to indicate the display order of the controls corresponding to the control images on the first page;

[0158] Optionally, the processing module 802 is also used to migrate the control image from the first image to the corresponding layer of the marker layer.

[0159] Optionally, the processing module 802 is further configured to mark the outline of the control images in the first image based on the hierarchical relationship of the control images in the first image;

[0160] Optionally, the processing module 802 is further configured to migrate the content of the first region to the marker layer corresponding to the hierarchical relationship of the control image, wherein the first region is the region marked by the outline of the control image;

[0161] Optionally, the processing module 802 is further configured to fill the first region with the color of the second region; wherein the second region is the region remaining in the first image after the first region is migrated to the corresponding layer of the marker layer.

[0162] Optionally, the processing module 802 is also used to generate a layer container for the second page based on the markup layer, the layer container including multiple page layers, the number of page layers being the same as the number of markup layers;

[0163] Optionally, the processing module 802 is further configured to set the first control in the corresponding layer of the page layer, wherein the number of layers of the marker layer where the control image matching the first control is located is the same as the number of layers of the corresponding layer of the page layer;

[0164] Optionally, the processing module 802 is also used to merge multiple page layers and render a second page.

[0165] Optionally, the processing module 802 is also used to obtain the first coordinate position of the control image in the first image;

[0166] Optionally, the processing module 802 is further configured to set the first control at a second coordinate position in the corresponding layer of the page layer; wherein the second coordinate position of each first control is the same as the first coordinate position of the matching control image, and the size of each first control is the same as the size of the matching control image.

[0167] The above-mentioned content regarding the transceiver module 801 and processing module 802 of the page generation device 800 can be understood by referring to the relevant content in the foregoing method embodiment section, and will not be repeated here.

[0168] The following provides examples illustrating the basic hardware structures involved in the embodiments of this application.

[0169] This application also provides a computing device 900. As shown in FIG9, the computing device 900 includes: a memory 901, a bus 902, a processor 903, and a communication interface 904. The processor 903, the memory 901, and the communication interface 904 communicate with each other via the bus 902. The computing device 900 may be a server or a terminal device. It should be understood that this application does not limit the number of processors and memories in the computing device 900.

[0170] Bus 902 can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, only one line is used in Figure 9, but this does not indicate that there is only one bus or one type of bus. Bus 902 can include pathways for transmitting information between various components of computing device 900 (e.g., memory 901, processor 903, communication interface 904).

[0171] The processor 903 may include any one or more processors such as a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0172] The memory 901 may include volatile memory, such as random access memory (RAM). The processor 903 may also include non-volatile memory, such as read-only memory (ROM), flash memory, hard disk drive (HDD), or solid state drive (SSD).

[0173] The memory 901 stores executable program code, and the processor 903 executes this executable program code to implement the functions of the aforementioned transceiver module 801 and processing module 802, thereby implementing the page generation method. That is, the memory 901 stores instructions for executing the page generation method.

[0174] The communication interface 904 uses transceiver modules such as, but not limited to, network interface cards and transceivers to enable communication between the computing device 900 and other devices or communication networks.

[0175] This application also provides a computing device cluster. The computing device cluster includes at least one computing device. The computing device can be a server, such as a central server, an edge server, or a local server in a local data center. In some embodiments, the computing device can also be a terminal device such as a desktop computer, a laptop computer, or a smartphone.

[0176] As shown in Figure 10, the computing device cluster includes at least one computing device 900. The memory 901 in one or more computing devices 900 within the computing device cluster may store the same instructions for executing page generation methods.

[0177] In some possible implementations, the memory 901 of one or more computing devices 900 in the computing device cluster may also store partial instructions for executing the page generation method. In other words, a combination of one or more computing devices 900 can jointly execute the instructions for the page generation method.

[0178] It should be noted that the memories 901 in different computing devices 900 within the computing device cluster can store different instructions, each used to execute a portion of the functions based on the page generation device. That is, the instructions stored in the memories 901 of different computing devices 900 can implement the functions of one or more modules in the transceiver module 801 and the processing module 802.

[0179] In some possible implementations, one or more computing devices in a computing device cluster can be connected via a network. This network can be a wide area network (WAN) or a local area network (LAN), etc. Figure 11 illustrates one possible implementation. As shown in Figure 11, two computing devices 900A and 900B are connected via a network. Specifically, they are connected to the network through communication interfaces in each computing device. In this type of possible implementation, the memory 901 in computing device 900A stores instructions for performing the functions of the transceiver module 801. Simultaneously, the memory 901 in computing device 900B stores instructions for performing the functions of the processing module 802.

[0180] It should be understood that the functions of computing device 900A shown in Figure 11 can also be performed by multiple computing devices 900. Similarly, the functions of computing device 900B can also be performed by multiple computing devices 900.

[0181] This application also provides another computing device cluster. The connection relationship between the computing devices in this computing device cluster can be similarly referred to the connection method of the computing device clusters in Figures 10 and 11. The difference is that the memory 901 of one or more computing devices 900 in this computing device cluster can store the same instructions for executing the page generation method.

[0182] In some possible implementations, the memory 901 of one or more computing devices 900 in the computing device cluster may also store partial instructions for executing the page generation method. In other words, a combination of one or more computing devices 900 can jointly execute the instructions for executing the page generation method.

[0183] In another embodiment of this application, a computer-readable storage medium is also provided, which stores computer-executable instructions. When at least one processor of the device executes the computer-executable instructions, the device executes the page generation method described in the embodiments of Figures 2 to 7 above.

[0184] In another embodiment of this application, a computer program product is also provided, the computer program product including computer execution instructions stored in a computer-readable storage medium; at least one processor of the device can read the computer execution instructions from the computer-readable storage medium, and the at least one processor executes the computer execution instructions to cause the device to perform the page generation method described in the embodiments of Figures 2 to 7 above.

[0185] In another embodiment of this application, a chip system is also provided, which includes a processor for supporting a page generation apparatus in implementing the page generation method described in the embodiments of Figures 2 to 7. In one possible design, the chip system may further include a memory for storing necessary program instructions and data for the page generation apparatus. This chip system may be composed of chips or may include chips and other discrete devices.

[0186] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of the embodiments of this application.

[0187] Those skilled in the art will understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0188] In the embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the displayed or discussed mutual couplings, direct couplings, or communication connections may be through some interfaces; indirect couplings or communication connections between devices or units may be electrical, mechanical, or other forms.

[0189] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0190] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0191] Based on this understanding, the technical solutions of the embodiments of this application, or the parts that contribute to the prior art, or parts of the technical solutions, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

Claims

1. A page generation method characterized by, The method is applied to a cloud management platform for managing infrastructure that provides cloud services. The infrastructure includes facilities located in multiple regions, each region including at least one cloud data center. The cloud services run on at least one server located in at least one cloud data center in one of the multiple regions. The method includes: A picture receiving interface is provided, which is used to receive a first picture input by the user; Extract the control images from the first image; wherein, the first image is used to display the static page information of the first page, and the first image is the prototype design of the first page; The target control matching the control image is obtained from the user page control library according to the control information; wherein, the compilation method of the first page is different from that of the second page, the compilation method of the first page is a programming language-based compilation method, and the compilation method of the second page is a GUI-based graphical compilation method; The second page is generated based on the position of the target control and the control image in the first image.

2. The method of claim 1, wherein, The step of retrieving the target control matching the control image from the user page control library based on the control information includes: The control images are categorized based on the control information. Based on the classification results, controls with similarity within a preset range are selected from the user page control library as the target controls.

3. The method of claim 2, wherein, The control information includes the control type of the control image and a text description of the control image; The step of classifying the control images according to control information includes: The control images are categorized based on their control type and text description; wherein the control type indicates the function of the control image, and the text description indicates the specific effect achieved by the control image on the first page.

4. The method according to any one of claims 1 to 3, characterized in that, Extracting the control image from the first image includes: A marker layer is generated based on the first image; wherein the number of layers of the marker layer is determined by the hierarchical relationship of the control images in the first image, and the hierarchical relationship is used to indicate the display order of the controls corresponding to the control images on the first page; The control image is moved from the first image to the corresponding layer of the marker layer.

5. The method of claim 4, wherein, The step of migrating the control image from the first image to the corresponding layer of the marker layer includes: Based on the hierarchical relationship of the control images in the first image, mark the outline of the control images in the first image; The content of the first region is moved to the marker layer corresponding to the layer of the control image. The first region is the region marked by the outline of the control image. The first region is filled with the color of the second region; wherein the second region is the region remaining in the first image after the first region has been migrated to the corresponding layer of the marker layer.

6. The method according to any one of claims 1 to 5, characterized in that, The step of generating the second page based on the first control and the first image includes: A layer container for the second page is generated based on the marker layer. The layer container includes multiple page layers, and the number of page layers is the same as the number of marker layers. The first control is set in the corresponding layer of the page layer, wherein the layer number of the marker layer where the control image matching the first control is located is the same as the layer number of the corresponding layer of the page layer; Multiple page layers are merged and rendered to generate the second page.

7. The method of claim 6, wherein, The method further includes: Obtain the first coordinate position of the control image in the first image; Correspondingly, setting the first control in the corresponding layer of the page layer includes: The first control is set at a second coordinate position in the corresponding layer of the page layer; wherein the second coordinate position of each first control is the same as the first coordinate position of the matching control image, and the size of each first control is the same as the size of the matching control image.

8. A page generation apparatus characterized by comprising: include: The transceiver module and the processing module, The transceiver module is used to provide an image receiving interface, which is used to receive a first image input by the user. The processing module is used to extract control images from the first image; wherein, the first image is used to display static page information of the first page, and the first image is a prototype design drawing of the first page; The processing module is further configured to obtain a target control matching the control image from the user page control library based on the control information; wherein, the compilation method of the first page is different from that of the second page, the compilation method of the first page is a programming language-based compilation method, and the compilation method of the second page is a GUI-based graphical compilation method; The processing module is also used to generate the second page based on the position of the target control and the control image in the first image.

9. The apparatus of claim 8, wherein, The processing module is also used to classify the control images according to the control information; Based on the classification results, controls with similarity within a preset range are selected from the user page control library as the target controls.

10. The apparatus according to claim 9, characterized in that, The control information includes the control type of the control image and a text description of the control image; The processing module is further configured to classify the control image based on its control type and text description; wherein the control type indicates the function of the control image, and the text description indicates the specific effect achieved by the control image on the first page.

11. The apparatus according to any one of claims 8-10, characterized in that, The processing module is further configured to generate a marker layer based on the first image; wherein the number of layers of the marker layer is determined by the hierarchical relationship of the control images in the first image, and the hierarchical relationship is used to indicate the display order of the controls corresponding to the control images on the first page; The processing module is also used to migrate the control image from the first image to the corresponding layer of the marker layer.

12. The apparatus according to claim 11, characterized in that, The processing module is also used to mark the outline of the control images in the first image based on the hierarchical relationship of the control images in the first image; The processing module is further configured to migrate the content of the first region to the marker layer corresponding to the hierarchical relationship of the control image, wherein the first region is the region marked by the outline of the control image; The processing module is further configured to fill the first region with the color of the second region; wherein the second region is the region remaining in the first image after the first region has been migrated to the corresponding layer of the marker layer.

13. The apparatus according to any one of claims 8-12, characterized in that, The processing module is further configured to generate a layer container for the second page based on the marker layer, wherein the layer container includes multiple page layers, and the number of page layers is the same as the number of marker layers; The processing module is further configured to set the first control in the corresponding layer of the page layer, wherein the number of layers of the marker layer where the control image matching the first control is located is the same as the number of layers of the corresponding layer of the page layer; The processing module is also used to merge multiple page layers and render the second page.

14. The apparatus according to claim 13, characterized in that, The processing module is also used to obtain the first coordinate position of the control image in the first image; The processing module is further configured to set the first control at a second coordinate position in the corresponding layer of the page layer; wherein the second coordinate position of each first control is the same as the first coordinate position of the matching control image, and the size of each first control is the same as the size of the matching control image.

15. A computing device cluster, characterized in that, The system includes multiple computing devices, each comprising multiple processors and multiple memories, the multiple memories storing program instructions, and the multiple processors executing the program instructions to cause the cluster of computing devices to perform the method as described in any one of claims 1 to 7.

16. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores program instructions that, when executed, cause the method as described in any one of claims 1 to 7 to be performed.

17. A computer program product containing program instructions, characterized in that, When the program instructions are run on a computer, the computer causes the computer to perform the method as described in any one of claims 1 to 7.

Images