seg-cam 0.2.0 → 0.4.1

package/README.md

@@ -81,7 +81,7 @@ export function CameraApp() {
 | `workerUrl` | `string` | `'/jersey-detector-worker.js'` | URL to the bundled worker JS file. |
 | `threshold` | `number` | `0.5` | Confidence threshold for detection (0 to 1). |
 | `targetPartId` | `number` | `12` | BodyPix Part ID to isolate (12 = Torso). |
-| `onlyDrawMask` | `boolean` | `true` | If true, returns only the overlay mask for the input video. If false, includes a copy of the input frame.|
+| `imagesToReturn` | `'mask' \| 'mask_with_image' \| 'none'` | `'mask'` | Controls output: 'mask' (overlay only), 'mask_with_image' (overlay + frame), 'none' (data only). |
 | `onStatsUpdate`| `(stats: DetectionStats) => void` | - | Callback triggered on every processed frame with stats. |
 | `onWorkerReady`| `(ready: boolean) => void` | - | Callback triggered when the TFJS model is loaded. |
 | `onWorkerError`| `(error: string \| null) => void` | - | Callback triggered if the worker fails to initialize. |
@@ -130,9 +130,10 @@ const currentStats = detectorRef.current?.stats;
 - **`targetPartId`**: (`number`, Default `12`) The BodyPix part ID to treat as the "Jersey". (e.g., 12=torso, 2=full upper body).
 - **`backgroundShade`**: (`number`, 0-255, Default `0`) The alpha/opacity for non-jersey pixels.
 - **`shirtShade`**: (`number`, 0-255, Default `170`) The alpha/opacity for the detected jersey pixels.
-- **`onlyDrawMask`**: (`boolean`, Default `true`) 
-  - `true`: Returns only the overlay mask (useful for custom stacking).
-  - `false`: Includes a copy of the input frame underneath the mask.
+- **`imagesToReturn`**: (`'mask' | 'mask_with_image' | 'none'`, Default `'mask'`) 
+  - `'mask'`: Returns only the overlay mask (clears canvas before drawing).
+  - `'mask_with_image'`: Draws the overlay on top of the existing canvas (may trail if not cleared externally).
+  - `'none'`: Skips bitmap generation entirely. Use this if you only need `onSegmentedImage` or stats, improving performance.
 - **`threshold`**: (`number`, 0.0-1.0, Default `0.5`) The minimum confidence required for a person pixel to be considered valid.
 
 ## Acknowledgements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seg-cam",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "private": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,6 +12,19 @@
       "require": "./dist/index.js"
     }
   },
+  "keywords": [
+    "react",
+    "nextjs",
+    "tensorflow",
+    "tfjs",
+    "computer-vision",
+    "body-segmentation",
+    "image-segmentation",
+    "webcam",
+    "worker",
+    "jersey-detection",
+    "image-analytics"
+  ],
   "license": "CC-BY-NC-SA-4.0",
   "files": [
     "dist",
@@ -28,13 +41,13 @@
   },
   "dependencies": {
     "@vercel/analytics": "1.3.1",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "^10.4.24",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.454.0",
     "next": "16.0.10",
     "next-themes": "^0.4.6",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.4.0"
   },
   "peerDependencies": {
     "@tensorflow-models/body-segmentation": "1.0.2",
@@ -43,14 +56,20 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.9",
-    "@types/node": "^22",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "esbuild": "0.27",
-    "postcss": "^8.5",
-    "tailwindcss": "^4.1.9",
-    "tsup": "^8.3.5",
-    "typescript": "^5"
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^22.19.7",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "~0.27.2",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "rimraf": "^6.0.0",
+      "glob": "^11.0.0"
+    }
   }
-}
+}

package/public/jersey-detector-worker.js

@@ -82270,33 +82270,48 @@ var handleDetect = async (message) => {
       sendDebug("[Worker] No people detected, skipping mask drawing");
     } else {
       sendDebug(`[Worker] Processing ${people.length} people`);
-      let allTorsosMask = tf.fill([height, width], false, "bool");
-      for (const person of people) {
-        const { shirtBitmap, isUpperTorso } = await processSinglePerson(person, originalImageTensor);
-        if (!shirtBitmap || !isUpperTorso) continue;
-        segmentedImages.push(shirtBitmap);
-        const oldMask = allTorsosMask;
-        let newTotalMask = allTorsosMask.logicalOr(isUpperTorso);
-        isUpperTorso.dispose();
-        allTorsosMask = newTotalMask;
-        if (oldMask !== newTotalMask) oldMask.dispose();
-      }
-      const overlayTensor = tf.tidy(() => {
-        const whiteRGB = tf.fill([height, width, 3], 255, "int32");
-        const backgroundShade = currentConfig?.backgroundShade ?? 0;
-        const shirtShade = currentConfig?.shirtShade ?? 170;
-        const alphaChannel = tf.where(allTorsosMask, shirtShade, backgroundShade).expandDims(2);
-        return tf.concat([whiteRGB, alphaChannel], 2);
-      });
-      ctx.clearRect(0, 0, width, height);
-      const overlayData = await overlayTensor.data();
-      const overlayPixels = new Uint8ClampedArray(overlayData);
-      const outputImageData = new ImageData(overlayPixels, width, height);
-      ctx.putImageData(outputImageData, 0, 0);
-      outputBitmap = await createImageBitmap(canvas);
-      allTorsosMask.dispose();
-      overlayTensor.dispose();
-      originalImageTensor.dispose();
+      const imagesToReturn = currentConfig?.imagesToReturn ?? "mask";
+      if (imagesToReturn === "none") {
+        sendDebug("[Worker] imagesToReturn is 'none', skipping visualization");
+        for (const person of people) {
+          const { shirtBitmap, isUpperTorso } = await processSinglePerson(person, originalImageTensor);
+          if (shirtBitmap && isUpperTorso) {
+            segmentedImages.push(shirtBitmap);
+            isUpperTorso.dispose();
+          } else if (isUpperTorso) {
+            isUpperTorso.dispose();
+          }
+        }
+        originalImageTensor.dispose();
+      } else {
+        let allTorsosMask = tf.fill([height, width], false, "bool");
+        for (const person of people) {
+          const { shirtBitmap, isUpperTorso } = await processSinglePerson(person, originalImageTensor);
+          if (!shirtBitmap || !isUpperTorso) continue;
+          segmentedImages.push(shirtBitmap);
+          const oldMask = allTorsosMask;
+          let newTotalMask = allTorsosMask.logicalOr(isUpperTorso);
+          isUpperTorso.dispose();
+          allTorsosMask = newTotalMask;
+          if (oldMask !== newTotalMask) oldMask.dispose();
+        }
+        const overlayTensor = tf.tidy(() => {
+          const whiteRGB = tf.fill([height, width, 3], 255, "int32");
+          const backgroundShade = currentConfig?.backgroundShade ?? 0;
+          const shirtShade = currentConfig?.shirtShade ?? 170;
+          const alphaChannel = tf.where(allTorsosMask, shirtShade, backgroundShade).expandDims(2);
+          return tf.concat([whiteRGB, alphaChannel], 2);
+        });
+        ctx.clearRect(0, 0, width, height);
+        const overlayData = await overlayTensor.data();
+        const overlayPixels = new Uint8ClampedArray(overlayData);
+        const outputImageData = new ImageData(overlayPixels, width, height);
+        ctx.putImageData(outputImageData, 0, 0);
+        outputBitmap = await createImageBitmap(canvas);
+        allTorsosMask.dispose();
+        overlayTensor.dispose();
+        originalImageTensor.dispose();
+      }
     }
     const transferList = [];
     if (outputBitmap) transferList.push(outputBitmap);