iPhone版 ChatGPTと話そう！(その１)

OpenAIのGPT-4を使って新しいiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 10.15.7上でXcode 12.2を使い、動作確認にはiOSシミュレータ(iOS 14.2)を使いました。

ここで作るのはChatGPTと話そう！(その１)としてChatGPTに入力したプロンプトを送って返答を画面に表示するアプリです。１時間以内で動きました。

 

GPT-4とのやり取り

プロンプト

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

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

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

返答

ステップ１：細かい機能の説明 このアプリでは、以下の機能を実装します。

  1. テキスト入力フィールドを提供し、ユーザーが入力したテキストを受け取る。
  2. 入力されたテキストをOpenAIのChatGPT API（gpt-3.5-turboモデル）に送信する。
  3. APIから受け取った返信を画面上に表示する。

ステップ２：作り方の概略

  1. XcodeとSwiftUIを使って、UI（ユーザーインターフェース）を作成します。テキスト入力フィールドと送信ボタン、表示エリアを含む。
  2. ChatGPT APIと通信するためのコードを実装します。HTTPリクエストを使ってテキストをAPIに送信し、返信を受け取ります。
  3. APIから受け取った返信を画面上に表示する処理を実装します。

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

  1. UIの作成
  • Xcodeをインストールし、新しいプロジェクトを作成します。プロジェクト名を決めて、User InterfaceにSwiftUIを選択してください。
  • ContentView.swiftファイルを開き、以下のUI要素を追加します。
    • テキスト入力フィールド：ユーザーがテキストを入力できるようにする。
    • 送信ボタン：入力されたテキストをChatGPT APIに送信するためのボタン。
    • 表示エリア：APIから受け取った返信を表示するための領域。
  1. APIとの通信
  • OpenAIのAPIキーを取得します。アカウントを作成し、APIキーをメモしておきます。
  • プロジェクトにAlamofireというライブラリを追加して、簡単にHTTPリクエストを扱えるようにします。Swift Package Managerを使ってインストールすることができます。
  • APIと通信するための関数を作成します。この関数では、入力されたテキストをAPIに送信し、返信を受け取ります。APIキーと入力テキストを使って、HTTP POSTリクエストを作成し、Alamofireを使って送信します。
  1. 返信の表示
  • APIからの返信を受け取ったら、表示エリアにそのテキストを表示します。SwiftUIのTextビューを使って、返信を画面上に表示するコードを追加します。
  • 送信ボタンをタップしたときに、APIとの通信を行い、返信を表示する処理
    1. 返信の表示（続き）
    • 送信ボタンをタップしたときに、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ブロックにprint文を追加して、JSONデータを表示させてみましょう。


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デモビデオを見てください。

 

 

 

ChatGPT, iPhoneアプリ