Esercitazione: Creare un'app Web a pagina singola con Ricerca visiva
Avviso
Il 30 ottobre 2020 le API Ricerca Bing sono state spostate dai servizi di intelligenza artificiale di Azure ai servizi di Ricerca Bing. Questa documentazione viene fornita solo per riferimento. Per la documentazione aggiornata, vedere la documentazione dell'API ricerca Bing. Per istruzioni sulla creazione di nuove risorse di Azure per la ricerca Bing, vedere Creare una risorsa Ricerca Bing tramite il Azure Marketplace.
L'API Ricerca visiva Bing restituisce informazioni dettagliate relative a un'immagine. È possibile caricare un'immagine o specificarne l'URL. Le informazioni dettagliate sono immagini visivamente simili, luoghi di acquisto degli oggetti raffigurati nelle immagini, pagine Web che includono l'immagine e altro ancora. Le informazioni dettagliate restituite dall'API Ricerca visiva Bing sono simili a quelle visualizzate nel sito Bing.com/images.
Questa esercitazione illustra come estendere un'app Web a pagina singola per l'API Ricerca immagini Bing. Per visualizzare l'esercitazione o ottenere il codice sorgente utilizzato qui, vedere Esercitazione : Creare un'app a pagina singola con l'API Ricerca immagini Bing.
Il codice sorgente completo per questa applicazione, estesa in modo che usi l'API Ricerca visiva Bing, è disponibile in GitHub.
Prerequisiti
Creare una risorsa di Azure
Per iniziare a usare l'API Ricerca visiva Bing, creare una delle seguenti risorse di Azure:
- disponibile tramite il portale di Azure fino a quando la risorsa non viene eliminata.
- Selezionare il piano tariffario
S9.
- disponibile tramite il portale di Azure fino a quando la risorsa non viene eliminata.
- Usare la stessa chiave e lo stesso endpoint per le applicazioni in più servizi di intelligenza artificiale di Azure.
Chiamare l'API Ricerca visiva Bing e gestire la risposta
Modificare l'esercitazione su Ricerca immagini Bing e aggiungere il codice seguente alla fine dell'elemento <script> e prima del tag </script> di chiusura. Il codice seguente gestisce una risposta dell'API Ricerca visiva, esegue un'iterazione sui risultati e li visualizza:
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"});
}
}
}
}
}
Il codice seguente invia una richiesta di ricerca all'API usando un listener di eventi per chiamare 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);
}
Acquisire il token imageInsightsToken
Aggiungere il codice seguente all'oggetto searchItemsRenderer. Questo codice aggiunge un collegamento find similar che chiama la funzione bingVisualSearch quando si fa clic. La funzione riceve imageInsightsToken come argomento.
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
Visualizzare immagini simili
Aggiungere il codice HTML seguente alla riga 601. Questo codice di markup aggiunge un elemento per la visualizzazione dei risultati della chiamata all'API Ricerca visiva Bing:
<div id="insights">
<h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
<div id="_insights" style="display: none"></div>
</div>
Dopo avere inserito tutto il nuovo codice JavaScript e gli elementi HTML, è possibile usare il collegamento find similar per visualizzare i risultati delle ricerche. Fare clic sul collegamento per popolare la sezione Similar con immagini simili a quella selezionata. Può essere necessario espandere la sezione Similar per mostrare le immagini.