この記事は何

を使ってWebブラウザから動作するプロトタイプ（本番実装前の検証用などに簡単に作成して確かめるためのもの）を作成してみようと思ったので、その際に調べたことをメモ。

Streamlitドキュメント

Welcome to Streamlit — Streamlit 0.84.0 documentation

基本的には、ドキュメントのGet Startedから見て行き、各APIの説明を見れば基本的なモジュールがどのように動くのか理解できる。ただ、はじめは変数の更新タイミングなどが少し理解に手間取ったので

Add State to your app — Streamlit 0.84.0 documentation

などを見て、変数がどのように更新されるか（基本的にはWebUI上でなにか変更があるたびに前から順番に実行＋更新）を理解しておく必要あり。

どんなものが作成できるかはギャラリーのページから確認できる。

Gallery • Streamlit

また、色々な開発者がプラグイン的な機能を実装しており、自分がやりたい可視化・表示がここにあるか、まずはじめにチェックしてみる。

https://streamlit.io/gallery?type=components&category=featured

インストール

必要なライブラリをインストールします。python3.8、pipenvを使用してインストールしてます。

pipenv install scikit-learn streamlit==0.84.0 pandas numpy matplotlib
pipenv install black --dev --pre
streamlit run app.py

最低限の機能

csvを表示する

とりあえずcsvを表示してみます。

from sklearn.datasets import load_boston
import pandas as pd
import streamlit as st

def example_app():
    """アプリケーション本体
    """
    # サンプルデータ
    X, y = load_boston(return_X_y=True)
    df = pd.DataFrame(X)
    df["price"] = y

    st.markdown('# テーブル表示')
    st.dataframe(df.head(5))


if __name__ == "__main__":
    example_app()

状態を保持する

ボタンを押した回数を保持するカウンター、カウンターをリセットするボタンなどを設置してみます。st.beta_columns(3)は表示を３列に分けるためだけに使用しており、カウンター機能とは関係ないです。

参考文献：Add State to your app — Streamlit 0.84.0 documentation

from sklearn.datasets import load_boston
import pandas as pd
import streamlit as st

def increment_counter():
    st.session_state.count += 1

def decrement_counter():
    st.session_state.count -= 1

def reset_counter():
    st.session_state.count = 0

def example_app():
    """アプリケーション本体
    """
    # サンプルデータ
    X, y = load_boston(return_X_y=True)
    df = pd.DataFrame(X)
    df["price"] = y

    st.markdown('# テーブル表示')
    st.dataframe(df.head(5))

    st.title('カウンターを設置')
    if 'count' not in st.session_state:
        st.session_state.count = 0

    col1, col2, col3 = st.beta_columns(3)
    with col1:
        st.button('カウンタを増やす', on_click=increment_counter)
    with col2:
            st.button('カウンタを減らす', on_click=decrement_counter)
    with col3:
            st.button('カウンタを0にする', on_click=reset_counter)
    st.write('Count = ', st.session_state.count)


if __name__ == "__main__":
    example_app()

f:id:misos:20210704142741p:plain

session-stateに関しては公式ブログでも紹介されていました。これがあればシンプルな機能のSPA(Single Page Application)ならば簡単に作れそうですね。

デフォルトでのページの表示設定を変える

API reference — Streamlit 0.84.0 documentation

streamlitではサイドバーの表示や画面上の表示のモードをユーザーが変更できますが、それをアプリケーション起動時に指定できます。set_page_configは一度しか実行できず、ボタンをつかってコンフィグを動的に変えるなどはできない点に注意。

st.set_page_config(
    page_title="アプリケーション名",
    layout="wide",
    initial_sidebar_state="expanded"
)