Interactive front-end page generation method based on large language model

Abstract

The invention relates to the technical field of large language model and front-end page UI design, in particular to an interactive front-end page generation method based on a large language model, which comprises the following steps: S1, registering a natural language extraction key information tool; s2, storing vector data, constructing a vector database, and realizing conversion from a natural language to a component type and a placement position; s3, carrying out vector matching to obtain keywords corresponding to the description; s4, returning component information; s5, rendering a front-end page; and S6, generating page persistence. The complexity in the front-end page design process is simplified, the skill requirements of developers are reduced, the page design efficiency is improved, the front-end page design and development period is shortened, the development cost is reduced, the user experience in the front-end page design is improved through a natural language man-machine interaction mode, and the user experience is improved. Personalized customization can be realized, and diversified requirements of users can be met.

Description

Technical Field

[0001] The present invention relates to the technical field of large language models and front-end page UI design, and in particular to an interactive front-end page generation method based on a large language model. Background Art

[0002] With the development of computer Internet technology, web pages have been widely used in various marketing scenarios. Traditional web page development usually involves product managers designing products, outputting requirement documents and prototypes, and then UI designers beautifying the product prototypes. Finally, front-end programmers write corresponding codes according to the UI design drawings to develop the product pages. The above process is overly dependent on the participation of developers and designers, not only relying on developers to have high programming skills, but also has a long development cycle, which cannot meet the needs of rapid launch of activities.

[0003] In recent years, large language model technology has made significant progress. Large language models can understand and generate natural language, but there are few applications of large language model technology combined with front-end pages. Based on this background, we can study how to combine the two and generate front-end UI pages through language description to simplify the development process of front-end pages, shorten R&D time, and improve the efficiency of front-end page generation. Summary of the invention

[0004] In order to solve the problems existing in the prior art, the present invention provides an interactive front-end page generation method based on a large language model to solve the problem of low front-end page generation efficiency.

[0005] To solve the above problems, the technical solution of the present invention is as follows: an interactive front-end page generation method based on a large language model, comprising the following steps:

[0006] S1. Registration of key information tools for natural language extraction;

[0007] S2, store vector data, build a vector database, and realize the conversion from natural language to component type and placement;

[0008] S3, vector matching to obtain the keywords corresponding to the description;

[0009] S4. Return component information;

[0010] S5, front-end page rendering;

[0011] S6. Generate page persistence.

[0012] Furthermore, S1 includes: registering a specific tool with the big model through the Function Calling tool calling capability of the big language model to extract the front-end component type and the location information of the component in the natural language input by the user, and on this basis, encapsulating this capability into an HTTP interface through the back-end service and providing it to the front-end interface for use, which can be used to accept the natural language input by the user of the front-end page.

[0013] Furthermore, the vector database in S2 includes a component library and a location information library. The component library includes properties of the component such as style, layout, and content, and the location information library contains location information where the component may be placed.

[0014] Furthermore, the vector database in S2 is built on a local server using Milvus, and the vector data is generated through an Embedding model and then stored in the vector database.

[0015] Furthermore, step (1) in S3 includes translating the natural language into a component name recognized by the front end, and obtaining precise positioning to place the component at the required position. Subsequently, the component can be located according to descriptions such as position and style, and subsequent adjustments can be made.

[0016] Furthermore, step (1) in S3 relies on a text embedding model to convert natural language into vectors, and then performs a similarity query from a vector database by means of vector matching to retrieve relevant content, and then re-ranks the content through a Rerank model to obtain the object with the highest similarity.

[0017] Furthermore, the S4 includes that after the backend service extracts the component type and location information through the Function Calling tool calling capability of the large model, it matches through the vector database, obtains the identifiable keywords agreed with the front end, and returns them to the front end in the form of json.

[0018] Furthermore, S5 includes generating a specific component at a specified location according to the type name and location of the component based on the data returned by the front end through the interface, and performing page rendering to achieve a WYSIWYG human-computer interaction effect.

[0019] Furthermore, the S5 also includes modifying the generated components again.

[0020] Furthermore, S6 includes saving the designed front-end page, and saving the page in a database in the form of a json string, so as to facilitate subsequent opening for display or modification.

[0021] Compared with the prior art, the present invention has the following beneficial effects:

[0022] 1. Simplifies the complexity of the front-end page design process, reduces the developer skill requirements, and improves page design efficiency.

[0023] 2. Shortened the front-end page design and development cycle and reduced development costs.

[0024] 3. Through natural language human-computer interaction, the user experience in front-end page design is improved, personalized customization can be achieved, and the diverse needs of users can be met. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 It is a schematic diagram of the structure of the present invention. DETAILED DESCRIPTION

[0026] like Figure 1 As shown, a method for generating an interactive front-end page based on a large language model includes the following steps:

[0027] S1. Registration of key information tools for natural language extraction

[0028] Through the Function Calling tool calling capability of the large language model, specific tools are registered to the large model. The specific tools include component type extraction tools, component location extraction tools, etc., which are used to extract the front-end component type and component placement location information in the natural language input by the user.

[0029] For example, you can register a tool to the large language model ChatGLM3-6B through the following Python code. This tool is used to obtain the component type and position:

[0030] @register_tool

[0031] defplace_component(

[0032] position:Annotated[str,'The position of the component. Each component needs to be indicated when it is placed',True],

[0033] component_name:Annotated[str,'component name',True],

[0034] )->str:

[0035] ""

[0036] Generate a new component, place or generate a component with a specified name at the specified location

[0037] ""

[0038] On this basis, this capability is encapsulated into an HTTP interface through the back-end service and provided to the front-end interface for use, which can be used to accept natural language input by users of the front-end page.

[0039] S2. Store vector data

[0040] To achieve the conversion from natural language to component type and placement, such as the mapping process from "text box" to "textbox", it is necessary to build a vector database in advance and match the text embedding model with the vector database. This part depends on the vector database implementation. The vector database includes a component library and a location information library. The following contents need to be completed in advance:

[0041] (1) Improve the component library, including component attributes such as style, layout, and content.

[0042] (ii) Improve the location information library to include information on possible locations where components may be placed.

[0043] S3. Vector matching to obtain the keywords corresponding to the description

[0044] This step requires "translating" the natural language into component names recognized by the front end and obtaining precise positioning to place the components at the required locations. Subsequently, the components must be located according to descriptions such as position and style for subsequent adjustments.

[0045] This step requires the use of a text embedding model to convert natural language into vectors. Then, similarity queries are performed from the vector database through vector matching to find relevant content, and the Rerank model is used to re-rank the objects with the highest similarity.

[0046] S4. Return component information

[0047] After the backend service extracts the component type and location information through the Function Calling tool call capability of the big model, it matches it through the vector database, obtains the identifiable keywords agreed with the front end, and returns it to the front end in the form of JSON. For example, when the user enters "place a menu on the left side of the page", the following information can be returned:

[0048] {

[0049] "uid":"790ce0d0-1329-11ef-9861-000c29e2ce5a",

[0050] "position":"left",

[0051] "component_name":"menu"

[0052] }

[0053] The returned information includes the component type name, placement, and the component's unique uid.

[0054] S5, front-end page rendering

[0055] The front end generates specific components at specified locations based on the type name and location of the components through the data returned by the interface, and renders the page to achieve a what-you-see-is-what-you-get human-computer interaction effect.

[0056] In addition, the generated components can be modified again later. For example, when a request is sent to "change the background color of the left menu to black", the following response can be received:

[0057] {

[0058] "uid":"790ce0d0-1329-11ef-9861-000c29e2ce5a",

[0059] "position":"left",

[0060] "component_name":"menu",

[0061] "background_color":"black"

[0062] }

[0063] S6. Generate page persistence

[0064] For the front-end page that has been designed, users can save the results and save the page in the form of JSON string to the database, so that it can be opened again for display or modification later.

[0065] This application is implemented through code and published to the web page. The backend is implemented through Python and the frontend is implemented through the Vue framework. The backend interacts with the locally deployed large model.

[0066] Users can access the system on the browser side and conduct human-computer interaction through natural language. According to user needs, the generation system is used to generate corresponding visual front-end pages to realize user interaction with the page. After the design is completed, the designed page can be saved and accessed again. The implementation method of the present application has good versatility and can be applied to various types of front-end page generation scenarios.

[0067] The above specific implementation methods are only used to illustrate the technical solution of the present invention rather than to limit it. Although the present invention has been described in detail with reference to examples, a person skilled in the art should understand that the technical solution of the present invention can be modified or replaced by equivalents without departing from the scope of the technical solution of the present invention, which should be included in the scope of the claims of the present invention.

Claims

1. A method for generating an interactive front-end page based on a large language model, characterized in that: The following steps are involved: S1. Registration of key information tools for natural language extraction; S2, store vector data, build a vector database, and realize the conversion from natural language to component type and placement; S3, vector matching to obtain the keywords corresponding to the description; S4. Return component information; S5, front-end page rendering; S6. Generate page persistence.

2. The generation method according to claim 1, characterized in that: The S1 includes: calling the Function Calling tool capability of the large language model to register a specific tool with the large model, which is used to extract the front-end component type and the location information of the component in the natural language input by the user. On this basis, this capability is encapsulated into an HTTP interface through the back-end service and provided to the front-end interface for use, which can be used to accept the natural language input by the user of the front-end page.

3. The generation method according to claim 1, characterized in that: The vector database in S2 includes a component library and a location information library. The component library includes properties of the component such as style, layout, content, etc., and the location information library contains location information where the component may be placed.

4. The generation method according to claim 3, characterized in that: The vector database in S2 is built on a local server using Milvus, and the vector data is generated through an Embedding model and then stored in the vector database.

5. The generation method according to claim 1, characterized in that: Step (1) in S3 includes translating natural language into component names recognized by the front end, and obtaining accurate positioning to place the components at the required positions. Subsequently, the components should be located according to descriptions such as position and style, and subsequent adjustments should be made.

6. The generation method according to claim 5, characterized in that: Step (1) in S3 relies on the text embedding model to convert natural language into vectors, and then performs similarity query from the vector database through vector matching to query relevant content, and re-ranks it through the Rerank model to obtain the object with the highest similarity.

7. The generation method according to claim 1, characterized in that: The S4 includes that after the backend service extracts the component type and location information through the Function Calling tool calling capability of the large model, it matches through the vector database, obtains the identifiable keywords agreed with the front end, and returns them to the front end in the form of json.

8. The generation method according to claim 1, characterized in that: The S5 includes generating a specific component at a specified location according to the type name and location of the component based on the data returned by the front end through the interface, and performing page rendering to achieve a WYSIWYG human-computer interaction effect.

9. The generation method according to claim 8, characterized in that: The S5 also includes modifying the generated components again.

10. The generation method according to claim 1, characterized in that: The S6 includes saving the designed front-end page, and saving the page in a database in the form of a json string, so as to facilitate subsequent opening for display or modification.

Images