การค้นหาด้วยภาพด้วย Web Perception Tool

การโต้ตอบในชีวิตจริงที่ใช้งานง่าย

Joe Medley

จะเกิดอะไรขึ้นหากลูกค้าไม่จำเป็นต้องทำ แล้วถ้าลูกค้าเล็งกล้องโทรศัพท์ไปที่รหัส UPC บนแพ็กเกจได้ และเว็บไซต์ของคุณสามารถแสดงตลับหมึกที่ถูกต้องพร้อมปุ่ม "สั่งซื้อใหม่" สีแดงขนาดใหญ่ได้

ลองนึกถึงวิธีอื่นๆ ที่คุณสามารถใช้กล้องในเว็บไซต์ ลองนึกภาพเว็บไซต์ที่รองรับการตรวจสอบราคาที่ร้านค้า ลองนึกภาพว่าคุณได้รับข้อมูลเกี่ยวกับนิทรรศการของพิพิธภัณฑ์หรือเครื่องหมายทางประวัติศาสตร์ ลองนึกถึงการระบุสถานที่สำคัญในโลกแห่งความเป็นจริง ในเกมอย่างเช่น การล่าสมบัติหรือเกมล่าสมบัติ

Web Perception Toolkit ทำให้สถานการณ์ที่อิงตามกล้องเหล่านี้เป็นจริงได้ ในบางกรณี คุณยังสร้างประสบการณ์การใช้งานได้โดยไม่ต้องเขียนโค้ด

หลักการทำงาน

Web Perception Toolkit แบบโอเพนซอร์สจะช่วยคุณเพิ่มการค้นหาด้วยภาพลงในเว็บไซต์ สตรีมจะส่งผ่านสตรีมจากกล้องของอุปกรณ์ผ่านชุดตัวตรวจจับที่จับคู่วัตถุในโลกจริง ซึ่งเรียกว่า "เป้าหมาย" กับเนื้อหาในเว็บไซต์ การแมปนี้กำหนดโดยใช้ Structured Data (JSON-LD) ในเว็บไซต์ ข้อมูลนี้จะช่วยให้คุณนำเสนอข้อมูลที่ถูกต้องใน UI ที่ปรับแต่งได้

ผมจะสาธิตให้ดูให้คุณทราบคร่าวๆ ว่ามันทำงานอย่างไร ดูคำอธิบายทั้งหมดได้ในคู่มือเริ่มต้นใช้งาน ข้อมูลอ้างอิงเกี่ยวกับชุดเครื่องมือ การสาธิตแซนด์บ็อกซ์ I/O และตัวอย่างการสาธิต

ข้อมูลที่มีโครงสร้าง

เครื่องมือชุดนี้ไม่สามารถค้นหาเป้าหมายใดก็ได้ในมุมมองของกล้อง คุณต้องระบุข้อมูล JSON ที่ลิงก์สำหรับเป้าหมายที่ต้องการให้จดจำ ข้อมูลนี้ยังมีข้อมูลเกี่ยวกับเป้าหมายที่จะแสดงต่อผู้ใช้ด้วย

ข้อมูลทั้งหมดที่คุณต้องใช้ในการสร้างประสบการณ์ของผู้ใช้แบบเดียวกับที่แสดงในรูปภาพด้านล่าง หากไม่ดําเนินการใดๆ เลย Web Perception Toolkit จะระบุเป้าหมาย จากนั้นแสดงและซ่อนการ์ดตามข้อมูลที่ให้ไว้ในข้อมูล ลองทำตามขั้นตอนนี้ด้วยตัวคุณเองโดยใช้อาร์ติแฟกต์แผนที่ Demo

เพิ่มข้อมูลลงในเว็บไซต์ด้วยไฟล์ข้อมูลที่ลิงก์ด้วย 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"
    }
  }
]

ประสบการณ์ของผู้ใช้

หากคุณต้องการมากกว่าประสบการณ์การใช้งานเริ่มต้นของผู้ใช้ ชุดเครื่องมือนี้ประกอบด้วยเหตุการณ์วงจร ออบเจ็กต์การ์ด และปุ่มสําหรับสร้างประสบการณ์ของผู้ใช้รอบเหตุการณ์เหล่านั้น และวิธีง่ายๆ ในการจัดรูปแบบการ์ด เราจะแสดงตัวอย่างโค้ดนี้โดยอิงตามคู่มือเริ่มต้นใช้งาน

เหตุการณ์วงจรของลูกค้าที่สําคัญที่สุดคือ PerceivedResults ซึ่งจะทํางานทุกครั้งที่พบเป้าหมาย เป้าหมายอาจเป็นวัตถุหรือเครื่องหมายที่มีอยู่จริง เช่น บาร์โค้ดหรือคิวอาร์โค้ด

ขั้นตอนในการตอบกลับกิจกรรมนี้เหมือนกับกิจกรรมอื่นๆ ที่มีข้อยกเว้นที่พูดถึงไปแล้ว หากคุณไม่ได้ติดตั้งใช้งานเหตุการณ์ ระบบจะสร้างอินเทอร์เฟซผู้ใช้โดยอัตโนมัติโดยใช้ Structured Data หากต้องการลบล้างลักษณะการทํางานนี้ ให้เริ่มตัวจัดการเหตุการณ์ด้วยการเรียก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 ที่ระบุมีพร็อพเพอร์ตี้ style (และรายการอื่นๆ อีกมากมาย) ที่ช่วยให้คุณใส่ตราประทับขององค์กรในรูปลักษณ์ได้ หากต้องการรวมสไตล์ชีตเริ่มต้น ให้เพิ่มองค์ประกอบ <link> ลงในหน้า

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

บทสรุป

ดังที่ได้กล่าวไว้ข้างต้น นี่เป็นภาพรวมคร่าวๆ ของชุดเครื่องมือการรับรู้เว็บ เราหวังว่าบทความนี้จะแสดงให้เห็นว่าการเพิ่มการค้นหาด้วยภาพลงในเว็บไซต์นั้นง่ายเพียงใด ดูข้อมูลเพิ่มเติมจากคู่มือการเริ่มต้นใช้งานและตัวอย่างการสาธิต เจาะลึกในเอกสารประกอบ ชุดเครื่องมือ เพื่อดูว่าเครื่องมือนี้ทำอะไรได้บ้าง