ElfLabs Tutorial: Erstellen Sie Geschichten mit der AI-Stimme von ElevenLabs

Eine Geschichte und Voiceover-App mit ElevenLabs und OpenAI erstellen

Im digitalen Zeitalter hat sich das Geschichtenerzählen mit der Integration fortschrittlicher Technologien weiterentwickelt. Dieses Tutorial wird Sie dabei unterstützen, eine React-App zu erstellen, die einzigartige Geschichten mit OpenAI's ChatGPT-3.5 generiert und Voiceovers mit der Sprachtechnologie von ElevenLabs bereitstellt. Tauchen Sie in die Welt der KI ein und schaffen Sie ansprechende Erlebnisse für Ihr Publikum!

Lernziele

• Verstehen der Sprachtechnologie von ElevenLabs.
• Erforschen der Fähigkeiten von OpenAI's ChatGPT-3.5.
• Erstellen einer React-Anwendung von Grund auf.
• Vertrautheit mit Material-UI zur Gestaltung von Komponenten.

Voraussetzungen

Um loszulegen, stellen Sie sicher, dass Sie Folgendes haben:

1. Ein Code-Editor wie Visual Studio Code, IntelliJ IDEA oder PyCharm.
2. API-Schlüssel von ElevenLabs und OpenAI (beide sind kostenlos erhältlich).

Schritt 1: Einrichten Ihrer Umgebung

Erstellen Sie Ihren Projektordner

Öffnen Sie Visual Studio Code und erstellen Sie einen neuen Ordner mit dem Namen elevenlabs-tutorial. Dies wird Ihr Projektverzeichnis sein.

Backend einrichten

1. Erstellen Sie einen Ordner mit dem Namen backend.
2. Öffnen Sie Ihr Terminal und navigieren Sie zum Ordner backend.
3. Richten Sie eine Python-virtuelle Umgebung mit Folgendem ein:

python -m venv venv

4. Aktivieren Sie die virtuelle Umgebung:

source venv/bin/activate  # Auf macOS/Linux
venv\Scripts\activate  # Auf Windows

5. Installieren Sie die erforderlichen Abhängigkeiten:

pip install fastapi uvicorn

Erstellen Sie Ihre API

1. Importieren Sie Abhängigkeiten in einer neuen Datei api.py.
2. Initialisieren Sie FastAPI und konfigurieren Sie das CORS-Middleware.
3. Fügen Sie API-Endpunkte für die Geschichten- und Sprachgenerierung hinzu.

Schritt 2: Frontend einrichten

Eine React-App erstellen

1. Öffnen Sie das Terminal erneut und erstellen Sie eine neue React-App:

npx create-react-app frontend

2. Navigieren Sie zum Ordner frontend und installieren Sie Material-UI:

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

Benutzeroberfläche erstellen

Öffnen Sie src/App.js und verwenden Sie den folgenden Code, um die Hauptanwendungsstruktur einzurichten:

import React, { useState } from 'react';
import { Box, Typography, TextareaAutosize, Button } from '@mui/material';

const App = () => {
  const [story, setStory] = useState('');
  const [query, setQuery] = useState('');

  const handleQueryChange = (event) => { setQuery(event.target.value); };

  const generateStory = async () => {
    // Geschichte vom Backend abrufen
  };

  const generateAudio = async () => {
    // Audio vom Backend abrufen
  };

  return (
    
      Geschichtengenerator
      
      Geschichte generieren
    
  );
};

export default App;

Schritt 3: Die App ausführen

Nachdem Sie die obigen Schritte abgeschlossen haben, ist es Zeit, Ihre Anwendung auszuführen:

1. Starten Sie Ihren Backend-Server, indem Sie Folgendes ausführen:

uvicorn api:app --reload

2. Führen Sie das React-Frontend aus:

npm start

3. Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000/, um Ihre App zu sehen.

Fazit

Herzlichen Glückwunsch! Sie haben erfolgreich eine React-App erstellt, die Geschichten generiert und Voiceovers bereitstellt. Diese Integration der Technologien von ElevenLabs und OpenAI zeigt die Macht der KI zur Bereicherung von Geschichtenerlebnissen. Experimentieren Sie weiter mit neuen Funktionen und verbessern Sie Ihr Projekt!

Für ausführlichere Informationen über ElevenLabs, OpenAI's ChatGPT und React konsultieren Sie bitte die offizielle Dokumentation.