Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Image SearchによるECサイト向け 類似画像検索のベストプラクティス

2,382 views

Published on

Alibaba Cloud Image Searchで自社ECサイトやスマートフォンアプリで
画像認識による商品検索を実現させる方法を整理しています。
Image Searchの概要を理解している開発者/設計者向けの資料となります。

1. 画像を登録する
1-1 同一商品に複数の画像を登録する
1-2 画像にカテゴリを設定する
1-3 画像に属性を設定する
1-4 画像にメタデータを設定する
2. OSSから画像をインポートする
2-1 画像にカスタムヘッダを設定する
2-2 画像をリサイズする
2-3 OSSイベントトリガーを設定する
3. 画像を検索する
3-1 画像の範囲を指定する
3-2 カテゴリを指定する
3-3 検索条件を指定する
3-4 検索結果の数を調節する
3-5 登録済みの画像の類似画像を検索する
4. APIを公開する
4-1 画像検索API化の例

Published in: Technology
  • Be the first to comment

Image SearchによるECサイト向け 類似画像検索のベストプラクティス

  1. 1. ©︎ 2019 SB Cloud Corp. Image SearchによるECサイト向け 類似画像検索のベストプラクティス SBクラウド株式会社 2019年9月19日
  2. 2. ©︎ 2019 SB Cloud Corp. 本書の構成 2 はじめに 本書の扱い・注意点 前提条件 本書で扱われるサービス一覧 用語集 アーキテクチャ 1. 画像を登録する 1-1 同一商品に複数の画像を登録する 1-2 画像にカテゴリを設定する 1-3 画像に属性を設定する 1-4 画像にメタデータを設定する 2. OSSから画像をインポートする 2-1 画像にカスタムヘッダを設定する 2-2 画像をリサイズする 2-3 OSSイベントトリガーを設定する 3. 画像を検索する 3-1 画像の範囲を指定する 3-2 カテゴリを指定する 3-3 検索条件を指定する 3-4 検索結果の数を調節する 3-5 登録済みの画像の類似画像を検索する 4. APIを公開する 4-1 画像検索API化の例
  3. 3. ©︎ 2019 SB Cloud Corp. はじめに 3 ⚫ 本資料では、自社ECサイトやスマートフォンアプリで 画像認識による商品検索を実現させる方法を整理しています。 内容は以下の通りです。 1. Image Searchに画像を登録する 2. Image Searchを利用した類似画像検索APIを公開する ⚫ Alibaba Cloudのプロダクト詳細やHTTPの仕様については解説しておりません ので、各公式ウェブサイトを参照してください。 Image Searchの概要を理解している開発者/設計者向けの資料となります。
  4. 4. ©︎ 2019 SB Cloud Corp. 本書の扱い・注意点 4 ⚫ 本資料では2019年9月時点のサービス内容について解説しています。 最新の情報は以下ウェブサイトにてご確認ください。 ⚫ 資料作成には十分注意しておりますが、資料内の内容と公式ウェブサイト記載の 内容に相違があった場合、公式ウェブサイトの内容を優先とさせて頂きます。 ⚫ 本資料はImage Searchによる画像認識の精度を保証するものではありません。 ご利用いただく際には、十分に評価・検証を実施してください。
  5. 5. ©︎ 2019 SB Cloud Corp. 5 Alibaba Cloudについて ➢ Alibaba Cloud日本アカウントが開設済みであること Image Searchについて ➢ 商品検索モードのインスタンスを購入済みであること ➢ APIはv2を使用 ➢ アクセス頻度(QPS)を超えたImage Searchに対する登録処理及び、検索処理はエラーとなるため、別途プログラム 内にエラー回避処理やエラーハンドリング処理が必要 Image Searchに登録する画像について ➢ OSSツール等を利用してOSSに画像がアップロード可能であること Function Computeについて ➢ 以下のRAMポリシーを有するRAMユーザーが作成済みであり、それぞれのFunction Compute関数において使用でき ることの画像登録関数及び、画像検索関数において使用できること API Gatewayについて ➢ SSL証明書付きのカスタムドメインをバインドしたAPIグループを作成済みであること ➢ 画像検索APIのバックエンドサービスにFunction Compute画像検索関数を使用できること 前提条件 Function Compute RAMポリシー 画像登録関数 ✓ AliyunOSSReadOnlyAccess ✓ AliyunImageSearchFullAccess 画像削除関数 ✓ AliyunImageSearchReadOnlyAccess
  6. 6. ©︎ 2019 SB Cloud Corp. 本書で扱われるサービス一覧 6 カテゴリ サービス名 アイコン サービス概要 仮想サーバー Function Compute フルマネージドのサーバーレス実行環境 AI Image Search ディープラーニングと大規模機械学習技 術に基づくインテリジェントな画像検索 サービス ストレージ OSS Object Storage Service 大容量のデータを低価格で保存できるオ ブジェクトストレージサービス アプリケーションサービス API Gateway API ホスティングサービス マネジメント RAM Resource Access Management 柔軟なアカウント管理・アクセス制御を 実現するサービス 開発者ツール OSSツール OSSを効率的に使用するためのツール
  7. 7. ©︎ 2019 SB Cloud Corp. Image Search API v2 パラメータ一覧 7 パラメータ名 説明 ProductId 1商品を特定するユニークなID PicName ProductIdとPicNameで1画像を特定する画像名 CategoryId 画像の分類を表す数値。設定できる値は次ページ「CategoryId一覧」を参照。 IntAttr 検索フィルタリングに使用できる整数属性 StrAttr 検索フィルタリングに使用できる最大128文字の文字列属性 CustomContent 最大4096文字の画像のメタデータ Region x1、x2、y1、y2 の形式で表される画像の被写体範囲 Num 検索結果の数 • 有効範囲:1〜100(デフォルト:10) Start 検索結果の開始位置 • 有効範囲:0〜499(デフォルト:0) Filter 検索のフィルター条件 • IntAttrでサポートされている演算子は >、>=、<、<=、= • StrAttrでサポートされている演算子は =、!= • 複数条件は AND と OR で接続 SortExprValues 類似度を表すスコア。値が大きいほど検索画像との相関が高い。 Image Search API v2のパラメータの定義は以下の通りです。
  8. 8. ©︎ 2019 SB Cloud Corp. CategoryId一覧 8 CategoryId 説明 0 トップス 1 ドレス 2 ボトムズ 3 バッグ 4 シューズ 5 アクセサリー 6 スナック 7 メイクアップ 8 ボトルドリンク 9 家具 20 おもちゃ 21 下着 22 デジタル機器 88888888 その他
  9. 9. ©︎ 2019 SB Cloud Corp. アーキテクチャ 9 本資料にて解説するAlibaba Cloudのアーキテクチャは以下の通りです。 Image Search OSS Function Compute 画像登録 API GatewayFunction Compute 画像検索 システム管理者 OSSツール RAM ユーザー
  10. 10. ©︎ 2019 SB Cloud Corp. 1. 画像を登録する 1-1 同一商品に複数の画像を登録する 1-2 画像にカテゴリを設定する 1-3 画像に属性を設定する 1-4 画像にメタデータを設定する
  11. 11. ©︎ 2019 SB Cloud Corp. 11 ユーザーが同一商品の向きが異なる画像を検索する場合があります。 1-1 同一商品に複数の画像を登録する 登録 検索 検索結果 横向き画像 正面画像 SortExprValues:高 低 正面画像 ユースケース 課題 登録済みの商品画像が類似画像として判定されない場合があります。1商品につき1画像のみを登録すると、その商品に含まれ る一部の特徴のみが検索されるため、検索の精度にばらつきが出ます。
  12. 12. ©︎ 2019 SB Cloud Corp. 12 同一商品の向きが異なる画像や拡大・縮小された画像を、ProductIdでグルーピングして複数枚登録します。これにより、商品 の多数の特徴が検索されるため、検索の精度が安定します。 1-1 同一商品に複数の画像を登録する 登録 検索 検索結果 横向き画像 正面画像 解決方法 正面画像 背面画像 全体画像 横向き画像 SortExprValues:高 低
  13. 13. ©︎ 2019 SB Cloud Corp. 13 背景に商品以外の物体が写っている画像を登録する場合があります。 1-2 画像にカテゴリを設定する 検索結果 ユースケース 登録 正面画像 全体画像 検出 正面画像 全体画像 CategoryId:20 CategoryId:0 検索 正面画像 課題 商品ではなく、商品以外の物体の特徴が登録される場合があります。画像のCategoryIdが未設定の場合、Image Searchが画 像から検出したCategoryIdが設定されるため、検索の精度にばらつきが出ます。 未設定 未設定 SortExprValues:高 低
  14. 14. ©︎ 2019 SB Cloud Corp. 14 1-2 画像にカテゴリを設定する 検索結果登録 正面画像 全体画像 CategoryId:0 CategoryId:0 検索 正面画像 CategoryIdを設定して画像を登録します。これにより、画像の背景に商品以外の物体が写っていても、CategoryIdを元に商品 の特徴が検索されるため、検索の精度が安定します。 解決方法 SortExprValues:高 低
  15. 15. ©︎ 2019 SB Cloud Corp. 15 1-3 画像に属性を設定する ユーザーが検索結果をフィルタリングする場合があり ます。例えば、検索結果にジャケットのみを表示させ る場合です。 ユースケース ProductI d PicName CategoryI d B B01.jpg 0 C C02.jpg 0 … 0 絞り込み不可 ProductI d PicName CategoryI d A A01.jpg 0 … B B01.jpg 0 登録 検索結果 画像の詳細な分類を定義したIntAttrやStrAttrを設定して画像を登録し ます。これにより、IntAttrやStrAttrを検索条件と検索結果のフィルタ リングに使用することができます。 解決方法 登録 検索結果 ProductI d PicName CategoryI d IntAttr StrAttr B B01.jpg 0 110 Band X C C02.jpg 0 230 Band Z … 0 ProductI d PicName CategoryI d IntAttr StrAttr A A01.jpg 0 110 Band X … B B02.jpg 0 230 Band Z IntAttr定義例 定義 説明 0 Tシャツ/カットソー 1 シャツ/ブラウス … … 100 テーラージャケット 絞り込み可 課題 CategoryIdだけでは商品を詳細に分類できません。
  16. 16. ©︎ 2019 SB Cloud Corp. 16 1-4 画像にメタデータを設定する ユーザーに検索結果に付随して、商品のサムネイル URLや商品の名前・値段・色・サイズなどの商品情報 を送る場合があります。 ユースケース ProductId PicName … B B01.jpg C C02.jpg … 検索結果 商品情報をCustomContentに設定して画像を登録します。これにより、 Image Search内に商品情報を保持することができ、既存システムと連携 せずにECサイトへの組み込みが実現できます。 解決方法 登録 既存システム url image_file_nam e thumbnai_url flg https://xxx.com/B01.ht ml B01.jpg https://xxx.yyy/thumbn ail/B01.jpg 1 item_id name price color size B-B01 ほかほかテーラー ジャケット 1,000 #A52A2A M Band X ほかほかテーラージャケット カテゴリ:テーラージャケット 価格:1,000円 サイズ:M カラー: 1位 ProductI d PicName CustomContent … B B01.jpg { "thumbnailUrl": "https://xxx.yyy/thumbnail/B01.jpg", "itemDescription": { "name": "ほかほかテーラージャケッ ト", "price": "1,000円", "color": "#A52A2A", "size": "M", "url": https://xxx.com/B01.html, "flg": 1 } } C C02.jpg … 検索結果表示例 課題 商品情報を既存システムから取得する必要がありま す。
  17. 17. ©︎ 2019 SB Cloud Corp. 2. 画像を登録する 2-1 画像にカスタムヘッダを設定する 2-2 OSSイベントトリガーを設定する 2-3 画像をリサイズする
  18. 18. ©︎ 2019 SB Cloud Corp. 18 x-oss-meta-item { "ProductId": “B", "PicName": “B01.jpg", "CategoryId": 0, "IntAttr": 230, "StrAttr": “Band X", "customcontent": { "thumbnailUrl": "https://xxx.yyy/thumbnail/B01.jpg", "itemDescription": { "name": "ほかほかテーラージャケット", "price": "1,000円", "color": "#A52A2A", "size": "M", "url": "https://xxx.com/B01.html", "flg": 1 } } } カスタムヘッダ設定例 2-1 画像にカスタムヘッダを設定する OSS上の画像例 B02.jpg B01.jpg … B03.jpg ユースケース OSSにアップロードされた画像をImage Searchに登録する際に、ProductIdやCustomContentなどの商品情報が必要となり ます。 実現方法 OSS上の画像に8KBまでの任意のカスタムヘッダを設定できるため、商品情報を設定して画像をOSSにアップロードします。
  19. 19. ©︎ 2019 SB Cloud Corp. 19 2-2 OSSイベントトリガーを設定する Image SearchOSS Function Compute 画像登録 OSSツール B01.jpg x-oss-meta-item { "ProductId": “B", "PicName": “B01.jpg", "CategoryId": 0, "IntAttr": 230, … ProductId PicName CategoryI d IntAtt r StrAttr CustomContent B B01.jpg 0 230 Band X { "thumbnailUrl": "https://xxx.yyy/thumbnail/B01.jpg", "itemDescription": { "name": "ほかほかテーラージャケット", "price": "1,000円", "color": "#A52A2A", "size": "M", "url": https://xxx.com/B01.html, "flg": 1 } } B01.jpg ユースケース OSSにアップロードされた画像をImage Searchに登録する際に、OSS上の画像のパスが必要となります。OSS上に数多くの 画像がある場合、新しくアップロードされた画像がどれであるかを判別する必要があります。 実現方法 OSSに画像がアップロードされると、Function Computeの画像登録関数を呼び出すOSSイベントトリガーを設定します。画 像登録関数には画像とカスタムヘッダを読み込む処理のほか、Image Searchへの画像登録処理を入れます。これにより、 OSSに画像をアップロードされると、自動でImage Searchに画像と商品情報を登録できます。 OSSイベントトリガーを利用した画像登録フロー図
  20. 20. ©︎ 2019 SB Cloud Corp. 20 2-3 画像をリサイズする 項目 条件値 画像形式 jpg, png サイズ 最大2MB 画素数 横と縦ともに200ピクセル以上1024ピクセル以下 画像の条件 Image Search OSS Function Compute 画像登録 key:B01.jpg process:image/resize,l_1024 リサイズ済み:B01.jpg ユースケース Image Searchに登録できる画像には以下の条件があるため、条件を満たすように、OSS上への画像アップロード時、もしく はImage Searchへの画像登録時に画像を加工する必要があります。 実現方法 OSSのイメージ処理機能によって、画像を長辺が1024ピクセル(短辺は長辺に合わせて自動調整)にリサイズすることがで きます。Function Computeの画像登録関数において、リサイズされた画像を取得します。これにより、リサイズ済みの画像 をImage Searchに登録することができます。 OSSのイメージ処理機能を利用した画像リサイズフロー図
  21. 21. ©︎ 2019 SB Cloud Corp. 3. 画像を検索する 3-1 画像の範囲を指定する 3-2 カテゴリを指定する 3-3 検索条件を指定する 3-4 検索結果の数を調節する 3-5 登録済みの画像の類似画像を検索する
  22. 22. ©︎ 2019 SB Cloud Corp. 3-1 画像の範囲を指定する 22 ユースケース ユーザーが画像の範囲を指定して、画像を検索したい場合があります。例えば洋服のコーディネート全体が写った画像のう ち、ズボンの部分を検索したい場合です。 実現方法 Regionを指定して検索することができます。Regionが未設定の場合、Image Searchが画像から検出したRegionが設定され 画像が検索されます。 検索 検索結果 Region指定 自動検出 元画像 SortExprValues:高 低
  23. 23. ©︎ 2019 SB Cloud Corp. 3-2 カテゴリを指定する 23 ユースケース ユーザーがカテゴリを指定して商品を検索したい場合があります。例えば、洋服を扱うECサイトで商品を検索する場合です。 実現方法 CategoryIdを指定して検索することができます。CategoryIdが未設定の場合、Image Searchが画像から検出した CategoryIdが設定され画像が検索されます。 検索結果登録 検索 CategoryId:0 CategoryId指定 CategoryId:0 自動検出 CategoryId:20
  24. 24. ©︎ 2019 SB Cloud Corp. 3-3 検索条件を指定する 24 ユースケース ユーザーが特定の特徴を持つ商品を検索したい場合があります。例えば、ブランドをあらかじめ指定して検索する場合です。 実現方法 登録した画像に設定済みのIntAttrやStrAttrをもとに、Filterに検索条件を指定して画像を検索することができます。これによ り、特定の特徴、もしくは複数の特徴を持つ画像を検索することができます。 検索結果検索 IntAttr>=100 IntAttr>=100 AND StrAttr=“Band X” 未指定 SortExprValues:高 低
  25. 25. ©︎ 2019 SB Cloud Corp. 3-4 検索結果の数を調節する 25 ユースケース ユーザーに返す検索結果の数を増減させたい場合があります。 実現方法 画像の検索時にNumとStartを指定することで、1度の検索で表示させる検索結果の総量と開始位置を指定できます。未指定の 場合はデフォルト値(Num=10, Start=0)が適応されます。 検索結果検索 Num=10, Start=1 Num=6, Start=2 未指定 SortExprValues:高 低
  26. 26. ©︎ 2019 SB Cloud Corp. 3-5 登録済みの画像の類似画像を検索する 26 ユースケース ユーザーがECサイトまたはスマートフォンアプリにアップロードした画像に対し画像検索がされ、検索結果に表示される登録 済みの画像に対して、さらに検索をかけたい場合があります。例えば、検索結果のTシャツの類似商品を検索する場合です。 実現方法 検索結果のProductIdとPicNameをもとに、類似画像を検索できます。これにより、ユーザーはアップロードした画像に類似 する商品を再帰的に検索することができます。 検索結果検索 アップロード画像 ProductId:006 PicName:006-01.jpg 再検索 SortExprValues:高 低
  27. 27. ©︎ 2019 SB Cloud Corp. 4. APIを公開する 4-1 画像検索API
  28. 28. ©︎ 2019 SB Cloud Corp. 10-1 画像検索API化の例 28 ※パラメータの説明はImage Searchの公式ドキュメントを参照してください 項目 値 リクエストタイプ 一般 プロトコル HTTPS リクエストパス /image/search HTTPメソッド POST リクエストモード パススルー/ マッピング バックエンド サービスタイプ Function Compute リクエストボディタイプ JSON レスポンスボディタイプ JSON 画像検索API定義例 パラメータ名 必須 型 例 Type いいえ 文字列 SearchByPic PicContent 文字列 data:image/jpeg;b ase64,/9… ProductId 文字列 006 PicName 文字列 006-01.jpg CategoryId いいえ 数値 0 Crop いいえ 真偽値 true Region いいえ 数値の配列 [113,386,234,653] Num いいえ 数値 20 Start いいえ 数値 0 Filter いいえ 文字列 IntAttr >= 100 画像検索APIリクエストパラメータ定義例 パラメータ名 型 例 Success 真偽値 true Code 数値 0 Message 文字列 success Head オブジェクト DocsReturn 数値 20 DocsFound 数値 34 PicInfo オブジェクト PicInfoオブジェクトの定義例 CategoryId 数値 0 Region 数値の配列 [145,456,234,763] Auctions オブジェクト の配列 Auctionsオブジェクト配列の定義例 ProductId 文字列 007 PicName 文字列 007-02.jpg CategoryId 数値 0 IntAttr 数値 100 StrAttr 文字列 Band X SortExprValues 文字列 4.8482024 画像検索APIレスポンスパラメータ定義例 Image SearchAPI Gateway Function Compute
  29. 29. ©︎ 2019 SB Cloud Corp. END

×