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

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

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

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

Набор инструментов 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);

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

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

Вывод #
Как я сказал выше, это не исчерпывающий обзор Web Perception Toolkit. Надеюсь, это даст вам представление о том, насколько просто добавить визуальный поиск на веб-сайт. Дополнительные сведения см. в руководстве по началу работы и примерах демонстраций. Изучите документацию по набору инструментов, чтобы узнать, на что он способен.

Вам также может понравиться

About the Author: bpush

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *