visearch sdk javascript
5.0.0 Release
Javascript SDK ViSenze menyediakan API pencarian gambar yang akurat, andal, dan dapat diskalakan dalam katalog kami. API yang disertakan dalam SDK ini bertujuan untuk memberi pengembang titik akhir yang menjalankan pencarian gambar secara efisien sekaligus memudahkan integrasi ke dalam aplikasi web.
Catatan: Untuk menggunakan SDK kami, Anda harus memiliki akun pengembang ViSenze. Anda akan mendapatkan akses ke dasbor Anda sendiri untuk mengelola kunci aplikasi dan katalog Anda. Kunjungi di sini untuk info lebih lanjut.
Ikuti langkah-langkah sederhana ini untuk memahami bagaimana SDK dapat diintegrasikan dan cara kerjanya dengan menjelajahi demo kami yang disertakan dalam repo utama.
Jika Anda menggunakan proyek yang disediakan langsung dari repo utama, Anda cukup menjalankan perintah berikut dari direktori root proyek ini:
npm install
Jika Anda mencoba memasukkan SDK ini ke dalam proyek Anda sendiri melalui npm, jalankan perintah berikut dari direktori root proyek Anda:
npm install visearch-javascript-sdk
Di Node
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;Jika Anda memiliki beberapa penempatan atau jika Anda ingin menjalankan penempatan dengan konfigurasi berbeda, Anda perlu membuat beberapa instans ViSearch.
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;Di peramban
Jika Anda ingin memasukkan SDK langsung ke halaman web Anda, tambahkan ini ke header situs Anda
< 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 >Salin kode yang sama tetapi ubah kata kunci "visisearch" menjadi array nama instance yang Anda inginkan.
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > Sebelum Anda dapat mulai menggunakan SDK, Anda perlu menyiapkan . Sebagian besar kunci ini dapat ditemukan di dasbor akun Anda.
Silakan lihat tabel di bawah ini untuk memahami apa yang diwakili oleh setiap kunci:
| Kunci | Pentingnya | Keterangan |
|---|---|---|
| kunci_aplikasi | Wajib | Semua fungsi SDK bergantung pada app_key valid yang disetel. Kunci aplikasi juga membatasi fitur API yang dapat Anda gunakan. |
| penempatan_id | Wajib | Id penempatan dari penempatan saat ini |
| titik akhir | Situasional | Standarnya adalah https://search.visenze.com/ |
| batas waktu | Opsional | Defaultnya adalah 15.000 |
| uid | Opsional | Jika ini tidak disediakan, kami akan membuat uid secara otomatis |
Siapkan instance ViSearch dengan kunci dari konsol.
visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;atau
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'
} ) ;atau
jika Anda berada di env Node, Anda dapat meneruskan konfigurasi secara langsung saat membuat klien ViSearch.
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )Demo ini hanya berlaku bagi mereka yang bekerja langsung dari repo utama. Anda diharuskan memiliki lingkungan Node.js dan ingat untuk mengisi file yang relevan .
Buat file
.envdan isi kunci aplikasi dan id penempatan yang relevan
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
Untuk menjalankan demo halaman web:
npm run start - demo Setelah perintah di atas, Anda akan melihat bahwa server berjalan secara lokal di perangkat Anda. Anda kemudian dapat mengakses halaman web demo yang berbeda di browser Anda dengan menggunakan format ini 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 /produk/pencarian_menurut_gambar
Pencarian berdasarkan Gambar dapat dilakukan dengan tiga cara berbeda - berdasarkan url, id, atau File.
Menggunakan id gambar:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Menggunakan url gambar:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;Menggunakan file gambar:
< 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 ) ;Parameter permintaan untuk API ini dapat ditemukan di ViSenze Documentation Hub.
DAPATKAN /produk/rekomendasi/{product_id}
Telusuri produk yang mirip secara visual di database produk yang memberikan pengidentifikasi unik produk yang diindeks.
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 ) ;Parameter permintaan untuk API ini dapat ditemukan di ViSenze Documentation Hub.
POST /produk/multipencarian
Multipencarian dapat terjadi dalam empat cara berbeda - melalui teks, url, id, atau File.
Menggunakan teks:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Menggunakan id gambar:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Menggunakan url gambar:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;Menggunakan file gambar:
< 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 ) ;Parameter permintaan untuk API ini dapat ditemukan di ViSenze Documentation Hub.
POST /produk/multipencarian/pelengkapan otomatis
Pelengkapan otomatis multipenelusuran dapat terjadi dalam empat cara berbeda - melalui teks, url, id, atau File.
Menggunakan teks:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Menggunakan id gambar:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Menggunakan url gambar:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;Menggunakan file gambar:
< 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 ) ;Parameter permintaan untuk API ini dapat ditemukan di ViSenze Documentation Hub.
Javascript tidak berisi definisi tipe dan respons REST API untuk semua API kami hanya akan langsung dikonversi menjadi objek javascript. Berikut beberapa kunci objek respons API yang perlu diperhatikan:
| Nama | Jenis | Keterangan |
|---|---|---|
| status | rangkaian | Status permintaan, baik OK , warning , atau fail |
| sayaId | rangkaian | ID Gambar. Dapat digunakan untuk mencari lagi tanpa perlu diupload ulang |
| im_id | rangkaian | |
| kesalahan | obyek | Pesan dan kode error jika permintaan tidak berhasil yaitu saat status warning atau fail |
| tipe_produk | obyek[] | Jenis produk yang terdeteksi, skor dan kotak pembatasnya dalam format (x1,y1,x2,y2) |
| hasil | obyek[] | Daftar produk di hasil pencarian. Bidang penting untuk rilis pertama. Jika tidak ada, maka akan disetel ke kosong. Perhatikan bahwa kami menampilkan kolom katalog asli pelanggan di kolom "data". |
| objek | obyek[] | Ketika parameter search_all_objects disetel ke true |
| katalog_bidang_pemetaan | obyek | Pemetaan bidang katalog asli |
| aspek | obyek[] | Daftar nilai bidang faset dan respons untuk pemfilteran |
| halaman | nomor | Nomor halaman hasil |
| membatasi | nomor | Jumlah hasil per halaman |
| total | nomor | Jumlah total hasil pencarian |
| kebutuhan | rangkaian | ID ditugaskan untuk permintaan yang dibuat |
| Nama | Jenis | Keterangan |
|---|---|---|
| kode | nomor | Kode kesalahan, misalnya 401, 404 dll... |
| pesan | rangkaian | Pesan respons server. |
| Nama | Jenis | Keterangan |
|---|---|---|
| kotak | nomor[] | Koordinat ruang gambar dari kotak deteksi yang mewakili produk. |
| jenis | rangkaian | Jenis produk yang terdeteksi. |
| Nama | Jenis | Keterangan |
|---|---|---|
| id_produk | rangkaian | ID produk yang dapat digunakan dalam Rekomendasi. |
| main_image_url | rangkaian | URL gambar. |
| data | obyek | Bidang data ini bergantung pada metadata yang diminta oleh pengguna di sini. |
Bidang yang dikembalikan di sini bergantung pada metadata produk yang diminta melalui parameter attrs_to_get dan bidang yang diindeks dalam katalog Anda.
Selain itu, kami mengembalikan 2 bidang default.
| Bidang katalog ViSenze yang telah ditentukan sebelumnya | Nama asli katalog Klien X |
|---|---|
| id_produk | sku |
| main_image_url | medium_image |
Saat menggunakan search_all_objects disetel ke true , respons pencarian akan mengembalikan hasil dalam daftar ProductObject alih-alih daftar Product secara langsung. Bedanya, ProductObject akan membagi produk berdasarkan jenisnya.
| Nama | Jenis | Keterangan |
|---|---|---|
| hasil | obyek[] | Daftar produk yang termasuk dalam jenis ini. |
| total | nomor | Jumlah total hasil pada jenis ini. |
| jenis | rangkaian | Jenis produk yang terdeteksi. |
| kotak | nomor[] | Koordinat ruang gambar dari kotak deteksi yang mewakili produk. |
Aspek digunakan untuk melakukan pemfilteran potensial hasil.
| Nama | Jenis | Keterangan |
|---|---|---|
| kunci | rangkaian | |
| item | obyek[] | |
| jangkauan | obyek |
Untuk memeriksa pedoman penggunaan, silakan lihat di sini
Segi untuk pemfilteran nilai yang berbeda.
| Nama | Jenis | Keterangan |
|---|---|---|
| nilai | rangkaian | |
| menghitung | nomor |
Faset untuk pemfilteran rentang nilai.
| Nama | Jenis | Keterangan |
|---|---|---|
| menit | rangkaian | |
| maks | rangkaian |
Ada banyak parameter yang didukung API kami dan kami akan menunjukkan kepada Anda beberapa contoh cara menggunakannya di bagian ini.
Anda dapat menemukan semua parameter pencarian lanjutan yang didukung untuk ProductSearch API di sini.
Untuk mengambil metadata hasil gambar Anda, berikan daftar kunci metadata untuk nilai metadata yang akan dikembalikan di properti 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
} ) ;Perhatikan bahwa hanya atribut yang diindeks yang dapat diambil dengan parameter ini. Anda dapat membuka halaman Edit Aplikasi di konsol Discovery Suite untuk meninjau atribut mana yang telah disertakan dalam indeks aplikasi.
Untuk memfilter hasil pencarian berdasarkan nilai metadata, berikan array string kunci metadata untuk memfilter nilai di properti filters . Hanya parameter filter dukungan harga, kategori, merek, harga_asli.
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
