Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
face-api.js で璃奈ちゃんボードを作ってみたよ
rch850
January 25, 2020
Programming
0
120
face-api.js で璃奈ちゃんボードを作ってみたよ
rch850
January 25, 2020
Tweet
Share
More Decks by rch850
See All by rch850
rch850
0
220
rch850
0
25
rch850
0
98
rch850
0
16
rch850
0
49
rch850
0
66
rch850
0
370
rch850
0
100
rch850
0
540
Other Decks in Programming
See All in Programming
masui_masanori
1
250
mihyaeru21
0
350
morimorihoge
1
140
bkuhlmann
2
300
minamijoyo
3
460
7603
0
270
manfredsteyer
PRO
0
180
tourismgeek
1
130
grapecity_dev
0
170
danilop
1
730
lovee
2
130
temoki
2
210
Featured
See All Featured
shpigford
369
42k
zakiwarfel
88
3.4k
addyosmani
1347
190k
shlominoach
176
7.5k
productmarketing
5
710
notwaldorf
15
1.8k
erikaheidi
14
4.3k
edds
56
9.4k
davidbonilla
70
3.6k
sachag
446
36k
addyosmani
311
21k
pedronauck
652
110k
Transcript
face-api.jsで 璃奈ちゃんボードを 作ってみたよ ふくもく会 その60 2020-01-25 @rch850
自己紹介 • りちゃ @rch850 です • 鯖江ではたらくエンジニアです • 最近見た映画はメイドインアビス
face-api.jsで 璃奈ちゃんボードを 作ってみたよ
face-api.js • https://github.com/justadudewhohacks/face-api.js/ • 顔の検出、認識ライブラリ (js) • ブラウザやサーバで動く • tensorflow.js
ベース
表情認識
機械学習なので • 類似品の clmtrackr との大きな違い • Mobilenet とか、知ってる人は知っている単語が出てくる • 使うネットワークに応じたモデルを読み込む必要がある
機械学習なので • モデルが要るってことは学習しなきゃだめ? • いろんな表情の写真を自分で撮り続けるのしんどい • これは clmtrackr に戻るしかないのか? •
モデルどっかにないの?
あるよ • 学習済みモデルがあります • face-api.js-models https://github.com/justadudewhohacks/face-api.js- models • 欧米系の顔じゃなきゃだめかと思ったけど、そうでもない
face-api.jsで 璃奈ちゃんボードを 作ってみたよ
璃奈ちゃんボードとは • 感情を表すのが苦手な天王寺璃奈ちゃんが、感情を表すため に使っているボード • 手書きだったり、デジタルだったりする •
face-api.jsで 璃奈ちゃんボードを 作ってみたよ
作ってみたよ • 動くやつ https://t68cv.csb.app/ • ソースコード https://codesandbox.io/s/face-api- rinachanboard-t68cv
モデルの読み込み 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
表情検出 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 }
これから •表情を増やしたい →スクショを撮り続ける日々 •ちゃんと公開したい