Page generation method, electronic equipment and program product

Abstract

Embodiments of the invention disclose a page generation method, an electronic device and a program product. The method comprises the steps of obtaining a product document of a specified item; inputting the product document into a first model, and outputting a page standard code of a specified item through the processing of the first model; inputting the page standard code and a pre-constructed retrieval enhancement generation data set corresponding to a specified item into a second model, and converting the page standard code into a page adaptive code of the specified item through a large model so as to realize a corresponding page based on the page adaptive code; wherein the page adaptation code is a page code adapted to the specified development framework, and the retrieval enhancement generation data set comprises a code specification of the specified development framework. According to the method, the product document can be converted into the page adaptive code adaptive to the development framework of the specified project, the specific technical stack appeal is met, the code specification of the specified development framework is fused into the model by retrieving the enhanced generated data set, and the accuracy of the generated result is improved.

Description

Technical Field

[0001] The present disclosure relates to artificial intelligence technology, and in particular to a page generation method, an electronic device, and a program product. Background Art

[0002] In the daily work of front-end developers and other non-front-end personnel, they often encounter business scenarios that require the implementation of corresponding front-end pages based on product document prototypes. The code used to implement front-end pages generated by the common front-end AI (Artificial Intelligence) auxiliary tools on the market cannot meet the specific needs of users. For example, the code generated by the front-end AI auxiliary tools is usually in a universal standard format. For example, some auxiliary tools can generate HTML (Hyper Text Markup Language) code. Usually, the generated universal standard format code cannot meet the specific technology stack requirements and cannot be adapted to the development framework of existing projects. It needs to be manually converted into code that is compatible with existing projects. Summary of the invention

[0003] In view of the above problems in the prior art, embodiments of the present disclosure provide a page generation method, an electronic device, and a program product.

[0004] A first aspect of an embodiment of the present disclosure provides a page generation method, including:

[0005] Get product documentation for a specified project;

[0006] Input the product document into the first model, and output the page standard code of the specified project after being processed by the first model;

[0007] The page standard code and the pre-built retrieval enhancement generation data set corresponding to the specified project are input into the second model, and the page standard code is converted into the page adaptation code of the specified project through the second model, so as to implement the corresponding page based on the page adaptation code; wherein the page adaptation code is the page code adapted to the specified development framework, and the retrieval enhancement generation data set includes the code specifications of the specified development framework.

[0008] As a possible implementation manner of the first aspect, the page standard code includes at least one of an HTML code and a CSS code.

[0009] As a possible implementation manner of the first aspect, the product document includes at least one of a prototype drawing and a design document; and the first model includes a large picture-based model.

[0010] As a possible implementation of the first aspect, the process of pre-building a search enhancement generation dataset corresponding to a specified project includes:

[0011] Get the development framework document corresponding to the specified project;

[0012] Extract the code specifications of the specified development framework from the development framework document and generate a retrieval enhancement generation dataset corresponding to the specified project.

[0013] As a possible implementation of the first aspect, converting the page standard code into the page adaptation code of the specified project through the second model includes:

[0014] Obtain code specifications for a specified development framework from a retrieval-enhanced generated dataset;

[0015] Based on the code specifications of the specified development framework, the page standard code is converted into the page adaptation code of the specified project.

[0016] As a possible implementation of the first aspect, the method further includes:

[0017] Optimizing the prompt words of the first model and the prompt words of the second model through multiple rounds of dialogue;

[0018] Generate page adaptation code for the specified project based on the optimized prompt words.

[0019] As a possible implementation of the first aspect, the method further includes:

[0020] Output the page adaptation code of the specified project to the preview tool;

[0021] Use the preview tool to display the page adaptation code.

[0022] As a possible implementation of the first aspect, the method further includes:

[0023] Output the page adaptation code of the specified project to the editing tool;

[0024] Receive modification information of the page adaptation code by the user through the editing tool;

[0025] The page adaptation code is modified based on the modification information.

[0026] A second aspect of the present disclosure provides a page generation device, including:

[0027] An acquisition unit, used to acquire product documents of a specified project;

[0028] A first processing unit, used for inputting a product document into a first model, and outputting a page standard code of a specified project after being processed by the first model;

[0029] The second processing unit is used to input the page standard code and the pre-built retrieval enhancement generation data set corresponding to the specified project into the second model, and convert the page standard code into the page adaptation code of the specified project through the second model, so as to implement the corresponding page based on the page adaptation code; wherein, the page adaptation code is the page code adapted to the specified development framework, and the retrieval enhancement generation data set includes the code specifications of the specified development framework.

[0030] As a possible implementation manner of the second aspect, the page standard code includes at least one of an HTML code and a CSS code.

[0031] As a possible implementation manner of the second aspect, the product document includes at least one of a prototype drawing and a design document; and the first model includes a large graphic model.

[0032] As a possible implementation of the second aspect, the apparatus further includes a construction unit, configured to pre-construct a search enhancement generation data set corresponding to a specified project, specifically configured to:

[0033] Get the development framework document corresponding to the specified project;

[0034] Extract the code specifications of the specified development framework from the development framework document and generate a retrieval enhancement generation dataset corresponding to the specified project.

[0035] As a possible implementation manner of the second aspect, the second processing unit is configured to:

[0036] Obtain code specifications for a specified development framework from a retrieval-enhanced generated dataset;

[0037] Based on the code specifications of the specified development framework, the page standard code is converted into the page adaptation code of the specified project.

[0038] As a possible implementation manner of the second aspect, the apparatus further includes an optimization unit, where the optimization unit is configured to:

[0039] Optimizing the prompt words of the first model and the prompt words of the second model through multiple rounds of dialogue;

[0040] Generate page adaptation code for the specified project based on the optimized prompt words.

[0041] As a possible implementation manner of the second aspect, the apparatus further includes a preview unit, where the preview unit is configured to:

[0042] Output the page adaptation code of the specified project to the preview tool;

[0043] Use the preview tool to display the page adaptation code.

[0044] As a possible implementation manner of the first aspect, the apparatus further includes an editing unit, where the editing unit is configured to:

[0045] Output the page adaptation code of the specified project to the editing tool;

[0046] Receive modification information of the page adaptation code by the user through the editing tool;

[0047] The page adaptation code is modified based on the modification information.

[0048] A third aspect of the present disclosure provides an electronic device, including:

[0049] A memory for storing a computer program product;

[0050] The processor is used to execute a computer program product stored in the memory, and when the computer program product is executed, the method of any one of the above-mentioned first aspects is implemented.

[0051] A fourth aspect of an embodiment of the present disclosure provides a computer-readable storage medium having computer program instructions stored thereon. When the computer program instructions are executed by a processor, the method of any one of the above-mentioned first aspects is implemented.

[0052] A fifth aspect of an embodiment of the present disclosure provides a computer program product, including computer program instructions, which, when executed by a processor, implement any of the methods described in the first aspect.

[0053] Based on the disclosed embodiment, the product document is converted into page standard code through the first model, and then the page standard code is converted into page adaptation code adapted to the development framework of the specified project through the second model, so that the finally generated page adaptation code can meet the specific technology stack requirements; and the code specifications of the specified development framework are integrated into the large model by retrieving the enhanced generated data set, thereby improving the accuracy of the generated results.

[0054] The technical solution of the present disclosure is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] The accompanying drawings, which constitute a part of the specification, illustrate embodiments of the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0056] The present disclosure may be more clearly understood from the following detailed description with reference to the accompanying drawings, in which:

[0057] Figure 1 A flowchart of an embodiment of a method for generating a page disclosed in the present invention;

[0058] Figure 2A schematic diagram of creating a data set for an embodiment of the page generation method disclosed herein;

[0059] Figure 3 A flowchart of an exemplary application embodiment of the page generation method disclosed herein;

[0060] Figure 4 This is a schematic diagram of the structure of an embodiment of the page generating device disclosed in the present invention;

[0061] Figure 5 This is a schematic diagram of the structure of an embodiment of the page generating device disclosed in the present invention;

[0062] Figure 6 A block diagram of an electronic device according to an embodiment of the present disclosure. DETAILED DESCRIPTION

[0063] The following first introduces the existing method, and then introduces the technical solution of the present application in detail.

[0064] The codes generated by the common front-end AI-assisted tools in the market cannot meet the requirements of specific technology stacks. For example, the codes generated by front-end AI-assisted tools are usually in a universal standard format, such as generating HTML code, which cannot be adapted to the development framework of a specific project and usually needs to be manually converted into code that is compatible with existing projects.

[0065] Based on the technical problems existing in the above-mentioned prior art, an embodiment of the present application provides a page generation method, which converts product documents into page standard codes through a first model, and then converts the page standard codes into page adaptation codes adapted to the development framework of a specified project through a second model, so that the finally generated page adaptation code can meet the specific technology stack requirements; and by retrieving the enhanced generated data set, the code specifications of the specified development framework are integrated into the model, thereby improving the accuracy of the generated results, thereby solving the technical problem mentioned in the prior art that the code generated by the front-end AI-assisted tool cannot be adapted to the development framework of the specified project.

[0066] Figure 1 The following is a flow chart of an embodiment of the method for generating a page of the present disclosure. Figure 1 As shown, it may specifically include:

[0067] Step S110, obtaining the product document of the specified project. The product document of the specified project may include pictures or texts describing the product functional interface and interactive design. The user may input the product document of the specified project into a page generation tool as the execution subject of the page generation method disclosed in the present invention. The page generation tool receives the product document of the specified project, and generates page codes adapted to the specified development framework based on the product document through the large model in subsequent steps.

[0068] Step S120, input the product document into the first model, and output the page standard code of the specified project after being processed by the first model. The first model may be the first large model. Large models are machine learning models with large-scale parameters and complex computing structures. These models are usually constructed by deep neural networks. The purpose of designing large models is to improve the expressiveness and predictive performance of the model, and to be able to handle complex tasks and data.

[0069] Among them, the page standard code may include the front-end page code written in a common language, such as HTML code. The pre-trained first model can be used to convert the product documents of the specified project into the page standard code. Generally, the common language has standard code specifications and templates, and the front-end page code written in the common language can improve the code quality and readability. Standard code specifications and templates can reduce coding errors, improve the consistency and readability of the code, and reduce the error rate.

[0070] In the disclosed embodiment, the process of generating page code is divided into two steps. In step S120, firstly, a page standard code is generated based on the product document of the specified project. The page standard code has high quality, good readability and low error rate, so the product document is first converted into the page standard code, which first ensures the quality and security of the code and lays the foundation for subsequent steps. Then in the subsequent step S130, the page standard code is converted into a page code that is compatible with the specified development framework. The advantage of the above step-by-step conversion is that further conversion is performed on the basis of the page standard code, which can reduce the error rate and improve the quality of code generation.

[0071] Step S130, input the page standard code and the retrieval enhanced generation (RAG) data set corresponding to the specified project in advance into the second model, and convert the page standard code into the page adaptation code of the specified project through the second model; wherein the page adaptation code is the page code adapted to the specified development framework, and the retrieval enhanced generation data set includes the code specification of the specified development framework. The second model can be the second largest model.

[0072] Among them, the working principle of RAG is to retrieve relevant information from large-scale data sets, and then use this information to guide the generation of text, thereby improving the quality and accuracy of predictions. RAG combines language models and information retrieval technology. Specifically, when the model needs to generate text, it first retrieves relevant information from a data set, and then uses the retrieved information to guide the generation of text, thereby improving the quality and accuracy of predictions. RAG generates content by referencing information from external data sets, and has strong interpretability and customization capabilities. The advantages of its model are strong versatility, instant knowledge updates, and the ability to provide more efficient and accurate information services.

[0073] The RAG dataset corresponding to the specified project is pre-built based on the code document of the specified project. First, the code document is obtained, the front-end development framework in the document is parsed, and the standards of the code framework and code format are extracted and sorted out to form the code specification of the specified development framework, generate the RAG dataset, and output the RAG dataset to the second largest model. The second largest model refers to the code specification of the specified development framework to generate page code that is adapted to the specified development framework, that is, the page adaptation code. The output page code meets the code specification of the specified development framework by training the second largest model. When outputting the result, the second largest model searches in the RAG dataset, obtains the code specification, and generates the page adaptation code based on the code specification.

[0074] The page adaptation code may include common React and Vue framework codes, which are directly adapted to the development framework of the specified project. React and Vue are JavaScript frameworks for building user interfaces.

[0075] In this step, through the pre-built RAG dataset, RAG can be used to make the generated page code meet the code specifications of the specified development framework. Compared with technologies that rely solely on language models for generation, RAG can better combine specifications and data to generate more accurate and reliable page codes. Traditional generation technology sometimes has the problem of "model hallucination", that is, the generated content does not match the facts or contains logical errors. RAG technology can effectively avoid this problem by introducing information from external datasets. By retrieving and verifying the code specifications in the external dataset, it can ensure that the generated page code is compatible with the specified development framework and improve the quality of the generated code.

[0076] In summary, based on the embodiments of the present disclosure, the product document is converted into page standard code through the first model, and then the page standard code is converted into page adaptation code adapted to the development framework of the specified project through the second model, so that the finally generated page adaptation code can meet the specific technology stack requirements; and the code specifications of the specified development framework are integrated into the large model through the RAG data set, thereby improving the accuracy of the generated results.

[0077] In one implementation, the page standard code includes at least one of HTML code and CSS (Cascading Style Sheets) code.

[0078] Among them, the page standard code can be the front-end page code written in common languages ​​such as HTML and CSS, which has good security and compatibility. Among them, HTML is a standard markup language used to create web pages. Its advantages lie in its simplicity and wide support; CSS can control the style and layout of the page to achieve colorful effects. The page standard code usually follows safe coding specifications, such as naming specifications, error handling, input validation, etc. Using page standard code can reduce common programming errors and improve the usability, reliability and overall quality of the software.

[0079] In one example, the product document input by the user is first converted into a static HTML file by calling the first large model. The prompt example of guiding the first large model is as follows:

[0080] 1) CSS Prompt (prompt for generating page style code):

[0081] You have mastered the skills of front-end design and TailwindCSS! Your task is to transform a detailed description or a striking image into stunning HTML using the versatility of TailwindCSS. Make sure to include both night mode and day mode in the code. Your design should be responsive and adaptable on all devices - be it desktop, tablet or mobile.

[0082] 2) HTML Prompt (prompt for generating HTML code for the page):

[0083] Here is a screenshot of the web component I want to replicate, please generate the HTML for it.

[0084] The first model generates standard page codes based on common languages ​​such as HTML and CSS based on the above prompt words. The standard page codes have good security and compatibility. It is easier to convert between other codes based on the standard page codes. The generation of standard page codes lays the foundation for further generation of page adaptation codes in subsequent steps.

[0085] In one embodiment, the product document includes at least one of a prototype drawing and a design document; and the first model includes a large graphic model.

[0086] Among them, the product document input by the user can be a picture or text. Product documents can include prototypes. Prototypes are a graphical tool used to display and verify product functions, interaction and interface design, and logical processes during product development. Prototypes are usually presented in a static or dynamic manner, and can include information such as page layout, interaction logic, and user flow. Usually, a prototype can include the interface of the software, display the functions therein, and present some dynamic effects such as page jumps and pop-up windows by adding interactive settings. In addition to the interface and interaction, the prototype can also include PRD (product requirement document), flow charts, mind maps, and other content. In addition, product documents can also include design documents. Design documents can include architecture design, detailed design, database design, etc., and can specifically include function allocation, module division, overall structure of the program, input and output, interface design, operation design, data structure design, and error handling design.

[0087] In one example, the OPENAPI big model can be used as the first model. First, the product document input by the user is converted into a static HTML file by calling the OPENAPI big model. Among them, OPENAPI is an open interface provided by the GPT-4o big model for developers. By calling the OPENAPI big model, the product document input by the user is converted into a static HTML file.

[0088] If the product document input by the user includes a prototype image, the large model of graph-generated text can be used as the first model. The large model of graph-generated text supports the graph-generated code function. By accessing the large model of graph-generated text, the prototype image is converted into at least one of the corresponding static HTML code and CSS code. In the subsequent steps, the second model is called to generate the corresponding page code adapted to the specified development framework. The prototype image can clearly and comprehensively display the functions and interaction methods of the product. The large model of graph-generated text can quickly generate standard page codes that match the prototype image, making the generated content more accurate and comprehensive.

[0089] In one embodiment, the process of pre-building a search enhancement generation data set corresponding to a specified project includes:

[0090] Get the development framework document corresponding to the specified project;

[0091] Extract the code specifications of the specified development framework from the development framework document and generate a retrieval enhancement generation dataset corresponding to the specified project.

[0092] See also Figure 2For example, the development framework document corresponding to the specified project can include the web page style, format and code of PC (computer terminal) and h5 (mobile terminal). Among them, h5 is a web page form for mobile terminal. H5 page, also known as HTML5 page, is a mobile terminal web page developed based on HTML5 technology. The component library of PC (computer terminal) includes antd, Next-UI (network topology drawing tool), etc. Among them, the full name of antd is ant-design, which is a high-quality UI (user interface) component library based on React. Next-UI toolkit is a network web application toolkit based on HTML5 / JavaScript, which provides a network-centric topology UI component with high performance and rich functions. The component library of h5 (mobile terminal) includes antd mobile. Antd-mobile is a mobile terminal React UI component library based on Ant Design design language. It provides a complete set of rich and easy-to-use components to help developers quickly build interfaces that meet modern mobile application standards. The components in each component inventory include button, form, table and other components.

[0093] See also Figure 2 For example, the development framework document corresponding to the specified project can also include third-party dependent resource libraries, such as echarts, rich text, markdown, etc. Among them, echarts is an open source visualization library based on JavaScript, mainly used for data visualization, providing a variety of chart types, including line charts, bar charts, pie charts, scatter charts, candlestick charts, etc., as well as maps and heat maps for geographic data visualization, relationship diagrams for relationship data visualization, parallel coordinates for multidimensional data visualization, etc.; rich text refers to the information that can be embedded in a document in multiple formats and styles, such as font colors, pictures, and tables; markdown is a lightweight markup language.

[0094] See also Figure 2 For example, the development framework document corresponding to the specified project can also include lucide-icon (lucide icon library), which is a lightweight, highly optimized scalable vector graphics (SVG) collection. Its directory structure includes SVG source code, icon libraries in different formats (such as React, Vue, etc.), static resources after construction, and metadata files of all icons. Commonly used icons include start icon, user icon, book icon, etc.

[0095] When organizing the development framework documents corresponding to the specified project, it is necessary to organize the technology stack and various technical frameworks used, sort out the standard formats of components such as tables and buttons from various component libraries or tools, extract the code specifications of the specified development framework, store the code specifications in the library, and generate the RAG data set corresponding to the specified project.

[0096] In the disclosed embodiment, by pre-building the RAG data set, the big model can access the code specifications of the specified development framework corresponding to the specified project. By combining the data obtained from the above external sources, the accuracy and efficiency of the big model information retrieval can be improved, and page codes that are closer to user needs can be generated, effectively improving the accuracy and reliability of the big model generation results.

[0097] In one embodiment, in step S130, converting the page standard code into the page adaptation code of the specified project by using the second model includes:

[0098] Obtain code specifications for a specified development framework from a retrieval-enhanced generated dataset;

[0099] Based on the code specifications of the specified development framework, the page standard code is converted into the page adaptation code of the specified project.

[0100] After the page standard code is generated, the corresponding technical framework of the specified project selected by the user can be obtained, and the page standard code can be translated into code compatible with the specified development framework selected by the user using the second model. Among them, the second model can be the second largest model. Specifically, the second largest model queries the code specification corresponding to the specified development framework in the RAG data set, optimizes the output of the code based on the RAG data set, and converts the page standard code into a format that conforms to the code specification, so that the generated page code is closer to the code specification and technology stack of the specified project. In one example, the translation prompt that guides the second largest model includes:

[0101] You are a front-end web developer specializing in $FRAMEWORK.

[0102] Given HTML and Javascript, generate a $FRAMEWORK component. Break the code into smaller parts.

[0103] Use components when necessary. Keep all code in one file. Use hook functions and convert to strings that meet Tailwind's format.

[0104] For similar label styles and repeated components that are repeated more than 3 times, use Tailwind's CSS to process them into one code. Comment when necessary.

[0105] In the above prompt words, "$FRAMEWORK" is the technical framework that needs to be translated.

[0106] In the disclosed embodiment, by optimizing the large model prompt and parsing the front-end development framework document, extracting and generating the RAG data set, the product document can be converted into common React and Vue framework codes, which can be directly applied to major projects, thus improving the work efficiency of front-end development. In addition, the specified technical framework document is integrated into the large model through RAG analysis, which improves the accuracy of the large model output.

[0107] In one embodiment, the above method further comprises:

[0108] Optimizing the prompt words of the first model and the prompt words of the second model through multiple rounds of dialogue; wherein the first model may be the first largest model, and the second model may be the second largest model;

[0109] Generate page adaptation code for the specified project based on the optimized prompt words.

[0110] If the page code generated in step S130 cannot meet the user's needs, the user can modify the prompt words in the next round of dialogue to address the existing problems, and then input the modified prompt words into the large model, repeating steps S120 and S130 to regenerate improved page codes. The user can optimize the prompt words of the first large model and the prompt words of the second large model through multiple rounds of dialogue, so that the finally generated page adaptation code can achieve the effect that satisfies the user.

[0111] Figure 3 The present invention is a flowchart of an exemplary application embodiment of the page generation method disclosed herein. Figure 3 The "agent" in the figure indicates the role played by the user. Among them, "agent1" indicates a product expert; "agent2" indicates a front-end expert; "agent3" indicates a testing expert; and "agent4" indicates a bug fixing expert. The above different roles use the page generation tool to modify the prompt words for the problems that need to be improved after a round of dialogue, and then enter the optimized prompt words into the big model in the next round of dialogue, and finally achieve the page effect that the user wants.

[0112] See also Figure 3For example, first the user inputs the product document of the specified project into the big model. The information input by the user may include screenshots, prompt words, PRD (product requirement document), product story, etc. related to the product information of the specified project. Among them, the product story refers to a detailed description of the product function from the user's perspective, aiming to capture specific functions or requirements. If the page code generated after a round of dialogue does not meet the user's needs, the user can modify the prompt words in the next round of dialogue based on the existing problems and input the updated information into the big model. The program flow for generating page code through multiple rounds of dialogue is as follows:

[0113] (1) Generate a page description

[0114] In response to the problems in the product code generated by the previous round of program running of the large model, the user provides UI component description information, such as a prototype image. In addition, the user can also enter the text description information of the page to be generated. The system receives the UI component description information provided by the user and the input text description information, and regenerates the description information of a page during the current round of program running based on the above input information.

[0115] (2) Generate a UI page code

[0116] To solve the problems in the product code generated by the previous round of program running of the big model, the user inputs the page description information and / or page name, UIdemo (UI component library), and highly matching icons (icons). The big model optimizes the code or generates code based on the above input information and regenerates a UI page code.

[0117] In particular, since the prototype image initially input to the big model may be incomplete, resulting in the page code generated in the previous round not meeting the user's needs, the user supplements the page description information and / or page name in this round of dialogue, modifies the prompt words in the form of dialogue, and instructs the big model to modify and optimize the generated code. For example, the page title can be instructed to be modified.

[0118] Among them, UIDemo is used to instruct the big model to generate a Demo structure, and no specific text content is required. Highly matching icons are used to indicate the effects that the big model needs to improve. For example, if the user wants a user icon, but the big model generates another icon that does not meet the requirements, the user indicates to replace the icon in the dialogue, or the user provides a specific icon style to the big model in the dialogue.

[0119] (3) Verify the UI code for error messages in the UI code

[0120] Among them, the error information of UI code includes: bad-syntax (syntax error), missing imports (missing imports), illegal-imports (illegal imports), etc. For example, some external tools and dependencies that need to be introduced may be missing, so there is a missing import, and the missing content needs to be supplemented. In addition, users can also point out the verification of UI code based on "code standard", "dependency analysis", and "bable abstract syntax tree". The above are the problems that users point out in the large model generated code by modifying the prompt words in the dialogue.

[0121] (4) Fix UI code

[0122] The user can modify the prompt words in the dialogue to give the following instructions to the large model: fix UI code, cause of error, location of error, how to fix, recheck, postcss processing, dynamic data processing, and repeat the processing of components up to 3 times into one code. Among them, postcss is a tool that uses JavaScript plug-ins to convert CSS code. "Dynamic data processing" means that the style may change with different environments, prompting the large model to do dynamic processing.

[0123] For each of the above links, in order to generate code that meets the requirements more accurately, users are required to use more professional terms to describe the requirements for generating pages in each round of dialogue to optimize the generated code.

[0124] (5) Real-time UI rendering

[0125] In this step 5, the online editor renders the project of each UI page in real time. The specific processing process includes: private deployment, cutting company S3, cutting company npm service, and operation and maintenance setting strong cache. Among them, "private deployment" means deploying software or services on the company's own server or data center; "cutting company S3" means switching companies and storing them in the company's service named S3; npm is the abbreviation of Node Package Manager (Node.js package manager), which is the default package management and distribution tool for Node.js; "company npm service" refers to a private npm warehouse, which is specifically used for the management and distribution of internal company modules; "strong cache" means that before the cache expires, the browser directly loads resources from the local cache without sending a request to the server. In an example, based on some large models provided by OPENAPI, some data may be stored at certain addresses in the cloud. During the data processing process, the data needs to be saved in some services of the company to prevent information leakage. For example, some codes generated after the conversation need to be stored locally and stored in the company's service named S3. It is necessary to switch to the company's S3 service, switch some npm services, and some static resource services on the front end. "Switching company" includes switching the stored address to the company's or user's address.

[0126] The specific processing of page rendering can also include: cache packaged results, serviceWorkercacheStory, multi-process construction, and external network CDN (content distribution network) acceleration. Among them, "cache packaged results" is to package the results, cache the generated code after packaging, so as to facilitate subsequent access to these generated results; "serviceWorker cacheStory" is a cache toolkit, a cache mechanism implemented by Service Worker, which allows web applications to work normally even in offline state; "external network CDN acceleration" is a method of using content distribution network (CDN) technology to deploy multiple server nodes worldwide to guide user requests to the node closest to the user to accelerate the transmission speed of content.

[0127] In one embodiment, the above method further comprises:

[0128] Output the page adaptation code of the specified project to the preview tool;

[0129] Use the preview tool to display the page adaptation code.

[0130] The page generation tool provided in the embodiment of the present application includes a preview tool, which supports users to preview the code generated by the large model in real time. The code can also be edited through an editor and the preview effect can be updated in real time. This method reduces the cost of human-computer communication to a certain extent and makes the page effect closer to the user's expected results.

[0131] In one embodiment, the above method further comprises:

[0132] Output the page adaptation code of the specified project to the editing tool;

[0133] Receive modification information of the page adaptation code by the user through the editing tool;

[0134] The page adaptation code is modified based on the modification information.

[0135] Specifically, the Code-Editor and Code-Viewer plug-ins can be used to provide editing of large model generated codes and real-time preview functions. Among them, the Code-Editor plug-in is a tool for editing code, which provides real-time syntax highlighting and editing functions, so that a better visualization and editing experience can be obtained when writing code. The Code-Viewer plug-in is a tool for viewing and analyzing code, which provides a variety of functions to help developers better understand and debug code.

[0136] The code output by the big model may not achieve the desired effect. If the code output by the big model deviates greatly from the expected effect after a round of conversation, you can continue another round of conversation and modify the prompt words to let the big model modify it again. For example, after the first round of conversation, if you find that the big model does not know which technology stack to use or what color the button is, the second round of conversation can tell the big model which technology stack to use or instruct it to modify the color of the button in the prompt words. If the generated result deviates little from the expected effect, you can modify the code through the above plug-in tool to accurately achieve the desired effect.

[0137] In summary, in the page generation tool in the embodiment of the present disclosure, the user's participation can include modifying the code and modifying the prompt words to achieve the desired effect. The tool provides developers with manual modification and real-time preview functions, which facilitates users to find problems in the code and greatly improves the efficiency of communicating with large model tools.

[0138] like Figure 4 As shown, the present disclosure also provides a corresponding embodiment of a page generation device. For the beneficial effects or technical problems solved by the device, please refer to the description of the method corresponding to each device, or refer to the description in the invention content, which will not be repeated here.

[0139] In an embodiment of the page generating device, the device comprises:

[0140] An acquisition unit 100 is used to acquire product documents of a specified project;

[0141] The first processing unit 200 is used to input the product document into the first model, and output the page standard code of the specified project after being processed by the first model;

[0142] The second processing unit 300 is used to input the page standard code and the pre-built retrieval enhancement generation data set corresponding to the specified project into the second model, and convert the page standard code into the page adaptation code of the specified project through the second model, so as to implement the corresponding page based on the page adaptation code; wherein the page adaptation code is the page code adapted to the specified development framework, and the retrieval enhancement generation data set includes the code specifications of the specified development framework.

[0143] In one implementation, the page standard code includes at least one of HTML code and CSS code.

[0144] In one embodiment, the product document includes at least one of a prototype drawing and a design document; and the first model includes a large graphic model.

[0145] like Figure 5 As shown, in one embodiment, the above device further includes a construction unit 400, which is used to pre-construct a search enhancement generation data set corresponding to a specified project, specifically for:

[0146] Get the development framework document corresponding to the specified project;

[0147] Extract the code specifications of the specified development framework from the development framework document and generate a retrieval enhancement generation dataset corresponding to the specified project.

[0148] In one implementation, the second processing unit 300 is configured to:

[0149] Obtain code specifications for a specified development framework from a retrieval-enhanced generated dataset;

[0150] Based on the code specifications of the specified development framework, the page standard code is converted into the page adaptation code of the specified project.

[0151] In one embodiment, the above device further includes an optimization unit 500, and the optimization unit 500 is used to:

[0152] Optimizing the prompt words of the first model and the prompt words of the second model through multiple rounds of dialogue;

[0153] Generate page adaptation code for the specified project based on the optimized prompt words.

[0154] In one embodiment, the above device further includes a preview unit 600, and the preview unit 600 is used to:

[0155] Output the page adaptation code of the specified project to the preview tool;

[0156] Use the preview tool to display the page adaptation code.

[0157] In one embodiment, the above device further includes an editing unit 700, and the editing unit 700 is used to:

[0158] Output the page adaptation code of the specified project to the editing tool;

[0159] Receive modification information of the page adaptation code by the user through the editing tool;

[0160] The page adaptation code is modified based on the modification information.

[0161] The page generation device of the embodiment of the present disclosure corresponds to the above-mentioned embodiments of the page generation method of the present disclosure in terms of specific implementation and beneficial technical effects. The relevant contents can be referenced to each other and will not be repeated here.

[0162] Below, reference Figure 6 The electronic device according to the embodiment of the present disclosure is described. The electronic device may be any one or both of the first device and the second device, or a stand-alone device independent of them, and the stand-alone device may communicate with the first device and the second device to receive the collected input signals from them.

[0163] Figure 6 A block diagram of an electronic device according to an embodiment of the present disclosure is illustrated.

[0164] like Figure 6 As shown, the electronic device includes one or more processors and memory.

[0165] The processor may be a central processing unit (CPU) or other forms of processing units having data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions.

[0166] The memory may store one or more computer program products, and the memory may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. Volatile memory may include, for example, random access memory (RAM) and / or cache memory (cache), etc. Non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program products may be stored on a computer-readable storage medium, and the processor may run the computer program products to implement the page generation method of each embodiment of the present disclosure and / or other desired functions.

[0167] In one example, the electronic device may further include: an input device and an output device, and these components are interconnected via a bus system and / or other forms of connection mechanisms (not shown).

[0168] In addition, the input device may also include, for example, a keyboard, a mouse, and the like.

[0169] The output device can output various information to the outside, including determined distance information, direction information, etc. The output device can include, for example, a display, a speaker, a printer, a communication network and a remote output device connected thereto, and the like.

[0170] Of course, to simplify, Figure 6 Only some of the components related to the present disclosure in the electronic device are shown, and components such as a bus, an input / output interface, etc. are omitted. In addition, according to specific application situations, the electronic device may further include any other appropriate components.

[0171] In addition to the above methods and devices, embodiments of the present disclosure may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps in the page generation method according to various embodiments of the present disclosure described in the above part of this specification.

[0172] The computer program product may be written in any combination of one or more programming languages ​​to write program code for performing the operations of the disclosed embodiments, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0173] In addition, an embodiment of the present disclosure may also be a computer-readable storage medium having computer program instructions stored thereon, which, when executed by a processor, enables the processor to execute the steps of the page generation method according to various embodiments of the present disclosure described in the above part of this specification.

[0174] Computer readable storage media can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example, but is not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0175] The basic principles of the present disclosure are described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, effects, etc. mentioned in the present disclosure are only examples and not limitations, and it cannot be considered that these advantages, strengths, effects, etc. are required by each embodiment of the present disclosure. In addition, the specific details disclosed above are only for the purpose of illustration and ease of understanding, and are not limitations. The above details do not limit the present disclosure to the necessity of adopting the above specific details to be implemented.

[0176] Each embodiment in this specification is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the system embodiment, since it basically corresponds to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0177] The block diagrams of the devices, apparatuses, equipment, and systems involved in this disclosure are only illustrative examples and are not intended to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagrams. As will be appreciated by those skilled in the art, these devices, apparatuses, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including," "comprising," "having," and the like are open words, referring to "including but not limited to," and can be used interchangeably therewith. The words "or" and "and" used herein refer to the words "and / or," and can be used interchangeably therewith, unless the context clearly indicates otherwise. The word "such as" used herein refers to the phrase "such as but not limited to," and can be used interchangeably therewith.

[0178] The method and apparatus of the present disclosure may be implemented in many ways. For example, the method and apparatus of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above order of steps for the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above, unless otherwise specifically stated. In addition, in some embodiments, the present disclosure may also be implemented as a program recorded in a recording medium, which includes machine-readable instructions for implementing the method according to the present disclosure. Therefore, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.

[0179] It should also be noted that in the apparatus, device and method of the present disclosure, each component or each step can be decomposed and / or recombined. Such decomposition and / or recombination should be regarded as equivalent solutions of the present disclosure.

[0180] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

[0181] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof.

Claims

1. A page generation method, characterized in that: include: Get product documentation for a specified project; Input the product document into a first model, and output the page standard code of the designated project after being processed by the first model; The page standard code and the pre-built retrieval enhancement generation data set corresponding to the designated project are input into a second model, and the page standard code is converted into a page adaptation code of the designated project through the second model, so as to implement a corresponding page based on the page adaptation code; wherein the page adaptation code is a page code adapted to a designated development framework, and the retrieval enhancement generation data set includes code specifications of the designated development framework.

2. The method according to claim 1, characterized in that The page standard code includes at least one of HTML code and CSS code.

3. The method according to claim 1, characterized in that The product document includes at least one of a prototype drawing and a design document; the first model includes a large graphic model.

4. The method according to any one of claims 1 to 3, characterized in that The process of pre-building the search enhancement generation data set corresponding to the specified project includes: Obtain the development framework document corresponding to the specified project; The code specification of the designated development framework is extracted from the development framework document to generate a search enhancement generation data set corresponding to the designated project.

5. The method according to any one of claims 1 to 3, characterized in that The converting the page standard code into the page adaptation code of the specified item by using the second model includes: Acquire the code specification of the specified development framework from the retrieval enhanced generated dataset; Based on the code specification of the designated development framework, the page standard code is converted into the page adaptation code of the designated project.

6. The method according to any one of claims 1 to 3, characterized in that The method further comprises: Optimizing the prompt words of the first model and the prompt words of the second model through multiple rounds of dialogue; Based on the optimized prompt words, a page adaptation code for the designated project is generated.

7. The method according to any one of claims 1 to 3, characterized in that The method further comprises: Outputting the page adaptation code of the specified project to a preview tool; The page adaptation code is displayed through the preview tool.

8. The method according to any one of claims 1 to 3, characterized in that The method further comprises: Outputting the page adaptation code of the designated project to an editing tool; Receiving, through the editing tool, modification information of the page adaptation code by the user; The page adaptation code is modified based on the modification information.

9. An electronic device, characterized in that: include: a memory for storing a computer program product; A processor is used to execute the computer program product stored in the memory, and when the computer program product is executed, it implements the method described in any one of claims 1 to 8.

10. A computer program product comprising computer program instructions, characterized in that When the computer program instructions are executed by a processor, the method described in any one of claims 1 to 8 is implemented.

Images