Oktatóanyag: Egyoldalas Visual Search-webalkalmazás létrehozása
Figyelmeztetés
2020. október 30-án a Bing Search API-k átkerültek az Azure AI-szolgáltatásokból a Bing Search-szolgáltatásokba. Ez a dokumentáció csak referenciaként érhető el. A frissített dokumentációt a Bing search API dokumentációjában találja. Az új Azure-erőforrások Bing-kereséshez való létrehozásával kapcsolatos utasításokért lásd: Bing Search-erőforrás létrehozása a Azure Marketplace keresztül.
A Bing Visual Search API elemzéseket ad vissza egy képhez. Feltölthet egy képet, vagy megadhat egy URL-címet az egyiknek. Az elemzések vizuálisan hasonló képek, vásárlási források, a képet tartalmazó weblapok és egyebek. A Bing Visual Search API által visszaadott elemzések hasonlóak a Bing.com/images.
Ez az oktatóanyag bemutatja, hogyan terjeszthet ki egy egyoldalas webalkalmazást a Bing Image Search API-hoz. Az oktatóanyag megtekintéséhez vagy az itt használt forráskód lekéréséhez lásd : Oktatóanyag: Egyoldalas alkalmazás létrehozása a Bing Image Search API-hoz.
Az alkalmazás teljes forráskódja (a Bing Visual Search API használatára való kiterjesztése után) elérhető a GitHubon.
Előfeltételek
Azure-erőforrás létrehozása
Kezdje el használni a Bing Visual Search API-t az alábbi Azure-erőforrások egyikének létrehozásával:
- A Azure Portal keresztül érhető el, amíg el nem törli az erőforrást.
- Válassza ki a tarifacsomagot
S9.
- A Azure Portal keresztül érhető el, amíg el nem törli az erőforrást.
- Használja ugyanazt a kulcsot és végpontot az alkalmazásokhoz több Azure AI-szolgáltatásban.
Hívja meg a Bing Visual Search API-t, és kezelje a választ
Szerkessze a Bing Image Search oktatóanyagot, és adja hozzá a következő kódot az <script> elem végéhez (és a záró </script> címke előtt). A következő kód kezeli az API vizuális keresési válaszát, végigvezeti az eredményeket, és megjeleníti azokat:
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"});
}
}
}
}
}
A következő kód egy keresési kérést küld az API-nak egy eseményfigyelő használatával a hívásához 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);
}
Megállapítási jogkivonat rögzítése
Adja hozzá a következő kódot az searchItemsRenderer objektumhoz. Ez a kód hozzáad egy hasonló keresése hivatkozást, amely meghívja a bingVisualSearch függvényt, ha rákattintanak. A függvény argumentumként kapja meg a imageInsightsToken függvényt.
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
Hasonló képek megjelenítése
Adja hozzá a következő HTML-kódot a 601. sorban. Ez a kód hozzáad egy elemet a Bing Visual Search API-hívás eredményeinek megjelenítéséhez:
<div id="insights">
<h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
<div id="_insights" style="display: none"></div>
</div>
A rendelkezésre álló új JavaScript-kódok és HTML-elemek segítségével a keresési eredmények egy hasonló keresése hivatkozással jelennek meg. Kattintson a hivatkozásra a kiválasztott képhez hasonló képeket tartalmazó Hasonló szakasz feltöltéséhez. Lehetséges, hogy ki kell bontania a Hasonló szakaszt a képek megjelenítéséhez.