AWS Rekognition 및 Node.js를 사용하여 이미지에서 텍스트 감지-JS 튜토리얼-php.cn

안녕하세요 여러분! 이 기사에서는 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;

로그인 후 복사