Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

rch850
January 25, 2020

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

rch850

January 25, 2020
Tweet

More Decks by rch850

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 表情認識

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. あるよ
    • 学習済みモデルがあります
    • face-api.js-models

    https://github.com/justadudewhohacks/face-api.js-
    models
    • 欧米系の顔じゃなきゃだめかと思ったけど、そうでもない

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 作ってみたよ
    • 動くやつ

    https://t68cv.csb.app/
    • ソースコード

    https://codesandbox.io/s/face-api-
    rinachanboard-t68cv

    View full-size slide

  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

    View full-size slide

  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
    }

    View full-size slide

  15. これから
    •表情を増やしたい

     →スクショを撮り続ける日々
    •ちゃんと公開したい

    View full-size slide