Cleanup of P5Util class

src/BodyPix/index.js

@@ -90,14 +90,13 @@ class BodyPix {
   bodyPartsSpec(colorOptions) {
     const result = colorOptions !== undefined || Object.keys(colorOptions).length >= 24 ? colorOptions : this.config.palette;
 
-    // Check if we're getting p5 colors, make sure they are rgb 
-    if (p5Utils.checkP5() && result !== undefined && Object.keys(result).length >= 24) {
+    // Check if we're getting p5 colors, make sure they are rgb
+    const p5 = p5Utils.p5Instance;
+    if (p5 && result !== undefined && Object.keys(result).length >= 24) {
       // Ensure the p5Color object is an RGB array
       Object.keys(result).forEach(part => {
-        if (result[part].color instanceof window.p5.Color) {
+        if (result[part].color instanceof p5.Color) {
           result[part].color = this.p5Color2RGB(result[part].color);
-        } else {
-          result[part].color = result[part].color;
         }
       });
     }
@@ -452,4 +451,4 @@ const bodyPix = (videoOrOptionsOrCallback, optionsOrCallback, cb) => {
   return callback ? instance : instance.ready;
 }
 
-export default bodyPix;
+export default bodyPix;

src/FaceApi/index.js

@@ -5,6 +5,7 @@
 
 /* eslint prefer-destructuring: ["error", {AssignmentExpression: {array: false}}] */
 /* eslint no-await-in-loop: "off" */
+/* eslint class-methods-use-this: "off" */
 
 /*
  * FaceApi: real-time face recognition, and landmark detection
@@ -14,6 +15,7 @@
 import * as tf from "@tensorflow/tfjs";
 import * as faceapi from "face-api.js";
 import callCallback from "../utils/callcallback";
+import modelLoader from "../utils/modelLoader";
 
 const DEFAULTS = {
   withLandmarks: true,
@@ -93,7 +95,7 @@ class FaceApiBase {
 
     Object.keys(this.config.MODEL_URLS).forEach(item => {
       if (modelOptions.includes(item)) {
-        this.config.MODEL_URLS[item] = this.getModelPath(this.config.MODEL_URLS[item]);
+        this.config.MODEL_URLS[item] = modelLoader.getModelPath(this.config.MODEL_URLS[item]);
       }
     });
 
@@ -354,18 +356,6 @@ class FaceApiBase {
     return _param !== undefined ? _param : _default;
   }
 
-  /**
-   * Checks if the given string is an absolute or relative path and returns
-   *      the path to the modelJson
-   * @param {String} absoluteOrRelativeUrl
-   */
-  getModelPath(absoluteOrRelativeUrl) {
-    const modelJsonPath = this.isAbsoluteURL(absoluteOrRelativeUrl)
-      ? absoluteOrRelativeUrl
-      : window.location.pathname + absoluteOrRelativeUrl;
-    return modelJsonPath;
-  }
-
   /**
    * Sets the return options for .detect() or .detectSingle() in case any are given
    * @param {Object} faceApiOptions
@@ -399,12 +389,6 @@ class FaceApiBase {
     });
   }
 
-  /* eslint class-methods-use-this: "off" */
-  isAbsoluteURL(str) {
-    const pattern = new RegExp("^(?:[a-z]+:)?//", "i");
-    return !!pattern.test(str);
-  }
-
   /**
    * get parts from landmarks
    * @param {*} result

src/utils/modelLoader.js

@@ -1,14 +1,28 @@
+/**
+ * Check if the provided URL string starts with a hostname,
+ * such as http://, https://, etc.
+ * @param {string} str
+ * @returns {boolean}
+ */
 function isAbsoluteURL(str) {
   const pattern = new RegExp('^(?:[a-z]+:)?//', 'i');
-  return !!pattern.test(str);
+  return pattern.test(str);
 }
 
+/**
+ * Accepts a URL that may be a complete URL, or a relative location.
+ * Returns an absolute URL based on the current window location.
+ * @param {string} absoluteOrRelativeUrl
+ * @returns {string}
+ */
 function getModelPath(absoluteOrRelativeUrl) {
-  const modelJsonPath = isAbsoluteURL(absoluteOrRelativeUrl) ? absoluteOrRelativeUrl : window.location.pathname + absoluteOrRelativeUrl
-  return modelJsonPath;
+  if (!isAbsoluteURL(absoluteOrRelativeUrl) && typeof window !== 'undefined') {
+    return window.location.pathname + absoluteOrRelativeUrl;
+  }
+  return absoluteOrRelativeUrl;
 }
 
 export default {
   isAbsoluteURL,
   getModelPath
-}
+}

src/utils/p5Utils.js

@@ -5,21 +5,31 @@
 
 class P5Util {
   constructor() {
+    if (typeof window !== "undefined") {
+      /**
+       * Store the window as a private property regardless of whether p5 is present.
+       * Can also set this property by calling method setP5Instance().
+       * @property {Window | p5 | {p5: p5} | undefined} m_p5Instance
+       * @private
+       */
       this.m_p5Instance = window;
+    }
   }
 
   /**
-   * Set p5 instance globally.
-   * @param {Object} p5Instance 
+   * Set p5 instance globally in order to enable p5 features throughout ml5.
+   * Call this function with the p5 instance when using p5 in instance mode.
+   * @param {p5 | {p5: p5}} p5Instance
    */
   setP5Instance(p5Instance) {
-      this.m_p5Instance = p5Instance;
+    this.m_p5Instance = p5Instance;
   }
 
   /**
-   * This getter will return p5, checking first if it is in
-   * the window and next if it is in the p5 property of this.m_p5Instance
-   * @returns {boolean} if it is in p5 
+   * Dynamic getter checks if p5 is loaded and will return undefined if p5 cannot be found,
+   * or will return an object containing all of the global p5 properties.
+   * It first checks if p5 is in the window, and then if it is in the p5 property of this.m_p5Instance.
+   * @returns {p5 | undefined}
    */
   get p5Instance() {
     if (typeof this.m_p5Instance !== "undefined" &&
@@ -33,75 +43,81 @@ class P5Util {
 
   /**
    * This function will check if the p5 is in the environment
-   * Either it is in the p5Instance mode OR it is in the window 
-   * @returns {boolean} if it is in p5 
+   * Either it is in the p5Instance mode OR it is in the window
+   * @returns {boolean} if it is in p5
    */
   checkP5() {
     return !!this.p5Instance;
   }
 
   /**
-     * Convert a canvas to Blob
-     * @param {HTMLCanvasElement} inputCanvas 
-     * @returns {Blob} blob object
-     */
+   * Convert a canvas to a Blob object.
+   * @param {HTMLCanvasElement} inputCanvas
+   * @returns {Promise<Blob>}
+   */
   /* eslint class-methods-use-this: ["error", { "exceptMethods": ["getBlob"] }] */
   getBlob(inputCanvas) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       inputCanvas.toBlob((blob) => {
-        resolve(blob);
+        if (blob) {
+          resolve(blob);
+        } else {
+          reject(new Error('Canvas could not be converted to Blob.'));
+        }
       });
     });
   };
 
   /**
-     * Load image in async way.
-     * @param {String} url 
-     */
+   * Load a p5.Image from a URL in an async way.
+   * @param {string} url
+   * @return {Promise<p5.Image>}
+   */
   loadAsync(url) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       this.p5Instance.loadImage(url, (img) => {
         resolve(img);
+      }, () => {
+        reject(new Error(`Could not load image from url ${url}`));
       });
     });
   };
 
   /**
-     * convert raw bytes to blob object
-     * @param {Array} raws 
-     * @param {number} x 
-     * @param {number} y 
-     * @returns {Blob}
-     */
-  async rawToBlob(raws, x, y) {
+   * convert raw bytes to blob object
+   * @param {number[] | Uint8ClampedArray | ArrayLike<number>} raws
+   * @param {number} width
+   * @param {number} height
+   * @returns {Promise<Blob>}
+   */
+  async rawToBlob(raws, width, height) {
     const arr = Array.from(raws)
     const canvas = document.createElement('canvas'); // Consider using offScreenCanvas when it is ready?
     const ctx = canvas.getContext('2d');
 
-    canvas.width = x;
-    canvas.height = y;
+    canvas.width = width;
+    canvas.height = height;
 
-    const imgData = ctx.createImageData(x, y);
-    const { data } = imgData;
+    const imgData = ctx.createImageData(width, height);
+    const {data} = imgData;
 
-    for (let i = 0; i < x * y * 4; i += 1 ) data[i] = arr[i];
+    for (let i = 0; i < width * height * 4; i += 1) data[i] = arr[i];
     ctx.putImageData(imgData, 0, 0);
 
-    const blob = await this.getBlob(canvas);
-    return blob;
+    return this.getBlob(canvas);
   };
 
   /**
-     *  Conver Blob to P5.Image
-     * @param {Blob} blob 
-     * @param {Object} p5Img
-     */
+   * Convert Blob to P5.Image
+   * @param {Blob} blob
+   * Note: may want to reject instead of returning null.
+   * @returns {Promise<p5.Image | null>}
+   */
   async blobToP5Image(blob) {
-    if (this.checkP5()) {
-      const p5Img = await this.loadAsync(URL.createObjectURL(blob));
-      return p5Img;
+    if (this.checkP5() && typeof URL !== "undefined") {
+      return this.loadAsync(URL.createObjectURL(blob));
     }
-    return null;  
+    return null;
   };
 
 }