Advent Calendar 2020 4日目
11/4に実施したオンラインイベント「ゆるふわマシンラーニング vol.5【enebular編】明日から使えるお手軽MLサービスを学ぼう！」で発表した内容の解説をします。LTではお伝えできなかったフローの中身について説明します。
発表内容
どんな発表をしたかというと、スマホのカメラで撮影した写真を物体検出してみる、というものです。
Node-REDでスマホカメラを簡単に扱えたら便利だということで、機械学習済みモデルを使った物体認識のデモです。
動画をご覧ください。
作り方
フローは以下の様な非常にシンプルな感じになっています。
スマホ用画面ノード
Dashboardノードにあるtemplateノードを使っています。これは何でも書けるノードみたいになっていて、以下の様なコードでスマホのカメラで撮影して次のノードにデータを渡す役割をしています。
<label for="file" style="background: #0094CE; text-align: center; padding: 1rem; color: white; font-weight: 700; border: 1px solid white; border-radius: 5px;cursor : pointer;">Take picture</label>
<input id="file" onchange="showPhoto()" type="file" accept="image/*;capture=camera" style="display: none;">
<div style="width: 100%; overflow-y: hidden;">
<img id="photo" src="" alt="" style="width: 100%; max-width: 100%; height: auto; max-height: 100%;">
</div>
<ul ng-if="msg.vision">
<li ng-repeat="label in msg.vision.labelAnnotations">{{label.description}}</li>
</ul>
<script>
window.imgEle = document.getElementById('photo');
window.btnEle = document.getElementById('button');
var theScope = scope;
function showPhoto(){
if(event.target.files && event.target.files[0]){
console.log(event.target.files[0], event.target.files[0].arrayBuffer())
event.target.files[0].arrayBuffer()
.then(buffer => {
theScope.send({payload: buffer})
})
let imgURL = URL.createObjectURL(event.target.files[0]);
imgEle.src = imgURL;
btn-bookmark
// For performance reasons, revoke used ObjectURLs
imgEle.onload = function(){
URL.revokeObjectURL(imgURL);
}
}
}
</script>
Google Cloud Visionノード
こちらはGoogleが作ったノードが公開されています。
Visionノードのなかを覗くとFace Detection（顔認識）とかText Detection（テキスト認識）なども使えるようです。
使うには、まずGCP上でAPIの有効化をする必要があります。
最後に、ダウンロードしたファイルのJSONをKey欄に貼り付ければ、動作します。
動作環境
実際に個のフローを動作させるには、Heroku上にデプロイをして、スマホのWebブラウザからアプリにアクセスしています。
Herokuデプロイについてはこちらのドキュメントを参考にしてください。
まとめ
スマホで使えるNode-REDアプリを作りたいと思い、やってみました。より詳細な情報がありますので、ご覧いただければと思います。
- フローはこちらのDiscoverにあります。
- 発表資料はイベントページもしくはこちらにアップしています。
みなさんのアイディアの実現のお役に立てば幸いです。
