Webpage generation method and device, electronic equipment, storage medium and product

Abstract

The present disclosure provides a webpage generation method and device, electronic equipment, storage medium and computer program product, and relates to the technical field of webpage page generation. The specific implementation scheme is: in response to the format of the uploaded file being a specified format, saving the file to a static resource; based on the static resource, asynchronously analyzing the file to obtain at least one component of the file; obtaining a client page size, clustering the at least one component, and generating a page matching the client page size. Through the present disclosure, the generation efficiency of the webpage can be improved, and the webpage experience of the user can be improved.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of webpage page generation, in particular to a webpage generation method and device, electronic equipment, storage medium and computer program product. BACKGROUND

[0002] A webpage is generally used for information presentation, and generally organizes information and resources required by a user in a certain manner and presents the information and resources to the user through a network.

[0003] However, in the process of generating a webpage, a manual operation is required to develop a design manuscript into a corresponding webpage according to a fixed paradigm. SUMMARY

[0004] The present disclosure provides a webpage generation method, device, electronic equipment, storage medium and computer program product.

[0005] According to a first aspect of the present disclosure, a webpage generation method is provided, and the method comprises:

[0006] In response to a format of an uploaded file being a specified format, saving the file to a static resource; based on the static resource, asynchronously parsing the file to obtain at least one component of the file; obtaining a client page size, clustering the at least one component, and generating a page matching the client page size.

[0007] According to a second aspect of the present disclosure, a webpage generation device is provided, and the device comprises:

[0008] A saving module, configured to, in response to a format of an uploaded file being a specified format, save the file to a static resource; a parsing module, configured to, based on the static resource, asynchronously parse the file to obtain at least one component of the file; and a generating module, configured to obtain a client page size, cluster the at least one component, and generate a page matching the client page size.

[0009] According to a third aspect of the present disclosure, an electronic equipment is provided, and the equipment comprises:

[0010] at least one processor; and a memory connected with the at least one processor in communication; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method of the first aspect.

[0011] According to a fourth aspect of the present disclosure, a non-transitory computer readable storage medium storing computer instructions is provided, wherein the computer instructions are used to enable the computer to execute the method according to the first aspect.

[0012] According to a fifth aspect of the present disclosure, there is provided a computer program product comprising a computer program which, when executed by a processor, implements the method according to the first aspect.

[0013] It should be understood that the contents described in this part are not intended to identify key or important features of the embodiments of the present disclosure, nor to limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS

[0014] The accompanying drawings are used to better understand the present scheme, and do not limit the present disclosure. Among them:

[0015] Figure 1 A schematic diagram of a webpage generation process in the related art is shown;

[0016] Figure 2 A flowchart of a webpage generation method provided by an embodiment of the present disclosure is shown;

[0017] Figure 3 A schematic diagram of a webpage generation method provided by an embodiment of the present disclosure is shown;

[0018] Figure 4 A schematic diagram of saving a file to a static resource provided by an embodiment of the present disclosure is shown;

[0019] Figure 5 A flowchart of an asynchronous parsing method provided by an embodiment of the present disclosure is shown;

[0020] Figure 6 A design document provided by an embodiment of the present disclosure is shown;

[0021] Figure 7 A schematic diagram of showing a component that has been asynchronously parsed provided by an embodiment of the present disclosure is shown;

[0022] Figure 8 A design document provided by an embodiment of the present disclosure is shown;

[0023] Figure 9 A flowchart of a method for determining a text DOM provided by an embodiment of the present disclosure is shown;

[0024] Figure 10 A flowchart of a method for determining a picture DOM provided by an embodiment of the present disclosure is shown;

[0025] Figure 11 A flowchart of a webpage generation method provided by an embodiment of the present disclosure is shown;

[0026] Figure 12A flowchart of a webpage generation method provided by an embodiment of the present disclosure is shown.

[0027] Figure 13 A schematic diagram of a data structure return provided by an embodiment of the present disclosure is shown.

[0028] Figure 14 A structural schematic diagram of a webpage generation apparatus provided by an embodiment of the present disclosure is shown.

[0029] Figure 15 A block diagram of an electronic device for implementing the webpage generation method of an embodiment of the present disclosure. DETAILED DESCRIPTION

[0030] Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, which include various details of the embodiments of the present disclosure to assist in understanding, and should be considered as merely exemplary. Thus, those skilled in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, for the sake of brevity and clarity, descriptions of well-known functions and constructions are omitted from the following description.

[0031] In related art, a webpage is generally developed by a webpage developer according to a design document to generate a corresponding webpage.

[0032] Especially for advertising marketing, a webpage developer develops a page through a fixed preset template style. For example, a designer completes a design document, and a webpage developer develops a webpage according to the design document. The webpage generated according to the fixed design document has a fixed style and page arrangement. For advertising marketing, the relevant fixed paradigm page form will lose the attraction of netizens, thereby reducing the conversion effect of marketing. Therefore, the traditional webpage generation method is not applicable in the advertising marketing scenario.

[0033] Therefore, the related art has the following disadvantages:

[0034] (1) The webpage generated by the webpage developer through a unified design document is relatively fixed in style and format. For users, different advertising content presented using a fixed webpage style has different effects, and may reduce the conversion effect of advertising marketing.

[0035] (2) The webpage developer needs to develop and restore the design document of the webpage to generate a webpage with a corresponding style. The production process is as shown in Figure 1 Figure 1 A schematic diagram of a webpage generation process in related art is shown.

[0036] ​Based on the above defects, the present disclosure provides a webpage generation method and device. A file of a design manuscript saved in a PSD format is obtained, and the file is parsed to directly generate a corresponding webpage. Moreover, different client interfaces can be adapted. The present disclosure directly parses the file in the PSD format without manual operation, which can save a large amount of human cost of webpage developers. Different client interfaces can be adapted to improve user experience.

[0037] The following embodiments will describe the webpage generation method and device of the present disclosure in conjunction with the accompanying drawings.

[0038] Figure 2 A flowchart of a webpage generation method provided by an embodiment of the present disclosure is shown in FIG. 1. As shown in FIG. 1, the method can include the following steps. Figure 2

[0039] In step S110, the file is saved as a static resource in response to the format of the uploaded file being a specified format.

[0040] In an embodiment of the present disclosure, the format of the uploaded design manuscript can be set, for example, the specified format can be a PSD format.

[0041] A user can generate a file in a specified PSD format from a design manuscript, and upload the file in the PSD format to a corresponding browser. After the user submits the uploaded file in the PSD format, it is detected that a file is uploaded, and the format of the file is the specified PSD format. The file in the PSD format is saved as an address of a static resource, and a transmission instruction is generated. According to the transmission instruction, the link of the file in the PSD format is transmitted to a parsing module for asynchronous parsing of the file in the PSD format.

[0042] In step S120, the file is asynchronously parsed based on the static resource to obtain at least one component of the file.

[0043] In an embodiment of the present disclosure, the file is asynchronously parsed according to the address of the saved static resource.

[0044] The content in the PSD file is a combination of various texts and pictures, and the file in the PSD format is asynchronously parsed to obtain at least one component including texts and / or pictures. The at least one component obtained by asynchronous parsing can also be stored in the static resource.

[0045] In step S130, the size of a client page is obtained, at least one component is clustered, and a page matching the size of the client page is generated.

[0046] ​In the embodiment of the present disclosure, the at least one component obtained by asynchronous parsing is clustered, and the content included in the PSD format file is assembled. Different client page sizes are obtained, so that the PSD format file parsed asynchronously is generated to adapt to different client page sizes.

[0047] The web page generation method provided by the present disclosure saves the PSD format file to the static resource, and can directly parse the PSD format file asynchronously, and directly generates a corresponding web page based on the PSD format file parsed asynchronously. In this process, no manual operation is required, and according to the PSD format file parsed asynchronously, the web page request can be avoided due to too long time, so that the generation efficiency of the web page can be improved, and the diversity of web page design can be realized without being limited to the template of the web page generation. Adapting to different client pages can also improve the user's web page experience.

[0048] Exemplarily, Figure 3 A schematic diagram of a web page generation method provided by an embodiment of the present disclosure is shown in FIG. 1. Figure 3 As shown in FIG. 1, a user can generate corresponding PSD format files from design drafts A, B, C and D, and parse the PSD format files asynchronously through the web page generation method provided by the present disclosure. Based on the PSD format file parsed asynchronously, a web page corresponding to different design drafts is generated.

[0049] In the embodiment of the present disclosure, the PSD format file uploaded by the user is the design manuscript of the user, that is, the user can generate the PSD format file from the completed design manuscript.

[0050] In the present disclosure, the PSD format file uploaded by the user is obtained, that is, the design manuscript of the user is obtained. The obtained design manuscript is saved as a static resource address of a content delivery network (CDN).

[0051] In the embodiment of the present disclosure, the PSD format file and the components of the PSD format file can be permanently saved in the CDN static resource.

[0052] For example, Figure 4 A schematic diagram of saving a file to a static resource provided by an embodiment of the present disclosure is shown in FIG. 2. Figure 4 As shown in FIG. 2, a designer can generate a design draft (i.e., a design manuscript) of a web page through drawing software (for example, Photoshop), and save the design draft as a PSD format file. The PSD format file is uploaded through a device (for example, a browser device). The PSD format file uploaded by the user is saved to the CDN static resource through the present disclosure, for example, https: / / xxx.cdn.com / xx / xx.psd. Figure 5A flowchart of an asynchronous parsing method is shown in FIG. 1, which is provided by an embodiment of the present disclosure. As shown in FIG. 1, the method can include the following steps. Figure 5

[0053] In step S210, the file is asynchronously parsed based on the address of the static resource to obtain a task instruction of the parsed file.

[0054] In step S220, the state of the asynchronously parsed file is determined based on the task instruction.

[0055] In step S230, in response to the state being complete, at least one component including a text component and / or a picture component is obtained.

[0056] In an embodiment of the present disclosure, the asynchronous parsing of the file with the address of the static resource is described by taking a browser, a background module, a PSD parsing service, and a picture uploading service as examples. The file uploaded in the browser is passed to the background module, and a corresponding task instruction of the asynchronously parsed file is obtained. The task instruction is passed to the browser. The browser can request the background module based on the task instruction to determine the state of the asynchronously parsed file. If the state of the asynchronously parsed file is successful, it is determined that the parsing of the file in the PSD format is complete, and thus it is determined that the at least one component obtained by the asynchronous parsing includes the text component and / or the picture component.

[0057] By asynchronously parsing the file in the PSD format according to the present disclosure, the progress of the asynchronous parsing of the file in the PSD format can be monitored in real time through the task instruction, and thus the situation that the parsing of the file is interrupted due to the timeout of the parsing of the file can be avoided, and the performance of the webpage is improved.

[0058] In an embodiment of the present disclosure, a request time interval for requesting the state of the asynchronously parsed file can be set, and the state of the asynchronously parsed file is requested based on the task instruction at the request time interval. The state includes one of success, failure, and parsing.

[0059] For example, the request time interval is 2s, the PSD asynchronous parsing service starts to asynchronously parse the file in the PSD format passed from the background, and the browser requests the background service based on the corresponding task instruction every 2s to query whether the asynchronous parsing is complete to obtain the state of the asynchronously parsed file. The state is represented in the form of a state code (state). The state has three states, 0 for success, 1 for parsing, and 2 for parsing failure.

[0060] In the present disclosure, in response to the state being parsing, the state of the asynchronously parsed file is determined based on the task instruction at the request time interval until the state of the asynchronously parsed file is successful.

[0061] ​In another embodiment of this disclosure, if the asynchronous file parsing status is failed, the reason for the failure is determined and displayed in the form of a pop-up window.

[0062] In this embodiment of the disclosure, components that have been asynchronously parsed can also be obtained and displayed based on the progress of asynchronously parsing the file. Specifically, the asynchronously parsed components can be displayed in the generated webpage preview.

[0063] This disclosure is as follows Figure 6 To explain, Figure 6 A schematic diagram of a design document provided in an embodiment of this disclosure is shown, such as... Figure 6 As shown, this includes a front-end / browser, a back-end module, a PSD parsing service, and an image upload and storage service. The front-end / browser uploads a PSD file, generates a static resource CDN address, and passes the CDN address to the PSD parsing service to begin asynchronous parsing. Based on the component order, the asynchronously parsed image components are uploaded sequentially and stored in the database and CDN. Furthermore, during the CDN asynchronous parsing process, images in the image layer are uploaded to the CDN and database in base64 encoded format for storage. The image upload and storage service returns the URL of the uploaded image. And as... Figure 6 Once the PSD file has been successfully parsed asynchronously, the content and status of the asynchronously parsed PSD file are modified to indicate success and returned to the backend module for storage.

[0064] If the process fails, the failure reason and status code will be changed to "failure," and the result will be returned to the backend module for storage in the database. The frontend requests the asynchronous parsing status of the PSD file. The backend module stores the status in the database and returns the corresponding failure or success status code to the browser. The browser determines that the asynchronous parsing has been completed, stops polling, and displays the parsed PSD file content in the preview area or displays the failure reason.

[0065] In this disclosure, files that have been asynchronously parsed can be displayed on a designated page. Figure 7 The illustration shows a schematic diagram of a component that has completed asynchronous parsing, as provided in an embodiment of this disclosure. Figure 7 As shown, any component of a PSD file that has been asynchronously parsed can be displayed. This method places the area displaying asynchronously parsed components within a separate container, allowing for real-time monitoring of the asynchronous parsing of PSD files and improving webpage generation efficiency.

[0066] In this embodiment of the disclosure, at least one component obtained by asynchronously parsing a PSD format file may include a text component and / or an image component. Figure 8A schematic diagram of a design document provided in an embodiment of this disclosure is shown, such as... Figure 8 As shown, the PSD file includes text and image components. The text component includes text A and text B, while the image component includes image A, image B, and image C.

[0067] Furthermore, in this embodiment of the disclosure, the content of a PSD format file can be abstracted into a combination of various text and images to generate a layer data model. The data model is mapped to an enumerable type, and the PSD format file can be asynchronously parsed into a product of multiple layers, each layer being either text or an image. These two types can be asynchronously parsed into their corresponding data models.

[0068] The data model includes a text layer data model and an image layer data model. Specifically, the text layer data model consists of text components, and the image layer data model consists of image components.

[0069] For example, a text layer data model could be

[0070] {

[0071] type:'text',

[0072] content:'text layer',

[0073] width:'100',

[0074] height:'200',

[0075] style:{},

[0076] position:{

[0077] top:'10',

[0078] left:'20'

[0079] }

[0080] }

[0081] The image layer data model can be:

[0082] {

[0083] type:'image',

[0084] imageSrc:'https: / / xxx.image.com / xxx / xxxxx', (image link format)

[0085] width:'100',

[0086] height: '200',

[0087] style: {},

[0088] position: {

[0089] top: '10',

[0090] left: '20'

[0091]

[0092]

[0093] In the embodiments of the present disclosure, the type of the layer data model can be represented by type, the text layer data model can be represented by text, and the picture layer data model can be represented by image.

[0094] In the present disclosure, the text layer data model and the picture layer data model both have attributes corresponding to the layer. For example, the width, height, position, layer own style, and other common attributes of the layer.

[0095] Among them, the position has a distance offset from the coordinate origin of the file, and these attributes can completely describe the position and size of a layer in the overall page. The content of the text layer data model is represented by the content attribute, and the content of the picture layer data model is represented by imageSrc. imageSrc is a link of a picture, which is a data stream in the encoding format of base64. After encoding the base64 data stream, an image link that can be recognized by the browser is generated.

[0096] In the present disclosure, the json data source of the PSD format file is asynchronously parsed, the json data source is asynchronously parsed into a text component and / or a picture component, and a text document object model (DOM) structure corresponding to the text component and / or the picture component is obtained. Thus, the DOM corresponding to the text component and / or the picture component is obtained.

[0097] Among them, the implementation of the DOM corresponding to the text component is as follows.

[0098] Figure 9 A flowchart of a method for determining a text DOM provided by an embodiment of the present disclosure is shown, as shown in Figure 9 The method can include the following steps.

[0099] In step S310, in response to the component being a text component, a text document object model (DOM) label is generated based on the text content of the text component.​​

[0100] In step S320, the attributes of the text component are acquired and the attributes are applied to the text DOM tag to obtain the text DOM.

[0101] In the embodiment of the present disclosure, if the component obtained through asynchronous parsing is a text component, a text DOM tag of Text component content is generated based on the text content of the text component. The attribute displacement and style (such as rendered picture height and rendered picture width) of the text component can also be acquired, and the acquired attributes are applied to the text DOM tag, so that the text DOM structure can be obtained.

[0102] The implementation of the DOM corresponding to the picture component is as follows.

[0103] Figure 10 A flowchart of a method for determining a picture DOM provided by an embodiment of the present disclosure is shown, as shown in Figure 10 , the method can include:

[0104] In step S410, in response to the component being a picture component, a picture DOM tag with a picture link is generated based on the picture in the picture component.

[0105] In step S420, the attributes of the picture component are acquired and the attributes are applied to the picture DOM tag to obtain the picture DOM.

[0106] In the embodiment of the present disclosure, if the component obtained through asynchronous parsing is a picture component, a picture DOM tag of is generated based on the picture in the picture component. The attribute displacement and style (such as rendered picture height and rendered picture width) of the picture component can also be acquired, and the acquired attributes are applied to the picture DOM tag, so that the picture DOM structure can be obtained.

[0107] In the embodiment of the present disclosure, the attributes are added to the corresponding DOM, which can accurately restore the layout and content of the design manuscript, without manual operation, and improves the efficiency of restoration.

[0108] The following embodiments will combine the above content to cluster at least one component and generate a page matching the size of the client page.

[0109] Figure 11 A flowchart of a web page generation method provided by an embodiment of the present disclosure is shown, as shown in Figure 11 , the method can include:

[0110] In step S510, a text DOM and / or a picture DOM corresponding to at least one component are acquired.

[0111] In step S520, the text DOM and / or the picture DOM are clustered to generate a webpage preview page corresponding to the file.

[0112] In step S530, an operation instruction for the webpage preview page and a client page size are obtained, and based on the operation instruction, the webpage preview page is generated into a page matching the client page size.

[0113] In the embodiments of the present disclosure, after receiving the json data source of the asynchronously parsed PSD format file, the json data source is asynchronously parsed into a recognizable DOM structure. In other words, the corresponding DOM structure is obtained according to at least one component obtained by asynchronous parsing, that is, the text DOM and / or the picture DOM are obtained.

[0114] The obtained text DOMs are spliced, the obtained picture DOMs are spliced, and the spliced text DOM and / or the picture DOM are clustered to obtain a webpage preview page corresponding to the file. In addition, the progress of asynchronously parsing the PSD format file can be displayed in the form of a pop-up window in the webpage preview page, and the components of the file that have completed asynchronous parsing can also be displayed.

[0115] In the present disclosure, the webpage preview page is used to adjust the text DOM and / or the picture DOM. The user can adjust the content in the webpage preview page according to the actual situation, and send operation instructions for the webpage preview page, such as adjustment operation instructions, complete operation instructions, etc. The operation instruction can be one or multiple.

[0116] In the present disclosure, the webpage preview page can also include a two-dimensional code. By scanning the two-dimensional code, the webpage preview page can be obtained in a webpage presentation effect on a corresponding client.

[0117] In response to detecting the operation instruction for the webpage preview page sent by the user, the operation instruction and the client page size are obtained. Based on the operation instruction, the webpage preview page is generated into a page matching the client page size.

[0118] For example, in a PSD format file, the width of the canvas area is 750px. After asynchronously parsing the PSD format file, there is a width field in the returned json data source, which is used to represent the width of the page in the PSD format file. The width of the client is 400px or 375px, so the PSD format file json data source field is moved and adapted based on the page size of the client. In the present disclosure, the mobile terminal width benchmark can be set to 375px, and the text and pictures are arranged using the rem method, so that the picture components and text components can be adaptively arranged according to different client widths.

[0119] For example, for the picture component, the ratio of generating the page and the reference webpage corresponding to the PSD format file is: rate = width in psd / 375. The width and height of the picture are set proportionally as: page picture width = psd picture width * rate, and page picture height = psd picture height * rate.

[0120] For the text component, the ratio of generating the page and the reference webpage corresponding to the PSD format file is: rate = width in psd / 375. The font size of the text is set proportionally as: page text font-size = psd, text font-size * rate.

[0121] In an embodiment of the present disclosure, if the obtained operation instruction is an adjustment instruction and a completion instruction, the text component and / or the picture component are adjusted in the page preview page based on the adjustment instruction. Based on the completion instruction and the client page size, the webpage preview page after the adjustment of the text component and / or the picture component is generated into a page matching the client page size.

[0122] In another embodiment of the present disclosure, if the obtained operation instruction is a completion instruction, the webpage preview page is generated into a page matching the client page size based on the completion instruction and the client page size.

[0123] In the embodiment of the present disclosure, after the corresponding page is generated, a link corresponding to the page can also be generated, and the user can also enter the corresponding webpage through the link. The link can be added to the browsing page of the browser, or can exist separately and directly enter the page by clicking.

[0124] In the embodiment of the present disclosure, a first threshold of the size of the PSD format file can also be set, and the size of the PSD format file uploaded by the user is less than or equal to the first threshold. For example, the first threshold is 50M.

[0125] In the embodiment of the present disclosure, a second threshold of the number of components in the PSD format file can also be set, and the number of components included in the PSD format file is less than or equal to the second threshold. For example, the second threshold is 30.

[0126] In the embodiment of the present disclosure, a third threshold of the picture component in the PSD format file can also be set, and the size of the picture in the component is less than or equal to the third threshold. For example, the third threshold can be 2M.

[0127] It needs to be explained in the present disclosure that the set threshold can be adjusted according to the actual situation to adapt to different business scenarios. Through the setting of the threshold, the present disclosure can improve the loading rate of the PSD format file and can improve the performance of the webpage.

[0128] Figure 12 A flowchart illustrating a webpage generation method provided in an embodiment of this disclosure is shown, such as... Figure 12 As shown, the user uses a graphic design tool (e.g., Photoshop) to generate a PSD file from the design draft and uploads it to the CDN static resources. The PSD file is asynchronously parsed to obtain a JSON data source, which is then asynchronously parsed into corresponding text and / or image components. The image component includes a link to an image generated in base64 format. The text and image components are then concatenated to generate a complete webpage corresponding to the design draft.

[0129] For example, the method provided in this disclosure can be used for webpage generation in a browser, such as the generation of advertising webpages. Figure 13 This illustration shows a schematic diagram of a data structure return provided in an embodiment of the present disclosure, such as... Figure 13 As shown, users can upload PSD files to their browsers, and the server saves these PSD files as CDN static resources. The server asynchronously parses the uploaded PSD files, clusters them according to layer type, assembles each layer (text and image components) of the PSD file, and returns the clustered data model to the browser via a server interface. Upon receiving the asynchronously parsed JSON data source from the server, the browser asynchronously parses the JSON data source into a browser-recognizable DOM structure, and simultaneously matches and scales the returned DOM structure to the mobile page.

[0130] Based on and Figure 1 The method shown follows the same principle. Figure 14 A schematic diagram of the structure of a webpage generation apparatus provided in an embodiment of this disclosure is shown, such as... Figure 14 As shown, the webpage generation device 100 may include:

[0131] The saving module 101 is used to save the uploaded file to a static resource in response to the file being in a specified format; the parsing module 102 is used to asynchronously parse the file in the static resource to obtain at least one component of the file; the generating module 103 is used to obtain the client page size, cluster the at least one component, and generate a page that matches the client page size.

[0132] In this embodiment of the disclosure, the file is a design draft; the saving module 101 is used to obtain the design draft and save the design draft to the static resources of the content delivery network.

[0133] In the embodiments of the present disclosure, the parsing module 102 is configured to parse the file based on the address of the static resource to obtain a task instruction for parsing the file, determine a state of the file based on the task instruction, and obtain at least one component including a text component and / or a picture component in response to the state being successful.

[0134] In the embodiments of the present disclosure, the parsing module 102 is configured to determine a request time interval, poll a state of the file based on the task instruction and the request time interval, and continue to determine the state of the file based on the task instruction and the request time interval until the state is successful in response to the state being in parsing.

[0135] In the embodiments of the present disclosure, the parsing module 102 is further configured to determine a failure reason in response to the state being failed, and display the failure reason in the form of a pop-up box.

[0136] In the embodiments of the present disclosure, the parsing module 102 is further configured to obtain a parsed component based on a progress of the file, and display the parsed component.

[0137] In the embodiments of the present disclosure, the generating module 103 is further configured to generate a text document object model (DOM) tag based on text content of the text component in response to the component being the text component, obtain an attribute of the text component, and apply the attribute to the text DOM tag to obtain a text DOM.

[0138] In the embodiments of the present disclosure, the generating module 103 is further configured to generate a picture DOM tag with a picture link based on a picture in the picture component in response to the component being the picture component, obtain an attribute of the picture component, and apply the attribute to the picture DOM tag to obtain a picture DOM.

[0139] In the embodiments of the present disclosure, the generating module 103 is configured to obtain a text DOM and / or a picture DOM corresponding to the at least one component, cluster the text DOM and / or the picture DOM to generate a web preview page corresponding to the file, obtain an operation instruction for the web preview page and a client page size, and generate a page matching the client page size based on the operation instruction.

[0140] In the embodiments of the present disclosure, the generation module 103 is configured to, in response to the operation instruction being an adjustment instruction, adjust the text component and / or the picture component based on the adjustment instruction; and in response to the operation instruction being a completion instruction, generate a page matched with the client page size based on the completion instruction and the client page size and the webpage preview page after the text component and / or the picture component are adjusted.

[0141] In the embodiments of the present disclosure, the generation module 103 is configured to, in response to the operation instruction being a completion instruction, generate a page matched with the client page size based on the completion instruction and the client page size and the webpage preview page.

[0142] In the embodiments of the present disclosure, the file has a size less than or equal to a first threshold.

[0143] In the embodiments of the present disclosure, the file includes a number of components less than or equal to a second threshold.

[0144] In the embodiments of the present disclosure, a picture in the component has a size less than or equal to a third threshold.

[0145] In the technical solutions of the present disclosure, the acquisition, storage and application of user personal information comply with relevant laws and regulations and do not violate public order and good customs.

[0146] According to the embodiments of the present disclosure, the present disclosure further provides an electronic device, a readable storage medium and a computer program product.

[0147] Figure 15 A schematic block diagram of an example electronic device 200 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptops, desktops, tablets, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular telephones, smart phones, wearable devices, and other similar computing devices. The components shown here, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit implementations of the present disclosure described and / or claimed in this document.

[0148] As Figure 15As shown, the device 200 includes a computing unit 201 that can perform various appropriate actions and processes in accordance with a computer program stored in a read-only memory (ROM) 202 or a computer program loaded from a storage unit 208 into a random access memory (RAM) 203. In the RAM 203, various programs and data required for the operation of the device 200 can also be stored. The computing unit 201, the ROM 202, and the RAM 203 are connected to each other through a bus 204. An input / output (I / O) interface 205 is also connected to the bus 204.

[0149] A plurality of components in the device 200 are connected to the I / O interface 205, including: an input unit 206, such as a keyboard, a mouse, and the like; an output unit 207, such as various types of displays, speakers, and the like; the storage unit 208, such as a magnetic disk, an optical disk, and the like; and a communication unit 209, such as a network card, a modem, a wireless communication transceiver, and the like. The communication unit 209 allows the device 200 to exchange information / data with other devices through a computer network, such as the Internet, and / or various telecommunication networks.

[0150] The computing unit 201 can be various general and / or special-purpose processing components having processing and computing capabilities. Some examples of the computing unit 201 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, and the like. The computing unit 201 performs various methods and processes described above, such as the webpage generation method. For example, in some embodiments, the webpage generation method can be implemented as a computer software program that is tangibly embodied in a machine-readable medium, such as the storage unit 208. In some embodiments, part or all of the computer program can be loaded and / or installed on the device 200 via the ROM 202 and / or the communication unit 209. When the computer program is loaded into the RAM 203 and executed by the computing unit 201, one or more steps of the webpage generation method described above can be performed. Alternatively, in other embodiments, the computing unit 201 can be configured to perform the webpage generation method by any other appropriate means, such as by means of firmware.

[0151] The various embodiments of the systems and techniques described above can be implemented in digital electronic circuitry, integrated circuitry, a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on a chip (SOC), a load programmable logic device (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include implementation in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which can be special or general purpose, coupled to receive data and instructions from, and to transmit data and instructions to, a storage system, at least one input device, and at least one output device.

[0152] Program code for carrying out methods of the present disclosure can be written in any combination of one or more programming languages. The program code can be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the program code, when executed by the processor or controller, produces the functions / operations specified in the flowcharts and / or the block diagrams. The program code can be executed entirely on a machine, partially on a machine, partially on a machine as a stand-alone software package, or entirely on a remote machine or server.

[0153] In the context of the present disclosure, a machine-readable medium can be a tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include but is not limited to an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium will include one or more lines of electrical conductors, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or Flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0154] To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.

[0155] The systems and techniques described here can be implemented in a computing system that includes a back end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front end component (e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back end, middleware, or front end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), and the Internet.

[0156] The computer system can include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server is generally established by computer programs running on the respective computers and having a client-server relationship to each other. The servers can be cloud servers, servers of a distributed system, or servers combined with a blockchain.

[0157] It should be understood that the various forms of flow shown above can be re-ordered, added to, or deleted from without departing from the scope of the present disclosure. For example, the steps recited in the present disclosure can be performed in parallel, in series, or in a different order, without departing from the desired results of the technology disclosed in the present disclosure, which are not limited herein.

[0158] The specific embodiments described above are not intended to be limiting, and persons skilled in the art will appreciate that various modifications, combinations, sub-combinations and alternatives can be made to the specific embodiments without departing from the spirit and scope of the disclosure. Any modifications, equivalent substitutions, improvements, and the like, made within the spirit and principles of the disclosure, are intended to be included in the scope of the disclosure.

Claims

1. A webpage generation method, the method comprising: in response to a format of an uploaded file being a specified format, saving the file to a static resource of a content distribution network; the file being a design document; based on the static resource, asynchronously parsing the file to obtain a layer data model, and obtaining at least one component of the file according to the layer data model; obtaining a client page size, clustering the at least one component, and generating a page matching the client page size; the clustering the at least one component and generating the page matching the client page size comprising: obtaining a text DOM and / or an image DOM corresponding to the at least one component; clustering the text DOM and / or the image DOM to generate a webpage preview page corresponding to the file; obtaining an operation instruction for the webpage preview page and a client page size, and generating the webpage preview page into a page matching the client page size based on the operation instruction.

2. The method of claim 1, wherein, the saving the file to the static resource of the content distribution network comprising: obtaining the design document, and saving the design document to the static resource of the content distribution network.

3. The method of claim 1, wherein, the based on the static resource, asynchronously parsing the file to obtain the at least one component of the file comprising: based on an address of the static resource, asynchronously parsing the file to obtain a task instruction for parsing the file; based on the task instruction, determining a state of the asynchronous parsing of the file; in response to the state being successful, obtaining at least one component including a text component and / or an image component.

4. The method of claim 3, wherein, the based on the task instruction, determining the state of the asynchronous parsing of the file comprising: determining a request time interval, and based on the task instruction, polling a request for the state of the asynchronous parsing of the file at the request time interval, the state including one of successful, failed, and parsing in progress; in response to the state being parsing in progress, continuing to determine the state of the asynchronous parsing of the file based on the task instruction at the request time interval until the state is successful.

5. The method of claim 4, wherein, the method further comprising: in response to the state being failed, determining a failure reason, and displaying the failure reason in the form of a pop-up box.

6. The method of claim 3, wherein, after the obtaining the at least one component of the file, the method further comprising: based on a progress of the asynchronous parsing of the file, obtaining a parsed component, and displaying the parsed component.

7. The method of claim 1 or 3, wherein, before the clustering the at least one component and generating the page matching the client page size, the method comprising: in response to the component being a text component, generating a text document object model (DOM) tag based on text content of the text component; obtaining an attribute of the text component, and applying the attribute to the text DOM tag to obtain a text DOM.

8. The method of claim 1 or 3, wherein, before the clustering the at least one component and generating the page matching the client page size, the method comprising: in response to the component being an image component, generating an image DOM tag with an image link based on an image in the image component; Obtaining attributes of the picture component and applying the attributes to the picture DOM tag to obtain a picture DOM.

9. The method of claim 1, wherein, The generating, based on the operation instruction, of the webpage preview page into a page matching the client page size comprises: in response to the operation instruction being an adjustment instruction and a completion instruction, adjusting the text component and / or the picture component based on the adjustment instruction; generating, based on the completion instruction and the client page size, the webpage preview page after the adjustment of the text component and / or the picture component into a page matching the client page size.

10. The method of claim 1, wherein, The generating, based on the operation instruction, of the webpage preview page into a page matching the client page size comprises: in response to the operation instruction being a completion instruction, generating, based on the completion instruction and the client page size, the webpage preview page into a page matching the client page size.

11. The method of claim 1, wherein, The file has a size less than or equal to a first threshold value.

12. The method of claim 1, wherein, The file includes a number of components less than or equal to a second threshold value.

13. The method of claim 1, wherein, The picture in the component has a size less than or equal to a third threshold value.

14. A webpage generation apparatus, the apparatus comprising: a saving module configured to, in response to a format of an uploaded file being a specified format, save the file to a static resource of a content distribution network; the file is a design document; a parsing module configured to, based on the static resource, asynchronously parse the file to obtain a layer data model, and obtain at least one component of the file according to the layer data model; a generation module configured to obtain a client page size, cluster the at least one component, and generate a page matching the client page size; the generation module is specifically configured to obtain a text DOM and / or a picture DOM corresponding to the at least one component, cluster the text DOM and / or the picture DOM, and generate a webpage preview page corresponding to the file; obtain an operation instruction on the webpage preview page and a client page size, and generate, based on the operation instruction, the webpage preview page into a page matching the client page size.

15. An electronic device, comprising: at least one processor; and a memory connected in communication with the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-13.

16. A non-transitory computer readable storage medium having stored thereon computer instructions, wherein, The computer instructions are used to enable the computer to perform the method of any one of claims 1-13.

17. A computer program product comprising a computer program which, when executed by a processor, implements the method of any one of claims 1-13.

Images