(AI 서비스 개발 기초) 웹 서비스 형태 - Streamlit

이 색깔은 주석이라 무시하셔도 됩니다.

Part 2. 프로토타입부터 점진적으로 개선하기

웹 서비스 형태 - Streamlit

이전 글에서 학습한 Voila

• Voila의 장점
  • 노트북에서 쉽게 프로토타입을 만들 수 있음
  • 단, 대시보드처럼 레이아웃을 잡기 어려움 ⇒ 이런 경우 웹 개발 진행해야 할 수도 있음
    • 자바스크립트, React, Vue 등을 사용해 프로토타입을 만드는 것은 시간 효율적이지 않음
    • 처음부터 HTML/자바스크립트 + Flask/Fast API가 아닌, 기존 코드를 조금만 수정해서 웹 서비스를 만드는 것이 목표

웹 서비스를 만드는 과정

• 데이터 분석가(또는 데이터 사이언티스트 등)가 웹 서비스를 작업하는 Flow

  

• 데이터 Product로 중요하게 된다면 프론트엔드/PM 조직과 협업

  • 단, 프론트엔드/PM 조직은 다른 웹도 만들고 있어서 빠르게 이터레이션이 어려움

    

• 다른 조직의 도움 없이 빠르게 웹 서비스를 만드는 방법이 무엇일까?

  • 이런 문제를 해결하기 위해 등장한 것이 Streamlit

    

Streamlit의 대안

1. R의 Shiny
2. Flask, Fast API : 백엔드를 직접 구성 + 프론트엔드 작업도 진행
   • 개발이 많이 필요함
3. Dash : 제일 기능이 풍부한 Python 대시보드 라이브러리
   • Dash API 문서를 읽고 적절한 코드를 구축해야 함
4. Voila : Jupyter Notebook을 바로 시각화 가능
   • UX, layout 설계가 까다로움

• 대안 비교

  

Streamlit 소개

https://streamlit.io/

https://docs.streamlit.io/

• 장점
  • 파이썬 스크립트 코드를 조금만 수정하면 웹을 띄울 수 있음
  • 백엔드 개발이나 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

    

• Streamlit 설치

  • pip3 install streamlit

• 실행 방법

  

  • (CLI) streamlit run streamlit-basic.py
  • localhost:8501에 접근 가능

• Text 작성(Title, Header, Write)

  

• Button

  

• Check Box

  • value에 인자를 넘겨주면 Default 값을 설정할 수 있음

    

• Pandas Dataframe, Markdown

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

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

  • st.table : Static한 Dataframe

    

  • Dataframe의 Max 값을 색칠할 수 있음

    

• Metric, JSON

  

• Line Chart

  

• Map Chart

  

• Chart

  • 그 외에도 Plotly Chart 등을 쉽게 사용할 수 있음

  • Chart 문서

    

• Radio Button, Select Box

  

• Multi Select Box

  

• Slider

  

• Input Box, Caption, Code, Latex

  

• Layout - Sidebar

  • Sidebar에는 파라미터를 지정하거나, 암호를 설정할 수 있음

  • st.sidebar.button(”hi”)

    • 기존 Method 앞에 sidebar를 붙이면 sidebar에 보이게 됨

      

• Layout - Columns

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

    

• Layout - Expander

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

    

• Spinner

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

    

• Ballons

  • 직접 실행해보기
  • st.ballons()

• Status Box

  

• Form

  

• File Uploader

  

• API Document

  • 더 많은 Component가 존재함
  • 문서를 확인해보면서 실행해보기

• Cheat Sheet

  • https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py

    

Data Flow

• Streamlit의 화면에서 무언가 업데이트되면 전체 Streamlit 코드가 다시 실행됨

1. Code가 수정되는 경우
2. 사용자가 Streamlit의 위젯과 상호작용하는 경우(버튼 클릭, 입력 상자에 텍스트 입력시 등)

Session State

• Streamlit의 Data Flow로 인해 매번 코드가 재실행되며 중복 이벤트를 할 수 없음

  • Global Variable처럼 서로 공유할 수 있는 변수가 필요

• Streamlit 0.84 버전에 session_state가 개발됨

• st.session_state.{session_state_value}

  • session_state_value에 저장해서 활용하는 방식

• Session State가 없다면

  • Increment 버튼을 누르면 +1, Decrement 버튼을 누르면 -1이 되는 Counter 예제

    

    • 버튼을 10번 눌러도 결과는 계속 1 또는 -1이됨

• Session State가 있다면

  

  • 코드가 재실행되도 Session State의 값은 변하지 않기 때문에 재실행해도 이전 값에 갱신할 수 있음

    

• Session State에 대해 이해가 되지 않는다면, 실제로 코드를 실행해보고 문서 읽어보기

• Session State를 사용한 예시

• st.slider가 변할 경우(on_change) Callback 함수를 사용해서 session_state 값을 유지하는 코드 만들기

• Streamlit Cache - @st.cache

  • 매번 다시 실행하는 특성 때문에 데이터도 매번 다시 읽을 수 있음

  • 이런 경우 @st.cache 데코레이터를 사용해 캐싱하면 좋음(캐싱 : 성능을 위해 메모리 등에 저장하는 행위)

  • 데이터를 읽는 함수를 만들고, 데코레이터를 적용

    

출처: 부스트캠프 AI Tech 4기(NAVER Connect Foundation)