Rumah hujung hadapan web tutorial js Pengesanan Teks dalam Imej Menggunakan AWS Recognition dan Node.js

Pengesanan Teks dalam Imej Menggunakan AWS Recognition dan Node.js

Aug 26, 2024 pm 09:35 PM

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
Salin selepas log masuk

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;
Salin selepas log masuk

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);
  }
};
Salin selepas log masuk

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");
})
Salin selepas log masuk

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;
Salin selepas log masuk
  • 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

Text Detection in Images Using AWS Rekognition and Node.js

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ganti aksara rentetan dalam javascript Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Ganti aksara rentetan dalam javascript

periksa jQuery jika tarikh sah periksa jQuery jika tarikh sah Mar 01, 2025 am 08:51 AM

periksa jQuery jika tarikh sah

jQuery mendapatkan padding/margin elemen jQuery mendapatkan padding/margin elemen Mar 01, 2025 am 08:53 AM

jQuery mendapatkan padding/margin elemen

10 Tab Accordion JQuery 10 Tab Accordion JQuery Mar 01, 2025 am 01:34 AM

10 Tab Accordion JQuery

10 patut diperiksa plugin jQuery 10 patut diperiksa plugin jQuery Mar 01, 2025 am 01:29 AM

10 patut diperiksa plugin jQuery

HTTP Debugging dengan Node dan HTTP-Console HTTP Debugging dengan Node dan HTTP-Console Mar 01, 2025 am 01:37 AM

HTTP Debugging dengan Node dan HTTP-Console

jQuery tambah bar scroll ke div jQuery tambah bar scroll ke div Mar 01, 2025 am 01:30 AM

jQuery tambah bar scroll ke div

Tutorial Persediaan API Carian Google Custom Tutorial Persediaan API Carian Google Custom Mar 04, 2025 am 01:06 AM

Tutorial Persediaan API Carian Google Custom

See all articles