Network page generation method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a network page generation method and device, equipment and a storage medium, and the method comprises the steps: obtaining a page design file corresponding to a target business activity, and analyzing the page design file to obtain a plurality of layers; based on a set component matching template, determining each candidate layer group and a component type corresponding to the candidate layer group from the plurality of layers, and based on a page module size correspondingly configured by each component type, performing image cutting processing corresponding to each candidate layer group on the page design file to obtain a plurality of material images; and generating a target network page according to each material image, the corresponding component type and the set page module framework. According to the scheme, the image cutting efficiency and the image cutting precision can be improved, the accurate adaptation of the material image and the page module is ensured, and the rapid iteration activity operation requirement can be met.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, device, and storage medium for generating web pages. Background Technology

[0002] In the process of web page design, the page design file is the concrete carrier of the designer's creativity. It contains various page materials required for the web page and provides the data foundation for the visual effects of different web pages. Among them, the slicing of material images and module matching of the page design file are key steps to achieve the visual presentation and functional adaptation of the page. By breaking down the page design file into independent materials that meet the requirements of the web page architecture through material slicing, and then performing module matching based on the independent materials, web pages that meet business needs can be generated.

[0003] Related technologies require manual slicing of webpage design files into images and then manually matching these images to various modules of the webpage to generate the webpage. However, with the rapid pace of content updates in business activities, the aforementioned methods are inefficient and lack sufficient accuracy, failing to meet the demands of fast-paced operational needs. Summary of the Invention

[0004] This application provides a web page generation method, apparatus, device, and storage medium, which solves the problems of low efficiency and insufficient accuracy in related technologies, making it unable to adapt to the needs of rapidly iterating event operations. It can improve the efficiency and accuracy of image slicing, ensure the accurate adaptation of material images and page modules, and adapt to the needs of rapidly iterating event operations.

[0005] In a first aspect, embodiments of this application provide a method for generating web pages, the method comprising: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers; Based on the set component matching template, each candidate layer group and its corresponding component type are determined from the multiple layers. Based on the page module size configured for each component type, the page design file is sliced ​​to obtain multiple material images corresponding to each candidate layer group. The target web page is generated based on each of the provided material images, the corresponding component types, and the set page module framework.

[0006] Secondly, embodiments of this application also provide a web page generation apparatus, comprising: The acquisition module is configured to acquire the page design file corresponding to the target business activity; The layer determination module is configured to parse the page design file to obtain multiple layers; The material image determination module is configured to determine each candidate layer group and its corresponding component type from the multiple layers based on the set component matching template, and to perform image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images; The page generation module is configured to generate a target web page based on each of the aforementioned material images, the corresponding component types, and the set page module framework.

[0007] Thirdly, embodiments of this application also provide a web page generation device, the device comprising: One or more processors; Storage device, configured to store one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the web page generation method described in the embodiments of this application.

[0008] Fourthly, embodiments of this application also provide a non-volatile storage medium for storing computer-executable instructions, which, when executed by a computer processor, are configured to perform the web page generation method described in embodiments of this application.

[0009] In this embodiment, parsing the page design file yields multiple layers, enabling the separation and positioning of visual elements within the file. This provides a data foundation for component identification and image slicing, while also ensuring the accuracy of the slicing process. Based on a set component matching template, candidate layer groups and their corresponding component types are determined from the multiple layers. This transforms independent layers into candidate layer groups corresponding to components and clarifies the component types. Based on the page module dimensions configured for each component type, the page design file is sliced ​​for each candidate layer group to obtain multiple source images. This ensures that the size of the source images matches the webpage display requirements and guarantees the accuracy of the slicing process. The target webpage is generated based on each source image, its corresponding component type, and the set page module framework, meeting the visual and functional requirements of business activities. This solution improves slicing efficiency and accuracy, ensures precise adaptation of source images to page modules, and can adapt to the needs of rapidly iterating operational activities. Attached Figure Description

[0010] Figure 1 A flowchart illustrating a webpage generation method provided in this application embodiment; Figure 2 A schematic diagram illustrating the processing steps of an application web page generation method provided in an embodiment of this application; Figure 3A flowchart illustrating a web page generation method, including a process for determining candidate layer groups and corresponding component types, is provided in this application embodiment. Figure 4 A flowchart illustrating a web page generation method, including a specific process for determining candidate layer groups, is provided as an embodiment of this application. Figure 5 A flowchart illustrating a web page generation method, provided in this application embodiment, includes a process for specifically determining the component type corresponding to a candidate layer group; Figure 6 A flowchart illustrating a web page generation method, including a process of image slicing to obtain multiple source images, is provided as an embodiment of this application. Figure 7 A flowchart illustrating a web page generation method, including the process of parsing a page design file to obtain multiple layers, is provided as an embodiment of this application. Figure 8 A flowchart of a web page generation method, including a process for generating a target web page, is provided for embodiments of this application. Figure 9 A structural block diagram of a web page generation device provided in an embodiment of this application; Figure 10 This is a schematic diagram of the structure of a web page generation device provided in an embodiment of this application. Detailed Implementation

[0011] The embodiments of this application will be further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the embodiments of this application and are not intended to limit the scope of the embodiments. Furthermore, it should be noted that, for ease of description, only the parts relevant to the embodiments of this application are shown in the accompanying drawings, not the entire structure.

[0012] The terms "first," "second," etc., used in the specification and claims of this application are used to distinguish similar objects and not to describe a specific order or sequence. It should be understood that such use of data can be interchanged where appropriate so that embodiments of this application can be implemented in orders other than those illustrated or described herein, and the objects distinguished by "first," "second," etc., are generally of the same class and the number of objects is not limited; for example, a first object can be one or more. Furthermore, in the specification and claims, "and / or" indicates at least one of the connected objects, and the character " / " generally indicates that the preceding and following objects are in an "or" relationship.

[0013] The web page generation method provided in this application embodiment can be executed by a computer device. The computer device refers to any electronic device with data computing, processing and storage capabilities, such as a server. This application embodiment does not limit this.

[0014] Figure 1 A flowchart of a web page generation method provided in this application embodiment is shown below. Figure 1 As shown, the method for generating web pages specifically includes the following steps: Step S101: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers.

[0015] The page design file can be created by a designer using design tools, and may include design information such as the page's visual layout, element styles, and color scheme. Layers are the basic building blocks of the page design file, such as image layers, shape layers, and text layers. The page design file can be the result of overlaying different layers, and different layers can correspond to different page elements. Therefore, by parsing the page design file, its layer structure can be broken down into multiple independent layers, facilitating subsequent component identification and image slicing.

[0016] Step S102: Based on the set component matching template, determine each candidate layer group and its corresponding component type from multiple layers, and perform image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images.

[0017] The component matching template can be a predefined rule base used to identify the component type corresponding to the layer combination. This template can set feature dimensions for different component types. Component types can be buttons, cards, etc., and feature dimensions can include size range, layer combination, shape features, text keywords, etc. For example, if the "component type" is "button," its feature dimensions can include: {"Size ratio dimension": "4:1"; "Layer combination dimension": ["Shape layer", "Text layer"]; "Style feature dimension": ["Rounded rectangle", "Solid fill"]; "Text keyword dimension": ["Click", "Confirm"]}. Candidate layer groups can be combinations of several layers that constitute a complete component, specifically determined based on layer spacing, layer combinations, and other information. Since the visual requirements of the target web page differ in different business scenarios, the page module size can be used to set the actual display size of the component type on the target web page to adapt to different terminals and layout requirements. Based on the page module size configured according to the component type, image slicing can extract and export material images from the candidate layer groups for subsequent filling of the visual parts in the page module framework.

[0018] Step S103: Generate the target web page based on each material image, the corresponding component type, and the set page module framework.

[0019] The page module framework can be a pre-defined template based on webpage structure and rules, defining the layout and internal interaction logic of the corresponding page modules. By filling the corresponding images into this page module framework, a target webpage can be generated for application to the target business activity.

[0020] Figure 2 A schematic diagram illustrating the processing steps of an application web page generation method provided in this embodiment of the application, as shown below. Figure 2 As shown, after parsing, the page design file 201 yields multiple layers 202 (layers A, B, C, and D are shown in the figure). These multiple layers 202, combined with the set component matching template, determine each candidate layer group 203 and its corresponding component type. Then, based on the page module size configured for each component type, the page design file 201 is sliced ​​for each candidate layer group 203 to obtain multiple material images 204. Finally, the target web page 206 is generated based on each material image 204, the corresponding component type, and the set page module framework 205.

[0021] The above-described process involves parsing the page design file to obtain multiple layers, which allows for the separation and positioning of visual elements within the file. This provides a data foundation for component identification and image slicing, ensuring the accuracy of the slicing process. Based on the configured component matching template, candidate layer groups and their corresponding component types are determined from these layers. This transforms individual layers into candidate layer groups corresponding to components and clarifies the component types. Slicing the page design file according to the configured page module size for each component type yields multiple source images. This ensures that the image sizes match the webpage display requirements and guarantees the accuracy of the slicing process. Finally, the target webpage is generated based on the source images, corresponding component types, and the configured page module framework, meeting the visual and functional requirements of business activities. This solution improves slicing efficiency and accuracy, ensures precise adaptation of source images to page modules, and can adapt to the needs of rapidly iterating operational activities.

[0022] Figure 3 A flowchart illustrating a web page generation method, including a process for determining candidate layer groups and corresponding component types, is provided in this application embodiment. Figure 3 As shown, the method for generating web pages specifically includes the following steps: Step S301: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers.

[0023] Step S302: Query the component matching template according to the activity identifier corresponding to the target business activity, and perform clustering processing on multiple layers to obtain multiple candidate layer groups; compare and match each candidate layer group with the component matching template to determine the component type corresponding to each candidate layer group.

[0024] The activity identifier uniquely identifies the target business activity and serves as a query key to retrieve the associated component matching template from the template library. Clustering involves grouping multiple dispersed layers according to spatial relationships and visual features. This grouping merges layers corresponding to the same component to obtain candidate layer groups. Clustering can be performed based on factors such as layer spacing and layer pairing. After obtaining the candidate layer groups, each candidate layer group is compared with the feature dimensions corresponding to each component type in the component matching template to determine the degree of matching between the candidate layer group and each component type. The component type with the highest matching degree is then identified as the component type corresponding to that candidate layer group.

[0025] Step S303: Based on the page module size configured for each component type, slice the page design file for each candidate layer group to obtain multiple material images.

[0026] Step S304: Generate the target web page based on each material image, the corresponding component type, and the set page module framework.

[0027] As described above, clustering multiple layers yields multiple candidate layer groups. Candidate layer groups that meet the component dimensions can be determined based on the relationships between layers, ensuring the rationality of layer grouping. Furthermore, by comparing and matching with component matching templates, the component type corresponding to each candidate layer group can be accurately identified, providing a reliable foundation for subsequent image slicing and page generation.

[0028] Figure 4 A flowchart illustrating a webpage generation method, including a specific process for determining candidate layer groups, is provided for embodiments of this application. Figure 4 As shown, the method for generating web pages specifically includes the following steps: Step S401: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers.

[0029] Step S402: Query the component matching template based on the activity identifier corresponding to the target business activity.

[0030] Step S403: Calculate the distance between multiple layers to obtain the edge spacing between each layer; combine the layers whose edge spacing is less than a preset distance threshold to obtain multiple first layer groups; determine the first layer group that meets the preset layer combination conditions among the multiple first layer groups as candidate layer groups.

[0031] Since multiple layers corresponding to the same component are spatially adjacent, the physical positional relationship between different layers can be calculated based on the boundary coordinates of the layers. The edge spacing can be the shortest physical distance between the edges of two layers to determine whether there is a spatial relationship between them. A preset distance threshold can be a reference value used to determine whether two layers are spatially adjacent, and its unit can be pixels. For example, the preset distance threshold can be 10px. Several layers with an edge spacing of less than 10px can be combined into a first layer group. For example, a button background layer and a button text layer overlap, with an edge spacing of 0, and can be combined into a first layer group. Another example is that the edge spacing between a product image layer and a price text layer is 3px, and since 3px < 10px, they can be combined into a first layer group. Furthermore, since multiple layers in the same component have constraints such as the number of layers, specific type combinations, and specific style combinations, preset layer combination conditions can be set to filter candidate layer groups that match the component's attributes. These preset layer combination conditions can be limited to a preset value range for the number of layers, limited to specific layer type combinations, limited to layer style combinations, etc., which are not limited in this application. For example, the preset layer combination conditions can be that the number of layers is between 2 and 5, the layer type combination belongs to a specific combination, and the layer style belongs to a specific style.

[0032] Step S404: Compare and match each candidate layer group with the component matching template to determine the component type corresponding to each candidate layer group.

[0033] Step S405: Based on the page module size configured for each component type, slice the page design file for each candidate layer group to obtain multiple material images.

[0034] Step S406: Generate the target web page based on each material image, the corresponding component type, and the set page module framework.

[0035] The above describes how multiple layers with edge spacing less than a preset distance threshold are combined to form multiple first layer groups. This allows for initial layer grouping from a spatial association perspective. Then, the first layer groups that meet the preset layer grouping conditions are identified as candidate layer groups. This allows for further exclusion of irrelevant layers from an attribute matching perspective, efficiently and accurately identifying candidate layer groups that match the component.

[0036] Figure 5 A flowchart illustrating a web page generation method, as provided in this application embodiment, includes a process for specifically determining the component type corresponding to a candidate layer group. Figure 5 As shown, the method for generating web pages specifically includes the following steps: Step S501: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers.

[0037] Step S502: Query the component matching template based on the activity identifier corresponding to the target business activity, and perform clustering processing on multiple layers to obtain multiple candidate layer groups.

[0038] Step S503: Extract information from each candidate layer group using a preset feature dimension to obtain multiple first feature information; compare the multiple first feature information corresponding to each candidate layer group with the second feature information of the same feature dimension corresponding to each component type in the component matching template to determine the matching score; determine the component type corresponding to the candidate layer group by selecting the component type with the highest matching score.

[0039] The preset feature dimensions can be consistent with existing feature dimensions in the component matching template, such as size ratio dimension, layer combination dimension, style feature dimension, text keyword dimension, and positional relationship dimension. The first feature information can be the specific feature values ​​extracted from the candidate layer group corresponding to each preset feature dimension. The second feature information can be the standard feature values ​​pre-configured for each component type in the component matching template corresponding to each preset feature dimension. For example, the first feature information extracted from the candidate layer group includes the first size ratio, first layer combination, first style feature, and first text keyword, while the second feature information corresponding to each component type in the component matching template includes the second size ratio, second layer combination, second style feature, and second text keyword. Different feature dimensions can be pre-set with corresponding matching scores; for example, the matching score for the size ratio dimension is 30, the matching score for the layer combination dimension is 30, the matching score for the style feature dimension is 20, and the matching score for the text keyword dimension is 20. By determining whether the first feature information and the second feature information are consistent, it can be determined whether the corresponding matching score can be included in the matching score. For example, the component matching template records a first component type and a second component type. For the first component type, if the first size ratio and the second size ratio are the same, the first layer combination and the second layer combination are the same, the first style feature and the second style feature are the same, and the first text keyword and the second text keyword are different, then the matching score is 80. For the second component type, if the first size ratio and the second size ratio are the same, the first layer combination and the second layer combination are the same, the first style feature and the second style feature are different, and the first text keyword and the second text keyword are different, then the matching score is 60. Since the matching score of the first component type is higher than that of the second component type, the first component type can be identified as the component type corresponding to the candidate layer group.

[0040] Step S504: Based on the page module size configured for each component type, slice the page design file for each candidate layer group to obtain multiple material images.

[0041] Step S505: Generate the target web page based on each material image, the corresponding component type, and the set page module framework.

[0042] As described above, by comparing the multiple first feature information corresponding to each candidate layer group with the second feature information of the same feature dimension corresponding to each component type in the component matching template to determine the matching score, a comprehensive score can be obtained by combining multiple feature dimensions, and the component type corresponding to the candidate layer group can be accurately determined.

[0043] Figure 6 A flowchart illustrating a webpage generation method, including a process of image slicing to obtain multiple source images, is provided in this application embodiment. Figure 6 As shown, the method for generating web pages specifically includes the following steps: Step S601: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers.

[0044] Step S602: Based on the set component matching template, determine each candidate layer group and its corresponding component type from multiple layers.

[0045] Step S603: Determine the original slice range corresponding to each candidate layer group in the page design file; adjust the original slice range according to the page module size configured for each component type to obtain the target slice range; crop the corresponding target slice range from the page design file to obtain the material image corresponding to each candidate layer group.

[0046] The original slice area can be the smallest bounding rectangle calculated based on the actual positions and boundaries of all layers in the candidate layer group; that is, the smallest rectangular area that can cover all layers. Specifically, it can be the "minimum left coordinate, minimum top coordinate, maximum right coordinate, and maximum bottom coordinate" of all layers in the candidate layer group to form the top left and bottom right corners of the rectangle. In one embodiment, if the page module size is proportional to the original slice area, the original slice area is proportionally enlarged or reduced to the same size as the page module to obtain the target slice area. In another embodiment, if the page module size is not proportional to the original slice area, the original slice area is cropped according to the proportion corresponding to the page module size, and then proportionally enlarged or reduced to the same size as the page module to obtain the target slice area. Cropping from the page design file corresponding to the target slice area can extract the effective layer portions of the candidate layer group and merge them to obtain the corresponding material image.

[0047] Step S604: Generate the target web page based on each material image, the corresponding component type, and the set page module framework.

[0048] As described above, the original image slice range is adjusted based on the page module size to ensure that the size of the components and page modules is consistent, thus guaranteeing the adaptability of the source images to the target web page.

[0049] Figure 7 A flowchart illustrating a web page generation method, including the process of parsing a page design file to obtain multiple layers, is provided for embodiments of this application. Figure 7 As shown, the method for generating web pages specifically includes the following steps: Step S701: Obtain the page design file corresponding to the target business activity.

[0050] Step S702: Identify and determine the file format of the page design file; extract and process the information of the corresponding file format to obtain the layer structure information; perform hierarchical traversal on the layer structure information and extract multiple layers.

[0051] Different design tools output page design files in different formats, such as Sketch, PSD, and Figma. Identifying the format of the page design file facilitates subsequent information extraction based on that format. Layer structure information can be structured data extracted from the page design file, describing the layer organization relationships and basic attributes. These layer organization relationships can include parent-child structures and display order. The basic attributes can include layer identifiers, types, and boundary ranges. By hierarchically traversing the layer structure information, all sub-layers can be accessed layer by layer, thus separating the complete attribute data of each independent layer and ultimately obtaining multiple layers that can be processed independently. The relevant information for each layer can include identifier information, type information, spatial information, and content characteristics.

[0052] Step S703: Based on the set component matching template, determine each candidate layer group and its corresponding component type from multiple layers, and perform image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images.

[0053] Step S704: Generate the target web page based on each material image, the corresponding component type, and the set page module framework.

[0054] As described above, by identifying the format of the page design file, cross-format design file compatibility can be achieved, improving adaptability. Extracting information from the page design file according to its corresponding file format to obtain layer structure information, and performing layer traversal and extraction to obtain multiple layers, can ensure the accuracy of layer extraction and provide standardized layer data for subsequent image slicing.

[0055] Figure 8 A flowchart of a web page generation method, including the process of generating a target web page, is provided for embodiments of this application. Figure 8 As shown, the method for generating web pages specifically includes the following steps: Step S801: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers.

[0056] Step S802: Based on the set component matching template, determine each candidate layer group and its corresponding component type from multiple layers, and perform image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images.

[0057] Step S803: Determine the target module position in the set page module framework according to the component type corresponding to each material image; add the target module positions corresponding to each material image to the page module framework to obtain the first network page; adjust the layout of the first network page according to the terminal device type corresponding to the target business activity to obtain the target network page.

[0058] The target module location can be a fixed area reserved within the page module framework for different component types, defining the placement of each material image. The first webpage can be the initial webpage generated after all material images are added to the page module framework according to the target module location, containing complete visual content and basic layout, but may have display incompatibility issues on some terminal devices. The terminal device type corresponding to the target business activity can be the main triggering device for users to access the target webpage, specifically determined by business requirements or user profiles, such as mobile, PC, or in-app embedded devices. Layout adjustments can be adaptive optimizations of the first webpage layout based on the characteristics of the terminal device type, such as page size adaptation, module reordering, and pixel ratio adjustments.

[0059] As described above, adding the target module positions corresponding to each material image to the page module framework to obtain the first network page can ensure the accuracy of the display position of the material images; adjusting the layout of the first network page according to the terminal device type corresponding to the target business activity to obtain the target network page can effectively adapt to different target terminal devices and ensure the display effect of various application scenarios.

[0060] Figure 9 This is a structural block diagram of a webpage generation apparatus provided in an embodiment of this application. The apparatus is configured to execute the webpage generation method provided in the above embodiments, and possesses the corresponding functional modules and beneficial effects of the method. For example... Figure 9 As shown, the device specifically includes: Module 901 is configured to retrieve the page design file corresponding to the target business activity. Layer determination module 902 is configured to parse the page design file to obtain multiple layers; The material image determination module 903 is configured to determine each candidate layer group and its corresponding component type from multiple layers based on the set component matching template, and to perform image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images; Page generation module 904 is configured to generate a target web page based on each source image, the corresponding component type, and the set page module framework.

[0061] In one possible embodiment, the source image determination module 903 is further configured to: The component matching template is obtained by querying the activity identifier corresponding to the target business activity, and multiple layers are clustered to obtain multiple candidate layer groups; Each candidate layer group is compared and matched with the component matching template to determine the component type corresponding to each candidate layer group.

[0062] In one possible embodiment, the source image determination module 903 is further configured to: Calculate the distance between multiple layers to obtain the edge spacing between each layer; Multiple layers with edge spacing less than a preset distance threshold are combined to obtain multiple first layer groups; The first layer group that meets the preset layer combination conditions among multiple first layer groups is determined as the candidate layer group.

[0063] In one possible embodiment, the source image determination module 903 is further configured to: Multiple first feature information are obtained by extracting information from each candidate layer group using a preset feature dimension; The matching score is determined by comparing the multiple first feature information corresponding to each candidate layer group with the second feature information of the same feature dimension corresponding to each component type in the component matching template. The component type with the highest matching score is used to determine the component type corresponding to the candidate layer group.

[0064] In one possible embodiment, the source image determination module 903 is further configured to: Determine the original slice range corresponding to each candidate layer group in the page design file; The target image slicing range is obtained by adjusting the original image slicing range according to the page module size configured for each component type; The material images corresponding to each candidate layer group are obtained by cropping the corresponding target slice area from the page design file.

[0065] In one possible embodiment, the layer determination module 902 is further configured to: Format identification is performed on page design files to determine their format; The layer structure information is obtained by extracting information from the page design file according to the corresponding file format. The layer structure information is traversed hierarchically and extracted to obtain multiple layers.

[0066] In one possible embodiment, the page generation module 904 is further configured to: Determine the location of the target module within the set page module framework based on the component type corresponding to each material image; Add the target module positions corresponding to each material image to the page module frame to obtain the first web page; The target network page is obtained by adjusting the layout of the first network page according to the type of terminal device corresponding to the target business activity.

[0067] Figure 10 This is a schematic diagram of the structure of a web page generation device provided in an embodiment of this application, such as... Figure 10 As shown, the device includes a processor 1001, a memory 1002, an input device 1003, and an output device 1004; the number of processors 1001 in the device can be one or more. Figure 10 Taking a processor 1001 as an example; the processor 1001, memory 1002, input device 1003, and output device 1004 in the device can be connected via a bus or other means. Figure 10 Taking a bus connection as an example, the memory 1002, as a computer-readable storage medium, can be configured to store software programs, computer-executable programs, and modules, such as the program instructions / modules corresponding to the web page generation method in this embodiment. The processor 1001 executes various functional applications and data processing of the device by running the software programs, instructions, and modules stored in the memory 1002, thereby implementing the aforementioned web page generation method. The input device 1003 can be configured to receive input digital or character information and generate key signal inputs related to user settings and function control of the device. The output device 1004 may include a display device such as a screen.

[0068] The web page generation device provided above can be used to execute the web page generation method provided in any of the above embodiments, and has corresponding functions and beneficial effects.

[0069] This application also provides a non-volatile storage medium containing computer-executable instructions, which, when executed by a computer processor, are configured to perform a web page generation method described in the above embodiments. The method includes: obtaining a page design file corresponding to a target business activity; parsing the page design file to obtain multiple layers; determining each candidate layer group and its corresponding component type from the multiple layers based on a set component matching template; and performing image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images; and generating a target web page based on each material image, the corresponding component type, and the set page module framework.

[0070] Storage medium – any type of memory device or storage device. The term “storage medium” is intended to include: mounting media, such as CD-ROMs, floppy disks, or magnetic tape devices; computer system memory or random access memory, such as DRAM, DDR RAM, SRAM, EDO RAM, Rambus RAM, etc.; non-volatile memory, such as flash memory, magnetic media, optical storage; registers or other similar types of memory elements, etc. Storage media may also include other types of memory or combinations thereof. Furthermore, storage media may reside in a first computer system in which the program is executed, or may reside in a different second computer system connected to the first computer system via a network (such as the Internet). The second computer system can provide program instructions to the first computer for execution. The term “storage medium” can include two or more storage media residing in different locations (e.g., in different computer systems connected via a network). Storage media may store program instructions (e.g., specifically implemented as a computer program) executable by one or more processors.

[0071] Of course, the computer-executable instructions provided in the embodiments of this application are not limited to the above-mentioned web page generation method, but can also perform related operations in the web page generation method provided in any embodiment of this application.

[0072] It should be noted that the numbering of each step in this solution is only used to describe the overall design framework of this solution and does not indicate a necessary sequential relationship between the steps. As long as the overall implementation process conforms to the overall design framework of this solution, it falls within the protection scope of this solution. The literal order in the description is not an exclusive limitation on the specific implementation process of this solution. Those skilled in the art should understand that the embodiments of this application can be provided as methods, systems, or computer program products. In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory. Memory may include non-persistent memory in computer-readable media, random access memory (RAM), and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

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

[0074] Note that the above description is merely a preferred embodiment of the present invention and the technical principles employed. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of the present invention, the scope of which is determined by the scope of the appended claims.

Claims

1. A method for generating web pages, characterized in that, include: Obtain the page design file corresponding to the target business activity, and parse the page design file to obtain multiple layers; Based on the set component matching template, each candidate layer group and its corresponding component type are determined from the multiple layers. Based on the page module size configured for each component type, the page design file is sliced ​​to obtain multiple material images corresponding to each candidate layer group. The target web page is generated based on each of the provided material images, the corresponding component types, and the set page module framework.

2. The webpage generation method according to claim 1, characterized in that, The component matching template based on the settings determines each candidate layer group and its corresponding component type from the multiple layers, including: The component matching template is obtained by querying the activity identifier corresponding to the target business activity, and the multiple layers are clustered to obtain multiple candidate layer groups; Each candidate layer group is compared and matched with the component matching template to determine the component type corresponding to each candidate layer group.

3. The webpage generation method according to claim 2, characterized in that, The process of clustering the multiple layers to obtain multiple candidate layer groups includes: The edge spacing between each layer is obtained by calculating the distance between the multiple layers; The layers with edge spacing less than a preset distance threshold are combined to obtain multiple first layer groups; The first layer group that meets the preset layer combination conditions among the plurality of first layer groups is determined as the candidate layer group.

4. The webpage generation method according to claim 2, characterized in that, The step of comparing and matching each candidate layer group with the component matching template to determine the component type corresponding to each candidate layer group includes: Multiple first feature information are obtained by extracting information of a preset feature dimension from each candidate layer group; The matching score is determined by comparing the multiple first feature information corresponding to each candidate layer group with the second feature information of the same feature dimension corresponding to each component type in the component matching template. The component type with the highest matching score is determined as the component type corresponding to the candidate layer group.

5. The webpage generation method according to claim 1, characterized in that, The process of slicing the page design file according to the page module size configured for each component type to obtain multiple material images for each candidate layer group includes: Determine the original slice range corresponding to each candidate layer group in the page design file; The target slice range is obtained by adjusting the original slice range according to the page module size configured for each component type; The material images corresponding to each candidate layer group are obtained by cropping the corresponding target slice area from the page design file.

6. The webpage generation method according to claim 1, characterized in that, The process of parsing the page design file yields multiple layers, including: The format of the page design file is determined by format identification. The layer structure information is obtained by extracting information from the page design file according to the file format. The layer structure information is traversed hierarchically and multiple layers are obtained.

7. The webpage generation method according to claim 1, characterized in that, The step of generating the target web page based on each of the material images, the corresponding component types, and the set page module framework includes: The target module position is determined within the set page module framework based on the component type corresponding to each of the aforementioned material images; Each of the material images is added to the page module frame at the corresponding target module position to obtain the first web page; The first webpage is laid out according to the type of terminal device corresponding to the target business activity to obtain the target webpage.

8. A webpage generation device, characterized in that, include: The acquisition module is configured to acquire the page design file corresponding to the target business activity; The layer determination module is configured to parse the page design file to obtain multiple layers; The material image determination module is configured to determine each candidate layer group and its corresponding component type from the multiple layers based on the set component matching template, and to perform image slicing on the page design file corresponding to each candidate layer group based on the page module size configured for each component type to obtain multiple material images; The page generation module is configured to generate a target web page based on each of the aforementioned material images, the corresponding component types, and the set page module framework.

9. A webpage generation device, characterized in that, The device includes: one or more processors; and a storage device configured to store one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the web page generation method according to any one of claims 1-7.

10. A non-volatile storage medium for storing computer-executable instructions, characterized in that, The computer-executable instructions, when executed by a computer processor, are configured to perform the web page generation method according to any one of claims 1-7.

Images