【Streamlit】表にリンク・URLや画像を埋め込む【st.dataframe】

はじめに

業務でStreamlitを使用したデモアプリの開発しています。
dataframeにURLや画像を埋め込む方法を調べてる最中に、Streamlitの表機能が2023年夏ごろから大きく進化していたことに気づき、個人的に役立った機能をまとめておこうと思います。

環境

Streamlit 1.31.0
Python 3.9.6

st.column_config

st.column_configは、Streamlitの表機能であるst.dataframe（またはst.data_editor）を柔軟にカスタマイズするためのクラスです。

使い方は簡単で、st.dataframeのパラメータとして設定するだけです。（後述）
st.column_configには様々な種類があり、今回は以下の二つを紹介します。

LinkColumn

各セルにクリック可能なURLを設定したり、URLを埋め込む事ができます。

import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        # サンプルデータ（URL）
        "apps": [
            "https://roadmap.streamlit.app",
            "https://extras.streamlit.app",
            "https://issues.streamlit.app",
            "https://30days.streamlit.app",
        ],
    }
)

st.dataframe(
    data_df,
    column_config={
        "apps": st.column_config.LinkColumn(
            # 表示するカラム名
            "アプリ",
            # 表示データのテキスト
             display_text="https://(.*?)\.streamlit\.app"
        )
    },
)

実行したもの

st.column_config.LinkColumnの各パラメータについて説明します。

• 文字列（上記の例では"アプリ"）
  • 表示するカラム名を設定します。元々のデータのカラム名はappsですが、これを設定することで表示名を自由に設定できます。
    データ名は英語だけど、表示名は日本語にしたい時などに便利です。
• display_text
  • データの表示名を変更できます。
    URLの基本形式が同じ場合は、正規表現を使用してURLの一部を抽出する事が可能です。
    上記の例では、各データが

  "https://xxx.streamlit.app"
  

  の形式なので、xxxの部分を抽出して表示名としています。
  このパラメータを設定しない場合は、URLが直接表示されます。

ImageColumn

各セルに画像を埋め込み、表示する事ができます。
要領は先ほどのLinkColumnと同様です。

import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        # サンプルデータ（画像URL）
        "apps": [
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/5435b8cb-6c6c-490b-9608-799b543655d3/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/ef9a7627-13f2-47e5-8f65-3f69bb38a5c2/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/31b99099-8eae-4ff8-aa89-042895ed3843/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/6a399b09-241e-4ae7-a31f-7640dc1d181e/Home_Page.png",
        ],
    }
)

st.data_editor(
    data_df,
    column_config={
        "apps": st.column_config.ImageColumn(
            # 表示するカラム名
            "Preview Image"
        )
    },
)

実行したもの

たったこれだけのコードで、簡単に画像のプレビューが表示できました。

（おまけ） 組み合わせて使ってみる

コード量は少ないとはいえ、st.column_configのパラメータは階層構造になっており、ややこしいです。
今回紹介したパラメータを組み合わせて少し長めのコードを書いてみたので、「あれ？ここってどんな書き方だっけ」と迷った時に参考にしていただければ幸いです。

import pandas as pd
import streamlit as st

data_df = pd.DataFrame(
    {
        "apps": [
            "https://roadmap.streamlit.app",
            "https://extras.streamlit.app",
            "https://issues.streamlit.app",
            "https://30days.streamlit.app",
        ],
        "creator": [
            "https://github.com/streamlit",
            "https://github.com/arnaudmiribel",
            "https://github.com/streamlit",
            "https://github.com/streamlit",
        ],
       "apps_image": [
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/5435b8cb-6c6c-490b-9608-799b543655d3/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/ef9a7627-13f2-47e5-8f65-3f69bb38a5c2/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/31b99099-8eae-4ff8-aa89-042895ed3843/Home_Page.png",
            "https://storage.googleapis.com/s4a-prod-share-preview/default/st_app_screenshot_image/6a399b09-241e-4ae7-a31f-7640dc1d181e/Home_Page.png",
        ]
    }
)

st.dataframe(
    data_df,
    column_config={
        "apps": st.column_config.LinkColumn(
            "アプリ",
            display_text="https://(.*?)\.streamlit\.app"
        ),
        "creator": st.column_config.LinkColumn(
            "作者", 
            display_text="Open profile"
        ),
        "apps_image": st.column_config.ImageColumn(
            "プレビュー", 
            help="Streamlit app のプレビュー画像"
        )
    },
    hide_index=True,
)

実行結果

終わりに

今回紹介したパラメータ以外にも、st.column_configには沢山の種類があります。
詳細は公式ドキュメントをお読みください。

参考文献

Strealit - Column configuration

Strealit - st.column_config.LinkColumn

Strealit - st.column_config.ImageColumn