Visual acceptance method and device of page, equipment, storage medium and program product

Abstract

The invention relates to a visual acceptance method and device of a page, equipment, a storage medium and a program product. Comprising the steps of obtaining a design manuscript file and front-end page data; combining the design manuscript file, the front-end page data and a preset prompt word to generate an input prompt; inputting the input prompt into the large model to obtain an interactive difference report output by the large model; specifically, design element information and front-end element information are obtained through analysis; determining element pairs with a mapping relation according to the design element information and the front-end element information; performing multi-dimensional difference comparison on each element pair to obtain a comparison result; and generating an interactive difference report according to a comparison result. According to the method, low-efficiency artificial eye movement screening is replaced, depth difference analysis is carried out from multiple dimensions, design deviations which are really affected can be accurately recognized, and efficiency and accuracy are greatly improved. And an interactive difference report is output, clear modification guidance is provided, and the communication cost is greatly reduced.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, computer device, computer-readable storage medium, and computer program product for visual acceptance of a page. Background Technology

[0002] In the front-end development process, visual acceptance (or "UI walkthrough" or "fidelity check") is a crucial step in ensuring that the final page implementation matches the designer's design drafts. Currently, the mainstream technical method mainly relies on image comparison: by overlaying screenshots of the front-end page with the design drafts (such as renderings produced by design tools like Sketch, Figma, and Photoshop), differences at the pixel level are manually compared.

[0003] While some automated pixel comparison tools exist on the market, they typically only perform simple pixel comparisons and lack semantic understanding of page element structure and hierarchical relationships, often resulting in a high false positive rate. Current technical solutions generally suffer from the following problems: the acceptance process heavily relies on manual visual inspection, which is not only inefficient but also prone to overlooking details due to visual fatigue, affecting the quality of acceptance. Different personnel may have different standards for judging fidelity, leading to inconsistent acceptance results, easily causing disagreements between design and development teams, and increasing the cost of repeated communication. Problem identification and feedback usually rely on manual annotation, requiring explanations using text or drawing tools, a cumbersome process that hinders efficient collaboration and problem traceability. Summary of the Invention

[0004] Therefore, it is necessary to provide a method, apparatus, computer equipment, computer-readable storage medium, and computer program product for visual acceptance of pages, which can realize automated visual acceptance and significantly improve efficiency and accuracy, in response to the above-mentioned technical problems.

[0005] Firstly, this application provides a visual acceptance method for a page, including:

[0006] Obtain design files and front-end page data;

[0007] The design draft file, front-end page data, and preset prompts are combined to generate input prompts; the preset prompts are used to guide the large model through a multi-step analysis process.

[0008] Input the prompts into the large model to obtain an interactive difference report output by the large model;

[0009] The multi-step analysis process includes:

[0010] The design file and front-end page data are analyzed separately to obtain design element information and front-end element information;

[0011] Based on the design element information and the front-end element information, determine the element pairs that have a mapping relationship; each element pair includes a design element and a front-end element;

[0012] For each element pair, perform multi-dimensional difference comparison to obtain the comparison results;

[0013] Based on the comparison results, an interactive difference report is generated.

[0014] In one embodiment, a multi-dimensional difference comparison is performed on each element pair to obtain the comparison results, including:

[0015] For each element pair, the layout differences, style differences, and content differences are determined to obtain the comparison results.

[0016] In one embodiment, the difference report includes an overall accuracy score, a module-level difference list, and detailed difference data; based on the comparison results, an interactive difference report is generated, including:

[0017] Based on the comparison results, a total restoration score is determined using preset scoring rules to quantitatively reflect the overall restoration status.

[0018] The front-end page is divided into multiple modules, and a module-level difference list is generated based on the fidelity score, difference description, and optimization suggestions of each module.

[0019] Based on the module-level difference list, the difference details of each module are marked in the design file to obtain the difference details data; the difference details data supports interactive display control, which includes: in response to the user's selection operation for the target module, showing or hiding the difference details information of the target module.

[0020] In one embodiment, the multi-step analysis process further includes:

[0021] Based on design element information and front-end element information, detect at least one defect in the front-end page and obtain the defect detection results;

[0022] Based on the defect detection results, suggestions for improving the front-end page are generated.

[0023] In one embodiment, determining element pairs with a mapping relationship based on design element information and front-end element information includes:

[0024] Based on the design element information and front-end element information, determine the visual and positional characteristics of each element;

[0025] Based on visual and positional features, identify element pairs that have a mapping relationship.

[0026] In one embodiment, obtaining the design draft file and front-end page data includes:

[0027] Obtain the source files of the design draft and the access address of the front-end page;

[0028] The source design file is tabulated to obtain a design file that describes element attributes using tables.

[0029] Extract Cascading Style Sheets (CSS) from the front-end page access address to obtain the front-end page data described by CSS.

[0030] Secondly, this application also provides a visual acceptance device for a page, comprising:

[0031] The acquisition module is used to acquire design files and front-end page data;

[0032] The prompt module is used to combine design files, front-end page data, and preset prompt words to generate input prompts; the preset prompt words are used to prompt large models to perform multi-step analysis processes.

[0033] The processing module is used to input prompts into the large model and obtain an interactive difference report output by the large model. The multi-step analysis process includes: parsing the design draft file and the front-end page data to obtain design element information and front-end element information respectively; determining element pairs with mapping relationships based on the design element information and front-end element information; each element pair includes a design element and a front-end element; performing multi-dimensional difference comparison for each element pair to obtain the comparison results; and generating an interactive difference report based on the comparison results.

[0034] Thirdly, this application also provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and the processor executes the computer program to implement the steps of the method described in the first aspect above.

[0035] Fourthly, this application also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of the method described in the first aspect above.

[0036] Fifthly, this application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the method described in the first aspect above.

[0037] The aforementioned visual acceptance method, apparatus, computer equipment, computer-readable storage medium, and computer program product acquire design draft files and front-end page data; combine the design draft files, front-end page data, and preset prompts to generate input prompts; the preset prompts are used to guide the large model to perform a multi-step analysis process; the input prompts are input into the large model to obtain an interactive difference report output by the large model; the multi-step analysis process includes: parsing the design draft files and front-end page data separately to obtain design element information and front-end element information; determining element pairs with mapping relationships based on the design element information and front-end element information; each element pair includes a design element and a front-end element; performing multi-dimensional difference comparisons for each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results. Through this method, the large model understands the element structure and hierarchical relationships of the design draft and the front-end page, accurately establishing element pairs with mapping relationships, replacing inefficient manual eye-tracking screening, and significantly improving efficiency and accuracy. Moving beyond simple pixel comparison, it performs in-depth difference analysis from multiple dimensions, accurately identifying truly influential design deviations and significantly reducing false alarm rates. It outputs interactive difference reports to help users locate problematic elements, provides clear modification guidelines, and greatly reduces communication costs. Attached Figure Description

[0038] To more clearly illustrate the technical solutions in the embodiments of this application or related technologies, the drawings used in the description of the embodiments of this application or related technologies will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0039] Figure 1 This is an application environment diagram of a visual acceptance method for a page in one embodiment;

[0040] Figure 2 This is a flowchart illustrating a visual acceptance method for a page in one embodiment;

[0041] Figure 3 This is a schematic diagram of a difference report in one embodiment;

[0042] Figure 4 This is a structural block diagram of a visual acceptance device for a page in one embodiment;

[0043] Figure 5 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0044] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0045] It should be noted that the terms "first," "second," etc., used in this application can be used to describe various elements, but these elements are not limited by these terms. These terms are only used to distinguish the first element from the second element. The terms "comprising" and "having," and any variations thereof, used in this application, are intended to cover non-exclusive inclusion. The term "multiple" used in this application refers to two or more. The term "and / or" used in this application refers to one of the embodiments, or any combination of multiple embodiments.

[0046] The visual acceptance method for pages provided in this application embodiment can be applied to, for example, Figure 1 In the application environment shown, terminal 102 communicates with server 104 via a network. A data storage system can store the data that server 104 needs to process. The data storage system can be integrated onto server 104 or placed on the cloud or other network servers. Terminal 102 provides design draft files and front-end page data to server 104. Server 104 processes the data provided by terminal 102 using the visual acceptance method for pages provided in this embodiment to obtain an interactive difference report, which is then sent to terminal 102 for display. Terminal 102 can be, but is not limited to, various personal computers, laptops, smartphones, tablets, drones, low-altitude aircraft, IoT devices, and portable wearable devices. IoT devices can be smart speakers, smart TVs, smart air conditioners, smart in-vehicle devices, projection devices, etc. Portable wearable devices can be smartwatches, smart bracelets, head-mounted devices, etc. Head-mounted devices can be virtual reality (VR) devices, augmented reality (AR) devices, smart glasses, etc. Server 104 can be a standalone physical server, a server cluster or distributed system consisting of multiple physical servers, or a cloud server that provides cloud computing services.

[0047] In one exemplary embodiment, such as Figure 2 As shown, a visual acceptance method for a page is provided, which is then applied to... Figure 1 Taking server 104 as an example, the explanation includes:

[0048] Step 202: Obtain the design draft files and front-end page data.

[0049] In this context, a design draft file refers to a visual blueprint created by a designer using professional tools to define the product's user interface (UI) and user experience (UX). Optionally, the design draft file may be represented as an image. Optionally, the design draft file may be a source file containing structured data such as layers, groupings, text styles, colors, spacing, and dimensions. Optionally, the design draft file may be data obtained by preprocessing the source file, using tables to describe element attributes.

[0050] A front-end page refers to an interactive webpage or application interface that has been implemented by developers using code (HTML, CSS, JavaScript) and runs in a browser environment. Front-end page data can be understood as data extracted from the front-end page. Optionally, style and layout data can be calculated using the front-end page's URL, and the page's DOM tree can be obtained to acquire the front-end page data. Optionally, Cascading Style Sheets (CSS) can be extracted based on the front-end page's URL to obtain the front-end page data described by CSS.

[0051] Step 204: Combine the design draft file, front-end page data, and preset prompts to generate input prompts; the preset prompts are used to guide the large model through a multi-step analysis process; the multi-step analysis process includes: parsing the design draft file and front-end page data to obtain design element information and front-end element information respectively; determining element pairs with mapping relationships based on the design element information and front-end element information; each element pair includes a design element and a front-end element; performing multi-dimensional difference comparisons on each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results.

[0052] The preset prompts define the roles, tasks, rules, and output formats of the large model, guiding it through a multi-step analysis process. For example, role prompts explicitly tell the large model its role, task prompts clearly list the specific steps it needs to perform (e.g., element mapping, multi-dimensional comparison, problem selection), and output format instructions strictly require the large model to return results in a specific format for automated processing.

[0053] For example, referring to Table 1, which shows an input prompt, the roles of the large model, the review dimensions, the data format description, the output requirements, and the precautions to be taken.

[0054] Table 1:

[0055]

[0056] This involves using a large model (and in specific implementations, a dedicated parser can also be used) to parse the JSON structure of the design draft file and extract the design element information, including but not limited to: layer name, type (text, rectangle, image, etc.), position coordinates (x, y), size (width, height), color (fill color, border color, text color), font style (font family, font size, font weight, line height), spacing (inner margin, outer margin), and hierarchy (parent-child group, canvas), etc.

[0057] Utilize large model analysis to render the page and extract front-end element information corresponding to the design draft, including: HTML element tag type, CSS styles (position, box model, font, color, etc.), absolute position and size in the viewport, and visual hierarchy between elements.

[0058] Based on the design element information and the front-end element information, the design element set and the front-end element set are intelligently matched to determine the element pairs with a mapping relationship, that is, the one-to-one corresponding design elements and front-end elements.

[0059] For element pairs with established mapping relationships, a quantitative comparison is performed to calculate the difference value. In the specific implementation, multi-dimensional difference comparison is carried out, including but not limited to: layout differences, style differences, and content differences.

[0060] Based on the comparison results, a visual and interactive difference report (i.e., a fidelity report) is automatically generated. This report includes, but is not limited to: an overall fidelity score, a list of module-level differences, and detailed difference data.

[0061] Step 206: Input the input prompts into the large model to obtain an interactive difference report output by the large model.

[0062] The process involves inputting prompts into the large model, which then executes the multi-step analysis process described above, outputting an interactive difference report. (Refer to...) Figure 3 The large model is based on the user-provided design files and front-end page data, and uses the input prompts shown in Table 1 as a reference to output a difference report, a summary of major issues, and optimization suggestions.

[0063] In one optional implementation, a knowledge base is pre-built, including UI design knowledge, front-end technology knowledge, and visual design standard rules. During the multi-step analysis process based on input prompts, the large model retrieves relevant knowledge from the knowledge base to provide supplementary knowledge for difference comparison and optimization suggestions, thereby enhancing the accuracy of visual acceptance results.

[0064] In one alternative implementation, sample data collected in a visual acceptance scenario is used to fine-tune the large model, resulting in an updated large model.

[0065] In one alternative implementation, the computer program used to implement steps 202 to 206 is encapsulated as an atomic service, facilitating its embedding into various development processes. Optionally, a corresponding online service is deployed, and checkpoints are set in the current development pipeline to embed it into the pipeline. For example, before submitting code after local development is completed, the URL of the local page and the design draft can be submitted as input for design restoration review. Scores are set according to the importance of different systems, such as a minimum restoration score of 95% for customer systems and a minimum restoration score of 80% for internal systems. Each page must reach the minimum score before code can be submitted to ensure the overall visual quality of the system.

[0066] Optionally, the computer program used to implement steps 202 to 206 can be packaged into an MCP (Model Context Protocol) service and published. By leveraging AI (Artificial Intelligence) capabilities, it can be combined with other MCP services (such as automatically generating front-end code) to achieve intelligent development process.

[0067] Optionally, the computer program used to implement steps 202 to 206 can be packaged into an IDE (Integrated Development Environment) smart plugin (such as VS Code, PyCharm, etc.) to facilitate design restoration and review during local development. Optionally, combined with a specific development language (such as Vue), by parsing the structured review output data, the plugin can accurately locate discrepancies in the web page code and provide features such as highlighting, helping developers fix UI problems during the coding phase and improving development efficiency and product quality.

[0068] The visual acceptance method described above involves acquiring design draft files and front-end page data; combining these with preset prompts to generate input prompts; using these prompts to guide the large model through a multi-step analysis process; inputting the prompts into the large model to obtain an interactive difference report; and the multi-step analysis process includes: parsing the design draft files and front-end page data to obtain design element information and front-end element information; identifying element pairs with mapping relationships based on the design element information and front-end element information; each element pair including a design element and a front-end element; performing multi-dimensional difference comparisons on each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results. This method, through the large model's understanding of the element structure and hierarchical relationships between the design draft and the front-end page, accurately establishes element pairs with mapping relationships, replacing inefficient manual eye-tracking screening and significantly improving efficiency and accuracy. Moving beyond simple pixel comparison, it performs in-depth difference analysis from multiple dimensions, accurately identifying truly impactful design deviations and significantly reducing false alarm rates. It outputs interactive difference reports to help users locate problematic elements, provides clear modification guidelines, and greatly reduces communication costs.

[0069] In an exemplary embodiment, a multi-dimensional difference comparison is performed on each element pair to obtain the comparison result, including: for each element pair, determining the layout difference, style difference, and content difference of the element pair respectively, and obtaining the comparison result.

[0070] This process involves multi-dimensional comparison of elements with established mapping relationships, including layout, style, and content differences. Layout differences are assessed by comparing the position (x, y axis offset) and dimensions (width, height deviation) of the design elements and the front-end elements. Style differences are assessed by comparing the color values ​​(RGB / Hex difference), font (font family, font size, line height), borders (thickness, rounded corners), and shadows of the design elements and the front-end elements. Content differences are assessed by comparing the consistency of text content and image resources between the design elements and the front-end elements. Through quantitative analysis of the design elements and front-end elements, deviations in layout, style, and content are systematically identified. By mapping these deviation values ​​to a preset tolerance range, the severity level of each difference is determined, ultimately generating the comparison results.

[0071] In an exemplary embodiment, the difference report includes an overall fidelity score, a module-level difference list, and difference detail data. Based on the comparison results, an interactive difference report is generated, including: determining an overall fidelity score to quantify the overall fidelity based on the comparison results using preset scoring rules; dividing the front-end page into multiple modules and generating a module-level difference list based on the fidelity score, difference description, and optimization suggestions for each module; annotating the difference detail information of each module in the design file based on the module-level difference list to obtain difference detail data; the difference detail data supports interactive display control, which includes: displaying or hiding the difference detail information of the target module in response to the user's selection operation for the target module.

[0072] Based on the comparison results from the preceding steps, a visual and interactive difference report is automatically generated. This report includes:

[0073] Overall accuracy score: A quantitative score that can intuitively reflect the overall accuracy of the reproduction.

[0074] Module-level Difference List: Divide the front-end page into multiple modules (such as header banner, navigation bar, product list, etc.) according to function or visual area, and list the fidelity score, difference description (e.g., main issues), and optimization suggestions for each module.

[0075] Locationable difference details: The large model can be additionally requested to output structured difference data (such as outputting a difference report in JSON format, including regional coordinates, difference descriptions, etc.). The design draft can be modified through an automated program, and the difference data of each module can be reflected in the design draft. Designers can directly and intuitively understand the differences between the development implementation of each module and the design draft in the design draft, and it can be provided to the development team for reference and modification.

[0076] Optionally, the preset scoring rules include: establishing a scoring weighting system, assigning basic weights to the three dimensions of layout, style, and content to reflect their relative importance, assigning a corresponding deduction coefficient to each difference level to reflect its importance, calculating the deduction for each element, aggregating the deductions for all elements under each dimension, and weighting the calculation, deducting the deductions for all dimensions from the full score to obtain the overall fidelity score.

[0077] Similarly, for each module, the scores lost by all elements within that module are deducted from the full score to obtain the module's fidelity score. Following input prompts, the large model performs difference analysis and optimization analysis for each module, determining the difference descriptions and optimization suggestions for each module, and generating a module-level difference list based on each module's fidelity score, difference descriptions, and optimization suggestions.

[0078] The difference details information includes at least a difference description and optimization suggestions. Optionally, the large model outputs the difference details information in a structured data format. An automated program processes this structured difference details information, visually annotating the difference details of each module in the design draft, generating the annotated design draft, i.e., the difference details data. The difference details data supports interactive display control; for example, it can receive user selections for specific modules or difference items; dynamically show or hide the corresponding difference details information in response to the selection; and provide control over the display status of the difference details information.

[0079] In this embodiment, a quantitative difference report is used to establish an objective and unified measurement standard for project delivery, which serves as a key quality checkpoint and effectively prevents low-fidelity pages from going online.

[0080] In an exemplary embodiment, the multi-step analysis process further includes: detecting at least one defect of the front-end page based on design element information and front-end element information to obtain defect detection results; and generating improvement suggestions for the front-end page based on the defect detection results.

[0081] This process involves in-depth analysis of the design drafts and front-end pages based on a large-scale model, generating further improvement suggestions for user experience optimization, thus forming a closed loop. At least one defect detection strategy is pre-set, and the large-scale model analyzes based on this strategy to identify potential defects in the front-end pages. Based on the defect detection results, improvement suggestions for the front-end pages are generated. Optionally, defect detection includes consistency checks and performance verification. Consistency checks include: checking whether the style of the same component (such as a button) remains consistent across different pages or states, generating an optimization suggestion report for inconsistent components. Performance verification includes at least one of the following: detecting excessively small clickable areas in the front-end page that may affect the user experience; identifying experience gaps in responsive breakpoint design; and analyzing visual experience issues related to page loading performance. Specific improvement plans are generated based on the performance verification results.

[0082] In this embodiment, based on design specifications and best practices, the large model not only identifies visual differences but also proactively detects experience defects that are not visually perceptible, such as accessibility and interaction logic. By providing improvement suggestions, it helps avoid experience problems that are not visually perceptible, achieving a qualitative change from problem discovery to assisting in problem-solving, forming a positive cycle of continuous optimization.

[0083] In an exemplary embodiment, determining element pairs with a mapping relationship based on design element information and front-end element information includes: determining the visual features and positional features of each element based on the design element information and front-end element information; and determining element pairs with a mapping relationship based on the visual features and positional features.

[0084] Specifically, based on the visual features (such as color, stroke, and rounded corners) and positional features (such as spacing, size, and hierarchy) of elements, AI algorithms are used to establish a one-to-one mapping relationship between design elements and front-end elements, identifying element pairs with a mapping relationship. Optionally, for each candidate pair (including a design element and a front-end element), based on the visual and positional features of each element in the candidate pair, positional similarity, size similarity, visual similarity, and semantic similarity between the elements are calculated. The positional similarity, size similarity, visual similarity, and semantic similarity are then weighted and summed to obtain a matching confidence score. Candidate pairs with a matching confidence score higher than a set threshold are identified as element pairs with a mapping relationship.

[0085] In one exemplary embodiment, obtaining design draft files and front-end page data includes: obtaining design draft source files and front-end page access addresses; performing tabular processing on the design draft source files to obtain design draft files that describe element attributes through tables; and extracting Cascading Style Sheets (CSS) based on the front-end page access addresses to obtain front-end page data described by CSS.

[0086] Before inputting the design draft files and front-end page data into the large model, the original design data and front-end data are preprocessed. Specifically, the source design files are tabulated to obtain design draft files that describe element attributes in tables; and CSS styles are extracted from the page data based on the front-end page access address to obtain front-end page data described by Cascading Style Sheets (CSS).

[0087] In this embodiment, by tabulating the source design files and extracting cascading style sheets based on the front-end page access address, the efficiency of understanding the large model can be improved, the cognitive burden of the model can be reduced, and the model can focus more on performing difference analysis and optimization analysis tasks.

[0088] It should be understood that although the steps in the flowcharts of the embodiments described above are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the embodiments described above may include multiple steps or multiple stages. These steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the steps or stages in other steps. It is understood that the steps in different embodiments can be freely combined as needed, and all non-contradictory solutions formed by such combinations are within the scope of protection of this application.

[0089] Based on the same inventive concept, this application also provides a visual inspection device for implementing the visual inspection method for pages described above. The solution provided by this device is similar to the implementation described in the above method; therefore, the specific limitations in one or more embodiments of the visual inspection device for pages provided below can be found in the limitations of the visual inspection method for pages described above, and will not be repeated here.

[0090] In one exemplary embodiment, such as Figure 4 As shown, a visual acceptance device for a page is provided, comprising:

[0091] Module 402 is used to retrieve design files and front-end page data;

[0092] The prompt module 404 is used to combine the design file, front-end page data, and preset prompt words to generate input prompts; the preset prompt words are used to prompt the large model to perform multi-step analysis processes;

[0093] The processing module 406 is used to input input prompts into the large model and obtain an interactive difference report output by the large model. The multi-step analysis process includes: parsing the design draft file and the front-end page data to obtain design element information and front-end element information respectively; determining element pairs with mapping relationships based on the design element information and the front-end element information; each element pair includes a design element and a front-end element; performing multi-dimensional difference comparison for each element pair to obtain the comparison results; and generating an interactive difference report based on the comparison results.

[0094] The visual acceptance device on the aforementioned page uses a large model to understand the element structure and hierarchical relationships between the design draft and the front-end page, accurately establishing element pairs with mapping relationships. This replaces inefficient manual eye-tracking screening, significantly improving efficiency and accuracy. Moving beyond simple pixel comparison, it performs in-depth difference analysis from multiple dimensions, accurately identifying truly impactful design deviations and significantly reducing false alarm rates. It outputs interactive difference reports to help users locate problematic elements, providing clear modification guidance and greatly reducing communication costs.

[0095] In an exemplary embodiment, the processing module 406 is further configured to determine the layout differences, style differences, and content differences of each element pair to obtain a comparison result.

[0096] In an exemplary embodiment, the difference report includes an overall fidelity score, a module-level difference list, and difference detail data; the processing module 406 is further configured to determine an overall fidelity score to quantify the overall fidelity based on the comparison results using preset scoring rules; divide the front-end page into multiple modules, and generate a module-level difference list based on the fidelity score, difference description, and optimization suggestions of each module; based on the module-level difference list, annotate the difference detail information of each module in the design file to obtain difference detail data; the difference detail data supports interactive display control, which includes: displaying or hiding the difference detail information of the target module in response to the user's selection operation for the target module.

[0097] In an exemplary embodiment, the processing module 406 is further configured to detect at least one defect of the front-end page based on the design element information and the front-end element information, and obtain a defect detection result; and generate improvement suggestions for the front-end page based on the defect detection result.

[0098] In an exemplary embodiment, the processing module 406 is further configured to determine the visual features and positional features of each element based on the design element information and the front-end element information; and to determine element pairs with a mapping relationship based on the visual features and positional features.

[0099] In an exemplary embodiment, the acquisition module 402 is further configured to acquire the design source file and the front-end page access address; perform tabular processing on the design source file to obtain a design file that describes element attributes through tables; and extract cascading style sheets based on the front-end page access address to obtain front-end page data described by cascading style sheets.

[0100] The various modules in the visual acceptance device of the aforementioned page can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in a computer device, or stored in the memory of a computer device as software, so that the processor can call and execute the operations corresponding to each module.

[0101] In one exemplary embodiment, a computer device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 5As shown, this computer device includes a processor, memory, input / output interfaces (I / O), and a communication interface. The processor, memory, and I / O interfaces are connected via a system bus, and the communication interface is also connected to the system bus via the I / O interfaces. The processor provides computational and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides the environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The I / O interfaces are used for exchanging information between the processor and external devices. The communication interface is used for communicating with external terminals via a network connection. When the computer program is executed by the processor, it implements a visual acceptance method for web pages.

[0102] Those skilled in the art will understand that Figure 5 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0103] In one exemplary embodiment, a computer device is provided, including a memory and a processor. The memory stores a computer program, and the processor executes the computer program to perform the following steps: acquiring design draft files and front-end page data; combining the design draft files, front-end page data, and preset prompt words to generate input prompts; using the preset prompt words to prompt a large model to perform a multi-step analysis process; inputting the input prompts into the large model to obtain an interactive difference report output by the large model; wherein, the multi-step analysis process includes: parsing the design draft files and front-end page data respectively to obtain design element information and front-end element information; determining element pairs with a mapping relationship based on the design element information and front-end element information; each element pair including a design element and a front-end element; performing multi-dimensional difference comparison for each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results.

[0104] In one embodiment, when the processor executes the computer program, it further performs the following steps: for each element pair, determine the layout differences, style differences, and content differences of the element pairs respectively, and obtain the comparison results.

[0105] In one embodiment, when the processor executes the computer program, it further performs the following steps: using preset scoring rules to determine an overall restoration score based on the comparison results to quantify the overall restoration status; dividing the front-end page into multiple modules, and generating a module-level difference list based on the restoration score, difference description, and optimization suggestions of each module; annotating the difference details of each module in the design file according to the module-level difference list to obtain difference detail data; the difference detail data supports interactive display control, which includes: displaying or hiding the difference detail information of the target module in response to the user's selection operation for the target module.

[0106] In one embodiment, when the processor executes the computer program, it further performs the following steps: detecting at least one defect of the front-end page based on design element information and front-end element information, and obtaining defect detection results; and generating improvement suggestions for the front-end page based on the defect detection results.

[0107] In one embodiment, when the processor executes the computer program, it further performs the following steps: determining the visual features and positional features of each element based on the design element information and the front-end element information; and determining element pairs with a mapping relationship based on the visual features and positional features.

[0108] In one embodiment, when the processor executes the computer program, it further performs the following steps: obtaining the design source file and the front-end page access address; performing tabular processing on the design source file to obtain a design file that describes element attributes through tables; and extracting cascading style sheets based on the front-end page access address to obtain front-end page data described by cascading style sheets.

[0109] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When executed by a processor, the computer program performs the following steps: acquiring design draft files and front-end page data; combining the design draft files, front-end page data, and preset prompt words to generate input prompts; using preset prompt words to prompt a large model to perform a multi-step analysis process; inputting the input prompts into the large model to obtain an interactive difference report output by the large model; wherein the multi-step analysis process includes: parsing the design draft files and front-end page data respectively to obtain design element information and front-end element information; determining element pairs with mapping relationships based on the design element information and front-end element information; each element pair including a design element and a front-end element; performing multi-dimensional difference comparisons for each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results.

[0110] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: for each element pair, determine the layout differences, style differences, and content differences of the element pairs respectively, and obtain the comparison results.

[0111] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: determining an overall restoration score to quantify the overall restoration status based on the comparison results using preset scoring rules; dividing the front-end page into multiple modules and generating a module-level difference list based on the restoration score, difference description, and optimization suggestions of each module; annotating the difference details of each module in the design file according to the module-level difference list to obtain difference detail data; the difference detail data supports interactive display control, which includes: displaying or hiding the difference detail information of the target module in response to the user's selection operation for the target module.

[0112] In one embodiment, when the computer program is executed by a processor, it further performs the following steps: detecting at least one defect of the front-end page based on design element information and front-end element information, and obtaining defect detection results; and generating improvement suggestions for the front-end page based on the defect detection results.

[0113] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: determining the visual features and positional features of each element based on the design element information and the front-end element information; and determining element pairs with a mapping relationship based on the visual features and positional features.

[0114] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: obtaining the design source file and the front-end page access address; performing tabular processing on the design source file to obtain a design file that describes element attributes through tables; and extracting cascading style sheets based on the front-end page access address to obtain front-end page data described by cascading style sheets.

[0115] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, performs the following steps: acquiring design draft files and front-end page data; combining the design draft files, front-end page data, and preset prompt words to generate input prompts; using the preset prompt words to prompt a large model to perform a multi-step analysis process; inputting the input prompts into the large model to obtain an interactive difference report output by the large model; wherein the multi-step analysis process includes: parsing the design draft files and front-end page data respectively to obtain design element information and front-end element information; determining element pairs with mapping relationships based on the design element information and front-end element information; each element pair including a design element and a front-end element; performing multi-dimensional difference comparisons for each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results.

[0116] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: for each element pair, determine the layout differences, style differences, and content differences of the element pairs respectively, and obtain the comparison results.

[0117] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: determining an overall restoration score to quantify the overall restoration status based on the comparison results using preset scoring rules; dividing the front-end page into multiple modules and generating a module-level difference list based on the restoration score, difference description, and optimization suggestions of each module; annotating the difference details of each module in the design file according to the module-level difference list to obtain difference detail data; the difference detail data supports interactive display control, which includes: displaying or hiding the difference detail information of the target module in response to the user's selection operation for the target module.

[0118] In one embodiment, when the computer program is executed by a processor, it further performs the following steps: detecting at least one defect of the front-end page based on design element information and front-end element information, and obtaining defect detection results; and generating improvement suggestions for the front-end page based on the defect detection results.

[0119] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: determining the visual features and positional features of each element based on the design element information and the front-end element information; and determining element pairs with a mapping relationship based on the visual features and positional features.

[0120] In one embodiment, when the computer program is executed by the processor, it further performs the following steps: obtaining the design source file and the front-end page access address; performing tabular processing on the design source file to obtain a design file that describes element attributes through tables; and extracting cascading style sheets based on the front-end page access address to obtain front-end page data described by cascading style sheets.

[0121] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data must comply with relevant regulations.

[0122] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, central processing units, graphics processing units, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, artificial intelligence (AI) processors, etc., and are not limited to these.

[0123] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0124] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A method for visual acceptance of a webpage, characterized in that, The method includes: Obtain design files and front-end page data; The design file, the front-end page data, and preset prompt words are combined to generate input prompts; the preset prompt words are used to prompt the large model to perform a multi-step analysis process; The input prompts are fed into the large model to obtain an interactive difference report output by the large model; The multi-step analysis process includes: The design file and the front-end page data are parsed separately to obtain design element information and front-end element information; Based on the design element information and the front-end element information, element pairs with a mapping relationship are determined; each element pair includes a design element and a front-end element. For each element pair, perform multi-dimensional difference comparison to obtain the comparison results; Based on the comparison results, an interactive difference report is generated.

2. The method according to claim 1, characterized in that, The multi-dimensional difference comparison for each element pair yields the comparison results, including: For each pair of elements, the layout differences, style differences, and content differences of the pair are determined to obtain the comparison results.

3. The method according to claim 1, characterized in that, The difference report includes an overall accuracy score, a module-level difference list, and detailed difference data; the generation of an interactive difference report based on the comparison results includes: Based on the comparison results, a total restoration score is determined using preset scoring rules to quantify the overall restoration performance. The front-end page is divided into multiple modules, and a module-level difference list is generated based on the fidelity score, difference description, and optimization suggestions of each module. Based on the module-level difference list, the difference details of each module are marked in the design file to obtain difference detail data; the difference detail data supports interactive display control, which includes: in response to the user's selection operation for the target module, displaying or hiding the difference detail information of the target module.

4. The method according to claim 1, characterized in that, The multi-step analysis process also includes: Based on the design element information and the front-end element information, at least one defect of the front-end page is detected, and a defect detection result is obtained; Based on the defect detection results, suggestions for improving the front-end page are generated.

5. The method according to claim 1, characterized in that, The step of determining element pairs with a mapping relationship based on the design element information and the front-end element information includes: Based on the design element information and the front-end element information, determine the visual features and positional features of each element; Based on the visual features and the positional features, element pairs with a mapping relationship are determined.

6. The method according to any one of claims 1 to 5, characterized in that, The acquisition of design draft files and front-end page data includes: Obtain the source files of the design draft and the access address of the front-end page; The source design file is tabulated to obtain a design file that describes element attributes using tables; Based on the front-end page access address, Cascading Style Sheets (CSS) are extracted to obtain the front-end page data described by CSS.

7. A visual inspection device for a webpage, characterized in that, The device includes: The acquisition module is used to acquire design files and front-end page data; The prompt module is used to combine the design file, the front-end page data, and preset prompt words to generate input prompts; the preset prompt words are used to prompt the large model to perform a multi-step analysis process; The processing module is used to input the input prompts into the large model and obtain an interactive difference report output by the large model; wherein, the multi-step analysis process includes: parsing the design draft file and the front-end page data respectively to obtain design element information and front-end element information; determining element pairs with mapping relationships based on the design element information and the front-end element information; each element pair includes a design element and a front-end element; performing multi-dimensional difference comparison for each element pair to obtain comparison results; and generating an interactive difference report based on the comparison results.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

10. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 6.

Images