ElevenLabs Tutorial: Create Engaging Stories with Voice AI

Build a Story Generator and Voiceover App with React and ElevenLabs

In today's digital era, the intersection of artificial intelligence and creative storytelling is more exciting than ever. This tutorial will guide you through the creation of a React app that generates brand new stories and provides voice-over functionality using ElevenLabs and OpenAI’s ChatGPT technology.

Learning Outcomes

• Understand the functionality of ElevenLabs voice technology.
• Familiarize yourself with OpenAI's ChatGPT-3.5-turbo (LLM).
• Create a React app from scratch.
• Utilize Material-UI for building a responsive user interface.

Prerequisites

To follow along with this tutorial, make sure you have the following tools and accounts:

• Visual Studio Code: Download the compatible version for your operating system or use code editors like IntelliJ IDEA or PyCharm.
• ElevenLabs Account: Create a free account at ElevenLabs and obtain your API key by navigating to your profile.
• OpenAI Account: Sign up for a free OpenAI account to get your API key for ChatGPT.
• A cup of coffee and a laptop!

Getting Started

Create a New Project

Open Visual Studio Code and create a new folder named elevenlabs-tutorial.

Backend Setup

Create a Folder for Backend

Inside your project directory, create an additional folder for the backend.

Create a New Python File

Open your terminal and run the following commands to set up your backend:

mkdir backend cd backend touch api.py

Create a Virtual Environment

Set up a Python virtual environment to manage dependencies:

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

Install Dependencies

Install all necessary dependencies:

pip install fastapi uvicorn pip install python-multipart

Import All Dependencies

Open api.py and add your imports:

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

Implement the API Endpoints

Define endpoints for voice generation and story generation:

• Voice Generation: Implement logic to interact with ElevenLabs API.
• Story Generation: Connect to OpenAI’s ChatGPT for creating stories.

Run the Backend

To start your FastAPI server, use:

uvicorn api:app --reload

Frontend Setup

Create a New React App

In a new terminal window, create your React app:

npx create-react-app frontend

Install All Dependencies

Navigate into your React folder and install Material-UI:

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

Implement the UI

Open src/App.js and replace its content with the following code:

import { Box, Button, TextareaAutosize, Typography } from '@mui/material'; // Add required imports

Define state variables and necessary functions:

• handleQueryChange: Update state with user input.
• generateStory: Call the ChatGPT API to generate stories.
• generateAudio: Use ElevenLabs API to convert text to audio.

Create an Audio Folder

Create a new folder named audios in the src directory to store the audio files.

Run the App

Run your React app:

npm start

Your app should open at http://localhost:3000. Try generating a short story about a cat or kittens!

Conclusion

This tutorial provided step-by-step instructions to create a functional app that generates stories and voiceovers. You’ve learned about using powerful tools like React, FastAPI, ElevenLabs, and OpenAI’s ChatGPT. Happy coding!