ChatGPTとVOICEVOXを組み合わせて音声チャットアプリを構築!あなたの選んだキャラが読み上げます!

Web開発
AI
初級
Next.jsとChatGPT、VOICEVOXを使用した音声チャットアプリを構築します。 VOICEVOXは、オープンソースのテキスト読み上げソフトウェアです。 複数のキャラクターが使用できますので、キャラクターを選択できるようにしています。 キャラクターを選択すると自己紹介の音声が流れます。 ChatGPTに質問した回答を、選択したキャラクターが読み上げます。 チャットの履歴を参照できるようにもしています。 ずんだもんを選択した時のみイラストが表示され、GSAPを使用してアニメーションをしています。 VOICEVOXを使用したアプリを作成したい方はぜひ参考にしてください。

学習内容

・Dockerを使用したVOICEVOXエンジンの実行方法 ・VOICEVOXを使用した音声合成方法 ・ChatGPTを使用した文章生成方法 ・チャット履歴を送信する方法

機能

・キャラクター選択 ・自己紹介音声 ・ChatGPTに質問して回答を得る ・選択したキャラクターが読み上げる ■ソフトウェア・素材 VOICEVOX https://voicevox.hiroshiba.jp/ ずんだもん立ち絵素材 https://seiga.nicovideo.jp/seiga/im10788496

解説動画

YouTubeで解説をしています。
https://youtu.be/birLEMGFhYY

解説記事

ステップ

ステップ1
Web開発
AI
初級
目標設定!Next.jsとLangChainで自動タスク生成アプリを作ろう
ステップ2
Web開発
AI
初級
ChatGPTとVOICEVOXを組み合わせて音声チャットアプリを構築!あなたの選んだキャラが読み上げます!
ステップ3
Web開発
AI
初級
ChatGPTの新機能「Function Calling」Next.jsとshadcn/uiで作るチャットアプリ
ステップ4
Web開発
AI
中級
目指せクイズ王!Next.jsとPrismaで構築するAIクイズアプリ(ChatGPT)
ステップ5
Web開発
AI
中級
サブスク入門!Next.jsとPrisma、Stripeでサブスク機能を作ろう
ステップ6
Web開発
AI
中級
リアルタイムグループAIチャットを作ろう!(Next.js15、Auth.js v5、Socket.IO、Prisma、ChatGPT)