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

Transcript

1. face-api.jsで 璃奈ちゃんボードを 作ってみたよ ふくもく会 その60 2020-01-25 @rch850
2. 自己紹介 • りちゃ @rch850 です • 鯖江ではたらくエンジニアです • 最近見た映画はメイドインアビス
3. face-api.jsで 璃奈ちゃんボードを 作ってみたよ
4. face-api.js • https://github.com/justadudewhohacks/face-api.js/ • 顔の検出、認識ライブラリ (js) • ブラウザやサーバで動く • tensorflow.js ベース
5. 表情認識
6. 機械学習なので • 類似品の clmtrackr との大きな違い • Mobilenet とか、知ってる人は知っている単語が出てくる • 使うネットワークに応じたモデルを読み込む必要がある
7. 機械学習なので • モデルが要るってことは学習しなきゃだめ？ • いろんな表情の写真を自分で撮り続けるのしんどい • これは clmtrackr に戻るしかないのか？ • モデルどっかにないの？
8. あるよ • 学習済みモデルがあります • face-api.js-models
 https://github.com/justadudewhohacks/face-api.js- models • 欧米系の顔じゃなきゃだめかと思ったけど、そうでもない
9. face-api.jsで 璃奈ちゃんボードを 作ってみたよ
10. 璃奈ちゃんボードとは • 感情を表すのが苦手な天王寺璃奈ちゃんが、感情を表すため に使っているボード • 手書きだったり、デジタルだったりする •
11. face-api.jsで 璃奈ちゃんボードを 作ってみたよ
12. 作ってみたよ • 動くやつ
 https://t68cv.csb.app/ • ソースコード
 https://codesandbox.io/s/face-api- rinachanboard-t68cv
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. 表情検出 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. これから •表情を増やしたい
 　→スクショを撮り続ける日々 •ちゃんと公開したい