Automatic page generation method, system, device and storage medium

Abstract

The present invention discloses an automatic page generation method, system, device and storage medium, which can automatically extract interface content nodes and generate association graphs, greatly improving the automation level of page generation. A visual system interface is provided, allowing users to adjust the association graph during the interface generation process to achieve personalized interface logic association and content distribution. The system can generate a variety of style transfer frameworks to meet different style requirements of users.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and more particularly to an automatic page generation method, system, device and storage medium. Background Art

[0002] The traditional interface design process, including requirements analysis, prototyping, and coding implementation, relies heavily on manual labor. This is not only inefficient but also fails to meet the increasingly diverse needs of users. Especially in small projects with limited resources, communication and time costs become key factors limiting project efficiency and success.

[0003] While numerous interface and code generation tools have emerged on the market, rapidly generating interface images and code through natural language or image text input, significantly improving development efficiency, these tools still have limitations. They primarily rely on verbal descriptions and keywords to generate interfaces. While flexible, this approach limits manual intervention and struggles to fully meet specific user needs. Furthermore, these tools lack support for directly inputting system pages and code to generate new pages, leaving room for improvement in automation and personalization. Summary of the Invention

[0004] In order to overcome the above-mentioned defects, the present invention provides an automatic page generation method, system, device and storage medium. The system can automatically extract page content nodes and generate an association graph, and allow users to adjust the association graph during the interface generation process, thereby improving the efficiency and accuracy of interface generation.

[0005] In order to solve the above technical problems, the technical solutions of the present invention are as follows:

[0006] The present invention provides an automatic page generation method, comprising:

[0007] Obtain several first system interface and style interface images;

[0008] Constructing a corresponding interface content node association graph based on a plurality of first system interfaces, and generating a style transfer framework according to the style interface graph;

[0009] Generate the second system interface based on the page content node association graph and style transfer framework.

[0010] Preferably, constructing a corresponding interface content node association graph based on a plurality of first system interfaces includes:

[0011] Extracting a plurality of content nodes of the first system interface through HTML parsing;

[0012] Graph theory algorithms and natural language processing technology are used to identify the association relationships of content nodes, and a content node association graph is generated based on the association relationships and content nodes.

[0013] Preferably, generating a style transfer framework according to the style interface graph includes:

[0014] Converting the style interface graph into numerical data and extracting style features from the data;

[0015] Classify the style features and use the classified style features to generate a style transfer framework.

[0016] Preferably, the method further comprises:

[0017] The second system interface is converted into a system interface code, and the code is exported in a file form.

[0018] Preferably, generating a plurality of second system interfaces according to the page content node association graph and the style transfer framework includes:

[0019] If the interface content node association diagram does not meet the user's preset requirements, the user edits and optimizes the interface content node association diagram; if the interface content node association diagram meets the user's preset requirements, the interface content node association diagram is analyzed and key content features of the association diagram are extracted;

[0020] The key content features of the association graph are integrated with the style transfer framework to obtain the second system interface.

[0021] Preferably, the key content features of the interface content node association diagram include the title, navigation bar, content area, sidebar, and bottom information of the system interface.

[0022] The present invention also provides an automatic page generation system, comprising:

[0023] A data acquisition module acquires a plurality of first system interfaces and style interface images;

[0024] A correlation graph construction and style framework generation module constructs a corresponding interface content node correlation graph based on a plurality of first system interfaces, and generates a style transfer framework based on the style interface graph;

[0025] The system interface generation module generates a second system interface based on the page content node association graph and the style transfer framework.

[0026] Preferably, the system further comprises:

[0027] The interface export module converts the second system interface into system interface code and exports the code in the form of a file.

[0028] The present invention also provides an electronic device, comprising:

[0029] one or more processors;

[0030] a memory for storing one or more programs;

[0031] When the one or more programs are executed by the one or more processors, the processors are caused to implement the above method.

[0032] The present invention also provides a computer-readable storage medium containing a computer program, on which the computer program is stored. When the program is executed by one or more processors, the above method is implemented.

[0033] Compared with the prior art, the beneficial effects of the technical solution of the present invention are:

[0034] This invention can automatically extract page content nodes and generate a correlation graph, significantly improving the automation level of page generation. It also provides a visual system interface that allows users to adjust the correlation graph during the interface generation process, achieving personalized interface logic associations and content distribution. The system can also generate diverse style transfer frameworks to meet users' diverse style requirements. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] Figure 1 This is a flowchart of the automatic page generation method described in Example 1;

[0036] Figure 2 This is a schematic diagram of the structure of the automatic page generation system described in Example 2. DETAILED DESCRIPTION

[0037] The accompanying drawings are for illustrative purposes only and are not to be construed as limiting this patent;

[0038] In order to better illustrate this embodiment, some parts in the drawings may be omitted, enlarged, or reduced, and do not represent the actual product size;

[0039] It is understandable to those skilled in the art that some well-known structures and descriptions thereof may be omitted in the drawings.

[0040] The technical solution of the present invention is further described below with reference to the accompanying drawings and embodiments.

[0041] Example 1

[0042] This embodiment provides an automatic page generation method, such as Figure 1 Shown, including:

[0043] Obtain several first system interface and style interface images;

[0044] Constructing a corresponding interface content node association graph based on a plurality of first system interfaces, and generating a style transfer framework according to the style interface graph;

[0045] Generate the second system interface based on the page content node association graph and style transfer framework.

[0046] Example 2

[0047] This embodiment provides an automatic page generation method, including:

[0048] Obtain several first system interface and style interface images;

[0049] Constructing a corresponding interface content node association graph based on a plurality of first system interfaces, and generating a style transfer framework according to the style interface graph;

[0050] The corresponding interface content node association diagram constructed based on a plurality of first system interfaces includes:

[0051] Extracting a plurality of content nodes of the first system interface through HTML parsing;

[0052] Graph theory algorithms and natural language processing techniques are used to identify the relationships between content nodes, identify the relationships between nodes, and construct a page content node association graph. This association graph visually displays logical relationships between pages, such as parent-child relationships and jump relationships. A content node association graph is generated based on these relationships and content nodes.

[0053] Generating a style transfer framework based on the style interface graph includes:

[0054] Converting the style interface graph into numerical data and extracting style features from the data;

[0055] First, perform data preprocessing on the input style page set to be migrated. Convert the style page set to numerical data, extract key features such as color scheme, layout composition, and text size and weight, and perform appropriate encoding and normalization. For example, use RGB, HSL, or HEX values ​​to represent colors, and use weights to indicate color importance and frequency of use. Use XML or JSON to describe the page layout framework and the size ratios of each area. Use objects to store the specific values ​​of text attributes such as font type, size, weight, and color.

[0056] Classify the style features and perform feature classification on the extracted data. For example, use the K-means clustering algorithm to cluster the colors on the page, setting the K value (3-5) to represent the main color categories; use rule-based classification methods to assign pages to different layout categories; use hierarchical clustering or decision tree methods to classify the quantified text features and identify different text styles; and use the classified style features to generate a style transfer framework.

[0057] Generate a second system interface based on the page content node association graph and the style transfer framework;

[0058] Based on the page content node association graph and the style transfer framework, several second system interfaces are generated, including:

[0059] If the interface content node association diagram does not meet the user's preset requirements, the user edits and optimizes the interface content node association diagram; if the interface content node association diagram meets the user's preset requirements, the interface content node association diagram is analyzed and key content features of the association diagram are extracted;

[0060] During the association graph editing phase, the system first generates an initial association graph based on the uploaded set of old system pages. Users can then edit and optimize this graph. Each node in the association graph represents a page, while the lines represent the parent-child relationship or jump logic between pages.

[0061] Users can perform various operations on the association diagram: dragging nodes to adjust the page hierarchy and order, clicking nodes to edit content, and adjusting the connections between nodes to reshape page jump logic. These operations can intuitively reflect changes in the overall page logic and help users optimize the interface structure of the new system.

[0062] After generating the association graph, the system will prompt the user for confirmation. If the user feels that the initial association graph meets their needs and does not want to make further edits, they can directly choose to generate a new system interface. The system will automatically apply the style transfer framework based on the confirmed association graph and generate the new system interface code.

[0063] If the user wishes to edit, they can adjust the association graph through the above operations until they are satisfied. During the editing process, the system also provides content relevance analysis and prompts to help users better complete the editing work.

[0064] After editing or confirming, the system will generate the new system interface code based on the association diagram. Users can preview the interface effect in real time and make adjustments as needed. This step ensures that users can reconfirm the accuracy of the association diagram before generating the new system interface, ensuring that the final interface meets business logic and user needs.

[0065] The key content features of the interface content node association diagram include the title, navigation bar, content area, sidebar, and bottom information of the system interface.

[0066] The key content features of the association graph are integrated with the style transfer framework to obtain the second system interface.

[0067] Analyze the association graph to extract the parent-child, jump and other page relationships between the pages represented by the association graph and the key elements of the page represented by the association graph nodes, such as the title, navigation bar, content area, sidebar, bottom information, etc.; extract this information into a page key content feature set.

[0068] Using the style transfer framework derived above, the new style is integrated with the extracted key content feature set of the page to obtain the second system interface.

[0069] The method further comprises:

[0070] The second system interface is converted into system interface code, and the code is exported in the form of a file; the new style interface set is converted into a code file through an automated code tool; during the generation process, the user can preview the interface effect in real time and make adjustments as needed.

[0071] Once the new system interface is generated, the Output and Delivery module exports the interface code as a file for users to download and use. Users can then deploy this code into the new system, achieving efficient conversion of the old system page set and automatic generation of a personalized new interface.

[0072] Example 3

[0073] This embodiment provides an automatic page generation method, including:

[0074] Obtain several first system interface and style interface images;

[0075] Constructing a corresponding interface content node association graph based on a plurality of first system interfaces, and generating a style transfer framework according to the style interface graph;

[0076] The corresponding interface content node association diagram constructed based on a plurality of first system interfaces includes:

[0077] Extracting a plurality of content nodes of the first system interface through HTML parsing;

[0078] Graph theory algorithms and natural language processing techniques are used to identify the relationships between content nodes, identify the relationships between nodes, and construct a page content node association graph. This association graph visually displays logical relationships between pages, such as parent-child relationships and jump relationships. A content node association graph is generated based on these relationships and content nodes.

[0079] Generating a style transfer framework based on the style interface graph includes:

[0080] Converting the style interface graph into numerical data and extracting style features from the data;

[0081] First, perform data preprocessing on the input style page set to be migrated. Convert the style page set to numerical data, extract key features such as color scheme, layout composition, and text size and weight, and perform appropriate encoding and normalization. For example, use RGB, HSL, or HEX values ​​to represent colors, and use weights to indicate color importance and frequency of use. Use XML or JSON to describe the page layout framework and the size ratios of each area. Use objects to store the specific values ​​of text attributes such as font type, size, weight, and color.

[0082] Classify the style features and perform feature classification on the extracted data. For example, use the K-means clustering algorithm to cluster the colors on the page, setting the K value (3-5) to represent the main color categories; use rule-based classification methods to assign pages to different layout categories; use hierarchical clustering or decision tree methods to classify the quantified text features and identify different text styles; and use the classified style features to generate a style transfer framework.

[0083] Generate a second system interface based on the page content node association graph and the style transfer framework;

[0084] Based on the page content node association graph and the style transfer framework, several second system interfaces are generated, including:

[0085] If the interface content node association diagram does not meet the user's preset requirements, the user edits and optimizes the interface content node association diagram; if the interface content node association diagram meets the user's preset requirements, the interface content node association diagram is analyzed and key content features of the association diagram are extracted;

[0086] During the association graph editing phase, the system first generates an initial association graph based on the uploaded set of old system pages. Users can then edit and optimize this graph. Each node in the association graph represents a page, while the lines represent the parent-child relationship or jump logic between pages.

[0087] Users can perform various operations on the association diagram: dragging nodes to adjust the page hierarchy and order, clicking nodes to edit content, and adjusting the connections between nodes to reshape page jump logic. These operations can intuitively reflect changes in the overall page logic and help users optimize the interface structure of the new system.

[0088] After generating the association graph, the system will prompt the user for confirmation. If the user feels that the initial association graph meets their needs and does not want to make further edits, they can directly choose to generate a new system interface. The system will automatically apply the style transfer framework based on the confirmed association graph and generate the new system interface code.

[0089] If the user wishes to edit, they can adjust the association graph through the above operations until they are satisfied. During the editing process, the system also provides content relevance analysis and prompts to help users better complete the editing work.

[0090] After editing or confirming, the system will generate the new system interface code based on the association diagram. Users can preview the interface effect in real time and make adjustments as needed. This step ensures that users can reconfirm the accuracy of the association diagram before generating the new system interface, ensuring that the final interface meets business logic and user needs.

[0091] The key content features of the interface content node association diagram include the title, navigation bar, content area, sidebar, and bottom information of the system interface.

[0092] The key content features of the association graph are integrated with the style transfer framework to obtain the second system interface.

[0093] Analyze the association graph to extract the parent-child, jump and other page relationships between the pages represented by the association graph and the key elements of the page represented by the association graph nodes, such as the title, navigation bar, content area, sidebar, bottom information, etc.; extract this information into a page key content feature set.

[0094] Using the style transfer framework derived above, the new style is integrated with the extracted key content feature set of the page to obtain the second system interface.

[0095] The method further comprises:

[0096] The second system interface is converted into system interface code, and the code is exported in the form of a file; the new style interface set is converted into a code file through an automated code tool; during the generation process, the user can preview the interface effect in real time and make adjustments as needed.

[0097] Once the new system interface is generated, the Output and Delivery module exports the interface code as a file for users to download and use. Users can then deploy this code into the new system, achieving efficient conversion of the old system page set and automatic generation of a personalized new interface.

[0098] This embodiment also provides an automatic page generation system for implementing the above method, such as Figure 2 Shown, including:

[0099] A data acquisition module acquires a plurality of first system interfaces and style interface images;

[0100] A correlation graph construction and style framework generation module constructs a corresponding interface content node correlation graph based on a plurality of first system interfaces, and generates a style transfer framework based on the style interface graph;

[0101] The system interface generation module generates a second system interface based on the page content node association graph and the style transfer framework.

[0102] The system further comprises:

[0103] The interface export module converts the second system interface into system interface code and exports the code in the form of a file.

[0104] Example 4

[0105] This embodiment provides an automatic interface generation method, including:

[0106] Obtain several first system interface and style interface images;

[0107] Constructing a corresponding interface content node association graph based on a plurality of first system interfaces, and generating a style transfer framework according to the style interface graph;

[0108] The corresponding interface content node association diagram constructed based on a plurality of first system interfaces includes:

[0109] Extracting a plurality of content nodes of the first system interface through HTML parsing;

[0110] Graph theory algorithms and natural language processing techniques are used to identify the relationships between content nodes, identify the relationships between nodes, and construct a page content node association graph. This association graph visually displays logical relationships between pages, such as parent-child relationships and jump relationships. A content node association graph is generated based on these relationships and content nodes.

[0111] Generating a style transfer framework based on the style interface graph includes:

[0112] Converting the style interface graph into numerical data and extracting style features from the data;

[0113] First, perform data preprocessing on the input style page set to be migrated. Convert the style page set to numerical data, extract key features such as color scheme, layout composition, and text size and weight, and perform appropriate encoding and normalization. For example, use RGB, HSL, or HEX values ​​to represent colors, and use weights to indicate color importance and frequency of use. Use XML or JSON to describe the page layout framework and the size ratios of each area. Use objects to store the specific values ​​of text attributes such as font type, size, weight, and color.

[0114] Classify the style features and perform feature classification on the extracted data. For example, use the K-means clustering algorithm to cluster the colors on the page, setting the K value (3-5) to represent the main color categories; use rule-based classification methods to assign pages to different layout categories; use hierarchical clustering or decision tree methods to classify the quantified text features and identify different text styles; and use the classified style features to generate a style transfer framework.

[0115] Generate a second system interface based on the page content node association graph and the style transfer framework;

[0116] Based on the page content node association graph and the style transfer framework, several second system interfaces are generated, including:

[0117] If the interface content node association diagram does not meet the user's preset requirements, the user edits and optimizes the interface content node association diagram; if the interface content node association diagram meets the user's preset requirements, the interface content node association diagram is analyzed and key content features of the association diagram are extracted;

[0118] During the association graph editing phase, the system first generates an initial association graph based on the uploaded set of old system pages. Users can then edit and optimize this graph. Each node in the association graph represents a page, while the lines represent the parent-child relationship or jump logic between pages.

[0119] Users can perform various operations on the association diagram: dragging nodes to adjust the page hierarchy and order, clicking nodes to edit content, and adjusting the connections between nodes to reshape page jump logic. These operations can intuitively reflect changes in the overall page logic and help users optimize the interface structure of the new system.

[0120] After generating the association graph, the system will prompt the user for confirmation. If the user feels that the initial association graph meets their needs and does not want to make further edits, they can directly choose to generate a new system interface. The system will automatically apply the style transfer framework based on the confirmed association graph and generate the new system interface code.

[0121] If the user wishes to edit, they can adjust the association graph through the above operations until they are satisfied. During the editing process, the system also provides content relevance analysis and prompts to help users better complete the editing work.

[0122] After editing or confirming, the system will generate the new system interface code based on the association diagram. Users can preview the interface effect in real time and make adjustments as needed. This step ensures that users can reconfirm the accuracy of the association diagram before generating the new system interface, ensuring that the final interface meets business logic and user needs.

[0123] The key content features of the interface content node association diagram include the title, navigation bar, content area, sidebar, and bottom information of the system interface.

[0124] The key content features of the association graph are integrated with the style transfer framework to obtain the second system interface.

[0125] Analyze the association graph to extract the parent-child, jump and other page relationships between the pages represented by the association graph and the key elements of the page represented by the association graph nodes, such as the title, navigation bar, content area, sidebar, bottom information, etc.; extract this information into a page key content feature set.

[0126] Using the style transfer framework derived above, the new style is integrated with the extracted key content feature set of the page to obtain the second system interface.

[0127] The method further comprises:

[0128] The second system interface is converted into system interface code, and the code is exported in the form of a file; the new style interface set is converted into a code file through an automated code tool; during the generation process, the user can preview the interface effect in real time and make adjustments as needed.

[0129] Once the new system interface is generated, the Output and Delivery module exports the interface code as a file for users to download and use. Users can then deploy this code into the new system, achieving efficient conversion of the old system page set and automatic generation of a personalized new interface.

[0130] This embodiment further provides an electronic device, including:

[0131] one or more processors;

[0132] a memory for storing one or more programs;

[0133] When the one or more programs are executed by the one or more processors, the processors are caused to implement the above method.

[0134] This embodiment further provides a computer-readable storage medium containing a computer program, on which a computer program is stored. When the program is executed by one or more processors, the above method is implemented.

[0135] The same or similar reference numerals correspond to the same or similar components;

[0136] The terms used in the drawings to describe positional relationships are for illustrative purposes only and should not be construed as limiting this patent;

[0137] Obviously, the above embodiments of the present invention are merely examples for the purpose of clearly illustrating the present invention, and are not intended to limit the embodiments of the present invention. Those skilled in the art will appreciate that other variations or modifications can be made based on the above description. It is not necessary and impossible to enumerate all embodiments here. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention shall be included within the scope of protection of the claims of the present invention.

Claims

1. An automatic page generation method, characterized in that: include: Obtain several first system interface and style interface images; Constructing a corresponding interface content node association graph based on a plurality of first system interfaces, and generating a style transfer framework according to the style interface graph; The corresponding interface content node association diagram constructed based on a plurality of first system interfaces includes: Extracting a number of content nodes of the first system interface through HTML parsing; Using graph theory algorithms and natural language processing technology to identify associations among content nodes, and generating a content node association graph based on the associations and content nodes; Generating a style transfer framework based on the style interface graph includes: Convert the style interface image into numerical data, and extract style features from the data; Classify the style features and use the classified style features to generate a style transfer framework; Generate the second system interface based on the page content node association graph and the style transfer framework; each node in the association graph represents a page, and the connection line represents the parent-child relationship or jump logic between pages; Generating the second system interface based on the page content node association graph and the style transfer framework includes: If the interface content node association graph does not meet the user's preset requirements, the user edits and optimizes the interface content node association graph; if the interface content node association graph meets the user's preset requirements, the interface content node association graph is analyzed and key content features of the association graph are extracted; The key content features of the association graph are integrated with the style transfer framework to obtain the second system interface.

2. The automatic page generation method according to claim 1, characterized in that: The method further comprises: The second system interface is converted into a system interface code, and the code is exported in a file form.

3. The automatic page generation method according to claim 1, characterized in that: The key content features of the interface content node association diagram include the title, navigation bar, content area, sidebar and bottom information of the system interface.

4. An automatic page generation system, characterized in that: include: A data acquisition module, which acquires a plurality of first system interfaces and style interface images; A correlation graph construction and style framework generation module, which constructs a corresponding interface content node correlation graph based on a plurality of first system interfaces, and generates a style transfer framework according to the style interface graph; The corresponding interface content node association diagram constructed based on a plurality of first system interfaces includes: Extracting a number of content nodes of the first system interface through HTML parsing; Using graph theory algorithms and natural language processing technology to identify associations among content nodes, and generating a content node association graph based on the associations and content nodes; Generating a style transfer framework based on the style interface graph includes: Convert the style interface image into numerical data, and extract style features from the data; Classify the style features and use the classified style features to generate a style transfer framework; The system interface generation module generates the second system interface based on the page content node association graph and the style transfer framework; each node in the association graph represents a page, and the connection line represents the parent-child relationship or jump logic between pages; Generating the second system interface based on the page content node association graph and the style transfer framework includes: If the interface content node association graph does not meet the user's preset requirements, the user edits and optimizes the interface content node association graph; if the interface content node association graph meets the user's preset requirements, the interface content node association graph is analyzed and key content features of the association graph are extracted; The key content features of the association graph are integrated with the style transfer framework to obtain the second system interface.

5. The automatic page generation system according to claim 4, characterized in that: The system further comprises: The interface export module converts the second system interface into system interface code and exports the code in the form of a file.

6. An electronic device, characterized in that: include: one or more processors; A memory for storing one or more programs; When the one or more programs are executed by the one or more processors, the processors are enabled to implement the method according to any one of claims 1 to 3.

7. A computer-readable storage medium containing a computer program, wherein the computer program is stored thereon, characterized in that: When the program is executed by one or more processors, the method according to any one of claims 1 to 3 is implemented.

Images