🤖
ChatGPTで英会話教師JARVISをつくった
はじめに
成果物
サービスリンク
JARVIS Englishは、以下のリンクから
GITHUB: https://github.com/foasho/english-lesson
※ あんまりきれいにリファクタしてません (言い訳)
動作キャプチャ
ChatGPTが流行ったとき(22年の終わりごろ?)に英会話アプリを作って放置していたのですが、英語を勉強しようと思い英会話教師JARVISを作ろうと思いました。
利用技術やライブラリ
-
Web標準搭載の音声認識と音声合成
ユーザーの発言を認識し、JARVISの返答を音声で出力するために使用しています。
欲を言えばアイアンマンのJARVISの声を合成音声で作りたさはあります。(作るとは言ってない) -
ChatGPT-3.5-Turbo
ユーザーの入力に対して精度高く欲しい形式で返答してもらうため、ChatGPTのTurboモデルをjsonmodeで利用しています。 -
ReactThreeFiberとArwesでのUI構築 -
ViteとVercel
プロジェクトはViteを使用してReact+Typescriptで構築してます。Vercelでホスティングされています。
機能について
JARVIS Englishは、単に英会話の練習相手として機能するだけでなく、以下のような機能を備えています。
会話単位での単語帳と全文和訳
jsonmodeで、回答とは別に単語帳リスト、単語帳リストの和訳、全文和訳をつけるようにしています。これによって、意味が分からなかった場合に即時確認ができるようにしています。
音声認識のリアルタイム表示
音声認識中は右下のアイコンがアクティブになり、途中の発話は表示されます。
SF風の音や操作
各動きやクリックにはSF風の音が鳴るようにしています。
これだけでテンションが上がりますね(??)
Zennの使用上、音は乗せられませんが、こんな感じです
今後の機能
今はフロントエンドだけなので、
APIキーをユーザー自身がいれるような運用にしています。
少し作りこみでNextjsへの移行と、Stripeを追加して月100円ほどでサービス化したいなとも思ってます。
サービス化するのであれば、
- 英語レベルに応じた難易度設定
- 対話ログの実装 (録音機能)
- わからなかった単語押下時に個人単語帳に追加
- PWA対応
くらいはしたいなと思いました。
不便だけどどうしようもないこととしてイヤホンしていないと、音声合成がそのまま音声認識に入ってしまうというのがあり、それはイヤホンを必ずつけて行うようにしてください的なものは必要かなと思いました。
Discussion