Nhận dạng văn bản trong hình ảnh một cách an toàn với Cloud Vision bằng cách sử dụng Chức năng và xác thực Firebase trên nền tảng Apple

Để gọi API Google Cloud từ ứng dụng của bạn, bạn cần tạo API REST trung gian xử lý ủy quyền và bảo vệ các giá trị bí mật như khóa API. Sau đó, bạn cần viết mã trong ứng dụng dành cho thiết bị di động của mình để xác thực và giao tiếp với dịch vụ trung gian này.

Một cách để tạo API REST này là sử dụng Chức năng và Xác thực Firebase, cung cấp cho bạn một cổng không có máy chủ, được quản lý tới API Google Cloud để xử lý xác thực và có thể được gọi từ ứng dụng dành cho thiết bị di động của bạn bằng SDK dựng sẵn.

Hướng dẫn này trình bày cách sử dụng kỹ thuật này để gọi API Cloud Vision từ ứng dụng của bạn. Phương pháp này sẽ cho phép tất cả người dùng được xác thực truy cập các dịch vụ tính phí của Cloud Vision thông qua dự án Đám mây của bạn, vì vậy hãy xem xét liệu cơ chế xác thực này có đủ cho trường hợp sử dụng của bạn hay không trước khi tiếp tục.

Trước khi bắt đầu

Định cấu hình dự án của bạn

Nếu bạn chưa thêm Firebase vào ứng dụng của mình, hãy làm như vậy bằng cách làm theo các bước trong hướng dẫn bắt đầu .

Sử dụng Trình quản lý gói Swift để cài đặt và quản lý các phần phụ thuộc của Firebase.

  1. Trong Xcode, khi dự án ứng dụng của bạn đang mở, hãy điều hướng đến File > Add Packages .
  2. Khi được nhắc, hãy thêm kho lưu trữ SDK nền tảng Apple của Firebase:
    3.   https://github.com/firebase/firebase-ios-sdk
  3. Chọn thư viện Firebase ML.
  4. Khi hoàn tất, Xcode sẽ tự động bắt đầu giải quyết và tải xuống các phần phụ thuộc của bạn trong nền.

Tiếp theo, thực hiện một số thiết lập trong ứng dụng:

  1. Trong ứng dụng của bạn, hãy nhập Firebase:

    Nhanh

    import FirebaseMLModelDownloader

    Mục tiêu-C

    @import FirebaseMLModelDownloader;

Một vài bước cấu hình nữa và chúng ta đã sẵn sàng:

  1. Nếu bạn chưa bật API dựa trên đám mây cho dự án của mình, hãy thực hiện ngay bây giờ:

    1. Mở trang API Firebase ML của bảng điều khiển Firebase.

    2. Nếu bạn chưa nâng cấp dự án của mình lên gói giá Blaze, hãy nhấp vào Nâng cấp để thực hiện việc này. (Bạn sẽ chỉ được nhắc nâng cấp nếu dự án của bạn không có trong gói Blaze.)

      Chỉ các dự án cấp Blaze mới có thể sử dụng API dựa trên Đám mây.

    3. Nếu API dựa trên đám mây chưa được bật, hãy nhấp vào Bật API dựa trên đám mây .
  2. Định cấu hình các khóa API Firebase hiện có của bạn để không cho phép truy cập vào API Cloud Vision:
    1. Mở trang Thông tin xác thực của Bảng điều khiển đám mây.
    2. Đối với mỗi khóa API trong danh sách, hãy mở chế độ xem chỉnh sửa và trong phần Hạn chế khóa, hãy thêm tất cả các API khả dụng ngoại trừ API Cloud Vision vào danh sách.

Triển khai chức năng có thể gọi được

Tiếp theo, hãy triển khai Chức năng đám mây mà bạn sẽ sử dụng để kết nối ứng dụng của mình với API Cloud Vision. Kho functions-samples chứa một ví dụ mà bạn có thể sử dụng.

Theo mặc định, việc truy cập Cloud Vision API thông qua chức năng này sẽ chỉ cho phép những người dùng được xác thực của ứng dụng của bạn truy cập vào Cloud Vision API. Bạn có thể sửa đổi chức năng cho các yêu cầu khác nhau.

Để triển khai chức năng:

  1. Sao chép hoặc tải xuống repo chức năng mẫu và thay đổi thư mục Node-1st-gen/vision-annotate-image :
    git clone https://github.com/firebase/functions-samples
cd Node-1st-gen/vision-annotate-image
  2. Cài đặt phụ thuộc:
    cd functions
npm install
cd ..
  3. Nếu bạn không có Firebase CLI, hãy cài đặt nó .
  4. Khởi tạo dự án Firebase trong thư mục vision-annotate-image . Khi được nhắc, hãy chọn dự án của bạn trong danh sách. 
    firebase init
  5. Triển khai chức năng: 
    firebase deploy --only functions:annotateImage

Thêm Firebase Auth vào ứng dụng của bạn

Chức năng có thể gọi được triển khai ở trên sẽ từ chối mọi yêu cầu từ người dùng ứng dụng của bạn không được xác thực. Nếu bạn chưa làm như vậy, bạn sẽ cần thêm Firebase Auth vào ứng dụng của mình.

Thêm các phụ thuộc cần thiết vào ứng dụng của bạn

Sử dụng Trình quản lý gói Swift để cài đặt thư viện Chức năng đám mây cho Firebase.

Bây giờ bạn đã sẵn sàng để bắt đầu nhận dạng văn bản trong hình ảnh.

1. Chuẩn bị ảnh đầu vào

Để gọi Cloud Vision, hình ảnh phải được định dạng dưới dạng chuỗi mã hóa base64. Để xử lý một UIImage :

Nhanh

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

Mục tiêu-C

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

2. Gọi hàm có thể gọi để nhận dạng văn bản

Để nhận dạng các mốc trong hình ảnh, hãy gọi hàm có thể gọi được thông qua yêu cầu JSON Cloud Vision .

  1. Đầu tiên, hãy khởi tạo một phiên bản của Chức năng đám mây:

    Nhanh

    lazy var functions = Functions.functions()

    Mục tiêu-C

    @property(strong, nonatomic) FIRFunctions *functions;

  2. Tạo yêu cầu. Cloud Vision API hỗ trợ hai Loại phát hiện văn bản: TEXT_DETECTION và DOCUMENT_TEXT_DETECTION . Xem Tài liệu Cloud Vision OCR để biết sự khác biệt giữa hai trường hợp sử dụng.

    Nhanh

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

    Mục tiêu-C

    NSDictionary *requestData = @{
  @"image": @{@"content": base64encodedImage},
  @"features": @{@"type": @"TEXT_DETECTION"},
  @"imageContext": @{@"languageHints": @[@"en"]}
};

  3. Cuối cùng, gọi hàm:

    Nhanh

    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
}

    Mục tiêu-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. Trích xuất văn bản từ các khối văn bản được nhận dạng

Nếu thao tác nhận dạng văn bản thành công, phản hồi JSON của BatchAnnotateImagesResponse sẽ được trả về trong kết quả của tác vụ. Các chú thích văn bản có thể được tìm thấy trong đối tượng fullTextAnnotation .

Bạn có thể lấy văn bản được nhận dạng dưới dạng chuỗi trong trường text . Ví dụ:

Nhanh

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

Mục tiêu-C

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

Bạn cũng có thể lấy thông tin cụ thể cho các vùng của hình ảnh. Đối với mỗi block , paragraph , word và symbol , bạn có thể nhận dạng văn bản trong vùng và tọa độ giới hạn của vùng. Ví dụ:

Nhanh

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
}

Mục tiêu-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];
  }
}
,

Để gọi API Google Cloud từ ứng dụng của bạn, bạn cần tạo API REST trung gian xử lý ủy quyền và bảo vệ các giá trị bí mật như khóa API. Sau đó, bạn cần viết mã trong ứng dụng dành cho thiết bị di động của mình để xác thực và giao tiếp với dịch vụ trung gian này.

Một cách để tạo API REST này là sử dụng Chức năng và Xác thực Firebase, cung cấp cho bạn một cổng không có máy chủ, được quản lý tới API Google Cloud để xử lý xác thực và có thể được gọi từ ứng dụng dành cho thiết bị di động của bạn bằng SDK dựng sẵn.

Hướng dẫn này trình bày cách sử dụng kỹ thuật này để gọi API Cloud Vision từ ứng dụng của bạn. Phương pháp này sẽ cho phép tất cả người dùng được xác thực truy cập các dịch vụ tính phí của Cloud Vision thông qua dự án Đám mây của bạn, vì vậy hãy xem xét liệu cơ chế xác thực này có đủ cho trường hợp sử dụng của bạn hay không trước khi tiếp tục.

Trước khi bắt đầu

Định cấu hình dự án của bạn

Nếu bạn chưa thêm Firebase vào ứng dụng của mình, hãy làm như vậy bằng cách làm theo các bước trong hướng dẫn bắt đầu .

Sử dụng Trình quản lý gói Swift để cài đặt và quản lý các phần phụ thuộc của Firebase.

  1. Trong Xcode, khi dự án ứng dụng của bạn đang mở, hãy điều hướng đến File > Add Packages .
  2. Khi được nhắc, hãy thêm kho lưu trữ SDK nền tảng Apple của Firebase:
    3.   https://github.com/firebase/firebase-ios-sdk
  3. Chọn thư viện Firebase ML.
  4. Khi hoàn tất, Xcode sẽ tự động bắt đầu giải quyết và tải xuống các phần phụ thuộc của bạn trong nền.

Tiếp theo, thực hiện một số thiết lập trong ứng dụng:

  1. Trong ứng dụng của bạn, hãy nhập Firebase:

    Nhanh

    import FirebaseMLModelDownloader

    Mục tiêu-C

    @import FirebaseMLModelDownloader;

Một vài bước cấu hình nữa và chúng ta đã sẵn sàng:

  1. Nếu bạn chưa bật API dựa trên đám mây cho dự án của mình, hãy thực hiện ngay bây giờ:

    1. Mở trang API Firebase ML của bảng điều khiển Firebase.

    2. Nếu bạn chưa nâng cấp dự án của mình lên gói giá Blaze, hãy nhấp vào Nâng cấp để thực hiện việc này. (Bạn sẽ chỉ được nhắc nâng cấp nếu dự án của bạn không có trong gói Blaze.)

      Chỉ các dự án cấp Blaze mới có thể sử dụng API dựa trên Đám mây.

    3. Nếu API dựa trên đám mây chưa được bật, hãy nhấp vào Bật API dựa trên đám mây .
  2. Định cấu hình các khóa API Firebase hiện có của bạn để không cho phép truy cập vào API Cloud Vision:
    1. Mở trang Thông tin xác thực của Bảng điều khiển đám mây.
    2. Đối với mỗi khóa API trong danh sách, hãy mở chế độ xem chỉnh sửa và trong phần Hạn chế khóa, hãy thêm tất cả các API khả dụng ngoại trừ API Cloud Vision vào danh sách.

Triển khai chức năng có thể gọi được

Tiếp theo, hãy triển khai Chức năng đám mây mà bạn sẽ sử dụng để kết nối ứng dụng của mình với API Cloud Vision. Kho functions-samples chứa một ví dụ mà bạn có thể sử dụng.

Theo mặc định, việc truy cập Cloud Vision API thông qua chức năng này sẽ chỉ cho phép những người dùng được xác thực của ứng dụng của bạn truy cập vào Cloud Vision API. Bạn có thể sửa đổi chức năng cho các yêu cầu khác nhau.

Để triển khai chức năng:

  1. Sao chép hoặc tải xuống repo chức năng mẫu và thay đổi thư mục Node-1st-gen/vision-annotate-image :
    git clone https://github.com/firebase/functions-samples
cd Node-1st-gen/vision-annotate-image
  2. Cài đặt phụ thuộc:
    cd functions
npm install
cd ..
  3. Nếu bạn không có Firebase CLI, hãy cài đặt nó .
  4. Khởi tạo dự án Firebase trong thư mục vision-annotate-image . Khi được nhắc, hãy chọn dự án của bạn trong danh sách. 
    firebase init
  5. Triển khai chức năng: 
    firebase deploy --only functions:annotateImage

Thêm Firebase Auth vào ứng dụng của bạn

Chức năng có thể gọi được triển khai ở trên sẽ từ chối mọi yêu cầu từ người dùng ứng dụng của bạn không được xác thực. Nếu bạn chưa làm như vậy, bạn sẽ cần thêm Firebase Auth vào ứng dụng của mình.

Thêm các phụ thuộc cần thiết vào ứng dụng của bạn

Sử dụng Trình quản lý gói Swift để cài đặt thư viện Chức năng đám mây cho Firebase.

Bây giờ bạn đã sẵn sàng để bắt đầu nhận dạng văn bản trong hình ảnh.

1. Chuẩn bị ảnh đầu vào

Để gọi Cloud Vision, hình ảnh phải được định dạng dưới dạng chuỗi mã hóa base64. Để xử lý một UIImage :

Nhanh

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

Mục tiêu-C

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

2. Gọi hàm có thể gọi để nhận dạng văn bản

Để nhận dạng các mốc trong hình ảnh, hãy gọi hàm có thể gọi được thông qua yêu cầu JSON Cloud Vision .

  1. Đầu tiên, hãy khởi tạo một phiên bản của Chức năng đám mây:

    Nhanh

    lazy var functions = Functions.functions()

    Mục tiêu-C

    @property(strong, nonatomic) FIRFunctions *functions;

  2. Tạo yêu cầu. Cloud Vision API hỗ trợ hai Loại phát hiện văn bản: TEXT_DETECTION và DOCUMENT_TEXT_DETECTION . Xem Tài liệu Cloud Vision OCR để biết sự khác biệt giữa hai trường hợp sử dụng.

    Nhanh

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

    Mục tiêu-C

    NSDictionary *requestData = @{
  @"image": @{@"content": base64encodedImage},
  @"features": @{@"type": @"TEXT_DETECTION"},
  @"imageContext": @{@"languageHints": @[@"en"]}
};

  3. Cuối cùng, gọi hàm:

    Nhanh

    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
}

    Mục tiêu-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. Trích xuất văn bản từ các khối văn bản được nhận dạng

Nếu thao tác nhận dạng văn bản thành công, phản hồi JSON của BatchAnnotateImagesResponse sẽ được trả về trong kết quả của tác vụ. Các chú thích văn bản có thể được tìm thấy trong đối tượng fullTextAnnotation .

Bạn có thể lấy văn bản được nhận dạng dưới dạng chuỗi trong trường text . Ví dụ:

Nhanh

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

Mục tiêu-C

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

Bạn cũng có thể lấy thông tin cụ thể cho các vùng của hình ảnh. Đối với mỗi block , paragraph , word và symbol , bạn có thể nhận dạng văn bản trong vùng và tọa độ giới hạn của vùng. Ví dụ:

Nhanh

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
}

Mục tiêu-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];
  }
}