Front-end dynamic code generation method based on artificial intelligence analysis and related equipment

Abstract

This application relates to the field of software development technology and can be applied to the fields of fintech and digital healthcare. It discloses a method and related equipment for generating dynamic front-end code based on artificial intelligence analysis. The method includes: acquiring the front-end page source document and performing artificial intelligence analysis to generate multimodal analysis results representing the page structure, component semantics, and interactive behaviors; constructing a mapping structure of component attributes, state variables, and interface request parameters based on the relationship between page elements and business descriptions; generating the front-end code structure by performing abstract syntax tree expansion according to the mapping structure, and generating page rendering code, component registration code, state management code, component interaction processing code, and interface call code; and organizing the dynamic code according to the front-end project structure to form a set of front-end project files. This method achieves automatic generation from the front-end page source document to the front-end project code while maintaining consistent expression between the page display logic and business logic.

Description

Technical Field

[0001] This application relates to the field of software development technology and can be applied to the fields of fintech / digital healthcare, particularly to a method and related equipment for generating front-end dynamic code based on artificial intelligence analysis. Background Technology

[0002] As web applications become increasingly complex, front-end development often requires manually writing page structure, style layout, interaction logic, state management, and data interface code based on design drafts or prototype documents. This process is particularly tedious in application scenarios across various industries such as fintech and digital healthcare. For example, the indicator display dashboards and multi-dimensional chart interfaces in financial risk control systems, and the patient information entry and intelligent follow-up pages in medical diagnostic platforms, all require gradually building component structures, responsive data models, and asynchronous request logic based on business documents and UI designs. To alleviate the pressure of repetitive coding, the industry has seen the emergence of auxiliary technologies such as low-code platforms, visual building tools, and plugins that automatically convert design drafts into code. These technologies generate basic page code through drag-and-drop component assembly or design draft recognition, thereby improving basic development efficiency. However, these technologies are generally based on static code generation, and the generated results often only include presentation layer content such as HTML / CSS. They lack sufficient support for dynamic functions of front-end frameworks such as Vue and React, including reactive data binding, lifecycle logic, state management (e.g., Pinia or Vuex), API parameter mapping, and event interaction handling. As a result, in scenarios such as complex financial risk control forms, insurance product configuration platforms, medical electronic medical record entry pages, and medical image analysis systems, developers still need to supplement interface logic and data flow processing from scratch. In addition, existing visual generation tools are unable to automatically extract business data models, lack a correlation mapping mechanism between UI layout and backend data structure, and it is difficult to directly connect the generated code with the real business. They are also unstable in the transformation of complex layouts (e.g., Grid or Flexbox), have weak support for custom component systems, and the generated code lacks engineering attributes, such as unit test code generation, code style verification, multi-person collaboration mechanisms, hot update mechanisms, and version control. Therefore, existing automatic generation technology mainly plays the role of page display auxiliary tool in real business systems, which is difficult to meet the application development needs of industries such as fintech and digital healthcare that require high interactivity, high maintainability and high engineering. Developers still need to perform a lot of repetitive and low-value code completion work, which makes it difficult to fundamentally improve the overall development efficiency. Summary of the Invention

[0003] The main technical problem addressed by the embodiments of this application is that existing automatic page generation technologies only provide static displays and cannot automatically generate runnable dynamic front-end code.

[0004] To address the aforementioned technical problems, the first technical solution adopted in this application is: providing a front-end dynamic code generation method based on artificial intelligence analysis, comprising: acquiring a front-end page source document containing design information and business description information, and performing artificial intelligence analysis on the front-end page source document to obtain a multimodal analysis result representing the page structure, component semantics, and interactive behavior; generating a mapping structure of attribute parameters, state variables, and interface request parameters of page components based on the association relationship between page elements in the multimodal analysis result and the business description; expanding a preset front-end framework into an abstract syntax tree according to the mapping structure to obtain a front-end code structure containing component hierarchy, reactive data binding logic, and event interaction logic; automatically generating runnable dynamic code based on the front-end code structure, wherein the runnable dynamic code includes page rendering code, component registration code, state management code, component interaction processing code, and interface call code; and structurally adjusting the dynamic code according to the front-end project structure to obtain a front-end project file set containing page resources, component resources, state management resources, and interface resources.

[0005] Optionally, the step of performing artificial intelligence parsing on the front-end page source document to obtain multimodal parsing results representing page structure, component semantics, and interactive behavior includes: performing layout analysis on the design information to identify the spatial position, hierarchical relationship, alignment, and grouping structure of page elements; determining candidate component regions of the page elements based on the design information, and extracting component boundaries, component inclusion relationships, and reusable component units; performing semantic analysis on the business description information to determine the business operations, event triggering conditions, and data interaction requirements corresponding to the components based on the semantic analysis results; inferring component behavior based on the correspondence between the page elements and the semantic analysis results, and generating component interaction logic and data dependency relationships; and performing structured aggregation on the component interaction logic and data dependency relationships to generate the multimodal parsing results containing the association relationships between page structure, component semantics, and interactive behavior information.

[0006] Optionally, the step of generating the mapping structure of attribute parameters, state variables, and interface request parameters of page components based on the association between page elements in the multimodal parsing result and the business description includes: The display attributes, input attributes, and configurable attributes corresponding to page components are extracted from the multimodal parsing results to generate a set of component attribute parameters. The state change triggering conditions and data update logic in the business description information are parsed to determine the initialization conditions, update conditions, and scope of state variables associated with the component, generating a set of component state variables. Semantic analysis is performed on the business description information to obtain business operation statements, and the data interaction requirements are parsed to obtain interface request data. An interface request parameter set is generated based on the correspondence between the business operation statements and the interface request data, including the interface path, parameter fields, and response fields. The component behavior execution chain is determined through the dependency relationship between the event triggering conditions and the business operations. A triggering dependency relationship between events and data updates is generated based on the component behavior execution chain. A component granularity logic mapping table is constructed based on the association relationship between the set of component attribute parameters, the set of component state variables, the set of interface request parameters, and the triggering dependency relationship to obtain the correspondence between the display logic, state update logic, and data interaction logic of each component. The mapping structure used for the abstract syntax tree extension generation step is generated based on the component granularity logic mapping table.

[0007] Optionally, the step of generating an abstract syntax tree by expanding the preset front-end framework according to the mapping structure to obtain a front-end code structure containing a component hierarchy, reactive data binding logic, and event interaction logic includes: constructing component nodes for the abstract syntax tree based on the component logic in the mapping structure, and establishing component hierarchy relationships in the abstract syntax tree; inserting component attribute binding nodes into the abstract syntax tree according to the component attribute parameter set to represent the mapping relationship between the component's display attributes and input attributes; inserting state binding nodes and state update nodes into the abstract syntax tree according to the component state variable set to represent the initialization, update, and activation mechanism of the component's internal state; inserting event binding nodes and event callback nodes into the abstract syntax tree according to the triggering dependency relationship between the event and data update to represent the component behavior execution chain; and structurally combining the component attribute binding nodes, state binding nodes, state update nodes, event binding nodes, and event callback nodes to generate the front-end code structure containing the component hierarchy, reactive data binding logic, and event interaction logic.

[0008] Optionally, the step of automatically generating runnable dynamic code based on the front-end code structure includes: generating page rendering code based on the component nodes in the front-end code structure to construct a page rendering tree corresponding to the component hierarchy; generating component registration code based on the component nodes and component identification information in the front-end code structure to support component loading, referencing, and dependency management; generating state management code based on the state binding nodes and state update nodes in the front-end code structure to characterize the initialization, update, and synchronization mechanism of the component's internal state; generating component interaction processing code based on the event binding nodes and event callback nodes in the front-end code structure to characterize the event response logic corresponding to the component behavior execution chain; and generating interface call code based on the interface request parameter set in the front-end code structure to realize data reading and writing between the component and external data sources.

[0009] Optionally, after the step of automatically generating runnable dynamic code based on the front-end code structure, the method further includes: parsing the dependencies between the page rendering code, component interaction processing code, state management code, and interface call code, and determining the order of page rendering, event handling, state update, and interface call; rearranging the execution order of the page rendering code, component interaction processing code, state management code, and interface call code in the dynamic code according to the order; and writing the rearranged page rendering code, component interaction processing code, state management code, and interface call code into the dynamic code.

[0010] Optionally, after the step of automatically generating runnable dynamic code based on the front-end code structure, the method further includes: extracting business scenario configuration items from the business description information; constructing a generation optimization strategy for the page rendering code, component interaction processing code, state management code, and interface call code based on the business scenario configuration items; optimizing and adjusting the dynamic code according to the generation optimization strategy, and writing the optimized and adjusted result into the dynamic code.

[0011] To address the aforementioned technical problems, the second technical solution adopted in this application is: providing a front-end dynamic code generation device based on artificial intelligence analysis, comprising: a source document parsing module, used to acquire a front-end page source document containing design information and business description information, and to perform artificial intelligence analysis on the front-end page source document to obtain a multimodal analysis result representing the page structure, component semantics, and interactive behavior; a page mapping structure module, used to generate a mapping structure of attribute parameters, state variables, and interface request parameters of page components based on the association relationship between page elements and the business description in the multimodal analysis result; a front-end code structure module, used to perform abstract syntax tree expansion on a preset front-end framework according to the mapping structure to obtain a front-end code structure containing component hierarchy structure, reactive data binding logic, and event interaction logic; a dynamic code generation module, used to automatically generate runnable dynamic code based on the front-end code structure, the runnable dynamic code including page rendering code, component registration code, state management code, component interaction processing code, and interface call code; and a front-end project file module, used to structurally adjust the dynamic code according to the front-end project structure to obtain a set of front-end project files containing page resources, component resources, state management resources, and interface resources.

[0012] To solve the above-mentioned technical problems, the third technical solution adopted in the embodiments of this application is: to provide an electronic device, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the front-end dynamic code generation method based on artificial intelligence parsing as described above.

[0013] To solve the above-mentioned technical problems, the fourth technical solution adopted in the embodiments of this application is: to provide a non-volatile computer-readable storage medium, wherein the non-volatile computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by an electronic device, the electronic device executes the front-end dynamic code generation method based on artificial intelligence parsing as described above.

[0014] Unlike related technologies, this application establishes a correspondence between design information and business description information through artificial intelligence analysis, so that the page structure, component semantics and interactive behavior can be expressed in a unified data structure, and dynamic code containing page rendering, component registration, state management and interface calls can be directly generated from this expression, so that the display logic, interaction logic, state logic and data reading and writing logic of the front-end page remain consistent at the code level. Attached Figure Description

[0015] One or more embodiments are illustrated by way of example with reference to the accompanying drawings. These illustrations do not constitute a limitation on the embodiments. Elements having the same reference numerals in the drawings are denoted as similar elements. Unless otherwise stated, the figures in the drawings are not to be limited by scale.

[0016] Figure 1 This is a schematic diagram of the operating environment of the front-end dynamic code generation method based on artificial intelligence analysis provided in the embodiments of this application.

[0017] Figure 2 This is a schematic diagram of the execution flow of the front-end dynamic code generation method based on artificial intelligence analysis provided in the embodiments of this application.

[0018] Figure 3 This is a schematic diagram of the execution flow of obtaining multimodal parsing results in the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application.

[0019] Figure 4 This is a schematic diagram of the execution flow of abstract syntax tree expansion generation in the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application.

[0020] Figure 5 This is a schematic diagram of the data processing flow of an example of the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application.

[0021] Figure 6 This is a schematic diagram of the system structure of the front-end dynamic code generation device based on artificial intelligence analysis provided in the embodiments of this application.

[0022] Figure 7 This is a schematic diagram of the hardware structure of an electronic device that executes a front-end dynamic code generation method based on artificial intelligence analysis, as provided in an embodiment of this application. Detailed Implementation

[0023] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. Software tools, components, or servers not belonging to this company that appear in the embodiments of this application are merely illustrative examples and do not represent actual use.

[0024] It should be noted that, unless otherwise specified, the various features in the embodiments of this application can be combined with each other, all of which are within the protection scope of this application. Furthermore, although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described may be performed in a different order than the module division in the device schematic diagram or the order in the flowchart.

[0025] Unless otherwise defined, all technical and scientific terms used in this specification have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used in this specification is for the purpose of describing particular embodiments only and is not intended to limit the scope of this application. The term "and / or" as used in this specification includes any and all combinations of one or more of the associated listed items.

[0026] To facilitate understanding of this embodiment, a detailed description of the front-end dynamic code generation method based on artificial intelligence parsing disclosed in this application embodiment will be provided first. Please refer to [link to relevant documentation]. Figure 1 , Figure 1 This is a schematic diagram of the runtime environment for the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application, such as... Figure 1 As shown, the execution subject of the front-end dynamic code generation method based on artificial intelligence parsing provided in this application embodiment is generally an electronic device with a certain computing power, such as a computer device. In some possible implementations, this front-end dynamic code generation method based on artificial intelligence parsing can be implemented by a processor calling computer-readable instructions stored in memory. Figure 1 The computer equipment mentioned can be a server. A server can be a standalone server or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms. This can be understood as... Figure 1 The number of computer devices shown is merely illustrative and can be expanded in any number according to actual needs.

[0027] Please continue reading. Figure 2 , Figure 2 This is a schematic diagram of the execution flow of the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application, such as... Figure 2 As shown, it includes the following steps: S1. Obtain the front-end page source document containing design information and business description information, and perform artificial intelligence parsing on the front-end page source document to obtain multimodal parsing results that represent the page structure, component semantics and interactive behavior.

[0028] In step S1, design information reflects the page's structural layout and visual hierarchy, while business description information reflects the business operations and data interaction requirements corresponding to the components. By aligning visual elements with textual semantics through a model, a clear relationship can be established between each page element, component, and business behavior. For example, in a fintech scenario, the "approval button" in the page design is bound to the statement "click to submit an approval request and refresh the risk record list" in the business document, thus forming a connection between the button and the approval business interface and the risk list status update. Similarly, in a digital healthcare scenario, the "appointment button" in the design draft semantically corresponds to the statement "submit a registration application to the appointment interface and update the display of medical records" in the business description, thereby associating the appointment button with interface calls, status changes, and subsequent page refresh logic. Finally, this step yields a multimodal parsing result representing the page structure, component semantics, and interaction behavior information. This result will serve as the basic input for subsequent mapping structure generation and automatic code generation.

[0029] As an example, when parsing the source document of a front-end page, the UI design draft can be image-analyzed using visual recognition to extract visual features such as page layout structure, component shapes, text positions, icon relationships, and alignment. Simultaneously, semantic understanding is performed on the business description text, conducting semantic dependency analysis and structurally representing business actions, event triggering conditions, data input fields, and data output fields within the text. The page spatial structure information obtained from visual parsing can be correlated with the business action descriptions obtained from semantic parsing, enabling the system to identify "which component carries which business behaviors" on the page, laying the foundation for subsequent generation of correspondences between attributes, states, and event interactions.

[0030] As an optional implementation, step S1 may further include steps S11 to S15.

[0031] S11. Perform layout analysis on the design information to identify the spatial position, hierarchical relationship, alignment, and grouping structure of page elements.

[0032] In step S11, the design information is analyzed for layout. By parsing the spatial position, size, layer depth, parent-child nesting relationship, alignment and arrangement, grouping structure and other attributes of page elements, a structured layout model is generated to represent the overall layout relationship of the page. This enables the system to identify the position and composition relationship of each page element in the interface structure, providing a foundation for subsequent component candidate area division and component internal structure identification.

[0033] S12. Based on the design information, determine the candidate component areas of page elements, and extract component boundaries, component inclusion relationships, and reusable component units.

[0034] In step S12, page regions with stable boundaries and internal structures are identified as candidate component regions based on the layout model. By calculating the spatial proximity, structural repetition, nesting relationship and reusability pattern between elements, multiple elements are aggregated into component units. The component boundary range, containment relationship and sub-element structure are extracted to form a candidate component set, which provides page component-level semantic granularity for the subsequent generation of attribute parameter set, state set and interface parameter set.

[0035] S13. Perform semantic analysis on the business description information, and determine the business operations, event triggering conditions, and data interaction requirements corresponding to the components based on the semantic analysis results.

[0036] In step S13, semantic analysis is performed on the business description information. Through syntactic parsing, intent recognition, event trigger extraction, and data interaction semantic extraction, the content related to user operations, event triggering conditions, and data read / write requirements in natural language is expressed in a structured manner. This determines the business behavior, event logic, and interaction requirements between each component and the data source during operation, providing a semantic foundation for establishing component behavior execution chains and data dependencies.

[0037] S14. Infer component behavior based on the correspondence between page elements and semantic analysis results, and generate component interaction logic and data dependencies.

[0038] In step S14, the layout structure is associated with the semantic analysis results. By aligning the page element recognition results with the business semantic mapping relationship, the behavioral logic of each component during operation is inferred, including event triggering actions, state update behaviors and interface request calls, as well as the linkage relationship between components. At the same time, the data dependency path is determined, thereby forming a component behavior description that includes interaction logic and data dependency relationship.

[0039] S15. Perform structured aggregation of component interaction logic and data dependencies to generate multimodal parsing results that include the relationships between page structure, component semantics, and interaction behavior information.

[0040] In step S15, the component behavior description and data dependency relationship are aggregated in a structured manner. The layout information, component semantic information and business interaction information are integrated into a unified multimodal parsing result with the page structure as the main axis. Each component forms a structured semantic unit containing display attributes, state variables, event logic and interface interaction logic. The association relationship between components, between components and data sources, and between components and events is established to generate a unified intermediate semantic representation that can be directly used in the subsequent mapping structure generation and code structure generation stages.

[0041] Through steps S11 to S15 above, based on the joint parsing of design information and business description information, page layout, component structure, event triggering conditions, state change logic and data interaction requirements can be uniformly integrated into a structured multimodal parsing result. This enables the system to obtain the correspondence between page elements and business logic, the expression of internal logic of components, and the data and behavior dependencies between components. This provides a semantically complete and directly usable intermediate representation for subsequent mapping structure generation, abstract syntax tree expansion and dynamic code generation.

[0042] S2. Based on the association between page elements and business descriptions in the multimodal parsing results, generate the mapping structure of page component attribute parameters, state variables, and interface request parameters.

[0043] In step S2, based on the established "page element-business description semantic" correspondence in the multimodal parsing results, the system extracts the display attributes, state variables, and interface request parameters associated with each page component from the multimodal parsing results. These elements are then structured and modeled to form a component-level mapping structure, used to describe the component's displayable features, internal state expression methods, and parameter dependencies for interaction with external data sources. For example, in a fintech scenario, when the risk control approval button on the page is semantically associated with the credit approval interface, the system uses the button's text, color, and location as display attributes, the approval state variable corresponding to the approval action as a state set, and the credit interface path, request fields, and response fields as an interface request set. In a digital healthcare scenario, when the appointment button is semantically associated with the registration appointment interface, the system extracts the display fields of the appointment component as attribute parameters, uses the appointment status and remaining appointment slots as state variables, and uses the appointment interface's request path, patient number, and time period fields as an interface parameter set. Through this process, the system provides a component-level semantic expression for binding attributes, states, and interface calls for subsequent syntax tree expansion and dynamic code generation.

[0044] As an alternative implementation method, please continue reading. Figure 3 , Figure 3 This is a schematic diagram of the execution flow of obtaining multimodal parsing results in the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application, such as... Figure 3 As shown, the process can specifically include the following steps S21 to S26.

[0045] S21. Extract the display attributes, input attributes, and configurable attributes corresponding to the page components from the multimodal parsing results to generate a set of component attribute parameters.

[0046] In step S21, the display attributes, input attributes, and configurable attributes corresponding to the page components are extracted in a structured manner from the multimodal parsing results. These attributes are organized into a set of component attribute parameters, which represent the static and dynamic display information required by the component during page rendering and user input, providing a basis for the subsequent generation of attribute binding logic.

[0047] S22. Analyze the state change triggering conditions and data update logic in the business description information, determine the initialization conditions, update conditions and scope of the state variables associated with the component, and generate a set of component state variables.

[0048] In step S22, semantic parsing is performed on the state change triggering conditions and data update logic appearing in the business description statement. A set of component state variables is formed based on the state initialization conditions, update conditions, and scope of application, so that the component can correctly manage the internal state expression and state change process during operation.

[0049] S23. Perform semantic analysis on the business description information to obtain business operation statements, parse the data interaction requirements to obtain interface request data, and generate an interface request parameter set based on the correspondence between the interface path, parameter fields, and response fields in the business operation statements and interface request data.

[0050] In step S23, business operation statements are extracted from the business semantic analysis results, and interface request data is parsed from the interface description information. An interface request parameter set is generated by matching the semantic correspondence between the interface path, request parameter fields and response fields to describe the data interaction requirements between the component and the external data service.

[0051] S24. Determine the component behavior execution chain through the dependency relationship between event triggering conditions and business operations, and generate the triggering dependency relationship between events and data updates based on the component behavior execution chain.

[0052] In step S24, the component behavior execution chain is inferred based on the dependency relationship between the event triggering conditions and the business operation. By analyzing the calling relationship between the business logic sequence and the state update behavior, the triggering dependency relationship between event triggering and data update is obtained, providing a basis for generating an executable event chain and state linkage processing logic.

[0053] S25. Construct a component granular logic mapping table based on the association between the component attribute parameter set, component state variable set, interface request parameter set, and trigger dependency relationship, so as to obtain the correspondence between the display logic, state update logic, and data interaction logic of each component.

[0054] In step S25, a logical mapping structure is constructed within the component based on the relationship between the component attribute parameter set, the state variable set, and the interface request parameter set. This structure is used to express the correspondence between the component display logic, state update logic, and data interaction logic, and forms a component-level semantic representation unit, providing directly usable mapping information for subsequent syntax tree expansion.

[0055] S26. Based on the component granularity logic mapping table, generate a mapping structure for the abstract syntax tree extension generation step call.

[0056] In step S26, the internal logic mapping structure of the component is output as a mapping structure that can be called in the abstract syntax tree extension generation step, so that the attribute binding node, state binding node, event handling node and interface request node can be generated and combined according to the component semantics when the abstract syntax tree is built in the future, thereby realizing semantic-driven code structure construction.

[0057] Through steps S21 to S26 above, information aggregation of display attributes, state variables, interface request parameters, event triggering logic, and data interaction logic can be completed at the component granularity. This allows page layout information, business semantic information, and component behavior information to be uniformly expressed in the same semantic model, thereby forming a mapping structure that can be directly used for the abstract syntax tree extension generation stage. This enables the system to obtain the correspondence between the display logic, state logic, and interaction logic of each component based on this mapping structure during the subsequent code generation process. It also supports the generation of syntax nodes and code content required for attribute binding, state binding, event handling, and interface calls according to the semantic relationships within the components.

[0058] S3. Based on the mapping structure, the preset front-end framework is expanded and an abstract syntax tree is generated to obtain a front-end code structure that includes component hierarchy, reactive data binding logic, and event interaction logic.

[0059] In step S3, based on the component attribute parameters, state variables, interface request parameters and event dependencies contained in the mapping structure, an abstract syntax tree is generated for the preset front-end framework. The component semantic information is mapped to abstract syntax tree nodes, and the nodes are organized according to the hierarchical relationship between components and the internal logical order to form a front-end code structure that includes component hierarchical structure, reactive data binding logic and event interaction logic. In fintech scenarios, when the mapping structure indicates a dependency between the "Approval Button" component and the approval status variable and credit approval interface, the system creates a component node for the Approval Button in the abstract syntax tree. It inserts attribute binding nodes to correspond to the approval text display, state binding and status update nodes to correspond to the approval status change logic, and event binding and event callback nodes to express the behavioral chain of "clicking the button → initiating an approval request → updating the risk status." In digital healthcare scenarios, when the mapping structure indicates a dependency between the "Appointment Button" component and the appointment status variable and registration appointment interface, the system constructs a component node corresponding to the Appointment Button in the abstract syntax tree and inserts attribute binding nodes, state binding and status update nodes, event binding nodes, and event callback nodes to express the logical chain of "clicking an appointment → submitting an appointment request → updating appointment availability and medical records." Through this method, the component's display attribute logic, state dependency logic, and interactive behavior logic are all expressed as combinations of syntax tree nodes, providing a complete code structure input for the subsequent dynamic code generation module.

[0060] As an example, when constructing the page mapping structure, a JSON Schema can be automatically generated based on the annotation information in the UI design draft to describe the display fields, input fields, and their constraints. At the same time, the corresponding state management structure can be automatically constructed based on the state variables involved in the component, and the state organization method of Pinia or Vuex can be automatically generated by analyzing the data reading and writing order. In addition, the correspondence between interface paths, parameters, and response fields can be deduced based on the interface usage methods mentioned in the business description, and Axios request code can be generated to ensure that the data reading and writing methods of the component are consistent with the interface specifications.

[0061] As an alternative implementation method, please continue reading. Figure 4 , Figure 4 This is a schematic diagram of the execution flow of abstract syntax tree expansion generation in the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application, such as... Figure 4 As shown, it can specifically include the following steps S31 to S35.

[0062] S31. Based on the component logic in the mapping structure, construct component nodes for the abstract syntax tree and establish component hierarchical relationships in the abstract syntax tree.

[0063] In step S31, component nodes are constructed for the abstract syntax tree based on the component logic in the mapping structure. By establishing parent-child relationships and sequence relationships in the abstract syntax tree, the modeling of the component hierarchy is completed, so that each component corresponds to an independent node in the syntax tree, and its nesting relationship is consistent with the semantics of the page layout.

[0064] S32. Insert component attribute binding nodes in the abstract syntax tree according to the component attribute parameter set to represent the mapping relationship between the component's display attributes and input attributes.

[0065] In step S32, component attribute binding nodes are inserted into the abstract syntax tree according to the component attribute parameter set. The displayable attributes, input attributes and configurable attributes inside the component are organized into the corresponding AST nodes to express the mapping relationship between attributes and components, and to provide the attribute reference basis for the subsequent rendering stage.

[0066] S33. Insert state binding nodes and state update nodes into the abstract syntax tree based on the component state variable set to represent the initialization, update and activation mechanism of the component's internal state.

[0067] In step S33, state binding nodes and state update nodes are inserted into the abstract syntax tree according to the set of component state variables. By constructing syntax nodes related to state initialization, state update and state activation for each component, the internal state logic of the component is expressed, so that the state data can be correctly read, modified and activated when the code is running.

[0068] S34. Based on the triggering dependency between events and data updates, insert event binding nodes and event callback nodes into the abstract syntax tree to represent the component behavior execution chain.

[0069] In step S34, event binding nodes and event callback nodes are inserted into the abstract syntax tree according to the triggering dependency relationship between events and data updates. This binds user behavior or runtime events to the component behavior execution chain, representing the processing logic corresponding to the event triggering action and the execution order of business statements such as state updates and interface calls involved.

[0070] S35. Structure the component property binding nodes, state binding nodes, state update nodes, event binding nodes, and event callback nodes to generate a front-end code structure that includes component hierarchy, reactive data binding logic, and event interaction logic.

[0071] In step S35, the component attribute binding nodes, state binding nodes, state update nodes, event binding nodes, and event callback nodes are structurally combined according to the component hierarchy and semantic dependencies, and the output is a front-end code structure containing the component hierarchy structure, reactive data binding logic, and event interaction logic, so that the syntax tree can serve as a complete semantic input for the subsequent generation of dynamic code.

[0072] Through steps S31 to S35 above, the display attribute logic, state logic, and interaction logic of components can be expressed in the same code structure as abstract syntax tree nodes. This allows the component hierarchy, attribute binding, state update, event triggering, and interface call relationships to form a structured semantic representation in the syntax tree that can be directly used for dynamic code generation. This enables the system to obtain the correspondence between the internal logic of each component based on this semantic representation when generating dynamic code, and realize the combined generation of attribute binding nodes, state handling nodes, and event handling nodes in the code structure.

[0073] S4. Automatically generates runnable dynamic code based on the front-end code structure. The runnable dynamic code includes page rendering code, component registration code, state management code, component interaction processing code, and interface call code.

[0074] In step S4, runnable dynamic code is automatically generated based on the front-end code structure. By traversing component nodes, attribute binding nodes, state binding nodes, state update nodes, event binding nodes, event callback nodes, and interface request nodes in the code structure, the corresponding syntax structure is converted into page rendering code, component registration code, state management code, component interaction processing code, and interface call code, thus forming dynamic code that can be directly run in the front-end execution environment. In the fintech scenario, when the front-end code structure contains an "approval button component" and its corresponding approval status update logic and credit approval interface call logic, the system will construct the approval button's rendering code, component registration code, and approval status management code during the dynamic code generation process, and generate the approval button's interaction processing code and credit approval interface call code according to the event execution chain order. In the digital healthcare scenario, when the front-end code structure contains an "appointment button component" and logic associated with the registration appointment interface and appointment source status update, the system will generate the appointment button's rendering code, component registration code, appointment status management code, event interaction processing code, and appointment interface call code, so that the appointment button's display, interaction, and data update logic are all expressed through dynamic code.

[0075] As an example, in the process of generating dynamic code based on the front-end code structure, code can be generated step by step according to the component nodes, property binding nodes, state binding nodes, and event handling nodes in the abstract syntax tree. This transforms the structured information corresponding to each component into Vue3 Composition API syntax and converts the dependency order of each interaction behavior into corresponding execution logic. Simultaneously, reactive or ref objects can be automatically created based on state variables to build a reactive data flow, and the reference relationships and dependency loading relationships of each component can be automatically injected into the code, enabling the generated dynamic code to form a complete page rendering structure, interaction structure, and state management structure.

[0076] As an optional implementation, step S4 may further include steps S41 to S45.

[0077] S41. Generate page rendering code based on the component nodes in the front-end code structure to construct the page rendering tree corresponding to the component hierarchy structure.

[0078] In step S41, page rendering code is generated based on the component nodes in the front-end code structure. The page rendering tree is constructed by traversing the hierarchical relationship of the component nodes, so that the rendering logic of the page layout and component nesting structure in the dynamic code can be expressed.

[0079] S42. Generate component registration code based on component nodes and component identification information in the front-end code structure to support component loading, referencing, and dependency management.

[0080] In step S42, component registration code is generated based on the component nodes and component identification information in the front-end code structure. This provides a code structure for the loading, referencing, and dependency management of components in the runtime environment, enabling the components to be mounted as callable entities during framework runtime.

[0081] S43. Generate state management code based on the state binding nodes and state update nodes in the front-end code structure to represent the initialization, update and synchronization mechanism of the component's internal state.

[0082] In step S43, state management code is generated based on the state binding node and state update node in the front-end code structure to express the initialization logic, state update logic and state activation logic of the component's internal state, so that the changes in the component's internal state have an executable expression at the code level.

[0083] S44. Generate component interaction processing code based on the event binding nodes and event callback nodes in the front-end code structure to represent the event response logic corresponding to the component behavior execution chain.

[0084] In step S44, component interaction processing code is generated based on the event binding node and event callback node in the front-end code structure. The calling order between the event triggering action and the business execution chain is converted into an executable code structure to represent the behavior logic after the event is triggered.

[0085] S45. Generate interface call code based on the set of interface request parameters in the front-end code structure to enable data reading and writing between the component and the external data source.

[0086] In step S45, interface call code is generated based on the set of interface request parameters in the front-end code structure. The mapping information of interface path, request field and response field is written into the dynamic code so that the data read and write logic between the component and the external data source can be executed during the runtime phase.

[0087] Through steps S41 to S45 above, the component hierarchy, component registration information, state logic, event logic, and data interaction logic contained in the front-end code structure can be converted into page rendering code, component registration code, state management code, component interaction processing code, and interface call code, respectively. This allows the component display logic, state logic, and interaction logic to form corresponding executable structures in the dynamic code, enabling subsequent runtime phases to execute component rendering, state processing, event processing, and data reading and writing processes based on this structure.

[0088] As another optional implementation, after the step of automatically generating runnable dynamic code based on the front-end code structure in step S4 above, the following steps S401 to S403 can be included for optimization.

[0089] S401. Analyze the dependencies between page rendering code, component interaction processing code, state management code, and API call code to determine the order of page rendering, event handling, state updates, and API calls.

[0090] In step S401, the dependencies between page rendering code, component interaction processing code, state management code, and interface call code are parsed. By analyzing the call order between event triggering, state updating, and data reading and writing in the code structure, the execution order between page rendering, event processing, state updating, and interface call is determined to obtain the dependency order information within the dynamic code.

[0091] S402. Rearrange the execution order of page rendering code, component interaction processing code, state management code, and interface call code in dynamic code according to their order of execution.

[0092] In step S402, the execution order of page rendering code, component interaction processing code, state management code and interface call code in the dynamic code is rearranged according to the determined dependency order, so that the position of various functional codes in the dynamic code structure is consistent with the dependency order, thereby forming a new code order organization method.

[0093] S403. Write the rearranged page rendering code, component interaction processing code, state management code, and interface call code into dynamic code.

[0094] In step S403, the rearranged page rendering code, component interaction processing code, state management code, and interface call code are written into the dynamic code so that the dynamic code can run according to the execution structure organized in the order of dependencies.

[0095] Through the above steps S401 to S403, the page rendering code, component interaction processing code, state management code, and interface call code inside the dynamic code can be organized according to the dependency order, so that these codes form an execution order that conforms to the dependency relationship in the dynamic code structure, thereby enabling the runtime phase to execute the page rendering, event handling, state handling, and data reading and writing processes according to this execution order.

[0096] As another optional implementation, after the step of automatically generating runnable dynamic code based on the front-end code structure in step S4 above, the following steps S404 to S406 can be included for optimization.

[0097] S404. Extract business scenario configuration items from business description information.

[0098] In step S404, scenario-related fields, tags, or user role constraints in business statements can be identified, and configuration elements related to code generation strategies can be transformed into structured scenario configuration parameters, providing input for subsequent strategy selection for generating dynamic code.

[0099] S405. Optimize the generation of page rendering code, component interaction processing code, state management code, and interface call code based on business scenario configuration items.

[0100] In step S405, the dynamic code generation method can be adjusted according to the field display requirements, interaction behavior requirements, state management requirements, and interface usage requirements described in the scenario configuration items, so that the code generation is consistent with the business scenario configuration items.

[0101] S406. Optimize and adjust the dynamic code according to the generation optimization strategy, and write the optimized result into the dynamic code.

[0102] In step S406, page rendering code, component interaction processing code, state management code, and interface call code are added, removed, replaced, or reorganized in the dynamic code to ensure that the syntax and logic structure of the dynamic code are consistent with the generation strategy, and the adjusted code is written into the dynamic code.

[0103] Through steps S404 to S406 above, the generation methods of page rendering code, component interaction processing code, state management code, and interface call code can be adjusted according to the business scenario configuration items. This ensures that the dynamic code has formed the corresponding code structure and logic combination according to the scenario configuration items before it is written, so that the dynamic code is consistent with the business logic described in the scenario configuration items in terms of execution structure.

[0104] S5. Adjust the structure of the dynamic code according to the front-end project structure to obtain a set of front-end project files containing page resources, component resources, state management resources and interface resources, so as to support the engineering integration of front-end applications.

[0105] In step S5, page rendering code, component interaction processing code, state management code, and interface call code are categorized into page resources, component resources, state management resources, and interface resources, respectively. This allows dynamic code to be organized into files according to the front-end project structure, forming a set of front-end project files suitable for deployment and invocation. For example, in a fintech business scenario, the rendering code for the risk assessment page is written to the page resource directory; the rendering logic and interaction processing logic for the approval button and credit limit chart are written to the component resource directory; the state management logic related to the risk assessment status is written to the state management resource directory; and the code related to the credit approval interface call is written to the interface resource directory. In a digital healthcare business scenario, the rendering code for the doctor scheduling page is included in the page resource directory; the rendering logic and interaction processing logic for the appointment component and patient information card are included in the component resource directory; the logic related to the appointment status and remaining appointment slots is included in the state management resource directory; and the code related to the registration appointment interface call is included in the interface resource directory. Through this organization method, dynamic code is mapped to the project file structure in an engineering manner, providing a loadable file-level resource organization method for the front-end runtime environment.

[0106] As an example, please refer to Figure 5 , Figure 5 This is a schematic diagram of a data processing flow from an example of the front-end dynamic code generation method based on artificial intelligence parsing provided in the embodiments of this application, such as... Figure 5As shown, firstly, a UI design draft containing the interface layout, component styles, and text content is taken as input. An AI visual recognition module identifies page elements in the UI design draft to obtain recognition results representing page components, layout structure, and visual semantics. Then, the recognition results are input into a Transformer model, which generates a structured representation containing component attributes, state variables, and interactive behavior descriptions through semantic modeling and structural association analysis. Next, the structured representation is input into an abstract syntax tree converter, which generates a corresponding abstract syntax tree structure through node construction and insertion. Finally, Vue 3 code conforming to front-end framework specifications is generated based on the abstract syntax tree structure output by the abstract syntax tree converter.

[0107] The front-end dynamic code generation method based on artificial intelligence parsing provided in this application establishes a correspondence between page structure, component semantics, and interactive behaviors by jointly parsing design information and business description information in the front-end page source document. Based on this correspondence, a mapping structure of component attributes, state variables, and interface call parameters is constructed, enabling unified expression of page display logic and business logic. Furthermore, by performing abstract syntax tree extension on a preset front-end framework, the component hierarchy, attribute binding relationships, state update relationships, and event execution chains are organized into a front-end code structure, automatically generating the corresponding dynamic code. Further, by organizing the execution order of page rendering, event handling, state updates, and interface calls in the dynamic code, and forming page resources, component resources, state management resources, and interface resources according to the front-end project structure, the automatic generation from source document to a runnable front-end project is achieved.

[0108] Please continue reading. Figure 6 , Figure 6 This is a schematic diagram of the system structure of the front-end dynamic code generation device based on artificial intelligence analysis provided in the embodiments of this application, such as... Figure 6 As shown, the front-end dynamic code generation device 60 based on artificial intelligence analysis includes: a source document parsing module 61, a page mapping structure module 62, a front-end code structure module 63, a dynamic code generation module 64, and a front-end project file module 65.

[0109] The source document parsing module 61 is specifically used to obtain the front-end page source document containing design information and business description information, and to perform artificial intelligence parsing on the front-end page source document to obtain multimodal parsing results that represent the page structure, component semantics and interactive behavior.

[0110] The page mapping structure module 62 is specifically used to generate a mapping structure for the attribute parameters, state variables, and interface request parameters of page components based on the association between page elements in the multimodal parsing results and the business description.

[0111] The front-end code structure module 63 is specifically used to generate an abstract syntax tree for the preset front-end framework based on the mapping structure, so as to obtain a front-end code structure that includes component hierarchy, reactive data binding logic, and event interaction logic.

[0112] The dynamic code generation module 64 is specifically used to automatically generate runnable dynamic code based on the front-end code structure. The runnable dynamic code includes page rendering code, component registration code, state management code, component interaction processing code, and interface call code.

[0113] The front-end project file module 65 is specifically used to adjust the structure of the dynamic code according to the front-end project structure, so as to obtain a set of front-end project files containing page resources, component resources, state management resources and interface resources.

[0114] As an optional implementation, the source document parsing module 61 is further specifically used to perform layout analysis on the design information, identify the spatial position, hierarchical relationship, alignment method, and grouping structure of page elements; determine the candidate component areas of the page elements based on the design information, and extract component boundaries, component inclusion relationships, and reusable component units; perform semantic analysis on the business description information, and determine the business operations, event triggering conditions, and data interaction requirements corresponding to the components based on the semantic analysis results; infer component behavior based on the correspondence between the page elements and the semantic analysis results, and generate component interaction logic and data dependency relationships; and perform structured aggregation on the component interaction logic and data dependency relationships to generate the multimodal parsing result containing the association between page structure, component semantics, and interaction behavior information.

[0115] As an optional implementation, the page mapping structure module 62 is further specifically used to extract the display attributes, input attributes, and configurable attributes corresponding to the page components from the multimodal parsing results to generate a component attribute parameter set; parse the state change triggering conditions and data update logic in the business description information to determine the initialization conditions, update conditions, and scope of the state variables associated with the components to generate a component state variable set; perform semantic analysis on the business description information to obtain business operation statements, parse the data interaction requirements to obtain interface request data, and generate an interface request parameter set based on the correspondence between the interface path, parameter fields, and response fields in the business operation statements and the interface request data; determine the component behavior execution chain through the dependency relationship between the event triggering conditions and the business operations, and generate the triggering dependency relationship between the event and data update based on the component behavior execution chain; construct a component granular logic mapping table based on the association relationship between the component attribute parameter set, the component state variable set, the interface request parameter set, and the triggering dependency relationship to obtain the correspondence between the display logic, state update logic, and data interaction logic of each component; and generate the mapping structure for the abstract syntax tree extension generation step based on the component granular logic mapping table.

[0116] As an optional implementation, the front-end code structure module 63 is further specifically used to construct component nodes for an abstract syntax tree based on the component logic in the mapping structure, establish component hierarchical relationships in the abstract syntax tree; insert component attribute binding nodes into the abstract syntax tree according to the component attribute parameter set to represent the mapping relationship between the component's display attributes and input attributes; insert state binding nodes and state update nodes into the abstract syntax tree according to the component state variable set to represent the initialization, update, and activation mechanism of the component's internal state; insert event binding nodes and event callback nodes into the abstract syntax tree according to the triggering dependency relationship between the event and data update to represent the component behavior execution chain; and structurally combine the component attribute binding nodes, state binding nodes, state update nodes, event binding nodes, and event callback nodes to generate the front-end code structure containing the component hierarchical structure, reactive data binding logic, and event interaction logic.

[0117] As an optional implementation, the dynamic code generation module 64 is further specifically used to generate page rendering code based on the component nodes in the front-end code structure to construct a page rendering tree corresponding to the component hierarchy; generate component registration code based on the component nodes and component identification information in the front-end code structure to support component loading, referencing, and dependency management; generate state management code based on the state binding nodes and state update nodes in the front-end code structure to characterize the initialization, update, and synchronization mechanism of the component's internal state; generate component interaction processing code based on the event binding nodes and event callback nodes in the front-end code structure to characterize the event response logic corresponding to the component behavior execution chain; and generate interface call code based on the interface request parameter set in the front-end code structure to realize data reading and writing between the component and external data sources.

[0118] As an optional implementation, the dynamic code generation module 64 is further configured to parse the dependencies between the page rendering code, component interaction processing code, state management code, and interface call code, determine the order of page rendering, event handling, state update, and interface call; rearrange the execution order of the page rendering code, component interaction processing code, state management code, and interface call code in the dynamic code according to the order; and write the rearranged page rendering code, component interaction processing code, state management code, and interface call code into the dynamic code.

[0119] As an optional implementation, the dynamic code generation module 64 is further specifically used to extract business scenario configuration items from the business description information; construct a generation optimization strategy for the page rendering code, component interaction processing code, state management code, and interface call code based on the business scenario configuration items; optimize and adjust the dynamic code according to the generation optimization strategy, and write the optimized and adjusted result into the dynamic code.

[0120] It should be noted that the aforementioned AI-based front-end dynamic code generation device can execute the AI-based front-end dynamic code generation method provided in the embodiments of this application, and has the corresponding functional modules and beneficial effects of the method. Technical details not described in detail in the embodiments of the AI-based front-end dynamic code generation device can be found in the AI-based front-end dynamic code generation method provided in the embodiments of this application.

[0121] Figure 7 This is a schematic diagram of the hardware structure of an electronic device that executes a front-end dynamic code generation method based on artificial intelligence parsing, as provided in the embodiments of this application. Figure 7 As shown, the electronic device 700 includes: One or more processors 710 and memory 720, Figure 7 Take the 710 processor as an example.

[0122] The processor 710 and memory 720 can be connected via a bus or other means. Figure 7 Taking the example of a connection between China and Israel via a bus.

[0123] The memory 720, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the program instructions / modules corresponding to the front-end dynamic code generation method based on artificial intelligence analysis in the embodiments of this application. The processor 710 executes various functional applications and data processing of the server by running the non-volatile software programs, instructions, and modules stored in the memory 720, thereby implementing the front-end dynamic code generation method based on artificial intelligence analysis in the above-described method embodiments.

[0124] The memory 720 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the AI-based front-end dynamic code generation device. Furthermore, the memory 720 may include high-speed random access memory and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory 720 may optionally include memory remotely located relative to the processor 710, and these remote memories can be connected to the AI-based front-end dynamic code generation device via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0125] The one or more modules are stored in the memory 720. When executed by the one or more processors 710, they execute the front-end dynamic code generation method based on artificial intelligence parsing in any of the above method embodiments. For example, they execute the methods described above. Figure 2 Method steps S1 to S5, Figure 3 Method steps S21 to S26, Figure 4 Steps S31 to S35 of the method are implemented. Figure 6 The functions of modules 61-65 in the document.

[0126] The above-described product can perform the methods provided in the embodiments of this application, and has the corresponding functional modules and beneficial effects for performing the methods. Technical details not described in detail in this embodiment can be found in the methods provided in the embodiments of this application.

[0127] This application provides a non-volatile computer-readable storage medium storing computer-executable instructions that are executed by one or more processors, for example... Figure 7 One of the processors 710 can enable the one or more processors to execute the front-end dynamic code generation method based on artificial intelligence parsing in any of the above method embodiments, for example, to execute the above-described Figure 2 Method steps S1 to S5, Figure 3 Method steps S21 to S26, Figure 4 Steps S31 to S35 of the method are implemented. Figure 6 The functions of modules 61-65 in the document.

[0128] This application provides a computer program product, which includes a computer program stored on a non-volatile computer-readable storage medium. The computer program includes program instructions, which, when executed by an electronic device, enable the electronic device to execute the front-end dynamic code generation method based on artificial intelligence parsing in any of the above method embodiments, for example, to execute the above-described method. Figure 2 Method steps S1 to S5, Figure 3 Method steps S21 to S26, Figure 4 Steps S31 to S35 of the method are implemented. Figure 6 The functions of modules 61-65 in the document.

[0129] The device embodiments described above are merely illustrative. 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 modules can be selected to achieve the purpose of this embodiment according to actual needs.

[0130] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented using software and a general-purpose hardware platform, or of course, using hardware. Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc.

[0131] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of this application, and not to limit them; under the concept of this application, the technical features of the above embodiments or different embodiments can also be combined, the steps can be implemented in any order, and there are many other variations of different aspects of this application as described above, which are not provided in detail for the sake of brevity; although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of this application.

Claims

1. A method for generating dynamic front-end code based on artificial intelligence parsing, characterized in that, include: Obtain the front-end page source document containing design information and business description information, and perform artificial intelligence parsing on the front-end page source document to obtain multimodal parsing results that represent page structure, component semantics and interactive behavior; Based on the association between page elements in the multimodal parsing results and the business description, a mapping structure for the attribute parameters, state variables, and interface request parameters of page components is generated. Based on the mapping structure, the preset front-end framework is expanded and an abstract syntax tree is generated to obtain a front-end code structure that includes component hierarchy, reactive data binding logic, and event interaction logic. Based on the aforementioned front-end code structure, runnable dynamic code is automatically generated. The runnable dynamic code includes page rendering code, component registration code, state management code, component interaction processing code, and interface call code. The dynamic code is restructured according to the front-end project structure to obtain a set of front-end project files containing page resources, component resources, state management resources, and interface resources.

2. The front-end dynamic code generation method based on artificial intelligence parsing according to claim 1, characterized in that, The step of performing artificial intelligence parsing on the front-end page source document to obtain multimodal parsing results representing the page structure, component semantics, and interactive behavior includes: The design information is analyzed to identify the spatial position, hierarchical relationship, alignment, and grouping structure of page elements; Based on the design information, candidate component areas for the page elements are determined, and component boundaries, component inclusion relationships, and reusable component units are extracted. Semantic analysis is performed on the business description information, and the business operations, event triggering conditions, and data interaction requirements corresponding to the components are determined based on the semantic analysis results. Based on the correspondence between the page elements and the semantic analysis results, component behavior is inferred, and component interaction logic and data dependencies are generated; The component interaction logic and data dependencies are aggregated in a structured manner to generate the multimodal parsing result, which includes the relationships between page structure, component semantics, and interaction behavior information.

3. The front-end dynamic code generation method based on artificial intelligence parsing according to claim 2, characterized in that, The step of generating a mapping structure for the attribute parameters, state variables, and interface request parameters of page components based on the association between page elements in the multimodal parsing results and the business description includes: The display attributes, input attributes, and configurable attributes corresponding to the page components are extracted from the multimodal parsing results to generate a set of component attribute parameters; The state change triggering conditions and data update logic in the business description information are analyzed to determine the initialization conditions, update conditions and scope of the state variables associated with the component, so as to generate a set of component state variables; Semantic analysis is performed on the business description information to obtain business operation statements, the data interaction requirements are parsed to obtain interface request data, and an interface request parameter set is generated based on the correspondence between the business operation statements and the interface request data, including the interface path, parameter fields, and response fields. The component behavior execution chain is determined by the dependency relationship between the event triggering conditions and the business operation, and the triggering dependency relationship between the event and data update is generated based on the component behavior execution chain. Based on the relationships between the component attribute parameter set, component state variable set, interface request parameter set, and trigger dependency relationship, a component granular logic mapping table is constructed to obtain the correspondence between the display logic, state update logic, and data interaction logic of each component; Based on the component granularity logical mapping table, the mapping structure used for the abstract syntax tree extension generation step is generated.

4. The front-end dynamic code generation method based on artificial intelligence parsing according to claim 3, characterized in that, The step of generating an abstract syntax tree for the preset front-end framework based on the mapping structure to obtain a front-end code structure containing component hierarchy, reactive data binding logic, and event interaction logic includes: Based on the component logic in the mapping structure, component nodes are constructed for the abstract syntax tree, and a component hierarchy relationship is established in the abstract syntax tree; Insert component property binding nodes into the abstract syntax tree based on the component property parameter set to represent the mapping relationship between the component's display properties and input properties; Based on the set of component state variables, state binding nodes and state update nodes are inserted into the abstract syntax tree to characterize the initialization, update and activation mechanism of the component's internal state. Based on the triggering dependency between the event and the data update, insert event binding nodes and event callback nodes into the abstract syntax tree to represent the component behavior execution chain; The component attribute binding nodes, state binding nodes, state update nodes, event binding nodes, and event callback nodes are structurally combined to generate the front-end code structure that includes component hierarchy, reactive data binding logic, and event interaction logic.

5. The front-end dynamic code generation method based on artificial intelligence parsing according to claim 4, characterized in that, The step of automatically generating runnable dynamic code based on the front-end code structure includes: Page rendering code is generated based on the component nodes in the front-end code structure to construct the page rendering tree corresponding to the component hierarchy structure; Component registration code is generated based on the component nodes and component identification information in the front-end code structure to support component loading, referencing, and dependency management; State management code is generated based on the state binding node and the state update node in the front-end code structure to characterize the initialization, update and synchronization mechanism of the component's internal state; Based on the event binding node and the event callback node in the front-end code structure, component interaction processing code is generated to represent the event response logic corresponding to the component behavior execution chain; Based on the set of interface request parameters in the front-end code structure, interface call code is generated to enable data reading and writing between the component and the external data source.

6. The front-end dynamic code generation method based on artificial intelligence parsing according to claim 1, characterized in that, Following the step of automatically generating runnable dynamic code based on the front-end code structure, the method further includes: Analyze the dependencies between the page rendering code, component interaction processing code, state management code, and API call code to determine the order of page rendering, event handling, state updates, and API calls. The execution order of the page rendering code, component interaction processing code, state management code, and interface call code in the dynamic code is rearranged according to the aforementioned sequence. Write the rearranged page rendering code, component interaction processing code, state management code, and interface call code into the dynamic code.

7. The front-end dynamic code generation method based on artificial intelligence parsing according to claim 1, characterized in that, Following the step of automatically generating runnable dynamic code based on the front-end code structure, the method further includes: Extract business scenario configuration items from the business description information; Based on the business scenario configuration items, a generation optimization strategy is constructed for the page rendering code, component interaction processing code, state management code, and interface call code. The dynamic code is optimized and adjusted according to the generation optimization strategy, and the optimized and adjusted result is written into the dynamic code.

8. A front-end dynamic code generation device based on artificial intelligence analysis, characterized in that, include: The source document parsing module is used to obtain the front-end page source document containing design information and business description information, and to perform artificial intelligence parsing on the front-end page source document to obtain multimodal parsing results that represent the page structure, component semantics and interactive behavior; The page mapping structure module is used to generate a mapping structure of attribute parameters, state variables, and interface request parameters of page components based on the association between page elements in the multimodal parsing results and the business description. The front-end code structure module is used to generate an abstract syntax tree for the preset front-end framework based on the mapping structure, so as to obtain a front-end code structure that includes component hierarchy, reactive data binding logic, and event interaction logic. The dynamic code generation module is used to automatically generate runnable dynamic code based on the front-end code structure. The runnable dynamic code includes page rendering code, component registration code, state management code, component interaction processing code, and interface call code. The front-end project file module is used to structurally adjust the dynamic code according to the front-end project structure, resulting in a set of front-end project files containing page resources, component resources, state management resources, and interface resources.

9. An electronic device, characterized in that, include: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, which, when executed by the at least one processor, enables the at least one processor to perform the front-end dynamic code generation method based on artificial intelligence parsing as described in any one of claims 1-7.

10. A non-volatile computer-readable storage medium, characterized in that, The non-volatile computer-readable storage medium stores computer-executable instructions, which, when executed by an electronic device, cause the electronic device to perform the front-end dynamic code generation method based on artificial intelligence parsing as described in any one of claims 1-7.

Images