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

Jika Anda belum menambahkan Firebase ke aplikasi, lakukan dengan mengikuti langkah-langkahnya di panduan memulai.

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:
    3.   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

Untuk memanggil Cloud Vision, gambar harus diformat sebagai string berenkode base64. Untuk memproses UIImage:

Swift

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

Objective-C

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

2. Panggil fungsi callable untuk mengenali teks

Untuk mengenali tempat terkenal dalam gambar, panggil fungsi callable dengan meneruskan permintaan JSON Cloud Vision.

  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:

Swift

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

Objective-C

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:

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