Page code generation method and apparatus

Abstract

This application discloses a method and apparatus for generating page code, belonging to the field of page development technology. The method includes: generating a third prompt based on a first prompt corresponding to a template project, a second prompt corresponding to a template page within the template project, and a requirement description of a target page belonging to the same page type as the template page; wherein the first prompt includes project-level constraint information of the template project, and the second prompt includes generation specifications for the template page; inputting the third prompt into an AI-based code generation tool, causing the code generation tool to generate initial code for the target page under the guidance of the third prompt; and determining the target code for the target page based on the initial code. This application can constrain the divergence of AI-generated code, enabling AI to generate expected code in a specified manner, significantly improving the first-time success rate, thereby improving page development efficiency.

Description

Technical Field

[0001] This application relates to the field of page development technology, specifically to a method and apparatus for generating page code. Background Technology

[0002] With the development of large language model technology, the application of AI (artificial intelligence) in code generation is becoming increasingly widespread. Various AI-assisted development tools have also emerged in the front-end development field, such as GitHubCopilot and ChatGPT, which can generate corresponding code based on natural language descriptions. However, due to the lack of unified standards and constraints, the generated code is too divergent and free, resulting in a low success rate and consequently low efficiency in front-end page development. Summary of the Invention

[0003] This application provides a method and apparatus for generating page code, which aims to solve the problem of low efficiency in front-end page development.

[0004] Firstly, a method for generating page code is provided, including: Based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page that belongs to the same page type as the template page, a third prompt word is generated; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; Inputting a third prompt word into an AI-based code generation tool allows the tool to generate the initial code for the target page under the guidance of the prompt word. Based on the initial code, determine the target code for the target page.

[0005] In some embodiments, determining the target code of the target page based on the initial code includes: Obtain the first quality check report, which is generated by performing a quality check on the initial code; Based on the first quality inspection report and the initial code, the target code was determined.

[0006] In some embodiments, determining the target code based on the first quality inspection report and the initial code includes: If the code quality of the initial code meets the preset quality standards based on the first quality inspection report, the initial code is determined to be the target code.

[0007] In some embodiments, determining the target code based on the first quality inspection report and the initial code includes: If the code quality of the initial code does not meet the preset quality standards as determined by the first quality inspection report, a code generation tool is used to optimize the initial code based on the first quality inspection report to obtain optimized code. Obtain a second quality inspection report, which is generated by performing a quality inspection on the optimized code; Based on the second quality inspection report and the optimized code, the target code was determined.

[0008] In some embodiments, the initial code quality check method includes: Perform static code analysis on the initial code to check for syntax errors and potential problems; Check if the initial code conforms to the preset coding standards; and Verify that the functionality of the initial code meets the requirements.

[0009] In some embodiments, project-level constraint information includes the directory structure of the template project, configuration file content, coding standards, and code information of the template pages.

[0010] In some embodiments, the generation specifications include page type, page function description, technology stack, code style, data structure style, and interaction logic style.

[0011] In some embodiments, the page type is a form page, and the generation specifications also include form field type specifications; or, the page type is a details page, and the generation specifications also include layout display specifications and data type processing specifications; or, the page type is a chart page, and the generation specifications also include chart type specifications, data processing specifications, and chart configuration specifications.

[0012] In some embodiments, the requirements description includes a data structure description, a functional description, a file save path, and a file naming convention; The third prompt includes project-level constraint information and the specific requirements of the target page. The specific requirements are generated based on the project-level constraint information, the above-mentioned generation specifications, and the above-mentioned requirement descriptions, including the data structure, functional requirements, technical requirements, file save path, and file naming conventions of the target page.

[0013] Secondly, a page code generation device is provided, comprising: The prompt word generation unit is configured to generate a third prompt word based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page that belongs to the same page type as the template page; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; The code generation unit is configured to input a third prompt word into an AI-based code generation tool, so that the code generation tool generates the initial code for the target page under the guidance of the third prompt word. The unit is configured to determine the target code of the target page based on the initial code.

[0014] Beneficial effects: The solution provided in this application generates a third prompt based on a first prompt word corresponding to a template project, a second prompt word corresponding to a template page within the template project, and a requirement description of a target page belonging to the same page type as the template page. The first prompt word includes project-level constraint information for the template project, and the second prompt word includes the generation specifications for the template page. The third prompt word is then input into an AI-based code generation tool, which, guided by the third prompt word, generates initial code for the target page. Based on the initial code, the target code for the target page is then determined. This solution, through a hierarchical prompt word guidance mechanism of "project-level constraints + page type-level specifications + personalized requirements," can constrain the divergence of AI-generated code, enabling AI to generate the expected code in a specified manner, significantly improving the first-time success rate and thus increasing page development efficiency. Attached Figure Description

[0015] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 This is an exemplary structural diagram of the template project provided in the embodiments of this application; Figure 2 This is a flowchart of a page code generation method provided in an embodiment of this application; Figure 3 This is a schematic diagram of the AI ​​code generation process provided in the embodiments of this application; Figure 4 This is another flowchart of the page code generation method provided in the embodiments of this application; Figure 5 This is a schematic diagram of the code quality inspection process provided in the embodiments of this application; Figure 6 This is a flowchart of a rapid front-end page development method based on AI imitation provided in an embodiment of this application; Figure 7 This is a schematic diagram of the structure of the page code generation device provided in the embodiments of this application. Detailed Implementation

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

[0018] In the description of this application, it should be understood that the terms "center," "longitudinal," "lateral," "length," "width," "thickness," "upper," "lower," "front," "rear," "left," "right," "vertical," "horizontal," "top," "bottom," "inner," and "outer," etc., indicating orientation or positional relationships based on the orientation or positional relationships shown in the accompanying drawings, are used only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation, and therefore should not be construed as a limitation of this application. Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Thus, features defined with "first" and "second" may explicitly or implicitly include one or more of the stated features. In the description of this application, "a plurality of" means two or more, unless otherwise explicitly specified.

[0019] "A and / or B" includes the following three combinations: A only, B only, and a combination of A and B.

[0020] The use of "applies to" or "configured to" in this application implies open and inclusive language, which does not exclude the applicability to or configuration to devices performing additional tasks or steps. Additionally, the use of "based on" implies openness and inclusivity, because processes, steps, calculations, or other actions "based on" one or more conditions or values ​​may in practice be based on additional conditions or values ​​beyond those stated.

[0021] In this application, the term "exemplary" is used to mean "used as an example, illustration, or description." Any embodiment described as "exemplary" in this application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is provided to enable any person skilled in the art to make and use this application. Details are set forth in the following description for purposes of explanation. It should be understood that those skilled in the art will recognize that this application can be made without using these specific details. In other instances, well-known structures and processes are not described in detail to avoid obscuring the description of this application with unnecessary detail. Therefore, this application is not intended to be limited to the embodiments shown, but is consistent with the broadest scope of the principles and features disclosed in this application.

[0022] With the development of large language model technology, AI is being applied more and more widely in the field of code generation. Various AI-assisted development tools have also emerged in the front-end development field, such as GitHub Copilot and ChatGPT, which can generate corresponding code based on natural language descriptions.

[0023] Traditional front-end development methods include: Manual coding: Developers manually write front-end page code, which is inefficient and involves a lot of repetitive work; Using code generators or scaffolding tools can generate some standardized code structures, but their flexibility is limited. Template-based code generation: Uses a preset code template to fill in specific content.

[0024] The relevant technologies mainly include: Traditional front-end development methods involve developers manually writing front-end page code, which is inefficient and involves a lot of repetitive work. Simple code generation tools: Code generators based on fixed templates can generate some standardized code structures, but they can usually only generate fixed code structures, lacking flexibility and unable to be customized according to specific needs; AI code assistants, such as GitHub Copilot, can generate code snippets based on contextual hints, but they often fail to fully utilize the AI's intelligent understanding capabilities, resulting in low-quality generated code.

[0025] The related technologies have the following drawbacks: Unclear understanding of requirements: Because AI in related technologies often cannot accurately understand the developers' intentions, the generated code deviates from the actual requirements; related technologies lack clear requirements descriptions and constraint mechanisms. AI-generated code is too unconventional and free: due to the lack of unified standards and constraints, the code generated by AI has inconsistent styles and is difficult to maintain; related technologies lack standardized template projects to constrain the generation behavior of AI. Without constraints, errors are often subtle: AI-generated code may contain potential errors that are often difficult to detect, increasing the cost of debugging and fixing; related technologies lack quality control mechanisms to verify the correctness of the generated code. Lack of flexibility and personalization: Template-based code generation tools typically generate only fixed code structures, lacking flexibility and unable to be customized to specific needs; Inability to fully utilize AI's intelligent understanding capabilities: Related tools often fail to fully utilize AI's intelligent understanding capabilities, resulting in low-quality generated code.

[0026] In view of this, the embodiments of this application provide a page code generation method and apparatus. Through a hierarchical prompting mechanism of "project-level constraints + page type-level specifications + personalized requirements", the divergence of AI-generated code can be constrained, enabling AI to generate expected code in a specified manner, significantly improving the success rate, thereby improving page development efficiency and solving at least one of the above-mentioned technical problems.

[0027] Below, we will first explain the names of the relevant technical terms involved in this application: AI parody: refers to the method of using AI technology to generate new code based on existing code templates, with templates constraining the structure and specifications of AI-generated code; Front-end page: The front-end part of the user interface, which usually includes HTML (hypertext markup language), CSS (cascading style sheets), and JavaScript code to implement user interaction functions; Template projects: These projects have a general and universal project structure that can be used as a reference for imitation, and include a complete directory structure and coding standards; Prompt words: Text descriptions that the AI ​​model can understand, used to guide the AI ​​in generating specific content, including information such as functional requirements, data structure, and interaction logic; Coding standards: The code writing standards and best practices followed in programming, including naming conventions, formatting conventions, and architectural conventions; token: The basic unit for AI models to process text, transforming code and descriptive information into a digital representation that the model can understand; Static analysis: A method of detecting errors and problems by analyzing source code without running the program; Typical pages: Page types with common reusability requirements, such as list pages and form pages, containing common functions and interaction logic; Front-end frameworks: Software frameworks used to build user interfaces, such as React and Vue, providing capabilities such as component-based development and state management; among them, React and Vue are both JavaScript frameworks used to build user interfaces, etc. Code quality check: The process of checking the generated code for its standardization, functionality, and maintainability.

[0028] In some embodiments, the page code generation method provided in this application can be executed by any platform, system, server, device, device cluster, or apparatus with computing and processing capabilities.

[0029] In some embodiments, the solution provided in this application includes a preprocessing stage and a page code generation stage.

[0030] During the preprocessing stage, steps a through d as shown below can be performed.

[0031] In step a, determine the template project and template page that need to be imitated. The template project and template page that need to be imitated must meet the following requirements: The template project that needs to be imitated should be general and universal, such as a backend management project; The template page that needs to be imitated should be a typical page with common reuse requirements, such as a list page with CRUD functions; Template projects should be built using mainstream front-end frameworks, such as React and Vue. Follow industry best practices and coding standards; It has good scalability and maintainability; Includes a complete project structure and typical page examples.

[0032] It should be noted that the template page to be imitated can be a single template page, or multiple template pages of different page types. A single page type can be, for example, a list page, a form page, a detail page, or a chart page, etc.

[0033] In step b, the template project and template pages are constructed. This involves initializing the template project according to requirements, creating the template pages and related code in the specified directory, and ensuring the template project has a clear structure and standardized code.

[0034] Figure 1 This is an exemplary structural diagram of the template project provided in this application embodiment. For example... Figure 1 As shown, the project structure of a template project can include configuration files and a `src` directory. Furthermore, the project structure can also include a test directory and a documentation directory. Configuration files include `package.json`, `webpack.config.js`, and `tsconfig.json`. `package.json` can implicitly specify the usage rules for dependency libraries. `webpack.config.js` can define build rules. `tsconfig.json` can define TypeScript coding rules. The `src` directory includes `components` (general components), `pages` (page components), `utils` (utility functions), and `api` (API requests). The test directory includes `unit` (unit tests) and `integration` (integration tests). The documentation directory includes `README.md` (documentation file) and other documentation files.

[0035] In step c, the template project is converted into a text token that AI can recognize. This text token is information in a prompt word format, which can be called the first prompt word. In practice, a template project may include a directory structure, configuration files, template pages, and coding standards. Directory structure information, key configuration file content, core code of template pages, and coding standards can be extracted from the template project. These extracted information are then formatted into a prompt word format that AI can understand to obtain the first prompt word. The first prompt word includes the project-level constraint information of the template project. Further, the project-level constraint information includes the directory structure, configuration file content, coding standards, and code information of the template pages.

[0036] by Figure 1 Taking the `src` directory as an example, the directory structure corresponding to the `src` directory in the first prompt could be something like: "Directory structure: src / components / general component directory, src / pages / page component directory, src / utils / utility function directory, src / api / interface request directory." The coding standards in the first prompt could be something like: "Coding standards: Use TypeScript, use functional components, use CSS Modules for CSS, use Axios for data requests, etc." Here, CSS Modules is a CSS modularization solution. Its core is to process CSS files using build tools (such as Webpack), generating a unique hash value for each CSS class name to achieve scope isolation of CSS styles and avoid style conflicts between different components. Axios is an HTTP client tool that supports browsers and Node.js environments, used to initiate network requests (such as retrieving interface data, submitting form data, etc.).

[0037] In step d, a modification prompt word (hereinafter referred to as the second prompt word) is created for the template page. The second prompt word is different for different template pages. The second prompt word includes the generation specifications of the template page. These generation specifications may include, for example, page function descriptions, data structure specifications, and interaction logic specifications. Further, the generation specifications may also include page type, technology stack, and code specifications. The page types involved in this application may include at least one of list pages, form pages, detail pages, and chart pages. List pages may include functions such as data display, pagination, and search. Form pages may include functions such as data entry, validation, and submission. Detail pages may include functions such as data display and related information display. Chart pages may include functions such as data visualization.

[0038] For example, for a template page with a list page type, the second prompt word for that template page could include the following generation specifications: Page type: List page; Features: Data display, pagination, search, CRUD operations; Technology stack: React + TypeScript + Ant Design Pro; Code style guidelines: Use functional components, hooks, TypeScript type definitions, and modular organization; Data structure specifications: Interface definitions are placed in the type.ts file; Enumerated constants are placed in the enums.ts file; API interface definitions are placed in the api.ts file; Form components are placed in the form.tsx file; Page components are placed in the page.tsx file; Interaction logic specifications: Use useRef to manage table actions; Asynchronous operations use async / await; A unified request function handles API calls; Refresh the table data after the operation is successful; Use ModalForm to handle adding / editing; A confirmation dialog box will be displayed to process the deletion operation. Ant Design Pro is an enterprise-grade UI component library based on React, providing out-of-the-box components such as ProTable and ModalForm, suitable for backend management system development. Hooks are functions in React used to implement state management, lifecycle management, and other functionalities (such as useRef and useState) within functional components. Table actions can represent table operations. async / await indicates asynchronous / waiting behavior.

[0039] For template pages with a form type, the generation specifications in the second prompt for that template page may also include form field type specifications. Furthermore, these generation specifications may include special requirements. For example, the generation specifications could be: Page type: Form page; Features: Data entry, field validation, submission and saving, and draft saving; Technology stack: React + TypeScript + Ant Design Pro; Code style guidelines: Use functional components, hooks, form validation, and state management; Data structure specifications: The form data model is placed in the type.ts file; Form validation rules are placed in the validate.ts file; Form field configurations are placed in the fields.ts file; The API submission logic is placed in the api.ts file; Form components are placed in the form.tsx file; Interaction logic specifications: Use FormInstance to manage form state; Implement field-level validation and form-level validation; Supports automatic saving of drafts; Format and validate the data before submission; Supports form reset and refill; User-friendly error message display; Supports step-by-step forms and multi-tab forms; Form field type specifications: Text input: ProFormText, ProFormTextArea; Numeric input: ProFormDigit, ProFormMoney; Selectors: ProFormSelect, ProFormRadio, ProFormCheckbox; Date and time: ProFormDatePicker, ProFormDateRangePicker; File upload: ProFormUpload; Cascader option: ProFormCascader; Switch: ProFormSwitch; Special handling requirements: Linked fields: dynamically shown / hidden based on the values ​​of other fields; Conditional validation: Set different validation rules based on business logic; Asynchronous data: Dropdown options need to be retrieved from the API; Complex data: Handling arrays and object-type data; Access control: Fields are read-only or disabled. It should be noted that the form field type specification above lists form controls from the Ant Design Pro component library. Among them, ProFormText is a single-line text input box. ProFormTextArea is a multi-line text input box. ProFormDigit is a numeric input box. ProFormMoney is a numeric input box (for amounts). ProFormSelect is a numeric or text selection box. ProFormRadio is a numeric or text radio button. ProFormCheckbox is a numeric or text checkbox. ProFormDatePicker is a date picker. ProFormDateRangePicker is a date range picker. ProFormUpload is a file upload control. ProFormCascader is a cascading numeric or text selector (e.g., province / city selection). ProFormSwitch is a toggle selector, allowing selection of either numeric or text.

[0040] For template pages with a page type of "details page," the generation specifications in the second prompt for that template page may also include layout and display specifications and data type handling specifications. Furthermore, these generation specifications may include special requirements. For example, the generation specifications could be: Page type: Details page; Features: Data display, information viewing, operation entry, status display; Technology stack: React + TypeScript + Ant Design Pro; Code style guidelines: Use functional components, hooks, data retrieval, and access control; Data structure specifications: The detailed data model is placed in the type.ts file; Detailed configuration options are located in the config.ts file; The data retrieval logic is placed in the api.ts file; The details component is located in the detail.tsx file; The action components are placed in the actions.tsx file; Interaction logic specifications: Get detailed data when the page loads; Supports data refresh and real-time updates; Provides entry points for editing, deleting, and other operations; Supports data export and printing functions; A user-friendly display of error and empty states; Breadcrumb navigation and back functionality; Function visibility under access control; Layout and display guidelines: Basic Information Card: Displays key data fields; Detailed information area: Displays various types of information in groups; Status indicators: Use labels and colors to distinguish status; Operation area: Floating button or fixed operation bar; Related data: Quick access to related records; Historical records: Operation logs, change history; Attachments: Previews and downloads of files and images; Data type handling: Time formatting: Displays a user-friendly time format; Text truncation: Displaying long text with omissions; Number formatting: Formats for amounts, percentages, etc.; Enumeration value conversion: mapping status codes to text; Image display: thumbnails and preview function; Link processing: Recognition of phone numbers, email addresses, and website addresses; Special functional requirements: Data editing: inline editing, pop-up editing; Status transition: approval, status change; Message notification: Alerts for status changes; Data correlation: Display of upstream and downstream data; Audit trail: Viewing operation logs. For any template page, when the page type is a chart page, the generation specifications in the second prompt for that template page can also include chart type specifications, data processing specifications, and chart configuration specifications. Furthermore, these generation specifications can also include special requirements. For example, the generation specifications could be: Page type: Chart page; Features: Data visualization, statistical analysis, chart interaction, data filtering; Technology stack: React + TypeScript + ECharts + Ant Design Pro; Code style guidelines: Use functional components, hooks, chart configurations, and responsive design; Data structure specifications: The chart data model is placed in the type.ts file; Chart configuration options are located in the charts.ts file; The data processing logic is placed in the process.ts file; API interface definitions are placed in the api.ts file; The chart component is placed in the chart.tsx file; The filtering components are placed in the filter.tsx file; Interaction logic specifications: Supports time range filtering and data dimension switching; Switch between chart types (bar chart, line chart, pie chart, etc.); Data drill-down and chart linkage; Chart zoom, pan, and reset functions; Data export (images, Excel, PDF); Charts are displayed in full screen and adapted to responsive design. Real-time data updates and automatic refresh; Chart type specifications: Trend analysis: line chart, area chart; Comparative analysis: bar chart, column chart; Percentage analysis: pie chart, donut chart; Distribution analysis: scatter plot, histogram; Relationship analysis: Relationship diagrams, tree diagrams; Geographical analysis: maps, heat maps; Integrated dashboard: a combination of various charts; Data processing specifications: Data aggregation: grouping and statistical analysis by time and dimension; Data formatting: numeric, percentage, currency formats; Exception handling: handling empty data and erroneous data; Performance optimization: pagination and lazy loading for large datasets; Caching strategy: Local caching of frequently used data; Data validation: Checking the integrity and accuracy of data; Chart configuration guidelines: Theme style: color, font, and margin configuration; Legend explanation: Legend location and display method; Tooltip: Data tooltip when the mouse hovers over the data. Axis settings: tick marks, labels, and titles; Animation effects: Loading and updating animation configurations; Interactive behaviors: click, zoom, and selection effects; Special functional requirements: Drill-down analysis: Drilling down data from summary to detail; Warning indicators: Marking and alerting users to abnormal data; Target comparison: Comparison between actual and target values; Trend prediction: Trend prediction based on historical data; Custom configuration: Chart parameters that users can adjust; Multi-screen adaptation: Display optimization for different resolutions. By comparing the secondary prompts corresponding to template pages of different page types, the significant differences between the different page types can be clearly seen in the following aspects: Functional differences: List page: Data list display, search, pagination, batch operations; Form page: Data entry, field validation, submission and saving, draft saving; Details page: Information viewing, status display, operation entry, data association; Chart page: Data visualization, statistical analysis, chart interaction, data filtering; Differences in component usage: List pages: ProTable, SearchForm, ModalForm; Form pages: ProForm series components, custom validators; Details page: Descriptions, Card, Timeline, Badge; Chart page: ECharts component, DatePicker, and Select linked; Data processing differences: List page: paginated data, search parameters, batch operations; Form page: form data, validation rules, data formatting; Details page: Individual data, state mapping, related data; Chart page: aggregated data, statistical indicators, and dimension switching; Differences in interaction logic: List page: table operations, search filtering, data refresh; Form page: Field linkage, real-time validation, draft saving; Details page: status transition, access control, operation feedback; Chart page: Chart switching, data drill-down, export and sharing.

[0041] The above differences fully illustrate the necessity of creating specific secondary prompts for different template pages, ensuring that AI can generate accurate code that meets the needs of specific page types.

[0042] It should be noted that the differences in component usage listed above refer to advanced components in the Ant Design Pro component library. Among them, ProTable is Ant Design Pro's classic query page component (including classic query page functions such as tables, filtering, searching, and pagination). SearchForm is Ant Design Pro's form control specifically for filtering items. ModalForm is Ant Design Pro's form control specifically for pop-ups. ProForm is Ant Design Pro's basic form control, an enhanced encapsulation of Ant Design Pro form controls (submission, validation, and feedback). Descriptions is a specific style of description control in Ant Design Pro. Card is Ant Design Pro's card component. Timeline is Ant Design Pro's timeline component. Badge is Ant Design Pro's badge component. ECharts is an open-source charting library for creating various charts. DatePicker is Ant Design Pro's time picker component. Select is Ant Design Pro's selector component.

[0043] Figure 2 This is a flowchart of a page code generation method provided in an embodiment of this application. For example... Figure 2 As shown, the method includes the following steps: S201: Generate a third prompt based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page that belongs to the same page type as the template page; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; S203: Input the third prompt word into the AI-based code generation tool, so that the code generation tool generates the initial code of the target page under the guidance of the third prompt word; S205: Based on the initial code, determine the target code for the target page.

[0044] Figure 2The corresponding implementation provides a solution that generates a third prompt based on a first prompt word corresponding to the template project, a second prompt word corresponding to the template page within the template project, and a requirement description of the target page belonging to the same page type as the template page. The first prompt word includes project-level constraint information for the template project, and the second prompt word includes the generation specifications for the template page. Then, the third prompt word is input into an AI-based code generation tool, which, guided by the third prompt word, generates initial code for the target page. Based on the initial code, the target code for the target page is then determined. This solution, through a hierarchical prompt word guidance mechanism of "project-level constraints + page type-level specifications + personalized requirements," can constrain the divergence of AI-generated code, enabling AI to generate the expected code in a specified manner, significantly improving the first-time success rate and thus increasing page development efficiency.

[0045] Steps S201 to S205 will be explained below.

[0046] In step S201, a third prompt is generated based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page belonging to the same page type as the template page. The first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specifications of the template page. For explanations of template projects, template pages, the first prompt word, and the second prompt word, please refer to the relevant explanations above; they will not be repeated here.

[0047] For example, the target page's requirements description includes a data structure description, functional description, file save path, and file naming conventions. The third prompt includes project-level constraints and the specific requirements of the target page. These specific requirements are generated based on the project-level constraints, the aforementioned generation specifications, and the aforementioned requirements description, including the target page's data structure, functional requirements, technical requirements, file save path, and file naming conventions. It should be understood that the third prompt can be used to instruct that the template page be modified according to the specific requirements of the target page, using the template project as a reference, and that the target page be created under the specified file save path.

[0048] Taking the same page type as the list page and the target page as the user management query page as an example, the third prompt word, in addition to including the above-mentioned project-level constraint information, may also include the following: Please refer to the directory structure and coding standards of the above template project to create a new user management query page.

[0049] Specific requirements: Data structure: User information includes fields such as user ID, username, email, mobile phone number, creation time, and status; Functional requirements: User list display (with pagination support); Search by username; Add a user (pop-up form); Edit user information; Delete user (confirmation dialog box); User status switching (enabled / disabled); Technical requirements: Use React+TypeScript+Ant Design Pro; Follow the directory structure and naming conventions of the template project; Maintain the same code style and error handling as the template; File save path: src / pages / UserManage / ; type.ts(type definition); enums.ts (enumeration constants); api.ts (API interface); form.tsx (form component); page.tsx (page component); Please ensure that the generated code maintains consistency and adheres to the specifications of the template project. In step S203, a third prompt word is input into an AI-based code generation tool, causing the tool to generate initial code for the target page under the guidance of the prompt word. This code generation tool may include GitHub Copilot, ChatGPT, or other code generation tools based on large language models.

[0050] In step S205, the target code of the target page is determined based on the initial code. In one implementation, the initial code can be directly used as the target code.

[0051] Taking the first prompt word as the template prompt word, the second prompt word as the modification prompt word, and the third prompt word as the code generation prompt word, and using an AI-based code generation tool as an AI code tool, the code generation process can be summarized as follows: Figure 3 As shown. Among them, Figure 3 This is a schematic diagram of the AI ​​code generation process provided in an embodiment of this application. For example... Figure 3 As shown, the code generation process includes: preparing a template project; extracting template information; generating template hints; creating modification hints for the template pages in the template project; creating code hints; inputting the code hints into the AI ​​code tool; AI generating code; and obtaining the generation result.

[0052] Figure 4This is another flowchart of the page code generation method provided in the embodiments of this application. For example... Figure 4 As shown, the method includes the following steps: S401: Generate a third prompt based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page that belongs to the same page type as the template page; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; S403: Input the third prompt word into the AI-based code generation tool, so that the code generation tool generates the initial code of the target page under the guidance of the third prompt word; S405: Obtain the first quality inspection report, which is generated by performing a quality inspection on the initial code; S407: If the code quality of the initial code meets the preset quality standard based on the first quality inspection report, the initial code is determined to be the target code; S409: If the code quality of the initial code does not meet the preset quality standard based on the first quality inspection report, the initial code is optimized using a code generation tool based on the first quality inspection report to obtain optimized code; S411: Obtain the second quality inspection report, which is generated by performing a quality inspection on the optimized code; S413: Determine the target code based on the second quality inspection report and the optimized code.

[0053] Figure 4 The corresponding implementation provides a solution that, through a hierarchical prompting mechanism of "project-level constraints + page type-level specifications + personalized requirements," can constrain the divergence of AI-generated code, enabling AI to generate the expected code in a specified manner, significantly improving the first-time success rate and thus increasing page development efficiency. Furthermore, the code quality check step ensures the quality of the generated code, reduces error debugging costs, and solves the problem of obscure errors in AI-generated code in related technologies. Moreover, the closed-loop process of code quality checking and optimization ensures that the final generated code meets quality requirements.

[0054] The explanations for steps S401 to S403 can be found in the previous descriptions and will not be repeated here. Steps S405 to S413 will now be explained.

[0055] To effectively improve code quality, this application introduces a code quality inspection mechanism to check the code generated by the code generation tool. For example, static code analysis is performed to check for syntax errors and potential problems (security issues, logical problems), to check whether the code conforms to preset coding standards, and to verify whether the functional implementation meets the requirements. The technical means of verifying whether the functional implementation meets the requirements can include: using automated testing, unit testing, integration testing, and end-to-end testing. For example, test cases can be written using testing frameworks such as Jest and Mocha to verify the correctness of component rendering, data flow logic, and user interaction responses.

[0056] It should be noted that the quality checks performed on the code in this application can be performed manually or by executing the corresponding automated test scripts; no specific limitations are made here.

[0057] Based on this, after generating the initial code for the target page, a quality check can be performed on the initial code, and then step S405 can be executed.

[0058] In step S405, a first quality inspection report is obtained, which is generated by performing a quality inspection on the initial code. The quality inspection method for the initial code includes: performing static code analysis on the initial code to check for syntax errors and potential problems; checking whether the initial code conforms to preset coding standards; and verifying whether the functional implementation of the initial code meets the requirements.

[0059] Next, based on the first quality inspection report, it can be determined whether the code quality of the initial code meets the preset quality standards. If it is determined that the code quality of the initial code meets the preset quality standards, step S407 can be executed. If it is determined that the code quality of the initial code does not meet the preset quality standards, step S409 can be executed. The preset quality standards can be designed according to actual needs and are not specifically limited here.

[0060] In step S407, if the code quality of the initial code meets the preset quality standard based on the first quality inspection report, the initial code is determined to be the target code.

[0061] In step S409, if the code quality of the initial code does not meet the preset quality standard based on the first quality inspection report, the initial code is optimized using a code generation tool based on the first quality inspection report to obtain optimized code.

[0062] When using a code generation tool to optimize the initial code based on the first quality check report, the first quality check report and the initial code can be input into the code generation tool, which can then perform the following optimization operations: Identify specific problems and problem types based on the first quality inspection report; Sort the problems by priority (syntax errors > functional defects > performance issues > code specifications); Adopt corresponding optimization strategies for problems of different problem types in the initial code: Syntax errors: Automatically correct the syntax structure, import statements, and type declarations; Performance issues: Optimize the algorithm complexity, reduce repeated calculations, and optimize the rendering logic; Code specifications: Adjust the naming convention, code format, and improve comments; Architecture issues: Refactor the module structure, decouple components, and optimize the dependency relationship; Generate optimized code.

[0063] In step S411, obtain the second quality inspection report, which is generated by performing a quality inspection on the optimized code. Then, in step S413, based on the second quality inspection report and the optimized code, determine the target code. For example, when it is determined based on the second quality inspection report that the code quality of the optimized code meets the preset quality standard, determine the optimized code as the target code. When it is determined based on the second quality inspection report that the code quality of the optimized code does not meet the preset quality standard, return to step S403 for regeneration or perform manual correction.

[0064] Taking the code generated by the AI code tool as an example of AI-generated code, the quality inspection process for this code can be as Figure 5 shown. Among them, <00003**********>is a schematic diagram of the code quality inspection process provided by an embodiment of the present application. As Figure 5 shown, perform static code analysis on the AI-generated code to check compliance with the coding specification (i.e., check whether the code conforms to the preset coding specification) and verify the correctness of function implementation (i.e., verify whether the function implementation of the code meets the requirements), thereby generating a code quality inspection report. Based on the code quality inspection report, determine whether the code quality meets the requirements (preset quality standard). If it is determined that the code quality meets the requirements, determine that the code quality is qualified and end the quality inspection of the code. If it is determined that the code quality does not meet the requirements, determine that the code that does not meet the requirements needs to be processed, such as automatic correction or manual adjustment, so as to regenerate or correct the code, and then return to the quality inspection to perform a quality inspection on the regenerated or corrected code.

[0065] [[ID=2******>Taking the first prompt word as the text token, the second prompt word as the modification prompt word, and the third prompt word as the code generation prompt word as an example, generally speaking, the process of the front-end page rapid development method based on AI imitation in the present application can be as Figure 6 shown. Among them, Figure 6 is a flowchart of the front-end page rapid development method based on AI imitation provided by an embodiment of the present application. As Figure 6As shown, the development method includes: identifying the template project and template page to be imitated; constructing the template project and template page; converting the template project into an AI-recognizable text token; creating modification prompts for the template page; creating code generation prompts; and generating code using an AI code tool. Further, the development method also includes: development is complete when code generation is completed using the AI ​​code tool; or, the development method also includes: after generating code using the AI ​​code tool, performing a code quality check; determining whether the code quality meets the requirements; if the code quality meets the requirements, development is complete; if the code quality does not meet the requirements, it is determined that code optimization and adjustment are needed, thus returning to AI code generation to generate code using the AI ​​code tool.

[0066] The solution provided in this application can solve problems such as unclear understanding of requirements, overly divergent code generation, high maintenance costs, and difficulty in finding errors when using AI to generate code in front-end development. It provides a method for rapid front-end page development that can constrain the divergence of AI-generated code and enable AI to generate expected code in a specified manner, thereby improving development efficiency and reducing maintenance costs.

[0067] The solution provided in this application has the following beneficial effects: Improve code consistency: By using standardized template projects, the divergence of AI-generated code is constrained, ensuring code consistency and maintainability, and solving the problem of inconsistent AI-generated code styles in related technologies; Improve the accuracy of requirement understanding: By providing clear requirement descriptions and modification prompts, the accuracy of AI-generated code is improved, the bias in requirement understanding is reduced, and the problem of AI failing to accurately understand the developer's intent in related technologies is solved. Improve code quality: By implementing code quality inspection steps, the quality of generated code is ensured, error detection costs are reduced, and the problem of subtle errors in AI-generated code in related technologies is solved. Good versatility and scalability: This solution is applicable to different front-end frameworks and page types, and has good versatility and scalability, solving the problem of lack of flexibility and personalized adjustment in related technologies; Significantly improves development efficiency: Significantly improves front-end page development efficiency, reduces repetitive work, and allows developers to focus on implementing business logic; Make full use of AI's intelligent understanding capabilities: By converting template projects into AI-recognizable text tokens, AI can better understand the project structure and coding standards, thus making full use of AI's intelligent understanding capabilities; Improve code generation accuracy: By using modification prompts on typical pages, more precise guidance can be provided for different types of pages, thus improving the accuracy of code generation. Ensuring code quality: Through a closed-loop process of code quality checks and optimization adjustments, we ensure that the final generated code meets quality requirements.

[0068] Figure 7 This is a schematic diagram of the structure of the page code generation device provided in an embodiment of this application. For example... Figure 7 As shown, the page code generation device includes: The prompt word generation unit 701 is configured to generate a third prompt word based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page that belongs to the same page type as the template page; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; The code generation unit 702 is configured to input a third prompt word into an AI-based code generation tool, so that the code generation tool generates the initial code of the target page under the guidance of the third prompt word. Unit 703 is configured to determine the target code of the target page based on the initial code.

[0069] The description of the page code generation device and its various units, as well as their beneficial effects, can be found in the relevant descriptions of the method embodiments above, and will not be repeated here.

[0070] This application also provides an electronic device, including a memory and a processor. The memory stores a computer program, and when the computer program is executed by the processor, it implements the method of any of the above embodiments.

[0071] This application also provides a computer-readable storage medium storing a computer program thereon, which is loaded by a processor to execute the steps of any of the methods described in the above embodiments. In this application, the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM), etc.

[0072] This application also provides a computer program product, including a computer program / instruction, which, when executed by a processor, implements the method of any of the above embodiments.

[0073] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions in other embodiments.

[0074] The page code generation method and apparatus provided in the embodiments of this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

Claims

1. A method for generating page code, characterized in that, include: Based on the first prompt word corresponding to the template project, the second prompt word corresponding to the template page in the template project, and the requirement description of the target page that belongs to the same page type as the template page, a third prompt word is generated; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; The third prompt word is input into an AI-based code generation tool, which then generates the initial code for the target page under the guidance of the third prompt word. Based on the initial code, the target code of the target page is determined.

2. The page code generation method according to claim 1, characterized in that, Based on the initial code, the target code of the target page is determined, including: Obtain a first quality inspection report, which is generated by performing a quality inspection on the initial code; Based on the first quality inspection report and the initial code, the target code is determined.

3. The page code generation method according to claim 2, characterized in that, Based on the first quality inspection report and the initial code, the target code is determined, including: If the code quality of the initial code meets the preset quality standard based on the first quality inspection report, the initial code is determined to be the target code.

4. The page code generation method according to claim 2, characterized in that, Based on the quality inspection report and the initial code, the target code is determined, including: If, based on the first quality inspection report, it is determined that the code quality of the initial code does not meet the preset quality standard, the code generation tool is used to optimize the initial code based on the first quality inspection report to obtain optimized code. Obtain a second quality inspection report, which is generated by performing a quality inspection on the optimized code; Based on the second quality inspection report and the optimized code, the target code is determined.

5. The page code generation method according to claim 2, characterized in that, The quality check method for the initial code includes: Perform static code analysis on the initial code to check for syntax errors and potential problems; Check whether the initial code conforms to the preset encoding specifications; and Verify whether the functionality of the initial code meets the requirements.

6. The page code generation method according to claim 1, characterized in that, The project-level constraint information includes the directory structure of the template project, the content of the configuration file, the coding standards, and the code information of the template page.

7. The page code generation method according to claim 1, characterized in that, The generation specifications include page type, page function description, technology stack, code style, data structure style, and interaction logic style.

8. The page code generation method according to claim 7, characterized in that, The page type is a form page, and the generation specifications also include form field type specifications; or... The page type is a details page, and the generation specifications also include layout display specifications and data type processing specifications; or... The page type is a chart page, and the generation specifications also include chart type specifications, data processing specifications, and chart configuration specifications.

9. The page code generation method according to any one of claims 1-8, characterized in that, The requirements description includes data structure description, function description, file save path, and file naming conventions; The third prompt includes the project-level constraint information and the specific requirements of the target page. The specific requirements are generated based on the project-level constraint information, the generation specifications, and the requirement description, including the data structure, functional requirements, technical requirements, file save path, and file naming specifications of the target page.

10. A page code generation device, characterized in that, include: The prompt word generation unit is configured to generate a third prompt word based on a first prompt word corresponding to a template project, a second prompt word corresponding to a template page in the template project, and a requirement description of a target page that belongs to the same page type as the template page; wherein, the first prompt word includes the project-level constraint information of the template project, and the second prompt word includes the generation specification of the template page; The code generation unit is configured to input the third prompt word into an AI-based code generation tool, so that the code generation tool generates the initial code of the target page under the guidance of the third prompt word; The determining unit is configured to determine the target code of the target page based on the initial code.

Images