UNET and BodyPix Segmentation result handling (#664)

* adds background mask to output

* adds feature and bg masking

* updates tests to reflect new api

* test: set alpha to 0

* code cleanup

* code format

* adds transparent mask for feature and background

* adds palette as separate file in bodyPix

* return image mask

* code cleanup

* initial test to return canvas using bodypix canvas drawing method

* added custom segmentation result handling for bodypix .segment()

* fixes order of result handling

* adds new returns for segmentParts()

* updates bodypix test"

* adds comment about removing bg for segmentParts()

* updates docs reflecting API changes

* updates naming

Author: joeyklee

docs/reference/bodypix.md

@@ -197,7 +197,23 @@ bodyPix.segment(?input, ?options, callback)
 
 📤 **Outputs**
 
-* **Object**: Returns an Object. "{raw}", "{maskBackground}", and "{maskPerson}". The returns will either be a UInt8 array corresponding to the image array or a p5Image if p5.js is available.
+* **Object**: Returns an Object. The returns will either be a UInt8 array corresponding to the image array or a p5Image if p5.js is available.
+* 
+  ```js
+  {
+      segmentation,
+      raw: {
+          personMask: null,
+          backgroundMask: null,
+      },
+      tensor: {
+          personMask: null,
+          backgroundMask: null,
+      },
+      personMask: null,
+      backgroundMask: null,
+  };
+  ```
 
 ***
 
@@ -220,7 +236,27 @@ bodyPix.segmentWithParts(?input, ?options, callback)
 
 📤 **Outputs**
 
-* **Object**: Returns an Object. "{raw}". The returns will either be a UInt8 array corresponding to the image array or a p5Image if p5.js is available.
+* **Object**: Returns an Object. The returns will either be a UInt8 array corresponding to the image array or a p5Image if p5.js is available.
+
+    ```js
+    {
+        segmentation: *ImageData*,
+        raw: {
+            personMask: *ImageData*,
+            backgroundMask: *ImageData*,
+            partMask: *ImageData*
+        },
+        tensor: {
+            personMask: *Tensor*,
+            backgroundMask: *Tensor*,
+            partMask: *Tensor*,
+        },
+        personMask: *P5Image*,
+        backgroundMask: *P5Image*,
+        partMask: *P5Image*,
+        bodyParts: *JSONObject*
+    }
+    ```
 
 ***
 

docs/reference/unet.md

@@ -81,7 +81,28 @@ unet.segment(?video, ?callback);
 
 📤 **Outputs**
 
-* **Object**: Returns an array of objects. Each object contains `{something, anotherThing}`.
+* **Object**: Returns an Object.
+  ```js
+  {
+    segmentation:mask, 
+    blob: {
+      featureMask: *Blob*,
+      backgroundMask: *Blob*
+    },
+    tensor: {
+      featureMask: *Tensor*,
+      backgroundMask: *Tensor*,
+    },
+    raw: {
+      featureMask: *ImageData*,
+      backgroundMask: *ImageData*
+    },
+    // returns if p5 is available
+    featureMask: *p5Image*,
+    backgroundMask: *p5Image*,
+    mask: *p5Image*
+  };
+  ```
 
 ***
 

src/BodyPix/BODYPIX_PALETTE.js

@@ -0,0 +1,102 @@
+export default {
+  // "none": {
+  //     "id": -1,
+  //     "color": [0, 0, 0]
+  // },
+  "leftFace": {
+    "id": 0,
+    "color": [110, 64, 170]
+  },
+  "rightFace": {
+    "id": 1,
+    "color": [106, 72, 183]
+  },
+  "rightUpperLegFront": {
+    "id": 2,
+    "color": [100, 81, 196]
+  },
+  "rightLowerLegBack": {
+    "id": 3,
+    "color": [92, 91, 206]
+  },
+  "rightUpperLegBack": {
+    "id": 4,
+    "color": [84, 101, 214]
+  },
+  "leftLowerLegFront": {
+    "id": 5,
+    "color": [75, 113, 221]
+  },
+  "leftUpperLegFront": {
+    "id": 6,
+    "color": [66, 125, 224]
+  },
+  "leftUpperLegBack": {
+    "id": 7,
+    "color": [56, 138, 226]
+  },
+  "leftLowerLegBack": {
+    "id": 8,
+    "color": [48, 150, 224]
+  },
+  "rightFeet": {
+    "id": 9,
+    "color": [40, 163, 220]
+  },
+  "rightLowerLegFront": {
+    "id": 10,
+    "color": [33, 176, 214]
+  },
+  "leftFeet": {
+    "id": 11,
+    "color": [29, 188, 205]
+  },
+  "torsoFront": {
+    "id": 12,
+    "color": [26, 199, 194]
+  },
+  "torsoBack": {
+    "id": 13,
+    "color": [26, 210, 182]
+  },
+  "rightUpperArmFront": {
+    "id": 14,
+    "color": [28, 219, 169]
+  },
+  "rightUpperArmBack": {
+    "id": 15,
+    "color": [33, 227, 155]
+  },
+  "rightLowerArmBack": {
+    "id": 16,
+    "color": [41, 234, 141]
+  },
+  "leftLowerArmFront": {
+    "id": 17,
+    "color": [51, 240, 128]
+  },
+  "leftUpperArmFront": {
+    "id": 18,
+    "color": [64, 243, 116]
+  },
+  "leftUpperArmBack": {
+    "id": 19,
+    "color": [79, 246, 105]
+  },
+  "leftLowerArmBack": {
+    "id": 20,
+    "color": [96, 247, 97]
+  },
+  "rightHand": {
+    "id": 21,
+    "color": [115, 246, 91]
+  },
+  "rightLowerArmFront": {
+    "id": 22,
+    "color": [134, 245, 88]
+  },
+  "leftHand": {
+    "id": 23,
+    "color": [155, 243, 88]
+  }
+}