🤖

ChatGPTで英会話教師JARVISをつくった

2024/03/06に公開

はじめに

Capture

JARVIS Englishは、以下のリンクから
https://english-lesson.vercel.app/

GITHUB: https://github.com/foasho/english-lesson
※ あんまりきれいにリファクタしてません (言い訳)

ChatGPTが流行ったとき(22年の終わりごろ?)に英会話アプリを作って放置していたのですが、英語を勉強しようと思い英会話教師JARVISを作ろうと思いました。

Web標準搭載の音声認識と音声合成
ユーザーの発言を認識し、JARVISの返答を音声で出力するために使用しています。
欲を言えばアイアンマンのJARVISの声を合成音声で作りたさはあります。(作るとは言ってない)
ChatGPT-3.5-Turbo
ユーザーの入力に対して精度高く欲しい形式で返答してもらうため、ChatGPTのTurboモデルをjsonmodeで利用しています。
ReactThreeFiberとArwesでのUI構築
- ReactThreeFiberは、Reactで3D描画を可能にするライブラリで、詳しくはこちらの記事で紹介してます。
- Arwesは、SF映画にインスパイアされたUIデザインフレームワークです
ViteとVercel
プロジェクトはViteを使用してReact+Typescriptで構築してます。Vercelでホスティングされています。

JARVIS Englishは、単に英会話の練習相手として機能するだけでなく、以下のような機能を備えています。

jsonmodeで、回答とは別に単語帳リスト、単語帳リストの和訳、全文和訳をつけるようにしています。これによって、意味が分からなかった場合に即時確認ができるようにしています。

Words

音声認識中は右下のアイコンがアクティブになり、途中の発話は表示されます。
Realtime

各動きやクリックにはSF風の音が鳴るようにしています。
これだけでテンションが上がりますね(??)
Zennの使用上、音は乗せられませんが、こんな感じです
SFUI

今はフロントエンドだけなので、
APIキーをユーザー自身がいれるような運用にしています。
少し作りこみでNextjsへの移行と、Stripeを追加して月100円ほどでサービス化したいなとも思ってます。
サービス化するのであれば、

英語レベルに応じた難易度設定
対話ログの実装 (録音機能)
わからなかった単語押下時に個人単語帳に追加
PWA対応
くらいはしたいなと思いました。
不便だけどどうしようもないこととしてイヤホンしていないと、音声合成がそのまま音声認識に入ってしまうというのがあり、それはイヤホンを必ずつけて行うようにしてください的なものは必要かなと思いました。