Zelfstudie: Een Visual Search-web-app met één pagina maken

Artikel
03/27/2020

Waarschuwing

Op 30 oktober 2020 zijn de Zoeken in Bing API's verplaatst van Azure AI-services naar Zoeken in Bing Services. Deze documentatie is alleen bedoeld ter referentie. Zie de bing-documentatie voor zoeken-API voor bijgewerkte documentatie. Zie Een Zoeken in Bing-resource maken via de Azure Marketplace voor instructies over het maken van nieuwe Azure-resources voor Bing Search.

Bing Visual Search-API retourneert inzichten over een afbeelding. U kunt een afbeelding uploaden of een URL naar een afbeelding opgeven. Inzichten zijn visueel vergelijkbare afbeeldingen, winkelbronnen, webpagina's die de afbeelding bevatten, enzovoort. Inzichten die door de Bing Visual Search-API worden geretourneerd, zijn vergelijkbaar met die van Bing.com/images.

In deze zelfstudie wordt uitgelegd hoe u een web-app met één pagina kunt uitbreiden voor gebruik met de Bing Video Search-API. Als u die zelfstudie wilt bekijken of de broncode wilt downloaden die in de zelfstudie wordt gebruikt, raadpleegt u Zelfstudie: Een app van één pagina maken met de Bing Image Search-API.

De volledige broncode voor deze toepassing (na uitbreiding van de toepassing voor het gebruik van de Bing Visual Search-API) is beschikbaar op GitHub.

Vereisten

Een Azure-resource maken

Begin met het gebruik van de Bing Visual Search-API door een van de volgende Azure-resources te maken:

Bing Search v7-resource

Beschikbaar via de Azure-portal totdat u de resource verwijdert.
Controleer de prijscategorie S9.

Resource met meerdere services

Beschikbaar via de Azure-portal totdat u de resource verwijdert.
Gebruik dezelfde sleutel en hetzelfde eindpunt voor uw toepassingen, in meerdere Azure AI-services.

De Bing Visual Search-API aanroepen en het antwoord verwerken

Bewerk de zelfstudie Bing Image Search en voeg de volgende code toe aan het einde van het element <script> (vóór de afsluitende tag </script>). Met de volgende code wordt een antwoord van de API op een visuele zoekopdracht verwerkt, worden de resultaten doorlopen en worden ze daarna weergegeven:

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"});
                }
            }
        }
    }
}

Met de volgende code wordt een zoekopdracht naar de API verzonden, met behulp van een gebeurtenislistener om handleVisualSearchResponse() aan te roepen:

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);
}

Inzichttoken vastleggen

Voeg de volgende code toe aan het object searchItemsRenderer. Deze code voegt de koppeling find similar toe (vergelijkbare zoeken) die de bingVisualSearch-functie aanroept wanneer erop wordt geklikt. De functie ontvangt het imageInsightsToken als argument.

html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");

Vergelijkbare afbeeldingen weergeven

Voeg de volgende HTML-code toe op regel 601. Deze code voegt een element toe voor het weergeven van de resultaten van de Bing Visual Search-API-aanroep:

<div id="insights">
    <h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
    <div id="_insights" style="display: none"></div>
</div>

Met alle nieuwe JavaScript-code en HTML-elementen op hun plaats, worden zoekresultaten weergegeven met een koppeling find similar (vergelijkbare zoeken). Klik op koppeling om de sectie Similar (vergelijkbaar) te vullen met afbeeldingen die lijken op de afbeelding die u hebt gekozen. Mogelijk moet u de sectie Similar uitvouwen om de afbeeldingen weer te geven.

Volgende stappen

Zelfstudie: Een afbeelding bijsnijden met de Bing Visual Search-SDK voor C#

Delen via