Detector de texto en Android usando Firebase ML Kit

Hoy en día, muchas aplicaciones utilizan Machine Learning dentro de sus aplicaciones para facilitar la mayoría de las tareas. Hemos visto muchas aplicaciones que detectan texto de cualquier imagen. Esta imagen puede incluir matrículas, imágenes y mucho más. En este artículo, veremos la implementación de Text Detector en Android usando Firebase ML Kit . 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que capturaremos una imagen de cualquier texto dentro de nuestra aplicación y luego extraeremos el texto de esa imagen en particular y mostraremos ese texto dentro de un campo de texto. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: conecta tu aplicación a Firebase

Después de crear un nuevo proyecto en Android Studio, conecte su aplicación a Firebase. Para conectar su aplicación a firebase. Navegue a Herramientas en la barra superior. Después de eso, haga clic en Firebase. Se abrirá una nueva ventana en el lado derecho. Dentro de esa ventana, haga clic en Firebase ML y luego haga clic en Usar Firebase ML para reconocer el texto en la imagen. Puede ver la opción debajo de la captura de pantalla. 

 Después de hacer clic en esta opción, verá la siguiente pantalla. En esta pantalla, haga clic en la opción Conectar a Firebase para conectar su aplicación a Firebase. Verá la siguiente pantalla. 

Haga clic en la opción Conectar para conectar su aplicación a Firebase y agregue la siguiente dependencia a su archivo build.gradle. 

Paso 3: Agregar dependencia al archivo build.gradle 

Vaya a la aplicación > Gradle Scripts > archivo build.gradle y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

Nota: Use la siguiente versión (15.0.0) para el kit de ML de firebase si recibe algún error en el archivo MainActivity.java .

// dependencia para el kit firebase ml  

implementación ‘com.google.firebase:firebase-ml-vision:15.0.0’

// dependencia para firebase core.

implementación’com.google.firebase:firebase-core:15.0.2′

Paso 4: agregar permisos de cámara para acceder a la cámara en su aplicación de Android

Vaya a la aplicación > archivo AndroidManifest.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

<!--below line is use to add camera feature in our app-->
<uses-feature android:name="android.hardware.camera" android:required="true"/>
  
<!--permission for internet-->
<uses-permission android:name="android.permission.INTERNET"/>

Paso 5: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--image view to display our image-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="29dp"
        android:scaleType="centerCrop" />
  
    <!--text view to display our extracted text-->
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@+id/image"
        android:layout_marginTop="10dp"
        android:textSize="15sp"
        android:textStyle="bold" />
  
    <!--button to capture our image-->
    <Button
        android:id="@+id/snapbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="53dp"
        android:layout_marginLeft="53dp"
        android:layout_marginBottom="100dp"
        android:text="Snap"
        android:textAllCaps="false"
        android:textSize="25sp"
        android:textStyle="bold" />
  
    <!--button to detect text from our image-->
    <Button
        android:id="@+id/detectbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/snapbtn"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="39dp"
        android:layout_marginRight="39dp"
        android:text="Detect"
        android:textAllCaps="false"
        android:textSize="25sp"
        android:textStyle="bold" />
      
</RelativeLayout>

Paso 6: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.ml.vision.FirebaseVision;
import com.google.firebase.ml.vision.common.FirebaseVisionImage;
import com.google.firebase.ml.vision.text.FirebaseVisionText;
import com.google.firebase.ml.vision.text.FirebaseVisionTextDetector;
  
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our 
    // image view, text view and two buttons.
    private ImageView img;
    private TextView textview;
    private Button snapBtn;
    private Button detectBtn;
      
    // variable for our image bitmap.
    private Bitmap imageBitmap;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // on below line we are initializing our variables.
        img = (ImageView) findViewById(R.id.image);
        textview = (TextView) findViewById(R.id.text);
        snapBtn = (Button) findViewById(R.id.snapbtn);
        detectBtn = (Button) findViewById(R.id.detectbtn);
          
        // adding on click listener for detect button.
        detectBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling a method to 
                // detect a text .
                detectTxt();
            }
        });
        snapBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling a method to capture our image.
                dispatchTakePictureIntent();
            }
        });
    }
  
    static final int REQUEST_IMAGE_CAPTURE = 1;
  
    private void dispatchTakePictureIntent() {
        // in the method we are displaying an intent to capture our image.
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
          
        // on below line we are calling a start activity 
        // for result method to get the image captured.
        if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
            startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE);
        }
    }
  
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // calling on activity result method.
        if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {
            // on below line we are getting
            // data from our bundles. .
            Bundle extras = data.getExtras();
            imageBitmap = (Bitmap) extras.get("data");
             
            // below line is to set the
            // image bitmap to our image.
            img.setImageBitmap(imageBitmap);
        }
    }
  
    private void detectTxt() {
        // this is a method to detect a text from image.
        // below line is to create variable for firebase 
        // vision image and we are getting image bitmap.
        FirebaseVisionImage image = FirebaseVisionImage.fromBitmap(imageBitmap);
          
        // below line is to create a variable for detector and we 
        // are getting vision text detector from our firebase vision.
        FirebaseVisionTextDetector detector = FirebaseVision.getInstance().getVisionTextDetector();
          
        // adding on success listener method to detect the text from image.
        detector.detectInImage(image).addOnSuccessListener(new OnSuccessListener<FirebaseVisionText>() {
            @Override
            public void onSuccess(FirebaseVisionText firebaseVisionText) {
                // calling a method to process 
                // our text after extracting.
                processTxt(firebaseVisionText);
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // handling an error listener.
                Toast.makeText(MainActivity.this, "Fail to detect the text from image..", Toast.LENGTH_SHORT).show();
            }
        });
    }
  
    private void processTxt(FirebaseVisionText text) {
        // below line is to create a list of vision blocks which
        // we will get from our firebase vision text.
        List<FirebaseVisionText.Block> blocks = text.getBlocks();
         
        // checking if the size of the 
        // block is not equal to zero.
        if (blocks.size() == 0) {
            // if the size of blocks is zero then we are displaying
            // a toast message as no text detected.
            Toast.makeText(MainActivity.this, "No Text ", Toast.LENGTH_LONG).show();
            return;
        }
        // extracting data from each block using a for loop.
        for (FirebaseVisionText.Block block : text.getBlocks()) {
            // below line is to get text
            // from each block.
            String txt = block.getText();
              
            // below line is to set our
            // string to our text view.
            textview.setText(txt);
        }
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación.

Producción: