Day_87 01. 프로토타이핑 - 웹 서비스 형태(Streamlit)
작성일
프로토타이핑 - 웹 서비스 형태(Streamlit)
1. 웹 서비스 형태 - Streamlit
이전 강의에서 학습한 Voila
Voila 의 장점
- 노트북에서 쉽게 프로토타입을 만들 수 있음
- 단, 대시보드처럼 레이아웃을 잡기 어려움 $\rightarrow$ 이런 경우 웹 개발 진행할 수 있음
- 자바스크립트, React, Vue 등을 사용해 프로토타입을 만드는 것은 시간 효율적이지 않음
- 처음부터 HTML/자바스크립트 + Flask/Fast API 가 아닌, 기존 코드를 조금만 수정해서 웹 서비스를 만드는 것이 목표
웹 서비스를 만드는 과정
데이터 분석가(또는 데이터 사이언티스트 등)가 웹 서비스를 작업하는 Flow
데이터 Product 로 중요하게 된다면 프론트엔드/PM 조직과 협업
- 단, 프론트엔드/PM 조직은 다른 웹도 만들고 있어서 빠르게 이터레이션이 어려움
- 요구조건을 정리
- 레이아웃을 시각화해서 구상
- 코드를 Front 따로 Backend 따로 개발
- 완성이되면 또 작업을 해주기까지가 오래걸림(왜? 다른 작업도 겸하고있어서)
다른 조직의 도움 없이 빠르게 웹 서비스를 만드는 방법이 무엇일까?
이런 문제를 해결하기 위해 등장한 것이 Streamlit
주의할 점 : 툴이나 라이브러리에 집착하지 말고, 점진적으로 문제를 해결하는 과정 에 집중하기!
현재 사용하는 도구의 장단점은 어떤 것이고 새로운 대안이 있을지 항상 생각해보기!
강의에선 Voila - Streamlit 순서로 했찌만, 추후엔 Streamlit 부터 시작해도 괜찮음
모든 것은 프로젝트의 요구 조건에 따라 다름!
Streamlit 의 대안
- R 의 Shiny
- Flask, Fast API : 백엔드를 직접 구성 + 프론트엔드 작업도 진행
- Dash : 제일 기능이 풍부한 Python 대시보드 라이브러리
- Voila : Jupyter Notebook 을 바로 시각화 가능
Python 프로토타입 도구(Dashboard) 비교 By zzsza
Streamlit 소개
장점
- 파이썬 스크립트 코드를 조금만 수정하면 웹을 띄울 수 있음
- 백엔드 개발이나 HTTP 요청을 구현하지 않아도 됨
- 다양한 Component 제공해 대시보드 UI 구성할 수 있음
- Streamlit Cloud 도 존재해서 쉽게 배포할 수 있음(단, Community Plan 은 Public Repo 만 가능)
- 화면 녹화 기능(Record) 존재
Streamlit 예시
albumentations Demo 도 Streamlit 으로 만들어짐
https://albumentations-demo.herokuapp.com/
Streamlit Gallery : https://streamlit.io/gallery
sample_code.py
code 수 : 37줄
적은 코드로 frontend 까지 만들 수 있음
Streamlit
$ pip3 install streamlit
Streamlit 실행 방법
(CLI) streamlit run streamlit-basic.py
localhost:8501 에 접근 가능
Streamlit Text 작성(Title, Header, Write)
Streamlit Button
Streamlit Check Box
value 에 인자를 넘겨주면 Default 값 설정할 수 있음
Streamlit Pandas DataFrame, Markdown
- st.write : 보여줄 수 있는 것이면 어떤 것이든 보여줌
- st.dataframe : Interactive 한 DataFrame, 컬럼 클릭이 가능하고 정렬도 가능
- st.table : Static 한 DataFrame
Streamlit Pandas DataFrame
DataFrame 의 Max 값을 색칠할 수 있음
Streamlit Metric, JSON
Streamlit Line Chart
Streamlit Map Chart
Streamlit Chart
그 욍에도 Plotly Chart 등을 쉽게 사용할 수 있음
Chart 문서
Streamlit Radio Button, Select Box
A 가 선택되면 이 작업을 수행
selectbox 의 Output 을 변수에 저장해서 확인할 수 있음
Streamlit Multi Select Box
Streamlit Slider
Streamlit Input Box, Caption, Code, Latex
Streamlit Layout - Sidebar
Sidebar 에는 파라미터를 지정하거나, 암호를 설정할 수 있음
st.sidebar.button('hi')
기존 Method 앞에 sidebar 를 붙이면 sidebar 에 보이게 됨
Streamlit Layout - Columns
여러 칸으로 나눠서 Component 를 추가하고 싶은 경우 활용
Streamlit Layout - Expander
눌렀을 경우 확장하는 부분이 필요한 경우
Streamlit Spinner
연산이 진행되는 도중 메세지를 보여주고 싶은 경우
Streamlit Ballons
한번 직접 실행해보시겠어요?
python st.ballons()
직접 해보고 경험하길 바랍니다.
Streamlit Status Box
Streamlit Form
Streamlit File Uploader
200MB 제한이 있음
Streamlit API Document
더 많은 Component 가 존재함
https://docs.streamlit.io/library/api-reference
문서를 확인해보면서 실행해보기!
Streamlit Cheat Sheet
https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py
Streamlit 의 Data Flow
Streamlit 의 화면에서 무언가 업데이트되면 전체 Streamlit 코드가 다시 실행
- Code 가 수정되는 경우
- 사용자가 Streamlit 의 위젯과 상호작용하는 경우(버튼 클릭, 입력 상자에 텍스트 입력시 등)
Session State
- Streamlit 의 Data Flow 로 인해 매번 코드가 재실행되며 중복 이벤트를 할 수 없음
- Global Variable 처럼 서로 공유할 수 있는 변수가 필요
- Steramlit 0.84 버전에 session_state 가 개발됨
st.session_state.{session_state_value}
session_state_value 에 저장해서 활용하는 방식
Session State 가 없다면
Increment 버튼을 누르면 +1, Decrement 버튼을 누르면 -1 이 되는 Counter 예제
Increment 를 계속 눌러도 +1 만 나옴
왜? 계속 페이지가 재실행되니까!
Session State 가 있다면
st.session_state.count 에 저장해두면 재실행되더라도 계속 저장하고 있음
반복해서 사용하고 싶은 변수가 있다면 session_state 에 저장해두는게 중요!
- Default Value Init
- 특정 조건 충족시 $\rightarrow$ session_state 의 변수 증가
Session State
Session State 에 대해 이해가 되지 않는다면, 실제로 코드를 실행해보고 아래 문서 읽어보기!
https://blog.streamlit.io/session-state-for-streamlit/
Session State 를 사용한 예시
https://share.streamlit.io/streamlit/release-demos/0.84/0.84/streamlit_ap.py
st.slider 가 변할 경우(on_change) Callback 함수를 사용해서 session_state 값을 유지하는 코드 만들기
Streamlit Cache - @st.cache
매번 다시 실행하는 특성 때문에 데이터도 매번 다시 읽을 수 있음
이런 경우 @st.cache 데코레이터를 사용해 캐싱하면 좋음(캐싱 : 성능을 위해 메모리 등에 저장하는 행위)
데이터를 읽는 함수를 만들고, 데코레이터를 적용
Special Mission
- Jupyter Notebook 으로 만든 마스크 분류 모델을 Streamlit 으로 띄워보기
- Steramlit 공식 문서 읽고 정리하기
- st.slider 가 변할 경우(on_change) Callback 함수를 사용해서 session_state 값을 유지하는 코드 만들기
- CV/NLP 에서 진행한 프로젝트 Streamlit 으로 띄워보기
댓글남기기