Kurz: Vytvoření jednostránkové webové aplikace vizuálního vyhledávání

Článek
03/27/2020

Upozornění

30. října 2020 se rozhraní API Vyhledávání Bingu přesunula ze služeb Azure AI na Vyhledávání Bingu Services. Tato dokumentace je k dispozici pouze pro referenci. Aktualizovanou dokumentaci najdete v dokumentaci k rozhraní API Bingu pro vyhledávání. Pokyny k vytváření nových prostředků Azure pro vyhledávání Bingu najdete v tématu Vytvoření prostředku Vyhledávání Bingu prostřednictvím Azure Marketplace.

Rozhraní API pro vizuální vyhledávání Bingu vrací přehledy pro obrázek. Můžete buď nahrát obrázek, nebo zadat adresu URL. Přehledy jsou vizuálně podobné obrázky, nákupní zdroje, webové stránky, které obrázek obsahují, a další. Přehledy vrácené rozhraním API pro vizuální vyhledávání Bingu jsou podobné těm, které se zobrazují na Bing.com/images.

Tento kurz vysvětluje, jak rozšířit jednostránkovou webovou aplikaci pro rozhraní API Bingu pro vyhledávání obrázků. Pokud si chcete tento kurz prohlédnout nebo získat zdrojový kód použitý tady, přečtěte si kurz: Vytvoření jednostránkové aplikace pro rozhraní API Bingu pro vyhledávání obrázků.

Úplný zdrojový kód pro tuto aplikaci (po rozšíření rozhraní API pro vizuální vyhledávání Bingu) je k dispozici na GitHubu.

Požadavky

Vytvoření prostředku Azure

Začněte používat rozhraní API pro vizuální vyhledávání Bingu vytvořením jednoho z následujících prostředků Azure:

prostředek Vyhledávání Bingu v7

K dispozici prostřednictvím Azure Portal, dokud prostředek neodstraníte.
Vyberte cenovou S9 úroveň.

Prostředek s více službami

K dispozici prostřednictvím Azure Portal, dokud prostředek neodstraníte.
Pro své aplikace použijte stejný klíč a koncový bod napříč několika službami Azure AI.

Volání rozhraní API pro vizuální vyhledávání Bingu a zpracování odpovědi

Upravte kurz Vyhledávání obrázků Bingu a na konec elementu <script> (a před uzavírací </script> značku) přidejte následující kód. Následující kód zpracuje odpověď vizuálního vyhledávání z rozhraní API, iteruje výsledky a zobrazí 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"});
                }
            }
        }
    }
}

Následující kód odešle požadavek na vyhledávání do rozhraní API pomocí naslouchacího procesu událostí pro volání 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);
}

Zachycení tokenu přehledů

Do objektu searchItemsRenderer přidejte následující kód. Tento kód přidá odkaz find similar (najít podobné), který při kliknutí volá funkci bingVisualSearch. Funkce obdrží imageInsightsToken jako argument .

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

Zobrazení podobných obrázků

Přidejte následující kód HTML na řádek 601. Tento kód značky přidá prvek pro zobrazení výsledků volání rozhraní API pro vizuální vyhledávání Bingu:

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

Když jsou všechny prvky kódu JavaScriptu a HTML na místě, zobrazují se výsledky hledání s odkazem find similar (najít podobné). Kliknutím na odkaz vyplníte sekci Similar (Podobné) obrázky, které se podobají vybranému obrázku. Možná budete muset sekci Similar rozbalit, aby se obrázky zobrazily.

Další kroky

Kurz: Oříznutí obrázku pomocí sady SDK vizuálního vyhledávání Bingu pro jazyk C#

Sdílet prostřednictvím