Python 初心者でも簡単！OpenAI を利用したチャットアプリを Streamlit で公開してみた

[2023.09.19 追記]
本記事の執筆にあたり参考にさせていただいたUdemy講座の講師の方より、記事内容についてコメントをいただいたため一部修正しました。　

はじめに

こんにちは、アノテーション テクニカルサポートの Shimizu です。

突然ですが、私も含めた Python 初心者に、以下のような人は多いのではないでしょうか。

そんな私にピッタリのUdemy講座を見つけたため、今回受講してみました。

ChatGPT APIを使ってチャットボットを作ろう！【GPT-3.5/GPT-4】 -LLMを使うアプリの構築と公開- | Udemy

講座では基本的な Python チャットアプリの作成から実践的な AI の活用アイデアまで丁寧にされており、初心者の私でも楽しく学べる内容でした。

今回は講座の中の一部（Python で基本的な AI チャットアプリを公開するまで）を実践してみた手順をご紹介します！

完成イメージ

step1. 事前準備

まず事前に下記（1）～（3）を用意しましょう。
※ 本記事では Git / GitHub の基本的な使い方や Python の環境構築などの説明は省略しています。

(1) OpenAI の API キー
まだ API キーを取得していない方は、こちらの記事を参考に取得しておきましょう。

(2) GitHub のアカウント登録
GitHub アカウントを用意し、今回使用するリポジトリを作成しておきます。

今回は最短でアプリを公開するのが目的なので Public リポジトリを作成します。名前は「openai-streamlit-test-yyyymmdd」等にしておきます。

(3) ローカルの Python 実行環境
Python のコードをターミナル上で実行したり、GitHub に push できる環境を用意しましょう。
筆者の場合は Windows の WSL 上で下記の環境を構築しました。

• Ubuntu 20.04 LTS(WSL)
• Python 3.11.4
• VSCode 1.80.0

（1）～（3）が用意できたら、次のステップへ進みましょう！

step2. ローカルの Python 開発環境でチャットアプリを作成し、動作確認する

まずはターミナルから下記コマンドを実行し、今回必要なパッケージ（streamlit, openai）をローカル環境にインストールします。

pip install streamlit
pip install openai

次に適当な作業フォルダを作成し、中に下記 3 つのファイルを配置します。
フォルダ名は任意ですが、ここでは分かりやすいように step1 で作成した GitHub のリポジトリと同名にしておきます。

/openai-streamlit-test-yyyymmdd #作業フォルダ
├─ app.py　#コード本体
├─ secret_key.py #OpenAI API キーを格納するファイル
├─ title_image.jpg　#画面に表示するタイトル画像

それぞれのファイルの内容は以下です。

(1) app.py の内容
コードの前半が OpenAI API との通信処理、後半が Streamlit を使用した Web UI の実装部分になります。
※ 参考Udemy講座内のサンプルコードを引用させていただきました。
※ 元のコードは MIT License にて公開されています。

# Copyright (c) 2023 yuky_az
# MIT License https://opensource.org/license/mit/

import streamlit as st
import openai

# 外部ファイルからAPI keyを保存
import secret_keys
openai.api_key = secret_keys.openai_api_key

system_prompt = "あなたは優秀なアシスタントAIです。なんでも質問に答えてください。"

# メッセージのやりとりを保存する
if "messages" not in st.session_state:
    st.session_state["messages"] = [
        {"role": "system", "content": system_prompt}
        ]

# OpenAI API との通信部分
def communicate():
    messages = st.session_state["messages"]

    user_message = {"role": "user", "content": st.session_state["user_input"]}
    messages.append(user_message)

    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=messages
    )

    bot_message = response["choices"][0]["message"]
    messages.append(bot_message)

    st.session_state["user_input"] = ""


# UI 部分の実装
st.title("アシスタントAIボット")
st.image("title_image.jpg")
st.write("? こんにちは！何でも質問してください")

user_input = st.text_input("メッセージを入力してください。", key="user_input", on_change=communicate)

if st.session_state["messages"]:
    messages = st.session_state["messages"]

    for message in reversed(messages[1:]):
        speaker = "?"
        if message["role"]=="assistant":
            speaker="?"

        st.write(speaker + ": " + message["content"])

(2) secret_key.py の内容
"Your API Key" の部分は、step1 で取得した実際の OpenAI APIキーに置き換えます。

openai_api_key = "Your API Key"

(3) title_image.jpg（任意）
これは各自用意した適当な画像でOKです（無くてもかまいません）
筆者の場合は生成AIでそれらしいタイトル画像を作成しました。よろしければサンプルとしてお使いください。

実はこれだけで、チャットアプリは完成です。
ターミナルから下記のコマンドを実行して、アプリをローカルで起動します。

streamlit run app.py

※ 初回実行時は Email の入力を促されますが、特に入力せずに Enter キーでスキップしてOKです。

ブラウザが立ち上がり、http:localhost:8501 でチャットアプリが起動します。
適当な質問を入力して Enter キーを押し、返答が返ってくるのを確認しましょう。

正常に返答が返ってくれば、ローカル環境での動作確認はOKです！
次のステップではアプリを Web に公開する前準備として、GitHub のリポジトリにソースコードの push を行っていきます。

step3. アプリ公開のためにソースコードを GitHub に push する

ここでひとつ、重要な注意点があります。
それは OpenAI の API キーが含まれるファイルを GitHub の公開リポジトリに push してはいけないということです。誤って push してしまうと、大事な API キーが誰からでも見られる状態になってしまいます。

ですので、step2 で作成したソースコードを GitHub へ push する前に、以下の 3 点を変更する必要があります。

• secret_key.py ファイルを削除する
  （Git に慣れた方は、削除せずに .gitignore で除外しても OK です）
• app.py の記述を変更し、API キーの読み込み設定を変更する
• アプリのデプロイ時に必要な requirements.txt ファイルを追加する

app.py の設定変更（4行目 ～ 6行目を以下に変更する）

########## 変更前
# 外部ファイルからAPI keyを保存
import secret_keys
openai.api_key = secret_keys.openai_api_key

########## 変更後
# Streamlit Community Cloudの「Secrets」からOpenAI API keyを取得
openai.api_key = st.secrets.OpenAIAPI.openai_api_key

requirements.txt の内容

streamlit==1.20.0
openai

ここまでの変更で、現在は以下のようなファイル構成になっているはずです。

変更後のファイル構成

/openai-streamlit-test-yyyymmdd #作業フォルダ
├─ app.py　#コード本体（設定変更済み）
├─ requirements.txt # 必要なライブラリを記述したファイル
├─ title_image.jpg

ソースコードの中に secret_keys.py ファイルが含まれていないことを確認したら、GitHub への push を行っていきます。

GitHub のリポジトリにソースコードを push する

#git の開始とリモートリポジトリの追加
git init
git branch -M main
git remote add origin https://github.com/[step1 で作成したリポジトリ名].git

#リモートリポジトリへコードを push する
git add .
git commit -m "first commit"
git push -u origin main

push が完了したら、GitHub の画面上でも API キーのファイルが含まれていないことを再度確認しましょう。

それでは次のステップで、GitHub に push したソースコードをアプリとしてデプロイし、公開してみます！

step4. 作成したAIチャットアプリを Streamlit Community Cloud で公開する

まずは Streamlit Community Cloud の登録ページにアクセスします。前のステップで GitHub のアカウントを登録しているので、[Continue with Github]に進めばそのままサインインできるはずです。

サインインするとアプリの作成画面に進めるので、右上の[New app]ボタンをクリックします。

デプロイするアプリの各情報を入力します。
"Repository" は今回作成した GitHub のリポジトリ名を入力し、"Main file path" はプログラム本体のファイル名（今回の場合 app.py）を入力します。"App URL" は任意ですが、グローバルに公開する URL なので他と重複しない一意の URL にしましょう。

以上を入力したら "Advanced settings" をクリックします。

ポップアップ画面が表示されるので、"Secrets" の入力欄に以下のように入力します。
（"Your API Key" の部分は実際の API キーに置き換えましょう）

[OpenAIAPI]
openai_api_key = "Your API Key"

API キーを入力したら[Save]で保存してポップアップ画面を閉じ、[Deploy!] ボタンをクリックします。

アプリのデプロイが開始され、お菓子をオーブンで焼いているようなイメージでデプロイの進捗が表示されます。右下部分をクリックすると詳細を表示できます。

デプロイが完了したら、作成したチャットアプリがパブリックに公開可能な URL で表示されます。
ローカル環境と同様に質問を入力し、動作を確認してみましょう。

問題なく動作すれば、Python で自作した AI チャットアプリの公開は完了です。
お疲れ様でした！

さいごに

いかがでしたでしょうか。
Python 初心者の私でも難しいWebフレームワーク等を習得することなく、比較的簡単に AI チャットアプリを公開できました。

当記事では「初心者が基本的な Python アプリを最短で公開する」という点に焦点を当ててご紹介しましたが、参考にさせていただいたUdemyの講座ではさらに詳しい Python の開発手順や、実践的な AI の活用例なども豊富に取り上げられており、楽しく学べる内容になっています。
本記事をご覧になって、より本格的な AI アプリの開発を目指される方は、ぜひ受講してみることをお勧めします！

ChatGPT APIを使ってチャットボットを作ろう！【GPT-3.5/GPT-4】 -LLMを使うアプリの構築と公開- | Udemy

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。