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 par le biais d'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. Il n'est pas nécessaire d'avoir une connaissance approfondie des réseaux neuronaux ni de l'optimisation des modèles pour commencer.

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 le texte et les 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 de reconnaissance de texte ML Kit pour détecter le texte dans les images ;
  • utiliser l'API de détection des visages ML Kit pour identifier les traits du visage dans les images.

Image de Grace Hopper démontrant l'API de reconnaissance faciale ML KitImage 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, telles que la reconnaissance de texte et la détection des traits du visage, à n'importe quelle application iOS

Prérequis

  • Une version récente de Xcode (12.4 ou ultérieure)
  • Un simulateur iOS ou un appareil iOS physique équipé d'iOS 10.0 ou version ultérieure
  • ML Kit n'est compatible qu'avec ces deux architectures 64 bits : x86_64 et arm64
  • L'exemple de code
  • Connaissances de base en développement iOS avec Swift
  • Connaissances de base sur les 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 opération 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 vous vous appuierez dans cet atelier de programmation.
  • android_studio_folder.pngfinal : code complet de l'exemple d'application finale.

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 machine, consultez les instructions d'installation ici. Une fois installé, ouvrez le fichier Podfile dans l'éditeur de votre choix et ajoutez ML Kit en tant que dépendance :

Podfile

platform :ios, '10.0'
use_frameworks!

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

target 'MLKit-codelab' do
end

Installer les pods Cocoa de 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 pods Cocoa de 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 devrait 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 ajouterez 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 une fonctionnalité à votre application pour 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 l'appareil dans 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 98205811bbed9d74.pngRun (Exécuter) dans Xcode. Une fois l'application chargée, assurez-vous que Image 1 est sélectionnée dans le sélecteur, puis cliquez sur le bouton Find Text (Rechercher du texte).

Votre application devrait maintenant ressembler à l'image ci-dessous, affichant les résultats de la reconnaissance de texte et les cadres de délimitation 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 et qu'elle est 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 une fonctionnalité à votre application pour 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 l'appareil dans 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 98205811bbed9d74.pngRun (Exécuter) dans Xcode. Une fois l'application chargée, assurez-vous que Image 2 est sélectionnée dans le sélecteur, puis cliquez sur le bouton Find Face Contour (Rechercher le contour du visage). Votre application devrait maintenant ressembler à l'image ci-dessous, affichant 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 à l'aide de ML Kit. La détection des contours du visage 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 qu'elle 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 avancées de machine learning à votre application.

Points abordés

  • Comment ajouter ML Kit à votre application iOS
  • Comment utiliser la reconnaissance de texte sur l'appareil dans ML Kit pour trouver du texte dans les images
  • Comment utiliser la reconnaissance faciale sur l'appareil dans ML Kit pour identifier les traits du visage dans les images

Étapes suivantes

  • Utilisez ML Kit dans votre propre application iOS.

En savoir plus

  • https://g.co/mlkit