Front-end interface generation method and related device

By engaging with users to obtain design intent and breaking it down into multiple sub-tasks, and utilizing intelligent agents and generative artificial intelligence models to automatically generate front-end interfaces, the problem of low generation efficiency and high difficulty in existing technologies is solved, achieving efficient and accurate interface generation.

CN121957585APending Publication Date: 2026-05-01RICHFIT INFORMATION TECH +1
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202411530466.2
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2024-10-30
Publication Date
2026-05-01

AI Technical Summary

Technical Problem

In existing technologies, front-end interface generation relies on front-end designers or product managers, which is inefficient, has a low degree of automation, and requires high professional skills from designers or managers, making generation difficult.

Method used

By engaging in dialogue with users to obtain design intent, breaking it down into multiple sub-tasks, and utilizing intelligent agents and generative artificial intelligence models to automatically generate front-end interfaces, including element design, interaction flow design, layout design, component design, visual design, and experience design.

Benefits of technology

It improves the efficiency of front-end interface generation, reduces the generation difficulty and entry threshold, and provides a human-computer dialogue entry point to allow users to intervene and adjust the task plan, thereby improving the accuracy of generation.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121957585A_ABST
    Figure CN121957585A_ABST
Patent Text Reader

Abstract

The invention provides a front-end interface generation method and a related device, and relates to the technical field of computers. The method comprises the steps of performing conversation with a user based on a natural language to obtain a design intention of the user; according to the design intention, decomposing the design intention into a plurality of executable sub-tasks to form a task plan; the sub-tasks are executed step by step according to the task plan, description information of the front-end interface to be generated is obtained, in the step-by-step execution process of the sub-tasks, intelligent agents corresponding to the sub-tasks are called according to the content of the sub-tasks, execution results corresponding to the sub-tasks are obtained, and the intelligent agents are used for executing the corresponding sub-tasks by applying a generative artificial intelligence model; and generating a front-end interface according to the description information. According to the method, the front-end interface can be automatically generated based on the design intention of a designer, and the front-end page generation efficiency is improved.
Need to check novelty before this filing date? Find Prior Art

Description

Front-end interface generation method and related devices Technical Field

[0001] This application relates to the field of computer technology, and in particular to a front-end interface generation method and related apparatus. Background Technology

[0002] Currently, the generation of front-end interfaces mainly relies on manual work by front-end designers or product managers. The interaction generation process is primarily based on a keyboard-mouse model, which is inefficient and lacks automation, requiring a high level of understanding and professional skills from front-end designers or product managers. Therefore, improving the automation level of front-end interface generation, increasing generation efficiency, and lowering the entry barrier have become urgent problems to be solved. Summary of the Invention

[0003] This application provides a front-end interface generation method and related apparatus, which automatically generates a front-end interface based on the designer's design intent, thereby improving the efficiency of front-end page generation.

[0004] In a first aspect, embodiments of this application provide a front-end interface generation method, comprising: applied to a front-end interface development system, the front-end interface generation method comprising:

[0005] Engage with users using natural language to understand their design intent;

[0006] Based on the design intent, the design intent is broken down into multiple executable sub-tasks to form a task plan;

[0007] The sub-tasks are executed step by step according to the task plan to obtain the description information of the front-end interface to be generated. During the step-by-step execution of sub-tasks, the corresponding intelligent agent is called according to the content of the sub-task to obtain the execution result of the sub-task. The intelligent agent is used to execute the corresponding sub-task by applying the generative artificial intelligence model.

[0008] Generate the front-end interface based on the description information.

[0009] In one possible implementation, the execution results of the subtasks are presented in natural language.

[0010] In one possible implementation, it also includes:

[0011] Output the task plan and provide a human-computer dialogue interface, which is used to obtain user intervention behavior;

[0012] Adjust task plans based on intervention behaviors obtained from human-computer dialogue entry points.

[0013] In one possible implementation, the user's design intent is obtained through dialogue using natural language, including:

[0014] Based on preset front-end interface prompt templates and design prompts, it engages in dialogue with users using natural language to obtain dialogue content;

[0015] Determine the user's design intent based on the dialogue content and the design technology field.

[0016] In one possible implementation, determining the user's design intent based on the dialogue content and the design technology field includes:

[0017] Based on the content of the dialogue and the design technology field, determine whether the user's design intent can be obtained;

[0018] If the user's design intent cannot be obtained, then based on the preset questioning mechanism, at least one round of dialogue based on natural language will be conducted with the user until the user's design intent is determined.

[0019] In one possible implementation, the correspondence between the agent and the generative artificial intelligence model is configurable.

[0020] Secondly, embodiments of this application provide a front-end interface generation apparatus, comprising:

[0021] The acquisition module is used to engage in dialogue with users based on natural language to obtain the user's design intent;

[0022] The processing module is used to break down the design intent into multiple executable sub-tasks based on the design intent, forming a task plan;

[0023] The processing module is also used to execute sub-tasks step by step according to the task plan to obtain the description information of the front-end interface to be generated. During the step-by-step execution of sub-tasks, the intelligent agent corresponding to the sub-task is called according to the content of the sub-task to obtain the execution result of the sub-task. The intelligent agent is used to execute the corresponding sub-task by applying the generative artificial intelligence model.

[0024] The generation module is used to generate the front-end interface based on the description information.

[0025] In one possible implementation, the front-end interface generation apparatus further includes an output module, which is used for:

[0026] Output the task plan and provide a human-computer dialogue interface, which is used to obtain user intervention behavior;

[0027] Adjust task plans based on intervention behaviors obtained from human-computer dialogue entry points.

[0028] In one possible implementation, the processing module is further configured to:

[0029] Based on preset front-end interface prompt templates and design prompts, it engages in dialogue with users using natural language to obtain dialogue content;

[0030] Determine the user's design intent based on the dialogue content and the design technology field.

[0031] In one possible implementation, the processing module is further configured to:

[0032] Based on the content of the dialogue and the design technology field, determine whether the user's design intent can be obtained;

[0033] If the user's design intent cannot be obtained, then based on the preset questioning mechanism, at least one round of dialogue based on natural language will be conducted with the user until the user's design intent is determined.

[0034] Thirdly, embodiments of this application provide a front-end interface generation device, including: a memory and a processor;

[0035] The memory stores computer-executed instructions;

[0036] The processor executes computer execution instructions stored in the memory, causing the processor to perform the first aspect and / or various possible implementations of the first aspect as described above.

[0037] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the first aspect and / or various possible implementations of the first aspect.

[0038] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the first aspect and / or various possible implementations of the first aspect.

[0039] The front-end interface generation method and related apparatus provided in this application obtain the user's design intent through dialogue, decompose the user's intent into multiple executable sub-tasks to form a task plan, and execute the sub-tasks step by step according to the task plan to obtain the description information of the front-end interface to be generated. During the execution of the sub-tasks, the corresponding intelligent agent is invoked according to the content of the sub-task. The intelligent agent cooperates with the generative artificial intelligence model to complete the sub-task, and finally, the front-end interface is generated based on the description information of the front-end interface. In this process, the front-end interface is automatically generated based on the designer's design intent, which can improve the efficiency of front-end page generation; in addition, obtaining the user's design intent through dialogue can also lower the entry barrier for generating front-end pages. Attached Figure Description

[0040] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0041] Figure 1 is a schematic diagram of the front-end interface generation method provided in this application;

[0042] Figure 2 is a schematic diagram of the front-end interface for generating task plans provided in this application;

[0043] Figure 3 is a schematic diagram of the front-end interface generation method provided in this application (II).

[0044] Figure 4 is a schematic diagram of the front-end interface generation method provided in this application.

[0045] Figure 5 is a schematic diagram of the front-end interface generation method provided in this application;

[0046] Figure 6 is a schematic diagram of the front-end interface provided in this application;

[0047] Figure 7 is a schematic diagram of the front-end interface generation device provided in this application;

[0048] Figure 8 is a schematic diagram of the front-end interface generation device provided in this application.

[0049] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concepts of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0050] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0051] The front-end interface refers to the part of the screen that users see and interact with when interacting with an application or website. It serves as the interface between the user and the application, used to display information, receive input, and communicate with backend services. Typically, front-end interface design is done manually by front-end designers or product managers. This involves first collecting and analyzing requirements, then outlining the interaction flow based on those requirements, designing prototypes and user experience, and finally writing the front-end code to generate the front-end page. This method of front-end page generation primarily relies on mouse-keyboard interaction, resulting in a large workload, a tedious process, and high demands on the designer's comprehension and professional skills. These factors make front-end page generation a complex task. Therefore, improving the efficiency of front-end interface generation and reducing its difficulty are urgent problems to be solved.

[0052] In response, this application provides a front-end interface generation method, the main inventive concept of which includes: engaging in dialogue with the user, understanding and obtaining the user's design intent, and automatically generating the front-end interface based on the user's intent, thereby improving the efficiency of front-end page generation and lowering the entry barrier for front-end interface generation.

[0053] Optionally, the front-end interface generation method is applied to the front-end interface development system. In response to the user's operation of creating a new front-end interface generation project, the front-end interface development system calls an intelligent agent. The intelligent agent engages in dialogue with the user based on natural language to obtain the user's design intent.

[0054] An intelligent agent is a computer program based on a large language model that can autonomously complete a given task. Specifically, an intelligent agent has the following functions: role function: the user can define roles for the intelligent agent. Once the role is determined, the knowledge domain of the intelligent agent is defined. When the intelligent agent interacts with the user, it can understand the user's intention by combining knowledge from this knowledge domain; planning function: the intelligent agent can break down large tasks into sub-tasks and plan the execution process of the tasks. The intelligent agent can think and reflect on the task execution process to decide whether to continue the task or determine that the task is completed and terminate the operation; memory function: the intelligent agent's memory is divided into two types: short-term memory and long-term memory. Short-term memory refers to the context during the execution of the task, which is generated and temporarily stored during the execution of sub-tasks and is cleared after the task is completed. Long-term memory is information that is retained for a long time, generally referring to external knowledge bases, usually stored and retrieved using vector databases; and tool invocation function: the intelligent agent has an interface to interact with other tools and can complete the tasks it needs to complete by invoking tools.

[0055] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0056] Figure 1 is a flowchart illustrating the front-end interface generation method provided in this application. As shown in Figure 1, the method includes:

[0057] S101. Engage with users using natural language to obtain their design intent.

[0058] In one implementation, user voice signals can be acquired using an audio acquisition device, and the acquired user voice signals can be analyzed based on natural language processing technology to obtain the user's design intent.

[0059] In another implementation, user input based on natural language can be obtained through interactive methods such as mouse and keyboard, and the obtained input can be analyzed based on natural language processing technology to obtain the user's design intent.

[0060] The method of obtaining design intent through dialogue with users using natural language has lower requirements for designers' comprehension and professional skills, thus lowering the entry barrier for front-end page generation.

[0061] S102. Based on the design intent, decompose the design intent into multiple executable sub-tasks to form a task plan.

[0062] As described in the above description of the intelligent agent's functions, the intelligent agent has a planning function, which breaks down large tasks into sub-tasks and plans the process of executing the tasks. The intelligent agent will think and reflect on the process of task execution, and thus decide whether to continue to execute the task or judge that the task is completed and terminate the operation.

[0063] In one implementation, for a large task of designing a front-end interface, the agent will decompose it from at least the following six aspects: determining the elements contained in the page, determining the interaction flow between elements, determining the interface layout, determining the representation controls of the elements, determining the visual design, and determining the experience design.

[0064] Here, "elements" refers to the main functions that the front-end interface needs to include; "interaction flow" refers to the process by which users interact with the platform through the front-end interface from the perspective of user access to the platform; "interface layout" can be generated by the intelligent agent based on user intent and historical preferences, for example, placing a line chart of displayed data in a specific position on the page; "determining the representation controls of elements" refers to determining the representation controls used to display specific functions from the perspective of visual effects; "determining visual design" and "determining experience design" refer to visually optimizing and / or optimizing the overall page from the perspective of user's visual experience and usage experience.

[0065] In one implementation, the task plan also includes the execution order of subtasks. The execution order can be a pattern in which multiple subtasks can be executed serially or in parallel, or several subtasks can be executed in parallel while the remaining subtasks are executed serially.

[0066] For example, the intelligent agent decomposes the front-end interface generation task into element design, interaction flow design, layout design, component design, visual design, and experience design according to the user's design intent, and determines that the execution order of these sub-tasks is serial execution. That is, after each sub-task is completed, the result is passed to the next sub-task to start the execution of the next sub-task, until the experience design sub-task is completed, and the complete front-end interface content is obtained.

[0067] S103. Execute sub-tasks step by step according to the task plan to obtain the description information of the front-end interface to be generated. During the step-by-step execution of sub-tasks, the corresponding intelligent agent is called according to the content of the sub-task to obtain the execution result of the sub-task. The intelligent agent is used to execute the corresponding sub-task by applying the generative artificial intelligence model.

[0068] Generative artificial intelligence models refer to models that generate text, images, audio, video, code, and other content based on algorithms, mathematical models, and rules. These models can generate content with a certain degree of logic and coherence by relying on pre-trained multimodal models and relevant user input, tailored to user needs.

[0069] In one implementation, the generation of the task plan and the execution of the sub-tasks can be performed by different intelligent agents. As shown in Figure 2, the central control intelligent agent is responsible for interacting with the user and the task plan. After the task plan is completed, the user's design intent is divided into 6 sub-tasks. According to the content of each sub-task, the intelligent agent corresponding to the sub-task is called. Each intelligent agent corresponding to the sub-task is dedicated to executing this sub-task.

[0070] In one implementation, the interaction flow between the central control agent and the agent executing the sub-task is shown in Figure 3. The flow includes:

[0071] S1031, The central control agent obtains the user's intent, specifies the task plan, and sends a start command to agent 1, which is responsible for executing the element design task.

[0072] S1032, Agent 1 uses a generative artificial intelligence model to perform the element design task and sends the task results to Agent 2, which is responsible for performing the interaction process design task.

[0073] Specifically, agent 1 applied an artificial intelligence model to obtain a description of the functional elements in the front-end page.

[0074] S1033, Agent 2, based on the task results of Agent 1, applies a generative artificial intelligence model to execute the interaction process design task, and sends the task results to Agent 3, which is responsible for executing the layout design sub-task.

[0075] Specifically, based on the description of functional elements in the front-end page transmitted by agent 1, agent 2 uses a generative artificial intelligence model to generate a description of the interaction process design in each functional element, and integrates the results obtained by agent 1 and agent 2 as the task result output.

[0076] S1034. Based on the task results of agent 2, agent 3 applies a generative artificial intelligence model to execute the layout design task and sends the task results to agent 4, which is responsible for executing the layout design task.

[0077] Specifically, based on the description of elements and interaction flow in the front-end page in the task result of agent 2, agent 3 applies a generative artificial intelligence model to generate a description of the page layout in the front-end page, and combines it with the task result passed by agent 2 to form the task result of agent 3, which is then output.

[0078] S1035, Agent 4, based on the task results of Agent 3, applies a generative artificial intelligence model to perform component design tasks and sends the task results to Agent 5, which is used to perform visual design tasks.

[0079] Similar to the execution process of the aforementioned agents, agent 4, based on the descriptions of various aspects of the front-end page in the task results of agent 3, applies a generative artificial intelligence model to generate descriptions of the component parts in the front-end page, and integrates the results as the task result.

[0080] S1036, Agent 5, based on the task results of Agent 4, applies a generative artificial intelligence model to perform a visual design task and sends the task results to Agent 6, which is responsible for the experience design task.

[0081] Similar to the execution process of the aforementioned agents, agent 5, based on the descriptions of various aspects of the front-end page in the task results of agent 4, applies a generative artificial intelligence model to generate a description of the meta-visual effects in the front-end page, and integrates the results as the task result.

[0082] S1037 and Agent 6, based on the task results of Agent 5, apply a generative artificial intelligence model to perform experience design tasks.

[0083] After agent 6 generates a description of the user experience design in the front-end page, it obtains all the front-end interface description information.

[0084] S1038, Agent 6 sends front-end interface description information to the central control agent.

[0085] S104. Generate the front-end interface based on the description information.

[0086] Optionally, after receiving the front-end interface description information sent by agent 6, the central control agent first generates the front-end interface code, and then generates the corresponding front-end interface based on the front-end interface code.

[0087] This application utilizes agent technology, where agents interact with users to obtain their design intent. After obtaining the user's design intent, the task of generating the front-end interface is decomposed into multiple sub-tasks. Multiple agents are then invoked to execute these sub-tasks. These agents, in conjunction with a generative artificial intelligence model, generate the sub-task content. Finally, after all sub-tasks are completed, a description of the front-end interface is obtained. Based on this description, the front-end interface code and interface can be generated. This process automates the front-end interface generation, significantly improving its efficiency, lowering the barrier to entry for front-end interface design, and enabling the use of a generative artificial intelligence model to obtain high-quality front-end interface content.

[0088] In one implementation, the execution results of the subtasks are presented in natural language.

[0089] For example, the natural language can be Chinese or English.

[0090] In one implementation, the intelligent agent decomposes the front-end interface generation task into six sub-tasks: element design, interaction flow design, layout design, component design, visual design, and experience design. The sub-tasks are executed sequentially. When a sub-task is completed, the execution result is presented in natural language and passed to the next intelligent agent executing the sub-task. The intelligent agent first understands the execution result of the previous intelligent agent and generates the execution result of the sub-task based on the understanding of the previous sub-task's execution result.

[0091] The front-end interface generation method provided in this application presents the execution results of subtasks in natural language. This allows the agents to understand the execution results of subtasks when they are transmitted between agents, based on a large language model. The agents can then generate the execution results of the subtasks based on the execution results of the previous subtask, so that the execution results of different subtasks can be well integrated to form comprehensive and accurate front-end interface description information.

[0092] In one implementation, the front-end interface generation method further includes: outputting a task plan and providing a human-computer dialogue entry point, wherein the human-computer dialogue entry point is used to obtain user intervention behavior, and adjusting the task plan based on the intervention behavior obtained from the human-computer dialogue entry point.

[0093] In this context, user intervention refers to the user's adjustment of the task plan content generated by the intelligent agent.

[0094] In one implementation, as shown in Figure 4, during the front-end interface generation process, the agent first obtains the user's design intent through dialogue. The next step is task planning, which involves breaking down the front-end interface generation task into several sub-tasks based on the user's design intent. Simultaneously with task planning, user preferences are incorporated, and the task plan is executed according to these preferences. User preferences refer to the user's design habits and preferences for the front-end interface recorded in the agent's short-term and long-term memory. Short-term memory refers to the context during task execution, generated and temporarily stored during the execution of sub-tasks, and cleared after the task is completed. Long-term memory is information retained for a long period, generally referring to an external knowledge base, typically stored and retrieved using a vector database.

[0095] After the task plan is generated, the AI ​​will output the task plan, which the user can view. If the user is dissatisfied with any aspects of the task plan, they can intervene manually by inputting modification suggestions through a human-computer dialogue interface. The AI ​​will then understand the modification suggestions and regenerate the task plan. When the generated task plan meets the user's preferences and no user modifications are requested, the task plan will be executed. The specific execution process is as described in step S103 of the above embodiment and will not be repeated here.

[0096] In one implementation, as shown in Figure 5, during task execution, the corresponding intelligent agent is first invoked based on the sub-task content. The intelligent agent then calls a generative artificial intelligence model to generate the sub-task content. During this process, user preferences are also incorporated, and the sub-task content is generated using the user's design habits and preferences stored in the intelligent agent's short-term or long-term memory. Furthermore, after generating the sub-task results, the results are output, allowing the user to view the results of each sub-task. The user can also intervene manually by inputting modification suggestions through a human-computer dialogue interface, after which the intelligent agent will re-invoke the generative artificial intelligence model to generate the sub-task results.

[0097] The front-end interface generation method provided in this application provides a human-computer dialogue entry point for obtaining user intervention behavior. By setting a user intervention interface, users can make timely adjustments to plans or results that do not conform to their design intentions, thereby improving the accuracy of front-end interface generation.

[0098] In one implementation, the agent engages in dialogue with the user using natural language to obtain the user's design intent. This includes: engaging in dialogue with the user using natural language based on a preset front-end interface prompt template and design prompts to obtain dialogue content. Optionally, before obtaining the user's design intent, the agent provides a preset front-end interface prompt template. The prompt template is an information description of a front-end page containing basic functions, while also providing design prompts to guide the user to add their own design intent based on the prompt template and engage in dialogue with the agent.

[0099] In one implementation, the agent determines the user's design intent based on the dialogue content and the technical field of design. Optionally, the user can define a role for the agent, and the agent, based on the technical field indicated by the role definition and subsequent dialogue with the user, obtains the user's design intent.

[0100] For example, a user can type and send "You are a finance professional" in a dialog box when talking to an agent. The agent understands this information and determines that its role is that of a finance professional. In subsequent conversations with the user, the agent will use its financial knowledge to understand the user's input and obtain the design intent.

[0101] The front-end interface generation method provided in this application, when obtaining the user's design intent, combines the technical field set by the user to further understand the dialogue content with the user, thereby improving the accuracy of obtaining the user's design purpose.

[0102] In one implementation, determining the user's design intent based on the dialogue content and the design technology field includes: determining whether the user's design intent can be obtained based on the dialogue content and the design technology field; if the user's design intent cannot be obtained, then conducting at least one round of dialogue with the user based on natural language based on a preset follow-up questioning mechanism until the user's design intent is determined.

[0103] Optionally, the user's design intent needs to include a description of the basic elements and functions of the front-end interface. When the basic elements and functions required for generating the front-end interface cannot be determined based on the dialogue content and the design technology field, the agent will proactively ask the user follow-up questions and conduct at least one round of dialogue with the user based on natural language until the user's design intent is determined.

[0104] The front-end interface generation method provided in this application can efficiently and accurately obtain the user's design intent by asking follow-up questions when the basic functions and elements required for front-end interface design cannot be obtained.

[0105] In one possible implementation, the correspondence between the agent and the generative AI model is configurable. If the currently used generative AI model cannot meet the task requirements, or if the task results do not meet the user's design needs, other generative AI models can be invoked by switching models. By configuring the correspondence between the agent and the generative AI model, the flexibility and accuracy of the front-end interface generation can be further improved.

[0106] In one implementation, based on the agent's reflection function, the agent has the ability to autonomously mine processes, which can mine and optimize the processes established by the agent, thereby simplifying processes, improving experience, and identifying risks, so that the front-end human-computer interaction logic can achieve adaptive optimization.

[0107] Taking the front-end interface generation process of the geophysical exploration report generation program as an example, using the front-end interface generation method provided by this invention, the intelligent agent can understand user semantics and decompose them into a human-computer interaction interface design process, plan and decompose sub-tasks. Based on semantic understanding and reflection mechanisms, this product decomposes the design task into a fixed layout, fixed interface elements plus dynamic content layout, increases the human-computer dialogue entry point, facilitates incremental data uploads and real-time intervention in report content generation by users, and designs key action components in the field closest to the main dialog box to achieve the shortest mouse click distance, and supports shortcut key interaction input. After the user confirms the plan in the planning loop, the intelligent agent executes according to this plan and generates the front-end code, generating the front-end interface as shown in Figure 6.

[0108] In summary, the front-end interface generation method provided in this application has at least the following advantages:

[0109] First, engage in dialogue with users to understand and obtain their design intent, and automatically generate front-end interfaces based on user intent, thereby improving the efficiency of front-end page generation and lowering the entry barrier for front-end interface generation.

[0110] Second, users can intervene in the front-end interface generation process by providing a human-computer dialogue interface. Based on the needs expressed by users through the human-computer dialogue interface, the task plan can be modified or the task results can be obtained again, thereby improving the accuracy of the front-end interface generation.

[0111] Third, provide users with front-end interface prompt templates and design prompts to guide users to input descriptive information about the front-end page, engage in dialogue with users, determine the user's design intent based on the dialogue with the user and the design technology field, set up a follow-up questioning mechanism, and proactively initiate follow-up questions when the user's design intent is unclear, and conduct at least one round of dialogue with the user to achieve the effect of accurately and efficiently obtaining the user's design intent.

[0112] Figure 7 is a schematic diagram of the front-end interface generation device provided in this application. This application provides a front-end interface generation device that can be applied to a front-end interface development system. As shown in Figure 7, the front-end interface generation device 70 provided in this application includes:

[0113] The acquisition module 701 is used to engage in dialogue with the user based on natural language to obtain the user's design intent.

[0114] The processing module 702 is used to decompose the design intent into multiple executable sub-tasks according to the design intent, and form a task plan.

[0115] The processing module 702 is also used to execute sub-tasks step by step according to the task plan to obtain the description information of the front-end interface to be generated. During the step-by-step execution of sub-tasks, the intelligent agent corresponding to the sub-task is called according to the content of the sub-task to obtain the execution result of the sub-task. The intelligent agent is used to execute the corresponding sub-task by applying the generative artificial intelligence model.

[0116] The generation module 703 is used to generate the front-end interface based on the description information.

[0117] In one possible implementation, the front-end interface generation device further includes an output module 704, which is used to: output a task plan and provide a human-computer dialogue entry point, the human-computer dialogue entry point being used to acquire user intervention behavior; and adjust the task plan based on the intervention behavior acquired through the human-computer dialogue entry point.

[0118] In one possible implementation, the processing module 702 is further configured to: engage in dialogue with the user based on a preset front-end interface prompt template and design prompts, and obtain dialogue content; and determine the user's design intent based on the dialogue content and the design technology field.

[0119] In one possible implementation, the processing module 702 is further configured to: determine whether the user's design intent can be obtained based on the dialogue content and the design technology field; if the user's design intent cannot be obtained, then conduct at least one round of dialogue with the user based on natural language based on a preset follow-up questioning mechanism until the user's design intent is determined.

[0120] The front-end interface generation device provided in this embodiment can execute the method provided in the above method embodiment. Its implementation principle and technical effect are similar, and will not be described in detail here.

[0121] Figure 8 is a schematic diagram of the front-end interface generation device provided in this application. As shown in Figure 8, the electronic device 80 provided in this embodiment includes at least one processor 801 and a memory 802. Optionally, the device 80 further includes a communication component 803. The processor 801, memory 802, and communication component 803 are connected via a bus 804.

[0122] In a specific implementation, at least one processor 801 executes computer execution instructions stored in memory 802, causing at least one processor 801 to perform the above-described method.

[0123] The specific implementation process of processor 801 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.

[0124] In the above embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.

[0125] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.

[0126] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0127] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.

[0128] This application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the above-described method.

[0129] The aforementioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The readable storage medium can be any available medium accessible to a general-purpose or special-purpose computer.

[0130] An exemplary readable storage medium is coupled to a processor, enabling the processor to read information from and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can reside in an Application Specific Integrated Circuit (ASIC). Alternatively, the processor and the readable storage medium can exist as discrete components in the device.

[0131] The division of units is merely a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.

[0132] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0133] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0134] If a function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0135] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0136] Finally, it should be noted that other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not disclosed herein, and is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.

Claims

1. A method for generating a front-end interface, characterized in that, An application to a front-end interface development system includes a front-end interface generation method comprising: engaging in dialogue with a user based on natural language to obtain the user's design intent; decomposing the design intent into multiple executable sub-tasks to form a task plan; executing the sub-tasks step-by-step according to the task plan to obtain description information of the front-end interface to be generated; wherein, during the step-by-step execution of sub-tasks, an intelligent agent corresponding to the sub-task is invoked according to the content of the sub-task to obtain the execution result corresponding to the sub-task; the intelligent agent is used to execute the corresponding sub-task using a generative artificial intelligence model; and generating the front-end interface based on the description information.

2. The front-end interface generation method according to claim 1, characterized in that, The execution results of the subtasks are presented in natural language.

3. The front-end interface generation method according to claim 1 or 2, characterized in that, Also includes: The task plan is output and a human-computer dialogue interface is provided, which is used to obtain user intervention behavior. Based on the intervention behavior obtained from the human-computer dialogue entry point, the task plan is adjusted.

4. The front-end interface generation method according to claim 1 or 2, characterized in that, The step of engaging in dialogue with the user based on natural language to obtain the user's design intent includes: engaging in dialogue with the user based on a preset front-end interface prompt template and design prompts, obtaining dialogue content; and determining the user's design intent based on the dialogue content and the design technology field.

5. The front-end interface generation method according to claim 4, characterized in that, The step of determining the user's design intent based on the dialogue content and the design technology field includes: determining whether the user's design intent can be obtained based on the dialogue content and the design technology field; if the user's design intent cannot be obtained, then conducting at least one round of dialogue with the user based on natural language based on a preset follow-up questioning mechanism until the user's design intent is determined.

6. The front-end interface generation method according to claim 1 or 2, characterized in that, The correspondence between intelligent agents and generative artificial intelligence models is configurable.

7. A front-end interface generation device, characterized in that, include: The acquisition module is used to engage in dialogue with the user based on natural language to obtain the user's design intent; The processing module is used to decompose the design intent into multiple executable sub-tasks according to the design intent, and form a task plan; The processing module is also used to execute sub-tasks step by step according to the task plan to obtain the description information of the front-end interface to be generated. During the step-by-step execution of sub-tasks, the intelligent agent corresponding to the sub-task is called according to the content of the sub-task to obtain the execution result corresponding to the sub-task. The intelligent agent is used to execute the corresponding sub-task by applying a generative artificial intelligence model. The generation module is used to generate the front-end interface based on the description information.

8. A front-end interface generation device, characterized in that, include: Memory, processor; The memory stores computer-executable instructions; the processor executes the computer-executable instructions stored in the memory, causing the processor to perform the method as described in any one of claims 1-6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-6.

10. A computer program product comprising a computer program that, when executed by a processor, implements the method of any one of claims 1-6.