Erstellen einer Single-Page-Web-App für die visuelle SucheCreate a Visual Search single-page web app

Die API für die visuelle Bing-Suche gibt Erkenntnisse für ein Bild zurück.The Bing Visual Search API returns insights for an image. Sie können entweder ein Bild hochladen oder eine URL für ein Bild eingeben.You can either upload an image or provide a URL to one. Erkenntnisse sind visuell ähnliche Bilder, Einkaufsquellen, Webseiten, auf denen das Bild vorkommt, und Ähnliches.Insights are visually similar images, shopping sources, webpages that include the image, and more. Die von der API für die visuelle Bing-Suche zurückgegebenen Erkenntnisse ähneln den Ergebnissen auf „Bing.com/images“.Insights returned by the Bing Visual Search API are similar to ones shown on Bing.com/images.

In diesem Tutorial erfahren Sie, wie Sie eine Single-Page-Web-App für die Bing-Bildersuche-API erweitern.This tutorial explains how to extend a single-page web app for the Bing Image Search API. Das Tutorial und den hier verwendeten Quellcode finden Sie unter Tutorial: Erstellen einer einseitigen Web-App mit der Bing-Bildersuche-API.To view that tutorial or get the source code used here, see Tutorial: Create a single-page app for the Bing Image Search API.

Der vollständige Quellcode für diese Anwendung (nach Erweiterung für die Verwendung der API für die visuelle Bing-Suche) steht auf GitHub zur Verfügung.The full source code for this application (after extending it to use the Bing Visual Search API), is available on GitHub.

VoraussetzungenPrerequisites

Sie benötigen ein Cognitive Services-API-Konto mit Zugriff auf die Bing-Suche-APIs.You must have a Cognitive Services API account with access to the Bing Search APIs. Zum Fortsetzen benötigen Sie den Zugriffsschlüssel, der nach dem Erstellen eines Abonnements im Tarif „S9“ bereitgestellt wurde (siehe Cognitive Services-Preise – Bing-Suche-API).Before continuing, you will need the access key provided after starting a subscription at S9 price tier as shown in Cognitive Services Pricing - Bing Search API.

So erstellen Sie ein Abonnement im Azure-Portal:To start a subscription in Azure portal:

  1. Geben Sie oben im Azure-Portal im Suchfeld Search resources, services, and docs den Suchbegriff „BingSearchV7“ ein.Enter 'BingSearchV7' in the text box at the top of the Azure portal that says Search resources, services, and docs.
  2. Wählen Sie unter „Marketplace“ in der Dropdownliste Bing Search v7 aus.Under Marketplace in the drop-down list, select Bing Search v7.
  3. Geben Sie Name für die neue Ressource ein.Enter Name for the new resource.
  4. Wählen Sie das Abonnement Pay-As-You-Go aus.Select Pay-As-You-Go subscription.
  5. Wählen Sie den Tarif S9 aus.Select S9 pricing tier.
  6. Klicken Sie auf Enable, um das Abonnement zu erstellen.Click Enable to start the subscription.

Aufrufen der API für die visuelle Bing-Suche und Verarbeiten der AntwortCall the Bing Visual Search API and handle the response

Bearbeiten Sie das Tutorial für die Bing-Bildersuche, und fügen Sie am Ende des Elements <script> (und vor dem schließenden Tag </script>) den folgenden Code hinzu.Edit the Bing Image Search tutorial and add the following code to the end of the <script> element (and before the closing </script> tag). Der folgende Code verarbeitet die Antwort einer visuellen Suche von der API, durchläuft die Ergebnisse und zeigt sie an:The following code handles a visual search response from the API, iterates through the results, and displays them:

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

Der folgende Code sendet eine Suchanforderung an die API und verwendet einen Ereignislistener, um handleVisualSearchResponse() aufzurufen:The following code sends a search request to the API, using an event listener to call 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);
}

Erfassen des AuswertungstokensCapture insights token

Fügen Sie den folgenden Code zum Objekt searchItemsRenderer hinzu.Add the following code to the searchItemsRenderer object. Dieser Code fügt einen Link find similar hinzu, mit dem durch Klicken die Funktion bingVisualSearch aufgerufen wird.This code adds a find similar link that calls the bingVisualSearch function when clicked. Die Funktion empfängt imageInsightsToken als Argument.The function receives the imageInsightsToken as an argument.

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

Anzeigen ähnlicher BilderDisplay similar images

Fügen Sie den folgenden HTML-Code in Zeile 601 hinzu.Add the following HTML code at line 601. Dieser Markupcode fügt ein Element hinzu, mit dem die Ergebnisse des Aufrufs der API für die visuelle Bing-Suche angezeigt werden:This markup code adds an element to display the results of the Bing Visual Search API call:

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

Mit dem neuen JavaScript-Code und den HTML-Elementen werden Suchergebnisse mit einem Link find similar angezeigt.With all the new JavaScript code and HTML elements in place, search results are displayed with a find similar link. Klicken Sie auf den Link, um den Abschnitt Similar mit Bildern zu füllen, die dem ausgewählten Bild ähneln.Click the link to populate the Similar section with images similar to the one you picked. Möglicherweise müssen Sie den Abschnitt Similar erweitern, um die Bilder anzuzeigen.You may have to expand the Similar section to show the images.

Nächste SchritteNext steps