AWS Textract 및 React Native

Amazon Textract는 스캔한 문서, PDF 및 이미지에서 텍스트, 필기 및 데이터를 추출하여 DynamoDB, s3 등과 같은 모든 종류의 스토리지 서비스에 저장할 수 있는 Amazon에서 제공하는 기계 학습(ML) 서비스입니다. ...

오늘은 반응 네이티브 모바일 애플리케이션에서 이미지를 캡처하거나 선택하고 이 이미지를 S3에 업로드하는 과정을 살펴보겠습니다. 그런 다음 API 게이트웨이를 사용하여 람다 기능을 트리거하면 해당 이미지에서 데이터 추출이 발생하고 데이터를 처리한 후 이 데이터를 DynamoDB 레코드로 삽입합니다.



전제 조건

npm 또는 원사

반응 네이티브 > 0.59

aws 증폭

노드 JS

aws-sdk

In this blog I will assume you have some knowledge in developing and deploying lambda functions and API Gateway.

블로그를 크게 두 부분으로 나누겠습니다.

프런트엔드 부품

백엔드 부분

1. 프런트엔드 부분
이 섹션에서는 백엔드가 이러한 이미지에서 데이터를 추출하기 위해 모바일 애플리케이션에서 캡처한 이미지를 S3로 업로드하는 작업을 처리합니다.

우선 다음을 설치하여 시작하겠습니다.

aws-amplify 네이티브 반응용.npm install aws-amplify 또는 npm install @aws-amplify/api @aws-amplify/core @aws-amplify/storage 사용(모든 aws-amplify 라이브러리

가 필요하지 않기 때문)

react-native-image-picker 장치 라이브러리 또는 카메라에서 사진을 선택합니다.npm install react-native-image-picker

사용자가 라이브러리에서 이미지를 선택하는 경우와 카메라에서 하나를 선택하는 경우의 두 가지 기능을 구현하는 것으로 시작합니다.

import {launchCamera, launchImageLibrary} from 'react-native-image-picker';


//Inside your component

const options = {
  mediaType: 'photo',
  quality: 0.5,
  includeBase64: true,
};

const libraryPickerHandler = () => {
    launchImageLibrary(options, async (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.errorMessage) {
        console.log('ImagePicker Error: ', response.errorMessage);
      } else {
        await onImageSelect(response?.assets[0].uri);
      }
    });
  };

  const cameraPickerHandler = async () => {
    launchCamera(options, async (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.errorMessage) {
        console.log('ImagePicker Error: ', response.errorMessage);
      } else {
        await onImageSelect(response?.assets[0].uri);
      }
    });
  };

onImageSelect 함수는 S3에 이미지 업로드를 처리하고 백엔드 부분에서 개발할 API 엔드포인트/texttract-scan에 S3 키를 보냅니다.

import Storage from '@aws-amplify/storage';
import API from '@aws-amplify/api';
// or
import { Storage, API } from 'aws-amplify';

const onImageSelect = async (uri: string) => {
  let imageResponse = await fetch(uri);
  const blob = await imageResponse.blob();

  // timestamp for random image names
  let naming = `{new Date().getTime()}.jpeg`;

  const s3Response = await Storage.put(naming, blob, {
    contentType: 'image/jpeg',
    level: 'protected',
  });

 await API.post('your-endpoint-name', '/main/textract-scan', {
    body: {
      imageKey: s3Response.key,
    },
  });
};

2. 백엔드 부분

이 섹션에서는 nodejs로 작성될 이미지에서 데이터 추출을 처리합니다.

다음을 설치하여 시작하겠습니다.

aws-sdk Amazon Web Services로 쉽게 작업할 수 있는 javascript용.

npm install aws-sdk또는yarn add aws-sdk
texttractScan이라는 람다 함수를 포함하는 textract.ts라는 파일을 생성합니다.
texttractScan은 지정된 엔드포인트를 통해 프런트엔드에서 호출되는 주요 기능이 됩니다.

함수는 본문에서 imageKey 속성을 취하는 post 메서드가 됩니다. 이imageKey는 지정된 버킷의 S3 객체 키를 나타냅니다.

함수 블록 내부의 serverless.yml 파일에 이것을 추가해야 합니다.

TextractScanLambda:
  handler: path-to-your-file/textract.textractScan
  events:
    - http:
        method: post
        path: main/textract-scan
        authorizer: aws_iam

이제 textract.ts 파일 내에서 람다 함수 구현을 시작합니다.

먼저 람다 함수에서 사용할 Texract 서비스 함수 analyzeText를 작성해 보겠습니다.

import { Textract } from 'aws-sdk';

const analyzeText = async(key: string) => {
  const payload = {
      Document: {
        S3Object: {
          //the bucket where you uploaded your images
          Bucket: 'BUCKET_NAME',
          Name: key,
        },
      },
    };

    return new Textract().detectDocumentText(payload);
}

이제 람다 함수 texttractScan 개발을 시작합니다.

const textractScan = async (event: AWSLambda.APIGatewayProxyEvent) => {
  try {
    console.log(event);
    const body = JSON.parse(event.body);

    const { imageKey } = body;

    const analyzeTextResult = await analyzeText(imageKey);
  } catch (e) {
    console.log(e);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'ERROR_ANALYZING_DOCUMENT' }),
    };
  }
};

이제 기능을 완료했으므로 이를 사용하여 이미지에서 텍스트를 추출할 수 있습니다. analyzeTextResult의 결과에는 문서에서 감지된 텍스트가 포함된 블록 개체의 배열이 포함되지만 이 개체에서 필요한 실제 데이터를 추출하는 데 시간이 많이 걸립니다.
이것이 aws-textract-json-parser이 만들어진 이유입니다. 이 라이브러리는 AWS Textract의 json 응답을 보다 사용 가능한 형식으로 구문 분석한 다음 DynamoDB에 삽입할 수 있습니다.

import { DynamoDB } from 'aws-sdk';

const textractScan = async (event: AWSLambda.APIGatewayProxyEvent) => {
  try {
    console.log(event);
    const body = JSON.parse(event.body);

    const { imageKey } = body;

    const analyzeTextResult = await analyzeText(imageKey);
    const parsedData = await AWSJsonParser(analyzeTextResult);
    console.info(parsedData);
    const rawData = parsedData.getRawData();
    console.info(data);
      if (data.length === 0) {
        console.error('no text detected');
 return {
      statusCode: 400,
      body: JSON.stringify({ message: 'INVALID_DOCUMENT' }),
    };
      }
    const payload = {
     ...someData,
     textractData: rawData
    }
    new DynamoDB.DocumentClient(payload).put;

    ....

  } catch (e) {
    console.log(e);
    return {
      statusCode: 500,
      body: JSON.stringify({ message: 'ERROR_ANALYZING_DOCUMENT' }),
    };
  }
};

따라서 이제 사용자가 사진을 찍고 데이터를 추출하여 간단한 단계로 자신의 프로필과 연결해야 하는 많은 시나리오를 달성할 수 있습니다.