Pengesanan Teks dalam Imej Menggunakan AWS Recognition dan Node.js

Hei semua! Dalam artikel ini, kami akan mencipta aplikasi mudah untuk melaksanakan pengesanan teks imej menggunakan Pengecaman AWS dengan Node.js.

Apakah itu AWS Recognition?

Amazon Recognition ialah perkhidmatan yang memudahkan untuk menambah analisis imej dan video pada aplikasi anda. Ia menawarkan ciri seperti pengesanan teks, pengecaman muka dan juga pengesanan selebriti.
Walaupun Recognition boleh menganalisis imej atau video yang disimpan dalam S3, untuk tutorial ini, kami akan berusaha tanpa S3 untuk memastikan perkara mudah.
Kami akan menggunakan Express untuk bahagian belakang dan React untuk bahagian hadapan.

Langkah Pertama

Sebelum kami bermula, anda perlu membuat akaun AWS dan menyediakan pengguna IAM. Jika anda sudah mempunyai ini, anda boleh melangkau bahagian ini.

Mencipta pengguna IAM

• Log masuk ke AWS: Mulakan dengan log masuk ke akaun akar AWS anda.
• Cari IAM: Dalam konsol AWS, cari IAM dan pilihnya.
• Pergi ke bahagian Pengguna dan klik Cipta Pengguna.
• Tetapkan nama pengguna dan di bawah Tetapkan Kebenaran, pilih Lampirkan dasar terus.
• Cari dan pilih Dasar Pengecaman, kemudian klik Seterusnya dan buat pengguna.
• Buat Kunci Akses: Selepas mencipta pengguna, pilih pengguna dan di bawah tab Bukti kelayakan keselamatan, buat kunci akses. Pastikan anda memuat turun fail .csv yang mengandungi kunci akses dan kunci akses rahsia anda.
• Untuk arahan yang lebih terperinci, rujuk dokumentasi rasmi AWS: https://docs.aws.amazon.com/IAM/latest/UserGuide/id_users_create.html

Mengkonfigurasi aws-sdk

• Pasang AWS CLI: Pasang AWS CLI pada sistem anda.
• Sahkan Pemasangan: Buka terminal atau command prompt dan taip aws --version untuk memastikan CLI dipasang dengan betul.
• Konfigurasikan AWS CLI: Jalankan konfigurasi aws dan sediakan kunci akses, kunci akses rahsia dan rantau daripada fail .csv yang anda muat turun.

Direktori Projek

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

Menyediakan bahagian hadapan

npm buat vite @terkini . -- --template bertindak balas
ia akan mencipta projek tindak balas dalam folder klien. 

Dalam 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;

Mari kita uji perkara ini dengan memastikan imej dilog masuk ke konsol selepas diserahkan.

Sekarang, Mari kita beralih ke bahagian belakang dan mula membuat jiwa, untuk projek ini.

Memulakan bahagian belakang

dalam folder pelayan

npm init -y 
npm install express cors nodemon multer @aws-sdk/client-recognition 
Saya telah mencipta folder berasingan untuk pengecaman, untuk mengendalikan logik menganalisis dan mencipta fail di dalam folder itu.

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

Penjelasan

• Kami memulakan objek RecognitionClient. Memandangkan kami telah mengkonfigurasi SDK, kami boleh membiarkan pendakap kosong.
• Kami mencipta fungsi async Reko untuk memproses imej. Dalam fungsi ini Mulakan objek DetectTextCommand, yang mengambil imej dalam Bait.
• DectedTextCommand ini digunakan khusus untuk pengesanan teks.
• Fungsi menunggu respons dan mengembalikannya.

Mencipta API

Dalam folder pelayan, cipta fail index.js atau nama yang anda mahukan.

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

Penjelasan

• Memulakan ekspres dan memulakan pelayan. 
• Kami menggunakan multer untuk mengendalikan data borang berbilang bahagian dan menyimpannya buat sementara waktu dalam Penampan.
• Membuat permintaan siaran untuk mendapatkan imej daripada pengguna. ini ialah fungsi async. 
• Selepas pengguna memuat naik imej, imej itu akan tersedia dalam fail req.
• Req.file ini mengandungi beberapa sifat, yang mana akan terdapat sifat Penampan yang menyimpan data imej kami sebagai penimbal 8-bit.
• Kami memerlukannya supaya kami menghantar req.file.buffer itu kepada fungsi pengecaman. selepas menganalisisnya, fungsi mengembalikan tatasusunan objek. 
• Kami menghantar teks daripada objek tersebut kepada pengguna.

Kembali ke bahagian hadapan

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;

• Menggunakan Axios untuk menyiarkan imej. dan menyimpan respons dalam keadaan teks. 
• Memaparkan teks, buat masa ini, saya menggunakan indeks sebagai Kunci, tetapi tidak digalakkan untuk menggunakan Indeks sebagai kunci. 
• Saya juga telah menambahkan beberapa perkara tambahan seperti keadaan pemuatan dan beberapa gaya.

Output Akhir

Selepas mengklik butang "Muat Naik Imej", bahagian belakang memproses imej dan mengembalikan teks yang dikesan, yang kemudiannya dipaparkan kepada pengguna.

Untuk kod lengkap, lihat saya: GitHub Repo

Terima Kasih!!!

Ikuti saya di: Sederhana, GitHub, LinkedIn, X, Instagram

Atas ialah kandungan terperinci Pengesanan Teks dalam Imej Menggunakan AWS Recognition dan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!