AIでStreamlitのダッシュボードを作る手順｜Streamlit in Snowflakeの検証

今回は、AIで月次売上ダッシュボードをStreamlit in Snowflakeで作りました。

お題は「とある町中華」の月次売上を定点観測する1枚です。数字はダミーで、データは弊社のSnowflakeに置きました。手本はPCの1440×900で、寸法、色、文字、選択時の状態を指定しています。

作成はAIが担当し、初回に約25分、直し1回に約10分かかりました。手本と採点の物差しは先に用意してあったので、この時間は手本を作る時間を含みません。最後は採点役の2人とも必須条件を合格としました。一方で、Snowflakeの画面の外枠は消せず、手本どおりの大きさでは1画面に収まらない点が残りました。

この記事は弊社の検証記録で、StreamlitやSnowflakeの公式手順ではありません。

手本の画面

手本：先に用意した設計の画面（PC 1440×900）。この画面にどこまで近づけるかを測りました。数字はダミーです

完成した画面

図1：撮影時だけ外枠の中の表示域を1440×900に広げて撮った画面。数字はダミーです

月を変える操作は、プルダウン、前の月・次の月、月別売上の棒を押す、の3通りです。3通りとも実際に押して、画面全体が切り替わることを確かめました。ただし、プルダウンは3回試したうち1回、選んでいない月が表示され、画面が切り替わりませんでした。このときはブラウザの応答も止まっていて、原因は特定できていません。

作る手順の全体像

手順1 Streamlitの版を指定する

`environment.yml` で版を指定しました。以前の検証で使った画面は古い版で動いていて、使えない引数がありました。今回は1.52.2を指定しています。

name: sf_env
channels:
  - snowflake
dependencies:
  - streamlit=1.52.2
  - pandas

指定した版は、最初の起動に2分ほどかかりました。Snowsightの読み込み画面が「ステップ4/6」で止まって見えますが、待つと進みました。

手順2 数字はSQLで計算する

売上、来店数、曜日×時間、売れ筋、滞在の長さ別を、すべてアプリの中のSQLで集計します。画面に固定の数字は書きません。

画面を開く前に、同じSQLの結果を全10か月の正解値と比べ、不一致は0件でした。

手順3 容れ物に名前を付けて座標を指定する

Streamlitは上から順に部品を並べる作りで、座標を指定する部品がありません。そこで `st.container(key=”pa”)` のように容れ物へ名前を付け、CSSで絶対配置にしました。

with st.container(key="pa"):
    ...

# CSS
# .st-key-pa{position:absolute;left:24px;top:184px;width:805px;height:332px}

1440×900で実測すると、KPI、A〜D、注記の位置と大きさは手本の指定どおりでした。文字の最小は12px、数字は等幅でした。

ただし、この方法はStreamlitの内部の名前に頼っています。版を上げると直しが必要になる場合があります。

動かなかったところと代わりの方法

最後の形では、月別売上のグラフにグラフ部品を使っていません。手本に近づけるほどHTMLとCSSの量が増え、Streamlitの標準の部品は月の操作のボタンとプルダウンが中心になりました。

手順4 Snowsightの外枠の中で確かめる

Streamlit in SnowflakeはSnowsightの中に表示されます。今回の環境では、外枠が左に57px、上下で94pxを取りました。1440×900の窓で開くと、アプリに使える表示域は1383×806です。

図2：初回をそのまま開いた画面。下の部品は表示域の外です。数字はダミーです

アプリのメニューには外枠を消す項目がありませんでした。アプリのURLを直接開いても、サーバーエラーか白い画面になりました。

そこで、表示域の大きさに合わせて全体を縮めました。CSSの `zoom` ではグラフが二重に縮んだため、`transform: scale()` を表示域の大きさ別に用意しています。

図3：1383×806の表示域。全体が約89%になります。数字はダミーです

スクロールはなくなりましたが、全体が約89%になり、12pxの文字は約10.7pxになります。手本の「12pxより小さい文字を作らない」は、この表示では満たせません。

キーボードの操作

棒を透明なボタンにしたことで、Tabキーで棒まで移動し、Enterキーで月を切り替えられるようになりました。曜日×時間のマスと売れ筋、滞在の行にも焦点が当たり、説明の箱が出ます。

図4：Tabキーで1月の棒に移動した画面。数字はダミーです

手順5 画面に出た文字を全10か月で照合する

画像を見比べるだけでは、全部の月の数字を確かめられません。今回は確認用の版を別に作り、画面に出た文字を読み取って、正解値から作った期待値と比べました。月を順に切り替えながら自動で確かめる形です。

全10か月で不一致は0件でした。期待値を1か所わざと変えると、その月だけが不一致と表示されることも確かめました。

確認用の版は本番のアプリには残していません。

採点の結果

採点役はAIの2人です。作り手と製品名を伏せ、出来ばえを96点満点、手本の再現度を100点満点で採点しました。点数は写真で確認できた範囲の値です。採点役が見た写真は3か月分で、全10か月の照合は手順5の確認用の版で別に行いました。

初回の不合格の理由は、1383×806の表示域に収まらないことでした。直し1回のあとに残った指摘は、全体を縮めたことによる文字の小ささと寸法の差です。これは外枠に合わせて縮める限り残るので、ここで直しを止めました。

時間には、画面を開くために人がサインインと許可の実行を待った分を含みます。

人がすること、AIに任せること

うまくいかないこと

外枠の分は、アプリの中では取り戻せません

手本どおりの大きさで見せるには、1440×900より大きい窓が必要です。今回の外枠の大きさでは、ブラウザの表示域が幅1497px、高さ994px以上要ります。

手本に近づけるほど、保守する量が増えます

配置と部品の多くをCSSとHTMLで書いたため、Streamlitの版を上げるときは確認が必要です。棒の位置もコードで計算しています。

スマホとほかの画面幅は対象外です

今回はPCの1440×900だけを比べました。スマホでの表示は確かめていません。

まとめ

• `environment.yml` で版を指定し、容れ物に名前を付けてCSSで配置すると、手本の座標に合わせられました。
• Snowsightの外枠は消せないため、全体を縮めて収めると文字が手本より小さくなります。
• 画面の数字は、実際に出た文字を全月で照合しました。

関連する記事

• BIダッシュボードをAIで作る比較｜プログラムを書く4通りと画面を操作する2通り
• AIでStreamlitのダッシュボードを作る手順（HTMLとCSSで手本に合わせる）
• AIでStreamlitのダッシュボードを標準の部品だけで作る手順
• Streamlit in Snowflakeは標準の部品とHTMLのどちらで作るか
• Streamlit in Snowflake で、セマンティックビューから月次画面を作る

石井 亮介（りょうさん）

データパレード 代表取締役

XContact

㈱データパレードの代表取締役で、高田馬場の町中華「一番飯店」のChief Data Officerも務めています。BIツールのセールスエンジニア・システムエンジニア・カスタマーサクセス歴15年。大学のデータサイエンス教育で講師も担当してきました。現在は自社業務のほとんどをAIに移管し、AI10部署と50を超える自動処理が24時間動く「AI経営」を実践中。その実践知をこのブログで発信しています。