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

streamlit入門
Michal JarmolukによるPixabayからの画像

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

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

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

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

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

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

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

Twitterで新規記事などについて発信し始めたのでフォローしていただけると励みになります!!↓
フォローする

使い方

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

import streamlit as st

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

プログレス・バー: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()

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

皆様もこの機能を有効活用していただければと思います(笑)

まとめ

今回は、プログレスバーやスピナーを表示したり、メッセージボックスを表示する方法についてご紹介しました。

プログレスバーはJavaScriptで書こうとすると結構大変そうでし、スピナーはBootstrapとかでも使えるようですが、実際に前後の処理と組み合わせるとなるとそれなりに時間がかかりそうです。

その点、Streamlitでは1~2行で書けるので非常に簡単ですね。

機械学習アプリなどを作る場合は利用していただければと思います。

では!

mm_0824

システム開発会社や銀行・証券会社で統計や金融工学を使ったクオンツ・分析業務を長く担当してきました。

現在はコンサルティング会社のデータ・サイエンティストとして機械学習、自然言語処理技術を使ったモデル構築・データ分析を担当しています。

このサイトでは論文や本、Udemyなどの学習ツールについての情報発信をしていきます。

皆様の業務や勉強のお役に立てれば嬉しいです。

Twitterでも新規記事についての発信をし始めたので是非フォローしていただけると嬉しいです!↓

フォローする
streamlit入門 データ可視化
フォローする
楽しみながら理解するAI・機械学習入門

コメント

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