@u1f992/pdfdiff 0.0.1 → 0.1.0

package/package.json

@@ -1,10 +1,47 @@
 {
   "name": "@u1f992/pdfdiff",
-  "version": "0.0.1",
-  "description": "OIDC trusted publishing setup package for @u1f992/pdfdiff",
-  "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+  "version": "0.1.0",
+  "description": "Visualize and quantify differences between two PDF files.",
+  "main": "dist/index.js",
+  "bin": {
+    "pdfdiff": "dist/cli.js"
+  },
+  "scripts": {
+    "test": "node --test",
+    "test:cli": "node src/cli.js test/a.pdf test/b.pdf out --mask test/mask.pdf --dpi 300 && echo \"expected: Page 1, Addition: 7500, Deletion: 7500, Modification: 7500\"",
+    "build": "rollup -c",
+    "serve": "npm run build && http-server dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/u1f992/pdfdiff.git"
+  },
+  "keywords": [],
+  "author": "Koutaro Mukai",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/u1f992/pdfdiff/issues"
+  },
+  "homepage": "https://github.com/u1f992/pdfdiff",
+  "type": "module",
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.4",
+    "@types/node": "^22.18.7",
+    "http-server": "^14.1.1",
+    "nodehog": "^0.1.2",
+    "prettier": "^3.5.3",
+    "rollup": "^4.42.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2"
+  },
+  "dependencies": {
+    "ix": "^7.0.0",
+    "jimp": "^1.6.0",
+    "mupdf": "^1.26.2",
+    "web-worker": "^1.5.0"
+  }
 }

package/prettier.config.js

@@ -0,0 +1,3 @@
+const prettierConfig = {};
+
+export default prettierConfig;

package/prototyping/README.md

@@ -0,0 +1 @@
+試作用のコード片

package/prototyping/flat-map-concurrency.js

@@ -0,0 +1,218 @@
+// @ts-check
+
+import { range } from "ix/asynciterable";
+import { flatMap } from "ix/asynciterable/operators";
+import Worker from "web-worker";
+import NodeHog from "nodehog";
+
+const dateStr = () => new Date().toISOString();
+
+console.log({ hardwareConcurrency: navigator.hardwareConcurrency });
+
+for await (const pow2 of range(0, 10).pipe(
+  flatMap(async (i) => {
+    console.log(`${dateStr()} start:${i}`);
+    // 処理を他CPUに分散する例
+    return await /** @type {Promise<number>} */ (
+      new Promise((resolve) => {
+        const url = new URL("./worker.js", import.meta.url);
+        const worker = new Worker(url, { type: "module" });
+        worker.addEventListener("message", (e) => {
+          resolve(e.data);
+          worker.terminate();
+        });
+        worker.postMessage(i);
+      })
+    );
+
+    // 処理が分散されない例
+    // await new NodeHog("cpu", 5_000, 1, 1).start();
+    // return i * i;
+  }, navigator.hardwareConcurrency),
+)) {
+  console.log(`${dateStr()} result:${pow2}`);
+}
+
+/*
+他CPUに分散された実行結果例：
+
+{ hardwareConcurrency: 8 }
+2025-06-07T07:44:28.633Z start:0
+2025-06-07T07:44:28.636Z start:1
+2025-06-07T07:44:28.636Z start:2
+2025-06-07T07:44:28.638Z start:3
+2025-06-07T07:44:28.638Z start:4
+2025-06-07T07:44:28.639Z start:5
+2025-06-07T07:44:28.640Z start:6
+2025-06-07T07:44:28.640Z start:7
+
+===========================================
+> Starting new NodeHog [ pypq8 ].
+
+
+===========================================
+> Starting new NodeHog [ hbqos ].
+
+
+===========================================
+> Starting new NodeHog [ kmn4i ].
+
+
+===========================================
+> Starting new NodeHog [ q5b5w ].
+
+
+===========================================
+> Starting new NodeHog [ c3j87 ].
+
+
+===========================================
+> Starting new NodeHog [ 7zrgj ].
+
+
+===========================================
+> Starting new NodeHog [ r99a1 ].
+
+
+===========================================
+> Starting new NodeHog [ oh88p ].
+
+
+[ pypq8 ] --> Stressing CPU...
+
+[ pypq8 ] ----> 1 second of stress period complete.
+[ pypq8 ] ----> 2 seconds of stress period complete.
+[ pypq8 ] ----> 3 seconds of stress period complete.
+[ pypq8 ] ----> 4 seconds of stress period complete.
+[ pypq8 ] ----> 5 seconds of stress period complete.
+
+[ pypq8 ] --> Relieving...
+
+2025-06-07T07:44:33.703Z result:0
+2025-06-07T07:44:33.703Z start:8
+
+[ hbqos ] --> Stressing CPU...
+
+[ hbqos ] ----> 1 second of stress period complete.
+[ hbqos ] ----> 2 seconds of stress period complete.
+[ hbqos ] ----> 3 seconds of stress period complete.
+[ hbqos ] ----> 4 seconds of stress period complete.
+[ hbqos ] ----> 5 seconds of stress period complete.
+
+[ hbqos ] --> Relieving...
+
+2025-06-07T07:44:33.705Z result:1
+2025-06-07T07:44:33.706Z start:9
+
+[ q5b5w ] --> Stressing CPU...
+
+[ q5b5w ] ----> 1 second of stress period complete.
+[ q5b5w ] ----> 2 seconds of stress period complete.
+[ q5b5w ] ----> 3 seconds of stress period complete.
+[ q5b5w ] ----> 4 seconds of stress period complete.
+[ q5b5w ] ----> 5 seconds of stress period complete.
+
+[ q5b5w ] --> Relieving...
+
+2025-06-07T07:44:33.707Z result:9
+
+[ kmn4i ] --> Stressing CPU...
+
+[ kmn4i ] ----> 1 second of stress period complete.
+[ kmn4i ] ----> 2 seconds of stress period complete.
+[ kmn4i ] ----> 3 seconds of stress period complete.
+[ kmn4i ] ----> 4 seconds of stress period complete.
+[ kmn4i ] ----> 5 seconds of stress period complete.
+
+[ kmn4i ] --> Relieving...
+
+2025-06-07T07:44:33.708Z result:16
+
+[ r99a1 ] --> Stressing CPU...
+
+[ r99a1 ] ----> 1 second of stress period complete.
+[ r99a1 ] ----> 2 seconds of stress period complete.
+[ r99a1 ] ----> 3 seconds of stress period complete.
+[ r99a1 ] ----> 4 seconds of stress period complete.
+[ r99a1 ] ----> 5 seconds of stress period complete.
+
+[ r99a1 ] --> Relieving...
+
+2025-06-07T07:44:33.711Z result:4
+
+[ c3j87 ] --> Stressing CPU...
+
+[ c3j87 ] ----> 1 second of stress period complete.
+[ c3j87 ] ----> 2 seconds of stress period complete.
+[ c3j87 ] ----> 3 seconds of stress period complete.
+[ c3j87 ] ----> 4 seconds of stress period complete.
+[ c3j87 ] ----> 5 seconds of stress period complete.
+
+[ c3j87 ] --> Relieving...
+
+2025-06-07T07:44:33.711Z result:36
+
+[ 7zrgj ] --> Stressing CPU...
+
+[ 7zrgj ] ----> 1 second of stress period complete.
+[ 7zrgj ] ----> 2 seconds of stress period complete.
+[ 7zrgj ] ----> 3 seconds of stress period complete.
+[ 7zrgj ] ----> 4 seconds of stress period complete.
+[ 7zrgj ] ----> 5 seconds of stress period complete.
+
+[ 7zrgj ] --> Relieving...
+
+2025-06-07T07:44:33.712Z result:49
+
+[ oh88p ] --> Stressing CPU...
+
+[ oh88p ] ----> 1 second of stress period complete.
+[ oh88p ] ----> 2 seconds of stress period complete.
+[ oh88p ] ----> 3 seconds of stress period complete.
+[ oh88p ] ----> 4 seconds of stress period complete.
+[ oh88p ] ----> 5 seconds of stress period complete.
+
+[ oh88p ] --> Relieving...
+
+2025-06-07T07:44:33.721Z result:25
+
+===========================================
+> Starting new NodeHog [ p21ap ].
+
+
+===========================================
+> Starting new NodeHog [ 3yywg ].
+
+
+[ p21ap ] --> Stressing CPU...
+
+[ p21ap ] ----> 1 second of stress period complete.
+[ p21ap ] ----> 2 seconds of stress period complete.
+[ p21ap ] ----> 3 seconds of stress period complete.
+[ p21ap ] ----> 4 seconds of stress period complete.
+[ p21ap ] ----> 5 seconds of stress period complete.
+
+[ p21ap ] --> Relieving...
+
+
+> Killing NodeHog [ p21ap ].
+-------------------------------------------
+
+2025-06-07T07:44:38.755Z result:64
+
+[ 3yywg ] --> Stressing CPU...
+
+[ 3yywg ] ----> 1 second of stress period complete.
+[ 3yywg ] ----> 2 seconds of stress period complete.
+[ 3yywg ] ----> 3 seconds of stress period complete.
+[ 3yywg ] ----> 4 seconds of stress period complete.
+[ 3yywg ] ----> 5 seconds of stress period complete.
+
+[ 3yywg ] --> Relieving...
+
+
+> Killing NodeHog [ 3yywg ].
+-------------------------------------------
+
+2025-06-07T07:44:38.757Z result:81
+*/

package/prototyping/worker.js

@@ -0,0 +1,10 @@
+// @ts-check
+
+import NodeHog from "nodehog";
+
+addEventListener("message", async (e) => {
+  /** @type {number} */
+  const i = e.data;
+  await new NodeHog("cpu", 5_000, 1, 1).start();
+  postMessage(i * i);
+});

package/rollup.config.js

@@ -0,0 +1,121 @@
+import alias from "@rollup/plugin-alias";
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import path from "node:path";
+import { defineConfig } from "rollup";
+import copy from "rollup-plugin-copy";
+
+const plugins = [
+  nodeResolve(),
+  commonjs(),
+  copy({
+    targets: [
+      {
+        src: "node_modules/mupdf/dist/mupdf-wasm.wasm",
+        dest: "dist",
+      },
+      {
+        src: "src/index.html",
+        dest: "dist",
+      },
+      {
+        src: "src/style.css",
+        dest: "dist",
+      },
+    ],
+  }),
+];
+
+const rollupConfig = defineConfig([
+  {
+    input: "src/index.ts",
+    output: {
+      file: "dist/index.js",
+      sourcemap: true,
+    },
+    plugins: [
+      alias({
+        entries: [
+          {
+            find: "jimp",
+            replacement: path.resolve(
+              "node_modules/jimp/dist/browser/index.js",
+            ),
+          },
+          {
+            find: "web-worker",
+            replacement: path.resolve(
+              "node_modules/web-worker/dist/browser/index.cjs",
+            ),
+          },
+        ],
+      }),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      ...plugins,
+    ],
+  },
+  {
+    input: "src/worker.ts",
+    output: {
+      file: "dist/worker.js",
+      sourcemap: true,
+    },
+    plugins: [
+      alias({
+        entries: [
+          {
+            find: "jimp",
+            replacement: path.resolve(
+              "node_modules/jimp/dist/browser/index.js",
+            ),
+          },
+        ],
+      }),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      ...plugins,
+    ],
+  },
+  {
+    input: "src/cli.ts",
+    output: {
+      file: "dist/cli.js",
+      sourcemap: true,
+    },
+    external: ["web-worker"],
+    plugins: [
+      typescript({ tsconfig: "./tsconfig.json" }),
+      nodeResolve(),
+      commonjs(),
+    ],
+  },
+  {
+    input: "src/browser.ts",
+    output: {
+      file: "dist/browser.js",
+      sourcemap: true,
+    },
+    plugins: [
+      alias({
+        entries: [
+          {
+            find: "jimp",
+            replacement: path.resolve(
+              "node_modules/jimp/dist/browser/index.js",
+            ),
+          },
+          {
+            find: "web-worker",
+            replacement: path.resolve(
+              "node_modules/web-worker/dist/browser/index.cjs",
+            ),
+          },
+        ],
+      }),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      ...plugins,
+    ],
+  },
+]);
+
+export default rollupConfig;

package/src/browser.ts

@@ -0,0 +1,184 @@
+/// <reference lib="dom" />
+
+import * as pdfdiff from "./index.js";
+
+async function readFileAsUint8Array(file: File): Promise<Uint8Array> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(new Uint8Array(reader.result as ArrayBuffer));
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+document
+  .getElementById("pdf-diff-form")
+  ?.addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    const resultsContainer = document.getElementById("results");
+    if (resultsContainer) resultsContainer.innerHTML = "";
+
+    const errorElement = document.getElementById("error-message");
+    if (errorElement) errorElement.textContent = "";
+
+    try {
+      const pdfAFile = (
+        document.getElementById("pdf-a") as HTMLInputElement | null
+      )?.files?.[0];
+      const pdfBFile = (
+        document.getElementById("pdf-b") as HTMLInputElement | null
+      )?.files?.[0];
+      if (typeof pdfAFile === "undefined" || typeof pdfBFile === "undefined") {
+        throw new Error();
+      }
+      const pdfA = await readFileAsUint8Array(pdfAFile);
+      const pdfB = await readFileAsUint8Array(pdfBFile);
+
+      const pdfMaskFile = (
+        document.getElementById("pdf-mask") as HTMLInputElement | null
+      )?.files?.[0];
+      const pdfMask = pdfMaskFile
+        ? await readFileAsUint8Array(pdfMaskFile)
+        : undefined;
+
+      const dpi = ((
+        val = (document.getElementById("dpi") as HTMLInputElement | null)
+          ?.value,
+      ) => (typeof val !== "undefined" ? parseInt(val, 10) : undefined))();
+      const alpha = (
+        document.getElementById("alpha") as HTMLInputElement | null
+      )?.checked;
+
+      const align = (
+        document.getElementById("align") as HTMLInputElement | null
+      )?.value;
+      if (
+        typeof align !== "undefined" &&
+        !pdfdiff.isValidAlignStrategy(align)
+      ) {
+        throw new Error();
+      }
+
+      const additionColorHex = (
+        document.getElementById("addition-color") as HTMLInputElement | null
+      )?.value;
+      const deletionColorHex = (
+        document.getElementById("deletion-color") as HTMLInputElement | null
+      )?.value;
+      const modificationColorHex = (
+        document.getElementById("modification-color") as HTMLInputElement | null
+      )?.value;
+      const additionColor = additionColorHex
+        ? pdfdiff.parseHex(additionColorHex)
+        : undefined;
+      const deletionColor = deletionColorHex
+        ? pdfdiff.parseHex(deletionColorHex)
+        : undefined;
+      const modificationColor = modificationColorHex
+        ? pdfdiff.parseHex(modificationColorHex)
+        : undefined;
+      if (
+        additionColor === null ||
+        deletionColor === null ||
+        modificationColor === null
+      ) {
+        throw new Error();
+      }
+
+      const options: Parameters<typeof pdfdiff.visualizeDifferences>[2] = {};
+      if (dpi !== undefined) options.dpi = dpi;
+      if (alpha !== undefined) options.alpha = alpha;
+      if (pdfMask !== undefined) options.mask = pdfMask;
+      if (align !== undefined) options.align = align;
+      if (additionColor || deletionColor || modificationColor) {
+        options.pallet = {};
+        if (additionColor) options.pallet.addition = additionColor;
+        if (deletionColor) options.pallet.deletion = deletionColor;
+        if (modificationColor) options.pallet.modification = modificationColor;
+      }
+
+      for await (const [
+        i,
+        { a, b, diff, addition, deletion, modification },
+      ] of pdfdiff.withIndex(
+        pdfdiff.visualizeDifferences(pdfA, pdfB, options),
+        1,
+      )) {
+        const pageResult = document.createElement("details");
+        pageResult.className = "diff-details";
+        pageResult.open =
+          addition.length + deletion.length + modification.length > 0;
+
+        const summary = document.createElement("summary");
+
+        const summaryInline = document.createElement("div");
+        summaryInline.className = "summary-content";
+
+        const pageTitle = document.createElement("h3");
+        pageTitle.textContent = `Page ${i}`;
+
+        const pageSummary = document.createElement("div");
+        pageSummary.textContent = `Addition: ${addition.length}, Deletion: ${deletion.length}, Modification: ${modification.length}`;
+
+        summaryInline.appendChild(pageTitle);
+        summaryInline.appendChild(pageSummary);
+        summary.appendChild(summaryInline);
+        pageResult.appendChild(summary);
+
+        const imagesTable = document.createElement("table");
+        imagesTable.className = "diff-table";
+
+        const headerRow = document.createElement("tr");
+
+        const headerA = document.createElement("th");
+        headerA.textContent = "A";
+        headerRow.appendChild(headerA);
+
+        const headerB = document.createElement("th");
+        headerB.textContent = "B";
+        headerRow.appendChild(headerB);
+
+        const headerDiff = document.createElement("th");
+        headerDiff.textContent = "Diff";
+        headerRow.appendChild(headerDiff);
+
+        imagesTable.appendChild(headerRow);
+
+        const imagesRow = document.createElement("tr");
+
+        const cellA = document.createElement("td");
+        const imageA = document.createElement("img");
+        imageA.src = await a.getBase64("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.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.className = "checkerboard-bg";
+        cellDiff.appendChild(imageDiff);
+        imagesRow.appendChild(cellDiff);
+
+        imagesTable.appendChild(imagesRow);
+
+        pageResult.appendChild(imagesTable);
+        resultsContainer?.appendChild(pageResult);
+      }
+    } catch (e) {
+      console.error(e);
+      if (errorElement) {
+        errorElement.textContent = `Error: ${(e as Error).message}`;
+      }
+    }
+  });