Tutoriel : Créer une application Recherche visuelle d’une seule page

Article
03/27/2020

Avertissement

Le 30 octobre 2020, les API de recherche Bing sont passées des services Azure AI aux services de recherche Bing. Cette documentation est fournie à des fins de référence uniquement. Pour accéder à la documentation mise à jour, consultez la documentation de l’API Recherche Bing. Pour obtenir des instructions sur la création de nouvelles ressources Azure pour Recherche Bing, consultez Créer une ressource Recherche Bing à l’aide de Place de marché Azure.

L’API Recherche visuelle Bing retourne des insights pour une image. Vous pouvez charger une image ou fournir une URL vers une image. Les insights sont des images visuellement similaires, des sources d’achat, des pages web qui incluent l’image, etc. Les insights retournés par l’API Recherche visuelle Bing sont similaires à ceux qui apparaissent sur Bing.com/images.

Ce didacticiel explique comment étendre une application web d’une seule page pour l’API Recherche d’images Bing. Pour afficher ce tutoriel ou obtenir le code source utilisé ici, consultez Tutoriel : Créer une application monopage avec l’API Recherche d’images Bing.

Le code source complet pour cette application (après son extension pour utiliser l’API Recherche visuelle Bing) est disponible sur GitHub.

Prérequis

Créer une ressource Azure

Commencez à utiliser l’API Recherche visuelle Bing en créant une des ressources Azure suivantes :

Ressource Recherche Bing v7

Disponible via le portail Azure jusqu’à ce que vous supprimiez la ressource.
Sélectionnez le niveau tarifaire S9.

Ressource multiservice

Disponible via le portail Azure jusqu’à ce que vous supprimiez la ressource.
Utilisez la même clé et le même point de terminaison pour vos applications, sur plusieurs services Azure AI.

Appeler l’API Recherche visuelle Bing et gérer la réponse

Modifiez le didacticiel Recherche d’images Bing et ajoutez le code suivant à la fin de l’élément <script> (et devant la balise </script> de fermeture). Le code suivant gère une réponse de recherche visuelle à partir de l’API, effectue une itération dans les résultats, et affiche ceux-ci :

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

Le code suivant envoie une demande de recherche à l’API, en utilisant un détecteur d’événements pour appeler 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);
}

Capturer le jeton d’insights

Ajoutez le code suivant à l’objet searchItemsRenderer. Ce code ajoute un lien Rechercher semblables qui appelle la fonction bingVisualSearch quand vous cliquez dessus. La fonction reçoit le imageInsightsToken en tant qu’argument.

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

Afficher des images similaires

Ajoutez le code HTML suivant à la ligne 601. Ce code de balisage ajoute un élément utilisé pour afficher les résultats de l’appel de l’API Recherche visuelle Bing :

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

Avec l’ensemble du nouveau code JavaScript et des nouveaux éléments HTML en place, les résultats de la recherche sont affichés avec un lien Rechercher semblables. Cliquez sur le lien pour remplir la section Semblable avec des images similaires à celle que vous avez choisie. Vous devrez peut-être développer la section Semblable pour afficher les images.

Étapes suivantes

Tutoriel : Rogner une image avec le SDK Recherche visuelle Bing pour C#

Partager via