本稿の前提として、Image Search APIの解説ページが全てです。かなり丁寧でわかりやすいです。
Image Search API サンプル
下のインプットフォームに「寝ている猫」とか入力してみてくださいね。
Image Search APIでできること
本家ドキュメントから引用させて頂きます。
画像とテキストの相互検索APIです。
マルチモーダルDeep Learningという技術により画像とテキストの関係を学習することでテキストから画像を検索したり、画像からテキストを検索したりといったことが可能となります。
現在はオリジナルの画像は利用できませんが、サンプルデータでの利用ができます。Image Search APIを利用することで下記のような事ができます。
・自然な言葉で画像を見つけることができます。
・画像をもとに関連する言葉を見つけることができます。
・画像をもとに類似の画像を見つけることができます。
・文章から関連する単語を見つけることができます。
「自然な言葉で画像を見つけることができます。」とあるように、「みかん」「ねこ」といった単語だけではなく、「大きい道路」「日当たりの良い建物」などといった短い文章にもレスポンスがあります。
また画像から、それと類似した画像を探すことも可能で、ぽんぽん類似画像をリクエストすることが可能です。
APIKEYの取得
各API解説ページの一番下に、APIを使うためのAPIKEY発行ボタンがあります。利用規約を確認・同意した後、メールアドレス承認→APIKEY受信の流れで、APIKEYを取得します。
ライセンスについて
表示される画像はCCまたはフリッカーの「No known copyright restrictions」ということです。作者不明のため著作権による制限がないのですが、権利に違反していないことが明確に保証されたものではないので、個人的にはライセンスは明記しておいたほうが良いと思います。
Image Search APIのドキュメントでは、imgタグのalt属性に画像URLとその画像のライセンスを記載しているとのことですので、今回のサンプルでもそれに習って記載しています。
簡単な解説
全文
以下の通りです。
html
<!-- form -->
<input id="imagesearch__query" type="text">
<button id="imagesearch__request" type="button">リクエスト</button>
<!-- result -->
<div id="imagesearch__list"></div>
JavaScript
jQuery(function($){
//- 画像リスト用コンテナ
const $imglist = $('#imagesearch__list');
//- イベントリスナー登録
$('#imagesearch__request').on('click',handler_imagesearch);
$('#imagesearch__list').on('click','img',handler_imagesearch);
//- ハンドラ
function handler_imagesearch(ev){
//- 画像リストを削除
$imglist.html('');
//- 画像クリックか判定
const type = $(ev.target).data('imageid') ? 'image' : 'text';
//- クエリ
const query = (type === 'text') ? $('#imagesearch__query').val() : $(ev.target).data('imageid');
//- リクエスト
$.ajax({
type: 'get',
url: 'https://api.a3rt.recruit-tech.co.jp/image_search/v1/search_by_'+type,
data: {
apikey: '発行されたAPIKEY',
query: query,
},
dataType: 'json'
}).then(response => {
response.result.img.forEach(imgobj => {
//- imgオブジェクトを作って、
const $img = $('<img/>',{
'data-imageid': imgobj.id,
src: imgobj.url,
alt: imgobj.url + ' / ' + imgobj.license,
});
//- 画像リスト用のコンテナに追加。
$imglist.append($img);
});
}).fail((jqXHR,status,err) => {
console.dir(err);
});
}
});
解説
Image Search APIは３つのエンドポイントが用意されています。一つがテキスト検索用、もう一つが画像検索用(画像IDでの検索用)、最後がランダムです。ここではテキストと画像の２つの検索だけご紹介いたします。
２つのエンドポイントに対してリクエストできるパラメーターはapikey,queryの２つで、いずれも必須となっています。
テキスト検索用エンドポイント
エンドポイント
https://api.a3rt.recruit-tech.co.jp/image_search/v1/search_by_text
パラメーター
apikey 発行されたAPIKEYを指定
query 検索したい画像に関連した単語や文章
解説
以下のような感じでテキストから画像をリクエスト出来ます。
JavaScript
//- jqueryのajaxを利用
$.ajax({
type: 'get',
url: 'https://api.a3rt.recruit-tech.co.jp/image_search/v1/search_by_text'
data: {
apikey: '発行されたAPIKEY',
query: '検索したいテキスト',
},
dataType: 'json'
})
レスポンスには、status,message,resultが入っており、リクエストした画像はresult.imgに配列で格納されています。
その中に,id(画像ID)、file_name(画像ファイル名),url(画像URL),license(画像のライセンス)が格納されていますので、繰り返し処理の際にデータを組み合わせて画像を表示させますが、前述したとおりライセンスを明記しておきます。
また、画像検索用用にidも取り出せるように出力するHTMLに紐付けておきましょう。
画像検索用エンドポイント
エンドポイント
https://api.a3rt.recruit-tech.co.jp/image_search/v1/search_by_image
パラメーター
apikey 発行されたAPIKEYを指定
query 画像ID
解説
以下のような感じで類似画像をリクエスト出来ます。
JavaScript
//- jqueryのajaxを利用
$.ajax({
type: 'get',
url: 'https://api.a3rt.recruit-tech.co.jp/image_search/v1/search_by_image'
data: {
apikey: '発行されたAPIKEY',
query: '画像ID',
},
dataType: 'json'
})
テキスト検索やランダム検索等で画像をリクエストすると、レスポンスにはその画像のIDが格納されてきます。そのIDを使って類似画像を抽出することになりますので、IDは後から利用できるようにHTMLなどで必ず画像と紐付けておきましょう。
ポイント
テキスト検索も画像検索も、エンドポイントの末尾(search_by_◯◯)がtextかimageかの違いだけですので、今回紹介しているコードでは、imgタグにimageidのdataセット(data-imageid属性)が登録されているかどうかでエンドポイントとクエリを切り分けています。
所感
以上でImage Search APIの解説(リクエスト編)は終了です。
固有名詞に近い単語には反応しませんが、前述したように、ざっくりとした文章にも反応してくれるので、使っていてとっても楽しいAPIだと感じました。
自分のモデルが作れるようになったらですが、不動産関係や美容関係のお客様に提案してみたいなーと思いました。
実際に試してみたい時
A3RTのソリューションAI その他APIの解説一覧
Image Search APIと時を同じく、A3RTのJavaScript用SDKが公開されました。(GitHub)非同期通信の部分を簡潔にまとめることができるため、とても見通しがよくなります。こういうのは本当にたすかりますね。
