AWS Rekognition と Node.js を使用した画像内のテキスト検出

皆さんこんにちは！この記事では、AWS Rekognition と Node.js を使用して画像テキスト検出を実行する簡単なアプリケーションを作成します。

AWS Rekognition とは何ですか?

Amazon Rekognition は、アプリケーションに画像やビデオの分析を簡単に追加できるサービスです。テキスト検出、顔認識、さらには有名人検出などの機能を提供します。
Rekognition は S3 に保存されている画像やビデオを分析できますが、このチュートリアルでは、物事をシンプルにするために S3 を使用せずに作業します。
バックエンドには Express を、フロントエンドには React を使用します。

最初のステップ

始める前に、AWS アカウントを作成し、IAM ユーザーを設定する必要があります。これらをすでにお持ちの場合は、このセクションをスキップしてください。

IAM ユーザーの作成

• AWS にログインします: まず、AWS ルート アカウントにログインします。
• IAM を検索します: AWS コンソールで、IAM を検索して選択します。
• ユーザーセクションに移動し、ユーザーの作成をクリックします。
• ユーザー名を設定し、権限の設定で、ポリシーを直接アタッチを選択します。
• Rekognition ポリシー を検索して選択し、[次へ] をクリックしてユーザーを作成します。
• アクセス キーの作成: ユーザーを作成した後、ユーザーを選択し、[セキュリティ資格情報] タブでアクセス キーを作成します。アクセス キーとシークレット アクセス キーを含む .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 を設定します: aws configure を実行し、ダウンロードした .csv ファイルからアクセス キー、シークレット アクセス キー、リージョンを指定します。

プロジェクトディレクトリ

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

フロントエンドのセットアップ

npm create 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 を初期化し、サーバーを起動しています。 
• マルチパート フォーム データを処理するために multer を使用し、それを一時的にバッファーに保存しています。
• ユーザーから画像を取得するための投稿リクエストを作成します。これは非同期関数です。 
• ユーザーが画像をアップロードすると、その画像は req.file で利用できるようになります
• この req.file にはいくつかのプロパティが含まれており、画像データを 8 ビット バッファーとして保持する Buffer プロパティがあります。
• これが必要なので、その req.file.buffer を rekognition 関数に渡します。分析後、関数はオブジェクトの配列を返します。 
• これらのオブジェクトからユーザーにテキストを送信します。

フロントエンドに戻ります

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 リポジトリをチェックしてください

ありがとうございます!!!

フォローしてください: Medium、GitHub、LinkedIn、X、Instagram

以上がAWS Rekognition と Node.js を使用した画像内のテキスト検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。