Streamlitで簡単なチャットアプリを作る方法
こんにちは！ すごろく初めのサイコロを振ってみます。1マスでも進めばいいやと思いつつ、サイコロを振ると平気で６マス進んでしまったのではないかと思うくらい、簡単にアプリが作れます。ただ、コードが簡単なだけであって、それを可能にしてくれているのはライブラリ「Streamlit」です。 この記事では、初心者でも簡単に使えるPythonライブラリ「Streamlit」を使って、シンプルなチャットアプリを作る方法をご紹介します。きわめてシンプルです。見栄えを良くするためにいろいろな工夫ができそうですので、ぜひ試してください。
なお、このコードは
ML_Bear 「生成AIアプリ＆エージェント開発入門」(マイナビ 2024)
を参考にしつつ、それをさらにシンプルにしています。
Streamlitとは？
Streamlitは、Pythonで簡単にウェブアプリを作成できるライブラリです。
今回作るアプリ
今回作るのは、ユーザーの入力に対してAIが応答するチャットアプリで、普通のChatGPTと思ってください。以下の特徴があります。
- とにかくシンプルに作った
- Streamlitの
st.chat_inputやst.chat_messageを活用 - ChatGPTを利用した応答機能
必要なライブラリ
以下のライブラリを使います。
- Streamlit: アプリのUI作成
- LangChain: ChatGPTとの連携
インストールしていない場合は、以下のコマンドでインストールしてください。
pip install streamlit langchain_openai
LangChainがなくても作れますがシンプルにコードを書くにはこっちのほうがいいなと思いました。LangChainを使わない方法も試しましたが、API経由の返答はいわゆる返答だけでなく、それ以外の情報も含まれており、必要なところだけを抽出するという処理を入れたり（仕組みを理解するには大事だと思いますけど）コードがだらだらする感じです。
環境変数の設定（こういうのが初心者にはよくわからなかったりする。レベルアップのためと思って乗り越えましょう！）
OpenAI APIを使用するためには、APIキーを取得し環境変数として設定する必要があります。このキーはOpenAIの公式ページで取得できます。Windowsでの環境変数の設定方法は以下の通りです：
1⃣「スタート」メニューから「環境変数」と検索し、「システム環境変数の編集」を選択します。
2⃣「環境変数」をクリックします。
3⃣「ユーザー環境変数」のセクションで「新規」をクリックします。
4⃣「変数名」にOPENAI_API_KEY、「変数値」にAPIキーを入力します。
5⃣「OK」をクリックして設定を保存します。
環境変数を設定することで、コード内でAPIキーを直接記述する必要がなくなり、セキュリティが向上します。
コード全体
以下が今回のアプリのコードです。
import streamlit as st
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser
def main():
if "message_history" not in st.session_state:
st.session_state.message_history = [
("system", "You are helpful assistant.")
]
llm = ChatOpenAI(temperature=0)
prompt = ChatPromptTemplate.from_messages([
*st.session_state.message_history,
("user", "{user_input}")
])
output_parser = StrOutputParser()
chain = prompt | llm | output_parser
if user_input := st.chat_input("質問を書いてください"):
response = chain.invoke({"user_input": user_input})
st.session_state.message_history.append(("user", user_input))
st.session_state.message_history.append(("ai", response))
for role, message in st.session_state.get("message_history", []):
st.chat_message(role).markdown(message)
if __name__ == '__main__':
main()
私が一番驚いたのは、チャット形式のインターフェースが、ほぼ
st.chat_message(role).markdown(message)
だけで実装されていることです・・・・。
コードの解説
1. セッション状態の初期化
以下のコードでセッション状態を初期化しています。これにより、チャット履歴を保持できます。
if "message_history" not in st.session_state:
st.session_state.message_history = [
("system", "You are helpful assistant.")
]
2. ChatGPTの初期化とプロンプトの作成
LangChainを使って、ChatGPTを初期化し、プロンプトテンプレートを設定します。
llm = ChatOpenAI(temperature=0)
prompt = ChatPromptTemplate.from_messages([
*st.session_state.message_history,
("user", "{user_input}")
])
3. ユーザー入力と応答処理
Streamlitのst.chat_inputを使って、ユーザーからの入力を受け取り、それに対するAIの応答を生成します。
if user_input := st.chat_input("質問を入力してください。"):
response = chain.invoke({"user_input": user_input})
st.session_state.message_history.append(("user", user_input))
st.session_state.message_history.append(("ai", response))
4. チャットメッセージの表示
チャット履歴をst.chat_messageで表示します。
for role, message in st.session_state.get("message_history", []):
st.chat_message(role).markdown(message)
アプリの起動方法
コードを保存したら、以下のコマンドを実行してアプリを起動します。
streamlit run your_file_name.py
ブラウザで表示されるアプリで、質問を入力するとAIが応答してくれます！
まとめ
Streamlitを使うことで、初心者でも簡単にインタラクティブなアプリを作ることができます。LangChainと組み合わせることで、きわめて簡単にAIチャット機能を実現できました。
ぜひ試してみてください！ちょっとちがうよ、とかあればコメントで教えていただけると嬉しいです 😊