visearch sdk javascriptダウンロード - visearch sdk javascriptソースコードのダウンロード

visearch sdk javascript

JAVAソースコード

5.0.0 Release

ダウンロード

visearch-javascript-sdk

ViSenze の Javascript SDK は、カタログ内で正確で信頼性が高く、スケーラブルな画像検索 API を提供します。この SDK に含まれる API は、画像検索を効率的に実行すると同時に、Web アプリへの統合を容易にするエンドポイントを開発者に提供することを目的としています。

注: SDK を使用するには、ViSenze 開発者アカウントが必要です。独自のダッシュボードにアクセスして、アプリキーとカタログを管理できるようになります。詳細については、こちらをご覧ください。

visearch-javascript-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 ( ) ;
```

ブラウザ内

Web ページに 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'
} ) ;

または

ノード環境にいる場合は、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 =

Web ページのデモを実行するには:
```
 npm run start - demo
```
上記のコマンドを実行すると、サーバーがデバイス上でローカルに実行されていることがわかります。その後、この形式http://localhost:3000/examples/*.htmlを使用して、ブラウザでさまざまなデモ Web ページにアクセスできます。
- 例: 製品の推奨:
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 /製品/画像による検索

画像による検索は、URL、ID、またはファイルによる 3 つの異なる方法で行うことができます。

イメージ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 推奨事項

/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、またはファイルによる 4 つの異なる方法で実行できます。

テキストの使用:

 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 /product/multisearch/autocomplete

マルチ検索オートコンプリートは、テキスト、URL、ID、ファイルによる 4 つの異なる方法で実行できます。

テキストの使用:

 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	弦	画像ID。再アップロードせずに再検索するために使用できます
im_id	弦
エラー	物体	リクエストが成功しなかった場合、つまりステータスが`warning`または`fail`場合のエラーメッセージとコード
製品タイプ	物体[]	検出された製品のタイプ、スコア、および (x1,y1,x2,y2) 形式の境界ボックス
結果	物体[]	検索結果の商品一覧です。最初のリリースの重要なフィールド。欠落している場合は空白に設定されます。「データ」フィールドにはお客様のオリジナルのカタログフィールドが表示されていることに注意してください。
オブジェクト	物体[]	`search_all_objects`パラメータが`true`に設定されている場合
カタログフィールドマッピング	物体	元のカタログのフィールドマッピング
ファセット	物体[]	ファセットフィールドの値とフィルタリングの応答のリスト
ページ	番号	結果のページ番号
限界	番号	ページごとの結果の数
合計	番号	検索結果の総数
必須ID	弦	リクエストに割り当てられたID

3.1 エラーデータ

名前	タイプ	説明
コード	番号	エラーコード（例：401、404など）
メッセージ	弦	サーバーの応答メッセージ。

3.2 製品タイプ

名前	タイプ	説明
箱	番号[]	製品を表す検出ボックスの画像空間座標。
タイプ	弦	検出された製品のタイプ。

3.3 製品

名前	タイプ	説明
製品ID	弦	レコメンデーションで使用できる製品の ID。
メイン画像の URL	弦	画像のURL。
データ	物体	このデータフィールドは、ここでユーザーが要求したメタデータに依存します。

3.3.1 データ

ここで返されるフィールドは、 attrs_to_getパラメータを通じて要求された製品メタデータとカタログ内でインデックス付けされたフィールドに依存します。

それ以外は、2 つのデフォルトフィールドを返します。

ViSenze の事前定義されたカタログフィールド	クライアント X のカタログの元の名前
製品ID	スク
メイン画像の 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プロパティに指定します。価格、カテゴリ、ブランド、original_price のみがフィルターパラメーターをサポートします。

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

拡大する

追加情報

バージョン 5.0.0 Release
タイプ JAVAソースコード
更新時間 2024-12-17
サイズ 121.59KB
から Github

visearch sdk javascript

visearch-javascript-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 例 - 結果のフィルタリング