Android Application Interface With Azure Computer Vision API

Introduction

 

This article demonstrates the Android application interface with Azure computer vision API. It demonstrates image analysis.

 

What is Computer Vision API?

 

Computer vision is concerned with the automatic extraction, analysis, and understanding of useful information from a single image. It is also called cognitive. Computer Vision algorithms can analyze the content of an image in different ways, Computer Vision can find all the faces in an image.

 

Example

 

 

Step 1

 

Create a new project in Android Studio from File >> Project and fill in all the necessary details. Next, go to Gradle Scripts >> build.gradle (Module: app).S elect build.gradle. The app Gradle compiles the code, and then build types will appear. Just replace that with the following code.

 

Usage

 

Make sure you've added maven central to the list.

allprojects {
    repositories {

        maven { url 'https://jitpack.io' }
    }
}

App gradle compile code 

dependencies {

    implementation 'com.github.eddydn:EDMTDevCognitiveVision:1.3'
}

Change the SdkVersion is minimum level 21.

defaultConfig {
        applicationId "io.github.saravanan_selvaraju.azurevision"
        minSdkVersion 21    // Minimum Level 21 SDK Version
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }

Step 2

 

Next, go to app >> res >> drawable, select the drawable directory then paste the given image.

 

 

Next, go to app >> res >> layout >> activity_main.xml. Select the activity_main xml file then replacing the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <Button
        android:id="@+id/btn_process"
        android:text="Analyze"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/txt_result"
        android:layout_above="@+id/btn_process"
        android:text="Description..."
        android:textAlignment="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Preview

 

Step 3

 

Next, go to the Azure portal (https://portal.azure.com) create resource >> AI + Machine Learning >> Computer Vision. Select the computer vision and fill in all the necessary details then click the create button.

 

 

 

After that get the computer vision API_KEY and API_LINK then click the key hyperlink and keys 1 and 2 appear.

 

 

 

Copy the anyone Azure_Vision key (Key 1 or Key 2).

 

 

 

Step 4

 

Next, go to app >>Java >> package name. Select MainActivity.java. The Java code will appear.

 

 

 

When an asynchronous task is executed, the task goes through 4 steps,

• onPreExecute(), invoked on the UI thread before the task is executed. This step is normally used to set up the task, for instance by showing a progress bar in the user interface.

• doInBackground(Params...), invoked on the background thread immediately after onPreExecute() finishes executing. This step is used to perform background computation that can take a long time. The parameters of the asynchronous task are passed to this step. The result of the computation must be returned by this step and will be passed back to the last step. This step can also use publishProgress(Progress...) to publish one or more units of progress. These values are published on the UI thread, in the onProgressUpdate(Progress...) step.

• onProgressUpdate(Progress...), invoked on the UI thread after a call to publishProgress(Progress...). The timing of the execution is undefined. This method is used to display any form of progress in the user interface while the background computation is still executing. For instance, it can be used to animate a progress bar or show logs in a text field.

• onPostExecute(Result), invoked on the UI thread after the background computation finishes. The result of the background computation is passed to this step as a parameter.
   

MainActivity.java

package io.github.saravanan_selvaraju.azurevision;

import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.google.gson.Gson;

import org.w3c.dom.Text;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;

import edmt.dev.edmtdevcognitivevision.Contract.AnalysisInDomainResult;
import edmt.dev.edmtdevcognitivevision.Contract.AnalysisResult;
import edmt.dev.edmtdevcognitivevision.Contract.Caption;
import edmt.dev.edmtdevcognitivevision.Rest.VisionServiceException;
import edmt.dev.edmtdevcognitivevision.VisionServiceClient;
import edmt.dev.edmtdevcognitivevision.VisionServiceRestClient;

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    Button btnProcess;
    TextView txtResult;

    private final String API_KEY = "b3a1dd91af344f07b2a318507d93c9dc";
    private final String API_LINK = "https://eastus.api.cognitive.microsoft.com/vision/v1.0";

    VisionServiceClient visionServiceClient = new VisionServiceRestClient(API_KEY,API_LINK);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = (ImageView)findViewById(R.id.image_view);
        btnProcess = (Button) findViewById(R.id.btn_process);
        txtResult = (TextView)findViewById(R.id.txt_result);

        final Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.smile);
        imageView.setImageBitmap(bitmap);

        btnProcess.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
                bitmap.compress(Bitmap.CompressFormat.JPEG, 100,outputStream);
                final ByteArrayInputStream inputStream = new ByteArrayInputStream(outputStream.toByteArray());

                AsyncTask<InputStream,String,String> visionTask = new AsyncTask<InputStream, String, String>() {
                  ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);

                    @Override
                    protected void onPreExecute() {
                        progressDialog.show();
                    }

                    @Override
                    protected String doInBackground(InputStream... inputStreams) {
                        try
                        {
                                publishProgress("Reconizing...");
                                String[] features = {"Description"};
                                String[] details = {};

                            AnalysisResult result = visionServiceClient.analyzeImage(inputStreams[0],features,details);

                            String jsonResult = new Gson().toJson(result);
                            return jsonResult;
                        } catch (IOException e) {
                            e.printStackTrace();
                        } catch (VisionServiceException e) {
                            e.printStackTrace();
                        }
                        return "";
                    }

                    @Override
                    protected void onPostExecute(String s){

                        if(TextUtils.isEmpty(s)){

                           Toast.makeText(MainActivity.this,"API Return Empty Result",Toast.LENGTH_SHORT).show();
                        }
                        else {
                            progressDialog.dismiss();
                            AnalysisResult result = new Gson().fromJson(s, AnalysisResult.class);
                            StringBuilder result_Text = new StringBuilder();
                            for (Caption caption : result.description.captions)
                                result_Text.append(caption.text);
                            txtResult.setText(result_Text.toString());
                        }

                    }

                    @Override
                    protected void onProgressUpdate(String... values){
                        progressDialog.setMessage(values[0]);

                    }

                };
                visionTask.execute(inputStream);
            }
        });

    }
}

Step 5

 

Next, go to app >> manifests >> AndroidManifest.XML. Add internet permission to the AndroidManifest.XML file.

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

  <application
        android:usesCleartextTraffic="true"   //clear textTraffic is must
  </application>

Step 6

 

Next, go to Android Studio and deploy the application. Select Emulator or your Android Device with USB debugging enabled. Give it a few seconds to make installations and set permissions.

 

Run the application in your desired emulator (Shift + F10).

 

 

When I click the analyze button to get the output for "a dinosaur with its mouth open"

 

Finally, we have successfully created a Computer Vision Android application. Later we will discuss more Android applications.