MENU

PINE proの画像認識BOTをclarifaiに変更しました

2021-06-24

Build a Messenger with React Native and Firebase. Part 28

以前、Azure Computer Vision APIを使ってチャットボットに画像認識を実装しました。

Azureの無料枠を使い切ったのかなんなのかわかりませんがAPIが使えなくなりました。

img1

というわけでAzure Computer Visionの代わりにclarifaiを使って実装しました。

img2

clarifaiのAPI keyを用意する

1000リクエスト/月までは無料で使えるのでclarifaiにサインアップします。

サインアップしたらダッシュボード画面でCREATE APPLICATIONをクリックします。

img3

APP-IDを適当に設定して、DEFAULT LANGUAGEをJapaneseに変更してからCREATEをクリックします。

img4

ダッシュボードに戻るので、今作ったアプリをクリックします。

img5

API keyがすでに作られているのでコピーしておきます。

img6

clarifaiの準備はこれで完了です。

変更したコード

Cloud Visionを使ったときやComputer Visionを使ったときのように、Cloud Functionsを使って実装していきます。

Clarifai/clarifai-nodejs-grpcのreadmeからほぼコピペです。

まずはnode.js用のクライアントをインストールします。

npm install clarifai-nodejs-grpc

functions\index.js

const {ClarifaiStub, grpc} = require("clarifai-nodejs-grpc");

const stub = ClarifaiStub.grpc();

const metadata = new grpc.Metadata();
metadata.set("authorization", "Key YOUR_CLARIFAI_API_KEY");

YOUR_CLARIFAI_API_KEYのところをダッシュボードでコピーしたAPI keyに書き換えます。先頭のKey は必要です。

画像のURLを入れてリクエストを送るとこんな感じでレスポンスが返ってきます。

レスポンスをBOTの発言用に整形してFirestoreに保存する処理を追加していきます。

発言するBOTの情報を定義します。Computer Visionで使っていたものそのままです。

const us = {
  _id: 'GrB69PO5oyaTTXbRmLJYqcKGFzf2',
  email: 'pineproimagebot@pinepro.ml',
  avatar: 'https://firebasestorage.googleapis.com/v0/b/kenmochat.appspot.com/o/avatar%2FGrB69PO5oyaTTXbRmLJYqcKGFzf21622094941027?alt=media&token=b82d4765-e603-46eb-ad8e-c213e286e2b0',
  name: 'PINE pro image BOT',
};

以下がリクエストを送信して、レスポンスをFirestoreに保存している部分です。

stub.PostModelOutputs(
  {
    model_id: "aaa03c23b3724a16a56b629203edc62c",
    inputs: [{data: {image: {url: image}}}]
  },
  metadata,
  (err, response) => {
    if (err) {
      console.log("Error: " + err);
      return;
    }
    if (response.status.code !== 10000) {
      console.log("Received failed status: " + response.status.description + "\n" + response.status.details);
      return;
    }
    console.log("Predicted concepts, with confidence values:")
    const clarifaidata = response.outputs[0].data.concepts
    const labels = clarifaidata.map(label => label.name);
    const dStr = labels.join(' 、');
    const ti = new Date().getTime();
    if(clarifaidata) {
      const text = `あるいは ${dStr} かも`;
      messageRef
      .add({
        text,
        createdAt: ti,
        user: us
      });
    } else {
      const text = 'やっぱりわからん';
      messageRef
      .add({
        text,
        createdAt: ti,
        user: us
      });
    }
  }
);

まとめ

ラベルを羅列するだけなのであまり好みじゃない。

この記事を共有