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

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

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

จะเกิดอะไรขึ้นหากผู้เรียนไม่เคยต้องดำเนินการดังกล่าว จะเกิดอะไรขึ้นหากลูกค้าสามารถชี้กล้องของโทรศัพท์ไปที่รหัส 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">

บทสรุป

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