ChatGPT,Ionicアプリ

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:細かい機能の説明

  1. 音声入力:Web Speech APIの音声認識機能を利用します。これにより、ユーザーが話した内容をテキストとして取得できます。このテキストはそのままGPT-3.5に送信されます。
  2. 音声出力:Web Speech APIの音声合成機能を利用します。これにより、GPT-3.5からのレスポンスを音声として出力できます。

ステップ2:作り方の概略

  1. 音声認識を初期化し、音声入力を開始するためのボタンを追加します。
  2. 音声認識が結果を得るたびに、それをuserInputに設定します。
  3. 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)」と同じです。

ChatGPT,Ionicアプリ

OpenAIのGPT-4を使って新しいIonicアプリを作ります。Ionicというのはモバイルデバイス上で動くアプリを開発する環境でJavaScriptを使ってウェブアプリが作れます。JavaScriptフレームワークはいろいろ選べますが、今回はAngularを使いました。動作確認にはSafariを使いました。

ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。

 

GPT-4とのやり取り

プロンプト

次の機能を持つGUIアプリをIonicで作る方法をステップ1からステップ3にしたがって教えてください。初心者でもわかるように詳しくお願いします。

機能:
1. 入力したテキストをChatGPTに送信。モデルはgpt-3.5-turbo
2. 戻ってきた返信を画面に表示

ステップ1:細かい機能の説明
ステップ2:作り方の概略
ステップ3:初めての人でもわかるような詳しい作り方。ChatGPTとの通信部分はAPIのことを知らない人にもわかるように説明してください

返答

前提として、このアプリケーションを作るには以下のものが必要です:

  1. OpenAIのAPIキー(https://beta.openai.com/signup/ から取得可能)
  2. Node.jsのインストール
  3. Ionicのインストール(npm install -g @ionic/cli)
  4. 基本的なJavaScriptやTypeScriptの知識
  5. 基本的なHTMLとCSSの知識

ステップ1:細かい機能の説明

このアプリケーションは大きく分けて以下のような動作を行います:

  1. ユーザーからテキスト入力を受け付けるUI(ユーザインターフェース)を提供します。ここではテキストエリアと送信ボタンがあります。
  2. ユーザーが送信ボタンを押すと、そのテキストはChatGPTに送信されます。この送信にはOpenAIのAPIを使用します。
  3. ChatGPTからの返答が取得できたら、それをアプリケーションのUIに表示します。

ステップ2:作り方の概略

  1. Ionicを使って新しいアプリケーションを作成します。アプリケーションにはテキスト入力と送信ボタンがあります。
  2. TypeScriptでAPIとの通信部分を実装します。具体的には、ユーザーが送信ボタンを押したときにAPIにテキストを送信し、結果を取得する関数を作ります。
  3. 取得した結果を画面に表示します。これにはAngularのバインディング機能を使用します。

ステップ3:初めての人でもわかるような詳しい作り方

新しいIonicアプリケーションを作成します:

ionic start myChatApp blank --type=angular

ここで"myChatApp"は作成するアプリケーションの名前です。

アプリケーションのディレクトリに移動します:

cd myChatApp

テキストエリアと送信ボタンを作成します。src/app/home/home.page.htmlファイルを開き、以下のように編集します:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Chat with GPT-3.5
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating">Your message</ion-label>
      <ion-textarea [(ngModel)]="userInput"></ion-textarea>
    </ion-item>
  </ion-list>
  <ion-button expand="full" (click)="sendMessage()">Send</ion-button>
 <p>{{response}}</p>
</ion-content>

ここで[(ngModel)]はAngularの双方向データバインディングを使用しています。これにより、ユーザーが入力したテキストは"userInput"変数に自動的に格納されます。

TypeScriptでAPIとの通信部分を実装します。src/app/home/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キーに書き換えてください

  constructor(private http: HttpClient) {}

  async sendMessage() {
    const prompt = this.userInput;
    const url = `https://api.openai.com/v1/engines/davinci-codex/completions`;
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${this.apiKey}`
    };
    const data = {
      'prompt': prompt,
      'max_tokens': 60
    };
    try {
      const res: any = await this.http.post(url, data, { headers }).toPromise();
      this.response = res.choices[0].text;
    } catch (error) {
      console.error(error);
    }
  }
}

ここではsendMessage関数がAPIとの通信を行います。この関数は非同期処理として実装され、ユーザーが送信ボタンを押すと実行されます。

アプリケーションを実行します:

ionic serve

API呼び出し部分が明らかに間違っているのでここを修正してもらって、後はHttpClientMduleを登録してからボタンを日本語に変更します。

最終的なコードです。

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Chat with GPT-3.5
    </ion-title>
  </ion-toolbar>
</ion-header>

<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)="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キーに書き換えてください

  constructor(private http: HttpClient) {}

  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();
    } catch (error) {
      console.error(error);
    }
  }
}

実行

OpenAI APIキーの取得

いろいろなところで説明されているので参考にしてAPIキーを取得してください。

コードの貼り付け

GPT-4が作ってくれたコードをhome.page.htmlとhome.page.tsに貼り付けます。コードの中のYOUR_OPENAI_API_KEYをあなたのAPIキーと置き換えてください。

実行結果

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。