Method, medium, device and program product for automatic generation of interaction logic code

Abstract

The specification provides a method, medium, device and program product for automatically generating interactive logic code, the method comprising: obtaining multiple visual design drafts; analyzing the interactive logic requirements in the multiple visual design drafts through a requirement analysis model to generate a structured task description; the structured task description is used to describe task information of a web development task; retrieving a target interactive module matching the task information from a pre-created interactive module database; and calling a code generation model to generate interactive logic code of a web page including the target interactive module.

Description

Technical Field

[0001] This specification relates to one or more embodiments in the field of web development technology, and more particularly to a method, medium, device, and program product for automatically generating interactive logic code. Background Technology

[0002] Currently, with the rapid development of artificial intelligence (AI), automatic code generation has become a reality. Current automatic code generation tools can automatically generate static user interface (UI) structure code for web pages by recognizing layers, styles, and structures in visual design drafts. However, the interaction logic of web pages involves dynamic dimensions such as user behavior responses, data flow, state changes, and front-end / back-end communication. Information from these dimensions cannot be directly derived from visual design drafts. Therefore, automatic code generation tools cannot accurately understand the interaction intent, data model, and state transition rules of web development projects. This results in generated interaction logic code that, while seemingly reasonable, is seriously inconsistent with actual needs, lacking practicality and reliability. Developers still need to invest significant effort in manual analysis, correction, and rewriting. Summary of the Invention

[0003] In view of the above, one or more embodiments of this specification provide the following technical solutions: According to a first aspect of one or more embodiments of this specification, a method for automatically generating interactive logic code is provided, the method comprising: Obtain multiple visual design drafts; The interaction logic requirements in the multiple visual design drafts are analyzed using a requirements analysis model to generate a structured task description; the structured task description is used to describe the task information of the web page development task. Retrieve the target interactive module that matches the task information from a pre-created database of interactive modules; The code generation model is invoked to generate the interactive logic code for the webpage, which includes the target interactive module.

[0004] According to a second aspect of one or more embodiments of this specification, an electronic device is provided, comprising: a processor; a memory for storing processor-executable instructions; wherein the processor performs the executable instructions to implement the steps of the method as described in the first aspect of one or more embodiments of this specification.

[0005] According to a third aspect of one or more embodiments of this specification, a computer-readable storage medium is provided that stores computer instructions thereon, which, when executed by a processor, implement the steps of the method as described in the first aspect of one or more embodiments of this specification.

[0006] According to a fourth aspect of one or more embodiments of this specification, a computer program product is provided, comprising a computer program / instructions that, when executed by a processor, implement the steps of the method as described in the first aspect of one or more embodiments of this specification.

[0007] As demonstrated by the above embodiments, this specification utilizes a requirements analysis model to analyze the interaction logic requirements in multiple visual design drafts, generating a structured task description. This structured task description describes the task information of the web development task, thus providing a precise requirement description for the code generation task. This effectively solves the problem of the code generation model becoming overly divergent due to a lack of understanding of project requirements when generating interaction logic code. Then, by retrieving target interaction modules that match the task information described in the structured task description, a concrete implementation paradigm that can be directly referenced and integrated is further provided for the code generation model. The target interaction module is essentially a functionally defined and fully encapsulated code unit extracted from a high-quality code library. By injecting the target interaction module into the code generation process, a clear code organization method and logical implementation path can be established for the code generation model, effectively limiting the arbitrariness and uncertainty in the code generation process and making the output code more reliable. In summary, the code generation scheme of this specification can automatically generate high-quality interaction logic code directly from visual design drafts, reducing the involvement of developers, improving code reliability, and reducing the cost of code generation. Attached Figure Description

[0008] Figure 1 This is a flowchart of an exemplary embodiment of a method for automatically generating interactive logic code.

[0009] Figure 2 This is a system architecture diagram provided in an exemplary embodiment.

[0010] Figure 3 This is a schematic diagram of an overall process provided in an exemplary embodiment.

[0011] Figure 4 This is an example of an interactive timing diagram.

[0012] Figure 5 This is a schematic diagram of the structure of a device provided in an exemplary embodiment.

[0013] Figure 6 This is a block diagram of an automatic generation device for interactive logic code provided in an exemplary embodiment. Detailed Implementation

[0014] To enable those skilled in the art to better understand the technical solutions in this specification, the technical solutions in the embodiments of this specification will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this specification, and not all embodiments. Based on the embodiments in this specification, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this specification.

[0015] In front-end development, automated code generation tools like Figma2Code can automatically generate the UI structure code for web pages. UI structure code primarily refers to the HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) code used to build and render the visual skeleton of a webpage. It defines the page layout, the appearance of components, and static content, forming the foundation of the interface the user ultimately sees. However, a complete web application requires more than just static visual presentation; it relies heavily on interaction logic code to implement its dynamic functionality. Interaction logic code refers to the code implementation closely related to specific service rules and data processing flows. It defines how webpage components respond to operations to perform data interaction functions. For example, which backend interface should be called after clicking a button on the webpage, how data validation and state management are performed when a form is submitted, the data processing flow followed by page navigation, and how the data returned by the interface is mapped and updated to the application state and user interface.

[0016] While automated code generation tools can produce visually accurate static pages, they face significant challenges in generating interactive logic due to a lack of understanding of project requirements. These tools may generate syntactically correct but functionally incompatible interactive logic code, such as calling incorrect APIs, employing unsuitable state management processes, or misunderstanding user action sequences. This results in low usability and reliability of the generated interactive logic code, requiring developers to invest considerable time in manual analysis, modification, and even rewriting, thus failing to achieve true end-to-end development automation.

[0017] Based on this, embodiments of this specification provide a method for automatically generating interactive logic code. This method first analyzes and extracts the implicit interactive intentions and requirements from multiple visual design drafts using a requirements analysis model, and generates a structured task description. This structured task description clearly and structurally represents the functional requirements and constraints of the web development task, thus providing clear and understandable input for the subsequent code generation process and alleviating the output divergence problem caused by the lack of project requirement context in the code generation model. On this basis, by retrieving target interactive modules that match the structured task description, a functional implementation example that can be directly referenced and combined is provided for the code generation model. By introducing this into the code generation process, a reliable implementation framework and organizational logic can be provided for the code generation model, thereby significantly reducing the randomness and inconsistency in the code generation process, ultimately effectively improving the generated interactive logic code in terms of structural standardization, functional accuracy, and project usability. The specific implementation details of the embodiments of this specification are described below with reference to the accompanying drawings.

[0018] like Figure 1 As shown, the automatic generation method for interaction logic code in the embodiments of this specification includes the following steps: Step S12: Obtain multiple visual design drafts; Step S14: Analyze the interaction logic requirements in multiple visual design drafts using the requirements analysis model to generate a structured task description; this structured task description is used to describe the task information of the web development task. Step S16: Retrieve the target interaction module that matches the task information from the pre-created interaction module database; Step S18: Call the code generation model to generate the interactive logic code for the webpage, which includes the target interactive module.

[0019] In step S12, multiple visual design drafts can be acquired first. Visual design drafts typically refer to visual presentation files or screenshots provided by designers to represent the user interface (UI) of a webpage. They not only showcase the static layout and style of the webpage but also, through a series of related images, demonstrate the visual changes of the user interface at different interaction stages (such as initial state, loading, operation feedback, error messages, etc.) or different data states, thereby indirectly implying interactive information such as data interaction logic, data flow, and state transitions. In some embodiments, multiple visual design drafts may include a series of images such as the initial interface of the login page, the error message interface after entering an incorrect password, and the redirection interface after successful login. These images together constitute a complete interaction flow, providing a continuous visual context for subsequent analysis of user operation intentions.

[0020] In step S14, the interaction logic requirements in multiple visual design drafts can be analyzed using a requirements analysis model to generate a structured task description. The requirements analysis model can be a multimodal language model. The structured task description describes the task information of the web development task, including but not limited to at least some of the following: the number of web development tasks, task identifier, task type, execution order, priority, dependencies, task status, task requirement information, task content information, and task summary information. The number of web development tasks refers to the total number of independent development units required to complete the web development project. The task identifier is used to uniquely identify each web development task. The task type can include, but is not limited to, web page building tasks and module (including components and interfaces) creation tasks. The number of module creation tasks can be greater than or equal to 1, depending on the number of modules to be created in the web page. The execution order defines the order in which each web development task is processed on the timeline. Web development tasks with a higher execution order need to be processed first. The priority indicates the processing order of multiple web development tasks with the same execution order. Dependencies describe other web development tasks that a web development task depends on, indicating that some web development tasks can only begin after other specific web development tasks have been completed. Task status reflects the current stage of the web development task in the development process, such as pending, in progress, completed, or blocked. Task requirements information describes the goals and functional requirements of the web development task. Task content information provides specific instructions, input data, and expected outputs required to implement the web development task. Task summary information summarizes the goals and scope of the web development task.

[0021] In some embodiments, a webpage construction reasoning template can be predefined. This template is used to arrange the reasoning steps for generating a structured task description based on the multiple visual design drafts. Prompt information can be generated based on this template and input into a requirements analysis model. This model then drives the requirements analysis model to analyze the interactive logic requirements in the multiple visual design drafts based on the reasoning steps arranged by the template, thereby obtaining a structured task description. By defining a webpage construction reasoning template, open-ended and divergent natural language understanding tasks can be transformed into a controlled, phased information extraction and logical assembly process. Specifically, the reasoning steps arranged by the webpage construction reasoning template may include: (i) Determine the logical order of multiple visual design drafts, that is, deduce the sequence of the visual design drafts in the actual user interaction flow. For example, for the login function in a webpage, it is necessary to determine that the visual design draft that shows the initial login page is the first visual design draft, the visual design draft that shows the password input status is the second visual design draft, and the visual design draft that shows the login success / failure page is the third visual design draft. This step is the timeline basis for all subsequent analyses.

[0022] (ii) Determine the component state transition relationships between multiple visual design drafts based on this logical sequence. The component state transition relationship describes the changes in the attributes and behavior of the same component in different steps. For example, the possible state transitions of the login button include: the initial state of "clickable" → "disabled and showing loading" after clicking → "redirecting and disappearing" after success or "restored to clickable and showing error" after failure.

[0023] (iii) Identify common components across multiple visual design drafts based on component state transition relationships. A common component refers to the same UI element that appears repeatedly in multiple design drafts and performs the core interactive function. For example, in the login process described above, the "password input box" and the "login button" are common components.

[0024] (iv) Generate a structured task description based on common components. This step organizes the aforementioned analysis results into a machine-readable, semantically clear structured task description. This structured task description can be output as a file in a specified format (e.g., a JSON file), whose content structurally defines the task information for each web page development task.

[0025] In step S16, target interaction modules matching the task information can be retrieved from a pre-created interaction module database. The interaction module database is a collection of reusable front-end interaction modules. Each interaction module in the database is a fully functional and well-encapsulated code unit. The database can also define module description information for each interaction module, including functional and content information. The functional information describes the module's capabilities, interfaces, and calling conventions, while the content information describes the specific code implementation and internal logic included to achieve that function. The interaction modules in the database can be obtained from high-quality code repositories to ensure code quality, performance, and reliability.

[0026] In some embodiments, module description information of each interaction module in the interaction module database can be obtained. The module description information of each interaction module is then matched with the task information in the structured task description to obtain the matching degree between each interaction module and the task information. Based on the matching degree, target interaction modules matching the task information are retrieved from the interaction modules. The matching degree between module description information and task information can be determined based on the semantic similarity between them. For example, keywords can be extracted from both the module description information and the task information, and the semantic similarity between the keywords extracted from the module description information and the keywords extracted from the task information can be calculated. The calculated semantic similarity is then used as the matching degree between the interaction module and the task information. Alternatively, the module description information and task information can be directly input into a pre-trained language model to determine the matching degree between them.

[0027] Furthermore, the matching degree between the interaction module and the task information can be determined based on information from multiple dimensions. Specifically, the functional information of the interaction module can be matched with the task requirements information to obtain the first matching degree, and the content information of the interaction module can be matched with the task content information to obtain the second matching degree. Then, the first and second matching degrees are weighted to obtain the matching degree between the interaction module and the task information. The first matching degree ensures that the retrieved interaction module matches the web development task in terms of interaction intent and functional specifications, avoiding mismatches in functional logic; the second matching degree ensures that the retrieved interaction module is compatible with the current project's technology stack, code style, and engineering environment in terms of specific implementation and code context, ensuring its integrability and reusability.

[0028] In some embodiments, the interaction module includes components and interfaces. Accordingly, the web development task includes a component creation task and an interface creation task. The component creation task is used to create components required to implement the interaction logic requirements, and the interface creation task is used to create interfaces required to implement the interaction logic requirements. Based on this, a target interaction module matching the task information is retrieved from a pre-created interaction module database. This includes retrieving target components matching the task information of the component creation task from a pre-created component library, and retrieving target interfaces matching the task information of the interface creation task from a pre-created interface library. The similarity between components in the component library and the task information can be obtained by weighting a first matching degree between the component's functional information and the task requirement information of the component creation task, and a second matching degree between the component's content information and the task content information of the component creation task. Similarly, the similarity between interfaces in the interface library and the task information can be obtained by weighting a first matching degree between the interface's functional information and the task requirement information of the interface creation task, and a second matching degree between the interface's content information and the task content information of the interface creation task.

[0029] In some embodiments, a retrieval inference template can be predefined to orchestrate the inference steps for retrieving a target interactive module from an interactive module database. Then, a prompt message is generated based on the retrieval inference template and input into a pre-trained language model to drive the model to retrieve the target interactive module matching the task information from the pre-created interactive module database according to the inference steps orchestrated by the retrieval inference template. Specifically, the inference steps orchestrated by the retrieval inference template may include: (i) Read the structured task description. In this step, the storage address and filename of the structured task description can be provided to guide the pre-trained language model to accurately load the structured task description.

[0030] (ii) Scan the interaction modules in the interaction module database to obtain their descriptions. In this step, a scanning path for the interaction module database can be provided to guide the pre-trained language model to locate and access the database. Through this scanning path, the pre-trained language model can retrieve and obtain the module descriptions stored in the database, such as component name, component path, component type, functional information, content information, and component complexity. Furthermore, to improve retrieval efficiency and targeting, scanning priorities can be set based on actual project needs or the importance of the interaction modules. This prioritizes scanning interaction modules along higher-priority scanning paths, thereby quickly locating the most relevant, highest-quality, or most frequently used interaction modules.

[0031] (iii) Match the module description information of each scanned interactive module with the task information to obtain the matching degree between each interactive module and the task information. In this step, the specific method for matching the module description information of the interactive module with the task information can be defined. For example, the matching degree between the interactive module and the task information can be determined by weighting the first matching degree and the second matching degree in the aforementioned embodiment. The weights of the first matching degree and the second matching degree can also be set.

[0032] (iv) Determine whether there is a target interaction module that matches the task information among each interaction module based on the matching degree between each interaction module and the task information. For example, interaction modules with a matching degree higher than a preset matching degree threshold can be identified as target interaction modules.

[0033] After retrieving the target interaction module, the web development task in the structured task description can be rewritten as a task to call the target interaction module, resulting in the rewritten structured task description. Specifically, suppose the original structured task description includes a task to create a message pop-up. The requirement is that after a user completes an operation, a pop-up should appear in the center of the screen displaying a feedback message (e.g., "Operation successful!"), and then automatically disappear after a few seconds. During the retrieval phase, the pre-trained language model can match the target interaction module from the interaction module database as the Toast notification module: a pre-built pop-up component for displaying brief message notifications with a built-in automatic closing function. The rewriting process transforms the general component creation task into a task to call the specific module. The rewritten structured task description will then become a call to the Toast notification module.

[0034] In step S18, a code generation model can be invoked to generate interactive logic code for the webpage, including the target interactive module. The code generation model can be a pre-trained language model. Specifically, a rewritten structured task description can be input into the code generation model, which can then generate interactive logic code based on this description. Furthermore, a code generation inference template can be predefined to arrange the inference steps for generating the interactive logic code. Based on this template, a prompt message can be generated and input into the code generation model, enabling it to generate the interactive logic code.

[0035] In some embodiments, before analyzing the interaction logic requirements in multiple visual design drafts using a requirements analysis model, a requirements analysis reasoning template can be obtained. This template is used to standardize the processing flow for generating interaction logic code. This standardized process sequentially includes generating a structured task description, retrieving the target interaction module, and generating interaction logic code (i.e., steps S14, S16, and S18 in the aforementioned embodiments). Based on the requirements analysis reasoning template, the operations of generating the structured task description, retrieving the target interaction module, and generating the interaction logic code are executed sequentially. In response to user input triggering information (such as "Help me complete the logic requirement development"), the requirements analysis reasoning template can be obtained. Based on the obtained template, a prompt message is generated and input into a pre-trained language model, causing the model to sequentially execute the operations of generating the structured task description, retrieving the target interaction module, and generating the interaction logic code. In this way, an end-to-end code generation process can be constructed, guiding the pre-trained language model to strictly follow this process for code generation, thereby sequentially and stably executing requirements analysis, module retrieval, and code generation without human intervention.

[0036] In some embodiments, a task analysis report can also be generated based on the structured task description and the retrieved target interaction modules. This task analysis report can be viewed by developers, making it easier for them to understand the intermediate process information of the code generation process and quickly locate and determine the root cause of problems when they occur.

[0037] The code generation process of this specification will be illustrated below with a specific embodiment.

[0038] Figure 2 The system architecture shown in some embodiments includes an agent, a task generation unit, a component retrieval unit, an interface retrieval unit, a code generation unit, and a quality assessment unit.

[0039] The agent's behavior and decision-making process are driven by a predefined workflow, which includes tasks such as MCP (Model Context Protocol) registration, workflow access, task judgment, multimodal parsing, task generation, module retrieval, and task rewriting. In addition, the agent can integrate a series of tools that provide it with the ability to access external resources and perform specific operations. These tools mainly include: MCP server invocation tools, interactive module database invocation tools, file reading tools, directory listing tools, file search tools, pattern search tools, and web page tools.

[0040] The task generation unit can export user-uploaded visual design drafts (which can be multiple images), and use a multimodal language model to read and understand the image content, analyze the meaning of individual images and the logical relationships between multiple images, and generate a structured task description. The component retrieval unit and interface retrieval unit can perform task understanding on the structured task description, scan the corresponding database (component library or interface library), and perform correlation analysis (i.e., the aforementioned process of determining the first matching degree) and reusability analysis (i.e., the aforementioned process of determining the second matching degree) on the scan results and task information, and rewrite the structured task description based on the analysis results.

[0041] The code generation unit can read the task information of each web page development task in the rewritten structured task description, construct prompts, understand the tasks, read the priority of each task, and generate code for each task in sequence. After completing the code generation for each task, the status of that task is updated. The generated code can be passed to the quality evaluation unit.

[0042] The quality assessment unit can evaluate the quality of the generated code. Specifically, it can perform unit tests (referred to as unit tests) on the generated code to verify the logical correctness and stability of the code, ensuring that the core functionality is error-free. In addition, it can automatically render the generated front-end interface in the browser environment, determine the browser rendering time, and determine the differences between the rendered front-end interface and the visual design draft, i.e., the visual fidelity and the degree to which the code meets the requirements of web development. The code quality is determined based on these indicators. If the quality assessment passes, the generated code can be stored in the repository.

[0043] Figure 3 A general flowchart of an embodiment of this specification is shown. The steps in this flowchart can be derived from... Figure 2The system architecture shown illustrates the agent's execution. First, the agent obtains the development requirements input by the user (S200) and performs requirements analysis (S202). Then, it checks the project directory (S204), which stores structured task descriptions (usually a JSON file, such as a file named task.json). If the project directory exists, it checks the status of the structured task descriptions (S208); otherwise, it initializes the project directory (S206) and checks the status of the structured task descriptions (S208). If the structured task descriptions do not exist or are empty, it directly guides the user to upload visual design drafts (S214). If the structured task descriptions exist and are not empty, it prompts the user for a choice (S210), such as allowing the user to delete the existing structured task description file (S212) and regenerate the web development task. Next, the user is guided to upload the visual design draft (S214), and the following steps are performed sequentially: requirements analysis (S216), component retrieval (S218), interface retrieval (S220), generation of the technical architecture document (i.e., the task analysis report in the aforementioned embodiment) (S222), and confirmation of the web development task and technical architecture document with the user (S224). If the user confirms, interaction logic code generation is performed (S226). If the user chooses not to delete the existing structured task description file, interaction logic code generation can proceed directly (S226). During code generation, one task is retrieved from the structured task description each time, and interaction logic code is generated for that task. After completion, if there are other tasks in the structured task description (S228), code generation continues (S230). If all tasks are completed, a completion report is output (S232), and the process ends. When confirming the web development task and technical architecture document with the user, if the user modifies the web development task and / or technical architecture document, the process can return to the process of uploading the visual design draft.

[0044] In some embodiments, the functions of requirements analysis, task generation, component retrieval, interface retrieval, technical architecture document generation, and code generation can be encapsulated into standardized tools (or servers) conforming to the MCP protocol. An agent can act as an MCP client to call the MCP server (i.e., the aforementioned tools) to complete the code generation task. Figure 4 The interaction sequence during the code generation process is shown.

[0045] First, users can input their requirements, such as "Help me complete the logical requirement development," which is then fed into the requirements analysis tool. The tool uses a pre-trained language model (referred to as the model) to analyze the user's needs, understand the type of functionality the user wants to implement, and guide the user through a standardized process for generating interactive logic code. After analysis, the pre-trained model returns the results to the requirements analysis tool. Then, the tool can guide the user to upload visual design drafts.

[0046] User-uploaded visual design drafts can be obtained by the task generation tool. The task generation tool can call a model to analyze the visual design drafts, and the analysis results can be returned to the task generation tool to generate a structured task description (task.json) containing a detailed list of development tasks. Specifically, the model can perform the following functions: First, it extracts and performs structured analysis of visual information from the visual design drafts. In this process, a multimodal large language model performs in-depth analysis of the design draft screenshots, not only identifying UI elements and layout structures on the page, but more importantly, understanding the logical relationships and interaction patterns between elements. The system can identify common components such as buttons, forms, lists, and cards, and analyze their hierarchical relationships and functional characteristics. Second, it performs page logic relationship reasoning. By comparing and analyzing multiple design drafts, the system can infer the state change patterns, user operation flow, and data flow between pages. For example, it can identify interaction patterns such as tab switching, pagination, form submission, and pop-up display, and understand the differences in component performance under different states. For example, suppose there are three visual design drafts. The first draft shows the main page for knowledge base management, including a guide area and functional modules. The second draft shows a list view of all knowledge pages, categorized by core knowledge base and other knowledge bases. The third draft shows the interactive status and delete function of knowledge base cards. The logical relationship is: homepage guidance -> list display -> card interaction.

[0047] Furthermore, structured task descriptions can intelligently plan task priorities and dependencies. Specifically, they can automatically set task priorities and execution order based on the complexity of interaction logic and dependencies, including but not limited to: • Sort tasks according to the standard front-end development workflow • Analyze data and functional dependencies between tasks. • Set appropriate priorities (high / medium / low) • Ensure that the ID of the dependent task is always less than that of the current task.

[0048] In an example of generating interaction logic code for a knowledge base management page, the generated complete tasks.json is as follows: { "metadata": { "tag": "master", "projectName": "Completed the functional development of the knowledge base management system", "totalTasks": "4", "logicDesc": "The first image shows the main page of the knowledge base management system, including the guidance area and functional modules; the second image shows a list view of all knowledge pages, categorized by core knowledge base and other knowledge bases; the third image shows the interactive status and deletion function of knowledge base cards. The logical relationship is: homepage guidance -> list display -> card interaction." "stepDesc": ["Establish the basic structure of the knowledge base management page", "Develop the knowledge base list display function", "Implement the knowledge base card component", "Complete the knowledge base operation function"] }, "tasks": [ { "id": 1, "title": "Building the Basic Structure of the Knowledge Base Management Page", "description": "Based on the design draft, establish the overall framework of the knowledge base management page, including page routing, layout structure, and tab switching functionality." "status": "pending", "dependencies": [], "priority": "high", "details": "Create a main page component for knowledge base management, implementing the switching functionality between the 'Knowledge Base Suggestions' and 'All Knowledge' tabs. Add a guide area for quickly synchronizing knowledge within the site to the Knowledge Base Suggestions tab, displaying a storage space progress bar (25% used). The page header includes 'Create New Knowledge Base' and 'Upload Knowledge' buttons. Use existing page layout components to ensure consistency with the overall system style." }, { "id": 2, "title": "Developing Knowledge Base List Display Function", "description": "Implements a categorized list display of the knowledge base, including grouped display functionality for the core knowledge base and other knowledge bases", "status": "pending", "dependencies": [1], "priority": "high", "details": "Implement a list of knowledge bases within the 'All Knowledge' tab, grouped by 'Core Knowledge Base' and 'Other Knowledge Bases.' Each group displays a count of the number of knowledge bases (e.g., 3 core knowledge bases, 23 other knowledge bases). Implement API calls for knowledge base data, handling loading and error states. Add a pagination component at the bottom to support page turning and display statistics such as 'Total: 50'." }, { "id": 3, Title: Implementing a Knowledge Base Card Component "description": "Developed a knowledge base display card component, including knowledge base information display and basic interactive states", "status": "pending", "dependencies": [2], "priority": "high", "details": "Create a knowledge base card component to display information such as the knowledge base title, description text, associated AI application status, and number of files. Implement hover effects and selected state styles for the cards. The bottom of the card includes a 'More' dropdown menu, 'Upload Knowledge' buttons, and 'Associate AI Application' buttons. Support different knowledge base types for display (product knowledge base, company information knowledge base, reception skills knowledge base, etc.), and handle the display of knowledge base source information (e.g., 'Source: Allin01')." }, { "id": 4, "title": "Completed Knowledge Base Operation Function", "description": "Implements various operational functions for the knowledge base, including core interactive logic such as uploading knowledge, associating with AI applications, and deleting knowledge from the knowledge base." "status": "pending", "dependencies": [3], "priority": "medium", "details": "Implement the 'Upload Knowledge' function, supporting document upload and processing. Develop the 'Associate AI Application' function, supporting the binding and management of knowledge bases and AI applications. Add a 'Delete Knowledge Base' option to the 'More' dropdown menu, implementing a deletion confirmation dialog and deletion API call. Handle access control and status updates for knowledge base operations. Add feedback prompts for successful / failed operations. Implement the interaction logic for the three functional modules in the Knowledge Base Suggestions Tab (Taoyunbox Documents, Automatic Reception Configuration Product Catalog, and Reception Skills Knowledge)." } ] } Here, `metadata` represents the overall task overview, and `tasks` is an array of tasks sorted by order and dependencies. Each item in `tasks` contains the task ID, task name (title), task description, task status, task dependencies, task priority, and task details.

[0049] Based on the structured task description generated by the above process, codebase search technology is used to learn about component libraries, interface libraries, and code style guidelines, and then code writing begins.

[0050] The task generation tool can pass a structured task description to the component retrieval tool. The component retrieval tool can then scan the target components in the component library based on the task descriptions in the generated tasks.json file and update component reuse suggestions. Specifically, it rewrites the component creation task in the structured task description into a component invocation task targeting the target component and passes the updated structured task description to the interface retrieval tool. In some embodiments, the component retrieval tool can use AST (Abstract Syntax Tree) analysis and semantic understanding techniques to deeply scan components in the project and analyze the following information about the components: • Features and Use Cases • Interface definition and property structure • Dependencies and Reusability • Code quality and maintenance status Then, the above information is matched and analyzed with the task information. Among them, functional features, usage scenarios, interface definitions, and attribute structures can be attributed to the functional information of the components in the aforementioned embodiments, while dependencies, reusability, code quality, and maintenance status can be attributed to the content information of the components in the aforementioned embodiments.

[0051] The interface retrieval tool can analyze the data interaction requirements in tasks.json, scan the target interfaces in the interface library, and update interface reuse suggestions. Specifically, it rewrites the interface creation task in the structured task description into an interface call task targeting the target interface, and then passes the rewritten structured task description to the report generation tool. In some embodiments, the interface retrieval tool can analyze the data interaction requirements in the task and automatically match API interfaces in the interface library, including but not limited to analyzing the following information: • Analyze the data manipulation requirements in the task description. • Scan existing API interface definitions in the project • Intelligent matching based on semantic similarity • Generate API reuse suggestions and integration solutions Then, the above information is matched and analyzed with the task information.

[0052] The report generation tool can integrate the analysis results of the preceding tools, and based on the final tasks.json content, generate technical architecture documents and development guidelines, providing a standard basis and implementation guidance for subsequent code generation, and transmitting the task description of each individual task to the code generation tool.

[0053] The code generation tool can iteratively process each task in tasks.json, combining project context, coding standards, and architectural guidelines to call the model and generate complete interactive logic code that conforms to project standards. This includes core functionalities such as state management, data interaction, and event handling, and the tool retrieves the interactive logic code returned by the model. In some embodiments, the code generation tool can learn the project's coding standards, naming conventions, and architectural patterns to generate code that conforms to the project's style. The code generation process of the code generation tool may include: • ESLint / Prettier Configuration Analysis • Component naming and file organization pattern recognition • Extraction of TypeScript type definition specifications • Project-specific utility functions and constant identification At this point, the structured task description will be rewritten again. After the rewriting is complete, wait for code generation: { "metadata": { "tag": "master", "projectName": "Completed the functional development of the knowledge base management system", "totalTasks": "4", "logicDesc": "The first image shows the main page of the knowledge base management system, including the guidance area and functional modules; the second image shows a list view of all knowledge pages, categorized by core knowledge base and other knowledge bases; the third image shows the interactive status and deletion function of knowledge base cards. The logical relationship is: homepage guidance -> list display -> card interaction." "stepDesc": [ "Building the basic structure of the knowledge base management page", "Develop a knowledge base list display function", "Implement the knowledge base card component", "Complete the knowledge base operation function" ] }, "tasks": [ { "id": 1, "title": "Building the Basic Structure of the Knowledge Base Management Page", "description": "Reuses the KnowledgeManagement component to build the overall framework of the knowledge base management page, including page routing, layout structure, and tab switching functionality." "status": "completed", "dependencies": [], "priority": "high", "details": "The src / d2c-component / KnowledgeManagement / index.tsx component is directly reused as the page header. This component already includes functions such as storage space display, creating a new knowledge base, and upload knowledge buttons. Fusion Design's Tab component is used to switch between the 'Knowledge Base Suggestions' and 'All Knowledge' tabs. The KnowledgeSync component is integrated to achieve fast synchronization of the guide area. Consistency with the overall system style is ensured." "apiIntegration": { "selectedAPIs": [ { "apiName": "queryKnowledgeStoragexx", "apiPath": " / ai / knowledgeBase / queryKnowledgeStorage.do", "apiDescription": "Retrieves knowledge base capacity information to display storage progress." }, { "apiName": "getAllApplicationOfCompany", "apiPath": " / ai / application / getAllApplicationOfCompany.do", "apiDescription": "Retrieves a list of all company applications for associating AI application functions." } ], "implementation": "Integrate storage capacity query and application list APIs to establish a complete basic data service layer for web pages." } }, { "id": 2, "title": "Developing Knowledge Base List Display Function", "description": "Reuses the KnowledgeBase component to implement a categorized list display of the knowledge base, including grouping display functionality for the core knowledge base and other knowledge bases", "status": "completed", "dependencies": [1], "priority": "high", "details": "Directly use the src / d2c-component / KnowledgeBase / index.tsx component, which already implements the grouping and display logic for the core knowledge base and other knowledge bases. The component includes features such as knowledge base quantity statistics and knowledge base card display. Add pagination functionality using Fusion Design's Pagination component, referring to the pagination implementation in src / components / batchListingPreview / index.tsx. Implement API calls for knowledge base data and handle loading and error states." "apiIntegration": { "selectedAPIs": [ { "apiName": "queryKnowledgeBase", "apiPath": " / ai / knowledgeBase / queryKnowledgeBase.do", "apiDescription": "Query the list of knowledge bases, supporting grouped display of core knowledge bases and other knowledge bases." }, { "apiName": "queryKnowledgeBaseByApp", "apiPath": " / ai / knowledgeBase / queryKnowledgeBaseByApp.do", "apiDescription": "Query the list of knowledge bases bound to the application to display their association status." } ], "implementation": "Integrate the knowledge base list query and application-related query APIs to establish a complete list data service layer." } }, { "id": 3, Title: Implementing a Knowledge Base Card Component "description": "Optimized the knowledge base card display logic in the KnowledgeBase component, including knowledge base information display and basic interactive states." "status": "completed", "dependencies": [2], "priority": "high", "details": "Based on the existing card structure in src / d2c-component / KnowledgeBase / index.tsx, the card display logic has been improved. This component already includes the display of information such as knowledge base title, description text, associated AI application status, and number of files. The hover effect and selected state style of the cards have been optimized. The functionality of the 'More' dropdown menu, 'Upload Knowledge,' and 'Associate AI Application' buttons at the bottom of the cards has been improved. Different knowledge base types are supported for display, and the display of knowledge base source information has been handled." "apiIntegration": { "selectedAPIs": [ { "apiName": "getKnowledgeBaseDetail", "apiPath": " / ai / knowledgeBase / getKnowledgeBaseDetail.do", "apiDescription": "Retrieves detailed knowledge base information for displaying card details." }, { "apiName": "queryQuoteAppOfKnowledgeBase", "apiPath": " / ai / knowledgeBase / queryQuoteAppOfKnowledgeBase.do", "apiDescription": "Query the list of applications associated with the knowledge base, used to display the association status." } ], "implementation": "Integrate knowledge base details and related application query APIs to establish a complete card data service layer." } }, { "id": 4, "title": "Completed Knowledge Base Operation Function", "description": "Integrates the KnowledgeDialog component to implement various operation functions of the knowledge base, including core interactive logic such as uploading knowledge, associating AI applications, and deleting knowledge base entries." "status": "completed", "dependencies": [3], "priority": "medium", "details": "Directly use the src / components / knowledgeDialog / index.tsx component, which fully implements functions such as creating a new knowledge base, editing a knowledge base, deleting a knowledge base confirmation dialog, and associating with AI applications. The component includes complete form validation, API calls, success / failure feedback logic, etc. It integrates the knowledge upload button functionality from the KnowledgeManagement component. The interaction logic of the three functional modules in the Knowledge Base Suggestions Tab has been improved to ensure that access control and status updates for various operations function correctly." "apiIntegration": { "selectedAPIs": [ { "apiName": "postNewDialogForm", "apiPath": " / ai / knowledgeBase / createKnowledgeBase.do", "apiDescription": "Create a new knowledge base" }, { "apiName": "postEditDialogForm", "apiPath": " / ai / knowledgeBase / editKnowledgeBase.do", "apiDescription": "Edit knowledge base information" }, { "apiName": "deleteKnowledgeBook", "apiPath": " / ai / knowledgeBase / deleteKnowledgeBase.do", "apiDescription": "Delete Knowledge Base" }, { "apiName": "uploadFile", "apiPath": " / ai / knowledgeBase / uploadFile.do", "apiDescription": "Upload knowledge file" }, { "apiName": "uploadFileWithBizCode", "apiPath": " / ai / knowledgeBase / uploadFileWithBizCode.do", "apiDescription": "File upload with interactive logic code" } ], "implementation": "Integrate the knowledge base CRUD operations and file upload APIs to establish a complete knowledge base operation service layer." } } ] } The entire process achieves end-to-end automation from user requirements to complete code, with each tool focusing on a specific stage and collaborating seamlessly through the MCP protocol.

[0054] Figure 5 This is a schematic structural diagram of a device provided in an exemplary embodiment. For example... Figure 5 As shown, device 400 mainly consists of a communication interface 402, a user interface 404, a processor 406, and a data storage 408. These components are interconnected and communicate with each other via a system bus, network, or other connection mechanism 410. The communication interface 402 enables device 400 to communicate with other devices, access networks, and transmission networks via analog or digital modulation. For example, the communication interface 402 may include a chipset and antenna for wireless communication with a radio access network or access point. Furthermore, the communication interface 402 can be a wired interface such as Ethernet, Token Ring, or a USB port, or a wireless interface such as Wi-Fi, Bluetooth, Global Positioning System (GPS), or a wide-area wireless interface (e.g., WiMAX or LTE). Of course, the communication interface 402 can also support other forms of physical layer interfaces and standard or proprietary communication protocols. The communication interface 402 may also include multiple physical communication interfaces, such as Wi-Fi, Bluetooth, and wide-area wireless interfaces.

[0055] User interface 404 includes receiving user input and providing output to the user. Therefore, user interface 404 may include input components such as a keypad, keyboard, touch-sensitive or presence-sensitive panel, computer mouse, trackball, joystick, microphone, still camera, and video camera, and output components such as a display screen (which may be combined with a touch-sensitive panel), CRT, LCD, LED, display using DLP technology, printer, and other similar devices known or developed in the future. User interface 404 may also generate auditory output via speakers, speaker jacks, audio output ports, audio output devices, headphones, and other similar devices known or developed in the future. In some embodiments, user interface 404 may include software, circuitry, or other forms of logic capable of transmitting and receiving data from external user input / output devices. Additionally or alternatively, device 400 may support remote access from other devices via communication interface 402 or another physical interface (not shown). User interface 404 may be configured to receive user input, the position and movement of which may be indicated by an indicator or cursor described herein. User interface 404 may also be configured as a display device for rendering or displaying text fragments.

[0056] Processor 406 may contain one or more general-purpose processors and / or special-purpose processors.

[0057] Data storage 408 may include one or more volatile and / or non-volatile storage components and may be integrated wholly or partially with processor 406. Data storage 408 may include removable and non-removable components.

[0058] Processor 406 is capable of executing program instructions 418 (e.g., compiled or uncompiled program logic and / or machine code) stored in data storage 408 to perform the various functions described herein. Data storage 408 may comprise a non-transitory computer-readable medium on which program instructions are stored, which, when executed by device 400, enable device 400 to perform any methods, processes, or functions disclosed in this specification and / or the accompanying drawings. Processor 406 executing program instructions 418 may result in processor 406 using data 412.

[0059] For example, program instructions 418 may include an operating system 422 (e.g., an operating system kernel, device drivers, and / or other modules) installed on device 400 and one or more applications 420 (e.g., a browser, social application, or game application). Similarly, data 412 may include operating system data 416 and application data 414. Operating system data 416 is primarily accessible to the operating system 422, while application data 414 is primarily accessible to one or more applications 420. Application data 414 may reside in a file system visible or hidden from the user of device 400.

[0060] Application 420 can communicate with operating system 422 through one or more application programming interfaces (APIs). These APIs help application 420 read and / or write application data 414, transmit or receive information via communication interface 402, receive or display information on user interface 404, etc.

[0061] In some terminology, application 420 may be simply referred to as "app". Furthermore, application 420 can be downloaded to device 400 through one or more online app stores or app markets. However, applications can also be installed on device 400 in other ways, such as through a web browser or a physical interface on device 400 (e.g., a USB port).

[0062] Please refer to Figure 6 The automatic generation device for interaction logic code can be applied to, for example... Figure 5 The device shown implements the technical solution of this specification. The automatic generation device for the interactive logic code may include: Module 502 is used to acquire multiple visual design drafts; The requirements analysis module 504 is used to analyze the interaction logic requirements in the multiple visual design drafts through the requirements analysis model and generate a structured task description; the structured task description is used to describe the task information of the web page development task. The retrieval module 506 is used to retrieve a target interactive module that matches the task information from a pre-created interactive module database; The code generation module 508 is used to call the code generation model to generate the interactive logic code of the webpage including the target interactive module.

[0063] For ease of description, the above devices are described by dividing them into various modules or units based on their functions. Of course, when implementing one or more of these specifications, the functions of each module or unit can be implemented in the same or different software and / or hardware, or a module that performs the same function can be implemented by a combination of multiple sub-modules or sub-units, etc. The device embodiments described above are merely illustrative. For example, the division of units is only 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.

[0064] Based on the same concept as the methods described above, this specification also provides an electronic device, including: a processor; a memory for storing processor-executable instructions; wherein the processor performs the steps of the method as described in any of the above embodiments by executing the executable instructions.

[0065] Based on the same concept as the methods described above, this specification also provides a computer-readable storage medium having computer instructions stored thereon that, when executed by a processor, implement the steps of the methods as described in any of the above embodiments.

[0066] Based on the same concept as the methods described above, this specification also provides a computer program product, including a computer program / instructions that, when executed by a processor, implement the steps of the methods as described in any of the above embodiments.

[0067] What those skilled in the art will understand is: In this specification, the terms "comprising," "including," or any other variations thereof are intended to cover a non-exclusive inclusion, such that a process, method, product, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, product, or apparatus. Without further limitation, the presence of additional identical or equivalent elements in a process, method, product, or apparatus that includes said elements is not excluded.

[0068] In this specification, “a,” “an,” and “the” do not specifically refer to the singular, but may also include the plural.

[0069] In this specification, ordinal numbers such as "first," "second," etc., do not necessarily indicate order; they are often used to distinguish between objects. For example, "first server" and "second server" usually refer to two servers. To differentiate between these two servers, they are described as "first server" and "second server." Of course, sometimes these two servers may be the same server.

[0070] In this specification, unless explicitly stated otherwise, "receiving and sending data" does not necessarily mean direct receiving and sending; it can also mean indirect receiving and sending. For example, A receiving data sent by B can be understood as A directly receiving the data sent by B, or it can be understood as A indirectly receiving the data sent by B through other entities such as C. Similarly, B sending data to A can be understood as B sending the data directly to A, or it can be understood as B indirectly sending the data to A through other entities such as C. Here, C can be one entity, or it can be two or more entities.

[0071] In this specification, unless explicitly stated otherwise, the relationships between structures can be direct or indirect. For example, when describing "A is connected to B," unless it is explicitly stated that A and B are directly connected, it should be understood that A can be directly connected to B or indirectly connected to B. Similarly, when describing "A is on top of B," unless it is explicitly stated that A is directly above B (AB is adjacent and A is above B), it should be understood that A can be directly above B or indirectly above B (AB is separated by other elements, and A is above B). And so on.

[0072] This specification uses specific terms to describe embodiments thereof. Terms such as "an embodiment," "one embodiment," and / or "some embodiments" refer to a particular feature, structure, or characteristic associated with at least one embodiment of this specification. Therefore, it should be emphasized and noted that references to "an embodiment," "one embodiment," or "an alternative embodiment" in different locations throughout this specification do not necessarily refer to the same embodiment. Furthermore, those skilled in the art can combine and integrate the different embodiments or examples described herein, as well as the features of those different embodiments or examples, without contradiction.

[0073] Although one or more embodiments of this specification provide method steps as described in the embodiments or flowcharts, it is understood that the order of steps listed in the embodiments or flowcharts is only one of many possible execution orders and does not represent the only execution order. Therefore, when the claims involve method steps, any changes or adjustments to the order of such steps, or the parallelism between steps, are also within the scope of protection of the claims.

Claims

1. A method for automatically generating interactive logic code, the method comprising: Obtain multiple visual design drafts; The interaction logic requirements in the multiple visual design drafts are analyzed using a requirements analysis model to generate a structured task description. The structured task description is used to describe the task information of web page development tasks; Retrieve the target interactive module that matches the task information from a pre-created database of interactive modules; The code generation model is invoked to generate the interactive logic code for the webpage, which includes the target interactive module.

2. The method according to claim 1, wherein analyzing the interaction logic requirements in the multiple visual design drafts using a requirements analysis model to generate a structured task description includes: Obtain a webpage building reasoning template, which is used to arrange the reasoning steps for generating a structured task description based on the multiple visual design drafts; The driving requirement analysis model analyzes the interaction logic requirements in the multiple visual design drafts based on the reasoning steps arranged by the webpage construction reasoning template, and obtains a structured task description.

3. The method according to claim 2, wherein the reasoning steps arranged in the webpage construction reasoning template include: Determine the logical order of the multiple visual design drafts; The component state transition relationships among the multiple visual design drafts are determined based on the logical order. Based on the component state transition relationship, the common components in the multiple visual design drafts are determined; A structured task description is generated based on the aforementioned common components.

4. The method according to claim 1, wherein retrieving a target interactive module matching the task information from a pre-created interactive module database comprises: Obtain the module description information of each interaction module in the interaction module database; The module description information of each interaction module is matched with the task information to obtain the matching degree between each interaction module and the task information; Based on the matching degree between each interaction module and the task information, a target interaction module that matches the task information is retrieved from each interaction module.

5. The method according to claim 4, wherein the module description information includes module function information and module content information, and the task information includes task requirement information and task content information; the matching degree between any interactive module and the task information is determined based on the following method: The functional information of the interaction module is matched with the task requirement information to obtain a first matching degree; The content information of the interaction module is matched with the task content information to obtain a second matching degree; The first matching degree and the second matching degree are weighted to obtain the matching degree between the interaction module and the task information.

6. The method according to claim 4, wherein retrieving a target interactive module matching the task information from a pre-created interactive module database comprises: Obtain a retrieval reasoning template, which is used to arrange the reasoning steps for retrieving the target interactive module from the interactive module database; The pre-trained language model is driven to retrieve target interactive modules that match the task information from a pre-created interactive module database, following the reasoning steps arranged by the retrieval reasoning template.

7. The method according to claim 4, wherein the web page development task includes a component creation task and an interface creation task, wherein the component creation task is used to create components required to implement the interaction logic requirements, and the interface creation task is used to create interfaces required to implement the interaction logic requirements; The step of retrieving a target interactive module that matches the task information from a pre-created interactive module database includes: Retrieve target components from a pre-created component library that match the task information of the component creation task; as well as Retrieve the target interface from the pre-created interface library that matches the task information of the interface creation task.

8. The method according to claim 1, wherein the task information includes the task type, execution order, priority, dependency relationship and task status of the web page development task.

9. The method according to claim 1, before analyzing the interaction logic requirements in the multiple visual design drafts through a requirements analysis model, the method further includes: Obtain a requirements analysis and reasoning template, which is used to arrange a standardized process flow for generating interaction logic code. The standardized process flow includes generating a structured task description, retrieving the target interaction module, and generating interaction logic code. Based on the aforementioned requirements analysis and reasoning template, the operations of generating a structured task description, retrieving the target interaction module, and generating interaction logic code are executed sequentially.

10. The method according to claim 1, further comprising: A task analysis report is generated based on the structured task description and the retrieved target interaction modules.

11. An electronic device, comprising: processor; A memory for storing processor-executable instructions; wherein the processor implements the steps of the method as described in any one of claims 1-10 by executing the executable instructions.

12. A computer-readable storage medium having stored thereon computer instructions that, when executed by a processor, implement the steps of the method as claimed in any one of claims 1-10.

13. A computer program product comprising a computer program / instructions that, when executed by a processor, implement the steps of the method as claimed in any one of claims 1-10.

Images