【Python】streamlit で TODO アプリ

チャット AI のインターフェイスが手軽に作れるとかで話題の streamlit ですが、簡単に UI が作れるので実は WEB アプリ開発もできるのかもしれません。

そういうわけで TODO アプリを作ってみました。

見た目

シンプルな markdown アプリみたいな見た目になりました。

コード

main.py

import streamlit as st
import pandas as pd

class TodoPage:
  def setup(self):
    if "todos" not in st.session_state:
      st.session_state.todos = pd.DataFrame([])
    def add_todo():
      st.session_state.todos = pd.concat([st.session_state.todos, pd.DataFrame([{"DONE": False, "TODO": "TODO"}])])
    self.add_todo = add_todo

  def components(self):
    st.title("TODO です")
    st.button("Add TODO", on_click=self.add_todo)
    st.session_state.todos = st.data_editor(
      st.session_state.todos, 
      hide_index=True, 
      width=500, 
      column_config={
        "DONE": {"type": "checkbox"},
        "TODO": {"type": "text"}
      }
    )

page = TodoPage()
page.setup()
page.components()

まるで Option API みたいですね！（そうか？）

setup

def setup(self):
    if "todos" not in st.session_state:
      st.session_state.todos = pd.DataFrame([])
    def add_todo():
      st.session_state.todos = pd.concat([st.session_state.todos, pd.DataFrame([{"DONE": False, "TODO": "TODO"}])])
    self.add_todo = add_todo

session_state に todos がなければ pandas.DataFrame で初期化をします。ありがたいことに、表コンポーネントが pandas.DataFrame を受け付けるためです。

add_todoは「Add TODO」ボタンを押した時に呼ばれる関数で、todos に新しい行を追加します。

注意点

ボタンクリックで add_todo を発動させた後、画面の再描画が起こり、スクリプトが再実行されます。再描画時にもデータを喪失しないためには session_state か、永続化処理を使う必要があります。

components

  def components(self):
    st.title("TODO です")
    st.button("Add TODO", on_click=self.add_todo)
    st.session_state.todos = st.data_editor(
      st.session_state.todos, 
      hide_index=True, 
      width=500, 
      column_config={
        "DONE": {"type": "checkbox"},
        "TODO": {"type": "text"}
      }
    )

コンポーネントの追加を行っています。上から順に読まれ、上から順にタイトルやボタンなどが置かれていきます。
streamlit.data_editor は表をクリックして編集したとき、編集後の値は返り値となって元のデータを破壊しません。編集結果を速やかに受け入れるためには todos に代入してやる必要があります。

おわり

あまりにも簡単すぎてびっくりしました。