Help us understand the problem. What is going on with this article?

コーディング不要で画像認識APIを活用したアプリを開発する

More than 1 year has passed since last update.

 今回は、Node-REDのCognitive Servicesノードを用いて、以下の様な表情分析アプリをコーディングレスで開発しましたので紹介します。画像のURLを入力すると、Cognitive ServicesのEmotion APIを用いてその中の表情を分析し、表情パラメータの値をゲージで表示します。

result1.png

人工知能APIとコーディングレスの組合せ

 巷では人工知能APIが流行っていますが、活用ユースケースを作り出すことが難しく、ビジネスに結び付けることは困難です。そのため、収益が出るユースケースのアイデアをコミュニティ等で共有し合うことで、ユーザが自ら市場を広げてゆく必要があると考えます。アイデアを形にするには、通常プログラミングを行う必要がありますが、プログラミングができるのは一部のエンジニアに限られます。また、エンジニアにおいても収益の見込みが不明確なアプリケーションに対して、コーディングに費やせる時間は限られています。そこで、Node-REDのコーディングレス開発の特徴を活かし、誰でも短時間でプロトタイプを作成し、他ユーザのフィードバックを得て収益性を検証できる開発環境が重要になると考えます。

必要な処理ノードをインストール

 今回は、Node-REDがインストールされていることを前提(例えば、Azureへのインストール方法はこちら)とし、Cognitive Servicesノードとダッシュボードノードをインストールします。インストールに用いるコマンドは下記の通りです。

sudo npm install -g node-red-contrib-cognitive-services
sudo npm install -g node-red-dashboard

 Node-REDを起動すると、左側のパレットにCognitive Servicesノードとダッシュボードノードが登場します。

palette.png

フローの作成

 以下のフローを作成します。このフローでは、formノードに画像のURLが入力されると、その画像をTemplateノードを用いてUI上へ表示します。同時に、URLをEmotionノードへ送り、表情を解析した各パラメータをそれぞれのunitsノードへ送ります。黄色の5つのChangeノードは値の代入を行っています。

flow.png

 以降で、各処理ノードのプロパティについて説明します。

formノード(画像URLの入力を受付ける)

 formノードには、ラベルと変数名urlを入力します。

form.png

Changeノード(値の代入)

 Changeノードでは、前の処理ノードから受け取った値の一部を、変数msg.payloadへ代入し、次の処理ノードへ送付します。下の場合は、変数msg.payload.urlに格納されている画像のURLの値を、変数msg.payloadへ格納しています。

change.png

Templateノード(画像を表示)

 Templateノードでは、前の処理ノードから受け取った画像のURLを用いて、画像をブラウザ上へ表示します。Templateへimgタグを入力するのみです。

template.png

Emotionノード(画像を分析)

 Emotionノードには、Emotion APIのサブスクリプションキーを貼り付けます。

emotion.png

ここで、Cognitive Servicesのページにアクセスし、サブスクリプションキーを取得する必要があります(2017年1月現在、無料です)。

key.png

unitsノード(感情パラメータをゲージ表示)

 unitsノードには、感情パラメータをゲージ表示します。感情パラメータの名前(ここではAnger)をTitleへ入力します。
gauge.png

dashboardタブ(UIの設定)

 ダッシュボードノードタブでは、以下の通りUIのレイアウトを設定します。

dashboard.png

デモ

 http://Node-REDのIPアドレス:ポート番号/ui
にアクセスすると、開発した表情分析アプリのUIが表示されます。いくつか画像を投げてみましょう。

 まず、驚いている少年の画像を入力します。正しく、Surpriseの値が高くなっていますね。

result3.png

 次に、微妙な表情の女性の画像を入力します。AngerとSadnessの値が少し出力され、それらしい結果ですね。

result4.png

 最後に、女性の画像を入力してみます。Hapinessの値が高くなっていますね。
result5.png

最後に

 少しだけHTMLタグや値の代入というプログラミングらしいことを行いましたが、ほぼコーディングレスで表情分析を開発できました。処理ノードを繋ぎ、プロパティを設定するだけですので、開発に要した時間は30分程と短時間です。コーディングを行わないことで、バグの作りこみも起きないため、デバッグに費やす時間も少なくなるという利点もあります。本記事を読まれた方は、ぜひNode-REDのコーディングレス開発環境を用いて、人工知能APIの活用アイデアを膨らませましょう。

※ちなみにJavaScriptでコーディングを行う元ネタの記事は、こちらです。動作を把握でき、勉強になります。

ソースコード

 ソースコードは以下の通りです。Node-REDは、開発環境の右上メニュー->Import->Clipboardからソースコードを貼り付けることができます。

[{"id":"2b0b4af7.030a86","type":"Emotion","z":"e1a6668b.1360a8","name":"","x":120,"y":160,"wires":[["20bb0279.589c4e","94301e7e.4ef91","d4972449.ad4538","d1a02d21.60583","caaf69fa.217418"]]},{"id":"f339e7e.2317118","type":"ui_form","z":"e1a6668b.1360a8","name":"","label":"","group":"306a052e.371b7a","order":1,"width":"8","height":"1","options":[{"label":"Image URL","value":"url","type":"text","required":true}],"formValue":{"url":""},"payload":"","topic":"","x":70,"y":80,"wires":[["495914cb.7463bc"]]},{"id":"ae3bd064.f09d2","type":"ui_template","z":"e1a6668b.1360a8","group":"306a052e.371b7a","name":"","order":2,"width":"8","height":"6","format":"<img src='{{msg.payload}}'>","storeOutMessages":true,"fwdInMessages":true,"x":520,"y":80,"wires":[[]]},{"id":"b524046a.951318","type":"ui_gauge","z":"e1a6668b.1360a8","name":"","group":"84a872a5.250bc","order":0,"width":"5","height":"5","gtype":"gage","title":"Anger","label":"units","format":"{{value}}","min":0,"max":"1","colors":["#00b500","#e6e600","#ca3838"],"x":630,"y":140,"wires":[]},{"id":"495914cb.7463bc","type":"change","z":"e1a6668b.1360a8","name":"msg.payload=msg.payload.url","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.url","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":270,"y":80,"wires":[["2b0b4af7.030a86","ae3bd064.f09d2"]]},{"id":"20bb0279.589c4e","type":"debug","z":"e1a6668b.1360a8","name":"","active":true,"console":"false","complete":"false","x":130,"y":260,"wires":[]},{"id":"94301e7e.4ef91","type":"change","z":"e1a6668b.1360a8","name":"msg.payload=msg.payload.anger;","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.anger","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":140,"wires":[["b524046a.951318"]]},{"id":"d4972449.ad4538","type":"change","z":"e1a6668b.1360a8","name":"msg.payload=msg.payload.happiness;","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.happiness","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":180,"wires":[["c6ab3107.d486f"]]},{"id":"d1a02d21.60583","type":"change","z":"e1a6668b.1360a8","name":"msg.payload=msg.payload.sadness;","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.sadness","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":220,"wires":[["e91ea108.ded87"]]},{"id":"caaf69fa.217418","type":"change","z":"e1a6668b.1360a8","name":"msg.payload=msg.payload.surprise;","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.surprise","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":260,"wires":[["20393119.5ee39e"]]},{"id":"c6ab3107.d486f","type":"ui_gauge","z":"e1a6668b.1360a8","name":"","group":"84a872a5.250bc","order":0,"width":"5","height":"5","gtype":"gage","title":"Happiness","label":"units","format":"{{value}}","min":0,"max":"1","colors":["#00b500","#e6e600","#ca3838"],"x":630,"y":180,"wires":[]},{"id":"e91ea108.ded87","type":"ui_gauge","z":"e1a6668b.1360a8","name":"","group":"84a872a5.250bc","order":0,"width":"5","height":"5","gtype":"gage","title":"Sadness","label":"units","format":"{{value}}","min":0,"max":"1","colors":["#00b500","#e6e600","#ca3838"],"x":630,"y":220,"wires":[]},{"id":"20393119.5ee39e","type":"ui_gauge","z":"e1a6668b.1360a8","name":"","group":"84a872a5.250bc","order":0,"width":"5","height":"5","gtype":"gage","title":"Surprise","label":"units","format":"{{value}}","min":0,"max":"1","colors":["#00b500","#e6e600","#ca3838"],"x":630,"y":260,"wires":[]},{"id":"306a052e.371b7a","type":"ui_group","z":"","name":"Input","tab":"ab6adbfc.129b88","disp":true,"width":"8"},{"id":"84a872a5.250bc","type":"ui_group","z":"","name":"Results","tab":"ab6adbfc.129b88","disp":true,"width":"10"},{"id":"ab6adbfc.129b88","type":"ui_tab","z":"","name":"Emotion API Demo","icon":"dashboard"}]

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした