【IBM×CodeCamp】Watsonを題材にアプリを作ろう! 実施レポート



【IBM×CodeCamp】Watsonを題材にアプリを作ろう! 実施レポート
目次
  1. コグニティブとは
  2. 概要
  3. ノード解説
  4. 全体フロー概要
  5. 1.BluemixでNode-REDサービス、WatsonのAPIを設定する
  6. 1-1.Node-RED/WatsonAPIの準備
  7. 2.AlchemyAPIを追加する
  8. 2-1.AlchemyAPI
  9. 3.Node-REDでプログラミング
  10. 3-1.HTTPInputnode
  11. 3-2.switchnode
  12. 3-3templatenode(初期画面)
  13. 3-4.changenode
  14. 3-5.ImageAnalysis
  15. 3-6.templatenode(結果)
  16. 3-7.フローをつなげる
  17. 4.動作確認
  18. 参加者の声
  19. おわりにBluemixAPI

2016年6月1日(水)コードキャンプにて人気のコグニティブ・コンピューティングWatsonを使ったアプリの特別講義イベントが開催されました!

今回は特別講師としてIBMの方にお越しいただき、IBMBluemixを使ったアプリ手法や、RESTAPIの基礎をハンズオンで解説いただきました。

コグニティブとは

直訳すると「認知、認識の(できる)」ということですが、経験を通じてシステムが学習し、相関関係を見つけては仮説を立て、記憶し、成果からまた学習していくというように、まさに人間の脳のように考えるシステムのことです。

(参考リンク:コグニティブとは何か?IBMの目指すテクノロジーのこれからが分かる本『スマートマシンがやってくる』

codecamp (1)

IBMのWatsonは、自然言語処理と機械学習を使用して、大量の非構造化データから洞察を明らかにするテクノロジー・プラットフォームです。イベントではAPIを用いて画像認証アプリを作成しました。IBMBluemixを使えば数時間で嵐やももクロの顔が判別できるアプリが作れちゃいます!

エントリー者も当日参加者も2030代が8割と多く、若い世代に注目をされています!

概要

IBMWatsonのサービスの一つであるAlchemyAPIを呼びだす簡単なサンプルです。

Node-REDを使って簡単に呼び出しているのが特徴です。

プログラミングが初めて、あるいは始めたばかりの方にもわかりやすいように解説させていただきます。

ノード解説

AlchemyImageAnalysisnode

IBMがBluemixは様々なコグニティブAPIを提供しています。その中でもAlchemyの画像認識サービスであるNode-RED___mz-nodered-z002_eu-gb_mybluemix_net

全体フロー概要

画像のURL(例:”http://xxxxx.jpg”)をImageAnalysisのAPIにかけると画像解析を行い、顔認識の結果を返してくれるサンプルアプリです。

Node-RED_Image_Analysis_all

1.BluemixでNode-REDサービス、WatsonのAPIを設定する

1-1.Node-RED/WatsonAPIの準備

を参考にHelloWorldをNode-REDで実施します。こちら

2.AlchemyAPIを追加する

さて、Node-REDのノードに画像認識のためのImageAnalysisがあるのですが、このままでは使えません。このNode-REDのアプリケーションにAlchemyAPIを追加してあげる必要があります。

2-1.AlchemyAPI

Bluemixのメニュー画面からダッシュボードをクリックし、先ほどのNode-REDのアプリケーションをクリックしてください。

dashboard

続いて、サービスのまたはAPIの追加をクリックしてください。

serviceapi

次の画面で現れるAPIの一覧からAlchemyAPIをクリックすればOKです!

alchemyclick

その後、再ステージング(再起動)のポップアップ画面が表示されるので、再ステージングし正常に再起動すればOKです!

3.Node-REDでプログラミング

3-1.HTTPInputnode

AlchemyAPIはRESTのGETメソッドでアクセスして画像を解析します。

httpinput-node

をドラッグ&ドロップし、キャンバス内に配置します。プロパティー内のURL欄にアクセスポイントを記載します。ここでは/callwatsonとでもしておきます。

htttpinput-property

Nameの欄はノードの名前をわかりやすいようにしておくために記述しておきます。任意ですが、ここではHTTPInputにしておきます。

3-2.switchnode

画像のURLをチェックするノードを準備します。左側のリソースパレットのfunctionカテゴリ内のswitchノード

switch-node

をフローエディタ中央のキャンバスにドラッグ&ドロップします。

switch-property

3-3templatenode(初期画面)

画面のHTMLを表示したり、Inputとなる画像を送信するためのメニューを提供するためにHTMLを記述します。temlpalteノード

template-node

をフローエディタ中央のキャンバスにドラッグ&ドロップします。

WelcometotheAlchemyVisionFaceDetectionDemoonNode-RED

Selectanimage


CopyaboveimagelocationURLorenteranyimageURL:
ImageURL:

3-4.changenode

入力画面から画像URLを抽出するchangeノードを定義します。左側のリソースパレットのfunctionカテゴリ内のchangeノード

change-node

をフロー・エディタ中央のキャンバスにドラッグ&ドロップします。ここからpayload属性をimageurl属性に変換します。以下の通りにプロパティを設定します。

changenode-property

3-5.ImageAnalysis

画像解析のためのImageAnalysisノードを定義します。左側のリソースパレットのWatsonカテゴリ内のImageAnalysisノード

Node-RED___mz-nodered-z002_eu-gb_mybluemix_net

をフロー・エディタ中央のキャンバスにドラッグ&ドロップします。プロパティーでは顔認識を行うため、以下の通りにDetectをFaceに設定します。

imageanalysis-property

3-6.templatenode(結果)

WatsonのImageAnalysisから返ってきた結果を表示させるためのHTMLを記載します。temlpalteノード

template-node

をフローエディタ中央のキャンバスにドラッグ&ドロップします。

AlchemyImageAnalysis

Analyzedimage:{{payload}}

{{^result}}

NoFacedetected

{{/result}}AgeRangeScoreGenderScoreName{{#result}}{{age.ageRange}}{{age.score}}{{gender.gender}}{{gender.score}}{{#identity}}{{identity.name}}({{identity.score}}){{/identity}}{{/result}}

templateoutput-property

3-7.フローをつなげる

出来上がった客ノードをつなげて、右上のDepoyをクリックすれば完成です!エラーが出ていないことを確認してください。

deploy

4.動作確認

ブラウザのURL欄にhttp://xxxx.mybluemix.net/callwatsonをインプットして呼び出してみましょう。ImageURLの入力欄にWatsonに読ませたい画像URLを入れてみてください。

顔の認識や人物名が出てきます!さすがWatson!

guts

参加者の声

具体的な活用イメージがわいたので、今後もAPIを活用してアプリを作ってみたいと思った。…など様々な意見をいただきました!

おわりにBluemixAPI

CodeCamp

関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp