Traducteur d’image alimenté par AI Utilisation de React JS, AWS Textract, Translate et Polly | par Sanchit | Juin 2025

Il s’agit d’une application complète construite à l’aide de la pile Mern (MongoDB, Express.js, React, Node.js). L’application permet aux utilisateurs de télécharger une image et, en retour, reçoivent du texte traduit avec la lecture audio dans cinq langues différentes. Il utilise les services d’IA d’AWS – textract, traduire et Polly – pour gérer l’extraction, la traduction et la synthèse de la parole d’image à texte.
- Amazon textract: Extrait le texte lisible des images téléchargées.
- Amazon traduit: Traduit ce texte extrait dans d’autres langues.
- Amazon Polly: Convertit le texte traduit en fichiers audio (format MP3).
Toutes ces opérations AWS sont en toute sécurité sur le backend. Le frontend n’interagit pas directement avec les SDK AWS ou les informations d’identification, garantissant la sécurité.
- L’utilisateur télécharge une image via le frontend React.
- Le backend (Node.js + Express) gère ce fichier téléchargé et communique avec les services AWS.
- AWS Textract extrait tout texte lisible de l’image.
- Le texte extrait est ensuite transmis à AWS traduit, ce qui le traduit en cinq langues prédéfinies.
- Chaque version traduite est ensuite envoyée à AWS Polly, qui génère l’audio (version parlée) pour chaque texte traduit.
- Le frontend React reçoit ces données et affiche à la fois le texte traduit et les lecteurs audio pour chaque langue.
Dossiers clés et ventilation des fichiers
Au lieu de coder les informations d’identification dans votre code, un moyen meilleur et plus sécurisé consiste à utiliser le CLI AWS pour configurer les informations d’identification mondialement pour votre machine.
Étape 1: Installer AWS CLI
Téléchargez et installez la CLI AWS à partir de la page officielle:
https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html
Une fois installé, vérifiez:
aws --version
Étape 2: Créez un utilisateur IAM avec un accès programmatique
- Accédez à AWS Console → IAM → Utilisateurs → Ajouter un utilisateur
- Donnez-lui un nom (par exemple,
image-translator-app
) - Sélectionner Accès programmatique
- Fixez ces autorisations:
AmazonTextractFullAccess, AmazonTranslateFullAccess, AmazonPollyFullAccess,
(Facultatif)AmazonS3FullAccess
Si vous utilisez S3 pour le stockage audio
5. Téléchargez les informations d’identification après la création.
Exécutez la commande suivante dans votre terminal:
aws configure
Il provoquera 4 valeurs:
AWS Access Key ID (None):
AWS Secret Access Key (None):
Default region name (None): ap-south-1
Default output format (None): json
Une fois terminées, ces informations d’identification seront stockées en toute sécurité:
~/.aws/credentials
~/.aws/config
Maintenant votre backend node.js (et aws-sdk
) reprendra automatiquement ces informations d’identification sans avoir besoin de .env
configuration de configuration ou de code
Étape 01: L’image que nous téléchargerons sur l’application
Étape 02: UI de l’application
Étape 03: sortie sur l’application (traduction et sortie audio)