サーバレスなStreamlit、stliteで遊ぼう！ #Python

stliteとは

StreamlitはPython環境上で実行されているサーバにブラウザでアクセスする仕組みですが、このサーバを同じブラウザ上で動くようにしたものがstliteです。
Streamlit Creator¹であるWhitphxさんが開発しています。

PythonをWebAssembly(WASM)に移植してブラウザ上で動くようにしたPyodideというPythonディストリビューションがあり、stliteはStreamlitをこのPyodideで動くようにすることでサーバレスを実現しているそうです²。

ちょっとした可視化アプリを配布したい場合やWebページにStreamlitのプレイグラウンドを組み込みたい場合に便利そうですね。
例えばElectronと組み合わせればデスクトップで動くStreamlitアプリも実現できるそうです！

使い方

以下のようなコードを書いたHTMLファイルをローカルフォルダに保存します。

stlite_example.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>stlite app</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.58.3/build/stlite.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.58.3/build/stlite.js"></script>
    <script>
      stlite.mount(
        {
          requirements: ["pandas", "numpy"],
          entrypoint: "streamlit_app.py",
          files: {
            "streamlit_app.py": `
import streamlit as st
import pandas as pd
import numpy as np

st.title('Streamlit example')

rnd_data = pd.DataFrame(np.random.randn(50, 3), columns=["A", "B", "C"])
st.line_chart(rnd_data)
`,
          },
        },
        document.getElementById("root")
      );
    </script>
  </body>
</html>

おもむろにブラウザで開くと…Streamlitが動いたァァァァァァ！

ローカルフォルダから開いているのに動くのはちょっとビックリしません？

コードの補足

見たらだいたいわかる！ってくらいに簡単なんですが少しだけ補足を。

バージョン

以下に含まれる0.58.3の部分については最新のバージョン(あるいは自分の使いたいバージョン)を指定しましょう。

href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.58.3/build/stlite.css"
src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.58.3/build/stlite.js"

GitHubのReleasesに最新のバージョンが記載されています。²

パッケージ

パッケージを導入したい場合はstlite.mount関数に渡すオブジェクトのrequirementsキーに指定してあげればOKです。
今回はPandasとNumPyを導入しています。

requirements: ["pandas", "numpy"],

filesとentrypoint

stlite.mount関数に渡すオブジェクトのfilesキーにファイル名とその中身のセットを列挙してあげることで、ブラウザ上のPythonが認識できるファイル一覧を定義することができます。
今回はstreamlit_app.pyというPythonファイルのみを渡しています。

          entrypoint: "streamlit_app.py",
          files: {
            "streamlit_app.py": `
import streamlit as st
import pandas as pd
import numpy as np

st.title('Streamlit example')

rnd_data = pd.DataFrame(np.random.randn(50, 3), columns=["A", "B", "C"])
st.line_chart(rnd_data)
`,

また、stliteはentrypointキーに指定されたファイル名を使ってstreamlit runコマンドを実行します。
今回はfilesで渡したstreamlit_app.pyをそのままStreamlitアプリとして起動しているので、streamlit_app.pyの中身である「 ` 」で囲まれている部分、すなわち

import streamlit as st
import pandas as pd
import numpy as np

st.title('Streamlit example')

rnd_data = pd.DataFrame(np.random.randn(50, 3), columns=["A", "B", "C"])
st.line_chart(rnd_data)

にはStreamlitアプリとして動作するPythonコードを記載してあげましょう。

Streamlitアプリがマウントされる場所

stlite.mount関数に渡す要素の中にStreamlitアプリがマウントされます。
今回はIDがrootの要素にStreamlitアプリをマウントしています。

document.getElementById("root")

Streamlitコミュニティへの貢献が世界トップクラスな方々のこと。https://streamlit.io/creators ↩
「サーバレス」ではなく「静的サイトで動かせる」と表現した方が分かりやすいかも ↩ ↩²