@rpascene/shared 0.30.8

package/dist/es/extractor/web-extractor.mjs

@@ -0,0 +1,361 @@
+import { CONTAINER_MINI_HEIGHT, CONTAINER_MINI_WIDTH, NodeType } from "../constants/index.mjs";
+import { isAElement, isButtonElement, isContainerElement, isFormElement, isImgElement, isTextElement } from "./dom-util.mjs";
+import { descriptionOfTree } from "./tree.mjs";
+import { elementRect, getNodeAttributes, getPseudoElementContent, getRect, getTopDocument, logger, rpasceneGenerateHash, setDebugMode } from "./util.mjs";
+import { onWindowMessage, postWindowMessage } from "./cs_postmessage.mjs";
+import { getContainerPath, getLocators } from "./customLocator.mjs";
+let indexId = 0;
+function tagNameOfNode(node, currentWindow = globalThis) {
+    let tagName = '';
+    if (node instanceof currentWindow.HTMLElement) {
+        var _node_tagName;
+        tagName = null == (_node_tagName = node.tagName) ? void 0 : _node_tagName.toLowerCase();
+    } else {
+        const parentElement = node.parentElement;
+        if (parentElement && parentElement instanceof currentWindow.HTMLElement) {
+            var _parentElement_tagName;
+            tagName = null == (_parentElement_tagName = parentElement.tagName) ? void 0 : _parentElement_tagName.toLowerCase();
+        }
+    }
+    return tagName ? `<${tagName}>` : '';
+}
+function collectElementInfo(node, currentWindow, currentDocument, baseZoom = 1, basePoint = {
+    left: 0,
+    top: 0
+}, isContainer = false) {
+    const rect = elementRect(node, currentWindow, currentDocument, baseZoom);
+    if (!rect) return null;
+    if (rect.width < CONTAINER_MINI_WIDTH || rect.height < CONTAINER_MINI_HEIGHT) return null;
+    if (0 !== basePoint.left || 0 !== basePoint.top) {
+        rect.left += basePoint.left;
+        rect.top += basePoint.top;
+    }
+    if (rect.height >= window.innerHeight && rect.width >= window.innerWidth) return null;
+    if (isFormElement(node, currentWindow)) {
+        const attributes = getNodeAttributes(node, currentWindow);
+        let valueContent = attributes.value || attributes.placeholder || node.textContent || '';
+        const nodeHashId = rpasceneGenerateHash(node, valueContent, rect);
+        const tagName = node.tagName.toLowerCase();
+        if ('select' === node.tagName.toLowerCase()) {
+            const selectedOption = node.options[node.selectedIndex];
+            valueContent = (null == selectedOption ? void 0 : selectedOption.textContent) || '';
+        }
+        if (('input' === node.tagName.toLowerCase() || 'textarea' === node.tagName.toLowerCase()) && node.value) valueContent = node.value;
+        const elementInfo = {
+            id: nodeHashId,
+            nodeHashId,
+            nodeType: NodeType.FORM_ITEM,
+            indexId: indexId++,
+            attributes: {
+                ...attributes,
+                htmlTagName: `<${tagName}>`,
+                nodeType: NodeType.FORM_ITEM
+            },
+            content: valueContent.trim(),
+            rect,
+            center: [
+                Math.round(rect.left + rect.width / 2),
+                Math.round(rect.top + rect.height / 2)
+            ],
+            zoom: rect.zoom,
+            isVisible: rect.isVisible
+        };
+        return elementInfo;
+    }
+    if (isButtonElement(node, currentWindow)) {
+        const rect = mergeElementAndChildrenRects(node, currentWindow, currentDocument, baseZoom);
+        if (!rect) return null;
+        const attributes = getNodeAttributes(node, currentWindow);
+        const pseudo = getPseudoElementContent(node, currentWindow);
+        const content = node.innerText || pseudo.before || pseudo.after || '';
+        const nodeHashId = rpasceneGenerateHash(node, content, rect);
+        const elementInfo = {
+            id: nodeHashId,
+            indexId: indexId++,
+            nodeHashId,
+            nodeType: NodeType.BUTTON,
+            attributes: {
+                ...attributes,
+                htmlTagName: tagNameOfNode(node, currentWindow),
+                nodeType: NodeType.BUTTON
+            },
+            content,
+            rect,
+            center: [
+                Math.round(rect.left + rect.width / 2),
+                Math.round(rect.top + rect.height / 2)
+            ],
+            zoom: rect.zoom,
+            isVisible: rect.isVisible
+        };
+        return elementInfo;
+    }
+    if (isImgElement(node, currentWindow)) {
+        var _node_nodeName;
+        const attributes = getNodeAttributes(node, currentWindow);
+        const nodeHashId = rpasceneGenerateHash(node, '', rect);
+        const elementInfo = {
+            id: nodeHashId,
+            indexId: indexId++,
+            nodeHashId,
+            attributes: {
+                ...attributes,
+                ...(null == (_node_nodeName = node.nodeName) ? void 0 : _node_nodeName.toLowerCase()) === 'svg' ? {
+                    svgContent: 'true'
+                } : {},
+                nodeType: NodeType.IMG,
+                htmlTagName: tagNameOfNode(node, currentWindow)
+            },
+            nodeType: NodeType.IMG,
+            content: '',
+            rect,
+            center: [
+                Math.round(rect.left + rect.width / 2),
+                Math.round(rect.top + rect.height / 2)
+            ],
+            zoom: rect.zoom,
+            isVisible: rect.isVisible
+        };
+        return elementInfo;
+    }
+    if (isTextElement(node, currentWindow)) {
+        var _node_textContent;
+        const text = null == (_node_textContent = node.textContent) ? void 0 : _node_textContent.trim().replace(/\n+/g, ' ');
+        if (!text) return null;
+        const attributes = getNodeAttributes(node, currentWindow);
+        const attributeKeys = Object.keys(attributes);
+        if (!text.trim() && 0 === attributeKeys.length) return null;
+        const nodeHashId = rpasceneGenerateHash(node, text, rect);
+        const elementInfo = {
+            id: nodeHashId,
+            indexId: indexId++,
+            nodeHashId,
+            nodeType: NodeType.TEXT,
+            attributes: {
+                ...attributes,
+                nodeType: NodeType.TEXT,
+                htmlTagName: tagNameOfNode(node, currentWindow)
+            },
+            center: [
+                Math.round(rect.left + rect.width / 2),
+                Math.round(rect.top + rect.height / 2)
+            ],
+            content: text,
+            rect,
+            zoom: rect.zoom,
+            isVisible: rect.isVisible
+        };
+        return elementInfo;
+    }
+    if (isAElement(node, currentWindow)) {
+        const attributes = getNodeAttributes(node, currentWindow);
+        const pseudo = getPseudoElementContent(node, currentWindow);
+        const content = node.innerText || pseudo.before || pseudo.after || '';
+        const nodeHashId = rpasceneGenerateHash(node, content, rect);
+        const elementInfo = {
+            id: nodeHashId,
+            indexId: indexId++,
+            nodeHashId,
+            nodeType: NodeType.A,
+            attributes: {
+                ...attributes,
+                htmlTagName: tagNameOfNode(node, currentWindow),
+                nodeType: NodeType.A
+            },
+            content,
+            rect,
+            center: [
+                Math.round(rect.left + rect.width / 2),
+                Math.round(rect.top + rect.height / 2)
+            ],
+            zoom: rect.zoom,
+            isVisible: rect.isVisible
+        };
+        return elementInfo;
+    }
+    if (isContainerElement(node, currentWindow) || isContainer) {
+        const attributes = getNodeAttributes(node, currentWindow);
+        const nodeHashId = rpasceneGenerateHash(node, '', rect);
+        const elementInfo = {
+            id: nodeHashId,
+            nodeHashId,
+            indexId: indexId++,
+            nodeType: NodeType.CONTAINER,
+            attributes: {
+                ...attributes,
+                nodeType: NodeType.CONTAINER,
+                htmlTagName: tagNameOfNode(node, currentWindow)
+            },
+            content: '',
+            rect,
+            center: [
+                Math.round(rect.left + rect.width / 2),
+                Math.round(rect.top + rect.height / 2)
+            ],
+            zoom: rect.zoom,
+            isVisible: rect.isVisible
+        };
+        return elementInfo;
+    }
+    return null;
+}
+async function extractTextWithPosition(initNode, debugMode = false) {
+    const elementNode = await extractTreeNode(initNode, debugMode);
+    const elementInfoArray = [];
+    function dfsTopChildren(node) {
+        if (node.node) elementInfoArray.push(node.node);
+        for(let i = 0; i < node.children.length; i++)dfsTopChildren(node.children[i]);
+    }
+    dfsTopChildren({
+        children: elementNode.children,
+        node: elementNode.node
+    });
+    console.log(elementInfoArray, 'elementInfoArray');
+    return elementInfoArray;
+}
+async function extractTreeNodeAsString(initNode, visibleOnly = false, debugMode = false) {
+    const elementNode = await extractTreeNode(initNode, debugMode);
+    return descriptionOfTree(elementNode, void 0, false, visibleOnly);
+}
+async function extractTreeNode(initNode, debugMode = false, basePoint = {
+    left: 0,
+    top: 0
+}, baseZoom = 1, containerPaths = []) {
+    setDebugMode(debugMode);
+    indexId = 0;
+    let containerPathClone = [
+        ...containerPaths
+    ];
+    const topDocument = getTopDocument();
+    const startNode = initNode || topDocument;
+    const topChildren = [];
+    function dfs(node, currentWindow, currentDocument, baseZoom = 1, basePoint = {
+        left: 0,
+        top: 0
+    }) {
+        if (!node) return null;
+        if (node.nodeType && 10 === node.nodeType) return null;
+        const elementInfo = collectElementInfo(node, currentWindow, currentDocument, baseZoom, basePoint, false);
+        if (elementInfo) {
+            const allPaths = getLocators(node);
+            elementInfo.allPaths = allPaths;
+            elementInfo.containerPaths = containerPathClone;
+        }
+        if (node instanceof currentWindow.HTMLIFrameElement) {
+            if (node.contentWindow && node.contentWindow) return null;
+        }
+        const nodeInfo = {
+            node: elementInfo,
+            children: []
+        };
+        if ((null == elementInfo ? void 0 : elementInfo.nodeType) === NodeType.BUTTON || (null == elementInfo ? void 0 : elementInfo.nodeType) === NodeType.IMG || (null == elementInfo ? void 0 : elementInfo.nodeType) === NodeType.TEXT || (null == elementInfo ? void 0 : elementInfo.nodeType) === NodeType.FORM_ITEM || (null == elementInfo ? void 0 : elementInfo.nodeType) === NodeType.CONTAINER) return nodeInfo;
+        const rect = getRect(node, baseZoom, currentWindow);
+        for(let i = 0; i < node.childNodes.length; i++){
+            logger('will dfs', node.childNodes[i]);
+            const childNodeInfo = dfs(node.childNodes[i], currentWindow, currentDocument, rect.zoom, basePoint);
+            if (Array.isArray(childNodeInfo)) nodeInfo.children.push(...childNodeInfo);
+            else if (childNodeInfo) nodeInfo.children.push(childNodeInfo);
+        }
+        if (null === nodeInfo.node) {
+            if (0 === nodeInfo.children.length) return null;
+            return nodeInfo.children;
+        }
+        return nodeInfo;
+    }
+    function getCssScale(ele) {
+        try {
+            const { width, height } = ele.getBoundingClientRect();
+            return {
+                cssScaleX: Number((width / ele.offsetWidth).toFixed(1)),
+                cssScaleY: Number((height / ele.offsetHeight).toFixed(1))
+            };
+        } catch (error) {
+            return {
+                cssScaleX: 1,
+                cssScaleY: 1
+            };
+        }
+    }
+    const rootNodeInfo = dfs(startNode, window, document, baseZoom, basePoint);
+    if (Array.isArray(rootNodeInfo)) topChildren.push(...rootNodeInfo);
+    else if (rootNodeInfo) topChildren.push(rootNodeInfo);
+    if (startNode === topDocument) {
+        const iframes = document.querySelectorAll('iframe');
+        for(let i = 0; i < iframes.length; i++){
+            const iframe = iframes[i];
+            const iframeInfo = collectElementInfo(iframe, window, document, 1);
+            const baseZoom = getCssScale(iframe).cssScaleX;
+            const containerPath = getContainerPath(iframe);
+            containerPathClone = containerPathClone.concat(containerPath);
+            if (iframeInfo) if (iframe.contentDocument && iframe.contentWindow) {
+                console.log("iframe\u540C\u57DF");
+                const iframeChildren = dfs(iframe.contentDocument.body, iframe.contentWindow, iframe.contentDocument, baseZoom, {
+                    left: iframeInfo.rect.left,
+                    top: iframeInfo.rect.top
+                });
+                if (Array.isArray(iframeChildren)) topChildren.push(...iframeChildren);
+                else if (iframeChildren) topChildren.push(iframeChildren);
+            } else {
+                console.log(iframeInfo, "iframe\u8DE8\u57DF\u4E86");
+                const iframeChildren = await postWindowMessage(iframe.contentWindow, window, {
+                    action: 'extractTreeNode',
+                    data: {
+                        basePoint: {
+                            left: iframeInfo.rect.left,
+                            top: iframeInfo.rect.top
+                        },
+                        baseZoom,
+                        containerPaths: containerPathClone
+                    }
+                });
+                if (Array.isArray(iframeChildren)) topChildren.push(...iframeChildren);
+                else if (iframeChildren) topChildren.push(iframeChildren);
+            }
+        }
+    }
+    return {
+        node: null,
+        children: topChildren
+    };
+}
+function mergeElementAndChildrenRects(node, currentWindow, currentDocument, baseZoom = 1) {
+    const selfRect = elementRect(node, currentWindow, currentDocument, baseZoom);
+    if (!selfRect) return null;
+    let minLeft = selfRect.left;
+    let minTop = selfRect.top;
+    let maxRight = selfRect.left + selfRect.width;
+    let maxBottom = selfRect.top + selfRect.height;
+    function traverse(child) {
+        for(let i = 0; i < child.childNodes.length; i++){
+            const sub = child.childNodes[i];
+            if (1 === sub.nodeType) {
+                const rect = elementRect(sub, currentWindow, currentDocument, baseZoom);
+                if (rect) {
+                    minLeft = Math.min(minLeft, rect.left);
+                    minTop = Math.min(minTop, rect.top);
+                    maxRight = Math.max(maxRight, rect.left + rect.width);
+                    maxBottom = Math.max(maxBottom, rect.top + rect.height);
+                }
+                traverse(sub);
+            }
+        }
+    }
+    traverse(node);
+    return {
+        ...selfRect,
+        left: minLeft,
+        top: minTop,
+        width: maxRight - minLeft,
+        height: maxBottom - minTop
+    };
+}
+if ('undefined' != typeof window) onWindowMessage(window, async ({ action, data }, { source })=>{
+    if ('extractTreeNode' === action) try {
+        return await extractTreeNode(document.body, false, data.basePoint, data.baseZoom, data.containerPaths);
+    } catch (error) {
+        return {
+            error: 'error message'
+        };
+    }
+});
+export { collectElementInfo, extractTextWithPosition, extractTreeNode, extractTreeNodeAsString, mergeElementAndChildrenRects };

package/dist/es/img/box-select.mjs

@@ -0,0 +1,184 @@
+import node_assert from "node:assert";
+import get_jimp from "./get-jimp.mjs";
+import { bufferFromBase64, imageInfoOfBase64 } from "./index.mjs";
+let cachedFont = null;
+const loadFonts = async ()=>{
+    const Jimp = await get_jimp();
+    try {
+        const fonts = await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE);
+        return fonts;
+    } catch (error) {
+        console.warn('Error loading font, will try to load online fonts', error);
+        const onlineFonts = 'https://cdn.jsdelivr.net/npm/jimp-compact@0.16.1-2/fonts/open-sans/open-sans-16-white/open-sans-16-white.fnt';
+        const fonts = await Jimp.loadFont(onlineFonts);
+        return fonts;
+    }
+};
+const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5, borderThickness = 2, prompt)=>{
+    const Jimp = await get_jimp();
+    const image = new Jimp(imageWidth, imageHeight, 0x00000000);
+    const colors = [
+        {
+            rect: 0xc62300ff,
+            text: 0xffffffff
+        },
+        {
+            rect: 0x0000ffff,
+            text: 0xffffffff
+        },
+        {
+            rect: 0x8b4513ff,
+            text: 0xffffffff
+        },
+        {
+            rect: 0x3e7b27ff,
+            text: 0xffffffff
+        },
+        {
+            rect: 0x500073ff,
+            text: 0xffffffff
+        }
+    ];
+    if (prompt) try {
+        cachedFont = cachedFont || await loadFonts();
+        const promptPadding = 10;
+        const promptMargin = 20;
+        const promptHeight = 30;
+        const promptY = imageHeight - promptHeight - promptMargin;
+        image.scan(0, promptY, imageWidth, promptHeight, (x, y, idx)=>{
+            image.bitmap.data[idx + 0] = 0x00;
+            image.bitmap.data[idx + 1] = 0x00;
+            image.bitmap.data[idx + 2] = 0x00;
+            image.bitmap.data[idx + 3] = 0xcc;
+        });
+        image.print(cachedFont, promptPadding, promptY, {
+            text: prompt,
+            alignmentX: Jimp.HORIZONTAL_ALIGN_LEFT,
+            alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
+        }, imageWidth - 2 * promptPadding, promptHeight);
+    } catch (error) {
+        console.error('Error drawing prompt text', error);
+    }
+    for(let index = 0; index < elements.length; index++){
+        const element = elements[index];
+        const color = colors[index % colors.length];
+        const paddedLeft = Math.max(0, element.rect.left - boxPadding);
+        const paddedTop = Math.max(0, element.rect.top - boxPadding);
+        const paddedWidth = Math.min(imageWidth - paddedLeft, element.rect.width + 2 * boxPadding);
+        const paddedHeight = Math.min(imageHeight - paddedTop, element.rect.height + 2 * boxPadding);
+        const paddedRect = {
+            left: paddedLeft,
+            top: paddedTop,
+            width: paddedWidth,
+            height: paddedHeight
+        };
+        image.scan(paddedRect.left, paddedRect.top, paddedRect.width, paddedRect.height, (x, y, idx)=>{
+            if (x >= paddedRect.left && x < paddedRect.left + borderThickness || x <= paddedRect.left + paddedRect.width - 1 && x > paddedRect.left + paddedRect.width - borderThickness || y >= paddedRect.top && y < paddedRect.top + borderThickness || y <= paddedRect.top + paddedRect.height - 1 && y > paddedRect.top + paddedRect.height - borderThickness) {
+                image.bitmap.data[idx + 0] = color.rect >> 24 & 0xff;
+                image.bitmap.data[idx + 1] = color.rect >> 16 & 0xff;
+                image.bitmap.data[idx + 2] = color.rect >> 8 & 0xff;
+                image.bitmap.data[idx + 3] = 0xff & color.rect;
+            }
+        });
+        const indexId = element.indexId;
+        if ('number' != typeof indexId) continue;
+        const textWidth = 8 * indexId.toString().length;
+        const textHeight = 12;
+        const rectWidth = textWidth + 5;
+        const rectHeight = textHeight + 4;
+        let rectX = paddedRect.left - rectWidth;
+        let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
+        const checkOverlap = (x, y)=>elements.slice(0, index).some((otherElement)=>x < otherElement.rect.left + otherElement.rect.width && x + rectWidth > otherElement.rect.left && y < otherElement.rect.top + otherElement.rect.height && y + rectHeight > otherElement.rect.top);
+        const isWithinBounds = (x, y)=>x >= 0 && x + rectWidth <= imageWidth && y >= 0 && y + rectHeight <= imageHeight;
+        if (checkOverlap(rectX, rectY) || !isWithinBounds(rectX, rectY)) if (!checkOverlap(paddedRect.left, paddedRect.top - rectHeight - 2) && isWithinBounds(paddedRect.left, paddedRect.top - rectHeight - 2)) {
+            rectX = paddedRect.left;
+            rectY = paddedRect.top - rectHeight - 2;
+        } else if (!checkOverlap(paddedRect.left, paddedRect.top + paddedRect.height + 2) && isWithinBounds(paddedRect.left, paddedRect.top + paddedRect.height + 2)) {
+            rectX = paddedRect.left;
+            rectY = paddedRect.top + paddedRect.height + 2;
+        } else if (!checkOverlap(paddedRect.left + paddedRect.width + 2, paddedRect.top) && isWithinBounds(paddedRect.left + paddedRect.width + 2, paddedRect.top)) {
+            rectX = paddedRect.left + paddedRect.width + 2;
+            rectY = paddedRect.top;
+        } else {
+            rectX = paddedRect.left;
+            rectY = paddedRect.top + 2;
+        }
+        image.scan(rectX, rectY, rectWidth, rectHeight, (x, y, idx)=>{
+            image.bitmap.data[idx + 0] = color.rect >> 24 & 0xff;
+            image.bitmap.data[idx + 1] = color.rect >> 16 & 0xff;
+            image.bitmap.data[idx + 2] = color.rect >> 8 & 0xff;
+            image.bitmap.data[idx + 3] = 0xff & color.rect;
+        });
+        try {
+            cachedFont = cachedFont || await loadFonts();
+        } catch (error) {
+            console.error('Error loading font', error);
+        }
+        image.print(cachedFont, rectX, rectY, {
+            text: indexId.toString(),
+            alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
+            alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE
+        }, rectWidth, rectHeight);
+    }
+    return image;
+};
+const compositeElementInfoImg = async (options)=>{
+    node_assert(options.inputImgBase64, 'inputImgBase64 is required');
+    let width = 0;
+    let height = 0;
+    let jimpImage;
+    const Jimp = await get_jimp();
+    if (options.size) {
+        width = options.size.width;
+        height = options.size.height;
+    }
+    if (width && height) {
+        const imageBuffer = await bufferFromBase64(options.inputImgBase64);
+        jimpImage = await Jimp.read(imageBuffer);
+        const imageBitmap = jimpImage.bitmap;
+        if (imageBitmap.width !== width || imageBitmap.height !== height) jimpImage.resize(width, height, Jimp.RESIZE_NEAREST_NEIGHBOR);
+    } else {
+        const info = await imageInfoOfBase64(options.inputImgBase64);
+        width = info.width;
+        height = info.height;
+        jimpImage = info.jimpImage;
+    }
+    if (!width || !height) throw Error('Image processing failed because width or height is undefined');
+    const { elementsPositionInfo, prompt } = options;
+    const result = await Promise.resolve(jimpImage).then(async (image)=>{
+        const svgOverlay = await createSvgOverlay(elementsPositionInfo, width, height, options.annotationPadding, options.borderThickness, prompt);
+        const svgImage = await Jimp.read(svgOverlay);
+        const compositeImage = await image.composite(svgImage, 0, 0, {
+            mode: Jimp.BLEND_SOURCE_OVER,
+            opacitySource: 1,
+            opacityDest: 1
+        });
+        return compositeImage;
+    }).then(async (compositeImage)=>{
+        compositeImage.quality(90);
+        const base64 = await compositeImage.getBase64Async(Jimp.MIME_JPEG);
+        return base64;
+    }).catch((error)=>{
+        throw error;
+    });
+    return result;
+};
+const processImageElementInfo = async (options)=>{
+    const base64Image = options.inputImgBase64.split(';base64,').pop();
+    node_assert(base64Image, 'base64Image is undefined');
+    const [compositeElementInfoImgBase64, compositeElementInfoImgWithoutTextBase64] = await Promise.all([
+        compositeElementInfoImg({
+            inputImgBase64: options.inputImgBase64,
+            elementsPositionInfo: options.elementsPositionInfo
+        }),
+        compositeElementInfoImg({
+            inputImgBase64: options.inputImgBase64,
+            elementsPositionInfo: options.elementsPositionInfoWithoutText
+        })
+    ]);
+    return {
+        compositeElementInfoImgBase64,
+        compositeElementInfoImgWithoutTextBase64
+    };
+};
+export { compositeElementInfoImg, processImageElementInfo };

package/dist/es/img/draw-box.mjs

@@ -0,0 +1,42 @@
+import get_jimp from "./get-jimp.mjs";
+import { bufferFromBase64 } from "./info.mjs";
+import { saveBase64Image } from "./transform.mjs";
+async function drawBoxOnImage(options) {
+    const { inputImgBase64, rect } = options;
+    const color = {
+        r: 255,
+        g: 0,
+        b: 0,
+        a: 255
+    };
+    const Jimp = await get_jimp();
+    const imageBuffer = await bufferFromBase64(inputImgBase64);
+    const image = await Jimp.read(imageBuffer);
+    const centerX = rect.x;
+    const centerY = rect.y;
+    const radius = 5;
+    image.scan(Math.floor(centerX - radius), Math.floor(centerY - radius), 2 * radius, 2 * radius, (x, y, idx)=>{
+        const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+        if (distance <= radius) {
+            image.bitmap.data[idx + 0] = color.r;
+            image.bitmap.data[idx + 1] = color.g;
+            image.bitmap.data[idx + 2] = color.b;
+            image.bitmap.data[idx + 3] = color.a;
+        }
+    });
+    image.quality(90);
+    const resultBase64 = await image.getBase64Async(Jimp.MIME_JPEG);
+    return resultBase64;
+}
+async function savePositionImg(options) {
+    const { inputImgBase64, rect, outputPath } = options;
+    const imgBase64 = await drawBoxOnImage({
+        inputImgBase64,
+        rect
+    });
+    await saveBase64Image({
+        base64Data: imgBase64,
+        outputPath
+    });
+}
+export { drawBoxOnImage, savePositionImg };

package/dist/es/img/get-jimp.mjs

@@ -0,0 +1,10 @@
+import jimp from "jimp";
+import { ifInBrowser, ifInWorker } from "../utils.mjs";
+async function getJimp() {
+    if (ifInBrowser || ifInWorker) {
+        await import("jimp/browser/lib/jimp.js");
+        return ('undefined' != typeof window ? window : self).Jimp;
+    }
+    return jimp;
+}
+export { getJimp as default };

package/dist/es/img/get-photon.mjs

@@ -0,0 +1,19 @@
+import { ifInBrowser, ifInNode, ifInWorker } from "../utils.mjs";
+let photonModule = null;
+let isInitialized = false;
+async function getPhoton() {
+    if (photonModule && isInitialized) return photonModule;
+    try {
+        if (ifInBrowser || ifInWorker) {
+            const photon = await import("@silvia-odwyer/photon");
+            if ('function' == typeof photon.default) await photon.default();
+            photonModule = photon;
+        } else if (ifInNode) photonModule = await import("@silvia-odwyer/photon-node");
+        if (!photonModule.PhotonImage || !photonModule.PhotonImage.new_from_byteslice) throw new Error('PhotonImage.new_from_byteslice is not available');
+        isInitialized = true;
+        return photonModule;
+    } catch (error) {
+        throw new Error(`Failed to load photon module: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+export { getPhoton as default };

package/dist/es/img/get-sharp.mjs

@@ -0,0 +1,11 @@
+import { ifInNode } from "../utils.mjs";
+async function getSharp() {
+    if (!ifInNode) throw new Error('Sharp is only available in Node.js environment');
+    try {
+        const sharp = await import("sharp");
+        return sharp.default;
+    } catch (error) {
+        throw new Error(`Failed to load sharp module: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+export { getSharp as default };

package/dist/es/img/index.mjs

@@ -0,0 +1,5 @@
+import { bufferFromBase64, imageInfo, imageInfoOfBase64, isValidPNGImageBuffer } from "./info.mjs";
+import { createImgBase64ByFormat, cropByRect, httpImg2Base64, jimpFromBase64, jimpToBase64, localImg2Base64, paddingToMatchBlock, paddingToMatchBlockByBase64, parseBase64, preProcessImageUrl, resizeAndConvertImgBuffer, resizeImgBase64, saveBase64Image, zoomForGPT4o } from "./transform.mjs";
+import { compositeElementInfoImg, processImageElementInfo } from "./box-select.mjs";
+import { drawBoxOnImage, savePositionImg } from "./draw-box.mjs";
+export { bufferFromBase64, compositeElementInfoImg, createImgBase64ByFormat, cropByRect, drawBoxOnImage, httpImg2Base64, imageInfo, imageInfoOfBase64, isValidPNGImageBuffer, jimpFromBase64, jimpToBase64, localImg2Base64, paddingToMatchBlock, paddingToMatchBlockByBase64, parseBase64, preProcessImageUrl, processImageElementInfo, resizeAndConvertImgBuffer, resizeImgBase64, saveBase64Image, savePositionImg, zoomForGPT4o };

package/dist/es/img/info.mjs

@@ -0,0 +1,32 @@
+import node_assert from "node:assert";
+import { Buffer } from "node:buffer";
+import get_jimp from "./get-jimp.mjs";
+async function imageInfo(image) {
+    const Jimp = await get_jimp();
+    let jimpImage;
+    if ('string' == typeof image) jimpImage = await Jimp.read(image);
+    else if (Buffer.isBuffer(image)) jimpImage = await Jimp.read(image);
+    else if (image instanceof Jimp) jimpImage = image;
+    else throw new Error('Invalid image input: must be a string path or a Buffer');
+    const { width, height } = jimpImage.bitmap;
+    node_assert(width && height, `Invalid image: ${'string' == typeof image ? image : 'Buffer'}`);
+    return {
+        width,
+        height,
+        jimpImage
+    };
+}
+async function imageInfoOfBase64(imageBase64) {
+    const buffer = await bufferFromBase64(imageBase64);
+    return imageInfo(buffer);
+}
+async function bufferFromBase64(imageBase64) {
+    const base64Data = imageBase64.replace(/^data:image\/\w+;base64,/, '');
+    return Buffer.from(base64Data, 'base64');
+}
+function isValidPNGImageBuffer(buffer) {
+    if (!buffer || buffer.length < 8) return false;
+    const isPNG = 0x89 === buffer[0] && 0x50 === buffer[1] && 0x4e === buffer[2] && 0x47 === buffer[3];
+    return isPNG;
+}
+export { bufferFromBase64, imageInfo, imageInfoOfBase64, isValidPNGImageBuffer };