Webアプリケーションから簡単にOpenAIのGPTモデルを使用してテキスト生成する方法

ここでは`Streamlit`を使用して`ChatGPT`のAPIを呼び出して自然言語処理を行うWebアプリケーションの作成方法について説明しています。また、プログラムからChatGPTを利用するために必要なOpenAI APIキーの取得方法についても最初に説明しています。

# 1.OpenAIキーの取得

https://openai.com/product を開いて「Get started」をクリックする。

![img.png](https://github.com/abenben/demo_openai/raw/master/images/img.png)

ログインする。またはアカウントを作成する。作成する場合はメールアドレスと電話番号が必要です。

![img_1.png](https://github.com/abenben/demo_openai/raw/master/images/img_1.png)

無事、ログインすると紹介ページが表示される。

![img_2.png](https://github.com/abenben/demo_openai/raw/master/images/img_2.png)

自分のアイコン画像を右クリックするとリストが表示されるので、その中から「View API Keys」をクリックする。

![img_3.png](https://github.com/abenben/demo_openai/raw/master/images/img_3.png)

「Create new secret key」をクリックしてキーを作成する。
作成したキーはコピーして環境変数などに設定する。
※ 環境変数の設定がわからない人は直接Pythonのコードに記入してください。
* この設定画面からはもう一度見ることはできない。分からなくなった場合は新規にキーを生成し直すこと。

![img_4.png](https://github.com/abenben/demo_openai/raw/master/images/img_4.png)

# 2.Streamlitのプログラミング


## パッケージのインストール

`Streamlit`と`OpenAI`のパッケージをインストールする必要があります。
`Streamlit`はWebアプリケーションのフレームワークであり、`OpenAI`はChatGPTのAPIを使用するためのパッケージです。

前提としてPythonがインストールされている必要があります。また、インストールする際には、Pythonのバージョンと互換性のあるバージョンを選択する必要があります。

```shell
$ pip install streamlit
$ pip install openai
```

## コード解説

このコードは、Streamlitを使用してユーザーの入力に基づいてOpenAIのAPIを使用して自然言語処理を実行するものです。

最初に、必要なパッケージをインポートします。

```python
import streamlit as st
import openai
import os
```

<b>streamlit</b>はWebアプリケーションのフレームワークで、<b>openai</b>はOpenAIのAPIを使用するためのパッケージです。osは、環境変数を取得するために使用されます。

次に、APIキーを設定するための関数を定義します。

```python
def setup_openai_api():
    openai.api_key = os.environ.get('OPEN_AI_KEY')
```

この関数は、OPEN_AI_KEY環境変数からAPIキーを読み取り、`openai.api_key`にセットします。
環境変数への設定方法が分からない人は、以下の様に直接OpenAIのキーを書き込んでください。ただしコード内容の漏洩にはくれぐれもご注意ください。

```python
def setup_openai_api():
    openai.api_key = 'sk-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
```


次に、OpenAIに問い合わせを送信して応答を取得する関数を定義します。

```python
# OpenAIに問い合わせを送信し、応答を取得する関数
def generate_response(system_text: str, user_text: str) -> openai.api_resources.Completion:
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=message,
        max_tokens=2000,
        temperature=0,
        stream=True
    )
    return response
```

この関数は、`openai.ChatCompletion.create`メソッドを使用してOpenAIに問い合わせを送信し、応答を取得します。`model`パラメータは使用するOpenAIのモデルを指定し、`messages`パラメータには、チャットの履歴が含まれます。`max_tokens`パラメータは、生成されたテキストの長さを制御し、`temperature`パラメータは、生成されたテキストの多様性を制御します。

次に、ユーザーからの入力を取得する関数を定義します。

```python
def get_user_input() -> str:
    return st.text_area("質問", value="OpenAIとOpen AIの違いは？")
```

この関数は、streamlitの`text_area`メソッドを使用して、ユーザーからテキスト入力を受け取ります。

最後に、メインの関数を定義します。

```python
def main():
    setup_openai_api()  # OpenAI APIキーを設定する

    system_text = "アシスタントAI"
    user_text = get_user_input()  # ユーザーの入力を取得する
    is_generate_clicked = st.button("回答")

    if is_generate_clicked:
        response = generate_response(system_text, user_text)  # OpenAIに問い合わせを送信し、応答を取得する
        display_response(response)  # OpenAIから受け取った応答を表示する
```

この関数は、最初にふたつの関数`setup_openai_api`と`get_user_input`を呼び出し、OpenAI APIキーを設定し、ユーザーからの入力を取得します。次に、ユーザーが回答ボタンをクリックしたときにのみ`generate_response`を呼び出し、OpenAIから返された応答を表示するための`display_response`関数を呼び出します。

以下は、display_response 関数の例です。

```python
def display_response(response: openai.api_resources.Completion):
    for message in response.choices:
        text = message.text
        st.text(text)
```

この関数は、streamlitの`text_area`メソッドを使用して、ユーザーからテキスト入力を受け取ります。

最後に、メインの関数を定義します。

```python
if __name__ == "__main__":
    main()
```

このアプリケーションは、Webアプリケーションとして動作し、ユーザーが入力したテキストに基づいてOpenAIのAPIを使用して自然言語処理を行い、結果を表示します。

# 実行方法

このコードは、OpenAIのAPIを使用して、ユーザーが入力した質問に答えるWebアプリケーションをStreamlitで実装したものです。以下のような流れで動作します。

* ユーザーが質問を入力する
* 質問をOpenAIのAPIに送信し、回答を受け取る
* 回答を表示する

実行方法として、ターミナルで`streamlit run demo1.py`を実行し、Webアプリケーションを起動します。その後、http://localhost:8501 にアクセスすることでアプリケーションを使用できます。

```shell
$ streamlit run demo1.py
  You can now view your Streamlit app in your browser.
  Local URL: http://localhost:8501
```

実行結果のイメージはこのようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27772/238c0f2d-9916-a821-61ef-e6a59be2fe27.png)

# ソースコード

このWebアプリケーションのソースコードは、GitHubリポジトリで公開されています。

https://github.com/abenben/demo_openai/blob/master/src/demo1.py