Streamlit 알아보기 (1)

학습 목표

• Steamlit이 무엇인지 알아보고 어떻게 활용할 수 있는지 알아보겠습니다.
• 개발 환경을 설정하고 Streamlit을 설치해봅니다.
• Streamlit을 직접 실행하고 Streamlit에서 사용되는 문법에 대해 알아봅시다.
• DB 연결, 다중 페이지 생성, 앱 배포 등 Streamlit 에서 제공하는 강력한 기능들에 대해 알아봅시다.

 

01. 소개

1) Streamlit이란

• 공식 홈페이지: https://streamlit.io/

Streamlit • A faster way to build and share data apps

• Python 기반의 오픈 소스 라이브러리
• 최소한의 코드로 Data Science 및 Machine Learning Model을 시각화하고, 인터랙티브한 웹 애플리케이션을 빠르게 구축할 수 있도록 설계.
• Data Scientist들이 복잡한 웹 프레임워크를 배우거나 프론트엔드 개발에 시간을 소비하지 않고도, 자신의 분석 결과를 이해하기 쉽고 접근하기 쉬운 형태로 전달할 수 있게 해줌.

 

2) Use Case

1. 데이터 시각화 및 탐색
   • 여러 그래프를 사용해 데이터를 시각화하고, 실시간으로 데이터를 필터링하거나 정렬하여 분석 결과 탐색할 수 있음.
2. 머신 러닝 모델 데모
   • 개발한 머신 러닝 모델을 웹 애플리케이션 형태로 빠르게 전환하여, 모델의 성능을 시연하고 피드백을 받을 수 있음.
3. 대시보드 및 보고서 생성
   • 프로젝트의 진행 상황, 데이터 분석 결과, 모델의 성능 Metric 등을 실시간으로 보여주는 대시보드나 보고서를 생성할 수 있음.
4. 데이터 기반 애플리케이션 개발
   • 사용자 입력을 받아 처리하고, 그 결과를 동적으로 표시하는 데이터 기반 웹 애플리케이션을 간단한 Python 스크립트로 개발할 수 있음.

 

02. 설치

1) 개발 환경 설정

1. Python 개발 환경 Set up.
   • conda 가상 환경 생성 (`conda create -n std-b python=3.8`) 
   • 가상 환경 활성화 (`conda activate std-b`) 

1. Streamlit 설치
   • Streamlit 설치 (`pip install streamlit`) 
   • Hello 앱을 실행하여 설치 검증. (`streamlit hello`)

03. 기초

1) Streamlit 실행 방법

• Streamlit 라이브러리를 사용한 Python 코드 작성.
• 작성된 코드를 `streamlit run your_script.py`명령어로 실행
  • 또는 `python -m streamlit run your_script.py` 명령어로 실행.
• 실행하자마자 로컬 Streamlit 서버가 실행되고, 앱이 기본 웹 브라우저의 새 탭에서 열림.
• 앱은 차트, 텍스트, 위젯, 표 등을 그리는 캔버스를 의미.
• Python 코드에 작성한 내용 대로 앱에서 표현됨.
  • ex1) st.text: 일반 텍스트 표시.
  • ex2) st.line_chart: 선 그래프 표시.
• 터미널 등에서 실행했을 경우 ctrl + C 누르면 종료됨.

 

 

• 실행 방법 실습
  • 신규 폴더 생성 후 `main.py` 라는 이름의 새로운 Python 스크립트 생성.
  • `standard_b_streamlit`/ `main.py`

 

• 본인이 사용하는 IDE 또는 텍스트 편집기에서 main.py 파일을 열고 다음 줄을 추가

import streamlit as st
import pandas as pd
import numpy as np

st.title('Uber pickups in NYC')

• command line에서 Streamlit 실행
  • VScode의 터미널에서 `conda activate std-b` 입력 (설정된 인터프리터 환경에 따라 생략 가능)

• 위 이미지의 경우 가상 환경이 중첩되어 있어 deactivate 후 activate함.

• VSCode의 터미널에서 `streamlit run main.py` 또는 `python -m streamlit run main.py` 입력.

• 브라우저의 새 탭에서 자동으로 앱이 열린 것 확인.

 

2) 데이터를 표시하는 다양한 방법

(1) 가장 쉬운 방법.

• Streamlit 메서드를 호출하지 않고도 ‘df’만 입력해도 앱에 표시할 수 있음.
  • Streamlit이 자체 라인에서 변수나 리터럴 값을 볼 때마다 st.write()를 사용하여 이를 자동으로 앱에 쓰기 때문.

"""
# My first app
Here's our first attempt at using data to create a table:
"""

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

df # st.write(df) 와 동일하게 작동함.

 

• 코드 변경 후 브라우저 새로고침 실행.

(2) Data Frame 쓰기

• 텍스트, 데이터, Matplotlib 등 거의 모든 것을 st.write()에 전달할 수 있음.
• Streamlit이 이를 파악하고 올바른 방식으로 렌더링. 

import streamlit as st
import pandas as pd

st.write("Here's our first attempt at using data to create a table:")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

• st.write()대신 st.dataframe(), st.table()을 이용해 Data Frame 을 원하는대로 표시할 수 있음.

st.dataframe(df)  # 대화형 테이블
st.table(df)  # 정적 테이블

(3) 차트와 지도 그리기

• Line chart

import streamlit as st
import numpy as np
import pandas as pd

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

st.line_chart(chart_data)

 

• 지도 (샘플 데이터 생성 후 강남 지도 그리기)

import streamlit as st
import numpy as np
import pandas as pd

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.514575, 127.0495556],
    columns=['lat', 'lon'])

st.map(map_data)

 

(4) 위젯

• 데이터나 모델을 탐색하려는 상태로 설정한 경우 즉, 사용자의 입력을 받을 경우 st.slider(), st.button(), st.selectbox() 같은 위젯 추가 가능.

    - 슬라이드바

import streamlit as st
x = st.slider('x')  # 👈 this is a widget
st.write(x, 'squared is', x * x)

• 처음 실행 시 위 앱은 "0 squared is 0"이라는 텍스트 표시.
• 사용자가 위젯과 상호 작용할 때마다 Streamlit은 단순히 스크립트를 위에서 아래로 다시 실행하여 위젯의 현재 상태를 프로세스의 변수에 할당.
• 예를 들어, 사용자가 슬라이더를 위치 10으로 이동하면 Streamlit은 위의 코드를 다시 실행하고 이에 따라 x를 10으로 설정.
• 앱 화면도 "10 squared is 100"이라는 텍스트 변경됨.

(5) 체크박스를 사용하여 데이터 표시/숨기기

• 체크박스를 이용해 앱에서 특정 차트나 섹션을 숨기거나 표시할 수 있음.
• st.checkbox()위젯 사용.
• checkbox에 check가 되어 있을 때는 조건문 실행, check가 해제되어 있을 때는 조건문 실행하지 않음.

import streamlit as st
import numpy as np
import pandas as pd

if st.checkbox('Show dataframe'):
    chart_data = pd.DataFrame(
       np.random.randn(20, 3),
       columns=['a', 'b', 'c'])

    chart_data

 

(6) option을 위해 select box 사용

• 선택지 안에서 선택하게 하려면 st.selectbox 사용.

import streamlit as st
import pandas as pd

option = st.selectbox(
    'Which number do you like best?',
     [1, 2, 3, 4, 5])

'You selected: ', option

        
(7) Layout

• `st.sidebar`를 사용하여 왼쪽 패널 사이드바에서 위젯을 쉽게 구성할 수 있음.
• `st.sidebar`에 전달된 각 요소는 왼쪽에 고정되어 사용자가 UI 컨트롤에 계속 액세스하면서 앱 콘텐츠에 집중할 수 있음.
• 예를 들어, 사이드바에 select box와 slider를 추가하려면 `st.slider` 및 `st.selectbox` 대신 `st.sidebar.slider` 및 `st.sidebar.selectbox` 사용.

import streamlit as st

# Add a selectbox to the sidebar:
add_selectbox = st.sidebar.selectbox(
    'How would you like to be contacted?',
    ('Email', 'Home phone', 'Mobile phone')
)

# Add a slider to the sidebar:
add_slider = st.sidebar.slider(
    'Select a range of values',
    0.0, 100.0, (25.0, 75.0)
)

• `st.columns`를 사용하면 위젯을 나란히 배치할 수 있음.

import streamlit as st

left_column, right_column = st.columns(2)
# You can use a column just like st.sidebar:
left_column.button('Press me!')

# Or even better, call Streamlit functions inside a "with" block:
with right_column:
    chosen = st.radio(
        'Sorting hat',
        ("Gryffindor", "Ravenclaw", "Hufflepuff", "Slytherin"))
    st.write(f"You are in {chosen} house!")