【Streamlit】ダイアログを実装する方法

Streamlitは、インタラクティブなウェブアプリケーションを構築できるPythonのライブラリです。@st.dialogを使用すると、簡単にダイアログ（モーダルウィンドウ）を作成し、アプリケーションに組み込むことができます。

@st.dialogを利用したダイアログの実装方法を、簡単なコード例とともにまとめます。

Contents

実装例
- 色の選択と理由を入力するダイアログ
- ユーザー情報入力フォーム
実装内容
注意点
まとめ

実装例

色の選択と理由を入力するダイアログ

以下の例では、ユーザーが好きな色を選択し、その理由を入力するダイアログを実装します。

import streamlit as st

# ダイアログの定義
@st.dialog("Favorite Color")
def choose_color(color):
    st.write(f"Why do you like the color {color}?")
    reason = st.text_area("Tell us your reason")
    if st.button("Submit"):
        # セッションステートに結果を保存し、アプリを再描画
        st.session_state.favorite_color = {"color": color, "reason": reason}
        st.rerun()

# 初期状態で選択結果がない場合
if "favorite_color" not in st.session_state:
    st.write("Choose your favorite color")
    if st.button("Red"):
        choose_color("Red")
    if st.button("Blue"):
        choose_color("Blue")
    if st.button("Green"):
        choose_color("Green")
# 選択済みの場合
else:
    st.write(f"Your favorite color is {st.session_state.favorite_color['color']} because {st.session_state.favorite_color['reason']}")

画面の初期表示は以下のとおりです。

Redボタンをクリックすると、ダイアログが表示されます。

reasonに「あああ」と入力し、Submitボタンをクリックすると、ダイアログが閉じて、以下のように表示されます。

ユーザー情報入力フォーム

以下のコードは、名前と年齢を入力するフォームをダイアログで表示する例です。

import streamlit as st

@st.dialog("フォーム入力")
def form():
    name = st.text_input("名前")
    age = st.number_input("年齢", min_value=0, max_value=120)
    if st.button("送信"):
        st.session_state.form_data = {"name": name, "age": age}
        st.rerun()

if "form_data" not in st.session_state:
    if st.button("フォームを開く"):
        form()
else:
    st.write(f"名前: {st.session_state.form_data['name']}, 年齢: {st.session_state.form_data['age']}")

以下のようなフォームが表示されます。