(Python) Streamlit 기본

Streamlit

Streamlit은 데이터 애플리케이션을 빠르고 쉽게 만들 수 있도록 설계된 파이썬 기반의 오픈 소스 라이브러리입니다. 이 도구는 데이터 시각화와 머신 러닝 모델의 프로토타이핑 및 배포를 단순화하여 사용자가 복잡한 데이터 작업을 쉽게 수행할 수 있게 합니다.

Streamlit의 특징

1. 코드 중심의 접근 방식: Streamlit 애플리케이션은 순수 파이썬 코드로 작성되므로 별도의 웹 프론트엔드 기술 없이도 데이터 앱을 만들 수 있습니다.
2. 간편한 사용법: 몇 줄의 코드만으로도 인터랙티브한 요소(슬라이더, 버튼, 차트 등)를 추가할 수 있으며, 앱의 업데이트와 실행이 매우 빠릅니다.
3. 빠른 프로토타이핑: 데이터 과학 프로젝트의 초기 아이디어를 빠르게 시각화하고 공유할 수 있어 프로토타이핑과 반복 개발 과정이 용이합니다.
4. 확장성: Streamlit 앱은 컨테이너화하여 쉽게 배포할 수 있고, 다양한 데이터 소스와 라이브러리를 지원합니다.

장점

1. 빠른 개발 속도: 복잡한 웹 앱을 빠르게 개발할 수 있으며, 데이터 과학자가 웹 개발에 대한 깊은 지식 없이도 사용할 수 있습니다.
2. 쉬운 배포: Streamlit Sharing을 통해 GitHub에서 직접 앱을 호스팅하고 공유할 수 있습니다.
3. 강력한 커뮤니티 지원: 오픈 소스 프로젝트로서 활발한 커뮤니티 지원과 지속적인 업데이트가 이루어집니다.
4. 인터랙티비티: 사용자 입력에 반응하는 동적인 데이터 애플리케이션을 쉽게 만들 수 있습니다.

단점

1. 고급 사용자 정의 제한: Streamlit은 사용의 용이성에 중점을 두기 때문에, 복잡한 사용자 인터페이스나 고도로 맞춤화된 앱 디자인을 구현하기 어려울 수 있습니다.
2. 성능 문제: 대규모 데이터셋이나 복잡한 연산을 처리하는 앱의 경우, 성능 저하가 발생할 수 있습니다.
3. 웹 개발 기능의 제한: 전통적인 웹 개발 툴셋에 비해 제공하는 웹 개발 기능이 제한적일 수 있습니다. 복잡한 웹 애플리케이션을 구축하려는 경우 다른 프레임워크를 고려해야 할 수도 있습니다.

Streamlit App 실행하기

# streamlit 라이브러리설치
pip install streamlit

# Streamlit으로 실행
streamlit run your_script.py

# Python 모듈로 실행 → Python으로 실행하는 경우, PyCharm과 같은 IDE를 구성할 때 유용할 수 있습니다.
python -m streamlit run your_script.py 

Data 표시방법

Streamlit에서 Data (tables, arrays, data frames 등)를 표시하는 방법은 magic CLI 와 st.write() 를 활용하는 방법이 있다.
st.write()는 텍스트에서 테이블까지 다 작성이 가능하다.

① magic command line

Streamlit은 변수나 데이터가 선언되어 있으면 자동으로 st.write()를 사용하여 앱을 빌드 합니다.

###
# first app
# DataFrame 으로 테이블을 생성
###

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()

st.write()는 텍스트, 데이터, 차트 등 arguments 에 따라 작성 할 수 있다.

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.dataframe() 및 st.table()과 같은 함수를 사용하여 다양한 style을 적용 할 수 있다.

DataFrame에 Style 적용하기

① DataFrame에 Highligt 적용

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

df = pd.DataFrame(
    np.random.randn(10, 20),    # 표준 정규분포 확률을 따르는 난수를 생성
    columns = ('col %d' % i for i in range(20))
)

# 열의 최대값에 하이라이트 표시
st.dataframe(df.style.highlight_max(axis=0))

(결과)

② 정적 테이블 생성 : st.table()

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

df = pd.DataFrame(
    np.random.randn(10, 20),    # 표준 정규분포 확률을 따르는 난수를 생성
    columns = ('col %d' % i for i in range(20))
)

st.table(df)

③ 라인 차트 그리기 : st.line_chart()

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

df = pd.DataFrame(
    np.random.randn(20, 3),    # 표준 정규분포 확률을 따르는 난수를 생성
    columns = ['a', 'b', 'c']
)

st.line_chart(df)

(결과)

⓸ 지도 그리기 : st.map()

Numpy를 사용하여 샘플 데이터를 생성하고 샌프란시스코 지도에 그려보겠습니다.

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

df = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon']
)

st.map(df)

(결과)

⑤ Widgets

st.slider(), st.button() , st.selectbox() 와 같이 위젯을 추가하여 표현할 수있다.

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

st.markdown("### 1. slider widget")
x = st.slider('x')
st.write(x, '제곱은', x * x)


st.markdown("### 2. text input widget")
st.text_input("Your name", key="name")

# You can access the value at any point with:
st.session_state.name

st.markdown("### 3. checkbox widget")
if st.checkbox('Once you checked, dataframe is displyed'):
    chart_data = pd.DataFrame(
       np.random.randn(20, 3),
       columns=['a', 'b', 'c'])

    chart_data

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

option = st.selectbox(
    'Which number do you like best?',
     df['first column'])

'You selected: ', option

⓺ Layout

• st.sidebar : 왼쪽 패널 사이드바
• st.columns : 위젯을 나란히 구성
• st.expander : 컨텐츠 숨김
• st.progress : 상태 표시

import streamlit as st
import time

# 사이드바에 selctbox 구성하기
add_selectbox = st.sidebar.selectbox(
    'How would you like to be contacted?',
    ('Email', 'Home phone', 'Mobile phone')
)

# 사이드바에 slide 구성하기
add_slider = st.sidebar.slider(
    'Select a range of values',
    0.0, 100.0, (25.0, 75.0)
)

# 위젯을 나란히 배치하기
left_column, right_column = st.columns(2)
left_column.title('Left Column')
left_column.button('Press me')

right_column.title('Right Column')
with right_column:
    chosen = st.radio(
        'Sorting hat',
        ("Gryffindor", "Ravenclaw", "Hufflepuff", "Slytherin")
    )
    st.write(f"You are in {chosen} house!")

# Progress Bar
st.title('Progress Bar')
'Starting a long computation...'
latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
    latest_iteration.text(f'Iteration {i+1}')
    bar.progress(i+1)
    time.sleep(0.1)

'...and now we\'re done!'

멀티페이지 App 만들기

Streamlit 1.10 이상 부터는 멀티 페이지를 구성할 수 있습니다.

서브페이지 구성 제약

• Sub 페이지의 기본 구성은 pages 디렉토리에 위치해야 합니다.
• 각 Streamlit 앱의 이름은 파일 이름에 따라 결정되므로 앱 이름을 변경하려면 파일 이름을 변경해야 합니다. (이모티콘 추가도 가능)
• 각 Python 파일의 시작 부분에 숫자를 추가하여 페이지 순서를 지정할 수 있습니다. 파일 이름 앞에 1을 추가하면 Streamlit은 해당 파일을 목록의 첫 번째로 배치합니다.
• 각 페이지에는 파일 이름으로 정의된 고유한 URL이 있습니다.

멀티페이지 구성

멀티페이지는 메인이 되는 Home.py 와 내부의 1_page_one.py, 2_Page_two.py, 3_🥉_three.py 3개의 서브페이지로 이동 되도록 구성합니다.

페이스 구성 소스트리

Home.py     # "streamlit run"으로 실행할 메인 파일
└─── pages/
    └─── 1_page_one.py 
    └─── 2_Page_two.py 
    └─── 3_🥉_three.py

① 기본 사이드바 탐색 숨기기

파일명을 기준으로 사이드바 메뉴를 별도 이름으로 지정할 수 있도록 변경합니다.
사용자 정의 탐색 메뉴를 생성할 때 를 사용하여 기본 사이드바 탐색을 숨겨야 합니다. 소스코드 루트 .streamlit/config.toml작업 디렉터리에 다음 파일을 추가합니다 .

[client]
showSidebarNavigation = false

② 사이드 바 메뉴 구성하기

메뉴트리 구성을 위해서는 각 Page 별로 메뉴를 동일하게 구성합니다.

# 공통 사이드바
st.sidebar.page_link("home.py", label="Home")
st.sidebar.page_link("pages/1_page_one.py", label="🥇 Page One")
st.sidebar.page_link("pages/2_Page_two.py", label="🥈 Page Two")
st.sidebar.page_link("pages/3_🥉_three.py", label="🥉 Page Three")
st.sidebar.markdown("---")

(결과)

---

Reference

• https://docs.streamlit.io/get-started/fundamentals/main-concepts
• https://docs.streamlit.io/get-started/tutorials/create-a-multipage-ap