tutorial marimo

import%20marimo%0A%0A__generated_with%20%3D%20%220.14.17%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22%2C%20sql_output%3D%22polars%22)%0A%0Awith%20app.setup%3A%0A%20%20%20%20%23%20Initialization%20code%20that%20runs%20before%20all%20other%20cells%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20from%20pathlib%20import%20Path%0A%20%20%20%20return%20(Path%2C)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20import%20random%0A%20%20%20%20import%20asyncio%0A%20%20%20%20return%20asyncio%2C%20random%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rf%22%22%22%0A%20%20%20%20%23%20What%20is%20marimo%0A%0A%20%20%20%20Well%2C%20marimo%20is%20a%20brand%20new%20Python%20notebook%20which%20is%20the%20re-invention%20of%20Jupyter%20notebook.%0A%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20align%3D%22stretch%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%2F%2F%2F%20details%20%7C%20More%20to%20read%0A%20%20%20%20%20%20%20%20type%3A%20info%0A%0A%20%20%20%20%3Ciframe%20src%3D%22https%3A%2F%2Fkelreeeeey.github.io%2Fyap%2FMarimo-Notebooks%23ok-the-things-that-make-me-rethink-why-i-still-use-jupyter-notebook%22%20width%3D%22100%25%22%20height%3D%22600px%22%3E%3C%2Fiframe%3E%0A%0A%20%20%20%20%2F%2F%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%23%20Ways%20of%20getting%20started%0A%20%20%20%20%2F%2F%2F%20details%20%7C%20%3Cb%20style%3D%22color%3Ablack%22%3E1.%20In%20your%20local%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20type%3A%20info%0A%0A%20%20%20%201.%20%60pip%20install%20marimo%60%0A%20%20%20%202.%20marimo%20edit%20notebooks.py%0A%0A%20%20%20%20%2F%2F%2F%0A%0A%20%20%20%20%2F%2F%2F%20details%20%7C%20%3Cb%20style%3D%22color%3Ared%22%3E2.%20In%20our%20server%20(prefered!)%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20type%3A%20info%0A%0A%20%20%20%20%3E%20%3Ca%20href%3D%22https%3A%2F%2Fkelreeeeey.github.io%2Fmarimo-gh-pages%2Fnotebooks%2Fmarimo_notebook.html%22%3Ehttps%3A%2F%2Fkelreeeeey.github.io%2Fmarimo-gh-pages%2Fnotebooks%2Fmarimo_notebook.html%3C%2Fa%3E%0A%0A%0A%20%20%20%20%2F%2F%2F%0A%0A%20%20%20%20%2F%2F%2F%20details%20%7C%20%3Cb%20style%3D%22color%3Agrey%22%3E3.%20In%20my%20personal%20WASM%20Github%20Page%3C%2Fb%3E%0A%20%20%20%20%20%20%20%20type%3A%20info%0A%0A%20%20%20%20%3E%20%3Ca%20href%3D%22https%3A%2F%2Fkelreeeeey.github.io%2Fmarimo-gh-pages%2Fnotebooks%2Fmarimo_notebook.html%22%3Ehttps%3A%2F%2Fkelreeeeey.github.io%2Fmarimo-gh-pages%2Fnotebooks%2Fmarimo_notebook.html%3C%2Fa%3E%0A%0A%0A%20%20%20%20%2F%2F%2F%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%20Actually%20getting%20started%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Those%20basic%20UIs%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20show_code%20%3D%20mo.ui.switch(label%3D%22Show%20code%22)%0A%20%20%20%20show_code%0A%20%20%20%20return%20(show_code%2C)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20number%20%3D%20mo.ui.number(label%3D%22Number%22%2C%20value%3D10)%0A%20%20%20%20slider%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20label%3D%22Slider%22%2C%20value%3D10%2C%20start%3D1%2C%20stop%3D100%2C%20include_input%3DTrue%0A%20%20%20%20)%0A%20%20%20%20dropdown%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20options%3D%5B%22Apples%22%2C%20%22Oranges%22%2C%20%22Pears%22%5D%2C%20label%3D%22choose%20fruit%22%0A%20%20%20%20)%0A%20%20%20%20dropdown_dict%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20options%3D%7B%22Apples%22%3A%201%2C%20%22Oranges%22%3A%202%2C%20%22Pears%22%3A%203%7D%2C%0A%20%20%20%20%20%20%20%20value%3D%22Apples%22%2C%20%20%23%20initial%20value%0A%20%20%20%20%20%20%20%20label%3D%22choose%20fruit%20with%20dict%20options%22%2C%0A%20%20%20%20)%0A%20%20%20%20wish%20%3D%20mo.ui.text(placeholder%3D%22Wish%22)%0A%20%20%20%20wishes%20%3D%20mo.ui.array(%5Bwish%5D%20*%203%2C%20label%3D%22Three%20wishes%22)%0A%20%20%20%20button_incerement%20%3D%20mo.ui.button(%0A%20%20%20%20%20%20%20%20value%3D0%2C%20on_click%3Dlambda%20value%3A%20value%20%2B%201%2C%20label%3D%22increment%22%2C%20kind%3D%22warn%22%0A%20%20%20%20)%0A%20%20%20%20checkbox%20%3D%20mo.ui.checkbox(label%3D%22check%20me%22)%0A%20%20%20%20date%20%3D%20mo.ui.date(label%3D%22Start%20Date%22)%0A%0A%20%20%20%20_first_name%20%3D%20mo.ui.text(placeholder%3D%22First%20name%22)%0A%20%20%20%20_last_name%20%3D%20mo.ui.text(placeholder%3D%22Last%20name%22)%0A%20%20%20%20_email%20%3D%20mo.ui.text(placeholder%3D%22Email%22%2C%20kind%3D%22email%22)%0A%0A%20%20%20%20dictionary%20%3D%20mo.ui.dictionary(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22First%20name%22%3A%20_first_name%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Last%20name%22%3A%20_last_name%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Email%22%3A%20_email%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20label%3D%22dictionary%22%2C%0A%20%20%20%20)%0A%20%20%20%20_options%20%3D%20%5B%22Apples%22%2C%20%22Oranges%22%2C%20%22Pears%22%5D%0A%20%20%20%20multiselect%20%3D%20mo.ui.multiselect(label%3D%22Multiselect%22%2C%20options%3D_options)%0A%20%20%20%20radio_normal%20%3D%20mo.ui.radio(label%3D%22Radio%20normal%22%2C%20options%3D_options)%0A%20%20%20%20radio_inline%20%3D%20mo.ui.radio(label%3D%22Radio%20inline%22%2C%20options%3D_options%2C%20inline%3DTrue)%0A%20%20%20%20range_slider%20%3D%20mo.ui.range_slider(%0A%20%20%20%20%20%20%20%20label%3D%22Range%20Slider%22%2C%0A%20%20%20%20%20%20%20%20start%3D1%2C%0A%20%20%20%20%20%20%20%20stop%3D10%2C%0A%20%20%20%20%20%20%20%20step%3D2%2C%0A%20%20%20%20%20%20%20%20value%3D%5B2%2C%206%5D%2C%0A%20%20%20%20%20%20%20%20full_width%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20switch%20%3D%20mo.ui.switch(label%3D%22Siwtch%20do%20not%20disturb%22)%0A%20%20%20%20tabs%20%3D%20mo.ui.tabs(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Bob%20says%22%3A%20mo.md(%22Hello%2C%20Alice!%20%F0%9F%91%8B%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Alice%20says%22%3A%20mo.md(%22Hello%2C%20Bob!%20%F0%9F%91%8B%22)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%0A%20%20%20%20mo.show_code()%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20button_incerement%2C%0A%20%20%20%20%20%20%20%20checkbox%2C%0A%20%20%20%20%20%20%20%20date%2C%0A%20%20%20%20%20%20%20%20dictionary%2C%0A%20%20%20%20%20%20%20%20dropdown%2C%0A%20%20%20%20%20%20%20%20dropdown_dict%2C%0A%20%20%20%20%20%20%20%20multiselect%2C%0A%20%20%20%20%20%20%20%20number%2C%0A%20%20%20%20%20%20%20%20radio_inline%2C%0A%20%20%20%20%20%20%20%20radio_normal%2C%0A%20%20%20%20%20%20%20%20range_slider%2C%0A%20%20%20%20%20%20%20%20slider%2C%0A%20%20%20%20%20%20%20%20switch%2C%0A%20%20%20%20%20%20%20%20tabs%2C%0A%20%20%20%20%20%20%20%20wishes%2C%0A%20%20%20%20)%0A%0A%0A%40app.cell%0Adef%20_(%0A%20%20%20%20button_incerement%2C%0A%20%20%20%20checkbox%2C%0A%20%20%20%20date%2C%0A%20%20%20%20dictionary%2C%0A%20%20%20%20dropdown%2C%0A%20%20%20%20dropdown_dict%2C%0A%20%20%20%20multiselect%2C%0A%20%20%20%20number%2C%0A%20%20%20%20radio_inline%2C%0A%20%20%20%20radio_normal%2C%0A%20%20%20%20range_slider%2C%0A%20%20%20%20slider%2C%0A%20%20%20%20switch%2C%0A%20%20%20%20tabs%2C%0A%20%20%20%20wishes%2C%0A)%3A%0A%20%20%20%20uis%20%3D%20%5B%0A%20%20%20%20%20%20%20%20number%2C%0A%20%20%20%20%20%20%20%20slider%2C%0A%20%20%20%20%20%20%20%20dropdown%2C%0A%20%20%20%20%20%20%20%20dropdown_dict%2C%0A%20%20%20%20%20%20%20%20wishes%2C%0A%20%20%20%20%20%20%20%20button_incerement%2C%0A%20%20%20%20%20%20%20%20checkbox%2C%0A%20%20%20%20%20%20%20%20date%2C%0A%20%20%20%20%20%20%20%20dictionary%2C%0A%20%20%20%20%20%20%20%20multiselect%2C%0A%20%20%20%20%20%20%20%20radio_normal%2C%0A%20%20%20%20%20%20%20%20radio_inline%2C%0A%20%20%20%20%20%20%20%20range_slider%2C%0A%20%20%20%20%20%20%20%20switch%2C%0A%20%20%20%20%20%20%20%20tabs%2C%0A%20%20%20%20%5D%0A%20%20%20%20return%20(uis%2C)%0A%0A%0A%40app.cell%0Adef%20_(show_code%2C%20uis)%3A%0A%20%20%20%20_table%20%3D%20mo.ui.table(%0A%20%20%20%20%20%20%20%20data%3D%5B%7B%22ui%22%3A%20x%2C%20%22ui.value%22%3A%20x.value%7D%20for%20x%20in%20uis%5D%2C%0A%20%20%20%20%20%20%20%20pagination%3DFalse%2C%0A%20%20%20%20)%0A%20%20%20%20if%20show_code.value%3A%0A%20%20%20%20%20%20%20%20_%20%3D%20mo.show_code(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20We%20can%20get%20the%20input%20using%20its%20value%20attribute%0A%0A%20%20%20%20%7B_table%7D%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20We%20can%20get%20the%20input%20using%20its%20value%20attribute%0A%0A%20%20%20%20%7B_table%7D%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20_%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Not%20that%20basic%20UIs%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20file%20%3D%20mo.ui.file(filetypes%3D%5B%22.png%22%5D%2C%20multiple%3DFalse)%0A%20%20%20%20mo.show_code()%0A%20%20%20%20return%20(file%2C)%0A%0A%0A%40app.cell%0Adef%20_(Path)%3A%0A%20%20%20%20file_browser%20%3D%20mo.ui.file_browser(initial_path%3DPath(%22..%2F%22)%2C%20multiple%3DTrue)%0A%20%20%20%20mo.show_code()%0A%20%20%20%20return%20(file_browser%2C)%0A%0A%0A%40app.cell%0Adef%20_(file%2C%20file_browser)%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22%22%22%0A%20%20%20%20%23%23%23%20%60mo.ui.file%60%20and%20%60mo.ui.file_browser()%60%0A%20%20%20%20%2F%2F%2F%20details%20%7C%20Info%20details%0A%20%20%20%20%20%20%20%20type%3A%20info%0A%0A%20%20%20%20We%20can%20get%20the%20input%20using%20its%20value%20attribute%0A%20%20%20%20Upload%20a%20file%20%3Cbr%3E%20%7Bfile%7D%0A%0A%20%20%20%20Upload%20using%20selection%20%3Cbr%3E%20%7Bfile_browser%7D%0A%0A%20%20%20%20%2F%2F%2F%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(file%2C%20file_browser)%3A%0A%20%20%20%20_file%20%3D%20(%0A%20%20%20%20%20%20%20%20file.value%2C%0A%20%20%20%20%20%20%20%20%5Bx.name%20for%20x%20in%20file.value%5D%2C%0A%20%20%20%20)%0A%0A%20%20%20%20_file_browser%20%3D%20(%0A%20%20%20%20%20%20%20%20file_browser.value%2C%0A%20%20%20%20%20%20%20%20%5Bx.path%20for%20x%20in%20file_browser.value%5D%2C%0A%20%20%20%20%20%20%20%20%5Bx.name%20for%20x%20in%20file_browser.value%5D%2C%0A%20%20%20%20)%0A%0A%20%20%20%20(%0A%20%20%20%20%20%20%20%20mo.md(f%22%22%22We%20can%20get%20the%20input%20using%20its%20value%20attribute%22%22%22)%2C%0A%20%20%20%20%20%20%20%20_file%2C%0A%20%20%20%20%20%20%20%20_file_browser%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20%60mo.ui.refresh%60%20and%20%60mo.ui.run_button()%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(show_code)%3A%0A%20%20%20%20refresh%20%3D%20mo.ui.refresh(%0A%20%20%20%20%20%20%20%20label%3D%22Refresh%20to%20generate%20random%20number%22%2C%0A%20%20%20%20%20%20%20%20options%3D%5B%221s%22%2C%20%225s%22%2C%20%2210s%22%2C%20%2230s%22%5D%2C%0A%20%20%20%20)%0A%20%20%20%20if%20show_code.value%3A%0A%20%20%20%20%20%20%20%20_%20%3D%20mo.show()%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_%20%3D%20None%0A%20%20%20%20_%0A%20%20%20%20return%20(refresh%2C)%0A%0A%0A%40app.cell%0Adef%20_(refresh)%3A%0A%20%20%20%20refresh%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(random%2C%20refresh)%3A%0A%20%20%20%20refresh.value%0A%20%20%20%20mo.md(f%22%22%22generated%20random%20number%3A%20%7Brandom.randint(10%2C%20100)%7D%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20first_button%20%3D%20mo.ui.run_button(label%3D%22Button%201%22%2C%20kind%3D%22warn%22)%0A%20%20%20%20second_button%20%3D%20mo.ui.run_button(label%3D%22Button%202%22%2C%20kind%3D%22success%22)%0A%20%20%20%20return%20first_button%2C%20second_button%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(first_button%2C%20second_button)%3A%0A%20%20%20%20if%20first_button.value%3A%0A%20%20%20%20%20%20%20%20_md%20%3D%20mo.md('%3Cb%20style%3D%22color%3Aorange%22%3EYou%20chose%20option%201!%3C%2Fb%3E')%0A%20%20%20%20elif%20second_button.value%3A%0A%20%20%20%20%20%20%20%20_md%20%3D%20mo.md(%22You%20chose%20option%202!%22)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_md%20%3D%20mo.md(%22Click%20a%20button!%22)%0A%20%20%20%20_md.center()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(first_button)%3A%0A%20%20%20%20first_button.value%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(first_button%2C%20second_button)%3A%0A%20%20%20%20mo.hstack(%5Bfirst_button%2C%20second_button%5D%2C%20justify%3D%22space-around%22%2C%20gap%3D-1)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Layouts%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(uis)%3A%0A%20%20%20%20_a%20%3D%20mo.accordion(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Door%201%22%3A%20%22Nothing!%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Door%202%22%3A%20mo.ui.table(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%5B%7B%22ui%22%3A%20x%2C%20%22ui.value%22%3A%20x.value%7D%20for%20x%20in%20uis%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pagination%3DFalse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20).callout()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Door%203%22%3A%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22!%5Bgoat%5D(https%3A%2F%2Fimages.unsplash.com%2Fphoto-1524024973431-2ad916746881)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%0A%20%20%20%20mo.md(f%22%22%22%23%23%23%20%60mo.accordion()%60%0A%0A%20%20%20%20%7B_a%7D%0A%20%20%20%20%22%22%22).callout()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20%60mo.callout()%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20callout_kind%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20label%3D%22Color%22%2C%0A%20%20%20%20%20%20%20%20options%3D%5B%22info%22%2C%20%22neutral%22%2C%20%22danger%22%2C%20%22warn%22%2C%20%22success%22%5D%2C%0A%20%20%20%20%20%20%20%20value%3D%22neutral%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(callout_kind%2C)%0A%0A%0A%40app.cell%0Adef%20_(callout_kind)%3A%0A%20%20%20%20callout%20%3D%20mo.callout(%22This%20is%20a%20callout%22%2C%20kind%3Dcallout_kind.value)%0A%20%20%20%20return%20(callout%2C)%0A%0A%0A%40app.cell%0Adef%20_(callout%2C%20callout_kind)%3A%0A%20%20%20%20mo.vstack(%5Bcallout_kind%2C%20callout%5D%2C%20align%3D%22stretch%22%2C%20gap%3D0)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20%60mo.carousel()%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(uis)%3A%0A%20%20%20%20mo.carousel(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22Nothing!%22).center().callout()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22!%5Bgoat%5D(https%3A%2F%2Fimages.unsplash.com%2Fphoto-1524024973431-2ad916746881)%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.ui.table(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3D%5B%7B%22ui%22%3A%20x%2C%20%22ui.value%22%3A%20x.value%7D%20for%20x%20in%20uis%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pagination%3DFalse%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20%60Stacks()%60%20and%20%60mo.tree()%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.function%0Adef%20create_box(num%3D1)%3A%0A%20%20%20%20box_size%20%3D%2030%20%2B%20num%20*%2010%0A%20%20%20%20return%20mo.Html(%0A%20%20%20%20%20%20%20%20f%22%3Cdiv%20style%3D'min-width%3A%20%7Bbox_size%7Dpx%3B%20min-height%3A%20%7Bbox_size%7Dpx%3B%20background-color%3A%20orange%3B%20text-align%3A%20center%3B%20line-height%3A%20%7Bbox_size%7Dpx'%3E%7Bstr(num)%7D%3C%2Fdiv%3E%22%0A%20%20%20%20)%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20boxes%20%3D%20%5Bcreate_box(i)%20for%20i%20in%20range(1%2C%205)%5D%0A%20%20%20%20justify%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20%5B%22start%22%2C%20%22center%22%2C%20%22end%22%2C%20%22space-between%22%2C%20%22space-around%22%5D%2C%0A%20%20%20%20%20%20%20%20value%3D%22space-between%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22justify%22%2C%0A%20%20%20%20)%0A%20%20%20%20align%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20%5B%22start%22%2C%20%22center%22%2C%20%22end%22%2C%20%22stretch%22%5D%2C%20value%3D%22center%22%2C%20label%3D%22align%22%0A%20%20%20%20)%0A%20%20%20%20gap%20%3D%20mo.ui.number(start%3D0%2C%20step%3D0.25%2C%20stop%3D2%2C%20value%3D0.25%2C%20label%3D%22gap%22)%0A%20%20%20%20wrap%20%3D%20mo.ui.checkbox(label%3D%22wrap%22)%0A%20%20%20%20return%20align%2C%20boxes%2C%20gap%2C%20justify%2C%20wrap%0A%0A%0A%40app.cell%0Adef%20_(align%2C%20boxes%2C%20gap%2C%20justify%2C%20wrap)%3A%0A%20%20%20%20horizontal%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20boxes%2C%0A%20%20%20%20%20%20%20%20align%3Dalign.value%2C%0A%20%20%20%20%20%20%20%20justify%3Djustify.value%2C%0A%20%20%20%20%20%20%20%20gap%3Dgap.value%2C%0A%20%20%20%20%20%20%20%20wrap%3Dwrap.value%2C%0A%20%20%20%20)%0A%20%20%20%20vertical%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20boxes%2C%0A%20%20%20%20%20%20%20%20align%3Dalign.value%2C%0A%20%20%20%20%20%20%20%20gap%3Dgap.value%2C%0A%20%20%20%20)%0A%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%5Bjustify%2C%20align%2C%20gap%5D%2C%20justify%3D%22center%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20horizontal%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22-----------------------------%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20vertical%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20align%3D%22stretch%22%2C%0A%20%20%20%20%20%20%20%20gap%3D1%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(uis)%3A%0A%20%20%20%20mo.tree(%0A%20%20%20%20%20%20%20%20uis%2C%0A%20%20%20%20%20%20%20%20label%3D%22A%20tree%20of%20elements.%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20Another%20things%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20%60batch%60%20and%20%60form%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20user_info_1%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20-%20What's%20your%20name%3F%3A%20%7Bname%7D%0A%20%20%20%20%20%20%20%20-%20When%20were%20you%20born%3F%3A%20%7Bbirthday%7D%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20).batch(name%3Dmo.ui.text()%2C%20birthday%3Dmo.ui.date())%0A%20%20%20%20mo.show_code(user_info_1)%0A%20%20%20%20return%20(user_info_1%2C)%0A%0A%0A%40app.cell%0Adef%20_(user_info_1)%3A%0A%20%20%20%20print(user_info_1.value)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20user_info%20%3D%20(%0A%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20-%20What's%20your%20name%3F%3A%20%7Bname%7D%0A%20%20%20%20%20%20%20%20-%20When%20were%20you%20born%3F%3A%20%7Bbirthday%7D%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.batch(name%3Dmo.ui.text()%2C%20birthday%3Dmo.ui.date())%0A%20%20%20%20%20%20%20%20.form()%0A%20%20%20%20)%0A%20%20%20%20mo.show_code(user_info)%0A%20%20%20%20return%20(user_info%2C)%0A%0A%0A%40app.cell%0Adef%20_(user_info)%3A%0A%20%20%20%20print(user_info.value)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20Progress%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20rerun%20%3D%20mo.ui.button(label%3D%22Rerun%22)%0A%20%20%20%20rerun%0A%20%20%20%20return%20(rerun%2C)%0A%0A%0A%40app.cell%0Aasync%20def%20_(asyncio%2C%20rerun)%3A%0A%20%20%20%20rerun%0A%20%20%20%20for%20_%20in%20mo.status.progress_bar(%0A%20%20%20%20%20%20%20%20range(10)%2C%0A%20%20%20%20%20%20%20%20title%3D%22Loading%22%2C%0A%20%20%20%20%20%20%20%20subtitle%3D%22Please%20wait%22%2C%0A%20%20%20%20%20%20%20%20show_eta%3DTrue%2C%0A%20%20%20%20%20%20%20%20show_rate%3DTrue%2C%0A%20%20%20%20)%3A%0A%20%20%20%20%20%20%20%20await%20asyncio.sleep(0.5)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%23%20%60mo.mermaid()%60%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mermaid%20%3D%20mo.mermaid(%0A%20%20%20%20%20%20%20%20%22graph%20LR%5Cn%20%20A%5BChristmas%5D%20--%3E%7CGet%20money%7C%20B(Go%20shopping)%5Cn%20%20B%20--%3E%20C%7BLet%20me%20think%7D%5Cn%20%20C%20--%3E%7COne%7C%20D%5BLaptop%5D%5Cn%20%20C%20--%3E%7CTwo%7C%20E%5BiPhone%5D%5Cn%20%20C%20--%3E%7CThree%7C%20F%5BCar%5D%22%0A%20%20%20%20)%0A%20%20%20%20mo.show_code(mermaid)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20%23%23%20create%20reusable%20function%2C%20class%2C%20and%20anything%0A%0A%0A%20%20%20%20hit%20%60ctrl%2Bk%60%20or%20%60command%2Bk%60%2C%20%20and%20type%20%60Add%20setup%20cell%60%0A%20%20%20%20%22%22%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20mo.md(r%22%22%22%23%23%20mo.watch()%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20%23%20watch_file%20%3D%20mo.watch.file(%22.%2Fwhat.txt%22)%0A%20%20%20%20mo.show_code()%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_()%3A%0A%20%20%20%20%23%20watch_file.read_text()%0A%20%20%20%20mo.show_code()%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A