Imaginez qu'un assistant IA écoute vos appels vidéo, note tout ce qui se dit, puis propose des suggestions, des réponses et des analyses en temps réel. Cette série vous montrera comment créer votre propre application de transcription qui fait exactement cela.
Vous pouvez trouver les grandes lignes de la série à venir ici.
À la fin de cette série de didacticiels, vous maîtriserez l'utilisation de Next.js, Strapi, ChatGPT et Whisper pour créer des applications full-stack intéressantes qui intègrent une technologie d'IA de pointe pour améliorer les fonctionnalités.
Vous trouverez ci-dessous une démo de ce que nous allons construire :
Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :
Les applications de transcription aident les gens à communiquer plus efficacement. Imaginez des environnements très bruyants ou dans lesquels il peut y avoir des barrières linguistiques et comment la conversion audio en texte assistée par l'IA pourrait aider. Ou imaginez comment cela pourrait vous aider à participer davantage aux conversations si vous avez une déficience auditive.
Les applications de transcription basées sur l'IA offrent un avantage unique dans la compréhension et l'analyse des réunions. En fournissant un enregistrement complet des conversations et des réponses, ces applications, comme la nôtre, exploitent des technologies telles que ChatGPT pour améliorer la clarté et fournir des informations précieuses.
Discutons brièvement de la technologie et des outils que nous utiliserons et de leur rôle pour aider cette application à se réaliser.
Strapi ou Strapi CMS est un système de gestion de contenu open source sans tête nous permettant de créer rapidement des API. Nous utiliserons Strapi CMS pour créer notre API personnalisée, qui accédera à ChatGPT, et nous utiliserons Strapi CMS pour stocker des données sur les transcriptions, telles que l'historique des conversations.
Next.js est un framework React qui simplifie le développement d'applications Web complexes et performantes. Il offre de nombreuses fonctionnalités intégrées, telles que le rendu côté serveur, le fractionnement automatique du code, l'optimisation des images et les routes API.
Créé par OpenAI, Whisper est un modèle de transcription et de reconnaissance vocale d'apprentissage automatique. Nous utiliserons l'API OpenAI pour nous connecter à Whisper pour la reconnaissance vocale et la transcription.
OpenAI a également créé ChatGPT, un chatbot IA capable de répondre aux questions et de produire divers résultats, tels que des articles, des essais, du code ou des e-mails. Nous nous connecterons àChatGPTpour expliquer et analyser notre texte transcrit.
Strapi Cloud est une plate-forme cloud qui permet aux développeurs de créer, de lancer et de maintenir facilement des applications et des services en ligne ; c'est là que nous hébergerons le backend Strapi pour l'application (nous utiliserons Vercel ou Netlify pour le frontend). Visitez Strapi Cloud pour en savoir plus sur les tarifs de Strapi Cloud et bien plus encore.
Créons notre répertoire frontend. Accédez au dossier principal, que nous appelleronstutoriel de transcription, et entrez la commande suivante dans le terminal.
npx créer-next-app transcrire-frontendAccédez à ce répertoire nouvellement créé et exécutez ce qui suit.
développeur de filCela devrait démarrer et exécuter le projet danshttp://localhost:3000, lorsque nous y accédons via le navigateur Web, nous devrions pouvoir voir l'image ci-dessous :
Faisons ici un peu de configuration préliminaire ; danstranscrire-frontend, accédez àpages/index.js. Ce sera le point d’entrée de notre application ; supprimez tout ce qui se trouve dans ce fichier et collez ce qui suit :
importer Head depuis 'next/head' ; importer des styles depuis '../styles/Home.module.css' ; exporter la fonction par défaut Home() { return (Strapi Trancrire Bienvenue àStrapi Transcription !
Installons certaines des bibliothèques que nous utiliserons sur le frontend. Premièrement, nous avons besoinenregistrementrtc, qui gérera le processus d'enregistrement et nous donnera accès aux données brutes capturées par le microphone de l'appareil. Ensuite, nous utiliseronslamejs, ce qui nous aidera à traiter les données pour les encoder au format MP3. Nous aurons également besoinaxiospour passer des appels réseau vers OpenAI Whisper, exécutez donc la commande suivante dans le terminal pour installer ces bibliothèques.
fil ajouter recordrtc @breezystack/lamejs axiosCréer un.env.localdans le répertoire racine, puis ajoutez la variable d'environnement ci-dessous avec votre clé API OpenAI :
NEXT_PUBLIC_OPENAI_API_KEY="Collez votre clé API ici"Nous utiliserons le modèle conteneur/présentation pour structurer l’application. Cela séparera la logique de la présentation (rendu de l'interface utilisateur). Cela rend les composants plus faciles à comprendre, facilite la réutilisation et est plus testable. La disposition de notre structure de fichiers est ci-dessous :TranscrireConteneurhébergera tout notre état et notre logique. Ensuite, nous avons lecomposantsrépertoire, qui sera de présentation, et leutilitairesrépertoire pour gérer l’enregistrement et la transcription.
composants/ RecordingControls.js Conteneurs TranscriptionDisplay.js/ Pages TranscribeContainer.js/ _app.js index.js hooks/ useAudioRecorder.js utils/ transcriptionService.jsenregistrementrtcTout d’abord, apprenons comment capturer de l’audio. Nous utiliseronsenregistrementrtc, une bibliothèque Javascript qui utilise l'API Web Real-Time Communication (WebRTC) pour capturer les flux multimédias du microphone du système. WebRTC fournit une interface facile à utiliser pour gérer les enregistrements.
Créez un répertoire nommécrochetspuis un fichier à l'intérieur appeléutiliserAudioRecorder.js. Nous conserverons toute la logique et l’état pour l’enregistrement audio dans ce hook ; si l'application grandit, cela nous permettra d'utiliser la logique ailleurs dans l'application sans avoir...
[Courte citation de 8% de l'article original]