KyungHyun Lim

ML/AI/SW Developer

프로토타이핑 - 웹 서비스 형태(Streamlit)

Dec 7, 2021

ML_AI
Serving

0. 강의 소개

이번에는 웹 프로그래밍에 대한 지식이 없어도, 웹서비스 형태로 프로토타이핑을 할 수 있는 Streamlit이라는 프레임워크에 대해서 학습해보는 시간을 가져보도록 하겠습니다.

1. 웹 서비스 형태 - Streamlit

1.1 웹 서비스를 만드는 과정

Why?
- Voila의 장점: 노트북에서 쉽게 프로토타입 제작가능
- 하지만, 대시보드처럼 레이아웃을 잡기 어려움
- JS, React, Vue 등을 사용해 프로토타입을 만드는것은 비효율적
- HTML/자바스크립트 + Flask/Fast API가 아닌, 기존 코드를 조금만 수정해서 웹서비스를 만드는 것이 목표
데이터 분석가의 웹서비스 Flow
1. 노트북에서 코드 생성
2. python script로 변경
3. Flask app 작성
4. 수정이 필요한데….
  - 유지 보수가 어렵다…
데이터 Product로 중요하게 된다면 프론트엔드/PM 조직과 협업
- 여기도 결국 frozen zone이…
- 어떻게 다른 조직의 도움 없이 빠르게 웹서비스를 만들 수 없을까??
  - -> 이때 등장한 것이 Streamlit!!

1.2 Streamlit의 대안

R의 Shiny
Flask, Fast API : 백엔드를 직접 구성 + 프론트엔드 작업도 진행
Dash : 제일 기능이 풍부한 Python 대시보드 라이브러리
Voila : Jupyter Notebook을 바로 시각화 가능

1.3 Streamlit

공식 사이트
- 링크
- 공식 문서
장점
- 파이썬 스크립트 코드를 조금만 수정하면 웹을 띄울 수 있음
- 백엔드 개발이나 HTTP 요청을 구현하지 않아도 됨
- 다양한 Component 제공해 대시보드 UI 구성할 수 있음
- Streamlit Cloud도 존재해서 쉽게 배포할 수 있음(단, Community Plan은 Public Repo만 가능)
- 화면 녹화 기능(Record) 존재
예시
- albumentations Demo!!: https://albumentations-demo.herokuapp.com/
- Streamlit Gallery : https://streamlit.io/gallery

설치 및 실행 방법

pip로 설치

  pip3 install streamlit

실행 방법

  # localhost:8501에 접근 가능
  streamlit run streamlit-basic.py

1.4 Streamlit Component

Streamlit Text 작성(Title, Header, Write)
Streamlit Button

Streamlit Check Box

  checkbox_btn = st.checkbox('체크박스 버튼')

  if checkbox_btn:
      st.write('체크박스 버튼 클릭!')

  # value에 인자 넘겨주기 -> Default 값 설정
  checkbox_btn = st.checkbox('체크박스 버튼', value=True)

Streamlit Pandas Dataframe, Markdown

st.write : 보여줄 수 있는 것이면 어떤 것이든 보여줌
st.dataframe : Interactive한 Dataframe, 컬럼 클릭이 가능하고 정렬도 가능
st.table : Static한 Dataframe

  df = pd.DataFrame({
      'first column': [1, 2, ,3 ,4],
      'second column': [10, 20, ,30 ,40] 
  })
    
  st.markdown("========")

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

  #####################
  # 최대값에 강조표시 가능
  st.dataframe(df.style.highlight_max(axis=0))
  st.table(df.style.highlight_max(axis=0))

Streamlit Metric, JSON
Streamlit Line Chart
Streamlit Map Chart
그 외의 다양한 chart
Streamlit Radio Button, Select Box
- 선택 옵션에 따라 해당 기능 수행
Streamlit Multi Select Box
Streamlit Slider
Streamlit Input Box, Caption, Code, Latex
Streamlit Layout - Sidebar
- Sidebar에는 파라미터를 지정하거나, 암호를 설정할 수 있음
- 기존 Method 앞에 sidebar를 붙이면 sidebar에 보이게 됨
```
  st.sidebar.button("hi")
```
Streamlit Layout - Columns
- 여러 칸으로 나눠서 Component를 추가하고 싶은 경우 활용
Streamlit Layout - Expander
- 눌렀을 경우 확장하는 부분이 필요한 경우
Streamlit Status Box
- 색깔을 다르게 정보 표시가능
Streamlit Form
- 입력을 받는 form
Streamlit File Uploader
Streamlit API Document
Streamlit Cheat Sheet

1.5 Streamlit의 Data Flow

Streamlit의 화면에서 무언가 업데이트되면 전체 streamlit 코드가 다시 실행 됨
1. 코드가 수정되는 경우
2. 사용자가 Streamlit 위젯과 상호작용하는 경우

1.6 Session State

Streamlit의 Data Flow로 인해 매번 코드가 재실행되며 중복 이벤트를 할 수 없음
- Global Variable 처럼 서로 공유할 수 있는 변수가 필요

Streamlit 0.84 버전에 session_state가 개발됨

  # session_state_value에 저장해서 활용하는 방식
  st.session_state.{session_state_value}

도움이 되는 문서 - 실제 코드
예시

1.7 @st.cache

매번 다시 실행 -> 동일한 변수를 매번 읽음
- @st.cache를 사용해 캐싱하면 좋음
- 데이터를 읽는 함수를 만들고, 데코레이터를 적용
```
  @st.cahe
  def load_data(nrows):
      data = pd.read_csv(file_dir)
      return data
```

2. Special Mission

Jupyter Notebook으로 만든 마스크 분류 모델을 Streamlit으로 띄워보기
Streamlit 공식 문서 읽고 정리하기
st.slider가 변할 경우(on_change) Callback 함수를 사용해서 session_state 값을 유지하는 코드 만들기
CV/NLP에서 진행한 프로젝트 Streamlit으로 띄워보기

Reference

AI boot camp 2기 서빙 강의