visearch sdk javascript
5.0.0 Release
ViSenze 的 Javascript SDK 在我們的目錄中提供準確、可靠且可擴展的圖像搜尋 API。該 SDK 中包含的 API 旨在為開發人員提供高效執行圖像搜尋的端點，同時還可以輕鬆整合到 Web 應用程式中。
注意：為了使用我們的任何 SDK，您需要擁有 ViSenze 開發者帳戶。您將可以存取自己的儀表板來管理您的應用程式密鑰和目錄。請造訪此處以了解更多資訊。
按照這些簡單的步驟，透過探索主儲存庫中包含的示範來熟悉如何整合 SDK 以及它的實際運作原理。
如果您使用直接從主儲存庫提供的項目，則只需從該項目的根目錄執行以下命令即可：
npm install
如果您嘗試透過 npm 將此 SDK 包含到您自己的專案中，請從專案的根目錄執行以下命令：
npm install visearch-javascript-sdk
在節點中
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 > 在開始使用 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'
} )此演示僅適用於直接在主儲存庫上工作的人員。需要有Node.js環境，記得填入相關文件。
建立
.env檔案並填寫相關的app key和placement 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
POST /產品/按影像搜尋
按圖像搜尋可以透過三種不同的方式進行 - 透過 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 ) ;使用影像網址：
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 文件中心找到。
取得/產品/推薦/{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 文件中心找到。
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 ) ;使用影像網址：
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 文件中心找到。
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 ) ;使用影像網址：
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 文件中心找到。
Javascript 不包含類型定義，我們所有 API 的 REST API 回應都會直接轉換為 javascript 物件。以下是一些需要注意的 API 回應物件的按鍵：
| 姓名 | 類型 | 描述 |
|---|---|---|
| 地位 | 細繩 | 請求狀態， OK 、 warning或fail |
| 伊姆德 | 細繩 | 圖像 ID。可用於再次搜索，無需重新上傳 |
| 即時通訊 ID | 細繩 | |
| 錯誤 | 目的 | 如果請求不成功（即狀態為warning或fail時）的錯誤訊息和代碼 |
| 產品類型 | 目的[] | 偵測到的產品類型、分數及其邊界框（x1,y1,x2,y2）格式 |
| 結果 | 目的[] | 搜尋結果中的產品清單。首次發布的重要欄位。如果缺失，它將被設定為空白。請注意，我們在「資料」欄位中顯示客戶的原始目錄字段 |
| 物體 | 目的[] | 當search_all_objects參數設定為true時 |
| 目錄字段映射 | 目的 | 原始目錄的字段映射 |
| 刻面 | 目的[] | 用於過濾的方面字段值和響應列表 |
| 頁 | 數位 | 結果頁碼 |
| 限制 | 數位 | 每頁結果數 |
| 全部的 | 數位 | 搜尋結果總數 |
| 請求編號 | 細繩 | 分配給所發出請求的 ID |
| 姓名 | 類型 | 描述 |
|---|---|---|
| 程式碼 | 數位 | 錯誤代碼，例如 401、404 等... |
| 訊息 | 細繩 | 伺服器回應訊息。 |
| 姓名 | 類型 | 描述 |
|---|---|---|
| 盒子 | 數字[] | 代表產品的檢測框的圖像空間座標。 |
| 類型 | 細繩 | 檢測到的產品類型。 |
| 姓名 | 類型 | 描述 |
|---|---|---|
| 產品編號 | 細繩 | 可在推薦中使用的產品 ID。 |
| 主圖像位址 | 細繩 | 圖片網址。 |
| 數據 | 目的 | 此資料欄位取決於使用者在此處請求的元資料。 |
此處傳回的欄位取決於透過attrs_to_get參數請求的產品元資料以及目錄中索引的欄位。
除此之外，我們回傳 2 個預設欄位。
| ViSenze 預定義目錄字段 | 客戶X的目錄原名 |
|---|---|
| 產品編號 | 存貨單元 |
| 主圖像位址 | 中等影像 |
當使用search_all_objects設定為true時，搜尋回應會傳回 ProductObject 清單中的結果，而不是直接傳回 Product 清單。不同的是ProductObject會根據類型來分割產品。
| 姓名 | 類型 | 描述 |
|---|---|---|
| 結果 | 目的[] | 屬於該類型的產品清單。 |
| 全部的 | 數位 | 此類型的結果總數。 |
| 類型 | 細繩 | 檢測到的產品類型。 |
| 盒子 | 數字[] | 代表產品的檢測框的圖像空間座標。 |
分面用於執行潛在的結果過濾。
| 姓名 | 類型 | 描述 |
|---|---|---|
| 鑰匙 | 細繩 | |
| 專案 | 目的[] | |
| 範圍 | 目的 |
若要查看使用指南，請參閱此處
用於不同值過濾的方面。
| 姓名 | 類型 | 描述 |
|---|---|---|
| 價值 | 細繩 | |
| 數數 | 數位 |
用於值範圍過濾的方面。
| 姓名 | 類型 | 描述 |
|---|---|---|
| 分分鐘 | 細繩 | |
| 最大限度 | 細繩 |
我們的 API 支援許多參數，我們將在本節中向您展示一些如何使用它們的範例。
您可以在此處找到 ProductSearch API 支援的所有進階搜尋參數。
若要擷取影像結果的元數據，請提供要在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 控制台中的編輯應用程式頁面來查看哪些屬性已包含在應用程式索引中。
若要根據元資料值過濾搜尋結果，請提供元資料鍵的字串陣列以在filters屬性中過濾值。僅price、category、brand、original_price支援濾波參數。
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
