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