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

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

radiocat
November 28, 2018

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

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

radiocat

November 28, 2018
Tweet

More Decks by radiocat

Other Decks in Technology

Transcript

  1. おしごと 現職:株式会社 ラクス 所属:楽楽精算 開発チーム リーダー/マネジメント スクラムマスター 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
  2. ML Kit for Firebase • Android/iOS向け機械学習SDK • 現在パブリックベータ • Googleに訓練されたMLモデルを利用可能

    • TensorFlow Liteの自作モデル(Custom Models)も利用可能 • 2種類のAPI ◦ On-device:デバイスに組み込んで通信なしで使える軽量なモデル ▪ 無料で使える ◦ In the Cloud:クラウド上の高度なモデル ▪ Cloud Vision APIを使う(重量課金)
  3. Shape Detection API 3つのJavaScript API • BarcodeDetector • FaceDetector •

    TextDetector https://www.chromestatus.com/fe ature/4757990523535360
  4. Experimental Web Platform features • Experimental Web Platform featuresをEnabledにする •

    アドレスバーに以下を入力して設定(要Chrome再起動) chrome://flags/#enable-experimental-web-platform-features
  5. FaceDetectorの使い方 const faceDetector = new FaceDetector(); const image = document.getElementById('image');

    // 取得した画像をdetect()に渡す faceDetector.detect(image) .then(faces => ...(以下略
  6. 取得できる情報 [ { 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', } } } ]
  7. 同様に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