🫥
ChatGptで英会話練習のWebページを作ってみた
制作物：https://d18doisirjwts4.cloudfront.net
技術スタックは下記です。
- Nuxt.js (Nuxt 3.0.0)
- AWS(Lambda(Node.js 18.x),S3,CloudFront)
- daisyUI
- Web Speech API
やっていることとしてはWebページからmessages(ChatGPTに文脈を読ませるために必要なため)をLambdaに送る→帰ってきたレスポンスをmessagesにプッシュして描画→読み上げの繰り返しです。保存などは行っていませんがDynamoDBを使用すればそのへんも可能だと思います。
実装についてはまず画面側をざっくり作成しました。
Nuxt3のプロジェクトを作ってからdaisyUIの公式を参照してインストールし、一部を除いて基本的にはこのUIベースのままでボタンやトーストなどを配置しております。
ChatGPT APIとのやりとりはLambdaでのみ行い、結果をレスポンスするようにしました。
参照記事
- https://www.wakuwakubank.com/posts/519-aws-lambda-introduction/#index_id1
- https://anteku.jp/blog/develop/aws-lambda-node-jsの追加モジュールを使って他のapiを実行して/
フロント側での制御はボタンによって言語切り替え(日本語or英語)や音声認識、読み上げのハンドリングを行ってます。
読み上げについてはあるあるですがPCではやり取りを勝手に読み上げるようにしたのですが、PCではうまく行ってもスマホ(iPhoneのみ確認)で動かなかったので明示的に再生ボタンを配置しました。
参照記事
Discussion