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

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

タグ:irasutoya

先日、IBM Watson Summit 2017 (内のユーザーグループイベント)の開催に併せてリリースした「いらすとや検索」のチューンナップに挑戦しました。



まず、このサービスの内容を簡単に解説します。自分自身も使っていますが、質の高いフリー素材イラストを数多く公開いただいている「いらすとや」様のイラストを、なんとなく覚えている手描きイラストから IBM Watson の類似画像検索機能を使って検索できるようにする、というものです。

この検索サービスでは、「いらすとや」様のイラスト画像を、そのイラストが紹介されているページの URL 情報と併せて IBM Watson の Visual Recognition インスタンスに学習させ、類似画像検索を可能にしています。 そして「いらすとや検索」サイトで描いた絵を画像化し、似たイラスト画像を探した上でイラスト紹介ページへのリンクを作る、という比較的シンプルなロジックで作成しています。ユーザー会の中で紹介し、そこそこの反響もいただきました:
2017050201
ユーザー会での説明資料より)


ただ自分で使っているうちに、作った当初は気付かなかった部分も見えてきました。その中の1つが「カラフルなイラスト画像が検索候補にあまり出てこない」というものでした。理由も明白で、検索時に描くイラストがモノクロなのだから、「類似した画像」を検索するとモノクロの(あるいはモノクロに近い)画像が大量に候補として出て来るのです。形が似ているかどうかというよりも、色の類似性で選ばれてしまっている感じでした。


この問題を解決しようとすると、方法は大きく2つ考えることができます。1つは「検索時に描くイラストに色を付けられるようにする」方法、もう1つは「学習時にモノクロ変換した画像を学習して、そのモノクロ変換した画像の中での類似画像を探す」方法です。要はカラー画像として類似画像を探すのか、モノクロ画像として類似画像を探すのか、という2つの方法です。

実装そのものはどちらでもできると思いますが、このうちの前者はあまりユーザーフレンドリーではないと思っています(手軽に描いたイラストで検索できることがサービスの価値であり、彩色の手間をかけてまでイラストを検索したいと思えない)。というわけで、後者の解決策を実装しました。 ただ画像のグレースケール化は(ロジックが確立されているという意味で)まだ簡単なのですが、モノクロ(白か黒かの2値)化となると、中間くらいの色を白と黒のどちらと判断すべきか、というイラストの特性によってもロジックが左右される問題があるので結構難しかったりします。そのあたりはいずれ詳しく紹介できればと思っています。


で、このチューンナップのビフォー&アフターがこちら:

【ビフォー】
2017050201


【アフター】
2017050202



チューンナップ前の類似画像検索の結果は全体的に白っぽかったと思いますが、チューンナップ後の結果がかなりカラフルになったと思います。つまりモノクロ画像で類似画像を検索した結果、現在はカラフルな画像もシンプルなイラストからの検索候補として得られるようになった、ということです。

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上に線を描画


このページのトップヘ