ML Kit e riconoscimento Ottico dei Caratteri (OCR)

Il riconoscimento ottico dei caratteri (OCR) è una tecnologia che permette di estrarre testo da immagini o documenti digitalizzati, ML Kit di Google ci fornisce tutte le funzionalità di OCR da poter inserire nella nostra app Android senza il minimo sforzo. In questa lezione, ci occuperemo passo dopo passo di integrare le dipendenze necessarie della libreria ML Kit per l'implementazione del riconoscimento ottico dei caratteri in un'app Android e di scrivere il relativo codice.

Configurazione del progetto

• assicuriamoci di avere l'ultima versione di Android Studio installata sul computer.
• Creiamo un nuovo progetto Android in Android Studio.
• Aggiungiamo le dipendenze necessarie nel file build.gradle del modulo dell'app.

Quindi scriviamo al suo interno:

implementation 'com.google.android.gms:play-services-mlkit-text-recognition:17.0.0'

Questa dipendenza indica a Gradle (il sistema di build di Android) di includere il modulo play-services-mlkit-text-recognition nella nostra app. Consentendo così di utilizzare le API e le funzionalità relative al riconoscimento ottico dei caratteri fornite da ML Kit. Dopo aver aggiunto la dipendenza nel file build.gradle dell'applicazione Android, ci sono alcune azioni da eseguire per assicurarsi che la libreria venga correttamente integrata nel progetto e che le funzionalità di riconoscimento ottico dei caratteri siano utilizzabili.

Ecco i passaggi da seguire

1. sincronizzazione delle dipendenze: dopo aver aggiunto la dipendenza nel file build.gradle, è necessario sincronizzare il progetto con Gradle. Per fare ciò, possiamo fare clic sul pulsante "Sync Now" che appare nella parte superiore del file build.gradle, o eseguire manualmente la sincronizzazione dal menu di Android Studio selezionando "File" > "Sync Project with Gradle Files".
2. Aggiornamento delle risorse: se la nostra app utilizza risorse aggiuntive (ad esempio layout XML, immagini, stringhe, etc.) per supportare la funzionalità di riconoscimento ottico dei caratteri, assicuriamoci di aggiornare queste risorse per integrare correttamente il nuovo comportamento dell'app.
3. Inizializzazione dei servizi di ML Kit: prima di utilizzare qualsiasi funzionalità di ML Kit, è necessario inizializzare i servizi. Questo di solito viene fatto nel metodo onCreate() della classe Application o nella MainActivity dell'app. Possiamo inizializzare i servizi di ML Kit chiamando FirebaseApp.initializeApp(Context) se non abbiamo già inizializzato Firebase nel nostro progetto.
4. Richiesta dei permessi necessari: se la nostra app utilizza il riconoscimento ottico dei caratteri su immagini prese dalla galleria o dalla fotocamera, dobbiamo richiedere i permessi necessari per accedere a queste risorse. Per farlo dobbiamo aggiungere le richieste di permessi nel file AndroidManifest.xml. Per accedere alla galleria dobbiamo inserire:

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

   Per accedere alla fotocamera, invece:

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

   I tag <uses-permission> devono essere inseriti all'interno del tag <manifest> nel nostro file AndroidManifest.xml. Il risultato sarà qualcosa di questo tipo:

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
       package="com.example.myapp">
       <!-- Permesso per accedere alla galleria -->
       <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
       <!-- Permesso per accedere alla fotocamera -->
       <uses-permission android:name="android.permission.CAMERA" />
       <!-- Altre dichiarazioni del manifesto -->
       ...
   </manifest>

Una volta completati questi passaggi, possiamo occuparci della scrittura del codice Android.

L'interfaccia utente con ML Kit

Apriamo il file activity_main.xml e aggiungiamo un ImageView per visualizzare l'immagine da cui verrà estratto il testo e un TextView per visualizzare il testo estratto.

<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">  
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/sample_image" /> 
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="18sp" /> 
</RelativeLayout>

Implementazione dell'OCR

A questo punto nella nostra MainActivity possiamo dichiarare le variabili per l'ImageView e il TextView e inizializzarle nel metodo onCreate():

private ImageView imageView;
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imageView = findViewById(R.id.imageView);
    textView = findViewById(R.id.textView);
}

In sostanza, questo codice inizializza due variabili di istanza per fare riferimento a un ImageView e a un TextView definiti nel layout XML dell'attività activity_main. Questo permette al codice di interagire con questi componenti e modificarli dinamicamente durante l'esecuzione dell'app.

Metodo per l'avvio del processo

Aggiungiamo un nuovo metodo per avviare il processo di riconoscimento ottico dei caratteri:

private void recognizeText(Bitmap bitmap) {
    TextRecognizer recognizer = TextRecognition.getClient();
    InputImage image = InputImage.fromBitmap(bitmap, 0);
    recognizer.process(image)
            .addOnSuccessListener(new OnSuccessListener() {
                @Override
                public void onSuccess(Text texts) {
                    String resultText = texts.getText();
                    textView.setText(resultText);
                }
            })
            .addOnFailureListener(new OnFailureListener() {
                @Override
                public void onFailure(@NonNull Exception e) {
                    // gestiamo eventuali errori
                }
            });
}

Il codice nel dettaglio

TextRecognizer recognizer = TextRecognition.getClient();: Crea un'istanza di TextRecognizer, un oggetto fornito da ML Kit per il riconoscimento ottico dei caratteri. TextRecognition.getClient() restituisce un'istanza preconfigurata di TextRecognizer. InputImage image = InputImage.fromBitmap(bitmap, 0); crea un oggetto InputImage a partire dall'immagine Bitmap fornita come parametro. Questo oggetto rappresenta l'immagine su cui verrà eseguito il riconoscimento del testo. Il secondo parametro, 0, indica che l'orientamento dell'immagine è sconosciuto. recognizer.process(image) avvia il processo di riconoscimento del testo sull'immagine fornita utilizzando il metodo process() di TextRecognizer. Questo metodo restituisce un oggetto Task che rappresenta il processo di riconoscimento del testo.

.addOnSuccessListener(...) aggiunge un listener per gestire il successo del processo di riconoscimento del testo. Quando il testo è stato riconosciuto con successo, viene chiamato il metodo onSuccess(Text texts) che riceve come parametro un oggetto Text contenente il testo riconosciuto. All'interno di questo metodo, viene estratto il testo tramite il metodo getText() e viene impostato nel textView per visualizzarlo all'utente.

.addOnFailureListener(...) aggiunge un listener per gestire eventuali errori durante il processo di riconoscimento del testo. Se si verifica un errore, viene chiamato il metodo onFailure(@NonNull Exception e), che riceve come parametro l'eccezione che ha causato il fallimento. In questo metodo è possibile gestire l'errore in modo appropriato. Ad esempio mostrando un messaggio di errore all'utente o registrando l'errore per scopi di debug.

Caricamento dell'immagine con ML Kit

Aggiungiamo un metodo per caricare un'immagine dalla galleria e avviare il riconoscimento ottico dei caratteri sopra descritto:

private void selectImage() {
    Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
    startActivityForResult(intent, 100);
}
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == 100 && resultCode == RESULT_OK && data != null) {
        Uri uri = data.getData();
        try {
            Bitmap bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uri);
            imageView.setImageBitmap(bitmap);
            recognizeText(bitmap);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

Questo codice gestisce il processo di selezione di un'immagine dalla galleria e avvia il riconoscimento ottico dei caratteri sull'immagine selezionata.

Avvio dell'app

Adesso avviamo l'applicazione sul dispositivo Android (fisico o virtuale) e tocchiamo l'ImageView per selezionare un'immagine dalla galleria. Dopo la selezione, l'applicazione eseguirà il riconoscimento ottico dei caratteri sull'immagine e visualizzerà il testo estratto nel TextView.

Conclusioni: OCR con ML Kit

In questo esempio abbiamo visto come integrare il riconoscimento ottico (OCR) dei caratteri utilizzando ML Kit nella nostra app Android. Potremmo personalizzare ulteriormente l'interfaccia utente e migliorare la gestione degli errori per adattarla alle esigenze dell'app con la stessa semplicità con cui abbiamo creato queste righe di codice.