Azure Computer Vision API と Azure StorageのJavaSDKを使ってファイルアップロードシステムを作ってみよう

どーもです。まーやです。

Azure Cognitive Services のうちの一つである Computer Vision API と Azure のJava SDKの一つである Microsoft Azure Storage SDK for Java を使って簡単なシステムを作って見たいと思います。Computer Vision APIについての超ざっくり概要については、昨日こちらにまとめてみましたので、興味あればみてみてください。

Agenda

  •  今回の作ったもの
  •  Cognitive Services Computer Vision API サムネイル作成機能
  •  Storage を Java SDKから使おう
  •  実際にやってみた雑感など
  •  まとめ

今回作ったもの

今回は簡易ファイルアップロードシステムを作成しました。とにかく使ってみること第一で作ったので、作り込みとかしてません。Azure周りのコードとかはほぼチュートリアルそのままもらってきました。よくない。

b824eba7-ab4e-bf82-5997-1e981015aa70

機能①:画面からファイルをアップロードし、画面に表示する
機能②:アップロードしたファイルは自動でサムネイル画像を作成し、同時に保存する

システムの大元はSpring Boot、html表示やformデータのやりとりなどはThymeleafを使用しました。データ登録についてはSpring Boot内でAzure SDKを使用して、Azure Storageで実現しました。

出来上がりイメージはこちら。BootStrap的無料テンプレートをありがたく使用させていただきました。

左側にあるファイルアップロード部分からファイルをアップロードすると

bad7ee53-c997-7e2b-32af-302f16282e5b

表示されるファイルが増えるよ

53714e2f-592a-c5c3-302a-c31ce5bcb382
クリックすると元画像が表示されるよ

6fc5950c-7d42-721b-c96c-11c1796211c2

Cognitive Services Computer Vision API サムネイル作成機能

サムネイル画像の加工に今回はComputer Vision APIを使用しました。Computer Vision APIは元々は人の顔や表情を判別したり、何が写っているかを分析・分類するためのAPIですが、その機能の副産物として、「いい感じのサムネイル画像を作成する」という機能も兼ね備えています。

「いい感じ」というのは「何が写っているかわかりやすい」という意味で捉えていただければOKです。被写体が右に寄っている場合、何も考えずに画像の切り取り加工をしてしまうと何が写っている写真だかよくわからないサムネイル画像になってしまいますよね。Computer Vision APIを使うと、被写体の位置を分析し、被写体周りを指定したサイズで切り取り、サムネイル画像を作成してくれます。

例えばこの写真を

f241e98c-fbf1-e4bf-2167-e28fa961cb25

何も考えずに左上で切り取ったサムネイルにすると↓のようになってなんの写真かわからないサムネイルが出来上がりますが
f90bce26-edb4-5182-3db2-2daa756c6e13

Computer Visionに解析してもらって、サムネイルを作成すると「いい感じ」になります↓
681dfbfc-ff11-27c8-915b-f9a55805fdb1

自分の写真でまず色々試して見たい方はdemoページがありますので試して見てください。ちなみに、あくまで機械が「ここだ!」と思った部分を切り取ってくれるので、いつもいつも↑のバズ・ライトイヤーみたいなサムネイルが作られるわけではありません。サムネイル画像の大きさにもよりますし。顔と認識できるような部分があればそこを中心に作ってくれますが(バズは顔認識されたようですね!)、顔と判別できなかったり、それよりも強い確信度を持った解析結果があれば、そちらを中心に作成されます。

例えばこのロッツォ・ハグベア。

dsc_0650

私としてはロッツォさんの顔を「いい感じ」にサムネイルしてほしい。が、結果はこちら。

dsc_0650

どうやらロッツォさんの顔よりもTOY STORYの文字を強く認識したようです。確かにサムネイルとしての機能は果たしている切り取り方なんだけど、なんとなく漂うコレジャナイ感。これが人間の感覚とシステムの違いか。なんとなく残念感。
その他料金や他の機能なども見て見たい方はこちらもよろしければご参考ください(ステマ)。

Cognitive ServicesはSDKが見当たらなかったのでAPIを直接叩いて操作します(私がちゃんと探せてなかっただけかもしれない)。

Storage を Java SDKから使おう

Azure Storageはファイルストレージサービスです。BLOB/ファイル/キュー/テーブルなど様々な形でデータ保存することができます。今回のシステムでは、このStorageにコンテナ(ディレクトリ)を作成し、BLOBとして元画像とサムネイル画像を保存します。

今回はSDKの一つであるMicrosoft Azure Storage SDK for Javaを使用しました。Azure のJava SDKはこのほかにもサービスごとに色々と用意されているので、利用するサービスのSDKをうまくチョイスして使うようにしましょう。全部入りを使いたい場合はazure-coreという奴を入れればいいはず・・・(未検証 )。Java用のSDKはMaven リポジトリ にあがっています。

で、このSDKをGradleとかMavenとかで依存性を追加してあげればOK。

dependencies {
・・・・・・
compile 'com.microsoft.azure:azure-storage:4.0.0'
・・・
}

使い方のサンプルはこちらにありましたので参考にしてください。
そのほかJava関係のサポートはこちらにまとまっています。(だがしかし私はこのサポートページをまだ使いこなせていない。。。)

実際にやってみた雑感など

Computer Visionで使える画像サイズの上限が決まっているのですが、今回は画像サイズの調整やチェック処理さえついてないです・・・というわけで上限(4MB)以上のファイルサイズの画像や指定拡張子以外のファイルをアップロードするとシステムエラー的な何かが発生します・・・。後々改善したいと思います。。。

Java SDKについては、最初情報が乏しかったため「一体どれを使えばいいんだ・・・」と途方にくれながらMavenリポジトリを眺めていたんですが、目当てのものが見つかってしまえばあとは依存関係セットするだけ、利用についてはそんなに苦労せずに使い始めることができました。すんなりファイルのアップロードや一覧取得できましたよ。

いけてないなーと思ったのはComputer Vision サムネイルAPIのデモページ。これ、レスポンスがバイナリなのでめっちゃ文字化けして返却されるんですよ。Javaコードサンプルにもあったんですが、どうやら一番最後に EntityUtils.toString(entity) をしているようなのです。画像データを文字列にしてたらまぁそうなりますよね、っていう。せっかくのAPIのデモページなので、レスポンスには是非画像が表示されて欲しいところです。余計なお世話かもしれないんですが、ここで画像が表示されるか、バイナリの文字列だけビャーッと表示されるかって結構ポテンシャル的に大事なんじゃないかなと思います。画像出たらちょっとしたできた感があっていいですよね。

ちなみに画像化するためにはドキュメント上にあるJavaコードサンプルをそのまま使うためにはentity(取得した画像データ)を getContent() する必要があります。こんな感じになります

最後に、今回作成したコードはGitHubにあげてみました。正直まだ雑に動くようになっただけなので、もう少し修正やREADMEを充実させていきたいと思います。というかプッシュ直前の修正でどうやら表示が崩れた模様・・・表示が変なので後ほど修正したいと思います。

まとめ

Azure StorageもComputer VisionもまだまだJavaとの関連情報が少ないので、もっと充実すると敷居が下がって良いのではないかなと思いました。
あとAzureのサービス全部をJavaから使えるわけではないのが現状で、使いたいサービスでJava(とPython)が使えない、なんてこともしばしばなので、もっと使える領域が増えたらいいなと思います。

以上でした。

 

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中