edge-impulse-linux 1.17.7 → 1.17.9

package/build/shared/views/project/bounding-box-scaling.js

@@ -1,75 +1,96 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapResizedPixelResultsBoundingBox = exports.mapStructuredResultsBoundingBox = exports.getMaskSize = exports.mapPredictionToOriginalImage = void 0;
+exports.maskCropped = exports.getMaskPercent = exports.mapPredictionToOriginalImage = void 0;
 /**
-* Helper to calculate positions for predictions to be placed to the original image,
-* as we need to scale the coordinates of the predictions based on the resize mode.
-*/
+ * Maps a predicted bounding box from reference output coordinates to client image coordinates,
+ * adjusting for the resize mode. This is necessary because the reference image dimensions
+ * that the bounding boxes are relative to may differ from the displayed image due to cropping
+ * and resizing.
+ *
+ * Supported resize modes:
+ * - 'squash': The image is resized to fit the client image exactly, potentially distorting the aspect ratio.
+ * - 'fit-short': The shorter axis is fit to the client image, cropping the longer axis to maintain aspect ratio.
+ * - 'fit-long': The longer axis is fit to the client image, padding the shorter axis to maintain aspect ratio.
+ * - 'crop': Deprecated mode; returns a zeroed bounding box.
+ *
+ * @param resizeMode - The resize mode used during preprocessing.
+ * @param box - The predicted bounding box from the model, with normalized coordinates (0 to 1).
+ * @param img - Image dimension information:
+ *   - clientWidth: The target width of the image as displayed on the client.
+ *   - clientHeight: The target height of the image as displayed on the client.
+ *   - referenceWidth: The width of the image used as the reference for bounding box predictions.
+ *   - referenceHeight: The height of the image used as the reference for bounding box predictions.
+ * @returns An object containing the mapped bounding box coordinates in pixel units for display in the client:
+ *   - x: The x-coordinate of the top-left corner in pixels.
+ *   - y: The y-coordinate of the top-left corner in pixels.
+ *   - width: The width of the bounding box in pixels.
+ *   - height: The height of the bounding box in pixels.
+ */
 const mapPredictionToOriginalImage = (resizeMode, box, img) => {
     let x = 0;
     let y = 0;
     let width = 0;
     let height = 0;
     if (resizeMode === 'squash') {
-        // Just scale the coordinates to the original image ratio
-        x = Math.max(0, Math.min(box.x * img.clientWidth, img.clientWidth));
-        y = Math.max(0, Math.min(box.y * img.clientHeight, img.clientHeight));
-        width = Math.min(box.width * img.clientWidth, img.clientWidth - x);
-        height = Math.min(box.height * img.clientHeight, img.clientHeight - y);
+        // Simple proportional scale from reference dimensions to client dimensions
+        const scaleX = img.clientWidth / img.referenceWidth;
+        const scaleY = img.clientHeight / img.referenceHeight;
+        x = Math.max(0, Math.min(box.x * img.referenceWidth * scaleX, img.clientWidth));
+        y = Math.max(0, Math.min(box.y * img.referenceHeight * scaleY, img.clientHeight));
+        width = Math.min(box.width * img.referenceWidth * scaleX, img.clientWidth - x);
+        height = Math.min(box.height * img.referenceHeight * scaleY, img.clientHeight - y);
     }
     else if (resizeMode === 'fit-short') {
-        const referenceAxis = Math.min(img.clientWidth, img.clientHeight);
-        // Fit-short mode, i.e. outsides of the longer axis is cropped
-        const yStartPosition = (0, exports.getMaskSize)('vertical', img);
-        const xStartPosition = (0, exports.getMaskSize)('horizontal', img);
-        x = Math.max(0, Math.min(box.x * referenceAxis, referenceAxis));
-        y = Math.max(0, Math.min(box.y * referenceAxis, referenceAxis));
-        width = Math.min(box.width * referenceAxis, referenceAxis - x);
-        height = Math.min(box.height * referenceAxis, referenceAxis - y);
-        // Now translate the coordinates for where the cropped part starts
-        x = x + xStartPosition;
-        y = y + yStartPosition;
+        // Fit-short: crop the longer axis, scale by the shorter axis, but use reference aspect ratio
+        const referenceAspectRatio = img.referenceWidth / img.referenceHeight;
+        const clientAspectRatio = img.clientWidth / img.clientHeight;
+        let scale = 1;
+        let offsetX = 0;
+        let offsetY = 0;
+        if (clientAspectRatio > referenceAspectRatio) {
+            // Client image is wider than reference image => crop width
+            scale = img.clientHeight / img.referenceHeight;
+            const cropWidth = img.clientWidth - img.referenceWidth * scale;
+            offsetX = cropWidth / 2;
+        }
+        else {
+            // Client image is taller than reference image => crop height
+            scale = img.clientWidth / img.referenceWidth;
+            const cropHeight = img.clientHeight - img.referenceHeight * scale;
+            offsetY = cropHeight / 2;
+        }
+        x = Math.max(0, Math.min(box.x * img.referenceWidth * scale + offsetX, img.clientWidth));
+        y = Math.max(0, Math.min(box.y * img.referenceHeight * scale + offsetY, img.clientHeight));
+        width = Math.min(box.width * img.referenceWidth * scale, img.clientWidth - x);
+        height = Math.min(box.height * img.referenceHeight * scale, img.clientHeight - y);
     }
     else if (resizeMode === 'fit-long') {
-        const padding = getLetterboxSize(img);
-        const ratio = img.naturalWidth / img.naturalHeight;
-        if (ratio > 1) {
-            // Image is wider, so vertical padding was added
-            // Calculate normalized padding for the padding
-            const squaredHeight = img.clientHeight + 2 * padding;
-            const normalizedPadding = padding / squaredHeight;
-            // Remove normalized padding from y and re-normalize to the
-            // original image height (excluding the padding)
-            y = (box.y - normalizedPadding) / (1 - 2 * normalizedPadding);
-            x = box.x;
-            // Scale normalized width and height of the bounding box
-            width = box.width;
-            height = box.height / (1 - 2 * normalizedPadding);
-        }
-        else if (ratio < 1) {
-            // Image is taller, so horizontal padding was added
-            // Calculate normalized padding for the padding
-            const squaredWidth = img.clientWidth + 2 * padding;
-            const normalizedPadding = padding / squaredWidth;
-            // Remove normalized padding from x and re-normalize to the
-            // original image width (excluding the padding)
-            x = (box.x - normalizedPadding) / (1 - 2 * normalizedPadding);
-            y = box.y;
-            // Scale normalized width and height of the bounding box
-            width = box.width / (1 - 2 * normalizedPadding);
-            height = box.height;
+        // Fit-long: pad the shorter axis, scale by the longer axis, use reference aspect ratio
+        const referenceAspectRatio = img.referenceWidth / img.referenceHeight;
+        const clientAspectRatio = img.clientWidth / img.clientHeight;
+        let scale = 1;
+        let padX = 0;
+        let padY = 0;
+        if (clientAspectRatio > referenceAspectRatio) {
+            // Client image is wider than reference image => scale by width, pad the height
+            scale = img.clientWidth / img.referenceWidth;
+            const padHeight = img.clientHeight - img.referenceHeight * scale;
+            padY = padHeight / 2;
+            x = Math.max(0, Math.min(box.x * img.referenceWidth * scale, img.clientWidth));
+            y = Math.max(0, Math.min(box.y * img.referenceHeight * scale + padY, img.clientHeight));
+            width = Math.min(box.width * img.referenceWidth * scale, img.clientWidth - x);
+            height = Math.min(box.height * img.referenceHeight * scale, img.clientHeight - y);
         }
         else {
-            x = box.x;
-            y = box.y;
-            width = box.width;
-            height = box.height;
+            // Client image is taller than reference image => scale by height, pad the width
+            scale = img.clientHeight / img.referenceHeight;
+            const padWidth = img.clientWidth - img.referenceWidth * scale;
+            padX = padWidth / 2;
+            x = Math.max(0, Math.min(box.x * img.referenceWidth * scale + padX, img.clientWidth));
+            y = Math.max(0, Math.min(box.y * img.referenceHeight * scale, img.clientHeight));
+            width = Math.min(box.width * img.referenceWidth * scale, img.clientWidth - x);
+            height = Math.min(box.height * img.referenceHeight * scale, img.clientHeight - y);
         }
-        // Now scale the coordinates to the original image ratio
-        x = Math.max(0, Math.min(x * img.clientWidth, img.clientWidth));
-        y = Math.max(0, Math.min(y * img.clientHeight, img.clientHeight));
-        width = Math.min(width * img.clientWidth, img.clientWidth - x);
-        height = Math.min(height * img.clientHeight, img.clientHeight - y);
     }
     else if (resizeMode === 'crop') {
         // Not expected
@@ -79,77 +100,46 @@ const mapPredictionToOriginalImage = (resizeMode, box, img) => {
 };
 exports.mapPredictionToOriginalImage = mapPredictionToOriginalImage;
 // Calculates the width/height of the area to be masked (at one side).
-const getMaskSize = (side, img) => {
-    let maskSize = 0;
-    if (side === 'horizontal' && img.clientWidth > img.clientHeight) {
-        const factor = img.naturalWidth / img.naturalHeight;
-        const maskedTotalWidth = img.clientWidth - (img.clientWidth / factor);
-        maskSize = Math.floor(maskedTotalWidth / 2);
+const getMaskPercent = (side, img) => {
+    // Use reference aspect ratio to determine mask size as a percentage
+    const referenceAspect = img.referenceWidth / img.referenceHeight;
+    const clientAspect = img.clientWidth / img.clientHeight;
+    let percent = 0;
+    if (side === 'horizontal' && clientAspect > referenceAspect) {
+        // Image is wider than reference: mask left/right
+        const displayWidth = img.clientHeight * referenceAspect;
+        percent = ((img.clientWidth - displayWidth) / 2) / img.clientWidth * 100;
     }
-    else if (side === 'vertical' && img.clientHeight > img.clientWidth) {
-        const factor = img.naturalHeight / img.naturalWidth;
-        const maskedTotalHeight = img.clientHeight - (img.clientHeight / factor);
-        maskSize = Math.floor(maskedTotalHeight / 2);
+    else if (side === 'vertical' && clientAspect < referenceAspect) {
+        // Image is taller than reference: mask top/bottom
+        const displayHeight = img.clientWidth / referenceAspect;
+        percent = ((img.clientHeight - displayHeight) / 2) / img.clientHeight * 100;
     }
-    return maskSize;
+    return percent;
 };
-exports.getMaskSize = getMaskSize;
-// Calculates the width/height to make the image squared (at one side).
-const getLetterboxSize = (img) => {
-    let maskSize = 0;
-    const ratio = img.naturalWidth / img.naturalHeight;
-    if (ratio > 1) {
-        // Image is wider, calculate vertical padding to make it square
-        const maskedTotalHeight = img.clientWidth - (img.clientWidth / ratio);
-        maskSize = Math.floor(maskedTotalHeight / 2);
+exports.getMaskPercent = getMaskPercent;
+const maskCropped = (els, img) => {
+    const referenceAspect = img.referenceWidth / img.referenceHeight;
+    const clientAspect = img.clientWidth / img.clientHeight;
+    if (clientAspect > referenceAspect) {
+        // Image is wider than reference: mask left/right
+        const maskPercent = (0, exports.getMaskPercent)('horizontal', img);
+        els.maskLeft.style.width = els.maskRight.style.width = maskPercent + '%';
+        els.maskTop.style.height = els.maskBottom.style.height = '0%';
+        els.maskLeft.style.height = els.maskRight.style.height = '100%';
     }
-    else if (ratio < 1) {
-        // Image is taller, calculate horizontal padding to make it square
-        const maskedTotalWidth = img.clientHeight - (img.clientHeight * ratio);
-        maskSize = Math.floor(maskedTotalWidth / 2);
+    else if (clientAspect < referenceAspect) {
+        // Image is taller than reference: mask top/bottom
+        const maskPercent = (0, exports.getMaskPercent)('vertical', img);
+        els.maskLeft.style.width = els.maskRight.style.width = '0%';
+        els.maskTop.style.height = els.maskBottom.style.height = maskPercent + '%';
+        els.maskTop.style.width = els.maskBottom.style.width = '100%';
+    }
+    else {
+        // Aspect ratios match: no mask
+        els.maskLeft.style.width = els.maskRight.style.width = '0%';
+        els.maskTop.style.height = els.maskBottom.style.height = '0%';
     }
-    return maskSize;
-};
-const mapStructuredResultsBoundingBox = (opts) => {
-    const bb = (0, exports.mapPredictionToOriginalImage)(opts.mode, {
-        label: 'test',
-        x: opts.box.xmin,
-        y: opts.box.ymin,
-        width: (opts.box.xmax - opts.box.xmin),
-        height: (opts.box.ymax - opts.box.ymin),
-    }, {
-        naturalWidth: opts.originalWidth,
-        naturalHeight: opts.originalHeight,
-        clientWidth: opts.originalWidth,
-        clientHeight: opts.originalHeight,
-    });
-    return {
-        x: Math.round(bb.x),
-        y: Math.round(bb.y),
-        width: Math.round(bb.width),
-        height: Math.round(bb.height),
-    };
-};
-exports.mapStructuredResultsBoundingBox = mapStructuredResultsBoundingBox;
-const mapResizedPixelResultsBoundingBox = (opts) => {
-    const bb = (0, exports.mapPredictionToOriginalImage)(opts.mode, {
-        label: 'test',
-        x: opts.box.x / opts.resized.newWidth,
-        y: opts.box.y / opts.resized.newHeight,
-        width: opts.box.width / opts.resized.newWidth,
-        height: opts.box.height / opts.resized.newHeight,
-    }, {
-        naturalWidth: opts.resized.originalWidth,
-        naturalHeight: opts.resized.originalHeight,
-        clientWidth: opts.resized.originalWidth,
-        clientHeight: opts.resized.originalHeight,
-    });
-    return {
-        x: Math.round(bb.x),
-        y: Math.round(bb.y),
-        width: Math.round(bb.width),
-        height: Math.round(bb.height),
-    };
 };
-exports.mapResizedPixelResultsBoundingBox = mapResizedPixelResultsBoundingBox;
+exports.maskCropped = maskCropped;
 //# sourceMappingURL=bounding-box-scaling.js.map

package/build/shared/views/project/bounding-box-scaling.js.map

@@ -1 +1 @@
-{"version":3,"file":"bounding-box-scaling.js","sourceRoot":"","sources":["../../../../shared/views/project/bounding-box-scaling.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"bounding-box-scaling.js","sourceRoot":"","sources":["../../../../shared/views/project/bounding-box-scaling.ts"],"names":[],"mappings":"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"}

package/cli/linux/webserver/public/assets/mobileclient.css

@@ -4184,6 +4184,7 @@ video {
 #preview-image-container {
     position: relative;
     max-width: 100%;
+    display: inline-block;
 }
 
 #preview-image-container img {
@@ -4243,3 +4244,43 @@ video {
     font-family: monospace;
     font-size: 0.75rem;
 }
+
+.label-mask-left {
+    position: absolute;
+    border: 0;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+}
+
+.label-mask-right {
+    position: absolute;
+    border: 0;
+    height: 100%;
+    right: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+}
+
+.label-mask-top {
+    position: absolute;
+    border: 0;
+    width: 100%;
+    left: 0;
+    top: 0;
+    background: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+}
+
+.label-mask-bottom {
+    position: absolute;
+    border: 0;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+}

package/cli/linux/webserver/public/inference-server.js

@@ -10,6 +10,10 @@ window.InferenceServer = async (opts) => {
         previewSectionImgContainer: document.querySelector('#preview-image-container'),
         previewSectionImg:  document.querySelector('#preview-section img'),
         features: document.querySelector('#features'),
+        maskLeft: document.querySelector('.label-mask-left'),
+        maskRight: document.querySelector('.label-mask-right'),
+        maskTop: document.querySelector('.label-mask-top'),
+        maskBottom: document.querySelector('.label-mask-bottom')
     };
 
     const colors = [
@@ -217,6 +221,24 @@ window.InferenceServer = async (opts) => {
 
                         els.previewSectionImgContainer.appendChild(el);
                     }
+
+                    // Only the fit-shortest resizing mode crops the image
+                    if (result.resized && result.resizeMode === 'fit-shortest') {
+                        const { originalWidth, originalHeight, newWidth, newHeight } = result.resized;
+                        let maskElements = {
+                            maskLeft: els.maskLeft,
+                            maskRight: els.maskRight,
+                            maskTop: els.maskTop,
+                            maskBottom: els.maskBottom
+                        };
+                        const img = {
+                            clientWidth: originalWidth,
+                            clientHeight: originalHeight,
+                            referenceWidth: newWidth,
+                            referenceHeight: newHeight,
+                        };
+                        maskCropped(maskElements, img);
+                    }
                 };
 
                 els.previewSectionImg.src = dataUrl;
@@ -245,4 +267,50 @@ window.InferenceServer = async (opts) => {
             els.previewSectionImg.onload();
         }
     };
+
+    // Shared from bounding-box-scaling.ts. If we introduce a TypeScript build step we can
+    // share this code directly.
+    const getMaskPercent = (side, img) => {
+        // Use reference aspect ratio to determine mask size as a percentage
+        const referenceAspect = img.referenceWidth / img.referenceHeight;
+        const clientAspect = img.clientWidth / img.clientHeight;
+        let percent = 0;
+        if (side === 'horizontal' && clientAspect > referenceAspect) {
+            // Image is wider than reference: mask left/right
+            const displayWidth = img.clientHeight * referenceAspect;
+            percent = ((img.clientWidth - displayWidth) / 2) / img.clientWidth * 100;
+        }
+        else if (side === 'vertical' && clientAspect < referenceAspect) {
+            // Image is taller than reference: mask top/bottom
+            const displayHeight = img.clientWidth / referenceAspect;
+            percent = ((img.clientHeight - displayHeight) / 2) / img.clientHeight * 100;
+        }
+        return percent;
+    };
+
+    // Shared from bounding-box-scaling.ts
+    const maskCropped = (maskElements, img) => {
+        const referenceAspect = img.referenceWidth / img.referenceHeight;
+        const clientAspect = img.clientWidth / img.clientHeight;
+
+        if (clientAspect > referenceAspect) {
+            // Image is wider than reference: mask left/right
+            const maskPercent = getMaskPercent('horizontal', img);
+            maskElements.maskLeft.style.width = maskElements.maskRight.style.width = maskPercent + '%';
+            maskElements.maskTop.style.height = maskElements.maskBottom.style.height = '0%';
+            maskElements.maskLeft.style.height = maskElements.maskRight.style.height = '100%';
+        }
+        else if (clientAspect < referenceAspect) {
+            // Image is taller than reference: mask top/bottom
+            const maskPercent = getMaskPercent('vertical', img);
+            maskElements.maskLeft.style.width = maskElements.maskRight.style.width = '0%';
+            maskElements.maskTop.style.height = maskElements.maskBottom.style.height = maskPercent + '%';
+            maskElements.maskTop.style.width = maskElements.maskBottom.style.width = '100%';
+        }
+        else {
+            // Aspect ratios match: no mask
+            maskElements.maskLeft.style.width = maskElements.maskRight.style.width = '0%';
+            maskElements.maskTop.style.height = maskElements.maskBottom.style.height = '0%';
+        }
+    };
 };

package/cli/linux/webserver/public/webserver.js

@@ -450,6 +450,8 @@ window.WebServer = async (vmStr) => {
                 for (const key of Object.keys(result.classification)) {
                     if (key === 'anomaly') continue;
 
+                    if (result.classification[key] === 0) continue;
+
                     results.push({
                         label: key,
                         value: result.classification[key],
@@ -457,7 +459,7 @@ window.WebServer = async (vmStr) => {
                 }
 
                 // don't change order if we only have 3
-                const top = results.length > 3 ?
+                const top = results.length > 1 ?
                     results.sort((a, b) => b.value - a.value).slice(0, 3) :
                     results;
                 if (result.visual_anomaly_grid) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "edge-impulse-linux",
-  "version": "1.17.7",
+  "version": "1.17.9",
   "description": "Node.js SDK and tools for Edge Impulse for Linux",
   "directories": {
     "example": "examples"