visearch sdk javascript
5.0.0 Release
El SDK de Javascript de ViSenze proporciona API de búsqueda de imágenes precisas, confiables y escalables dentro de nuestros catálogos. Las API incluidas en este SDK tienen como objetivo proporcionar a los desarrolladores puntos finales que ejecuten la búsqueda de imágenes de manera eficiente y, al mismo tiempo, faciliten la integración en aplicaciones web.
Nota: Para utilizar cualquiera de nuestros SDK, debe tener una cuenta de desarrollador de ViSenze. Obtendrá acceso a su propio panel para administrar sus claves de aplicación y catálogos. Visita aquí para más información.
Siga estos sencillos pasos para familiarizarse con cómo se puede integrar el SDK y cómo funciona realmente explorando nuestras demostraciones incluidas en el repositorio principal.
Si está utilizando el proyecto proporcionado directamente desde el repositorio principal, simplemente puede ejecutar el siguiente comando desde el directorio raíz de este proyecto:
npm install
Si está intentando incluir este SDK en su propio proyecto a través de npm, ejecute el siguiente comando desde el directorio raíz de su proyecto:
npm install visearch-javascript-sdk
En nodo
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;Si tiene varias ubicaciones o si desea ejecutar ubicaciones con diferentes configuraciones, deberá crear varias instancias de ViSearch.
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;En el navegador
Si desea incluir el SDK directamente en su página web, agréguelo al encabezado de su sitio
< 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 >Copie el mismo código pero cambie la palabra clave "visearch" por una matriz de los nombres de instancias que desee.
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > Antes de poder comenzar a utilizar el SDK, deberá configurarlo. La mayoría de estas claves se pueden encontrar en el panel de control de su cuenta.
Eche un vistazo a la siguiente tabla para comprender qué representa cada clave:
| Llave | Importancia | Descripción |
|---|---|---|
| clave_aplicación | Obligatorio | Todas las funciones del SDK dependen de que se establezca una clave de aplicación válida. La clave de la aplicación también limita las funciones de API que puede utilizar. |
| id_ubicación | Obligatorio | ID de ubicación de la ubicación actual |
| punto final | situacional | El valor predeterminado es https://search.visenze.com/ |
| se acabó el tiempo | Opcional | Por defecto a 15000 |
| fluido | Opcional | Si no se proporciona esto, generaremos automáticamente el uid. |
Configure las instancias de ViSearch con las claves de la consola.
visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;o
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'
} ) ;o
Si está en un entorno de Nodo, puede pasar las configuraciones directamente al crear el cliente ViSearch.
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )La demostración solo se aplica a quienes trabajan directamente desde el repositorio principal. Debe tener un entorno Node.js y recordar completar los archivos relevantes .
Cree un archivo
.envy complete la clave de aplicación y la identificación de ubicación relevantes
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
Para ejecutar la demostración de la página web:
npm run start - demo Después del comando anterior, debería ver que el servidor se está ejecutando localmente en su dispositivo. Luego puede acceder a las diferentes páginas web de demostración en su navegador utilizando este formato 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 /producto/buscar_por_imagen
La búsqueda por imagen puede realizarse de tres formas diferentes: por URL, ID o archivo.
Usando identificación de imagen:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Usando la URL de la imagen:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Usando archivo de imagen:
< 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 ) ;Los parámetros de solicitud para esta API se pueden encontrar en ViSenze Documentation Hub.
OBTENER /producto/recomendaciones/{product_id}
Busque productos visualmente similares en la base de datos de productos proporcionando el identificador único de un producto indexado.
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 ) ;Los parámetros de solicitud para esta API se pueden encontrar en ViSenze Documentation Hub.
POST /producto/multibúsqueda
La búsqueda múltiple puede realizarse de cuatro maneras diferentes: por texto, URL, identificación o archivo.
Usando texto:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Usando identificación de imagen:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Usando la URL de la imagen:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Usando archivo de imagen:
< 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 ) ;Los parámetros de solicitud para esta API se pueden encontrar en ViSenze Documentation Hub.
POST /producto/multibúsqueda/autocompletar
El autocompletado de búsqueda múltiple puede realizarse de cuatro maneras diferentes: mediante texto, URL, identificación o archivo.
Usando texto:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Usando identificación de imagen:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Usando la URL de la imagen:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Usando archivo de imagen:
< 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 ) ;Los parámetros de solicitud para esta API se pueden encontrar en ViSenze Documentation Hub.
Javascript no contiene definiciones de tipos y la respuesta de la API REST para todas nuestras API simplemente se convertirá directamente en objetos de JavaScript. Estas son algunas de las claves del objeto de respuesta de la API que debe tener en cuenta:
| Nombre | Tipo | Descripción |
|---|---|---|
| estado | cadena | El estado de la solicitud, ya sea OK , warning o fail |
| Identidad | cadena | Identificación de imagen. Se puede usar para buscar nuevamente sin volver a cargar |
| im_id | cadena | |
| error | objeto | Mensaje de error y código si la solicitud no fue exitosa, es decir, cuando el estado es warning o fail |
| tipos_de_producto | objeto[] | Tipos de productos detectados, puntuación y su cuadro delimitador en formato (x1,y1,x2,y2) |
| resultado | objeto[] | La lista de productos en los resultados de búsqueda. Campos importantes para la primera versión. Si falta, se dejará en blanco. Tenga en cuenta que estamos mostrando los campos del catálogo original del cliente en el campo "datos". |
| objetos | objeto[] | Cuando el parámetro search_all_objects se establece en true |
| mapeo_campos_catálogo | objeto | Mapeo de campos del catálogo original. |
| facetas | objeto[] | Lista de valores de campos de facetas y respuesta para filtrado |
| página | número | El número de página de resultados. |
| límite | número | El número de resultados por página. |
| total | número | Número total de resultados de búsqueda |
| ID requerido | cadena | ID asignado a la solicitud realizada |
| Nombre | Tipo | Descripción |
|---|---|---|
| código | número | Código de error, por ejemplo 401, 404, etc. |
| mensaje | cadena | El mensaje de respuesta del servidor. |
| Nombre | Tipo | Descripción |
|---|---|---|
| caja | número[] | Las coordenadas del espacio de imagen del cuadro de detección que representa el producto. |
| tipo | cadena | El tipo detectado del producto. |
| Nombre | Tipo | Descripción |
|---|---|---|
| id_producto | cadena | El ID del producto que se puede utilizar en Recommendations. |
| url_imagen_principal | cadena | URL de la imagen. |
| datos | objeto | Este campo de datos depende de los metadatos solicitados por el usuario aquí. |
Los campos que se devuelven aquí dependen de los metadatos del producto solicitados a través de los parámetros attrs_to_get y los campos indexados en su catálogo.
Aparte de eso, devolvemos 2 campos predeterminados.
| Campos de catálogo predefinidos de ViSenze | Nombres originales del catálogo del cliente X. |
|---|---|
| id_producto | referencia |
| url_imagen_principal | imagen_media |
Cuando el uso de search_all_objects se establece en true , la respuesta de búsqueda devolverá los resultados en una lista de ProductObject en lugar de una lista de Product directamente. La diferencia es que ProductObject dividirá los productos según el tipo.
| Nombre | Tipo | Descripción |
|---|---|---|
| resultado | objeto[] | La lista de productos pertenecientes a este tipo. |
| total | número | El número total de resultados de este tipo. |
| tipo | cadena | El tipo detectado del producto. |
| caja | número[] | Las coordenadas del espacio de imagen del cuadro de detección que representa el producto. |
Las facetas se utilizan para realizar posibles filtrados de resultados.
| Nombre | Tipo | Descripción |
|---|---|---|
| llave | cadena | |
| elementos | objeto[] | |
| rango | objeto |
Para consultar las pautas de uso, consulte aquí
Faceta para filtrado de valores distintos.
| Nombre | Tipo | Descripción |
|---|---|---|
| valor | cadena | |
| contar | número |
Faceta para filtrado de rango de valores.
| Nombre | Tipo | Descripción |
|---|---|---|
| mín. | cadena | |
| máximo | cadena |
Hay muchos parámetros que nuestra API admite y le mostraremos algunos ejemplos de cómo usarlos en esta sección.
Puede encontrar todos los parámetros de búsqueda avanzada admitidos para ProductSearch API aquí.
Para recuperar metadatos de los resultados de su imagen, proporcione la lista de claves de metadatos para el valor de metadatos que se devolverá en la propiedad 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
} ) ;Tenga en cuenta que solo se pueden recuperar los atributos indexados con este parámetro. Puede ir a la página Editar aplicación en la consola de Discovery Suite para revisar qué atributos se han incluido en el índice de la aplicación.
Para filtrar los resultados de la búsqueda según los valores de los metadatos, proporcione una matriz de cadenas de claves de metadatos para filtrar el valor en la propiedad filters . Solo parámetro de filtro de soporte de precio, categoría, marca, precio_original.
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
