Samouczek: tworzenie jednostronicowej aplikacji internetowej wyszukiwania wizualnego
Ostrzeżenie
30 października 2020 r. interfejsy API Wyszukiwanie Bing zostały przeniesione z usług Azure AI do usług Wyszukiwanie Bing Services. Ta dokumentacja jest dostarczana tylko do celów referencyjnych. Aby uzyskać zaktualizowaną dokumentację, zobacz dokumentację interfejsu API wyszukiwania Bing. Aby uzyskać instrukcje dotyczące tworzenia nowych zasobów platformy Azure na potrzeby wyszukiwania Bing, zobacz Tworzenie zasobu Wyszukiwanie Bing za pomocą Azure Marketplace.
Interfejs API wyszukiwania wizualnego Bing zwraca szczegółowe informacje dotyczące obrazu. Możesz przekazać obraz lub podać adres URL do jednego. Szczegółowe informacje są wizualnie podobne do obrazów, źródeł zakupów, stron internetowych zawierających obraz i nie tylko. Szczegółowe informacje zwrócone przez interfejs API wyszukiwania wizualnego Bing są podobne do tych wyświetlanych w Bing.com/images.
W tym samouczku wyjaśniono, jak rozszerzyć jednostronicową aplikację internetową dla interfejsu API wyszukiwania obrazów Bing. Aby wyświetlić ten samouczek lub pobrać kod źródłowy użyty tutaj, zobacz Samouczek: tworzenie aplikacji jednostronicowej dla interfejsu API wyszukiwania obrazów Bing.
Pełny kod źródłowy tej aplikacji (po rozszerzeniu go do korzystania z interfejsu API wyszukiwania wizualnego Bing) jest dostępny w usłudze GitHub.
Wymagania wstępne
Tworzenie zasobu platformy Azure
Zacznij korzystać z interfejsu API wyszukiwania wizualnego Bing, tworząc jeden z następujących zasobów platformy Azure:
zasób Wyszukiwanie Bing w wersji 7
- Dostępne za pośrednictwem Azure Portal do momentu usunięcia zasobu.
- Wybierz warstwę cenową
S9.
- Dostępne za pośrednictwem Azure Portal do momentu usunięcia zasobu.
- Użyj tego samego klucza i punktu końcowego dla aplikacji w wielu usługach azure AI.
Wywoływanie interfejsu API wyszukiwania wizualnego Bing i obsługa odpowiedzi
Edytuj samouczek wyszukiwania obrazów Bing i dodaj następujący kod na końcu <script> elementu (i przed tagiem zamykającym </script> ). Poniższy kod obsługuje odpowiedź wyszukiwania wizualnego z interfejsu API, iteruje wyniki i wyświetla je:
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"});
}
}
}
}
}
Poniższy kod wysyła żądanie wyszukiwania do interfejsu API przy użyciu odbiornika zdarzeń do wywołania handleVisualSearchResponse()metody :
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);
}
Przechwytywanie tokenu szczegółowych informacji
Dodaj następujący kod do searchItemsRenderer obiektu. Ten kod dodaje link znajdź podobne, który po kliknięciu wywołuje funkcję bingVisualSearch. Funkcja otrzymuje element imageInsightsToken jako argument.
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
Wyświetlenie podobnych obrazów
Dodaj następujący kod HTML w wierszu 601. Ten kod znaczników dodaje element do wyświetlania wyników wywołania interfejsu API wyszukiwania wizualnego Bing:
<div id="insights">
<h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
<div id="_insights" style="display: none"></div>
</div>
Po umieszczeniu na miejscu całego nowego kodu JavaScript i wszystkich elementów HTML wyniki wyszukiwania są wyświetlane z linkiem znajdź podobne. Kliknij ten link, aby wypełnić sekcję Podobne obrazami podobnymi do obrazu wybranego przez Ciebie. W celu wyświetlenia tych obrazów może być konieczne rozwinięcie sekcji Podobne.