HMS FaceOff Dress Trial app is the application for dress trial with different type of dress trial room. User can go to the different type of dress rooms (room1, room2, room3, room4) to trial dresses. Each room have multiple dresses of different type of clothes to trial by users
In this code lab application we have implemented below features with HMS kits.
Features | HMS Kits |
Image crop | Image kit – Image Cropping Service |
Image Flip | Image kit – Image Cropping Service |
Image Rotation | Image kit – Image Cropping Service |
Image Segmentation | ML Kit - Image Segmentation |
In this code lab, you will create demo project and use the APIs of Image kit and ML kit (Image Segmentation) you can explore the following processes in the demo project:
In this code lab, you will learn how to:
Use the below link for preparing for the integration
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/config-agc-0000001050196065
Now, you have successfully enabled HUAWEI Services required for your app.
User can go to the different type of dresses room (room1, room2, room3, room4) to trial dresses. Each room have multiple dresses of different type of clothes to trial by users
Once click on Room images (Room1, Room2, Room3, Room4)
a) It will show the dress trial room where the user can select dresses from bottom bar dress section and selected dress can become big size
b) If user want to try with another room, User can click on back button to navigate home screen
Use below link to Integrate HMS core SDK for following kits
Image Kit - Image Cropping Service
This service provides the cropping function for users to resize images. Image cropping service APIS are implemented based on CropLayoutView, which is a custom view.
Step 1- Add CropLayoutView using packagcom.huawei.hms.image.vision.crop.CropLayoutView**ew, into the XML of the layout.
<com.huawei.hms.image.vision.crop.CropLayoutView
android:id="@+id/cropImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.huawei.hms.image.vision.crop.CropLayoutView>
Step 2 – Create the object of croplayoutview. And set the bitmap image to be process the image (crop, flip, rotation)
Java
cropLayoutView = findViewById(R.id.cropImageView);
cropLayoutView.setImageBitmap(new Util().rotateImage(bmp, ROTATION_ANGLE_IN_DEGREES));
cropLayoutView.setAspectRatio(ASPECT_RATIO_X, ASPECT_RATIO_Y);
cropLayoutView.setFixedAspectRatio(Constants.STATUS_FAILURE);
Kotlin
cropLayoutView = findViewById(R.id.cropImageView);
cropLayoutView?.setImageBitmap(Util().rotateImage(bmp, ROTATION_ANGLE_IN_DEGREES.toFloat()));
cropLayoutView?.setAspectRatio(ASPECT_RATIO_X, ASPECT_RATIO_Y);
cropLayoutView?.setFixedAspectRatio(Constants. STATUS_FAILURE);
Step 3 – make rotation, flip and save the cropped image
Java
cropLayoutView.rotateClockwise();
Kotlin
cropLayoutView?.rotateClockwise();
cropLayoutView.flipImageHorizontally();
Kotlin
cropLayoutView?.flipImageHorizontally();
Bitmap croppedImage = cropLayoutView.getCroppedImage();
Kotlin
val croppedImage = cropLayoutView?.getCroppedImage();
Use below link to Integrate HMS core SDK for following kits
ML Kit – Image Segmentation
The image segmentation service segments same elements (such as human body, plant, and sky) from an image. The return values of human body segmentation include the coordinate array of the human body, human body image with a transparent background, and gray-scale image with a white human body and black background.
There are two types of image segmentation service model packages: human body segmentation model package and multiclass segmentation model package.
In this project you can implement human body segmentation model package which is used to segment the human body and background
Step1 - Create an image segmentation analyzer.
Java
public void createAnalyzer() {
MLImageSegmentationSetting setting =
new MLImageSegmentationSetting.Factory()
.setExact(false)
// Set the human body segmentation mode.
.setAnalyzerType(MLImageSegmentationSetting.BODY_SEG)
.setScene(MLImageSegmentationScene.FOREGROUND_ONLY)
.create();
analyzer = MLAnalyzerFactory.getInstance().getImageSegmentationAnalyzer(setting);
}
Kotlin
fun createAnalyzer() {
val setting = MLImageSegmentationSetting.Factory()
.setExact(IsStatus)
.setAnalyzerType(MLImageSegmentationSetting.BODY_SEG)
.setScene(MLImageSegmentationScene.FOREGROUND_ONLY)
.create()
analyzer = MLAnalyzerFactory.getInstance().getImageSegmentationAnalyzer(setting)
}
Step2 – Process Image Segmentation –
Java
public void processSegmantationResult(Bitmap bitmap) {
MLFrame frame = MLFrame.fromBitmap(bitmap);
Task<MLImageSegmentation> task = analyzer.asyncAnalyseFrame(frame);
task.addOnSuccessListener(
new OnSuccessListener<MLImageSegmentation>() {
@Override
public void onSuccess(MLImageSegmentation segmentation) {
if (segmentation != null) {
displaySuccess(segmentation);
} else {
Log.e(TAG, "onSuccess: MLImageSegmentation result is null ");
}
}
})
.addOnFailureListener(
new OnFailureListener() {
@Override
public void onFailure(Exception e) {
Log.e(TAG, "onFailure: " + e);
}
});
}
Kotlin
fun processSegmantationResult(bitmap: Bitmap?) {
val frame = MLFrame.fromBitmap(bitmap)
val task = analyzer!!.asyncAnalyseFrame(frame)
task.addOnSuccessListener { segmentation ->
segmentation?.let { displaySuccess(it) } ?: Log.d(TAG, Constants.NULL_MSG)
}
.addOnFailureListener { e -> Log.d(TAG, Constants.ON_FAILURE_STR, e) }
}
Step3 – Get Bitmap image after returning segmentation object at onSuccess method. Use getForeground() to get foreground bitmap object
Java
private void displaySuccess(MLImageSegmentation imageSegmentationResult) {
Bitmap bitmapFore = imageSegmentationResult.getForeground();
if (bitmapFore != null) {
isListner.getSegmentationImage(bitmapFore);
stopAnalyser();
} else {
Log.e(TAG, "displaySuccess:bitmapFore is null. ");
}
}
Kotlin
private fun displaySuccess(imageSegmentationResult: MLImageSegmentation) {
val bitmapFore = imageSegmentationResult.getForeground()
if (bitmapFore != null) {
isListner.getSegmentationImage(bitmapFore)
stopAnalyser()
} else {
Log.d(TAG, Constants.BITMAP_NULL)
}
}
Step4 - After the detection is complete, stop the analyzer to release detection resources.
Java
public void stopAnalyser() {
if (analyzer != null) {
try {
analyzer.stop();
} catch (IOException e) {
Log.e(TAG, "stopAnalyser: " + e);
}
}
}
Kotlin
fun stopAnalyser() {
if (analyzer != null) {
try {
analyzer!!.stop()
} catch (e: IOException) {
Log.d(TAG, Constants.EXCEPTION_MSG, e)
}
}
}
Well done. You have successfully built a dress trial app and learned how to: