@midscene/shared 0.12.7 → 0.12.8-beta-20250318124823.0

package/dist/es/extractor-debug.js

@@ -361,27 +361,8 @@ function getNodeAttributes(node, currentWindow) {
   });
   return Object.fromEntries(attributesList);
 }
-var nodeHashCacheList = [];
-if (typeof window !== "undefined") {
-  window.midsceneNodeHashCacheList = window.midsceneNodeHashCacheList || [];
-  nodeHashCacheList = window.midsceneNodeHashCacheList;
-}
-function resetNodeHashCacheList() {
-  if (typeof window !== "undefined") {
-    nodeHashCacheList = window.midsceneNodeHashCacheList || [];
-    window.midsceneNodeHashCacheList = [];
-  } else {
-    nodeHashCacheList = [];
-  }
-}
 function midsceneGenerateHash(node, content, rect) {
-  if (node && nodeHashCacheList.find((item) => item.node === node)) {
-    return nodeHashCacheList.find((item) => item.node === node)?.id || "";
-  }
   const slicedHash = generateHashId(rect, content);
-  if (node && typeof window !== "undefined") {
-    window.midsceneNodeHashCacheList.push({ node, id: slicedHash });
-  }
   return slicedHash;
 }
 function setMidsceneVisibleRectOnWindow() {
@@ -600,7 +581,6 @@ function extractTextWithPosition(initNode, debugMode2 = false) {
 }
 function extractTreeNode(initNode, debugMode2 = false) {
   setDebugMode(debugMode2);
-  resetNodeHashCacheList();
   indexId = 0;
   const topDocument = getTopDocument();
   const startNode = initNode || topDocument;

package/dist/es/extractor.js

@@ -482,27 +482,8 @@ function getNodeAttributes(node, currentWindow) {
   });
   return Object.fromEntries(attributesList);
 }
-var nodeHashCacheList = [];
-if (typeof window !== "undefined") {
-  window.midsceneNodeHashCacheList = window.midsceneNodeHashCacheList || [];
-  nodeHashCacheList = window.midsceneNodeHashCacheList;
-}
-function resetNodeHashCacheList() {
-  if (typeof window !== "undefined") {
-    nodeHashCacheList = window.midsceneNodeHashCacheList || [];
-    window.midsceneNodeHashCacheList = [];
-  } else {
-    nodeHashCacheList = [];
-  }
-}
 function midsceneGenerateHash(node, content, rect) {
-  if (node && nodeHashCacheList.find((item) => item.node === node)) {
-    return nodeHashCacheList.find((item) => item.node === node)?.id || "";
-  }
   const slicedHash = generateHashId(rect, content);
-  if (node && typeof window !== "undefined") {
-    window.midsceneNodeHashCacheList.push({ node, id: slicedHash });
-  }
   return slicedHash;
 }
 function getTopDocument() {
@@ -715,7 +696,6 @@ function extractTreeNodeAsString(initNode, debugMode2 = false) {
 }
 function extractTreeNode(initNode, debugMode2 = false) {
   setDebugMode(debugMode2);
-  resetNodeHashCacheList();
   indexId = 0;
   const topDocument = getTopDocument();
   const startNode = initNode || topDocument;

package/dist/es/fs.js

@@ -6,6 +6,7 @@ import path from "path";
 // src/utils.ts
 import { sha256 } from "js-sha256";
 import debug from "debug";
+var ifInBrowser = typeof window !== "undefined";
 function assert(condition, message) {
   if (!condition) {
     throw new Error(message || "Assertion failed");
@@ -14,7 +15,6 @@ function assert(condition, message) {
 
 // src/node/fs.ts
 var pkgCacheMap = {};
-var ifInBrowser = typeof window !== "undefined";
 function getRunningPkgInfo(dir) {
   if (ifInBrowser) {
     return null;

package/dist/es/img.d.ts

@@ -1,7 +1,7 @@
 import { Buffer } from 'node:buffer';
 import Jimp from 'jimp';
-import { NodeType } from './constants.js';
 import { R as Rect } from './index-305e7a7e.js';
+import { NodeType } from './constants.js';
 
 interface Size {
     width: number;
@@ -102,7 +102,10 @@ declare function trimImage(image: string | Buffer): Promise<{
     width: number;
     height: number;
 } | null>;
-declare function paddingToMatchBlock(imageBase64: string, blockSize?: number): Promise<string>;
+declare function jimpFromBase64(base64: string): Promise<Jimp>;
+declare function paddingToMatchBlock(image: Jimp, blockSize?: number): Promise<Jimp>;
+declare function cropByRect(image: Jimp, rect: Rect): Promise<void>;
+declare function jimpToBase64(image: Jimp): Promise<string>;
 
 type ElementType = {
     locator?: string;
@@ -149,4 +152,4 @@ declare function savePositionImg(options: {
     outputPath: string;
 }): Promise<void>;
 
-export { base64Encoded, bufferFromBase64, compositeElementInfoImg, drawBoxOnImage, imageInfo, imageInfoOfBase64, paddingToMatchBlock, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage, zoomForGPT4o };
+export { base64Encoded, bufferFromBase64, compositeElementInfoImg, cropByRect, drawBoxOnImage, imageInfo, imageInfoOfBase64, jimpFromBase64, jimpToBase64, paddingToMatchBlock, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage, zoomForGPT4o };

package/dist/es/img.js

@@ -15,13 +15,13 @@ async function getJimp() {
 
 // src/img/info.ts
 async function imageInfo(image) {
-  const Jimp = await getJimp();
+  const Jimp2 = await getJimp();
   let jimpImage;
   if (typeof image === "string") {
-    jimpImage = await Jimp.read(image);
+    jimpImage = await Jimp2.read(image);
   } else if (Buffer.isBuffer(image)) {
-    jimpImage = await Jimp.read(image);
-  } else if (image instanceof Jimp) {
+    jimpImage = await Jimp2.read(image);
+  } else if (image instanceof Jimp2) {
     jimpImage = image;
   } else {
     throw new Error("Invalid image input: must be a string path or a Buffer");
@@ -58,19 +58,27 @@ function base64Encoded(image, withHeader = true) {
 // src/img/transform.ts
 import assert2 from "assert";
 import { Buffer as Buffer2 } from "buffer";
+import getDebug from "debug";
+import Jimp from "jimp";
+var debugImg = getDebug("img");
 async function saveBase64Image(options) {
+  debugImg(`saveBase64Image start: ${options.outputPath}`);
   const { base64Data, outputPath } = options;
   const base64Image = base64Data.split(";base64,").pop() || base64Data;
   const imageBuffer = Buffer2.from(base64Image, "base64");
-  const Jimp = await getJimp();
-  const image = await Jimp.read(imageBuffer);
+  const Jimp2 = await getJimp();
+  const image = await Jimp2.read(imageBuffer);
   await image.writeAsync(outputPath);
+  debugImg(`saveBase64Image done: ${options.outputPath}`);
 }
 async function transformImgPathToBase64(inputPath) {
-  const Jimp = await getJimp();
-  const image = await Jimp.read(inputPath);
-  const buffer = await image.getBufferAsync(Jimp.MIME_JPEG);
-  return buffer.toString("base64");
+  debugImg(`transformImgPathToBase64 start: ${inputPath}`);
+  const Jimp2 = await getJimp();
+  const image = await Jimp2.read(inputPath);
+  const buffer = await image.getBufferAsync(Jimp2.MIME_JPEG);
+  const res = buffer.toString("base64");
+  debugImg(`transformImgPathToBase64 done: ${inputPath}`);
+  return res;
 }
 async function resizeImg(inputData, newSize) {
   if (typeof inputData === "string")
@@ -79,8 +87,9 @@ async function resizeImg(inputData, newSize) {
     newSize && newSize.width > 0 && newSize.height > 0,
     "newSize must be positive"
   );
-  const Jimp = await getJimp();
-  const image = await Jimp.read(inputData);
+  debugImg(`resizeImg start, target size: ${newSize.width}x${newSize.height}`);
+  const Jimp2 = await getJimp();
+  const image = await Jimp2.read(inputData);
   const { width, height } = image.bitmap;
   if (!width || !height) {
     throw Error("Undefined width or height from the input image.");
@@ -88,9 +97,10 @@ async function resizeImg(inputData, newSize) {
   if (newSize.width === width && newSize.height === height) {
     return inputData;
   }
-  image.resize(newSize.width, newSize.height, Jimp.RESIZE_NEAREST_NEIGHBOR);
+  image.resize(newSize.width, newSize.height, Jimp2.RESIZE_NEAREST_NEIGHBOR);
   image.quality(90);
-  const resizedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);
+  const resizedBuffer = await image.getBufferAsync(Jimp2.MIME_JPEG);
+  debugImg(`resizeImg done, target size: ${newSize.width}x${newSize.height}`);
   return resizedBuffer;
 }
 async function bufferFromBase642(base64) {
@@ -99,9 +109,13 @@ async function bufferFromBase642(base64) {
   if (dataSplitted.length !== 2) {
     throw Error("Invalid base64 data");
   }
-  return Buffer2.from(dataSplitted[1], "base64");
+  debugImg(`bufferFromBase64 start: ${base64}`);
+  const res = Buffer2.from(dataSplitted[1], "base64");
+  debugImg(`bufferFromBase64 done: ${base64}`);
+  return res;
 }
 async function resizeImgBase64(inputBase64, newSize) {
+  debugImg(`resizeImgBase64 start: ${inputBase64}`);
   const splitFlag = ";base64,";
   const dataSplitted = inputBase64.split(splitFlag);
   if (dataSplitted.length !== 2) {
@@ -110,7 +124,9 @@ async function resizeImgBase64(inputBase64, newSize) {
   const imageBuffer = Buffer2.from(dataSplitted[1], "base64");
   const buffer = await resizeImg(imageBuffer, newSize);
   const content = buffer.toString("base64");
-  return `${dataSplitted[0]}${splitFlag}${content}`;
+  const res = `${dataSplitted[0]}${splitFlag}${content}`;
+  debugImg(`resizeImgBase64 done: ${inputBase64}`);
+  return res;
 }
 function zoomForGPT4o(originalWidth, originalHeight) {
   const maxWidth = 2048;
@@ -132,8 +148,8 @@ function zoomForGPT4o(originalWidth, originalHeight) {
   };
 }
 async function trimImage(image) {
-  const Jimp = await getJimp();
-  const jimpImage = await Jimp.read(
+  const Jimp2 = await getJimp();
+  const jimpImage = await Jimp2.read(
     Buffer2.isBuffer(image) ? image : Buffer2.from(image)
   );
   const { width, height } = jimpImage.bitmap;
@@ -154,28 +170,37 @@ async function trimImage(image) {
     height: trimmedHeight
   };
 }
-async function paddingToMatchBlock(imageBase64, blockSize = 28) {
-  const Jimp = await getJimp();
-  const imageBuffer = await bufferFromBase642(imageBase64);
-  const image = await Jimp.read(imageBuffer);
+async function jimpFromBase64(base64) {
+  const Jimp2 = await getJimp();
+  const imageBuffer = await bufferFromBase642(base64);
+  return Jimp2.read(imageBuffer);
+}
+async function paddingToMatchBlock(image, blockSize = 28) {
+  debugImg("paddingToMatchBlock start");
   const { width, height } = image.bitmap;
   const targetWidth = Math.ceil(width / blockSize) * blockSize;
   const targetHeight = Math.ceil(height / blockSize) * blockSize;
   if (targetWidth === width && targetHeight === height) {
-    return imageBase64;
+    return image;
   }
   const paddedImage = new Jimp(targetWidth, targetHeight, 4294967295);
   paddedImage.composite(image, 0, 0);
-  const base64 = await paddedImage.getBase64Async(Jimp.MIME_JPEG);
-  return base64;
+  return paddedImage;
+}
+async function cropByRect(image, rect) {
+  const { left, top, width, height } = rect;
+  image.crop(left, top, width, height);
+}
+async function jimpToBase64(image) {
+  return image.getBase64Async(Jimp.MIME_JPEG);
 }
 
 // src/img/box-select.ts
 import assert3 from "assert";
 var cachedFont = null;
 var createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5) => {
-  const Jimp = await getJimp();
-  const image = new Jimp(imageWidth, imageHeight, 0);
+  const Jimp2 = await getJimp();
+  const image = new Jimp2(imageWidth, imageHeight, 0);
   const colors = [
     { rect: 3324182783, text: 4294967295 },
     // red, white
@@ -262,7 +287,7 @@ var createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5)
       }
     );
     try {
-      cachedFont = cachedFont || await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE);
+      cachedFont = cachedFont || await Jimp2.loadFont(Jimp2.FONT_SANS_16_WHITE);
     } catch (error) {
       console.error("Error loading font", error);
     }
@@ -272,8 +297,8 @@ var createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5)
       rectY,
       {
         text: element.indexId.toString(),
-        alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
-        alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
+        alignmentX: Jimp2.HORIZONTAL_ALIGN_CENTER,
+        alignmentY: Jimp2.VERTICAL_ALIGN_MIDDLE
       },
       rectWidth,
       rectHeight
@@ -286,7 +311,7 @@ var compositeElementInfoImg = async (options) => {
   let width = 0;
   let height = 0;
   let jimpImage;
-  const Jimp = await getJimp();
+  const Jimp2 = await getJimp();
   if (options.size) {
     width = options.size.width;
     height = options.size.height;
@@ -298,10 +323,10 @@ var compositeElementInfoImg = async (options) => {
     jimpImage = info.jimpImage;
   } else {
     const imageBuffer = await bufferFromBase64(options.inputImgBase64);
-    jimpImage = await Jimp.read(imageBuffer);
+    jimpImage = await Jimp2.read(imageBuffer);
     const imageBitmap = jimpImage.bitmap;
     if (imageBitmap.width !== width || imageBitmap.height !== height) {
-      jimpImage.resize(width, height, Jimp.RESIZE_NEAREST_NEIGHBOR);
+      jimpImage.resize(width, height, Jimp2.RESIZE_NEAREST_NEIGHBOR);
     }
   }
   if (!width || !height) {
@@ -315,16 +340,16 @@ var compositeElementInfoImg = async (options) => {
       height,
       options.annotationPadding
     );
-    const svgImage = await Jimp.read(svgOverlay);
+    const svgImage = await Jimp2.read(svgOverlay);
     const compositeImage = await image.composite(svgImage, 0, 0, {
-      mode: Jimp.BLEND_SOURCE_OVER,
+      mode: Jimp2.BLEND_SOURCE_OVER,
       opacitySource: 1,
       opacityDest: 1
     });
     return compositeImage;
   }).then(async (compositeImage) => {
     compositeImage.quality(90);
-    const base64 = await compositeImage.getBase64Async(Jimp.MIME_JPEG);
+    const base64 = await compositeImage.getBase64Async(Jimp2.MIME_JPEG);
     return base64;
   }).catch((error) => {
     throw error;
@@ -357,9 +382,9 @@ var processImageElementInfo = async (options) => {
 async function drawBoxOnImage(options) {
   const { inputImgBase64, rect } = options;
   const color = { r: 255, g: 0, b: 0, a: 255 };
-  const Jimp = await getJimp();
+  const Jimp2 = await getJimp();
   const imageBuffer = await bufferFromBase64(inputImgBase64);
-  const image = await Jimp.read(imageBuffer);
+  const image = await Jimp2.read(imageBuffer);
   const centerX = rect.x;
   const centerY = rect.y;
   const radius = 5;
@@ -379,7 +404,7 @@ async function drawBoxOnImage(options) {
     }
   );
   image.quality(90);
-  const resultBase64 = await image.getBase64Async(Jimp.MIME_JPEG);
+  const resultBase64 = await image.getBase64Async(Jimp2.MIME_JPEG);
   return resultBase64;
 }
 async function savePositionImg(options) {
@@ -394,9 +419,12 @@ export {
   base64Encoded,
   bufferFromBase64,
   compositeElementInfoImg,
+  cropByRect,
   drawBoxOnImage,
   imageInfo,
   imageInfoOfBase64,
+  jimpFromBase64,
+  jimpToBase64,
   paddingToMatchBlock,
   processImageElementInfo,
   resizeImg,

package/dist/lib/extractor-debug.js

@@ -385,27 +385,8 @@ function getNodeAttributes(node, currentWindow) {
   });
   return Object.fromEntries(attributesList);
 }
-var nodeHashCacheList = [];
-if (typeof window !== "undefined") {
-  window.midsceneNodeHashCacheList = window.midsceneNodeHashCacheList || [];
-  nodeHashCacheList = window.midsceneNodeHashCacheList;
-}
-function resetNodeHashCacheList() {
-  if (typeof window !== "undefined") {
-    nodeHashCacheList = window.midsceneNodeHashCacheList || [];
-    window.midsceneNodeHashCacheList = [];
-  } else {
-    nodeHashCacheList = [];
-  }
-}
 function midsceneGenerateHash(node, content, rect) {
-  if (node && nodeHashCacheList.find((item) => item.node === node)) {
-    return nodeHashCacheList.find((item) => item.node === node)?.id || "";
-  }
   const slicedHash = generateHashId(rect, content);
-  if (node && typeof window !== "undefined") {
-    window.midsceneNodeHashCacheList.push({ node, id: slicedHash });
-  }
   return slicedHash;
 }
 function setMidsceneVisibleRectOnWindow() {
@@ -624,7 +605,6 @@ function extractTextWithPosition(initNode, debugMode2 = false) {
 }
 function extractTreeNode(initNode, debugMode2 = false) {
   setDebugMode(debugMode2);
-  resetNodeHashCacheList();
   indexId = 0;
   const topDocument = getTopDocument();
   const startNode = initNode || topDocument;

package/dist/lib/extractor.js

@@ -524,27 +524,8 @@ function getNodeAttributes(node, currentWindow) {
   });
   return Object.fromEntries(attributesList);
 }
-var nodeHashCacheList = [];
-if (typeof window !== "undefined") {
-  window.midsceneNodeHashCacheList = window.midsceneNodeHashCacheList || [];
-  nodeHashCacheList = window.midsceneNodeHashCacheList;
-}
-function resetNodeHashCacheList() {
-  if (typeof window !== "undefined") {
-    nodeHashCacheList = window.midsceneNodeHashCacheList || [];
-    window.midsceneNodeHashCacheList = [];
-  } else {
-    nodeHashCacheList = [];
-  }
-}
 function midsceneGenerateHash(node, content, rect) {
-  if (node && nodeHashCacheList.find((item) => item.node === node)) {
-    return nodeHashCacheList.find((item) => item.node === node)?.id || "";
-  }
   const slicedHash = generateHashId(rect, content);
-  if (node && typeof window !== "undefined") {
-    window.midsceneNodeHashCacheList.push({ node, id: slicedHash });
-  }
   return slicedHash;
 }
 function getTopDocument() {
@@ -757,7 +738,6 @@ function extractTreeNodeAsString(initNode, debugMode2 = false) {
 }
 function extractTreeNode(initNode, debugMode2 = false) {
   setDebugMode(debugMode2);
-  resetNodeHashCacheList();
   indexId = 0;
   const topDocument = getTopDocument();
   const startNode = initNode || topDocument;

package/dist/lib/fs.js

@@ -42,6 +42,7 @@ var import_node_path2 = __toESM(require("path"));
 // src/utils.ts
 var import_js_sha256 = require("js-sha256");
 var import_debug = __toESM(require("debug"));
+var ifInBrowser = typeof window !== "undefined";
 function assert(condition, message) {
   if (!condition) {
     throw new Error(message || "Assertion failed");
@@ -50,7 +51,6 @@ function assert(condition, message) {
 
 // src/node/fs.ts
 var pkgCacheMap = {};
-var ifInBrowser = typeof window !== "undefined";
 function getRunningPkgInfo(dir) {
   if (ifInBrowser) {
     return null;

package/dist/lib/img.d.ts

@@ -1,7 +1,7 @@
 import { Buffer } from 'node:buffer';
 import Jimp from 'jimp';
-import { NodeType } from './constants.js';
 import { R as Rect } from './index-305e7a7e.js';
+import { NodeType } from './constants.js';
 
 interface Size {
     width: number;
@@ -102,7 +102,10 @@ declare function trimImage(image: string | Buffer): Promise<{
     width: number;
     height: number;
 } | null>;
-declare function paddingToMatchBlock(imageBase64: string, blockSize?: number): Promise<string>;
+declare function jimpFromBase64(base64: string): Promise<Jimp>;
+declare function paddingToMatchBlock(image: Jimp, blockSize?: number): Promise<Jimp>;
+declare function cropByRect(image: Jimp, rect: Rect): Promise<void>;
+declare function jimpToBase64(image: Jimp): Promise<string>;
 
 type ElementType = {
     locator?: string;
@@ -149,4 +152,4 @@ declare function savePositionImg(options: {
     outputPath: string;
 }): Promise<void>;
 
-export { base64Encoded, bufferFromBase64, compositeElementInfoImg, drawBoxOnImage, imageInfo, imageInfoOfBase64, paddingToMatchBlock, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage, zoomForGPT4o };
+export { base64Encoded, bufferFromBase64, compositeElementInfoImg, cropByRect, drawBoxOnImage, imageInfo, imageInfoOfBase64, jimpFromBase64, jimpToBase64, paddingToMatchBlock, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage, zoomForGPT4o };

package/dist/lib/img.js

@@ -33,9 +33,12 @@ __export(img_exports, {
   base64Encoded: () => base64Encoded,
   bufferFromBase64: () => bufferFromBase64,
   compositeElementInfoImg: () => compositeElementInfoImg,
+  cropByRect: () => cropByRect,
   drawBoxOnImage: () => drawBoxOnImage,
   imageInfo: () => imageInfo,
   imageInfoOfBase64: () => imageInfoOfBase64,
+  jimpFromBase64: () => jimpFromBase64,
+  jimpToBase64: () => jimpToBase64,
   paddingToMatchBlock: () => paddingToMatchBlock,
   processImageElementInfo: () => processImageElementInfo,
   resizeImg: () => resizeImg,
@@ -65,13 +68,13 @@ async function getJimp() {
 
 // src/img/info.ts
 async function imageInfo(image) {
-  const Jimp = await getJimp();
+  const Jimp2 = await getJimp();
   let jimpImage;
   if (typeof image === "string") {
-    jimpImage = await Jimp.read(image);
+    jimpImage = await Jimp2.read(image);
   } else if (import_node_buffer.Buffer.isBuffer(image)) {
-    jimpImage = await Jimp.read(image);
-  } else if (image instanceof Jimp) {
+    jimpImage = await Jimp2.read(image);
+  } else if (image instanceof Jimp2) {
     jimpImage = image;
   } else {
     throw new Error("Invalid image input: must be a string path or a Buffer");
@@ -108,19 +111,27 @@ function base64Encoded(image, withHeader = true) {
 // src/img/transform.ts
 var import_node_assert2 = __toESM(require("assert"));
 var import_node_buffer2 = require("buffer");
+var import_debug = __toESM(require("debug"));
+var import_jimp = __toESM(require("jimp"));
+var debugImg = (0, import_debug.default)("img");
 async function saveBase64Image(options) {
+  debugImg(`saveBase64Image start: ${options.outputPath}`);
   const { base64Data, outputPath } = options;
   const base64Image = base64Data.split(";base64,").pop() || base64Data;
   const imageBuffer = import_node_buffer2.Buffer.from(base64Image, "base64");
-  const Jimp = await getJimp();
-  const image = await Jimp.read(imageBuffer);
+  const Jimp2 = await getJimp();
+  const image = await Jimp2.read(imageBuffer);
   await image.writeAsync(outputPath);
+  debugImg(`saveBase64Image done: ${options.outputPath}`);
 }
 async function transformImgPathToBase64(inputPath) {
-  const Jimp = await getJimp();
-  const image = await Jimp.read(inputPath);
-  const buffer = await image.getBufferAsync(Jimp.MIME_JPEG);
-  return buffer.toString("base64");
+  debugImg(`transformImgPathToBase64 start: ${inputPath}`);
+  const Jimp2 = await getJimp();
+  const image = await Jimp2.read(inputPath);
+  const buffer = await image.getBufferAsync(Jimp2.MIME_JPEG);
+  const res = buffer.toString("base64");
+  debugImg(`transformImgPathToBase64 done: ${inputPath}`);
+  return res;
 }
 async function resizeImg(inputData, newSize) {
   if (typeof inputData === "string")
@@ -129,8 +140,9 @@ async function resizeImg(inputData, newSize) {
     newSize && newSize.width > 0 && newSize.height > 0,
     "newSize must be positive"
   );
-  const Jimp = await getJimp();
-  const image = await Jimp.read(inputData);
+  debugImg(`resizeImg start, target size: ${newSize.width}x${newSize.height}`);
+  const Jimp2 = await getJimp();
+  const image = await Jimp2.read(inputData);
   const { width, height } = image.bitmap;
   if (!width || !height) {
     throw Error("Undefined width or height from the input image.");
@@ -138,9 +150,10 @@ async function resizeImg(inputData, newSize) {
   if (newSize.width === width && newSize.height === height) {
     return inputData;
   }
-  image.resize(newSize.width, newSize.height, Jimp.RESIZE_NEAREST_NEIGHBOR);
+  image.resize(newSize.width, newSize.height, Jimp2.RESIZE_NEAREST_NEIGHBOR);
   image.quality(90);
-  const resizedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);
+  const resizedBuffer = await image.getBufferAsync(Jimp2.MIME_JPEG);
+  debugImg(`resizeImg done, target size: ${newSize.width}x${newSize.height}`);
   return resizedBuffer;
 }
 async function bufferFromBase642(base64) {
@@ -149,9 +162,13 @@ async function bufferFromBase642(base64) {
   if (dataSplitted.length !== 2) {
     throw Error("Invalid base64 data");
   }
-  return import_node_buffer2.Buffer.from(dataSplitted[1], "base64");
+  debugImg(`bufferFromBase64 start: ${base64}`);
+  const res = import_node_buffer2.Buffer.from(dataSplitted[1], "base64");
+  debugImg(`bufferFromBase64 done: ${base64}`);
+  return res;
 }
 async function resizeImgBase64(inputBase64, newSize) {
+  debugImg(`resizeImgBase64 start: ${inputBase64}`);
   const splitFlag = ";base64,";
   const dataSplitted = inputBase64.split(splitFlag);
   if (dataSplitted.length !== 2) {
@@ -160,7 +177,9 @@ async function resizeImgBase64(inputBase64, newSize) {
   const imageBuffer = import_node_buffer2.Buffer.from(dataSplitted[1], "base64");
   const buffer = await resizeImg(imageBuffer, newSize);
   const content = buffer.toString("base64");
-  return `${dataSplitted[0]}${splitFlag}${content}`;
+  const res = `${dataSplitted[0]}${splitFlag}${content}`;
+  debugImg(`resizeImgBase64 done: ${inputBase64}`);
+  return res;
 }
 function zoomForGPT4o(originalWidth, originalHeight) {
   const maxWidth = 2048;
@@ -182,8 +201,8 @@ function zoomForGPT4o(originalWidth, originalHeight) {
   };
 }
 async function trimImage(image) {
-  const Jimp = await getJimp();
-  const jimpImage = await Jimp.read(
+  const Jimp2 = await getJimp();
+  const jimpImage = await Jimp2.read(
     import_node_buffer2.Buffer.isBuffer(image) ? image : import_node_buffer2.Buffer.from(image)
   );
   const { width, height } = jimpImage.bitmap;
@@ -204,28 +223,37 @@ async function trimImage(image) {
     height: trimmedHeight
   };
 }
-async function paddingToMatchBlock(imageBase64, blockSize = 28) {
-  const Jimp = await getJimp();
-  const imageBuffer = await bufferFromBase642(imageBase64);
-  const image = await Jimp.read(imageBuffer);
+async function jimpFromBase64(base64) {
+  const Jimp2 = await getJimp();
+  const imageBuffer = await bufferFromBase642(base64);
+  return Jimp2.read(imageBuffer);
+}
+async function paddingToMatchBlock(image, blockSize = 28) {
+  debugImg("paddingToMatchBlock start");
   const { width, height } = image.bitmap;
   const targetWidth = Math.ceil(width / blockSize) * blockSize;
   const targetHeight = Math.ceil(height / blockSize) * blockSize;
   if (targetWidth === width && targetHeight === height) {
-    return imageBase64;
+    return image;
   }
-  const paddedImage = new Jimp(targetWidth, targetHeight, 4294967295);
+  const paddedImage = new import_jimp.default(targetWidth, targetHeight, 4294967295);
   paddedImage.composite(image, 0, 0);
-  const base64 = await paddedImage.getBase64Async(Jimp.MIME_JPEG);
-  return base64;
+  return paddedImage;
+}
+async function cropByRect(image, rect) {
+  const { left, top, width, height } = rect;
+  image.crop(left, top, width, height);
+}
+async function jimpToBase64(image) {
+  return image.getBase64Async(import_jimp.default.MIME_JPEG);
 }
 
 // src/img/box-select.ts
 var import_node_assert3 = __toESM(require("assert"));
 var cachedFont = null;
 var createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5) => {
-  const Jimp = await getJimp();
-  const image = new Jimp(imageWidth, imageHeight, 0);
+  const Jimp2 = await getJimp();
+  const image = new Jimp2(imageWidth, imageHeight, 0);
   const colors = [
     { rect: 3324182783, text: 4294967295 },
     // red, white
@@ -312,7 +340,7 @@ var createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5)
       }
     );
     try {
-      cachedFont = cachedFont || await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE);
+      cachedFont = cachedFont || await Jimp2.loadFont(Jimp2.FONT_SANS_16_WHITE);
     } catch (error) {
       console.error("Error loading font", error);
     }
@@ -322,8 +350,8 @@ var createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5)
       rectY,
       {
         text: element.indexId.toString(),
-        alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
-        alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
+        alignmentX: Jimp2.HORIZONTAL_ALIGN_CENTER,
+        alignmentY: Jimp2.VERTICAL_ALIGN_MIDDLE
       },
       rectWidth,
       rectHeight
@@ -336,7 +364,7 @@ var compositeElementInfoImg = async (options) => {
   let width = 0;
   let height = 0;
   let jimpImage;
-  const Jimp = await getJimp();
+  const Jimp2 = await getJimp();
   if (options.size) {
     width = options.size.width;
     height = options.size.height;
@@ -348,10 +376,10 @@ var compositeElementInfoImg = async (options) => {
     jimpImage = info.jimpImage;
   } else {
     const imageBuffer = await bufferFromBase64(options.inputImgBase64);
-    jimpImage = await Jimp.read(imageBuffer);
+    jimpImage = await Jimp2.read(imageBuffer);
     const imageBitmap = jimpImage.bitmap;
     if (imageBitmap.width !== width || imageBitmap.height !== height) {
-      jimpImage.resize(width, height, Jimp.RESIZE_NEAREST_NEIGHBOR);
+      jimpImage.resize(width, height, Jimp2.RESIZE_NEAREST_NEIGHBOR);
     }
   }
   if (!width || !height) {
@@ -365,16 +393,16 @@ var compositeElementInfoImg = async (options) => {
       height,
       options.annotationPadding
     );
-    const svgImage = await Jimp.read(svgOverlay);
+    const svgImage = await Jimp2.read(svgOverlay);
     const compositeImage = await image.composite(svgImage, 0, 0, {
-      mode: Jimp.BLEND_SOURCE_OVER,
+      mode: Jimp2.BLEND_SOURCE_OVER,
       opacitySource: 1,
       opacityDest: 1
     });
     return compositeImage;
   }).then(async (compositeImage) => {
     compositeImage.quality(90);
-    const base64 = await compositeImage.getBase64Async(Jimp.MIME_JPEG);
+    const base64 = await compositeImage.getBase64Async(Jimp2.MIME_JPEG);
     return base64;
   }).catch((error) => {
     throw error;
@@ -407,9 +435,9 @@ var processImageElementInfo = async (options) => {
 async function drawBoxOnImage(options) {
   const { inputImgBase64, rect } = options;
   const color = { r: 255, g: 0, b: 0, a: 255 };
-  const Jimp = await getJimp();
+  const Jimp2 = await getJimp();
   const imageBuffer = await bufferFromBase64(inputImgBase64);
-  const image = await Jimp.read(imageBuffer);
+  const image = await Jimp2.read(imageBuffer);
   const centerX = rect.x;
   const centerY = rect.y;
   const radius = 5;
@@ -429,7 +457,7 @@ async function drawBoxOnImage(options) {
     }
   );
   image.quality(90);
-  const resultBase64 = await image.getBase64Async(Jimp.MIME_JPEG);
+  const resultBase64 = await image.getBase64Async(Jimp2.MIME_JPEG);
   return resultBase64;
 }
 async function savePositionImg(options) {
@@ -445,9 +473,12 @@ async function savePositionImg(options) {
   base64Encoded,
   bufferFromBase64,
   compositeElementInfoImg,
+  cropByRect,
   drawBoxOnImage,
   imageInfo,
   imageInfoOfBase64,
+  jimpFromBase64,
+  jimpToBase64,
   paddingToMatchBlock,
   processImageElementInfo,
   resizeImg,

package/dist/script/htmlElement.js

@@ -1538,28 +1538,8 @@ ${indentStr}${after}`;
     });
     return Object.fromEntries(attributesList);
   }
-  var nodeHashCacheList = [];
-  if (typeof window !== "undefined") {
-    window.midsceneNodeHashCacheList = window.midsceneNodeHashCacheList || [];
-    nodeHashCacheList = window.midsceneNodeHashCacheList;
-  }
-  function resetNodeHashCacheList() {
-    if (typeof window !== "undefined") {
-      nodeHashCacheList = window.midsceneNodeHashCacheList || [];
-      window.midsceneNodeHashCacheList = [];
-    } else {
-      nodeHashCacheList = [];
-    }
-  }
   function midsceneGenerateHash(node, content, rect) {
-    var _a;
-    if (node && nodeHashCacheList.find((item) => item.node === node)) {
-      return ((_a = nodeHashCacheList.find((item) => item.node === node)) == null ? void 0 : _a.id) || "";
-    }
     const slicedHash = generateHashId(rect, content);
-    if (node && typeof window !== "undefined") {
-      window.midsceneNodeHashCacheList.push({ node, id: slicedHash });
-    }
     return slicedHash;
   }
   function getTopDocument() {
@@ -1767,7 +1747,6 @@ ${indentStr}${after}`;
   }
   function extractTreeNode(initNode, debugMode2 = false) {
     setDebugMode(debugMode2);
-    resetNodeHashCacheList();
     indexId = 0;
     const topDocument = getTopDocument();
     const startNode = initNode || topDocument;

package/dist/script/htmlElementDebug.js

@@ -1399,28 +1399,8 @@ var midscene_element_inspector = (() => {
     });
     return Object.fromEntries(attributesList);
   }
-  var nodeHashCacheList = [];
-  if (typeof window !== "undefined") {
-    window.midsceneNodeHashCacheList = window.midsceneNodeHashCacheList || [];
-    nodeHashCacheList = window.midsceneNodeHashCacheList;
-  }
-  function resetNodeHashCacheList() {
-    if (typeof window !== "undefined") {
-      nodeHashCacheList = window.midsceneNodeHashCacheList || [];
-      window.midsceneNodeHashCacheList = [];
-    } else {
-      nodeHashCacheList = [];
-    }
-  }
   function midsceneGenerateHash(node, content, rect) {
-    var _a;
-    if (node && nodeHashCacheList.find((item) => item.node === node)) {
-      return ((_a = nodeHashCacheList.find((item) => item.node === node)) == null ? void 0 : _a.id) || "";
-    }
     const slicedHash = generateHashId(rect, content);
-    if (node && typeof window !== "undefined") {
-      window.midsceneNodeHashCacheList.push({ node, id: slicedHash });
-    }
     return slicedHash;
   }
   function setMidsceneVisibleRectOnWindow() {
@@ -1634,7 +1614,6 @@ var midscene_element_inspector = (() => {
   }
   function extractTreeNode(initNode, debugMode2 = false) {
     setDebugMode(debugMode2);
-    resetNodeHashCacheList();
     indexId = 0;
     const topDocument = getTopDocument();
     const startNode = initNode || topDocument;

package/dist/types/img.d.ts

@@ -1,7 +1,7 @@
 import { Buffer } from 'node:buffer';
 import Jimp from 'jimp';
-import { NodeType } from './constants.js';
 import { R as Rect } from './index-305e7a7e.js';
+import { NodeType } from './constants.js';
 
 interface Size {
     width: number;
@@ -102,7 +102,10 @@ declare function trimImage(image: string | Buffer): Promise<{
     width: number;
     height: number;
 } | null>;
-declare function paddingToMatchBlock(imageBase64: string, blockSize?: number): Promise<string>;
+declare function jimpFromBase64(base64: string): Promise<Jimp>;
+declare function paddingToMatchBlock(image: Jimp, blockSize?: number): Promise<Jimp>;
+declare function cropByRect(image: Jimp, rect: Rect): Promise<void>;
+declare function jimpToBase64(image: Jimp): Promise<string>;
 
 type ElementType = {
     locator?: string;
@@ -149,4 +152,4 @@ declare function savePositionImg(options: {
     outputPath: string;
 }): Promise<void>;
 
-export { base64Encoded, bufferFromBase64, compositeElementInfoImg, drawBoxOnImage, imageInfo, imageInfoOfBase64, paddingToMatchBlock, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage, zoomForGPT4o };
+export { base64Encoded, bufferFromBase64, compositeElementInfoImg, cropByRect, drawBoxOnImage, imageInfo, imageInfoOfBase64, jimpFromBase64, jimpToBase64, paddingToMatchBlock, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage, zoomForGPT4o };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/shared",
-  "version": "0.12.7",
+  "version": "0.12.8-beta-20250318124823.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",

package/src/extractor/util.ts

@@ -441,36 +441,12 @@ export function getNodeAttributes(
   return Object.fromEntries(attributesList);
 }
 
-let nodeHashCacheList: { node: Node; id: string }[] = [];
-if (typeof window !== 'undefined') {
-  (window as any).midsceneNodeHashCacheList =
-    (window as any).midsceneNodeHashCacheList || [];
-  nodeHashCacheList = (window as any).midsceneNodeHashCacheList;
-}
-const hashMap: Record<string, string> = {}; // id - combined
-
-// for each run, reset the cache list
-export function resetNodeHashCacheList() {
-  if (typeof window !== 'undefined') {
-    nodeHashCacheList = (window as any).midsceneNodeHashCacheList || [];
-    (window as any).midsceneNodeHashCacheList = [];
-  } else {
-    nodeHashCacheList = [];
-  }
-}
-
 export function midsceneGenerateHash(
   node: globalThis.Node | null,
   content: string,
   rect: any,
 ): string {
-  if (node && nodeHashCacheList.find((item) => item.node === node)) {
-    return nodeHashCacheList.find((item) => item.node === node)?.id || '';
-  }
   const slicedHash = generateHashId(rect, content);
-  if (node && typeof window !== 'undefined') {
-    (window as any).midsceneNodeHashCacheList.push({ node, id: slicedHash });
-  }
 
   // Returns the first 10 characters as a short hash
   return slicedHash;

package/src/extractor/web-extractor.ts

@@ -20,7 +20,6 @@ import {
   getTopDocument,
   logger,
   midsceneGenerateHash,
-  resetNodeHashCacheList,
   setDataForNode,
   setDebugMode,
   visibleRect,
@@ -292,7 +291,6 @@ export function extractTreeNode(
   debugMode = false,
 ): WebElementNode {
   setDebugMode(debugMode);
-  resetNodeHashCacheList();
   indexId = 0;
 
   const topDocument = getTopDocument();

package/src/img/index.ts

@@ -12,6 +12,9 @@ export {
   zoomForGPT4o,
   saveBase64Image,
   paddingToMatchBlock,
+  cropByRect,
+  jimpFromBase64,
+  jimpToBase64,
 } from './transform';
 export { processImageElementInfo, compositeElementInfoImg } from './box-select';
 export { drawBoxOnImage, savePositionImg } from './draw-box';

package/src/img/transform.ts

@@ -1,7 +1,12 @@
 import assert from 'node:assert';
 import { Buffer } from 'node:buffer';
+
+import getDebug from 'debug';
+import Jimp from 'jimp';
+import type { Rect } from 'src/types';
 import getJimp from './get-jimp';
 
+const debugImg = getDebug('img');
 /**
 /**
  * Saves a Base64-encoded image to a file
@@ -15,6 +20,7 @@ export async function saveBase64Image(options: {
   base64Data: string;
   outputPath: string;
 }): Promise<void> {
+  debugImg(`saveBase64Image start: ${options.outputPath}`);
   const { base64Data, outputPath } = options;
   // Remove the base64 data prefix (if any)
   const base64Image = base64Data.split(';base64,').pop() || base64Data;
@@ -26,6 +32,7 @@ export async function saveBase64Image(options: {
   const Jimp = await getJimp();
   const image = await Jimp.read(imageBuffer);
   await image.writeAsync(outputPath);
+  debugImg(`saveBase64Image done: ${options.outputPath}`);
 }
 
 /**
@@ -35,10 +42,13 @@ export async function saveBase64Image(options: {
  */
 export async function transformImgPathToBase64(inputPath: string) {
   // Use Jimp to process images and generate base64 data
+  debugImg(`transformImgPathToBase64 start: ${inputPath}`);
   const Jimp = await getJimp();
   const image = await Jimp.read(inputPath);
   const buffer = await image.getBufferAsync(Jimp.MIME_JPEG);
-  return buffer.toString('base64');
+  const res = buffer.toString('base64');
+  debugImg(`transformImgPathToBase64 done: ${inputPath}`);
+  return res;
 }
 
 /**
@@ -63,6 +73,7 @@ export async function resizeImg(
     'newSize must be positive',
   );
 
+  debugImg(`resizeImg start, target size: ${newSize.width}x${newSize.height}`);
   const Jimp = await getJimp();
   const image = await Jimp.read(inputData);
   const { width, height } = image.bitmap;
@@ -78,6 +89,7 @@ export async function resizeImg(
   image.resize(newSize.width, newSize.height, Jimp.RESIZE_NEAREST_NEIGHBOR);
   image.quality(90);
   const resizedBuffer = await image.getBufferAsync(Jimp.MIME_JPEG);
+  debugImg(`resizeImg done, target size: ${newSize.width}x${newSize.height}`);
 
   return resizedBuffer;
 }
@@ -88,7 +100,10 @@ export async function bufferFromBase64(base64: string) {
   if (dataSplitted.length !== 2) {
     throw Error('Invalid base64 data');
   }
-  return Buffer.from(dataSplitted[1], 'base64');
+  debugImg(`bufferFromBase64 start: ${base64}`);
+  const res = Buffer.from(dataSplitted[1], 'base64');
+  debugImg(`bufferFromBase64 done: ${base64}`);
+  return res;
 }
 
 export async function resizeImgBase64(
@@ -98,6 +113,7 @@ export async function resizeImgBase64(
     height: number;
   },
 ): Promise<string> {
+  debugImg(`resizeImgBase64 start: ${inputBase64}`);
   const splitFlag = ';base64,';
   const dataSplitted = inputBase64.split(splitFlag);
   if (dataSplitted.length !== 2) {
@@ -107,7 +123,9 @@ export async function resizeImgBase64(
   const imageBuffer = Buffer.from(dataSplitted[1], 'base64');
   const buffer = await resizeImg(imageBuffer, newSize);
   const content = buffer.toString('base64');
-  return `${dataSplitted[0]}${splitFlag}${content}`;
+  const res = `${dataSplitted[0]}${splitFlag}${content}`;
+  debugImg(`resizeImgBase64 done: ${inputBase64}`);
+  return res;
 }
 
 /**
@@ -195,24 +213,38 @@ export function prependBase64Header(base64: string, mimeType = 'image/png') {
   return `data:${mimeType};base64,${base64}`;
 }
 
-export async function paddingToMatchBlock(imageBase64: string, blockSize = 28) {
+export async function jimpFromBase64(base64: string): Promise<Jimp> {
   const Jimp = await getJimp();
-  const imageBuffer = await bufferFromBase64(imageBase64);
-  const image = await Jimp.read(imageBuffer);
+  const imageBuffer = await bufferFromBase64(base64);
+  return Jimp.read(imageBuffer);
+}
+
+export async function paddingToMatchBlock(
+  image: Jimp,
+  blockSize = 28,
+): Promise<Jimp> {
+  debugImg('paddingToMatchBlock start');
   const { width, height } = image.bitmap;
 
   const targetWidth = Math.ceil(width / blockSize) * blockSize;
   const targetHeight = Math.ceil(height / blockSize) * blockSize;
 
   if (targetWidth === width && targetHeight === height) {
-    return imageBase64;
+    return image;
   }
 
   const paddedImage = new Jimp(targetWidth, targetHeight, 0xffffffff);
 
   // Composite the original image onto the new canvas
   paddedImage.composite(image, 0, 0);
+  return paddedImage;
+}
+
+export async function cropByRect(image: Jimp, rect: Rect): Promise<void> {
+  const { left, top, width, height } = rect;
+  image.crop(left, top, width, height);
+}
 
-  const base64 = await paddedImage.getBase64Async(Jimp.MIME_JPEG);
-  return base64;
+export async function jimpToBase64(image: Jimp): Promise<string> {
+  return image.getBase64Async(Jimp.MIME_JPEG);
 }

package/src/node/fs.ts

@@ -1,8 +1,7 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { assert } from '../utils';
+import { assert, ifInBrowser } from '../utils';
 
 interface PkgInfo {
   name: string;
@@ -11,7 +10,6 @@ interface PkgInfo {
 }
 
 const pkgCacheMap: Record<string, PkgInfo> = {};
-const ifInBrowser = typeof window !== 'undefined';
 
 export function getRunningPkgInfo(dir?: string): PkgInfo | null {
   if (ifInBrowser) {