Webpage code processing method and device, equipment, storage medium and program product

Abstract

The invention relates to a webpage code processing method and device, equipment, a storage medium and a program product. The method comprises the following steps: acquiring a webpage prototype picture of a target webpage, inputting the webpage prototype picture into a pre-constructed webpage code generation model to obtain a corresponding webpage code, inputting the webpage code into a virtual test environment for webpage rendering to obtain a webpage picture of the target webpage, and displaying the webpage picture of the target webpage in the virtual test environment. The visual similarity between the webpage prototype picture and the webpage picture quality inspection is further obtained, under the condition that the visual similarity is smaller than a preset similarity threshold value, the difference between the webpage prototype picture and the webpage picture is obtained, and based on the difference and the webpage code, a new webpage code is obtained through a webpage code generation model; and returning to execute the step of inputting the webpage code into the virtual test environment for webpage rendering until the visual similarity is greater than or equal to the preset similarity threshold. By adopting the method, the generation efficiency and the code quality of the webpage code can be improved.

Description

Technical Field

[0001] The present application relates to the fields of software engineering and automation, and in particular to a web page code processing method, apparatus, computer equipment, computer-readable storage medium, and computer program product. Background Art

[0002] With the development of web technology, the automation of web design and implementation has become particularly important. Currently, web code generation relies on developers to manually code or use template-based automation tools.

[0003] However, existing web page code generation tools cannot dynamically generate code directly from visual prototypes, and cannot optimize based on the actual performance of the generated results, resulting in limited development efficiency and code quality. Summary of the invention

[0004] Based on this, it is necessary to provide a method, apparatus, computer device, computer-readable storage medium and computer program product that can improve code development efficiency and code quality in response to the above technical problems.

[0005] In a first aspect, the present application provides a webpage code processing method, comprising:

[0006] Get the webpage prototype image of the target webpage;

[0007] Inputting the webpage prototype image into a pre-built webpage code generation model to obtain the corresponding webpage code, and inputting the webpage code into a virtual test environment for webpage rendering to obtain a webpage image of the target webpage;

[0008] Obtaining the visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, obtaining the difference between the webpage prototype image and the webpage image;

[0009] Based on the differences and the web page code, a new web page code is obtained through a web page code generation model, and the step of inputting the web page code into a virtual test environment for web page rendering is returned to be executed until the visual similarity is greater than or equal to a preset similarity threshold.

[0010] In one embodiment, based on the difference and the webpage code, a new webpage code is obtained by a webpage code generation model, including:

[0011] Generate code correction feedback information based on the differences;

[0012] The code correction feedback information and the web page code are input into the web page code generation model, and a new web page code is obtained through the web page code generation model.

[0013] In one embodiment, the web page code generation model is constructed by the following steps:

[0014] Obtain a sample webpage prototype image; the sample webpage prototype image corresponds to the actual webpage code;

[0015] Inputting the sample web page prototype image into the web page code generation model to be trained, and obtaining a plurality of web page initial features through a feature extraction module in the web page code generation model to be trained;

[0016] Input the initial features of the web page into a feature fusion module with a preset attention mechanism in the web page code generation model to be trained, obtain the attention weight corresponding to each initial feature of the web page, and perform weighted summation of multiple initial features of the web page based on the attention weight to obtain the web page features after feature fusion;

[0017] Inputting the web page features into the code generation module in the web page code generation model to be trained, and generating a predicted web page code corresponding to the sample web page prototype image based on the background information and the web page features;

[0018] According to the difference between the predicted web page code and the actual web page code, the web page code generation model to be trained is trained to obtain a trained web page code generation model.

[0019] In an exemplary embodiment, according to the difference between the predicted webpage code and the actual webpage code, the webpage code generation model to be trained is trained to obtain a trained webpage code generation model, including:

[0020] Obtain a loss function preset for the webpage code generation model to be trained;

[0021] Based on the loss function and the difference, the corresponding model loss value is obtained;

[0022] The model parameters of the web page code generation model to be trained are adjusted accordingly according to the model loss value until the loss function converges, and the web page code generation model to be trained is used as the trained web page code generation model.

[0023] In one embodiment, obtaining a sample webpage prototype image includes:

[0024] Obtaining an original sample webpage prototype image and an original sample webpage code associated with the original sample webpage prototype image;

[0025] The original sample webpage prototype image is resized and color normalized to obtain a sample webpage prototype image;

[0026] The original sample web page code is subjected to semantic analysis and structural feature extraction to obtain the sample web page code.

[0027] In one embodiment, the webpage prototype image corresponds to the original code of the webpage; the method further includes:

[0028] When the visual similarity is less than a preset similarity threshold and the number of images of the webpage prototype image is greater than or equal to a preset image number threshold, obtaining the difference between the webpage prototype image and the webpage image, and inputting the difference into a code correction module to be trained in the webpage code generation model to obtain a new webpage code;

[0029] According to the difference between the new webpage code and the original webpage code, and the correction loss function pre-set for the code correction module to be trained, a corresponding loss value is obtained;

[0030] Based on the loss value, the model parameters of the code correction module to be trained are adjusted accordingly until the correction loss function converges, and the code correction module to be trained is used as the trained code correction module in the web page code generation model.

[0031] In a second aspect, the present application further provides a webpage code processing device, comprising:

[0032] An image acquisition module is used to acquire a webpage prototype image of a target webpage;

[0033] The webpage rendering module is used to input the webpage prototype image into the pre-built webpage code generation model to obtain the corresponding webpage code, and input the webpage code into the virtual test environment for webpage rendering to obtain the webpage image of the target webpage;

[0034] A difference acquisition module is used to acquire the visual similarity between the web page prototype image and the web page image, and when the visual similarity is less than a preset similarity threshold, acquire the difference between the web page prototype image and the web page image;

[0035] The code update module is used to obtain new web page code through a web page code generation model based on the differences and the web page code, and return to execute the step of inputting the web page code into a virtual test environment for web page rendering until the visual similarity is greater than or equal to a preset similarity threshold.

[0036] In a third aspect, the present application further provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented:

[0037] Get the webpage prototype image of the target webpage;

[0038] Inputting the webpage prototype image into a pre-built webpage code generation model to obtain the corresponding webpage code, and inputting the webpage code into a virtual test environment for webpage rendering to obtain a webpage image of the target webpage;

[0039] Obtaining the visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, obtaining the difference between the webpage prototype image and the webpage image;

[0040] Based on the differences and the web page code, a new web page code is obtained through a web page code generation model, and the step of inputting the web page code into a virtual test environment for web page rendering is returned to be executed until the visual similarity is greater than or equal to a preset similarity threshold.

[0041] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the following steps are implemented:

[0042] Get the webpage prototype image of the target webpage;

[0043] Inputting the webpage prototype image into a pre-built webpage code generation model to obtain the corresponding webpage code, and inputting the webpage code into a virtual test environment for webpage rendering to obtain a webpage image of the target webpage;

[0044] Obtaining the visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, obtaining the difference between the webpage prototype image and the webpage image;

[0045] Based on the differences and the web page code, a new web page code is obtained through a web page code generation model, and the step of inputting the web page code into a virtual test environment for web page rendering is returned to be executed until the visual similarity is greater than or equal to a preset similarity threshold.

[0046] In a fifth aspect, the present application further provides a computer program product, including a computer program, which implements the following steps when executed by a processor:

[0047] Get the webpage prototype image of the target webpage;

[0048] Inputting the webpage prototype image into a pre-built webpage code generation model to obtain the corresponding webpage code, and inputting the webpage code into a virtual test environment for webpage rendering to obtain a webpage image of the target webpage;

[0049] Obtaining the visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, obtaining the difference between the webpage prototype image and the webpage image;

[0050] Based on the differences and the web page code, a new web page code is obtained through a web page code generation model, and the step of inputting the web page code into a virtual test environment for web page rendering is returned to be executed until the visual similarity is greater than or equal to a preset similarity threshold.

[0051] The web page code processing method, device, computer equipment, computer-readable storage medium and computer program product obtain a web page prototype image of a target web page, input the web page prototype image into a pre-built web page code generation model, obtain the corresponding web page code, and input the web page code into a virtual test environment for web page rendering to obtain a web page image of the target web page, further obtain the visual similarity of the web page prototype image and the web page image quality inspection, and when the visual similarity is less than a preset similarity threshold, obtain the difference between the web page prototype image and the web page image, obtain a new web page code based on the difference and the web page code through the web page code generation model, and return to execute the step of inputting the web page code into the virtual test environment for web page rendering until the visual similarity is greater than or equal to the preset similarity threshold. Through the web page code processing method, the corresponding web page code can be directly generated according to the web page prototype image, and the generated web page code can be optimized according to the web page rendering result of this web page code, thereby improving the generation efficiency and code quality of the web page code. BRIEF DESCRIPTION OF THE DRAWINGS

[0052] In order to more clearly illustrate the technical solutions in the embodiments of the present application or related technologies, the drawings required for use in the embodiments of the present application or related technical descriptions will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0053] FIG1 is an application environment diagram of a webpage code processing method according to an embodiment;

[0054] FIG2 is a schematic diagram of a flow chart of a webpage code processing method in one embodiment;

[0055] FIG3 is a schematic diagram of a construction process of a web page code generation model in one embodiment;

[0056] FIG4 is a schematic flow chart of a webpage code processing method in another embodiment;

[0057] FIG5 is a structural block diagram of a webpage code processing device in one embodiment;

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

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

[0060] The web page code processing method provided in the embodiment of the present application can be applied to the application environment shown in Figure 1. Among them, the terminal 102 communicates with the server 104 through the network. The data storage system can store the data that the server 104 needs to process. The data storage system can be integrated on the server 104, or it can be placed on the cloud or other network servers. The server 104 obtains the web page prototype image of the target web page from the terminal 102, inputs the web page prototype image into the pre-built web page code generation model, obtains the corresponding web page code, and inputs the web page code into the virtual test environment for web page rendering to obtain the web page image of the target web page, and then obtains the visual similarity between the web page prototype image and the web page image. When the visual similarity is less than the preset similarity threshold, the difference between the web page prototype image and the web page image is obtained, and based on the difference and the web page code, a new web page code is obtained through the web page code generation model, and the step of inputting the web page code into the virtual test environment for web page rendering is returned to execute until the visual similarity is less than or equal to the preset similarity threshold. The terminal 102 may be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, IoT devices, and portable wearable devices. The IoT devices may be smart speakers, smart TVs, smart air conditioners, smart car devices, projection devices, etc. Portable wearable devices may be smart watches, smart bracelets, head-mounted devices, etc. Head-mounted devices may be virtual reality (VR) devices, augmented reality (AR) devices, smart glasses, etc. The server 104 may be an independent physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server that provides cloud computing services.

[0061] In an exemplary embodiment, as shown in FIG2 , a webpage code processing method is provided, which is described by taking the method applied to the server 104 in FIG1 as an example, and includes the following steps S201 to S204. Among them:

[0062] Step S201, obtaining a webpage prototype image of a target webpage.

[0063] Step S202, input the webpage prototype image into a pre-built webpage code generation model to obtain the corresponding webpage code, and input the webpage code into a virtual test environment for webpage rendering to obtain the webpage image of the target webpage.

[0064] Among them, the web page prototype image can be understood as the actual project file derived from the web page, including data information in various forms such as text and images; the web page code generation model can be understood as a deep learning model that can process multiple modal data, converting the web page prototype image into the corresponding web page code; web page rendering can be understood as the process of executing the generated web page code using a virtual test environment, converting the abstract source code into a visual web page image.

[0065] For example, the server 104 obtains the web prototype image of the target web page from the terminal 102 through the communication network, inputs the web prototype image into the pre-built web page code generation model, obtains the corresponding web page code, and then inputs the web page code into the virtual test environment to perform web page rendering to obtain the web page image of the target web page. By designing a web page code generation model that can directly generate the corresponding web page code according to the web page prototype image, the automation level of web page development is improved, and at the same time, the generated web page code is visually rendered, which lays a foundation for the judgment of whether to update the web page code in the future.

[0066] Step S203, obtaining the visual similarity between the web page prototype image and the web page image, and obtaining the difference between the web page prototype image and the web page image when the visual similarity is less than a preset similarity threshold.

[0067] Among them, visual similarity can be understood as the degree of similarity between two pictures in terms of color, shape, texture, brightness and spatial distribution. This degree of similarity is a quantifiable numerical expression of the similarity between the pictures; the preset similarity threshold can be understood as the minimum similarity between the web prototype picture and the web page picture. If it is not reached, the web page code generated by the manual web page code generation model is not accurate enough and needs to be adjusted.

[0068] Optionally, the server 104 uses an advanced image comparison algorithm to calculate the visual similarity between the web prototype image and the web page image. The advanced image comparison algorithm includes a structural similarity index, a peak signal-to-noise ratio, a feature point matching, etc. When the visual similarity is less than a preset similarity threshold, the server 104 performs a difference analysis on the web prototype image and the web page image, mainly locating the visual and structural differences. When the visual similarity does not meet the preset similarity threshold, the difference analysis between the images is continued, which reduces the analysis cost. At the same time, when a difference analysis is required, the difference between the web prototype image and the web page image is obtained, which lays a data foundation for the subsequent update of the web page code.

[0069] Step S204, based on the differences and the web page code, obtain new web page code through the web page code generation model, and return to execute the step of inputting the web page code into the virtual test environment for web page rendering until the visual similarity is greater than or equal to the preset similarity threshold.

[0070] For example, based on the difference and the web page code, the server 104 obtains a new web page code through a web page code generation model, and returns to execute the step of inputting the web page code into a virtual test environment for web page rendering, until the visual similarity is greater than or equal to a preset similarity threshold, at which point the web page code meets the requirements and can be put into use. Through the above-mentioned process of regenerating the web page code, web page rendering, and similarity calculation, the process stops until the visual similarity is greater than or equal to the preset similarity threshold, thereby ensuring a high degree of consistency between the original web page image and the generated web page code, which is beneficial to improving the user's service experience.

[0071] In the above web page code processing method, a web page prototype image of the target web page is obtained, the web page prototype image is input into a pre-built web page code generation model to obtain the corresponding web page code, and the web page code is input into a virtual test environment for web page rendering to obtain the web page image of the target web page, and the visual similarity of the web page prototype image and the web page image quality inspection is further obtained. When the visual similarity is less than a preset similarity threshold, the difference between the web page prototype image and the web page image is obtained, and based on the difference and the web page code, a new web page code is obtained through the web page code generation model, and the step of inputting the web page code into the virtual test environment for web page rendering is returned to execute until the visual similarity is greater than or equal to the preset similarity threshold. Through the above web page code processing method, the corresponding web page code can be directly generated according to the web page prototype image, and the generated web page code can be optimized according to the web page rendering result of this web page code, thereby improving the generation efficiency and code quality of the web page code.

[0072] In one embodiment, based on the difference and the webpage code, a new webpage code is obtained by a webpage code generation model, including:

[0073] Generate code correction feedback information based on the differences;

[0074] The code correction feedback information and the web page code are input into the web page code generation model, and a new web page code is obtained through the web page code generation model.

[0075] The code correction feedback information may be understood as actionable feedback information, for example, indicating which contents of the webpage code need to be adjusted.

[0076] Optionally, the server 104 generates code correction feedback information based on the difference, and then inputs the code correction feedback information and the web page code into the web page code generation model to obtain new web page code through the web page code generation model. By generating code correction feedback information, the server 104 can automatically identify error information in the web page code, realize full automatic control, and improve the update efficiency of the web page code.

[0077] In an exemplary embodiment, as shown in FIG3 , the webpage code generation model is constructed through steps S301 to S305 . Among them:

[0078] Step S301, obtaining a sample webpage prototype image; the sample webpage prototype image corresponds to an actual webpage code.

[0079] Step S302: input the sample web page prototype image into the web page code generation model to be trained, and obtain a plurality of web page initial features through a feature extraction module in the web page code generation model to be trained.

[0080] Step S303, input the initial features of the web page into a feature fusion module with a preset attention mechanism in the web page code generation model to be trained, obtain the attention weight corresponding to each initial feature of the web page, and perform weighted summation of multiple initial features of the web page based on the attention weight to obtain the web page features after feature fusion.

[0081] Step S304: input the web page features into a code generation module in the web page code generation model to be trained, and generate a predicted web page code corresponding to the sample web page prototype image based on the background information and the web page features.

[0082] Among them, the web page code generation model to be trained can be understood as a multimodal large model, which can process and integrate information from different modalities (text, images), process and understand various types of input data, and output highly relevant results. The multimodal large model consists of an input preprocessing layer equivalent to the feature extraction module of the present application, a feature fusion layer equivalent to the feature fusion module of the present application, and a decision / output layer equivalent to the code generation module of the present application; the background information is equivalent to the context information of the current web page prototype image.

[0083] For example, the server 104 obtains a sample web page prototype image corresponding to the actual web page code from the data storage system, and then inputs the sample web page prototype image into the web page code generation model to be trained, through the input preprocessing layer in the web page code generation model to be trained, this layer processes input data of different modes, wherein the web page prototype image is subjected to feature extraction through a convolutional neural network to obtain multiple web page initial features, and the corresponding web page code is processed through a natural language processing model; then the web page initial features are input into the feature fusion layer, and the attention mechanism therein is used to obtain the attention weights corresponding to each web page initial feature, and the multiple web page initial features are weighted and summed according to the attention weights to obtain the web page features after feature fusion, and finally the web page features are input into the decision / output layer, and the final prediction web page code generation is performed according to the web page features and background information.

[0084] Step S305 , performing model training on the web page code generation model to be trained according to the difference between the predicted web page code and the actual web page code, to obtain a trained web page code generation model.

[0085] Optionally, the server 104 performs model training on the webpage code generation model to be trained according to the difference between the predicted webpage code and the actual webpage code, which is essentially to adjust the model parameters of the webpage code generation model to be trained until the preset conditions are met, and then a trained webpage code generation model is obtained. By training the webpage code generation model, the accuracy and reliability of the generated webpage code are improved, thereby accelerating the update efficiency of the webpage code.

[0086] In one embodiment, according to the difference between the predicted webpage code and the actual webpage code, the webpage code generation model to be trained is trained to obtain a trained webpage code generation model, including:

[0087] Obtain a loss function preset for the webpage code generation model to be trained;

[0088] Based on the loss function and the difference, the corresponding model loss value is obtained;

[0089] The model parameters of the web page code generation model to be trained are adjusted accordingly according to the model loss value until the loss function converges, and the web page code generation model to be trained is used as the trained web page code generation model.

[0090] Among them, the loss function can be understood as a function used to quantify the difference between the model output value and the actual value, and the model loss value is the difference between the quantified model output value and the actual value.

[0091] For example, the server 104 obtains a loss function pre-set for the web page code generation model to be trained, brings the difference into the loss function, obtains a corresponding model loss value, and adjusts the model parameters of the web page code generation model to be trained according to the model loss value, until the loss function converges, that is, the model loss value reaches the minimum value, and the web page code generation model to be trained is used as the trained web page code generation model. The output result of the web page code generation model trained by the above means is closer to the actual web page code, which reduces the complicated cycle process for the subsequent update of the web page code, speeds up the generation speed of the web page code that meets the requirements, and thus improves the user's service experience.

[0092] In one embodiment, obtaining a sample webpage prototype image includes:

[0093] The original sample web page prototype image and the original sample web page code associated with the original sample web page prototype image are obtained; the original sample web page prototype image is resized and color normalized to obtain the sample web page prototype image; the original sample web page code is semantically analyzed and structural feature extracted to obtain the sample web page code.

[0094] Optionally, the server 104 performs data collection and preprocessing:

[0095] Goal definition: First, clarify the required data types, mainly including the original sample web prototype and the corresponding original sample web code. The prototype comes from the designer's actual project file, and the original sample web code is written by the front-end developer to ensure high consistency with the design prototype.

[0096] Data collection: By collecting thousands of paired data (prototype images and web page codes). In addition, crawler technology is used to automatically collect data from publicly available design resources and code libraries on the Internet.

[0097] Data preprocessing: Standardize the collected image data (such as resizing and color normalization), perform semantic analysis on the web page code, and extract structured features to meet the needs of subsequent model training.

[0098] The data collection and preprocessing carried out through the above means improves the availability and effectiveness of sample web page prototype images and sample web page codes, thereby improving the model training effect of the web page code generation model.

[0099] In one embodiment, the webpage prototype image corresponds to the webpage original code; the method further includes:

[0100] When the visual similarity is less than a preset similarity threshold and the number of images of the webpage prototype image is greater than or equal to a preset image number threshold, obtaining the difference between the webpage prototype image and the webpage image, and inputting the difference into a code correction module to be trained in the webpage code generation model to obtain a new webpage code;

[0101] According to the difference between the new webpage code and the original webpage code, and the correction loss function pre-set for the code correction module to be trained, a corresponding loss value is obtained;

[0102] Based on the loss value, the model parameters of the code correction module to be trained are adjusted accordingly until the correction loss function converges, and the code correction module to be trained is used as the trained code correction module in the web page code generation model.

[0103] Among them, the original code of the web page can be understood as the code corresponding to the prototype image of the web page, which can be considered as a completely correct control group; the corrected loss function can be understood as a function exclusive to the code correction module for quantifying the difference between the new web page code and the original web page code, and the loss value can be understood as the quantified value of the difference between the new web page code and the original web page code; the web page code generation model also includes an optimization and adjustment layer, which is equivalent to the code correction module in this application.

[0104] Optionally, when the visual similarity is less than a preset similarity threshold and the number of images of the web prototype image is greater than or equal to a preset image number threshold, that is, when the number of images of the web prototype image that needs to be updated has reached the number that can be trained, the difference between the web prototype image and the web page image is obtained, and the difference is input into the code correction module to be trained in the web page code generation model, and the difference description between the web prototype image and the web page image is used as feedback to dynamically adjust the web page code generation to obtain a new web page code, and then according to the difference between the new web page code and the original web page code, and the correction loss function pre-set for the code correction module to be trained, the corresponding loss value is obtained, and finally the model parameters of the code correction module to be trained are adjusted accordingly based on the loss value, until the correction loss function converges, that is, the loss value reaches the minimum value, and the code correction module to be trained is used as the trained code correction module in the web page code generation model. Through the above-mentioned cumulative learning process, the data and feedback obtained in the web page code generation and optimization process are used for long-term training of the model, so that the model continuously adapts to new design trends and technical requirements, effectively enhances the code correction function of the model, reduces the number of corrections and improves the correction efficiency, thereby improving the user experience.

[0105] In an exemplary embodiment, as shown in FIG4 , a specific implementation of a webpage code processing method is provided, including:

[0106] 1. Obtain the web page prototype image, and call the multimodal web page code generation model to generate the corresponding web page code according to the web page prototype image.

[0107] 2. Real-time rendering and similarity evaluation:

[0108] Web page rendering: The HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) codes generated by the model are first rendered in a safe testing environment to produce a visual web page.

[0109] Similarity calculation: Use advanced image comparison algorithms to evaluate the visual similarity between the generated web page and the prototype image. By quantifying the visual differences, it provides clear optimization directions.

[0110] 3. Difference analysis and feedback extraction:

[0111] Difference localization: If the similarity evaluation result does not reach the predetermined threshold, the system will automatically perform a difference analysis to locate the main visual and structural differences.

[0112] Feedback generation: Convert these differences into actionable feedback, such as which HTML elements or CSS properties need to be adjusted.

[0113] 4. Dynamic optimization of web page code:

[0114] Code regeneration: Dynamically optimize web page code by combining difference feedback.

[0115] Compared with the prior art, this application has the following advantages:

[0116] 1. Improved efficiency: Automatically generate web page code, reduce the need for manual programming, and accelerate the development process from design to deployment.

[0117] 2. Quality assurance: Through continuous optimization cycles, ensure that the generated web pages meet the design specifications both visually and functionally.

[0118] 3. Real-time dynamic optimization: Combine real-time visual similarity evaluation and difference analysis to dynamically optimize the generated web page code to ensure a high degree of consistency between the web page and the prototype design.

[0119] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0120] Based on the same inventive concept, the embodiment of the present application also provides a web page code processing device for implementing the web page code processing method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in the one or more web page code processing device embodiments provided below can refer to the limitations of the web page code processing method above, and will not be repeated here.

[0121] In an exemplary embodiment, as shown in FIG5 , a webpage code processing device is provided, comprising: an image acquisition module 501, a webpage rendering module 502, a difference acquisition module 503 and a code update module 504, wherein:

[0122] The image acquisition module 501 is used to acquire a webpage prototype image of a target webpage;

[0123] The webpage rendering module 502 is used to input the webpage prototype image into the pre-built webpage code generation model to obtain the corresponding webpage code, and input the webpage code into the virtual test environment for webpage rendering to obtain the webpage image of the target webpage;

[0124] The difference acquisition module 503 is used to acquire the visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, acquire the difference between the webpage prototype image and the webpage image;

[0125] The code update module 504 is used to obtain new web page codes through the web page code generation model based on the differences and the web page codes, and return to execute the step of inputting the web page codes into the virtual test environment for web page rendering until the visual similarity is greater than or equal to a preset similarity threshold.

[0126] In one embodiment, the code update module 504 is further used to generate code correction feedback information according to the difference; input the code correction feedback information and the web page code into the web page code generation model, and obtain new web page code through the web page code generation model.

[0127] In one embodiment, the webpage code processing device further includes:

[0128] The model building unit is used to obtain a sample web page prototype image; the sample web page prototype image corresponds to an actual web page code; the sample web page prototype image is input into the web page code generation model to be trained, and multiple web page initial features are obtained through the feature extraction module in the web page code generation model to be trained; the web page initial features are input into a feature fusion module with an attention mechanism preset in the web page code generation model to be trained, the attention weights corresponding to the initial features of each web page are obtained, and the weighted summation of multiple web page initial features is performed based on the attention weights to obtain the web page features after feature fusion; the web page features are input into the code generation module in the web page code generation model to be trained, and based on the background information and web page features, a predicted web page code corresponding to the sample web page prototype image is generated; according to the difference between the predicted web page code and the actual web page code, the web page code generation model to be trained is trained to obtain a trained web page code generation model.

[0129] In an exemplary embodiment, the model building unit is also used to obtain a loss function pre-set for the web page code generation model to be trained; based on the loss function and the difference, a corresponding model loss value is obtained; according to the model loss value, the model parameters of the web page code generation model to be trained are adjusted accordingly until the loss function converges, and the web page code generation model to be trained is used as a trained web page code generation model.

[0130] In one embodiment, the image acquisition module 501 is also used to obtain the original sample web page prototype image, and the original sample web page code associated with the original sample web page prototype image; resize and color normalize the original sample web page prototype image to obtain the sample web page prototype image; perform semantic analysis and structured feature extraction on the original sample web page code to obtain the sample web page code.

[0131] In one of the embodiments, the web page prototype image corresponds to the web page original code, and the web page code processing device is also used to obtain the difference between the web page prototype image and the web page image when the visual similarity is less than a preset similarity threshold and the number of images of the web page prototype image is greater than or equal to a preset image number threshold, and input the difference into a code correction module to be trained in the web page code generation model to obtain a new web page code; according to the difference between the new web page code and the original web page code, and the corrected loss function pre-set for the code correction module to be trained, a corresponding loss value is obtained; based on the loss value, the model parameters of the code correction module to be trained are correspondingly adjusted until the corrected loss function converges, and the code correction module to be trained is used as the trained code correction module in the web page code generation model.

[0132] Each module in the webpage code processing device can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.

[0133] In an exemplary embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be shown in FIG6. The computer device includes a processor, a memory, an input / output interface (Input / Output, referred to as I / O) and a communication interface. The processor, the memory and the input / output interface are connected through a system bus, and the communication interface is connected to the system bus through the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store web prototype image data, web page original code data, web page code data, web page image data, and difference data between web page prototype images and web page images. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a web page code processing method is implemented.

[0134] Those skilled in the art will understand that the structure shown in FIG. 6 is merely a block diagram of a partial structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

[0135] In an exemplary embodiment, a computer device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the web page code processing method of the above embodiment is implemented.

[0136] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the web page code processing method of the above embodiment is implemented.

[0137] In one embodiment, a computer program product is provided, including a computer program, which implements the web page code processing method of the above embodiment when executed by a processor.

[0138] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0139] A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, an artificial intelligence (AI) processor, etc., but are not limited to this.

[0140] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0141] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A web page code processing method, characterized in that: The method comprises: Get the webpage prototype image of the target webpage; Inputting the webpage prototype image into a pre-built webpage code generation model to obtain corresponding webpage code, and inputting the webpage code into a virtual test environment for webpage rendering to obtain a webpage image of the target webpage; Obtaining a visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, obtaining a difference between the webpage prototype image and the webpage image; Based on the difference and the web page code, a new web page code is obtained through the web page code generation model, and the step of inputting the web page code into a virtual test environment for web page rendering is returned to be executed until the visual similarity is greater than or equal to the preset similarity threshold.

2. The method according to claim 1, characterized in that The step of obtaining new webpage code based on the difference and the webpage code by using the webpage code generation model includes: generating code correction feedback information according to the difference; The code correction feedback information and the web page code are input into the web page code generation model, and new web page code is obtained through the web page code generation model.

3. The method according to claim 1, characterized in that The web page code generation model is constructed by the following steps: Obtain a sample webpage prototype image; the sample webpage prototype image corresponds to an actual webpage code; Inputting the sample web page prototype image into the web page code generation model to be trained, and obtaining a plurality of web page initial features through a feature extraction module in the web page code generation model to be trained; Inputting the initial features of the web page into a feature fusion module with a preset attention mechanism in the web page code generation model to be trained, obtaining the attention weight corresponding to each of the initial features of the web page, and performing weighted summation on multiple initial features of the web page based on the attention weight to obtain the web page features after feature fusion; Inputting the web page features into a code generation module in the web page code generation model to be trained, and generating a predicted web page code corresponding to the sample web page prototype image based on background information and the web page features; According to the difference between the predicted web page code and the actual web page code, model training is performed on the web page code generation model to be trained to obtain a trained web page code generation model.

4. The method according to claim 3, characterized in that The step of performing model training on the webpage code generation model to be trained according to the difference between the predicted webpage code and the actual webpage code to obtain a trained webpage code generation model includes: Obtaining a loss function preset for the webpage code generation model to be trained; Based on the loss function and the difference, obtaining a corresponding model loss value; The model parameters of the web page code generation model to be trained are adjusted accordingly according to the model loss value until the loss function converges, and the web page code generation model to be trained is used as the trained web page code generation model.

5. The method according to claim 3, characterized in that: The step of obtaining a sample webpage prototype image includes: Obtaining an original sample webpage prototype image and an original sample webpage code associated with the original sample webpage prototype image; Resizing and color normalizing the original sample webpage prototype image to obtain the sample webpage prototype image; The original sample web page code is subjected to semantic analysis and structural feature extraction to obtain the sample web page code.

6. The method according to claim 1, characterized in that The webpage prototype image corresponds to the webpage original code; the method further includes: When the visual similarity is less than a preset similarity threshold and the number of images of the webpage prototype image is greater than or equal to a preset image number threshold, obtaining a difference between the webpage prototype image and the webpage image, and inputting the difference into a code correction module to be trained in the webpage code generation model to obtain a new webpage code; Obtaining a corresponding loss value according to the difference between the new webpage code and the original webpage code and a correction loss function preset for the code correction module to be trained; Based on the loss value, the model parameters of the code correction module to be trained are correspondingly adjusted until the correction loss function converges, and the code correction module to be trained is used as the trained code correction module in the web page code generation model.

7. A web page code processing device, characterized in that: The device comprises: An image acquisition module is used to acquire a webpage prototype image of a target webpage; A web page rendering module is used to input the web page prototype image into a pre-built web page code generation model to obtain the corresponding web page code, and input the web page code into a virtual test environment for web page rendering to obtain the web page image of the target web page; A difference acquisition module, used to acquire the visual similarity between the webpage prototype image and the webpage image, and when the visual similarity is less than a preset similarity threshold, acquire the difference between the webpage prototype image and the webpage image; A code update module is used to obtain new web page code through the web page code generation model based on the difference and the web page code, and return to execute the step of inputting the web page code into the virtual test environment for web page rendering until the visual similarity is greater than or equal to the preset similarity threshold.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 6 are implemented.

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

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

Images