visearch sdk javascript 다운로드 - visearch sdk javascript 소스 코드 다운로드

visearch sdk javascript

자바 소스 코드

5.0.0 Release

다운로드

visearch-자바스크립트-sdk

ViSenze의 Javascript SDK는 카탈로그 내에서 정확하고 안정적이며 확장 가능한 이미지 검색 API를 제공합니다. 이 SDK에 포함된 API는 개발자에게 이미지 검색을 효율적으로 실행하는 동시에 웹앱에 쉽게 통합할 수 있는 엔드포인트를 제공하는 것을 목표로 합니다.

참고: SDK를 사용하려면 ViSenze 개발자 계정이 필요합니다. 자신의 대시보드에 액세스하여 앱키와 카탈로그를 관리할 수 있습니다. 자세한 내용을 보려면 여기를 방문하세요.

visearch-자바스크립트-sdk
- 목차
- 1. 빠른 시작
  - 1.1 설치
  - 1.2 설정
    - 1.2.1 가져오기 및 초기화
    - 1.2.2 키 구성
  - 1.3 데모
- 2. API
  - 2.1 이미지로 검색
  - 2.2 권장사항
  - 2.3 다중 검색
  - 2.4 다중 검색 자동 완성
- 3. 검색결과
  - 3.1 오류데이터
  - 3.2 제품 유형
  - 3.3 제품
    - 3.3.1 데이터
  - 3.4 제품객체
  - 3.5 패싯
  - 3.6 패싯항목
  - 3.7 패싯 범위
- 4. 고급 검색 매개변수
  - 4.1 예 - 메타데이터 검색
  - 4.2 예 - 결과 필터링
  - 4.3 예 - 자동 개체 인식
- 5. 이벤트 추적
  - 5.1 설정 추적
  - 5.2 이벤트 보내기
    - 5.2.1 세션 ID 얻기
    - 5.2.2 사용자 ID 얻기
    - 5.2.3 쿼리 ID 얻기
  - 5.2 일괄 이벤트 보내기
- 6. 크기 조정 설정
- 7. v3에서 마이그레이션

1. 빠른 시작

기본 저장소에 포함된 데모를 탐색하여 SDK를 통합하는 방법과 실제로 작동하는 방법을 익히려면 다음의 간단한 단계를 따르세요.

1.1 설치

기본 저장소에서 직접 제공되는 프로젝트를 사용하는 경우 이 프로젝트의 루트 디렉터리에서 다음 명령을 실행하면 됩니다.

 npm install

npm을 통해 이 SDK를 자신의 프로젝트에 포함시키려는 경우 프로젝트의 루트 디렉터리에서 다음 명령을 실행하세요.

 npm install visearch-javascript-sdk

1.2 설정

1.2.1 가져오기 및 초기화

노드 내

 import ViSearch from 'visearch-javascript-sdk' ;

...

const visearch = ViSearch ( ) ;

여러 인스턴스 만들기

여러 배치가 있거나 다른 구성으로 배치를 실행하려는 경우 여러 ViSearch 인스턴스를 생성해야 합니다.

 const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;

브라우저에서

SDK를 웹페이지에 직접 포함하려면 이를 사이트 헤더에 추가하세요.

 < script type =" text/javascript " >
! function ( e , t , r , s , a ) { if ( Array . isArray ( a ) ) for ( var n = 0 ; n < a . length ; n ++ ) o ( e , t , r , s , a [ n ] ) ; else o ( e , t , r , s , a ) ; function o ( e , t , r , s , a ) { var n = e [ a ] || { } ; e [ a ] = n , n . q = n . q || [ ] , n . factory = function ( e ) { return function ( ) { var t = Array . prototype . slice . call ( arguments ) ; return t . unshift ( e ) , n . q . push ( t ) , n } } , n . methods = [ "set" , "setKeys" , "sendEvent" , "sendEvents" , "productMultisearch" , "productMultisearchAutocomplete" , "productSearchByImage" , "productSearchById" , "productRecommendations" , "productSearchByIdByPost" , "productRecommendationsByPost" , "setUid" , "getUid" , "getSid" , "getLastQueryId" , "getSessionTimeRemaining" , "getDefaultTrackingParams" , "resetSession" , "resizeImage" , "generateUuid" , ] ; for ( var o = 0 ; o < n . methods . length ; o ++ ) { var i = n . methods [ o ] ; n [ i ] = n . factory ( i ) } if ( e . viInit ) viInit ( e , a ) ; else { var c , d , u , f , g , m = ( c = t , d = r , u = s , ( f = c . createElement ( d ) ) . type = "text/javascript" , f . async = ! 0 , f . src = u , ( g = c . getElementsByTagName ( d ) [ 0 ] ) . parentNode . insertBefore ( f , g ) , f ) ; m . onload = function ( ) { viInit ( e , a ) } , m . onerror = function ( ) { console . log ( "ViSearch Javascript SDK load fails" ) } } } } ( window , document , "script" , "https://cdn.visenze.com/visearch/dist/js/visearch-5.0.0.min.js" , "visearch" ) ;
 script >

여러 인스턴스 만들기

동일한 코드를 복사하되 "visearch" 키워드를 원하는 인스턴스 이름의 배열로 변경합니다.

 < script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
 script >

1.2.2 키 구성

SDK 사용을 시작하기 전에 . 이러한 키의 대부분은 계정의 대시보드에서 찾을 수 있습니다.

각 키가 무엇을 나타내는지 이해하려면 아래 표를 살펴보세요.

열쇠	중요성	설명
앱_키	필수	모든 SDK 기능은 설정된 유효한 app_key에 따라 달라집니다. 앱 키는 사용할 수 있는 API 기능도 제한합니다.
배치_ID	필수	현재 게재위치의 게재위치 ID
끝점	상황에 따른	기본값은 `https://search.visenze.com/` 입니다.
시간 초과	선택 과목	기본값은 15000입니다.
UID	선택 과목	이것이 제공되지 않으면 uid가 자동으로 생성됩니다.

콘솔의 키를 사용하여 ViSearch 인스턴스를 설정합니다.

 visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;

또는

 visearch . setKeys ( {
  'app_key' : 'YOUR_APP_KEY' ,
  'placement_id' : 'YOUR_PLACEMENT_ID'
} ) ;
visearch2 . setKeys ( {
  'app_key' : 'YOUR_APP_KEY_2' ,
  'placement_id' : 'YOUR_PLACEMENT_ID_2'
} ) ;

또는

Node 환경에 있는 경우 ViSearch 클라이언트를 생성할 때 구성을 직접 전달할 수 있습니다.

 const visearch = ViSearch ( {
  'app_key' : 'YOUR_APP_KEY' ,
  'placement_id' : 'YOUR_PLACEMENT_ID'
} )

1.3 데모

데모는 메인 저장소에서 직접 작업하는 사람들에게만 적용됩니다. Node.js 환경이 필요하며 관련 파일을 채워야 합니다.

.env 파일을 만들고 관련 앱 키와 배치 ID를 입력하세요.

 SEARCH_APP_KEY = 
SEARCH_PLACEMENT_ID = 
SEARCH_IM_URL = 
REC_PID = 
REC_APP_KEY = 
REC_PLACEMENT_ID = 
ENDPOINT =

웹페이지 데모를 실행하려면:
```
 npm run start - demo
```
위 명령을 실행하면 서버가 장치에서 로컬로 실행되고 있는 것을 확인할 수 있습니다. 그런 다음 http://localhost:3000/examples/*.html 형식을 사용하여 브라우저에서 다양한 데모 웹페이지에 액세스할 수 있습니다.
- 예: 제품 추천:
http://localhost:3000/examples/product_search_by_id.html
- 예: 이미지로 제품 검색:
http://localhost:3000/examples/product_search_by_image.html
- 예: 추적:
http://localhost:3000/examples/tracking.html

2. API

2.1 이미지로 검색

POST /product/search_by_image

이미지로 검색하는 방법은 URL, ID, 파일 등 세 가지가 있습니다.

이미지 ID 사용:

 const parameters = {
  im_id : 'your-image-id'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productSearchByImage ( parameters , onResponse , onError ) ;

이미지 URL 사용:

 const parameters = {
  im_url : 'your-image-url'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productSearchByImage ( parameters , onResponse , onError ) ;

이미지 파일 사용:

 < form >
  Upload image: < input type =" file " id =" fileUpload " name =" fileInput " > < br >
  < input type =" submit " value =" Submit " >
 form >

 const parameters = {
  image : document . getElementById ( 'fileUpload' )
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productSearchByImage ( parameters , onResponse , onError ) ;

이 API에 대한 요청 매개변수는 ViSenze Documentation Hub에서 찾을 수 있습니다.

2.2 권장 사항

GET /product/recommendations/{product_id}

색인된 제품의 고유 식별자를 제공하는 제품 데이터베이스에서 시각적으로 유사한 제품을 검색합니다.

 const product_id = 'your-product-id' ;

const parameters = {
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productRecommendations ( product_id , parameters , onResponse , onError ) ;

이 API에 대한 요청 매개변수는 ViSenze Documentation Hub에서 찾을 수 있습니다.

2.3 다중 검색

POST /제품/다중 검색

다중 검색은 텍스트, URL, ID 또는 파일 등 네 가지 방법으로 발생할 수 있습니다.

텍스트 사용:

 const parameters = {
  q : 'your-text-query'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearch ( parameters , onResponse , onError ) ;

이미지 ID 사용:

 const parameters = {
  im_id : 'your-image-id'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearch ( parameters , onResponse , onError ) ;

이미지 URL 사용:

 const parameters = {
  im_url : 'your-image-url'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearch ( parameters , onResponse , onError ) ;

이미지 파일 사용:

 < form >
  Upload image: < input type =" file " id =" fileUpload " name =" fileInput " > < br >
  < input type =" submit " value =" Submit " >
 form >

 const parameters = {
  image : document . getElementById ( 'fileUpload' )
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearch ( parameters , onResponse , onError ) ;

이 API에 대한 요청 매개변수는 ViSenze Documentation Hub에서 찾을 수 있습니다.

2.4 다중 검색 자동 완성

POST /제품/다중 검색/자동 완성

다중 검색 자동 완성은 텍스트, URL, ID 또는 파일 등 네 가지 방법으로 발생할 수 있습니다.

텍스트 사용:

 const parameters = {
  q : 'your-text-query'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;

이미지 ID 사용:

 const parameters = {
  im_id : 'your-image-id'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;

이미지 URL 사용:

 const parameters = {
  im_url : 'your-image-url'
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;

이미지 파일 사용:

 < form >
  Upload image: < input type =" file " id =" fileUpload " name =" fileInput " > < br >
  < input type =" submit " value =" Submit " >
 form >

 const parameters = {
  image : document . getElementById ( 'fileUpload' )
} ;

const onResponse = ( response ) => {
  // TODO handle response
}

const onError = ( error ) => {
  // TODO handle error
}

visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;

이 API에 대한 요청 매개변수는 ViSenze Documentation Hub에서 찾을 수 있습니다.

3. 검색결과

Javascript에는 유형 정의가 포함되어 있지 않으며 모든 API에 대한 REST API 응답은 대신 Javascript 개체로 바로 변환됩니다. 다음은 주목해야 할 API 응답 객체의 키 중 일부입니다.

이름	유형	설명
상태	끈	요청 상태( `OK` , `warning` 또는 `fail`
이미	끈	이미지 ID. 재업로드 없이 다시 검색할 수 있습니다.
im_id	끈
오류	물체	요청이 성공하지 못한 경우, 즉 상태가 `warning` 또는 `fail` 경우의 오류 메시지 및 코드
제품_유형	물체[]	(x1,y1,x2,y2) 형식으로 감지된 제품 유형, 점수 및 경계 상자
결과	물체[]	검색결과에 나온 상품목록입니다. 첫 번째 릴리스의 중요 필드입니다. 누락된 경우 공백으로 설정됩니다. "데이터" 필드에는 고객의 원본 카탈로그 필드가 표시됩니다.
사물	물체[]	`search_all_objects` 매개변수가 `true` 로 설정된 경우
카탈로그_필드_매핑	물체	원본 카탈로그의 필드 매핑
패싯	물체[]	필터링을 위한 패싯 필드 값 및 응답 목록
페이지	숫자	결과 페이지 번호
한계	숫자	페이지당 결과 수
총	숫자	총 검색결과 수
필수	끈	요청에 할당된 ID

3.1 오류데이터

이름	유형	설명
암호	숫자	오류 코드(예: 401, 404 등)
메시지	끈	서버 응답 메시지입니다.

3.2 제품 유형

이름	유형	설명
상자	숫자[]	제품을 나타내는 감지 상자의 이미지 공간 좌표입니다.
유형	끈	감지된 제품 유형입니다.

3.3 제품

이름	유형	설명
제품_ID	끈	추천에 사용할 수 있는 상품의 ID입니다.
메인_이미지_URL	끈	이미지 URL.
데이터	물체	이 데이터 필드는 여기에서 사용자가 요청한 메타데이터에 따라 달라집니다.

3.3.1 데이터

여기에 반환되는 필드는 attrs_to_get 매개변수를 통해 요청된 제품 메타데이터와 카탈로그에 색인화된 필드에 따라 달라집니다.

그 외에는 2개의 기본 필드를 반환합니다.

ViSenze 사전 정의된 카탈로그 필드	클라이언트 X의 카탈로그 원래 이름
제품_ID	sku
메인_이미지_URL	매체_이미지

3.4 제품객체

search_all_objects true 로 설정하면 검색 응답은 Product 목록 대신 ProductObject 목록에 결과를 직접 반환합니다. 차이점은 ProductObject가 유형에 따라 제품을 분할한다는 것입니다.

이름	유형	설명
결과	물체[]	이 유형에 속하는 제품 목록입니다.
총	숫자	이 유형의 총 결과 수입니다.
유형	끈	감지된 제품 유형입니다.
상자	숫자[]	제품을 나타내는 감지 상자의 이미지 공간 좌표입니다.

3.5 패싯

패싯은 잠재적인 결과 필터링을 수행하는 데 사용됩니다.

이름	유형	설명
열쇠	끈
아이템	물체[]
범위	물체

이용안내를 확인하시려면 여기를 참고해주세요

3.6 패싯항목

고유 값 필터링을 위한 패싯입니다.

이름	유형	설명
값	끈
세다	숫자

3.7 패싯 범위

값 범위 필터링을 위한 패싯입니다.

이름	유형	설명
분	끈
최대	끈

4. 고급 검색 매개변수

API가 지원하는 많은 매개변수가 있으며 이 섹션에서는 이를 사용하는 방법에 대한 몇 가지 예를 보여 드리겠습니다.

여기에서 ProductSearch API에 대해 지원되는 모든 고급 검색 매개변수를 찾을 수 있습니다.

4.1 예 - 메타데이터 검색

이미지 결과의 메타데이터를 검색하려면 attrs_to_get 속성에 반환될 메타데이터 값에 대한 메타데이터 키 목록을 제공하세요.

 visearch . productSearchByImage ( {
  im_url : 'your-image-url' ,
  attrs_to_get : [ 'price' , 'brand' , 'im-url' ] , // list of fields to be returned
} , ( res ) => {
  // TODO handle response
} , ( err ) => {
  // TODO handle error
} ) ;

이 매개변수를 사용하면 색인화된 속성만 검색할 수 있습니다. Discovery Suite 콘솔의 앱 편집 페이지로 이동하여 앱 인덱스에 포함된 속성을 검토할 수 있습니다.

4.2 예 - 결과 필터링

메타데이터 값을 기준으로 검색 결과를 필터링하려면 filters 속성에 필터 값에 대한 메타데이터 키의 문자열 배열을 제공하세요. 가격, 카테고리, 브랜드, 원본_가격만 필터 매개변수를 지원합니다.

 visearch . productSearchByImage ( {
  im_url : 'your-image-url' ,
  filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
  // TODO handle response
} ,

확장하다

추가 정보

버전 5.0.0 Release
유형 자바 소스 코드
업데이트 시간 2024-12-17
크기 121.59KB
출처 Github

visearch sdk javascript

visearch-자바스크립트-sdk

목차

1. 빠른 시작

1.1 설치

1.2 설정

1.2.1 가져오기 및 초기화

1.2.2 키 구성

1.3 데모

2. API

2.1 이미지로 검색

2.2 권장 사항

2.3 다중 검색

2.4 다중 검색 자동 완성

3. 검색결과

3.1 오류데이터

3.2 제품 유형

3.3 제품

3.3.1 데이터

3.4 제품객체

3.5 패싯

3.6 패싯항목

3.7 패싯 범위

4. 고급 검색 매개변수

4.1 예 - 메타데이터 검색

4.2 예 - 결과 필터링