Lernprogramm: Erstellen einer einzelseitigen Visual Search-Web-App

Die Bing Visual Search-API gibt Einblicke für ein Bild zurück. Sie können entweder ein Bild hochladen oder eine URL zu einem angeben. Einblicke sind visuell ähnliche Bilder, Einkaufsquellen, Webseiten, die das Bild enthalten, und vieles mehr. Einblicke, die von der Bing Visual Search-API zurückgegeben werden, ähneln denen, die auf Bing.com/images angezeigt werden.

In diesem Lernprogramm wird erläutert, wie Sie eine einzelseitige Web-App für die Bing-Bildsuche-API erweitern. Informationen zum Anzeigen dieses Lernprogramms oder zum Abrufen des hier verwendeten Quellcodes finden Sie im Lernprogramm: Erstellen einer Einzelseiten-App für die Bing-Bildsuche-API.

Der vollständige Quellcode für diese Anwendung (nach dem Erweitern der Bing Visual Search-API) ist auf GitHub verfügbar.

Voraussetzungen

Erstellen einer Azure-Ressource

Beginnen Sie mit der Verwendung der API für die visuelle Bing-Suche, indem Sie eine der folgenden Azure-Ressourcen erstellen:

Ressource für Bing-Suche v7

• Verfügbar über das Azure-Portal, bis Sie die Ressource löschen.
• Wählen Sie die S9-Preisstufe aus.

Ressource für mehrere Dienste

• Verfügbar über das Azure-Portal, bis Sie die Ressource löschen.
• Verwenden Sie denselben Schlüssel und Endpunkt für Ihre Anwendungen in mehreren Azure AI-Diensten.

Rufen Sie die Bing Visual Search-API auf und verarbeiten Sie die Antwort

Bearbeiten Sie das Lernprogramm für die Bing-Bildersuche, und fügen Sie am Ende des <script> Elements (und vor dem schließenden </script> Tag) den folgenden Code hinzu. Der folgende Code behandelt eine visuelle Suchantwort aus der API, durchläuft die Ergebnisse und zeigt sie an:

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, wobei ein Ereignislistener zum Aufrufen handleVisualSearchResponse()verwendet wird:

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 Insights-Tokens

Fügen Sie dem searchItemsRenderer Objekt den folgenden Code hinzu. Dieser Code fügt einen Ähnliches finden Link hinzu, der die bingVisualSearch Funktion aufruft, wenn darauf geklickt wird. Die Funktion empfängt das imageInsightsToken Argument.

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

Ähnliche Bilder anzeigen

Fügen Sie den folgenden HTML-Code in Zeile 601 hinzu. Dieser Markupcode fügt ein Element hinzu, um die Ergebnisse des Bing Visual Search-API-Aufrufs anzuzeigen:

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

Da alle neuen JavaScript-Code- und HTML-Elemente vorhanden sind, werden die Suchergebnisse mit einem Ähnliche finden Link angezeigt. Klicken Sie auf den Link, um den Abschnitt "Ähnlich " mit Bildern zu füllen, die dem von Ihnen ausgewählten Bild ähneln. Möglicherweise müssen Sie den Abschnitt "Ähnlich " erweitern, um die Bilder anzuzeigen.

Nächste Schritte