visearch sdk javascript
5.0.0 Release
O Javascript SDK da ViSenze fornece APIs de pesquisa de imagens precisas, confiáveis e escalonáveis em nossos catálogos. As APIs incluídas neste SDK visam fornecer aos desenvolvedores endpoints que executam a pesquisa de imagens com eficiência, ao mesmo tempo que facilitam a integração em aplicativos da web.
Observação: para usar qualquer um de nossos SDKs, você precisa ter uma conta de desenvolvedor ViSenze. Você terá acesso ao seu próprio painel para gerenciar suas chaves de aplicativos e catálogos. Visite aqui para mais informações.
Siga estas etapas simples para se familiarizar com como o SDK pode ser integrado e como ele realmente funciona, explorando nossas demonstrações incluídas no repositório principal.
Se você estiver usando o projeto fornecido diretamente no repositório principal, basta executar o seguinte comando no diretório raiz deste projeto:
npm install
Se você estiver tentando incluir este SDK em seu próprio projeto via npm, execute o seguinte comando no diretório raiz do seu projeto:
npm install visearch-javascript-sdk
No nó
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;Se você tiver vários canais ou quiser executar canais com configurações diferentes, será necessário criar várias instâncias do ViSearch.
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;No navegador
Se você deseja incluir o SDK diretamente em sua página da web, adicione-o ao cabeçalho do seu 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 >Copie o mesmo código, mas altere a palavra-chave "visearch" em uma matriz com os nomes das instâncias desejadas.
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > Antes de começar a usar o SDK, você precisará configurar o . A maioria dessas chaves pode ser encontrada no painel da sua conta.
Dê uma olhada na tabela abaixo para entender o que cada chave representa:
| Chave | Importância | Descrição |
|---|---|---|
| chave_do_aplicativo | Obrigatório | Todas as funções do SDK dependem da definição de um app_key válido. A chave do aplicativo também limita os recursos da API que você pode usar. |
| ID_de_posição | Obrigatório | ID da veiculação atual |
| ponto final | Situacional | O padrão é https://search.visenze.com/ |
| tempo esgotado | Opcional | Padrão para 15.000 |
| UID | Opcional | Se isso não for fornecido, geraremos automaticamente o uid |
Configure a(s) instância(s) do ViSearch com as chaves do 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
se você estiver em um ambiente Node, poderá passar as configurações diretamente ao criar o cliente ViSearch.
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )A demonstração só se aplica a quem trabalha diretamente no repositório principal. Você deve ter um ambiente Node.js e lembre-se de preencher os arquivos relevantes .
Crie um arquivo
.enve preencha a chave do aplicativo e o ID do canal relevantes
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
Para executar a demonstração da página da web:
npm run start - demo Após o comando acima, você verá que o servidor está rodando localmente no seu dispositivo. Você pode então acessar as diferentes páginas de demonstração em seu navegador usando 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 /produto/pesquisa_por_imagem
A busca por imagem pode acontecer de três maneiras diferentes - por url, id ou arquivo.
Usando o ID da imagem:
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 o URL da imagem:
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 arquivo de imagem:
< 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 ) ;Os parâmetros de solicitação para esta API podem ser encontrados no ViSenze Documentation Hub.
OBTER /produto/recomendações/{product_id}
Pesquise produtos visualmente semelhantes no banco de dados de produtos, fornecendo um identificador exclusivo de produto 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 ) ;Os parâmetros de solicitação para esta API podem ser encontrados no ViSenze Documentation Hub.
POST /produto/multipesquisa
A multipesquisa pode acontecer de quatro maneiras diferentes – por texto, url, id ou arquivo.
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 o ID da imagem:
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 o URL da imagem:
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 arquivo de imagem:
< 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 ) ;Os parâmetros de solicitação para esta API podem ser encontrados no ViSenze Documentation Hub.
POST /produto/multipesquisa/preenchimento automático
O preenchimento automático multipesquisa pode acontecer de quatro maneiras diferentes: por texto, URL, ID ou arquivo.
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 o ID da imagem:
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 o URL da imagem:
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 arquivo de imagem:
< 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 ) ;Os parâmetros de solicitação para esta API podem ser encontrados no ViSenze Documentation Hub.
Javascript não contém definições de tipo e a resposta da API REST para todas as nossas APIs será apenas convertida diretamente em objetos javascript. Aqui estão algumas das chaves do objeto de resposta da API que você deve observar:
| Nome | Tipo | Descrição |
|---|---|---|
| status | corda | O status da solicitação, OK , warning ou fail |
| imId | corda | ID da imagem. Pode ser usado para pesquisar novamente sem recarregar |
| im_id | corda | |
| erro | objeto | Mensagem de erro e código se a solicitação não tiver sido bem-sucedida, ou seja, quando o status for warning ou fail |
| tipos_de_produto | objeto[] | Tipos de produtos detectados, pontuação e sua caixa delimitadora no formato (x1,y1,x2,y2) |
| resultado | objeto[] | A lista de produtos nos resultados da pesquisa. Campos importantes para o primeiro lançamento. Se estiver faltando, será colocado em branco. Observe que estamos exibindo os campos originais do catálogo do cliente no campo “dados” |
| objetos | objeto[] | Quando o parâmetro search_all_objects está definido como true |
| catalog_fields_mapping | objeto | Mapeamento de campos do catálogo original |
| facetas | objeto[] | Lista de valores e respostas de campos de atributos para filtragem |
| página | número | O número da página de resultados |
| limite | número | O número de resultados por página |
| total | número | Número total de resultados de pesquisa |
| ID necessário | corda | ID atribuído à solicitação realizada |
| Nome | Tipo | Descrição |
|---|---|---|
| código | número | Código de erro, por exemplo, 401, 404 etc... |
| mensagem | corda | A mensagem de resposta do servidor. |
| Nome | Tipo | Descrição |
|---|---|---|
| caixa | número[] | As coordenadas do espaço de imagem da caixa de detecção que representa o produto. |
| tipo | corda | O tipo detectado do produto. |
| Nome | Tipo | Descrição |
|---|---|---|
| id_do_produto | corda | O ID do produto que pode ser usado nas recomendações. |
| main_image_url | corda | URL da imagem. |
| dados | objeto | Este campo de dados depende dos metadados solicitados pelo usuário aqui. |
Os campos retornados aqui dependem dos metadados do produto solicitados por meio dos parâmetros attrs_to_get e dos campos indexados em seu catálogo.
Fora isso, retornamos 2 campos padrão.
| Campos de catálogo predefinidos do ViSenze | Nomes originais do catálogo do cliente X |
|---|---|
| id_do_produto | sku |
| main_image_url | imagem_média |
Ao usar search_all_objects definido como true , a resposta da pesquisa retornará os resultados em uma lista de ProductObject em vez de uma lista de Product diretamente. A diferença é que ProductObject dividirá os produtos de acordo com o tipo.
| Nome | Tipo | Descrição |
|---|---|---|
| resultado | objeto[] | A lista de produtos pertencentes a este tipo. |
| total | número | O número total de resultados neste tipo. |
| tipo | corda | O tipo detectado do produto. |
| caixa | número[] | As coordenadas do espaço de imagem da caixa de detecção que representa o produto. |
As facetas são usadas para realizar a filtragem potencial de resultados.
| Nome | Tipo | Descrição |
|---|---|---|
| chave | corda | |
| Unid | objeto[] | |
| faixa | objeto |
Para verificar as diretrizes de uso, consulte aqui
Faceta para filtragem de valores distintos.
| Nome | Tipo | Descrição |
|---|---|---|
| valor | corda | |
| contar | número |
Faceta para filtragem de intervalo de valores.
| Nome | Tipo | Descrição |
|---|---|---|
| min | corda | |
| máx. | corda |
Existem muitos parâmetros que nossa API suporta e mostraremos alguns exemplos de como usá-los nesta seção.
Você pode encontrar todos os parâmetros de pesquisa avançada suportados pela API ProductSearch aqui.
Para recuperar metadados dos resultados da sua imagem, forneça a lista de chaves de metadados para o valor dos metadados a ser retornado na propriedade 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
} ) ;Observe que apenas os atributos indexados podem ser recuperados com este parâmetro. Você pode acessar a página Editar aplicativo no console do Discovery Suite para revisar quais atributos foram incluídos no índice do aplicativo.
Para filtrar os resultados da pesquisa com base em valores de metadados, forneça uma matriz de cadeia de caracteres da chave de metadados para filtrar o valor na propriedade filters . Apenas preço, categoria, marca e parâmetro de filtro de suporte original_price.
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
