Streamlit에 대해서 알아보자

반갑습니다.
Streamlit에 대해서 소개해보겠습니다.
저는 존재조차 모르고 있었는데, 현업의 개발자분들의 8할 이상이 사용하신다고 하더군요.
저도 제대로 배워놓아야겠습니다.

Streamlit이 뭔가요 ?

Streamlit은 프로젝트의 프로토타입을 만드는 데에 쓰는 도구입니다.
웹 페이지로서 구현되고 세세한 조정을 바꾸는 데에는 어려움이 있지만 빠르면 한시간 이내에 제작한 모델을 웹페이지로 배포할 수 있다는 장점이 있습니다.

눈여겨 보셔야 할 점은 한시간 이내에 라는 부분입니다.
저는 웹에 대해서는 잘 모르지만 빠르면 한시간 이내에 잘 동작하는 웹페이지를 만들 수 있는 기능은 대단한게 아닐까 생각합니다.

Streamlit은 Python으로 동작하며, AI 모델을 불러오고 모델의 Input, Output을 확인할 수 있습니다.

Streamlit은

pip3 install streamlit 1.36.0

로 다운받으실 수 있습니다.

Steamlit의 기능

1. 파이썬 스크립트 코드를 조금만 수정하면 기능하게 할 수 있다.
2. 백엔드 개발이나 HTTP 요청을 구현하지 않아도 됨.
3. 다양한 컴포넌트를 통해 대시보드 UI도 구성할 수 있다.
4. Streamlit Cloud도 존재해서 쉽게 배포할 수 있다.

대박 ㅎㅎ

프로토타입이 그렇게 중요한가요?

현업에 계신 전문가분께서 말씀하시길
회사에서는 본인에게 풍부한 시간을 주지 않는다고 하십니다.
다양한 아이디어와 기획이 나오고, 그 기획이 실제로 가능한지에 대해서 빠르면 일주일 안에 확인할 수 있어야 한다고 합니다.
그런 과정을 반복할 때 개발에만 한달 이상 걸리는 웹페이지를 만드는건 시간낭비 돈낭비겠죠.
반면 Streamlit은 초보자도 쉽게 이용 가능하고, 만드는 데에도 한두시간이면 뚝딱입니다.
다른 부서의 힘을 빌리지 않고 웹에 대한 기술력이 부족한 AI개발 부서 같은곳에서도 팀 내에서 만들 수 있겠죠.
회사의 관점에서 Streamlit은 아주 훌륭한 도구가 아닐까 싶습니다.

https://huggingface.co/spaces/IliaLarchenko/albumentations-demo
위의 사이트에 들어가보시면 streamlit이 어떤 형태인지 얼추 감을 잡으실 수 있다고 생각합니다.

Streamlit의 개발 흐름

Streamlit은 크게 모델링 > 설계 > 개발 > 테스트 및 배포 의 형태로 구성됩니다.
AI모델 개발 기준으로 설명해보면

모델링)

일단 Python으로 AI/ML 모델링을 하고 만족스러운 모델이 나왔다면
Python script 형태로 구성합니다.

설계)

Streamlit을 통해 뭘 할것인지 목적, 기능을 정하고 UI 레이아웃을 정의합니다.
이후 사용할 컴포넌트들을 찾아서 결정합니다.

개발)

결정한 UI 컴포넌트들을 추가합니다.
input을 받아 output을 내보낼 수 있도록 합니다.
데이터 처리, 상호작용 로직들을 개발합니다.
필요하다면 스크립트를 수정하여 Streamlit을 사용할 수 있도록 합니다.

배포)

제작된 프로토타입을 배포합니다.
배포하고 사용하는 과정에서 Use Case들을 확인하고 개발단계로 돌아가서 유지보수를 진행합니다.

이렇게 기본적으로 4가지 과정을 거쳐서 Streamlit 서비스를 개발합니다.
쓰는곳 마다 조금씩 차이가 있을 수 있겠지만, 대부분의 구성은 위와 동일합니다.

Streamlit의 사용 예시

streamlit_practice.py

import streamlit as st
st.title('Hello Streamlit')
st.write('Hello World')

와 같이 간단하게 작성을 해보고
터미널에서 streamlit run streamlit_practice.py을 쳐보시면

이런 주소가 나옵니다.
Local URL은 현재 개발중인 컴퓨터에서만 접속이 가능한 주소이고
Network URL은 동일한 네트워크에 연결된 다른 기기에서 접속 가능한 주소입니다.

Local URL로 들어가서 확인해 봅시다.

우왕 ㅎㅎ 짱이돠

Streamlit의 기능들

이제 본격적으로 Streamlit의 기능들에 대해 소개하겠습니다.

• streamlit을 실행할 때 --server.runOnSave=True 옵션을 통해 코드가 변경되면 바로바로 웹에서 볼 수 있도록 할 수 있습니다.

1. Text 작성(Title, Header, Write)

import streamlit as st
st.title('Title')
st.header('Header')
st.subheader('Subheader')
st.write('야호야호')

이렇게 다양한 크기의 텍스트를 쓸 수 있습니다.

2. 다양한 input 받기

st.text_input()
st.text_input(type = 'password')
st.number_input()
st.date_input()
st.time_input()

등의 input함수를 통해 다양한 input을 받을 수 있습니다.
number_input()함수는 숫자만 받을 수 있고 data_input(), time_input()도 지정된 형식의 입력만 받을 수 있습니다.
(다른걸 치니까 안들어가더군요.)

파일을 업로드 하고 싶은 경우,

uploaded_file = st.file_uploader('choose a file', type = ['png', 'jpg', 'jpeg'])

로 입력칸을 만들 수도 있습니다.
이미지 증강 모델의 프로토타입을 만들 때 사용할 수 있겠죠.

3. 버튼

다양한 버튼 컴포넌트들이 있습니다.

import streamlit as st
selected_item = st.radio('radio part', ('a', 'b', 'c'))

if selected_item == 'a':
	st.write('a')
elif selected_item == 'b':
	st.write('b')
elif selected_item == 'c':
	st.write('c')
	
option = st.selectbox('다음 중 귀요미는 ?',
					  ('모루카', '용가리'))
st.write('너가 고른 것은:', option)

와 같이 작성하면

처럼 옵션을 선택하거나 고를 수 있는 컴포넌트들을 추가할 수 있습니다.
모루카가 귀엽긴하죠 저도 좋아합니다.

만약 중복 선택을 허용한다면

st.multiselect('귀요미들 고르기', ('모루카','용가리','이브이'))

처럼 입력하시면 되겠습니다.

체크박스를 통해 True, False의 값을 받을 수도 있습니다.

checkbox_btn = st.checkbox('긴급탈출')
if checkbox_btn:
	st.write('삐용삐용')

checkbox_btn = st.checkbox('긴급탈출', value = False/True)

처럼 기본값을 줄 수도 있습니다.

4. Slider

주어진 범위에서 값을 선택하게 하고 싶은 경우에는 Slider을 사용할 수 있습니다.

option = st.selectbox('다음 중 귀요미는 ?',
					  ('모루카', '용가리'))
st.write('너가 고른 것은:', option)

values = st.slider('귀요미 점수', 0.0, 100.0, (50.0))
st.write('귀요미 점수 :', values)

모루카는 제가 백점 줬습니다 ㅎㅎ
만약 (50.0)에 (25.0,75.0)과 같이 한다면 slider을 통해 범위를 나타낼 수 있습니다.

5. Streamlit Form

여러 입력을 그룹화하여 한번에 제출할 수 있도록 합니다.

with st.form(key = '귀요미 소개'):
    username = st.text_input('귀요미 이름')
    password = st.text_input('비밀번호 :', type = 'password')
    st.form_submit_button('귀요미 접속')

와 같이 with로 묶어서 사용하시면 되겠습니다.

6. 데이터 보기

Streamlit에서는 DataFrame의 형태도 볼 수 있습니다.

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

st.markdown("## ====데이터 목록======")

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

st.markdown을 통해 마크다운 형태로 문자를 사용할 수 있습니다.
st.write은 문자, 숫자, df, 차트 등을 표시할 수 있습니다.
st.dataframe은 데이터프레임의 컬럼 클릭/정렬을 할 수 있습니다. (interactive)
st.table은 static하게 dataframe을 표시합니다.

st.dataframe(df.style.highlight_max(axis = 0))

를 통해 특정 행/컬럼을 강조할 수도 있겠습니다.

7. Metric

import streamlit as st
import pandas as pd
df = pd.DataFrame({
    'first_column' : [1,2,3,4],
    'seconde_column' : [10,20,30,40]
})
st.metric('평가지표', 42, 4)
st.json(df.to_json())

st.metric을 통해 지표를 표시할 수 있고 st.json을 통해 json 데이터를 표시할 수도 있습니다.

8. 다양한 차트들

Streamlit에서는 다양한 차트들을 띄울 수 있고, 웹에서 특정 부분을 확대/축소를 할 수 있습니다.

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

chart_data = pd.DataFrame(
    np.random.randn(20,3),
    columns = ['용가리', '피카츄', '이브이']
)
st.line_chart(chart_data)

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

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

와 같이 맵 좌표를 입력해주면 지도도 띄울 수 있는데, 저는 뭔가의 렉으로 웹페이지가 멈추더군요.
궁금하시다면 여러분이 직접 해보셔서 확인해보시면 좋을 것 같습니다.

이외에도
st.area_chart(df)
st.bar_chart(df)
st.line_chart(df)
st.scatter_chart(df)
등을 통해 시각화에 많이 쓰이는 plot들을 띄울 수 있습니다.
https://streamlit.io/components?category=charts
이외에도 streamlit 홈페이지에 사람들이 직접 개발한 차트들 또한 다양하게 존재하니 사용해보시면 좋을 것 같습니다.

9. Caption, Code, Latex

st.caption('caption')
st.code('a = 123')
st.latex('$ReLU = max(0,x)$')

와 같이 사용하면 개발자분들께서 많이 사용하시는 Caption, Code, Latex 등을 쓸 수 있습니다.
교육/설명용으로 Streamlit을 사용하실 때 유용하게 쓰실 수 있겠습니다.

10. Spinner

Streamlit Spinner을 통해 무언가가 진행되는 도중 메세지를 띄울 수 있습니다.
with로 감싸서 하위에 원하는 함수를 추가하면 됩니다.

with st.spinner("기다려 주세요..."):
	time.sleep(5)

이렇게 뜨는군요 ㅎㅎ
모델 등을 로딩할 때 아무것도 뜨지 않는다면 사람들이 나갈 수 있으니 spinner을 사용하는 것이 바람직하겠습니다.

11. 메세지 보내기

st.success('Success')
st.info('Info')
st.warning('Warning')
st.error('Error message')

를 통해 특정 상황이 주어질 때 메세지를 보낼 수 있습니다.

12. Sidebar

사이드바를 추가하여 왼쪽에 파라미터 / 암호 등을 넣을 수 있습니다.
앞에서 나온 Component들과 합쳐서 사용합니다.

st.sidebar.button('해위')

과 같이 st.sidebar.component를 통해 사용할 수 있습니다.

13. Columns

여러 칸으로 나눠서 components들을 추가하고 싶을 때 사용합니다.

col1,col2,col3,col4 = st.columns(4)
col1.write('야호야호')
col2.write('이얏호')
col3.write('무야호')
col4.radio('무이야앗호', ('a', 'b', 'c'))

14. Expander

클릭하면 확장되는 컴포넌트를 사용하고 싶을 때 쓸 수 있습니다.

with st.expander('나의 이름은 ..'):
	st.write('무야호무야호무야호무야호')

장난치니까 재밌네요 하하

Streamlit의 Session State

Streamlit은 화면에서 무언가 업데이트되면 전체 코드를 다시 실행하는 특성을 가지고 있습니다.
업데이트의 기준은
1) Code가 수정되는 경우
2) 사용자가 Streamlit의 컴포넌트들과 상호작용하는 경우 (버튼 클릭, 무언가에 입력)

Session State는 Global Variable처럼 공유할 수 있는 변수를 만들고 저장하는 기능을 합니다.
어떤 경우에 사용하냐면
뭔가 상태를 항상 유지하고 싶거나
로그인 상태를 유지한다던가
채팅 서비스에서 채팅 히스토리를 유지한다던가
등이 있겠습니다.

사용법은 간단합니다.

st.session_state.변수명 = 내용

으로 설정하시면 되겠습니다.

Streamlit Caching

UI가 변경될 때 모든 코드를 다시 실행하는 특성 때문에 데이터/모델이나 객체를 불러오는 코드들도 다시 실행되게 됩니다.
그러면 속도가 많이 느려지겠죠.
이런 경우를 해결하기 위해 캐싱 데코레이터를 사용할 수 있습니다.
(Caching이란 성능을 위해 데이터를 메모리에 저장하는 방법을 의미합니다.)
캐싱을 사용하면 함수 호출 결과를 Local에 저장하여 앱이 빨라지게 할 수 있습니다.

또 캐싱된 값은 모든 사용자가 사용할 수 있는데, 이 부분이 Session State와 차이점입니다.
사용자마다 다르게 접근하도록 하고싶다면 Session State에 저장하는 것이 바람직하겠습니다.

캐싱 방법은 두가지가 있습니다.
1. @st.cache_data : 데이터, API Request의 Response
2. @st.cache_resource : DB 연결, ML 모델 Load

st.cache_data
def fetch_large_dataset():
	df = pd.read_csv('https://example.com/large_dataset.csv')
   	return df

이런식으로 위에 붙이면 사용할 수 있습니다.
단순히 데이터를 불러오는 것만이 아닌 전처리 함수까지 추가해서 사용할수도 있겠습니다.

'
'
'
이로서 Streamlit에 대해서 소개할만한 것들은 대부분 한 것 같습니다.
위에 나온 컴포넌트들만 잘 활용한다면 많은 서비스를 개발할 수 있다고 생각합니다.
핵심은 컴포넌트들을 다 외우는 것이 아닌 저런게 있구나 하고 알아둔 뒤 나중에 빠르게 찾는 역량이 아닐까 싶습니다.
또, Streamlit의 장점이 빠른 구현/개발인 만큼, 프로토타입의 필요성이 있다면 빠르게 구현할 수 있도록 하는것이 중요하다고 생각합니다.

이만 마칩니다.
감사합니다 !