|
| 1 | +--- |
| 2 | +id: smartui-humanize-diff |
| 3 | +title: Humanize Diff - AI-Powered Visual Analysis |
| 4 | +hide_title: false |
| 5 | +sidebar_label: Humanize Diff (Visual AI) |
| 6 | +description: A guide on using Humanize Diff, the Visual AI agent in SmartUI that identifies and summarizes meaningful, human-relevant visual changes to accelerate reviews. |
| 7 | +keywords: |
| 8 | + - smartui |
| 9 | + - visual ai |
| 10 | + - humanize diff |
| 11 | + - visual testing |
| 12 | + - ai in testing |
| 13 | +url: https://www.lambdatest.com/support/docs/smartui-humanize-diff |
| 14 | +site_name: LambdaTest |
| 15 | +slug: smartui-humanize-diff/ |
| 16 | +--- |
| 17 | + |
| 18 | +<script type="application/ld+json" |
| 19 | + dangerouslySetInnerHTML={{ __html: JSON.stringify({ |
| 20 | + "@context": "https://schema.org", |
| 21 | + "@type": "BreadcrumbList", |
| 22 | + "itemListElement": [{ |
| 23 | + "@type": "ListItem", |
| 24 | + "position": 1, |
| 25 | + "name": "Home", |
| 26 | + "item": "https://www.lambdatest.com" |
| 27 | + },{ |
| 28 | + "@type": "ListItem", |
| 29 | + "position": 2, |
| 30 | + "name": "Support", |
| 31 | + "item": "https://www.lambdatest.com/support/docs/" |
| 32 | + },{ |
| 33 | + "@type": "ListItem", |
| 34 | + "position": 3, |
| 35 | + "name": "Humanize Diff: AI-Powered Visual Analysis", |
| 36 | + "item": "https://www.lambdatest.com/support/docs/smartui-humanize-diff" |
| 37 | + }] |
| 38 | + }) |
| 39 | + }} |
| 40 | +></script> |
| 41 | + |
| 42 | +Humanize Diff introduces a **Visual AI** agent that revolutionizes visual regression testing by simulating human perception. Instead of just highlighting every pixel difference, this AI-powered feature identifies and summarizes only the meaningful, human-relevant changes between your baseline and captured screenshots. This allows you to instantly focus on significant UI shifts and understand the context of the changes without getting lost in minor, irrelevant noise. |
| 43 | + |
| 44 | +--- |
| 45 | + |
| 46 | +## What Problems Does Humanize Diff Solve? |
| 47 | + |
| 48 | +Traditional pixel-to-pixel comparison can be noisy and time-consuming. Humanize Diff eliminates the guesswork by providing context-aware, intelligent analysis. |
| 49 | + |
| 50 | +| Problem | Humanize Diff Solution | |
| 51 | +| :--- | :--- | |
| 52 | +| Pixel diffs are cluttered with noise from anti-aliasing or rendering glitches. | The AI agent filters out irrelevant diffs and only highlights changes a human user would notice. | |
| 53 | +| It's hard to understand the scope or meaning of a change from a simple highlighted area. | Get a plain-English summary that explains the entire change in context. | |
| 54 | +| Reviewing hundreds of minor visual differences is slow and inefficient. | Focus your attention only on significant UI and UX regressions that impact the user experience. | |
| 55 | + |
| 56 | +--- |
| 57 | + |
| 58 | +## How to Use Humanize Diff |
| 59 | + |
| 60 | +<img loading="lazy" src={require('../assets/images/smart-visual-testing/RCA/smartui-comparison-page.png').default} alt="SmartUI Comparison Page" className="doc_img"/> |
| 61 | + |
| 62 | +### Step 1: Activate Visual AI Mode |
| 63 | + |
| 64 | +Navigate to any SmartUI comparison build. In the toolbar above the screenshots, locate and click the **Visual AI** toggle. This activates the "Human eyes simulation AI agent." |
| 65 | + |
| 66 | +<p align="center"> |
| 67 | + <img loading="lazy" src={require('../assets/images/smart-visual-testing/RCA/visual-ai-toggle.png').default} alt="Visual AI Toggle Button" className="doc_img"/> |
| 68 | +</p> |
| 69 | + |
| 70 | + |
| 71 | +--- |
| 72 | + |
| 73 | +### Step 2: Investigate AI-Detected Differences |
| 74 | + |
| 75 | +Once Visual AI is active, the system automatically draws boxes around what it has identified as significant visual changes on the "Captured" screenshot. You can then interact with these boxes to learn more. |
| 76 | + |
| 77 | +| User Interaction | Visual Feedback | |
| 78 | +| :--- | :--- | |
| 79 | +| **Default View** | Boxes are drawn around each meaningful visual difference the AI has detected. | |
| 80 | +| **Hover** on a diff box | The box under your cursor highlights slightly, indicating it is interactive. | |
| 81 | +| **Click** a diff box | The box turns red to confirm your selection, and a floating summary panel appears with a description of the change. | |
| 82 | + |
| 83 | +--- |
| 84 | + |
| 85 | +### Step 3: Understand the AI-Generated Summary |
| 86 | + |
| 87 | +When you click on a diff box, a panel appears with a concise, human-readable explanation of the change. This summary describes the full scope of the difference, allowing for quick recognition and understanding. For example, it might summarize a complex visual change as "Content Grid Replaced with Placeholders." |
| 88 | + |
| 89 | +<img loading="lazy" src={require('../assets/images/smart-visual-testing/RCA/ai-summary-popup.png').default} alt="AI-Generated Summary Pop-up" className="doc_img"/> |
| 90 | + |
| 91 | +--- |
| 92 | + |
| 93 | +## Key Advantages of Humanize Diff |
| 94 | + |
| 95 | +* **Accelerated Reviews:** Drastically reduce review time by focusing only on UI changes that matter to your users. |
| 96 | +* **Reduced Noise:** Automatically ignore distracting, pixel-level differences caused by rendering, anti-aliasing, or other insignificant factors. |
| 97 | +* **Clearer Communication:** Use the AI-generated summaries to write precise and easy-to-understand bug reports and team communications. |
| 98 | +* **Intuitive Analysis:** Understand the "what" and "why" of a visual regression almost instantly, without needing to manually inspect the changes. |
| 99 | + |
| 100 | +> **A Note on AI:** Please be aware that while the Visual AI is highly advanced, it can occasionally make mistakes. It's a powerful assistant designed to guide your attention to the most important areas. |
0 commit comments