Streamlitを使ったらデモ用のChatUIをサクッと用意できた

こんなデモ

Streamlitのデモ

あらまし

チャットAI的なものを日常的にいじっていると、何かとデモ的に誰かに見せるという機会も相応に多いわけですが、CLIでデモをするというのも何とも味気ないものです。

プログラマー相手なら良いんですが、一般の方向けにCLIを見せると、結構な確率でドン引きされるんですよねー。

最近は大体Pythonで書いているので、わざわざUIを作るためだけにNext.jsを引っ張り出してもろもろTypeScriptで書くというのも面倒くさいなぁ・・・と思っていたところ、

Pythonの世界ではそのままズバリの目的のためにStreamlitというフレームワークがあるようでした。

Streamlitは、Pythonを用いて簡単にWebアプリケーションを作成することができるフレームワークです。データサイエンティストや機械学習エンジニアなど、Pythonを用いたデータ解析や機械学習の分野での開発を手軽に行うことができます。

Streamlitは、Pythonのコードに特定の関数を追加することで、ブラウザ上で動作するWebアプリケーションを作成することができます。そのため、Webアプリケーションの構築に必要なHTMLやCSS、JavaScriptの知識は不要です。

また、Streamlitはリアルタイムなデータの可視化やインタラクティブなデータ処理を行うことができます。例えば、グラフの表示やデータのフィルタリング、機械学習モデルの実行結果の可視化などが簡単に行えます。

Streamlitは、Webアプリケーションの作成に必要な機能がすべて統合されたフレームワークであるため、開発者はPythonのコードのみを書けばよく、Webアプリケーションの構築に必要な複雑な手順を省略することができます。そのため、データサイエンティストや機械学習エンジニアなど、Webアプリケーションの開発に慣れていない開発者でも簡単にWebアプリケーションを作成することができます。

by ChatGPT

Streamlit • A faster way to build and share data apps

既に結構な数の先人が試しているようでして、

Streamlitで自分用ChatGPTを作る

ChatGPT APIとStreamlitを使って超簡単にAIアプリを作ってみた - NRIネットコムBlog

こんなライブラリを使うと数行でチャットUIが作れてしまうようです。

書いてみた

そんなわけで書いてみたのがこんなコード。

import streamlit as st
from streamlit_chat import message

if "generated" not in st.session_state:
    st.session_state.generated = []
if "past" not in st.session_state:
    st.session_state.past = []

st.title("ずんだもんと一緒に日記を書こう")

with st.form("ずんだもんに今日のできごとを話そう"):
    user_message = st.text_area("今日のできごと")
    submitted = st.form_submit_button("送信する")

    if submitted:
        st.session_state.past.append(user_message)
        st.session_state.generated.append("ずんだもんが聞いています")

    if st.session_state['generated']:
        for i in range(len(st.session_state['generated'])):
            message(st.session_state['past'][i], is_user=True, key=str(i) + "_user")
            message(st.session_state['generated'][i], key=str(i))

これだけで冒頭のチャットUIが作れてしまう、というもの。マジ凄い。

現場からは以上です。