[blazeface] Build and serve demo with esbuild (#851)

* [blazeface] Use esbuild to build and serve the demo

* [blazeface] Fix demo lint errors

* [blazeface] Add missing mkdirp dep to demo

* [blazeface] Remove extra yarn command from demo

* [blazeface] Minify the demo

Author: mattsoulanille

blazeface/demo/index.js

@@ -28,23 +28,29 @@ const stats = new Stats();
 stats.showPanel(0);
 document.body.prepend(stats.domElement);
 
-let model, ctx, videoWidth, videoHeight, video, canvas;
+let model;
+let ctx;
+let videoWidth;
+let videoHeight;
+let video;
+let canvas;
 
 const state = {
-  backend: 'wasm'
+  backend: 'wasm',
 };
 
 const gui = new dat.GUI();
-gui.add(state, 'backend', ['wasm', 'webgl', 'cpu']).onChange(async backend => {
-  await tf.setBackend(backend);
-});
+gui.add(state, 'backend', ['wasm', 'webgl', 'cpu'])
+    .onChange(async (backend) => {
+      await tf.setBackend(backend);
+    });
 
 async function setupCamera() {
   video = document.getElementById('video');
 
   const stream = await navigator.mediaDevices.getUserMedia({
     'audio': false,
-    'video': { facingMode: 'user' },
+    'video': {facingMode: 'user'},
   });
   video.srcObject = stream;
 
@@ -79,13 +85,13 @@ const renderPrediction = async () => {
       const start = predictions[i].topLeft;
       const end = predictions[i].bottomRight;
       const size = [end[0] - start[0], end[1] - start[1]];
-      ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+      ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
       ctx.fillRect(start[0], start[1], size[0], size[1]);
 
       if (annotateBoxes) {
         const landmarks = predictions[i].landmarks;
 
-        ctx.fillStyle = "blue";
+        ctx.fillStyle = 'blue';
         for (let j = 0; j < landmarks.length; j++) {
           const x = landmarks[j][0];
           const y = landmarks[j][1];
@@ -114,7 +120,7 @@ const setupPage = async () => {
   canvas.width = videoWidth;
   canvas.height = videoHeight;
   ctx = canvas.getContext('2d');
-  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
 
   model = await blazeface.load();
 

blazeface/demo/package.json

@@ -9,36 +9,28 @@
     "node": ">=8.9.0"
   },
   "dependencies": {
-    "@tensorflow-models/blazeface": "link:../dist",
-    "@tensorflow/tfjs-backend-wasm": "^3.1.0",
-    "@tensorflow/tfjs-backend-webgl": "^3.1.0",
-    "@tensorflow/tfjs-converter": "^3.1.0",
-    "@tensorflow/tfjs-core": "3.1.0"
+    "@tensorflow-models/blazeface": "link:../",
+    "@tensorflow/tfjs-backend-wasm": "^3.11.0",
+    "@tensorflow/tfjs-backend-webgl": "^3.11.0",
+    "@tensorflow/tfjs-converter": "^3.11.0",
+    "@tensorflow/tfjs-core": "^3.11.0"
   },
   "scripts": {
-    "watch": "cross-env NODE_ENV=development parcel index.html --no-hmr --open --target browser",
-    "build": "cross-env NODE_ENV=production parcel build index.html --no-minify --target browser --public-url ./",
+    "watch": "esbuild index.js --bundle --target=es6 --servedir=. --serve --sourcemap --sources-content=true --preserve-symlinks",
+    "build": "mkdirp dist && cp index.html dist && esbuild index.js --bundle --target=es6 --outfile=dist/index.js --sourcemap --sources-content=true --preserve-symlinks --minify",
     "lint": "eslint .",
-    "link-local": "yalc link @tensorflow-models/blazeface",
     "build-model": "cd .. && yarn && yarn build-npm",
     "build-deps": "yarn build-model"
   },
   "browser": {
     "crypto": false
   },
   "devDependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/plugin-transform-runtime": "^7.7.6",
-    "@babel/polyfill": "^7.10.4",
-    "@babel/preset-env": "^7.7.6",
-    "babel-preset-env": "^1.7.0",
     "clang-format": "~1.2.2",
-    "cross-env": "^5.2.0",
     "dat.gui": "^0.7.2",
     "eslint": "^4.19.1",
     "eslint-config-google": "^0.9.1",
-    "parcel-bundler": "~1.12.5",
-    "yalc": "~1.0.0-pre.50"
+    "mkdirp": "^1.0.4"
   },
   "resolutions": {
     "is-svg": "4.3.1"