feat: install mediapipe via npm and add fallback to CDN

- Install @mediapipe/face_detection package through npm
- Copy mediapipe files into the output folder during build
- Add fallback logic to load mediapipe from CDN if local files are missing

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

@@ -41,16 +41,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/[email protected]',
+                    maxFaces: 1
+                };
+
+                return FaceDetection.createDetector(model, fallbackConfig);
+            })
+            .then(detector => {
+                this.faceDetector = detector;
+                if (this.runtime.ioDevices) {
+                    this._loop();
+                }
+            });
 
         this.cachedSize = 100;
         this.cachedTilt = 90;