GPT-4 with Vision を API 経由で触ってみる。Python と Chainlit で簡単に。

この記事は [セゾン情報システムズ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/sisco) 4日目の記事です。

# 背景
- OpenAI の ChatGPT で画像をインプットとする機能がリリースされ、API も利用可能になった
- Azure OpenAI で試したかったが、まだ未リリースなので OpenAI の API を試してみる
- 副次的な効果として最低限の費用で ChatGPT の機能を試せます
    - API の最低クレジット 5$ から
- 最低限のプログラムで実現したい

# 前提
- OpenAI にアカウントを登録している
- python が利用可能

# 目次
- [OpenAI で API キーを生成](#openai-で-api-キーを生成)
- [python で chainlit を利用して簡単なプログラムを作成](#python-で-chainlit-を利用して簡単なプログラムを作成)

# OpenAI で API キーを生成

#### API キーを生成 
1. 以下 URL にアクセス
https://platform.openai.com/api-keys
1. 「Create new secret key」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/6c69d6a3-ca68-4934-708f-9e540d6a2965.png)
1. 適当な名前を入力し、「Create secret key」 をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/e5205f12-6378-e45b-2dd5-250589ae6f24.png)
1. 生成されたキーが表示されるので、コピーして控えておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/81236121-b916-1c12-f443-49b6cd6b8886.png)

#### クレジットをチャージ(課金)
API を利用するにはクレジットをチャージする必要がある。最低 5$ からになります。
1. 以下 URL にアクセス
https://platform.openai.com/account/billing/overview
1. 「Add to credit balance」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/fbc5e13d-b450-cb8a-6938-582c6036bc29.png)
1. チャージする金額を入力。最低 5 $ から。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/f9fe6d9b-8b58-37fd-ad7d-7b16f8123db4.png)

#### 注意点
`Auto recharge is off` クレジットのオートリチャージがオフになっていることを確認しておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/efe0dc21-69be-f888-ff92-bfb5dcb6c809.png)

# python で chainlit を利用して簡単なプログラムを作成

#### ライブラリインストール
chainlit というライブラリを使ってチャット Web アプリケーションを最低限のコードで動かします
pip や pipenv を使ってインストール
```
pip install openai
pip install chainlit
```
2023/12/04時点のバージョンは以下
- openai
    - 1.3.7
- chainlit
    - 0.7.700
#### スクリプトファイル作成
app.py など適当なファイルを作成して、以下コードを貼り付ける
```python
import os
import base64
import chainlit as cl
from openai import OpenAI

client = OpenAI(
    api_key=os.environ.get("OPENAI_API_KEY")
)

@cl.on_message
async def on_message(message: cl.Message):
    if not message.elements:
        await cl.Message(content="画像が存在しません").send()
        return

    # 画像を取得して、base64エンコーディング    
    images = [file for file in message.elements if "image" in file.mime]
    encoded = base64.b64encode(images[0].content).decode()
    
    # テキストと画像を送信
    messages=[
            # {"role": "user", "content": message.content},
            {
                "role": "user",
                "content": [
                    {"type": "text", "text": message.content},
                    {
                        "type": "image_url",
                        "image_url": f"data:image/jpeg;base64, {encoded}"
                    },
                ]
            }
        ]
    response = client.chat.completions.create(
        model="gpt-4-vision-preview",
        messages=messages,
        max_tokens=1000
    )

    # 受け取った結果をチャットに送信
    await cl.Message(
        content=response.choices[0].message.content,
    ).send()
```
#### 環境変数をセット
- `OPENAI_API_KEY` という環境変数名で、生成した API キーをセット
- (コードに直接記述でも一応 OK)
#### アプリケーション起動
以下コマンドでアプリケーションを起動
`chainlit run app.py`
#### ブラウザでアクセス
ブラウザで以下 URL にアクセス
http://localhost:8000
#### 使ってみる
1. クリップアイコンから画像をアップロードし、質問をテキストで入力する(クリップボードから画像貼り付けもできる)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/19af0c05-f899-72ac-71a7-20e474d8f907.png)
1. 実行結果サンプル
(精度は。。画像の質やプロンプトで調整はできるはず?)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517184/302fd61b-2b35-98ab-aa60-89c5b27bc44f.png)

# まとめ
- GPT-4 with Vision を API 経由で体験できました
- Azure OpenAI でも利用可能になったら速攻で試していきたい

# 参考資料
- https://platform.openai.com/docs/guides/vision