A front-end code evaluation method, system, electronic device, and program product.

Abstract

This application proposes a front-end code evaluation method, system, electronic device, and program product. The solution involves acquiring front-end code, compiling and rendering it to obtain a generated front-end page and a target front-end page; extracting code from both the generated and target front-end pages, and cleaning up redundant nodes and generating a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree; calculating the tree structure and element content errors in both the generated and target code trees to obtain the content structure error; calculating the visual structure error in both the generated and target front-end pages to obtain the visual structure error; and determining the evaluation result of the generated front-end code based on the content structure error and visual structure error. This solution can improve the accuracy of front-end code generation and can be widely applied in the field of artificial intelligence technology.

Description

Technical Field

[0001] This application relates to the field of artificial intelligence technology, and in particular to a front-end code evaluation method, system, electronic device, and program product. Background Technology

[0002] In recent years, with the rapid development of Large Language Models (LLM) and Visual-Language Large Models (VLLM) technologies, these models have made significant progress in multiple fields, especially in code generation and front-end development. However, despite these breakthroughs in front-end code generation, the complexity of front-end technologies, particularly the diversity of frameworks and implementations, and the differences between different front-end frameworks (such as React, Vue, and Angular) and their versions, makes it particularly difficult to evaluate the accuracy of the generated code. Summary of the Invention

[0003] This application aims to address at least one of the technical problems existing in the prior art. To this end, this application proposes a front-end code evaluation method, system, electronic device, and program product that can improve the accuracy of front-end code generation.

[0004] To achieve the above objectives, one aspect of this application proposes a front-end code evaluation method, including:

[0005] The front-end code is obtained, compiled, and rendered to obtain a generated front-end page and a target front-end page; the front-end code includes generated front-end code based on a large model and actual developed target front-end code.

[0006] The generated front-end page and the target front-end page are processed by code extraction, and the extracted markup language code is cleaned up of redundant nodes and processed by code structure tree generation to obtain the generated code tree and the target code tree.

[0007] The generated code tree and the target code tree are subjected to tree structure and element content error calculation processing to obtain the content structure error;

[0008] Visual structure error is calculated and processed on the generated front-end page and the target front-end page to obtain the visual structure error.

[0009] The evaluation result of the generated front-end code is determined based on the content structure error and the visual structure error.

[0010] According to some embodiments of this application, the step of extracting code from the generated front-end page and the target front-end page, and cleaning up redundant nodes and generating a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree includes:

[0011] The generated front-end page and the target front-end page are subjected to code extraction processing to obtain markup language code; the markup language code includes the markup language code extracted from the generated front-end page and the markup language code extracted from the target front-end page;

[0012] Based on similarity calculation and predefined rules, duplicate elements in the markup language code are located and deleted to obtain simplified code;

[0013] The simplified code is parsed and its elements are cleaned to obtain the parsed code;

[0014] A graph structure is constructed based on the spatial relationships of the nodes in the parsed code. The graph structure is then processed using the minimum spanning tree algorithm to generate a code structure tree, resulting in the generated code tree and the target code tree.

[0015] According to some embodiments of this application, the step of calculating the tree structure and element content error of the generated code tree and the target code tree to obtain the content structure error includes:

[0016] The generated code tree and the target code tree are matched using a node similarity algorithm to obtain a tree structure matching score.

[0017] Based on a preset threshold and the tree structure matching score, the generated code tree and the target code tree are subjected to node matching processing to obtain matching nodes;

[0018] The text overlap of the matching nodes is calculated using a text similarity algorithm to obtain an element content matching score.

[0019] The color difference of the matching nodes is calculated and processed according to the color difference algorithm to obtain the element color matching score;

[0020] The font size and font weight of the matching nodes are calculated to obtain the font matching score.

[0021] The content structure error is obtained by weighting the tree structure matching score, the element content matching score, the element color matching score, and the font matching score.

[0022] According to some embodiments of this application, the step of performing visual structure error calculation processing on the generated front-end page and the target front-end page to obtain the visual structure error includes:

[0023] The page elements of the generated front-end page and the target front-end page are classified and color-mapped to obtain the mapped content;

[0024] Based on the mapping content, the generated front-end page and the target front-end page are subjected to element replacement and sketching processes to obtain the generated front-end sketch and the target front-end sketch.

[0025] The visual feature similarity between the generated front-end sketch and the target front-end sketch is calculated to obtain the visual feature distance.

[0026] The spatial relationship between the generated front-end sketch and the target front-end sketch is calculated to obtain the spatial relationship tree structure distance.

[0027] The visual structure error is calculated based on the visual feature distance and the spatial relationship tree structure distance.

[0028] According to some embodiments of this application, the step of performing visual feature similarity calculation on the generated front-end sketch and the target front-end sketch to obtain visual feature distance includes:

[0029] The generated front-end sketch and the target front-end sketch are subjected to image preprocessing to obtain a preprocessed image;

[0030] The preprocessed image is subjected to feature extraction processing by an image encoder to obtain a feature vector;

[0031] The feature vectors are standardized, and the similarity of the standardized feature vectors is calculated to obtain the visual feature distance.

[0032] According to some embodiments of this application, the step of performing similarity calculation on the spatial relationship between the generated front-end sketch and the target front-end sketch to obtain the spatial relationship tree structure distance includes:

[0033] Node spatial relationship analysis is performed on the generated front-end sketch and the target front-end sketch to obtain the generated sketch generation tree and the target sketch generation tree;

[0034] The generated sketch tree and the target sketch tree are processed by placeholder color block replacement weight calculation to obtain node weights;

[0035] Based on the node weights, the generated front-end sketch and the target front-end sketch are processed to calculate the page structure similarity, and the spatial relationship tree structure distance is obtained.

[0036] According to some embodiments of this application, the method further includes:

[0037] Based on the evaluation results, the generated front-end code from the large model is sorted and the best code is output to obtain the output code.

[0038] Based on the evaluation results, the output code is processed by a loss function to obtain a loss value;

[0039] The large model is trained based on the loss value to obtain a large model for generating front-end code.

[0040] To achieve the above objectives, another aspect of this application proposes a front-end code evaluation system, applied to the front-end code evaluation method described above, comprising:

[0041] The code rendering module is used to acquire the front-end code, compile and render the front-end code to obtain the generated front-end page and the target front-end page; the front-end code includes the generated front-end code based on the large model and the actual developed target front-end code.

[0042] The structure tree generation module is used to extract code from the generated front-end page and the target front-end page, and to clean up redundant nodes and generate a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree.

[0043] The content structure error calculation module is used to perform tree structure and element content error calculation on the generated code tree and the target code tree to obtain the content structure error.

[0044] The visual structure error calculation module is used to perform visual structure error calculation processing on the generated front-end page and the target front-end page to obtain the visual structure error.

[0045] The code evaluation module is used to determine the evaluation result of the generated front-end code based on the content structure error and the visual structure error.

[0046] To achieve the above objectives, another aspect of this application provides an electronic device including at least one control processor and a memory for communicatively connecting to the at least one control processor; the memory stores instructions executable by the at least one control processor, which, when executed by the at least one control processor, enables the at least one control processor to perform the front-end code evaluation method as described above.

[0047] To achieve the above objectives, another aspect of the embodiments of this application proposes a computer-readable storage medium storing computer-executable instructions for performing the front-end code evaluation method as described above.

[0048] To achieve the above objectives, another aspect of this application provides a computer program product storing computer-executable instructions for executing the front-end code evaluation method as described above.

[0049] One of the above technical solutions has the following advantages or beneficial effects: This application provides a front-end code evaluation method, system, electronic device, and program product. This solution obtains front-end code, compiles and renders the front-end code to obtain a generated front-end page and a target front-end page; it then extracts code from the generated and target front-end pages, and cleans up redundant nodes and generates a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree. This solution can obtain the visual effect of the code through actual rendering, uses the extracted markup language code as an evaluation benchmark for subsequent analysis and comparison, and generates a structure tree by cleaning up redundancy in the code, which helps to understand the nesting relationships and layout organization of various elements on the page, providing necessary information for evaluating tree structure errors and visual effects. This solution also calculates the error between the tree structure and element content of the generated and target code trees to obtain the content structure error, thereby providing a quantitative basis for evaluating the correctness of the generated code in terms of page layout and component organization. Furthermore, this solution calculates visual structural errors between the generated front-end page and the target front-end page to measure whether the page layout, structure, and component arrangement are consistent with expectations, ignoring the differences in actual content. This allows for further optimization of the code generation process based on code evaluation results, thereby improving code quality and user experience. Attached Figure Description

[0050] Figure 1 This is a schematic diagram of an implementation environment provided in the embodiments of this application;

[0051] Figure 2 This is a flowchart of a front-end code evaluation method provided in an embodiment of this application;

[0052] Figure 3 yes Figure 2 Flowchart of step S202;

[0053] Figure 4 yes Figure 2 Flowchart of step S203;

[0054] Figure 5 yes Figure 2 Flowchart of step S204;

[0055] Figure 6 yes Figure 5 Flowchart of step S503;

[0056] Figure 7 yes Figure 5 Flowchart of step S504;

[0057] Figure 8This is a general implementation flowchart provided in one embodiment of this application;

[0058] Figure 9 This is a schematic diagram of the structure of a front-end code evaluation system provided in one embodiment of this application;

[0059] Figure 10 This is a structural diagram of an electronic device provided in another embodiment of this application. Detailed Implementation

[0060] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain this application, and should not be construed as limiting this application.

[0061] In the description of this application, it should be understood that the orientation descriptions, such as up, down, front, back, left, right, etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this application.

[0062] In the description of this application, "several" means one or more, "more than" means two or more, "greater than," "less than," and "exceeding" are understood to exclude the stated number, while "above," "below," and "within" are understood to include the stated number. The use of "first" and "second" in the description is merely for distinguishing technical features and should not be construed as indicating or implying relative importance, or implicitly indicating the number of indicated technical features, or implicitly indicating the order of the indicated technical features.

[0063] In the description of this application, unless otherwise expressly defined, terms such as "setup," "installation," and "connection" should be interpreted broadly, and those skilled in the art can reasonably determine the specific meaning of the above terms in this application in conjunction with the specific content of the technical solution.

[0064] Before providing a detailed description of the embodiments of this application, some of the nouns and terms involved in the embodiments of this application will be explained first. The nouns and terms involved in the embodiments of this application are subject to the following interpretations.

[0065] 1) Artificial Intelligence (AI) is a technological science that studies and develops technologies that simulate, extend, and expand human intelligence. It encompasses multiple fields and technologies, aiming to enable machines to perform tasks that traditionally require human intelligence. Core areas of AI include machine learning, natural language processing, computer vision, and robotics. Machine learning, which learns and predicts from data through algorithms, is one of the foundational technologies of AI. Natural language processing focuses on understanding and generating human language, applied in machine translation, dialogue systems, and other scenarios. Computer vision enables machines to understand and analyze images and videos, used for facial recognition, object detection, and more. Robotics involves the design and development of intelligent physical devices, such as autonomous driving and service robots.

[0066] 2) Large Language Models (LLMs) are deep learning models trained on large amounts of text data, enabling them to generate natural language text or understand the meaning of language text. These models can provide in-depth knowledge and language production on a wide range of topics by training on massive datasets. Their core idea is to learn patterns and structures of natural language through large-scale unsupervised training, thus mimicking the human language cognition and generation process to some extent.

[0067] 3) Front-end UI refers to the interface that users directly see and interact with when using software or web applications. It includes visual and interactive elements such as buttons, forms, layouts, and animations, aiming to provide a clear, aesthetically pleasing, and easy-to-use user experience. The design and implementation of front-end UI typically rely on HTML, CSS, and JavaScript, and are built using modern front-end frameworks (such as React and Vue). A high-quality front-end UI can significantly improve user satisfaction and product competitiveness, serving as a crucial bridge connecting users and system functions.

[0068] 4) A front-end project refers to a complete project entity used in software development to deliver a user-facing front-end application / site, rather than the engineering methodology itself. It includes all elements required for implementation and deployment: source code and static resources, packages and dependencies (such as package.json / lockfile), runtime and build configurations (such as Vite / Webpack, tsconfig, ESLint / Prettier), environment variables and deployment parameters, routing and state management, API adaptation, testing and documentation, and integration with delivery channels (web servers, CDNs, mobile shells, etc.). Its boundaries can be understood as "the smallest front-end unit that can be independently built, deployed, run, and maintained," taking the form of a SPA / MPA / PWA, a micro-front-end sub-application, or a component library. Unlike "front-end engineering / engineering practices," front-end projects emphasize deliverables and lifecycles (initialization → development → build → deployment → monitoring and maintenance); engineering is merely a means to support its implementation, not the definition itself. Understanding front-end projects helps clarify responsibility boundaries, rationally split repositories, and standardize deployment processes, thereby improving collaboration and maintainability.

[0069] 5) The DOM tree is a tree-like object model (Document Object Model) generated by the browser after a webpage is loaded, based on the HTML document structure. In the DOM tree, HTML elements are organized into parent-child node relationships, forming a structured hierarchical tree. Developers can dynamically access and manipulate DOM nodes using JavaScript to implement functions such as updating page content, modifying styles, and handling events. The DOM tree is the core mechanism for browsers to render pages and implement front-end interactions; understanding its structure is crucial for front-end development and performance optimization.

[0070] 6) Ground Truth refers to the "correct answer" or authoritative label considered closest to objective reality in data science and machine learning, used as a benchmark for model training, algorithm calibration, and performance evaluation. Its sources can include manual annotation (experts / crowdsourcing), high-precision sensor measurements, authoritative databases, or controlled experiments, usually accompanied by clear annotation specifications, quality control, and version management. In practice, Ground Truth manifests as classification labels, object detection bounding boxes, semantic segmentation masks, speech-to-text transcription, relation / event annotations, etc., used for loss calculation in supervised learning and as a benchmark for various metrics (such as accuracy, recall, F1, IoU, WER, BLEU, etc.) during the validation / testing phase. It is important to note that Ground Truth may also contain noise and bias (subjective ambiguity, long-tail distribution, device errors, label inconsistencies), therefore, credibility is often improved through inter-annotator agreement (IAA), random sampling verification, active learning relabeling, data traceability, and governance processes. High-quality ground truth is a prerequisite for model reliability, fairness, and interpretability, and is also the core foundation for continuous evaluation and regression testing.

[0071] 7) CLIP (Contrastive Language–Image Pretraining), proposed by OpenAI, is a multimodal large-scale model capable of simultaneously understanding images and natural language. It achieves semantic alignment between images and text through contrastive learning training on massive amounts of image-text pairs. CLIP does not rely on task-specific supervision signals and possesses powerful zero-shot transfer capabilities, making it widely applicable in image search, image-text matching, and cross-modal retrieval. Its multimodal characteristics make it valuable in artificial intelligence, laying the foundation for building general models that understand the world.

[0072] 8) Vision Large Model: Vision large models are large-scale machine learning models focused on the field of computer vision. These models can process and understand image and video data, and are applied to tasks such as image classification, object detection, and image generation. Vision large models are usually implemented based on deep learning algorithms, have a large number of parameters and layers, and can capture complex features and patterns in images, significantly improving the accuracy and efficiency of vision tasks.

[0073] With the rapid development of the internet, front-end technology has also undergone rapid evolution. From early static web pages to modern dynamic interactive applications, front-end development technology is changing rapidly. Especially in recent years, the diversity of front-end development frameworks has grown rapidly, with various frameworks such as React, Vue, Angular, and Svelte emerging one after another. Different frameworks not only have their own characteristics, but also continue to develop and iterate, resulting in the fragmentation of front-end development.

[0074] In recent years, with the rapid development of Large Language Models (LLM) and Visual-Language Large Models (VLLM) technologies, these models have made significant progress in multiple fields, especially in code generation and front-end development. Large Language Models, such as the GPT series, have demonstrated enormous potential in tasks such as automated code generation, programming assistance, and code review, thanks to their powerful text understanding and generation capabilities. In front-end code generation, LLM can automatically generate HTML, CSS, JavaScript, and other front-end code based on natural language descriptions, greatly improving development efficiency and accuracy.

[0075] However, despite these breakthroughs in front-end code generation, the complexity of front-end technologies, especially the diversity of frameworks and implementations, still presents many challenges. Differences between different front-end frameworks (such as React, Vue, and Angular) and between different versions make it particularly difficult to evaluate the accuracy of the generated code. Especially regarding the fidelity between the generated code and the actual result, related technologies have not yet adequately addressed how to quantify the gap between the generated code and the target effect. Current evaluation methods often focus on the functional correctness of the code, neglecting the visual appeal and user experience of the generated code. This makes it difficult to meet practical needs simply by manually checking the differences between the generated code and the design mockups.

[0076] Therefore, this application provides a front-end code evaluation method, system, electronic device, and program product, which can be applied to the fields of artificial intelligence and software engineering, especially in the application scenario of evaluating the effect of front-end code generated based on multimodal large models and large language models. Specifically, this application addresses the problems of large differences in front-end engineering code frameworks, varied styles, and difficulty in evaluating implementation effects by proposing a method that can uniformly process code from different frameworks and provide quantitative scoring results for the generated effect. First, the model-generated and real front-end code are compiled and rendered to obtain native HTML and CSS code. Then, the HTML code needs to be processed by node simplification, DOM tree parsing, and page element replacement. Next, multi-dimensional scoring indicators such as DOM tree distance, original visual similarity, structural visual pixel degree, and important text distance between the generated code and the real code are calculated. Finally, the quality of the front-end code generated by the artificial intelligence model is comprehensively and quantitatively evaluated. This application involves natural language processing, image processing, multimodal large models, large language models in the field of artificial intelligence, and front-end development technology in the field of software engineering. It belongs to the innovative application method of large models in the field of software development engineering and has a wide range of application scenarios and high application value.

[0077] This application provides a front-end code evaluation method, system, electronic device, and program product, which will be described in detail in the following embodiments.

[0078] Figure 1 This is a schematic diagram illustrating the implementation environment of a method provided in an embodiment of this application. (Refer to...) Figure 1 The main hardware and software components of this implementation environment include a terminal 101 and a server 102, which are communicatively connected. The method can be executed based on the interaction between the terminal 101 and the server 102. Furthermore, the terminal 101 and the server 102 can be nodes in a blockchain; this embodiment does not specifically limit this.

[0079] The front-end code evaluation method provided in this application can be applied to the interaction between a terminal device and a server, or it can be software or an application running on the server for monitoring game performance. The terminal, as a client, can run a specified target game software or application, and the server monitors the game performance of the target game. In some embodiments, the terminal can be a smartphone, tablet, laptop, desktop computer, etc.; the server can be configured as an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms; the software can be an application implementing the front-end code evaluation method, but is not limited to the above forms.

[0080] This application can be used in a wide variety of general-purpose or special-purpose computer system environments or configurations. Examples include: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics devices, network PCs, minicomputers, mainframe computers, and distributed computing environments including any of the above systems or devices. This application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform specific tasks or implement specific abstract data types. This application can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In distributed computing environments, program modules can reside in local and remote computer storage media, including storage devices.

[0081] Reference Figure 2 , Figure 2 A flowchart of a front-end code evaluation method provided in this application embodiment, the front-end code evaluation method including but not limited to steps S201 to S205:

[0082] Step S201: Obtain the front-end code, compile and render the front-end code to obtain the generated front-end page and the target front-end page; the front-end code includes the generated front-end code based on the large model and the target front-end code actually developed.

[0083] Step S202: Extract code from the generated front-end page and the target front-end page, and clean up redundant nodes and generate a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree.

[0084] Step S203: Perform tree structure and element content error calculation on the generated code tree and the target code tree to obtain the content structure error;

[0085] Step S204: Perform visual structure error calculation on the generated front-end page and the target front-end page to obtain the visual structure error;

[0086] Step S205: Determine the evaluation result of the generated front-end code based on the content structure error and the visual structure error.

[0087] The embodiments of this application can be applied to interaction scenarios between clients and servers. The client can be a computer device such as a mobile terminal or a personal computer. The server evaluates and processes the front-end code generated by the large model deployed on the client, obtains the evaluation result of the front-end code generated by the large model, and returns it to the client for display to the target object. It can also automatically optimize the code generation capability of the large model based on the evaluation result, thereby improving the front-end code generation capability of the large model.

[0088] Specifically, this embodiment compiles and runs the front-end code generated from a large model, and generates the final HTML page through a browser or other rendering engine, thus obtaining the generated front-end page. Similarly, the target front-end page can also be obtained by compiling and rendering the actual developed target front-end code. Then, Hypertext Markup Language (HTML) code is obtained by extracting code from the generated and target front-end pages. Since the obtained HTML code usually contains redundant nodes, duplicate content, and useless nesting, these contents will affect the accuracy of subsequent evaluation. Therefore, redundancy cleanup is required first. Redundant nodes are cleaned up and a code structure tree is generated from the extracted markup language code. A complete page tree structure is generated using DOM tree parsing technology to obtain the generated code tree and the target code tree. This embodiment compares the distance between the generated code tree and the target code tree to obtain the content structure error, which can evaluate their differences in terms of the number of nodes, node order, hierarchical relationship, element type, etc. The smaller the content structure error, the closer the structure of the generated code is to the target effect. This application embodiment also performs visual structure error calculation processing on the generated front-end page and the target front-end page. By replacing visual elements such as text and images in the page with standardized color blocks, the visual structure similarity between the modified page and the GroundTruth page is calculated to obtain the visual structure error. Based on the visual structure error, it is possible to measure whether the layout, structure and component arrangement of the page are consistent with expectations.

[0089] In one feasible embodiment, this application compiles and renders two sets of front-end code to obtain the final rendered HTML code for each set. Then, a self-designed redundant node cleanup algorithm is used to deduplicate and simplify the nodes in the two HTML codes. Subsequently, corresponding DOM tree structures are generated based on the simplified HTML code, and the distance between the two DOM trees is calculated using an improved Hungarian algorithm. Next, the CLIP feature encoder is used to extract features from the rendered page screenshots, and the feature distance between the two rendering results is calculated. Then, visual content element occlusion is applied to the simplified HTML code, and the rendering calculation retains only the page feature distance of the structure. Next, key text elements in the page are extracted, and all elements are sorted by similarity cross-comparison to obtain two sequences arranged from high to low. The similarity between the two sequences is calculated using a self-designed algorithm. Finally, the weighted sum of all previous scores is used to obtain the current test page effect score.

[0090] In this embodiment, all evaluation scores are combined to calculate a final quantitative evaluation score for the front-end code generation effect, resulting in a code evaluation result. This result reflects the differences between the generated front-end code and the target effect in various aspects. Developers can clearly understand the performance of the generated code in terms of structure, visual effects, and content accuracy, helping to further optimize the code generation process and improve code quality and user experience.

[0091] One of the above technical solutions has the following advantages or beneficial effects: This application's embodiments introduce a quantitative evaluation method to scientifically and accurately evaluate the front-end code generation effect. By combining multiple evaluation dimensions and utilizing large model technology and visual understanding algorithms, the difference between the generated code and the expected effect is systematically quantified, providing a more reliable evaluation standard for front-end automated development.

[0092] In step S201 of some embodiments, front-end code is obtained, and the front-end code is compiled and rendered to obtain a generated front-end page and a target front-end page; the front-end code includes generated front-end code based on a large model and actual developed target front-end code.

[0093] Specifically, the front-end code includes generated front-end code based on a large model and target front-end code developed in real-world applications. The large model is a multimodal large model used to generate the front-end code, capable of simultaneously understanding images and natural language to generate the corresponding front-end code.

[0094] In one feasible implementation, the generated front-end code and the target front-end code are deployed to the same Vue 3 + Ant Design Vue 4 project, using the same dependency versions, build tools (such as Vite or Webpack), and compilation configurations. This ensures that the generated front-end code runs in the same browser environment, avoiding evaluation biases caused by environmental differences. Then, both codebases are loaded and rendered using a headless browser (such as Puppeteer or Playwright) to ensure stable page rendering. By listening to lifecycle events (such as page load completion or Vue component mounting completion), the correct code rendering is ensured, resulting in the generated front-end page and the target front-end page.

[0095] In this embodiment, the front-end code is compiled and run, and the final HTML page is generated by a browser or other rendering engine. The visual effect of the code can be obtained through actual rendering, rather than relying solely on the source code itself. During the rendering process, any styles, JavaScript, and dynamic content processing are applied and executed, allowing the extraction of the corresponding HTML code, reflecting the effect seen by the end user.

[0096] Please see Figure 3 In step S202 of some embodiments, the step of extracting code from the generated front-end page and the target front-end page, and cleaning up redundant nodes and generating a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree includes:

[0097] Step S301: Extract code from the generated front-end page and the target front-end page to obtain markup language code; the markup language code includes the markup language code extracted from the generated front-end page and the markup language code extracted from the target front-end page.

[0098] Step S302: Based on similarity calculation and predefined rules, the duplicate elements of the markup language code are located and deleted to obtain simplified code;

[0099] Step S303: Perform code parsing and element cleaning on the simplified code to obtain parsed code;

[0100] Step S304: Construct a graph structure based on the node spatial relationship of the parsed code, and perform code structure tree generation processing on the graph structure according to the minimum spanning tree algorithm to obtain the generated code tree and the target code tree.

[0101] In this embodiment, markup language code is obtained by extracting code from the generated front-end page and the target front-end page. Nodes with identical markup language code structure but different content are identified and duplicate parts exceeding a set threshold are deleted, such as multiple list items or buttons of the same type, retaining only a representative node. Furthermore, by removing meaningless nested layers, the code structure is simplified, ensuring that subsequent analysis focuses on the main functional areas, resulting in simplified code. This embodiment also obtains parsed code by parsing and element cleaning the simplified code, and generates a complete page tree structure using DOM tree parsing technology, resulting in a generated code tree and a target code tree. The DOM tree is a hierarchical representation of all HTML elements in a webpage, comprehensively showing the page structure and the dependencies between components.

[0102] In step S301 of some embodiments, code extraction processing is performed on the generated front-end page and the target front-end page to obtain markup language code.

[0103] In this embodiment, the complete outerHTML content of the nodes is extracted using regular expression matching, and the markup language code is recorded. These two sets of markup language code will serve as the basis for subsequent analysis. It is conceivable that this embodiment preprocesses the extracted HTML data, retaining only the core structure related to page display and removing unnecessary elements (such as debugging information, hot-reload tags, etc.). Simultaneously, dynamically generated class names, IDs, and inline styles are normalized to avoid introducing noise in subsequent evaluation. This is achieved by inspecting key nodes (such as list items). <a-list-item>The number and structure of the two HTML data are ensured to be complete, and if any abnormalities are found, the current evaluation process is terminated and an error is recorded. During rendering, if the page rendering times out, a script error occurs, or resource loading fails, the system records detailed log information, including console output, network request status, etc., to facilitate problem troubleshooting. If rendering fails continuously, it will be marked as "rendering unavailable" and the relevant diagnostic information will be output. To ensure the accuracy of the rendering results, the system also compares the screenshots of the two pages and manually checks to confirm whether there is a significant rendering deviation. After rendering is complete, the preprocessed HTML files are output, including the markup language code extracted from the front-end page and the markup language code extracted from the target front-end page. The two HTML files will serve as input for subsequent steps, providing basic data for subsequent structural, visual, and textual evaluations.

[0104] In step S302 of some embodiments, repeated elements of the markup language code are located and deleted based on similarity calculation and predefined rules, to obtain a simplified code.

[0105] In the embodiments of the present application, redundant elements are deleted according to similarity in the web page structure, and important and unique elements are retained to obtain a simplified code. The core of the simplification is to identify similar elements in the web page, especially repeated content or structure, and then group these elements according to similarity, delete redundant parts, and finally make the web page content concise and the structure optimized. The embodiments of the present application identify repeated elements in the web page based on similarity calculation and predefined rules, and delete repeated elements according to the set threshold and rules, retaining only the necessary parts.

[0106] Specifically, the embodiments of the present application define repeated elements as elements with similar structure, content, attributes, etc. in the DOM tree, which are generally elements generated by reading data and looping in the front-end framework. For a given HTML code, the judgment of repeated elements includes two parts: node element grouping and element similarity calculation. Node element grouping means that if the `tagName` of two elements is the same (for example, both are `ARTICLE` tags), they are judged to belong to the same group. For elements belonging to the same group, the node similarity between the elements in the group is calculated, and elements with a `className` similarity exceeding a certain threshold are divided into repeated elements for the next step of repeated element deletion. Specifically, the following rules can be used to calculate the similarity and define whether it is repeated:

[0107] The embodiments of the present application calculate the similarity of the `className` of the web page elements using the similarity formula, where the Sorensen Dice similarity coefficient is used to measure the similarity of two elements.

[0108] For a given two sets and The similarity calculation formula is:

[0109] ;

[0110] Wherein and are the word sets converted from the className of the two elements; and are the set sizes of the sets and , i.e. the number of elements; is the intersection size of the sets and , i.e. the number of words common to the two elements.

[0111] Specifically, the embodiments of the present application convert the className string of the element into a word set (by splitting the string with spaces), sort the sequence, and then apply the above formula to calculate the similarity. By this method, the embodiments of the present application can measure whether the className of the two web page elements is similar. The following two specific classNames are taken as examples to calculate their similarity.

[0112] className1 = "post-8136 post type-post status-publish format-standard";

[0113] className2 = "post-8129 post type-post status-publish format-standard";

[0114] Convert the className to a set:

[0115] set1 = {"post-8136", "post", "type-post", "status-publish", "format-standard"};

[0116] set2 = {"post-8129", "post", "type-post", "status-publish", "format-standard"};

[0117] Calculate the intersection:

[0118] intersection = {"post", "type-post", "status-publish", "format-standard"};

[0119] Calculate similarity:

[0120] ;

[0121] Here the threshold is set to 0.8, so the two elements are determined to be highly similar.

[0122] After grouping, for each group of similar elements, the following processing rules are used:

[0123] Determine whether a group of elements is horizontally arranged (e.g., navigation bar, etc.). If the top and bottom boundaries (Y-axis position) of the elements are completely consistent, or the position difference of the elements on the Y-axis is very small (e.g., below a certain threshold of 0.06H, such as 150px), keep all elements in the group.

[0124] For the group of elements determined to be similar, sort the elements by height. If the height difference of the elements in the group (the height difference between the highest and lowest elements) exceeds a certain threshold (e.g., 300px), delete the elements that exceed the threshold. If there are too many elements in a group and the similarity is high, one or a few elements can be kept, and the other elements can be deleted. Based on the above redundant node cleaning algorithm, two simplified HTML codes are obtained, thereby obtaining simplified codes.

[0125] In step S303 of some embodiments, the simplified code is parsed and the elements are cleaned to obtain parsed code;

[0126] In embodiments of the present application, by traversing all HTML element nodes, it is ensured that each node has a unique identifier (ID). The identifier is used for subsequent node tracking, association and operation. In some cases, if the node does not provide an explicit id attribute, a unique ID can be automatically generated, such as through UUID or using a combination of node hierarchy-based generation rules (e.g., node_1, node_2, etc.). This identifier will be one of the main attributes of the node, facilitating subsequent operations and identification. Then, for nodes with visual effects, they are kept, including: div elements with background color: div elements with non-transparent background in the style; image elements (img) with width and height attributes; and elements with a border attribute. These elements directly relate to the visible content of the page; SVG graphics: These graphic elements typically contain interactive or visual graphic content; Text nodes: Text content displayed in HTML; Input boxes and buttons: These form controls are key elements for user interaction. For the remaining elements, such as auxiliary elements or layout elements (e.g., header, footer), if they do not participate in visual rendering or affect user interaction, they can be considered unnecessary and excluded. This step determines whether a node is a visual element by querying its style properties, such as checking background-color, display, and visibility properties to decide whether to retain the node. In an HTML page, some elements may be invisible due to CSS style settings. For example, elements with display:none or visibility:hidden will not participate in page rendering and interaction, and therefore do not need to be part of the DOM tree for spatial analysis. By traversing the styles of all nodes, those explicitly invisible elements are deleted, ensuring that the subsequently constructed graph structure only contains visible nodes. This deletion operation is usually achieved in the following ways: for example, by using display: none, indicating that the element is completely removed from the rendering flow and does not occupy space. Alternatively, you can use `visibility: hidden` to indicate that the element still occupies space but is not visible, so these elements need to be excluded.

[0127] In step S304 of some embodiments, a graph structure is constructed based on the node spatial relationship of the parsed code, and the graph structure is processed by generating a code structure tree according to the minimum spanning tree algorithm to obtain the generated code tree and the target code tree.

[0128] In this embodiment, each retained node needs to obtain its spatial position on the page, which can be obtained by calculating the top-left corner coordinates of the node. To accurately locate the position of each element, the algorithm needs to obtain the node's `boundingClientRect`, where the `top` and `left` values ​​are the top-left corner coordinates of the node. In a browser, the `getBoundingClientRect()` method of a node can return the node's position and size (including `top`, `left`, `width`, and `height`) in the viewport. To ensure that the spatial position of the node is suitable for graph structure construction, coordinate normalization must be performed, that is, the node's coordinates must be transformed to the range of [0, 1], which can avoid coordinate scale differences caused by different page sizes. The normalization method is as follows:

[0129] ;

[0130] in, These are the original coordinate values. This refers to the width or height of the page.

[0131] Then, based on the spatial information of the nodes, this embodiment constructs a graph structure between the nodes. Each node is a vertex in the graph, and the relationships between nodes are connected by edges. The weight of the edges is usually represented by the Euclidean distance between the nodes, which effectively captures the spatial relationships between the nodes. The Euclidean distance formula is as follows:

[0132] ;

[0133] in, and These are the coordinates of the two nodes. To ensure that the edge weights are not affected by page size, the Euclidean distance needs to be normalized, typically using the maximum width or maximum height of the page.

[0134] ;

[0135] in, and These represent the rendered page height and width, respectively. In this way, the spatial relationships between nodes are presented in the form of a graph, with the weight of the edges connecting each node reflecting the spatial proximity between the nodes.

[0136] After constructing the graph structure, the next task is to extract a minimum-cost tree structure from the graph using the Minimum Spanning Tree (MST) algorithm. This tree structure effectively reflects the spatial layout relationships between nodes. The MST algorithm guarantees that all nodes in the tree are connected and that the total weight of each edge is minimized.

[0137] In this process, the embodiment of this application uses Kruskal's algorithm to construct the minimum spanning tree. In practical applications, other minimum tree generation algorithms such as Prin's algorithm and Reverse-Delete can also be used as needed. The specific steps of Kruskal's algorithm are as follows:

[0138] Initialize the edge set and sort: First, sort all the edges in the graph in ascending order of their weights calculated in the previous step, in preparation for processing each edge.

[0139] Union-Find Data Structure: To detect the existence of cycles, Kruskal's algorithm uses a union-find data structure. For a given node... and nodes Define the following computational operations:

[0140] Initialization operation, which sets a set for each element in the target set;

[0141] Find the node The root of the set, i.e., its direct parent element;

[0142] Merge two sets containing a and b; usually, merge by rank / by size (attaching smaller trees to larger trees) to reduce the tree height.

[0143] First, all elements in the set are initialized. Then, edge selection and merging are performed, that is, edges are selected sequentially according to their weights. If the two nodes connected by the current edge belong to different sets, the edge is added to the minimum spanning tree, and the sets of these two nodes are merged. If the two nodes connected by an edge are already in the same set, the edge is skipped to avoid forming a cycle.

[0144] Termination condition: The algorithm ends when the number of selected edges is one less than the total number of vertices, and the minimum spanning tree is completed.

[0145] By applying Kruskal's algorithm, this embodiment of the application obtains a tree structure describing the spatial relationships of pages. Each node in the tree is connected to other nodes by edges, and the weight of the edges reflects the spatial distance between nodes. The minimum spanning tree structure allows us to effectively remove redundant spatial information, retain only the most important node connections, generate a compact and efficient spatial layout tree, and obtain the generated code tree and the target code tree.

[0146] One of the above technical solutions has the following advantages or beneficial effects: This application embodiment parses markup language code and constructs a complete generated code tree and target code tree for subsequent structural analysis. The generated code tree and target code tree help understand the nesting relationships and layout organization of various elements on the page, providing necessary information for evaluating tree structure errors and visual effects.

[0147] Please see Figure 4 In step S203 of some embodiments, the process of calculating the tree structure and element content error of the generated code tree and the target code tree to obtain the content structure error includes:

[0148] Step S401: Perform tree structure matching calculation on the generated code tree and the target code tree according to the node similarity algorithm to obtain the tree structure matching score;

[0149] Step S402: Perform node matching processing on the generated code tree and the target code tree according to the preset threshold and the tree structure matching score to obtain matching nodes;

[0150] Step S403: Calculate the text overlap of the matching nodes according to the text similarity algorithm to obtain the element content matching score;

[0151] Step S404: Calculate the color difference of the matching nodes according to the color difference algorithm to obtain the element color matching score;

[0152] Step S405: Perform difference calculation on the font size and font weight of the matching node to obtain the font matching score;

[0153] Step S406: Perform weighted scoring on the tree structure matching score, the element content matching score, the element color matching score, and the font matching score to obtain the content structure error.

[0154] Specifically, this embodiment of the application performs tree structure and element content error calculation processing on the generated code tree and the target code tree, mainly focusing on the degree of matching between their structure and element content. By comparing the number of nodes, node order, hierarchical relationship, and element type of the two DOM trees, the structural error is quantified, thereby evaluating the deviation between the structure of the generated code and the target effect.

[0155] In step S401 of some embodiments, the generated code tree and the target code tree are subjected to tree structure matching calculation according to the node similarity algorithm to obtain a tree structure matching score.

[0156] In this embodiment, the generated code tree and the target code tree are matched using a node similarity algorithm, which requires calculating the structural similarity between the two trees. To accurately match the content and position of tree nodes, the node similarity algorithm employs the Hungarian Algorithm for optimal node matching.

[0157] The main function of the Hungarian algorithm is to find the optimal match by minimizing the cost matrix, which is particularly important for node matching in tree structures. In this embodiment, a cost matrix is ​​constructed based on node similarity (such as node size, element type, text content, etc.), and then the Hungarian algorithm is applied to find the matching combination with the minimum cost. For a given node... and The cost (error score) of their matching can be obtained by calculating the following formula:

[0158] ;

[0159] in, Represents the tree structure matching score. This represents the number of elements within the node. Indicates the node size. and They represent and For unmatched blocks, the lower the node matching degree, the higher the error score. Through optimization of the Hungarian algorithm, the embodiments of this application can ensure that the cost of matching each pair of nodes is minimized, thereby maximizing structural similarity.

[0160] In step S402 of some embodiments, node matching processing is performed on the generated code tree and the target code tree according to a preset threshold and the tree structure matching score to obtain matching nodes;

[0161] In this embodiment, a similarity threshold of 0.1 can be preset. Nodes whose error scores between two generated and target code trees are lower than the specified threshold are defined as matching nodes. It is conceivable that this similarity threshold can be set according to actual circumstances.

[0162] In step S403 of some embodiments, the text overlap of the matching nodes is calculated according to a text similarity algorithm to obtain an element content matching score.

[0163] In this embodiment, the content differences of matching nodes in two DOM trees are compared. In this step, a text similarity algorithm is used to compare the similarity between the generated text and the expected text. For each pair of matching nodes, their text overlap is calculated using the character-level Sørensen-Dice similarity calculation formula:

[0164] ;

[0165] in, This indicates the number of overlapping characters in two strings. and These represent the lengths of the generated text and the GroundTruth text, respectively. Finally, the overall text content matching score is obtained by averaging the similarity of all matching nodes. This is the score for matching the element content.

[0166] Step S404: Calculate the color difference of the matching nodes according to the color difference algorithm to obtain the element color matching score;

[0167] In this embodiment, color and style are key indicators for error assessment, especially for elements with significant visual impact. The color difference algorithm in this embodiment uses the CIEDE2000 color difference formula to compare the generated content with the text color in GroundTruth. The calculation formula is as follows:

[0168] ;

[0169] The CIEDE2000 formula accurately calculates the human eye's perception of color differences, thus deriving a color difference score between the generated text and the expected text. The overall color difference score is obtained by calculating and averaging the color differences of all matching nodes. The score represents the color matching score of the element.

[0170] Step S405: Perform difference calculation on the font size and font weight of the matching node to obtain the font matching score;

[0171] In this embodiment, differences in font size and weight also affect the final matching degree when evaluating the visual performance of node content. The error between the generated node and the GroundTruth node is further quantified by calculating the differences in font-size and font-weight. The calculation formula is as follows:

[0172] ;

[0173] ;

[0174] in, This represents font size error. This represents the font weight error.

[0175] Step S406: Perform weighted scoring on the tree structure matching score, the element content matching score, the element color matching score, and the font matching score to obtain the content structure error.

[0176] Finally, this embodiment of the application combines all calculated error indices and obtains a comprehensive error score through a weighted average. The matching score is used to control the error weight of each node, and the scores of all matching indices above a threshold are summed. The score for all nodes. The score for the tree structure and element content. The specific calculation method is as follows:

[0177] ;

[0178] ;

[0179] Finally, this embodiment of the application compares the generated DOM tree (denoted as...). ) and GroundTruth DOM tree (denoted as The content structure error is calculated by considering the differences in tree structure and element content between the two elements. .

[0180] One of the above technical solutions has the following advantages or beneficial effects: By calculating the distance between two DOM trees, this application embodiment evaluates their differences in terms of node number, node order, hierarchical relationship, element type, etc., which can provide a quantitative basis for evaluating the correctness of the generated code in terms of page layout and component organization.

[0181] Please see Figure 5 In step S204 of some embodiments, the step of performing visual structure error calculation processing on the generated front-end page and the target front-end page to obtain the visual structure error includes:

[0182] Step S501: Classify and color map the page elements of the generated front-end page and the target front-end page to obtain the mapped content;

[0183] Step S502: Based on the mapping content, perform element replacement and sketching processing on the generated front-end page and the target front-end page to obtain the generated front-end sketch and the target front-end sketch.

[0184] Step S503: Perform visual feature similarity calculation on the generated front-end sketch and the target front-end sketch to obtain the visual feature distance;

[0185] Step S504: Perform similarity calculation on the spatial relationship between the generated front-end sketch and the target front-end sketch to obtain the spatial relationship tree structure distance;

[0186] Step S505: Calculate the visual structure error based on the visual feature distance and the spatial relationship tree structure distance.

[0187] In this embodiment, to eliminate the influence of images and text content on visual error calculation, visual elements such as text and images on the page are first replaced with standardized color blocks (related to item categories). This process ensures that the evaluation focuses only on the structural elements of the page and is not affected by content changes. Subsequently, the CLIP model or other visual feature extraction techniques are used to calculate the visual structural similarity between the modified page and the GroundTruth page.

[0188] In step S501 of some embodiments, the page elements of the generated front-end page and the target front-end page are classified and color-mapped to obtain mapped content;

[0189] In this embodiment, by classifying all elements on the page according to their type and assigning them different colors, the uniformity of visual elements is ensured, unaffected by specific content. Categories include:

[0190] class0: Background color element (background-color);

[0191] class1: Image elements (img, svg, background-image, canvas);

[0192] class2: Text content elements;

[0193] class3: Input elements (input, textarea);

[0194] class4: Button element;

[0195] These elements are mapped to uniform color blocks (related to the element category) on the page to eliminate the influence of image or text content on the evaluation results.

[0196] In step S502 of some embodiments, the generated front-end page and the target front-end page are subjected to element replacement and sketching processing according to the mapping content to obtain the generated front-end sketch and the target front-end sketch.

[0197] In this embodiment, based on the element-color mapping rules in the previous sub-step, the elements at the highest level are replaced one by one using the coordinate position information and z-index values ​​of the rendered page elements to draw the page sketch. The z-index value is used to determine the hierarchical order of page elements, ensuring that elements at different levels are accurately displayed in the sketch. This embodiment clearly demonstrates the page structure, helps to understand the overlapping relationships of different elements, and thus enables accurate comparison in subsequent error calculations.

[0198] One of the above technical solutions has the following advantages or beneficial effects: By performing visual structure error calculation processing on the generated front-end page and the target front-end page, the embodiments of this application can measure whether the layout, structure and component arrangement of the page are consistent with expectations based on the visual structure error, thereby improving the accuracy of code evaluation.

[0199] Please see Figure 6 In step S503 of some embodiments, the step of performing visual feature similarity calculation on the generated front-end sketch and the target front-end sketch to obtain visual feature distance includes:

[0200] Step S601: Perform image preprocessing on the generated front-end sketch and the target front-end sketch to obtain a preprocessed image;

[0201] Step S602: The preprocessed image is subjected to feature extraction processing by an image encoder to obtain a feature vector;

[0202] Step S603: Standardize the feature vector and perform similarity calculation on the standardized feature vector to obtain the visual feature distance.

[0203] In this embodiment, to achieve accurate alignment and difference assessment of the layout structure between the generated page and the original page, a deep learning-based visual similarity quantification method is introduced. This method aims to overcome the limitations of traditional pixel-level comparisons and provide a more objective and robust similarity judgment index that aligns with human visual perception. The core process can be summarized as follows: First, the input page illustration is preprocessed using standardization. Next, a high-dimensional feature vector representing the page layout and structure is extracted using a deep vision model. Then, the feature vector is normalized and standardized. Finally, a quantitative similarity score between the two is calculated using a specific metric function.

[0204] In step S601 of some embodiments, the generated front-end sketch and the target front-end sketch are subjected to image preprocessing to obtain a preprocessed image;

[0205] In this embodiment, the page sketch images to be processed (including the sketch images of the generated page and the original page) are standardized and preprocessed to obtain a preprocessed image. In one specific embodiment, the size of the input image is first uniformly adjusted to 224x224 pixels as required by the CLIP model, and then converted into tensor format. Subsequently, the pixel values ​​of the image are normalized, scaling their value range to between [0, 1] to meet the model input requirements.

[0206] In step S602 of some embodiments, the preprocessed image is subjected to feature extraction processing by an image encoder to obtain a feature vector.

[0207] In this embodiment, a pre-trained deep vision model is selected to extract features. This embodiment preferentially uses the ViT-L / 14 architecture from the CLIP series of models. The pre-processed image tensor is input to the CLIP model's image encoder, and the final output feature vector is obtained through forward propagation. This feature vector is a high-dimensional representation of page layout, component composition, and their interrelationships. Similarly, other advanced visual feature extraction models such as DinoV2 and InternViT can also be used.

[0208] In step S603 of some embodiments, the feature vector is standardized, and the standardized feature vector is subjected to similarity calculation to obtain the visual feature distance.

[0209] In this embodiment, to improve the stability and accuracy of subsequent similarity calculations, the extracted original feature vectors are standardized. Specifically, each feature vector is L2 normalized to a magnitude of 1. Optionally, to reduce computational complexity and remove redundant information, dimensionality reduction techniques such as principal component analysis (PCA) can be used to reduce the dimensionality of the normalized feature vectors.

[0210] Then, using the standardized feature vectors, the visual similarity between the generated page and the original page is calculated. Commonly used similarity metrics include cosine similarity and Euclidean distance. Here, this embodiment uses the following method to calculate the distance between two features:

[0211] ;

[0212] in, and These are the visual feature vectors of the original page and the generated page, respectively. This is the visual feature distance.

[0213] One of the above technical solutions has the following advantages or beneficial effects: By performing visual feature similarity calculation on the generated front-end sketch and the target front-end sketch, this application embodiment can achieve accurate alignment and difference assessment of the layout structure between the generated page and the original page, thereby improving the accuracy of the assessment.

[0214] Please see Figure 7 In step S504 of some embodiments, the similarity calculation of the spatial relationship between the generated front-end sketch and the target front-end sketch to obtain the spatial relationship tree structure distance includes:

[0215] Step S701: Perform node spatial relationship analysis on the generated front-end sketch and the target front-end sketch to obtain the generated sketch generation tree and the target sketch generation tree;

[0216] Step S702: Perform placeholder color block replacement weight calculation on the generated sketch tree and the target sketch tree to obtain node weights;

[0217] Step S703: Perform page structure similarity calculation on the generated front-end sketch and the target front-end sketch according to the node weights to obtain the spatial relationship tree structure distance.

[0218] In this embodiment, a minimum spanning tree (MST) is constructed to represent the spatial relationships of page elements by analyzing the DOM trees of the real page and the generated page. The MST accurately describes the connections and hierarchical relationships between nodes. The sum of the weights of the two trees is calculated, and the weight difference is used to measure the structural differences of the page. The weight calculation can be based on the number of nodes, the hierarchical relationship of the nodes, and the type of elements. The calculation formula is as follows:

[0219] ;

[0220] ;

[0221] in, It is the weight of the i-th node after the placeholder color block replacement is completed. This represents the total number of nodes in the tree. The node similarity was calculated before the replacement. A predefined similarity threshold. This represents the distance in the spatial relationship tree structure.

[0222] This application's embodiments, through the comparison of color mapping and depth visual features of different elements, can effectively eliminate the interference of content factors on the evaluation results, focusing on the structural errors of the page. Specifically, this includes the visual structural errors between the original page and the target comparison page. The definition is as follows:

[0223] ;

[0224] Through this series of steps, the structural differences between the generated page and the expected target page can be clearly measured.

[0225] One of the above technical solutions has the following advantages or beneficial effects: The embodiments of this application obtain the final visual structure error evaluation result by comprehensively considering visual similarity and structural differences. The result reflects the differences between the generated code and the target effect in terms of page layout, structure and component organization, and has a quantitative basis.

[0226] In step S205 of some embodiments, after completing all the above steps, all evaluation scores (including DOM tree structure error, visual content error, visual structure error, and text content error) are combined to calculate the final quantitative evaluation score of the front-end code generation effect. This comprehensive score reflects the differences between the generated front-end code and the target effect in various aspects. Through this score, developers can clearly understand the performance of the generated code in terms of structure, visual effects, content accuracy, etc., which helps to further optimize the code generation process and improve code quality and user experience.

[0227] Final score The definition is as follows:

[0228] ;

[0229] in This refers to the error between the tree structure and element content calculated in step four. This refers to the visual structure error calculated in step five. The overall weighting coefficient for the content error of the representative element is usually set to 1; This represents the visual structure error weighting coefficient, which is usually set to 1. It can be adjusted as needed based on the requirements of the page content and structure during actual development. and The value is to increase the weight of the target that is more important.

[0230] The closer the final score is to 0, the smaller the error, meaning the generated page is closer to the original page. A higher final score indicates a larger error, meaning the generated page differs more significantly from the original page. This completes the quantitative evaluation of the differences in front-end page appearance.

[0231] According to some embodiments of this application, the method further includes:

[0232] Based on the evaluation results, the generated front-end code from the large model is sorted and the best code is output to obtain the output code.

[0233] Based on the evaluation results, the output code is processed by a loss function to obtain a loss value;

[0234] The large model is trained based on the loss value to obtain a large model for generating front-end code.

[0235] In this embodiment, the model can be required to generate multiple candidate codes for a single task. This embodiment can quickly and automatically score and rank these candidate codes, selecting the highest-scoring version as the final output. This significantly improves the success rate and code quality of a single generation task without altering the model itself.

[0236] This application's embodiments can transform the comprehensive evaluation score or its specific dimension score (such as visual similarity, structural similarity, etc.) into a complex loss function. During the model's fine-tuning process, this loss function is continuously optimized through the backpropagation algorithm, which can guide the model parameters to be adjusted towards generating visually more accurate reproductions, more reasonable DOM structures, and more standardized code, thereby achieving a precise improvement in the model's capabilities.

[0237] It's conceivable that in more advanced training frameworks, this evaluation score could serve as a reward signal in reinforcement learning (RL). A higher reward score is given when the model generates high-quality code, and a lower score is given for lower-quality code. Through this mechanism, the model can autonomously explore and iterate in a "generate-evaluate-reward-learn" loop, thereby learning better code generation strategies.

[0238] One of the above technical solutions has the following advantages or beneficial effects: By applying the evaluation results in reverse to the training and inference process of the model, this application establishes a data-driven automated iteration mechanism, realizes continuous optimization of the model generation capability, and greatly enhances its reliability and practical value in complex software engineering scenarios.

[0239] This application's embodiments can be applied to fields such as artificial intelligence, software engineering, and computer technology. They are suitable for evaluating and processing front-end code generated by large models or other intelligent algorithms, and are widely used in interactive application scenarios such as front-end interface interaction, shopping scenarios, and gaming scenarios. In one feasible embodiment, please refer to... Figure 8 This application's embodiments decompose the generated DOM tree and the Ground Truth (GT) DOM tree into a set of nodes and an adjacency matrix, and construct a weighted cost matrix by integrating multi-dimensional features such as node type, level depth, and occurrence order. Then, the Hungarian algorithm is used to obtain the globally optimal node matching, and a minimum spanning tree (MST) constraint is superimposed on this to capture overall level differences, ultimately forming a unified structure-content distance. Compared to existing schemes that only use simple edit distance or node-by-node comparison, this method not only reduces the time complexity from O(n³) to O(n² log n), significantly improving computational efficiency, but also robustly handles node insertion, missing, and rearrangement, resulting in more stable and interpretable quantification results. Furthermore, the mismatched node paths output by the algorithm can directly locate structural defects in the generated code, facilitating subsequent automatic repair.

[0240] Furthermore, in the rendered page screenshots, text, images, and other content nodes are first replaced with uniform color blocks corresponding to their categories based on DOM semantics to obtain a pure structural sketch. Then, self-supervised visual encoders such as CLIP / DINOv2 are used to extract depth features, and cosine similarity is used to measure the similarity between the generated page and the GT page at the layout level. This solution overcomes the limitations of traditional pixel-based methods that are easily affected by text, images, and resolution, achieving a pure measurement of typography and component layout: on the one hand, it completely eliminates noise caused by content differences, making the evaluation results reflect the quality of page structure; on the other hand, it has natural tolerance to scaling, resolution, and theme color changes, and can work robustly across devices and themes, making the evaluation more objective and consistent, and can be automated in batches without additional manual annotation.

[0241] This application embodiment can also inject the front-end code under test into a unified skeleton project, and execute HTML / CSS / JavaScript and asynchronous data requests in a headless Chrome environment, capturing outerHTML and screenshots in real time. Subsequently, through XPath structural hashing and hierarchical semantic analysis, redundant nodes are deduplicated by thresholding and useless nesting is removed. During DOM parsing, a reversible hash ID is injected into each node to achieve stable alignment across versions. Finally, hierarchical weights λ1–λ4 are introduced, and after normalizing multi-dimensional indicators such as "structure-content error" and "visual structure error", Bayesian optimization is used to adaptively obtain the optimal weight vector, outputting a comprehensive quantitative score. Compared with related single-pixel difference or purely manual review, this end-to-end solution truly achieves "what you see is what you get" framework-independent evaluation, covering real-world scenarios such as dynamic data and lazy loading, and automatically learning weights to fit user subjective perception, thereby significantly improving the accuracy, consistency, and engineering feasibility of the evaluation results.

[0242] Corresponding to the above method embodiments, this application also provides embodiments of a front-end code evaluation system. Figure 9 A schematic diagram of the structure of a front-end code evaluation system according to an embodiment of this application is shown. Figure 9 As shown, the front-end code evaluation system includes:

[0243] The code rendering module 901 is used to acquire the front-end code, compile and render the front-end code to obtain the generated front-end page and the target front-end page; the front-end code includes the generated front-end code based on the large model and the target front-end code actually developed.

[0244] The structure tree generation module 902 is used to extract code from the generated front-end page and the target front-end page, and to clean up redundant nodes and generate a code structure tree from the extracted markup language code to obtain a generated code tree and a target code tree.

[0245] The content structure error calculation module 903 is used to perform tree structure and element content error calculation processing on the generated code tree and the target code tree to obtain the content structure error.

[0246] The visual structure error calculation module 904 is used to perform visual structure error calculation processing on the generated front-end page and the target front-end page to obtain the visual structure error.

[0247] The code evaluation module 905 is used to determine the evaluation result of the generated front-end code based on the content structure error and the visual structure error.

[0248] The above is an illustrative scheme of a front-end code evaluation system according to this embodiment. It should be noted that the technical solution of this front-end code evaluation system and the technical solution of the front-end code evaluation method applied to the front-end code evaluation system described above belong to the same concept. For details not described in detail in the technical solution of the front-end code evaluation system, please refer to the description of the technical solution of the front-end code evaluation method described above.

[0249] Please see Figure 10 , Figure 10 The hardware structure of an electronic device according to another embodiment is illustrated. The electronic device includes:

[0250] The processor 1001 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this application.

[0251] The memory 1002 can be implemented as a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM). The memory 1002 can store the operating system and other applications. When the technical solutions provided in the embodiments of this specification are implemented through software or firmware, the relevant program code is stored in the memory 1002 and is called and executed by the processor 1001.

[0252] Input / output interface 1003 is used to implement information input and output;

[0253] The communication interface 1004 is used to enable communication and interaction between this device and other devices. Communication can be achieved through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).

[0254] Bus 1005 transmits information between various components of the device (e.g., processor 1001, memory 1002, input / output interface 1003, and communication interface 1004);

[0255] The processor 1001, memory 1002, input / output interface 1003 and communication interface 1004 are connected to each other within the device via bus 1005.

[0256] This application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the above-described method.

[0257] The above is an illustrative scheme of an electronic device according to this embodiment. It should be noted that the technical solution of this electronic device and the technical solution of the aforementioned front-end code evaluation method belong to the same concept. For details not described in detail in the technical solution of the electronic device, please refer to the description of the technical solution of the aforementioned front-end code evaluation method.

[0258] This application also provides a storage medium, which is a computer-readable storage medium, storing a computer program that, when executed by a processor, implements the aforementioned front-end code evaluation method.

[0259] Memory, as a non-transitory computer-readable storage medium, can be used to store non-transitory software programs and non-transitory computer-executable programs. Furthermore, memory may include high-speed random access memory, and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some embodiments, memory may optionally include memory remotely located relative to the processor, and these remote memories can be connected to the processor via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof. The device embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separate, and may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of the embodiments of this application, depending on actual needs.

[0260] The above is a detailed description of the preferred embodiments of this application. However, this application is not limited to the above embodiments. Those skilled in the art can make various equivalent modifications or substitutions without departing from the spirit of this application. All such equivalent modifications or substitutions are included within the scope defined by the claims of this application.

Claims

1. A method of evaluating front-end code, the method comprising: The method comprises the following steps: obtaining front-end code, compiling and rendering the front-end code to obtain a generated front-end page and a target front-end page; the front-end code comprises generated front-end code generated based on a large model and target front-end code developed in reality; code extraction processing is performed on the generated front-end page and the target front-end page, redundant node cleaning and code structure tree generation processing are performed on the extracted markup language code to obtain a generated code tree and a target code tree; tree structure and element content error calculation processing is performed on the generated code tree and the target code tree to obtain a content structure error; visual structure error calculation processing is performed on the generated front-end page and the target front-end page to obtain a visual structure error; an evaluation result of the generated front-end code is determined according to the content structure error and the visual structure error; the tree structure and element content error calculation processing on the generated code tree and the target code tree to obtain the content structure error comprises: tree structure matching calculation is performed on the generated code tree and the target code tree according to a node similarity algorithm to obtain a tree structure matching score; node matching processing is performed on the generated code tree and the target code tree according to a preset threshold and the tree structure matching score to obtain a matching node; text overlap of the matching node is calculated according to a text similarity algorithm to obtain an element content matching score; color difference of the matching node is calculated according to a color difference algorithm to obtain an element color matching score; font size and font weight of the matching node are calculated to obtain a font matching score; the tree structure matching score, the element content matching score, the element color matching score and the font matching score are weighted and scored to obtain the content structure error; the visual structure error calculation processing on the generated front-end page and the target front-end page to obtain the visual structure error comprises: page elements of the generated front-end page and the target front-end page are classified and color-mapped to obtain mapping content; element replacement and sketch drawing processing are performed on the generated front-end page and the target front-end page according to the mapping content to obtain a generated front-end sketch and a target front-end sketch; visual feature similarity calculation processing is performed on the generated front-end sketch and the target front-end sketch to obtain a visual feature distance; similarity calculation processing is performed on spatial relationships of the generated front-end sketch and the target front-end sketch to obtain a spatial relationship tree structure distance; the visual structure error is calculated according to the visual feature distance and the spatial relationship tree structure distance.

2. The method of claim 1, wherein, the code extraction processing on the generated front-end page and the target front-end page, and the redundant node cleaning and code structure tree generation processing on the extracted markup language code to obtain the generated code tree and the target code tree comprise: Code extraction processing is performed on the generated front-end page and the target front-end page to obtain markup language code; the markup language code includes markup language code extracted from the generated front-end page and markup language code extracted from the target front-end page; Based on similarity calculation and predefined rules, the repeated elements of the markup language code are positioned and deleted to obtain simplified code; Code parsing and element cleaning processing are performed on the simplified code to obtain parsed code; According to the node space relationship of the parsed code, a graph structure is constructed, and a code structure tree is generated based on the minimum spanning tree algorithm to obtain the generated code tree and the target code tree.

3. The method of claim 1, wherein, The visual feature similarity calculation processing of the generated front-end sketch and the target front-end sketch includes: Image preprocessing is performed on the generated front-end sketch and the target front-end sketch to obtain preprocessed images; Feature extraction processing is performed on the preprocessed images through an image encoder to obtain feature vectors; The feature vectors are standardized, and the standardized feature vectors are subjected to similarity calculation processing to obtain visual feature distances.

4. The method of claim 1, wherein, The similarity calculation processing of the spatial relationship of the generated front-end sketch and the target front-end sketch includes: Node spatial relationship analysis processing is performed on the generated front-end sketch and the target front-end sketch to obtain a generated sketch generation tree and a target sketch generation tree; The generated sketch generation tree and the target sketch generation tree are subjected to placeholder color block replacement weight calculation processing to obtain node weights; According to the node weights, page structure similarity calculation processing is performed on the generated front-end sketch and the target front-end sketch to obtain the spatial relationship tree structure distance.

5. The method according to any one of claims 1 to 4, characterized in that, The method further includes: According to the evaluation result, code sorting and optimal output processing are performed on the plurality of generated front-end codes generated by the large model to obtain output codes; According to the evaluation result, loss function calculation processing is performed on the output codes to obtain loss values; According to the loss values, the large model is trained to obtain a large model for generating front-end code.

6. A front-end code evaluation system, characterized by, It includes: A code rendering module is configured to obtain front-end code, compile and render the front-end code, and obtain a generated front-end page and a target front-end page; The front-end code includes generated front-end code generated based on a large model and target front-end code developed in reality; A structure tree generation module is configured to perform code extraction processing on the generated front-end page and the target front-end page, and perform redundant node cleaning and code structure tree generation processing on the extracted markup language code to obtain a generated code tree and a target code tree; A content structure error calculation module is configured to perform tree structure and element content error calculation processing on the generated code tree and the target code tree to obtain a content structure error; A visual structure error calculation module is configured to perform visual structure error calculation processing on the generated front-end page and the target front-end page to obtain a visual structure error; The code evaluation module is configured to determine an evaluation result of the generated front-end code according to the content structure error and the visual structure error. The content structure error calculation module is configured to perform tree structure and element content error calculation processing on the generated code tree and the target code tree to obtain the content structure error, including: performing tree structure matching calculation on the generated code tree and the target code tree according to a node similarity algorithm to obtain a tree structure matching score; performing node matching processing on the generated code tree and the target code tree according to a preset threshold and the tree structure matching score to obtain a matching node; performing calculation processing on a text overlap degree of the matching node according to a text similarity algorithm to obtain an element content matching score; performing calculation processing on a color difference of the matching node according to a color difference algorithm to obtain an element color matching score; performing difference calculation processing on a font size and a font weight of the matching node to obtain a font matching score; performing weighted score processing on the tree structure matching score, the element content matching score, the element color matching score, and the font matching score to obtain the content structure error. The visual structure error calculation module is configured to perform visual structure error calculation processing on the generated front-end page and the target front-end page to obtain a visual structure error, including: performing classification and color mapping processing on page elements of the generated front-end page and the target front-end page to obtain mapping content; performing element replacement and sketch drawing processing on the generated front-end page and the target front-end page according to the mapping content to obtain a generated front-end sketch and a target front-end sketch; performing visual feature similarity calculation processing on the generated front-end sketch and the target front-end sketch to obtain a visual feature distance; performing similarity calculation processing on a spatial relationship of the generated front-end sketch and the target front-end sketch to obtain a spatial relationship tree structure distance; calculating the visual structure error according to the visual feature distance and the spatial relationship tree structure distance.

7. An electronic device, comprising: The computer program product stores computer executable instructions, and the computer executable instructions are used to make a computer execute the front-end code evaluation method in any one of claims 1 to 5.

8. A computer program product, characterised in that, The computer program product stores computer executable instructions, and the computer executable instructions are used to make a computer execute the front-end code evaluation method in any one of claims 1 to 5.

Images