💬

Streamlitを使ってChatGPTのようなチャットアプリを簡単に作る

2023/07/02に公開

Python

はじめに

Streamlitが更新によってチャットUIが追加され、streamlit-chatを使用せずにチャットデモを作成できるようになったため、ChatGPTによる回答を行うデモアプリを作成してみました。

チャットのユーザーアイコンを変えたいなどChatGPTに関係のないチャット作成方法に関しては以下を参考にして下さい。
(画面イメージだけ本ページの最後に記載します)

記事を公開した後に気づきましたが、公式ドキュメントがありました。
こちらを参考にした方が分かりやすく、より良いものになるかと思います。。。

結果を先にお見せすると次のようになります。

準備

OpenAIのAPIを叩くため、以下のように環境変数にOpenAIのAPIキーを追加して下さい。

export OPENAI_API_KEY=(OpenAIのAPIキー)

次にOpenAIをインストールして下さい。

pip install openai==1.6.1

Streamlitのインストールに関しては以下を参照して下さい。

実装

とくに何か前置きがあるわけではないため、早速コードの記載してしまおうと思います。

import os

import streamlit as st
from openai import OpenAI

# APIキーの設定
client = OpenAI(
    # This is the default and can be omitted
    api_key=os.environ.get("OPENAI_API_KEY"),
)

st.title("StreamlitのChatGPTサンプル")

# 定数定義
USER_NAME = "user"
ASSISTANT_NAME = "assistant"


def response_chatgpt(
    user_msg: str,
):
    """ChatGPTのレスポンスを取得

    Args:
        user_msg (str): ユーザーメッセージ。
    """
    response = client.chat.completions.create(
        messages=[
            {"role": "user", "content": user_msg},
        ],
        model="gpt-3.5-turbo",
        stream=True,
    )
    return response


# チャットログを保存したセッション情報を初期化
if "chat_log" not in st.session_state:
    st.session_state.chat_log = []


user_msg = st.chat_input("ここにメッセージを入力")
if user_msg:
    # 以前のチャットログを表示
    for chat in st.session_state.chat_log:
        with st.chat_message(chat["name"]):
            st.write(chat["msg"])

    # 最新のメッセージを表示
    with st.chat_message(USER_NAME):
        st.write(user_msg)

    # アシスタントのメッセージを表示
    response = response_chatgpt(user_msg)
    with st.chat_message(ASSISTANT_NAME):
        assistant_msg = ""
        assistant_response_area = st.empty()
        for chunk in response:
            if chunk.choices[0].finish_reason is not None:
                break
            # 回答を逐次表示
            assistant_msg += chunk.choices[0].delta.content
            assistant_response_area.write(assistant_msg)

    # セッションにチャットログを追加
    st.session_state.chat_log.append({"name": USER_NAME, "msg": user_msg})
    st.session_state.chat_log.append({"name": ASSISTANT_NAME, "msg": assistant_msg})

実行

上のコードをコピペしてsample.pyファイルを作成して下さい。
その後、そちらのファイルが保存されているフォルダまで移動して、以下のコマンドで実行できるはずです。

streamlit run sample.py

実行後は以下のURLからチャット画面が確認できるかと思います。
http://localhost:8501/

結果

ChatGPTのWeb画面のように出力された文字列からどんどん表示されるチャットデモの作成ができた。

その他

アイコン変更

Streamlitによるチャットのユーザーアイコンの変更方法はこちらを参考にして下さい。

GitHubトレンドチェック

こちらのアカウントでGitHub TrendingにあがっているリポジトリをChatGPTで要約して日々ポストしています。
これから話題になりそうな技術をいち早く知る助けになるかと思います。
気になった方はぜひフォローしてみて下さい。
https://x.com/nishijima_13v2
こんな感じで情報を日々ポストします。

Streamlitを使ってChatGPTのようなチャットアプリを簡単に作る

はじめに

準備

実装

実行

結果

その他

アイコン変更

GitHubトレンドチェック

参考文献

Discussion