Creación de una aplicación web de página única de Visual SearchCreate a Visual Search single-page web app

Bing Visual Search API devuelve información de una imagen.The Bing Visual Search API returns insights for an image. Puede cargar una imagen o especificar la dirección URL a una imagen.You can either upload an image or provide a URL to one. Entre la información devuelta puede haber imágenes visualmente similares, orígenes de compra, páginas web que incluyen la imagen y mucho más.Insights are visually similar images, shopping sources, webpages that include the image, and more. La información devuelta por Bing Visual Search API es similar a la que se muestra en Bing.com/images.Insights returned by the Bing Visual Search API are similar to ones shown on Bing.com/images.

En este tutorial se explica cómo extender una aplicación web de página única para Bing Image Search API.This tutorial explains how to extend a single-page web app for the Bing Image Search API. Para ver ese tutorial u obtener el código fuente que se usa aquí, consulte Tutorial: Create a single-page app for the Bing Image Search API (Crear una aplicación de página única para Bing Image Search API).To view that tutorial or get the source code used here, see Tutorial: Create a single-page app for the Bing Image Search API.

El código fuente completo para esta aplicación (después de extenderla para usar Bing Visual Search API) está disponible en GitHub.The full source code for this application (after extending it to use the Bing Visual Search API), is available on GitHub.

Requisitos previosPrerequisites

Debe tener una cuenta de Cognitive Services API con acceso a Bing Search APIs.You must have a Cognitive Services API account with access to the Bing Search APIs. Antes de continuar, necesitará la clave de acceso proporcionada después de iniciar una suscripción en el nivel de precios S9 como se muestra en Precios de Cognitive Services: Bing Search API.Before continuing, you will need the access key provided after starting a subscription at S9 price tier as shown in Cognitive Services Pricing - Bing Search API.

Para iniciar una suscripción en Azure Portal:To start a subscription in Azure portal:

  1. Escriba "BingSearchV7" en el cuadro de texto de la parte superior de Azure Portal que dice Search resources, services, and docs.Enter 'BingSearchV7' in the text box at the top of the Azure portal that says Search resources, services, and docs.
  2. En Marketplace en la lista desplegable, seleccione Bing Search v7.Under Marketplace in the drop-down list, select Bing Search v7.
  3. Escriba Name para el nuevo recurso.Enter Name for the new resource.
  4. Seleccione la suscripción Pay-As-You-Go.Select Pay-As-You-Go subscription.
  5. Seleccione el plan de tarifa S9.Select S9 pricing tier.
  6. Haga clic en Enable para iniciar la suscripción.Click Enable to start the subscription.

Llamar Bing Visual Search API y gestionar la respuestaCall the Bing Visual Search API and handle the response

Edite el tutorial de Bing Image Search y agregue el código siguiente al final del elemento <script> (y antes de la etiqueta </script> de cierre).Edit the Bing Image Search tutorial and add the following code to the end of the <script> element (and before the closing </script> tag). El código siguiente gestiona una respuesta de Visual Search de la API, recorre en iteración los resultados y los muestra:The following code handles a visual search response from the API, iterates through the results, and displays them:

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

El código siguiente envía una solicitud de búsqueda a la API mediante un cliente de escucha de eventos para llamar a handleVisualSearchResponse().The following code sends a search request to the API, using an event listener to call 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 el token de conclusionesCapture insights token

Agregue el siguiente código al objeto searchItemsRenderer:Add the following code to the searchItemsRenderer object. Este código agrega un vínculo buscar similares que llama a la función bingVisualSearch al hacer clic en él.This code adds a find similar link that calls the bingVisualSearch function when clicked. La función recibe imageInsightsToken como argumento.The function receives the imageInsightsToken as an argument.

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

Mostrar imágenes similaresDisplay similar images

Agregue el código HTML siguiente en la línea 601.Add the following HTML code at line 601. Este código de marcado agrega un elemento para mostrar los resultados de la llamada a Bing Visual Search API:This markup code adds an element to display the results of the Bing Visual Search API call:

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

Con el nuevo código JavaScript y los elementos HTML implementados, los resultados de la búsqueda se muestran con un vínculo buscar similares.With all the new JavaScript code and HTML elements in place, search results are displayed with a find similar link. Haga clic en el vínculo para rellenar la sección Similares con imágenes similares a la que ha seleccionado.Click the link to populate the Similar section with images similar to the one you picked. Puede que tenga que expandir la sección Similares para mostrar las imágenes.You may have to expand the Similar section to show the images.

Pasos siguientesNext steps