ImageSearchデモツールを作って見た

こんにちは。エンジニアの清水です。

今回、ImageSearchのデモツールを作成しましたので、共有したいと思います。

あくまで、デモツールなのでコードなどもっと綺麗に書いてよとかツッコミどころが

あると思いますが、ご了承ください。

IPhoneから利用することを想定して作成しております。

また、ImageSearchですが1ヶ月間は無償(1QPS/画像10万枚の制限あり)

で利用出来るため、是非皆さんに体感して欲しいです。

 

目次

・構成図

・ImageSearchインスタンスの構築

・OSSのバケット構築

・Roleの作成

・OSSへメタファイルをアップロード

・ImageSearchへ画像をインポート

・ImageSearchTEST

・ECSにアプリを構築

・アプリTEST

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

◻️構成図     ImageSearchにスコープを当てたシンプルな構成にしました。

f:id:sbc_shimizu:20191105164727p:plain

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

◻️ImageSearchインスタンスの構築  ※ImageSearchドキュメント参照

 

1.トップ画面でImageSearchを選択。

2.次の画面で商品画像検索インスタンスを選択。

3.以下の画面が表示される。インスタンス名を入力して今すぐ購入をクリック。

f:id:sbc_shimizu:20191111143111p:plain

 

 

◻️OSSのバケット構築

 

1.トップページより、Object Storage Service(OSS)を選択。

2.バケットを以下のように作成。ImageSearchを作成したリージョンに合わせる。

f:id:sbc_shimizu:20191111144708p:plain

3.バケット内にファイル(フォルダ)を作成。ここではdemoという名で作成。

            

f:id:sbc_shimizu:20191111145200p:plain

4.demoファイル内にImageSearchに後々インポートする為の画像をアップロード。

 ※ImageSearchがインポートできる画像サイズ等の仕様がありますので注意。 仕様はこちらを確認  

  リンク内の注意事項抜粋 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
   ・アップロードする各画像のサイズが 2 MB 以下であること。  

    ・各画像の高さと幅は、どちらも 200 ピクセルから 1024 ピクセルの範囲であること。

  〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 また、画像のアップロード数が多い場合はOSS-Browser利用をお勧めします。

 

◻️Roleの作成 (OSSへアクセスする為の権限付与が目的)

 1.トップページのResource Access Managementを選択。

 2.ロール管理を選択し、新規ロール作成をクリック。

 3.ロール作成画面より、サービスロール→ImageSearchサービスを選択して

  ロール名を入力して作成。

 4.ロール管理を選択した画面より、権限付与ポリシー管理を選択し、

  権限付与ポリシー作成を選択。

    5.空白ポリシーを選択し、以下の画面を参考にポリシー名と内容を記載

f:id:sbc_shimizu:20191111154738p:plain

     ポリシー内容をコピー用に転記。

{
"Version": "1",
"Statement": [
{
"Effect": "Allow",
"Action": [
"oss:GetObject"
],
"Resource": [
"acs:oss:*:*:image-demo-oss/*"
]
}
]
}  

 

6. 2で作成したロールに5で作成したポリシーを付与させる。

 

f:id:sbc_shimizu:20191113141306p:plain


  

◻️OSSへメタファイルをアップロード

 1.OSSのバケット構築の4の項目で画像をアップロードした箇所(/demo)に

  メタファイルをアップロード。

 

  ファイル名:increment.meta   ※必ずこのファイル名にしてください。

  ファイル内の記載例  詳細はこちらを参照

   {"operator":"ADD","item_id":"1000", "cat_id":88888888, "cust_content":"k1:v1,k2:v2,k3:v3", "pic_list":["771001_C01.jpg"]}

 

  補足:cat_idはカテゴリ登録となります。参照URL  

     いくつかカテゴリーが用意されていますが、カテゴリーに当てはならない

     場合は、その他(88888888)を選択ください。 

     記載例の771001_C01.jpgはOSSにアップロードした各画像名になります。

  

f:id:sbc_shimizu:20191113141746p:plain
 

◻️ImageSearchへ画像をインポート

 1. ImageSearchインスタンスの構築で作成したインスタンスをクリック。

 2.以下の画像の右上のインポートをクリック。

 

f:id:sbc_shimizu:20191111191727p:plain

 3.以下のように入力。 

  補足:ARNの箇所はロール作成で作成したロールのロール詳細に記載あり。

     

   f:id:sbc_shimizu:20191113101416p:plain

 

  4. インポート実施

   インポートが失敗した場合は、インポート状態の

   インポート履歴の表示をチェックして原因を確認する。

   上記で注意記載したメタファイル名、画像の仕様外である可能性が高いです。

 

◻️ImageSearchTEST   イメージサーチ単体テスト実施

  ※私がブログ用に確認した時期はTimeOutで使えなかったです。。

  その為、スキップ。一応手段は載せておきます。

  f:id:sbc_shimizu:20191113101922p:plain

 

◻️ECSにアプリを構築

  ソースコードはGithubへアップロードしました。

  ここでは、仕様と注意事項等を解説。

 

 1.必要ツールを準備する。

  Python(v3.7.3)・・・プログラミング

  FLASK(v1.0.2)・・・WEBフレームワーク

       SDK・・・ImageSearch用のSDK 

           aliyun-python-sdk-core 2.13.0
           aliyun-python-sdk-core-v3 2.13.0
           aliyun-python-sdk-imagesearch 1.0.1 

   注意:SDKの解説は公式ドキュメントに記載がありますが、

      そこに記載されているコマンドを入力するとmirrorサイトから

      DLされます。現在mirrorサイトには旧バージョンが保管されている為   

     githubなどから最新バージョンをインストールする必要あり。

     対策は

     pip installコマンドで外部リンク(github)を指定するか、

     ローカルに最新バージョンをDLしてECSへSFTPアップロード等

     FLASKはフォルダ配置ルールがありますので、githubのreadme参照

    

 2.OSSの画像を通常使うURLへ変更させる。

   作成したアプリは被写体に近い画像をBEST3で出力させています。

   ImageSearchの画像へアクセスすることはできません。

   出力画像はOSSの画像となります。

   その為、OSSの画像URLを公開読み取りに変更する必要があります。

   

  

f:id:sbc_shimizu:20191113151546p:plain

 

各画像のプロパティを確認すると以下のようにURLが非公開時とは異なっていることが

確認できます。 このURLを使って作成したアプリは画像を表示させている。

f:id:sbc_shimizu:20191113151610p:plain

  

◻️アプリTEST

 

f:id:sbc_shimizu:20191113152500p:plain