Esercitazione: Creare un'app Web a pagina singola per la ricerca visuale

L'API Ricerca visiva Bing restituisce informazioni dettagliate per un'immagine. Puoi caricare un'immagine o fornire un URL per una. Gli approfondimenti sono immagini visivamente simili, fonti di acquisto, siti web che includono l'immagine e altro ancora. Le informazioni dettagliate restituite dall'API Ricerca visiva Bing sono simili a quelle visualizzate in 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 usato qui, vedere Esercitazione: Creare un'app a pagina singola per l'API Ricerca immagini Bing.

Il codice sorgente completo per questa applicazione (dopo averlo esteso per l'uso dell'API Ricerca visiva Bing) è disponibile in GitHub.

Prerequisiti

Creare una risorsa di Azure

Iniziare a usare l'API Ricerca visiva Bing creando una delle risorse di Azure seguenti:

risorsa ricerca Bing v7

• Disponibile tramite il portale di Azure fino a quando non si elimina la risorsa.
• Selezionare il piano tariffario S9.

risorsa multiservizio

• Disponibile tramite il portale di Azure fino a quando non si elimina la risorsa.
• 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 il tutorial della ricerca immagini di Bing e aggiungere il codice seguente alla fine dell'elemento <script> (e prima del tag di chiusura </script>). Il codice seguente gestisce una risposta di ricerca visiva dall'API, scorre i 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);
}

Catturare un token di approfondimenti

Aggiungere il codice seguente all'oggetto searchItemsRenderer. Questo codice aggiunge un collegamento trovare un collegamento simile che chiama la funzione bingVisualSearch quando si fa clic. La funzione riceve il 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 visualizzare i risultati della chiamata 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>

Con tutti i nuovi elementi HTML e codice JavaScript in atto, i risultati della ricerca vengono visualizzati con un collegamento trova simile. Fare clic sul collegamento per popolare la sezione simile con immagini simili a quella selezionata. Potrebbe essere necessario espandere la sezione Similar per visualizzare le immagini.

Passaggi successivi