使用 Web Perception 工具包進行視覺化搜尋

提供簡單易用的互動體驗。

Joe Medley
Joe Medley
如果使用者可以使用攝影機搜尋您的網站,那該有多好?想像一下,你的網站是 Razor McShaveyface。客戶告訴您,他們在重購刮鬍刀時,找不到適合的替換匣。他們不知道要使用哪些關鍵字搜尋你的產品。老實說,他們可能永遠不會這樣做。

如果他們從未需要這樣做,又該怎麼辦?如果使用者可以將手機相機對準包裝上的 UPC 代碼,然後網站顯示正確的墨水匣和大大的紅色「重新訂購」按鈕,會如何呢?

請想想其他在網站上使用攝影機的方式。假設有個網站支援店內價格查詢功能。想像一下,您想取得博物館展覽或歷史標記的相關資訊。想像一下,在遊戲中找出真實世界的地標,例如地理代碼遊戲或尋寶遊戲。

Web Perception Toolkit 可實現這些以攝影機為基礎的情況。在某些情況下,您甚至可以不必編寫程式碼,就能建立體驗。

運作方式

開放原始碼的 Web Perception Toolkit 可協助您在網站中加入視覺搜尋功能。這項服務會將裝置相機串流傳送至一組偵測器,這些偵測器會將實際物體 (在此稱為「目標」) 對應至網站上的內容。這項對應關係是使用網站上的結構化資料 (JSON-LD) 定義。有了這項資料,您就能在可自訂的 UI 中呈現正確的資訊。

我會展示足夠的內容,讓您瞭解這項功能的運作方式。如需完整說明,請參閱開始使用指南、工具包參考資料I/O Sandbox 示範示範

結構化資料

工具包無法在攝影機畫面中找到任何目標。您必須為要辨識的目標提供連結 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,每次找到目標時就會觸發。目標可以是實體物件,也可以是標記,例如條碼或 QR code。

回應這項事件的程序與其他事件相同,但有例外狀況。如果您未導入事件,系統會使用結構化資料自動建立使用者介面。如要覆寫這項行為,請呼叫 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 工具包的完整介紹。希望這能讓您瞭解在網站中加入視覺搜尋功能有多簡單。如要進一步瞭解,請參閱入門指南示範影片。請參閱工具包說明文件,瞭解工具包的功能。