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

łatwe w użyciu interakcje z rzeczywistego świata;

Joe Medley

Co, jeśli nigdy nie będzie takiej potrzeby? Co, jeśli użytkownik mógłby skierować kamerę telefonu na kod UPC na opakowaniu, a Twoja witryna wyświetliła odpowiednią kartridż i duży czerwony przycisk „Zamów ponownie”?

Zastanów się, jak jeszcze możesz używać kamery w witrynie. Wyobraź sobie stronę, która umożliwia sprawdzanie cen w sklepie. Wyobraź sobie, że chcesz uzyskać informacje o ekspozycji muzealnej lub tablicy upamiętniającej. Wyobraź sobie, że w grze trzeba odnaleźć prawdziwe punkty orientacyjne, na przykład w ramach geocachingu lub polowania na skarby.

Narzędzie Web Perception Toolkit umożliwia realizację tych scenariuszy opartych na kamerze. W niektórych przypadkach możesz nawet tworzyć treści bez pisania kodu.

Jak to działa?

Web Perception Toolkit typu open source pomaga dodać wyszukiwanie wizualne do Twojej witryny. Przekazuje strumień z kamery urządzenia przez zestaw detektorów, które mapują rzeczywiste obiekty, nazywane „celami”, na treści w witrynie. To mapowanie jest zdefiniowane w witrynie za pomocą danych strukturalnych (JSON-LD). Dzięki tym danym możesz przedstawić odpowiednie informacje w UI z możliwością dostosowania.

Pokażę Ci wystarczająco dużo, abyś mógł/mogła zobaczyć, jak to działa. Pełne omówienie znajdziesz w przewodniku, dokumentacji, demo środowiska testowego I/O i przykładowych demonstracjach.

Uporządkowane dane

Narzędzie nie może znaleźć dowolnego celu w polu widzenia kamery. Musisz go zaopatrzyć w połączone dane w formacie JSON dotyczące celów, które chcesz rozpoznawać. Te dane zawierają też informacje o tych celach, które będą wyświetlane użytkownikowi.

Dane są wszystkim, czego potrzebujesz, aby stworzyć interfejs użytkownika podobny do tego na obrazku poniżej. Jeśli nie zrobisz nic innego, narzędzie Web Perception Toolkit może zidentyfikować cele, a następnie wyświetlać i ukrywać karty na podstawie informacji zawartych w danych. Wypróbuj to samodzielnie, korzystając z naszego demo mapowania artefaktów.

Dodaj dane do swojej witryny za pomocą połączonego pliku danych JSON zawierającego tag <script> i typ 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"
    }
  }
]

Wrażenia użytkownika

Co jeśli zależy Ci na czymś więcej niż w domyślnym interfejsie? Ten zestaw narzędzi zawiera zdarzenia cyklu życia, obiekty kart i przycisków, które umożliwiają tworzenie interakcji z użytkownikiem związanych z tymi zdarzeniami, oraz prosty sposób stylizowania kart. Pokażę Ci to na przykładzie kodu opartego na naszym przewodniku Początki.

Najważniejsze zdarzenie cyklu życia to PerceivedResults, które jest wywoływane przy każdym znalezieniu celu. Celem może być rzeczywisty obiekt lub znacznik, taki jak kod kreskowy czy kod QR.

Proces reagowania na to zdarzenie jest taki sam jak w przypadku każdego innego zdarzenia, z wyjątkiem już wspomnianego. Jeśli nie zaimplementujesz zdarzenia, interfejs użytkownika zostanie automatycznie utworzony za pomocą uporządkowanych danych. Aby zastąpić to zachowanie, uruchom przetwarzacz zdarzeń, wywołując funkcję 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ę bliżej temu zdarzeniu. Samo zdarzenie zawiera tablice znaczników i celów, które zostały znalezione lub utracone. Gdy w świecie zostaną znalezione cele, funkcja zostanie wywołana i przekaże znalezione obiekty do event.found. I podobnie, gdy cele zostaną przekazane z widoku kamery, zdarzenie uruchomi się ponownie, przesyłając utracone obiekty w event.lost. Pomaga to uwzględniać ruchy rąk i znaczników: kamery nie trzymają się wystarczająco stabilnie, upuszczają znaczniki 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świetlasz odpowiednią kartę na podstawie tego, co znalazł ten zestaw narzędzi.

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 tworzeniu ich instancji i dołączaniu 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 pokażę, jak to wszystko wygląda. Zwróć uwagę na udogodnienia, które wprowadziłem, aby zwiększyć wygodę użytkowników. Niezależnie od tego, czy marker został znaleziony, zapewniam dostęp do tego, co moim zdaniem jest najbardziej przydatne w tych okolicznościach.

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

Pakiet narzędzi Web Perception Toolkit zawiera wbudowane formatowanie kart i przycisków za pomocą domyślnej arkusza stylów. Możesz jednak łatwo dodać własne. Podane obiekty Card i ActionButton zawierają właściwości style (i wiele innych), dzięki którym możesz nadać organizacji charakteru. Aby dołączyć domyślny arkusz stylów, dodaj do strony element <link>.

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

Podsumowanie

Jak już wspomniałam na początku, nie jest to wyczerpujące omówienie narzędzia Web Perception Toolkit. Mamy nadzieję, że pomoże Ci to zrozumieć, jak łatwo można dodać do witryny wyszukiwanie wizualne. Więcej informacji znajdziesz w przewodniku dla początkujących oraz przykładowych demonstracjach. Zapoznaj się z dokumentacją dotyczącą tego narzędzia, aby dowiedzieć się, do czego służy.