Créez une application Web Speech-to-Text avec Whisper, React et Node

Cet article démontre la construction d'une application de discours sur le texte en tirant parti de l'API Whisper d'Openai, React, Node.js et Ffmpeg. L'application accepte l'entrée audio, la traite à l'aide de Whisper et affiche la transcription résultante. La précision de Whisper, même avec des anglophones non natifs, est mis en évidence.

Caractéristiques de clé:

• Transcription précise: Emploie le chuchotement d'Openai pour la conversion de la parole de la parole à haute précision, même de la gestion des accents.
• react & node.js Intégration: utilise une pile JavaScript complète pour le développement et le déploiement transparents.
• Gestion sécurisée des clés de l'API: utilise des variables d'environnement pour le stockage de clés de l'API OpenAI sûr.
• La coupe audio avec FFMPEG: permet aux utilisateurs de sélectionner des segments audio spécifiques pour la transcription, l'amélioration de l'efficacité.
• Interface conviviale: offre une expérience utilisateur propre et intuitive avec des fonctionnalités telles que les téléchargements de fichiers et un sélecteur de temps.

Aperçu technique:

L'architecture d'application se compose d'un frontend React et d'un backend Node.js. Le frontend gère l'interaction utilisateur (téléchargement de fichiers, sélection de temps), tandis que le backend gère la communication de l'API avec le traitement des chuchotements et audio d'Openai à l'aide de FFMPEG. Le backend utilise dotenv, cors, multer, form-data, et axios pour la gestion des variables d'environnement, le partage de ressources croisées, les téléchargements de fichiers, la gestion des données du formulaire et les demandes d'API, respectivement. L'intégration ffmpeg, facilitée par fluent-ffmpeg, ffmetadata et ffmpeg-static, permet une coupe audio précise.

Configuration du projet:

Le projet est structuré avec des répertoires séparés frontend et backend. Le frontend React est initialisé à l'aide de create-react-app, et les packages nécessaires (axios, react-dropzone, react-select, react-toastify) sont installés. Le backend Node.js utilise des express.js et des packages (express, dotenv, cors, multer, form-data, axios, fluent-ffmpeg, ffmetadata, ffmpeg-static, nodemon) sont installés pour les fonctionnalités du serveur, l'interaction API et l'intégration FFMPEG.

Intégration de chuchotement:

Une route postale (/api/transcribe) gère les téléchargements audio, convertit l'audio en flux lisible, l'envoie à l'API Whisper et renvoie la transcription en JSON. La gestion des erreurs et les meilleures pratiques de sécurité sont mises en œuvre.

Intégration FFMPEG:

FFMPEG est utilisé pour réduire les segments audio en fonction des temps de début et de fin spécifiés par l'utilisateur. Une fonction utilitaire convertit le temps en secondes pour le traitement FFMPEG. L'audio coupé est ensuite envoyé à l'API Whisper.

Développement frontal:

Un composant personnalisé TimePicker, construit à l'aide de react-select, permet aux utilisateurs de sélectionner des heures de démarrage et de fin précises pour la transcription. Le composant d'application principal gère les téléchargements de fichiers, communique avec l'API backend et affiche les résultats de la transcription. Les notifications de toast fournissent des commentaires à l'utilisateur.

Déploiement:

L'article fournit des liens vers le frontend complet et les référentiels de code backend sur GitHub, facilitant le déploiement facile et la personnalisation plus approfondie.

Questions fréquemment posées (FAQ): L'article se termine par une section complète de la FAQ concernant les questions courantes sur le chuchotement, son intégration avec React et Node.js, précision, gestion des erreurs, coût et possibilités de contribution.

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!