Tutorial: Erstellen einer Single-Page-Web-App für die visuelle Suche
Warnung
Am 30. Oktober 2020 wurden die Bing-Suche-APIs aus den Azure KI Services in die Bing-Suchdienste verschoben. Diese Dokumentation wird nur zu Referenzzwecken bereitgestellt. Eine aktualisierte Dokumentation finden Sie in der Dokumentation zu den Bing-Suche-APIs. Anweisungen zum Erstellen neuer Azure-Ressourcen für die Bing-Suche finden Sie unter Erstellen einer Ressource für die Bing-Suche über Azure Marketplace.
Die API für die visuelle Bing-Suche gibt Erkenntnisse für ein Bild zurück. Sie können entweder ein Bild hochladen oder eine URL für ein Bild eingeben. Erkenntnisse sind visuell ähnliche Bilder, Einkaufsquellen, Webseiten, auf denen das Bild vorkommt, und Ähnliches. Die von der API für die visuelle Bing-Suche zurückgegebenen Erkenntnisse ähneln den Ergebnissen auf „Bing.com/images“.
In diesem Tutorial erfahren Sie, wie Sie eine Single-Page-Web-App für die Bing-Bildersuche-API erweitern. Das Tutorial und den hier verwendeten Quellcode finden Sie unter Tutorial: Erstellen einer einseitigen Web-App mit der Bing-Bildersuche-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.
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:
- Verfügbar über das Azure-Portal, bis Sie die Ressource löschen.
- Wählen Sie den
S9-Tarif aus.
- Verfügbar über das Azure-Portal, bis Sie die Ressource löschen.
- Verwenden Sie in allen Azure KI Services-Instanzen denselben Schlüssel und Endpunkt für Ihre Anwendungen.
Aufrufen der API für die visuelle Bing-Suche und Verarbeiten der Antwort
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. Der folgende Code verarbeitet die Antwort einer visuellen Suche von 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 und verwendet einen Ereignislistener, um handleVisualSearchResponse() aufzurufen:
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 Auswertungstokens
Fügen Sie den folgenden Code zum Objekt searchItemsRenderer hinzu. Dieser Code fügt einen Link find similar hinzu, mit dem durch Klicken die Funktion bingVisualSearch aufgerufen wird. Die Funktion empfängt imageInsightsToken als Argument.
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
Anzeigen ähnlicher Bilder
Fügen Sie den folgenden HTML-Code in Zeile 601 hinzu. Dieser Markupcode fügt ein Element hinzu, mit dem die Ergebnisse des Aufrufs der API für die visuelle Bing-Suche angezeigt werden:
<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. Klicken Sie auf den Link, um den Abschnitt Similar mit Bildern zu füllen, die dem ausgewählten Bild ähneln. Möglicherweise müssen Sie den Abschnitt Similar erweitern, um die Bilder anzuzeigen.