@midscene/shared 1.10.1-beta-20260702033439.0 → 1.10.2

package/dist/es/env/parse-model-config.mjs

@@ -5,7 +5,7 @@ import { assert } from "../utils.mjs";
 import { maskConfig, parseJson } from "./helper.mjs";
 import { initDebugConfig } from "./init-debug.mjs";
 const MODEL_CONFIG_DOC_URL = 'https://midscenejs.com/model-common-config.html';
-const getCurrentVersion = ()=>"1.10.1-beta-20260702033439.0";
+const getCurrentVersion = ()=>"1.10.2";
 const getInvalidModelFamilyMessage = (modelFamily)=>`Invalid MIDSCENE_MODEL_FAMILY value: ${modelFamily}. Current version v${getCurrentVersion()} accepts the following model families: ${MODEL_FAMILY_VALUES.join(', ')}. You can also visit ${MODEL_CONFIG_DOC_URL} for the latest configuration information.`;
 const KEYS_MAP = {
     insight: INSIGHT_MODEL_CONFIG_KEYS,

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

@@ -597,6 +597,27 @@ function drawCircle(pixels, width, height, center, radius, color, options = {})
         pixels[idx + 3] = color.a;
     }
 }
+function drawEllipse(pixels, width, height, center, radiusX, radiusY, color, thickness = 2) {
+    const cx = Math.round(center.x);
+    const cy = Math.round(center.y);
+    const outerRadiusX = Math.max(Math.round(radiusX), 1);
+    const outerRadiusY = Math.max(Math.round(radiusY), 1);
+    const innerRadiusX = Math.max(outerRadiusX - Math.round(thickness), 0);
+    const innerRadiusY = Math.max(outerRadiusY - Math.round(thickness), 0);
+    for(let py = cy - outerRadiusY; py <= cy + outerRadiusY; py++)for(let px = cx - outerRadiusX; px <= cx + outerRadiusX; px++){
+        if (px < 0 || py < 0 || px >= width || py >= height) continue;
+        const dx = px - cx;
+        const dy = py - cy;
+        const outer = dx * dx / (outerRadiusX * outerRadiusX) + dy * dy / (outerRadiusY * outerRadiusY);
+        const inner = 0 === innerRadiusX || 0 === innerRadiusY ? 0 : dx * dx / (innerRadiusX * innerRadiusX) + dy * dy / (innerRadiusY * innerRadiusY);
+        if (outer > 1 || inner < 1) continue;
+        const idx = (py * width + px) * 4;
+        pixels[idx + 0] = color.r;
+        pixels[idx + 1] = color.g;
+        pixels[idx + 2] = color.b;
+        pixels[idx + 3] = color.a;
+    }
+}
 function drawLine(pixels, width, height, from, to, color, thickness = 2) {
     const x0 = Math.round(from.x);
     const y0 = Math.round(from.y);
@@ -619,59 +640,107 @@ function drawLine(pixels, width, height, from, to, color, thickness = 2) {
         }
     }
 }
-function drawPointMarker(pixels, width, height, point, radius) {
-    const red = {
+function drawCallout(pixels, width, height, targetPoint, markerRadius, style) {
+    const cx = Math.round(targetPoint.x);
+    const cy = Math.round(targetPoint.y);
+    const gap = Math.max(markerRadius + 18, 30);
+    const candidates = [
+        {
+            x: cx + gap,
+            y: cy - gap
+        },
+        {
+            x: cx + gap,
+            y: cy + gap
+        },
+        {
+            x: cx - gap,
+            y: cy - gap
+        },
+        {
+            x: cx - gap,
+            y: cy + gap
+        },
+        {
+            x: cx,
+            y: cy - gap
+        },
+        {
+            x: cx,
+            y: cy + gap
+        },
+        {
+            x: cx + gap,
+            y: cy
+        },
+        {
+            x: cx - gap,
+            y: cy
+        }
+    ];
+    const calloutCenter = candidates.find((candidate)=>candidate.x - markerRadius >= 0 && candidate.x + markerRadius < width && candidate.y - markerRadius >= 0 && candidate.y + markerRadius < height) || {
+        x: Math.min(Math.max(cx + gap, markerRadius), width - markerRadius - 1),
+        y: Math.min(Math.max(cy - gap, markerRadius), height - markerRadius - 1)
+    };
+    const lineAngle = Math.atan2(cy - calloutCenter.y, cx - calloutCenter.x);
+    const lineStart = {
+        x: calloutCenter.x + Math.cos(lineAngle) * (markerRadius + 1),
+        y: calloutCenter.y + Math.sin(lineAngle) * (markerRadius + 1)
+    };
+    const targetRadiusX = 30;
+    const targetRadiusY = 15;
+    const ellipseBoundaryDistance = 1 / Math.sqrt(Math.cos(lineAngle) ** 2 / targetRadiusX ** 2 + Math.sin(lineAngle) ** 2 / targetRadiusY ** 2);
+    const lineEnd = {
+        x: cx - Math.cos(lineAngle) * ellipseBoundaryDistance,
+        y: cy - Math.sin(lineAngle) * ellipseBoundaryDistance
+    };
+    drawLine(pixels, width, height, lineStart, lineEnd, style.callout, 2);
+    drawCircle(pixels, width, height, calloutCenter, markerRadius + 2, style.calloutBorder, {
+        thickness: 3
+    });
+    drawCircle(pixels, width, height, calloutCenter, markerRadius, style.callout, {
+        fill: true
+    });
+    drawEllipse(pixels, width, height, targetPoint, targetRadiusX, targetRadiusY, style.callout, 2);
+    const textWidth = getNumberWidth(style.indexId);
+    const textHeight = FONT_HEIGHT * FONT_SCALE;
+    drawNumber(pixels, width, height, style.indexId, Math.round(calloutCenter.x - textWidth / 2), Math.round(calloutCenter.y - textHeight / 2), style.calloutText);
+}
+function drawPointMarker(pixels, width, height, point, radius, indexId = 1) {
+    const markerColors = [
+        {
+            r: 0xc6,
+            g: 0x23,
+            b: 0x00,
+            a: 0xee
+        },
+        {
+            r: 0x00,
+            g: 0x00,
+            b: 0xff,
+            a: 0xee
+        }
+    ];
+    const callout = markerColors[(indexId - 1) % markerColors.length];
+    const calloutBorder = {
         r: 0xff,
-        g: 0x3b,
-        b: 0x30,
+        g: 0xff,
+        b: 0xff,
         a: 0xff
     };
-    const white = {
+    const calloutText = {
         r: 0xff,
         g: 0xff,
         b: 0xff,
         a: 0xff
     };
-    const cx = Math.round(point.x);
-    const cy = Math.round(point.y);
-    const markerRadius = Math.max(Math.round(radius), 8);
-    drawCircle(pixels, width, height, point, markerRadius + 2, white, {
-        thickness: 3
-    });
-    drawCircle(pixels, width, height, point, markerRadius, red, {
-        thickness: 3
+    const markerRadius = Math.max(Math.round(radius), 10);
+    drawCallout(pixels, width, height, point, markerRadius, {
+        callout,
+        calloutBorder,
+        calloutText,
+        indexId
     });
-    drawCircle(pixels, width, height, point, 3, red, {
-        fill: true
-    });
-    drawLine(pixels, width, height, {
-        x: cx - markerRadius - 4,
-        y: cy
-    }, {
-        x: cx - markerRadius + 2,
-        y: cy
-    }, red, 2);
-    drawLine(pixels, width, height, {
-        x: cx + markerRadius - 2,
-        y: cy
-    }, {
-        x: cx + markerRadius + 4,
-        y: cy
-    }, red, 2);
-    drawLine(pixels, width, height, {
-        x: cx,
-        y: cy - markerRadius - 4
-    }, {
-        x: cx,
-        y: cy - markerRadius + 2
-    }, red, 2);
-    drawLine(pixels, width, height, {
-        x: cx,
-        y: cy + markerRadius - 2
-    }, {
-        x: cx,
-        y: cy + markerRadius + 4
-    }, red, 2);
 }
 function blendPixels(basePixels, overlayPixels, width, height) {
     const result = new Uint8Array(basePixels.length);
@@ -700,7 +769,7 @@ function blendPixels(basePixels, overlayPixels, width, height) {
     }
     return result;
 }
-const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5, borderThickness = 2, prompt)=>{
+const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5, borderThickness = 2, prompt, centerPoint = false)=>{
     const overlayPixels = new Uint8Array(imageWidth * imageHeight * 4);
     const colors = [
         {
@@ -804,6 +873,12 @@ const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding =
             h: paddedHeight
         };
         drawRect(overlayPixels, imageWidth, imageHeight, paddedRect, color.rect, borderThickness);
+        if (centerPoint) drawCircle(overlayPixels, imageWidth, imageHeight, {
+            x: element.rect.left + element.rect.width / 2,
+            y: element.rect.top + element.rect.height / 2
+        }, 4, color.rect, {
+            fill: true
+        });
         const indexId = element.indexId;
         if ('number' != typeof indexId) continue;
         const textWidth = getNumberWidth(indexId);
@@ -868,7 +943,7 @@ const compositeElementInfoImg = async (options)=>{
     const { elementsPositionInfo, prompt } = options;
     try {
         const basePixels = photonImage.get_raw_pixels();
-        const overlayPixels = await createSvgOverlay(elementsPositionInfo, width, height, options.annotationPadding, options.borderThickness, prompt);
+        const overlayPixels = await createSvgOverlay(elementsPositionInfo, width, height, options.annotationPadding, options.borderThickness, prompt, options.centerPoint);
         const blendedPixels = blendPixels(basePixels, overlayPixels, width, height);
         const resultImage = new PhotonImage(blendedPixels, width, height);
         const base64 = await photonToBase64(resultImage, 90);
@@ -907,7 +982,7 @@ const compositePointMarkerImg = async (options)=>{
     try {
         const basePixels = photonImage.get_raw_pixels();
         const overlayPixels = new Uint8Array(width * height * 4);
-        drawPointMarker(overlayPixels, width, height, options.point, options.radius ?? 14);
+        drawPointMarker(overlayPixels, width, height, options.point, options.radius ?? 14, options.indexId ?? 1);
         const blendedPixels = blendPixels(basePixels, overlayPixels, width, height);
         const resultImage = new PhotonImage(blendedPixels, width, height);
         const base64 = await photonToBase64(resultImage, 90);

package/dist/lib/env/parse-model-config.js

@@ -37,7 +37,7 @@ const external_utils_js_namespaceObject = require("../utils.js");
 const external_helper_js_namespaceObject = require("./helper.js");
 const external_init_debug_js_namespaceObject = require("./init-debug.js");
 const MODEL_CONFIG_DOC_URL = 'https://midscenejs.com/model-common-config.html';
-const getCurrentVersion = ()=>"1.10.1-beta-20260702033439.0";
+const getCurrentVersion = ()=>"1.10.2";
 const getInvalidModelFamilyMessage = (modelFamily)=>`Invalid MIDSCENE_MODEL_FAMILY value: ${modelFamily}. Current version v${getCurrentVersion()} accepts the following model families: ${external_types_js_namespaceObject.MODEL_FAMILY_VALUES.join(', ')}. You can also visit ${MODEL_CONFIG_DOC_URL} for the latest configuration information.`;
 const KEYS_MAP = {
     insight: external_constants_js_namespaceObject.INSIGHT_MODEL_CONFIG_KEYS,

package/dist/lib/img/box-select.js

@@ -639,6 +639,27 @@ function drawCircle(pixels, width, height, center, radius, color, options = {})
         pixels[idx + 3] = color.a;
     }
 }
+function drawEllipse(pixels, width, height, center, radiusX, radiusY, color, thickness = 2) {
+    const cx = Math.round(center.x);
+    const cy = Math.round(center.y);
+    const outerRadiusX = Math.max(Math.round(radiusX), 1);
+    const outerRadiusY = Math.max(Math.round(radiusY), 1);
+    const innerRadiusX = Math.max(outerRadiusX - Math.round(thickness), 0);
+    const innerRadiusY = Math.max(outerRadiusY - Math.round(thickness), 0);
+    for(let py = cy - outerRadiusY; py <= cy + outerRadiusY; py++)for(let px = cx - outerRadiusX; px <= cx + outerRadiusX; px++){
+        if (px < 0 || py < 0 || px >= width || py >= height) continue;
+        const dx = px - cx;
+        const dy = py - cy;
+        const outer = dx * dx / (outerRadiusX * outerRadiusX) + dy * dy / (outerRadiusY * outerRadiusY);
+        const inner = 0 === innerRadiusX || 0 === innerRadiusY ? 0 : dx * dx / (innerRadiusX * innerRadiusX) + dy * dy / (innerRadiusY * innerRadiusY);
+        if (outer > 1 || inner < 1) continue;
+        const idx = (py * width + px) * 4;
+        pixels[idx + 0] = color.r;
+        pixels[idx + 1] = color.g;
+        pixels[idx + 2] = color.b;
+        pixels[idx + 3] = color.a;
+    }
+}
 function drawLine(pixels, width, height, from, to, color, thickness = 2) {
     const x0 = Math.round(from.x);
     const y0 = Math.round(from.y);
@@ -661,59 +682,107 @@ function drawLine(pixels, width, height, from, to, color, thickness = 2) {
         }
     }
 }
-function drawPointMarker(pixels, width, height, point, radius) {
-    const red = {
+function drawCallout(pixels, width, height, targetPoint, markerRadius, style) {
+    const cx = Math.round(targetPoint.x);
+    const cy = Math.round(targetPoint.y);
+    const gap = Math.max(markerRadius + 18, 30);
+    const candidates = [
+        {
+            x: cx + gap,
+            y: cy - gap
+        },
+        {
+            x: cx + gap,
+            y: cy + gap
+        },
+        {
+            x: cx - gap,
+            y: cy - gap
+        },
+        {
+            x: cx - gap,
+            y: cy + gap
+        },
+        {
+            x: cx,
+            y: cy - gap
+        },
+        {
+            x: cx,
+            y: cy + gap
+        },
+        {
+            x: cx + gap,
+            y: cy
+        },
+        {
+            x: cx - gap,
+            y: cy
+        }
+    ];
+    const calloutCenter = candidates.find((candidate)=>candidate.x - markerRadius >= 0 && candidate.x + markerRadius < width && candidate.y - markerRadius >= 0 && candidate.y + markerRadius < height) || {
+        x: Math.min(Math.max(cx + gap, markerRadius), width - markerRadius - 1),
+        y: Math.min(Math.max(cy - gap, markerRadius), height - markerRadius - 1)
+    };
+    const lineAngle = Math.atan2(cy - calloutCenter.y, cx - calloutCenter.x);
+    const lineStart = {
+        x: calloutCenter.x + Math.cos(lineAngle) * (markerRadius + 1),
+        y: calloutCenter.y + Math.sin(lineAngle) * (markerRadius + 1)
+    };
+    const targetRadiusX = 30;
+    const targetRadiusY = 15;
+    const ellipseBoundaryDistance = 1 / Math.sqrt(Math.cos(lineAngle) ** 2 / targetRadiusX ** 2 + Math.sin(lineAngle) ** 2 / targetRadiusY ** 2);
+    const lineEnd = {
+        x: cx - Math.cos(lineAngle) * ellipseBoundaryDistance,
+        y: cy - Math.sin(lineAngle) * ellipseBoundaryDistance
+    };
+    drawLine(pixels, width, height, lineStart, lineEnd, style.callout, 2);
+    drawCircle(pixels, width, height, calloutCenter, markerRadius + 2, style.calloutBorder, {
+        thickness: 3
+    });
+    drawCircle(pixels, width, height, calloutCenter, markerRadius, style.callout, {
+        fill: true
+    });
+    drawEllipse(pixels, width, height, targetPoint, targetRadiusX, targetRadiusY, style.callout, 2);
+    const textWidth = getNumberWidth(style.indexId);
+    const textHeight = FONT_HEIGHT * FONT_SCALE;
+    drawNumber(pixels, width, height, style.indexId, Math.round(calloutCenter.x - textWidth / 2), Math.round(calloutCenter.y - textHeight / 2), style.calloutText);
+}
+function drawPointMarker(pixels, width, height, point, radius, indexId = 1) {
+    const markerColors = [
+        {
+            r: 0xc6,
+            g: 0x23,
+            b: 0x00,
+            a: 0xee
+        },
+        {
+            r: 0x00,
+            g: 0x00,
+            b: 0xff,
+            a: 0xee
+        }
+    ];
+    const callout = markerColors[(indexId - 1) % markerColors.length];
+    const calloutBorder = {
         r: 0xff,
-        g: 0x3b,
-        b: 0x30,
+        g: 0xff,
+        b: 0xff,
         a: 0xff
     };
-    const white = {
+    const calloutText = {
         r: 0xff,
         g: 0xff,
         b: 0xff,
         a: 0xff
     };
-    const cx = Math.round(point.x);
-    const cy = Math.round(point.y);
-    const markerRadius = Math.max(Math.round(radius), 8);
-    drawCircle(pixels, width, height, point, markerRadius + 2, white, {
-        thickness: 3
-    });
-    drawCircle(pixels, width, height, point, markerRadius, red, {
-        thickness: 3
+    const markerRadius = Math.max(Math.round(radius), 10);
+    drawCallout(pixels, width, height, point, markerRadius, {
+        callout,
+        calloutBorder,
+        calloutText,
+        indexId
     });
-    drawCircle(pixels, width, height, point, 3, red, {
-        fill: true
-    });
-    drawLine(pixels, width, height, {
-        x: cx - markerRadius - 4,
-        y: cy
-    }, {
-        x: cx - markerRadius + 2,
-        y: cy
-    }, red, 2);
-    drawLine(pixels, width, height, {
-        x: cx + markerRadius - 2,
-        y: cy
-    }, {
-        x: cx + markerRadius + 4,
-        y: cy
-    }, red, 2);
-    drawLine(pixels, width, height, {
-        x: cx,
-        y: cy - markerRadius - 4
-    }, {
-        x: cx,
-        y: cy - markerRadius + 2
-    }, red, 2);
-    drawLine(pixels, width, height, {
-        x: cx,
-        y: cy + markerRadius - 2
-    }, {
-        x: cx,
-        y: cy + markerRadius + 4
-    }, red, 2);
 }
 function blendPixels(basePixels, overlayPixels, width, height) {
     const result = new Uint8Array(basePixels.length);
@@ -742,7 +811,7 @@ function blendPixels(basePixels, overlayPixels, width, height) {
     }
     return result;
 }
-const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5, borderThickness = 2, prompt)=>{
+const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding = 5, borderThickness = 2, prompt, centerPoint = false)=>{
     const overlayPixels = new Uint8Array(imageWidth * imageHeight * 4);
     const colors = [
         {
@@ -846,6 +915,12 @@ const createSvgOverlay = async (elements, imageWidth, imageHeight, boxPadding =
             h: paddedHeight
         };
         drawRect(overlayPixels, imageWidth, imageHeight, paddedRect, color.rect, borderThickness);
+        if (centerPoint) drawCircle(overlayPixels, imageWidth, imageHeight, {
+            x: element.rect.left + element.rect.width / 2,
+            y: element.rect.top + element.rect.height / 2
+        }, 4, color.rect, {
+            fill: true
+        });
         const indexId = element.indexId;
         if ('number' != typeof indexId) continue;
         const textWidth = getNumberWidth(indexId);
@@ -910,7 +985,7 @@ const compositeElementInfoImg = async (options)=>{
     const { elementsPositionInfo, prompt } = options;
     try {
         const basePixels = photonImage.get_raw_pixels();
-        const overlayPixels = await createSvgOverlay(elementsPositionInfo, width, height, options.annotationPadding, options.borderThickness, prompt);
+        const overlayPixels = await createSvgOverlay(elementsPositionInfo, width, height, options.annotationPadding, options.borderThickness, prompt, options.centerPoint);
         const blendedPixels = blendPixels(basePixels, overlayPixels, width, height);
         const resultImage = new PhotonImage(blendedPixels, width, height);
         const base64 = await (0, external_transform_js_namespaceObject.photonToBase64)(resultImage, 90);
@@ -949,7 +1024,7 @@ const compositePointMarkerImg = async (options)=>{
     try {
         const basePixels = photonImage.get_raw_pixels();
         const overlayPixels = new Uint8Array(width * height * 4);
-        drawPointMarker(overlayPixels, width, height, options.point, options.radius ?? 14);
+        drawPointMarker(overlayPixels, width, height, options.point, options.radius ?? 14, options.indexId ?? 1);
         const blendedPixels = blendPixels(basePixels, overlayPixels, width, height);
         const resultImage = new PhotonImage(blendedPixels, width, height);
         const base64 = await (0, external_transform_js_namespaceObject.photonToBase64)(resultImage, 90);

package/dist/types/img/box-select.d.ts

@@ -12,6 +12,7 @@ export declare const compositeElementInfoImg: (options: {
     };
     annotationPadding?: number;
     borderThickness?: number;
+    centerPoint?: boolean;
     prompt?: string;
 }) => Promise<string>;
 export declare const compositePointMarkerImg: (options: {
@@ -25,6 +26,7 @@ export declare const compositePointMarkerImg: (options: {
         height: number;
     };
     radius?: number;
+    indexId?: number;
 }) => Promise<string>;
 export declare const processImageElementInfo: (options: {
     inputImgBase64: string;

package/package.json

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

package/src/img/box-select.ts

@@ -260,6 +260,48 @@ function drawCircle(
   }
 }
 
+function drawEllipse(
+  pixels: Uint8Array,
+  width: number,
+  height: number,
+  center: { x: number; y: number },
+  radiusX: number,
+  radiusY: number,
+  color: { r: number; g: number; b: number; a: number },
+  thickness = 2,
+) {
+  const cx = Math.round(center.x);
+  const cy = Math.round(center.y);
+  const outerRadiusX = Math.max(Math.round(radiusX), 1);
+  const outerRadiusY = Math.max(Math.round(radiusY), 1);
+  const innerRadiusX = Math.max(outerRadiusX - Math.round(thickness), 0);
+  const innerRadiusY = Math.max(outerRadiusY - Math.round(thickness), 0);
+
+  for (let py = cy - outerRadiusY; py <= cy + outerRadiusY; py++) {
+    for (let px = cx - outerRadiusX; px <= cx + outerRadiusX; px++) {
+      if (px < 0 || py < 0 || px >= width || py >= height) continue;
+
+      const dx = px - cx;
+      const dy = py - cy;
+      const outer =
+        (dx * dx) / (outerRadiusX * outerRadiusX) +
+        (dy * dy) / (outerRadiusY * outerRadiusY);
+      const inner =
+        innerRadiusX === 0 || innerRadiusY === 0
+          ? 0
+          : (dx * dx) / (innerRadiusX * innerRadiusX) +
+            (dy * dy) / (innerRadiusY * innerRadiusY);
+      if (outer > 1 || inner < 1) continue;
+
+      const idx = (py * width + px) * 4;
+      pixels[idx + 0] = color.r;
+      pixels[idx + 1] = color.g;
+      pixels[idx + 2] = color.b;
+      pixels[idx + 3] = color.a;
+    }
+  }
+}
+
 function drawLine(
   pixels: Uint8Array,
   width: number,
@@ -294,64 +336,132 @@ function drawLine(
   }
 }
 
-function drawPointMarker(
+function drawCallout(
   pixels: Uint8Array,
   width: number,
   height: number,
-  point: { x: number; y: number },
-  radius: number,
+  targetPoint: { x: number; y: number },
+  markerRadius: number,
+  style: {
+    callout: { r: number; g: number; b: number; a: number };
+    calloutBorder: { r: number; g: number; b: number; a: number };
+    calloutText: { r: number; g: number; b: number; a: number };
+    indexId: number;
+  },
 ) {
-  const red = { r: 0xff, g: 0x3b, b: 0x30, a: 0xff };
-  const white = { r: 0xff, g: 0xff, b: 0xff, a: 0xff };
-  const cx = Math.round(point.x);
-  const cy = Math.round(point.y);
-  const markerRadius = Math.max(Math.round(radius), 8);
-
-  drawCircle(pixels, width, height, point, markerRadius + 2, white, {
-    thickness: 3,
-  });
-  drawCircle(pixels, width, height, point, markerRadius, red, {
-    thickness: 3,
-  });
-  drawCircle(pixels, width, height, point, 3, red, { fill: true });
-  drawLine(
+  const cx = Math.round(targetPoint.x);
+  const cy = Math.round(targetPoint.y);
+  const gap = Math.max(markerRadius + 18, 30);
+  const candidates = [
+    { x: cx + gap, y: cy - gap },
+    { x: cx + gap, y: cy + gap },
+    { x: cx - gap, y: cy - gap },
+    { x: cx - gap, y: cy + gap },
+    { x: cx, y: cy - gap },
+    { x: cx, y: cy + gap },
+    { x: cx + gap, y: cy },
+    { x: cx - gap, y: cy },
+  ];
+  const calloutCenter = candidates.find(
+    (candidate) =>
+      candidate.x - markerRadius >= 0 &&
+      candidate.x + markerRadius < width &&
+      candidate.y - markerRadius >= 0 &&
+      candidate.y + markerRadius < height,
+  ) || {
+    x: Math.min(Math.max(cx + gap, markerRadius), width - markerRadius - 1),
+    y: Math.min(Math.max(cy - gap, markerRadius), height - markerRadius - 1),
+  };
+
+  const lineAngle = Math.atan2(cy - calloutCenter.y, cx - calloutCenter.x);
+  const lineStart = {
+    x: calloutCenter.x + Math.cos(lineAngle) * (markerRadius + 1),
+    y: calloutCenter.y + Math.sin(lineAngle) * (markerRadius + 1),
+  };
+
+  const targetRadiusX = 30;
+  const targetRadiusY = 15;
+  const ellipseBoundaryDistance =
+    1 /
+    Math.sqrt(
+      Math.cos(lineAngle) ** 2 / targetRadiusX ** 2 +
+        Math.sin(lineAngle) ** 2 / targetRadiusY ** 2,
+    );
+  const lineEnd = {
+    x: cx - Math.cos(lineAngle) * ellipseBoundaryDistance,
+    y: cy - Math.sin(lineAngle) * ellipseBoundaryDistance,
+  };
+
+  drawLine(pixels, width, height, lineStart, lineEnd, style.callout, 2);
+  drawCircle(
     pixels,
     width,
     height,
-    { x: cx - markerRadius - 4, y: cy },
-    { x: cx - markerRadius + 2, y: cy },
-    red,
-    2,
+    calloutCenter,
+    markerRadius + 2,
+    style.calloutBorder,
+    {
+      thickness: 3,
+    },
   );
-  drawLine(
+  drawCircle(
     pixels,
     width,
     height,
-    { x: cx + markerRadius - 2, y: cy },
-    { x: cx + markerRadius + 4, y: cy },
-    red,
-    2,
+    calloutCenter,
+    markerRadius,
+    style.callout,
+    {
+      fill: true,
+    },
   );
-  drawLine(
+  drawEllipse(
     pixels,
     width,
     height,
-    { x: cx, y: cy - markerRadius - 4 },
-    { x: cx, y: cy - markerRadius + 2 },
-    red,
+    targetPoint,
+    targetRadiusX,
+    targetRadiusY,
+    style.callout,
     2,
   );
-  drawLine(
+  const textWidth = getNumberWidth(style.indexId);
+  const textHeight = FONT_HEIGHT * FONT_SCALE;
+  drawNumber(
     pixels,
     width,
     height,
-    { x: cx, y: cy + markerRadius - 2 },
-    { x: cx, y: cy + markerRadius + 4 },
-    red,
-    2,
+    style.indexId,
+    Math.round(calloutCenter.x - textWidth / 2),
+    Math.round(calloutCenter.y - textHeight / 2),
+    style.calloutText,
   );
 }
 
+function drawPointMarker(
+  pixels: Uint8Array,
+  width: number,
+  height: number,
+  point: { x: number; y: number },
+  radius: number,
+  indexId = 1,
+) {
+  const markerColors = [
+    { r: 0xc6, g: 0x23, b: 0x00, a: 0xee },
+    { r: 0x00, g: 0x00, b: 0xff, a: 0xee },
+  ];
+  const callout = markerColors[(indexId - 1) % markerColors.length];
+  const calloutBorder = { r: 0xff, g: 0xff, b: 0xff, a: 0xff };
+  const calloutText = { r: 0xff, g: 0xff, b: 0xff, a: 0xff };
+  const markerRadius = Math.max(Math.round(radius), 10);
+  drawCallout(pixels, width, height, point, markerRadius, {
+    callout,
+    calloutBorder,
+    calloutText,
+    indexId,
+  });
+}
+
 function blendPixels(
   basePixels: Uint8Array,
   overlayPixels: Uint8Array,
@@ -406,6 +516,7 @@ const createSvgOverlay = async (
   boxPadding = 5,
   borderThickness = 2,
   prompt?: string,
+  centerPoint = false,
 ): Promise<Uint8Array> => {
   // Create transparent overlay
   const overlayPixels = new Uint8Array(imageWidth * imageHeight * 4);
@@ -490,6 +601,21 @@ const createSvgOverlay = async (
       borderThickness,
     );
 
+    if (centerPoint) {
+      drawCircle(
+        overlayPixels,
+        imageWidth,
+        imageHeight,
+        {
+          x: element.rect.left + element.rect.width / 2,
+          y: element.rect.top + element.rect.height / 2,
+        },
+        4,
+        color.rect,
+        { fill: true },
+      );
+    }
+
     // Calculate text position
     const indexId = element.indexId;
     if (typeof indexId !== 'number') {
@@ -595,6 +721,7 @@ export const compositeElementInfoImg = async (options: {
   size?: { width: number; height: number };
   annotationPadding?: number;
   borderThickness?: number;
+  centerPoint?: boolean;
   prompt?: string;
 }) => {
   assert(options.inputImgBase64, 'inputImgBase64 is required');
@@ -648,6 +775,7 @@ export const compositeElementInfoImg = async (options: {
       options.annotationPadding,
       options.borderThickness,
       prompt,
+      options.centerPoint,
     );
 
     // Blend overlay onto base image
@@ -669,6 +797,7 @@ export const compositePointMarkerImg = async (options: {
   point: { x: number; y: number };
   size?: { width: number; height: number };
   radius?: number;
+  indexId?: number;
 }) => {
   assert(options.inputImgBase64, 'inputImgBase64 is required');
   const { PhotonImage, SamplingFilter, resize } = await getPhoton();
@@ -715,6 +844,7 @@ export const compositePointMarkerImg = async (options: {
       height,
       options.point,
       options.radius ?? 14,
+      options.indexId ?? 1,
     );
     const blendedPixels = blendPixels(basePixels, overlayPixels, width, height);
     const resultImage = new PhotonImage(blendedPixels, width, height);