visearch sdk javascript
5.0.0 Release
Das Javascript SDK von ViSenze bietet genaue, zuverlässige und skalierbare Bildsuch-APIs in unseren Katalogen. Die in diesem SDK enthaltenen APIs zielen darauf ab, Entwicklern Endpunkte zur Verfügung zu stellen, die die Bildsuche effizient ausführen und gleichzeitig die Integration in Webanwendungen erleichtern.
Hinweis: Um eines unserer SDKs nutzen zu können, benötigen Sie ein ViSenze-Entwicklerkonto. Sie erhalten Zugriff auf Ihr eigenes Dashboard, um Ihre Appkeys und Kataloge zu verwalten. Weitere Informationen finden Sie hier.
Befolgen Sie diese einfachen Schritte, um sich mit der Integration des SDK und seiner tatsächlichen Funktionsweise vertraut zu machen, indem Sie unsere im Haupt-Repo enthaltenen Demos erkunden.
Wenn Sie das direkt vom Haupt-Repo bereitgestellte Projekt verwenden, können Sie einfach den folgenden Befehl aus dem Stammverzeichnis dieses Projekts ausführen:
npm install
Wenn Sie versuchen, dieses SDK über npm in Ihr eigenes Projekt einzubinden, führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihres Projekts aus:
npm install visearch-javascript-sdk
Im Knoten
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;Wenn Sie über mehrere Platzierungen verfügen oder Platzierungen mit unterschiedlichen Konfigurationen ausführen möchten, müssen Sie mehrere ViSearch-Instanzen erstellen.
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;Im Browser
Wenn Sie das SDK direkt in Ihre Webseite einbinden möchten, fügen Sie es in die Kopfzeile Ihrer Website ein
< 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 >Kopieren Sie denselben Code, ändern Sie jedoch das Schlüsselwort „visearch“ in ein Array Ihrer gewünschten Instanznamen.
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > Bevor Sie das SDK verwenden können, müssen Sie es einrichten. Die meisten dieser Schlüssel finden Sie im Dashboard Ihres Kontos.
Bitte werfen Sie einen Blick auf die folgende Tabelle, um zu verstehen, was jeder Schlüssel darstellt:
| Schlüssel | Bedeutung | Beschreibung |
|---|---|---|
| app_key | Obligatorisch | Alle SDK-Funktionen hängen davon ab, dass ein gültiger app_key festgelegt ist. Der App-Schlüssel schränkt auch die API-Funktionen ein, die Sie verwenden können. |
| Platzierungs-ID | Obligatorisch | Platzierungs-ID der aktuellen Platzierung |
| Endpunkt | Situativ | Standard ist https://search.visenze.com/ |
| Time-out | Optional | Standardmäßig 15000 |
| uid | Optional | Wenn dies nicht angegeben ist, generieren wir die UID automatisch |
Richten Sie die ViSearch-Instanz(en) mit den Schlüsseln von der Konsole ein.
visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;oder
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'
} ) ;oder
Wenn Sie sich in einer Node-Umgebung befinden, können Sie die Konfigurationen direkt beim Erstellen des ViSearch-Clients übergeben.
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )Die Demo ist nur für diejenigen anwendbar, die direkt vom Haupt-Repo aus arbeiten. Sie benötigen eine Node.js-Umgebung und denken daran , die relevanten Dateien auszufüllen .
Erstellen Sie eine
.envDatei und geben Sie den relevanten App-Schlüssel und die Platzierungs-ID ein
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
So führen Sie die Webseiten-Demo aus:
npm run start - demo Nach dem obigen Befehl sollten Sie sehen, dass der Server lokal auf Ihrem Gerät läuft. Anschließend können Sie in Ihrem Browser auf die verschiedenen Demo-Webseiten zugreifen, indem Sie das Format http://localhost:3000/examples/*.html verwenden.
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 /product/search_by_image
Die Suche nach Bild kann auf drei verschiedene Arten erfolgen: nach URL, ID oder Datei.
Bild-ID verwenden:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Bild-URL verwenden:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Bilddatei verwenden:
< 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 ) ;Die Anforderungsparameter für diese API finden Sie im ViSenze Documentation Hub.
GET /product/recommendations/{product_id}
Suchen Sie in der Produktdatenbank nach optisch ähnlichen Produkten und geben Sie dabei die eindeutige Kennung eines indizierten Produkts an.
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 ) ;Die Anforderungsparameter für diese API finden Sie im ViSenze Documentation Hub.
POST /product/multisearch
Die Mehrfachsuche kann auf vier verschiedene Arten erfolgen – nach Text, URL, ID oder Datei.
Text verwenden:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Bild-ID verwenden:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Bild-URL verwenden:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Bilddatei verwenden:
< 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 ) ;Die Anforderungsparameter für diese API finden Sie im ViSenze Documentation Hub.
POST /product/multisearch/autocomplete
Die automatische Vervollständigung mehrerer Suchvorgänge kann auf vier verschiedene Arten erfolgen – nach Text, URL, ID oder Datei.
Text verwenden:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Bild-ID verwenden:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Bild-URL verwenden:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Bilddatei verwenden:
< 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 ) ;Die Anforderungsparameter für diese API finden Sie im ViSenze Documentation Hub.
Javascript enthält keine Typdefinitionen und die REST-API-Antwort für alle unsere APIs wird stattdessen einfach direkt in Javascript-Objekte konvertiert. Hier sind einige der Schlüssel des Antwortobjekts der API, die Sie beachten sollten:
| Name | Typ | Beschreibung |
|---|---|---|
| Status | Zeichenfolge | Der Anforderungsstatus, entweder OK , warning oder fail |
| imId | Zeichenfolge | Bild-ID. Kann für eine erneute Suche ohne erneutes Hochladen verwendet werden |
| im_id | Zeichenfolge | |
| Fehler | Objekt | Fehlermeldung und Code, wenn die Anfrage nicht erfolgreich war, d. h. wenn der Status warning oder fail lautet |
| Produkttypen | Objekt[] | Erkannte Produkttypen, Bewertung und ihr Begrenzungsrahmen im Format (x1,y1,x2,y2). |
| Ergebnis | Objekt[] | Die Liste der Produkte in den Suchergebnissen. Wichtige Felder für die Erstveröffentlichung. Wenn es fehlt, wird es auf leer gesetzt. Beachten Sie, dass wir die Originalkatalogfelder des Kunden im Feld „Daten“ anzeigen |
| Objekte | Objekt[] | Wenn der Parameter search_all_objects auf true gesetzt ist |
| Catalog_fields_mapping | Objekt | Feldzuordnung des Originalkatalogs |
| Facetten | Objekt[] | Liste der Facettenfeldwerte und -antworten zum Filtern |
| Seite | Nummer | Die Seitenzahl der Ergebnisse |
| Limit | Nummer | Die Anzahl der Ergebnisse pro Seite |
| gesamt | Nummer | Gesamtzahl der Suchergebnisse |
| reqId | Zeichenfolge | Die der gestellten Anfrage zugewiesene ID |
| Name | Typ | Beschreibung |
|---|---|---|
| Code | Nummer | Fehlercode, z. B. 401, 404 usw. |
| Nachricht | Zeichenfolge | Die Antwortnachricht des Servers. |
| Name | Typ | Beschreibung |
|---|---|---|
| Kasten | Nummer[] | Die Bildraumkoordinaten des Erkennungsfelds, das das Produkt darstellt. |
| Typ | Zeichenfolge | Der erkannte Typ des Produkts. |
| Name | Typ | Beschreibung |
|---|---|---|
| Produkt_ID | Zeichenfolge | Die Produkt-ID, die in Empfehlungen verwendet werden kann. |
| main_image_url | Zeichenfolge | Bild-URL. |
| Daten | Objekt | Dieses Datenfeld ist von den Metadaten abhängig, die der Benutzer hier anfordert. |
Die hier zurückgegebenen Felder hängen von den über die attrs_to_get Parameter angeforderten Produktmetadaten und den in Ihrem Katalog indizierten Feldern ab.
Ansonsten geben wir zwei Standardfelder zurück.
| Vordefinierte Katalogfelder von ViSenze | Originalnamen des Katalogs von Client X |
|---|---|
| Produkt_ID | SKU |
| main_image_url | mittleres_bild |
Wenn search_all_objects auf true gesetzt ist, gibt die Suchantwort die Ergebnisse in einer Liste von ProductObject statt direkt in einer Liste von Product zurück. Der Unterschied besteht darin, dass ProductObject die Produkte nach Typ aufteilt.
| Name | Typ | Beschreibung |
|---|---|---|
| Ergebnis | Objekt[] | Die Liste der zu diesem Typ gehörenden Produkte. |
| gesamt | Nummer | Die Gesamtzahl der Ergebnisse in diesem Typ. |
| Typ | Zeichenfolge | Der erkannte Typ des Produkts. |
| Kasten | Nummer[] | Die Bildraumkoordinaten des Erkennungsfelds, das das Produkt darstellt. |
Facetten werden verwendet, um eine mögliche Filterung der Ergebnisse durchzuführen.
| Name | Typ | Beschreibung |
|---|---|---|
| Schlüssel | Zeichenfolge | |
| Artikel | Objekt[] | |
| Reichweite | Objekt |
Die Nutzungsrichtlinien finden Sie hier
Facette für eindeutige Wertefilterung.
| Name | Typ | Beschreibung |
|---|---|---|
| Wert | Zeichenfolge | |
| zählen | Nummer |
Facette zur Wertebereichsfilterung.
| Name | Typ | Beschreibung |
|---|---|---|
| min | Zeichenfolge | |
| max | Zeichenfolge |
Es gibt viele Parameter, die unsere API unterstützt, und wir zeigen Ihnen in diesem Abschnitt einige Beispiele für deren Verwendung.
Alle unterstützten erweiterten Suchparameter für die ProductSearch-API finden Sie hier.
Um Metadaten Ihrer Bildergebnisse abzurufen, stellen Sie die Liste der Metadatenschlüssel für den zurückzugebenden Metadatenwert in der Eigenschaft attrs_to_get bereit:
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
} ) ;Beachten Sie, dass mit diesem Parameter nur die indizierten Attribute abgerufen werden können. Sie können die Seite „App bearbeiten“ in der Discovery Suite-Konsole aufrufen, um zu überprüfen, welche Attribute in den App-Index aufgenommen wurden.
Um Suchergebnisse basierend auf Metadatenwerten zu filtern, geben Sie in der filters ein String-Array mit Metadatenschlüsseln zum Filtern von Werten an. Nur die Filterparameter „Preis“, „Kategorie“, „Marke“ und „Originalpreis“ werden unterstützt.
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
