Form generation method and related equipment
By retrieving configurations from a form item knowledge base and generating JSON content for form configurations from the user's natural language, the high barrier to entry in traditional form development is solved. This enables the automatic generation of front-end pages, reduces manual workload, and improves development efficiency and user experience.
Patent Information
- Application Number
- CN202511456141.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-10-13
- Publication Date
- 2026-02-06
AI Technical Summary
Traditional form development requires manual configuration of fields and validation rules, which has a high barrier to entry, a large amount of manual work, and affects development and generation efficiency.
By retrieving configurations from a form item knowledge base, obtaining user natural language, generating JSON content for form configurations using a large language model, and parsing the front-end page using a JSON parser, the configurations are displayed in the designer in response to user commands.
It enables the automatic generation of form configurations that meet the requirements, reducing manual intervention, improving processing efficiency, lowering the development threshold, and enhancing the user experience.
Smart Images

Figure CN121480465A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of artificial intelligence, and in particular to a form generation method and related equipment. BACKGROUND
[0002] In related technologies, traditional form development usually needs to manually configure fields, verification rules, etc., and configure the front-end page through a low-code tool drag-and-drop manner, which requires users to be familiar with the system, has a high use threshold and large manual workload, and affects the development and generation efficiency of the form.
[0003] To sum up, the technical problems existing in related technologies need to be improved. SUMMARY
[0004] The main purpose of the embodiments of the present application is to propose a form generation method and related equipment to generate a visual form configuration and preview through natural language.
[0005] To achieve the above-mentioned purpose, one aspect of the embodiments of the present application proposes a form generation method, which comprises: obtaining a form item configuration from a form item knowledge base; obtaining a natural language input by a user; generating a current caption based on the form item configuration and the natural language; inputting the current caption into a large language model to obtain form configuration JSON content; parsing the form configuration JSON content through a JSON parser to obtain a current front-end page; in response to a first instruction, displaying the current front-end page in a designer.
[0006] In some embodiments, the method further comprises: obtaining all component configurations; obtaining a layout configuration corresponding to the form item; storing the component configuration and the corresponding layout configuration in the form item knowledge base, wherein the form item configuration comprises the component configuration and the corresponding layout configuration.
[0007] In some embodiments, the current front-end page comprises a current component, and the method further comprises: in response to a selection operation on the current component, displaying parameters of the current component on the current front-end page; in response to a modification operation on the parameters of the current component, displaying modified component parameters on the current front-end page; displaying an updated component created based on the modified component parameters on the current front-end page.
[0008] In some embodiments, the method further includes: In response to the drag operation on the new component, displaying the new component on the current front-end page based on a current drag position of the new component.
[0009] In some embodiments, the generating the current caption based on the form item configuration and the natural language includes: Obtaining a caption template; Substituting the form item configuration and the natural language into the caption template to obtain the current caption.
[0010] In some embodiments, the inputting the current caption into the large language model to obtain the form configuration JSON content includes: Identifying a target component in the natural language through the large language model; Obtaining a target layout corresponding to the target component through the large language model; Generating form configuration JSON content based on the target component, the target layout, and the current caption through the large language model.
[0011] To achieve the above object, another aspect of the embodiment of the present application provides a form generation device, which comprises: A configuration obtaining module configured to obtain a form item configuration from a form item knowledge base; A user input module configured to obtain a natural language input by a user; A caption generation module configured to generate a current caption based on the form item configuration and the natural language; A model output module configured to input the current caption into a large language model to obtain form configuration JSON content; A parsing module configured to parse the form configuration JSON content through a JSON parser to obtain a current front-end page; A display module configured to display the current front-end page in a designer in response to a first instruction.
[0012] To achieve the above object, another aspect of the embodiment of the present application provides an electronic device, which comprises a memory and a processor, the memory stores a computer program, and the processor implements the method described above when executing the computer program.
[0013] To achieve the above object, another aspect of the embodiment of the present application provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the method described above.
[0014] To achieve the above object, another aspect of the embodiment of the present application provides a computer program product comprising a computer program which, when executed by a processor, implements the method described above.
[0015] The embodiment of the present application at least has the following beneficial effects: the present application provides a form generation method, device, electronic equipment, storage medium and program product, which obtains form item configuration from a form item knowledge base; obtains natural language input by a user; generates current calligraphy based on the form item configuration and the natural language; inputs the current calligraphy into a large language model to obtain form configuration JSON content, which can automatically generate form configuration meeting requirements, reduces manual intervention and improves processing efficiency; parses the form configuration JSON content through a JSON parser to obtain a current front-end page, which is conducive to automatically generating the front-end page and reducing manual workload; in response to a first instruction, displays the current front-end page in a designer, realizes visual form configuration generation and preview through natural language, reduces user operation, reduces development threshold, improves development efficiency and user experience. BRIEF DESCRIPTION OF DRAWINGS
[0016] Figure 1 is a flowchart of the form generation method provided by the embodiment of the present application; Figure 2 is a flowchart of the form editing step of the form generation method provided by the embodiment of the present application; Figure 3 is a flowchart of step S104 in Figure 1 Figure 4 is a specific implementation flowchart when the form generation method provided by the embodiment of the present application is applied to an AI-based dynamic form configuration generation and preview device; Figure 5 is a flowchart of the AI-based dynamic form configuration generation and preview device provided by the embodiment of the present application; Figure 6 is a user input page schematic diagram provided by the embodiment of the present application; Figure 7 is a form configuration page configuration modification schematic diagram provided by the embodiment of the present application; Figure 8 is a form configuration page preview schematic diagram provided by the embodiment of the present application; Figure 9 is a structural schematic diagram of the form generation device provided by the embodiment of the present application; Figure 10 is a hardware structural schematic diagram of the electronic equipment provided by the embodiment of the present application. DETAILED DESCRIPTION
[0017] In order to make the purposes, technical solutions and advantages of the present application clearer, the present application will be further described in detail below with reference to the drawings and embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application and are not intended to limit the present application. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with embodiments of the present application, but are only examples of devices and methods consistent with some aspects of the embodiments of the present application as detailed in the appended claims.
[0018] It can be understood that the terms "first", "second", and the like used in the present application can be used herein to describe various concepts, but unless specifically stated, these concepts are not limited by these terms. These terms are only used to distinguish one concept from another. For example, without departing from the scope of the embodiments of the present application, the first information can also be referred to as the second information, and similarly, the second information can also be referred to as the first information. Depending on the context, the word "if" as used herein can be interpreted as "when" or "when" or "in response to determining".
[0019] The terms "at least one", "multiple", "each", "any" and the like used in the present application include one, two or more than two, multiple includes two or more than two, each refers to each of the corresponding multiple, and any refers to any one of the multiple.
[0020] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as understood by those skilled in the art to which the present application belongs. The terms used herein are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.
[0021] Before the embodiments of the present application are described in detail, first, some nouns and terms involved in the embodiments of the present application are described, and the nouns and terms involved in the embodiments of the present application are applicable to the following explanations.
[0022] 1) JSON (JavaScript Object Notation) is a lightweight data exchange format mainly used for data storage and transmission. JSON is a completely language-independent text format, easy for humans to read and write, and also easy for machines to parse and generate. JSON is widely used in web development.
[0023] In the related art, traditional form development usually needs to manually configure fields, verification rules, etc., and configure the front-end page through the low-code tool drag-and-drop method, which requires users to be familiar with the system, has a high use threshold and a large amount of manual work, affecting the development and generation efficiency of the form.
[0024] To sum up, the technical problems existing in the related art need to be improved. Therefore, the embodiments of the present application provide a form generation method and related equipment. The scheme obtains form item configurations from a form item knowledge base; obtains natural language input by a user; generates a current title based on the form item configurations and the natural language; inputs the current title into a large language model to obtain form configuration JSON content, which can automatically generate form configurations meeting the requirements, reduce manual intervention, and improve processing efficiency; parses the form configuration JSON content through a JSON parser to obtain a current front-end page, which is conducive to automatically generating the front-end page and reducing manual workload; and in response to a first instruction, displays the current front-end page in a designer, realizes visual form configuration generation and preview through natural language, reduces user operations, reduces the development threshold, and improves development efficiency and user experience.
[0025] The form generation method provided by the embodiments of the present application relates to the field of artificial intelligence. The form generation method provided by the embodiments of the present application can be applied to a terminal, can also be applied to a server, and can also be software running in the terminal or the server. In some embodiments, the terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, a vehicle-mounted terminal, and the like, but is not limited thereto; the server end can be configured as a stand-alone physical server, can also be configured as a server cluster or a distributed system composed of multiple physical servers, can also be configured as a cloud server providing basic cloud computing services such as cloud service, cloud database, cloud computing, cloud function, cloud storage, network service, cloud communication, middleware service, domain name service, security service, CDN, and big data and artificial intelligence platform, and the server can also be a node server in a blockchain network; and the software can be an application that implements the form generation method, but is not limited to the above forms.
[0026] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld devices or portable devices, tablet devices, multi-processor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and the like. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, and the like that perform specific tasks or implement specific abstract data types. The present application can also be practiced in a distributed computing environment, in which tasks are performed by remote processing devices connected by a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media, including storage devices.
[0027] It should be noted that in various specific embodiments of the present application, when relevant processing needs to be performed according to user information, user behavior data, user history data, and user location information, and other data related to the identity or characteristics of the user, the user's permission or consent will be obtained first, and the collection, use, and processing of such data will comply with relevant laws, regulations, and standards. In addition, when the embodiments of the present application need to obtain sensitive personal information of the user, the separate permission or separate consent of the user will be obtained through a pop-up window or by jumping to a confirmation page, and after obtaining the separate permission or separate consent of the user, the necessary user-related data for enabling the embodiments of the present application to function normally will be obtained.
[0028] Figure 1 is an optional flowchart of the form generation method provided by the embodiments of the present application, Figure 1 The method in can include, but is not limited to, steps S101 to S106.
[0029] Step S101, obtaining form item configuration from a form item knowledge base.
[0030] Specifically, the form item configuration includes component configuration and corresponding layout configuration.
[0031] In some embodiments, all component configurations are obtained; the layout configuration corresponding to the form item is obtained; and the component configuration and the corresponding layout configuration are stored in the form item knowledge base.
[0032] Among them, different form items are automatically classified into different layouts, such as buttons into button layouts, drop-down boxes into form layouts, and display tables into table layouts.
[0033] It can be understood that one page can include multiple layouts, and the layouts are determined according to the components input by the user.
[0034] In the present embodiment, the form item configuration is obtained from the form item knowledge base, which prepares for subsequent generation of JSON and parsing of the page. By obtaining and managing the configuration through the form item knowledge base, human errors are reduced, and maintainability is improved.
[0035] Step S102, obtaining natural language input by the user.
[0036] In some embodiments, the user submits the natural language through a form input box, a chat interface, or the like. The input content can be free text.
[0037] Further, the input of the user is preliminarily cleaned, such as removing redundant spaces and special characters, to improve the accuracy of subsequent processing.
[0038] In the embodiment, the natural language input by the user is acquired, and a requirement is submitted through the natural language, thereby avoiding complex form filling, reducing the use threshold, enabling the system to intelligently interact with the user, and improving user satisfaction.
[0039] In step S103, the current caption is generated based on the form item configuration and the natural language.
[0040] In some embodiments, a caption template is acquired, and the form item configuration and the natural language are substituted into the caption template to obtain the current caption.
[0041] Optionally, the current caption is generated by matching the natural language input by the user with the form item configuration through a matching rule or a machine learning algorithm.
[0042] In the embodiment, the current caption is generated based on the form item configuration and the natural language, which is beneficial to reduce manual input and improve efficiency.
[0043] In step S104, the current caption is input into a large language model to obtain form configuration JSON content.
[0044] In some embodiments, the target component in the natural language is identified through the large language model; the target layout corresponding to the target component is acquired through the large language model; and the form configuration JSON content is generated based on the target component, the target layout, and the current caption through the large language model.
[0045] Optionally, a plurality of different large language models can be combined, a first large language model is responsible for understanding the user input to obtain the target component and the target layout, and a second large language model is responsible for generating the form configuration JSON content.
[0046] In the embodiment, the current caption is input into the large language model to obtain the form configuration JSON content, which can automatically generate a form configuration meeting the requirement, reduces manual intervention, and improves processing efficiency.
[0047] In step S105, the form configuration JSON content is parsed through a JSON parser to obtain a current front-end page.
[0048] In some embodiments, the form configuration JSON content obtained from the large language model is parsed using the JSON parser, and the form items are dynamically rendered through a front-end framework according to the parsed data to obtain the current front-end page.
[0049] In the embodiment, the form configuration JSON content is parsed through the JSON parser to obtain the current front-end page, which is beneficial to automatically generate the front-end page and reduce manual workload.
[0050] In step S106, the current front-end page is displayed in the designer in response to a first instruction.
[0051] Specifically, the first instruction triggers when opening or refreshing the current front-end page.
[0052] In some embodiments, the current front-end page is displayed in the designer, the visual form configuration is generated and previewed through natural language, the user operation is reduced, the development threshold is lowered, and the development efficiency and user experience are improved.
[0053] The steps S101 to S106 shown in the embodiments of the present application can obtain form item configurations from a form item knowledge base, obtain user input natural language, generate current captions based on form item configurations and natural language, input the current captions into a large language model to obtain form configuration JSON content, automatically generate form configurations meeting requirements, reduce manual intervention, and improve processing efficiency; the form configuration JSON content is parsed by a JSON parser to obtain a current front-end page, which is conducive to automatically generating a front-end page and reducing manual workload; in response to a first instruction, the current front-end page is displayed in the designer, the visual form configuration is generated and previewed through natural language, the user operation is reduced, the development threshold is lowered, and the development efficiency and user experience are improved.
[0054] Please refer to Figure 2 In some embodiments, the form generation method provided by the embodiments of the present application further includes a form editing step, which can include but is not limited to steps S201 to S204: Step S201, in response to a selection operation on the current component, displaying parameters of the current component on the current front-end page.
[0055] In step S201 of some embodiments, the user selects the current component, and the parameters of the current component are displayed on the current front-end page.
[0056] Step S202, in response to a modification operation on the parameters of the current component, displaying the modified component parameters on the current front-end page.
[0057] In step S202 of some embodiments, the user modifies the parameters of the current component, and the modified component parameters are displayed on the current front-end page.
[0058] Step S203, displaying an updated component created based on the modified component parameters on the current front-end page.
[0059] In step S203 of some embodiments, in response to a save operation on the parameters of the current component, an updated component created based on the modified component parameters is displayed on the current front-end page, and the current component is replaced by the updated component or updated to the updated component.
[0060] In step S204, in response to the drag operation of the newly added component, the newly added component is displayed on the current front-end page based on its current drag position.
[0061] In step S203 of some embodiments, the user drags and drops a new component, and the new component is displayed at the current drag position on the current front-end page.
[0062] Please see Figure 3 In some embodiments, step S104 may include, but is not limited to, steps S301 to S303: Step S301: Identify target components in natural language using a large language model.
[0063] In step S301 of some embodiments, the large language model extracts specific target components from the input through text understanding and reasoning.
[0064] For example, the user inputs: "I need a form that includes name, age, and gender." The large language model identifies the "name," "age," and "gender" components as a text input box, a number input box, and a drop-down menu, respectively.
[0065] Step S302: Obtain the target layout corresponding to the target component through the large language model.
[0066] In step S302 of some embodiments, the large language model determines the corresponding target layout based on the target component.
[0067] It should be noted that the target layout can include multiple layouts, and the layout is determined based on the components entered by the user.
[0068] Among them, buttons are automatically placed into button layouts, dropdown lists are automatically placed into form layouts, and tables are automatically placed into table layouts.
[0069] Step S303: Generate form configuration JSON content based on the target component, target layout, and current title using the large language model.
[0070] In step S303 of some embodiments, the large language model generates form configuration JSON content based on the target component, the target layout, and the rules in the current title.
[0071] Understandably, by mapping inputs to structured data configured in the form, the large language model understands the attributes, validation rules, etc. of each component and generates the corresponding JSON.
[0072] Optionally, the large language model that generates the form configuration JSON content can be different from the large language model that identifies the target component and the target layout. Multiple large language models can be used to identify the target component and the target layout and then generate the form configuration JSON content.
[0073] Figure 4 This is a flowchart illustrating a specific implementation of the form generation method provided in this application when applied to an AI-based dynamic form configuration generation and preview device. The flowchart of the AI-based dynamic form configuration generation and preview device is as follows: Figure 5 As shown, Figure 4 The methods may include, but are not limited to, the following steps: Step 1: Build a knowledge base for FD form items.
[0074] Specifically, the knowledge base consists of JSON object configurations corresponding to various form items.
[0075] For example, the configuration of form items in the FD form item knowledge base is as follows: #### Form Layout json { "type": "layoutForm", "labelName": "Form Layout", "layout": "layout", "tableRef": "", "layoutIcon": "el-icon-s-grid", "unTriggerChage": true, "inlineMessage": true, "dragFormItem": false, "dragHandleSelector": ".el-form-item__label", "gutter": 0, "group": [], "drag": [ { "span": 6, "list": [] } ], "compKey": "layoutForm_random", "key": "layoutForm_random } ``` #### Button Layout json { "type": "layoutButton", "labelName": "Button layout", "addPosition": "2", "formRef": "", "tableRef": "", "isShowConfigBtn": false, "isShowMore": true, "isShowOperInst": false, "refurbishMode": "1", "expandBtnCount": "4", "isShowFullScreen": false, "expandBtnSpan": "24", "layoutIcon": "el-icon-menu", "layout": "layout", "gutter": 0, "drag": { "span": 6, "list": [] } , "compKey": "layoutButton_random", "key": "layoutButton_random" } ``` # Input box ``` json { "key": "inputTxt_random", "labelName": "Input box", "size": "mini", "layoutIcon": "el-icon-edit", "layout": "component", "width": "100%", "value": "", "span": 6, "disabled": false, "haveIcon": false, "isShow": true, "right": true, "suffixIcon": "", "inputType": "string", "compKey": "inputTxt_random", "type": "inputTxt", "codeField": "", "dataOptions": { "showParams": [], "disabledParams": [], "ruleParams": [] }, "isMust": true, "labelWidth": "80px", "placeholder": "Please enter content", "clearable": true, "validateType": "blur" } ``` # Drop-down box ``` json { "type": "dropdownList", "labelName": "Drop-down box", "compKey": "dropdownList_random", "layoutIcon": "el-icon-s-operation", "size": "mini", "layout": "component", "width": "100%", "isShow": true, "span": 6, "value": "", "codeField": "", "disabled": false, "isMust": true, "isMul": false, "filterable": true, "clearable": true, "labelWidth": "80px", "placeholder": "Please select", "isAsync": false, "collapseTags": true, "dataOptions": { "dataSource": { "apiParamName": "", "options": [], "optionsConfig": { "label": "b", "value": "a" }, "apiUrl": " / ly / url" }, "showParams": [], "disabledParams": [], "triggerParams": [], "triggerMustParams": [], "otherFields": [], "ruleParams": [] }, "key": "dropdownList_random" } ``` # Date and Time ``` json { "type": "inputDate", "labelName": "Date and Time", "compKey": "inputDate_random", "layoutIcon": "el-icon-date", "layout": "component", "size": "mini", "width": "100%", "isShow": true, "value": "", "span": 6, "codeField": "", "disabled": false, "labelWidth": "80px", "placeholder": "Please select a date", "dataOptions": { "dateType": "date", "format": "yyyy-MM-dd", "pickerOptions": {} }, "change": "", "isMust": true, "key": "inputDate_random } ``` #### Button json { "key": "button_random", "type": "button", "compKey": "", "text": "button", "labelName": "Button", "layoutIcon": "el-icon-mouse", "position": "right", "disabled": false, "layout": "component", "click": "", "event": "", "styletype": "", "isShow": true, "span": 4, "icon": "", "isAuth": false, "dataOptions": { "dataSource": {} } } The above lists the Gregorian calendar dates, and the knowledge base stores the configurations for 26 form items; Different form items are automatically assigned to different layouts. For example, buttons are assigned to button layouts, dropdown lists to form layouts, and tables to table layouts. In addition, pop-up layouts and grid layouts are also included. Step 2: The user inputs natural language generated from the form. The system submits the user input, the form item configuration JSON data retrieved from the knowledge base, and the title to the AI big model via the AI big model interface caller, and receives the returned form configuration JSON content that matches the input content.
[0076] Among them, large AI models include, but are not limited to, gpt, Gemini, kimi, grok, and claude, etc.
[0077] Optionally, the user's natural language input is as follows: "Generate an order query page, including query conditions, query buttons, and a query result display table. The query conditions include: province drop-down box and city drop-down box. The buttons include: query and reset. The table columns include: province, city, district / county, creation time, and availability."
[0078] For example, a schematic diagram of the user input page is shown below. Figure 6 As shown.
[0079] In addition, the question template (the system automatically completes the content for the current question) is as follows: ## Role You are a FastDesigner (FD) form configuration engineer, skilled at understanding user input to configure forms and generate JSON configuration code. ## List of Supported Components The following form control configurations are known in FD: {{FD form item JSON}} ## Require - Generate the corresponding JSON configuration based on the list of supported components. - When generating the JSON configuration, the component key needs to be dynamically generated. The format is: the component's type attribute value plus a random number to ensure the key is unique. At the same time, the value of the key is assigned to the compKey attribute (if it exists). - When generating component configurations, directly use the JSON configuration from the supported component manifest and do not delete attributes (especially the dataOptions attribute). - Use a form layout if you need to generate query criteria. - If you need to generate a table, use a table layout. - If you need to generate buttons, use a button layout. - When a form layout exists, the `tableRef` property in the form layout configuration reads the value of the `key` property of the table layout (if the table layout exists). - When a button layout exists, the `tableRef` property in the button layout configuration reads the `key` property value of the table layout (if the table layout exists), and the `formRef` property reads the `key` property value of the form layout (if the form layout exists). - The rules for assigning values to the button's event property: if the text property is "Query", assign "queryTable"; if it's "Reset", assign "resetForm"; if it's "Jump Page", assign "jumpPage"; otherwise, leave it empty. - When generating the configuration for the basic components in the form layout, the `codeField` property (if any) should be assigned the value of `labelName`, translated into its English abbreviation. - When configuring table column generation in a table layout, the prop attribute is assigned the value of the label. (Translated into English abbreviation) - Basic components must be contained within the `<drag>` list node of the layout component `<layoutForm>`. A list can only contain one basic component, with the form layout serving as its container. For example: json { "list": [ { "key": "layoutForm_1703296270001", "drag": [ { "list": { "key": "dropdownList_1703296270011", "size": "mini", "span": 6, "type": "dropdownList", "isMul": false, "value": "", "width": "100%", "isMust": true, "isShow": true, "layout": "component", "compKey": "dropdownList_1703296270010", "isAsync": false, "disabled": false, "clearable": true, "codeField": "provinceId", "labelName": "Name", "filterable": true, "labelWidth": "80px", "layoutIcon": "el-icon-s-operation", "dataOptions": { "dataSource": { "apiUrl": " / ly / busicen / uscquerycontext / usc / mdmOrgProvinceQuery", "options": [], "apiParams": { "isEnable": "1" }, "apiParamName": "", "optionsConfig": { It should be noted that in the translation, "名称" is translated as "Name" for better correspondence in this context. You can adjust it according to the actual requirements."label": "provinceName", "value": "provinceId" } }, "ruleParams": [], "showParams": [], "otherFields": [], "triggerParams": [], "disabledParams": [], "triggerMustParams": [] }, "placeholder": "Please select", "collapseTags": true } ], "span": 6 } ], "type": "layoutForm", "group": [], "gutter": 0, "layout": "layout", "compKey": "layoutForm_1703296270000", "tableRef": "layoutTable_1703296270007", "labelName": "Form Layout", "layoutIcon": "el-icon-s-grid", "inlineMessage": true, "unTriggerChage": true } ] } ``` ## Input / Output Examples Output in JOSN format, such as: { "list": [ {Form layout}, {Button layout}, {Table Layout} ], "overallConfig": { "compName": "Page Encoding", "pageName": "Page Name", "pageType": "1", "generateFrom": "AI } } ## Function Description {{User input in natural language}} The {{}} contains placeholder data that needs to be replaced. The FD form field JSON can be the complete configuration of the knowledge base or the configuration corresponding to the component entered by the user.
[0080] Step 3: The FD JSON parser parses the form configuration JSON content and displays it in the FD designer.
[0081] It should be noted that FD is a low-code configuration tool that parses JSON and visualizes form configurations to ultimately generate the front-end page.
[0082] Understandably, users input their requirements using natural language, the system calls the AI large model interface and returns a form configuration JSON, which is then parsed by the FD JSON parser (fd-json-adapter) into a data structure that the FD tool can understand and visualize, enabling efficient front-end page development.
[0083] Step 4: The FD designer allows you to modify and preview the form configuration page, ultimately generating the front-end page code.
[0084] After calling the large model interface and returning JSON data, the page can be edited and previewed using the FD tool (low-code tool). Adjustments can be made through the attribute configuration of each form item, such as: component type, component name, adding API, and inter-component linkage (e.g., province, city, and the city will automatically match the selected province after selecting the province).
[0085] For example, a diagram illustrating the modification of the form configuration page is shown below. Figure 7 As shown in the image, a preview of the form configuration page is provided. Figure 8 As shown.
[0086] It should be noted that the specific attributes may differ for each form item, but the common attributes are as follows: labelName: Form field name; size: 'Form item size: medium / small / mini'; layout: 'component' / / Fixed; value: 'Form field value'; span: The number of grid cells occupied by the form item, 24 cells; disabled: Whether it is available; haveIcon: Whether there is an icon; isShow: Whether to display; suffixIcon: Icon; inputType: Input type; compKey: Form item key, unique identifier; type: Form item type (inputText, dropdownList, inputDate, inputTime, switch, checkbox, checkboxGroup, radio, radioGroup, inputWithBtn, textarea, link, slot, fast-upload, etc.); codeField: Data field; isMust: Whether to display by default; labelWidth: Label width; clearable: Whether it can be cleared; showParams: Whether to display the linkage configuration; disabledParams: Whether the linkage configuration is available; triggerParams: Value-based configuration; triggerMustParams: A required configuration field for trigger-MustParams settings. otherFields: Configuration for linking other fields; ruleParams: Configuration for linked validation rules.
[0087] In addition, the differences are as follows: Input box (inputTxt): placeholder: Default display content; Dropdown List: apiUrl: API address; apiParamName: API parameter name; options: options; Date (inputDate); dateType: Date type; Time (inputTime); format: date format; Upload (fast-upload); uploadField: The field for uploading data; uploadUrl: Upload URL; Dynamic components; dynamicType: Dynamic data type.
[0088] This application can extract the form item configurations that can be recognized by the FD tool to form an FD form item knowledge base, and parse the data returned by calling the AI large model interface into a data structure that can be recognized by the FD tool to enable page preview.
[0089] Please see Figure 9 This application also provides a form generation apparatus that can implement the above-described method. The apparatus includes: Configuration retrieval module 901 is used to retrieve form item configurations from the form item knowledge base; User input module 902 is used to acquire natural language input from the user; The title generation module 903 is used to generate the current title based on form field configuration and natural language. Model output module 904 is used to input the current keyword into the large language model and obtain the form configuration JSON content; Parsing module 905 is used to parse the JSON content of the form configuration using a JSON parser to obtain the current front-end page; Display module 906 is used to display the current front-end page in the designer in response to the first instruction.
[0090] It is understood that the content of the above method embodiments is applicable to the present device embodiments. The specific functions implemented by the present device embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.
[0091] This application also provides an electronic device, which includes a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the above-described method. This electronic device can be any smart terminal, including tablet computers, in-vehicle computers, etc.
[0092] It is understood that the content of the above method embodiments is applicable to this device embodiment. The specific functions implemented by this device embodiment are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.
[0093] Please see Figure 10 , Figure 10 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes: The processor 1001 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application. The memory 1002 can be implemented as a read-only memory (ROM), static storage device, dynamic storage device, or random access memory (RAM). The memory 1002 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 1002 and is called and executed by the processor 1001 using the methods described in the embodiments of this application. Input / output interface 1003 is used to implement information input and output; The communication interface 1004 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.). Bus 1005 transmits information between various components of the device (e.g., processor 1001, memory 1002, input / output interface 1003, and communication interface 1004); The processor 1001, memory 1002, input / output interface 1003 and communication interface 1004 are connected to each other within the device via bus 1005.
[0094] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described method.
[0095] It is understood that the content of the above method embodiments is applicable to this storage medium embodiment. The specific functions implemented in this storage medium embodiment are the same as those in the above method embodiments, and the beneficial effects achieved are also the same as those achieved in the above method embodiments.
[0096] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.
[0097] It is understood that the content of the above method embodiments is applicable to the embodiments of this program product. The specific functions implemented by the embodiments of this program product are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.
[0098] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.
[0099] The form generation method, apparatus, electronic device, storage medium, and program product provided in this application embodiment obtain form item configurations from a form item knowledge base; obtain natural language input by the user; generate a current title based on the form item configurations and natural language; input the current title into a large language model to obtain form configuration JSON content, which can automatically generate form configurations that meet the requirements, reduce manual intervention, and improve processing efficiency; parse the form configuration JSON content through a JSON parser to obtain the current front-end page, which is conducive to automatically generating the front-end page and reducing manual workload; and display the current front-end page in the designer in response to a first instruction, realizing the generation and preview of visual form configurations through natural language, reducing user operations, lowering the development threshold, and improving development efficiency and user experience.
[0100] The embodiments described in this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided by the embodiments of this application. As those skilled in the art will know, with the evolution of technology and the emergence of new application scenarios, the technical solutions provided by the embodiments of this application are also applicable to similar technical problems.
[0101] Those skilled in the art will understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of this application, and may include more or fewer steps than shown, or combine certain steps, or different steps.
[0102] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs.
[0103] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.
[0104] In the several embodiments provided in this application, it should be understood that the disclosed apparatus and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of the units described above is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.
[0105] If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes multiple instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned storage medium includes various media capable of storing programs, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
[0106] The preferred embodiments of the present application have been described above with reference to the accompanying drawings, but this does not limit the scope of the claims of the present application. Any modifications, equivalent substitutions, and improvements made by those skilled in the art without departing from the scope and substance of the embodiments of the present application shall be within the scope of the claims of the present application.
Claims
1. A form generation method, characterized in that, The method includes the following steps: Retrieve form item configurations from the form item knowledge base; Obtain natural language input from the user; The current title is generated based on the form field configuration and the natural language; Input the current keyword into the large language model to obtain the form configuration JSON content; The current front-end page is obtained by parsing the form configuration JSON content using a JSON parser. In response to the first instruction, the current front-end page is displayed in the designer.
2. The method according to claim 1, characterized in that, The method further includes: Get all component configurations; Get the layout configuration corresponding to the form item; The component configuration and the corresponding layout configuration are stored in the form item knowledge base, wherein the form item configuration includes the component configuration and the corresponding layout configuration.
3. The method according to claim 1, characterized in that, The current front-end page includes the current component, and the method further includes: In response to the selection of the current component, the parameters of the current component are displayed on the current front-end page; In response to a modification operation on the parameters of the current component, the modified component parameters are displayed on the current front-end page; The updated component, created based on the modified component parameters, is displayed on the current front-end page.
4. The method according to claim 1, characterized in that, The method further includes: In response to a drag operation on the newly added component, the newly added component is displayed on the current front-end page based on its current drag position.
5. The method according to claim 1, characterized in that, The process of generating the current title based on the form field configuration and the natural language includes: Get the title template; The form field configuration and the natural language are substituted into the title template to obtain the current title.
6. The method according to claim 1, characterized in that, The step of inputting the current keyword into the large language model to obtain the form configuration JSON content includes: Identify target components in the natural language using the large language model; The target layout corresponding to the target component is obtained through the large language model; The large language model generates form configuration JSON content based on the target component, the target layout, and the current title.
7. A form generation device, characterized in that, The device includes: The configuration retrieval module is used to retrieve form item configurations from the form item knowledge base; The user input module is used to obtain natural language input from the user. The title generation module is used to generate the current title based on the form field configuration and the natural language; The model output module is used to input the current keyword into the large language model and obtain the form configuration JSON content; The parsing module is used to parse the JSON content of the form configuration using a JSON parser to obtain the current front-end page; The display module is used to display the current front-end page in the designer in response to the first instruction.
8. An electronic device, characterized in that, The electronic device includes a memory and a processor, the memory storing a computer program, and the processor executing the computer program to implement the method according to any one of claims 1 to 6.
9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 6.
10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 6.
Citation Information
Cited By
Dynamic webpage configuration method and system based on large model, terminal and storage medium
CN121834084A
