Samouczek: tworzenie jednostronicowej aplikacji internetowej wyszukiwania wizualnego

Artykuł
03/27/2020

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 .

Zasób z wieloma usługami

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.

Następne kroki

Samouczek: przycinanie obrazu za pomocą zestawu SDK wyszukiwania wizualnego Bing dla języka C#

Share via