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

อินเทอร์แอกทีฟที่ใช้งานง่าย

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

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

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

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

ลักษณะการจัดกิจกรรม

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

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

Structured Data

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

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

เพิ่มข้อมูลลงในเว็บไซต์ด้วยไฟล์ข้อมูลที่ลิงก์ด้วย 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 ซึ่งจะเริ่มทำงานทุกครั้งที่พบเป้าหมาย เป้าหมายอาจเป็นวัตถุที่มีอยู่จริงหรือเครื่องหมาย เช่น บาร์โค้ดหรือคิวอาร์โค้ด

กระบวนการตอบกลับเหตุการณ์นี้เหมือนกับกิจกรรมอื่นๆ ที่ได้ระบุข้อยกเว้นไว้แล้ว หากไม่ใช้เหตุการณ์ ระบบจะสร้างอินเทอร์เฟซผู้ใช้โดยอัตโนมัติโดยใช้ข้อมูลที่มีโครงสร้าง หากต้องการลบล้างลักษณะการทำงานนี้ ให้เริ่มตัวแฮนเดิลเหตุการณ์โดยการเรียกใช้ 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">

บทสรุป

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