30 Days of Streamlit

부트캠프에서 간단하게 사용해봤던 Streamlit을 업무 중 쓸 일이 있어 찾아 보았는데, 30 Days of Streamlit이라는 Challenge가 있다는 것을 알게 되었다. 정말 재밌을 것 같아 안 해볼 수가 없었다.

https://blog.streamlit.io/30-days-of-streamlit/

30 Days of Streamlit

 

 

DAY 1: Setting up a local development environment

Conda로 가상환경을 설정했다. 가상환경은 venv로 설정하는 것을 선호하지만, 30 Days of Streamlit에 참가한만큼, 지시하는 그대로 따라했다. 한 가지 재밌었던 점은 "streamlit hello"라고 입력하니 데모 예시 사이트가 팝업되었다는 점이다. Animation Demo, Plotting Demo, Mapping Demo, DataFrame Demo를 볼 수 있었다. 어떻게 Streamlit에 대해 더 배울 수 있는지도 알려주었다.

 

 

DAY 2: Building your first Streamlit app

첫 시작에는 "Hello, World!" 한 번 입력해주는 게 맞다. st.write라는 함수를 배웠다.

 

 

DAY3: st.button

st.button을 배웠다. if ~ else문을 활용해 버튼 클릭 시 동작을 설정할 수 있었다. st.header로 제목을 설정할 수 있었다.

 

 

DAY4: Building Streamlit apps with Ken Jee

Ken Jee의 동영상을 보고 Streamlit에 대해 배우는 시간이다. 난도가 낮지 않아 추후 진행하겠다.

 

(5/23) DAY25까지 마치고, 나만의 voting_page를 만들고 DAY4로 돌아왔다. Ken Jee의 코드에서 많은 것들을 배울 수 있었다.

1. load_data() 함수를 만든 후, @st.cache_data 데코레이터를 덮었다. 'script rerun'마다 로딩시간이 짧을 것으로 예상된다.

2. st.sidebar.selectbox와 if문을 결합해 multipage 기능을 추가했다.

3. st.metric이라는 기능을 활용하여 변수를 아래와 같이 예쁘게 표시했다. 증감율을 표현할 수 있는 파라미터 delta가 자료를 풍부하게 보이게 만들어준다.

4. df.style과 .format을 활용하여 DataFrame을 아래와 같이 예쁘게 표시했다. Table Visualization에 대해 처음 배웠다. https://pandas.pydata.org/docs/user_guide/style.html

5. st.selectbox를 활용하여 선택된 비디오에 대한 정보만 보여주었다.

6. plotly_chart, plotly.graph_objects.Figure.add_trace, plotly.graph_objects.Scatter 등 plotly를 활용하여 그래프를 그렸다.

다음 번에 streamlit을 사용할 때 1-6번을 유용하게 활용할 수 있을 것이다. 다만, plotly는 따로 공부할 시간이 필요해 보인다. 다음 시각화 과제에서는 plotly를 사용해보자.

 

 

DAY5: st.write

st.write으로 무엇을 작성할 수 있는지 자세히 배웠다. text, numbers, DataFrame, chart를 보여줄 수 있으며, multiple arguments를 받을 수도 있다. text를 보여주기 위해 st.markdown, st.header, st.subheader, st.caption, st.text, st.latext, st.code를 사용할 수도 있다. 상황에 맞춰 적절한 함수를 가져다 쓰자.

 

 

DAY6: Uploading your Streamlit app to GitHub

https://github.com/Minwoo0206/30_Days_of_Streamlit

GitHub - Minwoo0206/30_Days_of_Streamlit: 30 Days of Streamlit Challenge!

 

 

DAY7: Deploying your Streamlit app with Streamlit Community Cloud

streamlit community cloud에 가입하고 Github과 연동한 후, DAY5 내용을 배포해보았다. Public으로 배포하는 데는 제한이 없지만 Private으로는 1개의 app만 배포할 수 있다고 한다. 공개로 올리더라도 비번을 설정해 놓을 수는 없을까?

 

 

DAY8: st.slider

st.slider를 배웠다. st.select_slider도 추가적으로 학습했다. 사용자가 값을 설정하는 'interactive interface'라니! 아, st.button도 어떻게 보면 'interactive interface'구나 :) 

 

 

DAY9: st.line_chart

DAY10: st.selectbox

DAY11: st.multiselect

DAY12: st.checkbox

st.line_chart, st.selectbox, st.multiselect, st.checkbox를 배웠다. DAY11의 st.multiselect는 예시코드가 잘못 작성된 것 같다.

options = st.multiselect(
     'What are your favorite colors',
     ['Green', 'Yellow', 'Red', 'Blue'],
     ['Yellow', 'Red'])

해당 코드 마지막 줄인 ['Yellow', 'Red']는 있든 없든 코드가 동일하게 작동하는데 왜 있는지 모르겠다.

 

 

DAY13: Spin up a cloud development environment (ft. GitPod)

GitPod를 가입하고 사용해보았다. 노트북을 가지고 나오지 않았는데 갑자기 PC방에서 코딩을 해야 할 때 난처한 경우가 종종 있었다. 앞으로는 다만 GitPod에 로그인할 것이다. GitPod는 온라인으로 필요한 가상환경을 구축해주어 언제 어디서든지 바로 코딩할 수 있게 도와주기 때문이다. GitPod의 설립 취지는 다음과 같다. 

 

Gitpod was founded because we were frustrated by manually setting up and maintaining dev environments.

We are building Gitpod in the open to easily spin-up fresh dev environments for any task. Those ephemeral environments are fast & powerful, fully automated & initialized. They empower developers to immediately start coding, debugging, and testing their code.

Only then developers are always ready-to-code.

 

 

DAY14: Streamlit Components

streamlit에서 공식적으로 제공하는 함수 이외에, 사용자가 만들고 제공하는 수많은 컴포넌트에 접근할 수 있다는 게 Streamlit의 큰 장점이다. 아래 두 사이트에서 수많은 컴포넌트를 확인하고 사용할 수 있다. NLU(Natural Language Understanding)까지 있는 것을 보고 적잖이 놀랐다.

https://streamlit.io/components

https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634

 

 

DAY15: st.latex

st.latex 함수로 latex 문법을 사용할 수 있다. 블로그에 수학 수식을 올릴 때, latex를 종종 사용하곤 했는데, streamlit에서도 동일한 방식으로 사용 가능하다.

 

 

DAY16: Theming

.streamlit/config.toml 파일에 주색, 배경색, 텍스트색 등을 지정할 수 있다. 자세한 설정값은 아래 사이트를 참고하면 된다.

https://docs.streamlit.io/develop/concepts/configuration/theming

https://htmlcolorcodes.com/

 

 

DAY17: st.secrets

미리 .streamlit/secrets.toml 파일에 저장해놓거나, Streamlit Community Cloud에서 deploy setting에 저장해놓은 값을 st.secrets 함수를 통해 가져올 수 있다. API Key처럼 드러나서는 안 되는 정보를 호스트 리포지터리에서 직접 보관하는 것이 위험하기 때문에 이런 방법을 사용한다.

 

 

DAY18: st.file_uploader

st.file_uploader를 배웠다. 200MB 크기의 파일까지 올릴 수 있다! 심지어 더 큰 파일을 원한다면 환경설정을 바꾸면 된다.

 

 

DAY19: How to layout your Streamlit app

st.set_page_config(layout="wide"), st.sidebar, st.expander, st.columns를 배웠다. 해당 함수들을 활용하면 거대한 정보를 보기 쉽게 나열할 수 있을 것이다. 특히, st.columns는 여러 대상을 비교해서 보여줄 때 유용할 듯하다. 더 보기 좋게 표현하고 싶다면 다음 링크를 참고하자. https://docs.streamlit.io/develop/api-reference/layout

 

 

DAY20: Tech Twitter Space on What is Streamlit?

소통을 위해 트위터에 가입했다. Streamlit Discussion에 참가하라고 했는데, 해당 사이트는 사라진 듯했다. Francesco Ciulla라는 분을 Follow했다. 3년 전에는 면접에서 SQL 명령어를 기억해내지 못해 떨어졌는데, 지금은 나사와 관련된 일을 하고 있다는 트윗이 가장 인상 깊었다. 나도 점점 더 중요한 역할을 맡을 수 있을까?

 

 

DAY21: st.progress

얼마나 진행되었는지 보여주는 프로그래스 바를 생성한다. 대기시간이 긴 작업을 하게 될 경우 필요해 보인다.

 

 

DAY22: st.form

특별한 기능을 가지고 있는 줄 알았지만.... 사실은 지금까지 배운 다른 기능으로도 동일하게 구현할 수 있다. 깔끔한 설문형태를 제공받을 수 있다. with st.form('form name'): 으로 작성한다.

 

 

DAY23: st.experimental_get_query_params

URL에서 query parameters를 받을 수 있게 해준다. URL 끝 부분에 ?firstname=Minwoo를 입력하면 Minwoo라는 값을 받아서 쓸 수 있는 것이다. st.experimental_get_query_params는 더 이상 사용하지 않고(deprecated), st.query_params를 사용한다.

 

 

DAY24: st.cache

streamlit은 변경사항이 있을 때마다, 모든 코드를 재실행한다. 따라서, caching을 활용한다면 더 빠르게 동작하게 만들 수 있다. st.cache는 더 이상 사용하지 않고(deprecated), st.cache_data와 st.cache_resource로 나눠서 사용한다. st.cache_data는 computation, DataFrame, NumPy array, API 등에 사용하고, st.cache_resource는 ML 모델이나 DB connections 등에 사용한다. 함수 앞에 데코레이션 형태로 붙여서 사용한다.

 

 

DAY25: st.session_state

st.session_state는 다른 위젯과 key로 연동해 사용할 수 있으며 마치 파이썬의 dictionary와 같아 사용하기 익숙하다. st.session_state를 활용하면 stateful app을 만들 수 있다. 즉, 사용자가 사이트와 상호작용할 때마다 발생하는 'script rerun'에도 불구하고 초기화되지 않고 유지 및 변환되는 변수를 제공한다. 아직 30 Days of Streamlit Challenge를 다 끝마치기 전에 streamlit을 활용해 만들어야 하는 사이트가 있었는데, 지금 다시 만든다면 st.session_state가 프로그램의 전체 구조를 통제하도록 코딩할 것 같다.

 

 

DAY26: How to use API by building the Bored API app

Bored API는 인터넷 주소에 dictionary 값이 저장되어 있는 형태를 띠는데, 이 값을 가져와서 Bored API app을 만들었다. 새로운 함수로 st.metric이 등장했는데, 이미 Day4에서 배워서 알고 있었다. 

 

 

DAY27: Build a draggable and resizable dashboard with Streamlit Elements

streamlit-elements를 설치한다. streamlit-elements에 대해 더 자세히 알고 싶다면 다음 링크를 참고하자. https://github.com/okld/streamlit-elements#getting-started 상당히 복잡하지만 주요 내용은 다음과 같다.

1. elements를 이용하여 contents를 담을 frame을 만든다.

2. frame 안에 draggable & resizable dashboard를 만든다.

3. editor를 활용하여 dashboard 내부 내용을 수정하고 저장할 수 있다.

4. nivo를 활용하여 nivo chart를 보여줄 수 있다. nivo chart를 만들고 싶다면 https://nivo.rocks/bump/에서 데이터와 코드를 가져와서 활용하자.

5. media를 활용하여 미디어 플레이어를 실행할 수 있다.

프론트엔드 내용(HTML, CSS)이 약간 가미되어 있기 때문에 내 프로그램에 실제로 적용하려면 각 사이트를 방문하고 상세 내용을 확인할 필요가 있어 보인다.

 

 

DAY28: streamlit-shap

모듈 SHAP(SHapley Additive exPlanations)을 streamlit에서 보여주기 위한 컴포넌트이다. 그런데 동작을 안 한다. streamlit challenge 업데이트좀 해줘요.... streamlit_shap이 아마 다음 코드를 함수화한 것 같다.

def st_shap(plot, height=None):
    shap_html = f"<head>{shap.getjs()}</head><body>{plot.html()}</body>"
    components.html(shap_html, height=height)

그런데 오류가 해결이 안 된다. SHAP 함수의 반환값이 바뀐 것 아닐까 추측해본다. matplotlib.pyplot과 st.pyplot을 활용해서 shap.plots는 내보이기는 했지만, shap.force_plot은 내보일 수 없었다. SHAP 자체는 추후 AI 모델의 결과값에 대한 상세설명이 필요할 때 다시 찾아볼 가치가 있어 보인다. https://github.com/shap/shap

 

 

DAY29: How to make a zero-shot learning text classifier using Hugging Face and Streamlit

드디어 가장 가고 싶었던 장소에 도달했다. 사실 내가 만든 두 종류의 sentiment-classifier models를 웹에 띄우고 싶다는 동기에서 streamlit challenge를 시작했었다. Charly Wargnier의 블로그를 참조해보자. https://www.charlywargnier.com/post/how-to-create-a-zero-shot-learning-text-classifier-using-hugging-face-and-streamlit

 

쉽지 않은 난도였다. 새롭게 배운 내용을 정리해보겠다.

 

1. 다음 코드를 사용해 페이지 상단 제목을 수정할 수 있었다. st.set_page_config(layout=layout, page_title="Zero-Shot Text Classifier", page_icon="🤗")
2. 다중컬럼의 크기를 조정할 수 있었다. c1, c2 = st.columns([0.4, 2])
3. streamlit_tags의 st_tags를 이용하여 사용자가 직접 입력할 수 있는 다중 선택 박스를 구현할 수 있었다.
4. list(filter(None, List))를 활용하여 빈 요소를 제거할 수 있었다(ex. "").
5. requests.post를 활용하여 간단하게 입력값을 모델에 넣고 출력값을 받아올 수 있었다.
6. st.checkbox에서 key="widen"으로 설정했을 때 특수한 효과를 내는 것을 확인했다.
7. AgGrid를 활용하여 DataFrame을 심미적 및 기능적으로 우수하게 나타냈다.
8. keyboard_to_url 스크립트를 통해 단축키만 눌러도 특정 페이지가 팝업되게 설정할 수 있었다.

그러나 제작된 페이지에서 다음과 같은 점이 아쉬웠다.

 

1. 사이트 제작자의 API KEY를 활용하는 페이지와 자신만의 API KEY를 사용하는 페이지의 데이터가 연동되는데 따로 관리하는 것이 더 낫지 않을까?
2. 자신만의 API KEY를 활용할 경우 MAX_LINES_FULL = 50으로 고정되는데 사용자가 사이트에서 변경할 수 있어야 한다.
3. 단축키를 통해 URL로 이동하는 기능이 굳이 필요한지 모르겠다. 

곧, 나만의 sentiment-analysis 모델을 배포하는 작업을 할 것이다. 오늘 배운 내용을 잘 활용해야겠다.

 

 

DAY30: The Art of Creating Streamlit Apps

드디어 마지막 날이다. DAY29에 비하면 DAY30은 너무나 쉽고도 쉬웠다. 유투브 URL을 입력하면 유투브 썸네일을 띄우는 웹을 제작했다. DAY1을 커밋한 게 2주 전이다. 거의 매일 꾸준히 챌린지에 참여했더니 이젠 내가 원하는 웹을 충분히 제작할 수 있다는 자신감이 생겼다. 그러나 한편으로는, streamlit이 가지고 있는 컴포넌트가 방대하다보니, 아직 내가 모르고 배워야 할 기능도 굉장히 많을 것 같다. 그래도 어디서 정보를 찾아야하고, 어떻게 배우고 적용해야 하는지는 알고 있으니 안심이 된다. 어디서 그런 말을 들었다. '완벽'보다 '끝마침'이 더 중요하다고. 시작한 것들을 마무리할 수 있는 24년 2분기가 되면 좋겠다.