Texterkennung in Bildern mit AWS Rekognition und Node.js

Hallo zusammen! In diesem Artikel erstellen wir eine einfache Anwendung zur Durchführung der Bildtexterkennung mithilfe von AWS Rekognition mit Node.js.

Was ist AWS Rekognition?

Amazon Rekognition ist ein Dienst, der es einfach macht, Ihren Anwendungen Bild- und Videoanalysen hinzuzufügen. Es bietet Funktionen wie Texterkennung, Gesichtserkennung und sogar die Erkennung von Prominenten.
Während Rekognition in S3 gespeicherte Bilder oder Videos analysieren kann, werden wir in diesem Tutorial zur Vereinfachung ohne S3 arbeiten.
Wir werden Express für das Backend und React für das Frontend verwenden.

Erste Schritte

Bevor wir beginnen, müssen Sie ein AWS-Konto erstellen und einen IAM-Benutzer einrichten. Wenn Sie diese bereits haben, können Sie diesen Abschnitt überspringen.

IAM-Benutzer erstellen

• Melden Sie sich bei AWS an: Melden Sie sich zunächst bei Ihrem AWS-Root-Konto an.
• Nach IAM suchen: Suchen Sie in der AWS-Konsole nach IAM und wählen Sie es aus.
• Gehen Sie zum Abschnitt Benutzer und klicken Sie auf Benutzer erstellen.
• Legen Sie den Benutzernamen fest und wählen Sie unter Berechtigungen festlegen die Option Richtlinien direkt anhängen.
• Suchen Sie nach der Anerkennungsrichtlinie, wählen Sie sie aus, klicken Sie dann auf Weiter und erstellen Sie den Benutzer.
• Zugriffsschlüssel erstellen: Nachdem Sie den Benutzer erstellt haben, wählen Sie den Benutzer aus und erstellen Sie auf der Registerkarte „Sicherheitsanmeldeinformationen“ einen Zugriffsschlüssel. Laden Sie unbedingt die CSV-Datei herunter, die Ihren Zugriffsschlüssel und Ihren geheimen Zugriffsschlüssel enthält.
• Ausführlichere Anweisungen finden Sie in der offiziellen AWS-Dokumentation: https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html

aws-sdk konfigurieren

• AWS CLI installieren: Installieren Sie die AWS CLI auf Ihrem System.
• Installation überprüfen: Öffnen Sie ein Terminal oder eine Eingabeaufforderung und geben Sie aws --version ein, um sicherzustellen, dass die CLI korrekt installiert ist.
• Konfigurieren Sie die AWS CLI: Führen Sie aws configure aus und geben Sie den Zugriffsschlüssel, den geheimen Zugriffsschlüssel und die Region aus der heruntergeladenen CSV-Datei an.

Projektverzeichnis

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

Frontend einrichten

npm create vite @latest . -- --template reagieren
Es wird das React-Projekt im Client-Ordner erstellt. 

In der 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;

Testen wir dies, indem wir sicherstellen, dass das Bild nach dem Absenden in der Konsole protokolliert wird.

Jetzt gehen wir zum Backend über und beginnen mit der Erstellung der Seele für dieses Projekt.

Initialisierung des Backends

im Serverordner

npm init -y 
npm install express cors nodemon multer @aws-sdk/client-rekognition 
Ich habe einen separaten Ordner für die Erkennung erstellt, um die Analyselogik zu verwalten und eine Datei in diesem Ordner zu erstellen.

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

Erklärung

• Wir initialisieren ein RekognitionClient-Objekt. Da wir das SDK bereits konfiguriert haben, können wir die geschweiften Klammern leer lassen.
• Wir erstellen eine asynchrone Funktion Reko, um das Bild zu verarbeiten. Initialisieren Sie in dieser Funktion ein DetectTextCommand-Objekt, das ein Bild in Bytes aufnimmt.
• Dieser DectedTextCommand wird speziell zur Texterkennung verwendet.
• Die Funktion wartet auf eine Antwort und gibt diese zurück.

Erstellen der API

Erstellen Sie im Serverordner eine Datei index.js oder einen beliebigen Namen.

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

Erklärung

• Express initialisieren und Server starten. 
• Wir verwenden den Multer, um die mehrteiligen Formulardaten zu verarbeiten und sie vorübergehend im Puffer zu speichern.
• Erstellen der Post-Anfrage, um das Bild vom Benutzer zu erhalten. Dies ist eine asynchrone Funktion. 
• Nachdem der Benutzer das Bild hochgeladen hat, ist das Bild in der Anforderungsdatei verfügbar 
• Diese req.file enthält einige Eigenschaften, darunter eine Buffer-Eigenschaft, die unsere Bilddaten als 8-Bit-Puffer speichert.
• Wir brauchen das, also übergeben wir diesen req.file.buffer an die Erkennungsfunktion. Nach der Analyse gibt die Funktion das Array von Objekten zurück. 
• Wir senden die Texte von diesen Objekten an den Benutzer.

Zurück zum 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;

• Verwenden Sie Axios, um das Bild zu veröffentlichen. und Speichern der Antwort im Textzustand. 
• Beim Anzeigen der Texte verwende ich vorerst den Index als Schlüssel, es wird jedoch nicht empfohlen, den Index als Schlüssel zu verwenden. 
• Ich habe auch einige zusätzliche Dinge hinzugefügt, wie den Ladestatus und einige Stile.

Endgültige Ausgabe

Nach dem Klicken auf die Schaltfläche „Bild hochladen“ verarbeitet das Backend das Bild und gibt den erkannten Text zurück, der dann dem Benutzer angezeigt wird.

Den vollständigen Code finden Sie in meinem: GitHub Repo

Vielen Dank!!!

Folgen Sie mir auf: Medium, GitHub, LinkedIn, X, Instagram

Das obige ist der detaillierte Inhalt vonTexterkennung in Bildern mit AWS Rekognition und Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!