Streamlitではボタン、フォームなどの標準UIのみで簡単にwebアプリを作ることができます。しかし少し凝ったレイアウトやJavaScriptを使いたい場合にはReactと連携します。
Streamlit+Reactの実装例は公式のComponents
から見ることができます。
各プロジェクト画像 or タイトルからgithubのリポジトリへ行けます。すべてのプロジェクトがReactと連携しているわけではありませんが、プロジェクトと思わしきディレクトリ内にfrontend
というディレクトリがあればそのプロジェクトがReactと連携している手掛かりとなります。
チュートリアル
React開発環境の構築はCreate React App
で行うと簡単ですが、Streamlit.ioでも同じようなビルド環境が提供されています。
ローカル環境であれば公式通りに進めていけば苦なくチュートリアルは完了するのですが、Google Colaboratory上で完結させるために少しハマった部分があるので残しておきます。
今回はチュートリアルIntroduction
のProject Setup
まで進めていきたいと思います。
動作
GIF動画
ノートブック
メニューバー① > ランタイム > すべてのセルを実行 で再現できるようにしています。
ソース
必要なものをインストール、ダウンロードします。今回はStreamlit
とcomponent-template
だけでOKです。
!pip install streamlit
!git clone https://github.com/streamlit/component-template
!mv /content/component-template/template $project_path
npmコマンドで依存関係をインストールします。my_component/frontend
下で行う必要があります。
!cd $frontend_path &&\
npm install
__init__.py
のhttp://localhost:3001
をcolabのローカルホストに書き換えます。
with open(init_py_path, "r") as f:
fileText = f.read()
after = fileText.replace('"http://localhost:3001"', f'"{getGoogleLocalhost(react_port)}"')
with open(init_py_path, "w") as f:
f.write(after)
streamlit run
のあとに npn run start
します。
!streamlit run $init_py_path & sleep 3 && npx localtunnel --port $streamlit_port &\
cd $frontend_path && npm run start
your url is: https://***-***-***.loca.lt
に接続します。
Clickボタンなど動作を確認できると思います。
おわりに
いかがでしたでしょうか。
これでGoogle ColabratoryでのReact開発環境が整い、凝ったスクリプトを搭載したStreamlitプロジェクトもColabratory上で開発できるようになりました。
次回は作ったプロジェクトをgithubと連携しStreamlit.ioへデプロイする一連の流れをGoogle Colabratory上のみでやりたいと思います。
参考