iPhone版 ChatGPTと話そう!(その1)
OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 10.15.7上でXcode 12.2を使い、動作確認にはiOSシミュレータ(iOS 14.2)を使いました。
ここで作るのはChatGPTと話そう!(その1)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。1時間以内で動きました。
GPT-4とのやり取り
プロンプト
次の機能を持つiOSアプリをXcodeとSwiftUIで作る方法をステップ1からステップ3にしたがって教えてください。初心者でもわかるように詳しくお願いします。
機能:
1. 入力したテキストをChatGPTに送信。モデルはgpt-3.5-turbo
2. 戻ってきた返信を画面に表示ステップ1:細かい機能の説明
ステップ2:作り方の概略
ステップ3:初めての人でもわかるような詳しい作り方。ChatGPTとの通信部分はAPIのことを知らない人にもわかるように説明してください
返答
ステップ1:細かい機能の説明 このアプリでは、以下の機能を実装します。
- テキスト入力フィールドを提供し、ユーザーが入力したテキストを受け取る。
- 入力されたテキストをOpenAIのChatGPT API(gpt-3.5-turboモデル)に送信する。
- APIから受け取った返信を画面上に表示する。
ステップ2:作り方の概略
- XcodeとSwiftUIを使って、UI(ユーザーインターフェース)を作成します。テキスト入力フィールドと送信ボタン、表示エリアを含む。
- ChatGPT APIと通信するためのコードを実装します。HTTPリクエストを使ってテキストをAPIに送信し、返信を受け取ります。
- APIから受け取った返信を画面上に表示する処理を実装します。
ステップ3:初めての人でもわかるような詳しい作り方
- UIの作成
- Xcodeをインストールし、新しいプロジェクトを作成します。プロジェクト名を決めて、User InterfaceにSwiftUIを選択してください。
- ContentView.swiftファイルを開き、以下のUI要素を追加します。
- テキスト入力フィールド:ユーザーがテキストを入力できるようにする。
- 送信ボタン:入力されたテキストをChatGPT APIに送信するためのボタン。
- 表示エリア:APIから受け取った返信を表示するための領域。
- APIとの通信
- OpenAIのAPIキーを取得します。アカウントを作成し、APIキーをメモしておきます。
- プロジェクトにAlamofireというライブラリを追加して、簡単にHTTPリクエストを扱えるようにします。Swift Package Managerを使ってインストールすることができます。
- APIと通信するための関数を作成します。この関数では、入力されたテキストをAPIに送信し、返信を受け取ります。APIキーと入力テキストを使って、HTTP POSTリクエストを作成し、Alamofireを使って送信します。
- 返信の表示
- APIからの返信を受け取ったら、表示エリアにそのテキストを表示します。SwiftUIのTextビューを使って、返信を画面上に表示するコードを追加します。
- 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理
- 返信の表示(続き)
- 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理を実装します。これには、SwiftUIの@Stateプロパティラッパーを使って、表示用の変数を宣言し、APIから受け取った返信を格納します。
以下に、実装のサンプルコードを示します。
import SwiftUI import Alamofire struct ContentView: View { @State private var inputText: String = "" @State private var responseText: String = "" var body: some View { VStack { TextField("テキストを入力してください", text: $inputText) .padding() .textFieldStyle(RoundedBorderTextFieldStyle()) Button(action: { sendToChatGPT(text: inputText) }) { Text("送信") .padding() } Text(responseText) .padding() } } func sendToChatGPT(text: String) { let headers: HTTPHeaders = [ "Content-Type": "application/json", "Authorization": "Bearer YOUR_API_KEY" ] let parameters: [String: Any] = [ "model": "gpt-3.5-turbo", "messages": [["role": "system", "content": "iOSアプリのテスト"], ["role": "user", "content": text]] ] AF.request("https://api.openai.com/v1/engines/gpt-3.5-turbo/completions", method: .post, parameters: parameters, encoding: JSONEncoding.default, headers: headers) .responseJSON { response in switch response.result { case .success(let value): if let jsonResponse = value as? [String: Any], let choices = jsonResponse["choices"] as? [[String: Any]], let message = choices.first?["message"] as? [String: Any], let content = message["content"] as? String { DispatchQueue.main.async { self.responseText = content } } case .failure(let error): print(error) } } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }
このサンプルコードでは、テキスト入力フィールド、送信ボタン、表示エリアが含まれています。送信ボタンをタップすると、
sendToChatGPT
関数が呼び出され、APIとの通信が行われます。APIから受け取った返信は、responseText
変数に格納され、画面上に表示されます。注意:このコードでは”YOUR_API_KEY”となっている部分を、取得したOpenAIのAPIキーに置き換えてください。
これで、初心者でもわかるような詳しい手順を提供しました。これを参考にして、XcodeとSwiftUIを使って、ChatGPTと通信するiOSアプリを作成してみてください。
プロンプト
何も表示されないのでデバッグしたいんだけど受け取ったJSONを表示するにはどうしたらいい?
返答
デバッグを行い、受け取ったJSONを表示するためには、
responseJSON
内でデバッグプリントを追加して、受け取ったJSONデータをコンソールに表示させることができます。
sendToChatGPT
関数内のresponseJSON
ブロックに
AF.request("https://api.openai.com/v1/engines/gpt-3.5-turbo/completions",
method: .post,
parameters: parameters,
encoding: JSONEncoding.default,
headers: headers)
.responseJSON { response in
switch response.result {
case .success(let value):
// 受け取ったJSONをコンソールに表示
print("JSON Response: \(value)")
if let jsonResponse = value as? [String: Any],
let choices = jsonResponse["choices"] as? [[String: Any]],
let message = choices.first?["message"] as? [String: Any],
let content = message["content"] as? String {
DispatchQueue.main.async {
self.responseText = content
}
}
case .failure(let error):
print(error)
}
}
この
print("JSON Response: \(value)")
の部分が、受け取ったJSONデータをコンソールに表示するためのデバッグプリントです。アプリを実行し、送信ボタンをタップした後、Xcodeのコンソールを確認して、受け取ったJSONデータが表示されているか確認してください。これにより、デバッグを行いながら受け取ったJSONデータを確認できます。これを使って、アプリの動作が正しいかどうかを検証してみてください。
どうもAPI呼び出しのURLが間違っていたようです。”https://api.openai.com/v1/engines/gpt-3.5-turbo/completions”を”https://api.openai.com/v1/chat/completions”に変更したところ動きました。
XcodeでiPhoneアプリを作る
OpenAI APIキーの取得
いろいろなところで説明されているので参考にしてAPIキーを取得してください。
プロジェクトの作成
Xcodeを起動してTalk2ChatGPT-1という名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。
swiftコードの貼り付け
GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。File > Swift PackageメニューからAlamofireを追加します。コードの中の
YOUR_API_KEYをあなたのAPIキーと置き換えてください。
実行
実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。