Text- und Gesichtsfunktionen erkennen ML Kit: iOS

1. Einführung

ML Kit ist ein mobiles SDK, mit dem Sie die Technologie für das maschinelle Lernen von Google in einem leistungsstarken und dennoch benutzerfreundlichen Paket einfach auf Android- und iOS-Apps anwenden können. Ganz gleich, ob Sie neu im Bereich des maschinellen Lernens sind oder bereits Erfahrung haben – Sie können die benötigten Funktionen ganz einfach mit nur wenigen Codezeilen implementieren. Sie benötigen kein tiefes Wissen über neuronale Netze oder Modelloptimierung, um loszulegen.

Wie funktioniert das?

Mit ML Kit können Sie ML-Techniken ganz einfach in Ihre Apps einbinden, da die ML-Technologien von Google wie Mobile Vision und TensorFlow Lite in einem einzigen SDK zusammengefasst sind. Ganz gleich, ob Sie die Leistungsfähigkeit der Echtzeitfunktionen der On-Device-Modelle von Mobile Vision oder die Flexibilität benutzerdefinierter TensorFlow Lite-Bildklassifizierungsmodelle benötigen – mit ML Kit ist das mit nur wenigen Codezeilen möglich.

In diesem Codelab erfahren Sie, wie Sie eine eigene iOS-App erstellen, die automatisch Text und Gesichtsmerkmale in einem Bild erkennen kann.

Überblick

In diesem Codelab erstellen Sie eine iOS-App mit dem ML Kit. Mit der Anwendung können Sie Folgendes tun:

Mit der ML Kit Text Recognition API Text in Bildern erkennen
Mit der ML Kit Face Detection API Gesichtsmerkmale in Bildern erkennen

Bild von Grace Hopper, die die Face Recognition API des ML Kit demonstriert Bild eines Schilds auf einer Wiese, das die Texterkennungs-API demonstriert

Lerninhalte

So fügen Sie mit dem ML Kit SDK ganz einfach erweiterte Funktionen für maschinelles Lernen wie Texterkennung und Gesichtserkennung in jede iOS-App ein

Voraussetzungen

Eine aktuelle Version von Xcode (Version 12.4 oder höher)
iOS-Simulator oder physisches iOS-Gerät mit iOS 10.0 oder höher
ML Kit unterstützt nur diese beiden 64-Bit-Architekturen: x86_64 und arm64.
Der Beispielcode
Grundkenntnisse der iOS-Entwicklung in Swift
Grundlegendes Verständnis von Modellen für maschinelles Lernen

In diesem Codelab geht es um ML Kit. Auf irrelevante Konzepte wird nicht genauer eingegangen und entsprechende Codeblöcke können Sie einfach kopieren und einfügen.

2. Einrichtung

Code herunterladen

Klicken Sie auf den folgenden Link, um den gesamten Code für dieses Codelab herunterzuladen:

Entpacken Sie die heruntergeladene ZIP-Datei. Dadurch wird ein Stammordner (mlkit-ios-codelab) mit allen erforderlichen Ressourcen erstellt. Für dieses Codelab benötigen Sie nur die Ressourcen im Unterverzeichnis vision.

Das Unterverzeichnis vision im Repository mlkit-ios-codelab enthält zwei Verzeichnisse:

starter: Der Startcode, auf dem Sie in diesem Codelab aufbauen.
final: Der vollständige Code der fertigen Beispiel-App.

Abhängigkeiten für ML Kit mit CocoaPods hinzufügen

CocoaPods wird verwendet, um die ML Kit-Abhängigkeiten zu Ihrer App hinzuzufügen. Wenn Sie CocoaPods noch nicht auf Ihrem Computer installiert haben, finden Sie die Installationsanleitung hier. Öffnen Sie nach der Installation die Podfile-Datei in Ihrem bevorzugten Editor und fügen Sie ML Kit als Abhängigkeiten hinzu:

Podfile

platform :ios, '10.0'
use_frameworks!

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

target 'MLKit-codelab' do
end

ML Kit-CocoaPods installieren

Damit alle Abhängigkeiten für Ihre App verfügbar sind, sollten Sie die ML Kit-Cocoa-Pods über die Befehlszeile installieren.

Befehlszeile

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

3. Start-App ausführen

Jetzt können Sie die App zum ersten Mal ausführen. Klicken Sie in Xcode auf Run (Ausführen), um die App zu kompilieren und im iOS-Simulator auszuführen.

Die App sollte auf dem Simulator gestartet werden. An dieser Stelle sollte ein einfaches Layout mit einer Auswahl angezeigt werden, mit der Sie zwischen zwei Bildern wählen können. Im nächsten Abschnitt fügen Sie Ihrer App die Texterkennung hinzu, um Text in den Bildern zu erkennen.

4. Texterkennung auf dem Gerät hinzufügen

In diesem Schritt fügen wir Ihrer App Funktionen hinzu, mit denen Text in Bildern erkannt werden kann.

MLVision-Modul importieren

Prüfen Sie, ob die folgenden Importe für Ihre ViewController-Klasse vorhanden sind.

ViewController.swift

import MLKit

VisionTextRecognizer erstellen

Fügen Sie der Klasse ViewController die folgenden Lazy-Properties hinzu.

ViewController.swift

private lazy var textRecognizer = TextRecognizer.textRecognizer()

Texterkennung auf dem Gerät für ein Bild einrichten und ausführen

Fügen Sie der Methode runTextRecognition der Klasse ViewController Folgendes hinzu:

ViewController.swift

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

Der Code oben konfiguriert den Detektor für die Texterkennung und ruft die Funktion processResult(from:, error:) mit der Antwort auf.

Antwort für die Texterkennung verarbeiten

Fügen Sie der Datei processResult in der Klasse ViewController den folgenden Code hinzu, um die Ergebnisse zu parsen und in Ihrer App anzuzeigen.

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

App im Simulator ausführen

Klicken Sie jetzt in Xcode auf Ausführen. Wenn die App geladen wurde, achten Sie darauf, dass in der Auswahl Image 1 ausgewählt ist, und klicken Sie auf die Schaltfläche Find Text.

Ihre App sollte jetzt wie im Bild unten aussehen. Die Texterkennungsergebnisse und Begrenzungsrahmen werden über das Originalbild gelegt.

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

Sie haben Ihrer App mit ML Kit gerade die Texterkennung auf dem Gerät hinzugefügt. Die On-Device-Texterkennung eignet sich für viele Anwendungsfälle, da sie auch dann funktioniert, wenn Ihre App keine Internetverbindung hat. Außerdem ist sie schnell genug, um sowohl für Standbilder als auch für Live-Videoframes verwendet zu werden.

5. On-Device-Erkennung von Gesichtskonturen hinzufügen

In diesem Schritt fügen wir Ihrer App Funktionen hinzu, mit denen die Konturen von Gesichtern auf Bildern erkannt werden können.

FaceDetector erstellen

Fügen Sie der Klasse ViewController die folgenden Lazy-Properties hinzu.

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)

On-Device-Gesichtskonturerkennung für ein Bild einrichten und ausführen

Fügen Sie der Methode runFaceContourDetection der Klasse ViewController Folgendes hinzu:

ViewController.swift

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

Der Code oben konfiguriert den Detektor für die Texterkennung und ruft die Funktion processResult(from:, error:) mit der Antwort auf.

Antwort des Gesichtserkennungsmoduls verarbeiten

Fügen Sie der Datei processResult in der Klasse ViewController den folgenden Code hinzu, um die Ergebnisse zu parsen und in Ihrer App anzuzeigen.

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

Fügen Sie schließlich die Hilfsmethode addContours in der Klasse ViewController hinzu, um die Konturpunkte zu zeichnen.

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

App im Simulator ausführen

Klicken Sie jetzt in Xcode auf Ausführen. Wenn die App geladen wurde, achten Sie darauf, dass in der Auswahl Image 2 ausgewählt ist, und klicken Sie auf die Schaltfläche Find Face Contour. Ihre App sollte jetzt wie im Bild unten aussehen. Die Konturen des Gesichts von Grace Hopper werden als Punkte über dem Originalbild dargestellt.

Herzlichen Glückwunsch! Sie haben Ihrer App gerade die Gesichtskonturerkennung auf dem Gerät hinzugefügt. Die Gesichtskonturerkennung auf dem Gerät mit ML Kit eignet sich hervorragend für viele Anwendungsfälle, da sie auch dann funktioniert, wenn Ihre App keine Internetverbindung hat. Außerdem ist sie schnell genug, um sowohl für Standbilder als auch für Live-Videoframes verwendet zu werden.

6. Glückwunsch!

Sie haben ML Kit verwendet, um Ihrer App ganz einfach erweiterte Funktionen für maschinelles Lernen hinzuzufügen.

Behandelte Themen

ML Kit zu Ihrer iOS-App hinzufügen
Texterkennung auf dem Gerät in ML Kit verwenden, um Text in Bildern zu finden
Gesichtsmerkmale in Bildern mit der On-Device-Gesichtserkennung in ML Kit erkennen

Nächste Schritte

ML Kit in Ihrer eigenen iOS-App verwenden

Weitere Informationen

https://g.co/mlkit