🔍️

AIにアイコン選ばせてみた ~CLIPとVoyagerを利用したアイコン検索~

2024/10/28に公開

概要

今回、AIを用いてアイコンを検索するアプリケーションを作ってみました。
アイコン名・タグなどは利用せずにアイコンの形状だけで検索しています。
検索ワードは多言語対応です。日本語でも英語でも検索できます。試していないですが他の主要な言語でも検索できるはずです。
多くの方に試していただきたいので、検索の実行はGPUが使えない環境でもできるようにしています。

対象読者

  • アイコン選びで不便さ・大変さを感じているデザイナー
    • 技術の内容は読み飛ばしてもらって構いません
  • AIを用いた検索技術に興味がある人

利用した技術

今回のアプリケーションは、以下のアルゴリズムで検索を実現しています。

  • 準備
    1. マテリアルアイコンをpngでダウンロード
    2. 画像をCLIPでベクトル化
    3. 画像ベクトルを保存しインデックスを作成
  • 検索
    1. 検索テキストをCLIPでベクトル化
    2. 最近傍探索で類似の画像ベクトルを取得
    3. 取得したベクトルに対応するアイコンを画面上に表示

GUIはFletを利用しています。FletはPython上でFlutterを利用できるフレームワークです。

CLIP

CLIPはOpenAIが開発したAIモデルです。大量の画像とキャプションのペアをデータセットとして学習することで、テキストと画像を同じベクトル空間に埋め込む機能を持っています。テキストを変換したベクトルと画像を変換したベクトルの内積をとることでテキストと画像の類似度を計算できます。
論文はarxivに公開されています。

今回は、日本語・英語問わずに検索できるように多言語で事前学習されたモデルを利用しています。

最近傍探索

似ているベクトルを探すのにデータベースのすべてのベクトルとの内積を計算していては非常に長い時間がかかってしまいます。そこで、近似的に高速に似ているベクトルを検索するアルゴリズムを利用します。
今回はアイコン数がそこまで多くないので影響は大きくないですが、実際の検索システムでは検索対象のアイテム数は膨大です。現実的な処理時間で検索するためには近似最近傍探索が必要不可欠なのです。
今回は、Spotifyが開発した最近傍探索のVoyagerを利用しています。VoyagerはHNSWというアルゴリズムによる最近傍探索ライブラリです。

使用法

以下のリポジトリをクローンしてください。
READMEに従って、ライブラリをインストール・アプリケーションを実行してください。

検索バーに検索ワードを入力するとその検索ワードに近いアイコン上位20件が表示されます。検索ワードは日本語でも英語でもOKです。

実行後http://localhost:8000でアイコンブラウザを利用することができます。AIモデルをロードする関係上、アプリケーションの起動には多少時間がかかります。

結果

いくつかの検索ワードでの検索結果を見てみましょう。

スポーツでの検索結果
スポーツでの検索結果 きちんとスポーツのアイコンが表示されている

お気に入りでの検索結果
お気に入りでの検索結果 お気に入りという概念ににハートやサムアップの記号が使われることを理解

電話 禁止での検索結果
電話 禁止での検索結果 このように複数キーワードの組み合わせや文章での検索も可能

まとめ

ゼロショットでこの精度が実現できることに、大規模データセットによる事前学習のポテンシャルを痛感させられます。アイコンに特化したファインチューニングをすることによって、さらに精度を上げることもできそうです。
アイコンのような記号化された画像を認識できるのかの実験もかねて今回のアプリケーションを作成しました。実際、アイコンに対してファインチューニングせずにアイコンとテキストをもっともらしく結びつけられているのはCLIPのVision Encoderに利用されているViTの形状を認識する能力の高さによるものだと思われます。テクスチャーで物体を認識する能力が高いCNNでは全く違う結果になっていたかもしれません。
今回は検索対象がマテリアルアイコンのみですが、普段使うアイコンをベクトル化して追加すれば同じようにそれらのアイコンも検索することができます。
ぜひ、試してみてください。

mutex Official Tech Blog

Discussion