Online Shopping App Using Huawei Machine Learning Kit - Huawei Developers

Introduction
This article is based on Huawei ML Kit to create a new sample application for Online Shopping Store to buy real products.
In this application, we can capture any kind of image for products to buy or check the price of a product using Machine Learning. It will give the other options so that you can improve your buying skills.
Huawei ML Kit allows your apps to easily leverage Huawei's long-term proven expertise in machine learning to support diverse artificial intelligence (AI) applications throughout a wide range of industries. ML Kit provides diversified leading machine learning capabilities that are easy to use and help you develop various AI apps.
Service Introduction
A user can take a photo of a product. Then the Product Visual Search service searches for the same or similar products in the pre-established product image library and returns the IDs of those products and related information. In addition, to better manage products in real-time, this service supports offline product import, online product addition, deletion, modification, query, and product distribution. For example, you can use this service to create shopping apps where users can quickly search for the things they want and compare products.
Prerequisite
1. A computer (desktop or laptop).
2. A Huawei phone used for running the app with HMS Core (APK) 3.0.0.300 or later.
3. A data cable used for connecting the computer to the Huawei phone.
4. Android Studio 3.0 or later.
5. Java SDK 1.7 or later.
6. HMS Core SDK 4.0.0.300 or later.
7. Must have Huawei Developer Account.
Things Need To Be Done
1. Create an app in AppGallery Connect and enable the service.
2. Create an Android Studio project.
3. Start development with kit integration inside the application.
4. Launch the application.
Create a project on AppGalleryConnect portal
1. Navigate to AppGalleryConnect, create a new project
2. Enter all details regarding your application, enable ML Kit API, after that download configuration JSON file, and then add into your android studio project.
Create a project in Android Studio
Navigate to android studio and create a new android project, provide all details of your project, and then add AGC and ML kit based dependencies.
1. Add the following AppGalleryConnect classpath.
Code:
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.6.1'
classpath 'com.huawei.agconnect:agcp:1.0.0.300'
}
}
allprojects {
repositories {
google()
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
2. Add the following dependencies in app module based Gradle file, then sync your project.
Code:
implementation 'com.huawei.hms:ml-computer-vision-cloud:2.0.1.300'
Start development with kit integration inside the application
We have created the following package inside the project.
You need to initialize the ML kit in our application class.
Code:
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
MLApplication.getInstance().setApiKey("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
}
}
We have implemented ML kit functionality in HomeActivity and BuyScanProductActivity
HomeActivity: I have implemented all basic functions such as initialize the Product Vision Search Service open camera, then create a bitmap followed by MLframe.
Code:
public class HomeActivity extends BaseActivity {
private static final String TAG = HomeActivity.class.getName();
private static final int CAMERA_PERMISSION_CODE = 100;
MLRemoteProductVisionSearchAnalyzer analyzer;
private ActivityHomeBinding homeBinding;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
homeBinding = DataBindingUtil.setContentView(this, R.layout.activity_home);
init();
initializeProductVisionSearch();
}
private void init() {
setToolbar(homeBinding.tbWidget.findViewById(R.id.toolbar),
false, "My Online Store", homeBinding.tbWidget.findViewById(R.id.tv_toolbar_title));
homeBinding.btnBuyFromStore.setOnClickListener(v -> StoreActivity.start(this));
homeBinding.btnViewYourPurchases.setOnClickListener(v -> ViewPurchasesActivity.start(this));
homeBinding.btnBuyScanProduct.setOnClickListener(v->{
if (!(ActivityCompat.checkSelfPermission(this, Manifest.permission.CAMERA)
== PackageManager.PERMISSION_GRANTED)) {
this.requestCameraPermission();
}
initializeProductVisionSearch();
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
startActivityForResult(intent, 101);
});
}
private void requestCameraPermission() {
final String[] permissions = new String[] {Manifest.permission.CAMERA};
if (!ActivityCompat.shouldShowRequestPermissionRationale(this, Manifest.permission.CAMERA)) {
ActivityCompat.requestPermissions(this, permissions, this.CAMERA_PERMISSION_CODE);
return;
}
}
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == 101) {
if (resultCode == RESULT_OK) {
Bitmap bitmap = (Bitmap) data.getExtras().get("data");
if (bitmap != null) {
MLFrame mlFrame = new MLFrame.Creator().setBitmap(bitmap).create();
mlImageDetection(mlFrame);
}
}
}
}
private void mlImageDetection(MLFrame mlFrame) {
Task<List<MLProductVisionSearch>> task = analyzer.asyncAnalyseFrame(mlFrame);
task.addOnSuccessListener(products -> {
Log.d(TAG, "success");
displaySuccess(products); })
.addOnFailureListener(e -> {
try {
MLException mlException = (MLException) e;
int errorCode = mlException.getErrCode();
String errorMessage = mlException.getMessage();
} catch (Exception error) {
// Handle the conversion error.
}
});
}
private void initializeProductVisionSearch() {
MLRemoteProductVisionSearchAnalyzerSetting settings = new MLRemoteProductVisionSearchAnalyzerSetting.Factory()
.setLargestNumOfReturns(16)
.setRegion(MLRemoteProductVisionSearchAnalyzerSetting.REGION_DR_CHINA)
.create();
analyzer
= MLAnalyzerFactory.getInstance().getRemoteProductVisionSearchAnalyzer(settings);
}
private void displaySuccess(List<MLProductVisionSearch> productVisionSearchList) {
List<MLVisionSearchProductImage> productImageList = new ArrayList<>();
String prodcutType = "";
for (MLProductVisionSearch productVisionSearch : productVisionSearchList) {
Log.d(TAG, "type: " + productVisionSearch.getType());
prodcutType = productVisionSearch.getType();
for (MLVisionSearchProduct product : productVisionSearch.getProductList()) {
productImageList.addAll(product.getImageList());
Log.d(TAG, "custom content: " + product.getCustomContent());
}
}
StringBuffer buffer = new StringBuffer();
for (MLVisionSearchProductImage productImage : productImageList) {
String str = "ProductID: " + productImage.getProductId() + "\nImageID: " + productImage.getImageId() + "\nPossibility: " + productImage.getPossibility();
buffer.append(str);
buffer.append("\n");
}
Log.d(TAG, "display success: " + buffer.toString());
BuyScanProductActivity.start(this,productImageList);
}
Product Visual Search
1. Create an analyzer for product visual search. You can create the analyzer using the MLRemoteProductVisionSearchAnalyzerSetting class.
Code:
MLRemoteProductVisionSearchAnalyzer analyzer
= MLAnalyzerFactory.getInstance().getRemoteProductVisionSearchAnalyzer();
2. Create an MLFrame object using android.graphics.Bitmap. JPG, JPEG, PNG, and BMP images are supported.
Code:
MLFrame mlFrame = new MLFrame.Creator().setBitmap(bitmap).create();
3. Implement image detection. For details about the result codes, refer to MLException.
Task<List<MLProductVisionSearch>> task = analyzer.asyncAnalyseFrame(mlFrame);
task.addOnSuccessListener(products -> {
Log.d(TAG, "success");
displaySuccess(products); })
.addOnFailureListener(e -> {
try {
MLException mlException = (MLException) e;
int errorCode = mlException.getErrCode();
String errorMessage = mlException.getMessage();
} catch (Exception error) {
// Handle the conversion error.
}
});<strong> </strong>
BuyScanProductActivity: We have displayed all the items in the recycler view list in which all products found by the result.
Code:
public class BuyScanProductActivity extends BaseActivity {
private static List<Item> items;
private ActivityStoreBinding storeBinding;
private StoreAdapter storeAdapter;
public static void start(@NonNull Context context, List<MLVisionSearchProductImage> products) {
if (context instanceof AppCompatActivity) {
Intent intent = new Intent(context, BuyScanProductActivity.class);
context.startActivity(intent);
startActivityAnimation(context);
items = new ArrayList<>();
for (MLVisionSearchProductImage product : products) {
Item item = new Item();
item.setFruitName(product.getProductId());
item.setImageUrl(product.getImageId());
item.setPrice(8500);
items.add(item);
}
}
}
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
storeBinding = DataBindingUtil.setContentView(this, R.layout.activity_store);
init();
}
private void init() {
setToolbar(storeBinding.tbWidget.findViewById(R.id.toolbar),
true,
getString(R.string.store),
storeBinding.tbWidget.findViewById(R.id.tv_toolbar_title));
storeAdapter = new StoreAdapter(this, items, item4 -> {
BillingPremiumDialog.show(this);
});
storeBinding.rvStore.setAdapter(storeAdapter);
}
}
Launch the application
If you have any doubts or queries. Leave your valuable comment in the comment section and do not forget to like and follow me.