💬

Streamlitによるユーザー間のチャット簡単実装

2023/07/09に公開

はじめに

StreamlitによってチャットUIがサポートされたため、ユーザー間でチャットを行えるようなローカルのデモアプリを作成してみました。

先に今回作成したデモアプリの動画を共有しようと思います。
画面左がユーザー1でログインしたデモ画面、画面右がユーザー2でログインしたデモ画面になります。
お互いのチャット内容がお互いの画面に反映されていますね！
デモ動画

Streamlit チャットUIに関しては以前記事を作成したため、そちらもぜひご覧ください。

今回作成したデモアプリでは以下の機能を実装しています。

ログイン/ログアウト/ユーザー登録/パスワードリセット機能
- 基本的にはこちらのライブラリ(Streamlit-Authenticator)を使用しています。
ユーザーによるチャットアイコン変更機能。
- ユーザーからアップロードされたアイコンはローカルフォルダへ保存されます。
Database(sqlite)へユーザー情報とチャットログの登録。
- Databaseはローカルファイルとして保存されます。

上のリポジトリをcloneして以下のように必要なライブラリのインストールをして下さい。

pip install -r requirements.txt

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

streamlit run src/01_login.py

正常に成功すると以下のログが出力されるかと思います。

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://xxxx.xxxx.xxxx.xxxx:8501

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

また、同じネットワーク内にいる人はNetwork URL(http://xxxx.xxxx.xxxx.xxxx:8501)をブラウザで指定することでチャット画面を見ることができます！
xxxxの部分は、上のログに出力されたものを使用して下さい。

"register user"ページからユーザー登録を行います。
emailは何かに使用しているわけではないため、適当な文字列test@testなどで問題ありません。
ログインに成功すると、以下のメッセージが表示されます。
User registered successfully. Please login to continue.
(設定ファイル(src/const.py)に設定されているユーザーが初期ユーザーとして登録されています。)
"login"ページから登録ユーザーとしてログインします。
ログインが成功すると以下のようなメッセージが表示されます。
Welcome [user name].
"change icon"ページからユーザーのチャットアイコン画像を登録できます。
"chat"ページからチャットができます👏。

意外に簡単に実装できてよかった。
ここまでできれば、複数人で一人のChatGPTで作成したキャラクターとお話しするアプリなども簡単にできますね。