使用 Web Perception Toolkit 进行视觉搜索

易于使用的真实互动。

Joe Medley
Joe Medley
如果用户可以使用他们的摄像头搜索您的网站,岂不是很棒?想象一下。您的网站是 Razor McShaveyface。客户告诉您,他们在重新订购时找不到适合自己剃须刀的刀片。他们不知道用于搜索您商品的正确关键字。说实话,他们可能永远不会。

如果他们根本不需要,该怎么办?如果他们能将手机的摄像头对准包装上的 UPC 代码,而您的网站可以向他们展示合适的墨盒和一个红色的大号“重新订购”按钮,结果会怎样?

思考您可以在网站上使用相机的其他方式。假设有一个网站支持在实体店内查看价格。假设您想获取某个博物馆展品或历史地标的相关信息。想象一下在地理藏宝或寻宝游戏等游戏中识别现实世界的地标。

Web Perception Toolkit 让这些基于摄像头的场景成为可能。在某些情况下,您甚至无需编写代码即可创建体验。

工作原理

开源 Web Perception Toolkit 可帮助您为网站添加视觉搜索功能。它会将设备摄像头画面传递给一组检测器,这些检测器会将现实世界中的物体(在此称为“目标”)映射到您网站上的内容。此映射是使用您网站上的结构化数据 (JSON-LD) 定义的。借助这些数据,您可以在可自定义的界面中显示正确的信息。

我会向您展示足够多的示例,让您大致了解其运作方式。如需完整了解,请参阅使用入门指南、工具包参考文档I/O 沙盒演示示例演示

结构化数据

该工具包无法在相机视野中找到任何目标。您必须为其提供要识别的目标的链接 JSON 数据。这些数据还包含与将向用户显示的目标相关的信息。

您只需使用这些数据,即可打造如下图所示的用户体验。如果您未执行任何其他操作,Web Perception Toolkit 可以识别目标,然后根据数据中提供的信息显示和隐藏卡片。您可以使用我们的工件映射演示自行试用。

只需使用关联的数据即可使用默认界面。
默认界面。

使用 JSON 关联的数据文件向您的网站添加数据,该文件使用 <script> 标记和 "application/ld+json" MIME 类型包含。

<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"
    }
  }
]

用户体验

如果您想要的不仅仅是默认的用户体验,该怎么办?该工具包提供了生命周期事件、卡片和按钮对象,可用于围绕这些事件打造用户体验,还提供了一种简单的方式来设置卡片样式。我将通过一些代码来演示这一点,这些代码大致基于我们的开始使用指南。

最重要的生命周期事件是 PerceivedResults,系统会在每次找到目标时触发该事件。目标可以是真实对象,也可以是条形码或二维码等标记。

响应此事件的过程与响应任何其他事件的过程相同,但有一个例外情况,如前所述。如果您没有实现该事件,系统会使用结构化数据自动创建界面。如需替换此行为,请通过调用 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 使用默认样式表为卡片和按钮提供内置格式设置。不过,您可以轻松添加自己的付款方式。提供的 CardActionButton 对象包含 style 属性(以及许多其他属性),可让您在外观和风格上体现组织特色。如需添加默认样式表,请将 <link> 元素添加到您的网页中。

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

总结

正如我在开头所说,这并未详尽介绍 Web Perception 工具包。希望这能让您了解向网站添加视觉搜索功能是多么简单。如需了解详情,请参阅入门指南和示例演示。请仔细阅读工具包文档,了解其功能。