클라우드/AWS

[AWS ML API camp] - Amazon Rekognition, Textract 이용해서 웹 앱에 적용하기

dayeonsheep 2024. 1. 6. 17:24

amazon sagemaker - ml 서비스
-완전 관리형 기계 학습 서비스  - 서버 따로 관리 필요 없음 
sagemaker studio lab 
 
amazon bedrock - 생성형 ai 애플리케이션 위한 서비스 - 서버리스임
 
partyrock - 코딩 필요 없음 
 
amazon rekognition - 사전에 트레이닝된 컴퓨터비전을 활용한 여러 기능 제공 서비스
컨텐츠를 넣으면 API응답으로 결과를 줌
 
1: label detection - 이미지의 피사체, 장면 등 추측하고 범위를 지정한 결과를 제공 
2: 얼굴 분석 기능 
input- 얼굴 사진, 응답 - 신뢰도를 포함한 얼굴 분석
3: 얼굴 비교 기능 
input- 사진 두장, 두 사진 속 인물 탐지, 유사도 기반 비교
 
image pricing - API가 속한 그룹에 따라 요금이 상이 / 단일 이미지에서 여러 API를 실행하면 여러 이미지를 처리하는 식으로 계산
 
Amazon textract - 문서 텍스트를 감지 분석하는 OCR 기능 제공 서비스
텍스트, 손글씨 Input 다 가능
- 콘솔에서 샘플문서도 제공해주고 있음 
 
textract pricing - 프로세싱되는 페이지 수에 비례함
 
 
-
 
웹 앱에 머신러닝 기능을 추가하는 방법 배우기
 
 
이미지를. 페이로드로 넘기고 
sdk의 파라미터를 어떻게 넘길 수 있는지 이런 것 들을 해볼 것...
 
At the end of this workshop, you will be able to:

  1. Describe when to use Amazon Rekognition, Amazon Textract, or both
  2. Call the Amazon Rekognition and/or Amazon Textract API from a web app
  3. Interpret the data returned by the Application Programmer Interface

 
어떤 게 뷰로 작성되어 있나?
대학에서 사용하는 문서 스캔 AcadeML이라는 가상의 웹 앱
사진을 분류하거나 사진의 text를 뽑아내는 기능을 추가하기! 
 
 
https://github.com/aws-cloud-clubs/2024-aws-ml-camp-workshop-guide/

LAB 2 : 기존 웹앱에 Amazon Textract 추가하기

2024 AWS ML camp Workshop Studio Documentation (Translated in Korean) - aws-cloud-clubs/2024-aws-ml-camp-workshop-guide

github.com

 
이 깃헙 lab 그대로 따라갔음 ~~

우리 사진 즉석으로 넣었더니 
finger, hand, thumbs up 까지 잘 인식하는 모습을 확인할 수 있다 ㅎㅎ

이 labels 개수랑 confidence 조절하는 건
 

export async function analyzeImageML(type, imageData) {
  const uimage_bytes = base64ToUint8Array(imageData.split("data:application/octet-stream;base64,")[1]);
  const params = {
    Image: { Bytes: uimage_bytes },
    MaxLabels: 15,
    MinConfidence: 60,
  };

해당 MaxLabels 부분 == 개수 조절
MinConfidence == 최소 일치하는 비율 % 조절하기
 

import { Buffer } from "buffer";
import { RekognitionClient, DetectLabelsCommand } from "@aws-sdk/client-rekognition";
import { DetectDocumentTextCommand, TextractClient } from "@aws-sdk/client-textract";

const creds = {
  region: import.meta.env.VITE_AWS_REGION,
  credentials: {
    accessKeyId: import.meta.env.VITE_AWS_ACCESS_KEY_ID,
    secretAccessKey: import.meta.env.VITE_AWS_SECRET_ACCESS_KEY,
    sessionToken: import.meta.env.VITE_AWS_SESSION_TOKEN, // leave out if not in hosted workshop
  },
};

let rekognitionClient = null;
let textractClient = null;

export async function analyzeImageML(type, imageData) {
  const uimage_bytes = base64ToUint8Array(imageData.split("data:application/octet-stream;base64,")[1]);
  const params = {
    Image: { Bytes: uimage_bytes },
    MaxLabels: 15,
    MinConfidence: 60,
  };
  
  var returnData = null;
  try {
    if (type == "labels") {
      // If the client has not been initalized yet, create it
      if (!rekognitionClient)  
        rekognitionClient = new RekognitionClient(creds); // pass in the creds as parameter
      const query = new DetectLabelsCommand(params);
      let response = await rekognitionClient.send(query);        
      returnData = {
        type: "success",
        text: response,
      };
  } else if (type == "text") {
      if (!textractClient) 
        textractClient = new TextractClient(creds);
      const params = {
        Document: { Bytes: uimage_bytes },
      };
      const query = new DetectDocumentTextCommand(params);
      let response = await textractClient.send(query);
      returnData = {
        type: "success",
        text: response,
      };  
    }
  } catch (error) {
    returnData = {
      type: "error" /* success info warning error */,
      text: error.message,
    };
  }
  return JSON.stringify(returnData);  
}

// imageData is string with data:application/octet-stream;base64,...
function base64ToUint8Array(base64Data) {
  const decoded = Buffer.from(base64Data, "base64");
  const bytes = new Uint8Array(
    decoded.buffer,
    decoded.byteOffset,
    decoded.byteLength
  );
  return bytes;
}

최종 코드 ! 
 
detect labels 눌렀을 때 
deteched? 에러가 났었는데 
 
.env.local 파일에서

VITE_AWS_REGION="us-east-1" //이 부분
VITE_AWS_ACCESS_KEY_ID = "ASIAUQ6H4JX2M2ET35PA"
VITE_AWS_SECRET_ACCESS_KEY="hVc5orAMtSCG4wTAqsBshBnmou9zPUzl/iGKIiBn"
VITE_AWS_SESSION_TOKEN="₩₩"

VITE_AWS_REGION="us-east-1" 에서 u를 한 번 더 입력해서
오타 때문에 난 에러였다
 

 
camp 완료 했다는 귀여운 벳지도 받았다