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

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

タグ:visual

最近、従来種ではなかったはずの猛毒アリである「火蟻(ヒアリ)」が日本で見つかった、というニュースを耳にします:
ヒアリ、東京で発見 ついに関東上陸 大井埠頭のコンテナから


外来種かつ毒虫という特徴から、素手で捕まえたり、触ったりするのが非常に危険なアリです。とはいえ、この季節は普通のアリを見かけることも多いので、ヒアリかどうかを判断するのが難しい問題もあります。

さて、最近話題の画像認識を使って蟻の画像を識別させて、「それがヒアリかどうか?」を判断することはできるでしょうか? IBM WatsonVisual Recognition API を使って試してみました。

当初は「まずはヒアリを学習させて・・・」と思っていたのですが、調べてみたら IBM Watson の Visual Recognition V3 では標準機能でヒアリを識別する機能を持っているようでした(これに気付いた時はちと驚きました)。というわけで普通に公開されているデモ用ページを使い、カスタマイズなしの標準機能だけで試してみました。
Visual Recognition Demo

2017070701


標準機能で画像認識を試す場合は、ブラウザで上記ページにアクセスして、赤枠部分をクリックし識別させたい画像を PC 内から指定するだけです。非常に簡単です。


今回、まずはこのヒアリの画像を指定してみました:
fire1


しばらく考えて・・・
2017070702


はい、結果がでました!"pharaoh ant"(ファラオ蟻、何それ?)とかに混じって "fire ant"(ヒアリ)という識別結果が表示されています!検索スコアも 0.80 と中々高い結果になっています(赤枠部分参照):
2017070703


では次はこの「黒蟻」の画像を指定してみます:

kuro1


結果はこうでした。"carpenter ant" は日本では「黒蟻」と呼ばれているものです(ちなみに "sanguinary ant" は「銀蟻」です)。そして "fire ant" とは識別されませんでした。これも正解です:
2017070704


いくつかの画像で試してみたので、その結果を表にしておきます:
画像正解識別結果スコア成否
 fire1
ヒアリファラオ蟻
ヒアリ

銀蟻
0.81
0.80
0.60
 fire2
ヒアリヒアリ0.60
 fire3
ヒアリヒアリ
軍隊アリ
0.83
0.50
 kuro1
黒蟻黒蟻
銀蟻
0.81
0.50
 kuro2
黒蟻黒蟻0.93
 gin1
銀蟻銀蟻0.51
 gin2
銀蟻銀蟻
黒蟻
0.64
0.60


おおーっ! 適当に集めた画像で試してみただけですが、それなりの精度で検索できているように思えます。 カスタマイズなしの標準機能だけでもいい感じでした。ぶっちゃけ想定以上です(笑)。


皆さんもアリ画像を使って上記サイトで色々試してみてください。なかなかの精度で調べてくれそうですよ。

#最初は学習させるつもりで蟻の画像を大量に集めて見ていたので、気持ち悪くなってきた・・・

IBM Watson Summit 2017 開催記念作品!


自分だけではないと思いますが、可愛らしいフリー素材を数多く公開していただいている「いらすとや」http://www.irasutoya.com/)さんには、大変お世話になっております。



僕の場合はプレゼンテーション内のイラストに多く使わせていただいています。中にはいらすとやさんの素材だけでサイトや資料を作ってしまう職人さんもいらっしゃるようです。

ある程度「いらすとや」を使っていて感じたことは「目的の素材をうまく見つけるのが難しい」ということです。「昔こんな感じのイラストを見た記憶があるんだけど、どのカテゴリーだったっけな?」とか、「この人が使ってるこのイラストと同じものを使いたい」とか、自分の記憶が曖昧だったり、これというキーワードが思いつかない時に目的のイラストをうまく検索できないことがたまにあるのでした。


で、その解決策になるかどうかわかりませんが、興味半分でこんなサイトを作ってみました:
「いらすとや検索」



↑見た通りのサイトです。「なんとなく」覚えているイラストをなんとなく描いて、search して、そのイラストに似た「いらすとや」画像を探す、というものです。PCであればマウスで、スマホの場合はタップで描きます。検索結果は最大100件表示され、その中に含まれていれば目的のページに(クリックで)移動できる、というものです:
2017042501

    ↓

2017042502


例えばこの↑例、「鳩」で検索すればすぐに見つかりますが、「鳥」で検索するとなかなか候補が出てきません。「鳩のイラスト」とまで認識できていればテキスト検索でも探せるのですが、そこまでハッキリを覚えていないようなケースでも「たしかこんな感じの・・・」というイラストが描ければ検索できるようになっています(たぶんw)。


今のところ描くイラストは黒線一本のみで描く必要があります。描き直しに消しゴムなどはなく、reset する必要があります。編集機能にはまだ制約が多いですが、シンプルさを重要視しました(ということにします)!
2017042503



なお、このサイトはコグニティブエンジンである IBM WatsonVisual Recognition(画像認識) API を使って、あらかじめ学習させたイラストからの類似画像を人工知能のテクノロジーを使って検索する、という仕組みで実装しています。いらすとや内の全ページをクロールする方法が分からなかったので、現在は「リクエスト」ラベルから辿れる画像を対象にしています。仕組みはシンプルですが、実はそこそこなテクノロジーが裏に潜んでいたりします。


・・・まあ、ネタにどうぞ(笑)。
 

また、このアプリを作る上で、以下の2つの情報を参考にしました。HTML5 の Canvas にマウス移動(とスマホのタッチ)で線を描画するワザと、特にスマホのタッチで描画をする際に画面のスクロールを強制的に止めるワザです:

JavaScript でマウス座標を取得し、Canvas上に線を描画


IBM Watson の画像認識 API である Visual Recognition を使った類似画像検索サービスを作り、そのソースコードを公開しました:
https://github.com/dotnsf/imageSearchDemo


コードは Node.js で作りました。プロジェクト自体に(著作権フリーな)サンプル画像もいくつか含まれていますが、サンプル画像を置き換えて使うことでご自身が所有している画像を使った類似画像検索サービスにすることも可能です。

また基本的に Watson API は使いやすいものばかりだと思ってますが、このサンプルアプリもその特徴を最大限に活かして、単純に「学習させたい画像を用意すれば動く」ようにしました。細かな実装内容はソースコードを参照ください。


上記 github 上のリポジトリの README.md の中に使い方も(英語で)記載していますが、このブログでは日本語での簡単な使い方とカスタマイズについて紹介します。前提としてログインできる CentOS/RHEL のインスタンスに git と Node.js がインストールされている環境をご用意ください。また最終的なウェブアプリケーションは IBM Bluemix 上で動かすことにします(この場合は cf コマンドもインストールしておいてください)。異なるプラットフォームでも動くと思いますが、適宜読み替えてください。


準備

何はともあれ、IBM Watson の API を利用するためには IBM Bluemix のアカウントが必要です。まだアカウントをお持ちでない場合はトップページの「フリーアカウントを作成」ボタンから 30 日間無料で使えるトライアルアカウントを作成できます:
2017012601


Bluemix のアカウントでログインし、カタログ内 "Watson" カテゴリの "Visual Recognition" を選択して、この API を追加してください:
2017012602


なお作成時に "Free" プランを選択すると1日に 250 API call まで無料で利用できるプランになります。本格的に利用する場合はその下の "Standard" プランを検討ください:
2017012603


Visual Recognition API を作成後に、ダッシュボードから作成した同サービスを選択して、サービス資格情報から資格情報を確認します(なければ追加します)。そして "api_key" の値(下図ではモザイクにしています)がこの後必要になるのでメモしておきます:
2017012604


改めて github からソースコードを用意します。いくつかの方法がありますが、git が使える場合は git clone してください(または zip をダウンロードして展開してください):
$ git clone https://github.com/dotnsf/imageSearchDemo
$ cd imageSearchDemo

ソースコードを展開したディレクトリの直下に settings.js というファイルがあります。この中の exports.vr_apikey の値を先程メモした Visual Recognition API の API Key の値に書き換えて保存してください:
2017012605


他はそのままでも動きます。なお、exports.limit の値(デフォルトだと 5)はウェブアプリケーションで類似画像を検索した結果として、上位いくつまでの結果を表示対象とするかの数値です。学習させる画像の数などにもよりますが、必要に応じて書き換えて使ってください。

最後に、この後の学習時に必要な Node.js のミドルウェア: watson-developer-cloud を npm でインストールしておきます:
$ npm install watson-developer-cloud

この結果、プロジェクトのホームディレクトリ(imageSearchDemo)に node_modules というフォルダが作られていれば watson-developer-cloud の導入に成功したことになり、学習処理が行えるようになります。


画像の学習

最終的には類似画像を検索する仕組みを作りますが、そのためにはあらかじめ検索結果となる画像を学習させておく必要があります(学習させた画像の中から類似画像を探します)。そして学習のためにはある程度の枚数の画像が必要です。

上記ソースコードの public/images/ の中にはサンプルとして著作権フリーな画像が含まれています。これらをそのまま使って学習させることもできますし、手元にある画像で類似画像検索システムを作りたい場合はそれらを使うこともできます(その場合は public/images/ 以下のサンプル画像を全て削除した上で、ご自身の画像をこのフォルダ内に格納してください):
2017012606


そして、以下のコマンドを実行すると public/images/ フォルダ以下にある画像を Watson に学習させます(上記の settings.js ファイルの編集を忘れずに行っておいてください):
$ node learnImages.js
imagelearn_xxxxxx

学習が正しく行われた結果、画面には imagelearn_xxxxxx という文字列が表示されます。これが collection_id と呼ばれるもので、後述の Watson API Explorer などでこの API を実行する際には必要になります。またこのコマンドの実行後に setting.js の最終行に以下のような1行が追加されているはずです:
exports.vr_collection_id = 'imagelearn_xxxxxx';


ウェブアプリケーションとして利用

では学習した内容を使った類似画像検索ウェブアプリケーションを作成します。今回は IBM Bluemix 上のランタイムとして作成するので、SDK for Node.js ランタイムを1インスタンス作成します:
2017012607


アプリケーション名は適当にユニークなものを指定します。この例では dotnsf-imagesearch という名前のランタイムを作っています:
2017012608



合わせてソースコードの manifest.yml ファイルを更新します。具体的には name と host 両方の値を、実際に作成するアプリケーション名と同じものにします:
2017012609


ここまで準備できたらアプリケーションをデプロイします。cf コマンドを使ってログインし、プッシュします:
$ cf login -a http://api.ng.bluemix.net/
   :
   :

$ cf push

しばらくするとアプリケーションの転送とステージングが完了して、ランタイムが起動した旨のメッセージが表示されます:
2017012601


この段階でアプリケーションにアクセス可能です。PCかスマホのブラウザでアプリケーションの URL (上記の例だと http://dotnsf-imagesearch.mybluemix.net/)を指定して開くと、このような画面が表示されます:
2017012601


「参照」ボタンをクリックして、類似画像の対象となる画像を選択します。今回は学習データの中に野球ボールがあったので、それが検索できるかどうかを調べる目的で、学習データとは異なる野球ボール画像を指定してみることにします:
野球ボール


画像を指定すると画面が暗転して、類似画像検索が行われます:
2017012602


しばらくすると結果が得られて画面の暗転が戻ります。画面を下にスクロールすると学習データの中の類似画像候補が指定数(デフォルトでは5)表示されます。一番左に野球ボールが検索できているのがわかります。まあこんな感じのウェブアプリケーションサンプルです:
2017012603


画像を学習する部分は learnImages.js で実装しています。学習時に与えるメタデータ(画像検索の結果と一緒に取得できるテキスト情報)の内容を変更する場合はこのファイルをカスタマイズしてください。またウェブアプリケーション部分は app.js で、そしてウェブアプリケーションの見栄え部分は public/ フォルダ内の index.html に依存しています。見栄えを含めたウェブアプリケーションの挙動の変更はこれらのファイルを自由にカスタマイズしてお使いください(ソースコードは MIT ライセンスで配布しています)。



なお、API Key や collection_id を利用して実際に Visual Recognition API を実行する場合は、こちらの Watson API Explorer をお使いいただくのが便利です。仮に作成した collection_id を一度削除するような場合はこの画面から DELETE を実行いただくことができます:
https://watson-api-explorer.mybluemix.net/apis/visual-recognition-v3

また、Watson Visual Recognition API の関数リファレンスはこちらを参照ください:
https://www.ibm.com/watson/developercloud/visual-recognition/api/v3/



ゆるキャラを画像で検索するサービスを作って公開してみました:
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 を使って開発しています。今後の仕様変更などがあった場合にサービスがどうなるか何とも言えませんが、なるべく対応させていく予定です。合わせてもう少し学習データの量を増やして検索精度を上げられないか、がんばってみます。


JavaScript で AJAX を多く使ったことがある人にとって、「クロスドメイン問題」は一度は体験する、避けて通れない問題だと思います。

簡単に補足すると、例えば異なる aaa.com と bbb.net という2つのドメイン間で AJAX の実行を許可しない、という問題です。以下の例では aaa.com ドメイン内に www.aaa.com というアプリケーションサーバーと、api.aaa.com という API サーバーがあり、bbb.net というドメイン内に api.bbb.net という API サーバーがあることを想定しています。www.aaa.com と api.aaa.com は同一ドメインなので、何の制約もなく AJAX で API を実行できるのですが、ドメインの異なる api.bbb.net に用意された API を www.aaa.net から AJAX で実行しようとすると、このクロスドメイン問題の制約に引っかかって実行できない、というものです:
2016121303

ちなみにこのクロスドメインの制約はあくまで「ウェブブラウザの制約」です。ドメインをまたいだ API を実行するような JavaScript はウェブブラウザが許可しない、という意味です。なので、例えば www.aaa.com 上の Java アプリケーションや PHP アプリケーション、はたまたサーバーサイド JavaScript である Node.js アプリケーションなどから api.bbb.net 上の API を実行する、という場合は何の制約もなく動きます。

またこの問題は api.bbb.net 側で「他のドメインからの AJAX 実行を許可する」という設定をしておけば回避することができます。具体的には API サーバーの HTTP レスポンスヘッダに Access-Control-Allow-Origin を含めるようにして、そこに "*"(どこからでも許可する)とか "*.aaa.com" (aaa.com からのリクエストは許可する)とかいった値が返されるような設定になっていれば使える、ということです(つまり API 側で許可するよう設定されている必要があります):
2016121304


さて、先日 curl で IBM WatsonVisual Recognition API (画像認識 API)を使っていてふと気付いたことがあります。curl は -i オプションを使うと HTTP レスポンスヘッダが表示されるようになるので、これを ON にしてデバッグしていました・・・:
2016121301


ん??
2016121302


上記で説明した "Access-Control-Allow-Origin" が HTTP レスポンスヘッダに含まれてます。しかも値が * ということは、この API はどこからでも AJAX で呼べるということ!?

以前にこの記事を作ってた頃は、このヘッダはなかったと記憶してる(Chrome Extension なので回避できている、という認識でした)。いつ仕様が変わったんだろ・・・

試しに、curl で実行したのと同様の Visual Recognition API を実行する HTML ファイルを作ってみました(実行する場合、ソースコード内の (APIKEY) 部分は自分の Visual Recognition API サービスインスタンスの API キーを指定してください:
<html>
<head>
<title>DHTML</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
function classify(){
  var imgurl = $('#imgurl').val();
  var url = "https://gateway-a.watsonplatform.net/visual-recognition/api/v3/classify?api_key=(APIKEY)&version=2016-05-20&url=" + encodeURI( imgurl );
  $.ajax({
    type: "GET",
    url: url,
    success: function( data ){
      var html = "<img src=\"" + imgurl + "\"/><br/><table border=\"1\">";
      var classes = data.images[0].classifiers[0].classes;
      for( i = 0; i < classes.length; i ++ ){
        var obj = classes[i];
        var class_name = obj['class'];
        var class_score = obj['score'];
        html += ( "<tr><td>" + class_name + "</td><td>" + class_score + "</td></tr>" );
      }
      html += "</table>";
      $('#result').html( html );
    },
    error: function( XMLHttpRequest, textStatus, errorThrown ){
      console.log( "error: " + textStatus );
    }
  });
}
</script>
</head>
<body>
<input type="text" name="imgurl" id="imgurl" value=""/>
<input type="button" value="classify" onClick="classify();"/>
<hr/>
<div id="result"></div>
</body>
</html>

これをウェブブラウザからローカルファイル扱いで開き(URL は file:/// で始まる)、画像 URL をテキストボックスに入れて classify ボタンをクリックします。すると・・・
2016121305


↑ 全く異なるドメイン(というかローカルファイルシステム)からの HTTP リクエストであるにも関わらず、AJAX 内で呼び出している Visual Recognition API が正しく実行され、画像認識結果を表示することができました。こりゃ便利!

このページのトップヘ