Tutorial: Criar uma aplicação Web de página única da Pesquisa Visual
Aviso
A 30 de outubro de 2020, as APIs de Pesquisa do Bing passaram dos serviços de IA do Azure para os Serviços Pesquisa do Bing. Esta documentação é fornecida apenas para referência. Para obter documentação atualizada, veja 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, veja Criar um recurso de Pesquisa do Bing através do Azure Marketplace.
A API de Pesquisa Visual do Bing devolve informações para uma imagem. Pode carregar uma imagem ou fornecer um URL para uma. As informações são imagens visualmente semelhantes, origens de compras, páginas Web que incluem a imagem e muito mais. As informações devolvidas pela API de Pesquisa Visual do Bing são semelhantes às apresentadas no Bing.com/images.
Este tutorial explica como expandir uma aplicação Web de página única para a API de Pesquisa de Imagens do Bing. Para ver esse tutorial ou obter o código fonte utilizado aqui, veja Tutorial: Criar uma aplicação de página única para a API de Pesquisa de Imagens do Bing.
O código fonte completo para esta aplicação (depois de o expandir para utilizar a API de Pesquisa Visual do Bing) está disponível no GitHub.
Pré-requisitos
Criar um recurso do Azure
Comece a utilizar a API de Pesquisa Visual do Bing ao criar um dos seguintes recursos do Azure:
- Disponível através do portal do Azure até eliminar o recurso.
- Selecione o
S9escalão de preço.
- Disponível através do portal do Azure até eliminar o recurso.
- Utilize a mesma chave e ponto final para as suas aplicações, em vários serviços de IA do Azure.
Chamar a API de Pesquisa Visual do Bing e processar a resposta
Edite o tutorial de Pesquisa de Imagens do Bing e adicione o seguinte código ao final do <script> elemento (e antes da etiqueta de fecho </script> ). O código seguinte processa 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 código seguinte envia um pedido de pesquisa para a API, utilizando um serviço de escuta 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);
}
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 um 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 markup adiciona um elemento para apresentar os resultados da chamada à API de 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 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.