

このプロジェクトは、以前の2つのプロジェクトの組み合わせと継続的な開発の結果です。
2023年、ChatGptの誇大広告の真っin中に、私は以前の2つのプロジェクトを1つのポッドキャストプレーヤーに組み合わせて、Open AIのAPIを利用して改善することに触発されました。
参考までに、Spotifyは後にポッドキャスト字幕と章の両方について同様のソリューションをリリースしました。詳細はこちらをご覧ください。
このプロジェクトで使用されているテクノロジーは、下の表にあります。
| テクノロジー | 使用事例 |
|---|---|
| 反応します | フロントエンドフレームワーク |
| 追い風 | CSSスタイリングライブラリ |
| Python | 転写ロジックを処理するバックエンド |
| フラスコ | PythonバックエンドをReact Frontendに接続します |
| Spotify API | ポッドキャストエピソードに関する情報を取得するには |
| Googleスピーチ認識API | スピーチをテキストに変換します。つまり、ポッドキャストを転写します |
| AIのGPT 3.5 APIを開きます | トランスクリプトに基づいた章へのトランスクリプトをセグメントします |
React FrontendをPythonバックエンドに接続する方法を学びたかったので、このプロジェクトを学習機会として使用しました。その結果、フロントエンドのプラグアンドプレイAPIを呼び出す代わりに、Pythonバックエンドの転写を処理するために独自のAPIを構築することで、いくつかのオーバーエンジニアリングを行いました。
より具体的には、FrontEndはSpotify APIを呼び出し、要求されたポッドキャストのURLを取得します。 URLは、ポッドキャストをmp3としてダウンロードするバックエンドへのリクエストとして送信され、処理するためにmp3として送信されます。
mp3を処理する必要がある理由は、字幕の正しい時間にそれらを表示するために、各文のタイムスタンプを取得する必要があるためです。 500ミリ秒以上の沈黙(<14デシベル)を聞くことで、転写産物の文を特定します。沈黙が識別されると、元のオーディオファイルを分割して、各文に1つの小さなオーディオファイルを作成します。これを行うことで、各小さなオーディオファイルの長さを見ることで各文の開始時間と終了時間を計算することができました。下の図を参照してください。

すべてのオーディオファイルは、GoogleのSpeech Speechtedation 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
次のコマンドを使用してプロジェクトを実行します。 1つの端子でフロントエンドを開始し、バックエンドを別の端子に開始します。
export FLASK_APP=backend
export FLASK_DEBUG=1
flask run
cd frontend
npm start
ここでプロジェクトの1分のデモをご覧ください。

Spotify認証付きのホームページ

発見ページ

画面の読み込み

エピソード画面

エピソード画面

フルスクリーンの字幕

エピソード内の章の概要

章で分割されたオーディオプレーヤー

トランスクリプトを検索します