ML Kit (reconnaître les caractéristiques de texte et de visages) – iOS

1. Introduction

ML Kit est un SDK mobile qui intègre l'expertise de Google en matière de machine learning dans les applications Android et iOS, le tout dans un package puissant et simple d'utilisation. Que vous soyez débutant ou expérimenté en machine learning, vous pouvez facilement implémenter la fonctionnalité dont vous avez besoin en quelques lignes de code. Pour commencer, vous n'avez pas besoin d'avoir des connaissances approfondies sur les réseaux de neurones ni sur l'optimisation des modèles.

Comment ça marche ?

ML Kit permet d'appliquer facilement des techniques de machine learning à vos applications en rassemblant dans un seul SDK les technologies de machine learning de Google, telles que Mobile Vision et TensorFlow Lite. Que vous ayez besoin de la puissance des fonctionnalités en temps réel des modèles sur l'appareil de Mobile Vision ou de la flexibilité des modèles de classification d'images TensorFlow Lite personnalisés, ML Kit vous permet de le faire en quelques lignes de code.

Cet atelier de programmation vous explique comment créer votre propre application iOS capable de détecter automatiquement du texte et des traits du visage dans une image.

Objectif de cet atelier

Dans cet atelier de programmation, vous allez créer une application iOS avec ML Kit. Cette application pourra :

  • Utiliser l'API ML Kit Text Recognition pour détecter du texte dans des images
  • Utiliser l'API ML Kit Face Detection pour identifier les traits du visage dans les images

Image de Grace Hopper présentant l'API ML Kit Face RecognitionImage d'un panneau sur l'herbe montrant l'API de reconnaissance de texte

Points abordés

  • Comment utiliser le SDK ML Kit pour ajouter facilement des fonctionnalités avancées de machine learning (apprentissage automatique) telles que la reconnaissance de texte et la détection des caractéristiques du visage à n'importe quelle application iOS

Prérequis

  • Une version récente de Xcode (v12.4 ou ultérieure)
  • Simulateur iOS ou appareil iOS physique équipé d'iOS 10.0 ou version ultérieure
  • ML Kit n'est compatible qu'avec les deux architectures 64 bits suivantes : x86_64 et arm64.
  • L'exemple de code
  • Connaissances de base du développement iOS en Swift
  • Connaissances de base des modèles de machine learning

Cet atelier de programmation est consacré à ML Kit. Les concepts et les blocs de codes non pertinents ne sont pas abordés, et vous sont fournis afin que vous puissiez simplement les copier et les coller.

2. Configuration

Télécharger le code

Cliquez sur le lien ci-dessous pour télécharger l'ensemble du code de cet atelier de programmation :

Décompressez le fichier ZIP téléchargé. Cette action crée un dossier racine (mlkit-ios-codelab) contenant toutes les ressources dont vous aurez besoin. Pour cet atelier de programmation, vous n'aurez besoin que des ressources du sous-répertoire vision.

Le sous-répertoire vision du dépôt mlkit-ios-codelab contient deux répertoires :

  • android_studio_folder.pngstarter : code de démarrage sur lequel s'appuie cet atelier de programmation.
  • android_studio_folder.pngfinal : code complet de l'exemple d'application finalisée.

Ajouter les dépendances pour ML Kit avec CocoaPods

CocoaPods permet d'ajouter les dépendances ML Kit à votre application. Si CocoaPods n'est pas installé sur votre ordinateur, consultez les instructions d'installation ici. Une fois installé, ouvrez Podfile dans votre éditeur préféré et ajoutez ML Kit en tant que dépendances :

Podfile

platform :ios, '10.0'
use_frameworks!

pod 'GoogleMLKit/FaceDetection'
pod 'GoogleMLKit/TextRecognition'

target 'MLKit-codelab' do
end

Installer les CocoaPods ML Kit

Pour vous assurer que toutes les dépendances sont disponibles pour votre application, vous devez utiliser la ligne de commande pour installer les CocoaPods ML Kit.

Ligne de commande

# Make sure you are in the root of your app
pod install
xed .

3. Exécuter l'application de démarrage

Vous êtes maintenant prêt à exécuter l'application pour la première fois. Cliquez sur 98205811bbed9d74.pngRun (Exécuter) dans Xcode pour compiler l'application et l'exécuter sur le simulateur iOS.

L'application doit se lancer sur votre simulateur. À ce stade, vous devriez voir une mise en page de base avec un sélecteur qui vous permet de choisir entre deux images. Dans la section suivante, vous allez ajouter la reconnaissance de texte à votre application pour identifier le texte dans les images.

4. Ajouter la reconnaissance de texte sur l'appareil

Dans cette étape, nous allons ajouter à votre application une fonctionnalité permettant de reconnaître le texte dans les images.

Importer le module MLVision

Vérifiez que les importations suivantes existent dans votre classe ViewController.

ViewController.swift

import MLKit

Créer un VisionTextRecognizer

Ajoutez les propriétés lazy suivantes à votre classe ViewController.

ViewController.swift

private lazy var textRecognizer = TextRecognizer.textRecognizer()

Configurer et exécuter la reconnaissance de texte sur un appareil pour une image

Ajoutez les éléments suivants à la méthode runTextRecognition de la classe ViewController :

ViewController.swift

func runTextRecognition(with image: UIImage) {
  let visionImage = VisionImage(image: image)
  textRecognizer.process(visionImage) { features, error in
    self.processResult(from: features, error: error)
  }
}

Le code ci-dessus configure le détecteur de reconnaissance de texte et appelle la fonction processResult(from:, error:) avec la réponse.

Traiter la réponse de reconnaissance de texte

Ajoutez le code suivant à processResult dans la classe ViewController pour analyser les résultats et les afficher dans votre application.

ViewController.swift

 func processResult(from text: Text?, error: Error?) {
    removeDetectionAnnotations()
    guard error == nil, let text = text else {
      let errorString = error?.localizedDescription ?? Constants.detectionNoResultsMessage
      print("Text recognizer failed with error: \(errorString)")
      return
    }

    let transform = self.transformMatrix()

    // Blocks.
    for block in text.blocks {
      drawFrame(block.frame, in: .purple, transform: transform)

      // Lines.
      for line in block.lines {
        drawFrame(line.frame, in: .orange, transform: transform)

        // Elements.
        for element in line.elements {
          drawFrame(element.frame, in: .green, transform: transform)

          let transformedRect = element.frame.applying(transform)
          let label = UILabel(frame: transformedRect)
          label.text = element.text
          label.adjustsFontSizeToFitWidth = true
          self.annotationOverlayView.addSubview(label)
        }
      }
    }
  }

Exécuter l'application sur le simulateur

Cliquez à présent sur Run (Exécuter) 98205811bbed9d74.png dans Xcode. Une fois l'application chargée, assurez-vous que Image 1 est sélectionné dans le sélecteur, puis cliquez sur le bouton Find Text.

Votre application devrait maintenant ressembler à l'image ci-dessous, affichant les résultats de la reconnaissance de texte et les cadres de sélection superposés à l'image d'origine.

7269fd8fcb4dc793.png

Photo : Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0

Félicitations, vous venez d'ajouter la reconnaissance de texte sur l'appareil à votre application à l'aide de ML Kit ! La reconnaissance de texte sur l'appareil est idéale pour de nombreux cas d'utilisation, car elle fonctionne même lorsque votre application n'est pas connectée à Internet. Elle est également suffisamment rapide pour être utilisée sur des images fixes ainsi que sur des images vidéo en direct.

5. Ajouter la détection des contours du visage sur l'appareil

Dans cette étape, nous allons ajouter à votre application une fonctionnalité permettant de détecter les contours des visages dans les images.

Créer un FaceDetector

Ajoutez les propriétés lazy suivantes à votre classe ViewController.

ViewController.swift

private lazy var faceDetectorOption: FaceDetectorOptions = {
  let option = FaceDetectorOptions()
  option.contourMode = .all
  option.performanceMode = .fast
  return option
}()
private lazy var faceDetector = FaceDetector.faceDetector(options: faceDetectorOption)

Configurer et exécuter la détection des contours du visage sur un appareil pour une image

Ajoutez les éléments suivants à la méthode runFaceContourDetection de la classe ViewController :

ViewController.swift

  func runFaceContourDetection(with image: UIImage) {
    let visionImage = VisionImage(image: image)
    faceDetector.process(visionImage) { features, error in
      self.processResult(from: features, error: error)
    }
  }

Le code ci-dessus configure le détecteur de reconnaissance de texte et appelle la fonction processResult(from:, error:) avec la réponse.

Traiter la réponse du détecteur de visages

Ajoutez le code suivant à processResult dans la classe ViewController pour analyser les résultats et les afficher dans votre application.

ViewController.swift

  func processResult(from faces: [Face]?, error: Error?) {
    removeDetectionAnnotations()
    guard let faces = faces else {
      return
    }

    for feature in faces {
      let transform = self.transformMatrix()
      let transformedRect = feature.frame.applying(transform)
      UIUtilities.addRectangle(
        transformedRect,
        to: self.annotationOverlayView,
        color: UIColor.green
      )
      self.addContours(forFace: feature, transform: transform)
    }
  }

Enfin, ajoutez la méthode d'assistance addContours dans la classe ViewController pour dessiner les points de contour.

ViewController.swift

 private func addContours(forFace face: Face, transform: CGAffineTransform) {
    // Face
    if let faceContour = face.contour(ofType: .face) {
      for point in faceContour.points {
        drawPoint(point, in: .blue, transform: transform)
      }
    }

    // Eyebrows
    if let topLeftEyebrowContour = face.contour(ofType: .leftEyebrowTop) {
      for point in topLeftEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let bottomLeftEyebrowContour = face.contour(ofType: .leftEyebrowBottom) {
      for point in bottomLeftEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let topRightEyebrowContour = face.contour(ofType: .rightEyebrowTop) {
      for point in topRightEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }
    if let bottomRightEyebrowContour = face.contour(ofType: .rightEyebrowBottom) {
      for point in bottomRightEyebrowContour.points {
        drawPoint(point, in: .orange, transform: transform)
      }
    }

    // Eyes
    if let leftEyeContour = face.contour(ofType: .leftEye) {
      for point in leftEyeContour.points {
        drawPoint(point, in: .cyan, transform: transform)
      }
    }
    if let rightEyeContour = face.contour(ofType: .rightEye) {
      for point in rightEyeContour.points {
        drawPoint(point, in: .cyan, transform: transform)
      }
    }

    // Lips
    if let topUpperLipContour = face.contour(ofType: .upperLipTop) {
      for point in topUpperLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let bottomUpperLipContour = face.contour(ofType: .upperLipBottom) {
      for point in bottomUpperLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let topLowerLipContour = face.contour(ofType: .lowerLipTop) {
      for point in topLowerLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }
    if let bottomLowerLipContour = face.contour(ofType: .lowerLipBottom) {
      for point in bottomLowerLipContour.points {
        drawPoint(point, in: .red, transform: transform)
      }
    }

    // Nose
    if let noseBridgeContour = face.contour(ofType: .noseBridge) {
      for point in noseBridgeContour.points {
        drawPoint(point, in: .yellow, transform: transform)
      }
    }
    if let noseBottomContour = face.contour(ofType: .noseBottom) {
      for point in noseBottomContour.points {
        drawPoint(point, in: .yellow, transform: transform)
      }
    }
  }

Exécuter l'application sur le simulateur

Cliquez à présent sur Run (Exécuter) 98205811bbed9d74.png dans Xcode. Une fois l'application chargée, assurez-vous que Image 2 est sélectionné dans le sélecteur, puis cliquez sur le bouton Find Face Contour. Votre application devrait maintenant ressembler à l'image ci-dessous, qui montre les contours du visage de Grace Hopper sous forme de points superposés à l'image d'origine.

a5169b50dafbcb2f.png

Félicitations ! Vous venez d'ajouter la détection des contours du visage sur l'appareil à votre application. La détection des contours du visage avec ML Kit sur l'appareil est idéale pour de nombreux cas d'utilisation, car elle fonctionne même lorsque votre application n'est pas connectée à Internet et est suffisamment rapide pour être utilisée sur des images fixes ainsi que sur des images vidéo en direct.

6. Félicitations !

Vous avez utilisé ML Kit pour ajouter facilement des fonctionnalités de machine learning avancées à votre application.

Points abordés

  • Ajouter ML Kit à votre application iOS
  • Utiliser la reconnaissance de texte sur l'appareil dans ML Kit pour trouver du texte dans des images
  • Utiliser la reconnaissance faciale sur l'appareil dans ML Kit pour identifier les caractéristiques faciales dans les images

Étapes suivantes

  • Utilisez ML Kit dans votre propre application iOS.

En savoir plus

  • https://g.co/mlkit