visearch sdk javascript
5.0.0 Release
Le SDK Javascript de ViSenze fournit des API de recherche d'images précises, fiables et évolutives au sein de nos catalogues. Les API incluses dans ce SDK visent à fournir aux développeurs des points de terminaison qui exécutent efficacement la recherche d'images tout en facilitant leur intégration dans les applications Web.
Remarque : Pour utiliser l'un de nos SDK, vous devez disposer d'un compte développeur ViSenze. Vous aurez accès à votre propre tableau de bord pour gérer vos clés d'application et vos catalogues. Visitez ici pour plus d’informations.
Suivez ces étapes simples pour vous familiariser avec la façon dont le SDK peut être intégré et comment il fonctionne réellement en explorant nos démos incluses dans le dépôt principal.
Si vous utilisez le projet fourni directement depuis le dépôt principal, vous pouvez simplement exécuter la commande suivante depuis le répertoire racine de ce projet :
npm install
Si vous essayez d'inclure ce SDK dans votre propre projet via npm, exécutez la commande suivante à partir du répertoire racine de votre projet :
npm install visearch-javascript-sdk
Dans le nœud
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;Si vous disposez de plusieurs emplacements ou si vous souhaitez exécuter des emplacements avec des configurations différentes, vous devrez créer plusieurs instances ViSearch.
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;Dans le navigateur
Si vous souhaitez inclure le SDK directement sur votre page Web, ajoutez-le à l'en-tête de votre site
< 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 >Copiez le même code mais remplacez le mot-clé "visearch" par un tableau des noms d'instances souhaités.
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > Avant de pouvoir commencer à utiliser le SDK, vous devrez configurer . La plupart de ces clés se trouvent dans le tableau de bord de votre compte.
Veuillez consulter le tableau ci-dessous pour comprendre ce que représente chaque clé :
| Clé | Importance | Description |
|---|---|---|
| clé_app | Obligatoire | Toutes les fonctions du SDK dépendent de la définition d'une clé app_key valide. La clé d'application limite également les fonctionnalités API que vous pouvez utiliser. |
| placement_id | Obligatoire | ID d'emplacement de l'emplacement actuel |
| point final | Situationnel | La valeur par défaut est https://search.visenze.com/ |
| temps mort | Facultatif | Par défaut à 15 000 |
| uide | Facultatif | Si cela n'est pas fourni, nous générerons automatiquement l'uid |
Configurez la ou les instances ViSearch avec les clés de la console.
visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;ou
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'
} ) ;ou
si vous êtes dans un environnement Node, vous pouvez transmettre les configurations directement lors de la création du client ViSearch.
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )La démo n'est applicable qu'à ceux qui travaillent directement à partir du dépôt principal. Vous devez disposer d'un environnement Node.js et pensez à remplir les fichiers correspondants .
Créez un fichier
.envet remplissez la clé d'application et l'identifiant d'emplacement appropriés.
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
Pour exécuter la démo de la page Web :
npm run start - demo Après la commande ci-dessus, vous devriez voir que le serveur s'exécute localement sur votre appareil. Vous pouvez ensuite accéder aux différentes pages Web de démonstration dans votre navigateur en utilisant ce format 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 /produit/search_by_image
La recherche par image peut s'effectuer de trois manières différentes : par URL, identifiant ou fichier.
Utilisation de l'identifiant de l'image :
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Utilisation de l'URL de l'image :
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Utilisation du fichier image :
< 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 ) ;Les paramètres de requête pour cette API sont disponibles sur ViSenze Documentation Hub.
OBTENIR /product/recommendations/{product_id}
Recherchez des produits visuellement similaires dans la base de données de produits en donnant l'identifiant unique d'un produit indexé.
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 ) ;Les paramètres de requête pour cette API sont disponibles sur ViSenze Documentation Hub.
POST /produit/multirecherche
La recherche multiple peut se produire de quatre manières différentes : par texte, URL, identifiant ou fichier.
Utiliser du texte :
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Utilisation de l'identifiant de l'image :
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Utilisation de l'URL de l'image :
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Utilisation du fichier image :
< 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 ) ;Les paramètres de requête pour cette API sont disponibles sur ViSenze Documentation Hub.
POST /produit/multirecherche/complétion automatique
La saisie semi-automatique multi-recherches peut se produire de quatre manières différentes : par texte, URL, identifiant ou fichier.
Utiliser du texte :
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Utilisation de l'identifiant de l'image :
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Utilisation de l'URL de l'image :
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Utilisation du fichier image :
< 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 ) ;Les paramètres de requête pour cette API sont disponibles sur ViSenze Documentation Hub.
Javascript ne contient pas de définitions de type et la réponse de l'API REST pour toutes nos API sera simplement convertie directement en objets javascript. Voici quelques-unes des clés de l'objet de réponse de l'API à prendre en compte :
| Nom | Taper | Description |
|---|---|---|
| statut | chaîne | L'état de la demande, soit OK , warning ou fail |
| identifiant | chaîne | Identifiant de l'image. Peut être utilisé pour effectuer une nouvelle recherche sans retélécharger |
| im_id | chaîne | |
| erreur | objet | Message d'erreur et code si la demande n'a pas abouti, c'est-à-dire lorsque l'état est warning ou fail |
| types_produits | objet[] | Types de produits détectés, score et leur cadre de délimitation au format (x1,y1,x2,y2) |
| résultat | objet[] | La liste des produits dans les résultats de recherche. Champs importants pour la première version. S’il est manquant, il sera vide. Notez que nous affichons les champs du catalogue d'origine du client dans le champ « données » |
| objets | objet[] | Lorsque le paramètre search_all_objects est défini sur true |
| catalog_fields_mapping | objet | Mappage des champs du catalogue d'origine |
| facettes | objet[] | Liste des valeurs et réponses des champs de facettes pour le filtrage |
| page | nombre | Le numéro de la page de résultat |
| limite | nombre | Le nombre de résultats par page |
| total | nombre | Nombre total de résultats de recherche |
| ID requis | chaîne | ID attribué à la demande effectuée |
| Nom | Taper | Description |
|---|---|---|
| code | nombre | Code d'erreur, par exemple 401, 404 etc... |
| message | chaîne | Le message de réponse du serveur. |
| Nom | Taper | Description |
|---|---|---|
| boîte | nombre[] | Les coordonnées de l'espace image de la boîte de détection qui représente le produit. |
| taper | chaîne | Le type détecté du produit. |
| Nom | Taper | Description |
|---|---|---|
| id_produit | chaîne | ID du produit qui peut être utilisé dans les recommandations. |
| url_image_main | chaîne | URL de l'image. |
| données | objet | Ce champ de données dépend des métadonnées demandées par l'utilisateur ci-dessous. |
Les champs renvoyés ici dépendent des métadonnées du produit demandées via les paramètres attrs_to_get et des champs indexés dans votre catalogue.
A part ça, nous renvoyons 2 champs par défaut.
| Champs du catalogue prédéfinis ViSenze | Noms originaux du catalogue du client X |
|---|---|
| id_produit | sku |
| url_image_main | image_moyenne |
Lorsque l'utilisation de search_all_objects est définie sur true , la réponse de recherche renverra les résultats dans une liste de ProductObject au lieu d'une liste de Product directement. La différence est que ProductObject divisera les produits selon leur type.
| Nom | Taper | Description |
|---|---|---|
| résultat | objet[] | La liste des produits appartenant à ce type. |
| total | nombre | Le nombre total de résultats dans ce type. |
| taper | chaîne | Le type détecté du produit. |
| boîte | nombre[] | Les coordonnées de l'espace image de la boîte de détection qui représente le produit. |
Les facettes sont utilisées pour effectuer un filtrage potentiel des résultats.
| Nom | Taper | Description |
|---|---|---|
| clé | chaîne | |
| articles | objet[] | |
| gamme | objet |
Pour consulter le guide d'utilisation, veuillez vous référer ici
Facette pour un filtrage de valeurs distinctes.
| Nom | Taper | Description |
|---|---|---|
| valeur | chaîne | |
| compter | nombre |
Facette pour le filtrage de la plage de valeurs.
| Nom | Taper | Description |
|---|---|---|
| min | chaîne | |
| maximum | chaîne |
Notre API prend en charge de nombreux paramètres et nous vous montrerons quelques exemples de la façon de les utiliser dans cette section.
Vous pouvez trouver tous les paramètres de recherche avancée pris en charge pour l'API ProductSearch ici.
Pour récupérer les métadonnées de vos résultats d'image, fournissez la liste des clés de métadonnées pour la valeur de métadonnées à renvoyer dans la propriété 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
} ) ;Notez que seuls les attributs indexés peuvent être récupérés avec ce paramètre. Vous pouvez accéder à la page Modifier l'application dans la console Discovery Suite pour vérifier quels attributs ont été inclus dans l'index de l'application.
Pour filtrer les résultats de recherche en fonction des valeurs de métadonnées, fournissez un tableau de chaînes de clés de métadonnées pour filtrer la valeur dans la propriété filters . Seuls le paramètre de filtre pris en charge par le prix, la catégorie, la marque et le prix original_price.
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
