{"id":2816,"date":"2019-07-11T14:03:37","date_gmt":"2019-07-11T14:03:37","guid":{"rendered":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/"},"modified":"2021-12-01T18:26:45","modified_gmt":"2021-12-01T18:26:45","slug":"adding-augmented-reality-to-an-ml-kit-powered-android-app","status":"publish","type":"post","link":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/","title":{"rendered":"Adding Augmented Reality to an ML Kit-Powered Android App"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2816\" class=\"elementor elementor-2816\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7d0414eb elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"7d0414eb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-560f07d4\" data-id=\"560f07d4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1a47d6a elementor-widget elementor-widget-text-editor\" data-id=\"1a47d6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Machine Learning (ML) is quickly becoming a common feature in everyday computer interactions, and we often don\u2019t even realize it. One example is ML-based image recognition for camera apps, such as the app introduced in the article \u201cFace Detection on Android With Google ML Kit.\u201d As demonstrated in that article, ML is now accessible even to individual developers thanks to projects like Google\u2019s recently introduced new Firebase SDK called\u00a0<a href=\"https:\/\/developers.google.com\/ml-kit\/\">ML Kit<\/a>.<\/p><p>In the previous article we created an example app that takes a picture, hands it off to ML Kit to do face detection, and uses data returned by ML Kit to outline the features of the face.<\/p><p>In this article, we\u2019re going to explore how we can add Augmented Reality (AR) features with the ML capabilities already in the app to place a red lip image on top of a person\u2019s lips when we take a picture.<\/p><p>To create this app, we\u2019re going to continue using the sample app created in the previous article. If you haven\u2019t had the chance to read the previous article, make sure to read it and create the example app to follow along here.<\/p><h2>Getting Started<\/h2><p>To recap what was accomplished in the previous article, we created an app that could take a picture of a user. Then, using Google\u2019s ML Kit SDK, it could detect whether there was a face in the picture and provide some extra information, such as the location of facial features. Using this information, we drew an overlay of the detected facial features on the image.<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image001-2.png\" width=\"144px\" height=\"296px\" \/><\/p><p>In this article, we are going to build off what we learned and see how we can add AR capabilities based on the information we got from ML Kit.<\/p><p>To accomplish this, we\u2019re going to create another button that will use another Graphic class like the one made for the ML Kit article to create an image overlay on top of the user\u2019s face. We will look into displaying a normal picture of a lip and we\u2019ll also looking into setting color filters to get different color lips.<\/p><p>We\u2019ll use the Android Studio project and Firebase registration information already created for the first part of this tutorial.<\/p><h2>Getting the AR Overlay Asset<\/h2><p>Before we start diving into the code, we first need to start looking for assets that we can use. For a commercial app, we would most likely hire designers to make extravagant and interesting images to use. In our case, we are making a simple app to demonstrate how to overlay an image on top of our own image. I used two lipstick assets from\u00a0<a href=\"https:\/\/pixabay.com\/\">pixabay.com<\/a>. First we\u2019ll use\u00a0<a href=\"https:\/\/pixabay.com\/vectors\/lips-lipstick-mouth-red-teeth-2024681\/\">Red lips with teeth<\/a>:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image002-1.png\" width=\"319px\" height=\"223px\" \/><\/p><p>We\u2019ll also use\u00a0<a href=\"https:\/\/pixabay.com\/vectors\/lips-mouth-speak-kiss-lipstick-145758\/\">red lipstick mark<\/a>:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image003-2.png\" width=\"273px\" height=\"167px\" \/><\/p><p>For the first image, we\u2019re going to apply the asset directly over the lips. This asset will be referred to as\u00a0<span style=\"font-weight: bold;\">lip<\/span>\u00a0in the app.<\/p><p>For the second image, we\u2019re going to do something more interesting. We\u2019re going to apply color filters over the image to re-use it with different colors. This asset will be referred to as\u00a0<code>lip_filter<\/code><span style=\"font-weight: bold;\">\u00a0<\/span>in the app.<\/p><h2>Understanding the ML Kit API to Use<\/h2><p>To add our lip overlay on top of the user\u2019s lip, we need to use\u00a0<a href=\"https:\/\/firebase.google.com\/docs\/ml-kit\/detect-faces\">ML Kit\u2019s Facial Landmark<\/a>\u00a0recognition to locate where the user\u2019s lips are.<\/p><p>To accomplish this, we need to look for the lips from the\u00a0<a href=\"https:\/\/firebase.google.com\/docs\/reference\/android\/com\/google\/firebase\/ml\/vision\/face\/FirebaseVisionFace.html\">FirebaseVisionFace<\/a>\u00a0object we receive from ML Kit. This object stores all the facial information of the user\u2019s face. The\u00a0<a href=\"https:\/\/developers.google.com\/android\/reference\/com\/google\/firebase\/ml\/vision\/face\/FirebaseVisionFaceLandmark\">landmark<\/a>\u00a0that we are going to be working with is\u00a0<code>MOUTH_BOTTOM<\/code>.<\/p><p>Reading the API,\u00a0<code>MOUTH_BOTTOM<\/code>\u00a0gives us: \u201cThe center of the subject&#8217;s bottom lip.\u201d<\/p><p>Unlike the previous example, this time we have a location that is close to where we want to append our image in our canvas, but it\u2019s not the exact location we are looking for. We will need to do some work to ensure that we place our asset in the correct location.<\/p><h2>Writing the Code<\/h2><p>This time, when we finish, our result will look something like this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image004-1.png\" width=\"262px\" height=\"539px\" \/><\/p><p>Or with our lip color filter on, like this:<\/p><p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/07\/unnamed.jpg\" alt=\"\" width=\"249\" height=\"512\" \/><\/p><p>To allow the user the ability to add these lips, we are going to change the layout of our existing app. We\u2019re going to:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Create a new (for now disabled) button that will allow us to draw a lipstick on the detected face.<\/li><li style=\"font-size: 16px;\">Create a spinner which provides color options to allow the user to choose the color they want their lipstick to be.<br \/>To create our layout, here\u2019s what our new<span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">\u00a0<\/span><em style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">activity_main.xml<\/em><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">\u00a0<\/span><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">looks like:<\/span><\/li><\/ol>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2d4a7c elementor-widget elementor-widget-code-highlight\" data-id=\"f2d4a7c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-xml line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-xml\">\n\t\t\t\t\t<xmp><?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout\r\n        xmlns_android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n        xmlns_tools=\"http:\/\/schemas.android.com\/tools\"\r\n        android_layout_width=\"match_parent\"\r\n        android_layout_height=\"match_parent\"\r\n        tools_context=\".MainActivity\">\r\n\r\n    <TextView\r\n            android_layout_width=\"188dp\"\r\n            android_layout_height=\"wrap_content\"\r\n            android_id=\"@+id\/happiness\"\r\n            android_layout_alignParentBottom=\"true\"\r\n            android_layout_marginBottom=\"82dp\"\r\n            android_layout_alignParentStart=\"true\"\/>\r\n    <ImageView\r\n            android_layout_width=\"wrap_content\"\r\n            android_layout_height=\"wrap_content\"\r\n            tools_layout_editor_absoluteY=\"27dp\"\r\n            tools_layout_editor_absoluteX=\"78dp\"\r\n            android_id=\"@+id\/imageView\"\/>\r\n    <com.example.mlkittutorial.GraphicOverlay\r\n            android_layout_width=\"wrap_content\"\r\n            android_layout_height=\"wrap_content\"\r\n            android_id=\"@+id\/graphicOverlay\"\r\n            android_layout_alignParentStart=\"true\"\r\n            android_layout_alignParentTop=\"true\"\r\n            android_layout_marginStart=\"0dp\"\r\n            android_layout_marginTop=\"0dp\"\/>\r\n    <LinearLayout android_layout_width=\"match_parent\" android_layout_height=\"wrap_content\"\r\n                  android_layout_alignParentStart=\"true\" android_layout_alignParentBottom=\"true\">\r\n        <Button\r\n                android_text=\"Take Picture\"\r\n                android_layout_width=\"wrap_content\"\r\n                android_layout_height=\"wrap_content\"\r\n                android_layout_weight=\"1\"\r\n                android_onClick=\"takePicture\"\r\n                android_id=\"@+id\/takePicture\"\r\n                android_visibility=\"visible\"\r\n                android_enabled=\"true\"\/>\r\n        <Button\r\n                android_text=\"Detect Face\"\r\n                android_layout_weight=\"1\"\r\n                android_layout_width=\"wrap_content\"\r\n                android_layout_height=\"wrap_content\"\r\n                android_id=\"@+id\/detectFace\"\r\n                android_onClick=\"detectFace\"\r\n                android_visibility=\"visible\"\r\n                android_enabled=\"false\"\/>\r\n        <Button\r\n                android_text=\"Draw Lip\"\r\n                android_layout_weight=\"1\"\r\n                android_layout_width=\"wrap_content\"\r\n                android_layout_height=\"wrap_content\"\r\n                android_id=\"@+id\/drawLip\"\r\n                android_onClick=\"drawLip\"\r\n                android_visibility=\"visible\"\r\n                android_enabled=\"false\"\/>\r\n    <\/LinearLayout>\r\n    <Spinner\r\n            android_layout_width=\"145dp\"\r\n            android_layout_height=\"wrap_content\"\r\n            android_layout_alignParentEnd=\"true\"\r\n            android_layout_marginEnd=\"0dp\"\r\n            android_layout_alignParentBottom=\"true\"\r\n            android_id=\"@+id\/colorSpinner\"\r\n            android_layout_marginBottom=\"78dp\"\/>\r\n<\/RelativeLayout><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9930c1 elementor-widget elementor-widget-text-editor\" data-id=\"d9930c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Here\u2019s what it looks like on Android Studio:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image006-1.png\" width=\"331px\" height=\"460px\" \/><\/p><p>Here\u2019s\u00a0<em>MainActivity.kt<\/em>, updated<span style=\"font-weight: bold;\">\u00a0<\/span>to use our new options:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c7a301e elementor-widget elementor-widget-code-highlight\" data-id=\"c7a301e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-java line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-java\">\n\t\t\t\t\t<xmp>package com.example.mlkittutorial\r\n\r\nimport android.content.Intent\r\nimport android.content.res.Resources\r\nimport android.graphics.Bitmap\r\nimport android.graphics.BitmapFactory\r\nimport android.graphics.Color\r\nimport android.support.v7.app.AppCompatActivity\r\nimport android.os.Bundle\r\nimport android.provider.MediaStore\r\nimport android.view.View\r\nimport android.widget.ArrayAdapter\r\nimport com.google.firebase.ml.vision.FirebaseVision\r\nimport com.google.firebase.ml.vision.common.FirebaseVisionImage\r\nimport com.google.firebase.ml.vision.face.FirebaseVisionFace\r\nimport com.google.firebase.ml.vision.face.FirebaseVisionFaceDetectorOptions\r\nimport kotlinx.android.synthetic.main.activity_main.*\r\n\r\nclass MainActivity : AppCompatActivity() {\r\n    private val requestImageCapture = 1\r\n    private var cameraImage: Bitmap? = null\r\n    private var faces: List<FirebaseVisionFace>? = null\r\n    private var color = arrayOf(\"None\", \"Red\", \"Blue\", \"Green\", \"Yellow\")\r\n\r\n    override fun onCreate(savedInstanceState: Bundle?) {\r\n        super.onCreate(savedInstanceState)\r\n        setContentView(R.layout.activity_main)\r\n\r\n        \/\/ setup the list of colors to show in our spinner\r\n        val adapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, color)\r\n        adapter.setDropDownViewResource(android.R.layout.simple_selectable_list_item)\r\n        colorSpinner.adapter = adapter\r\n    }\r\n\r\n    \/** Receive the result from the camera app *\/\r\n    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {\r\n        if (requestCode == requestImageCapture && resultCode == RESULT_OK && data != null && data.extras != null) {\r\n            val imageBitmap = data.extras.get(\"data\") as Bitmap\r\n\r\n            \/\/ Instead of creating a new file in the user's device to get a full scale image\r\n            \/\/ resize our smaller imageBitMap to fit the screen\r\n            val width = Resources.getSystem().displayMetrics.widthPixels\r\n            val height = width \/ imageBitmap.width * imageBitmap.height\r\n            cameraImage = Bitmap.createScaledBitmap(imageBitmap, width, height, false)\r\n\r\n            \/\/ Display the image and enable our ML facial detection button\r\n            imageView.setImageBitmap(cameraImage)\r\n            detectFace.isEnabled = true\r\n        }\r\n    }\r\n\r\n    \/** Callback for the take picture button *\/\r\n    fun takePicture(view: View) {\r\n        \/\/ Take an image using an existing camera app\r\n        Intent(MediaStore.ACTION_IMAGE_CAPTURE).also { takePictureIntent ->\r\n            takePictureIntent.resolveActivity(packageManager)?.also {\r\n                startActivityForResult(takePictureIntent, requestImageCapture)\r\n                happiness.text = \"\"\r\n                graphicOverlay.clear()\r\n            }\r\n        }\r\n    }\r\n\r\n    \/** Callback for the detect face button *\/\r\n    fun detectFace(view: View) {\r\n        \/\/ Build the options for face detector SDK\r\n        if (cameraImage != null) {\r\n            val image = FirebaseVisionImage.fromBitmap(cameraImage as Bitmap)\r\n            val builder = FirebaseVisionFaceDetectorOptions.Builder()\r\n            builder.setContourMode(FirebaseVisionFaceDetectorOptions.ALL_CONTOURS)\r\n            builder.setClassificationMode(FirebaseVisionFaceDetectorOptions.ALL_CLASSIFICATIONS)\r\n            builder.setLandmarkMode(FirebaseVisionFaceDetectorOptions.ALL_LANDMARKS) \/\/ different\r\n\r\n            val options = builder.build()\r\n\r\n            \/\/ Send our image to be detected by the SDK\r\n            val detector = FirebaseVision.getInstance().getVisionFaceDetector(options)\r\n            detector.detectInImage(image).addOnSuccessListener { faces ->\r\n                displayImage(faces)\r\n            }\r\n        }\r\n    }\r\n\r\n    \/** Draw a graphic overlay on top of our image *\/\r\n    private fun displayImage(faces: List<FirebaseVisionFace>) {\r\n        graphicOverlay.clear()\r\n        if (faces.isNotEmpty()) {\r\n            \/\/ We will only draw an overlay on the first face\r\n            val firstFace = faces[0]\r\n            val smilingChance = firstFace.smilingProbability * 100\r\n            val faceGraphic = FaceContourGraphic(graphicOverlay, firstFace)\r\n            graphicOverlay.add(faceGraphic)\r\n            happiness.text = \"Smile Probability: \" + (smilingChance) + \"%\"\r\n\r\n            \/\/ Save the face and enable the lip drawing button\r\n            drawLip.isEnabled = true\r\n            this.faces = faces\r\n        } else {\r\n            happiness.text = \"No face detected\"\r\n        }\r\n    }\r\n\r\n    \/** Draw a graphical lip on top of the user's lips *\/\r\n    fun drawLip(view: View) {\r\n        graphicOverlay.clear()\r\n        if (faces != null) {\r\n            val position = colorSpinner.selectedItemPosition\r\n\r\n            \/\/ based off of the position of our item, we pick the matching color\r\n            val color = when (position) {\r\n                1 -> Color.RED\r\n                2 -> Color.BLUE\r\n                3 -> Color.GREEN\r\n                4 -> Color.YELLOW\r\n                else -> null\r\n            }\r\n            val bmp = when (position) {\r\n                0 -> BitmapFactory.decodeResource(resources, R.drawable.lip)\r\n                else -> BitmapFactory.decodeResource(resources, R.drawable.filter_lip)\r\n            }\r\n\r\n            \/\/ Iterate through all of detected faces to create a graphic overlay\r\n            faces?.forEach {\r\n                val faceGraphic = FaceLipGraphic(graphicOverlay, it, bmp, color)\r\n                graphicOverlay.add(faceGraphic)\r\n            }\r\n        }\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-808b452 elementor-widget elementor-widget-text-editor\" data-id=\"808b452\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>If you compare the code to the code from the previous project, you can see that we\u2019ve made some changes.<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">In\u00a0<code>OnCreate<\/code>, I created a list adapter that will be used to display the available options for the color for our lips that we want to select.<\/li><li style=\"font-size: 16px;\">In\u00a0<code>detectFace<\/code>, I enabled\u00a0<code>landmarkMode<\/code>, to enable us to query landmark information about our face.<\/li><li style=\"font-size: 16px;\">In\u00a0<code>displayImage<\/code>, we made some changes in the code to save our\u00a0<code>FireBaseVisionFace<\/code>\u00a0object. This is so if we run detection, it is stored so we can use it later to draw our lipstick on the user\u2019s picture instead of having to detect it again. Once detection has been run, we also enable the draw lip button, and save the list of faces we want to draw our lipstick on.<\/li><li style=\"font-size: 16px;\">In\u00a0<code>drawLip<\/code>, which is connected to our drawLip button, we check to see which lip option the user wants to use from the spinner. Based on that option, we load our specific image resource into a bitmap, then iterate through our list of\u00a0<code>faces<\/code>, and finally pass our Bitmap and color into our new\u00a0<code>FaceLipGraphic<\/code>\u00a0class to draw the lipstick.<br \/><br \/><\/li><\/ol><p>We haven\u2019t seen our new\u00a0<code>FaceLipGraphic<\/code>\u00a0class yet, but on the high level, it\u2019s similar to\u00a0<a href=\"https:\/\/docs.google.com\/document\/d\/1sXF0LeVMEKSdDZjfKX7tRFF_Eb9jWdPHXZFqwFjttPs\/edit\">FaceContourGraphic<\/a>\u00a0class provided by Firebase, in that we draw something on top of the picture we\u2019ve taken. Here\u2019s what the\u00a0<code>FaceLipGraphic<\/code>\u00a0class looks like:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f3af3a elementor-widget elementor-widget-code-highlight\" data-id=\"4f3af3a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-java line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-java\">\n\t\t\t\t\t<xmp>package com.example.mlkittutorial\r\n\r\nimport android.graphics.*\r\nimport com.google.firebase.ml.vision.face.FirebaseVisionFace\r\nimport com.google.firebase.ml.vision.face.FirebaseVisionFaceLandmark\r\n\r\n\/** Graphic instance for rendering face contours graphic overlay view.  *\/\r\nclass FaceLipGraphic(overlay: GraphicOverlay, private val firebaseVisionFace: FirebaseVisionFace?, private val lips: Bitmap, color: Int? = null)\r\n    : GraphicOverlay.Graphic(overlay) {\r\n\r\n    private val lipPaint: Paint = Paint()\r\n\r\n    init {\r\n        lipPaint.alpha = 70\r\n        if (color != null) {\r\n            lipPaint.colorFilter = PorterDuffColorFilter(color, PorterDuff.Mode.SRC_IN)\r\n        }\r\n    }\r\n\r\n    \/** Draws the lips on the position on the supplied canvas. *\/\r\n    override fun draw(canvas: Canvas) {\r\n        val face = firebaseVisionFace ?: return\r\n        val mouth = face.getLandmark(FirebaseVisionFaceLandmark.MOUTH_BOTTOM) ?: return\r\n\r\n        \/\/ Get the center position of the bottom lip\r\n        val mouthX = mouth.position.x\r\n        val mouthY = mouth.position.y\r\n\r\n        \/\/ Calculate the ratio of the size of a mouth to a face to re-size the lip image we have to an ideal size. I found this number through trial and error.\r\n        val idealWidth = (face.boundingBox.width() \/ 2.5).toInt()\r\n        val idealHeight = (face.boundingBox.height() \/ 4)\r\n        val lipImage = Bitmap.createScaledBitmap(lips, idealWidth, idealHeight, false)\r\n\r\n        \/\/ Our lip image will start at the center of the bottom lip. To allow our image to be in the center\r\n        \/\/ we need to move our image half of its width to the left to move the center of our lip to be on the\r\n        \/\/ center of the user's lips.\r\n        val lipPositionX = mouthX - idealWidth \/ 2\r\n\r\n        \/\/ We need to create an offset to move our lips to the center. Currently we're at the center of the bottom of our lip.\r\n        \/\/ The center of the bottom lip is 1\/4 of the whole lip. If we want to find the real center of the mouth, we need\r\n        \/\/ to move our height another 1\/4 up.\r\n        val bottomLipOffset = idealHeight \/ 4\r\n\r\n        \/\/ Just like our width, we need to move our image's height position half of its height up to be at the center\r\n        \/\/ of the bottom lip. We also move our image up by another 1\/4 of the bottom lip size so that the image will be\r\n        \/\/ at the center of the user's mouth\r\n        val lipPositionY = mouthY - idealHeight \/ 2 - bottomLipOffset\r\n\r\n        \/\/ Draw the lipstick into our canvas\r\n        canvas.drawBitmap(lipImage, lipPositionX, lipPositionY, lipPaint)\r\n    }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68108d87 elementor-widget elementor-widget-text-editor\" data-id=\"68108d87\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre lang=\"xml\"><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">Inside <\/span><code style=\"color: var( --e-global-color-text ); font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">FaceLipGraphic<\/code><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">, we do calculations to figure out where to place the lipstick image, then we draw it on to the picture we have taken.<\/span><br><\/pre>\n<p>In <code>init<\/code>,<b> <\/b>we set up our newly initialized <code>Paint<\/code> object that we will use to draw our lipstick in to the Canvas. The first thing we do is set the <code>alpha<\/code> to 70, which makes our image somewhat transparent, to see what is underneath the object.<\/p>\n<p>Next, we check to see if a non-null color was provided. If it is valid, we can set a color filter on our Paint object that will allow us to color in our image. I won\u2019t get into the specifics, but I chose to use the <a href=\"https:\/\/developer.android.com\/reference\/android\/graphics\/PorterDuffColorFilter\">PorterDuffColorFilter<\/a>, which allows us to \u201c&nbsp;tint the source pixels using a single color and a specific PorterDuff.\u201d I used SRC_IN as my <a href=\"https:\/\/developer.android.com\/reference\/android\/graphics\/PorterDuff.Mode#SRC_IN\">PorterDuff.Mode<\/a>, because it replaces our existing image with our new color.<\/p>\n<p>Next, in <code>draw()<\/code>, we do the necessary calculations to place our lipstick image in the right position. I\u2019ve added extensive comments on the calculations I did to derive the proper location in the code.<\/p>\n<p>To those unfamiliar with the <a href=\"https:\/\/contentlab.com\/android-project-setup-for-the-tomtom-maps-sdk-2\/\">Android<\/a>\u2019s canvas coordinates, my math might appear wrong, but I assure you it is correct. Here\u2019s some more explanation:<\/p>\n<p>A normal graph takes place in the first quadrant, so (0,0) would be located in the bottom-left corner. Android\u2019s Canvas, on the other hand, takes place in the fourth quadrant, so (0, 0) is located at the top-left corner.<\/p>\n<p>Here\u2019s an image to represent the coordinate system:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image007-1.png\" width=\"585px\" height=\"429px\"><\/p>\n<p>Specifically, unlike what most people usually assume, subtraction on our Y-axis actually moves our image up instead of down. The X-axis remains the same. With this knowledge, you should be able to understand the calculations I did to determine the coordinates at which the lipstick image needs to be drawn.<\/p>\n<h2>Conclusion<\/h2>\n<p>When you first started reading this article, you might have thought that using <a href=\"https:\/\/contentlab.com\/automatic-trash-classification-with-raspberry-pi-and-arm-nn-machine-learning\/\">ML<\/a> and AR in your app might have been outside of your capabilities. Hopefully, after going through both this article and the previous article, where you learned how to use Google\u2019s ML Kit to detect both faces and facial features, you have learned how to use that information to add AR functionality to your app. Now, you should now be more confident on how to use this technology to create more innovative apps.<\/p>\n<p>Another benefit from using Google\u2019s ML Kit is that, thanks to the power of the Arm processor that is built into our phone, we are able to do all this on-device, with no need to send any data to the cloud for processing.<\/p>\n<p>You\u2019ve already seen how we were able to apply lipstick images on a user\u2019s image, but that\u2019s only the tip of the iceberg in terms of what can be accomplished with ML and AR! If you want to continue learning how to expand, see how you might be able to add googly eyes over an eye, or place a funny nose on top of someone\u2019s nose. Good luck, and have fun!<\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article, we are going to build off what we learned and see how we can add AR capabilities based on the information we got from ML Kit.<\/p>\n","protected":false},"author":3,"featured_media":5330,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[322,278,18],"tags":[328,311],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Augmented Reality to an ML Kit-Powered Android App &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Augmented Reality to an ML Kit-Powered Android App &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article, we are going to build off what we learned and see how we can add AR capabilities based on the information we got from ML Kit.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-11T14:03:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-01T18:26:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Adding Augmented Reality to an ML Kit-Powered Android App\",\"datePublished\":\"2019-07-11T14:03:37+00:00\",\"dateModified\":\"2021-12-01T18:26:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\"},\"wordCount\":1535,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png\",\"keywords\":[\"AR\",\"Machine Learning\"],\"articleSection\":[\"AI\",\"Hands-on Tutorial\",\"Portfolio\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\",\"url\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\",\"name\":\"Adding Augmented Reality to an ML Kit-Powered Android App &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png\",\"datePublished\":\"2019-07-11T14:03:37+00:00\",\"dateModified\":\"2021-12-01T18:26:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Augmented Reality to an ML Kit-Powered Android App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Augmented Reality to an ML Kit-Powered Android App &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/","og_locale":"en_US","og_type":"article","og_title":"Adding Augmented Reality to an ML Kit-Powered Android App &#183; Technical Content Marketing | ContentLab","og_description":"In this article, we are going to build off what we learned and see how we can add AR capabilities based on the information we got from ML Kit.","og_url":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-07-11T14:03:37+00:00","article_modified_time":"2021-12-01T18:26:45+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#article","isPartOf":{"@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Adding Augmented Reality to an ML Kit-Powered Android App","datePublished":"2019-07-11T14:03:37+00:00","dateModified":"2021-12-01T18:26:45+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/"},"wordCount":1535,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png","keywords":["AR","Machine Learning"],"articleSection":["AI","Hands-on Tutorial","Portfolio"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/","url":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/","name":"Adding Augmented Reality to an ML Kit-Powered Android App &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage"},"image":{"@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png","datePublished":"2019-07-11T14:03:37+00:00","dateModified":"2021-12-01T18:26:45+00:00","breadcrumb":{"@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/contentlab.com\/adding-augmented-reality-to-an-ml-kit-powered-android-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Adding Augmented Reality to an ML Kit-Powered Android App"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2019\/03\/3.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2816"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2816"}],"version-history":[{"count":8,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2816\/revisions"}],"predecessor-version":[{"id":6180,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2816\/revisions\/6180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5330"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2816"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}