SpotifyTranscripts
1.0.0
이 프로젝트는 이전 두 프로젝트의 조합과 지속적인 개발의 결과입니다.
2023 년에 Chatgpt Hype의 한가운데서, 나는 두 개의 이전 프로젝트를 하나의 팟 캐스트 플레이어로 결합하고 Open AI의 API를 사용하여 개선하도록 영감을 받았습니다.
참고 : Spotify는 나중에 팟 캐스트 자막과 챕터 모두에 대해 유사한 솔루션을 발표했습니다.
이 프로젝트에 사용 된 기술은 아래 표에서 찾을 수 있습니다.
| 기술 | 유스 케이스 |
|---|---|
| 반응 | 프론트 엔드 프레임 워크 |
| 꼬리 바람 | CSS 스타일링 라이브러리 |
| 파이썬 | 전사 논리를 처리하기위한 백엔드 |
| 플라스크 | Python Backend를 React Frontend와 연결합니다 |
| Spotify API | 팟 캐스트 에피소드에 대한 정보를 얻으려면 |
| Google Speech Recognition API | 음성을 텍스트로 변환하고, 즉 팟 캐스트를 기록합니다 |
| AI의 GPT 3.5 API를 엽니 다 | 전 사체를 기준으로 챕터로 전사를 분할하십시오 |
React Frontend를 Python 백엔드에 연결하는 방법을 배우고 싶었 으므로이 프로젝트를 학습 기회로 사용했습니다. 결과적으로, 나는 프론트 엔드에서 플러그 앤 플레이 API를 호출하는 대신 파이썬 백엔드에서 전사를 처리하기 위해 자신의 API를 구축함으로써 약간의 과잉 엔지니어링을 수행했습니다.
보다 구체적으로, 프론트 엔드는 Spotify API를 호출하고 요청 된 팟 캐스트의 URL을 얻습니다. URL은 Podcast를 MP3로 다운로드하여 처리하기 위해 백엔드 요청으로 전송됩니다.
MP3를 처리 해야하는 이유는 자막에서 올바른 시간에 표시하기 위해 각 문장에 대해 타임 스탬프를 가져와야하기 때문입니다. 나는 500ms 이상의 침묵 (<14 데시벨)을 들음으로써 성적표에서 문장을 식별합니다. 침묵이 식별되면 원래 오디오 파일을 분할하여 각 문장마다 하나의 작은 오디오 파일 세트를 만듭니다. 이렇게하면 각 작은 오디오 파일의 길이를 살펴보면 각 문장의 시작 및 종료 시간을 계산할 수있었습니다. 아래 그림을 참조하십시오.
모든 오디오 파일은 이제 Google의 음성 인식 API로 전송되어 전사 된 오디오 문자열을 반환합니다. 전사는 이제 AI의 API를 열어주기 위해 AI의 API를 개설하고 에피소드를 다른 장으로 나누기 위해 잠재적 인 주제를 식별하는 프론트 엔드로 다시 전송되고 있습니다.
Spotify의 API를 사용하면 전체 팟 캐스트 에피소드, 30 초 미리보기 만 다운로드 할 수 없습니다. 이로 인해 앱은 사용으로 매우 제한되므로 개념 증명 일뿐입니다.
루트 디렉토리에서 .env 파일을 만들고 API 키를 추가하십시오.
REACT_APP_SPOTFY_CLIENT_ID=YOUR_SPOTIFY_CLIENT_ID_GOES_HERE
REACT_APP_OPEN_AI_KEY=YOUR_OPEN_AI_KEY_GOES_HERE
다음 명령을 사용하여 프로젝트를 실행하십시오. 한 터미널에서 프론트 엔드를 시작하고 다른 터미널에서 백엔드를 시작하십시오.
export FLASK_APP=backend
export FLASK_DEBUG=1
flask run
cd frontend
npm start
여기에서 프로젝트의 1 분 데모를보십시오.
Spotify 인증이있는 홈페이지
발견 페이지
로딩 화면
에피소드 화면
에피소드 화면
전체 화면의 자막
에피소드 내에서 챕터 개요
오디오 플레이어를 챕터로 나눈 값
검색 성적표
