חיפוש ויזואלי באמצעות כלי התפיסה באינטרנט

אינטראקציה פשוטה בעולם האמיתי.

Joe Medley
Joe Medley
לא הייתם רוצים שהמשתמשים יוכלו לחפש באתר שלכם באמצעות המצלמה? נסו לדמיין את זה. שם האתר שלך הוא 'גילוח חד'. הלקוחות שלכם מדווחים לכם שקשה להם למצוא את המחסניות המתאימות לסכין הגילוח שלהם כשהם מזמינים מחדש. הם לא יודעים את מילות המפתח המתאימות לחיפוש המוצרים שלכם. ובואו נודה על האמת, סביר להניח שהם אף פעם לא יעשו זאת.

מה יקרה אם הם אף פעם לא יצטרכו לעשות זאת? מה אם הם יוכלו להפנות את המצלמה של הטלפון שלהם אל קוד ה-UPC על האריזה, והאתר שלכם יציג להם את המחסנית המתאימה ולחצן אדום גדול של 'הזמנה מחדש'?

כדאי לחשוב על דרכים אחרות שבהן אפשר להשתמש במצלמה באתר. נניח שיש אתר שתומך בבדיקת מחירים בחנות. נניח שאתם רוצים לקבל מידע על תערוכה במוזיאון או על ציון דרך היסטורי. נסו לדמיין איך אפשר לזהות ציוני דרך בעולם האמיתי במשחקים כמו 'ג'או-קאשינג' או 'ציד אוצרות'.

Web Perception Toolkit מאפשר לבצע את התרחישים האלה שמבוססים על מצלמה. במקרים מסוימים אפשר אפילו ליצור חוויית משתמש בלי לכתוב קוד.

איך זה עובד?

ערכת הכלים של Web Perception Toolkit בקוד פתוח עוזרת לכם להוסיף חיפוש חזותי לאתר. המערכת מעבירה את הסטרימינג של מצלמת המכשיר דרך קבוצה של גלאי שממפים אובייקטים בעולם האמיתי, שנקראים כאן 'יעדים', לתוכן באתר. המיפוי הזה מוגדר באמצעות נתונים מובְנים (JSON-LD) באתר. בעזרת הנתונים האלה תוכלו להציג את המידע הנכון בממשק משתמש שניתן להתאמה אישית.

אראה לכם מספיק כדי לתת לכם טעימה של איך זה עובד. הסבר מלא זמין במדריך תחילת העבודה, במסמך העזרה של ערכת הכלים, בהדגמה של I/O Sandbox ובדגמי הדגמות.

נתונים מובְנים

ערכת הכלים לא יכולה למצוא כל יעד שמוצג בתצוגה של המצלמה. צריך לספק לו נתוני JSON מקושרים של היעדים שרוצים לזהות. הנתונים האלה מכילים גם מידע על היעדים שיוצגו למשתמש.

הנתונים האלה הם כל מה שדרוש כדי ליצור חוויית משתמש כמו זו שבתמונה שבהמשך. אם לא תבצעו פעולה נוספת, ערכת הכלים של Web Perception תוכל לזהות יעדים ולהציג ולהסתיר כרטיסים על סמך המידע שמסופק בנתונים. אתם יכולים לנסות זאת בעצמכם באמצעות הדגמה של artifact-map.

הממשק שמוגדר כברירת מחדל זמין רק באמצעות הנתונים המקושרים.
ממשק ברירת המחדל.

הוספת נתונים לאתר באמצעות קובץ נתונים מקושר בפורמט 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, שמופעל בכל פעם שמוצאים יעד. יעד יכול להיות אובייקט בעולם האמיתי או סמן כמו ברקוד או קוד QR.

התהליך של תגובה לאירוע הזה זהה לתהליך של תגובה לכל אירוע אחר, מלבד החריג שכבר הוזכר. אם לא מטמיעים את האירוע, ממשק המשתמש נוצר באופן אוטומטי באמצעות נתונים מובְנים. כדי לשנות את ההתנהגות הזו, צריך להתחיל את טיפול האירועים באמצעות קריאה ל-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 מספקת עיצוב מובנה לכרטיסים וללחצנים באמצעות גיליון סגנונות ברירת המחדל. אבל אתם יכולים להוסיף בקלות סמלים משלכם. האובייקטים Card ו-ActionButton שסופקו מכילים מאפייני style (בין היתר) שמאפשרים לכם להוסיף את המאפיינים הארגוניים שלכם למראה ולתחושה. כדי לכלול את גיליון הסגנונות שמוגדר כברירת מחדל, מוסיפים לדף רכיב <link>.

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

סיכום

כפי שציינתי בתחילת הפוסט, זהו לא סקירה מקיפה של Web Perception Toolkit. אנחנו מקווים שהסברנו לכם כמה קל להוסיף חיפוש חזותי לאתר. מידע נוסף זמין במדריך למתחילים ובדמואות להדגמה. כדאי לעיין במסמכי העזרה של ערכת הכלים כדי ללמוד מה אפשר לעשות איתה.