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

D3f673bee1c7b59b8bdade8f6db61282?s=47 radiocat
November 28, 2018

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

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

D3f673bee1c7b59b8bdade8f6db61282?s=128

radiocat

November 28, 2018
Tweet

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を使う(重量課金)
  11. None
  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/