

Este proyecto es el resultado de una combinación y un desarrollo continuo de dos de mis proyectos anteriores:
En 2023, en medio de la exageración del chatgpt, me inspiré para combinar mis dos proyectos anteriores en un jugador de podcast y mejorarlo utilizando las API de AI Open.
FYI: Spotify luego lanzó una solución similar para los subtítulos y capítulos de podcast, lea más aquí.
Las tecnologías utilizadas en este proyecto se pueden encontrar en la tabla a continuación.
| Tecnología | Caso de uso |
|---|---|
| Reaccionar | Marco frontend |
| Viento de cola | Biblioteca de estilo CSS |
| Pitón | Backend para manejar la lógica de transcripción |
| Matraz | Conecta Python Backend con React Frontend |
| API de Spotify | Para obtener información sobre los episodios de podcasts |
| API de reconocimiento de voz de Google | Convierte el discurso en texto, es decir, transcribe el podcast |
| Abra la API GPT 3.5 de AI | Transcripción del segmento en capítulos basados en la transcripción |
Quería aprender a conectar una frontend React a un backend de Python, así que utilicé este proyecto como una oportunidad de aprendizaje para hacerlo. Como resultado, hice una ingeniería excesiva al construir mi propia API para manejar las transcripciones en un backend de Python en lugar de llamar a una API plug-and-play en la interfaz.
Más específicamente, el frontend hace una llamada a la API de Spotify y obtiene la URL del podcast solicitado. La URL se envía como una solicitud al backend que descarga el podcast como un mp3 para procesarlo.
La razón por la que debe procesarse el MP3 es que necesito obtener marcas de tiempo para cada oración para mostrarlas en el momento correcto en los subtítulos. Identifico oraciones en la transcripción escuchando un silencio (<14 decibelios) más de 500 ms. Cuando se identifica un silencio, dividí el archivo de audio original para crear un conjunto de archivos de audio más pequeños, uno para cada oración. Al hacer esto, pude calcular el tiempo de inicio y finalización de cada oración mirando la longitud de cada archivo de audio más pequeño, consulte la figura a continuación.

Todos los archivos de audio ahora se envían a la API de reconocimiento de voz de Google y devuelve una cadena del audio transcrito. La transcripción ahora se está enviando de regreso al interfaz que solicita la API de AI para segmentar la transcripción e identificar temas potenciales para dividir el episodio en diferentes capítulos.
La API de Spotify no le permite descargar episodios de podcast completos, solo 30 vistas previas. Esto hace que la aplicación sea muy limitada al uso y, por lo tanto, es solo una prueba de concepto.
Cree un archivo .env en el directorio raíz y agregue sus claves API:
REACT_APP_SPOTFY_CLIENT_ID=YOUR_SPOTIFY_CLIENT_ID_GOES_HERE
REACT_APP_OPEN_AI_KEY=YOUR_OPEN_AI_KEY_GOES_HERE
Use los siguientes comandos para ejecutar el proyecto. Comience el frontend en un terminal y el backend en otro terminal.
export FLASK_APP=backend
export FLASK_DEBUG=1
flask run
cd frontend
npm start
Mire una demostración de 1 minuto del proyecto aquí.

Página de inicio con autenticación de Spotify

Página de descubrimiento

Pantalla de carga

Pantalla del episodio

Pantalla del episodio

Subtítulos en pantalla completa

Descripción general de los capítulos dentro de un episodio

Reproductor de audio dividido por capítulos

Transcripción de búsqueda