Code generation method and device of front-end component and computer program product

Abstract

The invention discloses a code generation method and device of a front-end component and a computer program product. Relates to the field of front-end development, and comprises the following steps: responding to a dragging instruction of a user, dragging a front-end component to a visual interface, responding to a configuration instruction of the user, configuring attributes, styles and events for the front-end component, and obtaining a configured front-end component, the front-end component comprising at least one of a button, a textbox, a card and a table; determining a first target data model of the configured front-end component, and generating a front-end code of the first target data model based on the component knowledge base and the code generator; responding to a natural language instruction for describing the business logic of the front-end component by the user, and inputting the natural language instruction into the large language model to obtain a front-end logic code of the front-end component; and determining the front-end code and the front-end logic code as target codes of the front-end component. Through the method and the device, the problem of low code development efficiency of the front-end component in related technologies is solved.

Description

Technical Field

[0001] The present application relates to the field of front-end development, and more specifically, to a method, device and computer program product for generating code for a front-end component. Background Art

[0002] In the related art, the development and optimization of the front-end components of web pages are achieved by developers manually coding and debugging. This front-end component development method is inefficient and it is difficult to ensure the consistency and reusability of the components. Although there are some automated development tools based on templates and frameworks, these automated development tools lack sufficient intelligence and adaptability and cannot meet complex and changing application requirements.

[0003] Currently, no effective solution has been proposed to the problem of low code development efficiency of front-end components in related technologies. Summary of the invention

[0004] The main purpose of the present application is to provide a code generation method, device and computer program product for a front-end component to solve the problem of low code development efficiency of the front-end component in the related art.

[0005] In order to achieve the above-mentioned purpose, according to one aspect of the present application, a method for generating code for a front-end component is provided. The method comprises: responding to a user's drag command, dragging the front-end component to a visual interface, and responding to a user's configuration command, configuring the front-end component with attributes, styles and events, and obtaining a configured front-end component, wherein the front-end component includes at least one of the following: a button, a text box, a card and a table; determining a first target data model of the configured front-end component, and generating a front-end code of the first target data model based on a component knowledge base and a code generator, wherein the first target data model includes configuration information of the configured front-end component, and a dependency relationship is defined in the component knowledge base, and the dependency relationship includes at least a dependency relationship between any two of the following: a page, a card, different front-end components, a dependency relationship between attributes, styles and events; responding to a user's natural language instruction describing the business logic of the front-end component, and inputting the natural language instruction into a large language model to obtain the front-end logic code of the front-end component; determining the front-end code and the front-end logic code as the target code of the front-end component.

[0006] Optionally, before generating the front-end code of the target data model based on the component knowledge base and the code generator, the method also includes: scanning the interface document of the public component library, extracting multiple elements in the interface document, wherein the multiple elements include at least one of the following: pages, cards, multiple front-end components, properties, styles and events; determining the dependencies between the multiple elements through an association analysis algorithm; generating a component pattern based on the dependencies, and building a component knowledge base based on the component pattern and the dependencies, wherein the component pattern defines at least one of the following of the front-end component: properties, styles, events, types and formats, and the component knowledge base contains the dependencies between various elements, the usage rules and constraints of the elements.

[0007] Optionally, after building a component knowledge base based on component patterns and dependencies, the method further includes: monitoring project change notifications of a project code base, wherein the project code base stores multiple front-end component projects; when the project change notification represents newly uploaded front-end component code in the project code base, obtaining relevant data of the newly uploaded front-end component code, wherein the relevant data includes data of pages, cards and front-end components in the front-end component project; and updating the component knowledge base based on the relevant data.

[0008] Optionally, after generating the front-end code of the target data model based on the component knowledge base and the code generator, the method further includes: receiving the code to be optimized input by the user, parsing the code to be optimized, and obtaining multiple elements in the code to be optimized, wherein the multiple elements include at least one of the following: front-end components, properties, events, and styles; converting the code to be optimized into a second target data model through reverse engineering, matching the second target data model with the component knowledge base, and obtaining matched target knowledge, wherein the target knowledge includes at least one of the following: dependencies between elements, usage rules and constraints of elements; optimizing the code to be optimized through the target knowledge to obtain optimized code.

[0009] Optionally, optimizing the code to be optimized through target knowledge to obtain the optimized code includes: constructing a rule grammar based on the target knowledge, detecting whether there is abnormal code in the code to be optimized through the rule grammar, wherein the rule grammar contains preset code generation rules, and the abnormal code is the code that does not comply with the code generation rules; in the case that there is abnormal code in the code to be optimized, modifying the abnormal code based on the rule grammar to obtain the modified code to be optimized; in the case that there is no abnormal code in the code to be optimized, generating a target prompt word based on the rule grammar; inputting the code to be optimized and the target prompt word into the large language model to obtain the optimized code.

[0010] Optionally, generating the front-end code of the first target data model based on the component knowledge base and the code generator includes: extracting the definition and configuration information of the front-end component from the first target data model through the code generator; matching the relevant information of the front-end component from the component knowledge base based on the definition and configuration information of the front-end component, wherein the relevant information includes at least one of the following: prediction attributes, prediction styles, prediction event handlers and dependencies; generating the front-end code through the relevant information.

[0011] Optionally, after determining the front-end code and the front-end logic code as the target code of the front-end component, the method also includes: creating a target front-end component based on the target code, receiving user feedback on the target front-end component; updating the target code according to the feedback to obtain an optimized target front-end component.

[0012] In order to achieve the above-mentioned purpose, according to another aspect of the present application, a code generation device for a front-end component is provided. The device includes: a first response unit, which is used to respond to the user's drag command, drag the front-end component to the visual interface, and respond to the user's configuration command to configure the front-end component with attributes, styles and events to obtain a configured front-end component, wherein the front-end component includes at least one of the following: a button, a text box, a card and a table; a first determination unit, which is used to determine the first target data model of the configured front-end component, and generate the front-end code of the first target data model based on the component knowledge base and the code generator, wherein the first target data model includes the configuration information of the configured front-end component, and the component knowledge base defines the dependency relationship, and the dependency relationship includes at least the dependency relationship between any two of the following: the dependency relationship between pages, cards, different front-end components, attributes, styles and events; a second response unit, which is used to respond to the user's natural language instruction to describe the business logic of the front-end component, and input the natural language instruction into the large language model to obtain the front-end logic code of the front-end component; a second determination unit, which is used to determine the front-end code and the front-end logic code as the target code of the front-end component.

[0013] In order to achieve the above-mentioned purpose, according to another aspect of the present application, a computer program product is provided, including a computer program, which, when executed by a processor, implements the steps of the code generation method of the front-end component described in each embodiment of the present application.

[0014] Through this application, the following steps are adopted: responding to the user's dragging instruction, dragging the front-end component to the visual interface, and responding to the user's configuration instruction, configuring the front-end component with attributes, styles and events, and obtaining the configured front-end component, wherein the front-end component includes at least one of the following: button, text box, card and table; determining the first target data model of the configured front-end component, generating the front-end code of the first target data model based on the component knowledge base and the code generator, wherein the first target data model contains the configuration information of the configured front-end component, and the component knowledge base defines the dependency relationship, and the dependency relationship includes at least the dependency relationship between any two of the following: page, card, different front-end components, attributes, styles and events; responding to the user's natural language instruction describing the business logic of the front-end component, and inputting the natural language instruction into the large language model to obtain the front-end logic code of the front-end component; determining the front-end code and the front-end logic code as the target code of the front-end component, and solving the problem of low code development efficiency of the front-end component in the related art. By constructing a component knowledge base, combining the visual interface and the large language model to generate and optimize the code of the front-end component, the effect of improving the code development efficiency of the front-end component is achieved. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0016] Figure 1 is a flowchart of a code generation method for a front-end component provided in an embodiment of the present application;

[0017] Figure 2 is a schematic diagram of building a component knowledge base provided according to an embodiment of the present application;

[0018] Figure 3 is a schematic diagram of a code optimization process provided according to an embodiment of the present application;

[0019] Figure 4 is a schematic diagram of a code generation system for a front-end component provided according to an embodiment of the present application;

[0020] Figure 5 is a schematic diagram of a code generation method for an optional front-end component provided according to an embodiment of the present application;

[0021] Figure 6 is a schematic diagram of a code generation device of a front-end component provided according to an embodiment of the present application;

[0022] Figure 7 is a schematic diagram of an electronic device provided according to an embodiment of the present application. DETAILED DESCRIPTION

[0023] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present application can be combined with each other. The present application will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0024] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequential order. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present application described here. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] For the convenience of description, some nouns or terms involved in the embodiments of the present application are explained below:

[0027] Large Language Model (LLM): A natural language processing model based on deep learning that can process and analyze large amounts of text data and has the ability to generate and understand natural language.

[0028] Knowledge Base (KB): A structured or semi-structured information collection containing facts, rules, relationships, etc. in a specific field or across fields, used to provide accurate and efficient information retrieval and reasoning support.

[0029] Front-end Web Component: The basic unit that makes up Internet pages and user interfaces, including HTML (HyperText Markup Language), CSS (Cascading Style Sheets), JavaScript (a programming script) and other elements, which are used to implement page layout, interactive logic and dynamic content.

[0030] The present invention is described below in conjunction with preferred implementation steps. Figure 1 is a flowchart of a method for generating code for a front-end component according to an embodiment of the present application. Figure 1 As shown, the method comprises the following steps:

[0031] Step S101, respond to the user's drag command, drag the front-end component to the visual interface, and respond to the user's configuration command to configure the attributes, styles and events of the front-end component to obtain a configured front-end component, wherein the front-end component includes at least one of the following: button, text box, card and table.

[0032] In step S101, the front-end component, i.e., the front-end Web component, creates a Web (webpage) visualization project platform, i.e., a visualization interface, which supports the free combination, dependency, and customization of multiple elements such as pages, cards, components, properties, styles, and events. The visualization interface may include a canvas area and a component panel, which lists all available front-end components, such as buttons, text boxes, cards, and tables. The canvas area is where users design page layouts, and the component panel provides component selection and dragging functions.

[0033] When a user selects a component in the component panel, such as a button, and drags it to the canvas area, the visual interface will respond to the drag command, instantiate the component, and place it at the specified location on the canvas. After the component is placed on the canvas, the user can configure the component through the property panel provided by the visual interface. The property panel lists all configurable properties, styles, and events, and the user can modify these settings through controls such as drop-down menus, input boxes, check boxes, etc. For example, the user can configure the text content, background color, font size of a button, or add a click event handler.

[0034] Step S102, determine the first target data model of the configured front-end component, and generate the front-end code of the first target data model based on the component knowledge base and the code generator, wherein the first target data model contains the configuration information of the configured front-end component, and the component knowledge base defines dependencies, and the dependencies include at least dependencies between any two of the following: dependencies between pages, cards, different front-end components, properties, styles and events.

[0035] In step S102, the first target data model can be a JSON (JavaScript Object Notation, a lightweight data exchange format) data model. The JSON data model is generated by dragging cards, components, binding properties, styles, events, etc. based on the visual interface. A code generator is defined to generate regularized grammar by importing common components and association relationships in the component knowledge base, and the interface created by the user by dragging is automatically generated to generate front-end component code (i.e., front-end code).

[0036] After the user completes dragging and configuring components on the visual interface, the configuration information of all components is collected, including component type, position, size, property value, style property, and bound event handlers. According to the layout and connection between components in the interface, the dependencies between components are parsed. For example, a button may be bound to a form submit event, or the value of a text box may be used as the property value of another component. The collected configuration information and parsed dependencies are converted into the first target data model.

[0037] The component knowledge base can contain the definitions of front-end components, properties, styles, event binding specifications, and dependencies between components. The dependencies in the component knowledge base define which components can be combined with which components, which properties can be associated with which events, and which style rules apply to specific components. For example, the knowledge base can define the dependency between a button component and a table component, and the association between a click event and data submission.

[0038] The code generator reads all component configuration information and dependencies from the first target data model. Generates HTML structure based on component type and layout. For example, a card component may be converted to a Elements contain specific class names and other embedded components. According to the component's style configuration and the style rules in the component knowledge base, the code generator generates the corresponding CSS code. The code generator converts the component's attribute values, event handlers, and logical dependencies into JavaScript code. For example, if the value of a text box is used to control display and hiding, the code generator will generate the corresponding event listening and logic judgment code. If the component is designed in a specific front-end framework, the code generator will generate component code for the corresponding framework. For example, in React (a JavaScript library for building user interfaces), it generates function or class components, which contain the logic of state management, attribute passing, and event handling.

[0039] Step S103, responding to the user's natural language instructions for describing the business logic of the front-end component, and inputting the natural language instructions into the large language model to obtain the front-end logic code of the front-end component.

[0040] In step S103, the code generation method of the front-end component of the embodiment of the present application also supports natural language input to generate business logic JS (JavaScript, a programming language) code. By defining a prompt word generator, based on the rules of the component knowledge base, the prompt words are exported according to the template language, and the large language model is connected to generate the front-end logic code corresponding to the user's natural language instructions.

[0041] When the user describes the business logic of the front-end component on the visual interface or through some text input method, that is, when receiving natural voice instructions, these natural language instructions are parsed, including word segmentation, part-of-speech tagging, named entity recognition, dependency analysis, etc., to understand the semantics and structure of the instructions. After parsing the natural language instructions, a set of prompt words are generated according to the content of the instructions. Prompt words are the basis for the big language model to understand and generate code, and they can accurately reflect the needs of business logic. For example, if the user describes the requirement as "when the user clicks the button, a dialog box pops up to display 'Welcome!'", then the prompt words may include "click event", "button", "pop-up dialog box", "display text", etc. The generated prompt words are used as input to call the integrated big language model. Based on the large amount of code and language data it has trained, the big voice model can understand the meaning of the prompt words and generate corresponding code snippets. The big voice model generates the business logic code of the front-end component based on the prompt words, that is, the front-end logic code, such as JavaScript, TypeScript or related framework syntax (such as React).

[0042] Step S104, determining the front-end code and the front-end logic code as the target code of the front-end component.

[0043] In step S104, the front-end code generated from the visual interface, such as HTML and CSS code, and the front-end logic code generated by the natural language instructions and the large language model are collected as components of the front-end component. The collected HTML, CSS, and JavaScript logic codes are integrated together. For example, in React, the HTML and JavaScript logic codes are encapsulated in the same JSX function component, while in Vue (a JavaScript framework for building interactive web applications), the HTML and JavaScript logic codes are contained in a single file. <template> 、 <script>和<style>部分。

[0044] 对整合后的代码进行优化，去除不必要的重复代码，确保代码的效率和可读性。确保目标代码符合所选前端框架的规范，进行适当的语法转换和调整。例如，将JavaScript逻辑转换为React中的state和props管理，或者在Vue中使用v-model和v-on进行数据绑定和事件监听。

[0045] 本申请实施例提供的前端组件的代码生成方法，通过响应用户的拖拽指令，将前端组件拖拽到可视化界面上，并响应用户的配置指令，对前端组件配置属性、样式和事件，得到配置完成的前端组件，其中，前端组件包括以下至少之一：按钮、文本框、卡片和表格；确定配置完成的前端组件的第一目标数据模型，基于组件知识库和代码生成器生成第一目标数据模型的前端代码，其中，第一目标数据模型包含配置完成的前端组件的配置信息，组件知识库中定义了依赖关系，依赖关系至少包括以下任意两项之间的依赖关系：页面、卡片、不同前端组件、属性、样式和事件之间的依赖关系；响应用户对前端组件的业务逻辑进行描述的自然语言指令，并将自然语言指令输入大语言模型，得到前端组件的前端逻辑代码；将前端代码和前端逻辑代码确定为前端组件的目标代码，解决了相关技术中前端组件的代码开发效率低的问题。通过构建组件知识库，结合可视化界面和大语言模型来生成和优化前端组件的代码，进而达到了提高前端组件的代码开发效率的效果。

[0046] 为了高效的开发代码，需要先构建一个组件知识库，可选地，在本申请实施例提供的前端组件的代码生成方法中，在基于组件知识库和代码生成器生成目标数据模型的前端代码之前，该方法还包括：扫描公共组件库的接口文档，提取接口文档中的多种元素，其中，多种元素至少包括以下之一：页面、卡片、多种前端组件、属性、样式和事件；通过关联分析算法确定多种元素之间的依赖关系；基于依赖关系生成组件模式，并基于组件模式和依赖关系构建组件知识库，其中，组件模式定义了前端组件的至少以下之一：属性、样式、事件、类型及格式，组件知识库中包含各种元素之间的依赖关系、元素的使用规则和约束条件。

[0047] 在一些示例中，扫描依赖的公共组件库接口文档，例如Vue项目依赖Element UI(元素界面)的组件库，React项目依赖的Ant Design(一种基于React的UI设计语言和框架)组件库接口文档，以及其它企业级或项目级公共组件库接口文档，按照属性、样式、事件以及父子组件之间的依赖关系过滤数据，构建初始数据集。扫描基于MVVM(Model-View-ViewModel，是一种用于构建用户界面的软件架构模式)框架构建的前端代码库，映射模板语法字符到自定义字典，基于关联分析算法分析组件、属性、样式、事件等依赖，抽取频繁项集数据抽取关联关系，待用户确认修改后存储。用户提交项目代码后通过消息中间件实时发送给可视化项目平台并实时同步到组件知识库。

[0048] 其中，Schema(也即组件模式)可以由页面、卡片、组件、属性、样式、事件等依赖关系生成Schema，从初始数据集抽取数据构造知识库。定义页面、卡片、组件、属性、样式、事件等依赖关系生成Schema，从接口文档抽取数据构造知识库。将组件间的依赖关系、使用条件和规范等知识存储于非关系数据库，和项目代码库保持同步更新，以应用于代码生成和优化的知识推理。

[0049] 通过关联分析算法，扫描MVVM框架中的前端代码，调整置信度阈值，获取频繁项集中的关联数据，结合自定义Schema转化成易于分析的数据模型，并支持用户自定义配置确认规则，以此引入规则推理应用于组件生成与优化。

[0050] 例如，图2是根据本申请实施例提供的构建组件知识库的示意图，如图2所示，通过全量代码扫描、代码实时更新检测、文档扫描等数据获取方式获取前端组件的接口文档，对接口文档中的数据进行预处理，在预处理之后进行知识抽取，包括提取前端组件之间的依赖关系以及各个前端组件的使用条件和应用规范等。对于每条抽取到的知识判断是否需要保留，若不保留则丢弃，若需要保留则判断是否需要修改，需要修改则进行修改，不需要修改则将该知识存储到组件知识库中。

[0051] 本实施例基于自定义Schema生成组件知识库，通过Schema抽象生成知识并存储，可以将接口手册中自然语言描述的组件接口文档等转化成易于分析的数据模型，以此引入规则推理应用于组件生成与优化，利用知识库提供的规则和约束，结合大语言模型对前端组件进行自动分析和优化，实现前端组件的自动生成、逻辑优化和故障检测。

[0052] 为了丰富组件知识库，需要实时更新组件知识库，可选地，在本申请实施例提供的前端组件的代码生成方法中，在基于组件模式和依赖关系构建组件知识库之后，该方法还包括：监测项目代码库的项目变更通知，其中，项目代码库存储有多个前端组件项目；在项目变更通知表征项目代码库存在新上传的前端组件代码的情况下，获取新上传的前端组件代码的相关数据，其中，相关数据包括前端组件项目中页面、卡片和前端组件的数据；基于相关数据更新组件知识库。

[0053] 在一些示例中，通过扫描项目代码库和实时监听代码变更通知(也即项目变更通知)，抽取项目级别的页面、卡片、组件等数据完善组件知识库内容。项目代码库使用版本控制系统来管理代码的变更。监测机制可以是基于Git(分布式版本控制系统)钩子(hooks)的实时监听，也可以是定期对代码库进行扫描，识别新提交或修改的文件。对于新上传的前端组件代码，使用静态代码分析工具或框架特定的解析器从代码中提取页面、卡片和组件的相关数据。例如解析组件的属性、事件、样式等信息。将提取的数据转换为与组件知识库兼容的格式。例如，将React或Vue的组件定义转换为JSON Schema，使得组件知识库能够理解并存储这些信息。将转换后的数据与现有组件知识库进行比较，识别需要更新的部分。例如添加新组件、修改现有组件的属性或事件定义，或者更新页面和卡片的布局。

[0054] 本实施例通过监测项目代码库的变更通知并自动更新组件知识库，实现自动化前端开发流程。通过实时分析代码变更并更新知识库，确保组件知识库的最新状态与项目代码库保持一致，提高了知识库的准确性，为后续的代码生成、优化和故障检测提供了实时的数据支持。

[0055] 除了高效的生成前端组件的代码以外，还可以提供代码优化方法，可选地，在本申请实施例提供的前端组件的代码生成方法中，在基于组件知识库和代码生成器生成目标数据模型的前端代码之后，该方法还包括：接收用户输入的待优化代码，解析待优化代码，得到待优化代码中的多种元素，其中，多种元素包括以下至少之一：前端组件、属性、事件和样式；通过逆向工程将待优化代码转换为第二目标数据模型，将第二目标数据模型与组件知识库匹配，得到匹配到的目标知识，其中，目标知识包括以下至少之一：元素之间的依赖关系、元素的使用规则和约束条件；通过目标知识对待优化代码进行优化，得到优化后的代码。

[0056] 在一些示例中，接收用户输入待优化代码(可以为前端代码或前端逻辑代码)，逆向转化成JSON数据模型(也即第二目标数据模型)，可以基于组件知识库的规则语法直接优化代码，或生成提示词输入大语言模型优化代码。用户输入待优化代码之后，前端代码基于模板并遍历组件知识库数据反向生成JSON数据模型，基于组件知识库定义的规则语法器，检测出组件输入输出参数，事件等一些非规范语法，针对实时提交的待优化代码影响到的功能模块做成提示给用户检查确认。

[0057] 例如，图3是根据本申请实施例提供的代码优化流程的示意图，如图3所示，接收用户输入的待优化代码，对待优化代码逆向生成JSON数据模型，通过组件知识库定义的规则语法器检测出待优化代码中的非规范模块，判断非规范模块是否需要修改，若需要修改则进行修改，对于修改后的或不需要修改的待优化代码保存，接下来基于组件知识库的规则语法生成提示词，将提示词和待优化代码输入到大语音模型之后，得到生成的优化代码。

[0058] 本实施例通过对待优化代码进行优化，提升了前端代码的质量和安全性。利用静态代码分析和逆向工程技术，可以将复杂的待优化代码转换为易于处理的数据模型；而组件知识库中的规则和约束则为代码优化提供了指导原则，提高了前端组件的代码开发效率。

[0059] 可选地，在本申请实施例提供的前端组件的代码生成方法中，通过目标知识对待优化代码进行优化，得到优化后的代码包括：基于目标知识构建规则语法器，通过规则语法器检测待优化代码是否存在异常代码，其中，规则语法器包含了预设的代码生成规则，异常代码为不符合代码生成规则的代码；在待优化代码存在异常代码的情况下，基于规则语法其对异常代码进行修改，得到修改后的待优化代码；在待优化代码不存在异常代码的情况下，基于规则语法器生成目标提示词；将待优化代码和目标提示词输入到大语言模型，得到优化后的代码。

[0060] 在一些示例中，用户输入待优化代码，基于组件知识库的规则，按照模板语言导出提示词，接入大语言模型，生成优化后的代码。规则语法器是根据组件知识库中的目标知识设计的，用于检测和修正代码中的异常。它包含了一系列预设的代码生成规则，这些规则描述了组件、属性、事件和样式之间的正确使用方式和依赖关系。规则语法器逐行检查待优化代码，识别不符合预设代码生成规则的异常代码。异常代码可能包括错误的属性赋值、事件绑定不当、组件使用不规范等。如果检测到异常代码，规则语法器将自动修改代码，以符合预设的规则。在代码不存在明显异常时，规则语法器会生成特定的目标提示词，这些建议性的提示词可以指导大语言模型在保持代码逻辑的同时，优化代码的性能、可读性和可维护性。将待优化代码(已修正或未修正)和目标提示词输入到大语言模型，利用模型的智能生成能力和上下文理解能力，生成优化后的代码。

[0061] 本实施例通过基于目标知识构建规则语法器，并利用规则语法器检测待优化代码中的异常，自动修正不符合规则的代码，或者生成提示词供大语言模型优化代码，提高前端组件的代码的质量和规范性。

[0062] 前端代码可以由代码生成器来生成，可选地，在本申请实施例提供的前端组件的代码生成方法中，基于组件知识库和代码生成器生成第一目标数据模型的前端代码包括：通过代码生成器从第一目标数据模型中提取出前端组件的定义和配置信息；基于前端组件的定义和配置信息从组件知识库中匹配前端组件的相关信息，其中，相关信息至少包括以下之一：预测属性、预测样式、预测事件处理器及依赖关系；通过相关信息生成前端代码。

[0063] 在一些示例中，代码生成器解析第一目标数据模型(例如JSON Schema)，从中提取出有关组件的定义和配置信息，如组件类型、属性、样式、事件等。基于提取到的定义和配置信息，代码生成器查询组件知识库，寻找与组件相关的预测属性、预测样式、预测事件处理器及依赖关系。知识库中包含针对不同组件的最佳实践、常用的属性和样式设置、推荐的事件处理逻辑，以及组件间的依赖关系信息。代码生成器基于从知识库中匹配到的相关信息，生成符合组件定义和配置的前端代码。

[0064] 本实施例通过代码生成器生成前端代码，加快Web应用的开发速度，同时确保代码质量。代码生成器和组件知识库的结合，减轻了开发人员的负担，高生成代码的可用性和优化代码的准确性，提高开发效率。

[0065] 为了保障目标代码的准确性，基于用户的反馈意见对目标代码进一步优化，在本申请实施例提供的前端组件的代码生成方法中，在将前端代码和前端逻辑代码确定为前端组件的目标代码之后，该方法还包括：基于目标代码创建目标前端组件，接收用户对目标前端组件的反馈意见；通过反馈意见更新目标代码，以得到优化后的目标前端组件。

[0066] 在一些示例中，引入机器学习算法对前端组件的性能进行评估和预测，结合实时用户反馈和监控数据，实现前端组件的持续优化和迭代，利用代码生成器或自动化构建工具，根据优化后的目标代码自动创建目标前端组件。开发工具或界面可以集成用户反馈系统，允许用户直接在组件或应用中提供反馈意见。可以通过可视化界面的直接操作，或是提供评论和建议的表单。基于用户反馈，开发团队或自动化工具制定代码更新策略，以修正组件的问题或改进其功能和性能。

[0067] 本实施例基于目标代码创建前端组件，并根据用户反馈进行代码更新，确保组件质量、满足用户需求和提高用户体验，通过持续迭代优化组件，确保它们不仅功能完备，而且用户体验良好。

[0068] 根据本申请的另一实施例，还提供了一种前端组件的代码生成系统，图4是根据本申请实施例提供的前端组件的代码生成系统的示意图。如图4所示，该系统包括：UI(可视化界面)、业务逻辑层、知识库和大模型。

[0069] 其中，UI包括代码生成、代码优化、知识库构建和模型接入模块，代码生成模块包括页面编辑器、卡片编辑器、自然语言输入和组件编辑器，代码优化模块包括代码输入、规则语法检查和实时代码影响检测。

[0070] 业务逻辑层包括JSON SCHEMA生成器和代码生成器，知识库包括存量代码知识抽取、增量代码知识抽取、知识推理模块和接口文档知识抽取。大模型包括大语言模型和提示词生成器。

[0071] 本实施例还提供了一种应用于前端组件的代码生成系统的可选的前端组件的代码生成方法，图5是根据本申请实施例提供的可选的前端组件的代码生成方法的示意图。如图5所示，该方法包括：导入知识库依赖关系，用户配置组件，绑定属性、事件和样式，配置组件依赖关系，组件生成卡片，卡片生成页面，对配置完成的界面生成JSON数据模型，接收用户输入的自然语言，基于规则语法生成提示词，将提示词输入到大模型生成业务逻辑代码，基于JSON数据模型和业务逻辑代码，并结合知识库规则生成页面代码；判断页面代码是否需要修改，若需要修改进行修改，若不需要修改或修改完成保存代码。

[0072] 本实施例通过前端组件的代码生成系统以及可选的前端组件的代码生成方法，通过Schema抽象生成知识并存储，可以将接口手册中自然语言描述的组件接口文档等转化成易于分析的数据模型，以此引入规则推理应用于组件生成与优化。通过关联分析算法，扫描MVVM框架中的前端代码，调整置信度阈值，获取频繁项集中的关联数据，结合自定义Schema转化成易于分析的数据模型，并支持用户自定义配置确认规则，以此引入规则推理应用于组件生成与优化。通过界面自动生成代码并引入知识库中的数据，提高生成代码的可用性和优化代码的准确性，提高开发效率。接入大语言模型,实现自然语言编程和自动优化代码，基于规则生成提示词，提升大语言模型在对项目组件的理解能力，提高生成与优化代码质量。

[0073] 需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

[0074] 本申请实施例还提供了一种前端组件的代码生成装置，需要说明的是，本申请实施例的前端组件的代码生成装置可以用于执行本申请实施例所提供的用于前端组件的代码生成方法。以下对本申请实施例提供的前端组件的代码生成装置进行介绍。

[0075] 图6是根据本申请实施例提供的前端组件的代码生成装置的示意图。如图6所示，该装置包括：

[0076] 第一响应单元601，用于响应用户的拖拽指令，将前端组件拖拽到可视化界面上，并响应用户的配置指令，对前端组件配置属性、样式和事件，得到配置完成的前端组件，其中，前端组件包括以下至少之一：按钮、文本框、卡片和表格；

[0077] 第一确定单元602，用于确定配置完成的前端组件的第一目标数据模型，基于组件知识库和代码生成器生成第一目标数据模型的前端代码，其中，第一目标数据模型包含配置完成的前端组件的配置信息，组件知识库中定义了依赖关系，依赖关系至少包括以下任意两项之间的依赖关系：页面、卡片、不同前端组件、属性、样式和事件之间的依赖关系；

[0078] 第二响应单元603，用于响应用户对前端组件的业务逻辑进行描述的自然语言指令，并将自然语言指令输入大语言模型，得到前端组件的前端逻辑代码；

[0079] 第二确定单元604，用于将前端代码和前端逻辑代码确定为前端组件的目标代码。

[0080] 本申请实施例提供的前端组件的代码生成装置，通过第一响应单元601，响应用户的拖拽指令，将前端组件拖拽到可视化界面上，并响应用户的配置指令，对前端组件配置属性、样式和事件，得到配置完成的前端组件，其中，前端组件包括以下至少之一：按钮、文本框、卡片和表格；第一确定单元602，确定配置完成的前端组件的第一目标数据模型，基于组件知识库和代码生成器生成第一目标数据模型的前端代码，其中，第一目标数据模型包含配置完成的前端组件的配置信息，组件知识库中定义了依赖关系，依赖关系至少包括以下任意两项之间的依赖关系：页面、卡片、不同前端组件、属性、样式和事件之间的依赖关系；第二响应单元603，响应用户对前端组件的业务逻辑进行描述的自然语言指令，并将自然语言指令输入大语言模型，得到前端组件的前端逻辑代码；第二确定单元604，将前端代码和前端逻辑代码确定为前端组件的目标代码。解决了相关技术中前端组件的代码开发效率低的问题，通过构建组件知识库，结合可视化界面和大语言模型来生成和优化前端组件的代码，进而达到了提高前端组件的代码开发效率的效果。

[0081] 可选地，在本申请实施例提供的前端组件的代码生成装置中，该装置还包括：扫描单元，用于扫描公共组件库的接口文档，提取接口文档中的多种元素，其中，多种元素至少包括以下之一：页面、卡片、多种前端组件、属性、样式和事件；第三确定单元，用于通过关联分析算法确定多种元素之间的依赖关系；生成单元，用于基于依赖关系生成组件模式，并基于组件模式和依赖关系构建组件知识库，其中，组件模式定义了前端组件的至少以下之一：属性、样式、事件、类型及格式，组件知识库中包含各种元素之间的依赖关系、元素的使用规则和约束条件。

[0082] 可选地，在本申请实施例提供的前端组件的代码生成装置中，该装置还包括：监测单元，用于监测项目代码库的项目变更通知，其中，项目代码库存储有多个前端组件项目；获取单元，用于在项目变更通知表征项目代码库存在新上传的前端组件代码的情况下，获取新上传的前端组件代码的相关数据，其中，相关数据包括前端组件项目中页面、卡片和前端组件的数据；基于相关数据更新组件知识库。

[0083] 可选地，在本申请实施例提供的前端组件的代码生成装置中，该装置还包括：接收单元，用于接收用户输入的待优化代码，解析待优化代码，得到待优化代码中的多种元素，其中，多种元素包括以下至少之一：前端组件、属性、事件和样式；转换单元，用于通过逆向工程将待优化代码转换为第二目标数据模型，将第二目标数据模型与组件知识库匹配，得到匹配到的目标知识，其中，目标知识包括以下至少之一：元素之间的依赖关系、元素的使用规则和约束条件；优化单元，用于通过目标知识对待优化代码进行优化，得到优化后的代码。

[0084] 可选地，在本申请实施例提供的前端组件的代码生成装置中，优化单元包括：构建模块，用于基于目标知识构建规则语法器，通过规则语法器检测待优化代码是否存在异常代码，其中，规则语法器包含了预设的代码生成规则，异常代码为不符合代码生成规则的代码；修改模块，用于在待优化代码存在异常代码的情况下，基于规则语法其对异常代码进行修改，得到修改后的待优化代码；第一生成模块，用于在待优化代码不存在异常代码的情况下，基于规则语法器生成目标提示词；输入模块，用于将待优化代码和目标提示词输入到大语言模型，得到优化后的代码。

[0085] 可选地，在本申请实施例提供的前端组件的代码生成装置中，第一确定单元602包括：提取模块，用于通过代码生成器从第一目标数据模型中提取出前端组件的定义和配置信息；匹配模块，用于基于前端组件的定义和配置信息从组件知识库中匹配前端组件的相关信息，其中，相关信息至少包括以下之一：预测属性、预测样式、预测事件处理器及依赖关系；第二生成模块，用于通过相关信息生成前端代码。

[0086] 可选地，在本申请实施例提供的前端组件的代码生成装置中，该装置还包括：创建单元，用于基于目标代码创建目标前端组件，接收用户对目标前端组件的反馈意见；更新单元，用于通过反馈意见更新目标代码，以得到优化后的目标前端组件。

[0087] 前端组件的代码生成装置包括处理器和存储器，上述第一响应单元601、第一确定单元602、第二响应单元603和第二确定单元604等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

[0088] 处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提高前端组件的代码开发效率。

[0089] 存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和 / 或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

[0090] 本发明实施例提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现前端组件的代码生成方法。

[0091] 本发明实施例提供了一种处理器，处理器用于运行程序，其中，程序运行时执行前端组件的代码生成方法。

[0092] 图7是根据本申请实施例提供的电子设备的示意图。如图7所示，电子设备701包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：响应用户的拖拽指令，将前端组件拖拽到可视化界面上，并响应用户的配置指令，对前端组件配置属性、样式和事件，得到配置完成的前端组件，其中，前端组件包括以下至少之一：按钮、文本框、卡片和表格；确定配置完成的前端组件的第一目标数据模型，基于组件知识库和代码生成器生成第一目标数据模型的前端代码，其中，第一目标数据模型包含配置完成的前端组件的配置信息，组件知识库中定义了依赖关系，依赖关系至少包括以下任意两项之间的依赖关系：页面、卡片、不同前端组件、属性、样式和事件之间的依赖关系；响应用户对前端组件的业务逻辑进行描述的自然语言指令，并将自然语言指令输入大语言模型，得到前端组件的前端逻辑代码；将前端代码和前端逻辑代码确定为前端组件的目标代码。本文中的设备可以是服务器、PC、PAD、手机等。

[0093] 本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：响应用户的拖拽指令，将前端组件拖拽到可视化界面上，并响应用户的配置指令，对前端组件配置属性、样式和事件，得到配置完成的前端组件，其中，前端组件包括以下至少之一：按钮、文本框、卡片和表格；确定配置完成的前端组件的第一目标数据模型，基于组件知识库和代码生成器生成第一目标数据模型的前端代码，其中，第一目标数据模型包含配置完成的前端组件的配置信息，组件知识库中定义了依赖关系，依赖关系至少包括以下任意两项之间的依赖关系：页面、卡片、不同前端组件、属性、样式和事件之间的依赖关系；响应用户对前端组件的业务逻辑进行描述的自然语言指令，并将自然语言指令输入大语言模型，得到前端组件的前端逻辑代码；将前端代码和前端逻辑代码确定为前端组件的目标代码。

[0094] 本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

[0095] 本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和 / 或方框图来描述的。应理解可由计算机程序指令实现流程图和 / 或方框图中的每一流程和 / 或方框、以及流程图和 / 或方框图中的流程和 / 或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的装置。

[0096] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能。

[0097] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和 / 或方框图一个方框或多个方框中指定的功能的步骤。

[0098] 在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入 / 输出接口、网络接口和内存。

[0099] 存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和 / 或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。

[0100] 计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

[0101] 还需要说明的是，术语"包括”、"包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句"包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

[0102] 本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

[0103] 以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。< / script> < / template>

Claims

1. A code generation method for a front-end component, characterized in that: include: In response to a user's drag command, drag the front-end component to the visual interface, and in response to the user's configuration command, configure the attributes, styles and events of the front-end component to obtain a configured front-end component, wherein the front-end component includes at least one of the following: a button, a text box, a card and a table; Determine a first target data model of the configured front-end component, and generate front-end code of the first target data model based on a component knowledge base and a code generator, wherein the first target data model includes configuration information of the configured front-end component, and the component knowledge base defines dependencies, and the dependencies include at least dependencies between any two of the following: dependencies between pages, cards, different front-end components, properties, styles, and events; Responding to the natural language instruction of the user describing the business logic of the front-end component, and inputting the natural language instruction into a large language model to obtain the front-end logic code of the front-end component; The front-end code and the front-end logic code are determined as target codes of the front-end component.

2. The method according to claim 1, characterized in that: Before generating the front-end code of the target data model based on the component knowledge base and the code generator, the method further includes: Scan the interface document of the public component library and extract multiple elements in the interface document, wherein the multiple elements include at least one of the following: page, card, multiple front-end components, attributes, styles and events; Determine the dependency relationship between the multiple elements by using an association analysis algorithm; A component pattern is generated based on the dependency relationship, and the component knowledge base is constructed based on the component pattern and the dependency relationship, wherein the component pattern defines at least one of the following of the front-end component: attributes, styles, events, types and formats, and the component knowledge base contains the dependency relationships between various elements, usage rules and constraints of the elements.

3. The method according to claim 2, characterized in that After constructing the component knowledge base based on the component pattern and the dependency relationship, the method further includes: Monitoring project change notifications of a project code repository, wherein the project code repository stores a plurality of front-end component projects; When the project change notification indicates that the project code library has newly uploaded front-end component code, obtain relevant data of the newly uploaded front-end component code, wherein the relevant data includes data of pages, cards and front-end components in the front-end component project; The component knowledge base is updated based on the relevant data.

4. The method according to claim 1, characterized in that: After generating the front-end code of the target data model based on the component knowledge base and the code generator, the method further includes: Receiving the code to be optimized input by the user, parsing the code to be optimized, and obtaining multiple elements in the code to be optimized, wherein the multiple elements include at least one of the following: front-end components, attributes, events, and styles; Converting the code to be optimized into a second target data model through reverse engineering, matching the second target data model with the component knowledge base to obtain matched target knowledge, wherein the target knowledge includes at least one of the following: dependency relationships between elements, usage rules and constraints of the elements; The code to be optimized is optimized using the target knowledge to obtain optimized code.

5. The method according to claim 4, characterized in that The code to be optimized is optimized by using the target knowledge, and the optimized code includes: Constructing a rule grammar based on the target knowledge, and detecting whether the code to be optimized contains abnormal code by the rule grammar, wherein the rule grammar contains preset code generation rules, and the abnormal code is code that does not comply with the code generation rules; In the case where the code to be optimized has the abnormal code, modifying the abnormal code based on the rule grammar to obtain a modified code to be optimized; In the case that the code to be optimized does not contain the abnormal code, generating a target prompt word based on the rule grammar; The code to be optimized and the target prompt word are input into the large language model to obtain the optimized code.

6. The method according to claim 1, characterized in that Generating the front-end code of the first target data model based on the component knowledge base and the code generator includes: Extracting definition and configuration information of the front-end component from the first target data model by the code generator; Matching the relevant information of the front-end component from the component knowledge base based on the definition and configuration information of the front-end component, wherein the relevant information includes at least one of the following: prediction attributes, prediction styles, prediction event processors, and dependencies; The front-end code is generated through the relevant information.

7. The method according to claim 1, characterized in that After determining the front-end code and the front-end logic code as the target code of the front-end component, the method further includes: Creating a target front-end component based on the target code, and receiving user feedback on the target front-end component; The target code is updated according to the feedback to obtain an optimized target front-end component.

8. A code generation device for a front-end component, characterized in that: include: A first response unit, configured to respond to a user's drag command, drag the front-end component to the visual interface, and respond to the user's configuration command to configure the front-end component with attributes, styles and events to obtain a configured front-end component, wherein the front-end component includes at least one of the following: a button, a text box, a card and a table; A first determination unit is used to determine a first target data model of the configured front-end component, and generate a front-end code of the first target data model based on a component knowledge base and a code generator, wherein the first target data model includes configuration information of the configured front-end component, and a dependency relationship is defined in the component knowledge base, and the dependency relationship includes at least a dependency relationship between any two of the following: a dependency relationship between pages, cards, different front-end components, properties, styles, and events; A second response unit is used to respond to the natural language instruction of the user describing the business logic of the front-end component, and input the natural language instruction into a large language model to obtain the front-end logic code of the front-end component; The second determining unit is used to determine the front-end code and the front-end logic code as the target code of the front-end component.

9. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the code generation method of the front-end component described in any one of claims 1 to 7 is implemented.

10. An electronic device, characterized in that: It includes one or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the code generation method of the front-end component described in any one of claims 1 to 7.

Images