Tutorial: Criar um aplicativo Web de página única da Pesquisa Visual
Aviso
Em 30 de outubro de 2020, as APIs de Pesquisa do Bing foram migradas dos serviços de IA do Azure para os Serviços de Pesquisa do Bing. Esta documentação é fornecida apenas para referência. Para obter a documentação atualizada, consulte a documentação da API de pesquisa do Bing. Para obter instruções sobre como criar novos recursos do Azure para a Pesquisa do Bing, consulte Criar um recurso de Pesquisa do Bing por meio do Azure Marketplace.
A API da Pesquisa Visual do Bing retorna informações para uma imagem. Você pode carregar uma imagem ou fornecer uma URL para uma. Informações são imagens visualmente semelhantes, fontes de compras, páginas da Web que incluem a imagem e muito mais. As informações retornadas pela API da Pesquisa Visual do Bing são similares às mostradas em Bing.com/images.
Este tutorial explica como estender um aplicativo Web de página única para a API de Pesquisa de Imagem do Bing. Para exibir este tutorial ou obter o código-fonte usado aqui, consulte Tutorial: Criar um aplicativo de página única para a API de Pesquisa de Imagem do Bing.
O código-fonte completo para este aplicativo (após estendê-lo para usar a API de Pesquisa Visual do Bing), está disponível no GitHub.
Pré-requisitos
Criar um recurso do Azure
Comece a usar a API da Pesquisa Visual do Bing criando um dos seguintes recursos do Azure:
Recurso de Pesquisa do Bing v7
- Disponível por meio do portal do Azure até que você exclua o recurso.
- Selecione o tipo de preço
S9.
- Disponível por meio do portal do Azure até que você exclua o recurso.
- Use a mesma chave e ponto de extremidade para seus aplicativos nos vários serviços de IA do Azure.
Chamar a API de Pesquisa Visual do Bing e tratar da resposta
Edite o tutorial da Pesquisa de Imagem do Bing e adicione o código a seguir ao final do elemento <script> (e antes da tag de fechamento </script>). O código a seguir identifica uma resposta de pesquisa visual da API, itera os resultados e exibe-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 código a seguir envia uma solicitação de pesquisa para a API, usando um ouvinte de eventos para chamar 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);
}
Capturar token de percepções
Adicione o código a seguir ao objeto searchItemsRenderer. Esse código adiciona um link encontrar semelhantes que chama a função bingVisualSearch quando clicado. A função recebe o imageInsightsToken como um argumento.
html.push("<a href='javascript:bingVisualSearch(\"" + item.imageInsightsToken + "\");'>find similar</a><br>");
Exibir imagens semelhantes
Adicione o código HTML a seguir à linha 601. Esse código de marcação adiciona um elemento para exibir os resultados da chamada à API da Pesquisa Visual do Bing:
<div id="insights">
<h3><a href="#" onclick="return toggleDisplay('_insights')">Similar</a></h3>
<div id="_insights" style="display: none"></div>
</div>
Com todos os elementos de código JavaScript e HTML em vigor, os resultados da pesquisa são exibidos com um link encontrar semelhantes. Clique no link para preencher a seção Semelhantes com imagens semelhantes à que você escolheu. Você pode precisar expandir a seção Semelhante para mostrar as imagens.