Evidence-driven front-end code automatic generation method and system, and medium

Abstract

The application provides an evidence-driven front-end code automatic generation method, system and medium, relates to the technical field of code generation, and the method comprises the following steps: accessing a preset development skill through an AI Agent, collecting a multi-source original data set; performing feature dimension reduction; scheduling internal preset inventory code and a component knowledge base by the development skill, performing multi-source data fusion analysis, and determining a demand structured document; suspending the current process, generating front-end code after selective confirmation by a developer, automatically inspecting and comparing in the code generation process, performing interactive correction, stopping interactive correction after receiving a satisfied instruction of the developer, and generating final front-end code. The application solves the technical problem that the prior art can only rely on syntax checking in the compiling stage after code generation, cannot perceive the real DOM structure difference of a page in the browser runtime, and thus leads to layout misplacement and nesting exception.

Description

Technical Field

[0001] This invention relates to the field of code generation technology, specifically to an evidence-driven method, system, and medium for automatic front-end code generation. Background Technology

[0002] As the complexity of front-end application systems continues to increase, page development is gradually shifting from the traditional "manual coding-driven" model to a "model generation-driven" model. Current technologies typically construct front-end pages by generating models from code based on requirement texts or by assembling low-code components. Some solutions also incorporate design draft parsing or component library retrieval mechanisms to improve development efficiency. However, because front-end systems involve multiple sources of information, including semantic requirements, visual design, and runtime rendering structure, single-source-driven generation methods struggle to fully express page structural constraints, leading to discrepancies between the generated results and the actual runtime performance.

[0003] Specifically, existing technologies generate code solely based on requirement text or natural language descriptions. The generated model lacks the ability to constrain visual layout and runtime structure, leading to inconsistencies between the generated front-end code and the actual design draft in terms of DOM structure hierarchy, component nesting relationships, and style layout. This results in the problem of "semantically correct but with an incorrect interface." Furthermore, existing technologies rely solely on syntax checking during the compilation phase after code generation, failing to perceive the differences in the actual DOM structure of the page during browser runtime. Consequently, issues such as layout misalignment and nesting anomalies cannot be detected and corrected in a timely manner during the generation stage. Summary of the Invention

[0004] This application provides an evidence-driven method, system, and medium for automatic front-end code generation, aiming to solve the technical problem that existing technologies rely solely on syntax checking during the compilation stage after code generation, failing to perceive the differences in the actual DOM structure of the page during browser runtime, thus leading to layout misalignment and nesting anomalies.

[0005] The first aspect disclosed in this application provides an evidence-driven method for automatic front-end code generation. The method includes: accessing a pre-defined development skill via an AI Agent to collect a multi-source raw dataset of the front-end page to be built, wherein the multi-source raw dataset includes associated product requirement documents, interface design drafts, and target page inspection data; performing feature dimensionality reduction on the multi-source raw dataset to convert it into a unified structured heterogeneous feature evidence chain; having the development skill schedule internally pre-built code and a component knowledge base, and combining the structured heterogeneous feature evidence chain to perform multi-source data fusion analysis to determine a requirement structured document, wherein the component knowledge base includes a resident memory component hash table; suspending the current process, and after the developer selectively confirms the requirement structured document, having the development skill control the AI ​​Agent to stream-generate front-end code based on the requirement structured document; during code generation, having the development skill automatically inspect and compare the requirement structured document, performing interactive corrections until a satisfactory instruction from the developer is received, at which point the interactive corrections stop, and the final front-end code is generated.

[0006] The second aspect of this application discloses an evidence-driven front-end code automatic generation system. This system is used in the aforementioned evidence-driven front-end code automatic generation method. The system includes: a raw data acquisition module, used to access a preset development skill via an AI Agent to collect multi-source raw datasets of the front-end page to be built, wherein the multi-source raw datasets include associated product requirement documents, interface design drafts, and target page inspection data; an evidence chain construction module, used to perform feature dimensionality reduction on the multi-source raw datasets, converting them into a unified structured heterogeneous feature evidence chain; a requirement structured document determination module, used by the development skill to schedule internally pre-installed code and component knowledge base, and to perform multi-source data fusion analysis in conjunction with the structured heterogeneous feature evidence chain to determine the requirement structured document, wherein the component knowledge base includes a resident memory component hash table; and a front-end code generation module, used to suspend the current process, and after the developer selectively confirms the requirement structured document, the development skill controls the AI... The Agent generates front-end code in a streaming manner based on the structured requirement document. During the code generation process, the development Skill automatically inspects and compares the structured requirement document, performs interactive corrections, and stops interactive corrections after receiving a satisfactory instruction from the developer, thus generating the final front-end code.

[0007] The third aspect disclosed in this application provides a storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the evidence-driven front-end code automatic generation method in the first aspect.

[0008] One or more technical solutions provided in this application have at least the following beneficial effects: By integrating a pre-defined development Skill with an AI Agent, a data collection mechanism is established for the front-end page construction process. This mechanism unifies the collection of related product requirement documents, interface design drafts, and target page inspection data, ensuring that the front-end code generation process simultaneously possesses business requirement information, visual design information, and real-world operational status information. This provides a complete data foundation for subsequent page understanding and code generation, improving the comprehensiveness and accuracy of multi-source information acquisition. Through feature dimensionality reduction processing on multi-source raw datasets, requirement information, visual information, and operational status information from different sources and in different formats are transformed into a unified structured heterogeneous feature evidence chain. This establishes a mapping relationship between heterogeneous data, reducing information redundancy and structural differences during the direct fusion of multi-source data, and improving data utilization efficiency in subsequent requirement analysis, component matching, and code generation. By utilizing the development Skill to schedule internally pre-built code and component knowledge bases, and combining this with the structured heterogeneous feature evidence chain for multi-source data fusion analysis, a structured requirement document containing page functional requirements, component relationships, and layout constraints is generated. This transforms natural language requirements, design information, and operational status information into a structured expression usable for code generation, improving the efficiency of requirement analysis. The goal is to improve the accuracy of understanding and the constraints in the code generation process. Simultaneously, by constructing a component knowledge base containing a hash table of resident in-memory components, rapid retrieval and matching of component information is achieved, improving component reuse efficiency and the speed of requirement parsing and processing. Before code generation, the current process is suspended, and developers selectively confirm the structured requirement document, introducing a manual verification step into the generation process. This avoids invalid code generation due to deviations in requirement parsing, improving the consistency between the generated results and actual development requirements. After confirmation, the development Skill controls the AIAgent to perform streaming code generation based on the structured requirement document, enabling the code generation process to continuously utilize structured requirement constraints, improving the continuity and accuracy of code generation. During the front-end code generation process, the development Skill automatically inspects the generated pages and compares them with the structured requirement document in real time. Interactive corrections are performed based on the detection results, forming a closed-loop processing mechanism of requirement parsing, code generation, runtime verification, and dynamic adjustment. This mechanism can promptly detect deviations in page structure, layout style, and interaction logic, reducing the accumulation of errors caused by one-time generation and improving the consistency between the final front-end code and the target page requirements.

[0009] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0010] Figure 1This is a schematic diagram of the evidence-driven automatic front-end code generation method provided in an embodiment of this application.

[0011] Figure 2 Line graph of experimental data in the evidence-driven front-end code automatic generation method provided in the embodiments of this application.

[0012] Figure 3 This is a schematic diagram of the structure of an evidence-driven front-end code automatic generation system provided in an embodiment of this application.

[0013] Figure labeling: 10 raw data acquisition module, 20 evidence chain construction module, 30 requirement structured document determination module, 40 front-end code generation module. Detailed Implementation

[0014] To further illustrate the technical means and effects of the present invention in achieving its intended purpose, the following detailed description of the specific implementation methods, structures, features, and effects of the present invention, in conjunction with the accompanying drawings and preferred embodiments, is provided below.

[0015] Example 1, as Figure 1 As shown in the embodiments of this application, an evidence-driven method for automatic front-end code generation is provided, the method comprising: By connecting to a preset development skill through an AI Agent, a multi-source raw dataset of the front-end page to be built is collected. The multi-source raw dataset includes related product requirement documents, interface design drafts, and target page inspection data.

[0016] By leveraging an AI Agent to invoke development skills, a data acquisition channel is established for the front-end pages to be built, unifying and aggregating product requirement documents, interface design drafts, and target page inspection data associated with the target page. Specifically, product requirement documents are structured and read using a semantic parsing module, breaking down natural language descriptions into requirement statement units; interface design drafts have their layer structure information and visual element descriptions extracted through a design parsing interface; and target page inspection data is collected from the target runtime environment using browser automation scripts, recording page rendering results and interaction states. After aligning these three types of data along the time and page dimensions, a raw dataset containing semantic, visual, and runtime state information is formed for subsequent unified modeling processing. The multi-source raw dataset refers to a heterogeneous dataset without unified encoding processing, while the inspection data refers to page structure and rendering state records from the actual runtime environment.

[0017] The multi-source original dataset is subjected to feature dimensionality reduction and converted into a unified structured heterogeneous feature evidence chain.

[0018] A unified feature compression and structured mapping process is performed on the multi-source raw datasets. First, semantic units in the requirements document are vectorized while preserving their hierarchical relationships; layer information in the design draft is converted into visual structural descriptions with coordinate constraints; and the page rendering structure in the inspection data is transformed into a nested node representation. These different modalities of data are compressed into low-redundancy feature representations using a unified mapping rule and then associated and bound according to page semantics, visual structure, and runtime structure to form a structured heterogeneous feature evidence chain. Simultaneously, the target component library is parsed offline, transforming the attribute structure, input / output constraints, and dependencies of each component into standardized definition descriptions and writing them into a memory-resident structure using a hash index, forming a persistent memory component hash table. This hash table is used to achieve rapid component location and structure matching, where the evidence chain refers to the set of associated mappings of multimodal structural information.

[0019] The Skill development team uses pre-built code and component knowledge base to perform multi-source data fusion analysis, combined with the structured heterogeneous feature evidence chain, to determine the required structured document. The component knowledge base includes a resident memory component hash table.

[0020] By developing a Skill to invoke a pre-built component knowledge base, the system retrieves and matches existing front-end code, component attribute descriptions, component call relationships, and component dependency topologies. Multi-source information fusion analysis is then performed based on the requirement text slices, visual layer markers, and runtime DOM tree snapshots within the structured heterogeneous feature evidence chain. Specifically, the requirement text slices characterize the functional requirements and business logic constraints of the page to be built; the visual layer markers characterize the page layout structure, visual styles, and component hierarchy; and the runtime DOM tree snapshot characterizes the dynamic component nesting relationships of the target page in the actual runtime environment.

[0021] Furthermore, Skill develops a comprehensive analysis of the component types, component combination methods, page layout structure, and interaction logic required by the target page based on the correlation between multi-source features. The analysis results are then converted into a structured requirement document containing functional requirement descriptions, component reference relationships, page structure constraints, and style control parameters. The resident in-memory component hash table in the component knowledge base is used for fast indexing of component structure definition information. By mapping component features to hash keys, rapid matching between component structure and requirement features is achieved, improving retrieval efficiency during the generation of the structured requirement document.

[0022] The current process is suspended. After the developer selectively confirms the structured requirements document, the development skill controls the AI ​​agent to generate front-end code in a streaming manner based on the structured requirements document. During the code generation process, the development skill automatically inspects and compares the structured requirements document, performs interactive corrections, and stops interactive corrections after receiving a satisfactory instruction from the developer, thus generating the final front-end code.

[0023] After generating the structured requirements document, the development Skill suspends the current code generation task, halting the front-end code generation process. It then provides the developers with the structured requirements document for selective confirmation of the page requirements parsing results, component selection results, and layout constraints. Upon receiving confirmation from the developer, the development Skill resumes the current process and controls the AI ​​Agent to invoke the code generation model. Based on the requirement text slices, component layout framework, and attribute evidence items in the structured requirements document, the model constructs a context and gradually generates the corresponding front-end code through streaming output.

[0024] Furthermore, during the front-end code generation process, the development Skill continuously invokes the automatic inspection capability to perform real-time detection on the currently generated page, obtaining page rendering results and runtime status information. The real-time detection results are then compared and analyzed with the functional descriptions, component structure constraints, and visual attribute requirements in the structured requirements document. When structural, style, or interaction logic deviations are detected between the generated result and the structured requirements document, the development Skill generates corresponding correction instructions and feeds them back to the AI ​​Agent, controlling the AI ​​Agent to perform incremental adjustments to the front-end code based on the deviation type. When the detection results meet the constraints of the structured requirements document, the code generation process continues.

[0025] Through the aforementioned automatic inspection and interactive correction mechanism, the front-end code generation process forms a closed-loop process of requirement analysis, code generation, result verification, and dynamic correction, until the correction stops after receiving a satisfactory instruction from the developer, and the final front-end code that meets the requirement constraints is output.

[0026] Furthermore, feature dimensionality reduction is performed on the multi-source original dataset to convert it into a unified structured heterogeneous feature evidence chain, including: The associated product requirement documents are semantically segmented and a hierarchical tag tree is constructed to obtain requirement text slices; the pixel color boundaries, absolute coordinate axis parameters, and hierarchical component tokens of the interface design drafts are extracted to construct visual layer tags; the rendering tree of the browser automation control script in the target browser runtime is crawled from the target page inspection data to obtain a runtime DOM tree snapshot, wherein the runtime DOM tree snapshot represents the dynamic nesting logic and box model style features of known functional components in the online real environment; the requirement text slices, visual layer tags, and runtime DOM tree snapshots are summarized as the structured heterogeneous feature evidence chain.

[0027] The related product requirement documents undergo text parsing, breaking down continuous natural language content into semantically complete sentence segments, dividing it into the smallest semantic units with independent meaning. Hierarchical relationship analysis is performed on each semantic unit, categorizing them according to a structure of "functional description - sub-functional description - constraints - supplementary explanations," and constructing a tree-like tag structure to express the hierarchical dependencies and logical inclusion relationships between requirements. Based on this tag tree, each node is serialized and output, forming a set of requirement text slices that can be used for subsequent computational processing. Semantic sentence segmentation refers to the process of structurally dividing the text based on semantic boundaries, and the hierarchical tag tree refers to the tree-like structure representation built based on semantic subordinate relationships.

[0028] The interface design draft undergoes image structure analysis. First, the image analysis module performs edge detection on the visual elements in the design draft, extracting pixel boundaries between different color regions to form color boundary descriptions. Next, the layout reference coordinate system in the design draft is analyzed to obtain the absolute position coordinates of each visual element on the canvas, representing its spatial distribution. Finally, the component hierarchy in the design draft is identified, abstracting visual units such as buttons, containers, and text boxes into hierarchical component identifiers, and generating corresponding token sequences to express the nesting relationships between components. These three types of information together constitute the visual layer markers, where pixel color boundaries describe visual segmentation areas, absolute coordinate parameters describe layout positions, and hierarchical component tokens describe structural hierarchy relationships.

[0029] The browser automation control script loads and interacts with the target page, capturing its rendering structure information during page execution. Specifically, during script execution, it obtains the browser's current rendering tree structure and converts it into a DOM tree representation. This structure records the parent-child nesting relationships of nodes on the page and their corresponding style box model information. Furthermore, this DOM structure originates from the real runtime environment, thus reflecting the layout behavior and dynamic nesting logic of components under actual browser rendering conditions, forming a runtime DOM tree snapshot. Here, "runtime" represents the real-time state of the page during browser execution, the DOM tree snapshot represents a static record of the page structure in this state, and the box model style features describe the size and space occupancy of nodes in the layout.

[0030] The requirement text slices, visual layer tags, and runtime DOM tree snapshots generated in the previous steps are uniformly merged. First, the three types of data are aligned in terms of time and structure, enabling them to establish correspondences within the same page's semantic space. A binding mapping is then performed according to the correspondence of "semantic description - visual expression - runtime structure," establishing an association index between textual semantic information, visual layout information, and runtime structural information. Finally, the above association results are encapsulated into a unified data expression form, forming a structured heterogeneous feature evidence chain. This evidence chain records the structural consistency relationships of the same page across different expression dimensions. Here, heterogeneous features refer to information expression forms of different data modalities, and the evidence chain refers to a structured set of correspondences between multi-source information.

[0031] Furthermore, constructing a persistent in-memory component hash table includes: Static syntax analysis is performed on the property documents, input parameter data types, and dependency tree topology of the target component library to generate binary compact hash key-value pairs for each component, which include input parameter whitelists and output parameter format restrictions. The binary compact hash key-value pairs are then loaded into the server's physical memory cache for a long time through a memory-resident daemon process to obtain a memory-resident component hash table.

[0032] The property documents of each component in the target component library are structured and parsed, converting natural language or descriptive fields into a standardized set of attribute descriptions. Simultaneously, the input parameter definitions and data type constraints of each component are extracted to form a computable parameter model. Topological parsing is performed on the dependencies between components, transforming component references and nested call relationships into directed dependency structures to represent the composition and constraint paths between components. Based on this, static syntax analysis is performed on the above three types of information, validating field validity, type consistency, and dependency closure without relying on the runtime environment. The analysis results are compressed and encoded into a fixed-length structured representation. This structured representation is further mapped to binary compact hash key-value pairs, where the hash key uniquely identifies the component's structural characteristics, and the hash value carries an input parameter whitelist and output parameter format restrictions, thus forming a component structure index model that can be used for fast matching. The input parameter whitelist refers to the set of allowed input parameters, and the output parameter format restrictions refer to the type and format boundary definitions of the output structure.

[0033] By deploying a persistent memory-based daemon on the server side, the generated compact binary hash key-value pairs are continuously loaded and managed. Specifically, during system startup or component library updates, the daemon reads the component hash key-value pairs from persistent storage into the physical memory area and organizes them according to a hash index structure, forming a directly addressable data mapping structure in memory. Simultaneously, a memory-based persistence mechanism maintains the persistent state of this structure, preventing data invalidation due to cache eviction or process release, thus ensuring the component structure index remains available throughout runtime. This ultimately forms a persistent memory-based component hash table, which uses a high-speed memory cache to achieve low-latency access and fast matching capabilities for component structure information. Here, "persistent memory" refers to data being retained in physical memory for an extended period without regular garbage collection, and the daemon refers to a continuously running background process used to maintain data loading and state consistency.

[0034] Furthermore, during the code generation process, the development Skill automatically inspects and compares the structured requirements document, performing interactive corrections, including: The development Skill automatically inspects and obtains real-time page snapshots. Based on these real-time page snapshots, it compares them with the structured requirement document to determine if there are any discrepancies. If not, it continues code generation; if so, it performs interactive corrections.

[0035] When the development skill controls the AI ​​agent to execute front-end code streaming based on the structured document of requirements, it simultaneously invokes the automatic inspection function to perform real-time status detection on the page corresponding to the currently generated front-end code. The development skill loads the currently generated front-end code through a browser automation control script and obtains a real-time page snapshot of the target runtime environment. The real-time page snapshot includes the DOM structure information, component hierarchy, page layout parameters, and interaction state information of the currently rendered page, which is used to characterize the page presentation result after the actual execution of the front-end code.

[0036] Furthermore, the development team compares the acquired real-time page snapshot with the structured requirements document. Based on the functional requirements description, component layout framework, visual attribute evidence items, and interaction constraint information contained in the structured requirements document, a consistency analysis is performed on the currently generated page. The structured requirements document serves as a constraint basis in the code generation process, describing the component composition relationships, page structure relationships, and style control requirements that the target page should meet. The real-time page snapshot provides feedback on the page performance status of the currently generated code in the actual runtime environment.

[0037] When there is no discrepancy between the real-time page snapshot and the structured requirements document, the development skill determines that the current generated result meets the requirements constraints and continues to execute the current code generation process to complete the streaming output of the remaining front-end code. When a discrepancy is detected between the real-time page snapshot and the structured requirements document, the development skill generates a corresponding interactive correction instruction based on the type of discrepancy and feeds the interactive correction instruction back to the AI ​​Agent, so that the AI ​​Agent can adjust the generated front-end code based on the corresponding evidence items in the structured requirements document.

[0038] The deviations include at least one of the following: deviations in page component structure, layout position, visual attributes, and interaction logic. Through the aforementioned real-time inspection and interaction correction mechanism, the front-end code generation process no longer relies on a one-time generation result. Instead, it continuously verifies and dynamically adjusts the code based on the structured requirements document, thus forming a closed-loop generation process consisting of requirements evidence constraints, code generation, page verification, and incremental correction. This improves the consistency between the automatically generated front-end code and the target page requirements.

[0039] Furthermore, the AI ​​Agent, controlled by the developed Skill, generates front-end code in a streaming manner based on the structured document of the requirements, including: A semantic encoder is used to calculate the dense vector of requirement text slices in the requirement structured document to obtain the retrieval vector. The retrieval vector is then used to perform a topological comparison in the resident memory component hash table, with the maximum cosine similarity used as the confidence score. When the confidence score is greater than or equal to a preset threshold, the network I / O interface is kept blocked, and the successfully matched component structured definition specification is directly read from the cache as the component layout framework. Absolute coordinate parameters, pixel color boundaries, and hierarchical component tokens are extracted from the visual layer markers. The hierarchical component tokens are mapped and bound to the component layout framework, and attribute evidence items for controlling component styles are generated by combining the absolute coordinate parameters and pixel color boundaries. The component layout framework, the attribute evidence items, and the requirement text slices are summarized and assembled into the current complete context data, which is then input into the code generation model for streaming output of the front-end code.

[0040] Semantic encoding is performed on the text slices of the requirements in the structured requirements document. Each text slice is input into the semantic encoding model for feature mapping, transforming it from a discrete text representation into a continuous vector representation. This vector representation preserves the semantic context and structural dependencies of the text slices, thus forming a high-dimensional dense vector set. This vector set is then uniformly normalized to eliminate scale differences caused by varying text lengths and expression methods. The normalized vectors are then used as retrieval vectors for subsequent matching calculations. Here, the semantic encoder refers to the model structure used to map text semantics into a vector space representation, and the dense vector refers to a high-dimensional vector representation with a continuous numerical distribution that can express semantic similarity.

[0041] The obtained retrieval vectors are used as input and compared item by item in the resident memory component hash table. During the comparison process, not only is the cosine similarity between vectors calculated, but structural consistency is also checked by combining component dependency topology relationships. That is, the nesting relationships between components are matched with the semantic structure expressed by the retrieval vectors, thus forming a composite similarity evaluation result. The result with the highest similarity among all candidate components is selected as the optimal match, and its corresponding cosine similarity value is used as the topology comparison confidence score to measure the reliability of the match between the component and the semantic requirements. Here, topology comparison refers to the matching process that considers both vector similarity and structural dependency relationships, and confidence score refers to the quantification of the credibility of the matching result.

[0042] The obtained confidence score is compared with a preset threshold. When the confidence score is greater than or equal to the threshold, the component matching result is considered to meet the structural consistency requirements. At this time, the system keeps the network input / output interfaces in a blocked state to avoid external data interference or repeated retrieval, and directly reads the structured definition specification of the corresponding component from the physical memory cache. This definition specification contains information such as component structure, parameter constraints, and dependencies, and is used as the basic structural framework of the current page layout, thereby reducing external access latency and ensuring component consistency. Among them, network I / O blocking refers to the control state that restricts external data access, and the component layout framework refers to the page structure skeleton composed of component structure definitions.

[0043] The visual layer markers undergo structured parsing, extracting absolute coordinate parameters, pixel color boundaries, and hierarchical component tokens. Absolute coordinate parameters represent the spatial position of visual elements within the design canvas; pixel color boundaries describe the segmentation between different visual areas; and hierarchical component tokens represent the nesting and hierarchical relationships between components. Hierarchical component tokens are structurally mapped to the component layout framework, establishing a correspondence between visual hierarchy and component structure. Combined with coordinate parameters and color boundaries, a set of attribute expressions describing style constraints is generated. This set reflects the consistency between visual design and component structure. The attribute evidence items refer to the structured description set used to constrain the visual performance of components.

[0044] The component layout framework, attribute evidence items, and requirement text slices are uniformly aggregated and processed to construct a complete contextual data structure. The component layout framework provides the foundation for the page structure, attribute evidence items provide visual and style constraints, and requirement text slices provide semantic and functional constraints. After being merged and aligned within a unified structural space, these three elements form a contextual representation with multi-source constraints, which is then input into the code generation model for processing. Based on this contextual information, the code generation model combines and deduces component structure and style parameters, and progressively generates front-end code expressions according to component dependencies and layout constraints, ultimately generating front-end code in a streaming output manner. Here, contextual data refers to the unified structural representation after the fusion of multi-source information, and streaming output refers to the progressive and continuous output of the generated results.

[0045] In a typical back-end management system page construction scenario, the page to be constructed is the "User Permission Configuration Page." Its input includes 12 requirement text slices, 28 visual layer marker nodes, and one runtime DOM snapshot. First, the requirement slices are semantically encoded to obtain a retrieval vector with dimension d=768. Then, cosine similarity is used for matching calculation, with the expression: Where A is the demand vector and B is the component hash vector. When the calculation result exceeds the threshold of 0.82, the corresponding component layout framework is selected for cache reading. The experimental results corresponding to different confidence levels are shown in Table 1 below.

[0046] Table 1: Experimental Data

[0047] Draw a line chart based on the above data, such as... Figure 2 As shown, the confidence level is negatively correlated with generation time, with a significant inflection point around 0.85, indicating that improving the component cache hit rate can significantly reduce generation latency. In actual implementation, when the confidence level reaches 0.88, the component structure is read from the memory hash table first to complete the page assembly. Subsequently, style corrections are made based on visual coordinate offsets Δx=3px and Δy=5px, thereby ensuring that the consistency error between the DOM structure and the design draft is less than 2%. This embodiment verifies the effectiveness of evidence chain constraint generation in reducing retrieval costs and improving structural consistency.

[0048] Furthermore, it also includes: The standard error output stream of the local compilation engine process is intercepted in real time through kernel hook functions to capture the compilation exception interruption signal and compilation error log; in response to successful local compilation, the rendering front-end code is loaded through the browser to generate a new rendering DOM tree, and the node layout matrix of the new rendering DOM tree is compared with the runtime DOM tree snapshot as a chain of evidence of structured heterogeneous features. When the spatial topological difference between the two is greater than a preset tolerance, a layout assertion failure signal is issued; in response to the compilation exception interruption signal or the layout assertion failure signal, an interruption request is sent, and the current output buffer is blocked; the first item is executed. The process involves: first, backtracking verification; second, performing a second backtracking verification; and third, performing a binary strong match between the unidentified named features and the hash table of the resident memory components within a physically isolated sandbox with no network access. If a match is found and a corresponding component exists in the running DOM tree snapshot, an adversarial verification high-level signal is generated to reject the request for a full scan from the remote source code repository. Finally, the objective attribution result is determined by analyzing the first-level error location vector and the adversarial verification high-level signal.

[0049] During the execution of the local compilation engine process, a hook monitoring mechanism is set up at the operating system kernel layer or at the user-space / kernel-space interaction interface to capture and process the standard error output stream of the compilation process in real time. When the compilation engine generates error information during code building, the error information is output in the form of a standard error output stream. The hook function intercepts and copies this output stream, thereby forming analyzable error log data. Simultaneously, when the compilation process terminates or is interrupted abnormally, the corresponding abnormal interruption signal is captured synchronously, and this signal is timestamped with the error log to ensure consistency between the error information and the execution stage. The compilation error log generated by the above process is used for subsequent attribution analysis. Here, kernel hook functions refer to the interception mechanism used to monitor process system calls or output behavior, the standard error output stream refers to the error information output channel during the compilation process, and the compilation abnormal interruption signal refers to the system-level identifier of abnormal termination of the compilation process.

[0050] When the local compilation process is complete and no error interruption is triggered, the initial front-end code segment is loaded into the browser execution environment for rendering, thereby generating a new runtime page structure, which is then structurally represented as a DOM tree. This newly generated DOM tree is traversed and parsed to extract the hierarchical relationships, position coordinates, and box model size information of each node, and converted into a node layout matrix representation to describe the overall spatial structure distribution of the page. Simultaneously, this layout matrix is ​​structurally aligned with a pre-collected runtime DOM tree snapshot, and the spatial topology differences are compared through node correspondences, including indicators such as node nesting offsets and layout position offsets. When the calculated spatial topology difference exceeds a preset tolerance range, the current rendering result is determined to be inconsistent with the target runtime structure, and a layout assertion failure signal is generated to trigger subsequent correction processes. Here, the node layout matrix refers to the matrix representation of the spatial relationships of the DOM structure, and the spatial topology difference refers to the quantified result of the deviation between the two DOM structures in terms of spatial organization.

[0051] Upon receiving a compilation exception interruption signal or a layout assertion failure signal, the interruption control mechanism is first triggered to freeze the currently ongoing code generation output process. This involves pausing the writing of the primary front-end code segment and sealing the execution state of the output buffer, maintaining it in the complete context state at the time of the exception to prevent subsequent computations from compromising the integrity of the evidence. After the output freeze is complete, the backtracking preparation phase begins. The structured heterogeneous feature evidence chain is used as a unified analysis benchmark, and a dual-path backtracking verification process task distribution mechanism is simultaneously initiated, providing a consistent data foundation for subsequent error localization and structure verification. Specifically, output buffer blocking refers to pausing and solidifying the state of the write operation for generating intermediate results, while the interruption request is a control signal used to terminate the current generation chain and switch to analysis mode.

[0052] The compilation error logs in the standard error output stream undergo structured parsing. First, unidentified named features are extracted from the logs, including non-standard symbolic expressions such as undefined variable identifiers, component reference exception markers, and path resolution failure information. These are then converted into semantic feature vectors to form the basis for error localization. This vector serves as the first-level error localization vector, characterizing potential external dependency issues or missing remote resources. It is also used to construct a retrieval request model for remote source code repositories, supporting subsequent full scans or dependency analysis requests. Here, unidentified named features refer to identifier information that cannot be matched in the local component index, and the first-level error localization vector is a structured semantic representation describing potential external dependency sources.

[0053] In a physically isolated sandbox environment with no internet access, extracted unidentified named features undergo local strong constraint matching. These features are compared at the binary level with the component structure definitions in the resident memory component hash table to determine if the feature originates from an existing component system. If a match is successful, consistency verification is further performed using a runtime DOM tree snapshot. This checks whether the component has a corresponding instance and nesting relationship in the actual page structure, thus confirming its validity in the local runtime environment. When both local matching and runtime verification are successful, a high-level adversarial verification signal is generated to counteract or reject remote full-scan requests, preventing erroneous attribution from propagating to external dependencies. Adversarial verification refers to the process of reverse-verifying remote inference results using local evidence; the high-level signal indicates a logical confirmation that the local verification is successful.

[0054] The first-level error location vector generated by the first backtracking check and the adversarial verification high-level signal generated by the second backtracking check are jointly analyzed and processed. A logical fusion mechanism is used to determine the consistency of the two types of results. When only the first-level error location vector exists without an adversarial verification signal, it indicates that the local component system cannot cover the current error characteristics, and the attribution tends to be external dependencies or remote resource anomalies. When both adversarial verification high-level signals exist, it indicates that the error characteristics have a matching source within the local component system, and the anomaly is more likely due to local runtime structural conflicts or rendering logic inconsistencies. Finally, based on the above judgment logic, an objective attribution result is output to guide subsequent code correction strategies. The objective attribution result refers to the error source classification result obtained based on multi-source evidence consistency analysis.

[0055] Furthermore, by combining the first-level error localization vector and the adversarial verification high-level signal for analysis, the objective attribution result is determined, including: When the adversarial verification high-level signal is not received, the objective attribution result is determined to be external dependency pollution; when the adversarial verification high-level signal is received, it is determined that the remote full scan request is rejected, and the objective attribution result is determined to be a local runtime dynamic rendering conflict; based on the objective attribution result, specific evidence items in the structured heterogeneous feature evidence chain and the resident memory component hash table are dynamically scheduled to incrementally correct the front-end code.

[0056] After completing local isolation matching and consistency verification, if no adversarial verification high-level signal is detected, it indicates that the local component hash table fails to provide effective matching support for the extracted unidentified named features, and no corresponding structure instance is found in the runtime DOM tree snapshot. This suggests that the erroneous feature cannot be explained within the local component system. In this case, the anomaly is classified as an external source factor, and combined with the semantic orientation of the first-level error localization vector, attribution convergence processing is performed. The final objective attribution result is determined to be external dependency pollution. Here, not receiving an adversarial verification signal indicates that the local verification chain has not formed a valid evidence loop, and external dependency pollution refers to an abnormal state where the error source is not covered by the local component system.

[0057] When a high-level signal for adversarial verification is detected, it indicates that the unidentified named feature already has a corresponding match in the resident memory component hash table, and the corresponding component instance and structural nesting relationship can also be found in the runtime DOM tree snapshot, thus proving that the erroneous feature has a local structural source. Based on this, the remote full scan request is deemed invalid, and the external dependency analysis path is rejected. Ultimately, this type of anomaly is attributed to a local runtime dynamic rendering conflict, meaning the problem stems from inconsistencies in the local rendering structure, component nesting relationships, or layout execution process, rather than missing external resources or dependency anomalies. The high-level signal for adversarial verification represents a confirmation that both local matching and runtime verification are successful, while dynamic rendering conflict refers to the inconsistency between the runtime structural expression and the expected layout.

[0058] After identifying the anomaly type and determining the objective attribution result, the development Skill dynamically invokes relevant evidence resources involved in the front-end code generation process according to the processing strategies corresponding to different anomaly sources. Specifically, the structured heterogeneous feature evidence chain provides constraint information related to the target page requirements, visual structure, and runtime status, while the resident memory component hash table provides local component structure, component relationships, and component dependency information to support rapid location and code adjustment in anomaly scenarios.

[0059] Furthermore, the development Skill selects corresponding data evidence items based on the objective attribution results and performs correlation analysis between the selected evidence items and the currently generated front-end code to determine the specific scope of impact causing the code anomaly. For different types of anomaly states, the development Skill invokes corresponding structured evidence information or component knowledge information to perform incremental correction processing on the current front-end code. This incremental correction processing differs from regenerating all the code; instead, it makes local adjustments to the anomaly-related parts while preserving the existing code structure, enabling the correction process to converge quickly based on the existing generated results.

[0060] Furthermore, based on the objective attribution results, specific evidence items in the structured heterogeneous feature evidence chain and the resident memory component hash table are dynamically scheduled to incrementally correct the front-end code, including: When the objective attribution result is external dependency pollution, the component dependency tree topology of the resident memory component hash table is dynamically scheduled, the corresponding component naming features in the compilation error log are extracted, and the dependency items are incrementally written to the configuration information in the front-end code. When the objective attribution result is local runtime dynamic rendering conflict, the runtime DOM tree snapshot and the visual layer marker in the structured heterogeneous feature evidence chain are dynamically scheduled, the dynamic nested logic in the runtime DOM tree snapshot is extracted, and conflict resolution is performed with the absolute coordinate parameters in the visual layer marker. The node position correction code is incrementally injected into the front-end code.

[0061] When the objective attribution result determines that external dependency pollution is involved, the pre-built inter-component dependency tree topology in the resident in-memory component hash table is first invoked. This topology is used to locate the component link relationships related to the current error and identify its upstream dependency paths and reference nodes. Simultaneously, the corresponding component naming features are extracted from the compilation error log and mapped to the dependency topology to determine the specific location of missing or abnormal dependencies. Based on this, the configuration area in the front-end code is partially updated, incrementally writing missing dependencies, version identifiers, or reference paths into the existing configuration structure, rather than performing a complete refactoring, thus forming the code expression after dependency repair. Here, dependency topology refers to the call and reference structure graph between components, and incremental dependency writing refers to the process of locally supplementing missing or abnormal dependencies without changing the original structure.

[0062] When the objective attribution result indicates a dynamic rendering conflict at runtime, the runtime DOM tree snapshot and visual layer markers are retrieved from the structured heterogeneous feature evidence chain, and two types of structural information are extracted for alignment analysis. Specifically, the dynamic nesting logic of nodes is parsed from the DOM tree snapshot, including parent-child hierarchy relationships, node insertion order, and box model layout state; the absolute coordinate parameters of the corresponding components are extracted from the visual layer markers to represent the desired spatial position at the design level. By establishing a mapping relationship between the DOM structure and visual coordinates, conflict resolution is performed, identifying the sources of inconsistency between structural nesting offsets and spatial position deviations, and generating correction strategies accordingly. Based on this, the front-end code is locally adjusted, incrementally injecting node position correction and layout constraint code to gradually approximate the visual design expression at runtime. Conflict resolution refers to the process of aligning and correcting differences in structural expression, while node position correction code refers to the local structural control logic used to adjust DOM layout relationships.

[0063] Example 2, based on the same inventive concept as the evidence-driven automatic front-end code generation method in the foregoing examples, such as... Figure 3 As shown in the figure, this application provides an evidence-driven front-end code automatic generation system, the system comprising: The raw data acquisition module 10 is used to access a preset development skill through the AI ​​Agent to collect multi-source raw datasets of the front-end page to be built. The multi-source raw datasets include related product requirement documents, interface design drafts, and target page inspection data. The evidence chain construction module 20 is used to perform feature dimensionality reduction on the multi-source raw datasets and convert them into a unified structured heterogeneous feature evidence chain. The requirement structured document determination module 30 is used by the development skill to schedule internally pre-set stored code and component knowledge base, and to perform multi-source data fusion analysis in combination with the structured heterogeneous feature evidence chain to determine the requirement structured document. The component knowledge base includes a resident memory component hash table. The front-end code generation module 40 is used to suspend the current process. After the developer selectively confirms the requirement structured document, the development skill controls the AI ​​Agent to generate front-end code in a streaming manner based on the requirement structured document. During the code generation process, the development skill automatically inspects and compares the requirement structured document, performs interactive corrections, and stops interactive corrections after receiving a satisfactory instruction from the developer, generating the final front-end code.

[0064] Furthermore, the evidence chain construction module 20 is used to perform the following operation steps: The associated product requirement documents are semantically segmented and a hierarchical tag tree is constructed to obtain requirement text slices; the pixel color boundaries, absolute coordinate axis parameters, and hierarchical component tokens of the interface design drafts are extracted to construct visual layer tags; the rendering tree of the browser automation control script in the target browser runtime is crawled from the target page inspection data to obtain a runtime DOM tree snapshot, wherein the runtime DOM tree snapshot represents the dynamic nesting logic and box model style features of known functional components in the online real environment; the requirement text slices, visual layer tags, and runtime DOM tree snapshots are summarized as the structured heterogeneous feature evidence chain.

[0065] Furthermore, the requirement structured document determination module 30 is used to perform the following steps: Static syntax analysis is performed on the property documents, input parameter data types, and dependency tree topology of the target component library to generate binary compact hash key-value pairs for each component, which include input parameter whitelists and output parameter format restrictions. The binary compact hash key-value pairs are then loaded into the server's physical memory cache for a long time through a memory-resident daemon process to obtain a memory-resident component hash table.

[0066] Furthermore, the front-end code generation module 40 is used to perform the following operation steps: The development Skill automatically inspects and obtains real-time page snapshots. Based on these real-time page snapshots, it compares them with the structured requirement document to determine if there are any discrepancies. If not, it continues code generation; if so, it performs interactive corrections.

[0067] Furthermore, the front-end code generation module 40 is used to perform the following operation steps: A semantic encoder is used to calculate the dense vector of requirement text slices in the requirement structured document to obtain the retrieval vector. The retrieval vector is then used to perform a topological comparison in the resident memory component hash table, with the maximum cosine similarity used as the confidence score. When the confidence score is greater than or equal to a preset threshold, the network I / O interface is kept blocked, and the successfully matched component structured definition specification is directly read from the cache as the component layout framework. Absolute coordinate parameters, pixel color boundaries, and hierarchical component tokens are extracted from the visual layer markers. The hierarchical component tokens are mapped and bound to the component layout framework, and attribute evidence items for controlling component styles are generated by combining the absolute coordinate parameters and pixel color boundaries. The component layout framework, the attribute evidence items, and the requirement text slices are summarized and assembled into the current complete context data, which is then input into the code generation model for streaming output of the front-end code.

[0068] Furthermore, the front-end code generation module 40 is used to perform the following operation steps: The standard error output stream of the local compilation engine process is intercepted in real time through kernel hook functions to capture compilation exception interruption signals and compilation error logs. In response to successful local compilation, the rendering front-end code is loaded through the browser to generate a new rendering DOM tree. The node layout matrix of the new rendering DOM tree is then compared structurally with the runtime DOM tree snapshot, which serves as a chain of evidence for structured heterogeneous features. If the spatial topological difference between the two exceeds a preset tolerance, a layout assertion failure signal is issued. In response to the compilation exception interruption signal or the layout assertion failure signal, an interruption request is sent, and the current output buffer is blocked. The first backtracking step is then executed. The process involves: verifying and extracting unidentified named features from the compilation error logs of the standard error output stream to generate a first-level error location vector for requesting a full scan from the remote source code repository; performing a second backtracking verification in parallel within a physically isolated sandbox with no network access, matching the unidentified named features against the hash table of the resident memory components using binary strong matching; generating an adversarial verification high-level signal to reject the request for a full scan from the remote source code repository when a match is found and a corresponding component exists in the runtime DOM tree snapshot; and combining the first-level error location vector and the adversarial verification high-level signal for analysis to determine the objective attribution result.

[0069] Furthermore, the front-end code generation module 40 is used to perform the following operation steps: When the adversarial verification high-level signal is not received, the objective attribution result is determined to be external dependency pollution; when the adversarial verification high-level signal is received, it is determined that the remote full scan request is rejected, and the objective attribution result is determined to be a local runtime dynamic rendering conflict; based on the objective attribution result, specific evidence items in the structured heterogeneous feature evidence chain and the resident memory component hash table are dynamically scheduled to incrementally correct the front-end code.

[0070] Furthermore, the front-end code generation module 40 is used to perform the following operation steps: When the objective attribution result is external dependency pollution, the component dependency tree topology of the resident memory component hash table is dynamically scheduled, the corresponding component naming features in the compilation error log are extracted, and the dependency items are incrementally written to the configuration information in the front-end code. When the objective attribution result is local runtime dynamic rendering conflict, the runtime DOM tree snapshot and the visual layer marker in the structured heterogeneous feature evidence chain are dynamically scheduled, the dynamic nested logic in the runtime DOM tree snapshot is extracted, and conflict resolution is performed with the absolute coordinate parameters in the visual layer marker. The node position correction code is incrementally injected into the front-end code.

[0071] Through the foregoing detailed description of the evidence-driven automatic front-end code generation method, those skilled in the art can clearly understand the evidence-driven automatic front-end code generation system in this embodiment. Since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and relevant parts can be referred to the method section.

[0072] Example 3 provides a storage medium on which a computer program is stored, which, when executed by a processor, implements any step of Example 1.

[0073] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention in any way. Although the present invention has been disclosed above with reference to preferred embodiments, it is not intended to limit the present invention. Any person skilled in the art can make some modifications or alterations to the above-disclosed technical content to create equivalent embodiments without departing from the scope of the present invention. Any modifications, equivalent changes, and alterations made to the above embodiments based on the technical essence of the present invention without departing from the scope of the present invention shall still fall within the scope of the present invention.

Claims

1. An evidence-driven method for automatic front-end code generation, characterized in that, The method includes: By accessing the preset development skills through the AI ​​Agent, the multi-source raw dataset of the front-end page to be built is collected. The multi-source raw dataset includes related product requirement documents, interface design drafts and target page inspection data. The multi-source original dataset is subjected to feature dimensionality reduction and converted into a unified structured heterogeneous feature evidence chain; The Skill is developed to schedule internal pre-built code and component knowledge base, and combined with the structured heterogeneous feature evidence chain to perform multi-source data fusion analysis to determine the requirement structured document. The component knowledge base includes a resident memory component hash table. The current process is suspended. After the developer selectively confirms the structured requirements document, the development skill controls the AI ​​agent to generate front-end code in a streaming manner based on the structured requirements document. During the code generation process, the development skill automatically inspects and compares the structured requirements document, performs interactive corrections, and stops interactive corrections after receiving a satisfactory instruction from the developer, thus generating the final front-end code.

2. The evidence-driven automatic front-end code generation method as described in claim 1, characterized in that, Perform feature dimensionality reduction on the multi-source original dataset to convert it into a unified structured heterogeneous feature evidence chain, including: The associated product requirement documents are semantically segmented and a hierarchical tag tree is constructed to obtain requirement text slices; Extract the pixel color boundaries, absolute coordinate axis parameters, and hierarchical component tokens from the interface design draft to construct visual layer markers; The rendering tree of the browser automation control script in the target browser runtime is captured from the target page inspection data to obtain a runtime DOM tree snapshot, wherein the runtime DOM tree snapshot represents the dynamic nesting logic and box model style features of known functional components in a real online environment; The required text slices, visual layer tags, and runtime DOM tree snapshots are summarized as the structured heterogeneous feature evidence chain.

3. The evidence-driven automatic front-end code generation method as described in claim 1, characterized in that, Construct a persistent in-memory component hash table, including: Static syntax analysis is performed on the property documents, input parameter data types, and dependency tree topology of the target component library to generate binary compact hash key-value pairs for each component, which include an input parameter whitelist and output parameter format restrictions. By using a memory-resident daemon process, the binary compact hash key-value pairs are loaded into the server's physical memory cache for an extended period of time, thus obtaining a resident memory component hash table.

4. The evidence-driven automatic front-end code generation method as described in claim 1, characterized in that, During code generation, the development Skill automatically inspects and compares the requirements with the structured document, performing interactive corrections, including: The development Skill automatically inspects and obtains real-time page snapshots. Based on these real-time page snapshots, the code is compared with the structured document of the requirements to determine if there are any discrepancies. If not, code generation continues. If so, then perform interactive correction.

5. The evidence-driven automatic front-end code generation method as described in claim 1, characterized in that, The AI ​​Agent, controlled by the developed Skill, generates front-end code in a streaming manner based on the structured document of the requirements, including: A semantic encoder is used to calculate the dense vector of requirement text slices in the requirement structured document to obtain the retrieval vector; The retrieval vector is used to perform a topological comparison in the hash table of the resident memory component to obtain the maximum cosine similarity as the confidence level of the topological comparison; When the confidence level is greater than or equal to the preset threshold, the network I / O interface is kept in a blocked state, and the matching component structure definition specification is directly read from the cache as the component layout framework. Extract the absolute coordinate parameters, pixel color boundaries, and hierarchical component tokens from the visual layer markers, map and bind the hierarchical component tokens to the component layout framework, and combine the absolute coordinate parameters and pixel color boundaries to generate attribute evidence items for controlling the component style; The component layout framework, attribute evidence items, and requirement text slices are summarized and assembled into the current complete context data, which is then input into the code generation model to stream the front-end code.

6. The evidence-driven automatic front-end code generation method as described in claim 5, characterized in that, The method further includes: By intercepting the standard error output stream of the local compilation engine process in real time through kernel hook functions, compilation exception interruption signals and compilation error logs can be captured. In response to successful local compilation, the browser loads the rendering front-end code to generate a new rendering DOM tree, and performs a structural comparison between the node layout matrix of the new rendering DOM tree and the running DOM tree snapshot, which serves as a chain of evidence for structured heterogeneous features. When the spatial topological difference between the two exceeds the preset tolerance, a layout assertion failure signal is issued. In response to the compilation exception interruption signal or the layout assertion failure signal, an interrupt request is sent and the current output buffer is blocked. Perform the first backtracking check, extract unidentified named features from the compilation error log of the standard error output stream, and generate a first-level error location vector for requesting a full scan from the remote source code repository; The second backtracking verification is executed in parallel. In the physically isolated sandbox where the network is prohibited, the unidentified naming features are matched with the hash table of the resident memory component. When a match is found and the corresponding component exists in the running DOM tree snapshot, a high-level adversarial verification signal is generated to reject the request for a full scan to the remote source code repository. By combining the first-level error localization vector and the adversarial verification high-level signal, the objective attribution result is determined.

7. The evidence-driven automatic front-end code generation method as described in claim 6, characterized in that, By combining the first-level error localization vector and the adversarial verification high-level signal for analysis, the objective attribution result is determined, including: When the adversarial verification high-level signal is not received, the objective attribution result is determined to be external dependency contamination; When the adversarial verification high-level signal is received, it is determined that the remote full scan request is rejected, and the objective attribution result is determined to be a local runtime dynamic rendering conflict. Based on the objective attribution results, specific evidence items in the structured heterogeneous feature evidence chain and the resident memory component hash table are dynamically scheduled to incrementally correct the front-end code.

8. The evidence-driven automatic front-end code generation method as described in claim 7, characterized in that, Based on the objective attribution results, specific evidence items in the structured heterogeneous feature evidence chain and the resident memory component hash table are dynamically scheduled to incrementally correct the front-end code, including: When the objective attribution result is external dependency pollution, the component dependency tree topology relationship of the resident memory component hash table is dynamically scheduled, the corresponding component naming feature in the compilation error log is extracted, and the dependency item is incrementally written to the configuration information in the front-end code. When the objective attribution result is a local runtime dynamic rendering conflict, the running DOM tree snapshot and the visual layer marker in the structured heterogeneous feature evidence chain are dynamically scheduled, the dynamic nested logic in the running DOM tree snapshot is extracted, and conflict resolution is performed with the absolute coordinate parameters in the visual layer marker. Incremental injection of node position correction code is performed in the front-end code.

9. An evidence-driven front-end code automatic generation system, characterized in that, The system is used to implement the evidence-driven automatic front-end code generation method according to any one of claims 1-8, the system comprising: The raw data acquisition module is used to access the preset development skill through the AI ​​Agent and collect multi-source raw datasets of the front-end page to be built. The multi-source raw datasets include related product requirement documents, interface design drafts and target page inspection data. The evidence chain construction module is used to perform feature dimensionality reduction on the multi-source original dataset and convert it into a unified structured heterogeneous feature evidence chain; The requirement structured document determination module is used to schedule internally pre-built code and component knowledge base by the development Skill, and perform multi-source data fusion analysis in combination with the structured heterogeneous feature evidence chain to determine the requirement structured document. The component knowledge base includes a resident memory component hash table. The front-end code generation module is used to suspend the current process. After the developer selectively confirms the structured requirement document, the development skill controls the AI ​​Agent to generate front-end code in a streaming manner based on the structured requirement document. During the code generation process, the development skill automatically inspects and compares the structured requirement document, performs interactive corrections, and stops interactive corrections after receiving a satisfactory instruction from the developer, thus generating the final front-end code.

10. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the evidence-driven front-end code automatic generation method according to any one of claims 1 to 8.

Images