AI-driven front-end code multi-modal review and refactoring method and system

Abstract

This invention provides an AI-driven multimodal review and refactoring method and system for front-end code, relating to the field of artificial intelligence technology. The method includes: preprocessing the front-end code to be processed to obtain preprocessed code and a preprocessing report; constructing a multimodal AI deep review model to obtain a code problem list and a refactoring strategy set; performing multimodal fusion calculation on the code problem list and the refactoring strategy set to generate corresponding basic refactoring instructions; constructing a code dependency detection algorithm to capture code changes and dependencies during the execution of basic refactoring instructions, thereby obtaining code dependency detection results; if the code dependency detection results are abnormal, refactoring and correcting the basic refactoring instructions to generate optimal refactoring instructions; and using a two-stage collaborative optimization algorithm to collaboratively optimize the review and refactoring execution process, thereby evaluating execution efficiency and ensuring that the front-end code review and refactoring implementation meets design requirements and improves efficiency.

Description

Technical Field

[0001] This invention relates to the field of artificial intelligence technology, specifically to an AI-driven method and system for multimodal review and refactoring of front-end code. Background Technology

[0002] With the rapid iteration of front-end technologies, the complexity of front-end code is constantly increasing. The diversification of various front-end frameworks and development standards has led to many limitations in traditional front-end code review. Traditional review methods rely heavily on manual rule matching, which makes it difficult to take into account the code's usage scenarios. Furthermore, manual review is inefficient, highly subjective, and inconsistent, and has a high rate of missed detections in complex scenarios. Currently, automated review AI tools have limited functionality and cannot comprehensively cover multiple aspects such as code quality, performance, and security. In particular, they are weak in handling cross-file dependency issues; they lack a deep understanding of code semantics, making it difficult to provide targeted refactoring suggestions, and their refactoring solutions are limited. Therefore, we now provide an AI-driven method and system for multimodal review and refactoring of front-end code. Summary of the Invention

[0003] To address the aforementioned technical problems, the present invention aims to provide an AI-driven method and system for multimodal review and refactoring of front-end code.

[0004] To achieve the above objectives, the present invention provides the following technical solution: an AI-driven multimodal review and refactoring method for front-end code, the method comprising: Based on a lightweight rule engine, the front-end code to be processed is preprocessed to obtain preprocessed code and a preprocessing report; Construct a multimodal AI deep review model; based on the preprocessed code, preprocessed report, and multimodal AI deep review model, obtain a list of code issues and a set of refactoring strategies for the front-end code to be processed; The code problem list and refactoring strategy set are processed using multimodal fusion to generate corresponding basic refactoring instructions; A code dependency detection algorithm is constructed to capture code changes and dependencies during the execution of basic refactoring instructions, thereby obtaining the corresponding code dependency detection results. If the code dependency detection results are abnormal, the basic refactoring instructions are refactored and corrected to generate the optimal refactoring instructions; otherwise, the basic refactoring instructions are continued to be executed. Based on a two-stage collaborative optimization algorithm and basic or optimal refactoring instructions, the review and refactoring execution process is collaboratively optimized to evaluate execution efficiency and ensure that front-end code review and refactoring meet design requirements and improve efficiency.

[0005] Furthermore, based on the lightweight rule engine, the preprocessing process for the front-end code to be processed includes: Perform syntax validation, format standardization, comment parsing, and static dependency resolution on the front-end code, and generate corresponding preprocessed code and preprocessing reports; The lightweight rule engine has a built-in configurable front-end development specification rule library that supports lightweight preprocessing of various types of front-end code.

[0006] Furthermore, the process of building a multimodal AI deep review model includes: A multimodal input architecture is constructed, consisting of text encoding branch, code structure branch, and visual rendering branch, and code text features, structural topology features, and visual rendering features are extracted respectively. Based on artificial intelligence technology, and according to the code text features, structural topology features, and visual rendering features, a multimodal AI deep review model is constructed.

[0007] Furthermore, the process of performing multimodal fusion calculation on the code issue list and refactoring strategy set includes: The code problem list is structured and encoded in a modal domain, mapping the existing code problems to a problem topology encoding structure; The set of refactoring strategies is executed by domain rule-based encoding, and the refactoring strategies for the corresponding code problems are mapped to strategy execution encoding structures. The problem topology encoding structure and strategy execution encoding structure are subjected to topology node matching, constraint relationship propagation and effective path extraction to obtain an executable solution path; The executable solution path is serialized and parsed to generate the corresponding basic reconstruction instructions.

[0008] Furthermore, the process of constructing a code dependency detection algorithm to capture code changes and dependencies during the execution of basic refactoring instructions, and then obtaining the corresponding code dependency detection results, includes: Based on the basic refactoring instructions, locate the code nodes, DOM nodes, style nodes, and logic function nodes to be modified, and record them as refactoring change anchor points to form a set of refactoring change anchor points; Starting with the refactoring change anchor points in the refactoring change anchor point set, and tracing back to the caller and the callee based on the code execution relationship, a four-layer dynamic dependency chain is constructed, thereby forming the corresponding global dependency graph. The global dependency graph is labeled with risk features to generate a dependency risk list; and the dependency risk list is isolated by dependency security domains to obtain the corresponding dependency security domain boundaries. Based on the dependency risk list and the dependency security domain boundaries, the code dependency detection results are formed.

[0009] Furthermore, the process of refactoring and modifying the basic refactoring instructions to generate the optimal refactoring instructions includes: The dependency risk list and global dependency graph in the corresponding code dependency detection results are associated and mapped one by one to locate the dependency breakpoint, conflict dependency point and circular dependency point corresponding to each basic refactoring instruction, forming an instruction risk association index. Based on the instruction risk association index, a three-level closed-loop correction is performed on the basic refactoring instructions; Using the boundary of the security domain as the constraint boundary, the basic reconstruction instructions after the three-level closed-loop correction are topologically rearranged to form the corresponding standardized instruction sequence, and the validity is checked to obtain the optimal reconstruction instructions.

[0010] Furthermore, the process of constructing the two-stage collaborative optimization algorithm includes: Phase 1: Construct review efficiency indicators based on the review time and the number of code issues detected by the multimodal AI deep review model, and obtain the corresponding review execution efficiency; The second stage: Based on the execution time and reconstruction success rate of the corresponding basic reconstruction instructions or optimal reconstruction instructions, construct reconstruction efficiency indicators to obtain the corresponding reconstruction execution efficiency; The review execution efficiency and reconstruction execution efficiency are processed to obtain the corresponding execution balance factor, and the multimodal AI deep review model is optimized based on the execution balance factor.

[0011] A second aspect of the present invention also provides an AI-driven front-end code multimodal review and refactoring system, including: a preprocessing module, a multimodal review module, a multimodal fusion calculation module, a conflict detection optimization module, and a two-stage optimization module; The preprocessing module is used to preprocess the front-end code to be processed based on the lightweight rule engine, thereby obtaining preprocessed code and preprocessing report; The multimodal review module is used to construct a multimodal AI deep review model; based on the preprocessed code, preprocessed report, and multimodal AI deep review model, a list of code issues and a set of refactoring strategies for the front-end code to be processed are obtained. The multimodal fusion solution module is used to perform multimodal fusion solution on the code problem list and the refactoring strategy set to generate corresponding basic refactoring instructions; The conflict detection and optimization module is used to build a code dependency detection algorithm, capture code changes and dependencies during the execution of basic refactoring instructions, and then obtain the corresponding code dependency detection results. Based on the code dependency detection results, if there are code dependency anomalies, the basic refactoring instructions are refactored and corrected to generate the optimal refactoring instructions; otherwise, the basic refactoring instructions continue to be executed. The two-stage optimization module, based on a two-stage collaborative optimization algorithm and basic or optimal refactoring instructions, collaboratively optimizes the review and refactoring execution process, thereby evaluating execution efficiency and ensuring that front-end code review and refactoring meet design requirements and improve efficiency.

[0012] Compared with existing technologies, the beneficial effects of this invention are as follows: It achieves efficient preprocessing of front-end code through a lightweight rule engine, providing a standardized foundation for subsequent review and refactoring, and effectively reducing the complexity of subsequent processing. Leveraging a multimodal AI deep review model, it achieves comprehensive extraction and analysis of multi-dimensional code features, improving the comprehensiveness and accuracy of code problem detection and avoiding the limitations of traditional review methods. It generates basic refactoring instructions through multimodal fusion calculation, and dynamically captures code changes and dependencies using a code dependency detection algorithm, making targeted corrections to the refactoring instructions to ensure the safety and rationality of the refactoring process and reduce the occurrence of code conflicts and dependency anomalies after refactoring. Based on a two-stage collaborative optimization algorithm, it achieves collaborative optimization of the review and refactoring processes, comprehensively improving the overall efficiency of review and refactoring, ensuring that the results of front-end code review and refactoring meet design requirements, providing efficient and reliable technical support for front-end development, and reducing development costs and maintenance difficulty. Attached Figure Description

[0013] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this invention. For those skilled in the art, other drawings can be obtained based on these drawings.

[0014] Figure 1 This is a step-by-step diagram illustrating an AI-driven multimodal review and refactoring method for front-end code.

[0015] Figure 2 This is a schematic diagram of the modules of an AI-driven front-end code multimodal review and refactoring system.

[0016] Figure 3 A schematic diagram for constructing a multimodal AI deep review model.

[0017] Figure 4 This is a schematic diagram illustrating the steps of multimodal fusion calculation.

[0018] Figure 5 This is a schematic diagram illustrating the steps of a code dependency detection algorithm. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be described in detail below. Obviously, the described embodiments are merely some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other implementation methods obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0020] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0021] like Figure 1 As shown, the AI-driven multimodal review and refactoring method for front-end code is characterized by comprising: Step S1: Based on the lightweight rule engine, preprocess the front-end code to be processed to obtain preprocessed code and preprocessing report.

[0022] It should be noted that the lightweight rule engine completes the basic code standardization process, removes invalid information, and verifies basic syntax, providing clean and standard code data and compliance reference reports for the subsequent multimodal AI deep review model, thereby reducing the processing pressure and the probability of misjudgment of the multimodal AI deep review model.

[0023] In this embodiment, the front-end code to be processed covers mainstream front-end development languages ​​and frameworks, including but not limited to HTML, CSS, JavaScript, Vue, React, Angular and other types of code; the lightweight rule engine is a lightweight, low-computing-power rule execution component with a built-in configurable front-end development specification rule library, which supports custom enabling / disabling preprocessing items such as syntax validation, format standardization, and redundancy removal, and is adapted to the development specifications of different projects.

[0024] To further explain, preprocessed code refers to standard front-end code that has undergone normalization, noise reduction, and syntax validation; a preprocessing report is a structured document that includes a list of syntax errors, non-standard formatting items, locations of redundant code, and comment parsing results, serving as auxiliary input data for subsequent multimodal review.

[0025] In this embodiment, the process of preprocessing the front-end code to be processed based on the lightweight rule engine includes: Step S100: Perform syntax validation on the front-end code. The lightweight rule engine calls the built-in syntax parser to scan the HTML tag closure, CSS attribute validity, and JavaScript syntax correctness line by line, generating a syntax validation sub-report.

[0026] Step S101: Perform format standardization processing. Based on the general front-end industry standards or project-defined standards, unify code indentation, line breaks, naming formats, quotation mark styles, and comment formats, and output the corresponding standardized code.

[0027] Step S102: Extract single-line comments, multi-line comments, and documentation comments from the front-end code, parse the code function, parameter description, return value, and modification record corresponding to the comments, and generate a comment parsing sub-report.

[0028] Step S103: Scan the file imports, component references, style imports, script dependencies, and DOM node relationships in the front-end code, build a static dependency relationship chain, and generate a static dependency sub-report.

[0029] Step S104: Combine the syntax verification sub-report, annotation parsing sub-report, and static dependency sub-report into a complete preprocessing report; mark the standardized code after the above preprocessing as preprocessed code.

[0030] As an example, a section of Vue frontend code has an issue (the specific code is not shown). The lightweight rule engine scans the code line by line using a syntax parser, and the results show: HTML tag anomalies. The following issues were identified: unclosed tags; CSS property anomalies (width:300 lacks a valid unit); JS syntax risks (loadData() is undefined, posing a call exception risk). A syntax validation sub-report was generated based on these results. Standardized formatting was performed according to front-end development specifications: indentation was standardized to 2 spaces; tag alignment and script line breaks were standardized; CSS properties were written on separate lines with semicolons at the end; strings were enclosed in single quotes. The processed code was output as standardized code. Single-line comments, multi-line comments, and documentation comments were scanned and parsed. This example code lacked valid business comments, parameter descriptions, and modification records, thus generating a comment parsing sub-report. File imports, component references, style imports, script dependencies, and DOM node relationships were scanned: no external script dependencies; no third-party component imports; no external style file imports; no cross-file dependencies. A static dependency chain was constructed based on this, generating a static dependency sub-report. The syntax validation sub-report, comment parsing sub-report, and static dependency sub-report were integrated to form a complete preprocessing report. The standardized code after syntax validation, format standardization, comment parsing, and static dependency parsing was marked as preprocessed code; the new preprocessed code was not displayed.

[0031] Step S2: Construct a multimodal AI deep review model; based on the preprocessed code, preprocessed report, and multimodal AI deep review model, obtain a list of code issues and a set of refactoring strategies for the front-end code to be processed.

[0032] It should be noted that by building a multimodal input architecture with text encoding branch, code structure branch, and visual rendering branch, code text features, structural topology features, and visual rendering features are extracted respectively. The preprocessed code is then subjected to in-depth defect detection, standardization checks, performance analysis, and rendering effect evaluation, and a structured problem list and corresponding refactoring strategy set are output.

[0033] like Figure 3 The diagram shown illustrates the construction of a multimodal AI deep review model according to the present invention. In this embodiment, the multimodal AI deep review model is a multi-branch deep learning model composed of NLP (Natural Language Processing), GNN (Graph Neural Network), and computer vision, which respectively process three types of features: code text semantics, code topology, and page rendering effect, to achieve full-dimensional code quality assessment. The code problem list includes syntax defects, logical vulnerabilities, performance bottlenecks, maintainability issues, rendering anomalies, and security risks. The refactoring strategy set refers to the corresponding repair solutions, optimization solutions, structural adjustment solutions, and performance improvement solutions for each existing code problem.

[0034] In step S2, the process of constructing a multimodal AI deep review model includes: Step S210: Build a text encoding branch. Based on the code pre-training model CodeBERT or CodeT5 in NLP technology, perform text encoding on the preprocessed code. The CodeBERT or CodeT5 model parses the preprocessed code line by line and token by token to extract code text features, including but not limited to semantic features, variable features, function features, logical features, and annotation matching features.

[0035] Step S211: Build code structure branches, convert the preprocessed code into an abstract syntax tree (AST) and dependency topology graph based on GNN, and extract structural topology features, including but not limited to module relationships, call relationships, hierarchical relationships, loop relationships and coupling relationships.

[0036] Step S212: Build a visual rendering branch, call the headless browser to render the preprocessing code, capture the rendered screen, parse the layout structure, and extract visual rendering features based on the computer vision model, including but not limited to layout misalignment, style abnormality, element overlap, visual occlusion, and layout disorder features.

[0037] It should be noted that the headless browser is a browser kernel program that runs silently in the background. It can fully load, parse, and render front-end code such as HTML, CSS, and JavaScript. It has the same page rendering engine and DOM parsing capabilities as a regular browser. It can execute front-end code logic, load resources, build the DOM tree, and render the layout to restore the real display effect of the page without displaying a visual window. It automatically extracts layout data such as page element coordinates, size, layer, margin, and alignment to detect style abnormalities, misalignment, overlap, overflow, and other issues. It supports image cropping of the rendered page to provide image input for computer vision models, realizes multimodal visual feature extraction, and can simulate rendering of different browsers, resolutions, and device types to detect cross-platform or cross-browser compatibility issues of the front-end code. It can also collect performance data such as page rendering time, resource loading time, and drawing time for front-end code performance review.

[0038] To further explain, the feature extraction process in the branches can employ corresponding feature extraction techniques, which will not be described in this application.

[0039] Step S213: Combine and fuse the three types of features output from the text encoding branch, code structure branch, and visual rendering branch. Train a classifier and regressor using several sets of data to build a multimodal AI deep review model and output the problem type, problem location, severity, and scope of impact.

[0040] In step S2, the process of obtaining the corresponding code issue list and refactoring strategy set based on the multimodal AI deep review model includes: Step S220: Input the preprocessed code corresponding to the front-end code to be processed into the text encoding branch and the code structure branch, input the code rendering result into the visual rendering branch, complete the multimodal feature input, and input the corresponding preprocessing report as feature enhancement information into the multimodal AI deep review model.

[0041] Step S221: The multimodal AI deep review model performs full-dimensional detection to identify syntax errors, logical vulnerabilities, memory leaks, rendering anomalies, security vulnerabilities, excessive coupling, and redundant logic in the preprocessed code corresponding to the front-end code to be processed.

[0042] Step S222: Classify and organize the detection results according to severity level, problem module, and code location to generate a code problem list. Each code problem includes, but is not limited to, problem ID, location, type, description, and severity level.

[0043] Step S223: For each code issue, generate a one-to-one refactoring strategy set. Each strategy includes, but is not limited to, strategy ID, corresponding issue ID, execution goal, operation steps, expected effect, and risk warning.

[0044] Step S224: Perform a consistency check on the code issue list and the refactoring strategy set to ensure that no issues are missed and no invalid strategies are implemented, and output the final review results.

[0045] As an example, the preprocessed code (not shown above) is used to perform text encoding and token parsing using the CodeBERT pre-trained model, extracting code text features line by line: parsing the definition, assignment, and reference features of the variable `name`; parsing the execution logic features of the lifecycle function `mounted`; identifying the call features of the undefined function `loadData()`; and outputting the corresponding code text feature vector. Based on a graph neural network, the preprocessed code is converted into an Abstract Syntax Tree (AST) and a dependency topology graph, extracting structural topology features: template layer. <template>With script layer <script>数据绑定关系；函数调用链：mounted→loadData()；组件内部无循环依赖、无跨模块耦合；输出对应的代码结构拓扑特征向量。调用无头浏览器后台静默渲染预处理代码，采用PC端1920×1080分辨率显示效果：完整加载HTML、CSS、JS，构建DOM树与渲染布局；自动提取页面元素尺寸、坐标、层级、边距数据；检测样式布局、元素显示、渲染耗时等视觉特征；截取渲染页面图像，输入计算机视觉模型进行异常检测。输出对应的视觉渲染特征向量。根据多模态AI深度审查模型执行检测，识别出逻辑漏洞，即函数loadData()未定义，存在调用崩溃风险；可维护性问题，即无业务注释、无参数说明、代码可读性差；性能隐患，即无数据加载异常处理、无请求超时控制；渲染风险，即卡片无最小宽度适配，存在溢出风险。

[0046] 按位置、类型、严重等级分类整理，生成结构化代码问题清单：针对每条问题生成一对一修复、优化方案，形成重构策略集：步骤S3：对代码问题清单以及重构策略集进行多模态融合解算，生成对应的基础重构指令。

[0047] 需要说明的是，通过对代码问题清单以及重构策略集进行模态域结构化编码、执行域规则化编码，基于此进行拓扑匹配、路径提取、序列化解析，将非结构化的代码问题与重构策略转换为机器可执行的基础重构指令，实现从分析到执行的衔接。

[0048] 在本实施例中，所述多模态融合解算的过程是指将文本形态的问题、策略转换为拓扑编码与执行编码的计算过程，确保问题与策略精准匹配、执行路径无冲突；基础重构指令为标准化、可顺序执行的操作指令，包括代码定位、修改内容、执行顺序以及依赖约束等。

[0049] 进一步说明，解算过程保证指令的唯一性、可执行性、无冲突性，避免因策略混乱导致重构失败，为后续依赖检测与指令优化提供标准输入。

[0050] 如图4所示，是本发明多模态融合解算的步骤示意图，在步骤S3中，多模态融合解算生成基础重构指令的具体步骤如下：步骤S310：将代码问题清单进行模态域结构化编码，把每个代码问题映射为问题位置、问题类型、影响节点以及严重等级的问题拓扑编码结构，形成问题拓扑图。

[0051] 步骤S311：将重构策略集进行执行域规则化编码，把每个重构策略映射为包含操作对象、执行动作、修改内容以及约束条件的策略执行编码结构，形成策略执行库。

[0052] 步骤S312：执行拓扑节点匹配，将问题拓扑编码结构与策略执行编码结构进行一一匹配，建立代码问题-重构策略精准对应关系。

[0053] 步骤S313：执行约束关系传导，将代码问题的依赖约束、影响范围传导至对应重构策略，标记重构策略执行的前置条件、禁止条件以及关联修改要求。

[0054] 步骤S314：执行有效路径提取，剔除冲突策略、无效策略、循环策略，形成可执行解算路径。

[0055] 步骤S315：对可执行解算路径进行序列化解析，按代码的执行顺序、依赖关系排序，将每一步操作转换为标准化指令格式，生成对应的基础重构指令。

[0056] 步骤S316：对基础重构指令进行完整性校验，确保代码问题清单和重构策略集的能够一一对应，输出最终的基础重构指令。

[0057] 一个示例性的例子，将每条代码问题映射为问题拓扑编码，示例编码如下：P001：{位置:script-8,类型：逻辑漏洞，影响节点:mounted,等级：致命}P002：{位置：全文件，类型：可维护性，影响节点：组件整体，等级：一般}P003：{位置:script-7~8,类型：性能风险，影响节点:loadData,等级：严重}P004：{位置:style-3,类型：渲染异常，影响节点:card样式，等级：提示}；将每条重构策略映射为策略执行编码，示例编码如下：C001：{对象:loadData函数，动作：定义实现，内容：异步请求+赋值，约束：必须在mounted内执行}C002：{对象：组件，动作：添加注释，内容：功能说明+参数说明，约束：无冲突}C003：{对象:loadData函数，动作：异常捕获，内容:try / catch,约束：与C001同节点执行}C004：{对象:card样式，动作：响应式修复，内容:width:100%+min-width,约束：独立执行}；将问题拓扑编码与策略执行编码按影响节点进行一一匹配，建立唯一对应关系：P001↔C001；P002↔C002；P003↔C003；P004↔C004；将问题的依赖约束、影响范围、严重等级传导至对应策略，标记前置条件、关联要求：P001（致命）→C001：必须优先执行；P003（严重）→C003：必须与C001绑定执行，作为同一修改单元；P004（提示）→C004：可独立执行、无依赖；P002（一般）→C002：可在代码稳定后添加。

[0058] 传导后策略约束：C001、C003为绑定执行单元；C004为独立单元；C002为后置单元。

[0059] 遍历所有策略，检测冲突、循环、无效逻辑，提取唯一可执行解算路径：C001+C003→C004→C002。

[0060] 按解算路径排序，将每一步操作转换为机器可执行的标准化指令，包含：定位、修改、顺序、依赖。

[0061] 输出基础重构指令如下：指令1：定位script第8行，定义loadData异步函数，实现数据请求与赋值；指令2：定位loadData函数体，添加try / catch异常捕获处理；指令3：定位style第3行，将.card修改为width:100%、增加min-width适配；指令4：在组件顶部添加文档注释，说明组件功能、参数与渲染逻辑。

[0062] 对基础重构指令执行校验：4个问题↔4条指令，一一对应、无遗漏；指令格式标准、定位清晰、可直接执行；执行顺序合理、依赖约束正确、无冲突；严重等级高的问题优先处理，符合安全规范。

[0063] 步骤S4：构建代码依赖检测算法，捕捉执行基础重构指令过程中的代码变更与依赖关系，进而获得对应的代码依赖检测结果；若所述代码依赖检测结果存在异常，则对基础重构指令进行重构修正，生成最优重构指令；反之，继续执行基础重构指令。

[0064] 需要说明的是，通过代码依赖检测算法构建全域依赖图谱，识别指令执行可能引发的依赖断裂、依赖冲突等问题，对有风险的基础重构指令进行三级闭环修正与时序重排，生成安全稳定的最优重构指令，避免重构引发新故障。

[0065] 在本实施例中，所述代码依赖检测算法是通过动态追踪代码节点关联关系的算法，覆盖代码节点、DOM节点、样式节点、逻辑函数节点；其中，依赖异常包括但不限于依赖断裂、冲突依赖、循环依赖、安全域越界；最优重构指令是指经过依赖安全校验、风险修正、时序优化的最终执行指令。

[0066] 进一步说明，依赖检测与指令修正保证重构过程的稳定性、安全性，实现代码重构不会产生新的代码问题，是前端代码自动化重构的关键保障步骤。

[0067] 如图5所示，是本发明代码依赖检测算法的步骤示意图，在步骤S4中，构建代码依赖检测算法并获取依赖检测结果的步骤如下：步骤S410：基于基础重构指令，定位待修改的代码节点、DOM节点、样式节点、逻辑函数节点，将所有节点统一记为重构变更锚点，并形成重构变更锚点集。

[0068] 步骤S411：以重构变更锚点为起点，按代码执行关系向上溯源调用方以及向下溯源被调用方，依次追踪逻辑依赖、结构依赖、样式依赖、渲染依赖，构建四层动态依赖链，包括：1、逻辑依赖链，用于表示函数、变量等之间的调用关系；2、结构依赖链，用于表示组件嵌套、父子节点等之间的导入导出关系；3、样式依赖链，用于表示类名继承、选择器覆盖等之间的复用关系；4、渲染依赖链，用于表示DOM布局、视图更新等之间的事件绑定关联。

[0069] 步骤S412：将四层动态依赖链进行整合，形成对应的全域依赖图谱，展示所有变更锚点的关联节点与传导关系。

[0070] 步骤S413：对全域依赖图谱进行风险特征标记，包括依赖断裂、循环依赖以及冲突依赖，进而生成依赖风险清单。

[0071] 步骤S414：按模块、功能、组件范围对风险进行依赖安全域隔离，确定允许修改边界与禁止修改边界，形成依赖安全域边界。

[0072] 步骤S415：将依赖风险清单与依赖安全域边界进行组合，形成代码依赖检测结果，明确是否存在依赖异常以及异常位置。

[0073] 在步骤S4中，对基础重构指令进行修正并生成最优重构指令的步骤如下：步骤S420：将对应代码依赖检测结果中的依赖风险清单、全域依赖图谱进行一一关联映射，定位每条基础重构指令对应的依赖断裂点、冲突依赖点、循环依赖点，形成指令风险关联索引。

[0074] 步骤S421：根据指令风险关联索引，对基础重构指令执行三级闭环修正：1、依赖断裂修正：包括但不限于修复依赖断裂、补充缺失依赖以及调整引用路径等；2、循环依赖级修正：包括但不限于消除循环依赖、重构函数逻辑、抽离公共模块以及打破循环引用等；3、冲突依赖修正：包括但不限于解除冲突依赖、修改命名、调整执行顺序以及拆分耦合模块等。

[0075] 步骤S422：以依赖安全域边界为约束，对三级闭环修正后的基础重构指令进行拓扑时序重排，形成标准化指令序列。

[0076] 步骤S423：对标准化指令序列进行有效性校验，校验无依赖异常、无越界修改、无执行冲突后，生成最优重构指令。

[0077] 一个示例性的例子，根据基础重构指令，定位所有待修改节点，形成重构变更锚点集：锚点A：script中loadData函数定义点（逻辑函数节点）；锚点B：loadData函数体内部（逻辑函数节点）；锚点C：style中.card样式节点（样式节点）；锚点D：组件顶部注释区域（代码节点）。

[0078] 以各变更锚点为起点，向上或向下溯源依赖关系，构建四层依赖链：逻辑依赖链：mounted生命周期→调用loadData函数→赋值name变量→驱动视图更新；结构依赖链：当前单文件组件内部：<template>模板→<script>脚本→数据双向绑定；样式依赖链：.card类选择器→作用于<template>中<divclass="card">DOM节点；渲染依赖链：name变量更新→触发DOM重新渲染→卡片布局展示数据。

[0079] 将四层动态依赖链整合，形成全域依赖图谱：变更锚点A、B→影响逻辑依赖链全线；变更锚点C→影响样式依赖链+渲染依赖链；变更锚点D→无依赖传导，仅为文档增强。

[0080] 遍历全域依赖图谱，识别并标记风险特征，生成依赖风险清单：依赖断裂风险：指令1（定义loadData）若仅声明函数、未补全返回与赋值，将导致name变量无法更新，产生数据依赖断裂；无循环依赖：组件内部无双向引用、无循环调用；无冲突依赖：样式类名唯一、无选择器覆盖冲突；无安全域越界：所有修改均在当前组件内部。

[0081] 按当前单文件组件范围进行安全域隔离：允许修改边界：当前组件内部脚本、模板、样式；禁止修改边界：外部组件、公共工具函数、全局样式、父应用代码。

[0082] 最终代码依赖检测结果：存在依赖断裂异常（1项），位置：loadData函数→name变量赋值节点；无循环依赖、无冲突依赖、无越界风险；所有变更锚点均在依赖安全域内部。

[0083] 将依赖风险与基础重构指令精准映射，形成指令风险关联索引：指令1→对应依赖断裂风险点；指令2、3、4→无依赖异常。针对依赖断裂异常，执行一级：依赖断裂修正：依赖断裂修正：原指令1仅定义loadData函数，修正为：定义loadData异步函数+补全name变量赋值逻辑+确保数据链路完整，从根源修复依赖断裂；循环依赖修正：无风险，跳过；冲突依赖修正：无风险，跳过。按照高风险优先、依赖传导顺序、安全域约束规则，对修正后的指令进行时序重排：优先执行：指令1（修复依赖断裂）；同步执行：指令2（异常捕获，与指令1同节点）；独立执行：指令3（样式修复）；最后执行：指令4（注释添加）。执行最终校验：无依赖异常、无越界修改；无执行冲突、无逻辑矛盾；所有锚点均在安全域内；指令一一对应问题，无遗漏。

[0084] 最终输出最优重构指令：1、定位script第8行，定义loadData异步请求函数，补全name变量赋值逻辑，修复依赖断裂；2、定位loadData函数体，添加try / catch异常捕获，避免执行崩溃；3、定位style第3行，将.card设置为width:100%并增加min-width适配；4、在组件顶部添加文档注释，完善功能说明与参数描述。

[0085] 步骤S5：基于双阶段协同优化算法以及基础重构指令或最优重构指令，对审查和重构执行过程进行协同优化，进而评估执行效率，确保前端代码审查与重构实现符合设计要求且提升效率。

[0086] 需要说明的是，所述双阶段协同优化算法通过分析审查效率与重构效率，迭代优化多模态AI深度审查模型，进而得到一种审查更快、重构更稳、效率更高的系统。

[0087] 在本实施例中，双阶段协同优化算法分为审查效率优化阶段与重构效率优化阶段；所述执行平衡因子是指协调审查速度与重构质量的平衡参数；协同优化实现快审查、准重构、高效率的三者兼顾。

[0088] 在步骤S5中，构建双阶段协同优化算法的具体步骤如下：步骤S510：第一阶段：以多模态AI深度审查模型为对象，构建审查效率指标，包括审查耗时、代码问题检出数量、问题准确率、单文件审查速度，先通过归一化处理将各子指标映射至统一数值区间，再按照各子指标对应的权重进行加权融合，进而计算出对应的审查执行效率。

[0089] 步骤S511：第二阶段：以基础重构指令或最优重构指令执行过程为对象，构建重构效率指标，包括指令执行耗时、重构成功率、问题修复率、代码稳定性，先通过归一化处理将各子指标映射至统一数值区间，并进行对应的加权融合，进而计算出对应的重构执行效率。

[0090] 步骤S512：将所述审查执行效率与重构执行效率进行加权计算，获得执行平衡因子，所述执行平衡因子用于协调审查速度与重构精度，避免过快导致漏检、过稳导致低效。

[0091] 步骤S513：根据所述执行平衡因子优化多模态AI深度审查模型，调整模型分支权重、推理速度、特征提取维度，实现审查与重构的协同最优。

[0092] 在步骤S5中，执行效率评估与过程优化的步骤如下：步骤S520：实时采集审查环节耗时、检出率、准确率数据，采集重构环节耗时、成功率、修复率数据。

[0093] 步骤S521：执行基础重构指令或最优重构指令，按指令序列执行代码审查修复、结构优化、样式调整、逻辑完善。

[0094] 步骤S522：根据所述双阶段协同优化算法计算执行平衡因子，评估整体执行效率，判断是否符合设计要求。

[0095] 步骤S523：若执行效率不达标，按执行平衡因子调整模型参数、指令执行顺序、预处理规则，进行迭代优化；若达标，完成本次审查与重构。

[0096] 步骤S524：输出最终优化后的前端代码、重构报告、效率评估报告，确保代码符合设计要求、运行效率提升、可维护性增强。

[0097] 一个示例性的例子，以多模态AI深度审查模型为对象，采集审查效率指标并进行归一化、加权融合计算：审查耗时：1.8s（满分区间归一化得分：0.98）代码问题检出数量：4个（归一化得分：1.00）问题准确率：97%（归一化得分：0.97）单文件审查速度：0.8s / KB（归一化得分：0.96）按权重加权融合：审查执行效率；以最优重构指令执行过程为对象，采集重构效率指标并进行归一化、加权融合计算：指令执行耗时：2.6s（归一化得分：0.97）重构成功率：100%（归一化得分：1.00）问题修复率：100%（归一化得分：1.00）代码稳定性：无新增异常（归一化得分：1.00）按权重加权融合：重构执行效率；执行平衡因子；设计要求阈值：执行平衡因子为优秀；为合格；为不达标。

[0098] 本实施例的执行平衡因子0.984，属于优秀区间。

[0099] 如图2所示，基于AI驱动的前端代码多模态审查与重构系统，所述系统包括但不限于预处理模块、多模态审查模块、多模态融合解算模块、冲突检测优化模块以及双阶段优化模块；预处理模块，用于基于轻量化规则引擎，对待处理的前端代码进行预先处理，进而获得预处理代码以及预处理报告；多模态审查模块，用于构建多模态AI深度审查模型；根据所述预处理代码、预处理报告以及多模态AI深度审查模型，进而获得待处理前端代码的代码问题清单以及重构策略集；多模态融合解算模块，用于对所述代码问题清单以及重构策略集进行多模态融合解算，生成对应的基础重构指令；冲突检测优化模块，用于构建代码依赖检测算法，捕捉执行基础重构指令过程中的代码变更与依赖关系，进而获得对应的代码依赖检测结果；根据所述代码依赖检测结果，若存在代码依赖异常，对基础重构指令进行重构修正，生成最优重构指令；反之，继续执行基础重构指令；双阶段优化模块，基于双阶段协同优化算法以及基础重构指令或最优重构指令，对审查和重构执行过程进行协同优化，进而评估执行效率，确保前端代码审查与重构实现符合设计要求且提升效率可选地,在本实施例中,本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成,该程序可以存储于一计算机可读存储介质中,存储介质可以包括:闪存盘、只读存储器(Read-0nlyMemory,ROM)、随机存取器(RandomAccessMemory,RAM)、磁盘或光盘等。

[0100] 上述本申请实施例序号仅仅为了描述,不代表实施例的优劣。

[0101] 上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在上述计算机可读取的存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在存储介质中,包括若干指令用以使得一台或多台电子设备执行本申请各个实施例所述方法的全部或部分步骤。

[0102] 在本申请的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。

[0103] 在本申请所提供的几个实施例中,应该理解到,所揭露的应用程序,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。

[0104] 所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

[0105] 另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。

[0106] 以上所述仅是本申请的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本申请原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本申请的保护范围。< / script> < / template>

Claims

1. An AI-driven multimodal review and refactoring method for front-end code, characterized in that, The method includes: Based on a lightweight rule engine, the front-end code to be processed is preprocessed to obtain preprocessed code and a preprocessing report; Construct a multimodal AI deep review model; based on the preprocessed code, preprocessed report, and multimodal AI deep review model, obtain a list of code issues and a set of refactoring strategies for the front-end code to be processed; The code problem list and refactoring strategy set are processed using multimodal fusion to generate corresponding basic refactoring instructions; A code dependency detection algorithm is constructed to capture code changes and dependencies during the execution of basic refactoring instructions, thereby obtaining the corresponding code dependency detection results. If the code dependency detection results are abnormal, the basic refactoring instructions are refactored and corrected to generate the optimal refactoring instructions; otherwise, the basic refactoring instructions are continued to be executed. Based on a two-stage collaborative optimization algorithm and basic or optimal refactoring instructions, the review and refactoring execution process is collaboratively optimized to evaluate execution efficiency and ensure that front-end code review and refactoring meet design requirements and improve efficiency.

2. The AI-driven multimodal review and refactoring method for front-end code according to claim 1, characterized in that, Based on a lightweight rule engine, the preprocessing process for the front-end code to be processed includes: Perform syntax validation, format standardization, comment parsing, and static dependency resolution on the front-end code, and generate corresponding preprocessed code and preprocessing reports; The lightweight rule engine has a built-in configurable front-end development specification rule library that supports lightweight preprocessing of various types of front-end code.

3. The AI-driven multimodal review and refactoring method for front-end code according to claim 2, characterized in that, The process of building a multimodal AI deep review model includes: A multimodal input architecture is constructed, consisting of text encoding branch, code structure branch, and visual rendering branch, and code text features, structural topology features, and visual rendering features are extracted respectively. Based on artificial intelligence technology, and according to the code text features, structural topology features, and visual rendering features, a multimodal AI deep review model is constructed.

4. The AI-driven multimodal review and refactoring method for front-end code according to claim 3, characterized in that, The process of performing multimodal fusion calculation on the code issue list and refactoring strategy set includes: The code problem list is structured and encoded in a modal domain, mapping the existing code problems to a problem topology encoding structure; The set of refactoring strategies is executed by domain rule-based encoding, and the refactoring strategies for the corresponding code problems are mapped to strategy execution encoding structures. The problem topology encoding structure and strategy execution encoding structure are subjected to topology node matching, constraint relationship propagation and effective path extraction to obtain an executable solution path; The executable solution path is serialized and parsed to generate the corresponding basic reconstruction instructions.

5. The AI-driven multimodal review and refactoring method for front-end code according to claim 4, characterized in that, The process of constructing a code dependency detection algorithm to capture code changes and dependencies during the execution of basic refactoring instructions, and then obtaining the corresponding code dependency detection results, includes: Based on the basic refactoring instructions, locate the code nodes, DOM nodes, style nodes, and logic function nodes to be modified, and record them as refactoring change anchor points to form a set of refactoring change anchor points; Starting with the refactoring change anchor points in the refactoring change anchor point set, and tracing back to the caller and the callee based on the code execution relationship, a four-layer dynamic dependency chain is constructed, thereby forming the corresponding global dependency graph. The global dependency graph is labeled with risk features to generate a dependency risk list; and the dependency risk list is isolated by dependency security domains to obtain the corresponding dependency security domain boundaries. Based on the dependency risk list and the dependency security domain boundaries, the code dependency detection results are formed.

6. The AI-driven multimodal review and refactoring method for front-end code according to claim 5, characterized in that, The process of refactoring and modifying basic refactoring instructions to generate optimal refactoring instructions includes: The dependency risk list and global dependency graph in the corresponding code dependency detection results are associated and mapped one by one to locate the dependency breakpoint, conflict dependency point and circular dependency point corresponding to each basic refactoring instruction, forming an instruction risk association index. Based on the instruction risk association index, a three-level closed-loop correction is performed on the basic refactoring instructions; Using the boundary of the security domain as the constraint boundary, the basic reconstruction instructions after the three-level closed-loop correction are topologically rearranged to form the corresponding standardized instruction sequence, and the validity is checked to obtain the optimal reconstruction instructions.

7. The AI-driven multimodal review and refactoring method for front-end code according to claim 6, characterized in that, The process of constructing a two-stage collaborative optimization algorithm includes: Phase 1: Construct review efficiency indicators based on the review time and the number of code issues detected by the multimodal AI deep review model, and obtain the corresponding review execution efficiency; The second stage: Based on the execution time and reconstruction success rate of the corresponding basic reconstruction instructions or optimal reconstruction instructions, construct reconstruction efficiency indicators to obtain the corresponding reconstruction execution efficiency; The review execution efficiency and reconstruction execution efficiency are weighted and calculated to obtain the corresponding execution balance factor, and the multimodal AI deep review model is optimized based on the execution balance factor.

8. An AI-driven multimodal review and refactoring system for front-end code, implementing the AI-driven multimodal review and refactoring method for front-end code as described in any one of claims 1 to 7, characterized in that, include: The module includes a preprocessing module, a multimodal review module, a multimodal fusion solution module, a conflict detection optimization module, and a two-stage optimization module. The preprocessing module is used to preprocess the front-end code to be processed based on the lightweight rule engine, thereby obtaining preprocessed code and preprocessing report; The multimodal review module is used to build a multimodal AI deep review model; Based on the preprocessed code, preprocessed report, and multimodal AI deep review model, a list of code issues and a set of refactoring strategies for the front-end code to be processed are obtained. The multimodal fusion solution module is used to perform multimodal fusion solution on the code problem list and the refactoring strategy set to generate corresponding basic refactoring instructions; The conflict detection and optimization module is used to build a code dependency detection algorithm, capture code changes and dependencies during the execution of basic refactoring instructions, and then obtain the corresponding code dependency detection results. Based on the code dependency detection results, if there are code dependency anomalies, the basic refactoring instructions are refactored and corrected to generate the optimal refactoring instructions; otherwise, the basic refactoring instructions continue to be executed. The two-stage optimization module, based on a two-stage collaborative optimization algorithm and basic or optimal refactoring instructions, collaboratively optimizes the review and refactoring execution process, thereby evaluating execution efficiency and ensuring that front-end code review and refactoring meet design requirements and improve efficiency.

Images