Monacaで作る
画像認識アプリ

Tam.inc 菅家 大地

自己紹介

TAM.inc フロントエンドエンジニア

菅家 大地 / Daichi Kanke

Webコンサルティングの会社でデザイナーをしていましたが、エンジニアとしてTAMに。

 

  • PWA
  • Vue.js / Nuxt.js
  • Firebase
  • Monaca / Onsen UI

Monaca + 画像認識

せっかくLT枠もらったので

何かサンプルアプリを作りたい !!

 

  • デバイスの機能使う系
  • Webサービスと組み合わせたい
  • 画像認識のサービスは使ってみたかった

DEMO

画像認識API

GoogleのCloud Visionを使用

 

  • APIで簡単にラベル取得できる
    • DataURI(Base64)でPOST
    • MonacaのカメラプラグインはBase64で取得できるので簡単
  • 1,000 ユニット/月 まで無料
// 撮影ボタンを押した時の処理
$('#btnCamera').on('click', function(){
  navigator.camera.getPicture(function cameraSuccess(imageUri) {
      postToApi(imageUri);
  }, function cameraError(error) {
      console.debug("Unable to obtain picture: " + error, "app");
  }, {
      quality: 90,
      destinationType: Camera.DestinationType.DATA_URL,
      targetWidth: 1200,
      targetHeight: 1200
  });
});
// Cloud Visionに画像をPOST
var postToApi = function (dataUrl) {
    var params = {
        requests: [
            {
                image: {
                    content: dataUrl
                },
                features: [{
                        type: 'LABEL_DETECTION',
                        maxResults: 1
                }]
            }
        ]
    };
    var req = JSON.stringify(params);
    $.ajax({
        url: 'https://vision.googleapis.com/v1/images:annotate?key=' + API_KEY,
        type: 'POST',
        data: req,
        dataType: 'json',
        contentType: 'application/json'
    }).done(function (data) {
        …
    });
}

日本語翻訳

GASでごにょごにょしました

https://qiita.com/tanabee/items/c79c5c28ba0537112922

 

  • Cloud Visionでは英語で帰ってくるので、日本語に翻訳して表示
  • スコアも%にして表示すると面白い。
  • ネコかわいいよ、ネコ。

問題発生

Google Cloud Visionは
モナカレーを認識できない。

85%皿だと思っている。

 

これは由々しき事態・・・

 

認識できるようにしないと・・・

Monacaで作る
画像モナカレー認識アプリ

GoogleのCloud AutoMLで機械学習モデル作成
ひたすらモナカレーを覚えさせるお仕事
モナカレーだけではダメらしい
カレー追加!!
カレー祭り
もっとくれって言う(´・ω・`)
今回はそのままトレーニング

アプリへ組み込む

ちゃんと撮れてれば認識できるので、気を取り直してAPI化してアプリに…

出来ませんでした・・・

GoogleCloudのCLIツールが必要。ローカルのターミナルからcurlで叩くのははうまくいったが、アプリから叩けなくて詰む。。

Watsonで挑戦‼️…も時間切れ

CORSに引っかかってどうしようかと考えているうちに時間切れに。

触った感じ、組み込みはGoogleより出来そうな気がしました。

ご静聴

ありがとうございました

181128_monaca_ug

By kan_dai

181128_monaca_ug

  • 911