@u1f992/pdfdiff 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@u1f992/pdfdiff",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Visualize and quantify differences between two PDF files.",
   "main": "dist/index.js",
   "bin": {
@@ -32,6 +32,7 @@
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/node": "^22.18.7",
     "coi-serviceworker": "^0.1.7",
+    "fflate": "^0.8.2",
     "http-server": "^14.1.1",
     "nodehog": "^0.1.2",
     "prettier": "^3.5.3",
@@ -41,6 +42,7 @@
     "typescript": "^5.9.2"
   },
   "dependencies": {
+    "@jsquash/png": "^3.1.1",
     "ix": "^7.0.0",
     "jimp": "^1.6.0",
     "mupdf": "^1.26.2",

package/rollup.config.js

@@ -90,6 +90,26 @@ const rollupConfig = defineConfig([
       commonjs(),
     ],
   },
+  {
+    input: "src/cli-png-worker.ts",
+    output: {
+      file: "dist/cli-png-worker.js",
+      sourcemap: true,
+    },
+    plugins: [
+      typescript({ tsconfig: "./tsconfig.json" }),
+      nodeResolve(),
+      commonjs(),
+      copy({
+        targets: [
+          {
+            src: "node_modules/@jsquash/png/codec/pkg/squoosh_png_bg.wasm",
+            dest: "dist",
+          },
+        ],
+      }),
+    ],
+  },
   {
     input: "src/browser.ts",
     output: {

package/src/browser.ts

@@ -1,11 +1,79 @@
 /// <reference lib="dom" />
 
+import encode from "@jsquash/png/encode";
+import { zipSync } from "fflate";
+
 import * as pdfdiff from "./index.ts";
 import { VERSION } from "./version.ts";
 
+async function encodeBitmapToPng(img: {
+  width: number;
+  height: number;
+  bitmap: { data: Uint8Array | Uint8ClampedArray };
+}): Promise<Uint8Array> {
+  const data = img.bitmap.data;
+  const view =
+    data instanceof Uint8ClampedArray
+      ? data
+      : new Uint8ClampedArray(data.buffer, data.byteOffset, data.byteLength);
+  const png = await encode(new ImageData(view, img.width, img.height));
+  return new Uint8Array(png);
+}
+
 const versionEl = document.getElementById("version");
 if (versionEl) versionEl.textContent = "v" + VERSION;
 
+const hideNoDiffEl = document.getElementById(
+  "hide-no-diff",
+) as HTMLInputElement | null;
+const applyHideNoDiff = () => {
+  document.body.classList.toggle("hide-no-diff", !!hideNoDiffEl?.checked);
+};
+hideNoDiffEl?.addEventListener("change", applyHideNoDiff);
+applyHideNoDiff();
+
+const downloadButton = document.getElementById(
+  "download-zip",
+) as HTMLButtonElement | null;
+type ResultPage = {
+  a: Uint8Array;
+  b: Uint8Array;
+  diff: Uint8Array;
+  hasDiff: boolean;
+};
+let lastResultPages: Map<number, ResultPage> | null = null;
+const updateDownloadLabel = () => {
+  if (!downloadButton) return;
+  downloadButton.textContent = hideNoDiffEl?.checked
+    ? "Download zip (diff only)"
+    : "Download zip";
+};
+hideNoDiffEl?.addEventListener("change", updateDownloadLabel);
+updateDownloadLabel();
+
+downloadButton?.addEventListener("click", () => {
+  if (!lastResultPages) return;
+  const diffOnly = !!hideNoDiffEl?.checked;
+  const files: Record<string, Uint8Array> = {};
+  for (const [i, page] of lastResultPages) {
+    if (diffOnly && !page.hasDiff) continue;
+    files[`${i}/a.png`] = page.a;
+    files[`${i}/b.png`] = page.b;
+    files[`${i}/diff.png`] = page.diff;
+  }
+  if (Object.keys(files).length === 0) return;
+  const zipped = zipSync(files, { level: 0 });
+  const blob = new Blob([new Uint8Array(zipped)], { type: "application/zip" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = diffOnly ? "pdfdiff-result-diff-only.zip" : "pdfdiff-result.zip";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+});
+
 async function readFileAsUint8Array(file: File): Promise<Uint8Array> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -28,6 +96,19 @@ document
     const errorElement = document.getElementById("error-message");
     if (errorElement) errorElement.textContent = "";
 
+    const submitButton = (event.currentTarget as HTMLFormElement).querySelector(
+      'button[type="submit"]',
+    ) as HTMLButtonElement | null;
+    const originalSubmitText = submitButton?.textContent ?? "";
+    if (submitButton) {
+      submitButton.disabled = true;
+      submitButton.textContent = "Preparing...";
+    }
+    if (downloadButton) downloadButton.disabled = true;
+    lastResultPages = null;
+    const resultPages = new Map<number, ResultPage>();
+    let completed = false;
+
     try {
       const pdfAFile = (
         document.getElementById("pdf-a") as HTMLInputElement | null
@@ -123,10 +204,13 @@ document
         pdfdiff.visualizeDifferences(pdfA, pdfB, options),
         1,
       )) {
+        if (submitButton) submitButton.textContent = `Page ${i}...`;
         const pageResult = document.createElement("details");
         pageResult.className = "diff-details";
-        pageResult.open =
-          addition.length + deletion.length + modification.length > 0;
+        const totalDiff =
+          addition.length + deletion.length + modification.length;
+        if (totalDiff === 0) pageResult.classList.add("no-diff");
+        pageResult.open = totalDiff > 0;
 
         const summary = document.createElement("summary");
 
@@ -165,23 +249,39 @@ document
 
         const imagesRow = document.createElement("tr");
 
+        const aPng = await encodeBitmapToPng(a);
+        const bPng = await encodeBitmapToPng(b);
+        const diffPng = await encodeBitmapToPng(diff);
+        resultPages.set(i, {
+          a: aPng,
+          b: bPng,
+          diff: diffPng,
+          hasDiff: totalDiff > 0,
+        });
+
         const cellA = document.createElement("td");
         const imageA = document.createElement("img");
-        imageA.src = await a.getBase64("image/png");
+        imageA.src = URL.createObjectURL(
+          new Blob([new Uint8Array(aPng)], { type: "image/png" }),
+        );
         imageA.className = "checkerboard-bg";
         cellA.appendChild(imageA);
         imagesRow.appendChild(cellA);
 
         const cellB = document.createElement("td");
         const imageB = document.createElement("img");
-        imageB.src = await b.getBase64("image/png");
+        imageB.src = URL.createObjectURL(
+          new Blob([new Uint8Array(bPng)], { type: "image/png" }),
+        );
         imageB.className = "checkerboard-bg";
         cellB.appendChild(imageB);
         imagesRow.appendChild(cellB);
 
         const cellDiff = document.createElement("td");
         const imageDiff = document.createElement("img");
-        imageDiff.src = await diff.getBase64("image/png");
+        imageDiff.src = URL.createObjectURL(
+          new Blob([new Uint8Array(diffPng)], { type: "image/png" }),
+        );
         imageDiff.className = "checkerboard-bg";
         cellDiff.appendChild(imageDiff);
         imagesRow.appendChild(cellDiff);
@@ -191,10 +291,20 @@ document
         pageResult.appendChild(imagesTable);
         resultsContainer?.appendChild(pageResult);
       }
+      completed = true;
     } catch (e) {
       console.error(e);
       if (errorElement) {
         errorElement.textContent = `Error: ${(e as Error).message}`;
       }
+    } finally {
+      if (submitButton) {
+        submitButton.disabled = false;
+        submitButton.textContent = originalSubmitText;
+      }
+      if (completed && resultPages.size > 0) {
+        lastResultPages = resultPages;
+        if (downloadButton) downloadButton.disabled = false;
+      }
     }
   });

package/src/cli-png-worker.ts

@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2025  Koutaro Mukai
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import fs from "node:fs";
+import { fileURLToPath } from "node:url";
+import { parentPort } from "node:worker_threads";
+
+import encode, { init } from "@jsquash/png/encode";
+
+export type EncodeJob = {
+  width: number;
+  height: number;
+  data: ArrayBuffer;
+  path: string;
+};
+
+export type EncodeReply = { ok: true } | { ok: false; error: string };
+
+const wasmPath = fileURLToPath(
+  new URL("./squoosh_png_bg.wasm", import.meta.url),
+);
+await init(fs.readFileSync(wasmPath));
+
+if (!parentPort) {
+  throw new Error("cli-png-worker must be run as a worker_threads worker");
+}
+
+const port = parentPort;
+
+port.on("message", async (job: EncodeJob) => {
+  try {
+    const png = await encode(
+      new ImageData(new Uint8ClampedArray(job.data), job.width, job.height),
+    );
+    fs.writeFileSync(job.path, new Uint8Array(png));
+    const reply: EncodeReply = { ok: true };
+    port.postMessage(reply);
+  } catch (e) {
+    const reply: EncodeReply = {
+      ok: false,
+      error: e instanceof Error ? `${e.message}\n${e.stack}` : String(e),
+    };
+    port.postMessage(reply);
+  }
+});

package/src/cli.ts

@@ -20,7 +20,9 @@
 import fs from "node:fs";
 import path from "node:path";
 import util from "node:util";
+import { Worker as ThreadWorker } from "node:worker_threads";
 
+import type { EncodeJob, EncodeReply } from "./cli-png-worker.ts";
 import {
   isValidAlignStrategy,
   defaultOptions,
@@ -28,9 +30,65 @@ import {
   parseHex,
   formatHex,
   visualizeDifferences,
+  perf,
 } from "./index.ts";
+import { sliceBackingBuffer } from "./transferable.ts";
 import { VERSION } from "./version.ts";
 
+class PngWriterPool {
+  private readonly workers: ThreadWorker[] = [];
+  private readonly idle: ThreadWorker[] = [];
+  private readonly waiting: Array<(w: ThreadWorker) => void> = [];
+
+  constructor(size: number, scriptUrl: URL) {
+    for (let i = 0; i < size; i++) {
+      const w = new ThreadWorker(scriptUrl);
+      this.workers.push(w);
+      this.idle.push(w);
+    }
+  }
+
+  private acquire(): Promise<ThreadWorker> {
+    const w = this.idle.pop();
+    if (w) return Promise.resolve(w);
+    return new Promise<ThreadWorker>((resolve) => this.waiting.push(resolve));
+  }
+
+  private release(w: ThreadWorker) {
+    const next = this.waiting.shift();
+    if (next) next(w);
+    else this.idle.push(w);
+  }
+
+  async submit(job: EncodeJob): Promise<void> {
+    const w = await this.acquire();
+    return new Promise<void>((resolve, reject) => {
+      const onMessage = (msg: EncodeReply) => {
+        w.off("message", onMessage);
+        w.off("error", onError);
+        this.release(w);
+        if (msg.ok) resolve();
+        else reject(new Error(msg.error));
+      };
+      const onError = (err: Error) => {
+        w.off("message", onMessage);
+        w.off("error", onError);
+        this.release(w);
+        reject(err);
+      };
+      w.on("message", onMessage);
+      w.once("error", onError);
+      w.postMessage(job, [job.data]);
+    });
+  }
+
+  async terminate(): Promise<void> {
+    await Promise.all(this.workers.map((w) => w.terminate()));
+  }
+}
+
+const _wallSpan = perf.span("cli.wallTotal_ms");
+
 const {
   positionals,
   values: {
@@ -149,6 +207,13 @@ if (Number.isNaN(workers) || workers < 1) {
 }
 
 fs.mkdirSync(outDir, { recursive: true });
+const writerPool = new PngWriterPool(
+  workers,
+  new URL("./cli-png-worker.js", import.meta.url),
+);
+const pendingWrites: Promise<void>[] = [];
+
+const _loopSpan = perf.span("cli.loopWall_ms");
 for await (const [
   i,
   { a, b, diff, addition, deletion, modification },
@@ -172,16 +237,44 @@ for await (const [
   );
   const dir = path.join(outDir, i.toString(10));
   fs.mkdirSync(dir, { recursive: true });
-  fs.writeFileSync(
-    path.join(dir, "a.png"),
-    new Uint8Array(await a.getBuffer("image/png")),
-  );
-  fs.writeFileSync(
-    path.join(dir, "b.png"),
-    new Uint8Array(await b.getBuffer("image/png")),
-  );
-  fs.writeFileSync(
-    path.join(dir, "diff.png"),
-    new Uint8Array(await diff.getBuffer("image/png")),
+  const sSubmit = perf.span("cli.poolSubmit_ms");
+  const aBuf = sliceBackingBuffer(a.bitmap.data);
+  const bBuf = sliceBackingBuffer(b.bitmap.data);
+  const dBuf = sliceBackingBuffer(diff.bitmap.data);
+  pendingWrites.push(
+    writerPool.submit({
+      width: a.width,
+      height: a.height,
+      data: aBuf,
+      path: path.join(dir, "a.png"),
+    }),
+    writerPool.submit({
+      width: b.width,
+      height: b.height,
+      data: bBuf,
+      path: path.join(dir, "b.png"),
+    }),
+    writerPool.submit({
+      width: diff.width,
+      height: diff.height,
+      data: dBuf,
+      path: path.join(dir, "diff.png"),
+    }),
   );
+  sSubmit.stop();
+}
+const sDrain = perf.span("cli.poolDrain_ms");
+await Promise.all(pendingWrites);
+sDrain.stop();
+await writerPool.terminate();
+_loopSpan.stop();
+_wallSpan.stop();
+
+if (perf.enabled) {
+  const counters = perf.dump();
+  process.stderr.write("\n=== PERF ===\n");
+  const keys = Object.keys(counters).sort();
+  const out: Record<string, number> = {};
+  for (const k of keys) out[k] = Math.round(counters[k]! * 1000) / 1000;
+  process.stderr.write(JSON.stringify(out, null, 2) + "\n");
 }

package/src/diff.ts

@@ -17,6 +17,7 @@
 
 import { type JimpInstance } from "./jimp.ts";
 import { alignSize, createEmptyImage, type AlignStrategy } from "./image.ts";
+import { perf } from "./perf.ts";
 import { type RGBAColor } from "./rgba-color.ts";
 
 export type Pallet = {
@@ -28,58 +29,122 @@ export type Pallet = {
 export function drawDifference(
   a: JimpInstance,
   b: JimpInstance,
-  mask: JimpInstance,
+  mask: JimpInstance | null,
   pallet: Readonly<Pallet>,
   align: AlignStrategy,
 ) {
-  const [aNew, bNew, maskNew] = alignSize([a, b, mask], align);
+  const sAlign = perf.span("diff.align_ms");
+  let aNew: JimpInstance;
+  let bNew: JimpInstance;
+  let maskNew: JimpInstance | null;
+  if (mask !== null) {
+    [aNew, bNew, maskNew] = alignSize([a, b, mask], align);
+  } else {
+    [aNew, bNew] = alignSize([a, b], align);
+    maskNew = null;
+  }
+  sAlign.stop();
+
   const width = aNew.width;
   const height = aNew.height;
   const aData = aNew.bitmap.data;
   const bData = bNew.bitmap.data;
-  const mData = maskNew.bitmap.data;
+  const mData = maskNew !== null ? maskNew.bitmap.data : null;
 
+  const sCreate = perf.span("diff.createEmpty_ms");
   const diffImage = createEmptyImage(width, height);
   const dData = diffImage.bitmap.data;
+  sCreate.stop();
 
   const addition: [number, number][] = [];
   const deletion: [number, number][] = [];
   const modification: [number, number][] = [];
 
-  for (let x = 0; x < width; x++) {
-    for (let y = 0; y < height; y++) {
-      const idx = (y * width + x) * 4;
-      if (mData[idx + 3]! !== 0) continue;
-      const aAlpha = aData[idx + 3]!;
-      const bAlpha = bData[idx + 3]!;
-      if (
-        aAlpha === bAlpha &&
-        aData[idx] === bData[idx] &&
-        aData[idx + 1] === bData[idx + 1] &&
-        aData[idx + 2] === bData[idx + 2]
-      ) {
-        continue;
+  const sScan = perf.span("diff.scan_ms");
+  let diffPixels = 0;
+
+  if (mData !== null) {
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
+        const idx = (y * width + x) * 4;
+        if (mData[idx + 3]! !== 0) continue;
+        const aAlpha = aData[idx + 3]!;
+        const bAlpha = bData[idx + 3]!;
+        if (
+          aAlpha === bAlpha &&
+          aData[idx] === bData[idx] &&
+          aData[idx + 1] === bData[idx + 1] &&
+          aData[idx + 2] === bData[idx + 2]
+        ) {
+          continue;
+        }
+        if (aAlpha === 0 && bAlpha === 0) continue;
+        let target: [number, number][];
+        let color: Readonly<RGBAColor>;
+        if (aAlpha === 0) {
+          target = addition;
+          color = pallet.addition;
+        } else if (bAlpha === 0) {
+          target = deletion;
+          color = pallet.deletion;
+        } else {
+          target = modification;
+          color = pallet.modification;
+        }
+        target.push([x, y]);
+        diffPixels++;
+        dData[idx] = color[0];
+        dData[idx + 1] = color[1];
+        dData[idx + 2] = color[2];
+        dData[idx + 3] = color[3];
       }
-      if (aAlpha === 0 && bAlpha === 0) continue;
-      let target: [number, number][];
-      let color: Readonly<RGBAColor>;
-      if (aAlpha === 0) {
-        target = addition;
-        color = pallet.addition;
-      } else if (bAlpha === 0) {
-        target = deletion;
-        color = pallet.deletion;
-      } else {
-        target = modification;
-        color = pallet.modification;
+    }
+  } else {
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
+        const idx = (y * width + x) * 4;
+        const aAlpha = aData[idx + 3]!;
+        const bAlpha = bData[idx + 3]!;
+        if (
+          aAlpha === bAlpha &&
+          aData[idx] === bData[idx] &&
+          aData[idx + 1] === bData[idx + 1] &&
+          aData[idx + 2] === bData[idx + 2]
+        ) {
+          continue;
+        }
+        if (aAlpha === 0 && bAlpha === 0) continue;
+        let target: [number, number][];
+        let color: Readonly<RGBAColor>;
+        if (aAlpha === 0) {
+          target = addition;
+          color = pallet.addition;
+        } else if (bAlpha === 0) {
+          target = deletion;
+          color = pallet.deletion;
+        } else {
+          target = modification;
+          color = pallet.modification;
+        }
+        target.push([x, y]);
+        diffPixels++;
+        dData[idx] = color[0];
+        dData[idx + 1] = color[1];
+        dData[idx + 2] = color[2];
+        dData[idx + 3] = color[3];
       }
-      target.push([x, y]);
-      dData[idx] = color[0];
-      dData[idx + 1] = color[1];
-      dData[idx + 2] = color[2];
-      dData[idx + 3] = color[3];
     }
   }
+  sScan.stop();
+  perf.incr("diff.diffPixels", diffPixels);
+  perf.incr("diff.totalPixels", width * height);
+  perf.incr("diff.pages");
 
-  return { diff: diffImage, addition, deletion, modification };
+  return {
+    diff: diffImage,
+    addition,
+    deletion,
+    modification,
+    hasDiff: diffPixels > 0,
+  };
 }

package/src/image.ts

@@ -17,6 +17,7 @@
 
 import * as jimp from "jimp";
 import { type JimpInstance } from "./jimp.ts";
+import { perf } from "./perf.ts";
 
 export function createEmptyImage(width: number, height: number) {
   return new jimp.Jimp({
@@ -117,6 +118,7 @@ export function composeLayers(
   canvasHeight: number,
   layers: [JimpInstance, number][],
 ) {
+  const _span = perf.span("image.compose_ms");
   const canvas = createEmptyImage(canvasWidth, canvasHeight);
   const dData = canvas.bitmap.data;
   for (const [image, opacity] of layers) {
@@ -146,5 +148,6 @@ export function composeLayers(
       }
     }
   }
+  _span.stop();
   return canvas;
 }

package/src/index.html

@@ -64,6 +64,11 @@
           <input type="color" id="modification-color" value="#ffc105" />
         </div>
         <button type="submit">Submit</button>
+        <label>
+          <input type="checkbox" id="hide-no-diff" />
+          Hide pages with no diff
+        </label>
+        <button type="button" id="download-zip" disabled>Download zip</button>
       </form>
     </div>
     <div class="error" id="error-message"></div>

package/src/index.ts

@@ -22,6 +22,7 @@ import Worker from "web-worker";
 import { type Pallet } from "./diff.ts";
 import { isValidAlignStrategy, type AlignStrategy } from "./image.ts";
 import { withIndex } from "./iterable.ts";
+import { perf } from "./perf.ts";
 import { parseHex, formatHex } from "./rgba-color.ts";
 import { VERSION } from "./version.ts";
 import type { JimpInstance } from "./jimp.ts";
@@ -34,7 +35,7 @@ import type {
   ReadyMessage,
 } from "./worker.ts";
 
-export { withIndex, isValidAlignStrategy, parseHex, formatHex };
+export { withIndex, isValidAlignStrategy, parseHex, formatHex, perf };
 
 type Options = {
   dpi: number;
@@ -155,7 +156,8 @@ function workerUrl(): URL {
 }
 
 function pageResultToResult(msg: PageResultMessage): Result {
-  return {
+  const sP = perf.span("main.pageResultToResult_ms");
+  const r = {
     a: jimp.Jimp.fromBitmap({
       width: msg.a.width,
       height: msg.a.height,
@@ -175,6 +177,10 @@ function pageResultToResult(msg: PageResultMessage): Result {
     deletion: msg.deletion,
     modification: msg.modification,
   };
+  sP.stop();
+  perf.incr("main.resultsReceived");
+  if (msg.perf) perf.merge(msg.perf);
+  return r;
 }
 
 export async function* visualizeDifferences(
@@ -259,6 +265,7 @@ export async function* visualizeDifferences(
           resolve(result);
         } else {
           buffered.set(idx, result);
+          perf.setMax("main.bufferedPeak", buffered.size);
         }
       } catch (e) {
         workerError = e;
@@ -278,10 +285,14 @@ export async function* visualizeDifferences(
         buffered.delete(i);
         r = buf;
       } else {
+        const sWait = perf.span("main.yieldWaitMain_ms");
         r = await new Promise<Result>((resolve) => resolvers.set(i, resolve));
+        sWait.stop();
         if (workerError !== null) throw workerError;
       }
+      const sYield = perf.span("main.consumerTime_ms");
       yield r;
+      sYield.stop();
     }
     await Promise.all(loops);
   } finally {