OpenAIのGPT-4を使って新しいIonicアプリを作ります。Ionicというのはモバイルデバイス上で動くアプリを開発する環境でJavaScriptを使ってウェブアプリが作れます。JavaScriptフレームワークはいろいろ選べますが、今回はAngularを使いました。動作確認にはChromeを使いました。
ここで作るのは「Ionic版 ChatGPTと話そう!(その2)」としてChatGPTに音声入力したプロンプトを送って返答を画面に表示してから音声出力するアプリです。Ionicではソースを変更すると何もしなくてもブラウザ内のアプリが自動的に更新されるので変更が簡単です。
次の実験はこのソースから他のスマホアプリが作れるかです。SwiftとかKotlinとか。
GPT-4とのやり取り
プロンプト
OpenAIのAPIとのやり取りは「Ionic版 ChatGPTと話そう!(その1)」で動いているので、音声入力・出力を追加するように頼んでみます。ソースコードは長いので省略しますが実際はファイル名の後にコピペしています。cordova、capacitorというのはモバイルデバイス特有のセンサーなどをIonicでサポートするためのものですが、cordovaは2022年4月でサポートが終わったので、capacitorをしています。実際のところこのアプリでは使いませんでしたが。
次のIonicプログラムに音声入力と音声出力の機能を追加したGUIアプリを作る方法をステップ1からステップ3にしたがって教えてください。cordovaでは無くcapacitorを使ってください。
ステップ1:細かい機能の説明
ステップ2:作り方の概略
ステップ3:初めての人でもわかるような詳しい作り方とソースコードhome.page.html
home.page.ts
返答
音声入力と音声出力の機能を追加するためには、ブラウザのWeb Speech APIを利用します。これは音声認識(音声をテキストに変換)と音声合成(テキストを音声に変換)の両方をサポートしています。
ステップ1:細かい機能の説明
- 音声入力:Web Speech APIの音声認識機能を利用します。これにより、ユーザーが話した内容をテキストとして取得できます。このテキストはそのままGPT-3.5に送信されます。
- 音声出力:Web Speech APIの音声合成機能を利用します。これにより、GPT-3.5からのレスポンスを音声として出力できます。
ステップ2:作り方の概略
- 音声認識を初期化し、音声入力を開始するためのボタンを追加します。
- 音声認識が結果を得るたびに、それをuserInputに設定します。
- sendMessageメソッド内で、音声合成を使ってGPT-3.5からのレスポンスを読み上げます。
ステップ3:初めての人でもわかるような詳しい作り方とソースコード
まず、ボタンと音声入力結果表示エリアをHTMLに追加します。そして音声入力と音声出力を処理するためのメソッドをTypeScriptファイルに追加します。
home.page.html:
<ion-content>
<ion-list>
<ion-item>
<ion-label position="floating"></ion-label>
<ion-textarea [(ngModel)]="userInput"></ion-textarea>
</ion-item>
</ion-list>
<ion-button expand="full" (click)="startSpeechRecognition()">音声入力開始</ion-button>
<ion-button expand="full" (click)="sendMessage()">送信</ion-button>
<p>{{response}}</p>
</ion-content>
home.page.ts:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
userInput = '';
response = '';
private apiKey = 'YOUR_OPENAI_API_KEY'; // OpenAIのAPIキーに書き換えてください
private speechRecognition: SpeechRecognition;
private speechSynthesis: SpeechSynthesis;
constructor(private http: HttpClient) {
this.speechRecognition = new SpeechRecognition();
this.speechSynthesis = window.speechSynthesis;
this.speechRecognition.onresult = (event) => {
this.userInput = event.results[0][0].transcript;
};
}
startSpeechRecognition() {
this.speechRecognition.start();
}
async sendMessage() {
const url = `https://api.openai.com/v1/chat/completions`;
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`
};
const data = {
'model': 'gpt-3.5-turbo',
'messages': [
{
'role': 'user',
'content': this.userInput
}
]
};
try {
const res: any = await this.http.post(url, data, { headers }).toPromise();
this.response = res.choices[0].message.content.trim();
const utterance = new SpeechSynthesisUtterance(this.response);
this.speechSynthesis.speak(utterance);
} catch (error) {
console.error(error);
}
}
}
注意: Web Speech APIは現在のところ実験的なAPIであり、すべてのブラウザで完全にはサポートされていません。また、これらの音声認識と音声合成機能は一部のプラットフォームでは動作しない可能性があります。そのため、この機能を本番環境で使用する場合は、ブラウザの互換性と対応状況を十分に確認してから実装してください。
このソースをこのままコピペしたところ、いくつかコンパイルエラーが出ましたが、エラーメッセージをそのまま送ると修正版のソースを返してくれました。後は音声入力の終了タイミングがわかりにくかったので入力停止ボタンの追加と、日本語の音声入力ができるように変更してもらって、最終的なソースはこのようになりました。これで動きました。
home.page.html:
<ion-content>
<ion-list>
<ion-item>
<ion-label position="floating"></ion-label>
<ion-textarea [(ngModel)]="userInput"></ion-textarea>
</ion-item>
</ion-list>
<ion-button expand="full" (click)="startSpeechRecognition()">音声入力開始</ion-button>
<ion-button expand="full" (click)="stopSpeechRecognition()">音声入力停止</ion-button>
<ion-button expand="full" (click)="sendMessage()">送信</ion-button>
<p>{{response}}</p>
</ion-content>
home.page.ts:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
declare var window: any;
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
userInput = '';
response = '';
private apiKey = 'YOUR_OPENAI_API_KEY'; // OpenAIのAPIキーに書き換えてください
private speechRecognition: any;
private speechSynthesis: SpeechSynthesis;
constructor(private http: HttpClient) {
this.speechRecognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
this.speechRecognition.lang = 'ja-JP'; // 言語を日本語に設定
this.speechSynthesis = window.speechSynthesis;
this.speechRecognition.onresult = (event: any) => {
this.userInput = event.results[0][0].transcript;
};
}
startSpeechRecognition() {
this.speechRecognition.start();
}
stopSpeechRecognition() {
this.speechRecognition.stop();
}
async sendMessage() {
const url = `https://api.openai.com/v1/chat/completions`;
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`
};
const data = {
'model': 'gpt-3.5-turbo',
'messages': [
{
'role': 'user',
'content': this.userInput
}
]
};
try {
const res: any = await this.http.post(url, data, { headers }).toPromise();
this.response = res.choices[0].message.content.trim();
const utterance = new SpeechSynthesisUtterance(this.response);
utterance.lang = 'ja-JP'; // 言語を日本語に設定
this.speechSynthesis.speak(utterance);
} catch (error) {
console.error(error);
}
}
}
実行方法は「Ionic版 ChatGPTと話そう!(その1)」と同じです。