or run

npx @tessl/cli init
Log in

Version

Files

tile.json

task.mdevals/scenario-4/

Visual Diff Report Generator

Build a tool that compares two images and generates multiple diff visualizations with varying levels of context preservation.

Requirements

Your tool should accept two image file paths and produce three different diff outputs, each highlighting changes with different background visibility levels:

  1. High Contrast Mode: Maximum emphasis on differences with minimal background distraction
  2. Balanced Mode: Moderate visibility of unchanged areas while still emphasizing differences
  3. Context Preserved Mode: Full original image context with highlighted differences

Each output should:

  • Use red color to highlight differing pixels
  • Save the result as a PNG file with an appropriate suffix (e.g., diff-high-contrast.png)
  • Display the mismatch count for the comparison

The tool should handle images with transparency correctly and report dimension mismatches appropriately.

Test Cases

  • When comparing two identical images, all three diff outputs should show grayscale versions of the original with zero mismatches @test

  • When comparing images that differ by a few pixels, the high contrast output should show differences on a near-white background, while the context preserved output should maintain full original brightness @test

  • When image dimensions don't match, an error should be reported @test

Implementation

@generates

API

/**
 * Generates multiple diff visualizations between two images
 *
 * @param {string} img1Path - Path to first PNG image
 * @param {string} img2Path - Path to second PNG image
 * @param {string} outputPrefix - Prefix for output filenames
 * @returns {Object} Object containing mismatch count and output paths
 */
function generateDiffReport(img1Path, img2Path, outputPrefix) {
  // IMPLEMENTATION HERE
}

module.exports = { generateDiffReport };

Dependencies { .dependencies }

pixelmatch { .dependency }

Provides pixel-level image comparison with configurable visualization options.

pngjs { .dependency }

Provides PNG encoding and decoding support for reading and writing image files.