画像解析アプリを10分で作ってみた

はじめに

自分で画像解析アプリを０から作るのは、初心者の私には不可能ですが、APIを使えば１０数行で画像解析技術をアプリに組込むことができました。今回は画像解析をAPIで実装するまでの流れを試してみました。本稿はそのメモです。

今回活用したMicrosoft Computer Vision APIで出来る事

アップロードした画像ファイル、画像URLから：
-画像の解析
-画像の説明
-サムネイル画像生成
-画像内の文字認識（OCR)

利用環境について

Rakuten RapidAPI は世界中のAPIを集めたプラットフォームの様です。ここには画像解析に関するAPIも数多くあり、その中でも同環境上でトップに表示されているMicrosoft Computer Vision APIを使ってみることにします。プラットフォームを利用して、ブラウザ内でテスト、テスト結果に問題が無ければ利用するプログラミング言語を選択してアプリに取り込むコード取得が簡単に出来ました。

APIテスト・事前準備にかかる時間

APIのテスト自体は所要時間、3分程・簡単な４ステップで分析結果が得られました。テストで呼び出したロジックを様々なプログラム言語に落としてくれる機能もあり、後続の処理では Python を使って動かしていますが、これ以外のプログラム言語も生成できました。そのため、別言語でアプリを作られている方は自身で利用する言語に置き換えて読んでいただければ良いかと思います。同環境のアカウント登録も3分程でできました。呼び出しロジックの追加実装も3分程でできると思います。

費用について

Rakuten RapidAPIへの登録は無料で、APIのテストも無料枠内で実施したため費用は一切発生しませんでした。

環境準備

まずはテスト前の準備

1. Rakuten RapidAPI でのアカウント作成。
   

2. アカウント作成後、ログインした状態でMicrosoft Computer Vision API にアクセス。

3. 料金プランについて。今回は費用が発生しない、無料枠でテストをするためBASICプランに登録しました。（月額 $0円、月に5000コールまで無料、月5000コールを超えると1コールあたり＄0.005）

4. クレジットカードの登録について
   料金プランタブでBASICプラン登録ボタンをクリックすると下記クレジットカード情報登録画面が表示されます。（無料のプランで費用が発生しない際も、テスト実施にはクレジットカードの登録が必要）
   
   入力後、CHECKOUTをクリックして保存。その後、表示される画面でプランへの登録ボタンのクリック。登録完了後、無料プランタブを確認すると下記の様に表示されます。
   

API の挙動を確認

1. まずはMicrosoft Computer VisionAPIページの左下に表示されているエンドポイントを確認して、テストしたいエンドポイントをクリック。はじめに、POST Describe Image(URL)を試してみたいと思います。画面中央の必須パラメータには既に、テスト用にURLがJSON形式で入力されているため、画面中央の青いテストボタンをクリックすると、テスト用URLの画像解析結果が画面右下のレスポンスボディに表示されます。
   

必須パラメータのURLを画像解析したいURLに変更してみましょう。赤線の"　"の間のアドレスを変更するだけです。今回は下記画像アドレスを上書きしました。
https://rakuten.today/wp-content/uploads/2019/01/curry_1500-759x500.jpg

2.画像アドレス変更後、必須パラメータの右上にある青いテストボタンをクリックします。

3.画面右下のレスポンスボディを確認、{...}をクリックして結果を展開します。"captions"を展開していくと"text":"Stephen Curry holding a basketball"と正しい解析結果が出ています。"tags"にも解析結果が表示されています。

アプリの実装

1. 呼び出しコード取得

下記画像中にあるコードスニペットクリック後、NodeJSの横にあるプルダウンをクリックすると選択可能言語が表示されるので、ご利用のプログラミング言語を選択。今回はPython(Unirest)を選択。

仮にPython(Unirest)を選択すると下記の様なコードが取得できます。（"X-RapidAPI-Key"は自動的に入力されます）

Python

response = unirest.post("https://microsoft-azure-microsoft-computer-vision-v1.p.rapidapi.com/describe",
  headers={
    "X-RapidAPI-Host": "microsoft-azure-microsoft-computer-vision-v1.p.rapidapi.com",
    "X-RapidAPI-Key": "<ご自身のキーが自動的に入力されます>",
    "Content-Type": "application/json"
  },
  params=("{\"url\":\"https://rakuten.today/wp-content/uploads/2019/01/curry_1500-759x500.jpg\"}")
)

2.SDK の取得

SDKをインストールをクリックすします

クリック後に表示されるポップアップに必要なコードが表示されます。

3.コードの実装

PythonでUnirestを使用するには、pipを使用してインストールします。

Shell

$ pip install unirest

インストール完了後は、Unirestを使用してリクエストを行うことができるようになります。

compv.py

import unirest

response = unirest.post("https://microsoft-azure-microsoft-computer-vision-v1.p.rapidapi.com/describe",
  headers={
    "X-RapidAPI-Host": "microsoft-azure-microsoft-computer-vision-v1.p.rapidapi.com",
    "X-RapidAPI-Key": "<ご自身のキーが自動的に入力されます>",
    "Content-Type": "application/json"
  },
  params=("{\"url\":\"https://rakuten.today/wp-content/uploads/2019/01/curry_1500-759x500.jpg\"}")
)

print 'HTTP Status Code: ' + str(response.code) # The HTTP status code
print 'Response Header: ' + str(response.headers) # The HTTP headers
print 'Response Body: ' + str(response.body) # The parsed response

4.アプリの実行

アプリの実行結果。レスポンスボディに解析結果が表示されています。

$ python compv.py
HTTP Status Code: 200
Response Header: apim-request-id: 983e08c3-d147-45a1-ad83-342ef49df6c9
Content-Type: application/json; charset=utf-8
Date: Fri, 06 Sep 2019 10:24:13 GMT
Server: RapidAPI-1.0.31
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
x-content-type-options: nosniff
X-RapidAPI-Region: AWS - ap-northeast-1
X-RapidAPI-Version: 1.0.31
X-RateLimit-requests-Limit: 5000
X-RateLimit-requests-Remaining: 4993
Content-Length: 375
Connection: Close

Response Body: {u'metadata': {u'width': 759, u'format': u'Jpeg', u'height': 500}, u'description': {u'captions': [{u'text': u'Stephen Curry holding a basketball', u'confidence': 0.7628428378073961}], u'tags': [u'person', u'holding', u'game', u'player', u'racket', u'basketball', u'young', u'posing', u'standing', u'woman', u'court', u'man', u'ball', u'hand', u'wearing', u'uniform', u'baseball']}, u'requestId': u'983e08c3-d147-45a1-ad83-342ef49df6c9'}

$