pythonで簡単なWebアプリ作成:streamlitの使い方

IT全般

データ分析のモデルなどを簡単なWebアプリにして共有したいといった事があります。

しかし、アプリを作成したい場合には、専門的なスキルが必要で困難です。

本記事では、アプリの専門家でなくとも、インタラクティブなアプリがpythonコードだけで簡単に作成できるパッケージであるstreamlitの使い方を紹介します。

Streamlit — The fastest way to create data apps
Streamlit is an open-source app framework for Machine Learning and Data Science teams. Create beautiful data apps in hours, not weeks. All in pure Python. All f...

streamlitでの作成例

csvファイルを読込んだ後、x軸の列を選択してグラフを表示させるといったアプリが、20行程度のコードで実現可能です。

以下の例のコードは本記事の最後に記載しています。

インストール方法

インストールはpipで可能です

pip install streamlit

streamlitを使用する際の全体の流れ

アプリの内容を任意のファイル名の.pyファイルに作成します。

その後ターミナルにて、上記.pyフォルダの場所に以下のコマンドを打ち込むことで、アプリが既定のブラウザで立ち上がります。

streamlit run ファイル名.py

終了するには、ターミナル上でCTRL+cで終了できます。

パッケージのimport

本記事では、streamlitは以下のようにimportしておきます。

import streamlit as st

文字の表示関連

タイトルや文字の表示は以下のように行います。

st.title('タイトル')
st.header('ヘッダー')
st.subheader('サブヘッダー')
st.write('文字列') # markdown

なお、st.wirteは、データフレームやmatplotlibの図など色々なものを表示できるようです。

表示例

データフレームの表示

データフレームは、writeでも可能なようですが以下で表示できます。

st.dataframe(df, width, height)

グラフの表示

stremalitネイティブなチャートや、matplotなど複数のチャートライブラリに対応しているようです。

今回は、plotlyとbokehでの表示方法を紹介します。

use_container_width=Trueとすると、グラフの幅を列の幅に設定するようです。

# plotly
st.plotly_chart(fig, width, height, use_container_width=True or Flase)

# bokeh
st.bokeh_chart(fig, use_container_width=True or Flase)

画像の表示

画像は以下のようなコードで表示できます。

from PIL import Image

image = Image.open('sunrise.jpg')

st.image(image, caption='キャプション名',use_column_width=True)

インタラクティブな機能:ボタン、スライダーなど

インタラクティブな機能は多く存在するため、ここではその一部を列挙します。

また本記事では、引数はを適当に省略していたり、初期値=Noneのものでも記載していたりします。

詳細やその他の機能は公式サイトを参考してください。

# ボタン
st.button('ラベル')

# チェックボックス
st.checkbox('ラベル', value=False) # valueは初期状態

# ラジオボタン
st.radio("ラベル",('選択肢1', '選択肢2', '選択肢3'))

# 選択肢
st.selectbox('ラベル',('選択肢1', '選択肢2', '選択肢3'))

# 複数選択
st.multiselect('ラベル', ['選択肢1', '選択肢2', '選択肢3'],初期選択値のリスト)
st.multiselect('ラベル', ['選択肢1', '選択肢2', '選択肢3'],['選択肢2']) #例

# スライダー
st.slider('ラベル', 最小値, 最大値, 初期値, 刻み値, フォーマット %d,%fなど)

# テキスト入力
st.text_input('ラベル', '初期表示文字列')

# 数値入力
st.number_input('ラベル', 最小値, 最大値, 初期値)

# ファイルアップロード
st.file_uploader("ラベル", type=ファイルタイプ,encoding) 
# 上限ファイルサイズ200MB, ファイルタイプはcsvやpngなどをstrかlistで与える

サイドバーの表示

st.sidebar.[element_name]で、ウィジェットをサイドバーに表示することができます。

ただし、st.writeは使用できないようなので代わりに、st.sidebar.markdown()を使用する必要があるようです。

# 選択肢をサイドバーに表示する場合
st.sidebar.selectbox('ラベル',('選択肢1', '選択肢2', '選択肢3'))

パフォーマンスの最適化

任意の関数が最初に呼び出された時に、その実行結果をローカルキャッシュに記憶しておき、2度目以降に呼び出された時に、入力値などが変わっていなかった場合、ローカルキャッシュから結果を読み込み返します。

これにより、実行速度の高速化を図るようです。

@st.cache
def 任意の関数(引数):

コード例

冒頭の作成例の全コードです。

import streamlit as st
import pandas as pd
import plotly.express as px

st.title('タイトル:テスト')

# サイドバー
# ファイルアップロード
uploaded_file = st.sidebar.file_uploader("ファイルアップロード", type='csv') 

# グラフx軸設定
x_axis = st.sidebar.selectbox('x軸項目',('材料A添加量', '材料B添加量', '材料C添加量'))


# メイン画面
st.header('読み込みデータ表示')
if uploaded_file is not None:
    # アップロードファイルをメイン画面にデータ表示
    df = pd.read_csv(uploaded_file)
    st.write(df)

    # 選ばれたx軸の値からグラフ化
    st.header('グラフ表示')
    fig = px.scatter(x=df[x_axis], y=df['引張強度'])
    st.plotly_chart(fig, use_container_width=True)

参考

Welcome to Streamlit — Streamlit 0.70.0 documentation

コメント

タイトルとURLをコピーしました