Webpage dynamic configuration method and system based on large model, terminal and storage medium

Abstract

The application discloses a webpage dynamic configuration method and system based on a large model, a terminal and a storage medium. The webpage dynamic configuration method comprises the following steps: acquiring a page design diagram, inputting the page design diagram into a large model which has been pre-trained, and obtaining default text data; merging the default text data and preset auxiliary words, inputting the merged content into the large model, obtaining form definition data, and rendering a visual form according to the form definition data; receiving form data input by a user on the visual form, generating a preview page according to the page design diagram and the form data based on the large model; receiving feedback data of the user on the preview page, obtaining an updated page according to the feedback data; and if confirmation information of the user on the updated page is received, taking the updated page as a final page. The application can quickly complete the configuration of a front-end page, ensures the accuracy and flexibility of the configuration, greatly reduces the difficulty of the configuration of the front-end page, and improves the production efficiency.

Description

Technical Field

[0001] This application relates to the field of web page configuration technology, and in particular to a method, system, terminal, and computer-readable storage medium for dynamic web page configuration based on a large model. Background Technology

[0002] With the rapid development of mobile internet and artificial intelligence, various industries are increasingly inclined to conduct business or promote themselves online. Therefore, each industry needs to configure front-end pages for handling transactions or displaying relevant information. Traditionally, front-end page configuration is done by developers writing code. However, every time the content or structure of a page needs modification, developers must modify and redeploy the code, making front-end page configuration and modification inconvenient.

[0003] Under these circumstances, low-code and no-code content management systems (CMS) have emerged. Developers can configure the front-end pages by dragging and dropping preset component templates on the CMS platform. However, the CMS platform's ability to configure the front-end pages depends in part on the richness of the component template library. In many cases, the design requirements faced by developers cannot be fully met by the component template library, forcing developers to manually modify the code to complete the design requirements. This makes it difficult for developers to quickly and accurately configure the front-end pages.

[0004] Therefore, existing technologies still need to be improved and developed. Summary of the Invention

[0005] The main purpose of this application is to provide a method, system, terminal, and storage medium for dynamic configuration of web pages based on a large model. It aims to solve the technical problem in the prior art that configuring and modifying the front-end page still requires developers to manually modify the code, making it difficult for developers to quickly and accurately configure the front-end page.

[0006] To achieve the above objectives, this application provides a method for dynamic webpage configuration based on a large model, the method comprising:

[0007] Obtain the page design image, input the page design image into a pre-trained large model, and obtain the default text data corresponding to the page design image output by the large model;

[0008] The default text data and preset auxiliary words are merged, and the merged content is input into the large model to obtain the form definition data output by the large model. The visual form is then rendered based on the form definition data.

[0009] Receive form data entered by the user on the visual form, and generate a preview page based on the large model, the page design diagram, and the form data;

[0010] The system monitors the user's actions on the preview page and receives the user's feedback data on the preview page. Based on the feedback data, the system updates the preview page to obtain an updated page.

[0011] If the user's confirmation of the updated page is received, the updated page will be used as the final page.

[0012] Optionally, the step of obtaining the page design image, which involves inputting the page design image into a pre-trained large model to obtain the default text data corresponding to the page design image output by the large model, specifically includes:

[0013] Obtain the page design image, wherein the page design image is a static rendering generated according to design requirements;

[0014] The page design is input into a pre-trained large model. The large model performs control recognition and text recognition processing on the page design to obtain multiple control data and text data corresponding to the page design. The control data includes all the controls contained in the page design and the layout relationship between each control.

[0015] Based on all the control data and all the text data, default text data is generated through the large model, wherein the default text data is stored in JSON format.

[0016] Optionally, the step of merging the default text data and preset auxiliary words, inputting the merged content into the large model to obtain the form definition data output by the large model, and rendering the visual form according to the form definition data specifically includes:

[0017] Obtain preset auxiliary words, wherein the preset auxiliary words are used to guide the large model to output form definition data with a fixed format;

[0018] The default text data is merged with the preset auxiliary words to obtain merged text data, and the merged text data is input into the large model;

[0019] The large model processes the default text data based on preset auxiliary words in the merged text data and outputs form definition data, wherein the form definition data is stored in JSON Schema format;

[0020] The form is rendered based on the defined data to generate a visual form.

[0021] Optionally, receiving form data input by the user on the visual form, and generating a preview page based on the large model, according to the page design diagram and the form data, specifically includes:

[0022] Receive form data entered by the user on the visual form, wherein the form data is obtained by the user entering content in the interactive box on the visual form and clicking the confirmation button;

[0023] Based on the large model, page structure code and style code are generated according to the page design diagram, and the form data is filled into the page structure code to obtain the page code;

[0024] The page code and style code are rendered to generate a preview page.

[0025] Optionally, the step of generating page structure code and style code based on the large model and the page design drawing specifically includes:

[0026] Obtain the control data corresponding to the page design draft, and generate page structure code based on the control data;

[0027] Based on the large model, the page design diagram is judged. If the page design diagram contains style data corresponding to each control in the control data and the overall page style data, then style code is generated according to the style data and the overall page style data.

[0028] If the page design does not include the style data corresponding to each control in the control data and the overall page style data, then style code is generated based on the proportional and positional relationships of each control on the page design.

[0029] Optionally, the step of monitoring the user's actions on the preview page, receiving the user's feedback data on the preview page, and updating the preview page based on the feedback data to obtain an updated page specifically includes:

[0030] Listen for mouse click events of the user on the preview page;

[0031] When a user's mouse click event is detected, obtain the control to be modified corresponding to the mouse click event;

[0032] The corresponding modification box is displayed to the user based on the control to be modified.

[0033] The system receives feedback data entered by the user in the edit box and updates the preview page based on the feedback data to obtain an updated page.

[0034] Optionally, the step of monitoring the user's actions on the preview page, receiving the user's feedback data on the preview page, updating the preview page based on the feedback data, and obtaining an updated page, further includes:

[0035] The updated page is displayed to the user, and the user's actions on the updated page are monitored.

[0036] Furthermore, to achieve the above objectives, this application also provides a dynamic webpage configuration system based on a large model, wherein the dynamic webpage configuration system is used to implement the dynamic webpage configuration method described in any of the above claims, and the dynamic webpage configuration system includes:

[0037] The default text recognition module is used to obtain the page design image, input the page design image into a pre-trained large model, and obtain the default text data corresponding to the page design image output by the large model;

[0038] The form rendering module is used to merge the default text data and preset auxiliary words, input the merged content into the large model, obtain the form definition data output by the large model, and render the visual form according to the form definition data;

[0039] The preview page generation module is used to receive form data entered by the user on the visual form, and generate a preview page based on the large model, the page design diagram, and the form data.

[0040] The page update module is used to listen to the user's operations on the preview page, receive the user's feedback data on the preview page, and update the preview page according to the feedback data to obtain an updated page;

[0041] The page confirmation module is used to treat the updated page as the final page if it receives confirmation information from the user regarding the updated page.

[0042] In addition, to achieve the above objectives, this application also provides a terminal, wherein the terminal includes: a memory, a processor, and a web page dynamic configuration program stored in the memory and executable on the processor, wherein when the web page dynamic configuration program is executed by the processor, it implements the steps of the web page dynamic configuration method as described in any of the preceding claims.

[0043] In addition, to achieve the above objectives, this application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a web page dynamic configuration program, which, when executed by a processor, implements the steps of the web page dynamic configuration method as described in any of the preceding claims.

[0044] In this application, the dynamic configuration method for web pages includes: acquiring a page design draft; inputting the page design draft into a pre-trained large model to obtain default text data corresponding to the page design draft output by the large model; merging the default text data and preset auxiliary words, and inputting the merged content into the large model to obtain form definition data output by the large model, and rendering a visual form according to the form definition data; receiving form data input by the user on the visual form, and generating a preview page based on the large model, the page design draft, and the form data; monitoring the user's operations on the preview page, and receiving feedback data from the user on the preview page, updating the preview page according to the feedback data to obtain an updated page; if the user's confirmation information for the updated page is received, then the updated page is used as the final page. This application can quickly complete the configuration of the front-end page through a pre-trained large model, ensuring the accuracy and flexibility of the configuration, greatly reducing the difficulty of front-end page configuration and improving production efficiency. Attached Figure Description

[0045] Figure 1 This is a flowchart of a preferred embodiment of the webpage dynamic configuration method based on a large model provided in this application;

[0046] Figure 2 This is a partial schematic diagram of the page design of a preferred embodiment of the webpage configuration method based on a large model provided in this application;

[0047] Figure 3 This is a schematic diagram of default text data of a preferred embodiment of the webpage configuration method based on a large model provided in this application;

[0048] Figure 4 This is a partial schematic diagram of the form definition data of a preferred embodiment of the webpage configuration method based on a large model provided in this application;

[0049] Figure 5 This is a partial schematic diagram of a visual form of a preferred embodiment of the webpage configuration method based on a large model provided in this application;

[0050] Figure 6 This is a schematic diagram illustrating the principle of a preferred embodiment of the webpage configuration system based on a large model provided in this application.

[0051] Figure 7 This is a schematic diagram of the operating environment of a preferred embodiment of the terminal of this application. Detailed Implementation

[0052] To make the objectives, technical solutions, and advantages of this application clearer and more explicit, the following detailed description of this application is provided with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of this application and are not intended to limit this application.

[0053] The preferred embodiment of this application describes a webpage dynamic configuration method based on a large model, such as... Figure 1 As shown, the webpage dynamic configuration method based on a large model includes the following steps:

[0054] Step S10: Obtain the page design image. Input the page design image into a pre-trained large model to obtain the default text data corresponding to the page design image output by the large model.

[0055] Specifically, first obtain the page design draft, such as... Figure 2 As shown, the page design is actually a static rendering created by developers based on design requirements. It includes the layout relationships of various controls and text content required on the page.

[0056] It should be noted that this application does not limit the type of large model. Any VLM (Vision-Language Model) that developers can train to analyze and recognize page design drafts is acceptable, such as a trained Deepseek (a type of large model) or Gemini (a type of large model). Before using a large model, developers need to train it using a pre-set training set and validate it using a validation set. Training is complete when the large model's performance metrics exceed a preset threshold; details will not be elaborated further here.

[0057] The page design draft is input into the large model, which then identifies and analyzes the page design draft to obtain the default text data corresponding to the page design draft.

[0058] In one embodiment, obtaining the page design image involves inputting the page design image into a pre-trained large model to obtain default text data corresponding to the page design image output by the large model, specifically including:

[0059] Obtain the page design image, which is a static rendering generated according to design requirements; input the page design image into a pre-trained large model, which performs control recognition and text recognition processing on the page design image to obtain multiple control data and text data corresponding to the page design image, wherein the control data includes all controls contained in the page design image and the layout relationships between the controls; based on all the control data and all the text data, generate default text data through the large model, wherein the default text data is stored in JSON format.

[0060] Specifically, the page design mockup is received. The page design mockup is essentially a static rendering created by developers based on design requirements. It includes the layout relationships and text content of all controls required on the target page (equivalent to the final page, i.e., the page that meets the design requirements). These controls include, but are not limited to: titles, text boxes, password boxes, images, and buttons. The layout relationships refer to the arrangement of these controls; for example, a text box is placed below the title, and a button is placed below the text box. Figure 2 As shown, Figure 2 This only shows a partial page design of a front-end page to be configured. It should be noted that a complete front-end page can consist of multiple [pages / schemes]. Figure 2 Similar page design mockups; the text content is the initial text contained in the page design mockups. This initial text can be the text that the target page needs to display, or it can be placeholder text used only to demonstrate the text that exists here. There are no restrictions here.

[0061] As an example Figure 2 The partial page design shown contains one title control and three button controls. Each button control contains an image control and a subtitle control. The specific layout is as follows: three button controls are arranged in the same row below the title control, and the image control in each button control is placed above the subtitle control. In addition, the text data in this page design includes: Help & Request, Consultation, Download, and After-sales.

[0062] The page design is input into a pre-trained large model. The model performs control and text recognition processing on the page design. Essentially, it identifies all the controls contained in the page design and their layout relationships, thus obtaining the control data corresponding to the page design. Furthermore, the model also recognizes the text content on the page design, obtaining the corresponding text data. After the large model completes its initial processing of the page design, obtaining the control and text data, it generates default text data. It should be noted that the default text data is stored in JSON (JavaScript Object Notation) format, such as... Figure 3 As shown, Figure 3 It shows Figure 2 The default text data corresponding to the page design shown is as follows. In this case, the default text data stored in JSON format can be stored by control category, avoiding the text content being scattered in the code or design file, and separating the deployment of the front-end page from the text content logic, thus reducing the maintenance cost of the front-end page.

[0063] Furthermore, page design drafts can be drawn by relevant developers based on design requirements, or they can be automatically generated after analyzing and processing design requirements (voice, text) through a large model.

[0064] Step S20: Merge the default text data and preset auxiliary words, input the merged content into the large model, obtain the form definition data output by the large model, and render the visual form according to the form definition data.

[0065] Specifically, the preset auxiliary words are pre-set by the user to guide the output of form-defined data with a fixed format of the large model. The user can edit and set them according to actual needs, and there are no restrictions in this application. As an example, part of the user-defined default auxiliary words in this application are: "## Task Requirements: 1. Analyze the JSON data structure and generate appropriate form control types for each field; 2. Generate configurations that conform to the JSON Schema specification; 3. Add appropriate titles and descriptions to the fields; 4. Automatically identify special field types based on field types and naming rules; 5. **Important:** Skip the templateType field, which is not required in the form; each component template has its own unique templateType" and "## Output Requirements: 1. Only output the JSON Schema, without any explanatory text; 2. Ensure the JSON format is correct and can be parsed normally; 3. **Important:** The type field must be a single type (string / number / integer / boolean / array / object), and cannot be an array type (such as ["string", "null"]), otherwise it will cause form rendering errors; 4. Set an appropriate type (string / number / integer / boolean / array / object) for each field."

[0066] The above content is for illustrative purposes only and does not imply that the default auxiliary words in this application are limited to this. Furthermore, the English words appearing above—string, number, integer, boolean, array, and object—represent different data types.

[0067] Additionally, the default text data and preset auxiliary words are merged, which essentially involves concatenating the default text data with the preset auxiliary words to complete the merging. The merged content is then input into the larger model, which processes the merged content and outputs form definition data that conforms to the preset auxiliary word definitions. For example... Figure 4 As shown, Figure 4 It shows Figure 2 The shown portion of the page design diagram corresponds to some of the form definition data.

[0068] Finally, the visual form is rendered based on the data defined in the form, as shown in the example. Figure 5 As shown, users can enter the required content on the visual form.

[0069] In one embodiment, merging the default text data and preset auxiliary words, inputting the merged content into the large model to obtain the form definition data output by the large model, and rendering the visual form based on the form definition data specifically includes:

[0070] Obtain preset auxiliary words, wherein the preset auxiliary words are used to guide the large model to output form definition data with a fixed format; merge the default text data with the preset auxiliary words to obtain merged text data, and input the merged text data into the large model; the large model processes the default text data according to the preset auxiliary words in the merged text data, and outputs form definition data, wherein the form definition data is stored in JSON Schema format; render the form definition data to generate a visual form.

[0071] Specifically, the preset auxiliary words are edited by the user in advance and stored in the preset database. Therefore, the preset auxiliary words are first retrieved from the preset database. In this application, the preset auxiliary words are used to guide the large model to output form definition data with a fixed format based on the default text data.

[0072] Next, the default text data and preset auxiliary words are merged, which is essentially concatenating the default text data and preset auxiliary words to obtain merged text data. This merged text data is then input into a larger model for processing.

[0073] The large model processes the default text data based on preset auxiliary words in the merged text data, generating corresponding form definition data according to the requirements of these auxiliary words. This form definition data is used to set the content of the user-interactive visual forms. Furthermore, the form definition data is stored in JSON Schema (a declarative language based on JSON). JSON Schema is extensible, allowing for the definition of different types of fields and validation rules according to different needs. In this scenario, the automatic generation of standardized form definition data (JSON Schema format) from the default text data (JSON format) ensures the standardization and consistency of the form definition data, reduces the time cost of writing form definition data, lowers the error rate, and improves the maintainability of the form definition data.

[0074] Finally, the form is rendered based on the form definition data to generate a visual form. In this case, the visual form can be modified and updated by changing the form definition data, enabling rapid iteration of the visual form without relying on code modifications, thus improving development efficiency. Furthermore, the form definition data stored in JSON Schema format supports multiple types of validation rules, ensuring the richness and completeness of the visual form content and enhancing the user experience.

[0075] Step S30: Receive form data entered by the user on the visual form, and generate a preview page based on the large model, the page design diagram, and the form data.

[0076] Specifically, users can enter the required content on the visual form (or make selections, checkmarks, etc. on the form). After clicking the confirmation button, form data will be generated based on the content entered by the user on the visual form. The form data represents the data actually displayed on the final page.

[0077] Once the form data is obtained, the large model can generate a preview page based on the page design and form data. The preview page is editable, allowing users to view and make corresponding edits.

[0078] In one embodiment, receiving form data input by the user on the visual form, and generating a preview page based on the large model, according to the page design diagram and the form data, specifically includes:

[0079] The system receives form data entered by the user on the visual form, wherein the form data is obtained by the user entering content in the interactive box on the visual form and clicking the confirmation button; based on the large model, page structure code and style code are generated according to the page design diagram, and the form data is filled into the page structure code to obtain the page code; the system renders the page code and the style code to generate a preview page.

[0080] Specifically, once the user has finished entering content in the interactive boxes (text boxes, drop-down boxes, check boxes, etc.) on the visual form, they can click the confirmation button. After the user clicks the confirmation button, the content entered in the interactive boxes will be converted into form data.

[0081] After obtaining the user-input form data, it is fed into the main model. The main model first generates page structure code and style code based on the page design mockup. The form data is then filled into the page structure code, resulting in the page code. It's important to note that the page structure code is actually HTML (Hypertext Markup Language) code, and the style code is actually CSS (Cascading Style Sheets) code. The main model automatically generates the page structure code and style code based on the page design mockup, and the form data is filled into the page structure code to obtain the complete page code. Finally, by rendering the page code, a preview page can be generated.

[0082] It is important to emphasize that the rendering of the visual form described above is similar to the rendering of the preview page, but the visual form is rendered based on the form definition data and through preset form structure code templates and form style code templates.

[0083] Furthermore, the step of generating page structure code and style code based on the large model and the page design diagram specifically includes:

[0084] Obtain the control data corresponding to the page design draft, and generate page structure code based on the control data; based on the large model, determine the page design draft; if the page design draft contains style data corresponding to each control in the control data and the overall page style data, then generate style code based on the style data and the overall page style data; if the page design draft does not contain style data corresponding to each control in the control data and the overall page style data, then generate style code based on the proportional and positional relationships of each control on the page design draft.

[0085] Specifically, after the large model performs preliminary processing on the page design draft, it has already obtained the control data corresponding to the page design draft. Therefore, it first obtains the control data corresponding to the page design draft. Since the control data contains the layout relationship between each control, the page structure code can be generated based on the layout relationship. In other words, the large model will generate the preliminary framework of the page based on the layout relationship between each control in the page design draft.

[0086] Subsequently, the large model will evaluate the page design draft, determining whether it contains style data for each control and overall page style data. Control style data refers to the control's size, shape, color, etc.; overall page style data refers to the specific distances between controls in this page design draft. For example... Figure 2 As shown, Figure 2 The page design shown includes the overall page style data.

[0087] If the page design mockup contains style data for each control and overall page style data, then style code (CSS code) is generated based on the style data and overall page style data provided in the page design mockup. If the page design mockup contains only one of the style data and overall page style data, or if the page design mockup does not contain style data and overall page style data, then the large model will directly obtain the proportional and positional relationships of each control on the page design mockup, and then generate style code based on the proportional and positional relationships.

[0088] It should be noted that the large model also obtains key style information such as the shape and color of each control, and generates it along with the style code, thereby maximizing the reproduction of the page design. For example... Figure 2 As shown, Figure 2 The page design shown only contains the overall page style data. Therefore, the large model will analyze and process the page design to obtain the style data corresponding to each control on the page design, and combine it with the overall page style data to generate the corresponding style code.

[0089] Step S40: Listen to the user's operations on the preview page, receive the user's feedback data on the preview page, and update the preview page according to the feedback data to obtain an updated page.

[0090] Specifically, after rendering the preview page is complete, it is displayed to the user. The preview page is editable, allowing users to make WYSIWYG (What You See Is What You Get) modifications. Therefore, the system listens for user actions on the preview page and receives feedback data, including the user's changes. Finally, the preview page is modified and updated based on the feedback data, resulting in the updated preview page.

[0091] In one embodiment, the step of monitoring the user's actions on the preview page, receiving the user's feedback data on the preview page, and updating the preview page based on the feedback data to obtain an updated page specifically includes:

[0092] The system listens for mouse click events by the user on the preview page; when a mouse click event is detected, it obtains the control to be modified corresponding to the mouse click event; it displays the corresponding modification box to the user based on the control to be modified; it receives feedback data input by the user in the modification box, and updates the preview page based on the feedback data to obtain an updated page.

[0093] Specifically, the preview page is editable. This is reflected in the fact that when a user clicks on a control on the preview page with the mouse, a corresponding editing box will pop up. The user can enter content or make selections in the editing box to modify the control.

[0094] Therefore, the mouse click events of the user on the preview page are listened to. When the user's mouse click event is detected, the control to be modified corresponding to the mouse click event is obtained according to the position of the mouse click event.

[0095] Subsequently, the corresponding edit boxes are displayed to the user based on the control to be modified. For example, if the user clicks on a text box on the preview page, the pop-up edit box will also be a text box, where the user can enter content to modify the original text box (or modify the font, size, color, format, etc. of the text box). If the user clicks on an image on the preview page, the pop-up edit box will be an image upload box, where the user can upload a new image to replace the clicked image. The content that the user re-types in the edit box and the options selected are the feedback data entered by the user in the edit box.

[0096] After the user enters the feedback data and clicks the confirmation button, the visual form and page code will be updated based on the feedback data, and the preview page will be re-rendered based on the updated page code to obtain the updated page.

[0097] Furthermore, the process of monitoring the user's actions on the preview page, receiving feedback data from the user on the preview page, updating the preview page based on the feedback data, and obtaining an updated page, further includes:

[0098] The updated page is displayed to the user, and the user's actions on the updated page are monitored.

[0099] Specifically, once the preview page has been updated and the updated page is obtained, it will be displayed to the user for confirmation, and the user's actions on the updated page will be monitored.

[0100] It should be noted that user actions on the update page include: modifying and editing the update page again, and confirming the update page.

[0101] The update page, like the preview page, is editable. If users are still not satisfied with the update page, they can still trigger the modification box of the corresponding control through the mouse click event, modify the corresponding control through the modification box, and then render and update the update page again after the modification is completed.

[0102] Alternatively, if a user believes that the updated page meets the design requirements or is a composite page design, a confirmation button can be added at the top of the updated page to send a confirmation message.

[0103] Step S50: If the user's confirmation information for the updated page is received, the updated page is taken as the final page.

[0104] Specifically, when a user clicks the confirmation button at the top of the update page, a confirmation message will be sent. Upon receiving the confirmation message, the update page will be saved as the final page. After final review, the user can publish the final page to deploy the page.

[0105] Furthermore, such as Figure 6 As shown, based on the above-described large-model-based dynamic webpage configuration method, this application also provides a large-model-based dynamic webpage configuration system, wherein the large-model-based dynamic webpage configuration system includes:

[0106] The default text recognition module 51 is used to obtain the page design image, input the page design image into a pre-trained large model, and obtain the default text data corresponding to the page design image output by the large model.

[0107] The form rendering module 52 is used to merge the default text data and preset auxiliary words, input the merged content into the large model, obtain the form definition data output by the large model, and render the visual form according to the form definition data;

[0108] The preview page generation module 53 is used to receive form data entered by the user on the visual form, and generate a preview page based on the large model, the page design diagram, and the form data.

[0109] The page update module 54 is used to listen to the user's operation on the preview page, receive the user's feedback data on the preview page, and update the preview page according to the feedback data to obtain an updated page;

[0110] The page confirmation module 55 is used to treat the updated page as the final page if it receives confirmation information from the user regarding the updated page.

[0111] Furthermore, such as Figure 7 As shown, based on the above-described webpage dynamic configuration method and system, this application also provides a terminal, which includes a processor 10, a memory 20, and a display 30. Figure 7 Only some of the terminal components are shown; however, it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0112] In some embodiments, the memory 20 may be an internal storage unit of the terminal, such as a hard disk or memory. In other embodiments, the memory 20 may be an external storage device of the terminal, such as a plug-in hard disk, smart media card (SMC), secure digital card (SD), flash card, etc. Further, the memory 20 may include both internal and external storage devices. The memory 20 is used to store application software and various types of data installed on the terminal, such as the program code installed on the terminal. The memory 20 can also be used to temporarily store data that has been output or will be output. In one embodiment, the memory 20 stores a webpage dynamic configuration program 40, which can be executed by the processor 10 to implement the webpage dynamic configuration method of this application.

[0113] In some embodiments, the processor 10 may be a central processing unit (CPU), a microprocessor, or other data processing chip, used to run program code stored in the memory 20 or process data, such as executing the webpage dynamic configuration method.

[0114] In some embodiments, the display 30 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, or an OLED (Organic Light-Emitting Diode) touchscreen. The display 30 is used to display information on the terminal and to display a visual user interface. The components 10-30 of the terminal communicate with each other via a system bus.

[0115] In one embodiment, when the processor 10 executes the webpage dynamic configuration program 40 in the memory 20, it implements the steps of the webpage dynamic configuration method as described above.

[0116] This application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a web page dynamic configuration program, which, when executed by a processor, implements the steps of the web page dynamic configuration method as described above.

[0117] In summary, this application provides a method, system, terminal, and storage medium for dynamic webpage configuration. The method includes: acquiring a page design image; inputting the page design image into a pre-trained large model to obtain default text data corresponding to the page design image output by the large model; merging the default text data with preset auxiliary words and inputting the merged content into the large model to obtain form definition data output by the large model; rendering a visual form based on the form definition data; receiving form data input by a user on the visual form; generating a preview page based on the large model, the page design image, and the form data; monitoring the user's operations on the preview page and receiving feedback data from the user on the preview page; updating the preview page based on the feedback data to obtain an updated page; and if the user confirms the updated page, using the updated page as the final page. This application can quickly complete the configuration of the front-end page through a pre-trained large model, ensuring the accuracy and flexibility of the configuration, greatly reducing the difficulty of front-end page configuration and improving production efficiency.

[0118] It should be noted that, in this document, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or terminal that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or terminal. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or terminal that includes that element.

[0119] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "N" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0120] Of course, those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware (such as a processor, controller, etc.). The program can be stored in a computer-readable storage medium, and when executed, it can include the processes described in the above method embodiments. The computer-readable storage medium can be a memory, magnetic disk, optical disk, etc.

[0121] It should be understood that the application of this application is not limited to the examples above. Those skilled in the art can make improvements or modifications based on the above description, and all such improvements and modifications should fall within the protection scope of the appended claims.

Claims

1. A method for dynamic configuration of web pages based on a large model, characterized in that, The dynamic configuration method for web pages includes: Obtain the page design image, input the page design image into a pre-trained large model, and obtain the default text data corresponding to the page design image output by the large model; The default text data and preset auxiliary words are merged, and the merged content is input into the large model to obtain the form definition data output by the large model. The visual form is then rendered based on the form definition data. Receive form data entered by the user on the visual form, and generate a preview page based on the large model, the page design diagram, and the form data; The system monitors the user's actions on the preview page and receives the user's feedback data on the preview page. Based on the feedback data, the system updates the preview page to obtain an updated page. If the user's confirmation of the updated page is received, the updated page will be used as the final page.

2. The webpage dynamic configuration method according to claim 1, characterized in that, The step of obtaining the page design image involves inputting the page design image into a pre-trained large model to obtain the default text data corresponding to the page design image output by the large model. Specifically, this includes: Obtain the page design image, wherein the page design image is a static rendering generated according to design requirements; The page design is input into a pre-trained large model. The large model performs control recognition and text recognition processing on the page design to obtain multiple control data and text data corresponding to the page design. The control data includes all the controls contained in the page design and the layout relationship between each control. Based on all the control data and all the text data, default text data is generated through the large model, wherein the default text data is stored in JSON format.

3. The webpage dynamic configuration method according to claim 1, characterized in that, The process of merging the default text data and preset auxiliary words, inputting the merged content into the large model to obtain the form definition data output by the large model, and rendering the visual form based on the form definition data specifically includes: Obtain preset auxiliary words, wherein the preset auxiliary words are used to guide the large model to output form definition data with a fixed format; The default text data is merged with the preset auxiliary words to obtain merged text data, and the merged text data is input into the large model; The large model processes the default text data based on preset auxiliary words in the merged text data and outputs form definition data, wherein the form definition data is stored in JSON Schema format; The form is rendered based on the defined data to generate a visual form.

4. The webpage dynamic configuration method according to claim 1, characterized in that, The process of receiving form data entered by the user on the visual form, and generating a preview page based on the large model, according to the page design diagram and the form data, specifically includes: Receive form data entered by the user on the visual form, wherein the form data is obtained by the user entering content in the interactive box on the visual form and clicking the confirmation button; Based on the large model, page structure code and style code are generated according to the page design diagram, and the form data is filled into the page structure code to obtain the page code; The page code and style code are rendered to generate a preview page.

5. The webpage dynamic configuration method according to claim 4, characterized in that, The process of generating page structure code and style code based on the large model and the page design drawing specifically includes: Obtain the control data corresponding to the page design draft, and generate page structure code based on the control data; Based on the large model, the page design diagram is judged. If the page design diagram contains style data corresponding to each control in the control data and the overall page style data, then style code is generated according to the style data and the overall page style data. If the page design does not include the style data corresponding to each control in the control data and the overall page style data, then style code is generated based on the proportional and positional relationships of each control on the page design.

6. The webpage dynamic configuration method according to claim 1, characterized in that, The process of monitoring the user's actions on the preview page, receiving the user's feedback data on the preview page, and updating the preview page based on the feedback data to obtain an updated page specifically includes: Listen for mouse click events of the user on the preview page; When a user's mouse click event is detected, obtain the control to be modified corresponding to the mouse click event; The corresponding modification box is displayed to the user based on the control to be modified. The system receives feedback data entered by the user in the edit box and updates the preview page based on the feedback data to obtain an updated page.

7. The webpage dynamic configuration method according to claim 1, characterized in that, The process of monitoring the user's actions on the preview page, receiving feedback data from the user on the preview page, updating the preview page based on the feedback data, and obtaining an updated page, further includes: The updated page is displayed to the user, and the user's actions on the updated page are monitored.

8. A dynamic webpage configuration system based on a large model, characterized in that, The webpage dynamic configuration system is used to implement the webpage dynamic configuration method as described in any one of claims 1-7, and the webpage dynamic configuration system includes: The default text recognition module is used to obtain the page design image, input the page design image into a pre-trained large model, and obtain the default text data corresponding to the page design image output by the large model; The form rendering module is used to merge the default text data and preset auxiliary words, input the merged content into the large model, obtain the form definition data output by the large model, and render the visual form according to the form definition data; The preview page generation module is used to receive form data entered by the user on the visual form, and generate a preview page based on the large model, the page design diagram, and the form data. The page update module is used to listen to the user's operations on the preview page, receive the user's feedback data on the preview page, and update the preview page according to the feedback data to obtain an updated page; The page confirmation module is used to treat the updated page as the final page if it receives confirmation information from the user regarding the updated page.

9. A terminal, characterized in that, The terminal includes: a memory, a processor, and a web page dynamic configuration program stored in the memory and executable on the processor. When the web page dynamic configuration program is executed by the processor, it implements the steps of the web page dynamic configuration method as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a webpage dynamic configuration program, which, when executed by a processor, implements the steps of the webpage dynamic configuration method as described in any one of claims 1-7.

Images