Fix standalone example.

handtracking-io · Feb 24, 2022 · 9f1762c · 9f1762c
1 parent 1e8205e
commit 9f1762c
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/example/package.json b/example/package.json
@@ -13,6 +13,6 @@
     "webpack-dev-server": "^4.3.0"
   },
   "dependencies": {
-    "yoha": "../yoha-v0.0.18.tgz"
+    "@handtracking.io/yoha": "*"
   }
 }
diff --git a/example/src/entry.js b/example/src/entry.js
@@ -3,12 +3,12 @@
  * The example creates a colored box that can be moved using hand movements. Performing
  * a pinch or fist gesture changes the color of the cursor.
  */
-import * as yoha from 'yoha';
+import * as yoha from '@handtracking.io/yoha';
 import {SetCursorColor, SetCursorPosition, SetCursorVisibility, InitializeCursor} from './cursor';
 
 async function Run() {
   // Download models.
-  const modelFiles = await yoha.DownloadYohaModelFiles(
+  const modelFiles = await yoha.DownloadMultipleYohaTfjsModelBlobs(
     '/box/model.json', 
     '/lan/model.json', 
     (rec, total) => {
@@ -27,10 +27,16 @@ async function Run() {
   }
   const video = yoha.CreateVideoElementFromStream(streamRes.stream);
 
+  // Note the 'wasmPath' argument. This has to be in sync with how you serve the respective
+  // files. See webpack.config.js for an example.
+  const wasmConfig = {
+    wasmPaths: './node_modules/@tensorflow/tfjs-backend-wasm/dist/'
+  };
+
   // Run engine.
   // We configure small padding to avoid that users move their hand outside webcam view
   // when trying to move the cursor towards the border of the viewport.
-  yoha.StartWebGlEngine({padding: 0.05}, video, modelFiles, res => {
+  yoha.StartTfjsWasmEngine({padding: 0.05}, wasmConfig, video, modelFiles, res => {
     if (!Math.round(res.isHandPresentProb)) {
       SetCursorVisibility(false);
       return;

diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -37,7 +37,8 @@ module.exports = (env) => {
       }),
       new CopyWebpackPlugin({
         patterns: [
-          {from: 'node_modules/yoha/models/', to: './'},
+          {from: 'node_modules/@tensorflow/tfjs-backend-wasm/dist/*.wasm'},
+          {from: 'node_modules/@handtracking.io/yoha/models/', to: './'},
         ]
       })
     ],

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -7,6 +7,16 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.6.tgz#d5e0706cf8c6acd8c6032f8d54070af261bbbb2f"
   integrity sha512-ws57AidsDvREKrZKYffXddNkyaF14iHNHm8VQnZH6t99E8gczjNN0GpvcGny0imC80yQ0tHz1xVUKk/KFQSUyA==
 
+"@handtracking.io/yoha@*":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@handtracking.io/yoha/-/yoha-1.1.0.tgz#1b1bedeb7a8297ba1d0d6c14005d29c21d1e0d3a"
+  integrity sha512-qyLZbHFHm2hP/7YW/Xs6hA8SqEy3ELX5U+aWEmHTjrC7rZxGBSIt7DJcG+JIoXdrp+4XCiscw8ebdO+mG+kIng==
+  dependencies:
+    "@tensorflow/tfjs-backend-wasm" "^3.13.0"
+    "@tensorflow/tfjs-backend-webgl" "^3.12.0"
+    "@tensorflow/tfjs-converter" "^3.12.0"
+    "@tensorflow/tfjs-core" "^3.12.0"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -36,6 +46,14 @@
     "@types/seedrandom" "2.4.27"
     seedrandom "2.4.3"
 
+"@tensorflow/tfjs-backend-wasm@^3.13.0":
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-backend-wasm/-/tfjs-backend-wasm-3.13.0.tgz#3465c6040542752d2632df7e0c4ac0e5a9ef801a"
+  integrity sha512-h5kNS4xvljoySzfcFwqbdFB6QZGR06IA9/Xq/PjBeZt18XEoJGqKHbOCYupmUlr5pxo/gnXzPhAC2h4SfZXPXw==
+  dependencies:
+    "@tensorflow/tfjs-backend-cpu" "3.13.0"
+    "@types/emscripten" "~0.0.34"
+
 "@tensorflow/tfjs-backend-webgl@^3.12.0":
   version "3.13.0"
   resolved "https://registry.yarnpkg.com/@tensorflow/tfjs-backend-webgl/-/tfjs-backend-webgl-3.13.0.tgz#f99df51253de21e20dae195991d332195ab30b4b"
@@ -96,6 +114,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/emscripten@~0.0.34":
+  version "0.0.34"
+  resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-0.0.34.tgz#12b4a344274fb102ff2f6c877b37587bc3e46008"
+  integrity sha512-QSb9ojDincskc+uKMI0KXp8e1NALFINCrMlp8VGKGcTSxeEyRTTKyjWw75NYrCZHUsVEEEpr1tYHpbtaC++/sQ==
+
 "@types/eslint-scope@^3.7.0":
   version "3.7.3"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
@@ -2597,11 +2620,3 @@ ws@^8.4.2:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.4.2.tgz#18e749868d8439f2268368829042894b6907aa0b"
   integrity sha512-Kbk4Nxyq7/ZWqr/tarI9yIt/+iNNFOjBXEWgTb4ydaNHBNGgvf2QHbS9fdfsndfjFlFwEd4Al+mw83YkaD10ZA==
-
-yoha@../yoha-v0.0.18.tgz:
-  version "0.0.18"
-  resolved "../yoha-v0.0.18.tgz#7927350fd35c92acae4cf4f0a35d93c0df267770"
-  dependencies:
-    "@tensorflow/tfjs-backend-webgl" "^3.12.0"
-    "@tensorflow/tfjs-converter" "^3.12.0"
-    "@tensorflow/tfjs-core" "^3.12.0"
diff --git a/webpack.config.js b/webpack.config.js
@@ -41,7 +41,6 @@ module.exports = (env) => {
       })),
       new CopyWebpackPlugin({
         patterns: [
-          // FIXME these wildcards will load some unnecessary stuff right now
           {from: 'node_modules/@tensorflow/tfjs-backend-wasm/dist/*.wasm'},
           {from: 'models/lan', to: 'lan/'},
           {from: 'models/box', to: 'box/'},