웹 인식 툴킷을 사용한 시각적 검색

실제 상호작용을 사용하기가 쉽습니다.

사용자가 카메라를 사용해 사이트를 검색할 수 있다면 얼마나 좋을까요? 상상해 보세요. 귀하의 사이트는 Razor McShaveyface입니다. 고객은 재주문할 때 면도기에 적합한 카트리지를 찾는 데 어려움이 있다고 말합니다. 이들은 상품 검색에 적합한 키워드를 모릅니다 그리고 솔직히 말하면 아마도 그렇게 하지 않을 것입니다.

그럴 필요가 없다면 어떻게 해야 할까요? 사용자가 휴대전화 카메라로 패키지의 UPC 코드를 가리킬 수 있고 사이트에서 적절한 카트리지와 빨간색의 큰 '재주문' 버튼을 표시할 수 있다면 어떨까요?

사이트에서 카메라를 사용할 수 있는 다른 방법을 생각해 보세요. 매장 내 가격 확인을 지원하는 사이트를 생각해 보세요. 박물관 전시물이나 역사적 마커에 대한 정보를 받는다고 상상해 보세요 지오캐싱이나 스캐빈저 헌트 같은 게임에서 실제 세계의 랜드마크를 식별한다고 상상해 보세요

웹 인식 도구를 사용하면 이러한 카메라 기반 시나리오를 만들 수 있습니다. 코드를 작성하지 않고도 환경을 만들 수도 있죠

기본 원리

오픈소스 웹 인식 도구함을 사용하면 웹사이트에 시각적 검색을 추가할 수 있습니다. '타겟'이라고 하는 실제 객체를 사이트의 콘텐츠에 매핑하는 감지기 집합을 통해 기기 카메라 스트림을 전달합니다. 이 매핑은 사이트의 구조화된 데이터 (JSON-LD)를 사용하여 정의됩니다. 이 데이터를 사용하면 맞춤설정 가능한 UI에 올바른 정보를 표시할 수 있습니다.

작동 방식을 맛보기로 충분히 보여드리겠습니다. 전체 설명은 시작하기 가이드, 툴킷 참조, I/O 샌드박스 데모 및 샘플 데모를 확인하세요.

구조화된 데이터

툴킷이 카메라 뷰에서 대상을 찾을 수 없습니다. 인식할 대상과 관련된 JSON 데이터를 연결된 JSON 데이터와 함께 제공해야 합니다. 이 데이터에는 사용자에게 표시되는 이러한 타겟에 관한 정보도 포함되어 있습니다.

아래 이미지와 같은 사용자 환경을 만들기 위해서는 데이터만 있으면 됩니다. 다른 조치를 취하지 않으면 웹 인식 도구 키트가 대상을 식별한 다음 데이터에서 제공된 정보를 기반으로 카드를 표시하거나 숨길 수 있습니다. artifact-map 데모를 사용하여 직접 시도해 보세요.

<script> 태그 및 "application/ld+json" MIME 유형을 사용하여 포함된 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);
  }
}

카드 포맷

웹 인식 도구함에서는 기본 스타일시트가 포함된 카드 및 버튼 형식을 기본 제공합니다. 하지만 자신의 데이터는 쉽게 추가할 수 있습니다. 제공된 Card 및 ActionButton 객체에는 디자인에 조직 스탬프를 지정할 수 있는 style 속성이 포함되어 있습니다. 기본 스타일시트를 포함하려면 페이지에 <link> 요소를 추가합니다.

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

결론

위에서 말씀드렸듯이 이 동영상은 웹 인식 툴킷의 일부에 불과합니다. 이를 통해 웹사이트에 시각적 검색을 얼마나 쉽게 추가할 수 있는지 알 수 있기를 바랍니다. 자세한 내용은 시작 가이드와 샘플 데모를 참조하세요. 툴킷 문서를 확인하여 무엇을 할 수 있는지 알아보세요.