Детектор текста в Android с использованием Firebase ML Kit

Опубликовано: 30 Ноября, 2021

В настоящее время многие приложения используют машинное обучение внутри своих приложений, чтобы упростить большинство задач. Мы видели много приложений, которые обнаруживают текст на любом изображении. Это изображение может включать номерные знаки, изображения и многое другое. В этой статье мы рассмотрим реализацию Text Detector в Android с помощью Firebase ML Kit .

Что мы собираемся построить в этой статье?

Мы будем создавать простое приложение, в котором мы будем захватывать изображение любого текста внутри нашего приложения, а затем извлекать текст из этого конкретного изображения и отображать этот текст внутри текстового поля. Ниже приведен пример видео, чтобы понять, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java.

Пошаговая реализация

Шаг 1. Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать / запустить новый проект в Android Studio». Обратите внимание, что выберите Java в качестве языка программирования.

Шаг 2. Подключите приложение к Firebase

После создания нового проекта в Android Studio подключите приложение к Firebase. Для подключения вашего приложения к firebase. Перейдите в Инструменты на верхней панели. После этого нажмите Firebase. С правой стороны откроется новое окно. В этом окне нажмите Firebase ML, а затем нажмите Use Firebase ML, чтобы распознать текст на изображении. Вы можете увидеть вариант ниже на скриншоте.

После нажатия на эту опцию вы увидите экран, показанный ниже. На этом экране нажмите «Подключиться к Firebase», чтобы подключить ваше приложение к Firebase. Вы увидите экран ниже.

Нажмите на опцию Connect, чтобы подключить ваше приложение к Firebase и добавить приведенную ниже зависимость в свой файл build.gradle.

Шаг 3: Добавление зависимости в файл build.gradle

Перейдите к приложению> Сценарии Gradle> файл build.gradle и добавьте в него приведенный ниже код. Комментарии добавляются в код для более детального ознакомления.

Note: Use the following version(15.0.0) for the firebase ML kit if you are getting some error in the MainActivity.java file.



// dependancy for firebase ml kit  

implementation ‘com.google.firebase:firebase-ml-vision:15.0.0’

// dependancy for firebase core.

implementation’com.google.firebase:firebase-core:15.0.2′

Шаг 4. Добавление разрешений камеры для доступа к камере в приложении для Android.

Перейдите в приложение> файл AndroidManifest.xml и добавьте в него приведенный ниже код. Комментарии добавляются в код для более детального ознакомления.

XML

<!--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" />

Шаг 5: Работа с файлом activity_main.xml

Перейдите к приложению> res> layout> activity_main.xml и добавьте в этот файл приведенный ниже код. Ниже приведен код файла activity_main.xml.

XML

<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
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 >

Шаг 6: Работа с файлом MainActivity.java

Перейдите в файл MainActivity.java и ознакомьтесь со следующим кодом. Ниже приведен код файла MainActivity.java. Комментарии добавляются внутри кода для более подробного понимания кода.

Ява

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);
}
}
}

Теперь запустите ваше приложение и посмотрите результат работы приложения.

Выход: