Design page generation method based on workflow

Abstract

The invention provides a design page generation method based on workflow, which comprises the following steps of: setting an intelligent agent and an intelligent model, and designing cue words for process nodes of the workflow; the method comprises the following steps: S1, an intelligent agent receives a task image input by a user; s2, the intelligent agent sends the task image to the intelligent model; s3, analyzing the image and feeding back a result to the intelligent agent; s4, the intelligent agent sends the analysis result and the prompt word to the intelligent model, and the intelligent model generates a corresponding component code according to the analysis result; s5, the intelligent model feeds back the component code to the intelligent agent; s6, integrating the component codes into page codes by the intelligent agent, and sending the page codes to the intelligent model for code quality inspection; and S7, the intelligent agent forms the component codes into a design page according to the check result. The method has the beneficial effects that the prompting effect is better, and each node in the process can be used for follow-up tracing.

Description

Technical Field

[0001] This invention relates to a front-end interface generation technology, and more particularly to a workflow-based design page generation method. Background Technology

[0002] A design page is a front-end visual interface, including multiple components such as text, images, and styles. These components, with different functions, are combined to form a front-end design page, enabling the transmission of back-end data to the front-end user interface and allowing users to interact with the back-end data through visual information such as icons and buttons on the user interface. A workflow is a process framework that arranges each step of an event in a sequential and logical manner, including multiple process nodes.

[0003] The existing method for generating design pages involves the user first preparing a design page and prompts that have not yet been populated with any components. The user then sends the design page and a text expressing their needs to a large model used to generate component code. The large model then automatically generates component code based on the text, combines each component corresponding to the component code into a design page, and finally returns it to the client.

[0004] However, user-inputted text may be redundant or vague. When large models directly parse images from text and generate code, the generated code often fails to meet user expectations or even deviates completely from the user's needs. At the same time, obtaining results directly from code generated by large models can lead to unstable and unreproducible results. Summary of the Invention

[0005] To address the problems existing in the prior art, the present invention provides a workflow-based design page generation method, which sets up a user-facing intelligent agent and an intelligent model connected to the intelligent agent. The intelligent agent pre-forms a workflow related to the design page generation method and prompts corresponding to different process nodes in the workflow. The method for generating design pages based on the workflow includes: Step S1: The intelligent agent receives the task image input by the user; Step S2: The intelligent agent forms a processing image based on the task image, and sends the processing image and the corresponding prompt words to the intelligent model to trigger the intelligent model to parse the task image; Step S3: The intelligent model feeds back the analysis result obtained after analyzing the task image to the intelligent agent; Step S4: The agent sends the parsing result and the corresponding prompt word to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result; Step S5: The intelligent model feeds back the component code to the intelligent agent; Step S6: The intelligent agent integrates the component code to form page code, and sends the page code to the intelligent model for code quality check; Step S7: Based on the code quality check results fed back by the intelligent model, the intelligent agent forms a design page corresponding to the task image based on the component code combination.

[0006] Preferably, in step S2, the parsing result includes the layout, components, and style of the image to be processed.

[0007] Preferably, in step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71a, the intelligent agent judges the inspection result: If the inspection result indicates that the page code passes the code quality check, then the agent generates the design page based on the page code; If the inspection result indicates that the page code has failed the code quality check, then return to step S4. The agent sends the parsing result and the corresponding prompt word to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

[0008] Preferably, the intelligent body has a private component library containing multiple preset components; Before performing step S2, the procedure also includes: Step A1: For each component in the image to be processed, the agent determines whether a matching preset component exists in the private component library. If so, the agent will output the matching preset component as the candidate component; If not, proceed to step S2; In step S2, the intelligent model parses the unmatched components in the image to be processed and outputs the parsing result.

[0009] Preferably, in step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71b, the intelligent agent judges the inspection result: If the inspection result indicates that the page code passes the code quality check, the agent combines the page code and the candidate components to form the design page; If the inspection result indicates that the page code has failed the code quality check, then return to step S4. The agent sends the parsing result and the corresponding prompt word to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

[0010] Preferably, the intelligent body has a private component library containing multiple preset components; Before performing step S2, the procedure also includes: Step B1: For each component in the image to be processed, the agent determines whether a matching preset component exists in the private component library. If so, the agent outputs the matching preset component as the candidate component, and then proceeds to step B2; If not, the agent will treat the unmatched component as the component to be generated and then proceed to step S2; Step B2: The agent determines whether to select the candidate component based on the user's input instruction, and takes the component corresponding to the unselected candidate component as the component to be generated, and then proceeds to step S2. In step S2, the intelligent model analyzes the components to be generated in the image to be processed and outputs the analysis results.

[0011] Preferably, in step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71c, the agent judges the inspection result: If the inspection result indicates that the page code passes the code quality check, the agent combines the page code and the selected candidate components to form the design page; If the inspection result indicates that the page code has failed the code quality check, proceed to step S72c; Step S72c: For the component to be generated in the page code, the agent searches for whether there is a matching unselected candidate component. If it exists, the candidate component is selected to replace the component to be generated, and then proceed to step S73c; If it does not exist, proceed to step S73c; Step S73c: The agent determines whether all components in the page code have been replaced with the selected candidate components. If so, the intelligent agent will combine the selected candidate components to form the design page; If not, return to step S4, whereby the agent sends the parsing result and the corresponding prompt to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

[0012] Preferably, in step S7, the intelligent model performs structured and standardized code verification on the page code to achieve code quality checks on the page code.

[0013] Preferably, in step S2, the process by which the intelligent agent forms the image to be processed based on the task image includes: Step S21: The agent determines whether the task image contains different page regions based on the image attributes of the task image. If so, the agent will use a single page region as the image to be processed; If not, the agent will treat the entire task image as the image to be processed. In step S7, the agent combines the component codes corresponding to all the images to be processed to form a design page corresponding to the task image.

[0014] The beneficial effects obtained by this invention are as follows: 1. By generating corresponding prompts for different process nodes in the workflow through intelligent agents, the prompts for the input intelligent model are concise and effective, thereby enabling the intelligent model to accurately generate the code required by the user.

[0015] 2. The intelligent agent and the intelligent model interact multiple times throughout the code generation phase, which makes each step of code generation have clear logic and allows users to check each step separately for subsequent traceability or reproduction. Attached Figure Description

[0016] Figure 1 This is a flowchart illustrating the page design generation method of the present invention; Figure 2 This is a flowchart illustrating the process of determining whether the code quality check passes when component services are not invoked in this invention. Figure 3 This is a schematic diagram of the candidate component matching process when calling some components in this invention; Figure 4 This is a flowchart illustrating the process of determining whether the code quality check passes when calling certain components in this invention. Figure 5 This is a schematic diagram of the candidate component matching process when calling some components and processing the components to be generated in this invention; Figure 6This is a flowchart illustrating the process of determining whether the code quality check passes when calling some components and processing the components to be generated in this invention. Figure 7 A flowchart illustrating the process of determining the image processing mode for a task. Detailed Implementation

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

[0018] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other.

[0019] The present invention will be further described below with reference to the accompanying drawings and specific embodiments, but this is not intended to limit the scope of the invention.

[0020] This invention provides a workflow-based design page generation method, which sets up a user-facing intelligent agent and an intelligent model connected to the intelligent agent. The intelligent agent pre-forms a workflow related to the design page generation method and prompts corresponding to different process nodes in the workflow. like Figure 1 As shown, the methods for generating design pages based on workflow include: Step S1: The agent receives the task image input by the user; Step S2: The agent forms a processing image based on the task image and sends the processing image and corresponding prompt words to the intelligent model to trigger the intelligent model to parse the task image. Step S3: The intelligent model will feed back the analysis results obtained after analyzing the task image to the intelligent agent. In step S4, the agent sends the parsing results and corresponding prompts to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing results. Step S5: The intelligent model feeds back the component code to the intelligent agent; Step S6: The agent integrates the component code to form the page code and sends the page code to the intelligent model for code quality check. In step S7, the agent forms a design page corresponding to the task image based on the code quality check results fed back by the intelligent model and the component code combination.

[0021] In this invention, the intelligent agent is a user-facing front-end system that interacts with the user through a client within the intelligent agent. It can receive task images uploaded by the user and other instructions from the user, such as changing prompts, whether to invoke a decision, and whether to adopt the result of the decision.

[0022] The control system of the intelligent agent includes the functions of managing images, page components, prompts and codes. In addition, the intelligent agent also has preset decision logic, and users can choose manual decision-making, automatic system decision-making or a combination of decision-making for each process node in the workflow.

[0023] Specifically, the decision-making logic of an intelligent agent includes similarity, component type, and source library.

[0024] The intelligent agent connects to the client and the backend intelligent model through corresponding interfaces.

[0025] In this invention, the intelligent model is a large model used to parse images and generate front-end code.

[0026] Specifically, after being trained and validated as reliable, the large model is pre-configured on the backend and connected to the frontend agent. The large model performs relevant operations based on prompts at the image parsing and code generation stages.

[0027] In this invention, the prompt words for each process node are different.

[0028] Specifically, multiple prompts are designed in the image parsing node and the code generation node to assist in image parsing and code generation, respectively.

[0029] Specifically, for each step in the generation of page components, the intelligent agent orchestrates a corresponding workflow to generate multiple process nodes, including human-computer interaction, component invocation, decision-making, image parsing, code generation, result integration, and result output.

[0030] The agent designs corresponding prompt word templates for the image parsing node and the code generation node. The prompt word template contains multiple image parsing and code generation prompt words related to the design page. The prompt word template is embedded into the workflow of image parsing and code generation. The agent automatically calls the corresponding prompt words when executing these two process nodes.

[0031] Furthermore, the intelligent agent can simultaneously receive one or more original task images, classify and process these task images to obtain images to be processed, and label each image to be processed with an ID in sequence, and perform subsequent steps on each image to be processed according to the ID order.

[0032] Furthermore, after receiving the image to be processed, the intelligent model parses the information of the image based on the prompt words, and packages the parsing results in JSON format and sends them back to the intelligent agent.

[0033] Furthermore, the intelligent model generates Vue3+TS component code based on the prompts and JSON sent by the intelligent agent, outputting it in a fixed order of template, script setup, and scoped CSS, and including relevant comments.

[0034] In a preferred embodiment of the present invention, the parsing result in step S2 includes the layout, components, and style of the image to be processed.

[0035] On the one hand, the layout of images refers to the rules for arranging the positions of all visual elements on the page, the logic of area division, and the overall structural relationship, which are used to consider the placement of each element on the page design.

[0036] On the other hand, the components of an image are each functional and visual module in the front-end design page. Each component possesses independent semantics, complete functionality, and reusability. Simultaneously, each component corresponds to a piece of code describing its visual and functional characteristics. The code for each component to be designed is also the object that needs to be generated subsequently by the intelligent model.

[0037] On the other hand, image styles are detailed specifications for front-end page design, used to visually optimize and define the layout and details of each component of the design page, and determine the final presentation effect.

[0038] In several embodiments of the present invention, a private component library containing multiple preset components is pre-installed within the intelligent agent. Before requesting code generation from the intelligent model, the intelligent agent retrieves the corresponding component from the private component library based on the features of each component in the task image and returns a component list including all retrieved components, as well as the component's name, similarity, and source library.

[0039] Users receive a list of components on the client interface, and then decide whether to adopt the candidate components through manual or automatic decision-making. Based on the decision result, the code generation steps are executed.

[0040] Specifically, the private component library consists of components uploaded independently and components synchronized offline.

[0041] On the one hand, users submit component code, metadata, examples, and dependencies to the internal platform and have them added to the library.

[0042] On the other hand, users can use intelligent agents to create offline images of components from open-source or third-party libraries, complete standardized operations such as license verification, version locking, and security review, perform schema verification, style and naming convention checks, security and license scanning, and compatibility matrix verification on the images, and store the verified images as private copies in the library.

[0043] The following examples illustrate how intelligent agents call components, generate intelligent model code, and integrate code, respectively, without using component call services, partially using component call services, and partially using component call services while selecting the component to be generated.

[0044] Example 1: The user uploads a task image, the agent receives the task image, and processes it to form a pending image. If the user chooses not to use component-based service calls, the agent sends the pending image and a prompt to the intelligent model. The intelligent model parses the pending image based on the prompt and then returns JSON. The agent then sends the JSON and the prompt back to the intelligent model, which generates component code based on the prompt and returns the Vue3+TS component code to the agent.

[0045] like Figure 2 As shown, in step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71a, the agent judges the inspection results: If the inspection result indicates that the page code passes the code quality check, the agent will generate the designed page based on the page code; If the check result indicates that the page code has failed the code quality check, then return to step S4. The agent sends the parsing result and the corresponding prompt to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

[0046] The agent sets a threshold number of attempts. When the number of attempts to regenerate the code exceeds the threshold, the agent determines that the code generation has failed and returns the failure result and the historical reasons for the failure to the client.

[0047] Users can choose to regenerate the prompt words, send all the parsing results and the new prompt words to the intelligent model, and perform a new round of code generation.

[0048] Example 2: The user uploads a task image, and the intelligent agent receives the task image.

[0049] like Figure 3 As shown, before performing step S2, the procedure also includes: Step A1: For each component in the image to be processed, the agent determines whether a matching preset component exists in its private component library. If so, the agent will output the matching preset component as a candidate component; If not, proceed to step S2; In step S2, the intelligent model parses the unmatched components in the image to be processed and outputs the parsing results.

[0050] The user selection process uses a component-based service call. The agent sends the image to be processed and the prompt words to the intelligent model. The intelligent model parses the image based on the prompt words and then returns JSON. The agent then sends the JSON and prompt words back to the intelligent model. The intelligent model generates code for components that do not match the candidate components based on the prompt words and returns the Vue3+TS component code to the agent.

[0051] like Figure 4 In step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71b: The agent judges the inspection results: If the inspection result indicates that the page code passes the code quality check, the agent will combine the page code and candidate components to form the design page; If the check result indicates that the page code has failed the code quality check, then return to step S4. The agent sends the parsing result and the corresponding prompt to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

[0052] The agent sets a threshold number of attempts. When the number of attempts to regenerate the code exceeds the threshold, the agent determines that the code generation has failed and returns the failure result and the historical reasons for the failure to the client.

[0053] Users can choose to regenerate the prompt words, send the component to be generated and the new prompt words to the intelligent model, and start a new round of code generation.

[0054] Compared to Example 1, in Example 2, the user calls a service through a component, selects to call some components, and uses an intelligent model to perform image parsing and generate code for the parts of the design page that are not called.

[0055] Example 3: The user uploads a task image, and the intelligent agent receives the task image.

[0056] like Figure 5 As shown, before performing step S2, the following steps are also included: Step B1: For each component in the image to be processed, the agent determines whether a matching preset component exists in its private component library. If so, the agent outputs the matching preset component as a candidate component and then proceeds to step B2; If not, the agent will treat the unmatched component as the component to be generated and then proceed to step S2; Step B2: The agent determines whether to select a candidate component based on the user's input instructions, and takes the component corresponding to the unselected candidate component as the component to be generated, and then proceeds to step S2. In step S2, the intelligent model analyzes the components to be generated in the image to be processed and outputs the analysis results.

[0057] The user selection process uses a component-based service call. The agent sends the image to be processed and the prompt words to the intelligent model. The intelligent model parses the image based on the prompt words and then returns JSON. The agent then sends the JSON and prompt words back to the intelligent model. The intelligent model generates code for components that do not match candidate components and components that were not selected by the user based on the prompt words, and returns the Vue3+TS component code to the agent.

[0058] like Figure 6 As shown, in step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71c: The agent judges the inspection results: If the inspection result indicates that the page code passes the code quality check, the agent will combine the page code and the selected candidate components to form the design page; If the inspection result indicates that the page code has failed the code quality check, proceed to step S72c; Step S72c: For the components to be generated in the page code, the agent searches for whether there are matching unselected candidate components: If it exists, the candidate component is selected to replace the component to be generated, and then proceed to step S73c; If it does not exist, proceed to step S73c; In step S73c, the agent determines whether all components in the page code have been replaced with the selected candidate components: If so, the agent will combine the selected candidate components to form the design page; If not, return to step S4, where the agent sends the parsing result and the corresponding prompt to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

[0059] The agent sets a threshold number of times it can regenerate code. When the number of times the code is regenerated exceeds the threshold, the agent automatically calls the existing candidate components as the corresponding components for the parts that have not been called. For the parts that do not match the corresponding components, the agent returns the result and reason for the generation failure to the client.

[0060] Users can choose to regenerate the prompt words, send the component to be generated and the new prompt words to the intelligent model, and start a new round of code generation.

[0061] In Example 3, the user selects to call some candidate components. At this time, the agent first retains the candidate components that have not been called. These components include the components corresponding to the called parts and the components that have not been called. After multiple code generations, if the intelligent model cannot generate the correct component code corresponding to the component to be generated, the agent returns to check if there is a component in the candidate components that can match the component to be generated. If there is, the agent will call it directly and automatically; if not, the number of code generations has exceeded the threshold, indicating that the current prompt word cannot meet the generation needs. Then the system generates and uses a new prompt word to start the next round of code generation.

[0062] In a preferred embodiment of the present invention, in step S7, the intelligent model performs structured and standardized code verification on the page code to achieve code quality inspection of the page code.

[0063] On the one hand, structured validation includes the agent checking whether the page code is output in the order of template, script setup, and scoped CSS, and whether the types and styles of the page components generated by the code are complete.

[0064] On the other hand, standardization verification includes intelligent agents automatically generating review rules, README generation rules, and submission check rules, which are used to check whether the content of the code conforms to the standards.

[0065] Specifically, a page component code is considered to have passed the code quality check only if it passes both structured and normalized validation. If a page component code fails either or both validations, the component code needs to be returned to the smart model for re-validation.

[0066] Furthermore, when the code quality check indicates that it has passed, the intelligent agent records and saves each executed step, all input content, all output content, and rule version within the intelligent agent, allowing users to trace back to obtain a specific process node and its content, and to perform operations such as checking or reproducing that process node.

[0067] When a code quality check indicates a failure, the agent records the reason for the failure and its context for the user to view.

[0068] In a preferred embodiment of the present invention, such as Figure 7 As shown, in step S2, the process by which the agent forms the image to be processed based on the task image includes: Step S21: The agent determines whether the task image contains different page regions based on the image attributes of the task image. If so, the agent will treat a single page region as the image to be processed; If not, the agent will treat the entire task image as the image to be processed. In step S7, the agent combines the component codes corresponding to all the images to be processed to form a design page corresponding to the task image.

[0069] Specifically, the agent acquires task data from the task image and checks for region labels.

[0070] Specifically, the agent checks whether the annotations array of the task data is empty: If the array is empty, it means that the task image has not been divided into regions, and the agent treats the entire task image as the image to be processed. If the array is not empty, the agent traverses the task image and divides the task image into multiple corresponding page regions according to the data in the array, and processes each page region as an image to be processed sequentially.

[0071] Furthermore, the intelligent agent provides a manual data annotation link on the client side. Users can access the data annotation interface by clicking the link, and manually divide the task image into regions and save it before uploading the task image.

[0072] The agent directly performs subsequent image parsing and code generation on the entire image without region labels. For task images divided into multiple regions by region labels, the agent independently performs the same image parsing and code generation for each region as it does for the entire image. The agent integrates the component code corresponding to all regions that pass quality verification into complete design page code. When any region fails quality verification, it cannot integrate all component code into complete design page code. Instead, it performs component matching on the regions that fail quality verification, redesigns the prompts and generates component code for the unmatched parts, until the corresponding components are generated or called for all regions, or the user manually stops the generation process.

[0073] Furthermore, the agent stores the content and generation records of each region in the Region table, including annotations such as region identifiers, region partitioning frameworks, and region image links, and associates them with the task image. Subsequent component matching and code generation processes will write the results to the corresponding region entries in the region annotation set, forming an auditable closed loop.

[0074] By labeling complex task images with multiple regions and processing them in parallel, we can save computing resources compared to processing the entire image directly, and greatly improve the efficiency of component calls and code generation.

[0075] The above description is merely a preferred embodiment of the present invention and does not limit the implementation and protection scope of the present invention. Those skilled in the art should realize that any equivalent substitutions and obvious changes made based on the description and illustrations of the present invention should be included within the protection scope of the present invention.

Claims

1. A workflow-based design page generation method, characterized in that, Set up a user-oriented intelligent agent and an intelligent model connected to the intelligent agent. The intelligent agent pre-forms a workflow related to the design page generation method and prompts corresponding to different process nodes in the workflow. The method for generating design pages based on the workflow includes: Step S1: The intelligent agent receives the task image input by the user; Step S2: The intelligent agent forms a processing image based on the task image, and sends the processing image and the corresponding prompt words to the intelligent model to trigger the intelligent model to parse the task image; Step S3: The intelligent model feeds back the analysis result obtained after analyzing the task image to the intelligent agent; Step S4: The agent sends the parsing result and the corresponding prompt word to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result; Step S5: The intelligent model feeds back the component code to the intelligent agent; Step S6: The intelligent agent integrates the component code to form page code, and sends the page code to the intelligent model for code quality check; Step S7: Based on the code quality check results fed back by the intelligent model, the intelligent agent forms a design page corresponding to the task image based on the component code combination.

2. The design page generation method according to claim 1, characterized in that, In step S2, the parsing result includes the layout, components, and style of the image to be processed.

3. The design page generation method according to claim 1, characterized in that, In step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71a, the intelligent agent judges the inspection result: If the inspection result indicates that the page code passes the code quality check, then the agent generates the design page based on the page code; If the inspection result indicates that the page code has failed the code quality check, then return to step S4. The agent sends the parsing result and the corresponding prompt word to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

4. The design page generation method according to claim 1, characterized in that, The intelligent body has a private component library containing multiple preset components; Before performing step S2, the procedure also includes: Step A1: For each component in the image to be processed, the agent determines whether a matching preset component exists in the private component library. If so, the agent will output the matching preset component as the candidate component; If not, proceed to step S2; In step S2, the intelligent model parses the unmatched components in the image to be processed and outputs the parsing result.

5. The design page generation method according to claim 4, characterized in that, In step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71b, the intelligent agent judges the inspection result: If the inspection result indicates that the page code passes the code quality check, the agent combines the page code and the candidate components to form the design page; If the inspection result indicates that the page code has failed the code quality check, then return to step S4. The agent sends the parsing result and the corresponding prompt word to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

6. The design page generation method according to claim 1, characterized in that, The intelligent body has a private component library containing multiple preset components; Before performing step S2, the procedure also includes: Step B1: For each component in the image to be processed, the agent determines whether a matching preset component exists in the private component library. If so, the agent outputs the matching preset component as the candidate component, and then proceeds to step B2; If not, the agent will treat the unmatched component as the component to be generated and then proceed to step S2; Step B2: The agent determines whether to select the candidate component based on the user's input instruction, and takes the component corresponding to the unselected candidate component as the component to be generated, and then proceeds to step S2. In step S2, the intelligent model analyzes the components to be generated in the image to be processed and outputs the analysis results.

7. The design page generation method according to claim 6, characterized in that, In step S7, the agent performs the following operations based on the inspection results fed back by the intelligent model: Step S71c, the agent judges the inspection result: If the inspection result indicates that the page code passes the code quality check, the agent combines the page code and the selected candidate components to form the design page; If the inspection result indicates that the page code has failed the code quality check, proceed to step S72c; Step S72c: For the component to be generated in the page code, the agent searches for whether there is a matching unselected candidate component. If it exists, the candidate component is selected to replace the component to be generated, and then proceed to step S73c; If it does not exist, proceed to step S73c; Step S73c: The agent determines whether all components in the page code have been replaced with the selected candidate components. If so, the intelligent agent will combine the selected candidate components to form the design page; If not, return to step S4, whereby the agent sends the parsing result and the corresponding prompt to the intelligent model to trigger the intelligent model to generate the corresponding component code based on the parsing result, so that the intelligent model can regenerate the corresponding component code based on the parsing result.

8. The design page generation method according to claim 1, characterized in that, In step S7, the intelligent model performs structured and standardized code verification on the page code to check the code quality of the page code.

9. The design page generation method according to claim 1, characterized in that, In step S2, the process by which the intelligent agent forms the image to be processed based on the task image includes: Step S21: The agent determines whether the task image contains different page regions based on the image attributes of the task image. If so, the agent will use a single page region as the image to be processed; If not, the agent will treat the entire task image as the image to be processed. In step S7, the agent combines the component codes corresponding to all the images to be processed to form a design page corresponding to the task image.

Images