[3]画像をOpenAIのAPIに送信する

※知り合い向けに書いた記事を公開しています。後から文体など修正予定です🙏


この記事では、アプリ内で撮った写真をOpenAIのAPIに投げる機能の実装をしていくよ！！！

目次：
[Part1. カメラで撮影した写真を表示する](https://qiita.com/drafts/c267a9d70a3e69929ded)
[Part2. OpenAI APIのセットアップ](https://qiita.com/kohapizza/items/11f7f25c9f923100e61c)
[Part3. 画像をOpenAIのAPIに送信する](https://qiita.com/kohapizza/items/5416fb7f9429d2e1f734) ←ここ！


### OpenAIから返ってきたテキストを表示する用のTextLabelを二つ目の画面に配置しよう！
テキストは「読み込んでいます...」としておこう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784072/aace0eb1-018b-49c9-8738-e8eceb039a1c.png" width="50%">

### 配置したTextLabelをコードにも書こう！
PhotosViewController.swiftに以下のコードを追加して、関連付けも行おう！💨
```PhotosViewController.swift
@IBOutlet weak var generatedTextLabel: UILabel!
```

### OpenAIとのやりとりをするコードを書こう！
まずはOpenAIに画像を投げるコードを書く新しいファイルを作っていくよ！
アプリ名の書いてあるフォルダを二本指クリック -> 「New File from Template...」をクリック！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784072/828c6ea1-e0a2-4cf3-b098-5a966d1cf8fc.png" width="50%">

templateは「Swift File」を選択！
![スクリーンショット 2025-05-20 16.00.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784072/7fa63c97-fa87-4b2e-bffb-17eeb68f58c1.png)

ファイル名は「MachineLearningHelper」としよう！
![スクリーンショット 2025-05-20 16.00.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784072/8a4656db-06d8-435e-8f6c-d849983d8b03.png)


余談：🧐どうして新しいファイルを作ってコードを書くの？
... 理由は「整理してわかりやすくするため」だよ！
たとえば、ノートに何でも全部書き込んじゃうと、ごちゃごちゃしてどこに何があるかわからなくなるよね？それと同じで、プログラムも一つの場所に全部書くと、あとから見ると大変💦
だから、「このファイルはOpenAIとやりとりをするコードだけ！」ってふうに、役割ごとにファイルを分けると、
- どこに何のコードがあるかわかりやすい
- 直したり追加したりしやすい
- 他の人も読みやすい
っていういいことがたくさんあるよ！！




### ファイルが作れたら以下のコードを書こう！
```MachineLearningHelper.swift
import OpenAI
import UIKit

// 機械学習を手伝ってくれるクラス（1つだけ作ってどこでも使えるようにするために）
class MachineLearningHelper {
    static let shared = MachineLearningHelper()

    // OpenAIを使うための設定。YOUR_API_KEYの代わりに自分のAPIキーを入力する
    private let openAI = OpenAI(apiToken: "YOUR_API_KEY")
    
    // 画像をもとに、AIに「何が映っているか」を説明してもらう関数
    // 質問のテキストをカスタマイズしてみよう！
    func generateTextfromImage(imageData: Data) async -> String {
        do {
            // ChatGPT（GPT-4o）に、画像と質問を送って、答えをもらう
            let query = ChatQuery(messages: [
                .user(.init(content: .vision([
                    // 質問のテキスト
                    .chatCompletionContentPartTextParam(.init(text: "以下の画像には何が映っていますか？説明してください。")),
                    // 画像のデータを送る
                    .chatCompletionContentPartImageParam(.init(imageUrl: .init(url: imageData, detail: .auto)))
                ])))
            ], model: .gpt4_o, maxTokens: 100)  // モデルにGPT-4oを指定。最大トークン数は100
            
            // ChatGPTに質問を送り、返事を待つ
            let result = try await openAI.chats(query: query)
            
            // 答えを取り出してテキストとして返す
            if let choice = result.choices.first,
               let text = choice.message.content {
                return text
            }
        } catch {
            // もし失敗したら、エラー内容を出力
            print("分析失敗: \(error)")
        }

        // うまくいかなかった時の出力
        return "分析に失敗しました"
    }
}

```


### 作ったMachineLearningHeleperの関数を実際に使っていくよ！
PhotosViewController.swiftを開いて、 「// ここから先を追加」と書かれているコードを追加しよう！
```PhotosViewController.swift
import UIKit

class PhotosViewController: UIViewController {
    
    @IBOutlet var imageView: UIImageView!
    @IBOutlet var generatedTextLabel: UILabel! // 生成されたテキスト表示用label
    
    var takenImage: UIImage?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        imageView.image = takenImage

        // ここから先を追加
        // takenImage があるなら API を呼ぶ
        if let image = takenImage,
           let imageData = image.jpegData(compressionQuality: 0.8) {
            Task {
                // さっき作ったgenerateTextfromImage関数で画像からテキストを生成
                let resultText = await MachineLearningHelper.shared.generateTextfromImage(imageData: imageData)
                // labelに生成されたテキストを入れる
                DispatchQueue.main.async {
                    self.generatedTextLabel.text = resultText
                }
            }
        }
    }
}
```

### buildして試してみよう！
カメラを使うアプリはsimulatorでは使えないよ！実機で試してみよう！
こんな感じで表示されたら成功！OpenAIに投げるテキストをカスタマイズしてみよう！
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784072/872a421d-764d-4831-a85f-a6c6db59f83d.gif)