3分で作成するStreamlitを用いたAIチャットアプリのプロトタイプ

連載「3分プロトタイピング」

大規模言語モデル(LLM: Large Language Model)を用いたアプリケーションを作る際、まずはChatGPTのようなチャットUIを再現して、独自コードであったり、独自データを組み合わせたいことは多いと思います。

ただ、チャットUIを0から作るのは結構時間がかかります。そこで、この記事ではStreamlitというフレームワークを使ってよくあるAIとチャットするアプリケーションの雛形を3分*1で用意したいと思います。

Streamlitとは

Streamlitは、PythonでWebアプリケーションを簡単に作成できるフレームワークです。GUIの作成が簡単で、コード量も少なくて済むため、AIとチャットするアプリケーションの雛形を作成するのにも適しています。

Pythonの実行環境の準備

asdfを使っている場合の手順を示します。他の方法で実行環境を用意している場合は、適宜読み替えてください。

asdf plugin-add python
asdf install python 3.12.1
echo 'python 3.12.1' >> ~/.tool-versions

以下のコマンドを実行してPython 3.12.1と表示されればOKです。

python -V

ここから3分です！

検証用のディレクトリを作って仮想環境を作る

Pythonの仮想環境を作成する方法は色々あるのですが、今回はvenv((https://docs.python.org/3/library/venv.html))を使って仮想環境を作成します。以下のように検証用のディレクトリを作り、そこに仮想環境を作成してみましょう。

mkdir hello-streamlit
cd hello-streamlit
python3 -m venv .venv
source .venv/bin/activate

StreamlitとOpenAIのライブラリをインストール

以下のコマンドを実行してください。

pip install streamlit openai

Streamlitのアプリを作成

hello.pyファイルを作成します。

# hello.pyファイルの作成
touch hello.py

エディタでhellp.pyを開き、以下のコードを貼り付けてください。

from openai import OpenAI
import streamlit as st

with st.sidebar:
    openai_api_key = st.text_input(
        "OpenAI API Key", key="chatbot_api_key", type="password"
    )
    st.write("[Get an OpenAI API key](https://platform.openai.com/account/api-keys)")

st.title("Hello Streamlit!")

if "messages" not in st.session_state:
    st.session_state["messages"] = [{"role": "assistant", "content": "何か気になることはありますか？"}]

for msg in st.session_state.messages:
    st.chat_message(msg["role"]).write(msg["content"])

if prompt := st.chat_input():
    if not openai_api_key:
        st.info("Please add your OpenAI API key to continue.")
        st.stop()

    client = OpenAI(
        # This is the default and can be omitted
        api_key=openai_api_key,
    )
    st.session_state.messages.append({"role": "user", "content": prompt})
    st.chat_message("user").write(prompt)

    response = client.chat.completions.create(
        messages=st.session_state.messages,
        model="gpt-3.5-turbo",
    )
    msg = response.choices[0].message
    st.session_state.messages.append({"role": "assistant", "content": msg.content})
    st.chat_message("assistant").write(msg.content)

Streamlitのアプリを起動

以下のコマンドを実行して、Streamlitのアプリを起動してみましょう。

streamlit run hello.py

以下のような画面が表示されればOKです。

左側にOpenAIのAPI KEYの入力欄が表示されているので、OpenAIのAPI KEYを入力してください。 OpenAIのAPI KEYは、こちらのページから取得できます。

右側のチャット欄に何か入力してみましょう。すると、AIが返答してくれます。

いったん、まとめ

Streamlitを使って、3分でAIとチャットするアプリケーションの雛形を用意する方法を紹介しました。この雛形をカスタマイズすることで、独自のAIチャットアプリケーションを作成することができます。次回は、この雛形とブログやSNSの投稿データを組み合わせて、自分の分身のようなアプリケーションを作る方法を紹介しますのでお楽しみに。

以下は、先ほど貼り付けたコードの解説です。

解説

ライブラリのインポート

from openai import OpenAI
import streamlit as st

このセクションでは、OpenAI の API にアクセスするための OpenAI ライブラリと、Streamlit で Web アプリケーションを作成するための streamlit ライブラリをインポートしています。

Streamlit サイドバーの設定

with st.sidebar:
    openai_api_key = st.text_input("OpenAI API Key", key="chatbot_api_key", type="password")
    st.write("[Get an OpenAI API key](https://platform.openai.com/account/api-keys)")

このセクションでは、Streamlit アプリのサイドバーに、ユーザーが OpenAI の API キーを安全に入力できるテキスト入力ボックスを作成しています。また、API キーが必要な場合は、API キーを取得するためのリンクも提供しています。

アプリケーションのタイトルの作成

st.title("Hello Streamlit!")

このセクションでは、Streamlit アプリのタイトルを設定しています。

チャット履歴の初期化（必要に応じて）

if "messages" not in st.session_state:
    st.session_state["messages"] = [{"role": "assistant", "content": "何か気になることはありますか？"}]

このセクションでは、セッションステートにチャット履歴が保存されているかどうかを確認しています。保存されていない場合は、アシスタントからの歓迎メッセージで会話を初期化します。

チャット履歴の表示

for msg in st.session_state.messages:
    st.chat_message(msg["role"]).write(msg["content"])

このセクションでは、チャット履歴を反復処理し、ユーザーまたはアシスタントからの各メッセージを、Streamlit のチャットメッセージコンポーネントを使用して表示しています。

ユーザー入力の処理

if prompt := st.chat_input():
    if not openai_api_key:
        st.info("Please add your OpenAI API key to continue.")
        st.stop()

    client = OpenAI(api_key=openai_api_key)
    st.session_state.messages.append({"role": "user", "content": prompt})
    st.chat_message("user").write(prompt)

    response = client.chat.completions.create(
        messages=st.session_state.messages,
        model="gpt-3.5-turbo",
    )
    msg = response.choices[0].message
    st.session_state.messages.append(msg)
    st.chat_message("assistant").write(msg.content)

このセクションでは、ユーザー入力をチャット入力ボックスからキャプチャしています。

有効な OpenAI API キーが存在しない場合は、API キーが提供されていない場合はアプリを停止します。
API キーを使用して OpenAI クライアントを作成します。
ユーザー入力をチャット履歴に追加して表示します。
会話履歴を OpenAI の Chat Completions API に送信し、GPT-3.5-turbo モデルを使用して応答を生成します。
アシスタントの応答をチャット履歴に追加して表示します。

*1:Pythonの実行環境が用意できてから3分で計算しています

ROUTE06 Tech Blog

3分プロトタイピング: Streamlitを用いたAIチャットアプリ