จดจำข้อความในรูปภาพอย่างปลอดภัยด้วย Cloud Vision โดยใช้การตรวจสอบสิทธิ์และฟังก์ชันของ Firebase บนแพลตฟอร์ม Apple

หากต้องการเรียกใช้ Google Cloud API จากแอปของคุณ คุณต้องสร้าง REST API ระดับกลางที่จัดการการให้สิทธิ์และปกป้องค่าข้อมูลลับ เช่น คีย์ API จากนั้นคุณต้องเขียนโค้ดในแอปบนอุปกรณ์เคลื่อนที่เพื่อตรวจสอบสิทธิ์และสื่อสารกับบริการระดับกลางนี้

วิธีหนึ่งในการสร้าง REST API นี้คือการใช้การตรวจสอบสิทธิ์และฟังก์ชันของ Firebase ซึ่งจะมอบเกตเวย์แบบ Serverless ที่มีการจัดการไปยัง Google Cloud API ที่จัดการการตรวจสอบสิทธิ์และเรียกใช้งานจากแอปบนอุปกรณ์เคลื่อนที่ด้วย SDK ที่สร้างไว้ล่วงหน้าได้

คู่มือนี้จะแสดงวิธีใช้เทคนิคนี้เพื่อเรียก Cloud Vision API จากแอปของคุณ วิธีนี้จะอนุญาตให้ผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ทั้งหมดเข้าถึงบริการที่เรียกเก็บเงินของ Cloud Vision ผ่านโปรเจ็กต์ที่อยู่ในระบบคลาวด์ ดังนั้นให้พิจารณาว่ากลไกการตรวจสอบสิทธิ์นี้เพียงพอสำหรับกรณีการใช้งานของคุณหรือไม่ก่อนดำเนินการต่อ

ก่อนเริ่มต้น

กำหนดค่าโปรเจ็กต์

หากยังไม่ได้เพิ่ม Firebase ลงในแอป โปรดทำตามขั้นตอนในคู่มือเริ่มต้นใช้งาน

ใช้ Swift Package Manager เพื่อติดตั้งและจัดการทรัพยากร Dependency ของ Firebase

  1. เปิดโปรเจ็กต์แอปใน Xcode แล้วไปที่ไฟล์ > เพิ่มแพ็กเกจ
  2. เมื่อได้รับข้อความแจ้ง ให้เพิ่มที่เก็บ SDK สำหรับแพลตฟอร์ม Firebase ของ Apple ดังนี้
  3.   https://github.com/firebase/firebase-ios-sdk.git
  4. เลือกไลบรารี Firebase ML
  5. เพิ่มแฟล็ก -ObjC ลงในส่วนแฟล็ก Linker อื่นๆ ของการตั้งค่าบิลด์ของเป้าหมาย
  6. เมื่อเสร็จสิ้นแล้ว Xcode จะเริ่มแก้ปัญหาและดาวน์โหลดทรัพยากร Dependency ในเบื้องหลังโดยอัตโนมัติ

จากนั้นทำการตั้งค่าบางอย่างในแอป ดังนี้

  1. ในแอป ให้นำเข้า Firebase ดังนี้

    Swift

    import FirebaseMLModelDownloader

    Objective-C

    @import FirebaseMLModelDownloader;

อีกเพียงไม่กี่ขั้นตอนการกำหนดค่าก็พร้อมใช้งานแล้ว

  1. หากคุณยังไม่ได้เปิดใช้ API ในระบบคลาวด์สำหรับโปรเจ็กต์ โปรดดำเนินการทันที

    1. เปิดหน้า Firebase ML API ของคอนโซล Firebase
    2. หากยังไม่ได้อัปเกรดโปรเจ็กต์เป็นแพ็กเกจราคา Blaze ให้คลิกอัปเกรดเพื่อดำเนินการดังกล่าว (ระบบจะแจ้งให้อัปเกรดเฉพาะในกรณีที่โปรเจ็กต์ไม่ได้อยู่ในแพ็กเกจ Blaze)

      เฉพาะโปรเจ็กต์ระดับ Blaze เท่านั้นที่ใช้ API ในระบบคลาวด์ได้

    3. หากยังไม่ได้เปิดใช้ API ในระบบคลาวด์ ให้คลิกเปิดใช้ API ในระบบคลาวด์
  2. กำหนดค่าคีย์ Firebase API ที่มีอยู่เพื่อยกเลิกการอนุญาตให้เข้าถึง Cloud Vision API ดังนี้
    1. เปิดหน้าข้อมูลเข้าสู่ระบบของ Cloud Console
    2. สำหรับคีย์ API แต่ละรายการในรายการ ให้เปิดมุมมองการแก้ไข แล้วเพิ่ม API ที่พร้อมใช้งานทั้งหมดในส่วนข้อจำกัดของคีย์ยกเว้น Cloud Vision API ลงในรายการ

ทำให้ฟังก์ชันที่เรียกใช้ได้ใช้งานได้

จากนั้น ทำให้ Cloud Function ใช้งานได้เพื่อบริดจ์แอปของคุณกับ Cloud Vision API ที่เก็บ functions-samples มีตัวอย่างที่คุณใช้ได้

โดยค่าเริ่มต้น การเข้าถึง Cloud Vision API ผ่านฟังก์ชันนี้จะอนุญาตให้เฉพาะผู้ใช้ที่ผ่านการตรวจสอบสิทธิ์ของแอปเท่านั้นที่เข้าถึง Cloud Vision API ได้ คุณแก้ไขฟังก์ชันตามข้อกำหนดที่แตกต่างกันได้

วิธีทำให้ฟังก์ชันใช้งานได้

  1. โคลนหรือดาวน์โหลดที่เก็บฟังก์ชันตัวอย่าง แล้วเปลี่ยนเป็นไดเรกทอรี Node-1st-gen/vision-annotate-image ดังนี้
    git clone https://github.com/firebase/functions-samples
    cd Node-1st-gen/vision-annotate-image
    
  2. ติดตั้งการอ้างอิง:
    cd functions
    npm install
    cd ..
    
  3. หากคุณไม่มี Firebase CLI ให้ติดตั้ง
  4. เริ่มต้นโปรเจ็กต์ Firebase ในไดเรกทอรี vision-annotate-image เมื่อได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์ในรายการ
    firebase init
  5. ทำให้ฟังก์ชันใช้งานได้:
    firebase deploy --only functions:annotateImage

เพิ่ม Firebase Auth ลงในแอป

ฟังก์ชันที่เรียกใช้ได้ที่ใช้งานด้านบนจะปฏิเสธคำขอจากผู้ใช้ที่ไม่ได้ตรวจสอบสิทธิ์ของแอป หากยังไม่ได้ดำเนินการ คุณจะต้องเพิ่ม Firebase Auth ลงในแอป

เพิ่มทรัพยากร Dependency ที่จำเป็นลงในแอป

ใช้ Swift Package Manager เพื่อติดตั้งไลบรารี Cloud Functions for Firebase

ตอนนี้คุณพร้อมที่จะเริ่มจดจำข้อความในรูปภาพแล้ว

1. เตรียมรูปภาพอินพุต

หากต้องการเรียกใช้ Cloud Vision รูปภาพต้องอยู่ในรูปแบบสตริงที่เข้ารหัสแบบ Base64 วิธีประมวลผล 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. เรียกใช้ฟังก์ชันที่เรียกใช้ได้เพื่อจดจำข้อความ

หากต้องการจดจำจุดสังเกตในรูปภาพ ให้เรียกใช้ฟังก์ชันที่เรียกใช้ได้ผ่านคำขอ JSON Cloud Vision

  1. ก่อนอื่น ให้เริ่มต้นอินสแตนซ์ของ Cloud Functions โดยทำดังนี้

    Swift

    lazy var functions = Functions.functions()
    

    Objective-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. สร้างคำขอ Cloud Vision API รองรับการตรวจจับข้อความประเภท 2 ประเภท ได้แก่ TEXT_DETECTION และ DOCUMENT_TEXT_DETECTION โปรดดูความแตกต่างระหว่างกรณีการใช้งานทั้งสองนี้ได้ในเอกสาร Cloud Vision OCR

    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. สุดท้าย เรียกใช้ฟังก์ชัน

    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. ดึงข้อความจากบล็อกข้อความที่รู้จัก

หากการดำเนินการจดจำข้อความสำเร็จ ระบบจะแสดงผลการตอบสนอง JSON ของ BatchAnnotateImagesResponse ในผลลัพธ์ของงาน ดูคำอธิบายประกอบแบบข้อความได้ในออบเจ็กต์ fullTextAnnotation

คุณจะได้รับข้อความที่รู้จักเป็นสตริงในช่อง text ตัวอย่างเช่น

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

นอกจากนี้ คุณยังดูข้อมูลเฉพาะภูมิภาคของรูปภาพได้ด้วย สำหรับ block, paragraph, word และ symbol แต่ละรายการ คุณจะได้รับข้อความที่รู้จักในภูมิภาคและพิกัดขอบเขตของภูมิภาค ตัวอย่างเช่น

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