ブラウザだけで 使える 機械学習モデル 2018.11.28 / @radiocatz 第20回 梅キャンX勉強会

おしごと 現職：株式会社 ラクス 所属：楽楽精算 開発チーム リーダー／マネジメント スクラムマスター 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

9月にオフィス移転で近所に来ました 梅田ゲートタワー 7階

お知らせ ● 会社のMeetupを運営しています ● 次回は2月に開催予定 https://rakus.connpass.com/ https://news.mynavi.jp/kikaku/20180801-662693/ ● 社内勉強会も運営しています ● 1月からもくもく勉強会を外部開放予定

スクラム開発の取り組み 会社のブログでスクラムについて書いています Scrum Fest Osaka 2019のCfPに応募中 http://tech-blog.rakus.co.jp/ https://confengine.com/scrum-fest-osaka-2019/propos al/8554/-

ブラウザだけで使える 機械学習モデル 今日のテーマ

ML（機械学習）モデル とは？

さまざまなサービスで活用できる学習済みモデル 学習 さまざまな サービスで活用

モバイルアプリ向けMLモデル ● Google：ML Kit ○ https://developers.google.com/ml-kit/ ● Apple：Core ML ○ https://developer.apple.com/documentation/coreml

ML Kit for Firebase ● Android/iOS向け機械学習SDK ● 現在パブリックベータ ● Googleに訓練されたMLモデルを利用可能 ● TensorFlow Liteの自作モデル（Custom Models）も利用可能 ● 2種類のAPI ○ On-device：デバイスに組み込んで通信なしで使える軽量なモデル ■ 無料で使える ○ In the Cloud：クラウド上の高度なモデル ■ Cloud Vision APIを使う（重量課金）

No content

参考 https://speakerdeck.com/radiocat/ml-kit-wo-android-te-dong-kasitemita

2018年5月に モバイルSDKやWeb APIで MLモデルを利用可能になった つまり

2018年10月 Chrome 70 正式リリース

Chrome 70 ● 10月に正式リリース ● ブラウザから顔・バーコード・テキスト識別APIが使えるようになった https://forest.watch.impress.co.jp/docs/news/1143859.html

つまりこういうこと Chromeで できます

Shape Detection Origin Trial Shape Detection APIがOrigin Trialになった https://blog.chromium.org/2018/09/chrom e-70-beta-shape-detection-web.html

Origin Trial その名の通り「特定のオリジンにだけ、実験中の機能を、期限付きで提供する」仕組みであ る https://blog.jxck.io/entries/2016-09-29/vender-prefix-to-origin-trials.html

Web Platform Incubator Community Group（WICG） 新しい技術の普及について皆で検討し支援するのを目的とした グループです。W3Cのスタッフやベンダーも参加していますが、 あくまでコミュニティというかたちで運営されます。 https://www.publickey1.jp/blog/15/html5whatwgw3c_tpac _2015.html https://wicg.io/

Shape Detection API 3つのJavaScript API ● BarcodeDetector ● FaceDetector ● TextDetector https://www.chromestatus.com/fe ature/4757990523535360

使いかた

Experimental Web Platform features ● Experimental Web Platform featuresをEnabledにする ● アドレスバーに以下を入力して設定（要Chrome再起動） chrome://flags/#enable-experimental-web-platform-features

FaceDetectorの使い方 const faceDetector = new FaceDetector(); const image = document.getElementById('image'); // 取得した画像をdetect()に渡す faceDetector.detect(image) .then(faces => ...（以下略

取得できる情報 [ { 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', } } } ]

同様に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

DEMO https://radiocat.github.io/shape-detection-sample/examples/face/

まとめ

所感 ● 5月にML Kitを触って驚いた半年後にそれがChromeでできるようになった ● を使ってリアルタイムの顔認識もできそう ● TextDetectorは実用にはまだまだ ● BarcodeDetectorは充分実用レベル ● PWA化したらブラウザだけでQRコードリーダーアプリが実現できそう

Thank you

Credits ● Unsplash ○ https://unsplash.com/ ● いらすとや ○ https://www.irasutoya.com/