1 Streamlit基本

1.1 Streamlit

StreamlitはPythonのみでWebページを作成できるライブラリです。フォームの利用やデータの表示が簡単なため、特にデータサイエンスのフロントエンドとして使われます。

まず、ターミナルでインストールしておきます。

pip install streamlit streamlit-folium

st_sample.py ファイルに、以下のように記述します。

import streamlit as st

st.title('Sample Site')
st.text('こんにちは')

実行はこのファイルを直接実行するのではなく、ターミナルで「streamlit run ファイル名」を入力します。

※カレントディレクトリが異なる場合、事前に cd st などで移動します。

つまり、st_sample.pyを実行する場合、以下のようにします。

streamlit run st_sample.py

もし、直接実行した場合、「streamlit run パス名」がターミナルに表示されるので、それをコピーし貼り付けてEnterを押して実行します。

初回実行時

初回実行時にはメールアドレスを聞かれますが、入力せずEnterを押します。

すると、自動的に、http://localhost:8501/ をブラウザで開きます。ファイルを更新した場合、ブラウザを再読み込みしてください。

終了時には、ターミナルで Ctrl+C を押します。

注意

他のファイルを実行したい場合には、すでに実行したstreamlitを終了（Ctrl+C）させてから実行します。

1.2 VSCodeでの実行

タスクを登録することで、手軽に実行することが出来ます。

VSCodeを実行しているフォルダに、.vscode フォルダを作成し、以下の内容を、tasks.jsonに保存します。

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Streamlit実行",
            "type": "shell",
            "command": "streamlit run '${file}'",
             "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

以降は、Ctrl+Shift+Pで、「タスクの実行」を選択し、「Streamlit実行」をえらぶことで実行できます。

1.3 画面表示の基本

以下のような表示が可能です。

st.title(文字列) 　文字列を大見出しとして表示します。
st.header(文字列) 文字列を中見出しとして表示します。
st.subheader(文字列) 文字列を小見出しとして表示します。
st.text(文字列) 文字列を表示します。
st.write(文字列)　文字列をマークダウンとして表示します。

メッセージなどは枠で囲んで色つきのテキストを以下で表示できます。

st.success("成功です")
st.info("情報です")
st.warning("警告です")
st.error("エラーです")

変数は.ipynbファイルと同様にそのまま書くと表示されます。データフレームは表の形で表示されます。

import pandas as pd
df =  pd.read_csv("seiseki.csv")
df

メトリクス表示では、タイトルと内容、変化量を表示することができます。

st.metric("気温", "15.2℃", "1.2℃")
st.metric("湿度", "60%", "-5.2")

1.4 グラフの表示

streamlitにグラフ表示方法が備わっています。

折れ線グラフ

st.line_chart(df[["国語","算数","理科","社会"]])

棒グラフ

st.bar_chart(df[["国語","算数","理科","社会"]])

散布図

st.scatter_chart(df, x="算数", y="理科")

DataFrameで作成したグラフを表示したい場合、いったん変数に入れて、st.pylot()で表示します。

import seaborn as sns
sns.set_theme(font=["Meiryo"])

graph = df.plot.scatter(x="算数",y="理科")
st.pyplot(graph.get_figure())

1.5 フォームの基本

フォームは　変数名 = st.フォーム部品(引数) でユーザが入力した内容が得られます。得られた変数をすぐに利用できます。

ラジオボタンで複数から１つを選択します。

radio = st.radio("性別", ["男性", "女性"])

df[df["性別"] == radio]  # 表示

セレクトボックスも同じです。

sel = st.selectbox("クラス", ["A", "B"])
df[df["クラス"] == sel]

テキストボックスで数値を入力する場合、st.number_input('見出し')で戻り値に入力内容を得ます。

kokugo = st.number_input('国語')

step=1を整数での入力になります。また、初期値がvalue、最小値がmin_value、最大値がmax_valueで指定できす。

他にも文字入力用の text_input、日付入力用のdate_inputがあります。

ボタンを押したときの処理を記述します。

btn = st.button("点数以上")
if btn:
   df[df["国語"] >= kokugo]

数値入力の範囲が決まっている場合、スライダーも便利です。

suu = st.slider('算数', 0, 100, 50) # 最小, 最大, 初期値

btn = st.button("点以上")
if btn:
   df[df["算数"] >= suu]

ファイルを指定して読み込むことも可能です。

f = st.file_uploader('ファイルアップロード')

# ファイルを読み込んで表示
if f is not None:
    df2 =  pd.read_csv(f)
    st.write(df2.describe()) # 基本統計量

サイドバーに設置

st.sidebar.radio("性別", ["男", "女"]) のように書くことで、サイドバーに部品を設置できます。