From 928747cf86b71e84baded198edb62bcc3183ce78 Mon Sep 17 00:00:00 2001 From: Teimur Gasanov Date: Thu, 2 Oct 2025 15:13:24 +0600 Subject: [PATCH] perf: use blazediff instead of pixelmatch --- .github/dependabot.yml | 2 - cirq-web/cirq_web/README.md | 2 +- .../e2e/bloch_sphere/bloch_sphere_e2e_test.ts | 6 +-- .../cirq_web/e2e/circuit/circuit_e2e_test.ts | 26 +++++----- cirq-web/cirq_web/package-lock.json | 52 ++++++------------- cirq-web/cirq_web/package.json | 3 +- 6 files changed, 35 insertions(+), 56 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 73189a3660d..d7ab709797f 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -48,8 +48,6 @@ updates: ignore: - dependency-name: "chai" versions: [">= 5.0.0"] - - dependency-name: "pixelmatch" - versions: ["> 5.3.0"] groups: # Group non-security version minor & patch updates into one PR. # Security and major update versions will be done as individual PRs. diff --git a/cirq-web/cirq_web/README.md b/cirq-web/cirq_web/README.md index 78bb538ae87..ae2b0d78b82 100644 --- a/cirq-web/cirq_web/README.md +++ b/cirq-web/cirq_web/README.md @@ -293,7 +293,7 @@ PNG screenshot, and comparing it to an expected PNG. We use [Mocha](https://mochajs.org) and [Chai](https://www.chaijs.com/) as our main testing tools. For comparing image diffs, we use -[Pixelmatch](https://github.com/mapbox/pixelmatch) and +[BlazeDiff](https://www.blazediff.dev/) and [pngjs](https://github.com/lukeapage/pngjs). #### Unit testing diff --git a/cirq-web/cirq_web/e2e/bloch_sphere/bloch_sphere_e2e_test.ts b/cirq-web/cirq_web/e2e/bloch_sphere/bloch_sphere_e2e_test.ts index 5e1b218e958..09e20e5f1e2 100644 --- a/cirq-web/cirq_web/e2e/bloch_sphere/bloch_sphere_e2e_test.ts +++ b/cirq-web/cirq_web/e2e/bloch_sphere/bloch_sphere_e2e_test.ts @@ -15,7 +15,7 @@ import puppeteer from 'puppeteer'; import {expect} from 'chai'; import {readFileSync} from 'fs'; -import pixelmatch from 'pixelmatch'; +import blazediff from '@blazediff/core'; import * as PNG from 'pngjs'; import * as temp from 'temp'; import * as path from 'path'; @@ -79,7 +79,7 @@ describe('Bloch sphere', () => { const {width, height} = expected; const diff = new PNG.PNG({width, height}); - const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, { + const pixels = blazediff(expected.data, actual.data, diff.data, width, height, { threshold: 0.1, }); @@ -107,7 +107,7 @@ describe('Bloch sphere', () => { const {width, height} = expected; const diff = new PNG.PNG({width, height}); - const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, { + const pixels = blazediff(expected.data, actual.data, diff.data, width, height, { threshold: 0.1, }); diff --git a/cirq-web/cirq_web/e2e/circuit/circuit_e2e_test.ts b/cirq-web/cirq_web/e2e/circuit/circuit_e2e_test.ts index 39191530a9c..28498fe044b 100644 --- a/cirq-web/cirq_web/e2e/circuit/circuit_e2e_test.ts +++ b/cirq-web/cirq_web/e2e/circuit/circuit_e2e_test.ts @@ -15,7 +15,7 @@ import puppeteer from 'puppeteer'; import {expect} from 'chai'; import {readFileSync} from 'fs'; -import pixelmatch from 'pixelmatch'; +import blazediff from '@blazediff/core'; import * as PNG from 'pngjs'; import * as temp from 'temp'; import * as path from 'path'; @@ -62,21 +62,21 @@ describe('Circuit', () => { const circuit = createGridCircuit( [ { - 'wire_symbols': ['Z'], - 'location_info': [{'row': 2, 'col': 3}], - 'color_info': ['cyan'], + 'wire_symbols': ['Z'], + 'location_info': [{'row': 2, 'col': 3}], + 'color_info': ['cyan'], 'moment': 0 }, - { - 'wire_symbols': ['X'], - 'location_info': [{'row': 2, 'col': 3}], - 'color_info': ['black'], + { + 'wire_symbols': ['X'], + 'location_info': [{'row': 2, 'col': 3}], + 'color_info': ['black'], 'moment': 1 }, - { - 'wire_symbols': ['@', 'X'], - 'location_info': [{'row': 3, 'col': 0}, {'row': 0, 'col': 0}], - 'color_info': ['black', 'black'], + { + 'wire_symbols': ['@', 'X'], + 'location_info': [{'row': 3, 'col': 0}, {'row': 0, 'col': 0}], + 'color_info': ['black', 'black'], 'moment': 0 }, ], 5, 'mycircuitdiv' @@ -93,7 +93,7 @@ describe('Circuit', () => { const {width, height} = expected; const diff = new PNG.PNG({width, height}); - const pixels = pixelmatch(expected.data, actual.data, diff.data, width, height, { + const pixels = blazediff(expected.data, actual.data, diff.data, width, height, { threshold: 0.1, }); diff --git a/cirq-web/cirq_web/package-lock.json b/cirq-web/cirq_web/package-lock.json index 5674af76d15..6b0e424e3f4 100644 --- a/cirq-web/cirq_web/package-lock.json +++ b/cirq-web/cirq_web/package-lock.json @@ -16,11 +16,11 @@ "typescript": "^5.7.3" }, "devDependencies": { + "@blazediff/core": "^1.1.0", "@types/chai": "^4.2.18", "@types/jsdom": "^21.1.7", "@types/mocha": "^10.0.10", "@types/node": "^24.0.8", - "@types/pixelmatch": "^5.2.4", "@types/pngjs": "^6.0.0", "@types/puppeteer": "^7.0.4", "@types/temp": "^0.9.0", @@ -34,7 +34,6 @@ "mocha": "^11.1.0", "npm": "^11.0.0", "nyc": "^17.1.0", - "pixelmatch": "^5.3.0", "pngjs": "^7.0.0", "puppeteer": "^24.1.0", "temp": "^0.9.4", @@ -357,6 +356,22 @@ "node": ">=6.9.0" } }, + "node_modules/@blazediff/core": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@blazediff/core/-/core-1.1.0.tgz", + "integrity": "sha512-f1qdZ2Z0f9bqityiH07mFz29uVGBL9QySKFpBz6dyTjt5ucCdW0pb4umTepZI5rKJVzaw0ZAsE7VoGC56usO/g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@blazediff/types": "1.1.0" + } + }, + "node_modules/@blazediff/types": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@blazediff/types/-/types-1.1.0.tgz", + "integrity": "sha512-yNTG53982iTy6sFzEdxnt0pLcFyMuLVY+FKaeMQiyeCaOjELGmELmamDxltIHfDnr8/laxijPgdnmTRy58sOiQ==", + "dev": true + }, "node_modules/@cspotcode/source-map-support": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", @@ -1356,16 +1371,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/pixelmatch": { - "version": "5.2.6", - "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.6.tgz", - "integrity": "sha512-wC83uexE5KGuUODn6zkm9gMzTwdY5L0chiK+VrKcDfEjzxh1uadlWTvOmAbCpnM9zx/Ww3f8uKlYQVnO/TrqVg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/pngjs": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/@types/pngjs/-/pngjs-6.0.5.tgz", @@ -11353,29 +11358,6 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pixelmatch": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-5.3.0.tgz", - "integrity": "sha512-o8mkY4E/+LNUf6LzX96ht6k6CEDi65k9G2rjMtBe9Oo+VPKSvl+0GKHuH/AlG+GA5LPG/i5hrekkxUc3s2HU+Q==", - "dev": true, - "license": "ISC", - "dependencies": { - "pngjs": "^6.0.0" - }, - "bin": { - "pixelmatch": "bin/pixelmatch" - } - }, - "node_modules/pixelmatch/node_modules/pngjs": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-6.0.0.tgz", - "integrity": "sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12.13.0" - } - }, "node_modules/pkg-dir": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", diff --git a/cirq-web/cirq_web/package.json b/cirq-web/cirq_web/package.json index e32a9aae134..191962ce5b7 100644 --- a/cirq-web/cirq_web/package.json +++ b/cirq-web/cirq_web/package.json @@ -12,11 +12,11 @@ "typescript": "^5.7.3" }, "devDependencies": { + "@blazediff/core": "^1.1.0", "@types/chai": "^4.2.18", "@types/jsdom": "^21.1.7", "@types/mocha": "^10.0.10", "@types/node": "^24.0.8", - "@types/pixelmatch": "^5.2.4", "@types/pngjs": "^6.0.0", "@types/puppeteer": "^7.0.4", "@types/temp": "^0.9.0", @@ -30,7 +30,6 @@ "mocha": "^11.1.0", "npm": "^11.0.0", "nyc": "^17.1.0", - "pixelmatch": "^5.3.0", "pngjs": "^7.0.0", "puppeteer": "^24.1.0", "temp": "^0.9.4",