A system for automatically generating web front-end code from natural language specification documents

Abstract

The application relates to a system for automatically generating web front-end code from a natural language description document, and relates to the field of computer code automatic generation, and comprises a data input unit, a structured logic generation unit, a sub-logic generation unit, a component type calculation unit, a structured component tree generation unit and a web page rendering unit. The application can automatically analyze and extract a natural language to generate the code of the web front end, greatly improves the development efficiency, and has good application in insurance products.

Description

Technical Field

[0001] This invention relates to the field of automatic computer code generation, and more specifically to a system and method for generating web front-end code from natural language description documents. Background Technology

[0002] Web front-end development mainly utilizes various web technologies such as HTML / CSS / JavaScript / Flash to develop client-side products, complete the development of client-side programs (i.e., browser-side), develop JavaScript and Flash modules, and combine back-end development technologies to simulate the overall effect, enriching the web development of the Internet, and striving to improve user experience through technology.

[0003] For web front-end developers, the current development approach involves writing code line by line to implement specific requirements, ultimately creating a display page for end users. This process requires collaboration between the client, product manager, and web front-end developers to launch a single page feature. The client submits requirements to the product manager based on business needs; the product manager writes a requirements document; and the web front-end developers implement the web page based on the requirements document. (See attached image) Figure 1 As shown, this development approach requires collaboration among multiple parties and suffers from problems such as a long development chain, low efficiency, and high error rate.

[0004] In existing technologies, to improve the efficiency of front-end page development, there are often systems that allow drag-and-drop code generation. For example, Chinese patent ZL201410320408.7 relates to a web-based business system page layer development platform and method. This allows users to drag and drop technical and business components using JavaScript technology within a web-based development environment, and then call these components to generate static business processing pages. This drag-and-drop code generation development process is as follows: Figure 2 As shown, this solution improves efficiency to some extent, but the entire development process is still the traditional model. It only adds a low-code generation system with drag-and-drop components in the middle. The development chain is still very long, and there are still problems such as the need for cooperation from multiple parties, low efficiency, and high error rate. Summary of the Invention

[0005] The purpose of this invention is to overcome the aforementioned shortcomings of existing technologies. This patent proposes a method for automatically generating web front-end code from manual development. This method utilizes natural language recognition and analysis technology to automatically generate the data required for the web front-end page by data modeling insurance product documentation. Finally, a component rendering engine is used to automatically generate the web front-end page. In this process, product managers and web front-end developers become assistants, shortening the development chain and greatly improving development efficiency. The technical solution of this invention is as follows:

[0006] A system for automatically generating web front-end code based on natural language documentation, characterized by comprising a data input unit, a structured logic generation unit, a sub-logic generation unit, a component type calculation unit, a structured component tree generation unit, and a web page rendering unit, wherein:

[0007] The data input unit is used to input natural language documentation into the computer.

[0008] The structured logic generation unit includes a natural language preprocessing module, which breaks down natural language documentation into logical units of natural language and marks them.

[0009] The sub-logic generation unit includes a keyword analysis module and a keyword rule set. The keyword analysis module uses a word segmentation algorithm to split the data of the logic unit to form a keyword set. The keyword rule set includes preset keyword processing rules as well as keyword display methods and interaction methods. The keyword set is matched according to the preset keyword processing rules, and display data is extracted according to the matched keywords to form a sub-logic unit. The sub-logic unit includes three dimensions: display data, display method, and interaction method.

[0010] The component type calculation unit includes a sub-logic unit analysis module and an atomized component library collection; the atomized component library contains descriptive information about the characteristics of various components; the sub-logic unit analysis module determines the component type of the sub-logic unit by matching the sub-logic unit with the descriptive information, and if the match is successful.

[0011] The structured component tree generation unit nests the sub-logical units that match the component type and the logical units into a tree structure to form a structured component tree;

[0012] The Web page rendering unit is used to receive a structured component tree and render the Web front-end page.

[0013] Furthermore, the natural language preprocessing module splits the document according to one or more of the following: paragraphs, main headings, subheadings, Chinese numeral headings, Arabic numeral headings, periods, commas, and semicolons.

[0014] Furthermore, the sub-logic generation unit performs similarity matching on the keyword set according to preset keyword processing rules, and the similarity of a successful match is either a dynamic value or a fixed value.

[0015] Furthermore, in the sub-logic generation unit, the logic unit corresponding to the set of keywords that did not match the preset keyword processing rules is defined as the logic unit to be analyzed. The logic unit to be analyzed defines keywords through manual analysis, puts the keywords into the keyword rule set, and performs re-matching.

[0016] Furthermore, the preset keyword processing rules include a keyword whitelist and a keyword blacklist. When the keyword set matches the keyword whitelist, a sub-logic unit is generated; when the keyword set matches the keyword blacklist, only additional information is generated.

[0017] Furthermore, the sub-logic unit also includes an association logic unit, which has preset second-level and third-level association words based on the display data in the sub-logic unit. The sub-logic unit analysis module determines its corresponding component type based on the second-level and third-level association words.

[0018] An application of a system that automatically generates web front-end code based on natural language documentation in the web development of insurance products.

[0019] The technical solution of the present invention has the following advantages:

[0020] This application utilizes natural language recognition and analysis technology, combined with product-specific data modeling, to automatically generate the data required for web front-end pages. Finally, a component rendering engine is used to automatically generate the web front-end pages. In this process, product managers and web front-end developers become assistants, shortening the development chain and significantly improving development efficiency, especially for web front-end code development for insurance products, where it can greatly enhance work efficiency. Attached Figure Description

[0021] The above and / or additional aspects and advantages of the present invention will become apparent and readily understood from the description of the embodiments taken in conjunction with the following drawings, in which:

[0022] Figure 1 This is a typical manual development flowchart for web applications;

[0023] Figure 2 It is a drag-and-drop flowchart for assisting web development;

[0024] Figure 3This is a schematic diagram of the system for automatically generating web front-end code based on natural language documentation, as described in this application.

[0025] Figure 4 This is a flowchart of the operation of the sub-logic generation unit;

[0026] Figure 5 This is an application example of web development for insurance products. Detailed Implementation

[0027] The technical solution of the present invention will now be clearly and completely described with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0028] like Figure 3 As shown, the present invention provides a system for automatically generating web front-end code based on natural language documentation, which includes a data input unit 100, a structured logic generation unit 200, a sub-logic generation unit 300, a component type calculation unit 400, a structured component tree generation unit 500, and a web page rendering unit 600.

[0029] The data input unit 100 is used to input natural language description documents into the computer. The structured logic generation unit 200 includes a natural language preprocessing module 210, which splits the natural language description document into natural language logical units 220 and marks them.

[0030] The sub-logic generation unit 300 includes a keyword analysis module 310 and a keyword rule set 320. The keyword analysis module 310 uses a word segmentation algorithm to split the data of the logic unit 220 to form a keyword set 340. The keyword rule set 320 includes preset keyword processing rules 330 and keyword display and interaction methods. The keyword set 340 is matched according to the preset keyword processing rules 330, and display data is extracted from the matched keywords to form a sub-logic unit 350. The sub-logic unit 350 includes three dimensions: display data, display method, and interaction method.

[0031] The component type calculation unit 400 includes a sub-logic unit analysis module 410 and an atomic component library set 420. The atomic component library set 420 contains descriptive information about the characteristics of various components. The sub-logic unit analysis module 410 determines the component type of the sub-logic unit 350 by matching the sub-logic unit 350 with the descriptive information. The structured component tree generation unit 500 nests the sub-logic units 350 and the logic unit 220 with matched component types into a tree structure to form a structured component tree. The web page rendering unit 600 receives the structured component tree and renders the web front-end page. The web page rendering unit 600 includes...

[0032] Depending on the required granularity of splitting, the natural language preprocessing module 210 can split the natural language description document according to paragraphs, headings, or punctuation marks. For example, when the required granularity of splitting is relatively coarse, to avoid splitting parts of the same logical description into different logical units, it can be set to split according to paragraphs or headings, where the headings can be main headings, subheadings, Chinese numeral headings, or Arabic numeral headings; when the required granularity of splitting is relatively fine, to avoid splitting parts of different logical descriptions into the same logical unit, it can be set to split according to punctuation marks such as periods, semicolons, commas, and pauses; for complex requirements, paragraphs, headings, or punctuation marks can also be used in combination for splitting.

[0033] The word segmentation algorithm in the keyword analysis module 310 preferably uses Jieba word segmentation (an open-source Chinese NLP library algorithm) to split the words into several keyword sets 340.

[0034] The preset keyword processing rule 330 matches the keyword set 340. The matching degree does not have to be 100%. It can be set to a fixed value as needed, such as 90% or 85%. It can also be set to a dynamic value according to different contexts to improve the accuracy and applicability of the matching.

[0035] like Figure 4For the workflow of the sub-logic generation unit 300, the keyword processing rule 330 includes a keyword whitelist 331 and a keyword blacklist 332. When the keyword set 340 matches the keyword whitelist 331, a sub-logic unit 350 is formed normally. When the keyword set 340 matches the keyword blacklist 332, only additional information 360 is generated. When the keyword set 340 does not match either the keyword whitelist 331 or the keyword blacklist 332, the logic unit corresponding to the keyword set is defined as the logic unit to be analyzed 370. New keywords are determined by manual analysis and placed into the keyword whitelist 331 or the keyword blacklist 332 for re-matching.

[0036] The atomic component library set 420 of the component type calculation unit 400 contains descriptive information about the characteristics of various components. The sub-logic unit analysis module 410 analyzes and matches the display data, display method, and interaction method in the sub-logic unit 350 with the aforementioned descriptive information to determine the component type of the sub-logic unit 350. For example, the descriptive information about the characteristics of a component includes the display data, display method, and interaction method contained in the component. When the corresponding information of the sub-logic unit 350 matches the descriptive information of the component, the type of the sub-logic unit 350 is defined.

[0037] As can be seen from the above workflow, the logic unit 220 and the sub-logic unit 350 are a tree structure with a nested relationship. The structured component tree generation unit 500 is to construct the logic unit 220 and the sub-logic unit 350 into a tree structure, that is, a structured component tree. This structured component tree contains basic information such as the type, interaction, and data of various components.

[0038] The Web page rendering unit 600 has the atomic component library set 420 built in it. Through type matching, it can calculate the specific components that need to be rendered in the structured component tree, and then render the front-end Web page according to the component type, interaction, data and other information.

[0039] As a preferred embodiment, the sub-logic unit 350 further includes an association logic unit 380. The association logic unit 380 pre-sets second-level and third-level association terms based on the display data of the sub-logic unit 350. The sub-logic unit analysis module 410 determines the corresponding component type based on the second-level and third-level association terms. In other words, some management logic units 380 within the sub-logic unit 350 can be configured with corresponding association terms based on the display data, and these association terms also correspond to component types, which are determined by the sub-logic unit analysis module 410.

[0040] like Figure 5 The image shown is an example of a web front-end code generation system based on natural language documentation used in the web development of insurance products. The following section provides a detailed explanation of the workflow for this example.

[0041] The natural language description document is for the insurance product description, and its specific content is as follows:

[0042] Have you ever experienced any of the following symptoms, been told you have any of the following diseases, or received treatment for any of them? If so, please describe in detail: Respiratory diseases: such as recurrent cough, hemoptysis, asthma, dyspnea, chronic bronchitis, emphysema, pulmonary heart disease, respiratory failure, interstitial lung disease, bronchiectasis, pneumoconiosis / silicosis, tuberculosis, pulmonary fibrosis, asthma, pleurisy, pleural effusion, etc.

[0043] Secondary related keywords: onset time, disease name, hospital treated, current condition

[0044] Third-level related words: cured, improved, not cured

[0045] Atomized component set: radio buttons, time pickers, and corresponding description information for text input boxes.

[0046] Step 1: Input the insurance product description into the computer through the data input unit 100. The natural language preprocessing module 210 of the structured logic generation unit 200 splits the document by paragraph, and the above insurance product description is then classified into a logical unit 220.

[0047] Step 2: The keyword analysis module 310 uses a word segmentation algorithm to split the above insurance product description paragraph, i.e., logical unit 220, into a keyword set 340, i.e., the keyword set of "whether, treatment, disease, detailed description, respiratory system disease".

[0048] Step 3: The preset keyword processing rule 330 in the keyword rule set 320 sets the sentences containing the two keywords "whether" and "detailed description" to belong to the same sub-logical unit. Therefore, sub-logical unit one, "Have you ever had the following symptoms, been told that you have the following diseases or received treatment? If so, please describe in detail." The preset keyword processing rule 330 also sets the paragraph after "respiratory system diseases" to describe the disease. Sub-logical unit two, "such as recurrent cough, hemoptysis, asthma, dyspnea, chronic bronchitis, emphysema, pulmonary heart disease, respiratory failure, interstitial lung disease, bronchiectasis, pneumoconiosis / silicosis, tuberculosis, pulmonary fibrosis, asthma, pleurisy, pleural effusion, etc.", is extracted.

[0049] Step 4: Sub-logic unit two contains the keywords "disease" and "treatment." Sub-logic unit two also contains associated logic units, which include second-level associated terms such as "onset time, disease name, treating hospital, current condition" and third-level associated terms such as "cured, improved, not cured." The sub-logic unit analysis module 410 determines the corresponding component type based on the above associated terms, such as a time selection box and a text input box.

[0050] Step 5: The first sub-logic unit has two keywords, "whether" and "detailed description", and the corresponding display data is "yes" and "no". The display method is text display and the interaction method is form item operation.

[0051] Step 6: The sub-logic unit analysis module 410 obtains the data from the aforementioned sub-logic units and matches it with the description information of the atomic component library collection 420. For example, if we already know that there is "Yes" and "No" display data, as well as text display and form item operation data, we can determine that it is a radio button component. In the sub-logic units of Step 4, there are related logic units, which we will also extract for separate calculation and analysis. The second-level and third-level related terms also have built-in corresponding component types, such as time selection boxes, radio buttons, and text input boxes. These component types will be integrated with the data from the sub-logic units to generate the data that actually needs to be rendered.

[0052] Step 7: The structured component tree generation unit 500 generates a tree structure from the data that determines the component types, forming a structured component tree. This structured component tree contains basic information such as the type, interaction, and data of various components.

[0053] Step 8: The Web page rendering unit 600 incorporates the atomic component library set 420. Through type matching, it can calculate the specific components that need to be rendered in the structured component tree. Then, based on the component's type, interaction, data, and other information, it renders the front-end Web page, forming a structure like... Figure 5 The page shown. This rendering step is a standard technique in this field and will not be described in detail.

[0054] Those skilled in the art will understand that all or part of the steps of the above-described implementation method can be implemented by a program instructing related hardware. The program can be stored in a computer-readable recording medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

Claims

1. A system for automatically generating web front-end code based on natural language documentation, characterized in that, It includes a data input unit, a structured logic generation unit, a sub-logic generation unit, a component type calculation unit, a structured component tree generation unit, and a web page rendering unit, among which: The data input unit is used to input natural language documentation into the computer. The structured logic generation unit includes a natural language preprocessing module, which breaks down natural language documentation into logical units of natural language and marks them. The sub-logic generation unit includes a keyword analysis module and a keyword rule set. The keyword analysis module uses a word segmentation algorithm to split the data of the logic unit to form a keyword set. The keyword rule set includes preset keyword processing rules as well as keyword display methods and interaction methods. The keyword set is matched according to the preset keyword processing rules, and display data is extracted according to the matched keywords to form a sub-logic unit. The sub-logic unit includes three dimensions: display data, display method, and interaction method. The component type calculation unit includes a sub-logic unit analysis module and an atomized component library collection; the atomized component library contains descriptive information about the characteristics of various components; the sub-logic unit analysis module determines the component type of the sub-logic unit by matching the sub-logic unit with the descriptive information, and if the match is successful. The structured component tree generation unit nests the sub-logical units that match the component type and the logical units into a tree structure to form a structured component tree; The Web page rendering unit is used to receive the structured component tree and render the Web front-end page; The sub-logic generation unit performs similarity matching on the keyword set according to preset keyword processing rules, and the similarity of a successful match is either a dynamic value or a fixed value. In the sub-logic generation unit, the logic unit corresponding to the set of keywords that does not match the preset keyword processing rules is defined as the logic unit to be analyzed. The logic unit to be analyzed defines keywords through manual analysis, puts the keywords into the set of keyword rules, and performs re-matching. The preset keyword processing rules include a keyword whitelist and a keyword blacklist. When the keyword set matches the keyword whitelist, a sub-logic unit is generated; when the keyword set matches the keyword blacklist, only additional information is generated. The sub-logic unit also includes an association logic unit. The association logic unit has preset second-level and third-level association words based on the display data in the sub-logic unit. The sub-logic unit analysis module determines its corresponding component type based on the second-level and third-level association words.

2. The system for automatically generating web front-end code based on natural language documentation according to claim 1, characterized in that: The natural language preprocessing module splits the document according to one or more of the following: paragraphs, main headings, subheadings, Chinese numeral headings, Arabic numeral headings, periods, commas, and semicolons.

3. The application of the system for automatically generating web front-end code based on natural language documentation according to any one of claims 1-2 in the web development of insurance products.

Images