Tutorial de ElevenLabs: Crea historias atractivas con Voice AI

Construir una Generador de Historias y una Aplicación de Voz en Off con React y ElevenLabs

En la era digital actual, la intersección de la inteligencia artificial y la narración creativa es más emocionante que nunca. Este tutorial te guiará a través de la creación de una aplicación de React que genera historias nuevas y proporciona funcionalidad de voz en off utilizando ElevenLabs y la tecnología ChatGPT de OpenAI.

Resultados del Aprendizaje

• Comprender la funcionalidad de la tecnología de voz de ElevenLabs.
• Familiarizarse con ChatGPT-3.5-turbo de OpenAI (LLM).
• Crear una aplicación de React desde cero.
• Utilizar Material-UI para construir una interfaz de usuario receptiva.

Requisitos Previos

Para seguir este tutorial, asegúrate de tener las siguientes herramientas y cuentas:

• Visual Studio Code: Descarga la versión compatible para tu sistema operativo o usa editores de código como IntelliJ IDEA o PyCharm.
• Cuenta de ElevenLabs: Crea una cuenta gratuita en ElevenLabs y obtén tu clave API navegando a tu perfil.
• Cuenta de OpenAI: Regístrate para obtener una cuenta gratuita de OpenAI y obtener tu clave API para ChatGPT.
• ¡Una taza de café y una computadora portátil!

Comenzando

Crea un Nuevo Proyecto

Abre Visual Studio Code y crea una nueva carpeta llamada elevenlabs-tutorial.

Configuración del Backend

Crea una Carpeta para el Backend

Dentro de tu directorio de proyecto, crea una carpeta adicional para el backend.

Crea un Nuevo Archivo Python

Abre tu terminal y ejecuta los siguientes comandos para configurar tu backend:

mkdir backend cd backend touch api.py

Crea un Entorno Virtual

Configura un entorno virtual de Python para gestionar las dependencias:

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

Instala Dependencias

Instala todas las dependencias necesarias:

pip install fastapi uvicorn pip install python-multipart

Importa Todas las Dependencias

Abre api.py y añade tus importaciones:

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

Implementa los Endpoints de la API

Define los endpoints para generación de voz y generación de historias:

• Generación de Voz: Implementa la lógica para interactuar con la API de ElevenLabs.
• Generación de Historias: Conéctate a ChatGPT de OpenAI para crear historias.

Ejecuta el Backend

Para iniciar tu servidor FastAPI, usa:

uvicorn api:app --reload

Configuración del Frontend

Crea una Nueva Aplicación React

En una nueva ventana de terminal, crea tu aplicación React:

npx create-react-app frontend

Instala Todas las Dependencias

Navega a tu carpeta React e instala Material-UI:

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

Implementa la Interfaz de Usuario

Abre src/App.js y reemplaza su contenido con el siguiente código:

import { Box, Button, TextareaAutosize, Typography } from '@mui/material'; // Añadir importaciones necesarias

Define las variables de estado y las funciones necesarias:

• handleQueryChange: Actualiza el estado con la entrada del usuario.
• generateStory: Llama a la API de ChatGPT para generar historias.
• generateAudio: Usa la API de ElevenLabs para convertir texto en audio.

Crea una Carpeta de Audio

Crea una nueva carpeta llamada audios en el directorio src para almacenar los archivos de audio.

Ejecuta la Aplicación

Ejecuta tu aplicación React:

npm start

Tu aplicación debería abrirse en http://localhost:3000. ¡Intenta generar una historia corta sobre un gato o gatitos!

Conclusión

Este tutorial proporcionó instrucciones paso a paso para crear una aplicación funcional que genera historias y voces en off. Has aprendido sobre el uso de herramientas poderosas como React, FastAPI, ElevenLabs y ChatGPT de OpenAI. ¡Feliz codificación!