【mdx】StreamlitのPlayground

Streamlitについて

Streamlitとは、Pythonで簡易的なアプリケーションを簡単に作成できるフレームワークです。通常はPython環境で動作しますが、stliteを利用することでブラウザ上で動作させることが可能です。

本ページでは、 mdx ファイル内にStreamlitコードを埋め込み、stliteで実行する方法を紹介します。

stliteコンポーネントの利用

stliteを利用するには、 StliteFrame コンポーネントをインポートします。

import StliteFrame from "@/components/StliteFrame.astro";

srcプロパティの利用方法

Streamlitコードを含むPythonファイルを src プロパティに指定して利用します。たとえば、 public/examples/hello.py に以下のコードがあるとします。

import streamlit as st

st.title("ボタンの基本")
st.write("ボタンが押されたらif文の中が実行されます")
if st.button("押してね"):
st.success("押されました！")

これを StliteFrame コンポーネントで読み込むには、以下のように記述します。複雑なPythonコードを外部から取り込む場合に便利です。

<StliteFrame src="/examples/button.py" />

codeプロパティの利用方法

あまり長くないPythonコードを利用する場合、コンポーネントの code プロパティを利用して直接ソースコードを埋め込むことも可能です：

{/* Streamlitで表示したいコードをexport constする */}

export const code = `
import streamlit as st

st.title("ボタンの基本")
st.write("ボタンが押されたらif文の中が実行されます")
if st.button("押してね"):
st.success("押されました！")
`
{/* 埋め込みをする */}

<StliteFrame code={code} />

アプリの表示例

srcプロパティ、codeプロパティどちらを利用しても同じようにStreamlitアプリケーションが表示されます。

アプリの利用者は「編集タブ」からソースコードをインタラクティブに変更することも可能となっており、「反映」ボタンを押すことでソースコードの変更をアプリに反映できます。