Front-end page generation method, device, computer equipment and storage medium

Abstract

The present application relates to a method, apparatus, computer device, and storage medium for generating a front-end page. It relates to the field of artificial intelligence technology. The method includes: obtaining a front-end page image; performing recognition processing on the front-end page image to obtain each feature image and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page image; generating the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establishing the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image; generating the target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page. Using this method can improve the development efficiency of the front-end page.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, and particularly to a method, apparatus, computer device, and storage medium for generating a front-end page. Background Art

[0002] As the update iteration of front-end page styles gradually accelerates, each terminal needs to update and iterate the front-end layout multiple times, and a large number of front-end layouts need to be developed by developers, making it impossible for front-end personnel to focus on developing front-end business logic code.

[0003] However, the traditional front-end page generation method is for front-end personnel to manually develop according to the prototype diagram in the requirements. However, many of them are repetitive and require a large amount of time investment in the front-end page generation process, and require staff to master the usage capabilities of multiple page styles at the same time. At the same time, there is a large amount of communication and rework workload in the manual development process, resulting in low efficiency in front-end page development. Summary of the Invention

[0004] Based on this, it is necessary to provide a front-end page generation method, apparatus, computer device, computer-readable storage medium, and computer program product for the above technical problems.

[0005] In a first aspect, this application provides a front-end page generation method. The method includes:

[0006] Obtain a front-end page picture;

[0007] Perform recognition processing on the front-end page picture to obtain each feature image included in the front-end page picture, and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page picture;

[0008] Generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image;

[0009] Generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0010] Optionally, the obtaining of the front-end page picture includes:

[0011] In response to a user's front-end page generation operation, obtain a front-end page style and the layout information of the page style;

[0012] Generate a front - end page image through an image editing program according to each of the front - end page styles and the layout information of each of the front - end page styles.

[0013] Optionally, the recognition processing of the front - end page image to obtain each feature image included in the front - end page image and the feature information of each feature image includes:

[0014] Identify the edges of each feature image in the front - end page image, and based on each feature image edge, determine the feature image formed by the enclosure of the feature image edge;

[0015] For each feature image, perform recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image;

[0016] Determine the layout information of each feature image in the front - end page image according to the front - end page image, each feature image, and the parameter information of each feature image.

[0017] Optionally, the performing recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image includes:

[0018] Identify the image shape of the feature image according to the feature image edge corresponding to the feature image;

[0019] Perform recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain the parameter information of the feature image.

[0020] Optionally, the determining the layout information of each feature image in the front - end page image according to the front - end page image, each feature image, and the parameter information of each feature image includes:

[0021] Establish a coordinate framework for the front - end page image;

[0022] Determine the position information of each feature image in the coordinate framework of the front - end page image;

[0023] For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image;

[0024] Calculate the ratio information between the front - end page image and the feature image, and determine the layout information of each feature image according to the ratio information and the display distribution information of the feature image.

[0025] Optionally, generating the front - end display code of the feature image according to the feature image and the parameter information of the feature image, and establishing the layout code of the target front - end page according to the layout information of each feature image and the parameter information of each feature image, includes:

[0026] Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front - end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image;

[0027] Generate the initial layout code of the target front - end page according to the layout information of all feature images in the front - end page picture through the layout code generation strategy, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front - end page.

[0028] In a second aspect, the present application also provides a front - end page generation device. The device includes:

[0029] An acquisition module, configured to acquire a front - end page picture;

[0030] An identification module, configured to perform identification processing on the front - end page picture to obtain each feature image included in the front - end page picture and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front - end page picture;

[0031] A construction module, configured to generate the front - end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front - end page according to the layout information of each feature image and the parameter information of each feature image;

[0032] A generation module, configured to generate a target front - end page according to the front - end display code of the feature image and the layout code of the target front - end page.

[0033] Optionally, the acquisition module is specifically configured to:

[0034] In response to the user's front - end page generation operation, acquire the front - end page style and the layout information of the page style;

[0035] Generate a front - end page picture through a picture editing program according to each front - end page style and the layout information of each front - end page style.

[0036] Optionally, the identification module is specifically configured to:

[0037] Identify the edges of each feature image in the front-end page image, and based on the edges of each feature image, determine the feature images formed by the enclosure of the feature image edges;

[0038] For each feature image, perform recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain parameter information of the feature image;

[0039] Based on the front-end page image, each feature image, and the parameter information of each feature image, determine the layout information of each feature image in the front-end page image.

[0040] Optionally, the recognition module is specifically configured to:

[0041] Identify the image shape of the feature image according to the feature image edge corresponding to the feature image;

[0042] Perform recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain parameter information of the feature image.

[0043] Optionally, the recognition module is specifically configured to:

[0044] Establish a coordinate framework for the front-end page image;

[0045] In the coordinate framework of the front-end page image, determine the position information of each feature image;

[0046] For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image;

[0047] Calculate the proportional information between the front-end page image and the feature image, and based on the proportional information and the display distribution information of the feature image, determine the layout information of each feature image.

[0048] Optionally, the establishment module is specifically configured to:

[0049] Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image;

[0050] Through the layout code generation strategy, generate the initial layout code of the target front-end page according to the layout information of all the feature images in the front-end page image, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0051] In a third aspect, the present application provides a computer device. The computer device includes a memory and a processor. The memory stores a computer program, and when the processor executes the computer program, the steps of the method described in any one of the first aspects are implemented.

[0052] In a fourth aspect, the present application provides a computer-readable storage medium. A computer program is stored thereon, and when the computer program is executed by a processor, the steps of the method described in any one of the first aspects are implemented.

[0053] In a fifth aspect, the present application provides a computer program product. The computer program product includes a computer program, and when the computer program is executed by a processor, the steps of the method described in any one of the first aspects are implemented.

[0054] For the above front-end page generation method, device, computer device, storage medium, and computer program product, by obtaining a front-end page picture; performing recognition processing on the front-end page picture to obtain each feature image included in the front-end page picture and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page picture; generating the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establishing the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image; generating the target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page. By analyzing the feature images of the front-end page picture and the feature information of each feature image, the target front-end page is generated, avoiding the process of manually developing the front-end page and improving the development efficiency of the front-end page. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] Figure 1 It is a schematic flowchart of the front-end page generation method in an embodiment;

[0056] Figure 2 It is a schematic flowchart of the feature information acquisition step in an embodiment;

[0057] Figure 3 It is a schematic flowchart of the front-end page generation step in an embodiment;

[0058] Figure 4 It is a schematic flowchart of the front-end page generation example in another embodiment;

[0059] Figure 5 It is a structural block diagram of the front-end page generation device in an embodiment;

[0060] Figure 6FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0061] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0062] The front-end page generation method provided in the embodiment of the present application can be applied to a terminal, a server, or a system including a terminal and a server, and is implemented through the interaction between the terminal and the server. The terminal may include but is not limited to various personal computers, laptops, tablet computers, etc. The terminal generates a target front-end page by analyzing the feature image of the front-end page image and the feature information of each feature image, thereby avoiding the process of manually developing the front-end page and improving the development efficiency of the front-end page.

[0063] In one embodiment, Figure 1 As shown, a front-end page generation method is provided, which is described by taking the method applied to a terminal as an example, and includes the following steps:

[0064] Step S101, obtaining the front-end page image.

[0065] In this embodiment, the terminal generates a front-end page image through a drawing tool based on the page style required by the user and the layout information of each page style. The page style can be, but is not limited to, any style laid out on the front-end page, and the layout information of the page style is the layout of the page style on the front-end page. The drawing tool can be, but is not limited to, any software or editor that can draw, such as the drawing tool that comes with Windows, and the format of the front-end page image can be, but is not limited to, a PNG (Portable Network Graphics) format image.

[0066] Step S102, performing recognition processing on the front page image to obtain each feature image contained in the front page image and feature information of each feature image.

[0067] The characteristic information includes display parameter information of the characteristic image and layout information of the characteristic image in the front-end page picture.

[0068] In this embodiment, the terminal uses edge image recognition technology to identify each feature image in the front-end page picture, and analyzes the display parameter information and layout information of each feature image to obtain the feature information of each feature image. The edge image recognition technology can be, but is not limited to, any edge image recognition algorithm that can implement the above steps. For example, a face edge recognition algorithm, etc.

[0069] Specifically, the process of the terminal processing picture recognition is that the terminal can implement the picture ocr function through the python language and analyze parameters such as the module shape, color, position, and size in the picture. Picture ocr (Optical Character Recognition, which is used to translate the content in the picture into the text content that the user wants): Using a computer to process and analyze pictures is a time application of applying deep learning algorithms. The main steps are four steps: picture acquisition, picture preprocessing, feature extraction, and picture recognition. This invention mainly relies on the powerful image computing ecological environment of python and uses libraries such as tensorflow, numpy, scipy, opencv, matplotlib, h5py, and keras to finally form a mature picture ocr model after multiple trainings of the model. Among them, opencv is mainly used to implement picture contour recognition, tensorflow is used to implement algorithm programming, and numpy is an open-source numerical calculation extension of python, and the above three modules are mainly applied.

[0070] Step S103, generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image.

[0071] In this embodiment, for each identified feature image, the terminal generates the front-end time-limited code of the feature image according to the feature image and the parameter information of the feature image, and establishes the layout code of each feature image in the target front-end page according to the layout information of the feature image and the parameter information of the feature image. Similarly, repeat the above steps until the front-end display code of all feature images and the layout code of all feature images are obtained. The terminal establishes the layout code of the target front-end page based on the front-end layout framework according to the layout code of all feature images. The specific process of establishing the layout code of the target front-end page will be described in detail later. Among them, the front-end layout framework can be, but is not limited to, flex (Flexible Box, flexible layout), element-ui (a set of desktop component libraries developed and open-sourced by a domestic team for developers, designers, and product managers).

[0072] Specifically, the process of the terminal generating code is to combine the parameters such as the module shape, color, position, and size in the picture with the parameter table pre-entered into the terminal through the Java language to generate the final HTML and CSS code. For example, taking the parameter table and the data analyzed by OCR as input parameters, combining the two input parameters through a pre-written Java class, and correspondingly generating HTML and CSS code that can be used by front-end developers for each module in the picture. Note: Four Java classes are mainly used: input parameter interception class, parameter analysis class, OCR data analysis class, and front-end code generation class.

[0073] Step S104, generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0074] In this embodiment, the terminal adjusts and integrates the above codes according to the front-end display code of the feature image and the layout code of the target front-end page through the front-end page style integration strategy to obtain the front-end code of the target front-end page. The terminal displays the target front-end page based on the front-end code through the front-end display port to obtain the target front-end page.

[0075] Based on the above solution, by analyzing the feature images of the front-end page pictures and the feature information of each feature image, the target front-end page is generated, avoiding the process of manually developing the front-end page and improving the development efficiency of the front-end page.

[0076] Optionally, obtaining the front-end page picture includes: in response to the user's front-end page generation operation, obtaining the front-end page style and the layout information of the page style; generating the front-end page picture through a picture editing program according to each front-end page style and the layout information of each front-end page style.

[0077] In this embodiment, the terminal obtains the front-end page style transmitted by the user and the layout information of each page style in response to the user's front-end page generation operation. Among them, the page style transmitted by the user can be page style data, page style parameter information, or the edge information and filling information of the page style. The terminal edits the page style transmitted by the user into a page style image through a picture editing program and arranges each page style according to the layout information of the page style transmitted by the user, thereby obtaining the front-end page picture.

[0078] Based on the above solution, generating the front-end page picture through a picture editing program provides a data basis for generating the code corresponding to the front-end page picture subsequently.

[0079] Optionally, as Figure 2 shown, performing recognition processing on the front-end page picture to obtain each feature image included in the front-end page picture and the feature information of each feature image, including:

[0080] Step S201: Identify the edges of each feature image in the front-end page image, and based on the edges of each feature image, determine the feature images formed by the enclosure of the feature image edges.

[0081] Step S202: For each feature image, perform recognition processing on the feature image according to the corresponding feature image edge of the feature image to obtain the parameter information of the feature image.

[0082] Step S203: Determine the layout information of each feature image in the front-end page image according to the front-end page image, each feature image, and the parameter information of each feature image.

[0083] In this embodiment, the terminal performs recognition processing on the front-end page image through an image edge recognition algorithm to obtain the feature image edges of the feature images in the front-end page image. The terminal takes the image enclosed by each feature image edge as a feature image. The terminal performs parameter recognition processing on each feature image to obtain the parameter information of each feature image. Similarly, the terminal recognizes the parameter information of all feature images through the above steps. Among them, the parameter information of the feature image includes image parameters such as the shape parameter, color parameter, size parameter, position parameter in the front-end page image, and filled image parameter of the feature image. The terminal determines the layout information of each feature image in the three-dimensional structure of the front-end page image according to the parameter information of each feature image in the front-end page image. Among them, the layout information of each feature image is the position and distribution information of each feature image in the front-end page image. The three-dimensional structure can be but is not limited to a three-dimensional coordinate system. The specific process of determining the layout information of each feature image will be described in detail later.

[0084] Based on the above solution, by determining the parameter information of each feature image and the layout information of each feature image, it provides a data basis for subsequent generation of the front-end display code of each feature image and the layout code of the front-end page image.

[0085] Optionally, for each feature image, performing recognition processing on the feature image according to the corresponding feature image edge of the feature image to obtain the parameter information of the feature image includes: identifying the image shape of the feature image according to the corresponding feature image edge of the feature image; performing recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain the parameter information of the feature image.

[0086] In this embodiment, for each feature image, the terminal identifies the image shape corresponding to the feature image through the edge of the feature image and the image shape recognition strategy preset by the terminal. The image can be, but is not limited to, image shapes such as rectangle, rounded rectangle, ellipse, square, triangle, horizontal line, etc. The terminal presets the corresponding relationship between each image shape and the parameter recognition strategy. According to the identified image shape, the terminal queries the parameter recognition strategy corresponding to the image shape, and based on this parameter recognition strategy, performs parameter recognition on the feature image to obtain the parameter information of the feature image. The difference points in the parameter recognition strategies corresponding to each image shape lie in the recognition of the shape parameters of each image. For example, the shape of the feature image is a rectangle, a triangle, a circle, etc. When the feature image is a rectangle, the terminal determines the shape parameters of the feature image by identifying the length and width of the feature image. When the feature image is a triangle, the terminal determines the shape parameters of the feature image by identifying the base length and height of the feature image. When the feature image is a circle, the terminal determines the shape parameters of the feature image by identifying the radius of the feature image. In the parameter recognition strategy, except for the different recognition methods of the shape parameters, the recognition methods of other parameters are the same.

[0087] Based on the above solution, the terminal identifies the parameter information of each feature image through different parameter recognition strategies, providing a data basis for generating the front-end display code of each feature image subsequently.

[0088] Optionally, according to the front-end page picture, each feature image, and the parameter information of each feature image, determine the layout information of each feature image in the front-end page picture, including: establishing the coordinate framework of the front-end page picture; determining the position information of each feature image in the coordinate framework of the front-end page picture; for each feature image, determining the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image; calculating the proportional information between the front-end page picture and the feature image, and determining the layout information of each feature image according to the proportional information and the display distribution information of the feature image.

[0089] In this embodiment, the terminal establishes a coordinate framework for the front-end page picture. The coordinate framework can be, but is not limited to, a two-dimensional coordinate system, a three-dimensional coordinate system, or a matrix framework, etc. The terminal determines the position information of each feature image in the coordinate framework of the front-end page picture. Among them, when the coordinate framework is a two-dimensional coordinate system, the position information of the feature image is two-dimensional position coordinates. When the coordinate framework is a three-dimensional coordinate system, the position information of the feature image is three-dimensional position coordinates. When the coordinate framework is a matrix, the position information of the feature image is matrix element points. The terminal determines the position of each feature image in the front-end page picture and the range covered by the feature image according to the shape parameter information of the feature image and the position information of the feature image. The terminal uses the position of each feature image in the front-end page picture and the range covered by the feature image as the display distribution information of each feature image. The terminal calculates the ratio information between the front-end page picture and the feature image through the display distribution information of each feature image. The ratio information is the ratio of the front-end page image to each feature image, and is used to synchronously adjust the size of each feature image when adjusting the size of the front-end page image. The terminal determines the layout information of each feature image in the front-end page picture according to the ratio information between the front-end page picture and the feature image and the display distribution information of the feature image. The layout information is the distribution of the feature images on the front-end page.

[0090] Based on the above solution, by determining the layout information of each feature image, it provides a data basis for subsequent determination of the layout code of the front-end page.

[0091] Optionally, as Figure 3 shown, according to the feature image and the parameter information of the feature image, generate the front-end display code of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image, including:

[0092] Step S301, determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image.

[0093] Step S302, through the layout code generation strategy, generate the initial layout code of the target front-end page according to the layout information of all feature images in the front-end page picture, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0094] In this embodiment, the terminal determines the display code generation strategy for each feature image according to the image shape corresponding to the shape parameter information of each feature image, and generates the front-end display code for each feature image based on the display code generation strategy. For example, a rectangle represents a container, and the display code generation strategy corresponding to html can be passed through is marked; the rounded rectangle represents an input box, and the display code generation strategy corresponding to html can be passed through <input> is marked; the ellipse represents a button, and the display code generation strategy corresponding to html can be passed through <button>is marked; the square represents a picture, and the text description inside the square is the picture address. The generation strategy of the display code corresponding to html can be passed through is marked; the triangle represents a hyperlink, and the text description inside the triangle is the hyperlink address. The generation strategy of the display code corresponding to html can be passed through are marked; the horizontal line represents the paragraph text, and the text above the horizontal line is the text content. The generation strategy for the corresponding html display code can be passed through It is marked. The terminal determines the display code generation strategy for each feature image based on the above markings. The display code generation strategy can be implemented in Python. The terminal converts the parameter information corresponding to the feature image into HTML format code (i.e., the front-end display code) through Python.

[0095] The terminal generates the initial layout code for the target front-end page according to the layout information of all feature images in the front-end page picture through the layout code generation strategy, and adjusts the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page. Among them, the layout code generation strategy can be but is not limited to the generation strategies corresponding to the front-end local framework flex and element-ui. This generation strategy adds the code corresponding to the parameter information of each feature image to the initial layout code, and adjusts the parameter values of the size parameters of each feature image in the initial layout code and the target front-end page according to the proportional relationship between the front-end page picture and each feature image to obtain the layout code of the target front-end page.

[0096] Based on the above solution, by analyzing the feature images of the front-end page picture and the feature information of each feature image, the target front-end page is generated, avoiding the process of manually developing the front-end page and improving the development efficiency of the front-end page.

[0097] This application also provides an example of generating a front-end page. As shown in Figure 4, the specific processing process includes the following steps:

[0098] Step S401, in response to the user's front-end page generation operation, obtain the front-end page style and the layout information of the page style.

[0099] Step S402, generate a front-end page picture through an image editing program according to each front-end page style and the layout information of each front-end page style.

[0100] Step S403, identify the edges of each feature image in the front-end page picture, and determine the feature image formed by the enclosure of the feature image edges based on each feature image edge.

[0101] Step S404, identify the image shape of the feature image according to the feature image edge corresponding to the feature image.

[0102] Step S405, identify the feature image according to the parameter identification strategy corresponding to the image shape to obtain the parameter information of the feature image.

[0103] Step S406, establish a coordinate framework for the front-end page picture.

[0104] Step S407, determine the position information of each feature image in the coordinate framework of the front-end page picture.

[0105] Step S408: For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image.

[0106] Step S409: Calculate the ratio information between the front-end page picture and the feature image, and determine the layout information of each feature image according to the ratio information and the display distribution information of the feature image.

[0107] Step S410: Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image.

[0108] Step S411: Through the layout code generation strategy, generate the initial layout code of the target front-end page according to the layout information of all feature images in the front-end page picture, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0109] Step S412: Generate the target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0110] It should be understood that although the steps in the flowcharts involved in the above-described embodiments are sequentially shown according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless there is a clear description in this article, the execution of these steps has no strict order limit, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-described embodiments may include multiple steps or multiple stages. These steps or stages are not necessarily executed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be executed alternately or alternately with at least a part of other steps or steps or stages in other steps.

[0111] Based on the same inventive concept, the embodiments of the present application also provide a front-end page generation device for implementing the above-mentioned front-end page generation method. The implementation solutions provided by this device for solving problems are similar to the implementation solutions described in the above method. Therefore, the specific limitations in one or more embodiments of the following front-end page generation device can refer to the limitations on the front-end page generation method in the above text, and will not be repeated here.

[0112] In one embodiment, as Figure 5 As shown in Figure 5 , a front-end page generation device is provided, including: an acquisition module 510, an identification module 520, a construction module 530, and a generation module 540, where:

[0113] The acquisition module 510 is configured to acquire a front-end page picture;

[0114] The identification module 520 is configured to perform identification processing on the front-end page picture to obtain each feature image and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page picture;

[0115] The construction module 530 is configured to generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image;

[0116] The generation module 540 is configured to generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0117] Optionally, the acquisition module 510 is specifically configured to:

[0118] In response to a user's front-end page generation operation, acquire the front-end page style and the layout information of the page style;

[0119] Generate a front-end page picture through a picture editing program according to each front-end page style and the layout information of each front-end page style.

[0120] Optionally, the identification module 520 is specifically configured to:

[0121] Identify the edges of each feature image in the front-end page picture, and based on the edges of each feature image, determine the feature image formed by the enclosure of the feature image edges;

[0122] For each feature image, perform identification processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image;

[0123] Determine the layout information of each feature image in the front-end page picture according to the front-end page picture, each feature image, and the parameter information of each feature image.

[0124] Optionally, the identification module 520 is specifically configured to:

[0125] Identify the image shape of the feature image according to the edge of the feature image corresponding thereto.

[0126] Identify the feature image according to the parameter identification strategy corresponding to the image shape, and obtain the parameter information of the feature image.

[0127] Optionally, the identification module 520 is specifically configured to:

[0128] Establish a coordinate framework for the front-end page picture;

[0129] In the coordinate framework of the front-end page picture, determine the position information of each feature image;

[0130] For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image;

[0131] Calculate the ratio information between the front-end page picture and the feature image, and determine the layout information of each feature image according to the ratio information and the display distribution information of the feature image.

[0132] Optionally, the establishment module 530 is specifically configured to:

[0133] Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image;

[0134] Generate the initial layout code of the target front-end page through the layout code generation strategy according to the layout information of all the feature images in the front-end page picture, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0135] Each module in the above front-end page generation device can be implemented in whole or in part by software, hardware, and their combination. The above modules can be embedded in the processor of the computer device in hardware form or be independent of it, or be stored in the memory of the computer device in software form so that the processor can call and execute the operations corresponding to the above modules.

[0136] In one embodiment, a computer device is provided. The computer device can be a terminal, and its internal structure diagram can be as Figure 6 As shown in the figure. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected via a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it implements a front-end page generation method. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, a trackball, or a touchpad provided on the housing of the computer device, or an external keyboard, touchpad, or mouse, etc.

[0137] Those skilled in the art can understand that Figure 6 the structure shown in the figure is only a block diagram of some structures related to the solution of this application, and does not constitute a limitation on the computer device to which the solution of this application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0138] In one embodiment, a computer device is provided, including a memory and a processor. A computer program is stored in the memory. When the processor executes the computer program, the following steps are implemented:

[0139] Obtain a front-end page picture;

[0140] Perform recognition processing on the front-end page picture to obtain each feature image included in the front-end page picture, and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page picture;

[0141] Generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image;

[0142] Generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0143] Optionally, the obtaining of the front-end page picture includes:

[0144] In response to the user's front-end page generation operation, obtain the front-end page style and the layout information of the page style;

[0145] According to each of the front-end page styles and the layout information of each of the front-end page styles, generate a front-end page image through an image editing program.

[0146] Optionally, the recognition processing of the front-end page image to obtain each feature image included in the front-end page image and the feature information of each feature image includes:

[0147] Identify the edges of each feature image in the front-end page image, and based on each feature image edge, determine the feature image formed by the enclosure of the feature image edge;

[0148] For each feature image, perform recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image;

[0149] According to the front-end page image, each feature image, and the parameter information of each feature image, determine the layout information of each feature image in the front-end page image.

[0150] Optionally, the performing recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image includes:

[0151] According to the feature image edge corresponding to the feature image, identify the image shape of the feature image;

[0152] Perform recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain the parameter information of the feature image.

[0153] Optionally, the determining the layout information of each feature image in the front-end page image according to the front-end page image, each feature image, and the parameter information of each feature image includes:

[0154] Establish a coordinate framework for the front-end page image;

[0155] In the coordinate framework of the front-end page image, determine the position information of each feature image;

[0156] For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image;

[0157] Calculate the ratio information between the front-end page image and the feature image, and determine the layout information of each feature image according to the ratio information and the display distribution information of the feature image.

[0158] Optionally, generating the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establishing the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image includes:

[0159] Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image;

[0160] Generate the initial layout code of the target front-end page according to the layout information of all the feature images in the front-end page image through the layout code generation strategy, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0161] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented:

[0162] Obtain the front-end page image;

[0163] Perform recognition processing on the front-end page image to obtain each feature image included in the front-end page image and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page image;

[0164] Generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image;

[0165] Generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0166] Optionally, the obtaining the front-end page image includes:

[0167] In response to the user's front-end page generation operation, obtain the front-end page style and the layout information of the page style;

[0168] Generate a front-end page image through an image editing program according to each of the front-end page styles and the layout information of each of the front-end page styles.

[0169] Optionally, the recognition processing of the front-end page image to obtain each feature image included in the front-end page image and the feature information of each feature image includes:

[0170] Identify the edges of each feature image in the front-end page image, and based on each feature image edge, determine the feature image formed by the enclosure of the feature image edge;

[0171] For each feature image, perform recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image;

[0172] Determine the layout information of each feature image in the front-end page image according to the front-end page image, each feature image, and the parameter information of each feature image.

[0173] Optionally, the performing recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image includes:

[0174] Identify the image shape of the feature image according to the feature image edge corresponding to the feature image;

[0175] Perform recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain the parameter information of the feature image.

[0176] Optionally, the determining the layout information of each feature image in the front-end page image according to the front-end page image, each feature image, and the parameter information of each feature image includes:

[0177] Establish a coordinate framework for the front-end page image;

[0178] Determine the position information of each feature image in the coordinate framework of the front-end page image;

[0179] For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image;

[0180] Calculate the proportional information between the front-end page image and the feature image, and determine the layout information of each feature image according to the proportional information and the display distribution information of the feature image.

[0181] Optionally, generating the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establishing the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image, includes:

[0182] Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image;

[0183] Generate the initial layout code of the target front-end page through the layout code generation strategy according to the layout information of all the feature images in the front-end page picture, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0184] In one embodiment, a computer program product is provided, including a computer program, which when executed by a processor implements the following steps:

[0185] Obtain the front-end page picture;

[0186] Perform recognition processing on the front-end page picture to obtain each feature image included in the front-end page picture and the feature information of each feature image; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page picture;

[0187] Generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image;

[0188] Generate the target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

[0189] Optionally, the obtaining the front-end page picture includes:

[0190] In response to the user's front-end page generation operation, obtain the front-end page style and the layout information of the page style;

[0191] Generate the front-end page picture through a picture editing program according to each front-end page style and the layout information of each front-end page style.

[0192] Optionally, the performing recognition processing on the front-end page picture to obtain each feature image included in the front-end page picture and the feature information of each feature image includes:

[0193] Identify the edges of each feature image in the front-end page image, and based on each of the feature image edges, determine the feature images formed by the enclosure of the feature image edges;

[0194] For each feature image, perform recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain parameter information of the feature image;

[0195] Based on the front-end page image, each of the feature images, and the parameter information of each of the feature images, determine the layout information of each of the feature images in the front-end page image.

[0196] Optionally, the step of performing recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain parameter information of the feature image includes:

[0197] Identify the image shape of the feature image according to the feature image edge corresponding to the feature image;

[0198] Perform recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain parameter information of the feature image.

[0199] Optionally, the step of determining the layout information of each of the feature images in the front-end page image based on the front-end page image, each of the feature images, and the parameter information of each of the feature images includes:

[0200] Establish a coordinate framework for the front-end page image;

[0201] In the coordinate framework of the front-end page image, determine the position information of each feature image;

[0202] For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image;

[0203] Calculate the proportional information between the front-end page image and the feature image, and determine the layout information of each feature image according to the proportional information and the display distribution information of the feature image.

[0204] Optionally, the step of generating the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establishing the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image includes:

[0205] Determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image;

[0206] Through the layout code generation strategy, generate the initial layout code of the target front-end page according to the layout information of all the feature images in the front-end page picture, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page.

[0207] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0208] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to a memory, database, or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memories. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM), etc. The databases involved in the embodiments provided in the present application can include at least one of relational databases and non-relational databases. Non-relational databases can include distributed databases based on blockchain, etc., and are not limited thereto. The processors involved in the embodiments provided in the present application can be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, data processing logics based on quantum computing, etc., and are not limited thereto.

[0209] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as the scope recorded in this specification.

[0210] The above-described embodiments merely represent several implementation manners of the present application. The description thereof is relatively specific and detailed, but it should not be construed as a limitation on the patent scope of the present application. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the appended claims. < / button>

Claims

1. A method for generating a front-end page, characterized in that, Including: Obtain the front-end page image, including: in response to the user's front-end page generation operation, obtain the front-end page style and the layout information of the front-end page style; according to each of the front-end page styles and the layout information of each of the front-end page styles, generate a front-end page image through an image editing program; Perform recognition processing on the front-end page image to obtain each feature image included in the front-end page image and the feature information of each of the feature images; the feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page image; Generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and establish the layout code of the target front-end page according to the layout information of each of the feature images and the parameter information of each of the feature images, including: determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image; through the layout code generation strategy, generate the initial layout code of the target front-end page according to the layout information of all the feature images in the front-end page image, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page; Generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

2. The method according to claim 1, wherein The performing recognition processing on the front-end page image to obtain each feature image included in the front-end page image and the feature information of each of the feature images includes: Identify the edges of each feature image in the front-end page image, and based on each of the feature image edges, determine the feature image formed by the enclosure of the feature image edges; For each feature image, perform recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image; Determine the layout information of each of the feature images in the front-end page image according to the front-end page image, each of the feature images, and the parameter information of each of the feature images.

3. The method according to claim 2, characterized in that, The for each feature image, performing recognition processing on the feature image according to the feature image edge corresponding to the feature image to obtain the parameter information of the feature image includes: Identify the image shape of the feature image according to the feature image edge corresponding to the feature image; Perform recognition on the feature image according to the parameter recognition strategy corresponding to the image shape to obtain the parameter information of the feature image.

4. The method according to claim 2, characterized in that The determining the layout information of each of the feature images in the front-end page image according to the front-end page image, each of the feature images, and the parameter information of each of the feature images includes: Establish a coordinate framework of the front-end page image; In the coordinate framework of the front-end page image, determine the position information of each feature image; For each feature image, determine the display distribution information of the feature image according to the parameter information of the feature image and the position information of the feature image. Calculate the ratio information between the front-end page picture and the feature image, and determine the layout information of each feature image according to the ratio information and the display distribution information of the feature image.

5. A front-end page generation device, characterized in that, The device includes: An acquisition module, configured to acquire a front-end page picture. Specifically, the acquisition module is configured to: in response to a front-end page generation operation of a user, acquire a front-end page style and the layout information of the front-end page style; generate a front-end page picture through a picture editing program according to each front-end page style and the layout information of each front-end page style. An identification module, configured to perform identification processing on the front-end page picture to obtain each feature image included in the front-end page picture and the feature information of each feature image. The feature information includes the display parameter information of the feature image and the layout information of the feature image in the front-end page picture. A building module, configured to generate the front-end display code of the feature image according to the feature image and the parameter information of the feature image, and build the layout code of the target front-end page according to the layout information of each feature image and the parameter information of each feature image. Specifically, the building module is configured to: determine the image category of the feature image according to the image shape corresponding to the shape parameter information of the feature image, and generate the front-end display code of the feature image based on the display code generation strategy corresponding to the image category of the feature image; generate the initial layout code of the target front-end page according to the layout information of all the feature images in the front-end page picture through a layout code generation strategy, and adjust the parameter values in the initial layout code according to the parameter information of each feature image to obtain the layout code of the target front-end page. A generation module, configured to generate a target front-end page according to the front-end display code of the feature image and the layout code of the target front-end page.

6. A computer device, comprising a memory and a processor, the memory storing a computer program, characterized in that, When the processor executes the computer program, the steps of the method according to any one of claims 1 to 4 are implemented.

7. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, the steps of the method according to any one of claims 1 to 4 are implemented.

8. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, the steps of the method according to any one of claims 1 to 4 are implemented.

Images