Recherche visuelle avec le Web Perception Toolkit

Interactivité facile à utiliser dans le monde réel

Joe Medley
Joe Medley
N'est-il pas pratique que les utilisateurs puissent effectuer des recherches sur votre site à l'aide de leur appareil photo ? Imaginez. Votre site est Razor McShaveyface. Vos clients vous disent qu'ils ont du mal à trouver les bonnes cartouches pour leur rasoir lorsqu'ils passent une nouvelle commande. Ils ne connaissent pas les bons mots clés pour votre recherche de produits. Et soyons honnêtes, ils ne le feront probablement jamais.

Et s'il n'en a jamais besoin ? Que se passerait-il s'il pouvait pointer l'appareil photo de son téléphone vers le code UPC du paquet, et que votre site lui présentait la bonne cartouche et un gros bouton rouge "Réapprovisionner" ?

Imaginez d'autres façons d'utiliser une caméra sur un site. Imaginons un site qui permet de vérifier les prix en magasin. Imaginez que vous obtenez des informations sur une exposition de musée ou un repère historique. Imaginez identifier des repères du monde réel dans des jeux comme le géocaching ou les chasses au trésor.

Le kit de perception Web permet de mettre en œuvre ces scénarios basés sur la caméra. Dans certains cas, vous pouvez même créer une expérience sans avoir à écrire de code.

Fonctionnement

Le Web Perception Toolkit Open Source vous aide à ajouter la recherche visuelle à votre site Web. Il transmet un flux de caméra d'appareil via un ensemble de détecteurs qui mappent des objets réels, ici appelés "cibles", sur le contenu de votre site. Ce mappage est défini à l'aide de données structurées (JSON-LD) sur votre site. Grâce à ces données, vous pouvez présenter les bonnes informations dans une UI personnalisable.

Je vais vous en montrer suffisamment pour vous donner un aperçu de son fonctionnement. Pour une explication complète, consultez le guide de démarrage, la documentation de référence du kit d'outils, la démo de l'I/O Sandbox et les exemples de démonstrations.

Données structurées

L'outil ne peut pas trouver n'importe quelle cible dans le champ de vision de la caméra. Vous devez lui fournir des données JSON associées pour les cibles que vous souhaitez qu'il reconnaisse. Ces données contiennent également des informations sur les cibles qui seront présentées à l'utilisateur.

Les données sont tout ce dont vous avez besoin pour créer une expérience utilisateur comme celle de l'image ci-dessous. Si vous ne faites rien d'autre, le Web Perception Toolkit peut identifier des cibles, puis afficher et masquer des fiches en fonction des informations fournies dans les données. Essayez-le vous-même avec notre démonstration de la carte des artefacts.

L'interface par défaut est disponible en utilisant uniquement les données associées.
Interférence par défaut.

Ajoutez des données à votre site à l'aide d'un fichier de données associé au format JSON, inclus à l'aide d'une balise <script> et du type MIME "application/ld+json".

<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">

Le fichier lui-même se présente comme suit:

[
 
{
   
"@context": "https://schema.googleapis.com/",
   
"@type": "ARArtifact",
   
"arTarget": {
     
"@type": "Barcode",
     
"text": "012345678912"
   
},
   
"arContent": {
     
"@type": "WebPage",
     
"url": "http://localhost:8080/demo/artifact-map/products/product1.html",
     
"name": "Product 1",
     
"description": "This is a product with a barcode",
     
"image": "http://localhost:8080/demo/artifact-map/products/product1.png"
   
}
 
}
]

L'expérience utilisateur

Que faire si vous souhaitez aller plus loin que l'expérience utilisateur par défaut ? La boîte à outils vous fournit des événements de cycle de vie, des objets de carte et de bouton pour créer l'expérience utilisateur autour de ces événements, et un moyen simple de styliser les cartes. Je vais vous montrer un peu de cela avec du code basé sur notre guide de démarrage.

L'événement de cycle de vie le plus important est PerceivedResults, qui se déclenche chaque fois qu'une cible est détectée. Une cible peut être un objet réel ou un repère tel qu'un code-barres ou un code QR.

La procédure de réponse à cet événement est la même que pour tout autre événement avec une exception déjà évoquée. Si vous n'implémentez pas l'événement, une interface utilisateur est automatiquement créée à l'aide de données structurées. Pour remplacer ce comportement, démarrez votre gestionnaire d'événements en appelant event.preventDefault().

const container = document.querySelector('.container');
async
function onPerceivedResults(event) {
 
// preventDefault() to stop default result Card from showing.
  event
.preventDefault();
 
// Process the event.
}
window
.addEventListener(PerceptionToolkit.Events.PerceivedResults, onPerceivedResults);

Examinons l'événement de plus près. L'événement lui-même contient des tableaux de repères et de cibles qu'il a trouvés et perdus. Lorsque des cibles sont détectées dans le monde, l'événement se déclenche et transmet les objets trouvés dans event.found. De même, lorsque les cibles quittent le champ de vision de la caméra, l'événement se déclenche à nouveau, transmettant les objets perdus dans event.lost. Cela permet de tenir compte des mouvements de la main et des repères : caméras pas assez stables, repères lâchés, etc.

async function onPerceivedResults(event) {
 
// preventDefault() to stop default result Card from showing
 
event.preventDefault();
 
if (container.childNodes.length > 0) { return; }
 
const { found, lost } = event.detail;
 
// Deal with lost and found objects.
}

Ensuite, vous affichez une fiche appropriée en fonction de ce que le kit d'outils a trouvé.

async function onPerceivedResults(event) {
 
event.preventDefault();
 
if (container.childNodes.length > 0) { return; }
 
const { found, lost } = event.detail;
 
if (found.length === 0 && lost.length === 0) {
   
// Object not found.
   
// Show a card with an offer to show the catalog.
 
} else if (found.length > 0) {
   
// Object found.
   
// Show a card with a reorder button.
 
}
}

Pour ajouter des cartes et des boutons, il vous suffit de les instancier et de les ajouter à un objet parent. Exemple :

const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card
.src = 'Your message here.'
container
.appendChild(card)'

Enfin, voici à quoi l'ensemble ressemble. Notez les commodités que j'ai ajoutées à l'expérience utilisateur. Que le repère soit trouvé ou non, je fournis un accès en un clic à ce que je pense être le plus utile dans les circonstances.

async function onPerceivedResults(event) {
 
// preventDefault() to stop default result Card from showing
  event
.preventDefault();
 
if (container.childNodes.length > 0) { return; }
 
const { found, lost } = event.detail;
 
const { ActionButton, Card } = PerceptionToolkit.Elements;
 
if (found.length === 0 && lost.length === 0) {
   
//Make a view catalog button.
   
const button =  new ActionButton();
    button
.label = 'View catalog';
    button
.addEventListener('click', () => {
      card
.close();
     
//Run code to launch a catalog.
   
});
   
//Make a card for the button.
   
const card = new Card();
    card
.src = 'We wish we could help, but that\'s not our razor. Would you like to see our catalog?';
    card
.appendChild(button);
   
//Tell the toolkit it does not keep the card around
   
// if it finds something it recognizes.
    card
.dataset.notRecognized = true;
    container
.appendChild(card);
 
} else if (found.length > 0) {
   
//Make a reorder button.
   
const button = new ActionButton();
    button
.label = 'Reorder';
    botton
.addEventListener('click', () => {
      card
.close();
     
//Run code to reorder.
   
})
   
const card = new Card();
    card
.src = found[0].content;
    card
.appendChild(button);
    container
.appendChild(card);
 
}
}

Mettre en forme des fiches

Le kit d'outils Web Perception fournit une mise en forme intégrée pour les cartes et les boutons avec la feuille de style par défaut. Mais vous pouvez facilement en ajouter. Les objets Card et ActionButton fournis contiennent des propriétés style (parmi de nombreuses autres) qui vous permettent d'ajouter votre touche personnelle à l'apparence. Pour inclure la feuille de style par défaut, ajoutez un élément <link> à votre page.

<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">

Conclusion

Comme indiqué en haut de cet article, il ne s'agit pas d'un examen exhaustif du kit d'outils de perception Web. Nous espérons que cet article vous a donné une idée de la facilité avec laquelle vous pouvez ajouter la recherche visuelle à un site Web. Pour en savoir plus, consultez le guide de démarrage et les exemples de démonstrations. Consultez la documentation du kit d'outils pour découvrir ses fonctionnalités.