めも

メモ.

Streamlitを使ってPython実装のプロトタイプを作る

この記事は何

を使って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()

f:id:misos:20210704142012p:plain
実行例

状態を保持する

ボタンを押した回数を保持するカウンター、カウンターをリセットするボタンなどを設置してみます。st.beta_columns(3)は表示を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"
)

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。