こんにちは、JS2IIUです。
AIや機械学習のプロジェクトにおいて、モデルの性能やシステムのステータスをひと目で把握できるようにすることは、開発効率を左右する非常に重要な要素です。モデルの学習中に損失関数（Loss）が順調に下がっているか、推論サーバーの応答速度が目標値を維持しているか。こうした「数値」を直感的に伝えるために、Streamlitが提供しているのがst.metricという強力なコンポーネントです。
st.metricは、単に数値を表示するだけでなく、前回からの増減（Delta）を強調表示する機能を備えており、ダッシュボードの「顔」とも言える重要な役割を担います。本記事では、このst.metricの基本的な使い方から、最新のアップデートで追加された便利なパラメーター、そしてPyTorchを用いたAI開発現場での具体的な活用シーンまで、ベテランライターの視点で詳しく解説していきます。今回もよろしくお願いします。
1. 準備：Streamlitを最新バージョンにアップデートする
本記事で紹介する新機能（delta_arrowなど）を利用するためには、Streamlitのバージョンが最新である必要があります。特に、1.52.0で導入された機能を確実に動作させるために、まずは以下の手順で環境をアップデートしましょう。
ターミナルまたはコマンドプロンプトを開き、以下のpipコマンドを実行してください。
# Streamlitを最新バージョンにアップグレード
pip install --upgrade streamlitアップデートが完了したら、正しく反映されているかバージョンを確認します。
# バージョンの確認
streamlit version出力結果が「Streamlit, version 1.52.0」（またはそれ以降）になっていれば準備完了です。Streamlitは進化が非常に早いため、定期的にこのコマンドで最新の機能を取り入れる習慣をつけておくと、開発の幅が広がります。
2. st.metricの基本：主要な引数と表示の仕組み
st.metricは、非常にシンプルなコードでプロフェッショナルなインジケーターを作成できます。まずは基本となる4つの引数を確認しましょう。
- label: 指標のタイトルです（例：「正解率」「平均応答時間」）。
- value: 現在のメインの数値です。文字列、数値のどちらも受け付けます。
- delta: 前回と比較した変化量やパーセンテージなどを指定します。
- delta_color:
deltaの数値の色をどう扱うかを指定します。デフォルトはnormalで、正の数は緑、負の数は赤で表示されます。
具体的な基本コードを見てみましょう。
import streamlit as st
# 基本的なst.metricの表示
st.title("モデル学習モニタリング")
# 3つのカラムを作成して指標を並べる
col1, col2, col3 = st.columns(3)
with col1:
# 標準的な表示
st.metric(label="現在のEpoch", value="42 / 100")
with col2:
# デルタ（変化量）を表示（緑色で表示される）
st.metric(label="Accuracy", value="0.92", delta="0.03")
with col3:
# デルタにマイナスを指定（赤色で表示される）
st.metric(label="Loss", value="0.15", delta="-0.02")
このコードを実行すると、美しいカード型のUIが表示されます。deltaを指定するだけで、自動的に「↑」や「↓」のアイコンが付与され、視覚的に状況が伝わりやすくなります。
3. 新機能：delta_arrowパラメーターの解説（v1.52.0）
Streamlitのバージョン1.52.0では、待望のdelta_arrowパラメーターが導入されました。これまで、deltaに数値を指定すると自動的に矢印が表示されていましたが、この挙動をより細かく制御できるようになりました。
delta_arrowには、以下の3つの値を指定できます。
- “auto”: デフォルト設定です。正の数なら上向き矢印、負の数なら下向き矢印が表示されます。
- “up” or “down”: 矢印の向きの上向き、下向きを指定できます。
- “off”: 矢印を完全に非表示にします。数値の変化だけを見せたい場合に有効です。
「なぜ反転が必要なのか？」と疑問に思うかもしれません。例えば、AIモデルの「エラー率」や「推論レイテンシ」を考えてみましょう。これらの指標は、数値が「下がる」ことが「改善（ポジティブ）」を意味します。従来のnormalでは、数値が下がると赤い下向き矢印が出てしまい、一見すると「悪化した」ように誤解されるリスクがありました。
import streamlit as st
# v1.52.0の新機能：delta_arrowの活用
st.subheader("delta_arrowのカスタマイズ")
c1, c2 = st.columns(2)
with c1:
# レイテンシ：値が下がったので改善。矢印を消してシンプルにする例
st.metric(
label="推論レイテンシ",
value="120ms",
delta="-15ms",
delta_arrow="off"
)
with c2:
# エラー率：値が下がったので改善。向きを調整したい場合に検討
st.metric(
label="エラー率",
value="0.5%", # これはOK
delta=-0.2, # ここは数値で
delta_color="inverse",
delta_arrow="up"
)
このように、表示したいデータの性質（増えるのが良いのか、減るのが良いのか）に合わせて、矢印の有無や向きを制御できるようになったのは、データダッシュボードとしての完成度を一段引き上げる大きな進化です。
4. 実践：AI・機械学習プロジェクトでのst.metric活用事例
ここからは、中級者レベルの読者の皆様に向けて、より実践的な活用シーンを紹介します。特にPyTorchを用いた深層学習の文脈で、どのようにst.metricを組み込むのが効果的かを見ていきましょう。
事例1：PyTorchを用いたモデル学習ログの可視化
学習ループの中で記録した損失（Loss）と精度（Accuracy）をダッシュボードに表示する例です。ここでは、前のエポックと比較して「Lossが下がった＝緑（ポジティブ）」「Accuracyが上がった＝緑（ポジティブ）」と直感的に理解できるような設定を行います。
import torch
import torch.nn as nn
import streamlit as st
# ダミーの学習データをシミュレーション
# 実際には学習ループ内で取得した値を使用します
current_accuracy = 0.85
prev_accuracy = 0.82
current_loss = 0.35
prev_loss = 0.40
st.header("学習進捗ダッシュボード")
acc_delta = current_accuracy - prev_accuracy
loss_delta = current_loss - prev_loss
col1, col2 = st.columns(2)
# Accuracyは高いほど良いので、delta_color="normal"でOK
# 正の数(0.03)なら緑の↑が表示される
col1.metric(
label="Validation Accuracy",
value=f"{current_accuracy:.2%}",
delta=f"{acc_delta:.2%}"
)
# Lossは低いほど良いので、マイナスの変化を「緑」で表示したい
# ここではdelta_color="inverse"を使うことで、
# 「負の数（減少）を緑色」として表示し、改善を強調します
col2.metric(
label="Validation Loss",
value=f"{current_loss:.4f}",
delta=f"{loss_delta:.4f}",
delta_color="inverse"
)
delta_color="inverse"を使うことで、Lossが -0.05 されたときに「赤色（警告）」ではなく「緑色（改善）」として表示できます。これは現場のエンジニアにとって非常に直感的な表示となります。
事例2：推論パイプラインのパフォーマンス監視
モデルをデプロイした後、本番環境でのパフォーマンスを監視するシーンです。1秒あたりのリクエスト数（TPS）や、GPUメモリの消費量をモニタリングします。
# パフォーマンス監視の例
st.header("インフラ・パフォーマンス監視")
# 仮想的な監視データ
tps = 150
tps_change = 12
gpu_mem_used = 4.2 # GB
gpu_mem_change = 0.5 # GB
m1, m2 = st.columns(2)
# スループット（TPS）の増加はポジティブ
m1.metric(
label="Throughput (TPS)",
value=tps,
delta=tps_change,
delta_color="normal"
)
# GPUメモリの増加はリソース圧迫なのでネガティブ（赤）
# 通常、正の数は緑になるが、inverseにすることで
# 正の数（増加）を赤色で表示できる
m2.metric(
label="GPU Memory Usage",
value=f"{gpu_mem_used} GB",
delta=gpu_mem_change,
delta_color="inverse"
)
このようにdelta_colorとdelta_arrowを組み合わせることで、「数値が増えたからといって単純に喜べない」指標についても、正しいニュアンスでユーザーに伝えることが可能になります。
5. 応用テクニック：レイアウトとスタイリング
st.metricをさらに使いこなすためのテクニックを紹介します。複数の指標を表示する場合、st.columnsを活用するのが鉄則ですが、表示する数が多い場合はリスト形式でループ処理を回すとコードがスッキリします。
また、リアルタイムで変化するデータ（例えば、ストリーミング推論の統計情報など）を表示する場合は、st.emptyでプレースホルダーを作成し、ループ内で中身を書き換える手法が有効です。
import time
import random
st.header("リアルタイム推論統計")
# プレースホルダーを作成
placeholder = st.empty()
# シミュレーション：10回更新
for i in range(10):
with placeholder.container():
c1, c2, c3 = st.columns(3)
# ランダムな値を生成して表示
latency = random.uniform(50, 100)
diff = random.uniform(-5, 5)
c1.metric("Avg Latency", f"{latency:.1f} ms", delta=f"{diff:.1f} ms", delta_color="inverse")
c2.metric("Queue Size", random.randint(0, 20), delta=random.randint(-2, 2))
c3.metric("Uptime", "99.99%", delta="0.01%")
time.sleep(1) # 1秒待機
この実装により、ダッシュボード上の数値が動的に更新され、生きているシステムを監視している感覚をユーザーに与えることができます。
6. まとめと次のステップ
今回は、Streamlitの定番コンポーネントであるst.metricの基礎から、v1.52.0で追加されたdelta_arrowの制御、そしてAI開発現場での実践的な応用方法までを解説しました。
重要なポイントを振り返りましょう。
- 基本:
label,value,deltaの3つをセットで使うことで、情報密度の高いUIが作れる。 - 最新機能:
delta_arrowを使えば、矢印の向きを「normal」「inverse」「off」から選択でき、文脈に合わせた表現が可能になる。 - 色の制御:
delta_color="inverse"を活用して、Lossの減少やリソース消費の増加を正しく色分けする。 - AI開発への応用: PyTorchの学習ログや推論パフォーマンスの可視化に組み込むことで、迅速な状況判断が可能になる。
st.metricは一見シンプルな機能ですが、その「表現の正確さ」にこだわることで、ツールの使い勝手は劇的に向上します。特にAI開発においては、数値の背景にある意味（改善なのか改悪なのか）を正しく伝えることが、チーム全体の意思決定をサポートすることに繋がります。
ぜひ、皆さんの次のプロジェクトでも最新のStreamlitをインストールして、洗練されたモニタリングダッシュボードを構築してみてください。
参考リファレンス:
Streamlit API Reference – st.metric
https://docs.streamlit.io/develop/api-reference/data/st.metric
最後まで読んでいただきありがとうございます。
コメント