Web開発AI初級STEP 2 / 6
ChatGPTとVOICEVOXを組み合わせて音声チャットアプリを構築!あなたの選んだキャラが読み上げます!
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 で動画の解説、Zenn で本の形の解説をしています。