Apple 플랫폼에서 Firebase 인증 및 함수를 사용하여 Cloud Vision으로 이미지의 텍스트를 안전하게 인식

앱에서 Google Cloud API를 호출하려면 승인을 처리하고 API 키와 같은 비밀 값을 보호하는 중간 REST API를 만들어야 합니다. 그런 다음 이 중간 서비스에 인증하고 통신하기 위해 모바일 앱에 코드를 작성해야 합니다.

이 REST API를 만드는 한 가지 방법은 인증을 처리하고 사전 빌드된 SDK로 모바일 앱에서 호출할 수 있는 Google Cloud API에 대한 관리형 서버리스 게이트웨이를 제공하는 Firebase 인증 및 함수를 사용하는 것입니다.

이 가이드에서는 이 기술을 사용하여 앱에서 Cloud Vision API를 호출하는 방법을 보여줍니다. 이 방법을 사용하면 인증된 모든 사용자가 클라우드 프로젝트를 통해 Cloud Vision 청구 서비스에 액세스할 수 있으므로 계속하기 전에 이 인증 메커니즘이 사용 사례에 충분한지 고려하십시오.

시작하기 전에

프로젝트 구성

아직 앱에 Firebase를 추가하지 않았다면 시작하기 가이드 의 단계에 따라 추가하세요.

Swift 패키지 관리자를 사용하여 Firebase 종속 항목을 설치하고 관리합니다.

  1. Xcode에서 앱 프로젝트를 연 상태에서 파일 > 패키지 추가 로 이동합니다.
  2. 메시지가 표시되면 Firebase Apple 플랫폼 SDK 저장소를 추가합니다.
  3.   https://github.com/firebase/firebase-ios-sdk
  4. Firebase ML 라이브러리를 선택합니다.
  5. 완료되면 Xcode는 백그라운드에서 종속성을 자동으로 해결하고 다운로드하기 시작합니다.

다음으로 몇 가지 인앱 설정을 수행합니다.

  1. 앱에서 Firebase를 가져옵니다.

    빠른

    import FirebaseMLModelDownloader

    오브젝티브-C

    @import FirebaseMLModelDownloader;

몇 가지 구성 단계를 더 수행하면 준비가 완료됩니다.

  1. 프로젝트에 클라우드 기반 API를 아직 활성화하지 않았다면 지금 활성화하십시오.

    1. Firebase 콘솔의 Firebase ML API 페이지 를 엽니다.
    2. 아직 프로젝트를 Blaze 요금제로 업그레이드하지 않은 경우 업그레이드 를 클릭하여 업그레이드하십시오. (프로젝트가 Blaze 요금제에 없는 경우에만 업그레이드하라는 메시지가 표시됩니다.)

      Blaze 수준 프로젝트만 클라우드 기반 API를 사용할 수 있습니다.

    3. 클라우드 기반 API가 아직 활성화되지 않은 경우 클라우드 기반 API 활성화 를 클릭합니다.
  2. Cloud Vision API에 대한 액세스를 허용하지 않도록 기존 Firebase API 키를 구성합니다.
    1. Cloud 콘솔의 사용자 인증 정보 페이지를 엽니다.
    2. 목록의 각 API 키에 대해 편집 보기를 열고 키 제한 섹션에서 Cloud Vision API를 제외한 사용 가능한 모든 API를 목록에 추가합니다.

호출 가능한 함수 배포

그런 다음 앱과 Cloud Vision API를 연결하는 데 사용할 Cloud Function을 배포합니다. functions-samples 저장소에는 사용할 수 있는 예제가 포함되어 있습니다.

기본적으로 이 기능을 통해 Cloud Vision API에 액세스하면 앱의 인증된 사용자만 Cloud Vision API에 액세스할 수 있습니다. 다양한 요구 사항에 맞게 기능을 수정할 수 있습니다.

함수를 배포하려면:

  1. functions-samples 리포지토리 를 복제하거나 다운로드하고 vision-annotate-image 디렉토리로 변경합니다.
    git clone https://github.com/firebase/functions-samples
    cd vision-annotate-image
    
  2. 종속성 설치:
    cd functions
    npm install
    cd ..
    
  3. Firebase CLI가 없으면 설치합니다 .
  4. vision-annotate-image 디렉토리에서 Firebase 프로젝트를 초기화합니다. 메시지가 표시되면 목록에서 프로젝트를 선택합니다.
    firebase init
  5. 함수 배포:
    firebase deploy --only functions:annotateImage

앱에 Firebase 인증 추가

위에 배포된 호출 가능 함수는 인증되지 않은 앱 사용자의 요청을 거부합니다. 아직 추가하지 않았다면 앱에 Firebase 인증을 추가해야 합니다.

앱에 필요한 종속성 추가

Swift 패키지 관리자를 사용하여 Firebase용 Cloud Functions 라이브러리를 설치합니다.

이제 이미지에서 텍스트를 인식할 준비가 되었습니다.

1. 입력 이미지 준비

Cloud Vision을 호출하려면 이미지 형식이 base64로 인코딩된 문자열이어야 합니다. UIImage 를 처리하려면:

빠른

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

오브젝티브-C

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

2. 호출 가능한 함수를 호출하여 텍스트 인식

이미지의 랜드마크를 인식하려면 JSON Cloud Vision 요청 을 전달하는 호출 가능한 함수를 호출합니다.

  1. 먼저 Cloud Functions의 인스턴스를 초기화합니다.

    빠른

    lazy var functions = Functions.functions()
    

    오브젝티브-C

    @property(strong, nonatomic) FIRFunctions *functions;
    
  2. 요청을 만듭니다. Cloud Vision API는 TEXT_DETECTIONDOCUMENT_TEXT_DETECTION 의 두 가지 텍스트 감지 유형 을 지원합니다. 두 사용 사례의 차이점은 Cloud Vision OCR 문서 를 참조하세요.

    빠른

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

    오브젝티브-C

    NSDictionary *requestData = @{
      @"image": @{@"content": base64encodedImage},
      @"features": @{@"type": @"TEXT_DETECTION"},
      @"imageContext": @{@"languageHints": @[@"en"]}
    };
    
  3. 마지막으로 함수를 호출합니다.

    빠른

    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 succesfully
    }
    

    오브젝티브-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. 인식된 텍스트 블록에서 텍스트 추출

텍스트 인식 작업이 성공하면 BatchAnnotateImagesResponse 의 JSON 응답이 작업 결과에 반환됩니다. 텍스트 주석은 fullTextAnnotation 객체에서 찾을 수 있습니다.

text 필드에서 인식된 텍스트를 문자열로 가져올 수 있습니다. 예를 들어:

빠른

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

오브젝티브-C

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

이미지의 특정 영역에 대한 정보를 얻을 수도 있습니다. 각 block , paragraph , wordsymbol 에 대해 영역에서 인식되는 텍스트와 영역의 경계 좌표를 얻을 수 있습니다. 예를 들어:

빠른

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
}

오브젝티브-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];
  }
}