Streamlitは、シンプルなPythonコードでインタラクティブなWebアプリケーションを作成できるフレームワークです。
特に、st.chat_message
とst.chat_input
を使用することで、チャットベースのアプリケーションを簡単に構築できます。
これらの要素を活用してチャット画面を実装する方法をまとめます。
必要なライブラリのインストール
まず、Streamlitをインストールします。
pip install streamlit
インストールが完了したら、以下の手順でチャット画面を実装していきます。
チャット画面の実装手順
基本的なチャットインターフェースの作成
st.chat_message
を使用して、ユーザーとアシスタントのメッセージを表示する基本的なチャットインターフェースを作成します。
import streamlit as st
# ページのタイトル
st.title("チャットアプリ")
# チャットメッセージの表示
with st.chat_message("user"):
st.write("こんにちは!")
with st.chat_message("assistant"):
st.write("こんにちは!どのようにお手伝いできますか?")
このコードでは、ユーザーとアシスタントのメッセージをそれぞれ表示しています。
st.chat_message
の引数には、”user”または”assistant”を指定することで、適切なスタイルとアイコンが適用されます。
ユーザー入力の受け付け
st.chat_input
を使用して、ユーザーからの入力を受け付けます。
# ユーザーからの入力を受け付ける
user_input = st.chat_input("メッセージを入力してください")
if user_input:
# ユーザーメッセージの表示
with st.chat_message("user"):
st.write(user_input)
# アシスタントからの応答(ここではエコー応答)
with st.chat_message("assistant"):
st.write(f"あなたは「{user_input}」と言いました。")
st.chat_input
は、ユーザーがメッセージを入力するためのウィジェットを表示し、入力されたテキストを返します。
ユーザーがメッセージを送信すると、そのメッセージが表示され、アシスタントからの応答が続きます。
チャット履歴の管理
セッションステートを使用して、チャット履歴を管理します。
これにより、ページが再実行されてもメッセージ履歴が保持されます。
# セッションステートでチャット履歴を管理
if "messages" not in st.session_state:
st.session_state.messages = []
# 過去のメッセージを表示
for message in st.session_state.messages:
with st.chat_message(message["role"]):
st.write(message["content"])
# ユーザーからの入力を受け付ける
if user_input := st.chat_input("メッセージを入力してください"):
# ユーザーメッセージの保存と表示
st.session_state.messages.append({"role": "user", "content": user_input})
with st.chat_message("user"):
st.write(user_input)
# アシスタントからの応答(ここではエコー応答)
assistant_response = f"あなたは「{user_input}」と言いました。"
st.session_state.messages.append({"role": "assistant", "content": assistant_response})
with st.chat_message("assistant"):
st.write(assistant_response)
このコードでは、セッションステートのmessages
リストにメッセージを保存し、再実行時に過去のメッセージを表示します。
新しいメッセージが送信されると、それをリストに追加し、表示します。
おわりに
Streamlitのst.chat_message
とst.chat_input
を使用することで、シンプルなチャットインターフェースを迅速に構築できます。セッションステートを活用することで、チャット履歴の管理も容易になります。これらの要素を組み合わせて、より高度なチャットアプリケーションを開発に繋げられます。
詳細な情報や追加のチュートリアルについては、Streamlitの公式ドキュメントを参照してください。