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

Abstract

The invention relates to the technical field of front-end development, and discloses a front-end page publishing method and device, computer equipment and a storage medium, and the method comprises the steps: obtaining a design draft image and prompt words input by a user; inputting the design draft image and the cue into an AI code generation model to enable the AI code generation model to generate a target code corresponding to the design draft image according to the cue; submitting the target code to a front-end code warehouse; and when a page release instruction corresponding to the target code input by the user is obtained, obtaining the target code from the front-end code warehouse through a page release assembly line, so as to perform page release based on the target code. It can be seen that the target code is developed through the AI code generation model, compared with a manual mode for developing the target code, the compiling efficiency of the target code can be effectively improved, and then the development efficiency of the front-end page is improved.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a front-end page publishing method, device, computer equipment and storage medium. Background Art

[0002] In the rapidly developing Internet industry, front-end page development is a key link in direct interaction with users, and its efficiency directly affects the product iteration speed and user experience.

[0003] At present, in the process of front-end page development, it is usually necessary to manually write the corresponding code of the design page, and then publish the page according to the code. For example, technical developers write the corresponding code according to the page design draft, and then, through the cooperation of front-end and back-end personnel, the front-end code is verified. If the verification is passed, the front-end page is published according to the code.

[0004] However, manual coding is slow, resulting in low efficiency in front-end page development. Summary of the Invention

[0005] The embodiments of the present invention provide a front-end page publishing method, apparatus, computer equipment and storage medium to solve the problem of low efficiency in front-end page development caused by slow manual code writing.

[0006] A front-end page publishing method, the method comprising: Get the design draft image and prompt words input by the user; Inputting the design draft image and the prompt into an AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt; Submit the target code to the front-end code repository; When a page publishing instruction corresponding to the target code input by the user is obtained, the target code is obtained from the front-end code repository through the page publishing pipeline to perform page publishing based on the target code.

[0007] In the above-mentioned front-end page publishing method, optionally, the prompt includes a first prompt and a second prompt, and the step of inputting the design draft image and the prompt into the AI code generation model so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt includes: Inputting the design draft image and the first prompt into an AI code generation model, so that the AI code generation model parses the design draft image into a corresponding initial code according to the first prompt; generating a preview page based on the initial code, and outputting the preview page to the user, so that the user can evaluate the satisfaction of the preview page; When the user is satisfied with the preview page, determining the initial code as the target code; When the user is not satisfied with the preview page, obtaining the second prompt input by the user; The initial code is reconstructed based on the second prompt to obtain a new initial code. Based on the new initial code, the steps of generating a preview page based on the initial code and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page are returned to the step of generating a preview page based on the initial code, and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page. The initial code is determined to be the target code until the user is satisfied with the preview page.

[0008] The front-end page publishing method described above may optionally include inputting the design draft image and the first prompt into an AI code generation model so that the AI code generation model parses the design draft image into a corresponding initial code based on the first prompt, including: Analyzing the first prompt using the AI code generation model to obtain page function requirements of the design draft image, the page function requirements including the main functional modules, interactive behaviors, and data display methods of the page; Performing image processing and feature extraction on the design draft image through the AI code generation model to obtain visual elements in the design draft image corresponding to the functional requirements of the page, wherein the visual elements include different areas, components, and layouts in the page; Based on the page functional requirements and visual elements, the initial code is generated, and the initial code includes page structure code, page style code and page interaction code.

[0009] Optionally, the front-end page publishing method may include generating a preview page based on the initial code, including: Create a preview container; Loading the initial code in the preview container via the presentation component to obtain an initial page including a placeholder image; According to the built-in prompt in the initial code, the placeholder image in the initial page is replaced with the rendering image in the interface component library to obtain a preview page.

[0010] In the above-mentioned front-end page publishing method, optionally, the prompt includes an image prompt and a requirement prompt; wherein, the image prompt is used to indicate the distribution structure of the page published based on the design draft image, and the requirement prompt is used to instruct the AI code generation model to generate the target code based on the design draft image.

[0011] A front-end page publishing device, comprising: The first data acquisition module is used to acquire the design draft image and prompt words input by the user; A front-end code generation module, configured to input the design draft image and the prompt into an AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt; A front-end code sending module, used to submit the target code to the front-end code repository; The front-end page publishing module is used to obtain the target code from the front-end code repository through the page publishing pipeline when obtaining the page publishing instruction corresponding to the target code input by the user, so as to publish the page based on the target code.

[0012] In the above-mentioned front-end page publishing device, optionally, the front-end code generation module is used to: Inputting the design draft image and the first prompt into an AI code generation model, so that the AI code generation model parses the design draft image into a corresponding initial code according to the first prompt; generating a preview page based on the initial code, and outputting the preview page to the user, so that the user can evaluate the satisfaction of the preview page; When the user is satisfied with the preview page, determining the initial code as the target code; When the user is not satisfied with the preview page, obtaining the second prompt input by the user; The initial code is reconstructed based on the second prompt to obtain a new initial code. Based on the new initial code, the steps of generating a preview page based on the initial code and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page are returned to the step of generating a preview page based on the initial code, and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page. The initial code is determined to be the target code until the user is satisfied with the preview page.

[0013] In the above-mentioned front-end page publishing device, optionally, the front-end code generation module is used to: Analyzing the first prompt using the AI code generation model to obtain page function requirements of the design draft image, the page function requirements including the main functional modules, interactive behaviors, and data display methods of the page; Performing image processing and feature extraction on the design draft image through the AI code generation model to obtain visual elements in the design draft image corresponding to the functional requirements of the page, wherein the visual elements include different areas, components, and layouts in the page; Based on the page functional requirements and visual elements, the target code is generated, and the target code includes page structure code, page style code and page interaction code.

[0014] A computer device comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements any one of the above-mentioned front-end page publishing methods when executing the computer program.

[0015] A computer-readable storage medium stores a computer program, wherein the computer program implements any of the above-mentioned front-end page publishing methods when executed by a processor.

[0016] The above-mentioned front-end page publishing method, device, computer equipment and storage medium obtain the design draft image and prompt input by the user; input the design draft image and prompt into the AI code generation model, so that the AI code generation model generates the target code corresponding to the design draft image according to the prompt; submit the target code to the front-end code warehouse; when the page publishing instruction corresponding to the target code input by the user is obtained, the target code is obtained from the front-end code warehouse through the page publishing pipeline to publish the page based on the target code. It can be seen that the present invention uses the AI code generation model to develop the target code. Compared with the manual development of the target code, it can effectively improve the writing efficiency of the target code, thereby improving the development efficiency of the front-end page. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments of the present invention. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0018] Figure 1 This is a flow chart of an implementation method of a front-end page publishing method in one embodiment of the present invention; Figure 2 This is a partial implementation flow chart of a front-end page publishing method according to one embodiment of the present invention; Figure 3 This is a partial implementation flow chart of a front-end page publishing method according to one embodiment of the present invention; Figure 4 This is a partial implementation flow chart of a front-end page publishing method according to one embodiment of the present invention; Figure 5 It is a structural diagram of a front-end page publishing device in one embodiment of the present invention; Figure 6It is a structural diagram of a computer device in one embodiment of the present invention. DETAILED DESCRIPTION

[0019] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. All other embodiments obtained by ordinary technicians in this field based on the embodiments of the present invention without making any creative efforts shall fall within the scope of protection of the present invention.

[0020] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, integers, steps, operations, elements and / or components, but does not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or groups thereof.

[0021] It will also be understood that the term "and / or" used in the present description and appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0022] As used in the present specification and the appended claims, the term "if" may be interpreted as "when" or "upon" or "in response to determining" or "in response to detecting," depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" may be interpreted as meaning "upon determination" or "in response to determining" or "upon detection of [described condition or event]" or "in response to detecting [described condition or event]," depending on the context.

[0023] In addition, in the description of the present specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0024] References to "one embodiment" or "some embodiments" in the present specification mean that a particular feature, structure, or characteristic described in connection with that embodiment is included in one or more embodiments of the present invention. Thus, phrases such as "in one embodiment," "in some embodiments," "in other embodiments," and "in yet other embodiments" appearing in various places in this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically stated. The terms "including," "comprising," "having," and variations thereof mean "including but not limited to," unless otherwise specifically stated.

[0025] The present invention discloses a front-end page publishing method, device, computer equipment and storage medium, which obtains a design draft image and prompt input by a user; inputs the design draft image and prompt into an AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt; submits the target code to a front-end code repository; when a page publishing instruction corresponding to the target code input by the user is obtained, the target code is obtained from the front-end code repository through a page publishing pipeline to publish the page based on the target code. It can be seen that the present invention develops the target code through the AI code generation model, which can effectively improve the writing efficiency of the target code compared to manual development of the target code, thereby improving the development efficiency of the front-end page. This will be explained below through specific embodiments.

[0026] In one embodiment, if Figure 1 As shown, a flowchart of a front-end page publishing method is provided. The method is applicable to any electronic device with data processing capabilities, such as a mobile phone, tablet computer, laptop computer, personal computer, or server. The method in this embodiment specifically includes the following steps: S101: Acquire the design draft image and prompt words input by the user.

[0027] Design draft images refer to visual design materials or prototypes used to guide front-end development. These images typically come from UI (user interface) or UX (user experience) designers, who use professional design software (such as Adobe XD, Sketch, and Figma) to create visually appealing interface designs for front-end developers to reference and implement.

[0028] In addition, the prompts in this embodiment may include image prompts and requirement prompts, wherein the image prompts are used to indicate the distribution structure of the page published based on the design draft image, for example, a web page layout including a top navigation bar, a middle content area and a bottom footer, wherein the navigation bar has three horizontally arranged menu items, a large picture in the center of the page, and two parallel buttons below the picture, marked as "Buy" and "Add to Cart" respectively; the requirement prompts are used to instruct the AI code generation model to generate the target code based on the design draft image, for example, the requirement prompts can generate the corresponding code for the design draft image according to the image prompts.

[0029] In a specific implementation, this embodiment can generate a design draft image using UI design software, or directly read the required design draft image from a design draft database, etc., to obtain the design draft image. When determining the design draft image, a corresponding prompt is obtained based on the image content of the design draft image. The prompt can be manually written, or the design draft image can be recognized by a trained image recognition model to obtain the corresponding prompt. Based on this, this embodiment can achieve the acquisition of the design draft image and prompt input by the user.

[0030] S102: Inputting the design draft image and the prompt into the AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt.

[0031] In a specific implementation, in this embodiment, an AI code generation model can be built in an electronic device, or a connection can be established between the electronic device and the AI code generation model. Then, after inputting a design draft image and a prompt in the input page of the AI code generation model in the electronic device, a button indicating the start of image-based code generation is clicked, so that the AI code generation model generates the target code corresponding to the design draft image based on the prompt. The AI code generation model in this embodiment includes, but is not limited to, one or more models based on the GPT4-o model, Generative Adversarial Networks (GANs), and Variational Autoencoders (VAEs).

[0032] S103: Submit the target code to the front-end code repository.

[0033] Among them, the front-end code warehouse in this embodiment is mainly used to provide storage space for the generated target code.

[0034] In a specific implementation, in this embodiment, the required code repository platform can be installed first, such as a remote code hosting platform such as GitHub, GitLab, or CODING. A new front-end code repository can be created in the code repository platform, and the URL of the front-end code repository can be recorded. The target code can then be added to the front-end code repository using the git add command and / or the git commit command. For example, the release line interface provided by the Node layer uses the Node.js child_process module to execute the git add command and / or the git commit command to commit the front-end code to the front-end code repository.

[0035] S104: When a page publishing instruction corresponding to the target code input by the user is obtained, the target code is obtained from the front-end code repository through the page publishing pipeline to publish the page based on the target code.

[0036] In practice, the page release pipeline in this embodiment is used to automate the process of releasing target code to a production environment. This pipeline typically includes multiple steps, including code submission, building, deployment, testing, and release. It aims to achieve continuous integration and continuous deployment (CI / CD), improve development and deployment efficiency, and ensure code quality and stability.

[0037] In summary, the present invention discloses a front-end page publishing method. After obtaining a design draft image and a first prompt input by a user, the design draft image is parsed into a corresponding target code according to the first prompt through an AI code generation model, and the target code is submitted to a front-end code repository. Then, when a page publishing instruction is obtained, the target code is obtained from the front-end code repository through a page publishing pipeline to publish the page based on the target code. It can be seen that the present invention uses an AI code generation model to develop the target code, which can effectively improve the development efficiency of the target code compared to manual development of the target code.

[0038] based on Figure 1 In the specific implementation, the prompt includes a first prompt and a second prompt. Step S102 in this embodiment can be implemented by the following steps: Figure 2 As shown: S201: Inputting the design draft image and the first prompt into the AI code generation model, so that the AI code generation model parses the design draft image into the corresponding initial code according to the first prompt.

[0039] S202: Generate a preview page based on the initial code, and output the preview page to the user, so that the user can evaluate the satisfaction of the preview page.

[0040] S203: When the user is satisfied with the preview page, the initial code is determined to be the target code.

[0041] S204: When the user is not satisfied with the preview page, obtain a second prompt input by the user S205: Reconstruct the initial code based on the second prompt to obtain a new initial code. Based on the new initial code, return to the step of generating a preview page based on the initial code, and output the preview page to the user so that the user can evaluate the satisfaction of the preview page, until the user is satisfied with the preview page and the initial code is determined to be the target code.

[0042] As can be understood, in this embodiment, an initial code is generated based on the first prompt and the design draft image, and a preview page is generated based on the initial code for the user to preview. If the user is satisfied with the preview page, the initial code is determined to be the target code. If the user is dissatisfied with the preview page, the user can enter a second prompt to reconstruct the initial code, obtaining a new initial code. Based on the new initial code, the process returns to the steps of generating a preview page based on the initial code and outputting the preview page to the user, allowing the user to evaluate their satisfaction with the preview page. In other words, as long as the user is dissatisfied with the preview page, the user can enter a second prompt to continuously reconstruct and modify the initial code until the user is satisfied with the preview page generated based on the initial code, at which point the initial code is determined to be the target code.

[0043] To sum up, in this embodiment, a preview page is generated based on the initial code so that the user can intuitively understand the generation effect of the page. When the user is not satisfied, the initial code can be continuously reconstructed by entering a second prompt, and the preview page can be continuously adjusted until the user is satisfied with the generated preview page. This can effectively avoid frequent changes and releases of pages, which is conducive to improving the publishing efficiency of front-end pages.

[0044] based on Figure 1 In the specific implementation, step S102 in this embodiment can generate the target code by the following steps: Figure 3 As shown: S301: Analyze the first prompt through the AI code generation model to obtain the page function requirements of the design draft image.

[0045] Among them, page functional requirements include the page's main functional modules, interactive behaviors, and data display methods.

[0046] In the specific implementation, the main functional modules in this embodiment include but are not limited to login module, registration module, product display module, shopping cart module, payment module, etc.; interactive behaviors include but are not limited to user operations such as clicking buttons, entering text, selecting options, dragging elements, sliding screens, etc.; data display methods include but are not limited to lists, tables, charts, pictures, videos and other forms.

[0047] S302: Perform image processing and feature extraction on the design draft image through the AI code generation model to obtain visual elements in the design draft image that correspond to the page function requirements.

[0048] Visual elements include different areas, components, and layouts on a page. For example, identifying page elements involves: determining the overall layout of the page, such as whether it is a single-column, double-column, or multi-column layout; identifying all components on the page, such as buttons, input boxes, drop-down menus, tables, images, text areas, etc.; checking whether there is a navigation bar and what links or options it contains; and determining which elements are interactive, such as click events and hover effects.

[0049] After parsing the page functional requirements from the design draft image according to the first prompt, the target code is written based on the parsed page functional requirements. The target code includes but is not limited to HTML, CSS, and JavaScript.

[0050] S303: Generate initial code based on page functional requirements and visual elements.

[0051] The target code includes page structure code, page style code and page interaction code.

[0052] In summary, in this embodiment, the AI code generation model is used to generate the initial code, and the preview page is returned to the user, so that the user can directly obtain the preview page without the need for the user to perform the tedious work of code writing and preview page generation, which lowers the threshold for users to develop pages and effectively improves the efficiency of page development. based on Figure 2 In the specific implementation, step S202 in this embodiment can be implemented by the following steps: Figure 4 As shown: S401: Create a preview container.

[0053] The preview container is an area for displaying demonstration components. Element, or, a more complex container, such as a modal box, a sidebar or a full-screen preview window. In this embodiment, appropriate styles and layouts can be set for the preview container to ensure that the presentation component can be correctly displayed therein.

[0054] S402: The initial code is loaded into the preview container through the demonstration component to obtain an initial page including a placeholder image.

[0055] Load the demo component into the preview container, then load the initial code from the demo component in the preview container to get the initial page with the placeholder image. If you're using React, you can use the ReactDOM.render method to render the component into the specified DOM node (i.e., the demo container). If you're using Vue, you can use new Vue({ el: '#container'}) or the Vue.mount method to mount the component to the demo container.

[0056] S403: According to the built-in prompt in the initial code, the placeholder image in the initial page is replaced with the rendering image in the interface component library to obtain a preview page.

[0057] In a specific implementation, this embodiment can replace the placeholder image on the initial page with a rendered image in the interface component library based on the built-in prompt in the initial code to obtain a preview page. The rendered image is the image that will eventually be displayed on the page, such as an icon, advertisement image, etc.

[0058] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0059] In one embodiment, Figure 5 As shown, a front-end page publishing device is provided, which corresponds one-to-one to the front-end page publishing method in the above embodiment. The front-end page publishing device includes a first data acquisition module, a front-end code generation module, a front-end code sending module, and a front-end page publishing module. Each functional module is described in detail as follows: The first data acquisition module 501 is used to acquire the design draft image and prompt words input by the user; The front-end code generation module 502 is used to input the design draft image and prompts into the AI code generation model, so that the AI code generation model generates target code corresponding to the design draft image according to the prompts; The front-end code sending module 503 is used to submit the target code to the front-end code repository; The front-end page publishing module 504 is used to obtain the target code from the front-end code repository through the page publishing pipeline when obtaining the page publishing instruction corresponding to the target code input by the user, so as to publish the page based on the target code.

[0060] In summary, an embodiment of the present invention discloses a front-end page publishing device, which obtains a design draft image and prompts input by a user; inputs the design draft image and prompts into an AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompts; submits the target code to the front-end code warehouse; when a page publishing instruction corresponding to the target code input by the user is obtained, the target code is obtained from the front-end code warehouse through the page publishing pipeline to publish the page based on the target code. It can be seen that the present invention develops the target code through the AI code generation model, which can effectively improve the efficiency of writing the target code compared to developing the target code manually, thereby improving the development efficiency of the front-end page.

[0061] In one implementation, the prompt includes a first prompt and a second prompt, and the front-end code generation module 502 is used to: Inputting the design draft image and the first prompt into the AI code generation model, so that the AI code generation model parses the design draft image into the corresponding initial code according to the first prompt; Generate a preview page based on the initial code and output the preview page to the user so that the user can evaluate the satisfaction of the preview page; When the user is satisfied with the preview page, the initial code is determined to be the target code; When the user is not satisfied with the preview page, obtain a second prompt input by the user; The initial code is reconstructed based on the second prompt to obtain a new initial code. Based on the new initial code, the execution returns to the step of generating a preview page based on the initial code, and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page. Until the user is satisfied with the preview page, the initial code is determined to be the target code. In one implementation, the front-end code generation module 502 is used to: The first prompt is analyzed through the AI code generation model to obtain the page function requirements of the design draft image. The page function requirements include the main functional modules of the page, interactive behaviors, and data display methods; The AI code generation model is used to process and extract features from the design draft image to obtain visual elements in the design draft image that correspond to the functional requirements of the page. The visual elements include different areas, components, and layouts on the page. Based on the page functional requirements and visual elements, the initial code is generated. The initial code includes page structure code, page style code and page interaction code.

[0062] In one implementation, the front-end code generation module 502 may be used to: Create a preview container; Through the demonstration component, the initial code is loaded in the preview container to obtain the initial page including the placeholder image; According to the built-in prompts in the initial code, the placeholder image in the initial page is replaced with the rendered image in the interface component library to obtain the preview page.

[0063] In one implementation, the prompt includes an image prompt and a requirement prompt; wherein, the image prompt is used to indicate the distribution structure of pages published based on the design draft image, and the requirement prompt is used to instruct the AI code generation model to generate target code based on the design draft image.

[0064] For the specific definition of the front-end page publishing device, please refer to the definition of the front-end page publishing method above, and will not be repeated here. The various modules in the above-mentioned front-end page publishing device can be implemented in whole or in part by software, hardware, or a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0065] In one embodiment, a computer device is provided. The computer device may be a server, and its internal structure diagram may be as follows: Figure 6 As shown. The computer device includes a processor, memory, network interface, and database connected via a system bus. 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 computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal via a network connection. When the computer program is executed by the processor, a front-end page publishing method is implemented.

[0066] In one implementation, a computer device is disclosed. When a processor of the computer device executes a computer program, the processor implements: Obtain the design draft image and first prompt word input by the user; Inputting the design draft image and the first prompt into the AI code generation model, so that the AI code generation model parses the design draft image into the corresponding target code according to the first prompt; Submit the target code to the front-end code repository; When a page publishing instruction input by the user is obtained, the target code is obtained from the front-end code repository through the page publishing pipeline to publish the page based on the target code.

[0067] In one implementation, inputting a design draft image and a first prompt into an AI code generation model so that the AI code generation model parses the design draft image into corresponding target code according to the first prompt includes: Inputting the design draft image and the first prompt into the AI code generation model, so that the AI code generation model parses the design draft image into the corresponding initial code according to the first prompt; Generate a preview page based on the initial code and output the preview page to the user; A second prompt input by the user is obtained, and the initial code is reconstructed based on the second prompt to obtain the target code.

[0068] In one implementation, inputting a design draft image and a first prompt into an AI code generation model so that the AI code generation model parses the design draft image into corresponding target code according to the first prompt includes: Analyze the page functional requirements from the design draft image based on the first prompt; Generate target code corresponding to the design draft image based on the page functional requirements.

[0069] In one implementation, generating a preview page based on the initial code includes: Create a preview container; Through the demonstration component, the initial code is loaded in the preview container to obtain the initial page including the placeholder image; According to the built-in prompts in the initial code, the placeholder image in the initial page is replaced with the rendered image in the interface component library to obtain the preview page.

[0070] In one implementation, the first prompt includes an image prompt and a requirement prompt; wherein, the image prompt is used to represent the image structure of the design draft image, and the requirement prompt is used to instruct the AI code generation model to generate target code based on the design draft image.

[0071] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the front-end page publishing method in the above embodiment is implemented.

[0072] 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 front-end page publishing method in the above embodiment is implemented.

[0073] Those skilled in the art will understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application may include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), Synchronous Link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0074] Those skilled in the art will clearly understand that for the sake of convenience and brevity of description, only the division of the above-mentioned functional units and modules is used as an example. In actual applications, the above-mentioned functions can be distributed and completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above.

[0075] The embodiments described above are only used to illustrate the technical solutions of the present invention, rather than to limit the same. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. These modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the scope of protection of the present invention.

Claims

1. A front-end page publishing method, characterized in that: The method comprises, Get the design draft image and prompt words input by the user; Inputting the design draft image and the prompt into an AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt; Submit the target code to the front-end code repository; When a page publishing instruction corresponding to the target code input by the user is obtained, the target code is obtained from the front-end code repository through the page publishing pipeline to perform page publishing based on the target code.

2. The front-end page publishing method according to claim 1, characterized in that: The prompt includes a first prompt and a second prompt, and inputting the design draft image and the prompt into an AI code generation model so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt includes: Inputting the design draft image and the first prompt into an AI code generation model, so that the AI code generation model parses the design draft image into a corresponding initial code according to the first prompt; generating a preview page based on the initial code, and outputting the preview page to the user, so that the user can evaluate the satisfaction of the preview page; When the user is satisfied with the preview page, determining the initial code as the target code; When the user is not satisfied with the preview page, obtaining the second prompt input by the user; The initial code is reconstructed based on the second prompt to obtain a new initial code. Based on the new initial code, the steps of generating a preview page based on the initial code and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page are returned to the step of generating a preview page based on the initial code, and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page. The initial code is determined to be the target code until the user is satisfied with the preview page.

3. The front-end page publishing method according to claim 2, characterized in that: Inputting the design draft image and the first prompt into an AI code generation model so that the AI code generation model parses the design draft image into a corresponding initial code according to the first prompt includes: Analyzing the first prompt using the AI code generation model to obtain page function requirements of the design draft image, the page function requirements including the main functional modules, interactive behaviors, and data display methods of the page; Performing image processing and feature extraction on the design draft image through the AI code generation model to obtain visual elements in the design draft image corresponding to the functional requirements of the page, wherein the visual elements include different areas, components, and layouts in the page; Based on the page functional requirements and visual elements, the initial code is generated, and the initial code includes page structure code, page style code and page interaction code.

4. The front-end page publishing method according to claim 2, characterized in that: The step of generating a preview page based on the initial code includes: Create a preview container; Loading the initial code in the preview container via the presentation component to obtain an initial page including a placeholder image; According to the built-in prompt in the initial code, the placeholder image in the initial page is replaced with the rendering image in the interface component library to obtain a preview page.

5. The front-end page publishing method according to claim 1, characterized in that: The prompts include image prompts and requirement prompts; wherein, the image prompts are used to indicate the distribution structure of pages published based on the design draft image, and the requirement prompts are used to instruct the AI code generation model to generate the target code based on the design draft image.

6. A front-end page publishing device, characterized in that: include: The first data acquisition module is used to acquire the design draft image and prompt words input by the user; A front-end code generation module, configured to input the design draft image and the prompt into an AI code generation model, so that the AI code generation model generates a target code corresponding to the design draft image according to the prompt; A front-end code sending module, used to submit the target code to the front-end code repository; The front-end page publishing module is used to obtain the target code from the front-end code repository through the page publishing pipeline when obtaining the page publishing instruction corresponding to the target code input by the user, so as to publish the page based on the target code.

7. The front-end page publishing device according to claim 6, characterized in that: The front-end code generation module is used to: Inputting the design draft image and the first prompt into an AI code generation model, so that the AI code generation model parses the design draft image into a corresponding initial code according to the first prompt; generating a preview page based on the initial code, and outputting the preview page to the user, so that the user can evaluate the satisfaction of the preview page; When the user is satisfied with the preview page, determining the initial code as the target code; When the user is not satisfied with the preview page, obtaining the second prompt input by the user; The initial code is reconstructed based on the second prompt to obtain a new initial code. Based on the new initial code, the steps of generating a preview page based on the initial code and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page are returned to the step of generating a preview page based on the initial code, and outputting the preview page to the user so that the user can evaluate the satisfaction of the preview page. The initial code is determined to be the target code until the user is satisfied with the preview page.

8. The front-end page publishing device according to claim 7, characterized in that: The front-end code generation module is used to: Analyzing the first prompt using the AI code generation model to obtain page function requirements of the design draft image, the page function requirements including the main functional modules, interactive behaviors, and data display methods of the page; Performing image processing and feature extraction on the design draft image through the AI code generation model to obtain visual elements in the design draft image corresponding to the functional requirements of the page, wherein the visual elements include different areas, components, and layouts in the page; Based on the page functional requirements and visual elements, the target code is generated, and the target code includes page structure code, page style code and page interaction code.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the front-end page publishing method according to any one of claims 1 to 5 is implemented.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the front-end page publishing method according to any one of claims 1 to 5 is implemented.

Images