AWS Rekognition 및 Node.js를 사용하여 이미지에서 텍스트 감지

안녕하세요 여러분! 이 기사에서는 Node.js와 함께 AWS Rekognition을 사용하여 이미지 텍스트 감지를 수행하는 간단한 애플리케이션을 생성하겠습니다.

AWS Rekognition이란 무엇입니까?

Amazon Rekognition은 애플리케이션에 이미지 및 비디오 분석을 쉽게 추가할 수 있게 해주는 서비스입니다. 텍스트 감지, 얼굴 인식, 유명 인사 감지 등의 기능을 제공합니다.
Rekognition은 S3에 저장된 이미지나 비디오를 분석할 수 있지만, 이 튜토리얼에서는 작업을 단순하게 유지하기 위해 S3 없이 작업하겠습니다.
우리는 백엔드에 Express를 사용하고 프론트엔드에 React를 사용할 것입니다.

첫걸음

시작하기 전에 AWS 계정을 생성하고 IAM 사용자를 설정해야 합니다. 이미 갖고 계시다면 이 섹션을 건너뛰셔도 됩니다.

IAM 사용자 생성

• AWS에 로그인: 먼저 AWS 루트 계정에 로그인하세요.
• IAM 검색: AWS 콘솔에서 IAM을 검색하여 선택합니다.
• 사용자 섹션으로 이동하여 사용자 만들기를 클릭합니다.
• 사용자 이름을 설정하고 권한 설정에서 정책 직접 연결을 선택합니다.
• 인식 정책을 검색하여 선택한 후 다음을 클릭하고 사용자를 생성하세요.
• 액세스 키 생성: 사용자를 생성한 후 사용자를 선택하고 보안 자격 증명 탭에서 액세스 키를 생성합니다. 액세스 키와 비밀 액세스 키가 포함된 .csv 파일을 다운로드하세요.
• 자세한 지침은 공식 AWS 설명서(https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html)를 참조하세요.

aws-sdk 구성

• AWS CLI 설치: 시스템에 AWS CLI를 설치합니다.
• 설치 확인: 터미널이나 명령 프롬프트를 열고 aws --version을 입력하여 CLI가 올바르게 설치되었는지 확인하세요.
• AWS CLI 구성: awsconfigure를 실행하고 다운로드한 .csv 파일에서 액세스 키, 보안 액세스 키 및 리전을 제공합니다.

프로젝트 디렉토리

my-directory/
│
├── client/
│   └── src/
│       └── App.jsx
│   └── public/
│   └── package.json
│   └── ... (other React project files)
│
└── server/
    ├── index.js
    └── rekognition/
        └── aws.rek.js

프런트엔드 설정

npm은 vite @latest를 만듭니다. -- --템플릿 반응
클라이언트 폴더에 반응 프로젝트가 생성됩니다. 

App.jsx에서

import { useState } from "react";

function App() {
  const [img, setImg] = useState(null);

  const handleImg = (e) => {
    setImg(e.target.files[0]);  // Store the selected image in state
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!img) return;

    const formData = new FormData();
    formData.append("img", img);
    console.log(formData);      // Log the form data to the console
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="file" name="img" accept="image/*" onChange={handleImg} />
        <br />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

제출 후 이미지가 콘솔에 기록되는지 확인하여 이를 테스트해 보겠습니다.

이제 백엔드로 이동하여 이 프로젝트의 영혼을 만들어 보겠습니다.

백엔드 초기화

서버 폴더

npm init -y 
npm install express cors nodemon multer @aws-sdk/client-rekognition 
로직 분석을 처리하고 해당 폴더 안에 파일을 생성하기 위해 인식을 위한 별도의 폴더를 만들었습니다.

//aws.rek.js

import {
  RekognitionClient,
  DetectTextCommand,
} from "@aws-sdk/client-rekognition";

const client = new RekognitionClient({});

export const Reko = async (params) => {
  try {
      const command = new DetectTextCommand(
          {
              Image: {
                  Bytes:params  //we are using Bytes directly instead of S3
              }
        }
    );
    const response = await client.send(command);
    return response
  } catch (error) {
    console.log(error.message);
  }
};

설명

• RekognitionClient 객체를 초기화합니다. 이미 SDK를 구성했으므로 중괄호를 비워 둘 수 있습니다.
• 이미지를 처리하기 위해 비동기 함수 Reko를 만듭니다. 이 함수에서는 바이트 단위로 이미지를 가져오는 DetectTextCommand 개체를 초기화합니다.
• 이 DectedTextCommand는 텍스트 감지에 특별히 사용됩니다.
• 함수는 응답을 기다렸다가 반환합니다.

API 생성

서버 폴더에서 index.js 파일이나 원하는 이름을 만드세요.

//index.js

import express from "express"
import multer from "multer"
import cors from "cors"
import { Reko } from "./rekognition/aws.rek.js";

const app = express()
app.use(cors())
const storage = multer.memoryStorage()
const upload = multer()
const texts = []
let data = []

app.post("/img", upload.single("img"), async(req,res) => {
    const file = req.file
    data = await Reko(file.buffer)
    data.TextDetections.map((item) => {
        texts.push(item.DetectedText)
    })
    res.status(200).send(texts)
})

app.listen(3000, () => {
    console.log("server started");
})

설명

• Express를 초기화하고 서버를 시작합니다. 
• 멀터를 사용하여 다중 부분 양식 데이터를 처리하고 이를 임시로 버퍼에 저장합니다.
• 사용자로부터 이미지를 가져오기 위해 게시물 요청을 생성합니다. 이것은 비동기 기능입니다. 
• 사용자가 이미지를 업로드하면 해당 이미지는 req.file에서 사용할 수 있습니다.
• 이 req.file에는 이미지 데이터를 8비트 버퍼로 보유하는 Buffer 속성이 있다는 점에서 몇 가지 속성이 포함되어 있습니다.
• 이것이 필요하므로 해당 req.file.buffer를 인식 기능에 전달합니다. 이를 분석한 후 함수는 객체 배열을 반환합니다. 
• 해당 개체의 텍스트를 사용자에게 보냅니다.

프런트엔드로 돌아옴

import axios from "axios";
import { useState } from "react";
import "./App.css"; 

function App() {
  const [img, setImg] = useState(null);
  const [pending, setPending] = useState(false);
  const [texts, setTexts] = useState([]);

  const handleImg = (e) => {
    setImg(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!img) return; 

    const formData = new FormData();
    formData.append("img", img);

    try {
      setPending(true);
      const response = await axios.post("http://localhost:3000/img", formData);
      setTexts(response.data);
    } catch (error) {
      console.log("Error uploading image:", error);
    } finally {
      setPending(false);
    }
  };

  return (
    <div className="app-container">
      <div className="form-container">
        <form onSubmit={handleSubmit}>
          <input type="file" name="img" accept="image/*" onChange={handleImg} />
          <br />
          <button type="submit" disabled={pending}>
            {pending ? "Uploading..." : "Upload Image"}
          </button>
        </form>
      </div>

      <div className="result-container">
        {pending && <h1>Loading...</h1>}
        {texts.length > 0 && (
          <ul>
            {texts.map((text, index) => (
              <li key={index}>{text}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default App;

• Axios를 사용하여 이미지를 게시합니다. 응답을 텍스트 상태로 저장합니다. 
• 텍스트를 표시하면서 지금은 인덱스를 키로 사용하고 있지만 인덱스를 키로 사용하는 것은 권장되지 않습니다. 
• 로드 상태 및 일부 스타일과 같은 몇 가지 추가 사항도 추가했습니다.

최종 출력

'이미지 업로드' 버튼을 클릭하면 백엔드가 이미지를 처리하고 감지된 텍스트를 반환한 다음 사용자에게 표시합니다.

전체 코드를 보려면 내 GitHub Repo를 확인하세요

감사합니다!!!

팔로우: Medium, GitHub, LinkedIn, X, Instagram

위 내용은 AWS Rekognition 및 Node.js를 사용하여 이미지에서 텍스트 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!