AIと声で話せるようになるウェブアプリを作ってみた
はじめまして
17歳で高校に通いながら株式会社stakで働いている二宮と申します。
今回は個人的な趣味のAIを「もっともっとどんどん身近でシームレスなものにしたい」という思いから「AIと声で話せるシステム」をNext.js、TypeScript、OpenAI APIで開発しましたのでリリースと解説をさせていただきます。
このほかにも「AIとLINEで話せるシステム」も数日前に開発しました。
▼ AIとLINEで話せるシステム
利用方法
もちろん！誰でも使えます。
ウェブアプリなのですが、Web Speech APIに対応しているブラウザでないと利用できないので、PCのChromeで利用していただきたいです🥺
こちらからアプリは利用いただけます。
実装方法
この記事では大まかな実装方法を解説していきます。
このアプリで重要になる実装は3つです。
AIのAPI、文字の読み上げ、音声認識の構成で解説していきます。
AIの利用
まず、このアプリで一番重要になってくるのは「AIからのレスポンス」です。
そこで今回はあのElon MuskがFounderのOpenAIのAPIを使ってAIと会話することにしました。
OpenAIのAPIを利用するにはOpenAIにアカウントを作るなどの手順がありますが、今回は省きます。
OpenAIのAPIの実装はとても簡単です。
OpenAIからNodejsのライブラリが公開されているので今回はライブラリを使って実装します。
yarn add openai
今回はNextjsを利用しているため、src/pages/api/openai.jsに
GitHub GistのページURLを指定してくださいでAPIを書きます。
少しだけプロパティの解説をします。
まずはモデル、OpenAIのAPIでは複数のモデルが用意されていて、好きなものを選んで利用することが出来ます。
例えばtext-davinci-003やtext-ada-001など、それぞれ性能などに差があります。
今回はChatGPTの元になっているtext-davinci-003を利用します。
次にmax_tokens、OpenAIのAPIは従量課金制なのですが、このtoken数をもとに料金が決まります。
token数は簡単に言うとレスポンス文章の長さです。
ここでは一回の処理に何tokenまで使えるかを指定してあげます。
ブラウザで文字を読み上げる
今回はブラウザに搭載されているWeb Speech APIを利用して読み上げを実装していきます。
読み上げにはWeb Speech APIのSpeechSynthesisUtteranceインターフェースを利用します。
今回はアロー関数を使って実装します。
GitHub GistのページURLを指定してくださいこのようなファンクションを作成し、AIからの返事が返ってきたタイミングでspeak(“ここにメッセージ”)してあげれば話してくれます。
声を認識する
声の認識にもWeb Speech APIを利用します。
認識にはSpeechRecognitionを利用するのですがこちらはライブラリを利用して実行します。
ということでライブラリを追加します。
yarn add react-speech-recognition
このようなコードを書くことで利用することが可能です。
GitHub GistのページURLを指定してくださいこのコードでmic()を呼び出すと音声入力のオンオフを切り替えることができます。
resetTranscript()の前の行にsetMsg(transcript)みたいな処理は入れてください。
continuous:trueで勝手に音声入力が止まったりしなくなります。
おしまい
最後まで読んでいただきありがとうございました！
株式会社stakはAIのほかに体をトラッキングするデバイス「mocopi」の購入を予定していたり、オフィスにstarlinkが置いてあったりする企業です。
一緒に最先端技術を触って楽しめる人が増えて欲しいので株式会社stakに来てください！
▼ Wantedly
株式会社stakではレンタルスペースプラットフォームも開発しています。
興味がある方は是非先行登録よろしくお願いします！
▼ addcari物件オーナーズLP
Discussion