SpotifyTranscripts
1.0.0
Dieses Projekt ist das Ergebnis einer Kombination und einer fortgesetzten Entwicklung von zwei meiner früheren Projekte:
Im Jahr 2023 wurde ich inmitten des Chatgpt -Hype dazu inspiriert, meine beiden früheren Projekte zu einem Podcast -Player zu kombinieren und ihn zu verbessern, indem ich Open AIs APIs nutzte.
FYI: Spotify veröffentlichte später eine ähnliche Lösung für sowohl Podcast -Untertitel als auch Kapitel, lesen Sie hier mehr.
Die in diesem Projekt verwendeten Technologien finden Sie in der folgenden Tabelle.
| Technologie | Anwendungsfall |
|---|---|
| Reagieren | Frontend -Framework |
| Rückenwind | CSS -Styling -Bibliothek |
| Python | Backend für die Transkriptionslogik |
| Flasche | Verbindet das Python -Backend mit React Frontend |
| Spotify API | Informationen zu Podcast -Episoden erhalten |
| Google Spracherkennungs -API | Konvertiert die Sprache in Text, dh den Podcast transkribiert |
| Öffnen Sie die GPT 3.5 API von AI | Segment -Transkript in Kapitel basierend auf Transkript |
Ich wollte lernen, wie man ein React -Frontend mit einem Python -Backend verbindet, daher nutzte ich dieses Projekt als Lernmöglichkeit, um dies zu tun. Infolgedessen habe ich etwas zu übergreifend gemacht, indem ich meine eigene API aufgebaut habe, um Transkriptionen auf einem Python-Backend zu verarbeiten, anstatt eine Plug-and-Play-API in der Frontend aufzurufen.
Insbesondere trifft der Frontend einen Anruf bei der Spotify -API und erhält die URL des angeforderten Podcasts. Die URL wird als Anfrage an das Backend gesendet, der den Podcast als MP3 herunterlädt, um ihn zu verarbeiten.
Der Grund, warum der MP3 verarbeitet werden muss, ist, dass ich für jeden Satz Zeitstempel erhalten muss, um sie zum richtigen Zeitpunkt in den Untertiteln anzuzeigen. Ich identifiziere Sätze im Transkript, indem ich auf eine Stille (<14 Dezibel) länger als 500 ms zuhörte. Wenn eine Stille identifiziert wird, habe ich die ursprüngliche Audiodatei aufgeteilt, um eine Reihe kleinerer Audio -Dateien zu erstellen, eine für jeden Satz. Auf diese Weise konnte ich die Start- und Endzeit jedes Satzes berechnen, indem ich die Länge jeder kleineren Audio -Datei betrachtete, siehe Abbildung unten.
Alle Audio -Dateien werden nun an die Google -API von Spracherkennung gesendet und geben eine Zeichenfolge des transkribierten Audios zurück. Die Transkription wird nun an den Frontend zurückgesandt, der die API von AI öffnet, um das Transkript zu segmentieren und potenzielle Themen zu identifizieren, um die Episode in verschiedene Kapitel zu unterteilen.
Mit der API von Spotify können Sie keine vollständigen Podcast -Episoden herunterladen, nur 30 Sekunden Vorschau. Dies macht die App sehr begrenzt auf die Verwendung und ist daher nur ein Beweis für das Konzept.
Erstellen Sie eine .env -Datei im Stammverzeichnis und fügen Sie Ihre API -Schlüssel hinzu:
REACT_APP_SPOTFY_CLIENT_ID=YOUR_SPOTIFY_CLIENT_ID_GOES_HERE
REACT_APP_OPEN_AI_KEY=YOUR_OPEN_AI_KEY_GOES_HERE
Verwenden Sie die folgenden Befehle, um das Projekt auszuführen. Beginnen Sie das Frontend in einem Terminal und das Backend in einem anderen Terminal.
export FLASK_APP=backend
export FLASK_DEBUG=1
flask run
cd frontend
npm start
Sehen Sie sich hier eine 1 -minütige Demo des Projekts an.
Homepage mit Spotify -Authentifizierung
Entdeckungsseite
Laden des Bildschirms
Episodenbildschirm
Episodenbildschirm
Untertitel in Vollbild
Überblick über Kapitel innerhalb einer Episode
Audiospieler geteilt durch Kapitel
Suchen Sie Transkript
