tfjsのface-landmarks-detectionを試したい

結果

この記事はtfjsのface-landmarks-detectionのデモを試すだけの記事です

tfjs-modelsリポジトリをクローン

$ git clone https://github.com/tensorflow/tfjs-models.git

リポジトリを確認

このリポジトリには今回目的としているface-landmarks-detection以外のmodelが含まれています

$ cd tfjs-models/
$ tree -L 1
.
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── blazeface
├── body-pix
├── body-segmentation
├── cloudbuild.yml
├── coco-ssd
├── deeplab
├── depth-estimation
├── face-detection
├── face-landmarks-detection  # 今回使いたいもの !!!!!!!!!
├── hand-pose-detection
├── handpose
├── knn-classifier
├── mobilenet
├── model-playground
├── package.json
├── pose-detection
├── posenet
├── presubmit.ts
├── qna
├── run_python_tests.sh
├── scripts
├── shared
├── speech-commands
├── tasks
├── test_util.ts
├── tools
├── toxicity
├── tsconfig.json
├── tsconfig.test.json
├── tslint.json
├── universal-sentence-encoder
├── update_yarn_lock.sh
├── workspace.code-workspace
└── yarn.lock

23 directories, 14 files

デモプロジェクトに移動

face-landmarks-detection/demos/live_video/

$ cd face-landmarks-detection/demos/live_video/
$ tree -La 1
.
├── .babelrc
├── index.html
├── package.json
├── src
└── yarn.lock

face-landmarks-detection/demos/live_video/でface-landmarks-detectionのビルドを実行

$ yarn build-dep

build-depで何をしているのか？

tfjs-models/face-landmarks-detectionをビルド

face-landmarks-detection/demos/live_video/package.json

...省略
  "scripts": {
    ...省略
    "build-dep": "cd ../../ && yarn && yarn build",
    ...省略
  }
...省略

1. tfjs-models/face-landmarks-detectionに移動

cd ../../

2. tfjs-models/face-landmarks-detectionのパッケージインストール

yarn

3. tfjs-models/face-landmarks-detectionのビルド

face-landmarks-detectionのbuildを実行

tfjs-models/face-landmarks-detection/package.json

yarn build

yarn buildで何をしているのか？

face-landmarks-detection/package.json

...省略
"scripts": {
    "bundle": "rollup -c",
    "build": "rimraf dist && tsc && yarn bundle",
    ...省略
  },
...省略

1. distディレクトリのクリーンアップ

rimramfパッケージを使いOSのコマンド（rmなど）に依存しないクリーンアップを行う

rimraf

2. TypeScriptのコンパイル

tsc

3. バンドル

rollupパッケージを使ってJavaScriptファイルをまとめる

face-landmarks-detection/package.json

yarn bundle

face-landmarks-detection/package.json.scripts.bundle

rollup -c

最終的にtfjs-models/face-landmarks-detection/distが出力される

buid-depの履歴

$ yarn build-dep
yarn run v1.22.19
$ cd ../../ && yarn && yarn build
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > @rollup/plugin-typescript@3.1.1" has incorrect peer dependency "rollup@^1.20.0".
warning " > @rollup/plugin-typescript@3.1.1" has unmet peer dependency "tslib@*".
[4/4] Building fresh packages...
$ rimraf dist && tsc && yarn bundle
$ rollup -c
/home/<user_name>/workspace/face-detection-example/tfjs-models/tools
src/index.ts → dist/face-landmarks-detection.js...
created dist/face-landmarks-detection.js in 5.8s

src/index.ts → dist/face-landmarks-detection.min.js...
created dist/face-landmarks-detection.min.js in 5.6s

src/index.ts → dist/face-landmarks-detection.esm.js...
created dist/face-landmarks-detection.esm.js in 5s
Done in 51.48s.

face-landmarks-detection/demos/live_video/

パッケージのインストール

$ yarn

face-landmarks-detection/demos/live_video/package.jsonには上記でビルドしたtfjs-models/face-landmarks-detection/distへの依存が含まれている

face-landmarks-detection/demos/live_video/

...省略
  "dependencies": {
    ...省略
    "@tensorflow-models/face-landmarks-detection": "file:../../dist",
    ...省略
  },
...省略

live_videoの実行

$ yarn watch
yarn run v1.22.19
$ cross-env NODE_ENV=development parcel index.html --no-hmr --open
Server running at http://localhost:1234 
⠹ Building index.js...Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
⠦ Building ZerosLike.js...Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
✨  Built in 4.51s.
Static path (file or directory) '/home/zaburoh/workspace/face-detection-example/tfjs-models/face-landmarks-detection/demos/live_video/static' does not exist. Skipping.

http://localhost:1234にアクセス