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
} ,