Front-end code generation method and related apparatus

Abstract

Embodiments of the present application provide a front-end code generation method and a related apparatus, for use in generating an executable front-end project code on the basis of a requirement description input by a user, such that the user runs the front-end project code on a terminal device. The method comprises: acquiring a requirement description, the requirement description being used for representing content presented on a front-end interface; and obtaining a front-end project code by means of an agent on the basis of the requirement description, the front-end project code comprising a user interface (UI) code of the front-end interface and a resource file, and the resource file comprising a configuration item that supports running of the front-end project code.

Description

A front-end code generation method and related apparatus

[0001] This application claims priority to Chinese Patent Application No. 202410797953.9, filed on June 19, 2024, entitled "A Front-End Code Generation Method and Related Apparatus", the entire contents of which are incorporated herein by reference. Technical Field

[0002] This application relates to the field of artificial intelligence, and in particular to a front-end code generation method and related apparatus. Background Technology

[0003] With the widespread adoption of mobile applications, front-end interface code development has become a crucial part of the software development process. Front-end interface code not only determines the user's first impression and interactive experience but also directly impacts the application's functionality and performance optimization. However, front-end interface code development typically requires a significant amount of coding and repetitive work, presenting developers with a substantial workload and numerous challenges.

[0004] Furthermore, with the development of Artificial Intelligence (AI) technology, AI-assisted R&D is gradually changing the way developers work, becoming an important means to improve software development efficiency and quality. AI-assisted technology can be applied to multiple R&D stages such as code generation, code repair, and test case generation, significantly reducing repetitive work for developers and improving development efficiency and code quality. Therefore, AI-assisted R&D technology can be used to automate mobile application front-end development, reducing repetitive work and improving efficiency. Currently, code generation tools based on Large Language Models (LLMs) or agent-based code generation methods are mainly used. Code generation tools, based on generative large language models, can generate front-end code based on user input. By combining natural language processing and code generation technologies, they help users create and adjust the front-end interface more quickly. For example, Microsoft's Copilot product analyzes user input in the editor, automatically generating relevant code snippets and completion suggestions. Users can then debug and modify the code based on the generated snippets and completion suggestions. Agent-based code generation methods can perform tasks such as requirements analysis, code generation, and testing based on the designed agent system, thereby achieving an automated software development process.

[0005] However, code generated by code generation tools typically only covers a portion of the front-end code and cannot generate a complete front-end project structure and necessary resource files. Developers still need to manually write and integrate these resources, performing a significant amount of subsequent programming, verification, and bug fixing. Furthermore, agent-based code often lacks configuration information, resource files, and logic code, requiring developers to manually add and configure the missing parts, and may also necessitate further integration and debugging of the generated code. Existing solutions can only generate partial front-end interface code, and the generated code usually requires manual integration, debugging, or modification. Summary of the Invention

[0006] This application provides a front-end code generation method and related apparatus for generating runnable front-end project code based on user-input requirement descriptions, so that users can run the front-end project code on terminal devices.

[0007] In a first aspect, this application provides a front-end code generation method, which is applied to a server. The method includes: obtaining a user's requirement description, which represents the content to be presented on the front-end interface required by the user; and obtaining front-end project code based on the requirement description through an agent, wherein the front-end project code includes user interface (UI) code and resource files of the front-end interface, and the resource files include configuration items that support the operation of the front-end project code.

[0008] In this embodiment, the user's input requirement description can be analyzed based on the agent to obtain front-end engineering code. The front-end engineering code includes at least UI code and resource files. The resource files include configuration items that support the operation of the front-end engineering code, so that the front-end engineering code can run directly on the terminal device, avoiding the need to manually add resource files, such as configuration information, icons or background images, and improving development efficiency.

[0009] In one possible implementation, the aforementioned process of obtaining front-end engineering code based on the requirement description and through an agent may include: determining the type and number of components based on the requirement description and through a large language model in the agent, wherein the components are used to build the front-end interface; and obtaining the front-end engineering code based on the type and number of components.

[0010] In one possible implementation, the aforementioned resource file may further include multimedia information, which may include one or more of images, icons, audio, or video. The aforementioned process of obtaining front-end project code based on the category and number of components may include: obtaining component code of components from a component library according to the category and number of components; and combining the component code of multiple components with the resource file to obtain front-end project code.

[0011] In this embodiment, the generated front-end project code is at the component level. The component code can be obtained from an existing component library, and the component code can be pre-written and stored by the developer. Compared with the method of generating code at the token level based on a large language model, the accuracy and stability are higher.

[0012] In one possible implementation, the aforementioned determination of the type and number of components based on the requirement description and using a large language model in the agent may include: constructing a first prompt based on the requirement description; and analyzing the first prompt using a large language model to obtain the type and number of components.

[0013] In this embodiment, a prompt can be constructed based on the user's input requirement description, thereby guiding the large language model to obtain the type and number of components, so that the type and number of components for constructing the user interface required by the user can be determined subsequently.

[0014] In one possible implementation, before combining the component code and resource files of multiple components to obtain the front-end project code, the method may further include: constructing a second prompt based on the requirement description, the type of the component, and the state information of the component, wherein the state information includes the text information of the front-end interface; and analyzing the second prompt through a large language model to obtain the multimedia information corresponding to the component.

[0015] In this embodiment of the application, after determining the type of the component, a second prompt can be constructed by combining the requirement description and the state information of the component, so that the multimedia information corresponding to each component can be obtained according to the large language model, such as the icon corresponding to the component.

[0016] Secondly, this application provides a front-end code generation method, which is applied to a plugin. The method includes: sending a requirement description to a server, the requirement description representing the content to be presented on the front-end interface; receiving front-end project code sent by the server, the front-end project code including user interface (UI) code and resource files of the front-end interface, the resource files including configuration items supporting the operation of the front-end project code, and the front-end project code being displayed in the plugin.

[0017] In this embodiment, the plugin can be deployed in an IDE, thereby integrating the front-end project generation function into the IDE. The plugin can obtain the user's input requirement description and send it to the server, allowing the server to generate front-end project code based on the requirement description. The plugin can then display the received front-end project code, enabling users to directly view the generated front-end project code within the IDE, thus improving the user experience.

[0018] In one possible implementation, the aforementioned sending of the user's requirement description to the server may include sending a request to the server, the request carrying the requirement description.

[0019] In one possible implementation, after receiving the front-end project code sent by the server, the method may further include: displaying a preview image of the front-end project code, the preview image representing the front-end interface, the preview image being rendered by a front-end rendering engine based on the front-end project code.

[0020] In this embodiment, the plugin can display a preview image rendered based on the front-end project code, allowing users to directly compare the preview images corresponding to different front-end project codes within the plugin. This facilitates users in checking whether the preview image meets their needs and improves the user experience.

[0021] In one possible implementation, after receiving the front-end project code sent by the server, the method may further include: storing the front-end project code in an IDE, which is used to push the front-end project code to a terminal device for execution to obtain a front-end interface.

[0022] In this embodiment, since the plugin for receiving front-end project code is deployed in the IDE, the front-end project code generation function can be integrated into the IDE. The obtained front-end project code can be saved to the IDE through the plugin, and the front-end project code can be automatically downloaded to the corresponding directory, which improves the convenience of operation.

[0023] Thirdly, this application provides a front-end code generation device, which includes: an acquisition module for acquiring a user's requirement description, the requirement description representing the content to be presented on the front-end interface; and a processing module for obtaining front-end engineering code based on the requirement description through an agent, the front-end engineering code including the user interface (UI) code and resource files of the front-end interface, the resource files including configuration items supporting the operation of the front-end engineering code.

[0024] In one possible implementation, the aforementioned processing module is specifically used to: determine the type and number of components based on the requirement description and through the large language model in the agent, the components being used to build the front-end interface; and obtain the front-end engineering code based on the type and number of components.

[0025] In one possible implementation, the aforementioned resource file further includes multimedia information, which includes one or more of images, icons, audio, or video. The aforementioned processing module is specifically used to: obtain the component code of a component from a component library according to the category and number of components; and combine the component code of multiple components with the resource file to obtain the front-end project code.

[0026] In one possible implementation, the aforementioned processing module is specifically used to: construct a first prompt based on the requirement description; and analyze the first prompt using a large language model to obtain the type and number of components.

[0027] In one possible implementation, before combining the component code of multiple components with resource files to obtain the front-end project code, the device may further include: a construction module, used to construct a second prompt based on the requirement description, the type of the component and the state information of the component, wherein the state information includes the text information of the front-end interface; the aforementioned processing module is further used to analyze the second prompt through a large language model to obtain the multimedia information corresponding to the component.

[0028] Fourthly, this application provides a front-end code generation device, which may include: a sending module for sending a requirement description to a server, the requirement description representing the content to be presented on the front-end interface; and a receiving module for receiving front-end project code sent by the server, the front-end project code including user interface (UI) code and resource files of the front-end interface, the resource files including configuration items supporting the operation of the front-end project code, and the front-end project code being displayed in a plugin.

[0029] In one possible implementation, the aforementioned sending module is specifically used to: send a request to the server, the request carrying a description of the requirements.

[0030] In one possible implementation, after receiving the front-end engineering code sent by the server, the device may further include: a display module for displaying a preview image of the front-end engineering code, the preview image representing the front-end interface, the preview image being rendered by a front-end rendering engine based on the front-end engineering code.

[0031] In one possible implementation, after receiving the front-end project code sent by the server, the device may further include: a storage module for storing the front-end project code in an IDE, the IDE for pushing the front-end project code to a terminal device for execution to obtain a front-end interface.

[0032] Fifthly, this application provides a front-end engineering code generation system, which includes a server and a plugin; the server is used to execute the method described in the first aspect and its corresponding implementation, and the plugin is used to execute the method described in the second aspect and its corresponding implementation.

[0033] In a sixth aspect, this application provides a computer-readable storage medium including computer program instructions that, when executed by a cluster of computing devices, perform the method described in the first or second aspect above.

[0034] In a seventh aspect, this application provides a computer program product containing instructions that, when executed by a cluster of computing devices, cause the cluster of computing devices to perform the method described in the first or second aspect above.

[0035] The technical effects of the third to seventh aspects or any of the possible implementations can be found in the technical effects of the relevant possible implementations of the first or second aspects, and will not be repeated here. Attached Figure Description

[0036] Figure 1 is a schematic diagram of a system architecture provided in this application;

[0037] Figure 2 is an example diagram of an application scenario provided in this application;

[0038] Figure 3 shows the implementation in platform software and server hardware;

[0039] Figure 4 is a flowchart illustrating a front-end code generation method provided in this application;

[0040] Figure 5 is an example of multi-round interaction based on user input descriptions;

[0041] Figure 6 is an example of displaying multiple preview images of the front-end interface in a dialog box;

[0042] Figure 7 shows the code or resource files related to the front-end interface displayed in the dialog box;

[0043] Figure 8 is a flowchart illustrating the process of "one-click saving" of the front-end project code;

[0044] Figure 9 is a schematic diagram of the front-end interface displayed on a terminal device;

[0045] Figure 10 is a structural schematic diagram of a front-end code generation device provided in this application;

[0046] Figure 11 is a schematic diagram of another front-end code generation device provided in this application. Detailed Implementation

[0047] The technical solutions of the embodiments of this application will now be described with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. All other embodiments obtained by those skilled in the art based on the embodiments of this application without creative effort are within the scope of protection of this application.

[0048] To facilitate understanding, some concepts involved in this application will be introduced first.

[0049] 1. Integrated Development Environment (IDE)

[0050] An IDE is an application that provides a program development environment, typically including tools such as a code editor, compiler, debugger, and graphical user interface.

[0051] 2. Components

[0052] Components are independent modules with specific functions in front-end interface programming, which can be reused and combined to form complex applications.

[0053] 3. Large-scale Language Model (LLM)

[0054] LLM is a large-scale natural language processing model based on deep learning technology, capable of understanding and generating natural language text.

[0055] 4. User Interface (UI)

[0056] UI refers to the interface through which users interact and exchange information with the system, including elements such as graphics, text, and buttons.

[0057] 5. Plugins

[0058] A plugin is a software component that adds specific functionality and can be integrated into the main application to provide extended functionality.

[0059] 6. Intelligent Agent

[0060] An agent is a software entity that can autonomously perform specific tasks. It typically possesses a certain degree of intelligence and autonomy, and is able to perceive and act within its environment.

[0061] 7. Front-End Development

[0062] Front-end development mainly involves the development of the user interface part of web pages and applications. It uses technologies such as HTML, CSS and JavaScript to realize the user interface and user interaction, so that users can easily use the program and get interactive feedback.

[0063] 8. Prompt

[0064] Prompt is used to provide specific contextual information to the language model, guiding it to generate the desired inference results or text output.

[0065] With the rapid development of artificial intelligence (AI) technology, AI-assisted R&D is gradually changing the way developers work, becoming an important means to improve software development efficiency and quality. Currently, many companies have launched AI-assisted programming products. These products are proving highly effective in various R&D stages, such as code generation, code repair, and test case generation, significantly reducing repetitive work for developers and improving development efficiency and code quality. For example, automatic code generation tools can generate corresponding code snippets based on natural language descriptions input by developers, automatic repair tools can detect and fix common errors in the code, and test case generation tools can automatically generate test cases with higher coverage, thereby reducing the workload of manual testing.

[0066] Currently, front-end code development typically requires developers to complete a large amount of coding and repetitive work, facing a huge workload and challenges. However, with the development of AI-assisted R&D technology, front-end interface development has ushered in new opportunities and solutions. To achieve automation in mobile application front-end development, code generation tools based on Large Scale Language Models (LLM) and agent-based code generation schemes are mainly used. However, using existing solutions for front-end interface development can only generate partial front-end interface code, lacking resource files required for runtime. Furthermore, current methods based on LLM generate partial front-end interface code at the code token granularity, making it difficult to understand and handle complex logic and interaction scenarios. This results in generated code that cannot fully meet complex requirements. In addition, the generated code usually requires manual integration or modification, significantly reducing code development efficiency.

[0067] Based on this, this application proposes a front-end code generation method. The user inputs a description of their requirements in a plugin's dialog box. The server generates front-end project code based on the large language model (LLM) in the agent, using the user requirement description obtained by the plugin. This front-end project code is granular, consisting of components with UI and logic code. The front-end project code can include UI code, logic code, and resource files. The resource files include configuration items supporting the execution of the UI and / or logic code, such as configuration information, icons, or background images. Users can view multiple front-end project codes and corresponding preview images through the plugin. They can also save the appropriate front-end project code corresponding to a preview image to an IDE. The IDE can then push this front-end project code to the terminal device, allowing it to run and generate the front-end page.

[0068] The following section introduces some possible system architectures provided in this application.

[0069] Referring to Figure 1, a system architecture 100 provided in this application is illustrated. This system architecture 100 includes a client 110 and a server 120. A communication connection exists between the client 110 and the server 120. The client 110 is deployed as a plugin within an integrated development environment (IDE) for user installation and use. Users can send requests to the server and receive responses through the front-end engineering plugin. This solution integrates front-end engineering generation functionality into mainstream IDEs using this plugin as a carrier, providing a user interface and operation interface. The IDE can be deployed on a PC, cloud server, etc., without specific limitations here. The server 120 and the IDE can be deployed on the same device or different devices, without specific limitations here.

[0070] Specifically, the plugin can obtain the user's input description of requirements, display a preview image rendered based on the front-end project code (which can be rendered by the front-end rendering engine), and also display the front-end project code generated by the front-end project generation service and store the front-end project code in the IDE.

[0071] The server 120 can analyze the user's requirement description obtained by the plugin through the agent service to obtain runnable front-end project code. This front-end project code may include UI code, logic code, configuration information, and icon background images.

[0072] The agent service outlines a chain of nodes including requirements analysis, component analysis, and layout analysis. Each stage corresponds to a customized prompt, which is then used by the LLM (Language Model) to complete the task. If the LLM's learning of domain knowledge is insufficient, relevant domain knowledge can be added to the prompt. For example, in the financial domain, if the large language model's learning of relevant financial knowledge is insufficient, relevant basic financial knowledge can be added to the prompt to make it easier for the large language model to understand the meaning of the words in the prompt.

[0073] It is worth noting that the system architecture shown in Figure 1 is only an example and is not intended to limit its specific implementation to this example.

[0074] The system framework described above will be explained in detail below with reference to actual application scenarios. Figure 2 shows an example application scenario provided by an embodiment of this application. The plugin is deployed in an IDE. Developers (users) can first create a blank front-end project in the IDE, and then start developing the front-end interface by activating the plugin. After activating the plugin, users can enter a text description of the program to be developed in the plugin's dialog box. After obtaining a complete requirement description, the plugin can send a request to the server (front-end project generation service). The server will generate multiple results based on the request, including the front-end project code, and send the front-end project code to the plugin. After receiving the front-end project code, the plugin can call the front-end rendering engine to display a preview image corresponding to the front-end project code, allowing users to more intuitively view the front-end interface and choose the solution that best meets their needs. If one of the multiple results meets the user's requirements, the user can select the "one-click activation" function to save the relevant code and resources of the front-end interface to the IDE.

[0075] Referring to Figure 3, which illustrates one implementation of this solution in platform software and server hardware, the main approach is to integrate the front-end project generation function into existing mainstream IDEs by adding relevant components. The front-end project generation entry point can be a plugin, acting as a client to enable interaction between the user and the server. The front-end generator within the front-end generation component can be a server-side component, executing the front-end project generation service and generating front-end project code based on the user's requirements. It is important to understand that Figure 3 is merely an example and is not intended to limit the specific implementation to this example. For instance, the front-end generator can also be deployed on a cloud server; this is not a limitation here.

[0076] The method flow provided in this application will be described below in conjunction with the aforementioned system architecture.

[0077] Referring to Figure 4, this application provides a flowchart of a front-end code generation method, the specific method flow is as follows:

[0078] Step 401: The plugin obtains the user's requirement description;

[0079] In this embodiment, the plugin can be deployed in an integrated development environment (IDE) to integrate the front-end project generation function into the IDE, providing extended functionality for the IDE. Users can create a new front-end project in the IDE or, based on an existing front-end project, activate the plugin to achieve the front-end project code generation function.

[0080] Specifically, users can input their requirements in the plugin's dialog box. This requirement description represents the content of the front-end interface; for example, a user can input "Generate a card for a payment scenario." Subsequently, the requirement understanding service can determine the completeness of the user's input description. If the description is incomplete, the LLM model can guide the user through multiple rounds of dialogue to refine the description, resulting in a more complete understanding that allows for the generation of front-end code that better meets the user's needs. Alternatively, users can choose not to provide further requirements.

[0081] For example, as shown in Figure 5, which illustrates a user inputting a requirement description and completing multiple rounds of interaction, after the user inputs "Give me a card for a payment scenario," the dialog box can prompt the user with "I understand that the card design you need is for a payment scenario, requiring components such as a search box and text theme. Please provide specific component information and display content so that I can generate a card design that meets your requirements." "You can choose to reply YES to generate the card directly, or continue to enter a new description." Following the prompts, the user can continue to input their requirement description: "There should be four sub-function entry points: scan, payment, travel, and customization, as well as a main title 'Hi, hello.'" At this point, the dialog box can continue to display the prompts: "Thank you for your detailed description. We have fully understood your needs. If you wish to further customize, you can provide card size options, including micro cards, small cards, medium cards, or large cards. While this information is not mandatory, providing it will help us better create a card that meets your expectations. We look forward to your further instructions." "You can choose to reply YES to generate the card directly, or continue to enter a new description."

[0082] Step 402: The plugin sends a request to the server;

[0083] After obtaining the user's requirement description, the plugin can send a request to the server, which carries the user's requirement description obtained by the plugin, so that the server can generate front-end project code based on the requirement description.

[0084] Step 403: Based on the requirement description, the server obtains the front-end project code through the intelligent agent;

[0085] After obtaining the user's requirement description, the server can analyze the description based on the Large Language Model (LLM) in the agent to obtain the front-end project code for the user's desired interface. This front-end project code can be directly run on the terminal device to generate the front-end interface, which may include UI code and resource files. The resource files include configuration items that support the execution of the UI code. For example, configuration items may include the size, layout, and default properties of components of the front-end interface. The front-end project code can execute by reading the configuration items in the resource files during runtime.

[0086] Specifically, by analyzing the requirement description based on the large language model in the agent, multiple front-end engineering code snippets can be obtained. These snippets can then be compared with the user-input requirement analysis for similarity. The snippets are then sorted from highest to lowest similarity, and the top N snippets are output. Here, N can be a value that depends on the number of front-end engineering code snippets; for example, N could be 3, meaning the top 3 snippets would be output. The specific value is not limited here.

[0087] The following section details the process of analyzing user input requirements based on an agent to obtain front-end project code.

[0088] Optionally, the server can perform component analysis on the requirements description using a Large Language Model (LLM) to obtain the types and quantities of components needed for the user's front-end interface. Components are the basic units for building the front-end interface. Subsequently, based on the category and quantity of components, the component code can be determined from the component library. The component code and resource files of multiple components are combined to obtain multiple front-end project codes. Component code typically includes UI code and logic code, with the logic code implementing the component's functionality. Furthermore, resource files can include multimedia information, which may include one or more of images, icons, audio, or video. Corresponding images or background images can be matched to components from the multimedia information to enrich the content of the front-end interface.

[0089] In this embodiment, the front-end project code can be obtained at the component level, which may include UI code and logic code. Since the components determined based on the large language model can have their code sourced from a component library, and this component code can be pre-written and stored by developers, generating front-end project code at the component code level improves the accuracy and stability of the code. Furthermore, the generated front-end project code includes not only the component code but also the necessary resource files for its execution. Therefore, this front-end project code can be run directly, avoiding multiple manual modifications and the addition of configuration information, thus improving development efficiency.

[0090] Based on the user's input description of their needs, a first prompt can be constructed. This first prompt can guide the LLM model to generate specific inference results. Subsequently, the LLM model can analyze the first prompt to obtain the types and number of components. The types of components can include basic components (such as buttons, text, etc.), navigation components (such as top navigation bars, tabs, etc.), input components (such as radio buttons, input boxes, forms, etc.), display components (such as labels, etc.), or feedback components (such as pop-ups, etc.).

[0091] Optionally, before combining the component code and resource files of multiple components to obtain the front-end project code, a second prompt can be constructed based on the requirements description, the determined component types, and the component status information. The second prompt is then analyzed using the aforementioned LLM model to obtain the multimedia information corresponding to the component. The component status information includes the text information of the front-end interface, such as the title and advertising slogan.

[0092] Furthermore, after determining the type and number of components, as well as multimedia information, corresponding configuration information can be generated based on the component type and number. For example, the configuration information may include the front-end interface's size, name, location information, whether it is dynamic or continuously updated, and other related configuration information.

[0093] Step 404: The server sends the front-end project code to the plugin;

[0094] The server can typically generate multiple front-end code projects based on the user's input requirements. After generating these multiple front-end code projects, they can be sent to the plugin so that the plugin can display them to the user, making it convenient for the user to view and store the code later.

[0095] Step 405: The plugin displays a preview of the front-end project code;

[0096] After the plugin receives multiple front-end project codes sent by the server, it can call the front-end rendering engine to render these codes, resulting in multiple front-end interface previews. Each front-end project code corresponds to one preview image, and these previews can be displayed in the plugin's dialog box. This allows users to more intuitively check whether the rendered previews meet their requirements. As shown in Figure 6, the dialog box displays three front-end interface previews. Figure 6 demonstrates that users can clearly see the differences between each preview and directly determine whether it meets their needs, ultimately selecting the most satisfactory solution from the multiple previews. Furthermore, as shown in Figure 7, necessary information about the front-end interface project, such as the code and resource files corresponding to each preview image, can also be displayed in either the code display area 1 or code display area 2 of the dialog box.

[0097] Step 406: The plugin saves the front-end project code to the integrated development environment (IDE).

[0098] In this embodiment, a preview image corresponding to the front-end project code can be displayed in a dialog box. Users can click the project shortcut below the preview image to save the corresponding front-end project code to the IDE. As shown in Figure 8, users can click the "Save to Project" shortcut to customize the save path and project name of the front-end project code, and can also view and select the files to save. Furthermore, UI code, logic code, configuration information, and multimedia information from the front-end project code can be saved to their respective directories.

[0099] In this embodiment, the obtained front-end project code can be saved to the IDE through a plugin, and the front-end project code can be automatically synchronized and downloaded to the corresponding directory. Users only need to confirm the directory structure to be synchronized and view the file changes in the directory before and after, avoiding the need for users to manually organize the directory and improving the convenience of operation.

[0100] After saving the front-end project code to the IDE, the IDE can push the front-end project code to the terminal device. After compiling the front-end project code, the compiled front-end project code can be run on the terminal device to obtain the corresponding front-end interface, as shown in Figure 9.

[0101] In this embodiment, the user's input requirement description can be analyzed based on the agent to obtain front-end engineering code. The front-end engineering code includes at least UI code and resource files. The resource files include configuration items that support the operation of the front-end engineering code, so that the front-end engineering code can run directly on the terminal device, avoiding the need to manually add resource files, such as configuration information, icons or background images, and improving development efficiency.

[0102] The method flow provided in this application has been described above. The apparatus provided in this application will now be described based on the aforementioned method flow.

[0103] Referring to Figure 10, a schematic diagram of the structure of a front-end code generation device 1000 provided in this application includes:

[0104] The acquisition module 1001 is used to acquire the user's requirement description, which represents the content to be presented on the front-end interface.

[0105] The processing module 1002 is used to obtain the front-end project code based on the requirement description and through the agent. The front-end project code includes the user interface (UI) code and resource files of the front-end interface. The resource files include configuration items that support the operation of the front-end project code.

[0106] In one possible implementation, the aforementioned processing module 1002 is specifically used to: determine the type and number of components based on the requirement description and through the large language model in the agent, the components being used to build the front-end interface; and obtain the front-end engineering code based on the type and number of components.

[0107] In one possible implementation, the aforementioned resource file further includes multimedia information, which includes one or more of images, icons, audio, or video. The aforementioned processing module 1002 is specifically used to: obtain the component code of a component from a component library according to the category and quantity of the component; and combine the component code of multiple components with the resource file to obtain the front-end project code.

[0108] In one possible implementation, the aforementioned processing module 1002 is specifically used to: construct a first prompt based on the requirement description; and analyze the first prompt using a large language model to obtain the type and number of components.

[0109] In one possible implementation, before combining the component code of multiple components with resource files to obtain the front-end project code, the device may further include: a construction module 1003, used to construct a second prompt based on the requirement description, the type of the component and the status information of the component, wherein the status information includes the text information of the front-end interface; the aforementioned processing module is further used to analyze the second prompt through a large language model to obtain the multimedia information corresponding to the component.

[0110] Referring to Figure 11, a schematic diagram of the structure of a front-end code generation device 1100 provided in this application includes:

[0111] The sending module 1101 is used to send a requirement description to the server. The requirement description is used to represent the content presented on the front-end interface.

[0112] The receiving module 1102 is used to receive the front-end project code sent by the server. The front-end project code includes the user interface (UI) code and resource files of the front-end interface. The resource files include configuration items that support the running of the front-end project code. The front-end project code is displayed in the plugin.

[0113] In one possible implementation, the aforementioned sending module 1101 is specifically used to: send a request to the server, the request carrying a requirement description.

[0114] In one possible implementation, after receiving the front-end engineering code sent by the server, the device may further include: a display module 1103 for displaying a preview image of the front-end engineering code, the preview image representing the front-end interface, the preview image being rendered by the front-end rendering engine based on the front-end engineering code.

[0115] In one possible implementation, after receiving the front-end engineering code sent by the server, the device may further include: a storage module 1104 for storing the front-end engineering code in an IDE, the IDE for pushing the front-end engineering code to a terminal device for running to obtain a front-end interface.

[0116] This application also provides a computer-readable storage medium storing a program that, when run on a computer, causes the computer to perform the steps of the method described in the embodiment shown in FIG4 above.

[0117] This application also provides a computer program product that, when run on a computer, causes the computer to perform the method steps described in the embodiment shown in FIG4 above.

[0118] It should also be noted that the device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. In addition, in the device embodiment drawings provided in this application, the connection relationship between modules indicates that they have a communication connection, which can be implemented as one or more communication buses or signal lines.

[0119] Through the above description of the embodiments, those skilled in the art can clearly understand that, for the sake of convenience and brevity, the specific working process of the systems, devices and units described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0120] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.

[0121] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0122] Furthermore, the functional units in the various embodiments of this application can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit.

[0123] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0124] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in a sequence other than that illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a 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.

[0125] Finally, it should be noted that the above are only specific embodiments of this application, but the protection scope of this application is not limited thereto. Any changes or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the protection scope of this application.

Claims

1. A front-end code generation method, characterized in that, Applied to the server side, the method includes: Obtain the requirement description, which represents the content to be presented on the front-end interface; Based on the aforementioned requirements, the front-end project code is obtained through an intelligent agent. The front-end project code includes the user interface (UI) code and resource files for the front-end interface. The resource files include configuration items that support the operation of the front-end project code.

2. The method according to claim 1, characterized in that, The process of obtaining the front-end engineering code based on the aforementioned requirement description, through an intelligent agent, includes: Based on the aforementioned requirements description, the type and number of components are determined using the large language model in the agent, and these components are used to construct the front-end interface. Based on the type and number of the components, the front-end project code is obtained.

3. The method according to claim 2, characterized in that, The resource file also includes multimedia information, which includes one or more of images, icons, audio, or video. The process of obtaining the front-end project code based on the category and quantity of the components includes: Based on the category and quantity of the components, obtain the component code of the components from the component library; The component code of multiple components is combined with the resource file to obtain the front-end project code.

4. The method according to claim 2 or 3, characterized in that, Based on the aforementioned requirement description, the determination of the type and number of components using the large language model in the agent includes: Based on the described requirements, construct the first prompt; The first prompt is analyzed using the large language model to obtain the type and number of components.

5. The method according to claim 3, characterized in that, Before combining the component code of the multiple components with the resource file to obtain the front-end project code, the method further includes: Based on the requirement description, the type of the component, and the status field of the component, a second prompt is constructed, wherein the status field includes the text information of the front-end interface; The second prompt is analyzed using the large language model to obtain the multimedia information corresponding to the component.

6. A front-end code generation method, characterized in that, Applied to a plugin, the method includes: Send a requirement description to the server, the requirement description being used to represent the content to be presented on the front-end interface; The system receives front-end project code sent by the server. The front-end project code includes user interface (UI) code and resource files for the front-end interface. The resource files include configuration items that support the operation of the front-end project code. The front-end project code is displayed in the plugin.

7. The method according to claim 6, characterized in that, Send a description of the requirements to the server, including: Send a request to the server, the request carrying the requirement description.

8. The method according to claim 6 or 7, characterized in that, After receiving the front-end project code sent by the server, the method further includes: A preview image of the front-end project code is displayed. The preview image represents the front-end interface and is rendered by the front-end rendering engine based on the front-end project code.

9. The method according to any one of claims 6 to 8, characterized in that, After receiving the front-end project code sent by the server, the method further includes: The front-end project code is stored in the IDE, which is used to push the front-end project code to the terminal device for execution to obtain the front-end interface.

10. A front-end engineering code generation system, the front-end engineering code generation system comprising a server and a plugin; The plugin is used to send a requirement description to the server, and the requirement description is used to represent the content presented on the front-end interface; The server is used to obtain front-end engineering code based on the requirement description and through an agent. The front-end engineering code includes user interface (UI) code and resource files for the front-end interface. The resource files include configuration items that support the operation of the front-end engineering code. The server is also used to send the front-end project code to the plugin, and the front-end project code is used to be displayed in the plugin.

11. The system according to claim 10, wherein the server is further configured to perform the method as described in any one of claims 1 to 5, and the plug-in is further configured to perform the method as described in any one of claims 6 to 9.

12. A front-end code generation device, characterized in that, The device includes: The acquisition module is used to acquire the user's requirement description, which represents the content presented on the front-end interface; The processing module is used to obtain the front-end project code based on the requirement description through an agent. The front-end project code includes the user interface (UI) code and resource files of the front-end interface. The resource files include configuration items that support the operation of the front-end project code.

13. The apparatus according to claim 12, characterized in that, The processing module is specifically used for: Based on the aforementioned requirements description, the type and number of components are determined using the large language model in the agent, and these components are used to construct the front-end interface. Based on the type and number of the components, the front-end project code is obtained.

14. The apparatus according to claim 13, characterized in that, The resource file also includes multimedia information, which includes one or more of images, icons, audio, or video. The processing module is specifically used for: Based on the category and quantity of the components, obtain the component code of the components from the component library; The component code of multiple components is combined with the resource file to obtain the front-end project code.

15. The apparatus according to claim 13 or 14, characterized in that, The processing module is specifically used for: Based on the described requirements, construct the first prompt; The first prompt is analyzed using the large language model to obtain the type and number of components.

16. The apparatus according to claim 15, characterized in that, Before combining the component code of the plurality of components with the resource file to obtain the front-end project code, the device further includes: A construction module is used to construct a second prompt based on the requirement description, the type of the component, and the status field of the component, wherein the status field includes the text information of the front-end interface; The processing module is further configured to analyze the second prompt using the large language model to obtain the multimedia information corresponding to the component.

17. A front-end code generation device, characterized in that, The device includes: The sending module is used to send a requirement description to the server, which represents the content to be presented on the front-end interface; The receiving module is used to receive the front-end project code sent by the server. The front-end project code includes the user interface (UI) code and resource files of the front-end interface. The resource files include configuration items that support the operation of the front-end project code. The front-end project code is displayed in the plugin.

18. The apparatus according to claim 17, characterized in that, The sending module is specifically used for: Send a request to the server, the request carrying the requirement description.

19. The apparatus according to claim 17 or 18, characterized in that, After receiving the front-end engineering code sent by the server, the device further includes: The display module is used to display a preview image of the front-end project code. The preview image represents the front-end interface and is rendered by the front-end rendering engine based on the front-end project code.

20. The apparatus according to any one of claims 17 to 19, characterized in that, After receiving the front-end engineering code sent by the server, the device further includes: A storage module is used to store the front-end project code in the IDE, and the IDE is used to push the front-end project code to the terminal device for execution to obtain the front-end interface.

21. A computer-readable storage medium, characterized in that, Includes computer program instructions, which, when executed by a cluster of computing devices, perform the method as described in any one of claims 1 to 5 or 6 to 9.

22. A computer program product containing instructions, characterized in that, When the instruction is executed by the computing device cluster, the computing device cluster performs the method as described in any one of claims 1 to 5 or 6 to 9.

Images