VUE front-end code generation method based on AI and layout component

Abstract

The invention discloses a VUE front-end code generation method based on an AI and a layout component, and the method comprises the steps: employing a Vue-Element UI as a basic front-end frame, and packaging two types of front-end draggable components on the basis: a layout component and an AI component. Wherein the layout component is mainly used for constructing a front-end layout, and developers can quickly construct the front-end page layout by dragging the layout component and selecting corresponding layout options; the AI component is mainly used for interacting with a server AI large model and intelligently and dynamically generating page elements in the component. An AI large model is adopted, specialized and oriented front-end codes are added to generate cue words, front-end codes are generated for front-end AI components, and finally VUE front-end codes are assembled and generated. According to the method, a developer can quickly construct a beautiful and highly personalized front-end interface without deeply exploring bottom-layer technical details, and high-quality delivery of front-end applications is realized while the development speed is ensured.

Description

Technical Field

[0001] The present application belongs to the field of low-code technology, and in particular, relates to a VUE front-end code generation method based on AI and layout components. Background Art

[0002] With the rapid development of Internet technology, the demand for digital transformation of enterprises is becoming increasingly urgent. As the core link between users and services, the efficiency and flexibility of front-end application development directly affect the iteration speed and market competitiveness of products. However, traditional front-end development models often face problems such as long development cycles, complex and diverse technology stacks, and difficulty in compatibility adaptation, which not only increases project costs, but also delays product launch time.

[0003] As a popular front-end framework, Vue.js occupies an important position in the field of web development with its flexible component system and efficient update mechanism. ElementUI, as a mature UI library in the Vue ecosystem, is widely used in interface construction of enterprise-level projects. However, in the face of rapidly changing business needs and growing UI complexity, manually writing high-quality Vue-ElementUI code is still a time-consuming and laborious task, especially in scenarios that require rapid iteration. Summary of the invention

[0004] The purpose of this application is to provide a VUE front-end code generation method based on AI and layout components to solve the problems raised in the above background technology.

[0005] In order to achieve the above purpose, the technical solution of this application is as follows: A VUE front-end code generation method based on AI and layout components, including: Open the client page, which includes a canvas, a layout component, and an AI component; Drag the layout components corresponding to the target business requirements into the canvas, and complete the basic layout by nesting the various layout components; Drag the AI ​​components corresponding to the target business requirements into the preset area in the basic layout and configure the AI ​​components; Submit the configuration information of AI components to the AI ​​big model, and generate the VUE code segment corresponding to each AI component based on the key prompts; Based on the original code of VUE basic components, combined with the configuration information and position affiliation of layout components, generate the basic code corresponding to the basic layout; Combined with the positional subordination of the AI ​​component, the VUE code segment corresponding to the AI ​​component is inserted into the basic code to assemble the target business front-end code.

[0006] Furthermore, the layout components include a container layout component, a multi-column component, a tab component, a title component and a pop-up window component.

[0007] Furthermore, the AI ​​components include form AI components, table AI components and button AI components.

[0008] Furthermore, submitting the AI ​​component configuration information to the AI ​​big model includes: Extract all AI components from the AI ​​component configuration information. Each AI component corresponds to a code generation subtask. All code generation subtasks form an AI component list. Create execution queues based on the size of the AI ​​model deployment; Extract subtasks from the AI ​​component list, put them into the execution queue, and submit them to the AI ​​big model for concurrent execution.

[0009] Furthermore, the configuration information of the layout component includes the layout component name, type and attribute parameters. The attribute parameters are initialized when the layout component is dragged into the canvas, and the attribute parameters match the size of the canvas area.

[0010] Furthermore, the configuration information of the AI ​​component includes the AI ​​component name, type and attribute parameters.

[0011] This application proposes a VUE front-end code generation method based on AI and layout components, using Vue-ElementUI as the basic front-end framework, and encapsulating two major types of front-end draggable components on this basis: layout components and AI components. Among them, the layout component is mainly used to build the front-end layout. Developers can quickly build the front-end page layout by dragging the layout component and selecting the corresponding layout options; the AI ​​component is mainly used to interact with the server-side AI big model, and intelligently and dynamically generate page elements inside the component (the page elements here refer to information items in forms or tables, such as name, ID card, etc.). A general big model is used as the basic AI big model, and it is attached with professional and targeted front-end code generation prompts to allow the model to generate front-end code for the front-end AI component. Through the comprehensive application of the above technologies, VUE front-end code can be efficiently generated.

[0012] This application allows developers to quickly build beautiful and highly personalized front-end interfaces without having to delve into the underlying technical details, thereby ensuring development speed while achieving high-quality delivery of front-end applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] Figure 1 This is a flow chart of the VUE front-end code generation method based on AI and layout components for this application.

[0014] Figure 2 A schematic diagram of a canvas layout according to an embodiment of the present application. DETAILED DESCRIPTION

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

[0016] This application proposes a VUE front-end code generation method based on AI and layout components, which mainly applies the front-end component drag-and-drop technology based on Vue-ElementUI and the intelligent code generation technology based on the Tongyi model. It can allow people who are not very proficient in front-end development to quickly complete the development of front-end static pages through drag-and-drop and natural language description.

[0017] In one embodiment, Figure 1 As shown, a VUE front-end code generation method based on AI and layout components is provided, including: Step S1, opening a client page, wherein the client page includes a canvas, a layout component and an AI component.

[0018] This application integrates the canvas, layout components and AI components in the client, and the page displayed when the client is opened includes a component area and a canvas area.

[0019] The canvas generally refers to a visual editing area where users can design and build interfaces by dragging, dropping, and adjusting various components.

[0020] In the component area, layout components and AI components are pre-set. Layout components and AI components are developed based on Vue-ElementUI, which is a basic front-end component library. In this application, secondary development is carried out based on this basic front-end component library to form various proprietary components.

[0021] Step S2: Drag the layout components corresponding to the target business requirements into the canvas, and complete the basic layout by nesting the various layout components.

[0022] This embodiment is described by taking the target business requirement of realizing an education information collection page as an example. In this step, after selecting the corresponding layout component from the layout component according to the business needs, drag it into the canvas to complete the basic layout of the page.

[0023] The layout components are container layout component (used to build the overall layout of the page, such as the overall layout of the page is left-right, top-bottom, width-to-height ratio, etc.), multi-column component (used to build components with multiple columns, such as two columns, three columns, four columns, etc.), tab component (used to build components with multiple tabs, each tab can be displayed independently), title component (used to build a more eye-catching title), pop-up component (used to build a pop-up window of the page). Each component has its own independent configuration properties, which are described below using the container layout component as an example.

[0024] The container layout component adopts a multi-nested design. While providing multiple layout types (including top-bottom layout, left-right layout, top-middle-bottom layout, etc.), each area of ​​the layout can have secondary nested layout components to complete the secondary layout within the area.

[0025] In order to better describe the relationship between layout components, the following example is described: for example, to configure a functional page with a top-bottom layout, first drag in the container layout component A. Layout component A adopts a top-bottom layout, and the upper and lower areas are called "A above" and "A below" respectively. After the container layout component A is dragged into the canvas, it occupies the entire canvas. In "Above A", drag in a tab component B again. At this time, the tab component B becomes a child layout component of A. Its scope of action is within "Above A", that is, the component is applied in the entire "Above A" area. Similarly, other layout components can still be dragged into the area below A according to business needs. And so on, through the nested configuration of all layout components, the layout of the entire page is completed.

[0026] Compared with traditional layout components, this embodiment makes page layout more flexible and builds more complex pages by dragging and dropping and multiple nesting. Developers can complete basic layout by dragging and drop, and obtain configuration information of layout components, including layout component name, type and corresponding attribute parameters.

[0027] In addition to the layout component type, the layout component also provides attribute parameters such as body height, sidebar width, bottom height, etc. These attribute parameters are initialized when the layout component is dragged into the canvas. Specifically, these attribute parameters match the size of the canvas area, that is, these attribute parameters are calculated based on the height and width of the canvas area.

[0028] For example, after a container layout component A is dragged into the canvas, its height is the height of the canvas, and its width is the width of the canvas. Alternatively, the height and width of the canvas minus the default margin can be used as the height and width of the container layout component A.

[0029] After dragging container layout component C into the area below A, the height and width of container layout component C match the height and width of the area below A.

[0030] On the other hand, the positional dependency relationship of each layout component can be obtained according to the position area of ​​the layout component in the canvas.

[0031] It should be noted that the attribute parameters of the layout component can also be adjusted by the developer through secondary configuration.

[0032] Step S3: Drag the AI ​​component corresponding to the target business requirement into the preset area in the basic layout, and configure the AI ​​component.

[0033] The developer selects an area in the layout component and drags the AI ​​component into it. Through the cooperation of the AI ​​component and the layout component, the page construction of the area is completed. AI components are divided into three categories: form AI components, table AI components, and button AI components, which are used to generate form area codes, table area codes, and button related codes respectively.

[0034] It should be noted that the design pattern of the coordination of layout components and AI components can greatly reduce the difficulty and complexity of page construction, thereby improving the speed of page construction. Although the traditional way of building static pages by dragging and dropping components can also reduce the difficulty of development, in addition to layout components, a large number of page element components (page element components refer to components such as text input boxes, number input boxes, drop-down boxes, etc.) are required to work together to complete the task. This requires developers to be familiar with the usage of these page element components and perform more drag-and-drop configuration functions to complete page construction. If you simply build a page through AI, you need to generate a language description that can describe the details of the page, so that the AI ​​model can generate page code through this language description. But the problem is that the composition of a page is complex and changeable. It is very difficult to describe a page with a complex layout through natural language. Furthermore, even if the description is made, this description will be very large. After being handed over to the AI ​​model to understand, the static page code generated may be quite different from what is expected. Through the coordination of layout components and AI components, developers can complete page layout through flexible layout components (advantage: it can avoid the problem of difficult language description of complex layouts), and complete page element construction through AI components based on concise natural language descriptions (advantage: natural language descriptions are only for page elements of the AI ​​component and can become very concise). Both components complete their respective responsibilities, thereby greatly improving page construction efficiency.

[0035] For better explanation, the following is an example of a personnel education information collection page with a top-down layout. Figure 2As shown: If you want to build a top-down layout of personnel education information collection page (the top is the save button and personnel basic information, and the bottom is a table of education information), you can drag the container layout component A from the layout component library into the canvas. For example, if the layout type is top-down layout, the upper layout area is called A-upper, and the lower part is called A-lower (the height of the A-upper and A-lower areas can be set by the developer according to the width and height attributes), and then drag the container layout component X into the A-upper area again. X belongs to A and is in the A-upper area. X is laid out top-to-bottom again and the corresponding width and height are set. We call the upper area of ​​X X-upper and the lower part of X X-lower. Then drag the button AI component into the X-upper area (referred to as B for this button AI component), and drag the form AI component into the X-lower area (referred to as C for this form AI component). Here, AI components B and C belong to X respectively, and their location information has been located in the X area and recorded on the canvas by the developer's dragging. AI components B and C are used to build the save button (used to trigger the save action) and the personnel basic information form collection information item respectively. Drag a table AI component into the area below A (name this table AI component D). Here, AI component D belongs to the area below A. Its location information has been located in the area below A and recorded on the canvas by the developer. Its main function is to build a table for collecting educational information. After the above dragging, the required main components have been arranged, but the specific content to be displayed in the AI ​​component has not been configured. Next, you need to configure the specific content of the basic information of the personnel and educational information for the dragged AI component.

[0036] Developers fill in the corresponding content description and select the corresponding attribute information in the dragged AI component (the AI ​​component itself has no AI computing capabilities. Its core capability is to collect the developer's configuration information, assemble it into the data format required by the AI ​​big model, and submit it to the big model for code generation. It is the front-end information collection and interaction component of the AI ​​big model) as the basis for the subsequent big model to generate regional codes. Different AI components are different. The following is an example of the form AI component:

[0037] The form AI component includes three input items: display type, content description, and linkage description, which are used to configure various attribute parameters.

[0038] The display type is used to describe the row and column display mode of the form, such as one row and two columns, one row and three columns, one row and four columns, etc. You can select one of them here; Content description is used to explain what page elements the form has. For example, if a form for collecting personnel information needs to collect the personnel's name, ID card, date of birth, gender, home address, etc., then just enter "name, ID card, date of birth, gender (male, female), home address, etc." in the text field input box of the content description. The linkage description is used to explain what kind of linkage effect needs to be applied to the form page elements, such as "After the ID card is entered, the format of the ID card is checked. If it fails, it will be prompted that the ID card format is incorrect."

[0039] After completing the configuration of display type, content description, and linkage description, the page elements of the form corresponding to the form AI component are determined. The subsequent code generation engine will generate specific HTML front-end code based on this configuration information.

[0040] In this embodiment, the configuration information of the AI ​​component includes the name, type and related attribute parameters of the AI ​​component (ie, attribute parameters of the configuration such as display type, content description, linkage description, etc.).

[0041] In addition, the positional affiliation of AI components can also be obtained based on the position area of ​​the AI ​​component in the canvas. Specifically, the developer drags the AI ​​component into one of the areas of the layout component and confirms their position by extracting the coordinate information of these attributes. For better explanation, the following uses the AI ​​form component as an example:

[0042] Assume that the AI ​​form component is at the top of the canvas, and the component is configured with four attributes: name, gender, age, and address. It is displayed in one row and three columns. Then the first row has the three attributes of name, gender, and age, and the second row has the address attribute. When extracting coordinates, the width of the form component in the canvas is evenly divided into three parts (assuming that the width of each part is K, and the height of each attribute is uniformly set to a constant H). Each part stores one of the attribute fields. Then the first row will store the three attributes of name, gender, and age. The coordinate position of the name is { (0,0), (H,0), (0,K), (H,K)}, which represent the positions of the four points { (upper left), (lower left), (upper right), (lower right)} respectively. Similarly, the position of the gender field is calculated as { (0,K), (H,K), (0,2K), (H,2K)}. In this way, the position information of all attributes in the canvas can be obtained.

[0043] Step S4: Submit the configuration information of the AI ​​component to the AI ​​big model, and generate the VUE code segment corresponding to each AI component in combination with the key prompt words.

[0044] This embodiment submits the configuration information of the AI ​​component to the AI ​​big model and inputs key prompt words at the same time, so that the AI ​​big model can generate the VUE code segment corresponding to each AI component according to the input key prompt words and AI component configuration information.

[0045] Key prompts are the bridge for developers to interact with AI big models. By designing appropriate prompts, the AI ​​big models can be guided to produce expected outputs.

[0046] For example: First, the core responsibilities need to be clarified. That is, the core responsibility of the AI ​​model in this task is to generate code. Therefore, the following prompt words are given here: You are very good at VUE code generation. You need to follow the steps and requirements below to generate the corresponding Vue components according to the component generation requirements entered by the user. <template>Part of the code, the generated code starts with <output>< / output> Output according to the requirements.

[0047] Then continue to describe the steps and requirements respectively. In the steps, it is necessary to clarify where to obtain the code generation requirements, what content can be used as a reference for code generation, and tell the AI ​​big model that it needs to combine some user generation requirements, as follows: # Steps - Identify user input component generation requirements, in <input> middle; - Understand the existing reference code content, the documentation is in <ref>< / ref> middle; - Analyze and understand the contents of the reference code, combine it with the user's requirements, and generate it according to the specifications of the reference code.

[0048] Finally, the requirements for code generation are proposed for the AI ​​model. For example, the code version needs to be generated according to the input parameter: {templateType}. The code needs to comply with the specification and be generated completely. Do not use the default code when the code is similar, as follows: # Require - The generated code should conform to the {templateType} technology stack; - Carefully analyze and understand the following user input content, generate it in accordance with the requirements of the code specification, and ensure that the code meets user expectations; - Check the code format to make sure all template tags are paired correctly and complete without omissions.

[0049] Finally, the above key prompts and the configuration information of the AI ​​components are submitted to the AI ​​big model, and the AI ​​big model generates the VUE code segment corresponding to each AI component.

[0050] Step S5: Based on the original code of the VUE basic component, combined with the configuration information and positional affiliation of the layout component, generate the basic code corresponding to the basic layout.

[0051] The basic layout components in Vue-ElementUI all have original codes written by developers in advance. This application only needs to fill in the corresponding parameters in the configuration information into the original code according to the layout component configuration information to convert the layout component configuration information into the corresponding code.

[0052] For example, if the layout component type is a container layout component, the original code of the Container component in Vue-ElementUI is adopted, and the configuration information is automatically filled in to generate the corresponding code. If the layout type is a top-bottom layout, two tags, header and footer, are added to the Container component code, and all the configuration information is used to generate the code in sequence.

[0053] In this embodiment, based on the positions of all the components in the canvas, the positional subordination relationships of all the components can be obtained. Therefore, the codes of each layout component can be assembled in combination with the positional subordination relationships of the layout components in the canvas to form the basic code corresponding to the basic layout.

[0054] Specifically, the layout components are constructed in a multi-nested manner. The outermost layout component is used as the basic carrier, and other inner layout components are included in it in an inclusive manner. For example, for a container layout component A (top-bottom layout), if a layout component B is dragged into the upper area of A and a layout component C is dragged into the lower area of A, then the layout component A includes the layout components B and C. Of course, layout components can continue to be nested in B and C, and the layout component codes are assembled successively according to this nesting relationship.

[0055] Step S6: Combine the positional subordination relationship of the AI components, insert the VUE code segments corresponding to the AI components into the basic code, and assemble to obtain the target business front-end code.

[0056] The code segments corresponding to the AI components are only one part of the complete page and cannot run independently. These code segments need to be assembled with the basic code.

[0057] The AI components included in the layout components can be temporarily replaced with a specific format + component ID first. This ID is unique, and the format is {ID} (referred to as a placeholder); finally, the AI component code segments generated by the AI large model are used to find the corresponding placeholders in the HTML of the layout components according to the AI component ID, and these placeholders are replaced with the AI component code segments to finally complete the assembly of the layout component and AI component codes.

[0058] For better illustration, the following gives an example of key pseudo-code: <Layout component A> <Upper area of A> <Layout component X> <Upper area of X> <AI button component B>

Button 1, Button 2, Button 2

Attribute 1, Attribute 2, Attribute 3

Attribute 4, Attribute 5, ……

Column 1, Column 2, Column 3

Column 4, Column 5, ……

[0059] In a specific embodiment of the present application, a code generation button is provided in the canvas. In addition, a code generation engine is set to cooperate with the AI large model to complete the above steps S4 and S5.

[0060] The code generation button is a function button provided by the canvas. Its function is to submit all the configuration information on the canvas to the code generation engine for code generation. When a developer clicks the code generation button in the canvas, the code generation function is triggered, and this function drives the canvas and the code generation engine to jointly complete the generation of the front-end code.

[0061] Specifically, the code generation button triggers the static front-end code generation JS method createHtml() in the canvas. In this method, first, all layout components are traversed to obtain the layout component configuration information configured by the developer in the canvas, including the layout component name, type, and corresponding attribute information (such as height, width, etc.). Then, for each layout component, the AI component configuration information configured in the layout component is obtained, including the AI component name, type, and related attribute information (such as display type, content description, linkage description, etc.). Finally, all the layout component information and AI component information are aggregated and assembled into a JSON data structure, which is sent to the code generation engine as a code generation task.

[0062] The code generation engine is mainly composed of two parts, namely the task scheduling module and the code generation module. After the code generation engine receives the code generation task, the task scheduling module first decomposes the code generation task, forms multiple code generation subtasks based on the AI ​​component, and performs code generation scheduling, as follows:

[0063] S4.1. Extract all AI components from the AI ​​component configuration information. Each AI component corresponds to a code generation subtask, and all code generation subtasks constitute an AI component list: After the code generation engine receives the page configuration data passed by the canvas, it cuts and extracts the data, first extracts the AI ​​component configuration information (the configuration information here includes AI component type, content description, linkage description, etc.), and establishes an AI component list List[0,...N] for the code subtask to be generated, where N represents the number of AI components in the configuration page.

[0064] S4.2. Create an execution queue according to the scale of AI large model deployment: Create an execution queue ExecuteLM[0,…E], where E is the maximum number of concurrent execution code generation tasks, which can be flexibly configured according to the scale of large model deployment. When each task in ExecuteLM[0,…E] is executed, the code generation work in one of the AI ​​components is processed.

[0065] S4.3、Execute queue tasks: Extract the AI ​​component list information in List[0,…N] and put it into the execution queue ExecuteLM[0,…E] for execution. When N<=E, all are put into execution; when N>E, the code generation engine will execute the current E tasks at the same time, and the remaining List[E+1,…N] tasks will be in the waiting state. Only when a task in ExecuteLM[0,…E] is completed, will the next one be extracted from List[E+1,…N] for code generation.

[0066] Each time a code generation task is executed, the configuration information of a certain AI component will be sent to the AI ​​code generation module to execute the code generation task, and finally the HTML code corresponding to this AI component will be output.

[0067] It is important to note that, in general, code generation through large AI models is a synchronous process. The more code is generated, the longer the waiting time is. The addition of the code generation engine parallelizes the entire code generation process. Through its flexible scheduling, a long code generation process is broken down into multiple small-scale code generation processes based on AI components, which can be executed simultaneously. This approach greatly reduces the waiting time for code generation and improves the user experience of developers.

[0068] The task scheduling module sends an AI component configuration information to the code generation module. The code generation module loads the key prompt words, then parses the configuration information, submits the key prompt words and AI component configuration information to the AI ​​big model, and the AI ​​big model generates code.

[0069] It should be noted that the code generation engine of this application calls the AI ​​big model to perform code generation. The called AI big model is a mature technology disclosed in this field and will not be repeated here.

[0070] This application proposes an efficient VUE front-end code generation method based on AI and layout components. The invention integrates cutting-edge Web technologies and design concepts, provides a highly configurable UI layout component library, and introduces advanced AI big models. Through the combined use of layout components and AI big models, developers can quickly build a beautiful and highly personalized front-end interface without delving into the underlying technical details, thereby ensuring the development speed while achieving high-quality delivery of front-end applications.

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

Claims

1. A VUE front-end code generation method based on AI and layout components, characterized in that: The VUE front-end code generation method based on AI and layout components includes: Open the client page, which includes a canvas, a layout component, and an AI component; Drag the layout components corresponding to the target business requirements into the canvas, and complete the basic layout by nesting the various layout components; Drag the AI ​​components corresponding to the target business requirements into the preset area in the basic layout and configure the AI ​​components; Submit the configuration information of AI components to the AI ​​big model, and generate the VUE code segment corresponding to each AI component based on the key prompts; Based on the original code of VUE basic components, combined with the configuration information and position affiliation of layout components, generate the basic code corresponding to the basic layout; Combined with the positional subordination of the AI ​​component, the VUE code segment corresponding to the AI ​​component is inserted into the basic code to assemble the target business front-end code.

2. According to the VUE front-end code generation method based on AI and layout components according to claim 1, it is characterized in that: The layout components include a container layout component, a multi-column component, a tab component, a title component and a pop-up window component.

3. The VUE front-end code generation method based on AI and layout components according to claim 1 is characterized in that: The AI ​​components include a form AI component, a table AI component and a button AI component.

4. The VUE front-end code generation method based on AI and layout components according to claim 1 is characterized in that: Submitting the AI ​​component configuration information to the AI ​​big model includes: Extract all AI components from the AI ​​component configuration information. Each AI component corresponds to a code generation subtask. All code generation subtasks form an AI component list. Create execution queues based on the size of the AI ​​model deployment; Extract subtasks from the AI ​​component list, put them into the execution queue, and submit them to the AI ​​big model for concurrent execution.

5. The VUE front-end code generation method based on AI and layout components according to claim 1 is characterized in that: The configuration information of the layout component includes the layout component name, type and attribute parameters. The attribute parameters are initialized when the layout component is dragged into the canvas, and the attribute parameters match the size of the canvas area.

6. The VUE front-end code generation method based on AI and layout components according to claim 1 is characterized in that: The configuration information of the AI ​​component includes the name, type and attribute parameters of the AI ​​component.

Images