streamlit-to-marimo

Streamlit アプリを marimo に変換する

セル構造、PEP 723 メタデータ、出力のレンダリング、marimo check、変数の命名など、marimo ノートブックの一般的な規約については、marimo-notebook スキルを参照してください。このスキルでは、Streamlit の概念を marimo の同等機能に対応付ける方法に焦点を当てます。

手順

1. Streamlit アプリを読み、ウィジェット、レイアウト、状態管理を把握します。

2. marimo-notebook スキルの規約に従って、新しい marimo ノートブックを作成します。Streamlit アプリが使用する依存関係（pandas、plotly、altair など）をすべて追加します。ただし、streamlit は marimo に置き換えてください。元のファイルを上書きしないでください。

3. 以下の対応表を使用して、Streamlit のコンポーネントを marimo の同等機能に対応付けます。重要な原則は次のとおりです。

   • UI 要素は変数に割り当て、現在の値には .value でアクセスします。
   • UI 要素を参照するセルは、ユーザーが操作すると自動的に再実行されます。コールバックは不要です。

4. 実行モデル、状態、キャッシュに関する概念上の違いに対処します（以下を参照）。

5. 結果に対して uvx marimo check を実行し、問題を修正します。

ウィジェットの対応表

入力ウィジェット

Streamlit	marimo	備考
st.slider()	mo.ui.slider()
st.select_slider()	mo.ui.slider(steps=[...])	離散値は steps で渡します
st.text_input()	mo.ui.text()
st.text_area()	mo.ui.text_area()
st.number_input()	mo.ui.number()
st.checkbox()	mo.ui.checkbox()
st.toggle()	mo.ui.switch()
st.radio()	mo.ui.radio()
st.selectbox()	mo.ui.dropdown()
st.multiselect()	mo.ui.multiselect()
st.date_input()	mo.ui.date()
st.time_input()	mo.ui.text()	専用の時間ウィジェットはありません
st.file_uploader()	mo.ui.file()	.contents() を使用してバイト列を読み取ります
st.color_picker()	mo.ui.text(value="#000000")	専用のカラーピッカーはありません
st.button()	mo.ui.button() または mo.ui.run_button()	負荷の高い計算を開始するには run_button を使用します
st.download_button()	mo.download()	ダウンロードリンク要素を返します
st.form() + st.form_submit_button()	mo.ui.form(element)	要素をラップし、送信時にのみ値が更新されます

表示要素

Streamlit	marimo	備考
st.write()	mo.md() または最後の式
st.markdown()	mo.md()	f-string に対応しています：mo.md(f"Value: {x.value}")
st.latex()	mo.md(r"$...$")	marimo は KaTeX を使用します。references/latex.md を参照してください
st.code()	mo.md("```python\n...\n```")
st.dataframe()	df（最後の式）	DataFrame は標準でインタラクティブな marimo ウィジェットとしてレンダリングされます。コード不要の変換には mo.ui.dataframe(df) のみを使用します
st.table()	df（最後の式）	行選択が必要な場合は mo.ui.table(df) を使用します
st.metric()	mo.stat()
st.json()	mo.json() または mo.tree()	インタラクティブに折りたたみ可能な表示には mo.tree() を使用します
st.image()	mo.image()
st.audio()	mo.audio()
st.video()	mo.video()

チャート

Streamlit	marimo	備考
st.plotly_chart(fig)	fig（最後の式）	選択機能には mo.ui.plotly(fig) を使用します
st.altair_chart(chart)	chart（最後の式）	選択機能には mo.ui.altair_chart(chart) を使用します
st.pyplot(fig)	fig（最後の式）	インタラクティブな matplotlib には mo.ui.matplotlib(fig) を使用します

レイアウト

Streamlit	marimo	備考
st.sidebar	mo.sidebar([...])	要素のリストを渡します
st.columns()	mo.hstack([...])	列の比率には widths=[...] を使用します
st.tabs()	mo.ui.tabs({...})	{"Tab Name": content} の辞書を渡します
st.expander()	mo.accordion({...})	{"Title": content} の辞書を渡します
st.container()	mo.vstack([...])
st.empty()	mo.output.replace()
st.progress()	mo.status.progress_bar()
st.spinner()	mo.status.spinner()	コンテキストマネージャー

主な概念上の違い

実行モデル

Streamlit は、操作のたびにスクリプト全体を上から下まで再実行します。marimo はリアクティブなセル DAGを使用し、変更された変数に依存するセルのみが再実行されます。

• st.rerun() は必要ありません。リアクティビティは自動です。
• st.stop() は必要ありません。下流のセルが上流の値に自然に依存するよう、セルを構成します。

状態管理

Streamlit	marimo
st.session_state["key"]	セル間で使用する通常の Python 変数
コールバック関数（on_change）	widget.value を参照するセルが自動的に再実行されます
st.query_params	mo.query_params

キャッシュ

Streamlit	marimo
@st.cache_data	@mo.cache
@st.cache_resource	@mo.persistent_cache

@mo.cache は主に使用するキャッシュデコレーターです。functools.cache と同様に動作しますが、marimo のリアクティビティを認識します。@mo.persistent_cache はさらに、セッションをまたいで結果をディスクに保持します。モデルのトレーニングなど、計算コストの高い処理に便利です。

マルチページアプリ

marimo では、複数ページの Streamlit アプリを構築する方法が 2 つあります。

• ルーティングを使った単一のノートブック：mo.routes と mo.nav_menu または mo.sidebar を使用して、1 つのノートブック内に複数の「ページ」（タブ／ルート）を構築します。
• ギャラリーとしての複数のノートブック：marimo run folder/ を使用してノートブックのフォルダーを実行し、ナビゲーション付きのギャラリーとして提供します。

デプロイ

marimo には、Streamlit Community Cloud の代わりに marimo アプリをホストする molab があります。add-molab-badge スキルを使って「molab で開く」ボタンを生成できます。

カスタムコンポーネント

Streamlit にはカスタムコンポーネント機能がありますが、marimo との互換性はありません。marimo-anywidget スキルを使って同等の anywidget を生成できる可能性がありますが、作業を始める前にユーザーに相談してください。