Next.js13 と Supabase で音声認識 AI チャットアプリを構築していきます。
前回作成した AI チャットアプリに音声認識機能を追加します。
マイクから音声を録音して OpenAI の Whisper で音声認識をします。
Whisper は日本語でもかなり精度がよく認識してくれます。
音声変換したテキストを ChatGPT に送信することで AI と会話することができるようになります。
最新技術の ChatGPT と Whisper を利用して、AI チャットアプリを作ってみましょう。
※2023/03
Next.js 13のApp Directoryはベータ版のため、今後ディレクトリ構成が変わる可能性があります。
システム構成
完成
目標
下記を学習していきます。
- マイクから音声を録音する方法
- 録音した音声を Whisper で文字起こしする方法
- ChatGPT を使用する方法
動画チュートリアル
動画でも解説しています。
ぜひ参考にして下さい。
AI チャットアプリ構築
AI チャットアプリを構築していない方は、こちらのチュートリアルを参考にしてください。
機能
- AI チャット
- 投稿取得
- 投稿保存
- 投稿更新
- 音声認識
App Directory
Next.js 13 App Directory での構築方法の詳細はこちらを参考にしてください。
ブログを構築しながら、認証機能や作成、取得、編集、削除(CRUD)の方法を学びます。
こちらを参考にすると、認証付きのアプリを構築することができます。
エラーが発生した場合
詳しいコードの解説は、Next.js、Supabase の公式ページを参考にして下さい。
ソースコード
LINE 登録すると全ての講座のソースコードがダウンロードできます。
ぜひ登録をお願いします。
LINE お友達登録
もしエラーが発生したり、分かりにくい箇所は下記のソースコードを参考にして下さい。
前提知識
このチュートリアルを始める前に、下記は学習しておいて下さい。
- React
- Next.js
- HTML
- CSS
- JavaScript
では、始めて行きましょう！！