Tutorial: Criar uma aplicação web de pesquisa visual de uma página

Aviso

Em 30 de outubro de 2020, as APIs de pesquisa de Bing passaram dos Serviços Cognitivos para Bing Serviços de Busca. Esta documentação é fornecida apenas para referência. Para obter documentação atualizada, consulte a documentação Bing pesquisar a API. Para obter instruções sobre a criação de novos recursos Azure para Bing pesquisa, consulte Criar um recurso de pesquisa Bing através do Azure Marketplace.

A API de Pesquisa Visual Bing devolve insights para uma imagem. Pode fazer o upload de uma imagem ou fornecer um URL a uma. Informações são imagens visualmente semelhantes, fontes de compras, páginas web que incluem a imagem, e muito mais. Informações devolvidos pela API de Pesquisa Visual Bing são semelhantes às mostradas em Bing.com/imagens.

Este tutorial explica como estender uma aplicação web de uma página para a API de pesquisa de imagem Bing. Para ver esse tutorial ou obter o código fonte utilizado aqui, consulte Tutorial: Crie uma aplicação de uma página para a API de pesquisa de imagem Bing.

O código fonte completo desta aplicação (depois de a ter alargado para utilizar a API de Procura Visual Bing), está disponível no GitHub.

Pré-requisitos

Criar um recurso Azure

Comece a utilizar a API de Pesquisa Visual Bing, criando um dos seguintes recursos Azure:

Bing Procurar recurso v7

  • Disponível através do portal do Azure até eliminar o recurso.
  • Selecione o S9 nível de preços.

Recurso multi-serviço

  • Disponível através do portal do Azure até eliminar o recurso.
  • Use a mesma chave e ponto final para as suas aplicações, através de vários Serviços Cognitivos.

Ligue para a API de Pesquisa Visual Bing e trate da resposta

Edite o tutorial de pesquisa de imagem Bing e adicione o seguinte código ao fim do <script> elemento (e antes da etiqueta de fecho</script>). O seguinte código trata uma resposta de pesquisa visual da API, itera através dos resultados e apresenta-os:

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"});
                }
            }
        }
    }
}

O seguinte código envia um pedido de pesquisa à API, utilizando um ouvinte do evento para ligar 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);
}

Recolha do token de informações

Adicione o seguinte código ao searchItemsRenderer objeto. Este código adiciona uma ligação encontrar semelhante que chama a função bingVisualSearch ao clicar na ligação. A função recebe o imageInsightsToken como argumento.

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

Apresentar imagens semelhantes

Adicione o seguinte código HTML na linha 601. Este código de marcação adiciona um elemento para exibir os resultados da chamada de API de procura visual Bing:

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

Com todo o novo código JavaScript e elementos HTML implementados, os resultados da pesquisa são apresentados com uma ligação encontrar semelhante. Clique na ligação para preencher a secção Semelhante com as imagens semelhantes à que escolheu. Poderá ter de expandir a secção Semelhante para mostrar as imagens.

Passos seguintes