Home > Article > Technology peripherals > Thoughts and practice on assisted generation of B-end front-end code under large models
During the reconstruction work, code specifications: During the B-end front-end development process, developers will always face the pain point of repeated development. The element modules of many CRUD pages are basically similar, but still It requires manual development and spends time on building simple elements, which reduces the development efficiency of business requirements. At the same time, because the coding styles of different developers are inconsistent, it makes it more expensive for others to get started during iterations.
AI replaces simple brainpower: With the continuous development of large AI models, it already has simple understanding capabilities and can convert language into instructions. General instructions for building basic pages can meet the needs of daily basic page building and improve the efficiency of business development in general scenarios.
B-side page lists, forms, and details all support generation. Links can be roughly divided into the following steps.
Picture
The first step is to tell it what kind of interface to develop. When mentioning this, the first thing we think of is page configuration, which is the current mainstream form of low-code products. Users build pages through a series of graphical configurations, as shown below:
Picture
It has a good efficiency improvement effect on general scenarios (such as CURD pages with relatively simple background management) or specific business scenarios (such as conference venue construction). For relatively complex requirements that require continuous iteration of logic, since configuration is done through graphical operations, the requirements for interactive design are higher, and there is a certain cost to get started. At the same time, as the complexity of the requirements becomes higher and higher, the configuration Form interactions are becoming more and more complex and maintenance costs are getting higher and higher. Therefore, the use of front-end fields in page configuration is relatively restrained.
AI generated code is mostly used in tool function scenarios, but for the needs of specific business scenarios within the company, You may need to consider the following points:
#GPT actually has a very important ability, that is, natural language to instruction, the instruction is Action, for example: Let's assume that a function method is implemented, and the input is natural language. Combined with GPT and the built-in prompt, let it output certain words stably. Can we take further actions by outputting these words? ? This has the following advantages over graphical configuration:
You may have a question here:
Wouldn’t the generated command information also show the illusion of a large model? How to ensure that the command information generated each time is stable and consistent?
Natural language conversion to instructions is feasible for the following reasons:
Let us look at the final information conversion results:
For code assistance, based on the user's demand description, such information can be obtained through PROMPT processing. Provide basic information for code generation.
Picture
Get the codable information corresponding to natural language through the large model (i.e. the above example JSON in), we can convert the code based on this information. For a page with a clear scenario, it can generally be divided into main code template (list, form, description frame) and business components.
Picture
How do we Developing code?
In fact, this step is very similar to developing the code ourselves. After we get the requirements, our brain will extract the key information, that is, the natural language conversion instructions mentioned above, and then we will Create a file in vscode, and then perform the following operations:
First, you must create a code template, and then introduce corresponding heavy-duty components according to the scenario. For example, ProTable is introduced for lists, and ProForm is introduced for forms.
Based on heavy-duty components such as ProTable and adding some properties to it, such as headerTitle, pageSize and other list-related information.
Introduce components according to the demand description. For example, if it is recognized that there is a category selection in the filter item, a new business component will be added in useColumns. If it is recognized that there is an import and export component in the demand description, a new import will be added at the specified position on the page. Export business components.
Get the mock link, add a request layer, and introduce it at the specified location on the page.
The above common code insertion scenarios can be encapsulated into JSON, and then the corresponding code is generated through code templates combined with AST insertion or string template replacement.
Source code assistance mainly helps developers reduce repetitive work and improve coding efficiency. It is a completely different track from low-code page construction. Low-code focuses on building a complete page in a specific scenario, and the number of page functions is enumerable. There are also excellent practices in low-code construction in the industry. The source code auxiliary tool is designed to help users initialize as much business requirement code as possible, and subsequent modification and maintenance is handed over to users at the code level to improve the development efficiency of new pages.
See the specific functional architecture below:
Picture
For the front-end In terms of development, the essence of efficiency improvement is to develop less code. Faster page generation is one aspect. Good component extraction is a very important part. We combined vectors to optimize the introduction links of components. In the initialization template Quickly search and locate components in existing codes.
Picture
Supports quick acquisition of component description content and component introduction paradigm. Enter components with one click, and the component description will be converted into vector data and stored in the vector database.
Picture
After the user enters the description, it will The description is converted into a vector, and the component list is compared based on cosine similarity to find the TOP N components with the highest similarity.
Picture
Users can quickly insert Search the component with the highest matching degree by description and press Enter to insert.
Picture
The above is the detailed content of Thoughts and practice on assisted generation of B-end front-end code under large models. For more information, please follow other related articles on the PHP Chinese website!