Merge pull request #291 from adzhindzhi/UEPR-290-update-face-sensing-configuration

[UEPR-290] Update face sensing configuration

Author: adzhindzhi

package-lock.json

@@ -57,6 +57,7 @@
     "watch": "webpack --watch"
   },
   "dependencies": {
+    "@mediapipe/face_detection": "0.4.1646425229",
     "@microbit/microbit-universal-hex": "0.2.2",
     "@tensorflow-models/face-detection": "^1.0.3",
     "@tensorflow/tfjs": "^4.22.0",

packages/scratch-gui/package.json

@@ -84,6 +84,10 @@ const baseConfig = new ScratchWebpackConfigBuilder(
                 context: '../../node_modules/scratch-storage/dist/web',
                 from: 'chunks/fetch-worker.*.{js,js.map}',
                 noErrorOnMissing: true
+            },
+            {
+                from: '../../node_modules/@mediapipe/face_detection',
+                to: 'chunks/mediapipe/face_detection'
             }
         ]
     }));

packages/scratch-gui/webpack.config.js

@@ -8,6 +8,7 @@ const TargetType = require('../../extension-support/target-type');
 // const Posenet = require('@tensorflow-models/posenet');
 
 const FaceDetection = require('@tensorflow-models/face-detection');
+const mediapipePackage = require('@mediapipe/face_detection/package.json');
 
 /**
  * Icon svg to be displayed in the blocks category menu, encoded as a data URI.
@@ -41,16 +42,26 @@ class Scratch3FaceSensingBlocks {
         const model = FaceDetection.SupportedModels.MediaPipeFaceDetector;
         const detectorConfig = {
             runtime: 'mediapipe',
-            solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_detection',
+            solutionPath: '/chunks/mediapipe/face_detection',
             maxFaces: 1
         };
 
-        FaceDetection.createDetector(model, detectorConfig).then(detector => {
-            this.faceDetector = detector;
-            if (this.runtime.ioDevices) {
-                this._loop();
-            }
-        });
+        FaceDetection.createDetector(model, detectorConfig)
+            .catch(() => {
+                const fallbackConfig = {
+                    runtime: 'mediapipe',
+                    solutionPath: `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection@${mediapipePackage.version}`,
+                    maxFaces: 1
+                };
+
+                return FaceDetection.createDetector(model, fallbackConfig);
+            })
+            .then(detector => {
+                this.faceDetector = detector;
+                if (this.runtime.ioDevices) {
+                    this._loop();
+                }
+            });
 
         this.cachedSize = 100;
         this.cachedTilt = 90;