AWS Rekognition と Node.js を使用した画像内のテキスト検出-jsチュートリアル-php.cn

皆さんこんにちは！この記事では、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 (    
  
 
 ); } 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 (     
  
 
  {pending && Loading...
} {texts.length > 0 && (  {texts.map((text, index) => ( {text}
 ))} 
 )} 
 
 ); } export default App;

ログイン後にコピー