[Product Serving Part.2] Streamlit

Voila의 장점

• Notebook 환경에서 쉽게 프로토타입을 만들 수 있다.

Voila의 단점

• 대시보드처럼 레이아웃을 잡기 어렵다.
• ipywidget을 넘어서는 인터랙티브는 어렵다.

 

⇒ Streamlit 

• 파이썬 스크립트 코드를 조금만 수정하면 웹을 띄울 수 있다.
• 백엔드 개발이 필요없다.
• 다양한 Component를 제공한다.
• 화면 녹화 기능을 제공한다.

 

---

streamlit 설치

$ pip install streamlit

streamlit 실행

 streamlit run streamlit-basic.py

 

---

Streamlit Text

Title / Header / Write

 

import streamlit as st

st.title("Title")
st.header("Header")
st.subheader("subheader")

st.write("Write something")

 

 

Streamlit Button

if st.button("Click Me"):
    st.write("😎") # 버튼을 클릭하면 보이는 메세지

Streamlit Check Box

checkbox_btn = st.checkbox("체크박스 버튼")
if checkbox_btn:
    st.write("체크박스 버튼 클릭시 나오는 문구")

value=True 인자를 넣으면 체크된 상태가 default 상태가 됨

checkbox_btn = st.checkbox("체크박스 버튼", value=True)
if checkbox_btn:
    st.write("체크박스 버튼 클릭시 나오는 문구")

 

 

Streamlit Pandas Dataframe, Markdown

 

st.write : 보여줄 수 있는 것이면 어떤 것이든 보여줌

st.dataframe : Interactive한 Dataframe, 컬럼 클릭이 가능하고 정렬도 가능

st.table : Static한 Dataframe

 

import pandas as pd
df = pd.DataFrame({
    "Name": ["k", "b", "h"],
    "age": [25, 26, 27]
})

st.markdown("========")

st.write(df)
st.dataframe(df)
st.table(df)

Dataframe의  max/min/null값을 색칠할 수 있음

st.dataframe(df.style.highlight_(axis=0))

 

 

Streamlit Metric

st.metric("My metric", 42, 2)

Streamlit JSON

st.json(df.to_json())

 

Streamlit Line Chart

import numpy as np

chart_data = pd.DataFrame(
    np.random.randn(20, 3),
    columns=['a', 'b', 'c']
)
st.line_chart(chart_data)

그 밖의 chart들 : https://docs.streamlit.io/library/api-reference/charts

 

 

Streamlit Radio Button

selected_item = st.radio("Radio Button", ("A", "B", "C"))

if selected_item == "A":
    st.write("you choose A")
elif selected_item == "B":
    st.write("You choose B")
elif selected_item == "C":
    st.write("You choose C")

 

Streamlit Select Box

option = st.selectbox("this is selectbox", {'A', 'B', 'C'})
st.write("You select", option)

 

 

Streamlit Multi Select Box

multi_select = st.multiselect("This is multi select box", ['A', 'B', 'C', 'D'])
st.write('You selected', multi_select)

 

 

Streamlit Multi Slider

values = st.slider("Select a range of values", 0.0, 100.0, (50.0, 66.0))
st.write('Values: ', values)

 

 

Streamlit Input Box, Caption, Code, Latex

text_input = st.text_input("텍스트를 입력해주세요.")
st.write(text_input)

password_input = st.text_input("password를 입력해주세요", type="password")

number_input = st.number_input("숫자를 입력해주세요")
st.write(number_input)

st.date_input("날짜를 입력하세요")
st.time_input("시간을 입력하세요")

st.caption("This is caption")
st.code("a = 123")
st.latex("\int a x^2 \,dx")

 

 

Streamlit Layout - Sidebar

sidebar에는 파라미터를 지정하거나 암호를 설정할 수 있다.

기존 Method 앞에 sidebar을 붙이면 sidebar에 해당 component가 나타난다.

 

st.sidebar.button("sidebar button")

 

Streamlit Layout - Columns

여러 칸으로 나눠서 Component를 추가하고 싶은 경우 활용

col1, col2, col3, col4 = st.columns(4)
col1.write("this is column 1")
col2.write("this is column 2")
col3.write("this is column 3")
col4.write("this is column 4")

 

 

Streamlit Layout - Expander

눌렀을 때 확장하는 부분이 필요한 경우

with st.expander("클릭하면 expand"):
    st.write("content zzan")

 

Streamlit Spinner

연산이 진행되는 도중 메세지를 보여주고 싶은 경우

with st.spiiner("잠시만 기다려주세요.."):
    time.sleep(5)

 

 

Streamlit Status Box

st.success("success")
st.info("info")
st.warning("warning")
st.error("error message")

 

Streamlit Form

with st.form(key="입력 form"):
    username = st.text_input("User name")
    password = st.text_input("Password", type="password")
    st.form_submit_button("login")

 

Streamlit File Uploader

uploaded_file = st.file_uploader("choose a file", type=["png", "jpg"])

 

---

Streamlit Session State

st.title("Session State Example")

# count session_state에 init
if 'count' not in st.session_state:
    st.session_state.count = 0

# increment 버튼이 클릭되면 session_state의 count에 += 1
increment = st.button("Increment")
if increment:
    st.session_state.count += 1

# decrement 버튼이 클릭되면 session_state의 count에 -= 1
decrement = st.button("Decrement")
if decrement:
    st.session_state.count -= 1

st.write('Count = ', st.session_state.count)

 

Streamlit Cache - @st.cache

streamlit은 매번 다시 실행되는 특성 때문에 데이터도 매번 다시 불러오게된다.이런 경우 @st.cache 데코레이터를 사용해 캐싱하면 좋다. (캐싱: 성능을 위해 메모리 등에 저장하는 행위)

DATE_COLUMN = 'date/time'
DATA_URL = ('https://s3-us-west-2.amazonaws.com/'
            'streamlit-demo-data/uber-raw-data-sep14.csv.gz')

@st.cache
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    lowercase = lambda x: str(x).lower()
    data.rename(lowercase, axis='columns', inplace=True)
    data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
    return data

---

streamlit cheat sheet 

streamlit api reference