라라 - 구글 비전 API 테스트 구현

BooKi·2022년 4월 7일

node.js 프로젝트 - OCR

라라 - 구글 비전 API 테스트 구현

계획

우리는 OCR을 구글 비전 API를 사용하기로 하였다

네이버, 테서랙트 등 많은 OCR이 있지만 구글이

조금 예제가 많은 것 같아서 구글로 결정했다

사전 준비

우선 링크로 들어가서 프로젝트를 만들어야 한다

위를 클릭하고 새 프로젝트를 만들어주자

기본적인 정보들을 입력하고 메인 화면으로 오면 좌측에

[결제] 라고 된 부분을 눌러서 결제 정보를 입력해주어야 한다

구글 비전 API는 유료라서 API를 호출할 때 마다 돈이 나간다고 알고있다

그러나 처음 하면 무료 크레딧도 주고 테스트용으로 할거라면

무료 크레딧이면 충분할 것이다

이후 API 및 서비스에 들어가서 라이브러리로 들어가자

이런 화면이 나올 텐데 vision 이라고 검색하면 비전 api가 나온다

api를 클릭한 후 사용 버튼을 눌러주면 프로젝트에서 비전 api를 사용할 수 있다

서비스 계정을 만들어 주어야 한다

서비스 계정에서 발급받은 키로 api가 사용자를 확인한다

IAM 을 누르고 서비스 계정으로 들어간 다음 새로운 계정을 만들면 된다

그뒤에 키를 발급 받을건데 JSON으로 발급받으면 된다

발급받은 이 키를 환경변수에 등록해주어야 한다

여기에 들어가면 자세하게 구글이 설명을 해주었다

그런데 나는 저 코드를 파워쉘, cmd에 입력해도 환경변수가 등록이 안되길래 직접 환경변수에 들어가서 설정해주었다

나처럼 명령어로 되지않으면 직접 환경변수 추가를 눌러서 이름에는 GOOGLE_APPLICATION_CREDENTIALS

값으로는 파일 찾기를 눌러 json키 파일을 선택해주면 된다

구현

그리고 이제 테스트 코드를 작성해 볼건데 여기에 나와있는 대로 따라했고 나는 node.js 코드를 받았다

거기에 있는 사진까지 제대로 저장해 준 뒤 node index.js를 해서 실행해 보았다

이렇게 제대로 라벨이 추출되었다

찾아보니 위의 코드는 라벨만 찾아오는 코드였다

나는 이곳에 있는 코드를 다시 작성해보았다

저 링크에 나와있는 코드만 그대로 썻는데 에러가 나오길래 알아보았더니

await만 있고 async가 없었다

같이 있는 깃허브에 들어가서 전체 코드를 찾았다

여러가지 예제가 많아서 찾기를 이용해서 detectText로 코드를 찾았다

async function detectText(fileName) {
  const vision = require('@google-cloud/vision');

  // Creates a client
  const client = new vision.ImageAnnotatorClient();

  /**
   * TODO(developer): Uncomment the following line before running the sample.
   */
  //const fileName = './resources/test.jpg';

  // Performs text detection on the local file
  const [result] = await client.textDetection('./resources/test1.jpg');
  const detections = result.textAnnotations;
  console.log('Text:');
  detections.forEach(text => console.log(text));
}
detectText();

그리고 아래와 같은 사진을 넣고 코드를 실행해보았다

정말 신기하게 단어만 딱딱 때서 나왔다