ブラウザだけで使える機械学習モデル / Shape Detection Sample

2018.11.28 第20回 梅キャンX勉強会

Transcript

1. ブラウザだけで 使える 機械学習モデル 2018.11.28 / @radiocatz 第20回 梅キャンX勉強会
2. おしごと 現職：株式会社 ラクス 所属：楽楽精算 開発チーム リーダー／マネジメント スクラムマスター About me radiocat Twitter : @radiocatz Android派／Vim派／野球派／ KIRINビール派 大学時代は軽音楽部で電子音楽を作った りしてました。 Blog : http://radiocat.hatenablog.com/ Qiita : https://qiita.com/radiocat GitHub : https://github.com/radiocat https://youtu.be/8J-ZTQVKWMw
3. 9月にオフィス移転で近所に来ました 梅田ゲートタワー 7階
4. お知らせ • 会社のMeetupを運営しています • 次回は2月に開催予定 https://rakus.connpass.com/ https://news.mynavi.jp/kikaku/20180801-662693/ • 社内勉強会も運営しています • 1月からもくもく勉強会を外部開放予定
5. スクラム開発の取り組み 会社のブログでスクラムについて書いています Scrum Fest Osaka 2019のCfPに応募中 http://tech-blog.rakus.co.jp/ https://confengine.com/scrum-fest-osaka-2019/propos al/8554/-
6. ブラウザだけで使える 機械学習モデル 今日のテーマ
7. ML（機械学習）モデル とは？
8. さまざまなサービスで活用できる学習済みモデル 学習 さまざまな サービスで活用
9. モバイルアプリ向けMLモデル • Google：ML Kit ◦ https://developers.google.com/ml-kit/ • Apple：Core ML ◦ https://developer.apple.com/documentation/coreml
10. ML Kit for Firebase • Android/iOS向け機械学習SDK • 現在パブリックベータ • Googleに訓練されたMLモデルを利用可能 • TensorFlow Liteの自作モデル（Custom Models）も利用可能 • 2種類のAPI ◦ On-device：デバイスに組み込んで通信なしで使える軽量なモデル ▪ 無料で使える ◦ In the Cloud：クラウド上の高度なモデル ▪ Cloud Vision APIを使う（重量課金）
12. 参考 https://speakerdeck.com/radiocat/ml-kit-wo-android-te-dong-kasitemita
13. 2018年5月に モバイルSDKやWeb APIで MLモデルを利用可能になった つまり
14. 2018年10月 Chrome 70 正式リリース
15. Chrome 70 • 10月に正式リリース • ブラウザから顔・バーコード・テキスト識別APIが使えるようになった https://forest.watch.impress.co.jp/docs/news/1143859.html
16. つまりこういうこと Chromeで できます
17. Shape Detection Origin Trial Shape Detection APIがOrigin Trialになった https://blog.chromium.org/2018/09/chrom e-70-beta-shape-detection-web.html
18. Origin Trial その名の通り「特定のオリジンにだけ、実験中の機能を、期限付きで提供する」仕組みであ る https://blog.jxck.io/entries/2016-09-29/vender-prefix-to-origin-trials.html
19. Web Platform Incubator Community Group（WICG） 新しい技術の普及について皆で検討し支援するのを目的とした グループです。W3Cのスタッフやベンダーも参加していますが、 あくまでコミュニティというかたちで運営されます。 https://www.publickey1.jp/blog/15/html5whatwgw3c_tpac _2015.html https://wicg.io/
20. Shape Detection API 3つのJavaScript API • BarcodeDetector • FaceDetector • TextDetector https://www.chromestatus.com/fe ature/4757990523535360
21. 使いかた
22. Experimental Web Platform features • Experimental Web Platform featuresをEnabledにする • アドレスバーに以下を入力して設定（要Chrome再起動） chrome://flags/#enable-experimental-web-platform-features
23. FaceDetectorの使い方 const faceDetector = new FaceDetector(); const image = document.getElementById('image'); // 取得した画像をdetect()に渡す faceDetector.detect(image) .then(faces => ...（以下略
24. 取得できる情報 [ { boundingBox: { // 検出した顔の位置 x: 545, y: 187, top: 187, left: 545, right: 855, bottom: 497, width: 310, height: 310 }, landmarks: [ // 目や口の位置 { locations: { x: 627.5, y: 262.5 }, type: 'eye' }, { locations: { x: 763, y: 258 }, type: 'eye' }, { locations: { x: 701, y: 418 }, type: 'mouth', } } } ]
25. 同様に3つのAPIが利用可能 TextDetectorとBarcodeDetectorもほぼ同じような使い方 ※参考 • Introduction to the Shape Detection API ◦ https://blog.arnellebalane.com/introduction-to-the-shape-detection-api-e07425396861 サンプルコード • shape-detection-sample ◦ https://github.com/radiocat/shape-detection-sample
26. DEMO https://radiocat.github.io/shape-detection-sample/examples/face/
27. まとめ
28. 所感 • 5月にML Kitを触って驚いた半年後にそれがChromeでできるようになった • <video>を使ってリアルタイムの顔認識もできそう • TextDetectorは実用にはまだまだ • BarcodeDetectorは充分実用レベル • PWA化したらブラウザだけでQRコードリーダーアプリが実現できそう
29. Thank you
30. Credits • Unsplash ◦ https://unsplash.com/ • いらすとや ◦ https://www.irasutoya.com/