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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197227/e5e574c3-d4fb-5804-1ce6-4e88b3025c84.png)

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

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

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

```bash
$ 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/`

```bash
$ 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`のビルドを実行

```bash
$ yarn build-dep
```

## build-depで何をしているのか？
`tfjs-models/face-landmarks-detection`をビルド

```json:face-landmarks-detection/demos/live_video/package.json
...省略
  "scripts": {
    ...省略
    "build-dep": "cd ../../ && yarn && yarn build",
    ...省略
  }
...省略
```

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

```bash
cd ../../
```

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

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

face-landmarks-detectionのbuildを実行

```bash:tfjs-models/face-landmarks-detection/package.json
yarn build
```

#### `yarn build`で何をしているのか？
```json: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ファイルをまとめる
```json:face-landmarks-detection/package.json
yarn bundle
```

```bash: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/
## パッケージのインストール

```bash
$ yarn
```

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

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

## live_videoの実行

```bash
$ 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`にアクセス