IBM Cloud Visual RecognitionとLINE Messaging APIを使って画像認識LINE BOTを作る

8460 ワード
Watson ibmcloud linebot Node.js Node.js テキストリンク

概要

IBM Cloud Visual RecognitionとLINE Messaging APIを使って画像認識LINE BOTを作ります。
こちらのリポジトリにコードと使い方があります。
またこちらから友達登録してもらえると使えるので、是非画像を送ってみてください。

イメージ

使うもの

IBM Cloud Visual Recognition

LINE Messaging API

Heroku

codenvy（開発環境がある方はなしで可能）

BOTの流れ

LINE BOTにメッセージがくる
↓
LINE Messaging APIのWebhook URLが呼ばれる（以下Herokuのnodeアプリ内での動き）
↓
Herokuにデプロイされたアプリが画像データを取得するためにLINE Messaging APIにリクエストを投げる
↓
LINE Messaging APIから画像のバイナリ（Buffer）が返ってくる
↓
IBM Cloud Visual Recognitionにバイナリと共に分類のリクエストを投げる
↓
レスポンスをLINE Messagin APIを通して返す

IBM Cloud Recognition API Key入手手順

  • IBM Cloudのアカウントを作成
  • こちらから価格プランでライトを選択して作成
  • 作成して移動した先でAPI 鍵をコピー
  • こちらで後から作ったサービス一覧が確認できます

はまったところ

LINE Developers API Referenceにある node.js のコードで、


const line = require('@line/bot-sdk');

const client = new line.Client({
  channelAccessToken: '<channel access token>'
});

client.getMessageContent('<messageId>')
  .then((stream) => {
    stream.on('data', (chunk) => {
      ...
    });
    stream.on('error', (err) => {
      // error handling
    });
  });

コンテンツを取得して chunk をそのまま送ると、

Invalid/corrupted image data. Supported image file formats are GIF, JPEG, PNG, and TIFF. 
Supported compression format is ZIP.","error_id":"input_error" ibm visual recognition

というエラーが出た。 chunk にreponseとbodyが一緒になっている？ここのやり方とかで分ける必要があるのかも（未検証）。

ここにあるこのコードを使って、bodyだけを送ることで解決。

app.post('/webhook', (req, res) => {
    if(req.body.events[0].message.type !== 'image') return;

    // 略

    Request(options, function(error, response, body) {
        if (!error && response.statusCode == 200) {
            // bodyをIBM Cloud Visual Recognitionに送る
        } else {
            // @todo handle error
        }
    });
});

ワークショップ

https://connpass.com/event/99191/ で行ったワークショップでは5人の方に参加いただき、全員がBOTを動かすところまで出来ました！
ワークショップの様子1、様子2。

参考

https://qiita.com/n0bisuke/items/17c795fea4c2b5571ce0
https://github.com/ippei0605/line-bot