Watson（わとそん）シリーズ第２弾。ツィッターのボットを作ろう。

沖縄の梅雨ってどこいったんでしょうか、、、(笑)
それはともかく、前回の記事の内容が好評だったらしく、、、。
身近になった人工知能アプリ。Watson（わとそん）とは？おすすめスポットを自動回答させてみた。
今回は第２弾。「わとそん」を使って、ツィートされた画像に
どんなものが写っているかを認識して反応を返すロボット（Bot）を
作成したいと、、、思います！

ツイッターロボットを作るのに必要なもの

・IBM クラウドのアカウント

今回利用するwatsonのvisual recognitionはIBM クラウドで提供されているので
まずはIBMのアカウントを登録します。

https://console.bluemix.net/registration/

上のURLからアカウントを作成しましょう。
ページにあるメールアドレス、名前、地域、パスワードの入力欄を埋めて
ページ下のアカウント作成のボタンを押下します。

・twitterのアカウント登録

　https://console.bluemix.net/registration/

上のURLからアカウントが作成可能ですので
事前に登録しておいてください。

アカウントが取得できたら早速作成を開始していきます。
今回の手順は次の通りです。

手順

IBM クラウドからVisual Recognizednitionのインスタンスを作成
curlでVisual Recognizednitionの動作確認
IBM CloudからNode-REDのインスタンス作成
Node-REDからVisual Recognizednitionの動作確認
twitterとの連携の前に必要な準備
twitterアカウントとの連携
最終的な動作確認

1.IBM CloudからVisual Recognitionのインスタンスを作成

それではまずは最初の手順です。

今回はツィートされた画像に写っているものを認識させます。
通常は複雑なアルゴリズムや処理を自ら考え、学習させて検証
していく必要があるのですが、WATSONは標準
でこんな物が、、、。

Visual Recognition（ビジュアルレカグニィシャン）

という画像認識の機能を利用することができ、加えて学習済みの
イメージ分類のモデルを利用することができます。
今回はこの標準機能を利用してtwitterのbotを作成していきます。
Visual Recognizednitionの機能を利用するためには「インスタンス」
と呼ばれるものを作成する必要があります。
インスタンスについて詳しく知りたい方は当スクールへぜひお越しください(笑)
現時点では細かい言葉は気にしなくても大丈夫です。
「Visual Recognizetionを使えるようにする」という感覚でOKです。
では、その方法です。

1-1.IBM CloudのカタログからVisual Recognitionを選択します。　

1-2.ライトプランが選択されていることを確認して「作成」を選択します。

1-3,次の画面で資格情報表示されれば作成完了です。
　Visual RecognizednitionのAPIを使用する際に資格情報が必要になりますので
　メモを取っておきましょう。
　

2.curlでVisual Recognizednitionの動作確認

手順1でインスタンスの作成が完了したので、次に動作確認を行います。
動作にはcurlというコマンドラインツールを利用します。
macOSの場合は標準でターミナルから実行することができます。
windowsの場合はCygwinやUbuntuを利用してCurlを用意してください。

2-1,解析する画像を用意する
watsonがリファレンスで画像を用意しているので、今回はそれを利用しましょう。
リンク先(https://watson-developer-cloud.github.io/doc-tutorial-downloads/visual-recognition/fruitbowl.jpg)

2-2.Visual Recognizednition接続用トークンを取得する。
watsonを利用する場合、解析用のURLにリクエストを送ります。
わかりにくいと思うので言い換えると、「この画像を解析してくれ！」
とwatsonのVisual Recognizednitionにお願いすることです。
ただ、リクエストを遅れるのはインスタンスを作成した人に限定したいため、
接続ができるユーザーであることを証明する「トークン」というものが必要
になります。それではcurlを用いてトークンを取得します。

$ curl -k -X POST \
   --header "Content-Type: application/x-www-form-urlencoded" \
   --header "Accept: application/json" \
   --data-urlencode "grant_type=urn:ibm:params:oauth:grant-type:apikey" \
   --data-urlencode "apikey=<資格情報のAPIキーを入力>" \
   "https://iam.bluemix.net/identity/token"

$ curl -k -X POST \

--header "Content-Type: application/x-www-form-urlencoded" \

--header "Accept: application/json" \

--data-urlencode "grant_type=urn:ibm:params:oauth:grant-type:apikey" \

--data-urlencode "apikey=<資格情報のAPIキーを入力>" \

"https://iam.bluemix.net/identity/token"

上のコマンドを実行すると次の結果が返ってきます。
access_tokenを実際のリクエストに追加して
Visual Recognizednitionを実行します。

2-3.Visual Recognizednitionへ解析リクエストを送る
では、解析を行いましょう。解析を行う場合は次のコマンドを利用します。

$ curl -X POST --header "Authorization: Bearer <アクセストークン>"   --header "Accept-Language: ja" -F "images_file=@fruitbowl.jpg"  "https://gateway.watsonplatform.net/visual-recognition/api/v3/classify?version=2018-03-19"

1	$ curl -X POST --header "Authorization: Bearer <アクセストークン>" --header "Accept-Language: ja" -F "images_file=@fruitbowl.jpg" "https://gateway.watsonplatform.net/visual-recognition/api/v3/classify?version=2018-03-19"

実行結果
バナナとか果物とか結果が返ってきてればOKです。
上のコマンドでは自分のPCにある画像を指定していますが、
画像のURLを指定して解析することも可能です。

$ curl -X POST --header "Authorization: Bearer <アクセストークン>"   --header "Accept-Language: ja" "https://gateway.watsonplatform.net/visual-recognition/api/v3/classify?version=2018-03-19&url=https://watson-developer-cloud.github.io/doc-tutorial-downloads/visual-recognition/fruitbowl.jpg"

1	$ curl -X POST --header "Authorization: Bearer <アクセストークン>" --header "Accept-Language: ja" "https://gateway.watsonplatform.net/visual-recognition/api/v3/classify?version=2018-03-19&url=https://watson-developer-cloud.github.io/doc-tutorial-downloads/visual-recognition/fruitbowl.jpg"

3IBM CloudからNode-REDのインスタンス作成

ツイッターとwatsonを繋げるにあたり、IBMCloudのNodeRed
を利用します。
Node-Redは、SNSや外部のAPI&IoT関連のサービスを繋いでくれるサービスです。
特徴としてコードを書かなくてもプログラミングができるツールです。
Node-Redではフローと呼ばれるデータの流れを作成することでサービスを
作ることができます。
ちなみにIBMのCloudだけで提供されているものではなく、
オープンソースなので、windowsやmac、linuxでも
Node-Redをインストールすることが可能です。IBM Cloudでは
Visual Recognizednitionのインスタンス作成と同様にカタログから
Node-REDのインスタンスを作成することが可能です。

1.カタログからNode-REDを選択します。

2.ライトプランが選択されていることを確認して「作成」を選択します。

3,次の画面が表示されれば作成完了です。

3-2.Node-REDからVisual Recognizednitionの動作確認
左側のノード一覧からVisual Recognizednitionのノードを取り出します。

ダブルクリックしてVisual RecognizednitionのAPIとServiceEndpointを設定します。
Curlでの動作確認で少し説明しましたが、Visual Recognizednitionはインプットとして
画像のURLを取ることができたので、入力に利用することができるinjectノードに画像のURLを設定し、
Visual Recognizednitionに繋ぎます。
injectの中身は次のようになります。

　次に出力を確認するためdebugノードとVisual Recognizednitionを繋ぎます。

ここまでできたら右上の「デプロイ」ボタンを押してinjectノードの
左にある四角のボタンを押します。デバッグウィンドウに解析結果が
表示されることを確認しましょう。

4.twitterとの連携のための準備　

twitterとの連携の前にVisual Recognizednitionからのデータを整理しましょう。
先ほどの確認からも分かる通り、Visual Recognizednitionから返される
データは人間には見づらいです。
そしてtwitterには文字数制限があるため、そのまま結果を表示するわけには
いきません。
そこで、Visual Recognizednitionから返されたデータを整形します。
必要なデータは「msg.result.images[0].classifiers[0].classes」に格納されています。
今回の場合は8つの候補があります。スコアが高い方がより確信のある回答となるので、
スコアが上位のものを表示するようにします。

関数は関数ノード(function)に入力する必要があります。
そして作成した関数の内容は次の通りです。

var result = [];
console.log(msg);
var ay=msg.result.images[0].classifiers[0].classes;

ay.some(function(element,index){

  if(result.length !== 0){
    
     if(result[result.length-1].score < element.score){
　　　　　　　　　　　　　　　　result.unshift(element);
     }
　　　　　　　　
  }else{
    result.push(element);
  }
});
result.splice(3);
resultString = "多分"+result[0].class+"か"+result[1].class+"か"+result[2].class;
msg.payload = resultString;


return msg;

var result = [];

console.log(msg);

var ay=msg.result.images[0].classifiers[0].classes;

ay.some(function(element,index){

if(result.length !== 0){

if(result[result.length-1].score < element.score){

　　　　　　　　　　　　　　　　result.unshift(element);

}

}else{

result.push(element);

}

});

result.splice(3);

resultString = "多分"+result[0].class+"か"+result[1].class+"か"+result[2].class;

msg.payload = resultString;

return msg;

難しく見えるかもしれませんがmsg.result.images[0].classifiers[0]に格納された候補のスコアを比較して
TOP3までを残し、文字列として結合しているだけです。
この結合した文字列をtwitterに書き出すようにします。

５Visual Recognizednitionとtwitterアカウントとの連携

必要なものは揃ったので結合していきましょう。

5-1.twitterアカウントの認証
twitterのノードを取り出します。アカウント認証画面が表示されるのでアカウントを認証します。

5-2twitterとVisual Recognizednitionの結合
いよいよtwitterとisual Recognizednitionを結合します。tweetに投稿された画像のURLはNode-Red上でmsg.tweet.entities.media[0].media_urlに格納されます。
Visual Recognizednitionはmsg.payloadを入力とするためchangeブロックを使ってmsg.payloadmsg.tweet.entities.media[0].media_urlを代入します。

これでVisual Recognizednitionを動作させることができますが、tweet自体に画像がないケースもあるため
その場合は処理を行わないようにする必要があります。

この問題への対策として、switchノードを利用して、msg.tweet.entities.media[0].media_urlがある場合のみ
次の処理にデータを送るようにします。この処理にはswitchノードを利用します。
msg.tweet.entities.media[0].media_urlがnull(空)出ない場合に次のノードにデータを送るようにします。
実際のswitchノードは次のようになります。
最終的なノード

それではbotとして作成したtwitterアカウントに対して画像をtweetしてみましょう。botが画像に写っているものをtweetすれば成功です。
今回はデフォルトのモデルを利用しましたが独自のモデルも作成することも可能です。
ドラえもんとコロ助とうもえもんの分類とか面白そうですね。
気軽に使えるのでぜひ遊んでみてください。