ElfLabs Tutorial: Erstellen Sie ansprechende Geschichten mit Voice AI

Erstellen Sie einen Geschichtengenerator und eine Sprachübertragungs-App mit React und ElevenLabs

In der heutigen digitalen Ära ist die Schnittstelle von künstlicher Intelligenz und kreativem Geschichtenerzählen spannender denn je. Dieses Tutorial führt Sie durch die Erstellung einer React-App, die brandneue Geschichten generiert und Sprachübertragungsfunktionen mit Hilfe von ElevenLabs und OpenAIs ChatGPT-Technologie bereitstellt.

Lernergebnisse

• Verstehen der Funktionsweise der Sprachtechnologie von ElevenLabs.
• Sich mit OpenAIs ChatGPT-3.5-turbo (LLM) vertrautmachen.
• Erstellen einer React-App von Grund auf.
• Material-UI zur Erstellung einer responsiven Benutzeroberfläche nutzen.

Voraussetzungen

Um diesem Tutorial zu folgen, stellen Sie sicher, dass Sie über die folgenden Tools und Konten verfügen:

• Visual Studio Code: Laden Sie die kompatible Version für Ihr Betriebssystem herunter oder verwenden Sie Code-Editoren wie IntelliJ IDEA oder PyCharm.
• ElevenLabs-Konto: Erstellen Sie ein kostenloses Konto bei ElevenLabs und erhalten Sie Ihren API-Schlüssel, indem Sie zu Ihrem Profil navigieren.
• OpenAI-Konto: Melden Sie sich für ein kostenloses OpenAI-Konto an, um Ihren API-Schlüssel für ChatGPT zu erhalten.
• Eine Tasse Kaffee und einen Laptop!

Erste Schritte

Neues Projekt erstellen

Öffnen Sie Visual Studio Code und erstellen Sie einen neuen Ordner mit dem Namen elevenlabs-tutorial.

Backend-Setup

Ordner für Backend erstellen

Erstellen Sie innerhalb Ihres Projektverzeichnisses einen zusätzlichen Ordner für das Backend.

Neue Python-Datei erstellen

Öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus, um Ihr Backend einzurichten:

mkdir backend cd backend touch api.py

Virtuelle Umgebung erstellen

Richten Sie eine Python-virtuelle Umgebung ein, um Abhängigkeiten zu verwalten:

python -m venv venv source venv/bin/activate # Für Mac/Linux venv\Scripts\activate # Für Windows

Abhängigkeiten installieren

Installieren Sie alle notwendigen Abhängigkeiten:

pip install fastapi uvicorn pip install python-multipart

Alle Abhängigkeiten importieren

Öffnen Sie api.py und fügen Sie Ihre Importe hinzu:

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

Die API-Endpunkte implementieren

Definieren Sie Endpunkte für Sprachgenerierung und Story-Generierung:

• Sprachgenerierung: Implementieren Sie die Logik zur Interaktion mit der ElevenLabs-API.
• Story-Generierung: Verbinden Sie sich mit OpenAIs ChatGPT, um Geschichten zu erstellen.

Backend ausführen

Um Ihren FastAPI-Server zu starten, verwenden Sie:

uvicorn api:app --reload

Frontend-Setup

Neue React-App erstellen

Öffnen Sie ein neues Terminalfenster und erstellen Sie Ihre React-App:

npx create-react-app frontend

Alle Abhängigkeiten installieren

Wechseln Sie in Ihren React-Ordner und installieren Sie Material-UI:

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

Die Benutzeroberfläche implementieren

Öffnen Sie src/App.js und ersetzen Sie den Inhalt mit dem folgenden Code:

import { Box, Button, TextareaAutosize, Typography } from '@mui/material'; // Notwendige Importe hinzufügen

Definieren Sie Statusvariablen und notwendige Funktionen:

• handleQueryChange: Aktualisieren Sie den Status mit Benutzereingaben.
• generateStory: Rufen Sie die ChatGPT-API auf, um Geschichten zu generieren.
• generateAudio: Verwenden Sie die ElevenLabs-API, um Text in Audio umzuwandeln.

Einen Audio-Ordner erstellen

Erstellen Sie einen neuen Ordner mit dem Namen audios im src-Verzeichnis, um die Audiodateien zu speichern.

Die App ausführen

Führen Sie Ihre React-App aus:

npm start

Ihre App sollte unter http://localhost:3000 geöffnet werden. Versuchen Sie, eine kurze Geschichte über eine Katze oder Kätzchen zu generieren!

Fazit

Dieses Tutorial hat Schritt für Schritt Anleitungen gegeben, um eine funktionsfähige App zu erstellen, die Geschichten und Sprachübertragungen generiert. Sie haben gelernt, leistungsstarke Tools wie React, FastAPI, ElevenLabs und OpenAIs ChatGPT zu nutzen. Viel Spaß beim Programmieren!