Integrating ML Kit's Product Visual Search Service

[John Wo]

1. Applicable Scenarios


Product visual searches are mainly used for online shopping apps. When you integrate this service into your app, your users will be able to make image-based product searches. This means that when they see a product they like, they can simply take a picture of it, and your app can show them results relating to that product.



2. Enabling the Service


（1） Sign to AppGallery Connect and click My projects. Go to Build > ML Kit > Configuration > Product Visual Search. In the Manage product sets area, click Add a product set.



（2） Once you have added the set, contact us to start the review process. Then, when the set has been approved, you can add products to it.



3. Adding a Product Using Postman


（1） Applying for an Access token


Set the keys under Body, including client_id, client_secret, and grant_type. The values of client_id and client_secret are respectively the app ID and app secret that you have applied in AppGallery Connect. After the keys are set, an access token that is symmetrically encrypted will be returned for the product visual search service to verify the identity of a service request sender. Each access token has a validity period of one hour.

URI: https://oauth-login.cloud.huawei.com/oauth2/v2/token



To obtain the values of client_id and client_secret, sign in to AppGallery Connect and go to My projects > Project settings > Convention.



Here's an example of a request result:

<p style="line-height: 1.5em;">HTTP/1.1 200 OK
 Content-Type: text/html;charset=UTF-8
 {
     "access_token":"CFyJ7eTl8WIPi9603E7Ro9Icy+K0JYe2qVjS8uzwCPltlO0fC7mZ0gzZX9p8CCwAaiU17nyP+N8+ORRzjjk1EA==",
     "expires_in":3600,
     "token_type":"Bearer"
 }
</p>

（2） Adding a Product


The product visual search service authenticates every access request. As a result, all request headers, from either the .com or .cn domain, need to contain the relevant authorization information.







i. In the Token area of the Authorization screen, input the token returned. Choose Bearer Token for TYPE.

ii. Configure the parameters in the Headers section.

Here, the parameter for POST is the address of the data storage location which you set in AppGallery Connect, and a URI.



Choose the address for your country/region:



Chinese mainland: https://ml-api-drcn.ai.dbankcloud.com



Europe: https://ml-api-dre.ai.dbankcloud.com



Russia: https://ml-api-drru.ai.dbankcloud.com



Singapore: https://ml-api-dra.ai.dbankcloud.com



URI: /v1/mlkit/snapshop/set/${product-set-id}/product/add



In the URI, ${product-set-id} is the name of the product set.



HMS-APPLICATION-ID: app ID, which is the client_id of your app applied in AppGallery Connect.



X-Request-ID: request ID, which is generated by UUID.randomUUID().



X-Package-Name: package name of your app.



X-Mlkit-Version: version number of ML Kit.



iii. Go to Body > raw and configure parameters in JSON structure.

<p style="line-height: 1.5em;">{
"appPackage":"com.huawei.industrydemo.shopping",
"category": "4",
"customContent": "test",
"images": [{"imageId": "", "region": "", "url": "https://res.vmallres.com/pimages//product/6941487204656/group//800_800_2A4099A441BF0670CA0F6BA0EEF5D70E16430F99A6699CB3.png"}],
"productId": 5,
"productUrl": "https://res.vmallres.com/pimages//product/6941487204656/group//800_800_2A4099A441BF0670CA0F6BA0EEF5D70E16430F99A6699CB3.png"
}
</p>

The mandatory parameters are productId, images, and url in images.



category: product category. The options are as follows:



0: others; 1: clothing; 2: shoes; 3: bags; 4: digital & home appliances; 5:homegoods; 6: toys; 7: cosmetics; 8: accessories; 9: food



customContent: custom content of a product.



productId: ID of a product, which should be unique. It should only contain English letters (in either upper- or lower-case form), numbers, hyphens (-), and underscores (_).



images: images list.



productUrl: optional, URL of a product.



iv. Once you have completed the steps above, you can send the POST request. When the request has been sent successfully, the server of the product visual search returns:



{"retCode":"0","retMsg":"Success"}



4. Deleting a Product


You may also want to delete products from a product set.



（1） Configure Authorization parameters. For details, refer to the first step of Adding a Product.



（2） Configure parameters for Headers.

URI: /v1/mlkit/snapshop/set/${product-set-id}/produc t/${product-id}



In the URI, ${product-set-id} is the name of the product set, and {product-id} is the ID of the product.



X-Country-Code: code of your country or region.



The other parameters are the same as those in step 2 of Adding a Product.



（3） Send the POST request after you have completed the two steps above. When the product has been successfully deleted, the product visual search server will return:



{"retCode":"0","retMsg":"Success"}



5. Development Process


（1） Add the Maven repository to the .gradle file in the root directory of your project.

<p style="line-height: 1.5em;">buildscript {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
dependencies {
...
classpath 'com.huawei.agconnect:agcp:1.4.1.300'
}
}
 
allprojects {
repositories {
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
</p>

（2） Add SDK dependencies to the app-level build.gradle file

<p style="line-height: 1.5em;">dependencies{
  // Import the product visual search SDK.
implementation 'com.huawei.hms:ml-computer-vision-cloud:2.0.3.300'
}
 
Under apply plugin: 'com.android.application' , add:
apply plugin: 'com.huawei.agconnect'
</p>

More details, you can check https://forums.developer.huawei.com/forumPortal/en/topic/0201463427323310032