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

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

Джо Медли
Joe Medley
Разве не было бы здорово, если бы пользователи могли осуществлять поиск по вашему сайту с помощью камеры? Представьте себе это. Ваш сайт — Razor McShaveyface. Ваши клиенты говорят вам, что им трудно найти подходящие картриджи для своей бритвы при повторном заказе. Они не знают правильных ключевых слов для поиска вашего продукта. И давайте будем честными, они, вероятно, никогда этого не сделают.

Что, если им это никогда не понадобится? Что, если бы они могли навести камеру своего телефона на код 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 . Надеюсь, это даст вам представление о том, насколько легко добавить на веб-сайт визуальный поиск. Узнайте больше из руководства «Приступая к работе » и примеров демонстраций . Покопайтесь в документации набора инструментов, чтобы узнать, на что он способен.