Text in Bildern mit Cloud Vision sicher mit Firebase Auth und Functions auf Apple-Plattformen erkennen

Wenn Sie eine Google Cloud API über Ihre Anwendung aufrufen möchten, müssen Sie eine zwischengeschaltete REST API erstellen, die die Autorisierung übernimmt und geheime Werte wie API-Schlüssel schützt. Anschließend müssen Sie Code in Ihrer mobilen App schreiben, um sich bei diesem Zwischendienst zu authentifizieren und mit ihm zu kommunizieren.

Eine Möglichkeit, diese REST API zu erstellen, ist die Verwendung von Firebase Authentication und Functions. Dadurch erhalten Sie ein verwaltetes, serverloses Gateway zu Google Cloud APIs, das die Authentifizierung übernimmt und von Ihrer mobilen App mit vordefinierten SDKs aufgerufen werden kann.

In dieser Anleitung wird gezeigt, wie Sie mit dieser Methode die Cloud Vision API über Ihre Anwendung aufrufen. Mit dieser Methode können alle authentifizierten Nutzer über Ihr Cloud-Projekt auf die kostenpflichtigen Cloud Vision-Dienste zugreifen. Überlegen Sie daher, ob dieser Authentifizierungsmechanismus für Ihren Anwendungsfall ausreicht, bevor Sie fortfahren.

Hinweis

Projekt konfigurieren

Wenn Sie Firebase noch nicht zu Ihrer App hinzugefügt haben, folgen Sie der Anleitung im Startleitfaden.

Verwenden Sie Swift Package Manager, um Firebase-Abhängigkeiten zu installieren und zu verwalten.

  1. Öffnen Sie Ihr App-Projekt und gehen Sie in Xcode zu File > Add Packages (Datei > Pakete hinzufügen).
  2. Fügen Sie bei entsprechender Aufforderung das Firebase Apple Platforms SDK-Repository hinzu:
  3.   https://github.com/firebase/firebase-ios-sdk.git
  4. Wählen Sie die Bibliothek Firebase ML aus.
  5. Fügen Sie das Flag -ObjC im Abschnitt Other Linker Flags (Andere Linker-Flags) der Build-Einstellungen Ihres Ziels hinzu.
  6. Wenn Sie fertig, beginnt Xcode automatisch, Ihre Abhängigkeiten im Hintergrund aufzulösen und herunterzuladen.

Führe als Nächstes die Einrichtung in der App durch:

  1. Importieren Sie Firebase in Ihre App:

    Swift

    import FirebaseMLModelDownloader

    Objective-C

    @import FirebaseMLModelDownloader;

Nur noch ein paar Konfigurationsschritte und es kann losgehen:

  1. Wenn Sie cloudbasierte APIs für Ihr Projekt noch nicht aktiviert haben, tun Sie dies jetzt:

    1. Öffnen Sie in der Firebase Console die Seite Firebase ML-APIs.
    2. Wenn Sie Ihr Projekt noch nicht auf das Blaze-Preismodell (Pay as you go) umgestellt haben, klicken Sie auf Upgrade, um dies zu tun. Sie werden nur dann zum Upgrade aufgefordert, wenn Ihr Projekt nicht das Blaze-Preismodell verwendet.

      Nur Projekte im Blaze-Preismodell können cloudbasierte APIs verwenden.

    3. Wenn cloudbasierte APIs noch nicht aktiviert sind, klicken Sie auf Cloudbasierte APIs aktivieren.
  2. Konfigurieren Sie Ihre vorhandenen Firebase API-Schlüssel so, dass der Zugriff auf die Cloud Vision API nicht zulässig ist:
    1. Öffnen Sie in der Cloud Console die Seite Anmeldedaten.
    2. Öffnen Sie für jeden API-Schlüssel in der Liste die Bearbeitungsansicht und fügen Sie im Abschnitt „Schlüsseleinschränkungen“ alle verfügbaren APIs außer der Cloud Vision API zur Liste hinzu.

Aufrufbare Funktion bereitstellen

Als Nächstes stellen Sie die Cloud Functions-Funktion bereit, die Sie als Brücke zwischen Ihrer Anwendung und der Cloud Vision API verwenden. Das Repository functions-samples enthält ein Beispiel, das Sie verwenden können.

Standardmäßig können nur authentifizierte Nutzer Ihrer App über diese Funktion auf die Cloud Vision API zugreifen. Sie können die Funktion für unterschiedliche Anforderungen ändern.

So stellen Sie die Funktion bereit:

  1. Klonen Sie das functions-samples-Repository oder laden Sie es herunter und wechseln Sie in das Verzeichnis Node-1st-gen/vision-annotate-image:
    git clone https://github.com/firebase/functions-samples
    cd Node-1st-gen/vision-annotate-image
    
  2. Installieren Sie die Abhängigkeiten:
    cd functions
    npm install
    cd ..
  3. Wenn Sie die Firebase CLI noch nicht haben, installieren Sie sie.
  4. Initialisieren Sie ein Firebase-Projekt im Verzeichnis vision-annotate-image. Wählen Sie bei Aufforderung Ihr Projekt aus der Liste aus.
    firebase init
  5. Die Funktion bereitstellen:
    firebase deploy --only functions:annotateImage

Firebase Auth zu Ihrer App hinzufügen

Die oben bereitgestellte aufrufbare Funktion lehnt alle Anfragen von nicht authentifizierten Nutzern Ihrer App ab. Falls noch nicht geschehen, müssen Sie Firebase Auth zu Ihrer App hinzufügen.

Erforderliche Abhängigkeiten zur App hinzufügen

Verwenden Sie Swift Package Manager, um die Cloud Functions for Firebase-Bibliothek zu installieren.

Jetzt können Sie mit der Texterkennung in Bildern beginnen.

1. Eingabebild vorbereiten

Damit Cloud Vision aufgerufen werden kann, muss das Bild als base64-codierter String formatiert sein. So verarbeiten Sie eine UIImage:

Swift

guard let imageData = uiImage.jpegData(compressionQuality: 1.0) else { return }
let base64encodedImage = imageData.base64EncodedString()

Objective-C

NSData *imageData = UIImageJPEGRepresentation(uiImage, 1.0f);
NSString *base64encodedImage =
  [imageData base64EncodedStringWithOptions:NSDataBase64Encoding76CharacterLineLength];

2. Aufrufbare Funktion zur Texterkennung aufrufen

Wenn Sie Sehenswürdigkeiten in einem Bild erkennen möchten, rufen Sie die aufrufbare Funktion auf und übergeben Sie eine JSON-Cloud Vision-Anfrage.

  1. Initialisieren Sie zuerst eine Instanz von Cloud Functions:

    Swift

    lazy var functions = Functions.functions()
    

    Objective-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. Erstellen Sie die Anfrage. Die Cloud Vision API unterstützt zwei Typen der Texterkennung: TEXT_DETECTION und DOCUMENT_TEXT_DETECTION. Informationen zum Unterschied zwischen den beiden Anwendungsfällen finden Sie in der Cloud Vision OCR-Dokumentation.

    Swift

    let requestData = [
      "image": ["content": base64encodedImage],
      "features": ["type": "TEXT_DETECTION"],
      "imageContext": ["languageHints": ["en"]]
    ]
    

    Objective-C

    NSDictionary *requestData = @{
      @"image": @{@"content": base64encodedImage},
      @"features": @{@"type": @"TEXT_DETECTION"},
      @"imageContext": @{@"languageHints": @[@"en"]}
    };
    
  3. Rufen Sie abschließend die Funktion auf:

    Swift

    do {
      let result = try await functions.httpsCallable("annotateImage").call(requestData)
      print(result)
    } catch {
      if let error = error as NSError? {
        if error.domain == FunctionsErrorDomain {
          let code = FunctionsErrorCode(rawValue: error.code)
          let message = error.localizedDescription
          let details = error.userInfo[FunctionsErrorDetailsKey]
        }
        // ...
      }
    }
    

    Objective-C

    [[_functions HTTPSCallableWithName:@"annotateImage"]
                              callWithObject:requestData
                                  completion:^(FIRHTTPSCallableResult * _Nullable result, NSError * _Nullable error) {
            if (error) {
              if ([error.domain isEqualToString:@"com.firebase.functions"]) {
                FIRFunctionsErrorCode code = error.code;
                NSString *message = error.localizedDescription;
                NSObject *details = error.userInfo[@"details"];
              }
              // ...
            }
            // Function completed succesfully
            // Get information about labeled objects
    
          }];
    

3. Text aus Blöcken mit erkanntem Text extrahieren

Wenn der Texterkennungsvorgang erfolgreich ist, wird im Ergebnis der Aufgabe eine JSON-Antwort vom Typ BatchAnnotateImagesResponse zurückgegeben. Die Textanmerkungen finden Sie im Objekt fullTextAnnotation.

Sie können den erkannten Text als String im Feld text abrufen. Beispiel:

Swift

let annotation = result.flatMap { $0.data as? [String: Any] }
    .flatMap { $0["fullTextAnnotation"] }
    .flatMap { $0 as? [String: Any] }
guard let annotation = annotation else { return }

if let text = annotation["text"] as? String {
  print("Complete annotation: \(text)")
}

Objective-C

NSDictionary *annotation = result.data[@"fullTextAnnotation"];
if (!annotation) { return; }
NSLog(@"\nComplete annotation:");
NSLog(@"\n%@", annotation[@"text"]);

Sie können auch Informationen zu bestimmten Bereichen des Bildes erhalten. Für jeden block, paragraph, word und symbol können Sie den in der Region erkannten Text und die Begrenzungskoordinaten der Region abrufen. Beispiel:

Swift

guard let pages = annotation["pages"] as? [[String: Any]] else { return }
for page in pages {
  var pageText = ""
  guard let blocks = page["blocks"] as? [[String: Any]] else { continue }
  for block in blocks {
    var blockText = ""
    guard let paragraphs = block["paragraphs"] as? [[String: Any]] else { continue }
    for paragraph in paragraphs {
      var paragraphText = ""
      guard let words = paragraph["words"] as? [[String: Any]] else { continue }
      for word in words {
        var wordText = ""
        guard let symbols = word["symbols"] as? [[String: Any]] else { continue }
        for symbol in symbols {
          let text = symbol["text"] as? String ?? ""
          let confidence = symbol["confidence"] as? Float ?? 0.0
          wordText += text
          print("Symbol text: \(text) (confidence: \(confidence)%n")
        }
        let confidence = word["confidence"] as? Float ?? 0.0
        print("Word text: \(wordText) (confidence: \(confidence)%n%n")
        let boundingBox = word["boundingBox"] as? [Float] ?? [0.0, 0.0, 0.0, 0.0]
        print("Word bounding box: \(boundingBox.description)%n")
        paragraphText += wordText
      }
      print("%nParagraph: %n\(paragraphText)%n")
      let boundingBox = paragraph["boundingBox"] as? [Float] ?? [0.0, 0.0, 0.0, 0.0]
      print("Paragraph bounding box: \(boundingBox)%n")
      let confidence = paragraph["confidence"] as? Float ?? 0.0
      print("Paragraph Confidence: \(confidence)%n")
      blockText += paragraphText
    }
    pageText += blockText
  }
}

Objective-C

for (NSDictionary *page in annotation[@"pages"]) {
  NSMutableString *pageText = [NSMutableString new];
  for (NSDictionary *block in page[@"blocks"]) {
    NSMutableString *blockText = [NSMutableString new];
    for (NSDictionary *paragraph in block[@"paragraphs"]) {
      NSMutableString *paragraphText = [NSMutableString new];
      for (NSDictionary *word in paragraph[@"words"]) {
        NSMutableString *wordText = [NSMutableString new];
        for (NSDictionary *symbol in word[@"symbols"]) {
          NSString *text = symbol[@"text"];
          [wordText appendString:text];
          NSLog(@"Symbol text: %@ (confidence: %@\n", text, symbol[@"confidence"]);
        }
        NSLog(@"Word text: %@ (confidence: %@\n\n", wordText, word[@"confidence"]);
        NSLog(@"Word bounding box: %@\n", word[@"boundingBox"]);
        [paragraphText appendString:wordText];
      }
      NSLog(@"\nParagraph: \n%@\n", paragraphText);
      NSLog(@"Paragraph bounding box: %@\n", paragraph[@"boundingBox"]);
      NSLog(@"Paragraph Confidence: %@\n", paragraph[@"confidence"]);
      [blockText appendString:paragraphText];
    }
    [pageText appendString:blockText];
  }
}