Image Comparator Using DOM Context for Difference Labeling
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing image difference generators (IDGs) often highlight minor visual differences that are not significant in software development, leading to distractions and reduced coding efficiency, as they fail to distinguish between code-related and environmental or platform-induced changes.
Innovation Solution
An advanced image difference generator (AIDG) that utilizes context images based on dynamic object model (DOM) elements to identify and differentiate substantial difference areas (SDAs) from minor difference areas (MDAs), using threshold operations and color coding to highlight relevant code-related changes.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If traditional image difference generators compare display outputs, then all visual differences are highlighted, but this includes minor environmental or platform-induced changes that are not related to code changes, leading to false positives and reduced developer efficiency
Solution Approach 1:
The patent segments differences into two categories: substantial difference areas (SDAs) related to code changes and minor difference areas (MDAs) related to environmental or platform changes. This segmentation is achieved by comparing context images generated from DOM elements and using threshold operations to distinguish between significant and insignificant differences, thereby reducing false positives while maintaining detection accuracy
Solution Approach 2:
The patent introduces context images as an intermediary representation that captures the structural layout of display outputs based on DOM elements. By comparing context images alongside pixel-level differences, the system can identify whether detected differences correspond to actual code changes or are merely environmental variations, thus filtering out false positives
2Reliability
If all differences are highlighted in the same way, then comprehensive coverage is achieved, but developer focus is diluted by non-critical changes
Solution Approach 1:
The patent applies different visual qualities (color codes) to different types of differences: SDAs are highlighted with one color (e.g., red) to indicate code-related changes requiring attention, while MDAs are highlighted with another color (e.g., yellow) to indicate environmental changes that can be ignored. This local differentiation maintains complete coverage while guiding developer focus to critical issues
Solution Approach 2:
The patent uses color changes as a visual encoding mechanism to convey the significance of detected differences. By assigning distinct colors to SDAs and MDAs, the system provides immediate visual cues that help developers quickly prioritize their attention without missing any differences, thus maintaining reliability while improving ease of operation
Data Source
AI summary
An image difference generator can receive first and second images of first and second display outputs of a computer program, such as a webpage. The images can contain two different categories of differences, one related to the differences in the webpage code, and one related to the differences unrelated to the webpage code, such as differences due to environmental, platform, or generally indeterministic sources, unrelated to the webpage code. The image difference generator can identify each category of the differences and their corresponding regions in each image, and highlight them differently in an output difference image. A developer of the software or webpage can inspect the output difference image and focus her development activity on the appropriate category.