Mengenali Teks dalam Gambar secara Aman dengan Cloud Vision menggunakan Firebase Auth dan Functions di platform Apple

Untuk memanggil Google Cloud API dari aplikasi, Anda perlu membuat REST API perantara yang menangani otorisasi dan melindungi nilai rahasia seperti kunci API. Kemudian, Anda perlu menulis kode di aplikasi seluler untuk mengautentikasi ke dan berkomunikasi dengan layanan perantara ini.

Salah satu cara untuk membuat REST API ini adalah dengan menggunakan Firebase Authentication dan Functions, yang memberi Anda gateway serverless dan terkelola ke Google Cloud API yang menangani autentikasi dan dapat dipanggil dari aplikasi seluler Anda dengan SDK yang telah dibangun sebelumnya.

Panduan ini menunjukkan cara menggunakan teknik tersebut untuk memanggil Cloud Vision API dari aplikasi Anda. Metode ini akan mengizinkan semua pengguna terautentikasi untuk mengakses layanan Cloud Vision yang ditagih melalui project Cloud Anda. Jadi, pertimbangkan apakah mekanisme autentikasi ini sudah memadai untuk kasus penggunaan Anda sebelum melanjutkan.

Sebelum memulai

Mengonfigurasi project Anda

Gunakan Swift Package Manager untuk menginstal dan mengelola dependensi Firebase.

1. Di Xcode, dengan project aplikasi Anda dalam keadaan terbuka, buka File > Add Packages.
2. Saat diminta, tambahkan repositori SDK platform Apple Firebase:

  https://github.com/firebase/firebase-ios-sdk.git

3. Pilih library Firebase ML.
4. Setelah selesai, Xcode akan otomatis mulai me-resolve dan mendownload dependensi Anda di latar belakang.

Berikutnya, lakukan beberapa penyiapan dalam aplikasi:

1. Di aplikasi Anda, impor Firebase:

   Swift

   import FirebaseMLModelDownloader

   Objective-C

   @import FirebaseMLModelDownloader;

Beberapa langkah konfigurasi lagi dan kita akan siap:

1. Jika Anda belum mengaktifkan API berbasis Cloud untuk project Anda, lakukan sekarang:

   1. Buka halaman API di bagian Firebase ML di Firebase console.

   2. Jika Anda belum mengupgrade project ke paket harga Blaze, klik Upgrade untuk melakukannya. (Anda akan diminta untuk mengupgrade hanya jika project tersebut tidak menggunakan paket Blaze.)

      Hanya project tingkat Blaze yang dapat menggunakan API berbasis Cloud.

   3. Jika API berbasis Cloud belum diaktifkan, klik Enable Cloud-based APIs.
2. Konfigurasikan kunci API Firebase yang ada untuk melarang akses ke Cloud Vision API:
   1. Buka halaman Credentials di Cloud Console.
   2. Untuk setiap kunci API dalam daftar, buka tampilan edit. Selanjutnya di bagian Pembatasan Kunci, tambahkan semua API yang tersedia ke dalam daftar, kecuali Cloud Vision API.

Men-deploy fungsi callable

Selanjutnya, deploy Cloud Function yang akan Anda gunakan untuk menghubungkan aplikasi dan Cloud Vision API. Repositori functions-samples berisi contoh yang dapat Anda gunakan.

Secara default, mengakses Cloud Vision API melalui fungsi ini akan memberikan akses ke Cloud Vision API hanya kepada pengguna aplikasi yang telah terautentikasi. Anda dapat mengubah fungsi untuk persyaratan yang berbeda.

Untuk men-deploy fungsi tersebut:

1. Clone atau download repo functions-samples dan ubah ke direktori Node-1st-gen/vision-annotate-image:

   git clone https://github.com/firebase/functions-samples
   cd Node-1st-gen/vision-annotate-image
   

2. Instal dependensi:

   cd functions
   npm install
   cd ..
   

3. Jika Anda tidak memiliki Firebase CLI, instal sekarang.
4. Lakukan inisialisasi project Firebase di direktori vision-annotate-image. Saat diminta, pilih project Anda dari daftar.

   firebase init

5. Deploy fungsi tersebut:

   firebase deploy --only functions:annotateImage

Menambahkan Firebase Auth ke aplikasi Anda

Fungsi callable yang di-deploy di atas akan menolak permintaan apa pun dari pengguna aplikasi yang tidak terautentikasi. Jika belum melakukannya, Anda harus menambahkan Firebase Auth ke aplikasi Anda.

Menambahkan dependensi yang diperlukan ke aplikasi Anda

Gunakan Swift Package Manager untuk menginstal library Cloud Functions for Firebase.

Kini Anda siap untuk mulai mengenali teks dalam gambar.

1. Siapkan gambar input

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

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

2. Panggil fungsi callable untuk mengenali teks

1. Pertama, lakukan inisialisasi instance Cloud Functions:

   Swift

   lazy var functions = Functions.functions()
   

   Objective-C

   @property(strong, nonatomic) FIRFunctions *functions;
   

2. Buat permintaan. Cloud Vision API mendukung dua Jenis deteksi teks: TEXT_DETECTION dan DOCUMENT_TEXT_DETECTION. Lihat Dokumentasi Cloud Vision OCR untuk mengetahui perbedaan antara dua kasus penggunaan tersebut.

   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. Terakhir, panggil fungsi tersebut:

   Swift

   functions.httpsCallable("annotateImage").call(requestData) { (result, error) in
     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]
       }
       // ...
     }
     // Function completed successfully
   }
   

   Objective-C

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

3. Ekstrak teks dari blok teks yang dikenali

Jika operasi pengenalan teks berhasil, respons JSON BatchAnnotateImagesResponse akan ditampilkan di hasil tugas. Anotasi teks dapat ditemukan dalam objek fullTextAnnotation.

Anda bisa mendapatkan teks yang dikenali sebagai string di kolom text. Contoh:

guard let annotation = (result?.data as? [String: Any])?["fullTextAnnotation"] as? [String: Any] else { return }
print("%nComplete annotation:")
let text = annotation["text"] as? String ?? ""
print("%n\(text)")

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

Anda juga bisa mendapatkan informasi khusus terkait area dalam gambar. Untuk setiap block, paragraph, word, dan symbol, Anda bisa mendapatkan teks yang dikenali di area dan koordinat pembatas area tersebut. Contoh:

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
}

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];
  }
}