### Quick Start

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/bun/page.mdx

A basic example demonstrating how to use the `toMatchImageSnapshot` matcher in a Bun test.

```APIDOC
## Quick Start

```typescript
import { expect, it } from 'bun:test';
import '@blazediff/bun';

it('should match screenshot', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
    snapshotIdentifier: 'homepage',
  });
});
```

<Callout type="info">
  The matcher auto-registers when you import `@blazediff/bun`. No additional setup required!
</Callout>

<Callout type="warning">
  Unlike Jest/Vitest, Bun has limited context exposure. Always provide a `snapshotIdentifier` for reliable snapshot management.
</Callout>
```

--------------------------------

### Quick Start

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/vitest/page.mdx

A basic example demonstrating how to use the `toMatchImageSnapshot` matcher in a Vitest test.

```APIDOC
## Quick Start

```typescript
import { expect, it } from 'vitest';
import '@blazediff/vitest';

it('should match screenshot', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});
```

<Callout type="info">
  The matcher auto-registers when you import `@blazediff/vitest`. No additional setup required!
</Callout>
```

--------------------------------

### Basic Snapshot Test Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/vitest/README.md

This example demonstrates a typical snapshot test setup within a Vitest `it` block. Ensure `page.screenshot()` is correctly implemented to capture the image data.

```typescript
import { expect, it } from 'vitest';
import '@blazediff/vitest';

it('renders correctly', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});
```

--------------------------------

### Install @blazediff/ssim

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/ssim/page.mdx

Install the library using npm or yarn.

```sh
npm install @blazediff/ssim
```

--------------------------------

### Quick Start

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

A basic example demonstrating how to use the `toMatchImageSnapshot` matcher in your Jest tests. The matcher auto-registers on import.

```APIDOC
## Quick Start

```typescript
import '@blazediff/jest';

describe('Visual Regression Tests', () => {
  it('should match screenshot', async () => {
    const screenshot = await page.screenshot();

    await expect(screenshot).toMatchImageSnapshot({
      method: 'core',
    });
  });
});
```

<Callout type="info">
  The matcher auto-registers when you import `@blazediff/jest`. No additional setup required!
</Callout>
```

--------------------------------

### Using Sharp Codec Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/cli/README.md

Example demonstrating the use of the 'sharp' codec for improved performance with 'core', 'gmsd', 'ssim', or 'msssim' commands. This example uses JPEG input files.

```bash
blazediff-cli core image1.jpg image2.jpg --codec sharp
```

--------------------------------

### Installation

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/bun/page.mdx

Install the Blazediff Bun matcher using npm or yarn.

```APIDOC
## Installation

```sh
npm install --save-dev @blazediff/bun
```

**Peer dependencies**: Bun >= 1.0.0
```

--------------------------------

### Install @blazediff/codec-jsquash-png

Source: https://github.com/teimurjan/blazediff/blob/main/packages/codec-jsquash-png/README.md

Install the package using npm.

```bash
npm install @blazediff/codec-jsquash-png
```

--------------------------------

### Install @blazediff/matcher

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/matcher/page.mdx

Install the core snapshot comparison package using npm or yarn.

```sh
npm install @blazediff/matcher
```

--------------------------------

### Installation

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/vitest/page.mdx

Install the @blazediff/vitest package as a development dependency.

```APIDOC
## Installation

```sh
npm install --save-dev @blazediff/vitest
```

**Peer dependencies**: Vitest >= 1.0.0
```

--------------------------------

### Installation

Source: https://github.com/teimurjan/blazediff/blob/main/packages/ui/README.md

Install the @blazediff/ui package using npm.

```APIDOC
## Installation

```bash
npm install @blazediff/ui
```
```

--------------------------------

### Install Dependencies and Build Project

Source: https://github.com/teimurjan/blazediff/blob/main/CONTRIBUTING.md

Clone the repository, install project dependencies using pnpm, and build all packages.

```bash
git clone https://github.com/YOUR_USERNAME/blazediff.git
cd blazediff

pnpm install

pnpm build
```

--------------------------------

### Install @blazediff/bun

Source: https://github.com/teimurjan/blazediff/blob/main/packages/bun/README.md

Install the package as a development dependency using npm.

```bash
npm install --dev @blazediff/bun
```

--------------------------------

### Install @blazediff/object

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/object/page.mdx

Install the package using npm or yarn.

```sh
npm install @blazediff/object
```

--------------------------------

### Install Pre-commit Hooks

Source: https://github.com/teimurjan/blazediff/blob/main/CLAUDE.md

Command to install git hooks managed by `prek`. This should be run after cloning the repository.

```bash
npx @j178/prek install
```

--------------------------------

### Install @blazediff/bun

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/bun/page.mdx

Install the package as a development dependency using npm or yarn.

```sh
npm install --save-dev @blazediff/bun
```

--------------------------------

### Install @blazediff/ui

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/ui/page.mdx

Install the @blazediff/ui package using npm or yarn.

```sh
npm install @blazediff/ui
```

--------------------------------

### Native Binary Diff Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/cli/README.md

Example of performing a native binary diff with custom threshold and anti-aliasing enabled. The output image is saved as diff.png.

```bash
blazediff-cli image1.png image2.png diff.png
blazediff-cli core-native image1.png image2.png diff.png -t 0.05 -a
```

--------------------------------

### Install Octave

Source: https://github.com/teimurjan/blazediff/blob/main/packages/ssim/TESTING.md

Instructions for installing Octave on macOS and Linux systems using package managers.

```bash
# macOS (Homebrew):
brew install octave

# Linux (apt):
sudo apt-get install octave
```

--------------------------------

### CLI Usage

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/ssim/page.mdx

Command-line interface examples for using Blazediff SSIM, MS-SSIM, and Hitchhiker's SSIM.

```APIDOC
## CLI Usage

### Standard SSIM
```bash
blazediff-cli ssim image1.png image2.png
```

### MS-SSIM
```bash
blazediff-cli msssim image1.png image2.png
```

### Hitchhiker's SSIM
```bash
blazediff-cli hitchhikers-ssim image1.png image2.png
```

### Hitchhiker's SSIM with Options
```bash
blazediff-cli hitchhikers-ssim image1.png image2.png --window-size 16 --no-cov-pooling
```
```

--------------------------------

### Usage: Basic Snapshot Test Example

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/bun/page.mdx

A standard example demonstrating a basic snapshot test for rendering a homepage.

```typescript
import { expect, it } from 'bun:test';
import '@blazediff/bun';

it('renders homepage correctly', async () => {
  const screenshot = await browser.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
    snapshotIdentifier: 'homepage',
  });
});
```

--------------------------------

### Install @blazediff/vitest

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/vitest/page.mdx

Install the package as a development dependency using npm or yarn.

```sh
npm install --save-dev @blazediff/vitest
```

--------------------------------

### Install @blazediff/gmsd

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/gmsd/page.mdx

Install the package using npm or yarn.

```sh
npm install @blazediff/gmsd
```

--------------------------------

### Install @blazediff/core-native

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/core-native/page.mdx

Install the package using npm or yarn. This package provides pre-built binaries for major platforms.

```sh
npm install @blazediff/core-native
```

--------------------------------

### Quick Start: Basic Snapshot Test

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/bun/page.mdx

Import the library to auto-register the matcher. Then, use `expect().toMatchImageSnapshot()` in your tests.

```typescript
import { expect, it } from 'bun:test';
import '@blazediff/bun';

it('should match screenshot', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
    snapshotIdentifier: 'homepage',
  });
});
```

--------------------------------

### Output Summary Example

Source: https://github.com/teimurjan/blazediff/blob/main/crates/blazediff/INTERPRET.md

An example of a summarized output detailing detected visual changes.

```text
Moderate visual change detected (1.87% of image, 10 regions).
Content changed: 4 regions (bottom, center).
Content added: 3 regions (right, bottom, bottom-left).
Content removed: 3 regions (bottom, top-left, center).
```

--------------------------------

### JavaScript Pixel Diff Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/cli/README.md

Example of using the JavaScript core comparison with a specified output path and threshold. The diff image will be saved as diff.png.

```bash
blazediff-cli core image1.png image2.png -o diff.png -t 0.05
```

--------------------------------

### Configuration: Global Setup (jest.config.js)

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

Configure Jest globally to automatically import the blazediff matcher by referencing a setup file in `setupFilesAfterEnv`.

```javascript
// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};
```

--------------------------------

### Bun Matcher: All Comparison Methods

Source: https://context7.com/teimurjan/blazediff/llms.txt

Example showing the use of various comparison methods ('core-native', 'ssim') with the Bun matcher, each requiring a `snapshotIdentifier`.

```typescript
it('supports all comparison methods', async () => {
  await expect('/path/to/image.png').toMatchImageSnapshot({
    method: 'core-native',
    snapshotIdentifier: 'native-test',
  });

  await expect(imageBuffer).toMatchImageSnapshot({
    method: 'ssim',
    snapshotIdentifier: 'ssim-test',
  });
});
```

--------------------------------

### Install @blazediff/codec-pngjs

Source: https://github.com/teimurjan/blazediff/blob/main/packages/codec-pngjs/README.md

Install the package using npm. This command adds the PNG codec to your project dependencies.

```bash
npm install @blazediff/codec-pngjs
```

--------------------------------

### Install Blazediff with Cargo

Source: https://github.com/teimurjan/blazediff/blob/main/crates/blazediff/README.md

Use this command to install the blazediff tool globally using the Cargo package manager.

```bash
cargo install blazediff
```

--------------------------------

### Install @blazediff/cli Globally

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Installs the blazediff CLI globally for command-line access. Use this for system-wide availability.

```sh
npm install -g @blazediff/cli
```

--------------------------------

### Quick Start: Basic Visual Regression Test

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

Import the matcher to auto-register it. Then, use `expect().toMatchImageSnapshot()` in your tests to compare screenshots.

```typescript
import '@blazediff/jest';

describe('Visual Regression Tests', () => {
  it('should match screenshot', async () => {
    const screenshot = await page.screenshot();

    await expect(screenshot).toMatchImageSnapshot({
      method: 'core',
    });
  });
});
```

--------------------------------

### Install @blazediff/codec-sharp

Source: https://github.com/teimurjan/blazediff/blob/main/packages/codec-sharp/README.md

Install the package using npm. This package provides image codec functionality for BlazeDiff.

```bash
npm install @blazediff/codec-sharp
```

--------------------------------

### MS-SSIM Multi-Scale Similarity Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/cli/README.md

Example of calculating the MS-SSIM multi-scale similarity. The MS-SSIM map visualization can be saved to msssim-map.png.

```bash
blazediff-cli msssim image1.png image2.png
blazediff-cli msssim image1.png image2.png -o msssim-map.png
```

--------------------------------

### Usage Patterns

Source: https://github.com/teimurjan/blazediff/blob/main/packages/vitest/README.md

Examples of different ways to use the `toMatchImageSnapshot` matcher, including different comparison methods and updating snapshots.

```APIDOC
## Usage Patterns

### Basic Snapshot Test

```typescript
import { expect, it } from 'vitest';
import '@blazediff/vitest';

it('renders correctly', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});
```

### Different Comparison Methods

```typescript
// Fast Rust-native comparison (file paths only)
await expect('/path/to/image.png').toMatchImageSnapshot({
  method: 'core-native',
});

// Pure JavaScript comparison
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'core',
});

// Perceptual similarity (SSIM)
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'ssim',
});

// Gradient-based comparison
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'gmsd',
});
```

### Update Snapshots

```bash
# Update all snapshots
vitest -u

# Update snapshots for specific test
vitest -u path/to/test.spec.ts

# Or using environment variable
VITEST_UPDATE_SNAPSHOTS=true vitest
```

Or programmatically:

```typescript
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  updateSnapshots: true,
});
```
```

--------------------------------

### Configuration: Global Setup (jest.setup.js)

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

The `jest.setup.js` file imports the blazediff Jest matcher, making it available globally for all tests without explicit imports in each test file.

```javascript
import '@blazediff/jest';
```

--------------------------------

### Configuration: Global Setup

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/vitest/page.mdx

Instructions on how to configure Vitest to automatically import the Blazediff matcher, avoiding manual imports in each test file.

```APIDOC
## Configuration

### Global Setup

To avoid importing in every test file, configure Vitest:

```typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'],
  },
});
```

```typescript
// vitest.setup.ts
import '@blazediff/vitest';
```
```

--------------------------------

### Configuration: Global Setup for Vitest

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/vitest/page.mdx

Configure Vitest to automatically import '@blazediff/vitest' in all test files by adding it to the `setupFiles` array in `vitest.config.ts`.

```typescript
// vitest.config.ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.ts'],
  },
});
```

```typescript
// vitest.setup.ts
import '@blazediff/vitest';
```

--------------------------------

### Usage Patterns

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/bun/page.mdx

Examples of common usage patterns for the `toMatchImageSnapshot` matcher.

```APIDOC
## Usage Patterns

### Basic Snapshot Test

```typescript
import { expect, it } from 'bun:test';
import '@blazediff/bun';

it('renders homepage correctly', async () => {
  const screenshot = await browser.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
    snapshotIdentifier: 'homepage',
  });
});
```

### Custom Thresholds

Allow small differences while catching regressions:

```typescript
// Allow up to 100 pixels difference
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'homepage',
  failureThreshold: 100,
  failureThresholdType: 'pixel',
});

// Allow up to 0.5% difference
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'homepage',
  failureThreshold: 0.5,
  failureThresholdType: 'percent',
});
```

<Callout>
  Use percentage-based thresholds for responsive images that may change size across different viewports.
</Callout>

### Update Snapshots

```bash
# Update all failing snapshots (recommended)
bun test --update-snapshots

# Using environment variable
BUN_UPDATE_SNAPSHOTS=true bun test
```

<Callout type="info">
  The Bun's `--update-snapshots` flag is consumed by Bun internally and won't update image snapshots.
</Callout>

Programmatically:

```typescript
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'homepage',
  updateSnapshots: true,
});
```

### Custom Snapshot Directory

```typescript
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'homepage',
  snapshotsDir: '__image_snapshots__',
});
```
```

--------------------------------

### SSIM Structural Similarity Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/cli/README.md

Example of calculating the SSIM structural similarity. The SSIM map visualization can be saved to ssim-map.png.

```bash
blazediff-cli ssim image1.png image2.png
blazediff-cli ssim image1.png image2.png -o ssim-map.png
```

--------------------------------

### Quick Start: Basic Image Snapshot Test

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/vitest/page.mdx

Import the library to auto-register the `toMatchImageSnapshot` matcher. Then, use it within your Vitest tests to compare screenshots against stored snapshots.

```typescript
import { expect, it } from 'vitest';
import '@blazediff/vitest';

it('should match screenshot', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});
```

--------------------------------

### Install @blazediff/core via npm or JSR

Source: https://github.com/teimurjan/blazediff/blob/main/README.md

Install the core BlazeDiff package using either npm or Bun for Node.js environments, or use Deno/Bun with JSR for broader compatibility.

```sh
# Node / Bun via npm
npm install @blazediff/core
bun i @blazediff/core
```

```sh
# Deno / Bun via JSR
den o add jsr:@blazediff/core
bunx jsr add @blazediff/core
```

--------------------------------

### Usage Patterns

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

Examples of common usage patterns for the `toMatchImageSnapshot` matcher, such as basic tests, custom thresholds, updating snapshots, and custom directories.

```APIDOC
## Usage Patterns

### Basic Snapshot Test

```typescript
import '@blazediff/jest';

it('renders homepage correctly', async () => {
  const screenshot = await browser.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});
```

### Custom Thresholds

Allow small differences while catching regressions:

```typescript
// Allow up to 100 pixels difference
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  failureThreshold: 100,
  failureThresholdType: 'pixel',
});

// Allow up to 0.5% difference
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  failureThreshold: 0.5,
  failureThresholdType: 'percent',
});
```

<Callout>
  Use percentage-based thresholds for responsive images that may change size across different viewports.
</Callout>

### Update Snapshots

```bash
# Update all failing snapshots
jest -u

# Update snapshots for specific test file
jest -u src/components/Button.test.tsx

# Update snapshots matching pattern
jest -u --testNamePattern="renders correctly"

# Using environment variable
JEST_UPDATE_SNAPSHOTS=true jest
```

Programmatically:

```typescript
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  updateSnapshots: true,
});
```

### Custom Snapshot Directory

```typescript
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotsDir: '__image_snapshots__', // Custom directory
});
```

### Custom Snapshot Identifier

```typescript
await expect(screenshot).toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'homepage-desktop-1920x1080',
});
```

### Negation

Test that images are intentionally different:

```typescript
const before = await page.screenshot();
await page.click('.toggle-theme');
const after = await page.screenshot();

// Assert that theme toggle changed the UI
await expect(after).not.toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'before-theme-toggle',
});
```
```

--------------------------------

### Manual Setup Blazediff Matcher

Source: https://github.com/teimurjan/blazediff/blob/main/packages/vitest/README.md

Manually sets up the Blazediff matchers by calling `setupBlazediffMatchers()` explicitly. This provides an alternative to auto-setup.

```typescript
import { setupBlazediffMatchers } from '@blazediff/vitest';

setupBlazediffMatchers();
```

--------------------------------

### Example Interpret Mode JSON Output

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Illustrates the JSON output format from the interpret mode, showing summary, severity, and diff percentage.

```bash
$ blazediff-cli image1.png image2.png --interpret
{
  "summary": "Moderate visual change detected (1.87% of image, 10 regions).\n...",
  "severity": "Medium",
  "diffPercentage": 1.87,
  "regions": [...] 
}
```

--------------------------------

### Basic Snapshot Test with page.screenshot()

Source: https://github.com/teimurjan/blazediff/blob/main/packages/jest/README.md

This example demonstrates a basic snapshot test using `page.screenshot()` to capture the screenshot and then comparing it with `toMatchImageSnapshot`.

```typescript
import '@blazediff/jest';

it('renders correctly', async () => {
  const screenshot = await page.screenshot();

  await expect(screenshot).toMatchImageSnapshot({
    method: 'core',
  });
});
```

--------------------------------

### Auto-setup Blazediff Matcher

Source: https://github.com/teimurjan/blazediff/blob/main/packages/vitest/README.md

Automatically registers the Blazediff matcher by importing the package in your test file. This is the recommended setup method.

```typescript
import '@blazediff/vitest';
```

--------------------------------

### Example Interpret Mode HTML Report Generation

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Shows the command to generate an HTML report, which includes side-by-side images and clickable region rows.

```bash
$ blazediff-cli image1.png image2.png report.html --output-format html
# writes report.html with side-by-side images and clickable region rows
```

--------------------------------

### Quick Start: Get or Create Snapshot

Source: https://github.com/teimurjan/blazediff/blob/main/packages/matcher/README.md

Use `getOrCreateSnapshot` to compare an image against a stored snapshot. It returns a result object indicating if the test passed and the status of the snapshot. Requires an image buffer or file path, comparison options, and test context.

```typescript
import { getOrCreateSnapshot } from '@blazediff/matcher';

const result = await getOrCreateSnapshot(
  imageBuffer, // or file path
  {
    method: 'core',
    failureThreshold: 0.01,
    failureThresholdType: 'percent',
  },
  {
    testPath: '/path/to/test.spec.ts',
    testName: 'should render correctly',
  }
);

console.log(result.pass); // true/false
console.log(result.snapshotStatus); // 'added' | 'matched' | 'updated' | 'failed'
console.log(result.diffPercentage); // e.g., 0.05
```

--------------------------------

### core (JavaScript) Options Help

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Lists the available options for the JavaScript core comparison, including output path, threshold, alpha, diff color, and codec.

```bash
blazediff-cli core <image1> <image2> [options]

Options:
  -o, --output <path>      Output diff image path
  -t, --threshold <n>      Matching threshold (0-1, default: 0.1)
  -a, --alpha <n>          Opacity of original in diff (0-1, default: 0.1)
  --diff-color <r,g,b>     Color for different pixels (default: 255,0,0)
  --aa-color <r,g,b>       Color for anti-aliased pixels (default: 255,255,0)
  --include-aa             Include anti-aliased pixels in diff count
  --diff-mask              Output diff mask with transparent background
  --codec <name>           Image codec (pngjs, sharp, jsquash-png)
  -h, --help               Display help
```

--------------------------------

### Installation

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

Install the Blazediff Jest matcher using npm or yarn. Ensure you have Jest version 27.0.0 or higher installed.

```APIDOC
## Installation

```sh
npm install --save-dev @blazediff/jest
```

**Peer dependencies**: Jest >= 27.0.0
```

--------------------------------

### CLI Compare with Options

Source: https://github.com/teimurjan/blazediff/blob/main/packages/core-native/README.md

Use command-line options like `--threshold` and `--antialiasing` to customize the image comparison process.

```bash
npx blazediff expected.png actual.png diff.png --threshold 0.05 --antialiasing
```

--------------------------------

### core-native Options Help

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Displays available options for the core-native command, including threshold, antialiasing, diff mask, compression, and interpretation.

```bash
blazediff-cli core-native <image1> <image2> [output] [options]

Options:
  -t, --threshold <n>        Color difference threshold (0-1, default: 0.1)
  -a, --antialiasing         Enable anti-aliasing detection
  --diff-mask                Output only differences (transparent background)
  -c, --compression <n>      PNG compression level (0-9, default: 0)
  --interpret                Run structured interpretation (region detection + classification)
  --output-format <fmt>      Output format: png (default) or html (interpret report)
  -h, --help                 Display help
```

--------------------------------

### Prepare InpaintCOCO Dataset

Source: https://github.com/teimurjan/blazediff/blob/main/crates/blazediff-interpret-verify/README.md

Use this command to download and prepare the InpaintCOCO dataset, which is suitable for testing ContentChange and ColorChange functionalities. Ensure you are running from the repository root.

```sh
uv run --with datasets --with Pillow scripts/prepare_inpaintcoco.py
```

--------------------------------

### Install @blazediff/jest

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

Install the package as a development dependency. Ensure Jest version is 27.0.0 or higher.

```sh
npm install --save-dev @blazediff/jest
```

--------------------------------

### Install @blazediff/cli Locally

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Installs the blazediff CLI as a development dependency in your project. Suitable for project-specific usage.

```sh
npm install --save-dev @blazediff/cli
```

--------------------------------

### Install Octave Image Package

Source: https://github.com/teimurjan/blazediff/blob/main/packages/ssim/TESTING.md

Command to install the 'image' package for Octave, which provides essential image processing functions.

```bash
octave --eval "pkg install -forge image"
```

--------------------------------

### Basic Usage of core-native

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Compares two images using the default native Rust binary. This is the fastest comparison method.

```bash
# Default command (core-native)
blazediff-cli image1.png image2.png diff.png
```

```bash
# Or explicitly
blazediff-cli core-native image1.png image2.png diff.png
```

--------------------------------

### Install ImageMagick or ffmpeg

Source: https://github.com/teimurjan/blazediff/blob/main/packages/ssim/TESTING.md

Commands to install ImageMagick or ffmpeg on macOS and Ubuntu/Debian systems, required for JPG to PNG conversion.

```bash
# macOS
brew install imagemagick
# or
brew install ffmpeg

# Ubuntu/Debian
apt install imagemagick
# or
apt install ffmpeg
```

--------------------------------

### CLI Compare Mixed Formats

Source: https://github.com/teimurjan/blazediff/blob/main/packages/core-native/README.md

Compare images with different input formats and specify a different output format, such as PNG input to QOI output.

```bash
npx blazediff expected.png actual.png diff.qoi
```

--------------------------------

### Install @blazediff/react

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/react/page.mdx

Install the @blazediff/react package using npm or yarn. This package provides React components for image comparison.

```sh
npm install @blazediff/react
```

--------------------------------

### Clone and Prepare Img-Diff Dataset

Source: https://github.com/teimurjan/blazediff/blob/main/packages/ssim/TESTING.md

Steps to clone the Img-Diff dataset from HuggingFace, extract necessary files, and convert image formats for testing.

```bash
git clone https://huggingface.co/datasets/datajuicer/Img-Diff
cd Img-Diff && unzip -q object_removal.zip && cd ..

./scripts/prepare-imgdiff-fixtures.sh 50
```

--------------------------------

### Using Different Comparison Methods

Source: https://github.com/teimurjan/blazediff/blob/main/packages/jest/README.md

Demonstrates how to use various comparison algorithms provided by blazediff. Supports file paths or image buffers for comparison.

```typescript
// Fast Rust-native comparison (file paths only)
await expect('/path/to/image.png').toMatchImageSnapshot({
  method: 'core-native',
});

// Pure JavaScript comparison
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'core',
});

// Perceptual similarity (SSIM)
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'ssim',
});

// Gradient-based comparison
await expect(imageBuffer).toMatchImageSnapshot({
  method: 'gmsd',
});
```

--------------------------------

### Run ContentChange/ColorChange Benchmark

Source: https://github.com/teimurjan/blazediff/blob/main/crates/blazediff-interpret-verify/BENCHMARKS.md

Execute the blazediff-interpret-verify tool for ContentChange/ColorChange cases using a specified manifest file and minimum pixel threshold.

```sh
cargo run --release -p blazediff-interpret-verify -- --manifest ../data/inpaintcoco/manifest.json --min-pixels 500
```

--------------------------------

### GMSD Similarity Metric Example

Source: https://github.com/teimurjan/blazediff/blob/main/packages/cli/README.md

Example of calculating the GMSD similarity metric. The output can be saved to a file named gms-map.png.

```bash
blazediff-cli gmsd image1.png image2.png
blazediff-cli gmsd image1.png image2.png -o gms-map.png
```

--------------------------------

### Build Image Benchmarks

Source: https://github.com/teimurjan/blazediff/blob/main/CLAUDE.md

Builds the necessary packages for running image benchmarks.

```sh
pnpm --filter @blazediff/image-benchmark build && pnpm --filter @blazediff/object-benchmark build
```

--------------------------------

### Install @blazediff/core

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/core/page.mdx

Install the blazediff core package using npm or yarn. This package provides a drop-in replacement for pixelmatch with improved performance.

```sh
npm install @blazediff/core
```

--------------------------------

### Commit Message Type Examples

Source: https://github.com/teimurjan/blazediff/blob/main/CONTRIBUTING.md

Examples of different commit message types like feat, fix, perf, docs, refactor, test, and chore.

```text
feat(core): add new color space option
fix(bin): resolve CLI argument parsing issue
perf(core): optimize block-based algorithm
docs: update API documentation
```

--------------------------------

### Web Component Styling Example

Source: https://context7.com/teimurjan/blazediff/llms.txt

Apply custom styles to BlazeDiff web components using CSS classes. This example demonstrates styling for swipe and difference modes.

```html
<style>
  .swipe-container { width: 100%; height: 500px; }
  .divider { background: #3b82f6; width: 4px; }
  .diff-container { display: flex; justify-content: center; }
</style>
```

--------------------------------

### CLI Usage: Hitchhiker's SSIM with Options

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/ssim/page.mdx

Demonstrates using command-line options with Hitchhiker's SSIM, such as setting window size and disabling CoV pooling.

```bash
# With options
blazediff-cli hitchhikers-ssim image1.png image2.png --window-size 16 --no-cov-pooling
```

--------------------------------

### Basic Usage of core (JavaScript)

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Compares two images using the pure JavaScript pixel-by-pixel method. Slower but offers more customization.

```bash
blazediff-cli core image1.png image2.png
```

--------------------------------

### gmsd Options Help

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Displays the available options for the GMSD comparison, including output path and downsampling factor.

```bash
blazediff-cli gmsd <image1> <image2> [options]

Options:
  -o, --output <path>      Output GMS map image path
  --downsample <n>         Downsample factor (0 or 1, default: 0)
  -h, --help              Display help
```

--------------------------------

### Adjust Test Timeout

Source: https://github.com/teimurjan/blazediff/blob/main/packages/ssim/TESTING.md

Example of how to increase the test timeout in a test file using Jest or a similar framework.

```typescript
it("test name", { timeout: 30000 }, async () => {
  // Test code
});
```

--------------------------------

### core-native with Options

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/cli/page.mdx

Performs image comparison with custom threshold and anti-aliasing detection enabled. Adjusts sensitivity and detection.

```bash
blazediff-cli image1.png image2.png diff.png --threshold 0.05 --antialiasing
```

--------------------------------

### Run Addition/Deletion Benchmark

Source: https://github.com/teimurjan/blazediff/blob/main/crates/blazediff-interpret-verify/BENCHMARKS.md

Execute the blazediff-interpret-verify tool for Addition/Deletion cases using a specified manifest file and minimum pixel threshold.

```sh
cargo run --release -p blazediff-interpret-verify -- --manifest ../data/addition_deletion/manifest.json --min-pixels 50
```

--------------------------------

### Usage: Negation - Asserting Differences

Source: https://github.com/teimurjan/blazediff/blob/main/apps/website/app/docs/jest/page.mdx

Use `.not.toMatchImageSnapshot()` to assert that two images are intentionally different, for example, after a UI interaction.

```typescript
const before = await page.screenshot();
await page.click('.toggle-theme');
const after = await page.screenshot();

// Assert that theme toggle changed the UI
await expect(after).not.toMatchImageSnapshot({
  method: 'core',
  snapshotIdentifier: 'before-theme-toggle',
});
```