[라이브러리] GCP vision API (구글 vision API 사용방법)

cloud.google.com/vision/docs/setup?hl=ko

빠른 시작: Vision API 설정  |  Google Cloud

시작 전 ! 공식문서를 참고 하면서 하는게 가장 이상적입니다. 

 

 

GCP는 대부분이 유료입니다.

테스트 용도로는 비용이 발생할 확률은 거의 없지만, 그래도 알아 두세요.

먼저, vision api를 사용하기 위해, 사전에 버킷을 생성합니다.

기본적인 세팅은 공식문서에 나와 있으므로, 되어 있다는 가정하에 시작 하겠습니다.

(저도 세팅은 까먹어서....ㅜ)

 

 

package.json

 

현재 테스트를 위한 코드들입니다.

access.js -> gcp 접근이 가능한지 확인

google.js -> vision api 테스트 코드

.env -> gcp에 접근 하기 위한 키를 넣어 두는 곳 (키 발급 과정은 위 링크에 들어 가시면 됩니다.)

 

access.js 

앞서서 설명 했지만, access.js는 gcp 키가 유효한지 확인 하기 위한 코드입니다.

위에 코드를 실행 해서 정상적으로 작동 한다면, 

Bucket명이 로그에 찍히는것을 볼 수 있을겁니다.

 

// google.js 코드입니다. //

"use strict";
const fs = require("fs");
const vision = require("@google-cloud/vision");
const client = new vision.ImageAnnotatorClient();
const { listBuckets } = require("./access");
const detectFaces = async (inputFile) => {
  const request = { image: { source: { filename: inputFile } } };
  const results = await client.faceDetection(request);
  const faces = results[0].faceAnnotations;
  const numFaces = faces.length;
  console.log(`Found ${numFaces} face ${numFaces === 1 ? "" : "s"}.`);
  return faces;
};

const highlightFaces = async (inputFile, faces, outputFile, PImage) => {
  const stream = fs.createReadStream(inputFile);
  let promise;
  if (inputFile.match(/\.jpg$/)) {
    promise = PImage.decodeJPEGFromStream(stream);
  } else if (inputFile.match(/\.png$/)) {
    promise = PImage.decodePNGFromStream(stream);
  } else {
    throw new Error(`Unknown filename extension ${inputFile}`);
  }
  const img = await promise;
  const context = img.getContext("2d");
  context.drawImage(img, 0, 0, img.width, img.height, 0, 0);

  context.strokeStyle = "rgba(0, 255, 0, 0.8)";
  context.lineWidth = "5";

  faces.forEach((face) => {
    context.beginPath();
    let origX = 0;
    let origY = 0;
    face.boundingPoly.vertices.forEach((bounds, i) => {
      if (i === 0) {
        origX = bounds.x;
        origY = bounds.y;
        context.moveTo(bounds.x, bounds.y);
      } else {
        context.lineTo(bounds.x, bounds.y);
      }
    });
    context.lineTo(origX, origY);
    context.stroke();
  });
  console.log(`Writing to file ${outputFile}`);
  const writeStream = fs.createWriteStream(outputFile);
  await PImage.encodePNGToStream(img, writeStream);
};

async function main(inputFile, outputFile) {
  console.log("inputFile: ", inputFile);
  const PImage = require("pureimage");
  outputFile = outputFile || "out.png";
  const faces = await detectFaces(inputFile);
  console.log("Highlighting.............,.,.");
  await highlightFaces(inputFile, faces, outputFile, PImage);
  console.log("finished!!");
}

const args = process.argv.slice(2);
console.log("args: ", args);
main(...args).catch(console.error);

 

위 코드도 공식 문서에 나와 있는 코드입니다.

 

저 중에 main(...args).catch(console.error); 이게 뭔지 잘 몰랐는데,

command line에서 (터미널 상에서 명령어 입력 하는 부분) 입력 하는 겁니다.

아래 사진을 보시면 이해 하기 쉬울 겁니다. 

google.js를 실행 하기 위한 명령어 입니다.

보시면 node google.js 다음에 /Users/.../bts1.jpg 이렇게 입력된 부분이 main 함수에서 inputFile로 들어가게 됩니다.

이제 실행 결과를 보겠습니다.

 

위 코드들을 실행한 결과물입니다.

보다시피 bts 멤버 7명이 다 인식이 되어서 나온걸 확인 할 수 있습니다.