🌐

[Azure] OpenAI Service で AI チャットボットを作ってみよう

Yuna Nishikino(Sugimoto)

2024/11/22に公開

1. はじめに

こんにちは！このブログでは、Azure OpenAI サービスを使用して、誰でも簡単にシンプルなチャットボットを作成し、Azure App Service 上で Web サイトとしてホストする方法を紹介します。

画面下赤枠で示しているチャットの入力ボックスから質問を入力すると画面上部赤枠のように ChatGPT が応答を返却してくれます。ぜひ一緒にチャットボットを作ってみましょう！

コメント大歓迎です！わからないことや気になる点がありましたら、ぜひコメントください。

(チャットボットのサンプル画面)
チャットボットの画面

Azure とは？

Azure は、Microsoft が提供するクラウドサービスプラットフォームです。これを利用することで、サーバーの設定や管理を気にせずにアプリケーションやサービスを迅速にデプロイし、スケールすることができます。

Azure は Microsoft 製品（Windows Server、Active Directory、Office 365(Microsoft Excel/Word/Outlookなど)、Teams）とのシームレスな統合が可能です。これにより、既存の Microsoft 製品との連携を活用した開発や運用が容易になります。

Azure OpenAI の ChatGPT モデルとは？

Azure OpenAI サービスは、OpenAI の強力な言語モデル（例えば、ChatGPT）をAzureのインフラストラクチャ上で利用するためのサービスです。これにより、自然言語処理の機能を持つアプリケーションを簡単に構築できます。

**Microsoft Copilot Studio について**

2. 必要な準備

まずは、プロジェクトを始めるための準備をしましょう。以下の手順に従って、必要なアカウントやツールを設定します。

Azure アカウントの作成

Azure のサービスを利用するためには、Azure アカウントが必要です。以下の手順でアカウントを作成してください。

Azure公式サイトにアクセスします: Azure公式サイト
画面左中央の「Azureを無料で試す」をクリックします。
「今すぐ開始」をクリックして、必要な情報を入力し、アカウントを作成します。
クレジットカード情報が必要ですが、無料で始められます。
!

無料アカウント作成後、最初の 30 日間は、サードパーティの Marketplace での購入を除き、すべてのサービスに使用できる 200 ドルのクレジットが請求通貨で付与されます。無料のクレジットを使用して、Azure サービスのさまざまなレベルと種類を実際に使ってみることができます。詳細については、Azure の無料アカウントに含まれるサービスを作成するをご確認ください。Azure 無料アカウントに対して課金が課せられる理由についてもご確認ください。
アカウントの作成が完了したら、Azure Portal にログインします。

ツールのインストール

Python のインストール
- Python の公式サイトから Python 3.8 以降のバージョンをダウンロードしてインストールします。
  - Windows PC では、インストールの際に "Add Python 3.x to PATH" をチェックするのを忘れないでください。もし忘れたら、慌てずもう一度インストールしましょう。
- インストールが完了したら、コマンドプロンプトまたはターミナルで python --version コマンドを実行し、インストールが成功したことを確認します。
Visual Studio Code のインストール
- Visual Studio Code の公式サイトから VSCode をダウンロードしてインストールします。
- 必要に応じて Python 拡張機能をインストールします。例: 【2024年最新】Python開発で便利なVSCode拡張機能　オススメ15選！
Azure CLI のインストール
- Azure CLI の公式サイトから、お使いのオペレーティングシステムに合わせて Azure CLI をインストールします。
- インストールが完了したら、コマンドプロンプトまたはターミナルで az --version コマンドを実行し、インストールが成功したことを確認します。
Git のインストール
- Azure 環境へのアプリのデプロイを行う際に、GitHub と Git を使用します。
- Git の公式サイトからお使いのオペレーティングシステムに合わせて Git をインストールします。

3. Azure OpenAI サービスの設定

新しい OpenAI リソースの作成

Azure Portal にログインします。
画面上部中央の検索バーに「OpenAI」と入力し、表示されたリストから Azure OpenAI を選択します。
「+作成」ボタンをクリックして、新しい OpenAI リソースの作成を開始します。情報を全て入力したら、「作成」ボタンを押下しリソースを作成します。
- サブスクリプション: ご使用のサブスクリプションを選択します。
- リソースグループ: 新しいリソースグループを作成するか、既存のリソースグループを選択します。
- リージョン: リソースをホストするリージョンを選択します（例: Japan East）。
  !
  
  リージョンごとに使用できるモデルが異なります。使用したいモデルがあるリージョンを選択してください。本記事で使用するモデル gpt-4o-mini は東日本(Japan East)で使用できます。
- 名前: OpenAI リソースの名前を入力します。
- 価格レベル: Standard S0(使った分だけ支払うプラン)を選択します。
  (参考) 料金計算ツールとプラン
  
  料金計算ツールを使っておおよそのコストを算出できます。モデルごとの料金は、Azure OpenAI Service の価格をご確認ください。
- 種類: 全てのネットワーク
- Tags: なし

モデルのデプロイ

Azure OpenAI サービスの作成が完了したら、当該リソースの概要 > "Azure OpenAI Studio に移動する" または、こちらのリンクから Azure OpenAI Studio へアクセスします
デプロイ>"＋モデルのデプロイ">基本モデルをデプロイするからデプロイするモデルの構成を選択します。
- モデル: gpt-4o-mini
- デプロイ名: モデルの名前を自由に入力します。本記事では gpt-4o-mini とします。
- デプロイの種類: 本記事ではグローバル標準を選択します。
  !
  
  デプロイの種類については、デプロイのタイプをご確認ください。
デプロイが終了したら、Azure ポータルで対象リソースを再度開き、キーとエンドポイントタブから API キー(1または2)とエンドポイントをメモしておきます。(後のセクションで使用します)

4. チャットボットのコードを書く

チャットボットのコードは以下公式サイトの記事を参考に作成します。

クイックスタート: Azure OpenAI Service で GPT-35-Turbo と GPT-4 を使い始める

OpenAI Python クライアントライブラリをインストール

Visual Studio Code を開き、ターミナルで以下のように入力します。

OpenAI Python 1.x

pip install openai

Visual Studio Code ターミナルに pip コマンドを入力した様子

Visual Studio Code のターミナルの開き方

Visual Studio Code を起動した後、フォルダーまたはワークスペースを開きます。
画面上部のメニュー View > Terminal から Terminal を開くことができます。

さらにもっと詳しく知りたい方は、Visual Studio Code 公式サイト Getting started with the terminal(英語)をご確認ください。

エンドポイントとキーを環境変数に格納

"REPLACE_WITH_YOUR_KEY_VALUE_HERE", "REPLACE_WITH_YOUR_ENDPOINT_HERE" の部分を先ほど確認した API キーとエンドポイントの値に置き換えます。

Windows

Windows コマンドプロンプト

set CHATBOT_AZURE_OPENAI_API_KEY "API キーに置き換えてください" 
set CHATBOT_AZURE_OPENAI_ENDPOINT "エンドポイント(https://<リソース名>.openai.azure.com/)に置き換えてください"

Mac OS

Bash

export CHATBOT_AZURE_OPENAI_API_KEY="API キーに置き換えてください"
export CHATBOT_AZURE_OPENAI_ENDPOINT="エンドポイント(https://<リソース名>.openai.azure.com/)に置き換えてください"

Python アプリケーションから ChatGPT のモデルを呼び出す

main.py という名前の新しい Python ファイルを作成します。
Visual Studio Code でファイルの作成方法

Visual Studio Code の左側の EXPLORER メニューにあるファイルのアイコンからファイルを作成できます。
main.py の内容を次のコードに置き換えます。
以下は OpenAI の ChatGPT モデルを呼び出すサンプルコードです。

from openai import AzureOpenAI
import os  
  
# Azure OpenAI の API キーとエンドポイントを環境変数から取得  
azure_endpoint = os.environ["CHATBOT_AZURE_OPENAI_ENDPOINT"] 
api_key = os.environ["CHATBOT_AZURE_OPENAI_API_KEY"] 
deployment_name = "gpt-4o-mini" # 先ほど作成したモデルのデプロイ名に置き換えてください
api_version = "2024-08-01-preview" # 先ほど作成したモデルの API バージョンに置き換えてください

# Azure OpenAI クライアントを作成  
client = AzureOpenAI(  
    azure_endpoint=azure_endpoint,  
    api_key=api_key,  
    api_version=api_version 
)
# チャット履歴を保持するリスト  
chat_history = [  
    {"role": "system", "content": "You are a helpful assistant."}  
]
  
# ユーザーからのメッセージに対して応答を生成する関数  
def get_response(message):  
    # ユーザーのメッセージを履歴に追加  
    chat_history.append({"role": "user", "content": message})  
    # ChatGPT からの応答を取得  
    response = client.chat.completions.create(  
        model=deployment_name, 
        messages=chat_history  
    ) 
    # 応答を履歴に追加  
    assistant_message = response.choices[0].message.content.strip()  
    chat_history.append({"role": "assistant", "content": assistant_message})
    return assistant_message  
  
if __name__ == "__main__":  
    while True:  
        user_input = input("You: ")  
        if user_input.lower() in ["exit", "quit"]:  
            break  
        print("ChatGPT:", get_response(user_input))

サンプルコードの簡単な解説

ライブラリのインポート: from openai import AzureOpenAI で openai ライブラリから AzureOpenAI クラスをインポートします。
API キーの設定: os.environ メソッドを使用して環境変数に設定したキーとエンドポイントを変数に格納します。
応答を取得する関数 get_response:
client.chat.completions.create メソッドを使用して、ChatGPT モデルにメッセージを送信します。
メイン部分:
ユーザーからの入力を受け取り、get_response 関数を呼び出して応答を取得し表示します。

(Optional) ローカル環境で動作確認

現時点での動作を確認してみましょう。Visual Studio Code のターミナルで以下を入力します。

python main.py

正常にプログラムが動作すると、下図のように、ターミナルに入力した質問に対し、ChatGPT の応答が表示されます。

main.pyを実行後、ターミナルで ChatGPT と会話する画面

以下のような openai.OpenAIError や Key が見当たりませんといったエラーが発生した場合、正しく環境変数がセットされていない可能性がありますので、環境変数を再度セットして再実行をお試しください。

openai.OpenAIError: Missing credentials. Please pass one of `api_key`, `azure_ad_token`, `azure_ad_token_provider`, or the `AZURE_OPENAI_API_KEY` or `AZURE_OPENAI_AD_TOKEN` environment variables.

チャット画面の追加

ターミナルで ChatGPT との会話が確認できたら、チャットボットの画面を作成します。今回は Python で簡単にチャットボットの画面を作成できる Streamlit フレームワークを使用します。

以下 1 から順に実施します。

1. 必要なライブラリをインポート

streamlit ライブラリを pip で追加します。

pip install openai

その後、main.py にて streamlit をインポートします。環境変数を使用せずにチャットボットを作成するため import os は削除します。

from openai import AzureOpenAI
import streamlit as st
import os

2. Streamlit で Azure OpenAI サービスの呼び出し

Streamlit のセッションステートを使ってチャットの履歴を管理します。これにより、ユーザーがページを更新しても履歴が保持されます。

if "chat_history" not in st.session_state:
    st.session_state.chat_history = []

Azure OpenAI サービスの API を使って応答を生成する関数を定義します。

def get_response(prompt: str = ""):  
    # ユーザーのメッセージを履歴に追加 
    st.session_state.chat_history.append({"role": "user", "content": prompt})  
    # モデルに送信するメッセージを作成, セキュリティの観点から chat_history オブジェクトは直接渡さない
    system_message = [{"role": "system", "content": "You are a helpful assistant."}]
    chat_messages = [
                {"role": m["role"], "content": m["content"]}
                for m in st.session_state.chat_history
    ]
    
    response = client.chat.completions.create(  
        model=deployment_name, 
        messages=system_message + chat_messages,
        stream=True
    )
    return response

chat.completions.create メソッドで stream=True オプションを使うと、API から応答が生成されると同時に部分的に返されます。これにより、ユーザーは応答が完全に生成されるのを待つ必要がなく、部分的に生成された応答をすぐに見ることができます。また、応答が逐次的に表示されるため、より対話的でインタラクティブな感覚をユーザーに提供できます。
chat.completions.create メソッドの詳細は、OpenAI API リファレンス を参照ください。なお、先リファレンスでは OpenAI クラスを使用した例を紹介していますが、本記事で使用しているクラスは AzureOpenAI であることにご注意ください。（使用できるオプションなどはほぼ同様になります）
少々発展的な内容となるため通常は不要ですが、もし正確なクラスの情報が必要である場合には、openai-python ライブラリの実装内容 を参照ください。

3. 生成された応答をチャット履歴に追加します。

def add_history(response):
    st.session_state.chat_history.append({"role": "assistant", "content": response})

4. Streamlit でチャットボットの画面を作成

Streamlit を使ってチャットボットの画面を構築します。以下のコードでは、タイトルの設定、チャット履歴の表示、ユーザーの入力を受け取る部分を作成しています。

# Streamlit アプリケーションの UI を構築
st.title("ChatGPT-like clone")

# チャット履歴の表示 
for chat in st.session_state.chat_history:
    with st.chat_message(chat["role"]):
        st.markdown(chat["content"])

# ユーザーの入力を受け取る  
if prompt := st.chat_input("What is up?"):
    with st.chat_message("user"):
        st.markdown(prompt)
    with st.chat_message("assistant"):
        stream = get_response(prompt)
        response = st.write_stream(stream)
        add_history(response)

最終的なコードは以下のようになります。

最終的なコード

ファイル構成図は以下です。

プロジェクトルート/  
└── main.py

コードはそれぞれ以下を参照ください。

(参考) main.py

main.py

from openai import AzureOpenAI
import streamlit as st
import os

azure_endpoint = os.environ["CHATBOT_AZURE_OPENAI_ENDPOINT"] 
api_key = os.environ["CHATBOT_AZURE_OPENAI_API_KEY"]
deployment_name = "gpt-4o-mini"
api_version = "2024-08-01-preview"

# Azure OpenAI クライアントを作成  
client = AzureOpenAI(  
    azure_endpoint=azure_endpoint,  
    api_key=api_key,  
    api_version=api_version 
)

# チャットの履歴を保持するためのセッションステートを初期化
if "chat_history" not in st.session_state:
    st.session_state.chat_history = []

# ユーザーからのメッセージに対して応答を生成する関数
def get_response(prompt: str = ""):  
    # ユーザーのメッセージを履歴に追加 
    st.session_state.chat_history.append({"role": "user", "content": prompt})  
    # モデルに送信するメッセージを作成, セキュリティの観点から chat_history オブジェクトは直接渡さない
    system_message = [{"role": "system", "content": "You are a helpful assistant."}]
    chat_messages = [
                {"role": m["role"], "content": m["content"]}
                for m in st.session_state.chat_history
    ]
    
    response = client.chat.completions.create(  
        model=deployment_name, 
        messages=system_message + chat_messages,
        stream=True
    )
    return response

def add_history(response):
    st.session_state.chat_history.append({"role": "assistant", "content": response}) 


# Streamlit アプリケーションの UI を構築
st.title("ChatGPT-like clone")

# チャット履歴の表示 
for chat in st.session_state.chat_history:
    with st.chat_message(chat["role"]):
        st.markdown(chat["content"])
        
# ユーザーの入力を受け取る  
if prompt := st.chat_input("What is up?"):
    with st.chat_message("user"):
        st.markdown(prompt)
    with st.chat_message("assistant"):
        stream = get_response(prompt)
        response = st.write_stream(stream)
        add_history(response)

ローカル環境で試してみる

Visual Studio Code のターミナルを開き、以下コマンドを実行します。

streamlit run main.py

上記コマンドを実行後、http://localhost:8501/ をブラウザーで開くと下図のようにチャット画面が開き、画面下の入力ボックスに質問を入れると ChatGPT が応答を返してくれます。

チャット画面

5. Azure App Service へデプロイ

App Service 上へのデプロイには、継続的デプロイやデプロイスロットをご利用いただくことをお勧めします。

継続的デプロイでは、コードの変更を自動的に App Service に適用でき、デプロイサイクルを早めることができます。また、デプロイスロットは、App Service 上にテスト/ステージング環境を作成することができる機能です。
それぞれご利用いただくことも可能ですが、共にご利用いただくことでコードの変更をすばやく App Service 上のテスト環境で検証ができ、デプロイスロットのスワップ機能やトラフィックの制御により本番環境への影響を最小限にしながら変更を適用することができます。
さらに、デプロイ手順を自動化することによりヒューマンエラー(意図しないコンテンツをデプロイしてしまったなど)を減らすことができます。

スロットを使用したデプロイについては、こちらの記事推しのAzureリソース「App Service」について語り尽くしましたが非常にわかりやすくまとめてくださっています。
本記事では、デプロイスロットは使用しませんが、実際にアプリを運用する際はぜひご検討いただければと思います。

継続的デプロイを構成する

早速デプロイを構成していきましょう！

リポジトリの設定

リポジトリの作成
GitHub などコードを配置するためのレポジトリを作成します。リポジトリは、プロジェクトのすべてのコードやファイルを管理する場所です。
参考: 【超入門】GitHubリポジトリの作り方-Qiita
アプリケーションをレポジトリにプッシュ
次に、作成したPythonアプリケーションをVisual Studio Codeで開きます。以下の手順で進めます。

必要なファイルを作成:
- main.pyと同じフォルダーに、以下の2つのファイルを作成します。
  - .gitignore: アップロードしたくないファイルやフォルダを指定します。
  - requirements.txt: アプリケーションで使用しているPythonモジュールを記載します。
    例:

.gitignore

<レポジトリにアップロードしたくないファイルがあればこちらに記載します>

requirements.txt

streamlit
openai

ローカルリポジトリのセットアップ
Visual Studio Codeのターミナルを開き、以下のコマンドを順に実行します。

Visual Studio Code のターミナル

git init  # ローカルリポジトリを初期化  
git remote add origin https://github.com/<GitHub アカウント名>/<リポジトリ名>.git  # リモートリポジトリの追加

ローカルのアプリケーションを GitHub にアップロード
以下コマンドを実行し、ローカルのアプリケーションをレポジトリ上にアップロードします。

Visual Studio Code のターミナル

git add .  # すべてのファイルをステージング  
git commit -m "Initial commit"  # 初回のコミット  
git push origin main  # mainブランチにプッシュ

App Service の設定

Azure ポータルから App Service を作成します
Azure ポータルをブラウザーで開き、画面中央上部の検索バーで app services と検索します。

(引用: Web アプリを発行する)
Azure ポータル検索バーで App Service と検索
2. App Services ページで、[作成] > [Web アプリ] と選択した後、以下のように情報を入力し、[レビュー+作成]を押します。

リソースグループ:[新規作成] を選択します。名前として「myResourceGroup」と入力します。
名前: グローバルに一意の Web アプリ名を入力します。
発行: [コード] を選択します。
ランタイムスタック: [Python(準備のセクションでインストールしたものと同じバージョンまたは一番近いバージョン)] を選びます。
オペレーティングシステム: Python は 2024/11 現在 [Linux] のみサポートしています。
リージョン: Japan East を選択します。
App Service プラン: [新規作成] を選択し、名前として「myAppServicePlan」と入力します。[価格プラン] で、[Free F1] または、ご希望のプランを選択します。

設定画面例

リソースの詳細

App Service が作成できたら、環境変数を追加します。
Azure ポータルで先ほど作成した App Service を選択し、左側のメニューから設定 > 環境変数を選択し、[+追加]から環境変数を追加します。
ここで設定した環境変数はアプリケーションから参照できるようになります。

名前: CHATBOT_AZURE_OPENAI_API_KEY
- 値: 先ほど取得した Azure OpenAI サービスの API KEY を記載します
名前: CHATBOT_AZURE_OPENAI_ENDPOINT
- 値: 先ほど取得した Azure OpenAI サービスのエンドポイントを記載します

Azure ポータルで環境変数メニューを開く画面

環境変数の追加

環境変数を追加する画面

環境変数画面

Azure App Service への継続的デプロイに従って継続的デプロイを有効にします

デプロイ設定後、自動的にデプロイが行われます。デプロイ状況についてはデプロイセンターの"ログ"タブからデプロイ状況を見ることができます。

6. チャットボットのデプロイとテスト

デプロイが成功したら、Azure ポータルで App Service を選択し、概要の "参照" ボタンまたは、既定のドメインに表示されている URL をクリックします。

App Service の URL を確認する

ブラウザーで App Service の URL へアクセス後、ローカル環境と同様の画面が表示されているはずです！画面が確認できたら、画面下部のチャットボックスに質問を入力し、ChatGPT から応答が表示されましたら成功です。

チャットボットの画面

7. 検証時に発生した実際の料金について

本検証時にあたり ChatGPT と半日程度複数回会話を行ったところ、その時に発生したコストは 16.70 円でした。会話の文字数やお客様の環境、実行時期などによりもちろん変動はありますが、あくまで1つの例としてご参考ください。
GPT-4o-mini モデルは価格を抑えつつ、AI を使用したい方にはおすすめのモデルです。

コストの画面

8. まとめ

本記事では、OpenAI Service で AI チャットボットを作成し、App Service でホストする手順を紹介しました！
こちらの記事が少しでも皆様のご参考になりましたら幸いです。

9. 参考資料とリンク

Microsoft (有志)Publication

Microsoft Azureをはじめとする最新技術情報をお届けします。 ※このPublicationは日本マイクロソフトまたは米Microsoft所属社員による個人の見解であり、所属する組織の公式見解ではありません。 ※Publicationに参加希望の社員は @07JP27までご連絡ください。