Dynamic webpage configuration method and system based on large model, terminal and storage medium

By using a dynamic webpage configuration method based on a large model, the front-end page configuration is automatically identified and generated, solving the problem of developers manually modifying code and achieving fast, accurate page configuration and efficient production.

CN121834084AActive Publication Date: 2026-04-10SIYI TECH (SHENZHEN) CO LTD
View PDF 3 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
SIYI TECH (SHENZHEN) CO LTD
Filing Date
2026-03-10
Publication Date
2026-04-10

AI Technical Summary

Technical Problem

In existing technologies, front-end page configuration requires developers to manually modify the code, resulting in inconvenience and inaccuracy in configuration.

Method used

A dynamic webpage configuration method based on a large model is adopted. By acquiring the page design, a pre-trained large model is used to recognize controls and text, generate default text data, and merge it with preset auxiliary words to generate form definition data. The visual form is rendered, the form data input by the user is received, a preview page is generated, and the page is updated according to user feedback, and finally confirmed as the final page.

Benefits of technology

It enables fast and accurate front-end page configuration, reduces configuration difficulty, improves production efficiency, and reduces dependence on code.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121834084A_ABST
    Figure CN121834084A_ABST
Patent Text Reader

Abstract

The invention discloses a webpage dynamic configuration method and system based on a large model, a terminal and a storage medium, and the webpage dynamic configuration method comprises the steps: obtaining a page design drawing, inputting the page design drawing into a pre-trained large model, and obtaining default text data; the default text data and preset auxiliary words are merged, the merged content is input into the large model, form definition data are obtained, and a visual form is rendered according to the form definition data; receiving form data input on the visual form by a user, and generating a preview page according to the page design drawing and the form data based on the large model; receiving feedback data of a user on the preview page, and 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. According to the method and the device, the configuration of the front-end page can be quickly completed, the accuracy and the flexibility of the configuration are ensured, the difficulty of the configuration of the front-end page is greatly reduced, and the production efficiency is improved.
Need to check novelty before this filing date? Find Prior Art

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: 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; monitoring the operation of the user on the preview page, receiving feedback data of the user on the preview page, updating the preview page according to the feedback data to obtain an updated page; If the confirmation information of the user on the updated page is received, the updated page is taken as a final page.

[0007] Optionally, the page design drawing is obtained, and the page design drawing is input into a large model that is pre-trained to obtain default text data corresponding to the page design drawing output by the large model, and specifically includes: The page design drawing is obtained, wherein the page design drawing is a static effect drawing generated according to design requirements; The page design drawing is input into a large model that is pre-trained, and the large model performs control recognition processing and character recognition processing on the page design drawing to obtain a plurality of control data and character data corresponding to the page design drawing, wherein the control data includes all controls contained in the page design drawing and the layout relationship between the controls. Based on all the control data and all the character data, the large model generates default text data, wherein the default text data is stored in JSON format.

[0008] Optionally, the default text data and a preset auxiliary word are merged, and the merged content is input into the large model to obtain form definition data output by the large model, and a visual form is rendered according to the form definition data, and specifically includes: The preset auxiliary word is obtained, wherein the preset auxiliary word is used to guide the large model to output form definition data with a fixed format; The default text data and the preset auxiliary word are merged to obtain merged text data, and the merged text data is input into the large model; The large model processes the default text data according to the preset auxiliary word in the merged text data to output form definition data, wherein the form definition data is stored in the format of JSON Schema; The visual form is generated by rendering according to the form definition data.

[0009] Optionally, the form data input by the user on the visual form is received, and a preview page is generated according to the page design drawing and the form data based on the large model, and specifically includes: The form data input by the user on the visual form is received, wherein the form data is obtained after the user inputs content in the interactive box on the visual form and clicks the confirmation button; generate page structure code and style code according to the page design diagram based on the large model, and fill the form data into the page structure code to obtain page code; render according to the page code and the style code to generate a preview page.

[0010] Optionally, the generating the page structure code and the style code according to the page design diagram based on the large model specifically includes: obtaining control data corresponding to the page design diagram, and generating page structure code according to the control data; judging the page design diagram based on the large model, and if the page design diagram contains style data corresponding to each control in the control data and page overall style data, generating style code according to the style data and the page overall style data; if the page design diagram does not contain the style data corresponding to each control in the control data and the page overall style data, generating style code according to the proportional relationship and the positional relationship of each control on the page design diagram.

[0011] Optionally, the monitoring the operation of the user on the preview page and receiving feedback data of the user on the preview page, and updating the preview page according to the feedback data to obtain an updated page specifically includes: monitoring a mouse click event of the user on the preview page; when the mouse click event of the user is monitored, obtaining a to-be-modified control corresponding to the mouse click event; displaying a corresponding modification box for the user according to the to-be-modified control; receiving feedback data input by the user in the modification box, and updating the preview page according to the feedback data to obtain an updated page.

[0012] Optionally, the monitoring the operation of the user on the preview page and receiving feedback data of the user on the preview page, and updating the preview page according to the feedback data to obtain an updated page further includes: displaying the updated page to the user, and monitoring the operation of the user on the updated page.

[0013] In addition, to achieve the above-mentioned purposes, the present application also provides a web page dynamic configuration system based on a large model, wherein the web page dynamic configuration system is used to implement the web page dynamic configuration method as claimed in any one of the above, and the web page dynamic configuration system comprises: The default text recognition module is configured to obtain a page design diagram, input the page design diagram into a pre-trained large model, and obtain default text data corresponding to the page design diagram output by the large model; The form rendering module is configured to merge the default text data and preset auxiliary words, input the merged content into the large model, obtain form definition data output by the large model, and render a visual form according to the form definition data; The preview page generation module is configured to receive form data input by a user on the visual form, generate a preview page according to the page design diagram and the form data based on the large model; The page updating module is configured to listen to operations of the user on the preview page, receive feedback data of the user on the preview page, update the preview page according to the feedback data, and obtain an updated page. The page confirmation module is configured to take the updated page as a final page if confirmation information of the user on the updated page is received.

[0014] In addition, to achieve the above object, the present application further provides a terminal, wherein the terminal comprises a memory, a processor, and a webpage dynamic configuration program stored in the memory and executable on the processor, and the webpage dynamic configuration program implements the steps of the webpage dynamic configuration method according to any one of the above when executed by the processor.

[0015] In addition, to achieve the above object, the present application further provides a computer readable storage medium, wherein the computer readable storage medium stores a webpage dynamic configuration program, and the webpage dynamic configuration program implements the steps of the webpage dynamic configuration method according to any one of the above when executed by a processor.

[0016] 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

[0017] 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; 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; 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; 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; Figure 5 This is a partial schematic diagram of a visual form representing a preferred embodiment of the webpage configuration method based on a large model provided in this application. 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.

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

[0019] 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.

[0020] The large model-based webpage dynamic configuration method provided in the preferred embodiments of the present application comprises the following steps: Figure 1 The large model-based webpage dynamic configuration method comprises the following steps: In step S10, a page design drawing is obtained, and the page design drawing is input into a pre-trained large model to obtain default text data corresponding to the page design drawing output by the large model.

[0021] Specifically, a page design drawing is first obtained, as shown in Figure 2 The page design drawing is actually a static effect drawing designed by a developer according to design requirements, which contains the layout relationship of various controls and text content on the page.

[0022] It should be noted that the type of large model is not limited in the present application. Any VLM (Vision-Language Model) that can be trained by a developer to analyze and recognize a page design drawing can be used, such as a trained Deepseek or Gemini. The developer needs to train the large model before using it. The training set is pre-set, and the validation set is used for verification. When the performance index of the large model exceeds the preset threshold, the training is completed, and no further description is given here.

[0023] The page design drawing is input into the large model, which recognizes and analyzes the page design drawing to obtain the default text data corresponding to the page design drawing.

[0024] In an embodiment, the page design drawing is obtained, and the page design drawing is input into a pre-trained large model to obtain default text data corresponding to the page design drawing output by the large model, which specifically comprises: The page design drawing is obtained, wherein the page design drawing is a static effect drawing generated according to design requirements. The page design drawing is input into a pre-trained large model, which performs control recognition processing and text recognition processing on the page design drawing to obtain a plurality of control data and text data corresponding to the page design drawing, wherein the control data includes all controls contained in the page design drawing and the layout relationship between the controls. Default text data is generated based on all the control data and all the text data by the large model, wherein the default text data is stored in JSON format.

[0025] 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 diagrams are used; the text content is the initial text contained in the page design diagram. The initial text here can be the text that the target page needs to display, or it can just be placeholder text used to demonstrate the text that exists here. There are no restrictions here.

[0026] 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.

[0027] 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 files, and separating the deployment of the front-end page from the text content logic, thus reducing the maintenance cost of the front-end page.

[0028] Further, the page design diagram can be drawn by a relevant developer according to design requirements, or can be automatically generated by the large model after analyzing and processing the design requirements (voice, text).

[0029] In step S20, the default text data and the preset auxiliary word are merged, and the merged content is input into the large model to obtain form definition data output by the large model, and a visual form is rendered according to the form definition data.

[0030] Specifically, the preset auxiliary word is set by the user in advance, and is used to guide the large model to output the word segment of the form definition data with a fixed format. The user can edit and set the preset auxiliary word according to actual needs, which is not limited in the present application. As an example, part of the preset auxiliary word set by the user in the present application is: “## Task requirements: 1. Analyze the JSON data structure and generate appropriate form control types for each field; 2. Generate configuration conforming to the JSON Schema specification; 3. Add appropriate titles (title) and descriptions (description) to the fields; 4. Automatically identify special field types according to field types and naming rules; 5. Important: Skip the templateType field, which does not need to be in the form; Display, each component template has its own unique templateType” and “## Output requirements: 1. Only output JSON Schema, do not include any explanatory text; 2. Ensure that the JSON format is correct and can be normally parsed; 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 appropriate type (string / number / integer / boolean / array / object) for each field”.

[0031] The above content is only an example and does not represent that the preset auxiliary word in the present application is limited thereto. Moreover, the English words appearing in the above content: string, number, integer, boolean, array, object represent different data types.

[0032] In addition, the merging of the default text data and the preset auxiliary word is actually a splicing of the default text data and the preset auxiliary word, and then the merging is completed; and the merged content is input into the large model, and the large model processes the merged content to output the form definition data defined by the preset auxiliary word. As shown in Figure 4 Figure 4 ​A part of the page design diagram is shown Figure 2 The part of the page design diagram corresponds to part of the form definition data.

[0033] Finally, the visual form is rendered according to the form definition data, and the visual form is as shown Figure 5 As shown, the user can input the required content on the visual form.

[0034] In an embodiment, the default text data and the preset auxiliary word are combined, and the combined content is input into the large model to obtain form definition data output by the large model, and a visual form is rendered according to the form definition data, specifically comprising: obtaining a preset auxiliary word, wherein the preset auxiliary word is used to guide the large model to output form definition data with fixed format; combining the default text data and the preset auxiliary word to obtain combined text data, and inputting the combined text data into the large model; the large model processes the default text data according to the preset auxiliary word in the combined text data, and outputs form definition data, wherein the form definition data is stored in the format of JSON Schema; the visual form is generated by rendering according to the form definition data.

[0035] Specifically, the preset auxiliary word is edited by the user in advance and stored in the preset database, so the preset auxiliary word is obtained from the preset database first. In this application, the preset auxiliary word is used to guide the large model to output form definition data with fixed format according to the default text data.

[0036] Then, the default text data and the preset auxiliary word are combined, that is, the default text data and the preset auxiliary word are spliced to obtain the combined text data. Then, the combined text data is input into the large model for processing.

[0037] The large model processes the default text data based on the preset auxiliary word in the combined text data, and generates corresponding form definition data according to the requirements in the preset auxiliary word, wherein the form definition data is used to set the content of the visual form for user operation. Moreover, the form definition data is stored in the format of JSON Schema (a declarative language based on JSON format), and the JSON Schema format supports extension and can define different types of fields and verification rules according to different requirements. In this case, the standardized form definition data (JSON Schema format) can be automatically generated from the default text data (JSON format), which can ensure the standardization and consistency of the form definition data, reduce the time cost of writing the form definition data, reduce the error rate, and improve the maintainability of the form definition data.

[0038] Finally, the visual form is generated by rendering according to the form definition data. In this case, the modification and update of the visual form can be realized by modifying the form definition data, the visual form can be quickly iterated without relying on code modification, the development efficiency is improved, and the form definition data stored in the JSON Schema format supports multiple types of verification rules, which can ensure the richness and completeness of the content of the visual form and improve the user experience.

[0039] Step S30, receiving form data input by the user on the visual form, generating a preview page according to the page design diagram and the form data based on the large model.

[0040] Specifically, the user can input the required content on the visual form (or make selection, check, etc. on the form), and after clicking the confirmation button after inputting, the form data can be generated according to the content input by the user on the visual form, wherein the form data represents the data actually displayed on the final page.

[0041] After obtaining the form data, the large model can generate a preview page according to the page design diagram and the form data, wherein the preview page is an editable page, and the user can view the preview page and make corresponding editing and modification.

[0042] In an embodiment, the receiving form data input by the user on the visual form, generating a preview page according to the page design diagram and the form data based on the large model, specifically includes: Receiving form data input by the user on the visual form, wherein the form data is obtained after the user inputs content in the interactive box on the visual form and clicks the confirmation button; generating page structure code and style code according to the page design diagram based on the large model, and filling the form data into the page structure code to obtain page code; rendering according to the page code and the style code to generate a preview page.

[0043] Specifically, when the user has completed the input of content in the interactive box (text box, drop-down box, check box, etc.) on the visual form, the confirmation button can be clicked, and when the user clicks the confirmation button, the content input by the user in the interactive box is converted into form data.

[0044] After obtaining the form data input by the user, the form data is input into the large model. The large model will first generate page structure code and style code according to the page design diagram. The form data is filled into the page structure code, and the page code is obtained. It should be noted that the page structure code is actually HTML (Hypertext Markup Language) code, and the style code is actually CSS (Cascading Style Sheets) code. The large model will automatically generate page structure code and style code according to the page design diagram, and the form data will be filled into the page structure code, and the complete page code is obtained. Finally, by rendering the page code, the generation of the preview page can be realized.

[0045] It should be emphasized that the rendering of the visual form is similar to the rendering of the preview page, but the visual form is rendered based on the form definition data through the preset form structure code template and form style code template.

[0046] Further, the large model is used to generate page structure code and style code according to the page design diagram, which specifically includes: Obtaining control data corresponding to the page design diagram, generating page structure code according to the control data; judging the page design diagram based on the large model, if the page design diagram contains style data corresponding to each control in the control data and page overall style data, generating style code according to the style data and the page overall style data; if the page design diagram does not contain style data corresponding to each control in the control data and page overall style data, generating style code according to the proportional relationship and positional relationship of each control on the page design diagram.

[0047] Specifically, the large model has obtained the control data corresponding to the page design diagram after preliminary processing of the page design diagram. Therefore, the control data corresponding to the page design diagram is obtained first, and since the control data contains the layout relationship between each control, the page structure code can be generated according to the layout relationship. In other words, the large model will generate a preliminary framework of the page according to the layout relationship between each control corresponding to the page design diagram.

[0048] Subsequently, the large model will judge the page design diagram to determine whether the page design diagram contains style data corresponding to each control and page overall style data. The style data of the control refers to the size, shape, color, etc. of the control. The page overall style data refers to the specific distance between each control in the page design diagram. Figure 2 As shown in Figure 2 The page design diagram shown in

[0049] If the page design diagram contains the style data corresponding to each control and the overall page style data, the style code, i.e., the CSS code, is generated according to the style data and the overall page style data provided by the page design diagram; if the page design diagram contains only one of the style data and the overall page style data, or if the page design diagram does not contain the style data and the overall page style data, the large model directly obtains the proportional relationship and the positional relationship of each control on the page design diagram, and then generates the style code according to the proportional relationship and the positional relationship.

[0050] It should be noted that the large model also obtains the shape, color and other key style information of each control, and generates the style code together when generating the style code, thereby maximizing the restoration of the page design diagram. For example, as shown in Figure 2 As shown in Figure 2 The page design diagram shown only contains the overall page style data, so the large model analyzes and processes the page design diagram to obtain the style data corresponding to each control on the page design diagram, and generates the corresponding style code in combination with the overall page style data.

[0051] Step S40, the operation of the user on the preview page is listened to, and the feedback data of the user on the preview page is received, the preview page is updated according to the feedback data, and an updated page is obtained.

[0052] Specifically, after the rendering of the preview page is completed, the preview page is displayed to the user, and the preview page is an editable page, and the user can make "what you see is what you get" modification on the preview page. Therefore, the operation of the user on the preview page is listened to, and the feedback data of the user on the preview page is accepted, and the feedback data includes the modification content of the user on the preview page. Finally, the preview page is modified and updated according to the feedback data, and an updated preview page, i.e., an updated page, is obtained.

[0053] In an embodiment, the operation of the user on the preview page is listened to, and the feedback data of the user on the preview page is received, the preview page is updated according to the feedback data, and an updated page is obtained, specifically comprising: The mouse click event of the user on the preview page is listened to; when the mouse click event of the user is listened to, the control to be modified corresponding to the mouse click event is obtained; the corresponding modification box is displayed to the user according to the control to be modified; the feedback data input by the user in the modification box is received, and the preview page is updated according to the feedback data, and an updated page is obtained.

[0054] Specifically, the preview page is editable, which is embodied in that when the user clicks a control on the preview page with a mouse, a corresponding modification box is popped up accordingly, the user can input content or make a selection in the modification box, thereby realizing modification of the control.

[0055] Therefore, the mouse click event of the user on the preview page is monitored, and when the mouse click event of the user is monitored, the control to be modified corresponding to the mouse click event is obtained according to the position of the mouse click event of the user.

[0056] Subsequently, a corresponding modification box is displayed for the user according to the control to be modified, for example, if the user clicks a text box on the preview page, the modification box popped up is the text box, and the user can input content in the text box to realize modification of the content in the original text box (or modification of the font, size, color, format, etc. of the content in the text box); if the user clicks an image on the preview page, the modification box popped up is an image upload box, and the user can upload a new image through the image upload box to realize replacement of the image clicked by the user. The content re-keyed in by the user in the modification box and the selected option are feedback data input by the user in the modification box.

[0057] When the user inputs the feedback data and clicks a confirmation button, the visual form and the page code are updated according to the feedback data, and the preview page is re-rendered according to the updated page code to obtain an updated page.

[0058] Further, the operation of the user on the preview page is monitored, and feedback data of the user on the preview page is received, the preview page is updated according to the feedback data to obtain an updated page, and the operation of the user on the updated page is further monitored. The updated page is displayed to the user, and the operation of the user on the updated page is monitored.

[0059] Specifically, after the update of the preview page is completed to obtain the updated page, the updated page is displayed to the user for the user to confirm the updated page again, and the operation of the user on the updated page is monitored.

[0060] It should be noted that the operation of the user on the updated page includes re-modification and editing of the updated page, and confirmation of the updated page.

[0061] The updated page is an editable page like the preview page, and the user can still trigger a modification box of a corresponding control through a mouse click event if the user is still not satisfied with the updated page, modify the corresponding control through the modification box, and re-render and update the updated page after the modification is completed.

[0062] 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.

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

[0064] 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.

[0065] 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: 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. 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; 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. 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; 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.

[0066] 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.

[0067] The memory 20 can be an internal storage unit of the terminal in some embodiments, such as a hard disk or a memory of the terminal. The memory 20 can also be an external storage device of the terminal in other embodiments, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) card, a Flash Card, etc. Further, the memory 20 can include both an internal storage unit and an external storage device of the terminal. The memory 20 is used to store application software and various data installed on the terminal, such as program codes of the terminal, etc. The memory 20 can also be used to temporarily store data that has been output or will be output. In an embodiment, the memory 20 stores a web page dynamic configuration program 40, which can be executed by the processor 10 to implement the web page dynamic configuration method.

[0068] The processor 10 can be a Central Processing Unit (CPU), a microprocessor or other data processing chip in some embodiments, which is used to run program codes or process data stored in the memory 20, such as to execute the web page dynamic configuration method, etc.

[0069] The display 30 can be an LED display, a liquid crystal display, a touch liquid crystal display, an OLED (Organic Light-Emitting Diode) touch, etc. in some embodiments. The display 30 is used to display information of the terminal and to display a visual user interface. The components 10-30 of the terminal communicate with each other through a system bus.

[0070] In an embodiment, the processor 10 implements the steps of the web page dynamic configuration method as described above when executing the web page dynamic configuration program 40 in the memory 20.

[0071] The application also provides a computer readable storage medium, which stores a web page dynamic configuration program. The web page dynamic configuration program is executed by a processor to implement the steps of the web page dynamic configuration method as described above.

[0072] To sum up, the application provides a webpage dynamic configuration method, system, terminal and storage medium. The webpage dynamic configuration method comprises the following steps: obtaining a page design diagram, inputting the page design diagram into a pre-trained large model to obtain default text data corresponding to the page design diagram output by the large model; merging the default text data and a preset auxiliary word, 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 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; listening to the operation of the user on the preview page, receiving feedback data of the user on the preview page, updating the preview page according to the feedback data to obtain an updated page; 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 through a pre-trained large model, ensure the accuracy and flexibility of the configuration, greatly reduce the difficulty of front-end page configuration, and improve the production efficiency.

[0073] It should be noted that in this document, the terms "comprising", "containing", or any other variant thereof are intended to cover non-exclusive inclusion, so that processes, methods, articles, or terminals including a series of elements not only include those elements, but also include other elements not explicitly listed, or include elements inherent to such processes, methods, articles, or terminals. Without more limitations, the element defined by the statement "comprising a" does not exclude the presence of another identical element in the process, method, article, or terminal including the element.

[0074] In addition, the terms "first", "second" are only used for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Therefore, the features defined with "first", "second" can explicitly or implicitly include at least one of the features. In the description of the application, the meaning of "N" is at least two, such as two, three, etc., unless otherwise specifically limited.

[0075] Of course, those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing relevant hardware (such as a processor, a controller, etc.) through a computer program. The program can be stored in a computer-readable computer-readable storage medium, and the program can include the processes of the above-mentioned method embodiments when executed. The computer-readable storage medium can be a memory, a magnetic disc, an optical disc, etc.

[0076] It should be understood that the application is not limited to the examples described above, which can be modified or transformed by a person of ordinary skill in the art in light of the above description, all these modifications and transformations being intended to belong to the scope of protection of the claims appended to the application.

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.

Citation Information

Patent Citations

  • Method and device for generating specific layout webpage by using language model tree

    CN117369771A

  • Front-end form generation method, product, equipment and storage medium

    CN120560655A

  • Form generation method and related equipment

    CN121480465A