SpotifyTranscripts

Transcriptions Spotify:
L'IA a généré des sous-titres et des chapitres segmentés pour les podcasts.

Caractéristiques clés

• Transcriptions: reconnaissance de la parole pour convertir la parole en texte et un horodatage.
• Recherche: recherchez la transcription et sautez dans une partie particulière d'une conversation.
• Chapitres: Décomposer un épisode en chapitres générés automatiquement en fonction des sujets.
• Sous-titres: rendre les podcasts accessibles aux personnes ayant des difficultés d'audition.

À propos du projet

Ce projet est le résultat d'une combinaison et d'un développement continu de deux de mes projets précédents:

• Sujets de Spotify: Au cours de l'été 2020, j'ai participé au hackathon d'été de Spotify et développé un outil qui vous permet de passer rapidement à des horodatages où certains sujets étaient en cours de discussion.
• Sous-titres Spotify: En 2022, j'ai continué à expérimenter en construisant des sous-titres pour des podcasts basés sur une idée de fonctionnalité qui a reçu plus de 4500 votes d'uples sur le forum communautaire de Spotify.

En 2023, au milieu du battage médiatique de Chatgpt, je me suis inspiré de combiner mes deux projets précédents en un seul joueur de podcast et de l'améliorer en utilisant les API d'Open AI.

FYI: Spotify a publié plus tard une solution similaire pour les sous-titres et les chapitres du podcast, en savoir plus ici.

Technologies utilisées

Les technologies utilisées dans ce projet se trouvent dans le tableau ci-dessous.

Technologie	Cas d'utilisation
Réagir	Frontend framework
Vent arrière	Bibliothèque de styles CSS
Python	Backend pour gérer la logique de transcription
Ballon	Connecte le backend Python avec React Frontend
API Spotify	Pour obtenir des informations sur les épisodes de podcast
API de reconnaissance vocale Google	Convertit la parole en texte, c'est-à-dire transcrit le podcast
API GPT 3.5 d'ouvrir AI	Transcription du segment en chapitres basés sur la transcription

Je voulais apprendre à connecter un frontend React à un backend Python, j'ai donc utilisé ce projet comme une opportunité d'apprentissage pour le faire. En conséquence, j'ai fait un peu d'ingénierie en construisant ma propre API pour gérer les transcriptions sur un backend Python au lieu d'appeler une API plug-and-play dans le frontend.

Plus précisément, le frontend passe à l'API Spotify et obtient l'URL du podcast demandé. L'URL est envoyée comme une demande au backend qui télécharge le podcast comme un MP3 afin de le traiter.

La raison pour laquelle le MP3 doit être traité est que je dois obtenir des horodatages pour chaque phrase afin de les afficher au bon moment dans les sous-titres. J'identifie les phrases dans la transcription en écoutant un silence (<14 décibels) plus de 500 ms. Lorsqu'un silence est identifié, j'ai divisé le fichier audio d'origine pour créer un ensemble de fichiers audio plus petits, un pour chaque phrase. Ce faisant, j'ai pu calculer l'heure de début et de fin de chaque phrase en examinant la durée de chaque fichier audio plus petit, voir la figure ci-dessous.

Tous les fichiers audio sont maintenant envoyés à l'API de reconnaissance vocale de Google et renvoie une chaîne de l'audio transcrit. La transcription est maintenant renvoyée au frontend qui fait une demande d'ouvrir l'API de l'IA pour segmenter la transcription et identifier des sujets potentiels pour diviser l'épisode en différents chapitres.

Limites

L'API de Spotify ne vous permet pas de télécharger des épisodes de podcast complets, seulement 30 secondes d'aperçu. Cela rend l'application très limitée à l'utilisation et ce n'est donc qu'une preuve de concept.

Commencer

Étape 1: Inscrivez-vous aux clés API

• Spotify
• AI ouvert

Étape 2: Ajoutez des clés API au fichier .env

Créez un fichier .env dans le répertoire racine et ajoutez vos touches API:

 REACT_APP_SPOTFY_CLIENT_ID=YOUR_SPOTIFY_CLIENT_ID_GOES_HERE
REACT_APP_OPEN_AI_KEY=YOUR_OPEN_AI_KEY_GOES_HERE

Étape 3: Exécutez le projet

Utilisez les commandes suivantes pour exécuter le projet. Commencez le frontend dans un terminal et le backend dans un autre terminal.

Backend

 export FLASK_APP=backend
export FLASK_DEBUG=1
flask run

L'extrémité avant

 cd frontend
npm start

Démo

Regardez une démo de 1 min du projet ici.

? Captures d'écran

Page d'accueil avec authentification Spotify

Page de découverte

Écran de chargement

Écran d'épisode

Écran d'épisode

Sous-titres en plein écran

Aperçu des chapitres dans un épisode

Lecteur audio divisé par des chapitres

Transcription de recherche