Streamlitとは | Hakky Handbook

Streamit とは

Streamit とは、機械学習とデータサイエンスのための Web アプリケーションフレームである。

分析結果が Web アプリ上で簡単に実現できるのが強みである。また、HTML や CSS を書く必要がなく Python だけで完結するのもありがたい。公式ドキュメントも充実していて、ひとまずアプリの挙動を確認するには手軽で適している。
しかし、主にデータサイエンス領域での簡易的な Web アプリに適していて、大規模な Web アプリの開発には適していない。

特徴

HTML/CSS の知識が不要
Python のみでデータ可視化等の Web アプリが実装可能
WebUI の作成が容易

インストール

筆者の環境は

Windows
Python 3.7.7

である。

pip でインストールする。方法はターミナル（コマンドプロンプト）上で

$ pip install streamlit

を打つだけ。

確認としてターミナル上で対話モードの python を起動し、ライブラリがインポートが出来れば良さそう。

$ import streamlit

上手くいけば何も表示されないはず。

"ModuleNotFoundError: No module named 'streamlit'"や"No module named 'streamlit'"などの表示が出たらインストール出来ていない。python のバージョンが古い可能性があるので更新しましょう。

単純な Web アプリを起動する

Streamlit では.py ファイルを特定のコマンドで実行することで簡単に Web アプリを起動することが出来る。まずは実験として単純な.py ファイル（ここでは"test.py"とする。）を作る。

適当な場所（C:\Users\ユーザー名の下とか）に Streamlit 用のフォルダ（ここでは"test_streamlit"とする）を作成する。次に vscode などのエディターを開き、"test_streamlit"フォルダに"test.py"を作成し、以下のように入力する。

import streamlit as st

# タイトルを表示
st.title('It is a test.')

これを保存した後、ターミナルに戻って以下のコマンドを打ち込む。（念のため、カレントディレクトリが"test_streamlit"になっているか確認するとよい）

$ streamlit run test.py

You can now view your Streamlit app in your browser.

Local URL: http://localhost:8501
Network URL: http://xx...

実行時にこのようにターミナル上に出力されれば OK。同時にブラウザ上に以下のようにアプリが立ち上がれば尚良し。出ない場合はブラウザ上に Local URL を入力して直接飛べば良い。

機能を試してみる

Streamlit の更なる機能を試してみる。

DataFrame の表示

pandas の Dataframe を作成し、それをアプリ上で表示してみる。

test.pyを以下のように修正する。（この際、先程起動した Web アプリは起動したままで良い）

import streamlit as st
import pandas as pd

#タイトルを表示
st.title('It is a test.')

# データフレームを作成
df = pd.DataFrame({
     'column 1': [1, 2, 3, 4],
     'column 2': ["a", "b", "d", "d"],
     'column 3': [2, 35.3, 12, 123.124545]
     })

# データフレームを表示
st.write(df)

test.py を保存したのち、もう一度ブラウザ上の Web アプリを見てみると右上に"Rerun"と表示されている。ここを押すと修正が反映される。

修正後：

※以下の様にあえてバグを仕込んでみる。

import streamlit as st
import pandas as pd

#タイトルを表示
st.title('It is a test.')

# データフレームを作成
df = pd.DataFrame({
     'column 1': [1, 2, 3, 4],
     'column 2': ["a", "b", "d", "d", "e"],
     'column 3': [2, 35.3, 12, 123.12455]
     })

# column 2の要素数を5にする（長さが他の列と揃っていないのでエラー）
# データフレームを表示
st.write(df)

この時、Rerun してみると

ブラウザ上に ValueError が表示される。ありがたいですね。

可視化

折れ線グラフ

折れ線グラフはst.line_chart()で表示できる。

import streamlit as st
import pandas as pd
import numpy as np

#タイトルを表示
st.title('It is a test.')

# データフレームを作成
df = pd.DataFrame(
     np.random.randn(30, 2),
     columns=['a', 'b']
 )

# 折れ線グラフを表示
st.line_chart(df)

# データフレームを表示
st.write(df)

棒グラフ

棒グラフは st.bar_chart で生成出来る。

import streamlit as st
import pandas as pd
import numpy as np

#タイトルを表示
st.title('It is a test.')

# データフレームを作成
df = pd.DataFrame(
     np.random.randn(30, 2),
     columns=['a', 'b']
)

# 棒グラフを表示
st.bar_chart(df)

ヒストグラム

ヒストグラムを作りたいのであれば、st.bar_chart を使うよりも pyplot を使った方が良い。（軸の設定をする必要がないため）

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

#タイトルを表示
st.title('It is a test.')

# 生成数を設定
n = 500

# データフレームを作成
df = pd.DataFrame(
     np.random.randn(int(n), 2),
     columns=['a', 'b']
)

# ヒストグラムを作成
fig, ax = plt.subplots()
ax.hist(df)
st.pyplot(fig)

尚、

df.hist()
st.pyplot()

のような引数を入れない書き方でも一応通るが、以下のような注意が発生するので避けた方が良いかもしれない。

各種機能

ヘッダー

st.header, st.subheaderを使うことでヘッダー、サブヘッダーを出力することが出来る。

また、st.writeを使えば単に文章を挿入することが出来る。（型は int, str, list, dataframe など自由）

import streamlit as st

st.header("header")
st.subheader("subheader")
st.write("sentence")

サイドバー

st.xxxの代わりにst.sidebar.xxxでサイドバーがアプリの左側に現れ、xxx の部分の処理がサイドバー上に現れる。以下で紹介するチェックボックスやセレクトボックス、スライダーはサイドバー上にサイドバー上に置くと便利である。

チェックボックス

チェックボックスを使えば、表示を一部隠すことが出来る。チェックを入れればif st.checkbox(""):以下の処理が表示される。

import streamlit as st
import pandas as pd
import numpy as np

#タイトルを表示
st.title('It is a test.')

# データフレームを作成
df = pd.DataFrame(
    np.random.randn(30, 2),
    columns=['a', 'b']
)
if st.checkbox('hoge'):
    st.line_chart(df)
    # データフレームを表示
    st.write(df)

チェックボックスを押すたびにプログラムは再実行される。このプログラムの場合、乱数が再生成されてデータフレームが新しくなる。

スライダー

スライダーを使うと、パラメータをインタラクティブに変更することが出来る。パラメータmin_value, max_value, valuesはそれぞれ最小値、最大値、初期値に対応している。

以下のコードでは、1000 個の正規乱数を生成し、そのヒストグラムを表示する。ただし、標準偏差はサイドバーで調整することにする。

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

# タイトルを表示
st.title('It is a test.')

std = st.sidebar.slider('標準偏差の設定', min_value=0, max_value=10, value=5)
st.sidebar.header('サイドバー')
st.sidebar.write(f'設定値は {std} です')

# データフレームを作成
df = pd.DataFrame(
    np.random.normal(loc = 0, scale = std, size = 1000)
)

st.line_chart(df)

# ヒストグラムを作成
fig, ax = plt.subplots()
ax.hist(df)
st.pyplot(fig)

セレクトボックス

st.sidebar.selectbox(表示名, 選択肢)とすることで、サイドバー内にセレクトボックスを生成することが出来る。当然だが、選択した値を使った処理も行える。

以下では、セレクトボックスで選択した列名（"a" or "b"）の推移が表示されるような処理を書いてみる。

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

#タイトルを表示
st.title('It is a test.')

option = st.sidebar.selectbox("表示したいのは", ["a", "b"])

# データフレームを作成
df = pd.DataFrame(
     np.random.randn(30, 2),
     columns=['a', 'b']
)

st.line_chart(df[option])

尚、st.selectbox()とすればサイドバーではなく本文内にセレクトボックスが現れる。

データフレームを綺麗に出力する

st.writeの代わりにst.tableを使うことで、DataFrame を綺麗に出力することが出来る。

import streamlit as st
import pandas as pd

# データフレームを作成
df = pd.DataFrame(
    {
        "column 1": [1, 2, 3, 4],
        "column 2": ["a", "b", "d", "d"],
        "column 3": [2, 35.3, 12, 123.124545],
    }
)

# データフレームを表示
st.table(df)

参考

@goooospuuuurs(MDC), Qiita, Streamlit に入門してみる
- インストール方法から紹介されている。
@keisuke-ota, Qiita, Streamlit を用いたデータ分析アプリ制作
- 機能が詳しく紹介されている。
どこにでもいる SE の備忘録, Streamlit を使ってみる
- テキスト解析アプリを作成している。
@yoichi_t, Qiita, Streamlit でデータを可視化する
- サイドバーと可視化について書いてある。
"Streamlit documentation"
- 公式ドキュメント