Code generation method and device for generating front-end page, equipment and medium

Abstract

The invention discloses a code generation method and device for generating a front-end page, equipment and a medium. According to the specific scheme, a first session message input by a user in a current session interface is received, and the first session message at least comprises a page element layout requirement used for describing a front-end page; pre-generated page layout data and the first session message are processed based on the target model, a first to-be-rendered code corresponding to the first session message is obtained, and the page layout data is related to a layout block dragged by a user in a page editor; in response to an event that the first to-be-rendered code meets a preset requirement, generating a front-end page based on the first to-be-rendered code; wherein the page layout of the front-end page is related to the dragged layout block, and the page element displayed in the layout block is related to the first session message. According to the method and the device, the quality of the front-end code corresponding to the front-end page is ensured, and meanwhile, the generation efficiency of the front-end page is improved.

Description

Technical Field

[0001] This invention relates to the field of data processing technology, and in particular to a method, apparatus, device, and medium for generating code for front-end pages. Background Technology

[0002] With the continuous development of web development technologies and the increasing diversification of user needs, front-end page development is becoming increasingly cumbersome and complex. Traditional front-end page development mainly involves developers manually writing large amounts of code to achieve page layout, styles, and interactive effects. This method not only has a long development cycle but is also prone to errors and has relatively high maintenance costs.

[0003] Currently, with the development of technology, existing front-end development mainly relies on corresponding front-end frameworks and visual front-end development tools. However, when generating front-end pages in the above way, there are often problems such as low quality of the generated front-end code and difficulty in integrating with existing front-end frameworks, resulting in low efficiency and accuracy of front-end page development. Summary of the Invention

[0004] This invention provides a method, apparatus, device, and medium for generating code for front-end pages, which improves the generation efficiency of front-end pages while ensuring the quality of the front-end code corresponding to the front-end pages.

[0005] According to one aspect of the present invention, a code generation method for generating front-end pages is provided, the method comprising:

[0006] Receive the first session message entered by the user in the current session interface, wherein the first session message includes at least a description of the page element layout requirements in the front-end page;

[0007] Based on the target model, the pre-generated page layout data and the first session message are processed to obtain the first code to be rendered corresponding to the first session message. The page layout data is related to the layout block dragged by the user in the page editor.

[0008] In response to an event that the first code to be rendered meets preset requirements, generate a front-end page based on the first code to be rendered;

[0009] The layout of the front-end page is related to the draggable layout blocks, and the page elements displayed in the layout blocks are related to the first session message.

[0010] According to another aspect of the present invention, a code generation apparatus for generating front-end pages is provided, the apparatus comprising:

[0011] The session message receiving module is used to receive the first session message entered by the user in the current session interface. The first session message includes at least a description of the page element layout requirements in the front-end page.

[0012] The module for determining the code to be rendered is used to process the pre-generated page layout data and the first session message based on the target model to obtain the first code to be rendered corresponding to the first session message. The page layout data is related to the layout blocks dragged by the user in the page editor.

[0013] The front-end page determination module is used to generate the front-end page based on the first code to be rendered when the first code to be rendered meets the preset requirements.

[0014] The layout of the front-end page is related to the draggable layout blocks, and the page elements displayed in the layout blocks are related to the first session message.

[0015] According to another aspect of the present invention, an electronic device is provided, the electronic device comprising:

[0016] At least one processor; and

[0017] A memory that is communicatively connected to at least one processor; wherein,

[0018] The memory stores a computer program that can be executed by at least one processor, such that the at least one processor is able to perform the code generation method for generating a front-end page according to any embodiment of the present invention.

[0019] According to another aspect of the present invention, a computer-readable storage medium is provided, the computer-readable storage medium storing computer instructions for causing a processor to execute and implement the code generation method for generating a front-end page according to any embodiment of the present invention.

[0020] According to another aspect of the present invention, a computer program product is provided, comprising a computer program, characterized in that, when executed by a processor, the computer program implements a code generation method for generating a front-end page as described in any embodiment of the present invention.

[0021] The technical solution of this invention provides data support for the generation of accurate code by receiving the first session message input by the user in the current session interface and determining the page layout data. Based on the target model, the first session message and page layout data are processed to determine the first code to be rendered. When the first code to be rendered meets preset requirements, it is used as applicable front-end code, and a front-end page is generated based on it. This invention, by generating the first code to be rendered using the target model, solves the problems of long development cycles, high error rates, and high maintenance costs caused by manually writing code in the prior art, significantly improving front-end development efficiency and reducing manual coding costs. By using the first session message and page layout data as dual-channel input sources for the target model, it solves the problems of uncontrollable output code and poor code stability caused by blindly using large models, ensuring that the generated first code to be rendered conforms to actual specifications and has high maintainability. By using block identifiers to iteratively update part of the code, it improves the efficiency of front-end code generation and saves computing resources. In summary, the embodiments of the present invention solve the problems of high difficulty in front-end code development, complex operation, poor flexibility and stability in the prior art. While ensuring the quality of the front-end code corresponding to the front-end page, it improves the efficiency of front-end code generation, thereby ensuring the efficiency and quality of front-end page development.

[0022] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0024] Figure 1 This is a flowchart of a code generation method for generating front-end pages provided in an embodiment of the present invention;

[0025] Figure 2 Example diagram of a front-end page layout block provided in an embodiment of the present invention;

[0026] Figure 3 This is a flowchart of a code generation method for generating front-end pages provided in an embodiment of the present invention;

[0027] Figure 4 This is an example diagram of the front-end interface based on a preset sandbox environment provided in an embodiment of the present invention;

[0028] Figure 5 This is a schematic diagram of the structure of a code generation device for generating front-end pages provided in an embodiment of the present invention;

[0029] Figure 6 This is a schematic diagram of the structure of an electronic device that implements the code generation method for generating front-end pages according to an embodiment of the present invention. Detailed Implementation

[0030] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.

[0031] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0032] Example 1

[0033] Figure 1 This is a flowchart of a code generation method for generating a front-end page according to Embodiment 1 of the present invention. This embodiment is applicable to generating front-end code based on a target model, and generating a front-end page based on the front-end code when preset requirements are met. This method can be executed by a code generation device for generating a front-end page, which can be implemented in hardware and / or software, and can be configured in electronic devices such as mobile phones, computers, or servers. Figure 1 As shown, the method includes:

[0034] S110. Receive a first session message entered by the user in the current session interface, wherein the first session message includes at least a description of the page element layout requirements in the front-end page.

[0035] The user can be the user currently entering a conversation message. The current conversation interface can be the display interface currently used for entering conversation messages. Optionally, the current conversation interface includes at least an input area for entering conversation messages and a display area for displaying the entered conversation messages.

[0036] The first session message is the message received based on the current session interface. This first session message can be a layout requirement for page elements in the front-end page, described in natural language. It can include layout requirements for each page element of the required front-end page. Page elements can be understood as the basic components of the visual and interactive functionality of the front-end page. For example, page elements can be text, lists, input boxes, dropdown selection boxes, progress bars, etc. Page layout requirements can be used to characterize the page elements that need to be included in the generated front-end page, the purpose of each page element, the positional requirements of each page element, and the corresponding size requirements. For example, the first session message can include layout requirements for controls that need to be included in the generated front-end page, such as dropdown boxes and input boxes, as well as their purpose, size, and position.

[0037] Specifically, it receives the first session message entered by the user in the current session interface, and determines the user's page element layout requirements for each page element in the front-end page based on the first session message.

[0038] In this embodiment of the invention, page layout data can be generated first in the following manner, so as to process the page layout data and the first session message based on the target model. Specifically, during the display of the page editor, in response to a drag operation on at least one layout block, layout information is determined, wherein the layout information includes at least the display position of the layout block on the front-end page, the block identifier, and the area ratio of the layout block on the front-end page; page layout data including at least one layout block is generated based on the layout information, and the page layout data is used as the binding input of the target model.

[0039] The page editor can be understood as a visual tool or development framework that allows users to quickly build the required page layout by dragging and dropping components and adjusting parameters. In this embodiment of the invention, the layout block can be a page area included in the front-end page, determined according to actual needs. For example, see... Figure 2 , Figure 2 This is an example diagram of a front-end page layout block provided in an embodiment of the present invention. Figure 2 It includes three layout blocks: cpvf-0, cpvf-1, and cpvf-2.

[0040] Layout information includes at least the display position of the layout block on the front-end page, the block identifier, and the area ratio of the layout block on the front-end page. The display position indicates the specific location of the layout block on the front-end page. For example, the display position indicates that the layout block cPVF-1 is located in the lower left corner of the front-end page. The block identifier is a unique identifier for the layout block. The area ratio can be understood as the ratio of the area of ​​the layout block to the total area of ​​the front-end page. For example, see [link to previous section]. Figure 2 Taking layout block cPVF-0 as an example, the layout information can include the display position of layout block cPVF-0 on the front-end page and the area ratio of the area of ​​layout block cPVF-0 to the total area of ​​the front-end page.

[0041] Page layout data can be structured code data corresponding to the layout information. For example, page layout data can be JSON data corresponding to the layout information. The target model can be a large language model with code generation capabilities. For example, the target model can be an LLM model.

[0042] Specifically, during the display of the page editor, in response to a drag operation on at least one layout block, layout information corresponding to the at least one dragged layout block is determined. Based on this layout information, page layout data in a preset format is determined, and the page layout data and the first session message are used as input information for the target model.

[0043] For example, users can construct the desired front-end page layout structure through the visual drag-and-drop interface of the page editor. Correspondingly, the page editor can determine the layout information corresponding to the page layout structure and generate page layout data corresponding to the layout information, represented in JSON format. Simultaneously, based on the determined page layout structure, functional description information of the page elements required by each layout block is attached, where the functional description information is in natural language and corresponds to the aforementioned first session message. Based on this, a dual-channel input source of "page layout data + first session message" is formed to input the page layout data and the first session message into the target model. By binding the first session message with the page layout data, data support is provided for the subsequent generation of accurate code.

[0044] S120. Based on the target model, process the pre-generated page layout data and the first session message to obtain the first code to be rendered corresponding to the first session message. The page layout data is related to the layout block dragged by the user in the page editor.

[0045] The target model can be a large language model. The first code to be rendered can be front-end code data that matches the first session message and page layout data.

[0046] Specifically, based on the target model, the pre-generated page layout data and the first session message are processed to determine the specific functional code that matches the first session message and page layout data, and this specific functional code is used as the first code to be rendered.

[0047] It should be noted that, to clearly define the code information corresponding to each layout block in the generated first code to be rendered and to achieve the mapping between code and layout blocks, the first session message can also include a block identifier and corresponding description information. This allows a block identifier, used to uniquely identify the layout block, to be injected into the code data corresponding to the layout block in the first code to be rendered. The format of the corresponding block identifier can be @block-id:Header_v1. Based on this, the mapping between the code data corresponding to each layout block in the first code to be rendered and the actual layout block is achieved, facilitating subsequent targeted updates or adjustments to the code data of each layout block, thereby improving the efficiency of front-end development.

[0048] The target model is a dual-channel model. The first channel is used to process the first session message, and the second channel is used to process the page layout data. The specific method for determining the first code to be rendered based on the target model can be as follows: Analyze and process the page layout data based on the target model to determine the page layout in the front-end page, thereby determining the first code corresponding to each layout block within the page layout; and, based on the block identifiers in the first session message and the page element layout requirements, determine the page elements located in the layout blocks, and the second code corresponding to the page elements; and integrate the first code and the second code based on the front-end page's code editing logic to obtain the first code to be rendered.

[0049] The page layout can be determined based on page layout data, representing the layout information of each layout block in the front-end page that the user expects to generate. The first code can be the front-end code corresponding to at least one layout block of the front-end page. To ensure the target model can clearly define the specific layout requirements of the page elements corresponding to each layout block, the first session message may also include a block identifier. The page elements located within the layout block can be determined based on the block identifier and the page element layout requirements. There can be one or more page elements located within a layout block. The second code can be the front-end code corresponding to at least one page element in each layout block.

[0050] Specifically, the target model analyzes the page layout data to determine the page layout of at least one layout block corresponding to the page layout data, and generates first code based on this page layout. Based on the block identifiers and page element layout requirements contained in the first session message, the page elements located in each layout block and their corresponding layout requirements are determined. Based on the page elements located in each layout block and their corresponding layout requirements, second code corresponding to the page elements is generated. The first and second codes are integrated according to the front-end page's code editing logic to obtain the first code to be rendered.

[0051] It should be noted that the layout requirements for page elements in the first session message may involve the interaction of controls within different layout blocks. For example, if data query information is entered into input control A in layout block 1 and the query control B in layout block 1 is clicked, the corresponding data query results matching the data query information can be displayed in layout block 2. Accordingly, the generated first code to be rendered may also include the corresponding dependencies between layout blocks and between page elements within layout blocks.

[0052] Specifically, the first code to be rendered includes block dependencies between at least one layout block, and element dependencies between at least one page element located in at least one layout block.

[0053] The block dependency and element dependency relationships are used to adjust the corresponding layout blocks and / or page elements in conjunction with the receiving of a session message indicating page information adjustment. Optionally, the target model can establish block dependencies and element dependencies through cross-block tag references (such as @deps:Header_v1). The session message indicating page information adjustment may include a layout adjustment request for at least one layout block and / or a layout adjustment request for at least one page element within the layout block.

[0054] Specifically, the first code to be rendered includes block dependencies between at least one layout block and element dependencies of at least one page element located in at least one layout block. Based on the block dependencies and element dependencies, when a session message indicating page information adjustment is received, the target layout block corresponding to the page information adjustment, at least one page element to be adjusted located in the target layout block, at least one associated layout block with a block dependency relationship with the target layout block, and at least one page element to be adjusted located in the associated layout block are determined. Based on the above information, the corresponding code in the first code to be rendered is adjusted accordingly.

[0055] In other words, when a session message for adjusting page information is received, if the layout block does not have corresponding block dependencies and element dependencies, the target model will only regenerate the code corresponding to the layout block for the layout adjustment requirements of the layout block, and will not adjust the code corresponding to other layout blocks.

[0056] Correspondingly, if the layout block has corresponding block dependencies and element dependencies, when adjusting the session message based on the page information, the code corresponding to the layout block and / or page element that has block dependencies and element dependencies with the layout block and meets the layout adjustment requirements will be adjusted in a coordinated manner.

[0057] For example, a user can input a session message for adjusting page information into the target model according to actual needs. Inputting this session message into the target model allows the model to determine the target layout block A corresponding to the message, and, based on the block dependencies and element dependencies of target layout block A, to determine the associated layout blocks B and C that match the session message. Associated layout blocks B and C have block dependencies on target layout block A. Correspondingly, the page elements to be adjusted within target layout block A and associated layout blocks B and C that match the session message are determined. Based on this information, the corresponding code is adjusted according to the block identifiers in the first code to be rendered that correspond to target layout block A and associated layout blocks B and C. Based on the above block and element dependencies, the corresponding method binding, data transfer, and linkage modification in the first code to be rendered are realized. This solves the problems of wasted computing resources, inability to guarantee generation effect, and impact on development efficiency caused by modifying a certain layout block in the traditional solution.

[0058] S130. In response to the event that the first code to be rendered meets the preset requirements, generate the front-end page based on the first code to be rendered.

[0059] The front-end page layout is related to the draggable layout blocks, and the page elements displayed in the layout blocks are related to the first session message. The preset requirements can be predetermined; the first code to be rendered can be considered as the requirements that the applicable front-end code must meet.

[0060] Specifically, after the target model determines the first code to be rendered, the first code to be rendered can be displayed in the corresponding display interface or the display area in the current session interface. When it is detected that the display duration of the first code to be rendered has reached the preset duration and no session message about code adjustment has been received, it is determined that the first code to be rendered meets the preset requirements. Then, the first code to be rendered can be used as the applicable front-end code. The first code to be rendered is rendered based on dynamic compilation technology to generate the front-end page corresponding to the first code to be rendered.

[0061] It should be noted that the preset requirement can also be that the test front-end page generated based on the first code to be rendered meets the user's actual needs. Optionally, the first code to be rendered generated by the target model is pushed to a sandbox environment for testing to render the first code and generate a test front-end page corresponding to it. If the test front-end page meets the user's actual needs, then the first code to be rendered is determined to meet the preset requirement, and the first code to be rendered can be used as applicable front-end code to generate the front-end page required for actual front-end development.

[0062] The technical solution of this embodiment provides data support for the subsequent generation of accurate code by receiving the first session message input by the user in the current session interface and determining the page layout data. Based on the target model, the first session message and page layout data are processed to determine the first code to be rendered. When the first code to be rendered meets preset requirements, it is used as applicable front-end code, and a front-end page is generated based on it. This embodiment of the invention solves the problems of long development cycles, high error rates, and high maintenance costs caused by manually writing code in the prior art by generating the first code to be rendered using the target model, significantly improving front-end development efficiency and reducing manual coding costs. By using the first session message and page layout data as dual-channel input sources for the target model, the problem of uncontrollable output code and poor code stability caused by blindly using large models is solved, ensuring that the generated first code to be rendered conforms to actual specifications and has high maintainability. By using block identifiers to iteratively update part of the code, both the efficiency of front-end code generation and computing resources are improved. In summary, the embodiments of the present invention solve the problems of high difficulty in front-end code development, complex operation, poor flexibility and stability in the prior art. While ensuring the quality of the front-end code corresponding to the front-end page, it improves the efficiency of front-end code generation, thereby ensuring the efficiency and quality of front-end page development.

[0063] Example 2

[0064] Figure 3This is a flowchart of a code generation method for generating a front-end page according to Embodiment 2 of the present invention. This embodiment is a preferred embodiment of the above embodiments. For specific implementation details, please refer to the technical solution of this embodiment. Technical terms that are the same as or corresponding to those in the above embodiments will not be repeated here. Figure 3 As shown, the method includes:

[0065] S210. Receive a first session message entered by the user in the current session interface, wherein the first session message includes at least a description of the page element layout requirements in the front-end page.

[0066] S220. Based on the target model, process the pre-generated page layout data and the first session message to obtain the first code to be rendered corresponding to the first session message. The page layout data is related to the layout block dragged by the user in the page editor.

[0067] S230. In response to the second session message indicating that the first code to be rendered does not meet the preset requirements, determine the code identifier to be modified based on the second session message and the context information in the session interface; wherein, the code identifier is used to represent the code line or code unit in the first code to be rendered to be modified.

[0068] The second session message can be a message entered by the user in the current session interface to adjust the first code to be rendered. If the second session message is a message adjusting the first code to be rendered, then it is determined that the first code to be rendered does not meet the preset requirements. The second session message includes at least the modified page element layout requirements, the block identifier corresponding to the layout block of the code that needs to be modified, and the modified page layout data.

[0069] The session interface, i.e., the current session interface, can be the interface displaying the first piece of code to be rendered. The context information may include the first piece of code to be rendered, the first session message corresponding to the first piece of code to be rendered, and the page layout data corresponding to the first piece of code to be rendered. The code identifier to be modified can be the line or unit of code within the first piece of code to be rendered that needs to be modified.

[0070] Specifically, if a second session message is received, and the second session message is a session message that adjusts the first code to be rendered, it is determined that the first code to be rendered does not meet the preset requirements. Accordingly, the modified page element layout requirements, corresponding block identifiers, and modified page layout data carried in the second session message are compared with the context information in the session interface to determine the code identifier that matches the block identifier, so as to adjust or modify the first code to be rendered based on the code identifier.

[0071] It should be noted that if the session interface is not the current session interface, that is, if the session interface does not contain context information such as the first code to be rendered, the first session message corresponding to the first code to be rendered, and the page layout data corresponding to the first code to be rendered, then the first code to be rendered, the second session message, and the page layout data corresponding to the second session message can be input into the target model so that the target model can adjust the first code to be rendered based on the input data.

[0072] S240. Adjust the first code to be rendered based on the code identifier and display it as a feedback response to the second session message.

[0073] The feedback response of the second session message is the adjusted first code to be rendered.

[0074] Specifically, based on the code identifier, the code line or unit that needs to be modified in the first code to be rendered is determined. Simultaneously, based on the second session message, the necessary modifications to the code line or unit are implemented, resulting in the adjusted first code to be rendered. This adjusted first code to be rendered is then displayed in the session interface as feedback for the second session message.

[0075] Optionally, the method further includes: in response to receiving an event that the code is compiled to generate a front-end page, sending the last first code to be rendered displayed in the session interface to a preset sandbox environment to compile and process the first code to be rendered to obtain the front-end page.

[0076] The preset sandbox environment can be a development environment used to dynamically compile the first code to be rendered to generate the front-end page. Optionally, the preset sandbox environment can be a lightweight browser sandbox environment. A lightweight browser sandbox environment is a mechanism that provides a secure operating space for web pages or applications through isolation technology. Its core is to achieve efficient security protection with low resource consumption, making it suitable for scenarios such as running untrusted web pages, online code editors, and browser extensions. Since users may make multiple adjustments to the first code to be rendered based on the session interface, the last piece of the first code to be rendered can be used as the front-end code to be compiled and input into the preset sandbox environment.

[0077] Specifically, upon receiving the instruction to compile the code to generate the front-end page, the last piece of code to be rendered displayed in the session interface is sent to a preset sandbox environment. The code to be rendered is then compiled and processed using the dynamic compilation technology corresponding to the preset sandbox environment, thereby achieving real-time execution and rendering of the code to be rendered and obtaining the front-end page.

[0078] For example, the first code to be rendered, generated and displayed from the target model, is pushed to a lightweight browser sandbox environment. The dynamic compilation technology of the lightweight browser sandbox environment compiles and processes the first code, enabling real-time rendering. This allows users to view the corresponding front-end page in a preview interface corresponding to the preset sandbox environment, confirming the UI effects and basic interactive behaviors. See, for example... Figure 4 , Figure 4 The left side is the code editor interface of the preset sandbox environment, used to display or adjust the first code to be rendered, and the right side is the preview interface of the preset sandbox environment, used to synchronously display the front-end page corresponding to the first code to be rendered.

[0079] Correspondingly, if the front-end page displayed in the preview interface corresponding to the preset sandbox environment meets the user's actual needs, then the first code to be rendered is determined to be the applicable front-end code.

[0080] Optionally, if the front-end page displayed in the preview interface corresponding to the preset sandbox environment does not meet the user's actual needs, the session message used to modify the first code to be rendered can be input into the target model so that the target model can readjust the corresponding code line or code unit of the session message used to modify the first code to be rendered in order to obtain the adjusted first code to be rendered.

[0081] Optionally, in response to detecting an adjustment operation on the first code to be rendered in the session interface, the adjustment effect corresponding to the adjustment operation is synchronously displayed on the front-end page.

[0082] In this context, the adjustment operation for the first code to be rendered in the chat interface can be an operation in which the user inputs a chat message to adjust the first code to be rendered.

[0083] Specifically, if the target model receives a session message for adjusting the first code to be rendered, the first code to be rendered is adjusted based on the session message, and the adjusted first rendering code is pushed to a preset sandbox environment. The adjusted effect matching the adjusted first rendering code is displayed on the preview interface corresponding to the preset sandbox environment. That is, the adjusted front-end page is displayed on the preview interface corresponding to the preset sandbox environment.

[0084] Optionally, in conjunction with the above example, the method further includes: if an adjustment operation of the first code to be rendered is detected by the user in the code editor corresponding to the preset sandbox environment, the preview interface corresponding to the preset sandbox environment can synchronously display the modified front-end page.

[0085] The technical solution of this embodiment provides data support for the subsequent generation of accurate code by receiving the first session message input by the user in the current session interface and determining the page layout data. Based on the target model, the first session message and page layout data are processed to determine the first code to be rendered. In response to a second session message indicating that the first code to be rendered does not meet preset requirements, a code identifier to be modified is determined based on the second session message and context information in the session interface. The first code to be rendered is adjusted based on the code identifier and displayed as feedback to the second session message. Based on this, partial or global adjustment and update processing of the first code to be rendered is achieved, making the generated first code to be rendered more in line with the user's actual needs. This embodiment of the invention solves the problems of long development cycles, high error rates, and high maintenance costs caused by manually writing code in the prior art by using the first session message and page layout data as dual-channel input sources for the target model and determining the first code to be rendered based on the target model. It enhances the controllability of the large model, ensures the quality of the generated front-end code, and reduces code maintenance costs. By using block identifiers to iteratively update part of the code, both the efficiency of front-end code generation and computing resources are improved. In summary, the embodiments of the present invention solve the problems of high difficulty in front-end code development, complex operation, poor flexibility and stability in the prior art. While ensuring the quality of the front-end code corresponding to the front-end page, it improves the efficiency of front-end code generation, thereby ensuring the efficiency and quality of front-end page development.

[0086] Example 3

[0087] Figure 5 This is a schematic diagram of a code generation device for generating front-end pages provided in Embodiment 3 of the present invention. Figure 5 As shown, the device includes: a session message receiving module 310, a code to be rendered determination module 320, and a front-end page determination module 330.

[0088] The session message receiving module 310 is used to receive a first session message input by the user in the current session interface, wherein the first session message includes at least a description of the page element layout requirements in the front-end page; the code to be rendered module 320 is used to process the pre-generated page layout data and the first session message based on the target model to obtain a first code to be rendered corresponding to the first session message, wherein the page layout data is related to the layout block dragged by the user in the page editor; the front-end page determining module 330 is used to generate a front-end page based on the first code to be rendered in response to an event that the first code to be rendered meets preset requirements; wherein the page layout of the front-end page is related to the dragged layout block, and the page elements displayed in the layout block are related to the first session message.

[0089] The technical solution of this embodiment provides data support for the subsequent generation of accurate code by receiving the first session message input by the user in the current session interface and determining the page layout data. Based on the target model, the first session message and page layout data are processed to determine the first code to be rendered. When the first code to be rendered meets preset requirements, it is used as applicable front-end code, and a front-end page is generated based on it. This embodiment of the invention solves the problems of long development cycles, high error rates, and high maintenance costs caused by manually writing code in the prior art by generating the first code to be rendered using the target model, significantly improving front-end development efficiency and reducing manual coding costs. By using the first session message and page layout data as dual-channel input sources for the target model, the problem of uncontrollable output code and poor code stability caused by blindly using large models is solved, ensuring that the generated first code to be rendered conforms to actual specifications and has high maintainability. By using block identifiers to iteratively update part of the code, both the efficiency of front-end code generation and computing resources are improved. In summary, the embodiments of the present invention solve the problems of high difficulty in front-end code development, complex operation, poor flexibility and stability in the prior art. While ensuring the quality of the front-end code corresponding to the front-end page, it improves the efficiency of front-end code generation, thereby ensuring the efficiency and quality of front-end page development.

[0090] Optionally, based on the above embodiments, the device further includes: a page layout data determination module, used to determine layout information in response to a drag operation on at least one layout block during the display of the page editor, wherein the layout information includes at least the display position of the layout block on the front-end page, the block identifier, and the area ratio of the layout block on the front-end page; generating page layout data including the at least one layout block based on the layout information, and using the page layout data as the binding input of the target model.

[0091] Optionally, the target model is a dual-channel model. The first channel is used to process the first session message, and the second channel is used to process the page layout data. The code to be rendered determination module is used to analyze and process the page layout data based on the target model to determine the page layout in the front-end page, thereby determining the first code corresponding to each layout block under the page layout; and, based on the block identifier in the first session message and the page element layout requirements, to determine the page element located in the layout block, and the second code corresponding to the page element; and to integrate the first code and the second code based on the code editing logic of the front-end page to obtain the first code to be rendered.

[0092] Optionally, the device includes: a rendering code adjustment module, configured to, in response to a second session message indicating that the first code to be rendered does not meet preset requirements, determine a code identifier to be modified based on the second session message and context information in the session interface; wherein the code identifier is used to characterize the code line or code unit in the first code to be rendered to be modified; adjust the first code to be rendered based on the code identifier, and display it as a feedback response to the second session message.

[0093] Optionally, the first code to be rendered includes at least one block dependency relationship between layout blocks and an element dependency relationship between at least one page element located in the at least one layout block; wherein, the block dependency relationship and the element dependency relationship are used to adjust the corresponding layout blocks and / or page elements in a coordinated manner when a session message for adjusting page information is received.

[0094] Optionally, the device further includes: a code compilation module, configured to, in response to receiving an event that compiles code to generate a front-end page, send the last first code to be rendered displayed in the session interface to a preset sandbox environment to compile and process the first code to be rendered to obtain the front-end page.

[0095] Optionally, the device further includes: an adjustment synchronization display module, used to respond to the detection of an adjustment operation on the first code to be rendered in the session interface, and to synchronously display the adjustment effect corresponding to the adjustment operation on the front-end page.

[0096] The code generation device for generating front-end pages provided in the embodiments of the present invention can execute the code generation method for generating front-end pages provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the method execution.

[0097] Example 4

[0098] Figure 6 This is a schematic diagram of the structure of an electronic device provided in Embodiment 4 of the present invention. The electronic device 10 is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.

[0099] like Figure 6As shown, the electronic device 10 includes at least one processor 11 and a memory, such as a read-only memory (ROM) 12 or a random access memory (RAM) 13, communicatively connected to the at least one processor 11. The memory stores computer programs executable by the at least one processor. The processor 11 can perform various appropriate actions and processes based on the computer program stored in the ROM 12 or loaded from storage unit 18 into the RAM 13. The RAM 13 can also store various programs and data required for the operation of the electronic device 10. The processor 11, ROM 12, and RAM 13 are interconnected via a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0100] Multiple components in electronic device 10 are connected to I / O interface 15, including: input unit 16, such as keyboard, mouse, etc.; output unit 17, such as various types of displays, speakers, etc.; storage unit 18, such as disk, optical disk, etc.; and communication unit 19, such as network card, modem, wireless transceiver, etc. Communication unit 19 allows electronic device 10 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0101] Processor 11 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 11 performs the various methods and processes described above, such as code generation methods for generating front-end pages.

[0102] In some embodiments, the code generation method for generating a front-end page may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed on electronic device 10 via ROM 12 and / or communication unit 19. When the computer program is loaded into RAM 13 and executed by processor 11, one or more steps of the code generation method for generating a front-end page described above may be performed. Alternatively, in other embodiments, processor 11 may be configured to execute the code generation method for generating a front-end page by any other suitable means (e.g., by means of firmware).

[0103] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), system-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0104] Computer programs used to implement the code generation method for generating front-end pages according to the present invention can be written in any combination of one or more programming languages. These computer programs can be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The computer programs can be executed entirely on the machine, partially on the machine, as a standalone software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0105] In particular, according to embodiments of the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of the present invention include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication unit 19, or installed from storage unit 18, or installed from ROM 12. When the computer program is executed by processor 11, it performs the functions defined in the methods of the embodiments of the present invention.

[0106] Example 5

[0107] Embodiment 5 of the present invention also provides a computer-readable storage medium storing computer instructions for causing a processor to execute a code generation method for generating a front-end page, the method comprising:

[0108] Receive a first session message input by the user in the current session interface, wherein the first session message includes at least a description of the page element layout requirements in the front-end page; process the pre-generated page layout data and the first session message based on the target model to obtain a first code to be rendered corresponding to the first session message, wherein the page layout data is related to the layout block dragged by the user in the page editor;

[0109] In response to an event that the first code to be rendered meets preset requirements, a front-end page is generated based on the first code to be rendered; wherein, the page layout of the front-end page is related to the draggable layout block, and the page elements displayed in the layout block are related to the first session message.

[0110] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0111] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0112] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or middleware components (e.g., application servers), or frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0113] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0114] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0115] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A code generation method for generating a front-end page, characterized by, The method comprises: receiving a first session message input by a user in a current session interface, wherein the first session message at least includes a page element layout requirement for describing a layout of a page in a front-end page; processing pre-generated page layout data and the first session message based on a target model to obtain first rendering code corresponding to the first session message, wherein the page layout data is related to a layout block dragged by the user in a page editor; generating the front-end page based on the first rendering code in response to an event that the first rendering code meets preset requirements. The page layout of the front-end page is related to the dragged layout block, and the page elements displayed in the layout block are related to the first session message.

2. The method of claim 1, wherein, The method further comprises: during the display of the page editor, determining layout information in response to a dragging operation on at least one layout block, wherein the layout information at least includes a display position of the layout block in the front-end page, a block identifier, and an area ratio of the layout block in the front-end page; generating page layout data including the at least one layout block based on the layout information, and taking the page layout data as a binding input of the target model.

3. The method of claim 1, wherein, The target model is a double-channel model, a first channel is used for processing the first session message, and a second channel is used for processing the page layout data. The processing of the pre-generated page layout data and the first session message based on the target model to obtain the first rendering code corresponding to the first session message comprises: determining the page layout in the front-end page based on the analysis and processing of the page layout data by the target model, to determine a first code corresponding to each layout block under the page layout; and determining a page element located in the layout block and a second code corresponding to the page element based on the block identifier in the first session message and the page element layout requirement; integrating the first code and the second code based on a code editing logic of the front-end page to obtain the first rendering code.

4. The method of claim 1, wherein, The method further comprises: in response to an event that a second session message does not meet preset requirements of the first rendering code, determining a code identifier to be modified based on the second session message and context information in the session interface, wherein the code identifier is used to represent a code line or a code unit in the first rendering code to be modified; adjusting the first rendering code based on the code identifier, and displaying the first rendering code as a feedback response of the second session message.

5. The method of claim 1, wherein, The first rendering code includes a block dependency relationship between at least one layout block and an element dependency relationship of at least one page element located in the at least one layout block; The block dependency relationship and the element dependency relationship are used to adjust the corresponding layout block and / or page element in response to a session message of page information adjustment.

6. The method according to claim 1 or 4, characterized in that, The method further comprises: In response to receiving an event of compiling the code to generate the front-end page, the last first to-be-rendered code displayed in the session interface is sent to a preset sandbox environment for compiling and processing the first to-be-rendered code to obtain the front-end page.

7. The method of claim 6, wherein, The method further includes: In response to detecting an adjustment operation on the first to-be-rendered code in the session interface, an adjustment effect corresponding to the adjustment operation is synchronously displayed in the front-end page.

8. A code generation apparatus for generating a front-end page, characterized by, Comprise: The session message receiving module is configured to receive a first session message input by a user in a current session interface, wherein the first session message at least includes a page element layout requirement description in a front-end page; The to-be-rendered code determining module is configured to process pre-generated page layout data and the first session message based on a target model to obtain a first to-be-rendered code corresponding to the first session message, wherein the page layout data is related to a layout block dragged by the user in a page editor; The front-end page determining module is configured to generate a front-end page based on the first to-be-rendered code in response to an event that the first to-be-rendered code meets a preset requirement. The page layout of the front-end page is related to the dragged layout block, and the page elements displayed in the layout block are related to the first session message.

9. An electronic device, comprising: The electronic device comprises: At least one processor; and The memory is in communication connection with the at least one processor; wherein The memory stores a computer program that can be executed by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the code generation method for generating a front-end page according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer instructions for enabling the processor to execute the code generation method for generating a front-end page according to any one of claims 1-7 when executed.

Images