セレクトボックスとリストを対応させ、カラーピッカーで色を割り当てたい

Question

解決したいこと

セレクトボックスとリストを対応させ、
(R, G, B = colorList[0], colorList[1], colorList[2])
カラーピッカーで色を割り当てたいです。
(colorList = ["#ff0000", "#00ff00", "#0000ff"])

以下が試したコードです。

import streamlit as st

# https://github.com/streamlit/streamlit/issues/1076
options = "RGB"
index = st.selectbox(
    "selectbox",
    range(len(options)),
    format_func=lambda x: options[x]
    )

if "colorList" not in st.session_state:
    st.session_state.colorList = ["#000000" for _ in range(3)]

color = st.color_picker(
    "color_picker",
    st.session_state.colorList[index]
    )

st.session_state.colorList[index] = color

コメントアウトしたサイトを参考にインデックスを取得
↓
st.session_state でリスト colorList を作成
↓
カラーピッカーで選択した色をリストに割り当て

というような感じなのですが、うまくいきません。
原因、直す部分を教えてください。よろしくお願いします。

Comments

[bsdfan]

これだけだと、どううまくいかないのかがわからないので、アドバイスが難しいです。

[nkfrom]

セレクトボックスが R のときにカラーピッカーで色を選択後、セレクトボックスを B にすると、R で選択した色が B にも適用されてしまいます。
B にする前にもう一度カラーピッカーを開き、そのまま閉じると正常に動作します。

Answer 1

streamlitでは、何かアクションをするたびに、スクリプトの先頭から最後までが実行されます。
なので、color_pickerを操作したときだけでなくselectboxを変更したときにも、最後のst.session_state.colorList[index] = colorが実行されることになり、

セレクトボックスが R の時にカラーピッカーで色を選択後、セレクトボックスを B にすると、R で選択した色が B にも適用されてしまいます。

ということが起こります。
カラーピッカーで色を選択したときだけ、session_stateのリストを更新したいということなら、color_pickerにコールバックをセットして、その中でリストを更新するようにすればいいです。

B にする前にもう一度カラーピッカーを開くと正常に動作します。

これは、color_pickerの初期値(第2引数)が変更されたかどうかに寄っていそうです。
初期値の変更で制御するのは動作がわかりにくくなるので、session_stateを使って変更するほうがいいと思います。

import streamlit as st

# https://github.com/streamlit/streamlit/issues/1076
options = "RGB"
index = st.selectbox(
    "selectbox",
    range(len(options)),
    format_func=lambda x: options[x]
    )

if "colorList" not in st.session_state:
    st.session_state.colorList = ["#000000" for _ in range(3)]

# color_pickerを変更したときのコールバック
def set_colorList():
    st.session_state.colorList[index] = st.session_state.color_picker_01

# color_pickerの初期値の設定
st.session_state.color_picker_01 = st.session_state.colorList[index]

st.color_picker(
    "color_picker",
    key='color_picker_01',
    on_change=set_colorList
    )

Comments

[nkfrom]

確かに session_state を使って管理すると動作が明快になりますね。
Streamlit の扱いを少し理解できた気がします。ありがとうございました。