サイトアイコン アマチュア無線局JS2IIU

【Streamlit】プログレスバーを表示するst.progress()の使い方

JS2IIU

こんにちは、JS2IIUです。
StreamlitでWebアプリを開発する際、時間のかかる処理を行う場合は、ユーザーに現在の進捗状況を分かりやすく示すことが重要です。Streamlitでは、st.progress()関数を使うことで簡単にプログレスバーを表示できます。今回もよろしくお願いします。

st.progress()関数のシグネチャとパラメータ

st.progress()関数は、以下のシグネチャとパラメータを持ちます。

Python
st.progress(value, text=None)

valueパラメータには、プログレスバーの現在の進捗状況を表す0から100までの整数を指定します。textパラメータはオプションで、プログレスバーの上に表示するメッセージ。テキストには、オプションで GitHub フレーバーの Markdown を含めることができます： 太字、斜体、取り消し線、インラインコード、リンク、画像。画像はアイコンのように表示され、最大高さはフォントの高さと同じです。

詳しくは、以下の公式ドキュメントを参照してください。

この記事では、st.progress()関数の具体的な使用例を3つ、サンプルプログラムとともに紹介します。

例1：単純なプログレスバー

まずは、0から100まで0.1秒ごとに進捗するシンプルなプログレスバーの例です。

https://js2iiu.com/wp-content/uploads/2025/01/progress_00.mov
Python
import streamlit as st
import time

progress_bar = st.progress(0, text='progress bar sample')
for i in range(100):
    time.sleep(0.1)
    if i < 80:
        msg = 'progress bar running'
    elif i < 98:
        msg = 'almost done'
    else:
        msg = 'done'
    progress_bar.progress(i + 1, text=msg)

このコードでは、まずst.progress(0)で初期値0のプログレスバーを作成します。forループ内でtime.sleep(0.1)で0.1秒待機し、progress_bar.progress(i + 1)でプログレスバーの値を更新しています。

例2：ファイルアップロードの進捗表示

次に、ファイルアップロードの進捗状況を表示する例です。

https://js2iiu.com/wp-content/uploads/2025/01/progress_02.mov
Python
import streamlit as st
import time

uploaded_file = st.file_uploader("Choose a file")
if uploaded_file is not None:
    progress_bar = st.progress(0)
    file_size = uploaded_file.size
    bytes_read = 0
    with open("temp.txt", "wb") as f:
        while True:
            chunk = uploaded_file.read(1024)
            if not chunk:
                break
            f.write(chunk)
            bytes_read += len(chunk)
            progress_bar.progress(int(bytes_read / file_size * 100))
            time.sleep(0.1)

このコードでは、st.file_uploader()でファイルアップロードを受け付け、アップロードされたファイルのサイズを取得します。whileループ内でファイルを読み込み、progress_bar.progress()で進捗状況を更新しています。

例3：外部API呼び出しの進捗表示

最後に、外部APIを呼び出す際の進捗状況を表示する例です。ここでは、OpenWeatherMapのAPIを使用して、東京の天気予報を取得する例を示します。

https://js2iiu.com/wp-content/uploads/2025/01/progress_03.mov
Python
import streamlit as st
import requests
import json

url = "https://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp&appid=YOUR_API_KEY"  # YOUR_API_KEYを自分のAPIキーに置き換えてください

progress_bar = st.progress(0)
with st.spinner("Waiting for API response..."):
    response = requests.get(url, stream=True)
    total_size = int(response.headers.get('content-length', 0))
    bytes_read = 0
    content = b""  # レスポンスの内容を格納する変数
    for chunk in response.iter_content(chunk_size=1024):
        if chunk:
            content += chunk
            bytes_read += len(chunk)
            progress = int(bytes_read / total_size * 100)
            progress_bar.progress(progress)

    # 進捗が100になったらレスポンスを表示
    if progress == 100:
        weather_data = json.loads(content.decode('utf-8'))  # レスポンスをJSONとして読み込み

        # st.json() を使用して整形表示
        st.json(weather_data)

このコードでは、requests.get()でOpenWeatherMapのAPIを呼び出し、レスポンスのサイズを取得します。forループ内でレスポンスを処理し、progress_bar.progress()で進捗状況を更新しています。json.loads(content.decode('utf-8')) で、レスポンスをJSON形式として読み込み、Pythonの辞書に変換しています。st.json(weather_data) で、辞書データを整形して表示しています。st.json() を使うことで、JSONデータを折りたたみ可能な形式で見やすく表示できます。

注意: 上記のコードを実行するには、OpenWeatherMapのアカウントを作成し、APIキーを取得する必要があります。取得したAPIキーは、コード中のYOUR_API_KEYを置き換えて使用してください。

参考リンク

まとめ

この記事では、Streamlitのst.progress()関数を使ってプログレスバーを表示する方法を紹介しました。プログレスバーは、時間のかかる処理を行う際にユーザーに現在の進捗状況を分かりやすく示すために役立ちます。ぜひ、st.progress()関数を使って、ユーザーフレンドリーなWebアプリを開発してください。

Pythonに関する書籍のPRです。

24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。

最後まで読んでいただきありがとうございました。73

モバイルバージョンを終了