Визуальный поиск с помощью Web Perception Toolkit

Простая в использовании интерактивность в реальном мире.

Joe Medley

Что, если им это никогда не понадобится? Что, если бы они могли навести камеру своего телефона на код UPC на упаковке, а ваш сайт мог бы предоставить им правильный картридж и большую красную кнопку «повторного заказа»?

Подумайте о других способах использования камеры на сайте. Представьте себе сайт, который поддерживает проверку цен в магазине. Представьте себе, что вы получаете информацию о музейном экспонате или историческом памятнике. Представьте себе, что вы идентифицируете реальные ориентиры в таких играх, как геокэшинг или охота за мусором.

Web Perception Toolkit делает возможными такие сценарии с использованием камеры. В некоторых случаях вы даже можете создать опыт без написания кода.

Как это работает?

Набор инструментов Web Perception Toolkit с открытым исходным кодом поможет вам добавить на ваш сайт визуальный поиск. Он пропускает поток камеры устройства через набор детекторов, которые сопоставляют объекты реального мира, называемые здесь «целями», с содержимым вашего сайта. Это сопоставление определяется с использованием структурированных данных (JSON-LD) на вашем сайте. С помощью этих данных вы можете представить нужную информацию в настраиваемом пользовательском интерфейсе.

Я покажу вам достаточно этого, чтобы вы почувствовали, как это работает. Для получения полного объяснения ознакомьтесь с руководством по началу работы , справочником по набору инструментов , демонстрацией I/O Sandbox и примерами демонстраций .

Структурированные данные

Инструментарий не может найти любую цель в поле зрения камеры. Вы должны предоставить ему связанные данные JSON для целей, которые вы хотите распознать. Эти данные также содержат информацию о тех целях, которые будут показаны пользователю.

Данные — это все, что вам нужно для создания пользовательского опыта, подобного изображенному на изображении ниже. Если вы больше ничего не сделаете, набор инструментов Web Perception Toolkit сможет идентифицировать цели, а затем показывать и скрывать карточки на основе информации, представленной в данных. Попробуйте это сами, воспользовавшись нашей демо-картой артефактов .

Добавьте данные на свой сайт с помощью связанного файла данных JSON, включенного с помощью тега <script> и типа MIME "application/ld+json" .

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

Сам файл выглядит примерно так:

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

Пользовательский опыт

Что делать, если вам нужно больше, чем стандартный пользовательский интерфейс? Набор инструментов предоставляет вам события жизненного цикла, объекты Card и Button для создания пользовательского опыта на основе этих событий, а также простой способ стилизации карточек. Я собираюсь немного продемонстрировать это на примере кода, основанного на нашем руководстве по началу работы .

Самым важным событием жизненного цикла является PerceivedResults , которое запускается каждый раз при обнаружении цели. Целью может быть реальный объект или маркер, например штрих-код или QR-код.

Процесс реагирования на это событие такой же, как и на любое другое событие, за исключением, о котором уже упоминалось. Если вы не реализуете событие, пользовательский интерфейс автоматически создается с использованием структурированных данных. Чтобы переопределить это поведение, запустите обработчик событий, вызвав 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);

Давайте посмотрим на событие более внимательно. Само событие содержит массивы маркеров и целей, которые оно обнаружило и потеряло. Когда в мире обнаруживаются цели, метод Even срабатывает и передает найденные объекты в event.found . Аналогично, когда цели выходят из поля зрения камеры, событие срабатывает снова, передавая потерянные объекты в event.lost . Это помогает учитывать движения рук и маркеров: камеры удерживаются недостаточно устойчиво, маркеры роняются и тому подобное.

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

Затем вы показываете соответствующую карточку на основе того, что нашел инструментарий.

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

Добавление карточек и кнопок — это просто создание их экземпляров и добавление их к родительскому объекту. Например:

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

Наконец, вот как все это выглядит. Обратите внимание на удобства, которые я добавил к пользовательскому интерфейсу. Независимо от того, найден маркер или нет, я предоставляю доступ в один клик к тому, что считаю наиболее полезным в данных обстоятельствах.

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

Форматирование карточек

Web Perception Toolkit обеспечивает встроенное форматирование карточек и кнопок с помощью таблицы стилей по умолчанию. Но вы легко можете добавить свой собственный. Предоставленные объекты Card и ActionButton содержат свойства style (среди многих других), которые позволяют вам внести свой организационный отпечаток в внешний вид. Чтобы включить таблицу стилей по умолчанию, добавьте на свою страницу элемент <link> .

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

Заключение

Как я сказал выше, это не исчерпывающий обзор Web Perception Toolkit . Надеюсь, это даст вам представление о том, насколько легко добавить на веб-сайт визуальный поиск. Узнайте больше из руководства «Приступая к работе » и примеров демонстраций . Покопайтесь в документации набора инструментов, чтобы узнать, на что он способен.