Détection de texte dans les images à l'aide d'AWS Rekognition et Node.js

Salut tout le monde ! Dans cet article, nous allons créer une application simple pour effectuer la détection de texte d'image à l'aide d'AWS Rekognition avec Node.js.

Qu'est-ce qu'AWS Rekognition ?

Amazon Rekognition est un service qui facilite l'ajout d'analyses d'images et de vidéos à vos applications. Il offre des fonctionnalités telles que la détection de texte, la reconnaissance faciale et même la détection de célébrités.
Bien que Rekognition puisse analyser des images ou des vidéos stockées dans S3, pour ce didacticiel, nous travaillerons sans S3 pour simplifier les choses.
Nous utiliserons Express pour le backend et React pour le frontend.

Premiers pas

Avant de commencer, vous devrez créer un compte AWS et configurer un utilisateur IAM. Si vous les possédez déjà, vous pouvez ignorer cette section.

Création d'un utilisateur IAM

• Connectez-vous à AWS : Commencez par vous connecter à votre compte racine AWS.
• Rechercher IAM : Dans la console AWS, recherchez IAM et sélectionnez-le.
• Allez dans la section Utilisateurs et cliquez sur Créer un utilisateur.
• Définissez le nom d'utilisateur et sous Définir les autorisations, choisissez Attacher directement les politiques.
• Recherchez et sélectionnez la Politique de reconnaissance, puis cliquez sur Suivant et créez l'utilisateur.
• Créer des clés d'accès : Après avoir créé l'utilisateur, sélectionnez l'utilisateur et sous l'onglet Informations d'identification de sécurité, créez une clé d'accès. Assurez-vous de télécharger le fichier .csv contenant votre clé d'accès et votre clé d'accès secrète.
• Pour des instructions plus détaillées, reportez-vous à la documentation officielle d'AWS : https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html

Configuration aws-sdk

• Installez AWS CLI : Installez l'AWS CLI sur votre système.
• Vérifier l'installation : Ouvrez un terminal ou une invite de commande et tapez aws --version pour vous assurer que la CLI est correctement installée.
• Configurez l'AWS CLI : Exécutez aws configure et fournissez la clé d'accès, la clé d'accès secrète et la région à partir du fichier .csv que vous avez téléchargé.

Répertoire des projets

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

Configuration du frontend

npm create vite @latest . --- --template réagir
il créera le projet React dans le dossier client. 

Dans l'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;

Testons cela en nous assurant que l'image est enregistrée sur la console après la soumission.

Maintenant, passons au backend et commençons à créer l'âme de ce projet.

Initialisation du backend

dans le dossier du serveur

npm init -y 
npm install express cors nodemon multer @aws-sdk/client-rekognition 
J'ai créé un dossier séparé pour la reconnaissance, pour gérer l'analyse de la logique et créer un fichier dans ce dossier.

//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);
  }
};

Explication

• Nous initialisons un objet RekognitionClient. Puisque nous avons déjà configuré le SDK, nous pouvons laisser les accolades vides.
• Nous créons une fonction asynchrone Reko pour traiter l'image. Dans cette fonction, initialisez un objet DetectTextCommand, qui prend une image en octets.
• Cette DectedTextCommand est spécifiquement utilisée pour la détection de texte.
• La fonction attend une réponse et la renvoie.

Création de l'API

Dans le dossier du serveur, créez un fichier index.js ou quel que soit le nom de votre choix.

//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");
})

Explication

• Initialisation de l'express et démarrage du serveur. 
• Nous utilisons le multer pour gérer les données du formulaire en plusieurs parties et les stockons temporairement dans le tampon.
• Création de la demande de publication pour obtenir l'image de l'utilisateur. c'est une fonction asynchrone. 
• Une fois que l'utilisateur a téléchargé l'image, l'image sera disponible dans le fichier requis 
• Ce fichier req.contient certaines propriétés, en ce sens qu'il y aura une propriété Buffer qui contiendra nos données d'image sous forme de tampon 8 bits.
• Nous en avons besoin, nous transmettons donc ce req.file.buffer à la fonction de reconnaissance. après l'avoir analysé, la fonction renvoie le tableau d'objets. 
• Nous envoyons les textes de ces objets à l'utilisateur.

Revenir au frontend

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;

• Utiliser Axios pour publier l'image. et stocker la réponse dans l'état du texte. 
• Affichage des textes, pour l'instant, j'utilise l'index comme clé, mais il n'est pas encouragé à utiliser l'index comme clé. 
• J'ai également ajouté quelques éléments supplémentaires comme l'état de chargement et certains styles.

Sortie finale

Après avoir cliqué sur le bouton "Télécharger l'image", le backend traite l'image et renvoie le texte détecté, qui est ensuite affiché à l'utilisateur.

Pour le code complet, consultez mon : GitHub Repo

Merci !!!

Suivez-moi sur : Medium, GitHub, LinkedIn, X, Instagram

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!