Pro Yearly is on sale from $80 to $50! »

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

Ed660f8535bfc39e355af5a1e54bb88f?s=47 rch850
January 25, 2020

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

Ed660f8535bfc39e355af5a1e54bb88f?s=128

rch850

January 25, 2020
Tweet

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. これから •表情を増やしたい
  →スクショを撮り続ける日々 •ちゃんと公開したい