Front-end code generation method and system based on large language model and electronic equipment

Abstract

The invention relates to the technical field of code generation, and provides a front-end code generation method and system based on a large language model and electronic equipment. According to the application, the business demand instruction is structured through the semantic analysis result corresponding to the business demand instruction to obtain the structured cue word, and the component library document carrying the component specification is set in the component-level cue word generator, so that the vectorized component library document is retrieved according to the semantic analysis result to generate the specification cue word, and the user experience is improved. Therefore, the structured cue word and the standard cue word are fused to obtain a fused cue word for code generation, and a front-end code corresponding to the business demand instruction is obtained, so that the large language model can be combined with the standard cue word to automatically adapt to fine-grained code specifications such as a file structure, a coding specification and a component dependence management rule; therefore, the problem that code specifications cannot be introduced into a large language model is solved, the number of times of secondary development and debugging is reduced, and the generation efficiency of front-end codes is improved.

Description

Technical Field

[0001] The present application relates to the field of code generation technology, and in particular to a front-end code generation method, system and electronic device based on a large language model. Background Art

[0002] With the rapid evolution of artificial intelligence (AI) technology, the field of front-end development is undergoing a revolutionary transformation. The groundbreaking development of Large Language Models (LLMs) has opened up a new path for code generation. By converting business requirements into natural language instructions and inputting them into LLMs, target components can be retrieved from the front-end component library and corresponding code generated. This improves development efficiency and reduces the need for specialized programming skills, making it possible to directly generate front-end component code based on natural language descriptions. Driven by this technological trend, automated code generation solutions that combine LLMs with front-end component libraries are becoming a key driver of the efficient and intelligent transformation of front-end development.

[0003] However, existing large language models cannot automatically adapt to fine-grained code specifications such as file structure, coding standards, and component dependency management rules for the technical standards of different enterprise-level projects. It is difficult to dynamically adjust knowledge retrieval and generation strategies based on specific business scenarios, technical constraints, and user contexts. As a result, the generated front-end code does not match the requirements of specific scenarios, resulting in problems such as chaotic file structure, inconsistent coding style, and insufficient component compatibility. A lot of effort is required for secondary development and debugging, which affects the efficiency of front-end code generation. Summary of the Invention

[0004] In order to provide a basic understanding of some aspects of the disclosed embodiments, a brief summary is given below. The summary is not an extensive review, nor is it intended to identify key / critical elements or delineate the scope of protection of these embodiments, but rather serves as a prelude to the detailed description that follows.

[0005] In view of the shortcomings of the prior art described above, the present application provides a front-end code generation method, system and electronic device based on a large language model to solve the technical problem of low front-end code generation efficiency.

[0006] The present application provides a front-end code generation method based on a large language model, which is applied to a large language model. The method includes: pre-associating a front-end component library and a component-level prompt word generator, wherein the front-end component library includes multiple front-end components, and the component-level prompt word generator is provided with a component library document corresponding to the front-end component library, and the component library document carries the component specifications corresponding to the front-end components; in response to a business requirement instruction, performing semantic parsing on the business requirement instruction to obtain a semantic parsing result, and structuring the business requirement instruction according to the semantic parsing result to obtain a structured prompt word; using the component-level prompt word generator, vectorizing the component library document, and searching the vectorized component library document according to the semantic parsing result to generate a standard prompt word according to the retrieved document fragment; fusing the structured prompt word and the standard prompt word to obtain a fused prompt word, and based on the front-end component library, performing code generation according to the fused prompt word to obtain a front-end code corresponding to the business requirement instruction.

[0007] In one embodiment of the present application, the business requirement instruction is semantically parsed to obtain a semantic parsing result, and the business requirement instruction is structured according to the semantic parsing result to obtain structured prompt words, including: if the business requirement instruction includes text format data, text semantic extraction is performed on the text format data to obtain text semantics; if the business requirement instruction includes image format data, image semantic extraction is performed on the image format data to obtain visual elements; a semantic parsing result is generated according to the text semantics and / or the visual elements, wherein the semantic parsing result includes business requirements and / or design specifications; the semantic parsing result and / or target component are structured according to a preset data structure to obtain structured prompt words, wherein the target component is retrieved from the front-end component library according to the semantic parsing result.

[0008] In one embodiment of the present application, the target component is retrieved in the following manner: the front-end component library is composed of an open source component library and / or a private database; the open source component library is searched according to the semantic parsing result to obtain a first component, and the private database is searched according to the semantic parsing result to obtain a second component; if the front-end component corresponding to the semantic parsing result only contains the first component or the second component, the first component or the second component is used as the target component; if the front-end component corresponding to the semantic parsing result contains both the first component and the second component, the open source parameters corresponding to the first component are evaluated using a large language model to determine quality-related parameters from the open source parameters based on the evaluation results; the quality-related parameters are calculated based on a preset correspondence between the quality-related parameters and the first priority to obtain a first priority corresponding to the first component; at the same time, the component library document corresponding to the second component is retrieved using the large language model to obtain a document description corresponding to the second component; the business requirement instruction is matched according to the document description to obtain a matching similarity, and the second priority corresponding to the second component is determined based on the matching similarity; the target component is determined from the first component and the second component based on the comparison result between the first priority and the second priority.

[0009] In one embodiment of the present application, the component-level prompt word generator uses a code generation tool to configure the code specifications corresponding to the front-end component, wherein the code specifications corresponding to the front-end component include at least one of the following: a component library configuration field, used to carry the open source database corresponding to the front-end component; a component library document configuration field, used to carry the component library document of the private database corresponding to the front-end component; a component standardization field, used to carry the standardization information corresponding to the front-end component, wherein the standardization information includes at least one of component style, component type, component dependency object, component environment information, and component prompt information; a code configuration field, used to carry the code generation information of the target code corresponding to the front-end component, wherein the code generation information includes code generation specifications and / or code file structure.

[0010] In one embodiment of the present application, the component-level prompt word generator is used to vectorize the component library document, and the vectorized component library document is retrieved according to the semantic parsing result to generate standard prompt words according to the retrieved document fragments, including: if the front-end component corresponding to the component-level prompt word generator is located in an open source database, the component-level prompt word generator is used to generate code according to the code specification corresponding to the front-end component to obtain standard prompt words; if the front-end component corresponding to the component-level prompt word generator is located in a private database, the component-level prompt word generator is used to vectorize the component library document, and the vectorized component library document is retrieved according to the semantic parsing result to generate standard prompt words according to the retrieved document fragments.

[0011] In one embodiment of the present application, the large language model includes a first processing node and a second processing node, wherein the first processing node and the second processing node are both obtained by node orchestration using a workflow orchestration tool; the node input parameters of the first processing node include business requirement instructions, and the node output parameters of the first processing node include structured prompt words; the node input parameters of the second processing node include structured prompt words, and the node output parameters of the second processing node include front-end code.

[0012] In one embodiment of the present application, the method also includes: inputting the front-end code into a user interaction interface, wherein the user interaction interface includes a code display page and an instruction input page; the code display page is used to display the front-end code; the instruction input page is used to receive user modification instructions, modify the component-level prompt word generator according to the user modification instructions, and generate new front-end code according to the modified component-level prompt word generator.

[0013] In one embodiment of the present application, the user interaction interface also includes a front-end preview page; the front-end preview page is used to display the front-end rendering results corresponding to the front-end code, wherein the front-end rendering results are used to build a sandbox environment based on the component environment information and / or component dependency objects corresponding to the front-end code, and use the sandbox environment to render the front-end code.

[0014] The present application provides a front-end code generation system based on a large language model, which is applied to a large language model. The system includes: an association module for associating a front-end component library and a component-level prompt word generator, wherein the front-end component library includes multiple front-end components, and the component-level prompt word generator is provided with a component library document corresponding to the front-end component library, and the component library document carries the component specifications corresponding to the front-end components; a first prompt word module for responding to a business requirement instruction, performing semantic parsing on the business requirement instruction to obtain a semantic parsing result, and structuring the business requirement instruction based on the semantic parsing result to obtain a structured prompt word; a second prompt word module for using the component-level prompt word generator to vectorize the component library document, and searching the vectorized component library document based on the semantic parsing result to generate a standard prompt word based on the retrieved document fragment; and a generation module for fusing the structured prompt word with the standard prompt word to obtain a fused prompt word, and performing code generation based on the front-end component library and the fused prompt word to obtain a front-end code corresponding to the business requirement instruction.

[0015] The present application provides an electronic device, comprising: a processor and a memory; the memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the electronic device performs the above method.

[0016] Beneficial effects of this application: The business requirement instructions are structured through the semantic parsing results corresponding to the business requirement instructions to obtain structured prompt words, and a component library document carrying component specifications is set in the component-level prompt word generator to retrieve the vectorized component library document according to the semantic parsing results to generate standard prompt words, and then code is generated based on the fusion prompt words obtained by fusing the structured prompt words and the standard prompt words to obtain the front-end code corresponding to the business requirement instructions. In this way, on the one hand, structuring the business requirement instructions according to the semantic parsing results helps the large language model understand the business requirements. On the other hand, using the component-level prompt word generator to generate standard prompt words corresponding to the semantic parsing results, the large language model can automatically adapt to fine-grained code specifications such as file structure, coding specifications, and component dependency management rules in combination with standard prompt words, thereby overcoming the problem that the large language model cannot introduce code specifications, thereby reducing the number of secondary development and debugging, and improving the efficiency of front-end code generation. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The accompanying drawings are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present application, and together with the specification, are used to explain the principles of the present application. Obviously, the drawings described below are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be derived from these drawings without inventive effort.

[0018] In the attached figure: Figure 1 This is a flow chart of a front-end code generation method based on a large language model in an embodiment of the present application; Figure 2 This is a schematic diagram of the structure of a code specification configuration page in an embodiment of the present application; Figure 3 This is a flowchart of a front-end code acquisition method based on a workflow engine in an embodiment of the present application; Figure 4 This is a schematic diagram of the interface structure of a user interaction interface in an embodiment of the present application; Figure 5 This is a flow chart of another front-end code generation method based on a large language model in an embodiment of the present application; Figure 6 This is a structural diagram of a front-end code generation system based on a large language model in an embodiment of the present application; Figure 7 It is a structural diagram of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0019] The following describes the embodiments of the present application through specific examples. Those skilled in the art can easily understand other advantages and functions of the present application from the contents disclosed in this specification. The present application can also be implemented or applied through other different specific embodiments. The details in this specification can also be modified or changed based on different viewpoints and applications without departing from the spirit of the present application. The following embodiments and features in the embodiments can be combined with each other without conflict.

[0020] It should be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present application. The drawings only show components related to the present application and are not drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component can be changed at will, and the component layout type may also be more complicated.

[0021] In the following description, a large number of details are discussed to provide a more thorough explanation of the embodiments of the present application. However, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details. In other embodiments, well-known structures and devices are shown in the form of block diagrams rather than in detail to avoid making the embodiments of the present application difficult to understand.

[0022] The terms "first," "second," and the like in the specification and claims of this application and the accompanying drawings are used to distinguish similar items and are not necessarily used to describe a particular order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate for the embodiments of the present application described herein. In addition, the terms "including," "having," and any variations thereof are intended to cover non-exclusive inclusions.

[0023] Unless otherwise stated, the term "plurality" means two or more.

[0024] In this application, the character " / " indicates that the preceding and following objects are in an "or" relationship. For example, A / B means: A or B.

[0025] The term "and / or" describes an association between objects, indicating that three relationships can exist. For example, A and / or B means: A or B, or A and B.

[0026] Combine Figure 1 As shown, the present application provides a front-end code generation method based on a large language model, characterized in that, when applied to a large language model, the method includes: Step S101, pre-associate the front-end component library and the component-level prompt word generator; Among them, the front-end component library includes multiple front-end components; Among them, the component-level prompt word generator is provided with a component library document corresponding to the front-end component library, and the component library document carries the component specifications corresponding to the front-end components; Step S102, in response to the business requirement instruction, performing semantic analysis on the business requirement instruction to obtain a semantic analysis result, and structuring the business requirement instruction according to the semantic analysis result to obtain a structured prompt word; Step S103: vectorize the component library document using a component-level prompt word generator, and search the vectorized component library document based on the semantic analysis result to generate standard prompt words based on the retrieved document fragments; Step S104 , the structured prompt words and the standard prompt words are integrated to obtain integrated prompt words, and based on the front-end component library, code is generated according to the integrated prompt words to obtain front-end code corresponding to the business requirement instruction.

[0027] The front-end code generation method based on the large language model provided by the present application is adopted. The business requirement instructions are structured through the semantic parsing results corresponding to the business requirement instructions to obtain structured prompt words, and a component library document carrying component specifications is set in the component-level prompt word generator to retrieve the vectorized component library document according to the semantic parsing results to generate standard prompt words, thereby generating code based on the fusion prompt words obtained by fusing the structured prompt words and the standard prompt words to obtain the front-end code corresponding to the business requirement instructions. In this way, on the one hand, structuring the business requirement instructions according to the semantic parsing results helps the large language model understand the business requirements. On the other hand, using the component-level prompt word generator to generate standard prompt words corresponding to the semantic parsing results, the large language model can automatically adapt to fine-grained code specifications such as file structure, coding specifications, and component dependency management rules in combination with the standard prompt words, thereby overcoming the problem that the large language model cannot introduce code specifications, thereby reducing the number of secondary development and debugging, and improving the generation efficiency of front-end code.

[0028] Optionally, the business requirement instruction is semantically parsed to obtain a semantic parsing result, and the business requirement instruction is structured according to the semantic parsing result to obtain structured prompt words, including: if the business requirement instruction includes text format data, text semantic extraction is performed on the text format data to obtain text semantics; if the business requirement instruction includes image format data, image semantic extraction is performed on the image format data to obtain visual elements; a semantic parsing result is generated according to the text semantics and / or visual elements, wherein the semantic parsing result includes business requirements and / or design specifications; the semantic parsing result and / or target component are structured according to a preset data structure to obtain structured prompt words, wherein the target component is retrieved from the front-end component library according to the semantic parsing result.

[0029] In some embodiments, a user inputs a business requirement instruction, including text format data and image format data; a large language model performs multimodal semantic analysis on the text format data and image format data to extract text semantics and visual elements; a semantic parsing result is determined based on the text semantics and / or visual elements to retrieve the target component that the business requirement depends on; the target component and / or the semantic parsing result are structured using the XML (Extensible Markup Language) format to obtain a component design solution.

[0030] In some embodiments, the text format data includes "generate a blue button component adapted for mobile terminals, using Tailwind CSS style and compatible with React 18.2"; the large language model performs semantic parsing to obtain a semantic parsing result including {component type: button; style: Tailwind CSS; dependency: React@18.2; environment: mobile terminal; source type: private}.

[0031] Optionally, the target component is retrieved in the following manner: the front-end component library consists of an open source component library and / or a private database; the open source component library is searched according to the semantic parsing result to obtain the first component, and the private database is searched according to the semantic parsing result to obtain the second component; if the front-end component corresponding to the semantic parsing result only contains the first component or the second component, the first component or the second component is used as the target component; if the front-end component corresponding to the semantic parsing result contains both the first component and the second component, the open source parameters corresponding to the first component are evaluated using a large language model to determine quality-related parameters from the open source parameters based on the evaluation results; the quality-related parameters are calculated based on a preset correspondence between the quality-related parameters and the first priority to obtain the first priority corresponding to the first component; at the same time, the component library document corresponding to the second component is retrieved using the large language model to obtain a document description corresponding to the second component; the business requirement instructions are matched according to the document description to obtain a matching similarity to determine a second priority corresponding to the second component based on the matching similarity; the target component is determined from the first component and the second component based on the comparison result between the first priority and the second priority.

[0032] In some embodiments, the semantic parsing result is a form input component compatible with React 18; by searching the open source component library, an Input component that meets the semantic parsing result is obtained, and the Input component is used as the first component; by searching the private component library through search enhancement generation technology, a custom component @company / form-input that meets the semantic parsing result is obtained, and the component is used as the second component; based on the above content, the front-end component corresponding to the semantic parsing result includes both the first component and the second component.

[0033] In some embodiments, open source parameters of a first component are obtained, wherein the open source parameters include the number of component retrievals, the number of component uses, the vulnerability risk score, etc.; a large language model is used to evaluate the open source parameters corresponding to the first component to obtain the correlation of each open source parameter to the component quality, and the number of component uses and the vulnerability risk score are determined as quality-related parameters in descending order of the correlation with the component quality; a weighted average algorithm is used to calculate the number of component uses and the vulnerability risk score to obtain a first priority, wherein the number of component uses and the first priority are positively correlated, and the vulnerability risk score and the first priority are negatively correlated.

[0034] In some embodiments, the business requirement instruction includes "dark theme, design system V3.0, button size 24px"; according to the business requirement instruction, a second component is retrieved from the private component library; the component library document corresponding to the second component is retrieved using a large language model to obtain a document description corresponding to the second component, for example, the document description includes "@company / dark-button is based on the design system V3.0 specification, the default size is 24px, contains #1A1A1A dark background and #FFFFFF highlight state, adapted to the dark mode switching logic"; using the cosine similarity algorithm, the matching similarity between the business requirement instruction and the document description is calculated, and the matching similarity is 0.92; by calculating the matching similarity, the second priority corresponding to the second component is obtained.

[0035] In some embodiments, the first priority and the second priority are normalized according to their respective corresponding priority extremes, and the normalized first priority and the second priority are compared to obtain a comparison result.

[0036] Optionally, the component-level prompt word generator uses a code generation tool to configure the code specifications corresponding to the front-end component, wherein the code specifications corresponding to the front-end component include at least one of the following: a component library configuration field, used to carry the open source database corresponding to the front-end component; a component library document configuration field, used to carry the component library document of the private database corresponding to the front-end component; a component standardization field, used to carry the standardized information corresponding to the front-end component, wherein the standardized information includes at least one of component style, component type, component dependency object, component environment information, and component prompt information; a code configuration field, used to carry the code generation information of the target code corresponding to the front-end component, wherein the code generation information includes code generation specifications and / or code file structure.

[0037] In some embodiments, the code writing tool includes a CodeGen rule engine, wherein the CodeGen rule engine has a technical system for automatically generating source code through rule-driven, model training or interactive configuration; the page structure of the code specification configuration page is as follows: Figure 2 As shown, by configuring the code specifications corresponding to the front-end components in the CodeGen rule engine, a component-level prompt word generator for generating standard prompt words is formed; the code specifications corresponding to the front-end components support multiple configuration items and custom extension items, including types, reference libraries, special prompts, technology stacks, code generation specifications, models, definition scenarios, private library documents, etc.

[0038] In this way, a component-level prompt word generator for generating standard prompt words is formed using code writing tools, which can accurately and flexibly convert the code specifications of front-end components into prompt words for large models, allowing fine-grained control of code structure, style, dependencies, etc., to ensure that the generated code meets enterprise-level standards.

[0039] In some embodiments, the component library configuration field is used to implement retrieval of open source libraries such as NPM (Node Package Manager, Node.js standard package manager) and GitHub.

[0040] In some embodiments, the component library configuration field carries "npm:react-icons@4.10", indicating that the open source database corresponding to the front-end component is the icon component library React Icons located in the NPM open source database and whose version is 4.10.

[0041] In some embodiments, the component library document configuration field carries "gitlab-internal:company / frontend-components-docs", indicating that the component library document of the private database corresponding to the front-end component is the component library document in the enterprise's private GitLab repository.

[0042] In some embodiments, the component library document configuration field carries "confluence-space: COMPONENT-LIBRARY", indicating that the component library document of the private database corresponding to the front-end component points to the private component design document stored in the enterprise Confluence platform.

[0043] In some embodiments, the component standardization field is used to implement component standardization based on configuration standardization information.

[0044] In some embodiments, the component standardization field carries "style:tailwind=bg-blue-500hover:bg-blue-700", indicating that the front-end component uses the Tailwind CSS style standard to define the background color of the button component.

[0045] In some embodiments, the component standardized field carries "type:form-input&dependencies=react@18.2,antd@5.0", indicating that the component dependency objects corresponding to the front-end component include React18.2 and AntDesign5.0.

[0046] In some embodiments, the component standardized field carries "env:browser-only&prompt information=This component only supports the Web environment", marking the component environment information and component prompt information corresponding to the front-end component.

[0047] In some embodiments, the code configuration field is combined with tool chains such as ESLint and TypeScript to ensure consistency of coding standards.

[0048] In some embodiments, the code configuration field carries "eslint=airbnb-base", thereby forcing the front-end code to follow the Airbnb ESLint specification.

[0049] In some embodiments, the code configuration field carries "output-path=src / components / Button / index.tsx", indicating that the front-end code is generated to the src / components directory of the project and the files are split by modules.

[0050] Optionally, a component-level prompt word generator is used to vectorize component library documents, and the vectorized component library documents are retrieved according to the semantic parsing results to generate standard prompt words based on the retrieved document fragments, including: if the front-end component corresponding to the component-level prompt word generator is located in an open source database, the component-level prompt word generator is used to generate code according to the code specifications corresponding to the front-end component to obtain standard prompt words; if the front-end component corresponding to the component-level prompt word generator is located in a private database, the component-level prompt word generator is used to vectorize component library documents, and the vectorized component library documents are retrieved according to the semantic parsing results to generate standard prompt words based on the retrieved document fragments.

[0051] In some embodiments, if the front-end component corresponding to the component-level prompt word generator is located in a private database, the component library document is split into semantic blocks of 100-300 words according to different data contents; each semantic block is converted into a multidimensional vector through a text encoder, and metadata is configured for the multidimensional vector; the multidimensional vector and metadata are stored in a vector database, and the vector index and similarity threshold are set; retrieval is performed based on the semantic parsing results, and standard prompt words are generated based on the retrieved document fragments.

[0052] Optionally, the large language model includes a first processing node and a second processing node, wherein the first processing node and the second processing node are both obtained by node orchestration using a workflow orchestration tool; the node input parameters of the first processing node include business requirement instructions, and the node output parameters of the first processing node include structured prompt words; the node input parameters of the second processing node include structured prompt words, and the node output parameters of the second processing node include front-end code.

[0053] In some embodiments, a PIPE-style workflow orchestration tool is used to orchestrate the workflow engine. The PIPE-style workflow is a flexible process management architecture based on the pipeline model. Its core idea is to decompose complex tasks into multiple configurable and extensible "processing nodes", and form custom workflows that adapt to different scenarios by dynamically connecting these nodes in series or in parallel.

[0054] In some embodiments, the first processing node includes performing semantic parsing on the business requirement instruction to obtain a semantic parsing result, and structuring the business requirement instruction according to the semantic parsing result to obtain a structured prompt word.

[0055] In some embodiments, the second processing node includes using a component-level prompt word generator to generate standard prompt words; fusing the structured prompt words and the standard prompt words to obtain fused prompt words, and generating code according to the fused prompt words based on the front-end component library to obtain front-end code corresponding to the business requirement instructions.

[0056] Combine Figure 3 As shown, this application provides a front-end code acquisition method based on a workflow engine, including: Step S301, obtaining a business requirement instruction; The business requirement instruction includes text format data and / or image format data; Step S302: inputting the business requirement instruction into the first processing node; Step S303: Using a large language model to perform multimodal semantic analysis on the business requirement instruction to obtain a semantic parsing result; The semantic analysis results include business requirements and / or design specifications; Step S304: Structuring the business requirement instruction according to the semantic analysis result to obtain a structured prompt word; Step S305: input the structured prompt word into the second processing node, and jump to step S306 and step S307; Step S306: Generate standard prompt words for the front-end components in the open source component library using a component-level prompt word generator, and then execute step S309; Step S307: Using the component-level prompt word generator, search from the vector database to obtain a document segment corresponding to the semantic analysis result; Among them, the vector database is used to store vectorized component library documents; Step S308: Generate standard prompt words for the front-end components in the private component library according to the document fragment corresponding to the semantic analysis result, and execute step S309; Step S309: Fusing the structured prompt words and the standard prompt words to obtain fused prompt words; Step S310 , based on the front-end component library, code is generated according to the fusion prompt words to obtain the front-end code corresponding to the business requirement instruction.

[0057] In this way, compared with adopting a fixed processing flow, workflow orchestration provides flexibility and scalability of different processing nodes, which can easily adapt to different code generation scenarios and future functional expansion requirements.

[0058] Optionally, the method also includes: inputting the front-end code into a user interaction interface, wherein the user interaction interface includes a code display page and an instruction input page; the code display page is used to display the front-end code; the instruction input page is used to receive user modification instructions, modify the component-level prompt word generator according to the user modification instructions, and generate new front-end code according to the modified component-level prompt word generator.

[0059] In some embodiments, the modification method is specified through user modification instructions, wherein the modification method includes at least one of the following: modifying the component-level prompt word generator according to the user modification instruction, and generating new front-end code according to the modified component-level prompt word generator; modifying the fusion prompt word according to the user modification instruction, and generating new front-end code according to the modified fusion prompt word; using a preset code editor to directly add or subtract code to the front-end code according to the user modification instruction to obtain a new front-end code.

[0060] In some embodiments, a code editor is used to display the front-end code in real time on the code display page, and the instruction input page supports user customized modifications to realize human-computer collaborative process.

[0061] Optionally, the user interaction interface also includes a front-end preview page; the front-end preview page is used to display the front-end rendering results corresponding to the front-end code, wherein the front-end rendering results are used to build a sandbox environment based on the component environment information and / or component dependency objects corresponding to the front-end code, and use the sandbox environment to render the front-end code.

[0062] In some embodiments, a sandbox environment is constructed based on Docker container technology.

[0063] In some embodiments, the technology stack and dependent libraries used by the front-end code are extracted from the final prompt words composed of the intermediate components and the extended prompt words; a sandbox environment is generated by automatically introducing the technology stack and dependent libraries; the front-end code is rendered through the sandbox environment to obtain a code preview page.

[0064] In some embodiments, the sandbox environment is provided with a variety of renderers, including native HTML (HyperText Markup Language) renderer, Shadcn UI renderer, Antd renderer, Material UI renderer, Element Plus renderer, Arco Design renderer, and the like.

[0065] Combine Figure 4 As shown, the interface structure of the user interaction interface includes a code display page, an instruction input page and a code preview page, wherein the code display page is used to display the front-end code, the instruction input page is used to receive user modification instructions, and the code preview page is used to display the front-end rendering results corresponding to the front-end code.

[0066] Combine Figure 5 As shown, the present application provides a front-end code generation method based on a large language model, comprising: Step S501: The large language model obtains business requirement instructions; Step S502: The large language model performs multimodal semantic analysis on the business requirement instruction to obtain a semantic analysis result; Step S503: The large language model structures the business requirement instruction according to the semantic analysis result to obtain structured prompt words; Step S504: the large language model drives the component-level prompt word generator; Step S505: The component-level prompt word generator generates standard prompt words for the front-end components in the open source component library; Step S506: The component-level prompt word generator searches the vector database to obtain document fragments corresponding to the semantic parsing results, and generates standard prompt words for the front-end components in the private component library based on the document fragments corresponding to the semantic parsing results. Among them, the vector database is used to store vectorized component library documents; Step S507: The component-level prompt word generator sends the standard prompt words to the large language model; Step S508: The large language model is integrated with the structured prompt words and the standard prompt words to obtain integrated prompt words; In step S509 , the large language model generates code based on the front-end component library and the fusion prompt words to obtain the front-end code corresponding to the business requirement instruction.

[0067] The front-end code generation method based on the large language model provided in this application is used to structure the business requirement instructions through the semantic parsing results corresponding to the business requirement instructions to obtain structured prompt words. A component library document carrying component specifications is set in the component-level prompt word generator to retrieve the vectorized component library document based on the semantic parsing results to generate standard prompt words. Code is then generated based on the fused prompt words obtained by fusing the structured prompt words and the standard prompt words to obtain the front-end code corresponding to the business requirement instructions. This method has the following advantages: First, business requirement instructions are structured based on semantic parsing results, helping the large language model understand business requirements. Furthermore, a component-level prompt generator is used to generate standard prompts corresponding to the semantic parsing results. This allows the large language model to automatically adapt to fine-grained code specifications such as file structure, encoding standards, and component dependency management rules based on these standard prompts. This overcomes the problem of large language models being unable to incorporate code standards, thereby reducing the amount of secondary development and debugging and improving the efficiency of front-end code generation. Second, a component-level prompt word generator for generating standard prompt words is developed using code writing tools. This generator can accurately and flexibly convert the code specifications of front-end components into prompt words for large models, allowing for fine-grained control over code structure, style, dependencies, etc., ensuring that the generated code meets enterprise-level standards. Third, compared to fixed processing flows, workflow orchestration provides flexibility and scalability for different processing nodes, making it easy to adapt to different code generation scenarios and future functional expansion requirements. Fourth, the introduction of a user interaction interface changes the black-box code generation experience, enabling human-computer collaboration and rapid iterative development.

[0068] Combine Figure 6 As shown, the present application provides a front-end code generation system based on a large language model, which is applied to a large language model. The system includes an association module 601, a first prompt word module 602, a second prompt word module 603, and a generation module 604.

[0069] The association module 601 is used to associate the front-end component library and the component-level prompt word generator, wherein the front-end component library includes multiple front-end components, and the component-level prompt word generator is provided with a component library document corresponding to the front-end component library, and the component library document carries the component specifications corresponding to the front-end components.

[0070] The first prompt word module 602 is used to respond to the business requirement instruction, perform semantic analysis on the business requirement instruction to obtain a semantic analysis result, and structure the business requirement instruction according to the semantic analysis result to obtain a structured prompt word.

[0071] The second prompt word module 603 is used to vectorize the component library document using the component-level prompt word generator, and retrieve the vectorized component library document according to the semantic parsing result to generate standard prompt words according to the retrieved document fragments.

[0072] The generation module 604 is used to fuse the structured prompt words and the standard prompt words to obtain fused prompt words, and generate code according to the fused prompt words based on the front-end component library to obtain front-end code corresponding to the business requirement instructions.

[0073] The front-end code generation system based on the large language model provided by the present application is used to structure the business requirement instructions through the semantic parsing results corresponding to the business requirement instructions to obtain structured prompt words, and set a component library document carrying component specifications in the component-level prompt word generator to retrieve the vectorized component library document according to the semantic parsing results to generate standard prompt words, thereby generating code based on the fusion prompt words obtained by fusing the structured prompt words and the standard prompt words to obtain the front-end code corresponding to the business requirement instructions. In this way, on the one hand, structuring the business requirement instructions according to the semantic parsing results helps the large language model understand the business requirements, and on the other hand, using the component-level prompt word generator to generate standard prompt words corresponding to the semantic parsing results, the large language model can automatically adapt to fine-grained code specifications such as file structure, coding specifications, and component dependency management rules in combination with standard prompt words, thereby overcoming the problem that the large language model cannot introduce code specifications, thereby reducing the number of secondary development and debugging, and improving the generation efficiency of front-end code.

[0074] The present application also provides an electronic device, comprising: a processor and a memory; the memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the electronic device performs the above method.

[0075] Figure 7 The following is a schematic diagram showing the structure of a computer system suitable for implementing an electronic device according to an embodiment of the present application. Figure 7 The computer system 700 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0076] like Figure 7As shown, computer system 700 includes a central processing unit (CPU) 701, which can perform various appropriate actions and processes, such as executing the methods described in the above embodiments, based on programs stored in read-only memory (ROM) 702 or programs loaded from storage 708 into random access memory (RAM) 703. RAM 703 also stores various programs and data required for system operation. CPU 701, ROM 702, and RAM 703 are interconnected via a bus 704. An input / output (I / O) interface 705 is also connected to bus 704.

[0077] The following components are connected to the I / O interface 705: an input section 706 including a keyboard, mouse, and the like; an output section 707 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and speakers; a storage section 708 including devices such as a hard disk; and a communication section 709 including a network interface card such as a LAN (Local Area Network) card or a modem. The communication section 709 performs communication processing via a network such as the Internet. A drive 710 is also connected to the I / O interface 705 as needed. Removable media 711, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 710 as needed, so that computer programs read from the media can be installed in the storage section 708 as needed.

[0078] The electronic device disclosed in this embodiment includes a processor, a memory, a transceiver, and a communication interface. The memory and the communication interface are connected to the processor and the transceiver and complete communication with each other. The memory is used to store computer programs, the communication interface is used to communicate, and the processor and the transceiver are used to run the computer program, so that the electronic device executes each step of the above method.

[0079] The above description and the accompanying drawings sufficiently illustrate the embodiments of the present disclosure to enable those skilled in the art to practice them. Other embodiments may include structural, logical, electrical, process and other changes. The embodiments represent only possible variations. Unless expressly required, individual components and functions are optional, and the order of operations may vary. Portions and subsamples of some embodiments may be included in or replace portions and subsamples of other embodiments. Moreover, the terms used in this application are only used to describe the embodiments and are not used to limit the claims. As used in the description of the embodiments and claims, the singular forms "a", "an" and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. Similarly, the term "and / or" as used in this application means any and all possible combinations including one or more of the associated listings. In addition, when used in this application, the term "comprise" and its variants "comprises" and / or comprising refer to the presence of stated subsamples, wholes, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other subsamples, wholes, steps, operations, elements, components and / or groups of these. In the absence of further restrictions, an element defined by the sentence "comprising a..." does not exclude the presence of other identical elements in the process, method or device that includes the element. In this article, each embodiment may focus on the differences from other embodiments, and the same and similar parts between the various embodiments can be referenced to each other. For the methods, products, etc. disclosed in the embodiments, if they correspond to the method part disclosed in the embodiments, then the relevant parts can be found in the description of the method part.

[0080] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software may depend on the specific application and design constraints of the technical solution. Technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application. Technicians can clearly understand that for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0081] In the embodiments disclosed herein, the disclosed methods and products (including but not limited to devices and equipment, etc.) can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of units may be merely a logical functional division. In actual implementation, other division methods may be used, such as combining or integrating multiple units or components into another system, or ignoring or not executing some sub-samples. In addition, the coupling or direct coupling or communication connection shown or discussed between each other may be through some interface, or the indirect coupling or communication connection between devices or units may be electrical, mechanical, or other forms. Units described as separate components may or may not be physically separate, and components shown as units may or may not be physical units, i.e., they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to implement the present embodiments according to actual needs. In addition, the functional units in this application may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit.

[0082] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of the systems, methods, and computer program products of the present application. In this regard, each block in a flowchart or block diagram may represent a module, program segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. In some alternative implementations, the functions marked in the blocks may occur in an order different from that marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, or they may sometimes be executed in the opposite order, depending on the functions involved. In the descriptions corresponding to the flowcharts and block diagrams in the accompanying drawings, the operations or steps corresponding to different blocks may also occur in an order different from that disclosed in the description, and sometimes there is no specific order between different operations or steps. For example, two consecutive operations or steps may actually be executed substantially in parallel, or they may sometimes be executed in the opposite order, depending on the functions involved. Each block in the block diagram and / or flowchart, as well as combinations of blocks in the block diagram and / or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or action, or may be implemented using a combination of dedicated hardware and computer instructions.

Claims

1. A front-end code generation method based on a large language model, characterized in that: Applied to a large language model, the method includes: Pre-associate a front-end component library and a component-level prompt word generator, wherein the front-end component library includes a plurality of front-end components, and the component-level prompt word generator is provided with a component library document corresponding to the front-end component library, wherein the component library document carries component specifications corresponding to the front-end components; In response to the business requirement instruction, semantically parse the business requirement instruction to obtain a semantic parsing result, and structure the business requirement instruction according to the semantic parsing result to obtain a structured prompt word; Using the component-level prompt word generator, the component library document is vectorized, and the vectorized component library document is retrieved according to the semantic parsing result, so as to generate standard prompt words according to the retrieved document fragments; The structured prompt words and the standard prompt words are integrated to obtain integrated prompt words, and based on the front-end component library, code is generated according to the integrated prompt words to obtain the front-end code corresponding to the business requirement instruction.

2. The method according to claim 1, characterized in that Performing semantic parsing on the business requirement instruction to obtain a semantic parsing result, and structuring the business requirement instruction according to the semantic parsing result to obtain a structured prompt word, including: If the business requirement instruction includes text format data, performing text semantic extraction on the text format data to obtain text semantics; If the business requirement instruction includes image format data, performing image semantic extraction on the image format data to obtain visual elements; Generating a semantic parsing result according to the text semantics and / or the visual elements, wherein the semantic parsing result includes business requirements and / or design specifications; The semantic parsing result and / or target component are structured according to a preset data structure to obtain a structured prompt word, wherein the target component is retrieved from a front-end component library according to the semantic parsing result.

3. The method according to claim 2, characterized in that Retrieve the target component via: The front-end component library is composed of an open source component library and / or a private database; Searching the open source component library according to the semantic parsing result to obtain a first component, and searching the private database according to the semantic parsing result to obtain a second component; If the front-end component corresponding to the semantic parsing result only includes the first component or the second component, the first component or the second component is used as the target component; If the front-end component corresponding to the semantic analysis result includes both a first component and a second component, evaluating the open source parameters corresponding to the first component using a large language model to determine quality-related parameters from the open source parameters based on the evaluation result; Calculating the quality-related parameters according to a preset correspondence between the quality-related parameters and the first priority to obtain a first priority corresponding to the first component; At the same time, the component library document corresponding to the second component is retrieved using the large language model to obtain a document description corresponding to the second component; the business requirement instruction is matched according to the document description to obtain a matching similarity, and a second priority corresponding to the second component is determined according to the matching similarity; A target component is determined from among the first component and the second component according to a comparison result between the first priority and the second priority.

4. The method according to claim 1, wherein The component-level prompt word generator is obtained by configuring the code specification corresponding to the front-end component using a code generation tool, wherein the code specification corresponding to the front-end component includes at least one of the following: The component library configuration field is used to host the open source database corresponding to the front-end component; The component library document configuration field is used to carry the component library document of the private database corresponding to the front-end component; A component standardization field is used to carry standardization information corresponding to the front-end component, wherein the standardization information includes at least one of component style, component type, component dependency object, component environment information, and component prompt information; The code configuration field is used to carry the code generation information of the target code corresponding to the front-end component, wherein the code generation information includes code generation specifications and / or code file structure.

5. The method according to claim 4, characterized in that The component library document is vectorized by using the component-level prompt word generator, and the vectorized component library document is retrieved according to the semantic parsing result to generate standard prompt words according to the retrieved document fragments, including: If the front-end component corresponding to the component-level prompt word generator is located in an open source database, then using the component-level prompt word generator to generate code according to the code specification corresponding to the front-end component to obtain a standard prompt word; If the front-end component corresponding to the component-level prompt word generator is located in a private database, the component-level prompt word generator is used to vectorize the component library document, and the vectorized component library document is retrieved according to the semantic parsing result to generate standard prompt words based on the retrieved document fragments.

6. The method according to any one of claims 1 to 5, characterized in that The large language model includes a first processing node and a second processing node, wherein the first processing node and the second processing node are both obtained by node arrangement using a workflow arrangement tool; The node input parameter of the first processing node includes a business requirement instruction, and the node output parameter of the first processing node includes a structured prompt word; The node input parameter of the second processing node includes a structured prompt word, and the node output parameter of the second processing node includes a front-end code.

7. The method according to any one of claims 1 to 5, characterized in that The method further comprises: Input the front-end code into a user interaction interface, wherein the user interaction interface includes a code display page and a command input page; The code display page is used to display the front-end code; The instruction input page is used to receive user modification instructions, modify the component-level prompt word generator according to the user modification instructions, and generate new front-end code according to the modified component-level prompt word generator.

8. The method according to claim 7, characterized in that The user interaction interface also includes a front-end preview page; The front-end preview page is used to display the front-end rendering result corresponding to the front-end code, wherein the front-end rendering result is used to build a sandbox environment according to the component environment information and / or component dependency objects corresponding to the front-end code, and use the sandbox environment to render the front-end code.

9. A front-end code generation system based on a large language model, characterized in that: Applied to large language models, the system includes: an association module, configured to associate a front-end component library with a component-level prompt word generator, wherein the front-end component library includes a plurality of front-end components, and the component-level prompt word generator is provided with a component library document corresponding to the front-end component library, wherein the component library document carries component specifications corresponding to the front-end components; a first prompt word module, configured to perform semantic analysis on the business demand instruction in response to the business demand instruction to obtain a semantic analysis result, and structure the business demand instruction according to the semantic analysis result to obtain a structured prompt word; a second prompt word module, configured to vectorize the component library document using the component-level prompt word generator, and retrieve the vectorized component library document according to the semantic parsing result, so as to generate standard prompt words according to the retrieved document fragments; A generation module is used to fuse the structured prompt words and the standard prompt words to obtain fused prompt words, and based on the front-end component library, perform code generation according to the fused prompt words to obtain the front-end code corresponding to the business requirement instruction.

10. An electronic device, characterized in that: include: processor and memory; The memory is used to store a computer program, and the processor is used to execute the computer program stored in the memory, so that the electronic device performs the method according to any one of claims 1 to 8.

Images