Intégrer un modèle personnalisé à votre application

1. Avant de commencer

Dans le premier atelier de programmation de cette série, vous avez créé une application très simple qui utilise l'étiquetage d'images pour analyser le contenu d'une image. Vous lui avez transmis la photo d'une marguerite, et elle vous a fait savoir qu'elle avait vu des choses comme un pétale ou le ciel. Ensuite, dans le deuxième atelier de programmation, vous êtes passé à Python pour entraîner un nouveau modèle personnalisé qui reconnaît cinq types de fleurs différents.

Dans cet atelier de programmation, vous allez mettre à jour l'application du premier atelier avec le modèle du second.

Vous pouvez obtenir le code source complet de cet atelier de programmation en clonant ce dépôt. Les sous-répertoires pour Android et iOS s'affichent. Le code de l'atelier de programmation précédent est disponible en tant qu'ImageClassifierStep1 si vous souhaitez continuer. Le code final de cet atelier de programmation est disponible en tant qu'ImageClassifierStep2.

Prérequis

  • Vous devez avoir terminé les deux premiers ateliers de programmation de ce parcours de formation.

Objectifs de l'atelier

  • Intégrer un modèle personnalisé, entraîné dans l'atelier précédent, à une application Android ou iOS

Prérequis

  • Android Studio, disponible à l'adresse developer.android.com/studio pour la partie Android de l'atelier
  • Xcode, disponible sur l'App Store d'Apple, pour la partie iOS de l'atelier

2. Télécharger l'application de démarrage

Tout d'abord, vous aurez besoin de l'application de l'atelier de programmation "Créer votre première application de vision par ordinateur sur Android ou iOS". Si vous avez suivi cet atelier, il s'appelle "ImageClassifierStep1". Si vous ne souhaitez pas suivre l'atelier, vous pouvez cloner la version finale à partir du dépôt

Ouvrez-la dans Android Studio, effectuez les mises à jour dont vous avez besoin, puis, une fois le processus terminé, exécutez l'application pour vous assurer qu'elle fonctionne. L'écran qui s'affiche devrait ressembler à ce qui suit :

f3703d45d1332d1d.png

Il s'agit d'une application assez ancienne, mais elle présente des fonctionnalités très puissantes avec un peu de code. Toutefois, si vous voulez que cette fleur soit reconnue comme une marguerite, et pas seulement comme une fleur, vous devez mettre à jour l'application afin qu'elle utilise votre modèle personnalisé. Vous l'avez fait dans l'atelier de programmation "Créer un modèle personnalisé pour votre classificateur d'images".

3. Mettre à jour le fichier build.gradle pour utiliser des modèles ML Kit personnalisés

  1. À l'aide d'Android Studio, recherchez le fichier build.gradle au niveau de l'application. Pour ce faire, le moyen le plus simple consiste à utiliser l'explorateur de projets. Assurez-vous qu'Android est sélectionné en haut et qu'un dossier Gradle Scripts (Scripts Gradle) s'affiche en bas.
  2. Ouvrez celui du module, avec le nom de votre application suivi de ".app". comme indiqué ici – (Module: ImageClassifierStep1.app):

8fe1d04b40610047.png

  1. Au bas du fichier, recherchez le paramètre depends (dépendances). Vous devriez voir la ligne suivante:
implementation 'com.google.mlkit:image-labeling:17.0.1'

Le numéro de version peut être différent. Trouvez toujours le numéro de version le plus récent sur le site de ML Kit à l'adresse suivante: https://developers.google.com/ml-kit/vision/image-labeling/android.

  1. Remplacez-la par la référence de la bibliothèque d'étiquettes d'images personnalisées. Le numéro de version de ce produit est disponible sur https://developers.google.com/ml-kit/vision/image-labeling/custom-models/android.
implementation 'com.google.mlkit:image-labeling-custom:16.3.1'
  1. Vous ajouterez également un modèle .tflite que vous avez créé dans l'atelier précédent. Vous ne voulez pas que ce modèle soit compressé lorsqu'Android Studio compile votre application. Veillez donc à utiliser ce paramètre dans la section Android du même fichier build.gradle:
aaptOptions{
    noCompress "tflite"
}

Assurez-vous qu'il ne se trouve dans aucun autre paramètre. Il doit être imbriqué directement sous la balise android. Exemple :

62d546bff11d2a50.png

4. Ajouter le modèle TFLite

Dans l'atelier de programmation précédent, vous avez créé votre modèle personnalisé et vous l'avez téléchargé sous le nom model.tflite.

Dans votre projet, recherchez le dossier assets qui contient actuellement flower1.jpg. Copiez le modèle dans ce dossier comme suit:

  1. Effectuez un clic droit sur le dossier Assets dans Android Studio. Dans le menu qui s'affiche, sélectionnez Révéler dans le Finder. ("Afficher dans l'explorateur" sous Windows et "Afficher dans les fichiers" sous Linux).

db30b47e419a326b.png

  1. Vous êtes redirigé vers le répertoire du système de fichiers. Copiez le fichier model.tflite dans ce répertoire, avec flower1.jpg..

36de0c51bec1c19e.png

Android Studio sera mis à jour pour afficher les deux fichiers dans votre dossier d'éléments:

e9f4e9f394d9b357.png

Vous êtes maintenant prêt à mettre à jour votre code.

5. Mettre à jour votre code pour le modèle personnalisé

La première étape consiste à ajouter du code pour charger le modèle personnalisé.

  1. Dans votre fichier MainActivity, ajoutez le code suivant à onCreate, juste en dessous de la ligne setContentView(R.layout.activity_main).

Un LocalModel sera utilisé pour compiler à partir de l'élément model.tflite. Si Android Studio se plaint en activant "LocalModel" appuyez sur ALT+Entrée pour importer la bibliothèque. Elle devrait ajouter une importation à com.google.mlkit.common.model.LocalModel pour vous.

val localModel = LocalModel.Builder()
        .setAssetFilePath("model.tflite")
        .build()

Auparavant, dans votre gestionnaire btn.setOnClickListener, vous utilisiez le modèle par défaut. Il a été configuré avec ce code:

val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)

Vous allez le remplacer pour utiliser le modèle personnalisé.

  1. Configurez un objet d'options personnalisées:
val options = CustomImageLabelerOptions.Builder(localModel)
        .setConfidenceThreshold(0.7f)
        .setMaxResultCount(5)
        .build()

Les options par défaut sont ainsi remplacées par un ensemble personnalisé. Le seuil de confiance est un niveau de qualité supérieur pour les prédictions. Si nous reprenons l'exemple présenté en haut de cet atelier de programmation, où l'image était une marguerite, vous obtenez quatre prédictions, chacune accompagnée d'une valeur ("Sky", par exemple). étant de 0,7632.

Vous pouvez filtrer efficacement les résultats de qualité inférieure en utilisant un seuil de confiance élevé. Par exemple, le fait de définir cette valeur sur 0.9 ne renverrait aucune étiquette ayant une priorité inférieure à cette valeur. setMaxResultCount() est utile pour les modèles comportant de nombreuses classes, mais comme ce modèle n'en a que 5, vous allez simplement le laisser à 5.

Maintenant que vous disposez des options pour l'étiqueteur, vous pouvez modifier son instanciation comme suit:

val labeler = ImageLabeling.getClient(options)

Le reste de votre code s'exécutera sans modification. Essayez vous aussi !

dd40c36c4edbb33.png

Ici, vous pouvez voir que cette fleur a été identifiée comme une marguerite avec une probabilité de 0,959 !

Imaginons que vous ajoutiez une deuxième image de fleur et que vous reexécutiez avec cette image:

8556a5fbea487842.png

Il l'identifie comme une rose.

Vous vous demandez peut-être pourquoi il est écrit roses au lieu de "roses". En effet, dans l'ensemble de données, les étiquettes sont attribuées en fonction des noms de dossiers. Malheureusement, ces noms de dossiers sont un peu incohérents. Ils utilisent parfois le singulier (comme "marguerite") et parfois le pluriel (comme "roses"). Ne confondez pas cela avec le modèle qui tente de compter les éléments dans l'image. Il est beaucoup plus primitive, et ne peut identifier que les types de fleurs !

6. Télécharger l'application iOS Start

  1. Tout d'abord, vous aurez besoin de l'application du premier atelier de programmation. Si vous avez suivi cet atelier, il s'appelle "ImageClassifierStep1". Si vous ne souhaitez pas suivre l'atelier, vous pouvez cloner la version finale à partir du dépôt. Veuillez noter que les pods et .xcworkspace ne sont pas présents dans le dépôt. Par conséquent, avant de passer à l'étape suivante, veillez à exécuter "pod install" du même répertoire que .xcproject.
  2. Ouvrez ImageClassifierStep1.xcworkspace dans Xcode. Notez que vous devez utiliser le projet .xcworkspace et non le projet .xcproject, car vous avez regroupé ML Kit à l'aide de pods, que l'espace de travail chargera.

Pour la suite de cet atelier, j'exécuterai l'application dans le simulateur d'iPhone, qui devrait être compatible avec les cibles de compilation de l'atelier de programmation. Si vous souhaitez utiliser votre propre appareil, vous devrez peut-être modifier la cible de compilation dans les paramètres de votre projet pour qu'elle corresponde à votre version d'iOS.

Exécutez-le. Vous obtenez un résultat semblable à celui-ci:

9e151ed18f99fb98.png

Notez les classifications très génériques (pétale, fleur, ciel). Le modèle que vous avez créé dans l'atelier de programmation précédent a été entraîné pour détecter cinq variétés de fleurs, dont celle-ci : une marguerite.

Dans la suite de cet atelier de programmation, vous verrez comment mettre à niveau votre application avec le modèle personnalisé.

7. Utiliser les pods d'étiqueteurs d'images personnalisés du ML Kit

La première application a utilisé un fichier pod pour obtenir le modèle et les bibliothèques de base de l'étiqueteur d'images ML Kit. Vous devrez le mettre à jour pour utiliser les bibliothèques d'étiquetage d'images personnalisées.

  1. Recherchez le fichier podfile dans le répertoire de votre projet. Ouvrez-le et vous verrez quelque chose qui ressemble à ceci:
platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end
  1. Remplacez la déclaration de pod ImageLabeling par ImageLabelingCustom, comme ceci:
platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabelingCustom'
end
  1. Lorsque vous avez terminé, utilisez le terminal pour accéder au répertoire contenant le fichier Podfile (ainsi que le fichier .xcworkspace), puis exécutez pod install.

bb5d78eb7c7ab975.png

Après quelques instants, les bibliothèques MLKitImageLabeling seront supprimées et les bibliothèques personnalisées seront ajoutées. Vous pouvez maintenant ouvrir votre .xcworkspace pour modifier votre code.

8. Ajouter le modèle TFLite à Xcode

Dans l'atelier de programmation précédent, vous avez créé un modèle personnalisé et vous l'avez téléchargé sous le nom model.tflite. Si vous ne l'avez pas à portée de main, revenez en arrière et exécutez cet atelier de programmation, ou consultez le code Colab sur cette page. Si vous n'avez pas accès à Google Colab, le notebook est disponible via ce lien.

  1. Ouvrez l'espace de travail dans Xcode et faites glisser le fichier model.tflite vers votre projet. Il doit se trouver dans le même dossier que vos autres fichiers, par exemple ViewController.swift ou Main.storyboard.
  2. Une boîte de dialogue contenant des options pour ajouter le fichier s'affiche. Assurez-vous que l'option Ajouter aux cibles est sélectionnée, sinon le modèle ne sera pas regroupé avec l'application lorsqu'elle sera déployée sur un appareil.

Notez que l'option "Ajouter aux cibles" aura "ImageClassifierStep1" si vous êtes parti de cette entrée et poursuivez cet atelier étape par étape, ou "ImageClassifierStep2" (comme indiqué) si vous êtes passé au code terminé.

5b6a7f40c73f0f1f.png

Vous pourrez ainsi charger le modèle. Vous découvrirez comment procéder à l'étape suivante.

9. Mettre à jour votre code pour le modèle personnalisé

  1. Ouvrez votre fichier ViewController.swift. Il se peut qu'une erreur s'affiche sur la page en haut du fichier. En effet, vous avez supprimé les bibliothèques d'étiquetage d'images génériques lors de la mise à jour du fichier pod. N'hésitez pas à supprimer cette ligne et à la mettre à jour comme suit:
import MLKitVision
import MLKit
import MLKitImageLabelingCommon
import MLKitImageLabelingCustom

Il peut être facile de les lire rapidement et de penser qu'elles répètent le même code ! Mais c'est « commun » et "Personnalisée" à la fin !

  1. Vous allez maintenant charger le modèle personnalisé que vous avez ajouté à l'étape précédente. Recherchez la fonction getLabels(). Sous la ligne visionImage.orientation = image.imageOrientation, ajoutez les lignes suivantes:
// Add this code to use a custom model
let localModelFilePath = Bundle.main.path(forResource: "model", ofType: "tflite")
let localModel = LocalModel(path: localModelFilePath!)
  1. Recherchez le code permettant de spécifier les options de l'ImageLabeler générique. Cela génère probablement une erreur puisque ces bibliothèques ont été supprimées:
let options = ImageLabelerOptions()

Remplacez-la par ce code pour utiliser un CustomImageLabelerOptions et spécifier le modèle local:

let options = CustomImageLabelerOptions(localModel: localModel)

...et c'est tout ! Essayez d'exécuter votre application maintenant. Si vous essayez de classer l'image, cela devrait être plus précis. Cela devrait vous permettre de comprendre qu'il s'agit d'une marguerite très probable !

238cd21748a97cf4.png

Imaginons que vous ajoutiez une deuxième image de fleur et que vous reexécutiez avec cette image:

75f3970a6b509bfe.png

L'application a bien détecté que cette image correspondait au libellé "roses".

10. Félicitations !

Vous êtes passé de la création d'une application qui utilisait un modèle générique pour reconnaître le contenu d'une image. Vous avez créé votre propre modèle de ML pour reconnaître des éléments spécifiques, comme des fleurs, puis vous avez mis à jour votre application pour utiliser votre modèle personnalisé.

L'application qui en résulte est bien sûr très limitée, car elle repose sur des composants Image groupés. Cependant, la partie ML fonctionne bien. Vous pouvez, par exemple, utiliser l'appareil photo AndroidX pour prendre des images d'un flux en direct et les classer afin de voir quelles fleurs votre téléphone reconnaît !

Les possibilités sont infinies, et si vous possédez vos propres données sur autre chose que les fleurs, vous disposez des bases nécessaires pour créer une application qui les reconnaît à l'aide de la vision par ordinateur. Ce ne sont que les premières étapes vers un monde beaucoup plus large et nous espérons qu'elles vous ont plu !