visearch sdk javascript
5.0.0 Release
Javascript SDK ของ ViSenze มอบ API การค้นหารูปภาพที่แม่นยำ เชื่อถือได้ และปรับขนาดได้ภายในแค็ตตาล็อกของเรา API ที่รวมอยู่ใน SDK นี้มีจุดมุ่งหมายเพื่อให้นักพัฒนามีจุดสิ้นสุดที่ดำเนินการค้นหารูปภาพอย่างมีประสิทธิภาพในขณะเดียวกันก็ทำให้ง่ายต่อการรวมเข้ากับเว็บแอป
หมายเหตุ: เพื่อใช้ SDK ของเรา คุณจะต้องมีบัญชีนักพัฒนา ViSenze คุณจะสามารถเข้าถึงแดชบอร์ดของคุณเองเพื่อจัดการ Appkey และแคตตาล็อกของคุณ เยี่ยมชมที่นี่เพื่อดูข้อมูลเพิ่มเติม
ทำตามขั้นตอนง่ายๆ เหล่านี้เพื่อทำความคุ้นเคยกับวิธีการผสานรวม SDK และวิธีการทำงานจริงโดยการสำรวจการสาธิตของเราที่รวมอยู่ใน Repo หลัก
หากคุณกำลังใช้โปรเจ็กต์ที่ได้รับโดยตรงจาก repo หลัก คุณสามารถรันคำสั่งต่อไปนี้จากไดเร็กทอรีรากของโปรเจ็กต์นี้:
npm install
หากคุณกำลังพยายามรวม SDK นี้ในโครงการของคุณเองผ่านทาง npm ให้รันคำสั่งต่อไปนี้จากไดเรกทอรีรากของโครงการของคุณ:
npm install visearch-javascript-sdk
ในโหนด
import ViSearch from 'visearch-javascript-sdk' ;
...
const visearch = ViSearch ( ) ;หากคุณมีหลายตำแหน่งหรือหากคุณต้องการใช้งานตำแหน่งที่มีการกำหนดค่าต่างกัน คุณจะต้องสร้างอินสแตนซ์ ViSearch หลายรายการ
const visearch1 = ViSearch ( ) ;
const visearch2 = ViSearch ( ) ;ในเบราว์เซอร์
หากคุณต้องการรวม SDK ลงในหน้าเว็บของคุณโดยตรง ให้เพิ่มส่วนนี้ลงในส่วนหัวของไซต์ของคุณ
< 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 >คัดลอกโค้ดเดียวกันแต่เปลี่ยนคีย์เวิร์ด "visearch" เป็นอาร์เรย์ของชื่ออินสแตนซ์ที่คุณต้องการ
< script type =" text/javascript " >
... ( window , document , "script" , 0 , [ "visearch" , "visearch2" ] ) ;
script > ก่อนที่คุณจะเริ่มใช้ SDK ได้ คุณจะต้องตั้งค่า . คีย์เหล่านี้ส่วนใหญ่สามารถพบได้ในแดชบอร์ดของบัญชีของคุณ
โปรดดูตารางด้านล่างเพื่อทำความเข้าใจว่าแต่ละคีย์หมายถึงอะไร:
| สำคัญ | ความสำคัญ | คำอธิบาย |
|---|---|---|
| app_key | ภาคบังคับ | ฟังก์ชัน SDK ทั้งหมดขึ้นอยู่กับการตั้งค่า app_key ที่ถูกต้อง คีย์แอปยังจำกัดฟีเจอร์ API ที่คุณสามารถใช้ได้ |
| ตำแหน่ง_id | ภาคบังคับ | รหัสตำแหน่งของตำแหน่งปัจจุบัน |
| จุดสิ้นสุด | สถานการณ์ | ค่าเริ่มต้นคือ https://search.visenze.com/ |
| หมดเวลา | ไม่จำเป็น | ผิดนัดเป็น 15,000 |
| uid | ไม่จำเป็น | หากไม่ได้ระบุไว้ เราจะสร้าง uid โดยอัตโนมัติ |
ตั้งค่าอินสแตนซ์ ViSearch ด้วยคีย์จากคอนโซล
visearch . set ( 'app_key' , 'YOUR_APP_KEY' ) ;
visearch . set ( 'placement_id' , 'YOUR_PLACEMENT_ID' ) ;
visearch . set ( 'timeout' , TIMEOUT_INTERVAL_IN_MS ) ;หรือ
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'
} ) ;หรือ
หากคุณอยู่ใน Node env คุณสามารถส่งการกำหนดค่าได้โดยตรงเมื่อสร้างไคลเอ็นต์ ViSearch
const visearch = ViSearch ( {
'app_key' : 'YOUR_APP_KEY' ,
'placement_id' : 'YOUR_PLACEMENT_ID'
} )การสาธิตนี้ใช้ได้กับผู้ที่ทำงานโดยตรงจาก repo หลักเท่านั้น คุณจะต้องมีสภาพแวดล้อม Node.js และอย่าลืม กรอกไฟล์ที่เกี่ยวข้อง
สร้างไฟล์
.envและกรอกคีย์แอปและรหัสตำแหน่งที่เกี่ยวข้อง
SEARCH_APP_KEY =
SEARCH_PLACEMENT_ID =
SEARCH_IM_URL =
REC_PID =
REC_APP_KEY =
REC_PLACEMENT_ID =
ENDPOINT =
หากต้องการเรียกใช้การสาธิตหน้าเว็บ:
npm run start - demo หลังจากคำสั่งข้างต้น คุณจะเห็นว่าเซิร์ฟเวอร์กำลังทำงานอยู่ในอุปกรณ์ของคุณ จากนั้น คุณสามารถเข้าถึงหน้าเว็บสาธิตต่างๆ ในเบราว์เซอร์ของคุณได้โดยใช้รูปแบบนี้ 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
โพสต์ /product/search_by_image
การค้นหาด้วยภาพสามารถทำได้สามวิธี - ตาม url, id หรือไฟล์
ใช้รหัสรูปภาพ:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;การใช้ URL รูปภาพ:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productSearchByImage ( parameters , onResponse , onError ) ;การใช้ไฟล์รูปภาพ:
< 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 ) ;พารามิเตอร์คำขอสำหรับ API นี้มีอยู่ที่ ViSenze Documentation Hub
GET /product/recommendations/{product_id}
ค้นหาผลิตภัณฑ์ที่มีลักษณะคล้ายกันในฐานข้อมูลผลิตภัณฑ์โดยให้ตัวระบุเฉพาะของผลิตภัณฑ์ที่จัดทำดัชนีไว้
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 ) ;พารามิเตอร์คำขอสำหรับ API นี้มีอยู่ที่ ViSenze Documentation Hub
POST /ผลิตภัณฑ์/มัลติเสิร์ช
การค้นหาหลายรายการสามารถเกิดขึ้นได้สี่วิธี - ตามข้อความ, URL, ID หรือไฟล์
การใช้ข้อความ:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;ใช้รหัสรูปภาพ:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;การใช้ URL รูปภาพ:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearch ( parameters , onResponse , onError ) ;การใช้ไฟล์รูปภาพ:
< 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 ) ;พารามิเตอร์คำขอสำหรับ API นี้มีอยู่ที่ ViSenze Documentation Hub
POST /product/multisearch/เติมข้อความอัตโนมัติ
การเติมข้อความอัตโนมัติแบบค้นหาหลายรายการสามารถเกิดขึ้นได้สี่วิธี - ตามข้อความ, URL, ID หรือไฟล์
การใช้ข้อความ:
const parameters = {
q : 'your-text-query'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;ใช้รหัสรูปภาพ:
const parameters = {
im_id : 'your-image-id'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;การใช้ URL รูปภาพ:
const parameters = {
im_url : 'your-image-url'
} ;
const onResponse = ( response ) => {
// TODO handle response
}
const onError = ( error ) => {
// TODO handle error
}
visearch . productMultisearchAutocomplete ( parameters , onResponse , onError ) ;การใช้ไฟล์รูปภาพ:
< 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 ) ;พารามิเตอร์คำขอสำหรับ API นี้มีอยู่ที่ ViSenze Documentation Hub
Javascript ไม่มีคำจำกัดความประเภท และการตอบสนอง REST API สำหรับ API ทั้งหมดของเราก็จะแปลงเป็นวัตถุ JavaScript โดยตรงแทน นี่คือคีย์บางส่วนของออบเจ็กต์การตอบสนองของ API ที่ควรทราบ:
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| สถานะ | เชือก | สถานะคำขอ OK warning หรือ fail |
| รหัสประจำตัว | เชือก | รหัสรูปภาพ สามารถใช้ค้นหาอีกครั้งโดยไม่ต้องอัปโหลดซ้ำ |
| im_id | เชือก | |
| ข้อผิดพลาด | วัตถุ | ข้อความแสดงข้อผิดพลาดและรหัสหากคำขอไม่สำเร็จ เช่น เมื่อสถานะเป็น warning หรือ fail |
| product_types | วัตถุ[] | ตรวจพบประเภทผลิตภัณฑ์ คะแนน และกรอบขอบของผลิตภัณฑ์ในรูปแบบ (x1,y1,x2,y2) |
| ผลลัพธ์ | วัตถุ[] | รายการผลิตภัณฑ์ในผลการค้นหา ช่องสำคัญสำหรับการเปิดตัวครั้งแรก หากหายไปจะถูกตั้งค่าเป็นว่างเปล่า โปรดทราบว่าเรากำลังแสดงฟิลด์แค็ตตาล็อกเดิมของลูกค้าในช่อง "ข้อมูล" |
| วัตถุ | วัตถุ[] | เมื่อพารามิเตอร์ search_all_objects ถูกตั้งค่าเป็น true |
| Catalog_fields_mapping | วัตถุ | การแมปฟิลด์ของแค็ตตาล็อกต้นฉบับ |
| แง่มุม | วัตถุ[] | รายการค่าช่องข้อมูลประกอบและการตอบกลับสำหรับการกรอง |
| หน้าหนังสือ | ตัวเลข | หมายเลขหน้าผลลัพธ์ |
| ขีด จำกัด | ตัวเลข | จำนวนผลลัพธ์ต่อหน้า |
| ทั้งหมด | ตัวเลข | จำนวนผลการค้นหาทั้งหมด |
| รหัสที่ต้องการ | เชือก | ID ที่กำหนดให้กับคำขอที่ทำ |
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| รหัส | ตัวเลข | รหัสข้อผิดพลาด เช่น 401, 404 ฯลฯ... |
| ข้อความ | เชือก | ข้อความตอบกลับของเซิร์ฟเวอร์ |
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| กล่อง | ตัวเลข[] | พิกัดพื้นที่รูปภาพของกล่องตรวจจับที่แสดงถึงผลิตภัณฑ์ |
| พิมพ์ | เชือก | ประเภทสินค้าที่ตรวจพบ |
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| product_id | เชือก | รหัสผลิตภัณฑ์ที่ใช้ในคำแนะนำได้ |
| main_image_url | เชือก | URL รูปภาพ |
| ข้อมูล | วัตถุ | ช่องข้อมูลนี้ขึ้นอยู่กับข้อมูลเมตาที่ผู้ใช้ร้องขอด้านล่างนี้ |
ฟิลด์ที่ส่งคืนด้านล่างนี้ขึ้นอยู่กับข้อมูลเมตาของผลิตภัณฑ์ที่ร้องขอผ่านพารามิเตอร์ attrs_to_get และฟิลด์ที่จัดทำดัชนีในแค็ตตาล็อกของคุณ
นอกจากนั้น เราจะส่งคืนฟิลด์เริ่มต้น 2 ฟิลด์
| ฟิลด์แค็ตตาล็อกที่กำหนดไว้ล่วงหน้าของ ViSenze | ชื่อดั้งเดิมของแค็ตตาล็อกของลูกค้า X |
|---|---|
| product_id | รหัสสินค้า |
| main_image_url | ปานกลาง_รูปภาพ |
เมื่อใช้ search_all_objects ถูกตั้งค่าเป็น true การตอบสนองการค้นหาจะส่งคืนผลลัพธ์ในรายการ ProductObject แทนที่จะเป็นรายการ Product โดยตรง ข้อแตกต่างคือ ProductObject จะแบ่งสินค้าตามประเภท
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| ผลลัพธ์ | วัตถุ[] | รายการสินค้าที่อยู่ในประเภทนี้ |
| ทั้งหมด | ตัวเลข | จำนวนผลลัพธ์ทั้งหมดในประเภทนี้ |
| พิมพ์ | เชือก | ประเภทสินค้าที่ตรวจพบ |
| กล่อง | ตัวเลข[] | พิกัดพื้นที่รูปภาพของกล่องตรวจจับที่แสดงถึงผลิตภัณฑ์ |
Facets ใช้เพื่อกรองผลลัพธ์ที่เป็นไปได้
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| สำคัญ | เชือก | |
| รายการ | วัตถุ[] | |
| พิสัย | วัตถุ |
หากต้องการตรวจสอบแนวทางการใช้งาน โปรดดูที่นี่
แง่มุมสำหรับการกรองค่าที่แตกต่าง
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| ค่า | เชือก | |
| นับ | ตัวเลข |
ข้อมูลประกอบสำหรับการกรองช่วงค่า
| ชื่อ | พิมพ์ | คำอธิบาย |
|---|---|---|
| นาที | เชือก | |
| สูงสุด | เชือก |
มีพารามิเตอร์มากมายที่ API ของเรารองรับ และเราจะแสดงตัวอย่างวิธีใช้งานบางส่วนให้คุณดูในส่วนนี้
คุณสามารถค้นหาพารามิเตอร์การค้นหาขั้นสูงที่รองรับทั้งหมดสำหรับ ProductSearch API ได้ที่นี่
หากต้องการดึงข้อมูลเมตาของผลลัพธ์รูปภาพของคุณ ให้ระบุรายการคีย์ข้อมูลเมตาสำหรับค่าข้อมูลเมตาที่จะส่งคืนในคุณสมบัติ 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
} ) ;โปรดทราบว่าเฉพาะแอตทริบิวต์ที่จัดทำดัชนีเท่านั้นที่สามารถดึงข้อมูลได้ด้วยพารามิเตอร์นี้ คุณสามารถไปที่หน้าแก้ไขแอปในคอนโซล Discovery Suite เพื่อตรวจสอบแอตทริบิวต์ที่รวมอยู่ในดัชนีแอป
หากต้องการกรองผลการค้นหาตามค่าข้อมูลเมตา ให้ระบุอาร์เรย์สตริงของคีย์ข้อมูลเมตาเพื่อกรองค่าในคุณสมบัติ filters เฉพาะราคา หมวดหมู่ แบรนด์ พารามิเตอร์ตัวกรองรองรับ original_price
visearch . productSearchByImage ( {
im_url : 'your-image-url' ,
filters : [ 'brand:my_brand' ] ,
} , ( res ) => {
// TODO handle response
} , 
