Watson TJBotをつくりました【５】写真を撮って内容を分析

PDF資料はこちらからどうぞ。
http://seahorse-inc.com/QIITA/TJBot-5/VisualTJ全手順_20170724.pdf
# 1.   はじめに
<font color="blue"><strong>TJBot</strong></font>は声を文字、文字を声にしたり、話しかけられた意図(意味)を理解してお話したり、色々な情報から欲しい情報を探してくれるといった、「IBM WatsonコグニティブAPI」をこれからやってみようという人にはうってつけのキットです。

厚紙や3Dプリンターでホディを作り、小さく低価格のコンピュータ(Raspberry PI)で頭脳を組み込みます。手を振ったり、LEDの色を変えたり、話しかけると答えてくれます。
機能的にはシンプルですが、反応してくれるとワクワクして楽しく、ボディは簡単に組み立てられるようになっています。

TJBotはすでに、色々な「IBM WatsonコグニティブAPI」を組み合わせた「レシピ」があります。

本投稿は、できあがっている「レシピ」を参考に、実際に作ってみた手順となっています。
使用するパーツなどの関係で、そのままの「レシピ」ではうまくいかないところや分からない点がありましたが、試行錯誤の末、ちゃんと動作することができました。
さらに、おまけとして日本語対応しました。
![00.png](http://seahorse-inc.com/QIITA/TJBot-5/00.png)
尚、厚紙でTJBotのボディ作成は割愛させていただきますが、下記URLを参考に作ってみてください。
https://www.youtube.com/watch?v=UEnuF--LA-0
https://www.instructables.com/id/Build-TJ-Bot-Out-of-Cardboard/

厚紙、３Dプリンター用の図面は下記URLです。
https://ibmtjbot.github.io/#gettj

ちなみに私は、A2サイズ２mmの厚紙にpdf印刷出力の図面を貼り、デザインナイフでカットしました。
デザインナイフでカットすると、かなり時間と労力を要しますので、レーザーカットをお勧めします。
レーザーカッターを時間制で使えるサービスもあるようです。

厚紙とRaspberry Pi、マイク、スピーカー、LED、モーターでTJBotを組み立て、Watson Cognitive APIを使って、色々なレシピが生まれています。
本投稿は、各レシピを実際に作成し、日本語化を行ってみた際の手順内容となっています。

# ２.  TJBotについて
TJBotは、IBM ResearchのMaryam Ashooriによって、認知対象の設計と実装におけるベストプラクティスを見つけるための実験として作成されました。
https://www.ibm.com/blogs/research/2016/11/calling-makers-meet-tj-bot/

TJBotは、楽しい方法でWatsonサービスを理解するために生まれた、オープンソースプロジェクトです。
https://ibmtjbot.github.io/


# ３.   今回作成するレシピ
Watson、「Text to Speech」「Visual Recognition」とRaspberry Pi、Bluetoothスピーカー、Node-Redを使って、撮った写真について話します。

使用させていただいたレシピのサイト情報：
https://github.com/samuelvogelmann/visualtj

# ４.  材料
価格は変わる可能性があります。
![01.png](http://seahorse-inc.com/QIITA/TJBot-5/01.png)
厚紙は、ミューズ　ＫＭＫケントボード　ＳＳ－Ａ２２ｍｍ厚を使いました。　


# ５.  H/Wセットアップ
Raspberry Pi用のOS Rasbianのインストールは割愛させていただきます。
http://qiita.com/Mitsu-Murakita/items/90907782b6aec9959328
の「3. Raspbian関連のインストール」などを参考にしてください。

## ５-１.   Bluetoothスピーカー
Anker SoundCore mini コンパクト Bluetoothスピーカーを使用しました。

<strong>・BluetoothパッケージPulseAudioパッケージをインストール</strong>

<strong>・PulseAudioをsystemdに登録</strong>
nanoを使ってpulseaudio.serviceに書込みます。

```Command:
$ sudo nano /etc/systemd/system/pulseaudio.service ⏎
```

![02.png](http://seahorse-inc.com/QIITA/TJBot-5/02.png)
![03.png](http://seahorse-inc.com/QIITA/TJBot-5/03.png)

<strong>・pulseaudio-bluetooth.confファイルを作成します。</strong>
nanoを使って<font color="blue">pulseaudio-bluetooth.conf</font>に書込みます。

```Command:
$ sudo nano /etc/dbus-1/system.d/pulseaudio-bluetooth.conf ⏎
```
![04.png](http://seahorse-inc.com/QIITA/TJBot-5/04.png)
![05.png](http://seahorse-inc.com/QIITA/TJBot-5/05.png)

<strong>・system.paファイルを編集</strong>

```Command:
$ sudo nano /etc/pulse/system.pa ⏎
```
![06.png](http://seahorse-inc.com/QIITA/TJBot-5/06.png)
![07.png](http://seahorse-inc.com/QIITA/TJBot-5/07.png)

<strong>・pulseaudioサービスを起動</strong>

```Command:
$ sudo systemctl start pulseaudio.service ⏎
```

<strong>・pulseaudioサービスを自動起動するよう設定</strong>

```Command:
$ sudo systemctl enable pulseaudio.service ⏎
```

<strong>・root、piユーザがPulseAudioで音を出せるようにします</strong>

```Command:
$ sudo gpasswd -a root pulse-access ⏎
$ sudo gpasswd -a pi pulse-access ⏎
```
![08.png](http://seahorse-inc.com/QIITA/TJBot-5/08.png)

ここまででPulseAudo関連の設定が完了しましたので、次にbluetoothctlでBluetoothデバイスを接続します。

スピーカーの電源をオン。

```Command:
$ sudo bluetoothctl ⏎
```

```Command:
[bluetooth]# power on ⏎
```

デバイスをスキャンし、スピーカーを探します。

```Command:
[bluetooth]# scan on ⏎
```
Blutoothスピーカーが見つかったら、スキャンを停止します。

```Command:
[bluetooth]# scan off ⏎
```

![09.png](http://seahorse-inc.com/QIITA/TJBot-5/09.png)

[NEW] Device 00:E0:4C:58:6C:EC SoundCore mini
でBlutoothスピーカーのデバイス情報が入手できました。

```Command:
[bluetooth]# trust 00:E0:4C:58:6C:EC ⏎
[bluetooth]# pair 00:E0:4C:58:6C:EC ⏎
[bluetooth]# connect 00:E0:4C:58:6C:EC ⏎
```
<font color="orange">「ピロリン」</font>という音が鳴ると、接続完了です。

```Command:
[bluetooth]# exit  ⏎
```
で<font color="blue">bluetoothctl</font>から抜けます。

<strong>・なかなか接続できない場合</strong>
https://raspberrypi.stackexchange.com/questions/44497/having-an-issue-with-bluetooth-manager-pairing-on-the-pi

Syslogを確認します。

```Command:
$ cat /var/log/syslog  ⏎
```

<font color="red">“bluetoothd[794]: a2dp-sink profile connect failed for 00:E0:4C:58:6C:EC: Protocol not available”</font>というエラーの場合下記手順を試してください。

(1) PulseAudio Bluetooth ライブラリーがインストールされているか確認

```Command:
$ sudo apt-get install pulseaudio-module-bluetooth ⏎
```

(2) Pulse Audio serverが稼働しているか確認
まず停止します。

```Command:
$ sudo killall pulseaudio ⏎
```
起動します。

```Command:
$ pulseaudio --start ⏎
```

(3)bluetoothctlでconnectします。

```Command:
[bluetooth]# connect 00:E0:4C:58:6C:EC ⏎
```

それでもだめだったら、スピーカのモード切替を行う。


## ５-２.   カメラ
サインスマート　Raspberry Pi　用　カメラモジュール Camera Module　for ラズベリーパイを使用しました。
![10.png](http://seahorse-inc.com/QIITA/TJBot-5/10.png)

カメラが使えるように、Raspberry Piを設定します。

```Command:
$ sudo raspi-config ⏎
```

<font color="blue">「5 Interfacing Options」</font>選択
![11.png](http://seahorse-inc.com/QIITA/TJBot-5/11.png)

<font color="blue">「P1 Camera」</font>選択
![12.png](http://seahorse-inc.com/QIITA/TJBot-5/12.png)

<font color="blue">「はい」</font>選択
![13.png](http://seahorse-inc.com/QIITA/TJBot-5/13.png)

<font color="blue">「了解」</font>選択
![14.png](http://seahorse-inc.com/QIITA/TJBot-5/14.png)

<font color="blue">「Finish」</font>選択
![15.png](http://seahorse-inc.com/QIITA/TJBot-5/15.png)


# ６.  Watson「Text to Speech」、「Visual Recognition」サービスの作成
Bluemixにログイン
https://console.bluemix.net/
![16.png](http://seahorse-inc.com/QIITA/TJBot-5/16.png)
![17.png](http://seahorse-inc.com/QIITA/TJBot-5/17.png)
![18.png](http://seahorse-inc.com/QIITA/TJBot-5/18.png)

<strong>（１）カタログより<font color="blue">「Text to Speech」</font>を選択</strong>
![19.png](http://seahorse-inc.com/QIITA/TJBot-5/19.png)

<font color="blue">「作成」</font>をクリック
![20.png](http://seahorse-inc.com/QIITA/TJBot-5/20.png)

<font color="blue">「サービス資格情報」</font>をクリック
![21.png](http://seahorse-inc.com/QIITA/TJBot-5/21.png)

<font color="blue">「資格情報の表示」</font>をクリック
![22.png](http://seahorse-inc.com/QIITA/TJBot-5/22.png)

<font color="red">「username」「password」を後程使用しますので、メモ帳などにコピー保存してください。</font>
![23.png](http://seahorse-inc.com/QIITA/TJBot-5/23.png)
![24.png](http://seahorse-inc.com/QIITA/TJBot-5/24.png)

<strong>（２）カタログより<font color="blue">「Visual Recognition」</font>を選択</strong>
![25.png](http://seahorse-inc.com/QIITA/TJBot-5/25.png)

<font color="blue">「作成」</font>をクリック
![26.png](http://seahorse-inc.com/QIITA/TJBot-5/26.png)

<font color="blue">「サービス資格情報」</font>をクリック
![27.png](http://seahorse-inc.com/QIITA/TJBot-5/27.png)

<font color="blue">「資格情報の表示」</font>をクリック
![28.png](http://seahorse-inc.com/QIITA/TJBot-5/28.png)

<font color="red">「api_key」を後程使用しますので、メモ帳などにコピー保存してください。</font>
![29.png](http://seahorse-inc.com/QIITA/TJBot-5/29.png)
![30.png](http://seahorse-inc.com/QIITA/TJBot-5/30.png)


# ７.  Rasbianの最新化とNode.js、Node-Redのインストール
TeratermなどでSSH接続します。ID、パスワードの初期値は、
　　<font color="blue">ID:pi
　　Password: raspberry</font> です。
![31.png](http://seahorse-inc.com/QIITA/TJBot-5/31.png)

以下のコマンドを実行してください。

```Command:
$ sudo apt-get update ⏎
$ sudo apt-get dist-upgrade ⏎
$ curl sL https://deb.nodesource.com/setup_6.x | sudo -E bash - ⏎ 
$ sudo apt-get install -y nodejs ⏎
$ sudo npm install -g node-red ⏎
```

一度Node-Redを起動してから停止します。

```Command:
$ node-red ⏎
```
<font color="blue">Ctl</font> + <font color="blue">c</font> で停止します。

<strong>Watson Node-Redサービスをインストールします。</strong>

```Command:
$ cd ~/.node-red ⏎
$ npm install node-red-node-watson ⏎
```

<strong>Node-Redを起動します。</strong>
$ node-red

```Command:
$ node-red ⏎
```

![32.png](http://seahorse-inc.com/QIITA/TJBot-5/32.png)
終了するのは、<font color="blue">Ctl</font>+<font color="blue">c</font>です。

<font color="blue">ブラウザー</font>を使って、　<font color="blue">IPアドレス:1880</font> でアクセスします。
Watsonノードも登録されています。

![33.png](http://seahorse-inc.com/QIITA/TJBot-5/33.png)


# ８.  コードのダウンロードとインストール

```Command:
$ git clone https://github.com/samuelvogelmann/visualtj.git ⏎
$ cd ~/visualtj ⏎
```

![34.png](http://seahorse-inc.com/QIITA/TJBot-5/34.png)
<font color="blue">「flow.json」</font>がダウンロードしたNode-Redのコードです。


# ９.  ダウンロードしたコードをNode-Redへインポート
インポートは<font color="blue">クリップボード</font>を使用します。
<font color="blue">Winscp</font>などを使って、<font color="blue">「flow.json」</font>をクライアントPCへ転送します。

<font color="blue">Wordpad</font>で<font color="blue">「flow.json」</font>を開き、<font color="blue">Ctl+a</font> ⇒<font color="blue">Ctl+c</font>
![35.png](http://seahorse-inc.com/QIITA/TJBot-5/35.png)> でクリップボードへコピーします。

<strong>Raspberry側でNode-Redが停止している場合、Node-Red起動しておきます。</strong>

```Command:
$ node-red ⏎
```

![36.png](http://seahorse-inc.com/QIITA/TJBot-5/36.png)

クライアントPC側のブラウザでNode-Redにアクセス。
http://RaspberryPIのIPアドレス:1880

右上の![37.png](http://seahorse-inc.com/QIITA/TJBot-5/37.png)
<font color="blue">「ハンバーガーメニュー」</font>⇒<font color="blue">「読み込み」</font>⇒<font color="blue">「クリップボード」</font>
![38.png](http://seahorse-inc.com/QIITA/TJBot-5/38.png)

貼り付けて、<font color="blue">「読み込み」</font>
![39.png](http://seahorse-inc.com/QIITA/TJBot-5/39.png)

<font color="blue">「VisualTJ Recipe」</font>が読み込まれました。
![40.png](http://seahorse-inc.com/QIITA/TJBot-5/40.png)



# １０.  「Text to Speech」、「Visual Recognition」、構成情報の設定
<strong>（１）「Text to Speech」</strong>
<font color="blue">「Text to Speech」</font>ノード（緑色）をダブルクリック
![41.png](http://seahorse-inc.com/QIITA/TJBot-5/41.png)

<font color="blue">「username」「password」</font>を入力後、<font color="blue">「完了」</font>ボタンを押す。
![42.png](http://seahorse-inc.com/QIITA/TJBot-5/42.png)


<strong>（２）「Visual Recognition」</strong>
<font color="blue">「Text to Speech」</font>ノード（紫色）をダブルクリック
![43.png](http://seahorse-inc.com/QIITA/TJBot-5/43.png)

<font color="blue">「API Key」</font>を入力後、<font color="blue">「完了」</font>ボタンを押す。
![44.png](http://seahorse-inc.com/QIITA/TJBot-5/44.png)

![45.png](http://seahorse-inc.com/QIITA/TJBot-5/45.png)


# １１.  写真イメージが表示されないときに、修正する箇所
Node-Redが実行されている、Raspberryのブラウザーでプログラムを実行するには問題ないですが、別のPCのブラウザーで実行すると撮影した写真イメージが表示されません。
これは、イメージの保存場所指定の<font color="red">URLがlocalhost</font>になっているためです。
ここでは、Raspberryの<font color="red">IPアドレスを「192.169.1.20」</font>としてプログラムを修正します。

<strong>「JavaScript」ノードの修正。</strong>
![46.png](http://seahorse-inc.com/QIITA/TJBot-5/46.png) をダブルクリック
![47.png](http://seahorse-inc.com/QIITA/TJBot-5/47.png)
<strong>15行目</strong>の<font color="blue">「localhost」</font>を<font color="blue">「192.168.1.20」</font>に変更します。
var image = "\<img src='http://localhost:1880/getimage?"+ new Date().getTime() + "' alt='Picture' width='480px'/\>";
<font color="blue">⇒</font>
var image = "\<img src='http://192.168.1.20:1880/getimage?"+ new Date().getTime() + "' alt='Picture' width='480px'/\>";

<font color="blue">「完了」</font>ボタンを押す。


# １２.  プログラムの実行
<font color="orange">Node-Redが起動していない場合は、「$ node-red」 で起動しておきます。</font>
![48.png](http://seahorse-inc.com/QIITA/TJBot-5/48.png)

<strong>PCのブラウザーからアクセス</strong>
http://192.168.1.20:1880/visualtj
ここでは、RasberryのIPアドレスを「192.168.1.20」としました。
![49.png](http://seahorse-inc.com/QIITA/TJBot-5/49.png)

<font color="blue">「Take a Picture」</font>ボタンをクリックして、写真を撮ります。
![50.png](http://seahorse-inc.com/QIITA/TJBot-5/50.png)

<font color="blue">「Analyze it」</font>ボタンをクリック、撮影した写真イメージが何かを分析します。
![51.png](http://seahorse-inc.com/QIITA/TJBot-5/51.png)
分析結果を表示と音声で答えます。



# １３.  日本語対応に変更
<strong>（１）「WebApp」ノード</strong>
![52.png](http://seahorse-inc.com/QIITA/TJBot-5/52.png)
<strong>・14行目</strong>
\<p>\<b>Hi my name is TJBot! I'm an open source project designed to help you access IBM Watson Services.\</b>\</p>
<font color="blue">⇒</font>
<font color="red">\<p>\<b>ハーイ！TJBotです。私はIBM Watson Servicesへのアクセスを支援するように設計されたオープンソース・プロジェクトです。\</b>\</p></font>

<strong>・15行目</strong>
![71.png](http://seahorse-inc.com/QIITA/TJBot-5/71.png)

<strong>・19行目</strong>
\<div id="divbutton"\>\<button type="button" onclick='takepic("take picture");'>Take a Picture\</button>\</div>
<font color="blue">⇒</font>
<font color="red">\<div id="divbutton"\>\<button type="button" onclick='takepic("take picture");'>写真を撮る\</button>\</div></font>

<strong>・20行目</strong>
\<div id="divbutton">\<button type="button" onclick='analyze("analyze picture");'>Analyze it\</button>\</div>
<font color="blue">⇒</font>
<font color="red">\<div id="divbutton">\<button type="button" onclick='analyze("analyze picture");'>写真を分析\</button>\</div></font>


<strong>（２）「Picture status」ノード</strong>
![53.png](http://seahorse-inc.com/QIITA/TJBot-5/53.png)
<strong>・1行目</strong>
\<p>\<b>I've taken this picture. Now you can analyze it!\</b>\</p>
<font color="blue">⇒</font>
<font color="red">\<p>\<b>写真を撮りました。分析できますよ！\</b>\</p></font>

<strong>（３）「Visual Recognition」ノード</strong>
![54.png](http://seahorse-inc.com/QIITA/TJBot-5/54.png)
<font color="blue">“Language”</font>を<font color="blue">「English」</font>から<font color="red">「Japanese」</font>へ変更

<strong>（４）「No result found」ノード</strong>
![55.png](http://seahorse-inc.com/QIITA/TJBot-5/55.png)
\<p>\<b>I don't know what this is!\</b>\</p>
<font color="blue">⇒</font>
<font color="red">\<p>\<b>なんだか？わかりません！\</b>\</p></font>

<strong>（５）「Convert class to payload」ノード</strong>
<strong>・１行目</strong>
msg.payload="This is a "+msg.class; 
<font color="blue">⇒</font>
msg.payload=<font color="red">"これは"</font>+msg.class; 
![56.png](http://seahorse-inc.com/QIITA/TJBot-5/56.png)

<strong>（６）「Text to Speech」ノード</strong>
![57.png](http://seahorse-inc.com/QIITA/TJBot-5/57.png)
<font color="blue">“Language”</font> を<font color="blue">「US English」</font>から<font color="red">「Japanese」</font>へ変更
<font color="blue">“Voice”</font>を<font color="blue">「Michaei」</font>から<font color="red">「Emi」</font>へ変更
![58.png](http://seahorse-inc.com/QIITA/TJBot-5/58.png)


# １４.  日本語対応版プログラムの実行
Node-Redが起動している状態で、PCのブラウザから
http://192.168.1.20:1880/visualtj
にアクセスします。

<font color="blue">「写真を撮る」</font>をクリック
![59.png](http://seahorse-inc.com/QIITA/TJBot-5/59.png)

<font color="blue">「写真を分析」</font>をクリック
![60.png](http://seahorse-inc.com/QIITA/TJBot-5/60.png)

![61.png](http://seahorse-inc.com/QIITA/TJBot-5/61.png)
分析結果を日本語表示と音声で答えます。