Tutoriel ElevenLabs : Créez des histoires captivantes avec l'IA vocale

Créer un générateur d'histoires et une application de voix off avec React et ElevenLabs

À l'ère numérique d'aujourd'hui, l'intersection de l'intelligence artificielle et de la narration créative est plus excitante que jamais. Ce tutoriel vous guidera à travers la création d'une application React qui génère de nouvelles histoires et fournit une fonctionnalité de voix off en utilisant ElevenLabs et la technologie ChatGPT d'OpenAI.

Résultats d'apprentissage

• Comprendre la fonctionnalité de la technologie vocale d'ElevenLabs.
• Se familiariser avec ChatGPT-3.5-turbo d'OpenAI (LLM).
• Créer une application React à partir de zéro.
• Utiliser Material-UI pour construire une interface utilisateur réactive.

Prérequis

Pour suivre ce tutoriel, assurez-vous d'avoir les outils et les comptes suivants :

• Visual Studio Code : Téléchargez la version compatible pour votre système d'exploitation ou utilisez des éditeurs de code comme IntelliJ IDEA ou PyCharm.
• Compte ElevenLabs : Créez un compte gratuit sur ElevenLabs et obtenez votre clé API en accédant à votre profil.
• Compte OpenAI : Inscrivez-vous pour un compte OpenAI gratuit afin d'obtenir votre clé API pour ChatGPT.
• Une tasse de café et un ordinateur portable !

Commencer

Créer un nouveau projet

Ouvrez Visual Studio Code et créez un nouveau dossier nommé elevenlabs-tutorial.

Configuration du backend

Créer un dossier pour le backend

À l'intérieur de votre répertoire de projet, créez un dossier supplémentaire pour le backend.

Créer un nouveau fichier Python

Ouvrez votre terminal et exécutez les commandes suivantes pour configurer votre backend :

mkdir backend cd backend touch api.py

Créer un environnement virtuel

Configurez un environnement virtuel Python pour gérer les dépendances :

python -m venv venv source venv/bin/activate # Pour Mac/Linux venv\Scripts\activate # Pour Windows

Installer les dépendances

Installez toutes les dépendances nécessaires :

pip install fastapi uvicorn pip install python-multipart

Importer toutes les dépendances

Ouvrez api.py et ajoutez vos imports :

from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware

Implémenter les points de terminaison de l'API

Définissez des points de terminaison pour la génération vocale et la génération d'histoires :

• Génération vocale : Implémentez la logique pour interagir avec l'API d'ElevenLabs.
• Génération d'histoires : Connectez-vous à ChatGPT d'OpenAI pour créer des histoires.

Exécuter le Backend

Pour démarrer votre serveur FastAPI, utilisez :

uvicorn api:app --reload

Configuration du frontend

Créer une nouvelle application React

Dans une nouvelle fenêtre de terminal, créez votre application React :

npx create-react-app frontend

Installer toutes les dépendances

Accédez à votre dossier React et installez Material-UI :

cd frontend npm install @mui/material @emotion/react @emotion/styled use-sound

Implémenter l'interface utilisateur

Ouvrez src/App.js et remplacez son contenu par le code suivant :

import { Box, Button, TextareaAutosize, Typography } from '@mui/material'; // Ajouter les imports requis

Définissez des variables d'état et des fonctions nécessaires :

• handleQueryChange : Mettre à jour l'état avec les saisies de l'utilisateur.
• generateStory : Appeler l'API ChatGPT pour générer des histoires.
• generateAudio : Utiliser l'API d'ElevenLabs pour convertir le texte en audio.

Créer un dossier Audio

Créez un nouveau dossier nommé audios dans le répertoire src pour stocker les fichiers audio.

Exécuter l'application

Exécutez votre application React :

npm start

Votre application devrait s'ouvrir à http://localhost:3000. Essayez de générer une courte histoire sur un chat ou des chatons !

Conclusion

Ce tutoriel a fourni des instructions étape par étape pour créer une application fonctionnelle qui génère des histoires et des voix off. Vous avez appris à utiliser des outils puissants comme React, FastAPI, ElevenLabs et ChatGPT d'OpenAI. Bonne programmation !