チュートリアル:Visual Search のシングルページ Web アプリを作成する
警告
2020 年 10 月 30 日に、Bing Search API は Azure AI サービスから Bing Search サービスに移行されました。 このドキュメントは、参考用としてのみ提供されています。 更新されたドキュメントについては、Bing search API のドキュメントを参照してください。 Bing 検索用の新しい Azure リソースを作成する手順については、「Azure Marketplace から Bing Search リソースを作成する」を参照してください。
Bing Visual Search API は、画像に関する分析情報を返します。 画像をアップロードするか、画像の URL を指定することができます。 分析情報とは、視覚的に似ている画像、ショッピング ソース、その画像が含まれる Web ページなどです。 Bing Visual Search API によって返される分析情報は、Bing.com/images に表示される情報と似ています。
このチュートリアルでは、Bing Image Search API 用にシングルページ Web アプリを拡張する方法について説明します。 そのチュートリアルを見たり、ここで使用されるソース コードを取得したりするには、「チュートリアル:Bing Image Search API を使用して単一ページのアプリを作成する」をご覧ください。
このアプリケーションの完全なソース コード (Bing Visual Search API を使用するように拡張した後のもの) は、GitHub で入手できます。
前提条件
Azure リソースを作成する
次のいずれかの Azure リソースを作成して、Bing Visual Search API の使用を開始します。
- ご自身でリソースを削除するまでは Azure portal からご利用いただけます。
S9価格レベルを選択します。
- ご自身でリソースを削除するまでは Azure portal からご利用いただけます。
- 複数の Azure AI サービス全体で同じキーとエンドポイントをアプリケーションに使用します。
Bing Visual Search API を呼び出して応答を処理する
Bing Image Search のチュートリアルを編集し、<script> 要素の最後 (終了 </script> タグの前) に、次のコードを追加します。 次のコードでは、API からの Visual Search の応答を処理し、結果を反復処理して、それらを表示します。
function handleVisualSearchResponse(){
if(this.status !== 200){
console.log(this.responseText);
return;
}
let json = this.responseText;
let response = JSON.parse(json);
for (let i =0; i < response.tags.length; i++) {
let tag = response.tags[i];
if (tag.displayName === '') {
for (let j = 0; j < tag.actions.length; j++) {
let action = tag.actions[j];
if (action.actionType === 'VisualSearch') {
let html = '';
for (let k = 0; k < action.data.value.length; k++) {
let item = action.data.value[k];
let height = 120;
let width = Math.max(Math.round(height * item.thumbnail.width / item.thumbnail.height), 120);
html += "<img src='"+ item.thumbnailUrl + "&h=" + height + "&w=" + width + "' height=" + height + " width=" + width + "'>";
}
showDiv("insights", html);
window.scrollTo({top: document.getElementById("insights").getBoundingClientRect().top, behavior: "smooth"});
}
}
}
}
}
次のコードでは、検索要求を API に送信し、イベント リスナーを使用して handleVisualSearchResponse() を呼び出します。
function bingVisualSearch(insightsToken){
let visualSearchBaseURL = 'https://api.cognitive.microsoft.com/bing/v7.0/images/visualsearch',
boundary = 'boundary_ABC123DEF456',
startBoundary = '--' + boundary,
endBoundary = '--' + boundary + '--',
newLine = "\r\n",
bodyHeader = 'Content-Disposition: form-data; name="knowledgeRequest"' + newLine + newLine;
let postBody = {
imageInfo: {
imageInsightsToken: insightsToken
}
}
let requestBody = startBoundary + newLine;
requestBody += bodyHeader;
requestBody += JSON.stringify(postBody) + newLine + newLine;
requestBody += endBoundary + newLine;
let request = new XMLHttpRequest();
try {
request.open("POST", visualSearchBaseURL);
}
catch (e) {
renderErrorMessage("Error performing visual search: " + e.message);
}
request.setRequestHeader("Ocp-Apim-Subscription-Key", getSubscriptionKey());
request.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
request.addEventListener("load", handleVisualSearchResponse);
request.send(requestBody);
}
分析情報トークンをキャプチャする
次のコードを searchItemsRenderer オブジェクトに追加します。 このコードは、クリックされたときに bingVisualSearch 関数を呼び出す find similar リンクを追加します。 この関数は引数として imageInsightsToken を受け取ります。
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
類似した画像を表示する
次の HTML コードを 601 行目に追加します。 このマークアップ コードでは、Bing Visual Search API 呼び出しの結果を表示するための要素が追加されます。
<div id="insights">
<h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
<div id="_insights" style="display: none"></div>
</div>
新しい JavaScript コードと HTML 要素をすべて配置すると、検索結果が find similar リンクと共に表示されます。 このリンクをクリックすると、選択した画像に類似した画像が [類似] セクションに表示されます。 場合によっては、画像を表示するために [類似] セクションを展開する必要があります。