まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:image

2年前に書いたこのブログエントリの続きのような内容です:
類似画像検索とカラーヒストグラム


類似画像検索を実現するアルゴリズムを調べています。上記のブログエントリでは「カラーヒストグラム」と呼ばれる比較的簡単な方法を紹介しました。今回は Average Hash と呼ばれる方法を紹介します。


まず、この方法は名前に "Hash" というキーワードがついています。一般的なハッシュ(ハッシュ値、ハッシュ関数)では入力値が少しでも異なっていると出力値が全然別の値になる、という特徴があり、その特徴をいかしてパスワード(のハッシュ)を安全に保存したり、ブロックチェーンに応用されたりしています。

ただ今回紹介する Average Hash アルゴリズムで使われるハッシュはその点で意味合いが少し異なり、入力されたデータが似ていた場合に似た値を返すようなハッシュ関数を定義します。このようなハッシュ関数を使って、用意された画像のハッシュ値をあらかじめ求めておきます。そして類似画像を探したい画像についても同じハッシュ関数でハッシュ値を求め、そのハッシュ値が似ている画像は入力データが似ているはずと判断して回答の候補とする、という考え方に基づいた類似画像検索アルゴリズムです。つまり画像として類似しているかどうかを、比較演算が容易なハッシュ値の差で判断しよう、というものです。


より具体的にアルゴリズムを紹介します。例えばハッシュ関数を以下のように定義したとします:
  • 画像のバイナリデータをハッシュ関数の入力値とする
  • nxn のサイズを持つ整数配列がハッシュ関数の出力値とする。なおnは整数値とする
  • ハッシュ関数内ではまず画像を正規化する。具体的には入力画像を縦nピクセル、横nピクセルにリサイズし(画素数はnxn)、更にグレースケール変換する
  • 次にnxnにグレースケールされた画像の各ピクセルの色の濃さ(0~255)を調べ、その値の平均値 avg を求める
  • 再度nxnにグレースケールされた画像の各ピクセルの色の濃さを調べ、その値が avg 以上であればそのピクセルの値は 1 、avg 未満であれば 0 とみなす。これをnxnピクセル分求めて配列にする
  • この配列をハッシュ関数の出力値とする

これだけだと理解しにくいと思ったのでもう少し詳しく順を追って説明します。なお以下の例では n = 16 の例を紹介します。

ハッシュ関数への入力データを以下の画像とします(ちなみにいらすとや様からの画像で、元のサイズは 737x800 ピクセルです):
2019051701



ハッシュ関数ではこの入力画像をまず 16x16 にリサイズし、かつグレースケール化して正規化します。この時点で画像のピクセル数は (16x16=)256 です:
2019051702


この (16x16=)256 個のピクセルを左上から1つずつ取り出して RGB 値を調べます。この値は 0 から 255 の間の整数値で、0 に近いほど黒っぽく、255 に近いほど白っぽいことを意味しています。実際には 16 行ありますが、最初の3行はこのような感じでした:
2019051705


こうして 256 個のピクセルの RGB 値の平均値 avg を求めます。この例では avg = 198.763 であったとします。

改めて 256 個のピクセルの RGB 値をこの avg と比較します。ピクセルの RGB 値が avg 以上だった場合は 1 、avg 未満だった場合は 0 とみなしていきます:
2019051706


この avg と比較した結果を画像の左上から順に並べて配列にします(下図では16個ごとに改行して実際の2次元イメージに近い形にしていますが、実際は改行せずに1次元配列とみなします):
2019051703


この配列がハッシュ値となります。なんとなく元画像の中で白っぽい部分を 1 、黒っぽい部分を 0 とした結果になっていることがわかります。また、このハッシュアルゴリズムだと元画像が似ていると関数実行結果のハッシュ値も似る、ということが理解しやすいと思います。しかもハッシュ値は整数 256 個の配列なので類似性の判断も容易です。

なお、別のこちらの画像(サイズは 470x628)で同じアルゴリズムを実行すると、
smartphone_woman_smile


結果はこのようになりました:
2019051704


どのような画像に対してもまず同じサイズのグレースケール画像に変換しています(つまりグレースケールになった状態での類似性を調べるアルゴリズムです)。また各ピクセルを「その画像の各ピクセルの明るさの平均値よりも明るいか暗いか」で 0 または 1 に変換しています。これによって画像そのものが明るいものだったり暗いものだったりする要素を取り除き、その画像の中での明るい部分と暗い部分に分けるようにしています。そしてその結果がどれだけ似ているのか/似ていないのかを整数配列の類似度という比較的簡単な方法で調べられるようにしている、という特徴があることがわかりますね。


このアルゴリズムを使ってあらかじめ用意した画像の Average Hash 値を調べておきます。そして類似した画像を調べたい画像データが送られてきた場合にまず同じアルゴリズムで 256 個の1次元配列である Average Hash 値を求めれば、「0 と 1 が一致している数が多いほど似ている」と判断できることになります。

この方法であれば(実行パフォーマンスの様子を見ながらではありますが)nの値を大きくしたり、Hash 値を 0 か 1 にするのではく RGB 値をそのまま使って nxn 次元のユークリッド距離を求めることでより精度の高い類似画像検索が可能になります。あるいは別の応用としてグレースケールの手続きを省略して、カラー画像のまま比較することも可能です。


という、類似画像検索のアルゴリズムの1つを紹介しました。そんなに難しい数学知識を必要とせず、比較的理解も実装も応用もしやすいアルゴリズムだと思っています。


ゆるキャラを画像で検索するサービスを作って公開してみました:
http://yuru.mybluemix.net/

まず最初に、自分はある程度ゆるキャラに詳しいと思っています。積極的な興味というよりは、マンホールに詳しくなっていると、最近はそのマンホールのデザインにゆるキャラが使われることが珍しくなくなってきたので、自然と(?)ゆるキャラにも詳しくなってしまうのでした。。
2017011500
 

さて、ゆるキャラに限らないのですが、イマドキ何かを調べようとした時にはまず『ググる』のが定番です。ただ、それは調べるためのキーワードが分かっている場合です。ゆるキャラの場合、名前が分かっていれば名前でググれば確実ですし、名前が分からなくても出身地とかが分かれば「ゆるキャラ 東京都」などで検索すればいくつか候補が見つかるのでそこから調べる方法もあります。

しかし問題は名前も出身地も分からず、検索するためのキーワードがない場合です。例えば目の前に着ぐるみそのゆるキャラ本体がいて、写真は撮れるんだけど、そのゆるキャラがなんという名前で、どこのゆるキャラで、どんな特徴を持っているのか、、、といった情報を調べる具体的な方法がなかったように感じていました。

といった背景もあり、「画像からゆるキャラを調べる」ことができるようなウェブサービスを作ってみた、という経緯です。いわゆる「類似画像検索」を行うため、コグニティブエンジンである IBM WatsonVisual Recognition API を使って実装してみました:
http://yuru.mybluemix.net/


使い方はシンプルで、ウェブサイトをPCかスマホのブラウザで開き、ファイル選択ボタンを押して、ローカルシステムやフォトライブラリ等から目的の画像を選択するだけです:
2017011501


PC の場合に限り、目的の画像ファイルを画面上部のこの辺りにドラッグ&ドロップしても構いません:
2017011502


例えばこの画像のゆるキャラを調べてみることにしました。まあ有名なヒトなので答はわかっているのですが、ちょっとトリッキーなアイテムも写っていて普段と違う画像になっているので、いいサンプルかな、と:
く


この画像を選択するか、画面内にドラッグ&ドロップすると画面が暗転して検索が始まります:
2017011503


暗転から戻ると、検索結果として候補キャラが画面下部に表示されているはずです。最大で100件表示されます:
2017011504


今回の画像の場合、下の方にそれっぽいのが見つかりました:
2017011505


該当する結果の画像をクリックすると、そのゆるキャラの情報がポップアップします。ご存知「くまモン」でした。なお PC であればマウスオーバーでも表示されます:
2017011506


まだまだ学習量が充分ではなく、第一候補となることはまだ珍しいとか、(着ぐるみの写真ではなく)絵の場合には精度が落ちるとか、横から写した画像に弱いとか、背景画像に左右されることが多いとか、まだまだ問題はありますが、一応動くものが作れたと思ってます。

実際の用途としてはある程度いけるかな、と思ってます。もちろん精度高く検索できることが理想ですが、上記で書いたように「名前が分かれば色々調べる方法はあるんだけど、肝心の名前が出てこない」のを解決するツールとして考えると、検索結果の候補の中に含まれていれば、それはそれでオッケーかな、と。


なお、今回のサービスは Visual Recognition の中では現時点でベータ版の /v3/collections/ で始まる API を使って開発しています。今後の仕様変更などがあった場合にサービスがどうなるか何とも言えませんが、なるべく対応させていく予定です。合わせてもう少し学習データの量を増やして検索精度を上げられないか、がんばってみます。


最近はスマホのカメラの性能が上がり、その結果として画像ファイルサイズが大きくなりました。解像度が上がったことは嬉しいのですが、画像ファイルをウェブアプリなどにアップロードしようとする際に時間がかかったり、パケット通信量が増えてしまったりします。また送信先の API やシステム設定によってはアップロードサイズに上限が設定されていて、そのままでは送れなかったりすることもあります。

そんな場合に「画像を小さくしてから処理する」方法が考えられますが、Java によるその一例を紹介します。画像ファイルデータが img 変数にバイト配列で格納できているという前提で、横幅を 800 ピクセル、縦横比を変えずに高さをそれにあわせる形で変更するような処理内容を記述しています(こうすると、大抵 1MB 以下になります):

byte[] img = null; //. この変数に画像データが byte 配列で格納されているものとする
   :
   :

//. 画像のサイズを変更
if( img != null ){
  BufferedImage src = null;
  BufferedImage dst = null;
  AffineTransformOp xform = null;

  InputStream is = new ByteArrayInputStream( img );
  src = ImageIO.read( is );

  int width = src.getWidth();    //. オリジナル画像の幅
  int height = src.getHeight();  //. オリジナル画像の高さ

  int w = 800; //. 幅をこの数値に合わせて調整する

int new_height = w * height / width; int new_width = w;
//. 画像変換 xform = new AffineTransformOp( AffineTransform.getScaleInstance( ( double )new_width / width, ( double )new_height / height ), AffineTransformOp.TYPE_BILINEAR ); dst = new BufferedImage( new_width, new_height, src.getType() ); xform.filter( src, dst );
//. 変換後のバイナリイメージを byte 配列に再格納 ByteArrayOutputStream baos = new ByteArrayOutputStream(); ImageIO.write( dst, "jpeg", baos ); img = baos.toByteArray(); }

上記のように ImageIO と java.awt のアフィン変換を使って画像サイズに変換をかけて実装しています。

 

業務に関係して、ちょっとした画像アップローダーが欲しくなったので、IBM Bluemix でも動くようなものを作って一般化したものを公開します:
https://github.com/dotnsf/ImgUploader


PHP + MySQL + HTTP サーバー環境で動きます。Bluemix であれば PHP ランタイムClearDB試験提供の MySQL サービスを組み合わせた環境を想定しています:
2016061000


中身は非常にシンプルで、画像をアップロードして一覧で表示したり、プレビューしたり、というものです。画像データは BLOB 型にして MySQL 内に格納しているので、MySQL のバックアップを取ると画像データがバックアップされます。ここにアップロードした画像は URL でアクセスできるようになります。

アップロードに際しては PHP 設定の制約などを受けます。Bluemix 環境であれば最大 2MB です。PHP の設定を変更するなどしてください。必要に応じて認証を付けて運用してください。

その他、シンプルなので普通に使えると思っていますが、詳しくは GitHub の README を参照ください。


IBM Bluemix から使える Node-RED 環境内には AlchemyAPI の画像解析機能を持ったノードがあります。analysis カテゴリ内にある "Image Analysis" と書かれたノードがそれです:
2015120810


このノードを Node-RED 内で使うと比較的簡単に画像認識機能を実装することができます。実際に使ってみましょう。まずはこのノードをキャンバスにドラッグ&ドロップします:
2015120817


同様にして input カテゴリの inject ノードと、output カテゴリの debug ノードをドラッグ&ドロップでキャンバスに貼り付け、以下のように線で結びます:
2015120811


各ノードの属性を順に指定していきます。まずは inject ノードです。ここでは画像解析する画像の URL を文字列で指定します。というわけで種類には "string" を選択し、その下のフィールドには解析したい画像の URL を指定します。ここでは以下の画像(の URL)を指定することにしましょう:
http://news-de-smile.com/wp-content/uploads/2015/02/america-obama.jpg

↑これが何の画像なのか、は普通の人間であればわかるはず。これがコンピュータにわかるか??


"Payload" の種類に "string" を、その下に画像 URL を入力します:
2015120812


次に Image Analysis ノードの属性を指定します。ここでは AlchemyAPI を使うため、AlchemyAPI の API Key を指定します(未取得の方はここから登録して取得してください、無料です)。また解析内容は顔認識機能を使うことにしましょう。Detect の種類には "Faces" を選択します:
2015120813


最後に debug ノードの属性を指定します。この Image Analysis ノードの結果はメッセージ内に "result" という名前が付いた状態で返されます(一般的な "payload" ではありません)。というわけで、debug ノードでは debug タブに msg.result を表示するよう指定します:
2015120814


これで準備は完了です。右上の "Deploy" ボタンでデプロイします。また解析結果は debug タブに出力されるため、debug タブが表示されるよう選択しておきます:
2015120815


では解析を実行してみましょう。inject ノードの左にあるボタン部分をクリックすると、指定した画像 URL が AlchemyAPI の FaceDetection API によって解析され、その解析結果が debug タブに出力されるはずです:
2015120816


おそらくこんな感じの JSON テキストが実行結果として得られるはずです:
[
 {
  "age": {
   "ageRange": "55-64",
   "score": "0.447907"
  }, 
  "gender": {
   "gender": "MALE",
   "score": "0.993307"
  },
  "height": "389",
  "identity": {
   "disambiguated": {
    "dbpedia": "http://dbpedia.org/resource/Barack_Obama",
    "freebase": "http://rdf.freebase.com/ns/m.02mjmr",
    "name": "Barack Obama",
    "subType": [ "Person", "Politician", "President", "Appointer", "AwardWinner", "Celebrity", "PoliticalAppointer", "U.S.Congressperson", "USPresident", "TVActor" ],
    "website": "http://www.whitehouse.gov/",
    "yago": "http://yago-knowledge.org/resource/Barack_Obama"
   },
   "name": "Barack Obama",
   "score": "0.960834"
  },
  "positionX": "223",
  "positionY": "125",
  "width": "389"
 }
]

この中を見ると、画像に写っているのは1人の男性でその確率は 99.3307% 、年齢層は 55-64 歳でその確率は 44.7907%。そしてその人が "Barak Obama" である確率が 96.0834% である、という結果になっていることがわかります。それ以外の情報も含まれていますが、ともあれ Node-RED と Image Analysis ノードを使って簡単に画像認識 API を呼び出すアプリが作れてしまいました。

このページのトップヘ