こんにちはVASILYエンジニアの松本です。VASILYが運営しているiQONというサービスの大きな特徴の一つに、ユーザーがファッションアイテムを組み合わせてコーディネートを作り、それを投稿できるという機能があります。それを実現するために、iQON内では様々な画像処理が行われているのですが、それらを最近大幅に改善したのでその内容を紹介したいと思います。
iQONのコーディネートに使われるアイテム画像について
コーディネートを作る過程
下の図のようにユーザーは検索画面からアイテムを検索し、それをキャンバスに配置してコーディネート画像を作っていきます。
iQON内の画像のほとんどは提携先ECサイトからクロールして取得している画像なので、コーディネートに使う画像については以下の2点を実現する必要があります。
・アイテムを検索するときはコーディネートに使いやすいアイテムに限定して表示する必要がある
・アイテム画像の背景は綺麗に透過されている必要がある
コーディネートに使いやすいアイテムの選定
iQON内ではアイテム単体のみで写っている画像がコーディネートによく使われていることが統計的に分かったので、そのようなアイテム画像のみが表示されるようにしています。
この選定ですが、iQONには現在月間60万点以上のアイテムが追加されているので、人力では処理しきれずアイテムの追加に滞留が起こっていました。
そこで、今回はその選定を自動化することに踏み切りました。
アイテム画像判定の自動化
ECサイトからクロールされるアイテム画像には膨大なパターンがあります。その中からアイテム単体の画像のみを取り出すために独自の検出器を実装することで判定を自動化しました。
画像処理ライブラリとしてOpenCVをどうしても使いたかったので、iQONのバックエンドはRubyで実装されていることからruby-opencvを使用しました。
以下に代表的な画像のパターンについての検出器を紹介します。（赤枠が検出に用いた領域です）
複数アイテム画像の検出器
物体領域のみを抽出したmask画像を生成し、その領域の個数をカウントして判定しています。アクセサリなどカテゴリによっては複数アイテムが入っても良い場合もあるので、その場合を考慮してフィルタリングしています。
モデル画像の検出器
ECサイトの場合、モデル画像のほとんどが顔が写っているものであることと、人物認識よりも顔認識のほうがあるかに精度が高いことから顔認識による判定を採用しました。参考にしたのはruby-opencvのサンプルコードです。
しかし、この方法をそのまま採用しても精度は低く、多くの誤検出を生み出してしまいます。そこで、ECサイトのモデル着用画像の顔の位置、大きさ、色についてさらに分析を行い誤検出を最大限減少させました。
マネキン画像の検出器
これについてはECサイトによっていろいろな種類のマネキンが存在したので一番苦労しました。上図のように首元の領域を検出してマネキンだと判定したものもありましたが、それでも全部のマネキンを検出することはできません。
そこで、過去に人力でアイテム判定を行ってきたログを解析してみることにしました。iQON内には過去すべてのアイテムについての判定結果のログがBigqueryに保存されていたので、そのデータから各ブランドごとにアイテム画像判定の結果を分析しました。その結果から特定カテゴリにおいてマネキン画像しか入らないブランドをリストアップして判定を行いました。
そのほかにも様々なフィルターを実装し、現在ではこの判定精度は95％以上の精度を保っています。
アイテム画像の背景の透過方法
上記の方法でアイテム単体が写っている画像の判定が出来たので、次はコーディネートを作るためにアイテム画像の背景透過をする必要があります。
一般的な背景透過手法
以前はこの処理を画素の明度値に対してしきい値を設けて行っていたのですが、この場合2つの問題点があります。
1. 上の図の真ん中のように背景とアイテムがほぼ同色の場合にしきい値選定が困難。
2. 上の図の右のようにしきい値を調整しても画像の端をスムーズにできない
そこで、今回は1を解決するためには背景色に応じて適切なしきい値で透過処理をかけるようにしました。また、2を解決するために画像にフィルタリングとクラスタリングの処理をかけて、画像のノイズを低減しました。以下ではその概要を説明します。
手法の概要
動的に背景画像を生成
画像によって背景色は変わるため、まず最初に背景画像を入力画像から生成する必要があります。背景画像は入力画像の端をスキャンして線形補完することで生成しています。
γ補正で背景色とアイテム画像のコントラストを上げる
γ補正をかけると画像のコントラストを調整することができます。以下がサンプルコードです
ここでのgammaの値は直前に行った背景画像の生成処理から得られた背景画像の明度値によって動的に変化させています。この処理によって画像のコントラストを上げることができ、しきい値選定が容易になります。
画像のノイズをフィルタリング処理で除去
ノイズ除去の最も一般的な手法にBILATERAL FILTERがあります。これはエッジの情報を失うことなくフィルタングができる方法として有名です。しかし、これだけでは画像の端の境界部分にブラーが残ってしまいます。そこでmean shiftクラスタリングという手法で画像のエッジ部分を滑らかにしました。
こちらの論文から引用した以下の画像が最も分かりやすい例でしょう。
meanshiftクラスタリングによって各領域の境界がはっきりすることがわかるとおもいます。（特に背景の海と空の境界部分）
変換処理の結果
これらの処理をさきほどの画像に適用してみます。
ruby-opencvには以下のように関数が用意されています。
背景透過処理
最後に背景画像との差分をとってmask画像を生成し、入力画像とのANDをとることで背景透過画像を生成します。
まとめ
今回はiQON内の特に画像処理にフォーカスして全容を書きました。今回の改善では人力で画像を判定していたのを自動化したことによって、多くの工数を削減できたことと、一日のアイテム追加数の大幅な増加ができたことが大きな成果だったと考えています。アイテム追加数は人力では1日最大3000点程度だったのですが、今回の自動化で1日最大10万点のアイテム追加を実現することができました。
また、画像の透過処理の改善では特に白のアイテムの背景透過処理が改善されたのが大きかったです。やはりファッションの基本となる色がコーディネートに使えないのは残念という声が多数のユーザーから上がっていたのでそこを改善できたことが大きかったです。
かなり専門性の高い処理が多く、ここでは書ききれなかったことがたくさんあるので、詳しいことに興味があればぜひ一度VASILYに遊びに来てください。VASILYでは一緒に働ける優秀なエンジニアをお待ちしています。一緒にファッション業界を変えていきましょう！
VASILYのRECURUIT情報はこちら
