みなさんこんにちは、システム部のヒュウです。
私はベトナム人で、GMOリサーチに入社してから約半年が経過しました。
今回は、今注目の高いChatGPTに関する記事です。
私は今回、自分の音声を文法や提案の改善が加えられたテキストに書き起こすことができるウェブベースのツールを作ることを目的とした開発を行ってみました。この開発では、新しいアプリケーションの開発におけるChatGPTの有効性をテストし、最短のリードタイムでデモを作成することを目的に行いました。
結果的にChatGPTの利用により、音声録音、音声からテキストへの変換、テキスト解析、そしてReact.jsを使った結果の表示など、いくつかの機能を実装し、それらのデモをわずか1日で実装することができました。
この記事では、これらの機能の実装方法、使用したツールや技術、ChatGPTで達成された精度、プロジェクトの革新的な側面について詳しく説明します。この記事が、ChatGPTの潜在的な有効性を証明し、開発者がAIを使った新しいソリューションを模索するきっかけとなればいいなと思っています。
基本設計
私のアイデアはかなりシンプルで簡単なので、以下のようにアイディアを分割し、実行可能なパートにすることができました。
mermaid
graph TD;
A(音声録音)-->B(Google Speech-to-text 音声認識);
B-->C(OpenAI APIで文法/語彙を改善);
C-->D(Webページに結果表示);
音声録音について
ユーザーのデバイスからオーディオ入力をキャプチャするために、現代のブラウザで利用可能な WebAPI を使用しました。今回、MediaRecorder クラス(最新のブラウザで音声を取得するツール)の助けを借りて、オーディオを録音し保存しました。
※数年前は音声を取得したい場合、カスタマイズが必要でしたが、今は簡単に実装出来るようになりました。
音声認識
私は音声をテキストに変換するために、Google の Cloud Speech-to-Text API を使用しました。この API は、音声ファイルを入力として受け取り、話し言葉の単語の書き起こしを生成するものです。
私が音声認識APIの中でこのAPIを選んだ理由としては、以下の4つです。
①豊富なドキュメント
リファレンスドキュメント、チュートリアル、サンプルコードなどの簡単にアクセス可能な資料があり、APIを使用する上で問題が発生した場合即座に解決できる。
②歴史が長い
Cloud Speech-to-Text APIはGoogleが提供しているAPIの１つで、長年にわたって開発されてきたので、他のAPIと比べて成熟しており高い安定性を持っている。
③簡単に接続可能
SDKやクライアントライブラリを使用することで、APIにシームレスにアクセスできます。これによって、APIの機能を迅速かつ容易に使用することができる。
④高精度かつ多様な言語対応
Cloud Speech-to-Text APは、音声からテキストへの変換に関して精度が高く、ビジネスや科学研究の分野で高い信頼性を発揮しています。また、多数の言語に対応しているため、世界中の多言語で音声からテキストへの変換に使用できる。
私はGoogle Speech-to-text API にリクエストを送信するために、Axios ライブラリを使用して書き起こしを受け取り、処理した後にローカルストレージに保存しました。
axiosのインストール方法やコマンド
axiosの導入については、次のコマンドを実行してインストールします｡
$ npm install axios --save
package.jsonに反映されます。
{
...
"dependencies": {
"axios": "^1.4.0",
...
},
...
}
※2023年7月の最新バージョンが 1.4.0
テキスト解析と改善
次に、OpenAI の API を使用しました。予め定義されたプロンプトと書き起こされたテキストを API に送信します。API により、入力されたテキストの文章やプロンプト自体を考慮し、元のテキストの改良版が生成されます。
ChatGPTを活用したコード生成
今回のコンセプトの証明を迅速に行うため、ChatGPTを使って、アプリケーションの全部分に必要なコードを生成しました。
ChatGPTに質問する前にプロジェクトの概要をまとめて、自分が何をやりたいか、どんな結果が欲しいか、できるだけ詳細を文章化して、ChatGPTに共有します。その後、どの部分のコードを生成して欲しいか質問すれば、ChatGPTから回答が貰えます。
※アイデアのみで良いのであれば、どう設計すればいいか、どんな部分が必要かChatGPTに質問してみましょう。
【コード生成】ChatGPTへの質問例
①例えば、音声を記録して、テキストに変換したい場合、ChatGPTに下記のように質問しました。
私は以下の機能を備えたReactアプリを作成したいです。
1. ユーザーの音声を録音する
2. 外部APIを使用して音声をテキストに変換する
上記の目標を達成するために必要なパーツと、どのAPIを使用すべきかをデザインするお手伝いができますか？ APIは登録と実装が容易である必要があります。
【コード生成】ChatGPTからの回答
ChatGPTからの回答はこちら。
ユーザーの音声を録音し、外部APIを使用してそれをテキストに変換するという希望の機能を備えたReactアプリを作成するには、以下のコンポーネントが必要です。
1.ユーザーインターフェース（UI）：ユーザーが音声録音プロセスを開始し、制御できるようなUIを設計します。開始と停止のためにボタンを使用し、テキストや視覚的なヒントを通じてユーザーにフィードバックを提供します。
2.音声録音: ブラウザのWeb Speech APIを使用して、ユーザーの音声入力をリアルタイムでキャプチャする機能を実装します。このAPIを使用することで、ユーザーのマイクにアクセスし録音の開始と停止が可能となります。react-micやreact-microphoneのようなライブラリを使用することで、このプロセスを簡素化することができます。
3.音声認識APIの統合: 音声をテキストに変換できる外部APIを選択します。複数の選択肢があり、人気のある選択肢としてはGoogle Cloud Speech-to-Text APIがあります。他の代替案としては、Microsoft Azure Speech-to-TextやIBM Watson Speech-to-Textなどがあります。これらのAPIは、音声録音をテキストに変換するためのシンプルで開発者向けのインタフェースを提供します。
音声認識機能を実装するためには、以下の手順が必要です。
・選んだプロバイダーのアカウントに登録し、APIの資格情報（APIキー、アクセストークンなど）を取得します。
・プロバイダーのSDKやRESTful APIを使用して、録音された音声ファイルを送信し、テキストの変換結果を受け取ります。
・APIとの通信を適切に処理するため、エラーハンドリングやレスポンスの解析を適切に行います。
選んだAPIによって、統合の手順が異なる場合があることを覚えておいてください。APIプロバイダーが提供するドキュメントは、実装プロセスを案内してくれるはずです。
録音された音声データの取り扱いやプライバシーに関する考慮事項にも注意してください。音声の録音に関してユーザーの同意を得たり、録音データの利用方法や保存方法について透明性を持つことが重要です。 Reactアプリの開発の健闘を祈ります！
【コード生成】ChatGPTへの質問例②
②例えば、Reactで音声録音のComponentを生成したい場合、下記のように質問します。
私はReactコンポーネントを作成して、音声を録音したいです。 このコンポーネントでは、ユーザーが音声を録音できるようにし、そのレイアウトには以下のアイテムが含まれます。
1. 「録音」ボタン – 音声の録音を開始するためのボタンです。
2. 「停止」ボタン – 音声の録音を停止するためのボタンです。
3. 「再生」ボタン – 録音された音声の再生を行うためのボタンです。
【コード生成】ChatGPTからの回答例②
ChatGPTからの回答はこちら。
Web Speech APIとMediaRecorder APIを使用して音声を録音するReactコンポーネントを作成することができます。以下は、要求されたレイアウトのコンポーネントの例です。
import React, { useState, useRef } from 'react';
function SpeechRecorder() {
const [recording, setRecording] = useState(false);
const [source, setSource] = useState(null);
const mediaRecorder = useRef();
const chunks = useRef([]);
const startRecording = () => {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
setRecording(true);
chunks.current = [];
mediaRecorder.current = new MediaRecorder(stream);
mediaRecorder.current.ondataavailable = handleDataAvailable;
mediaRecorder.current.start();
})
.catch(error => {
console.error('Error accessing microphone:', error);
});
};
const stopRecording = () => {
if (!mediaRecorder.current) return;
setRecording(false);
mediaRecorder.current.stop();
};
const handleDataAvailable = (event) => {
chunks.current.push(event.data);
};
const playRecording = () => {
if (chunks.current.length === 0) return;
const blob = new Blob(chunks.current, { type: 'audio/webm' });
const audioUrl = URL.createObjectURL(blob);
setSource(audioUrl);
};
return (
<div>
{!recording && !source && <button onClick={startRecording}>Record</button>}
{recording && <button onClick={stopRecording}>Stop</button>}
{!recording && source && <button onClick={playRecording}>Play</button>}
{source && <audio src={source} controls />}
</div>
);
}
export default SpeechRecorder;
具体的には、音声録音コンポーネントと、Google、OpenAI APIでデータを送受信するためのコードスニペットを生成するために使用しました。
ChatGPTを使い、必要な機能を自然言語で説明するプロンプトを入力し、コンテキストを考慮したコードスニペットが出力されました。これにより、定型的なコードを書く必要がなくなり、複雑な機能の実装に先手を打つことができるようになりました。
しかし、ChatGPTで生成されたコードが必ずしも正確とはいえず、業界標準に合致していない可能性があるため、ChatGPTに依存したコード生成は適切とは限りません。そのため、実装する前に生成されたコードを十分に評価することが重要です。
結果および結論
完成したデモはこちらになります。
最終結果
この開発の完了後、ユーザーがオーディオコンテンツで録音及び書き起こしをし、OpenAIのGPT-3 APIで出力を強化できる概念実証アプリケーションの開発に成功しました。このアプリケーションでは、すべての機能が意図した通りにシームレスに動作しました。
また、音声録音機能は効率的で、録音と音声はファイルの保存に1 分もかかりませんでした。Google Speech-to-Text APIは、 85％以上の精度で非常に優れた性能を発揮し、信頼性の高い書き写しサービスを提供することに成功しました。最後に、OpenAI の GPT-3 API は文法との連携性を簡単に改善し、より充実した最終結果を出しました。
ChatGPTを活用した開発における結論
まとめると、今回の開発では自分で設定した目標を達成することができ、とても楽しい実験となりました。
また、ChatGPTの利用に関して以下のことを結論づけることができました。
– ChatGPT はコード生成に優れたツールであり、新しいアプリケーションの開発プロセスの加速に役立つ。
– コード実装に時間を費やす代わりに、ユーザーは実際のアプリケーションのロジックを正しく考えることに集中できるようになる。
– 生成されたコードの正確性と品質を保証するために、業界標準の実践と評価方法とを組み合わせて使用することが重要。
– ChatGPT が提供するコードが必ずしも正確でない場合があり、これらのコードのトラブルシューティングが非常に困難であり、時間と労力が必要となる。
読んでいただきありがとうございました。
