Zenn
🌏

Python、Streamlit 簡易チートシート

に公開
Python
チートシート
Streamlit
tech

今回は、Streamlit の簡易チートシートを書こうと思います。
Streamlit は、データ･サイエンスや機械学習･AI と相性がよく、簡単に Web アプリを作れる Web アプリ･フレームワークみたいです。
単純なアプリなら、HTML を使わなくても驚くほど簡単に作れるところが魅力ではないかと思います。
では、いきまっしょい♪

ドキュメント：https://docs.streamlit.io/
チートシート･ドキュメント：https://docs.streamlit.io/develop/quick-reference/cheat-sheet

今回やること

  1. ライブラリのインストール
  2. ライブラリのインポート
  3. テキスト関連表示
  4. HTML などを使う
  5. 画像表示
  6. データ･チャート表示
  7. サイドバー、画面分割、タブ
  8. ボタンなどパーツ作成
  9. 今回のコード

1. ライブラリのインストール

今回は、データなどの作成も行うので、関連するライブラリもインストールします。

コマンド･プロンプト
pip install numpy pandas streamlit

2. ライブラリのインポート

st_cheat_sheet.py
import numpy as np  # v2.2.5
import pandas as pd  # v2.2.3
import streamlit as st  # v1.45.1
from streamlit.components.v1 import html  # JavaScript 用

3. テキスト関連表示

st_cheat_sheet.py
st.write('write')
st.text('text')
st.markdown('- markdown')
st.json({'json': 123})
st.latex(r""" LaTex: y = x^2 + \frac{1}{x} """)
st.badge('badge')

実行（ポートは指定しなくても大丈夫だと思います。以降はコマンド省略します。）

コマンド･プロンプト
streamlit run st_cheat_sheet.py 8501

4. HTML などを使う

Streamlit は、HTML を使わなくてもいいのが魅力ではありますが、HTML や CSS、Javascript を使えないわけじゃないのも魅力かもしれません。

st_cheat_sheet.py
st.html('<p style="color: lime;">html</p>')
html("<script>alert('JS!');</script>")

実行

5. 画像表示

画像は、Django チュートリアルで使ったものを使います。
音声や映像の再生も可能です。（今回はやりませんが）

st_cheat_sheet.py
st.image('../django/tutorial/app/static/fuji.jpg', width=300)
# 音声
# st.audio()
# 動画
# st.video()

実行

6. データ･チャート表示

データフレームなどのデータをそのまま表示、チャート表示することができます。

st_cheat_sheet.py
df = pd.DataFrame({
    'x': np.random.randn(10),
    'y': np.random.randn(10)
})
st.dataframe(df.T, height=120, hide_index=False)
left_col, right_col = st.columns([2, 2])
left_col.line_chart(df, height=250)
left_col.bar_chart(df, height=250)
right_col.area_chart(df, height=250)
right_col.scatter_chart(df, height=250)

実行

緯度、経度で地図を表示することもできます。

st_cheat_sheet.py
df = pd.DataFrame({
    'latitude': np.random.randn(10)+35,
    'longitude': np.random.randn(10)+135
})
st.dataframe(df.T.round(2), height=120, hide_index=False)
st.map(df)

実行

7. サイドバー、画面分割、タブ

st_cheat_sheet.py
# サイドバー
st.sidebar.write('sidebar')
# 画面分割
left_col, right_col = st.columns([2, 1])
left_col.markdown('### left_col')
right_col.markdown('### right_col')
st.markdown('---')
# タブ
main_tab, sub_tab = st.tabs(['main_tab', 'sub_tab'])
main_tab.markdown('### main_tab')
sub_tab.markdown('### sub_tab')

実行

8. ボタンなどパーツ作成

入力ウィジェット：https://docs.streamlit.io/develop/api-reference/widgets

st_cheat_sheet.py
# ボタン
if st.button('クリック'):
    st.markdown('クリックされたよ♪')
st.markdown('---')
# チェック･ボックス
check = st.checkbox('チェック')
st.markdown(check)
st.markdown('---')
# セレクト･ボックス
select = st.selectbox('セレクト', ['Dog', 'Cat', 'Lion'])
st.markdown(select)
st.markdown('---')
# 日付（カレンダー付）
date = st.date_input('日付')
st.markdown(date)
st.markdown('---')
# テキスト
input_text = st.text_input('テキスト')
st.markdown(input_text)

実行（操作は省略します。）

9. 今回のコード

GitHub: https://github.com/Animalyzm/mikoto_project
今回のコードは、streamlit/st_cheat_sheet.py です。

まだまだ、Streamlit では、いろんなことができます。
本格的な複雑なアプリ向きではないかもですが、簡単にアプリを作れるのは、かなり魅力だなーと感じてます。
以上になります、ありがとうございましたー♪

Discussion