Wyszukiwanie wizualne za pomocą zestawu narzędzi Web Perception Toolkit

Łatwa w obsłudze interaktywność w świecie rzeczywistym.

Joe Medley

Czy nie byłoby wspaniale, gdyby użytkownicy mogli przeszukiwać Twoją witrynę za pomocą aparatu? Wyobraź sobie. Twoja witryna to Razor McShaveyface. Klienci informują Cię, że podczas składania zamówienia mają problem ze znalezieniem odpowiednich wkładów do golenia. Nie wiedzą też, jakie słowa kluczowe pasują do wyszukiwania produktów. Szczerze mówiąc, prawdopodobnie nigdy tego nie zrobią.

Co zrobić, jeśli nigdy nie będą musieli tego robić? A gdyby można było skierować aparat w telefonie na kod UPC na paczce, a Twoja witryna mogła wyświetlić odpowiedni wkład i duży czerwony przycisk „zamów”?

Pomyśl o innych sposobach wykorzystania kamery na stronie internetowej. Wyobraź sobie witrynę, która obsługuje sprawdzanie cen w sklepie. Wyobraź sobie, że chcesz uzyskać informacje o ekspozycji muzealnej lub o jakimś miejscu historycznym. Wyobraź sobie, że w grach, np. geocachingu czy poszukiwaniach poszukiwaczy skarbów, możesz identyfikować prawdziwe punkty orientacyjne.

Takie scenariusze bazują na kamerze Web Perception Toolkit. W niektórych przypadkach można nawet tworzyć środowisko bez pisania kodu.

Jak to działa?

Pakiet Web Perception Toolkit o nazwie open source pomaga dodać do witryny wyszukiwanie wizualne. Przekazuje strumień z kamery urządzenia przez zestaw wzorców do wykrywania treści, które mapują rzeczywiste obiekty (tzw. „cele”) na treści w witrynie. Mapowanie jest definiowane za pomocą uporządkowanych danych (JSON-LD) w Twojej witrynie. Dzięki tym danym możesz przedstawiać odpowiednie informacje w interfejsie, który można dostosować.

Pokażę Ci wystarczająco dużo, żeby dać Ci przedsmak tego, jak to działa. Pełne informacje znajdziesz w przewodniku Pierwsze kroki, w dokumentacji narzędzi, w piaskownicy I/O oraz w przykładowych wersjach demonstracyjnych.

Uporządkowane dane

W polu widzenia kamery nie znaleziono żadnego celu. Musisz go przekazać wraz z połączonymi danymi JSON dla celów, które ma rozpoznawać. Dane te zawierają również informacje o tych celach, które będą wyświetlane użytkownikowi.

Dane te wystarczą do utworzenia środowiska użytkownika, takiego jak na przykładzie poniżej. Jeśli nie zrobisz nic, narzędzie Web Perception Toolkit może określać cele, a potem pokazywać i ukrywać karty na podstawie informacji podanych w danych. Możesz to sprawdzić, korzystając z naszej prezentacji mapy artefaktów.

Domyślny interfejs.

Dodaj dane do witryny za pomocą pliku danych połączonego w formacie JSON za pomocą tagu <script> i typu MIME "application/ld+json".

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

Plik wygląda mniej więcej tak:

[
  {
    "@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"
    }
  }
]

Wygoda użytkownika

Co zrobić, jeśli zależy Ci na czymś więcej niż domyślne? Znajdziesz w nim zdarzenia cyklu życia, obiekty kart i przycisków, które ułatwiają dostosowanie kart do oczekiwań użytkowników. Pokażę część z tym, co jest napisane w błędnym kodzie, zgodnie z naszym przewodnikiem Pierwsze kroki.

Najważniejszym zdarzeniem cyklu życia jest PerceivedResults, które jest wywoływane po każdym znalezieniu celu. Celem może być rzeczywisty obiekt lub znacznik, np. kod kreskowy lub QR.

Procedura reagowania na to zdarzenie jest taka sama jak w przypadku każdego innego zdarzenia z wyjątkiem, o którym wspomniano wcześniej. Jeśli nie zaimplementujesz zdarzenia, interfejs użytkownika zostanie utworzony automatycznie za pomocą uporządkowanych danych. Aby zastąpić to zachowanie, uruchom moduł obsługi zdarzeń, wywołując metodę 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);

Przyjrzyjmy się temu wydarzeniu bliżej. Samo zdarzenie zawiera tablice znaczników i celów, które zostało znalezione i utracone. Gdy cele zostaną znalezione na świecie, nawet pożary i podania znalazły obiekty w komponencie event.found. I podobnie, gdy cele mijają z widoku kamery, zdarzenie uruchamia się ponownie, przekazując utracone obiekty w komponencie event.lost. Ułatwia to wykrywanie ruchów dłoni i markerów: nietrzymanie kamery dostatecznie stabilnie, upuszczanie znaczników itp.

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.
}

Następnie wyświetlisz odpowiednią kartę na podstawie tego, co znajduje się w narzędziach.

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.
  }
}

Dodawanie kart i przycisków polega na utworzeniu ich instancji i dołączeniu ich do obiektu nadrzędnego. Na przykład:

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

Na koniec zobaczmy, jak to wszystko wygląda. Zwróć uwagę na wygodę użytkowników. Niezależnie od tego, czy znacznik zostanie znaleziony, za pomocą jednego kliknięcia daję Ci dostęp do tego, co moim zdaniem jest najbardziej przydatne w danej sytuacji.

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

Formatowanie kart

Web Perception Toolkit udostępnia wbudowane formatowanie kart i przycisków w domyślnym arkuszu stylów. Możesz jednak łatwo dodać własne. Podane obiekty Card i ActionButton zawierają między innymi właściwości style, które pozwalają nadać pieczątkę Twojej organizacji. Aby uwzględnić domyślny arkusz stylów, dodaj do strony element <link>.

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

Podsumowanie

Jak już wspomnieliśmy, nie jest to wyczerpujące omówienie Web Perception Toolkit. Teraz zorientujesz się, jak łatwo można dodać do witryny wyszukiwanie wizualne. Więcej informacji znajdziesz w przewodniku Pierwsze kroki i w przykładowych prezentacjach. Zapoznaj się z dokumentacją narzędzi, aby dowiedzieć się, do czego służy ta usługa.