Streamlitでマルチページを作る2つの方法

はじめに

ども！時には立ちながらブログを執筆する龍ちゃんです。最近、自分のブログの分析を始めたのですが、読まれているブログと読まれていないブログの差が激しくてげんなりしています。全部自分で執筆しているので、自分の実力不足なんですけどねｗ

さて！今回はPythonでお手軽にGUIが作れる「Streamlit」のお話です。備忘録なので、メモ代わりにソースを乗っけておきますね。

こちらの内容は「Qumcum×生成」：ロボットで試すAIエージェントで使用している内容になります。

2024-10-03 「Qumcum×生成AI」ロボットで試すAIエージェント:Python

Streamlitでマルチページを作る二つの方法

今回は、公式の情報でまとめらている二つの方法について紹介していきます。難易度的には「とても簡単」と「ちょいムズ」の方法に分けることができます。

公式のこちらのページでまとまっています。

どちらも簡単に試すことができるので、サンプルを使用して試してみてください。

とても簡単：ディレクトリ構造で配置

こちらは、自動でルーティング定義をしてくれます。ディレクトリとしてpagesを用意すると内部にあるファイルが自動的に子ページとして定義されます。

src
├ pages             # 子ページのファイルを格納する
│ └ about.py
└ main.py           # topページの役割も果たす

以下がファイルの内容です。

main.py

import streamlit as st

st.set_page_config(page_title="top page", page_icon="")

st.title("top page")

about.py

import streamlit as st

# タブ名に表示される
st.set_page_config(page_title="About", page_icon="📈")

st.title("About")

起動方法としては、以下のコマンドです。

streamlit run main.py

起動の起点にしたファイルがトップページとして表示されます。

ちょいムズ：コード制御で配置

こちらは自前でルーティング定義を作成する方法になります。好きなようにディレクトリ名を決定することができます。ディレクトリ構造で設定するよりも状態によって特定のページをサイドバーに表示・非表示を動的に制御することができます。

src
├ contents          # 好きな名前で決定することができる
│ ├ about_page.py
│ └ top_page.py
└ main.py           # こちらでページ構成を作成する

以下がファイルの内容です。

main.py

import streamlit as st

def main():

    top_page = st.Page(
        page="contents/top_page.py", title="Top", icon=":material/home:", default=True
    )
    about = st.Page(
        page="contents/about_page.py", title="About", icon=":material/apps:"
    )

    pg = st.navigation([top_page, about])
    pg.run()

if __name__ == "__main__":
    main()

streamlit.navigationとstreamlit.Pageを使用して制御を行います。順序としては、ページを定義してナビゲーションで配置します。直感的理解がしやすいので助かります。

今回のデモでは単純な内容ですが、もっと突っ込んで定義するとサイドバーのデザイン性を向上させることもできます。細やかな制御方法については公式の関数情報を参照して確認したほうが良いです。

top_page.py

import streamlit as st

st.title("top page")

about_page.py

import streamlit as st

st.title("About Page")

起動方法としては、以下のコマンドです。

streamlit run main.py

streamlit.Pageでページの設定をした際にdefaultフラグを付けることで、トップページとして表示することができます。

細やかに制御をしたい場合は、自作で定義をする方が良いです。

二つの方法を併用すること

結論から書くと、二つの方法を併用することができません。併用しようとすると以下の警告が出力されます。

st.navigation was called in an app with a pages/ directory. This may cause unusual app behavior. You may want to rename the pages/ directory.

そのため、どちらか一方の方法を採用するようにしましょう。navigationを使用した場合は、pagesディレクトリに関しては無視されるので気にせず実装しても警告が出るだけなのであんまり気にしないで大丈夫です。

終わり

お疲れ様でした。streamlitの場合は、簡単におしゃれなページを実装することができます。ただ、streamlitの定義済みから外れたことをしようとすると難易度が爆上がりするのが難しいところです。

定義済み関数のみで実装することができる場合は、爆速で構築ができるのでお勧めです。プロトタイプには適しているのでお勧めです～