本稿の前提として、Image Influence APIの解説ページが全てです。かなり丁寧でわかりやすいです。
Image Influence APIでできること
本家ドキュメントから引用させて頂きます。
Image Influence APIは、画像の”影響度”を測り、多くの人に注目されやすい画像の判別に利用します。最終的には全ての種類の画像に対応したいのですが、まずは肉の画像にフォーカスを当てています。
との事。自分好みのモデルを作るには結構な画像を用意する必要がありますので、本稿では最初から用意されている肉の画像判定用のモデルを利用させて頂きます。
APIKEYの取得
各API解説ページの一番下に、APIを使うためのAPIKEY発行ボタンがあります。利用規約を確認・同意した後、メールアドレス承認→APIKEY受信の流れで、APIKEYを取得します。
注意点
同じEmailアドレスで他のサービスのAPIKEYを取得した場合、そのEmailアドレスに承認情報が紐付けられます。退会申請をすると、紐付けられているAPIKEYすべてが利用できなくなりますので、再度APIKEYを発行する必要があります。
簡単な解説
全文
以下の通りです。
html
<input id="imageInfluence__img" type="file"/>
<button id="imageInfluence__request" type="button">肉の画像を評価する</button>
<p id="influence__score"></p>
JavaScript
/*---------------------------------------*/
/* HTML(だけ)の読み込みが完了したら */
/*---------------------------------------*/
window.addEventListener('DOMContentLoaded',()=>{
//- イベントリスナー登録
document.getElementById('imageInfluence__request').addEventListener('click',handler_request_influence);
});
/*---------------------------------------*/
/* 画像の影響力をリクエスト */
/*---------------------------------------*/
function handler_request_influence(ev){
/*---------------------------------------*/
/* 画像取得 */
/*---------------------------------------*/
//- ファイル取得
const file = document.getElementById('imageInfluence__img').files[0];
//- 画像タイプを確認(厳密にはpng,jpg,bmp,gif形式で3MB以内に制限)
if(!file.type.match(/^image/)) return false;
/*---------------------------------------*/
/* リクエスト用パラメーター設定 */
/*---------------------------------------*/
let formdata = new FormData();
//- imagefileパラメーター
formdata.append('imagefile',file);
//- apikeyパラメーター
formdata.append('apikey','取得したAPIKEY');
//- predictパラメーター 送信する画像の点数を予想して送信
formdata.append('predict',1);
/*---------------------------------------*/
/* リクエスト */
/*---------------------------------------*/
fetch('https://api.a3rt.recruit-tech.co.jp/image_influence/v1/meat_score',{
method: 'post',
body: formdata,
}).then(response => {
//- レスポンス取得
response.json().then(data => {
//- 評価点
const score = data.result.score;
//- 出力
document.getElementById('influence__score').innerHTML = score;
});
});
}
解説
エンドポイントに対してリクエストできるパラメーターは、apikey,predic,imagefileの３つで、すべて必須のパラメーターになっています。predictは自分の予想点で、0~9の任意の点数を指定します。
JavaScriptで気をつけるのは、imagefileパラメーターの指定方法です。
imagefileパラメーターは画像ファイル自体を送信する必要がありますので、HTML5から利用できるformdataクラスを利用してパラメーターをセットします。
# ファイルを取得して、
const file = document.getElementById('imageInfluence__img').files[0];
# formdataクラスを利用してパラメーターをセット
let formdata = new FormData();
formdata.append('imagefile',file);
# apikeyとpredictもfromdataにセット
formdata.append('apikey','<取得したAPIKEY>');
formdata.appedn('predict','<予想する点数>');
リクエストできる画像は3MB以下のpng,jpg,bmp,gif形式とうい制限がありますので、実装には例外処理を入れてください。
リクエストするパラメーターを設定したformdataインスタンスを生成したら、後は好きな方法でリクエストします。
# jQueryのajaxを利用する場合、dataにformdataをセット
$.ajax({
method: 'post',
url: <エンドポイント>,
data: formdata,
processData: false,
contentType: false,
}).done(response => {
console.log(response);
})
# fetchを利用する場合、bodyにformdataをセット
fetch(<エンドポイント>,{
method: 'post',
body: formdata,
}).then(response => {
//- response.json()はPromiseを返すので解決を待って表示
response.json().then(data => {
console.log(data);
})
})
上記のような感じでしょうか。
所感
以上でImage Influence APIの解説(リクエスト編)は終了です。
実際に使ってみるとわかりますが、あくまでも画像の「影響力」を判定することになっていますので、「どちらの写真がより反応があるか？」とった機会に利用してみてはいかがでしょうか？
