Självstudie: Skapa en enkelsidig webbapp för visuell sökning
Varning
Den 30 oktober 2020 flyttades Bing-sökning-API:erna från Azure AI-tjänster till Bing-sökning Services. Den här dokumentationen tillhandahålls endast som referens. Uppdaterad dokumentation finns i dokumentationen för API:et för Bing-sökning. Anvisningar om hur du skapar nya Azure-resurser för Bing-sökning finns i Skapa en Bing-sökning resurs via Azure Marketplace.
API:et för visuell sökning i Bing returnerar insikter för en bild. Du kan antingen ladda upp en bild eller ange en URL till en. Insikter är visuellt liknande bilder, shoppingkällor, webbsidor som innehåller bilden med mera. Insikter som returneras av API:et för visuell sökning i Bing liknar dem som visas på Bing.com/images.
Den här självstudien beskriver hur du utökar en enkelsidig webbapp för API:et för bildsökning i Bing. Om du vill visa den självstudien eller hämta källkoden som används här kan du läsa Självstudie: Skapa en ensidesapp för API:et för bildsökning i Bing.
Den fullständiga källkoden för det här programmet (efter att det har utökats till att använda API:et för visuell sökning i Bing) är tillgänglig på GitHub.
Förutsättningar
Skapa en Azure-resurs
Börja använda API:et för visuell sökning i Bing genom att skapa någon av följande Azure-resurser:
- Tillgänglig via Azure Portal tills du tar bort resursen.
S9Välj prisnivå.
- Tillgänglig via Azure Portal tills du tar bort resursen.
- Använd samma nyckel och slutpunkt för dina program i flera Azure AI-tjänster.
Anropa API:et för visuell sökning i Bing och hantera svaret
Redigera självstudien bildsökning i Bing och lägg till följande kod i slutet av elementet <script> (och före den avslutande </script> taggen). Följande kod hanterar ett visuellt söksvar från API:et, itererar genom resultaten och visar dem:
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"});
}
}
}
}
}
Följande kod skickar en sökbegäran till API:et med hjälp av en händelselyssnare för att anropa 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);
}
Samla in insikter token
Lägg till följande kod i -objektet searchItemsRenderer . Den här koden lägger till en find similar-länk (sök efter liknande) som anropar bingVisualSearch-funktionen när du klickar på den. Funktionen tar emot imageInsightsToken som ett argument.
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
Visa liknande bilder
Lägg till följande HTML-kod på rad 601. Den här koden lägger till ett element för att visa resultatet av API-anropet för visuell sökning i Bing:
<div id="insights">
<h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
<div id="_insights" style="display: none"></div>
</div>
Med all ny JavaScript-kod och HTML-element på plats visas sökresultatet med en find similar-länk (sök efter liknande). Klicka på länken för att fylla i avsnittet Similar (Liknande) med bilder som liknar dem du valt. Du kan behöva expandera avsnittet Similar (Liknande) för att visa bilderna.