Streamlit入門 - ステータスを表示する方法

前回までで本当のメイン部分の説明は終了しましたので、今回からは使えると便利な機能を紹介していきたいと思います。

まず今回は、プログレスバーやメッセージボックスなど、ステータスに関する表示をする機能です。

スクレイピングやデータの操作となると結構重い処理をすることも多いので、この機能が簡単にできると非常に便利ですね。

ということで以下の機能を見ていきたいと思います。

プログレスバーを表示する
スピナーを表示する
メッセージボックスを表示する
風船を飛ばしたり雪を降らせたりする

公式ドキュメントではこちらに解説があります。

では早速見ていきましょう。

1 使い方
2 まとめ

使い方

まず最初にstreamlitをimportしておきましょう。

import streamlit as st

動かし方がわからない方はこちらの記事をご参照ください。

: Streamlit入門 - 基本的な使い方
今回はStreamlitというWebアプリ・ダッシュボードを非常に簡単に作成するPythonライブラリについて解説したいと思います。 Pythonを使ったWebアプリ開発のためのフレームワークと言えば ...

プログレス・バー：st.progress

では、まずはプログレスバーです。

プログレスバーは、全体の終了時間がある程度わかっており、そのうちどれぐらい処理が進んだか？を表示することができます。

例えば、10個の処理する場合に1つ終わるごとにプログレスバーを一つ進めるような感じです。

機械学習だと全体のエポック数に対して何エポック処理が進んだか？を表示するといった使い方が考えられますね。

st.progress()の引数は進捗を設定しますが、設定方法は2種類あります。

整数を渡す
0~100までの値を渡すことで、50だと半分、100だと最後までバーが進みます。
少数を渡す
0.0~1.0までの値を渡すことで、0.5だと半分、1.0で最後までバーが進みます。

では、実際に見てみましょう。

以下のコードでは機械学習におけるモデル構築をイメージしています。

8行目のst.progress(0)でプログレスバーをゼロに初期化し、13行目のprogress_bar.progress()で現在のエポックを全体のエポック数で割って割合(0.0~1.0)をインプットしています。

あとはボタンの設定やテキストの表示、sleepなどの処理を追加しています。

st.empty()についてはこちらをご参照ください。

import time 

epochs = 50
st.header('Progress Bar')
btn = st.button('計算開始')

if btn:
    progress_bar = st.progress(0)
    text = st.empty()

    for epoch in range(epochs):
        time.sleep(0.1)
        progress_bar.progress((epoch + 1) / epochs)
        text.text(f'{epoch + 1} / {epochs}の計算中')
    time.sleep(0.1)
    text.text('計算終了')

以下のように0.1秒ごとにプログレスバーの値が更新されます。

どこまで計算が進んだかわかりますね。

スピナー：st.spinner

スピナーはぐるぐる回る(スピンする)時計のようなものですが、実際に見ていただいた方がわかりやすいと思います。

何かの重い処理をしている間に画面に表示することが多いかと思います。

with st.spinner("xxx"):というwith句の中に処理を書くことによって、その処理を行っていいる間スピナーが表示されます。

では見てみましょう。

イメージをつかむため、画像生成アプリ風にしてみます(実際には画像は生成していません)。

少し長くなっていますが、スピナーに関係するのは8行目のwith句とその中の9行目の処理だけです。

from PIL import Image
import time

st.title('画像生成アプリ')
text = st.text_input('テキストを入力してください')
btn = st.button('画像生成')
if btn:
    with st.spinner("画像生成中です..."):
        time.sleep(5)
    image = Image.open('キングスライム.jpg')
    st.subheader(text)
    st.image(image)

以下のように“画像生成中です”という表示が出て、スピナーがくるくる回っています。

そして、処理が終わるとスピナーが消えます。

メッセージボックス

続いてメッセージボックスです。

JavaScriptではalertメソッドなどで出力しますが、streamlitでは以下で出力します。

st.error
エラーメッセージ
st.warning
警告メッセージ
st.info
インフォメーションメッセージ
st.success
成功メッセージ

引数はすべて表示するテキスト情報です。

シンプルに以下のようなコードで結果を見てみましょう。

st.error('エラーメッセージ')
st.warning('警告メッセージ')
st.info('インフォメーションメッセージ')
st.success('成功メッセージ')

こちらのようなメッセージが表示されます。

装飾：st.balloons, st.snow

では、最後にちょっとした楽しい機能です。

恐らく私は使わないような気がしますが、一応ご紹介したいと思います。

風船を飛ばすst.balloons()と雪を降らすst.snow()です。

実際の例を見てみましょう。

単純にst.balloons()とst.snow()を呼び出すだけです。

ドラクエのフーセンドラゴンとスノードラゴンの画像を使っています。

st.title('画像生成アプリ')
cols = st.columns(2)
fusen_dragon = cols[0].button('フーセンドラゴン')
snow_dragon = cols[1].button('スノードラゴン')

image_area = st.empty()

if fusen_dragon:
    image = Image.open('フーセンドラゴン.jpg')
    image_area.image(image, width=300)
    st.balloons()

if snow_dragon:
    image = Image.open('スノードラゴン.jpg')
    image_area.image(image, width=300)
    st.snow()

風船が飛んだり、雪が降ったりしていますね。