Front-end page generation method, front-end page generation device and electronic equipment
By receiving natural language description information and using a large language model to generate front-end page code, the problem of low efficiency and high technical threshold in traditional front-end development is solved, and interactive page development is realized.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- BEIJING JINGDONG YUANSHENG TECH CO LTD
- Filing Date
- 2024-12-09
- Publication Date
- 2026-06-09
Smart Images
Figure CN122173082A_ABST
Abstract
Description
Technical Field
[0001] The embodiments disclosed herein relate to the field of front-end page development technology, specifically to a front-end page generation method, a front-end page generation apparatus, and an electronic device. Background Technology
[0002] Currently, front-end page development primarily utilizes traditional web development technologies, coupled with UI (User Interface) frameworks. Developers need to manually write a significant amount of code and require a certain level of programming skill and experience.
[0003] However, the inventors discovered that traditional front-end development requires manually writing a large amount of repetitive code, resulting in low development efficiency and long development cycles. Furthermore, it requires mastery of multiple programming languages and frameworks, demanding a high level of technical skill from developers. This makes it impossible for ordinary users to develop front-end pages.
[0004] The information disclosed in this background section is only intended to enhance the understanding of the background of the inventive concept, and therefore may contain information that does not constitute prior art known to those skilled in the art. Summary of the Invention
[0005] The summary portion of this disclosure is intended to provide a brief overview of the concepts, which will be described in detail in the detailed description portion. This summary portion is not intended to identify key or essential features of the claimed technical solutions, nor is it intended to limit the scope of the claimed technical solutions.
[0006] Some embodiments of this disclosure provide front-end page generation methods, front-end page generation apparatuses, electronic devices, computer-readable media, and computer program products to solve one or more of the technical problems mentioned in the background section above.
[0007] In a first aspect, some embodiments of this disclosure provide a front-end page generation method, comprising: responding to receiving page description information representing the generation of a front-end page; searching for target configuration document data matching the page description information from a pre-built database, wherein the database stores configuration document data for page element development; generating model prompt information based on the page description information and the target configuration document data; inputting the model prompt information into a pre-trained large language model to generate target front-end code data; and generating the front-end page indicated by the page description information based on the target front-end code data.
[0008] In some embodiments, the database is a vector database; and searching for target configuration document data that matches the page description information from a pre-built database includes: converting the page description information into vector data; performing similarity matching on the vector data in the pre-built vector database; and using configuration document vector data with similarity values greater than a preset threshold as target configuration document data.
[0009] In some embodiments, the configuration document data further includes the generation format of the front-end code of page elements; and inputting model prompt information into a pre-trained large language model to generate target front-end code data, including: inputting model prompt information into a pre-trained large language model, and generating target front-end code data in the corresponding format for each page element in the front-end page indicated by the page description information.
[0010] In some embodiments, generating a front-end page indicated by page description information based on target front-end code data includes: dynamically compiling the target front-end code data to generate a front-end module; loading the front-end module into a pre-generated page frame; and rendering the loaded page to generate the front-end page indicated by page description information.
[0011] In some embodiments, dynamically compiling the target front-end code data to generate a front-end module includes: parsing and transforming the target front-end code data to obtain the code data of each page element; and generating a corresponding front-end module based on the code data of each page element.
[0012] In some embodiments, the method further includes: in response to determining that resource data for generating a front-end module is missing in a pre-integrated resource library during the dynamic compilation of target front-end code data, obtaining and loading the resource data from an external source to generate the front-end module.
[0013] In some embodiments, the method further includes: displaying the generated front-end page to the user through a browser; and in response to receiving page modification information sent by the user, generating new model prompt information based on the page modification information and previously generated target front-end code data to generate the modified front-end page.
[0014] In some embodiments, the method further includes: in response to detecting a user input operation in the interactive area of the browser, determining the information entered by the user input operation as page description information, and generating a blank page frame.
[0015] Secondly, some embodiments of this disclosure provide a front-end page generation apparatus, including: a document data matching unit configured to, in response to receiving page description information representing the generation of a front-end page, search for target configuration document data matching the page description information from a pre-built database, wherein the database stores configuration document data for page element development; a prompt information generation unit configured to generate model prompt information based on the page description information and the target configuration document data; a code data generation unit configured to input the model prompt information into a pre-trained large language model to generate target front-end code data; and a front-end page generation unit configured to generate the front-end page indicated by the page description information based on the target front-end code data.
[0016] In some embodiments, the database is a vector database; and the document data matching unit is further configured to convert page description information into vector data; perform similarity matching on the vector data in a pre-built vector database; and use the configuration document vector data with a similarity value greater than a preset threshold as the target configuration document data.
[0017] In some embodiments, the configuration document data further includes the generation format of the front-end code for page elements; and the prompt information generation unit is further configured to input the model prompt information into a pre-trained large language model, and generate target front-end code data in the corresponding format for each page element in the front-end page indicated by the page description information.
[0018] In some embodiments, the front-end page generation unit is further configured to dynamically compile the target front-end code data to generate a front-end module; load the front-end module into a pre-generated page frame; and render the loaded page to generate the front-end page indicated by the page description information.
[0019] In some embodiments, the front-end page generation unit is further configured to parse and transform the target front-end code data to obtain the code data of each page element; and generate a corresponding front-end module based on the code data of each page element.
[0020] In some embodiments, the front-end page generation apparatus further includes a resource acquisition unit configured to, in response to determining that resource data for generating a front-end module is missing in a pre-integrated resource library during the dynamic compilation of target front-end code data, acquire and load the resource data from an external source to generate the front-end module.
[0021] In some embodiments, the front-end page generation apparatus further includes a page display and modification unit, configured to display the generated front-end page to the user through a browser; and in response to receiving page modification information sent by the user, to generate new model prompt information based on the page modification information and previously generated target front-end code data, so as to generate the modified front-end page.
[0022] In some embodiments, the front-end page generation apparatus further includes a page frame generation unit configured to, in response to detecting a user input operation in the interactive area of the browser, determine the information entered by the user input operation as page description information, and generate a blank page frame.
[0023] Thirdly, some embodiments of this disclosure provide an electronic device, including: one or more processors; and a storage device having one or more programs stored thereon, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the front-end page generation method described in any of the implementations of the first aspect above.
[0024] Fourthly, some embodiments of this disclosure provide a computer-readable medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the front-end page generation method described in any of the implementations of the first aspect above.
[0025] Fifthly, some embodiments of this disclosure provide a computer program product, including a computer program that, when executed by a processor, implements the front-end page generation method described in any of the implementations of the first aspect above.
[0026] The various embodiments disclosed above have the following beneficial effects: the front-end page generation methods of some embodiments of this disclosure can reduce the development difficulty of front-end pages, meet the page development needs of different users, and improve page development efficiency. Specifically, traditional front-end page development often requires developers to master multiple programming languages and frameworks, and to manually write a large amount of repetitive code. This not only results in low development efficiency but also places high demands on the technical capabilities of developers.
[0027] Based on this, the disclosed front-end page generation method proposes an interactive page development implementation method. Users can develop front-end pages by inputting page description information in natural language. This reduces the technical skill requirements for developers and meets the needs of different users. Furthermore, target configuration document data matching the page description information can be retrieved from the database. The target configuration document data and page description information can be combined into context as model prompts to call a large language model to generate target front-end code data. Thus, the front-end page desired by the user is generated based on the target front-end code data. In other words, the model can automatically generate front-end code and then the front-end page based on the user's natural language instructions. This reduces or avoids manual coding and improves page development efficiency. Additionally, by using configuration document data as part of the model input, the quality of the generated code can be improved. This further reduces or avoids manual code modification, thereby further improving page development efficiency. Attached Figure Description
[0028] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and elements are not necessarily drawn to scale.
[0029] Figure 1 This is a flowchart of some embodiments of the front-end page generation method disclosed herein;
[0030] Figure 2 This is an architecture diagram of an exemplary system to which some embodiments of this disclosure can be applied;
[0031] Figure 3 These are flowcharts of some other embodiments of the front-end page generation method disclosed herein;
[0032] Figure 4 This is a schematic diagram of the structure of some embodiments of the front-end page generation apparatus disclosed herein;
[0033] Figure 5 This is a schematic diagram of the structure of an electronic device suitable for implementing some embodiments of the present disclosure. Detailed Implementation
[0034] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.
[0035] It should also be noted that, for ease of description, only the parts relevant to the invention are shown in the accompanying drawings. Unless otherwise specified, the embodiments and features described in this disclosure can be combined with each other.
[0036] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.
[0037] Furthermore, the terms “a” and “a plurality” used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as “one or more”.
[0038] Figure 1 A flow 100 is illustrated, representing some embodiments of a front-end page generation method according to this disclosure. The method may include the following steps:
[0039] Step 101: In response to receiving page description information representing the generation of the front-end page, search for target configuration document data that matches the page description information from a pre-built database.
[0040] In some embodiments, the execution entity of the front-end page generation method of this disclosure, such as Figure 2 The browser or server shown can connect to other electronic devices (such as...) via wired or wireless connections. Figure 2 The system establishes a communication connection with the user terminal. Here, the user can interact with the execution entity through the user terminal to develop the front-end page. As an example, the user terminal can display an interactive interface for interacting with the execution entity, such as the application page of a page development tool or a browser page. The user can input page description information on this interactive interface. For example, a browser page can have an interactive area where the user can perform input operations. The page description information can be any information used to describe page attributes, such as page size, background color, and element information of page elements. By inputting the page description information, the user can tell the execution entity the style and content of the front-end page they want to generate.
[0041] Understandably, the page descriptions described above are typically user-generated natural language descriptions from the user's perspective. For example: generating a table page with a generation time filter; table columns displaying tracking number, generation time, and tracking status; and a pagination control at the bottom of the table. Compared to traditional page development methods, this method allows users to develop front-end pages simply by inputting natural language page descriptions, without requiring the technical expertise or coding skills of professional developers or technicians. This reduces the knowledge requirements for users, thereby expanding the applicability of this method.
[0042] In some embodiments, upon receiving page description information, the executing entity can determine to execute the front-end page generation process. In this case, the executing entity can retrieve target configuration document data matching the page description information from a pre-built database. The database stores configuration document data used for page element development.
[0043] As an example, the executing entity can pre-store a key information table. First, the executing entity can extract key information from the page description information based on the key information table, such as calculating the similarity between the page description information and the key information. The key information can be major information related to page development. Next, it can search the database for target configuration document data that matches the key information. This achieves information standardization and improves the accuracy of subsequent document matching. Optionally, the key information table can also store configuration document identifiers corresponding to the key information. Then, the executing entity can retrieve the target configuration document data indicated by the configuration document identifier from the database based on the configuration document identifier.
[0044] In some application scenarios, the aforementioned database can be a vector database. In this case, the executing entity can first convert the page description information into vector data. Next, the vector data can be matched for similarity in a pre-built vector database. Then, the configuration document vector data with a similarity value greater than a preset threshold can be used as the target configuration document data.
[0045] In other words, before using the method disclosed herein for front-end page development, it is necessary to initialize vector storage and embed relevant development documentation to generate vector indexes. Then, the vector database is called to perform vector similarity matching, extracting all data related to the page description information from the vector database. For example, if the user-input description includes tables, it is necessary to match all configuration documents and usage examples related to tables in the UI library, API (Application Programming Interface) documentation, etc.
[0046] Step 102: Generate model hint information based on the page description information and target configuration document data.
[0047] In some embodiments, the executing entity can generate model hints (i.e., prompts) based on the page description information and target configuration document data in step 101. The generation method is also unrestricted. For example, the two types of data can be organized into a paragraph according to a set format to serve as model hints. For instance, please generate a front-end page for "page description information" based on the following "target configuration document data". Alternatively, the executing entity can concatenate the two types of data to generate model hints.
[0048] Step 103: Input the model prompt information into the pre-trained large language model to generate the target front-end code data.
[0049] In some embodiments, the executing entity can input the model prompt information generated in step 102 into a pre-trained Large Language Model (LLM), thereby generating target front-end code data through the model. The Large Language Model (LLM) is typically a deep learning model trained with a large amount of text data, capable of generating natural language text or understanding the meaning of language text. It is understood that the LLM here can be obtained by fine-tuning a pre-trained LLM using sample code data. This satisfies the usage scenarios of front-end page development while improving the model's training efficiency.
[0050] Furthermore, the configuration document data can also specify the generation format of the front-end code for page elements. In this case, after the executing entity inputs the model prompt information into the pre-trained large language model, the model can generate target front-end code data in the corresponding format for each page element in the front-end page indicated by the page description information. That is, when calling the large model to generate code, the format can be manually specified in the prompt words. This restriction is usually written in the relevant development documentation of the Prompt mentioned above, thus limiting the code format returned by the large model. Such restrictions are to ensure that the required code format is obtained stably and to avoid parsing failures in subsequent steps. As an example, the target front-end code data here can be in SFC format, or other front-end code formats (such as HTML, Hypertext Markup Language). Among them, SFC usually represents a single-file component, which is a custom file format that uses syntax similar to Hypertext Markup Language.
[0051] It's worth noting that with the increasing prevalence of large-scale models, some developers are using them to automatically generate front-end code. However, most existing code generation from large-scale models is based on probabilistic generation using existing code or rules from common training data. The generated code has limited quality and flexibility, making it difficult to meet the needs of real-world applications. Experienced developers often need to repeatedly debug and modify the code to achieve usability.
[0052] The method disclosed herein embeds relevant development documentation into vectors and injects them into prompts because the subsequent dynamic compilation and component rendering phases require code in a specific format to compile and run successfully. However, this specific format is missing from the training data of large models, and some configuration documents may not be up-to-date. Therefore, we need to inform the large model of this lacking knowledge context when generating code. This improves the quality and diversity of the generated code, enhances its usability and the model's applicability, and reduces the likelihood of manual modifications.
[0053] Step 104: Based on the target front-end code data, generate the front-end page indicated by the page description information.
[0054] In some embodiments, the executing entity can generate the front-end page indicated by the page description information based on the target front-end code data generated in step 103. As an example, the executing entity can compile the target front-end code data, or call a third-party tool to compile the target front-end code data, thereby obtaining each page element. Then, the page elements can be arranged in a layout to generate the front-end page indicated by the page description information.
[0055] Optionally, the executing entity can dynamically compile the target front-end code data to generate a front-end module. This front-end module is then loaded into a pre-generated page framework, thereby rendering the loaded page and generating the front-end page indicated by the page description information. It's understandable that dynamic compilation generally refers to the step of converting the generated front-end code into front-end components in real-time, without bundling it using a packaging tool.
[0056] Specifically, the executing entity can parse and transform the target front-end code data to obtain the code data of each page element. For example, it can parse the SFC format front-end code output by the model and compile it into page elements such as templates, scripts, and styles. It can also load code conversion tools to convert certain code formats to the target format. For instance, a local SCSS loader can convert the SCSS code used in the sample section into CSS code that the browser can recognize. SCSS is typically a preprocessor language written in a scripting language. Alternatively, online conversion tools from public resources can be used to convert Hypertext Markup Language (HTML) into a dynamic programming language. Then, based on the code data of each page element, a corresponding front-end module (ESM, ECMAScript Module) can be generated. A front-end module is typically a modular system for dynamic programming languages, allowing developers to divide code into independent, reusable modules. In current front-end development standards, ESM is a standard modularization standard. While other modularization standards exist, ESM is currently more widely used, and generating an ESM module facilitates loading.
[0057] Furthermore, during the dynamic compilation of the target front-end code data, if it is determined that the pre-integrated resource library lacks the resource data needed to generate the front-end module, this resource data can be obtained and loaded from external sources to generate the front-end module. This can be achieved by injecting external dependencies as parameters for constructing the front-end module. For example, for some third-party libraries that are not pre-integrated, such as a rendered page wanting to display a bar chart, a third-party charting library (such as Echarts, Plotly, etc.) is required as a dependency. However, the original system of the executing entity may not have this library, so a dependency needs to be dynamically loaded from external sources to support chart drawing.
[0058] It should be noted that the page frame described above is typically the underlying frame page, serving as the base for dynamically rendered pages. This page frame is usually a template frame with blank content. Therefore, the page frame can be selected from a pre-generated set of frames, or it can be generated upon receiving page description information.
[0059] As described above, the front-end page generation method of some embodiments of this disclosure proposes an interactive page development implementation method. Users can develop front-end pages by inputting page description information described in natural language. This reduces the technical skill requirements for developers and meets the needs of different users. Furthermore, target configuration document data matching the page description information can be retrieved from a database. The target configuration document data and page description information can be combined into context as model prompt information to call a large language model to generate target front-end code data. Thus, the front-end page desired by the user is generated based on the target front-end code data. In other words, the model can automatically generate front-end code based on the user's natural language instructions, thereby generating the front-end page. This reduces or avoids manual coding and improves page development efficiency. Additionally, by using configuration document data as part of the model input, the quality of the generated code can be improved. This further reduces or avoids manual code modification, thereby further improving page development efficiency.
[0060] In such Figure 2 In the application scenario shown, the user (i.e., user 1...n) can input a natural language description of the page to the browser through the interaction area, so as to generate the front-end page.
[0061] The browser side can handle user interaction and generate the basic framework. After receiving the user's natural language description, it generates a blank page framework according to a dynamically compiled format and displays a skeleton screen to the user, which will be used to mount the dynamically generated ESM module in the future. At the same time, it enters a loading state, using the user's natural language description as input parameters to call the server-side interface.
[0062] The server can provide API services and LLM calls. Upon receiving a request from the browser, the server uses a web development framework (such as FastAPI web, Django, etc.) and an application data framework (such as llamaIndex, LangChain, etc.) to call the large model gateway, ultimately forwarding the request to the large model API to implement the LLM call. This involves combining the user's natural language description with the matched development documentation to form a context, which together constitutes the prompt for calling the large model. Based on the complete prompt, the large model API generates the required front-end code and returns it.
[0063] Afterwards, the browser can dynamically compile the returned front-end code and mount the generated EMS (External Material Module) into the previously generated page frame. Once mounted, the page is redrawn to render the front-end page. Finally, the browser displays the generated front-end page to the user.
[0064] from Figure 2As can be seen, users can access the system disclosed in this paper through a browser, thus making it applicable to different electronic device operating systems. This is because browsers typically have cross-platform capabilities, exhibiting consistent performance across different operating systems. Furthermore, the backend server can be developed using a programming language with the same development framework (such as Python), thereby running in the corresponding operating system environment and also possessing cross-platform capabilities, capable of running on various operating systems with consistent program instructions. This further expands the applicability and usage scenarios of this method.
[0065] Continue to refer to Figure 3 This illustrates a flow 300 of some other embodiments of the front-end page generation method according to this disclosure. In the embodiments of this disclosure, after a user views the generated front-end page through a browser, if there is content or interactive logic on the page that needs adjustment, the user can continue to send page modification information to achieve page adjustment. The method may include the following steps:
[0066] Step 301: In response to receiving page modification information sent by the user, search the database for configuration document data that matches the page modification information.
[0067] Step 302: Generate new model prompt information based on the page modification information, the matched configuration document data, and the previously generated target front-end code data.
[0068] Step 303: Input the new model prompt information into the large language model to generate new front-end code data and generate the modified front-end page.
[0069] Step 304: Display the modified front-end page to the user through a browser.
[0070] In some embodiments, users can continue inputting information in the interactive area with the browser, thereby inputting natural language descriptions of page modifications. The entire process follows the above... Figure 1 The steps in the embodiment are repeated. However, the difference is that when generating the prompt to call the large model, the code generated previously needs to be injected into the prompt as part of the context. That is, based on the page modification information and the previously generated target front-end code data, new model prompt information is generated. In this way, the large model knows what the code generated last time was and can make modifications based on the user's new input to generate a modified front-end page, enabling multiple iterative interactions on the page.
[0071] It should be noted that existing page development methods typically involve code compilation, deployment, and viewing the results, failing to provide a WYSIWYG experience that allows users to dynamically adjust page content and interaction logic according to their intentions. The front-end page generation method disclosed herein, however, generates front-end code based on RAG (Retrieval-augmented Generation) and LLM, combining dynamic compilation and ESM mounting to propose a novel interactive front-end development method. This invention can automatically generate high-quality, semantically accurate front-end pages based on user natural language commands, improving the efficiency and quality of front-end development. Furthermore, users can progressively generate pages through multiple rounds of feedback via natural chat, providing a WYSIWYG experience and allowing for real-time dynamic adjustment of page content and interaction logic. Ultimately, page development is achieved without coding. This solves the problems of low efficiency, high barriers to entry, and insufficient interactivity in existing front-end development processes.
[0072] Further reference Figure 4 As a response to the above Figures 1 to 3 The present disclosure provides some embodiments of a front-end page generation apparatus to implement the method shown. These apparatus embodiments are similar to... Figures 1 to 3 The methods and embodiments shown correspond to those described. This device can be specifically applied to various electronic devices.
[0073] like Figure 4 As shown, the front-end page generation apparatus 400 in some embodiments may include: a document data matching unit 401, configured to, in response to receiving page description information representing the generation of a front-end page, search for target configuration document data matching the page description information from a pre-built database, wherein the database stores configuration document data for page element development; a prompt information generation unit 402, configured to generate model prompt information based on the page description information and the target configuration document data; a code data generation unit 403, configured to input the model prompt information into a pre-trained large language model to generate target front-end code data; and a front-end page generation unit 404, configured to generate the front-end page indicated by the page description information based on the target front-end code data.
[0074] In some embodiments, the database is a vector database; and the document data matching unit 401 may be further configured to convert page description information into vector data; perform similarity matching on the vector data in a pre-built vector database; and use the configuration document vector data with a similarity value greater than a preset threshold as the target configuration document data.
[0075] In some embodiments, the configuration document data further includes the generation format of the front-end code for page elements; and the prompt information generation unit 402 can be further configured to input the model prompt information into a pre-trained large language model, and generate target front-end code data in the corresponding format for each page element in the front-end page indicated by the page description information.
[0076] In some embodiments, the front-end page generation unit 404 may be further configured to dynamically compile the target front-end code data to generate a front-end module; load the front-end module into a pre-generated page frame; and render the loaded page to generate the front-end page indicated by the page description information.
[0077] In some embodiments, the front-end page generation unit 404 may be further configured to parse and transform the target front-end code data to obtain the code data of each page element; and generate a corresponding front-end module based on the code data of each page element.
[0078] In some embodiments, the front-end page generation apparatus 400 may further include a resource acquisition unit (not shown in the figure), configured to acquire and load the resource data from an external source in response to determining that the resource data for generating the front-end module is missing in the pre-integrated resource library during the dynamic compilation of the target front-end code data, so as to generate the front-end module.
[0079] In some embodiments, the front-end page generation apparatus 400 may further include a page display and modification unit (not shown in the figure), configured to display the generated front-end page to the user through a browser; and in response to receiving page modification information sent by the user, to generate new model prompt information based on the page modification information and the previously generated target front-end code data, so as to generate the modified front-end page.
[0080] In some embodiments, the front-end page generation apparatus 400 may further include a page frame generation unit (not shown in the figure), configured to, in response to detecting a user input operation in the interactive area of the browser, determine the information entered by the user input operation as page description information, and generate a blank page frame.
[0081] It is understandable that the units described in the front-end page generation device 400 are related to the reference Figures 1 to 3 The steps in the described method correspond to each other. Therefore, the operations, features, and beneficial effects described above for the method also apply to the front-end page generation device 400 and the units contained therein, and will not be repeated here.
[0082] The following is for reference. Figure 5 It shows a schematic diagram of the structure of an electronic device 500 suitable for implementing some embodiments of the present disclosure. Figure 5 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments of this disclosure.
[0083] like Figure 5 As shown, the electronic device 500 may include a processing unit 501 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 502 or a program loaded from a storage device 508 into a random access memory (RAM) 503. The RAM 503 also stores various programs and data required for the operation of the electronic device 500. The processing unit 501, ROM 502, and RAM 503 are interconnected via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.
[0084] Typically, the following devices can be connected to I / O interface 505: input devices 506 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 507 including, for example, speakers, vibrators, etc.; storage devices 508 including, for example, disks, hard drives, memory cards, etc.; and communication devices 509. Communication device 509 allows electronic device 500 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 5 An electronic device 500 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively. Figure 5 Each box shown can represent a device or multiple devices as needed.
[0085] In particular, according to some embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, some embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication device 509, or installed from storage device 508, or installed from ROM 502. When the computer program is executed by processing device 501, it performs the functions defined in the methods of some embodiments of this disclosure.
[0086] It should be noted that, in some embodiments of this disclosure, the computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In some embodiments of this disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In some embodiments of this disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.
[0087] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol, such as HTTP (Hypertext Transfer Protocol), and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.
[0088] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device. The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: in response to receiving page description information representing the generation of a front-end page, search from a pre-built database for target configuration document data matching the page description information, wherein the database stores configuration document data for page element development; generate model prompt information based on the page description information and the target configuration document data; input the model prompt information into a pre-trained large language model to generate target front-end code data; and generate the front-end page indicated by the page description information based on the target front-end code data.
[0089] Furthermore, computer program code for performing operations of some embodiments of this disclosure can be written in one or more programming languages or a combination thereof, including object-oriented programming languages and conventional procedural programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0090] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.
[0091] The units described in some embodiments of this disclosure can be implemented in software or hardware. The described units can also be housed in a processor; for example, a processor may be described as including a document data matching unit, a prompt information generation unit, a code data generation unit, and a front-end page generation unit. The names of these units do not necessarily limit the unit itself; for example, the document data matching unit may also be described as "a unit that searches for target configuration document data that matches page description information."
[0092] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.
[0093] Some embodiments of this disclosure also provide a computer program product, including a computer program that, when executed by a processor, implements any of the aforementioned front-end page generation methods.
[0094] The above description is merely a selection of preferred embodiments of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of the invention involved in the embodiments of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described inventive concept. For example, technical solutions formed by substituting the above-described features with (but not limited to) technical features with similar functions disclosed in the embodiments of this disclosure.
Claims
1. A method for generating a front-end page, comprising: In response to receiving page description information representing the generation of a front-end page, the system searches for target configuration document data that matches the page description information from a pre-built database, wherein the database stores configuration document data for page element development. Based on the page description information and the target configuration document data, generate model prompt information; The model prompts are input into a pre-trained large language model to generate target front-end code data. Based on the target front-end code data, the front-end page indicated by the page description information is generated.
2. The front-end page generation method according to claim 1, wherein, The database is a vector database; as well as The step of searching for target configuration document data that matches the page description information from a pre-built database includes: Convert the page description information into vector data; The vector data is then subjected to similarity matching in a pre-built vector database; Configuration document vector data with similarity values greater than a preset threshold are used as target configuration document data.
3. The front-end page generation method according to claim 1, wherein, The configuration document data also includes the format for generating the front-end code of page elements; as well as The step of inputting the model prompt information into a pre-trained large language model to generate target front-end code data includes: The model prompt information is input into a pre-trained large language model, and for each page element in the front-end page indicated by the page description information, target front-end code data in the corresponding format is generated.
4. The front-end page generation method according to claim 1, wherein, The step of generating the front-end page indicated by the page description information based on the target front-end code data includes: The target front-end code data is dynamically compiled to generate a front-end module; The front-end module is loaded into a pre-generated page frame, and the loaded page is rendered to generate the front-end page indicated by the page description information.
5. The front-end page generation method according to claim 4, wherein, The step of dynamically compiling the target front-end code data to generate a front-end module includes: The target front-end code data is parsed and transformed to obtain the code data of each page element; Generate corresponding front-end modules based on the code data of each page element.
6. The front-end page generation method according to claim 4, wherein, The method further includes: In response to the determination that the pre-integrated resource library lacks the resource data for generating the front-end module during the dynamic compilation of the target front-end code data, the resource data is obtained from external sources and loaded to generate the front-end module.
7. The front-end page generation method according to claim 1, wherein, The method further includes: The generated front-end page is displayed to the user through a browser; and In response to receiving the page modification information sent by the user, a new model prompt information is generated based on the page modification information and the previously generated target front-end code data, so as to generate the modified front-end page.
8. The front-end page generation method according to any one of claims 1-7, wherein, The method further includes: In response to detecting user input in the browser's interactive area, the information entered by the user is determined as the page description information, and a blank page frame is generated.
9. A front-end page generation device, comprising: The document data matching unit is configured to, in response to receiving page description information representing the generation of a front-end page, search a pre-built database for target configuration document data that matches the page description information, wherein the database stores configuration document data for page element development; The prompt information generation unit is configured to generate model prompt information based on the page description information and the target configuration document data; The code data generation unit is configured to input the model prompt information into a pre-trained large language model to generate target front-end code data. The front-end page generation unit is configured to generate the front-end page indicated by the page description information based on the target front-end code data.
10. An electronic device, comprising: One or more processors; Storage device, on which one or more programs are stored, When the one or more programs are executed by the one or more processors, the one or more processors implement the front-end page generation method as described in any one of claims 1-8.
11. A computer-readable medium having a computer program stored thereon, wherein, When the computer program is executed by a processor, it implements the front-end page generation method as described in any one of claims 1-8.
12. A computer program product comprising a computer program that, when executed by a processor, implements the front-end page generation method as described in any one of claims 1-8.