face-api.js で璃奈ちゃんボードを作ってみたよ

Transcript

1. 1.

   face-api.jsで 璃奈ちゃんボードを 作ってみたよ ふくもく会 その60 2020-01-25 @rch850

2. 2.

   自己紹介 • りちゃ @rch850 です • 鯖江ではたらくエンジニアです • 最近見た映画はメイドインアビス

3. 3.

   face-api.jsで 璃奈ちゃんボードを 作ってみたよ

4. 4.

   face-api.js • https://github.com/justadudewhohacks/face-api.js/ • 顔の検出、認識ライブラリ (js) • ブラウザやサーバで動く • tensorflow.js

   ベース
5. 5.

   表情認識

6. 6.

   機械学習なので • 類似品の clmtrackr との大きな違い • Mobilenet とか、知ってる人は知っている単語が出てくる • 使うネットワークに応じたモデルを読み込む必要がある

7. 7.

   機械学習なので • モデルが要るってことは学習しなきゃだめ？ • いろんな表情の写真を自分で撮り続けるのしんどい • これは clmtrackr に戻るしかないのか？ •

   モデルどっかにないの？
8. 8.

   あるよ • 学習済みモデルがあります • face-api.js-models
 https://github.com/justadudewhohacks/face-api.js- models • 欧米系の顔じゃなきゃだめかと思ったけど、そうでもない

9. 9.

   face-api.jsで 璃奈ちゃんボードを 作ってみたよ

10. 10.

    璃奈ちゃんボードとは • 感情を表すのが苦手な天王寺璃奈ちゃんが、感情を表すため に使っているボード • 手書きだったり、デジタルだったりする •

11. 11.

    face-api.jsで 璃奈ちゃんボードを 作ってみたよ

12. 12.

    作ってみたよ • 動くやつ
 https://t68cv.csb.app/ • ソースコード
 https://codesandbox.io/s/face-api- rinachanboard-t68cv

13. 13.

    モデルの読み込み faceapi.nets.faceExpressionNet .loadFromUri( "https://raw.githubusercontent.com/justadudewhohacks/face-api.js-models/master/face_expression/ face_expression_model-weights_manifest.json" ) .catch(err => console.log(err)); faceapi.nets.ssdMobilenetv1

    .loadFromUri( "https://raw.githubusercontent.com/justadudewhohacks/face-api.js-models/master/ssd_mobilenetv1/ ssd_mobilenetv1_model-weights_manifest.json" ) .catch(err => console.error(err)); face-api.js-models というリポジトリがあって、そこに学習済みのモデルデータがある https://github.com/justadudewhohacks/face-api.js-models
14. 14.

    表情検出 const result = await faceapi.detectSingleFace(video).withFaceExpressions(); const sortedArray = result.expressions.asSortedArray();

    if (sortedArray[0].probability >= 0.5) { boardId = BoardExpressionMap[sortedArray[0].expression]; draw(RinaChanBoard[boardId]); } { "neutral": 0.9997411370277405, "happy": 0.00003564624421414919, "sad": 0.00003119324901490472, "angry": 0.0000033359387998643797, "fearful": 2.859609660177398e-9, "disgusted": 4.6088089789009246e-8, "surprised": 0.00018857289978768677 }
15. 15.

    これから •表情を増やしたい
 　→スクショを撮り続ける日々 •ちゃんと公開したい