0. Streamlit이란?
Streamlit은 데이터 분석과 시각화를 함께 간편하게 수행할 수 있는 파이썬 오픈 소스 라이브러리이다.
간단하고 직관적인 사용자 인터페이스를 제공하여
사용자가 작업을 빠르게 구축하고 배포할 수 있도록 하며,
파이썬 코드만으로도 간단하게 앱을 구현할 수 있다는 장점을 갖는다.
또한 텍스트 입력이나 이미지 업로드를 비롯하여
데이터 시각화, 체크박스, 링크연결, 사이드바 등 다양한 기능을 자유롭게 사용할 수 있기에
누구나 쉽게 사용할 수 있는 라이브러리로 손꼽힌다.
1. Streamlit 설치
Streamlit을 사용하기 위해서는 가장 먼저 Streamlit 모듈을 설치해주어야 한다.
pip install streamlit
설치가 완료되었다면, 터미널 창에 아래의 명령어를 입력했을 때 새로운 창으로 연결된다.
streamlit hello
아래와 같은 창이 떴다면 설치까지는 완료! 👍
2. 사용방법
Streamlit을 사용하기 위해서는 코드가 담긴 파일을 '___.py' 파일로 저장해야 한다.
앱을 구현할 때 가장 유용하게 활용했던 사이트가 아래 링크이다.
Streamlit Docs
Join the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come join us on the community forum. We love to hear your questions
docs.streamlit.io
앱 내에서 사용되는 버튼이나 체크박스 등의 다양한 옵션들이 상세하게 설명되어 있으며
코드나 파라미터에 대한 설명도 구체적으로 나와있으니 적극 활용하길 추천한다.
필자는 빅데이터 분석 연합동아리 비타민(BITAmin)에서 진행한 조별 프로젝트에서
'입력한 옷과 TPO를 고려한 의류 추천'이라는 주제로 코드를 짠 뒤 streamlit으로 앱을 구현하였다.
아래는 구현한 앱의 제목 부분이다.
import streamlit as st
### INTRO ###
st.header('👚 오늘 뭐입지?! 👕')
st.markdown('💬: 🚨 **설마 너 지금.. 그렇게 입고 나가게?** 🚨')
st.markdown(' **패션센스가 2% 부족한 당신을 위해 준비했습니다!** 사진 이미지만 입력하면, 요즘 트렌디한 스타일과 여러분의 TPO를 고려하여 코디를 추천해드립니다. 무신사와 온더룩의 패셔니스타들의 코디를 지금 바로 참고해보세요! ')
st.image('./intro_img/fashionista.jpg')
st.markdown('--------------------------------------------------------------------------------------')
st.header('PROCESS')
st.image('./intro_img/process.png')
st.markdown('--------------------------------------------------------------------------------------')
제목과 마크다운, 이미지를 추가한 뒤에 앱을 실행시키면 이러한 결과가 나온다.
이로써 도입부는 그럴 듯하게 잘 꾸며진 것 같다.
이제 의류 추천을 적용할 이미지와 카테고리 등을 비롯한 내용들을 입력받도록 하겠다.
## INPUT ###
st.header(' ✅ 의류 이미지 업로드 ')
input_image = st.file_uploader(" **01. 의류 이미지를 업로드하세요. (배경이 깔끔한 사진이라면 더 좋습니다!)** ", type=['png', 'jpg', 'jpeg'])
st.markdown('--------------------------------------------------------------------------------------')
st.header(' ✅ 업로드한 의류 이미지 카테고리 선택 ')
input_cat = st.selectbox(
' **02. 귀하가 업로드한 의류 이미지의 카테고리를 골라주세요.** ',
('top', 'bottom', 'shoes', 'hat', 'sunglasses', 'scarf', 'bag', 'belt'),
index=None,
placeholder="선택하세요")
st.write('You selected:', input_cat)
st.markdown('--------------------------------------------------------------------------------------')
st.header(' ✅ 추천받고 싶은 의류 카테고리 선택 ')
output_cat = st.selectbox(
' **03. 추천받고 싶은 의류 카테고리를 선택해주세요.** ',
('top', 'bottom', 'shoes', 'hat', 'sunglasses', 'scarf', 'bag', 'belt'),
index=None,
placeholder = '선택하세요')
st.write('You selected:', output_cat)
st.write(' ')
st.write('🚫 주의: 업로드한 의류 카테고리와 다른 카테고리를 선택해주세요.')
st.markdown('--------------------------------------------------------------------------------------')
st.header(' ✅ 상황 카테고리 선택 ')
situation = st.selectbox(
' **04. 상황 카테고리를 선택해주세요.** ',
('여행', '카페', '전시회', '캠퍼스&출근', '급추위', '운동'),
index=None,
placeholder="선택하세요")
st.write('You selected:', situation)
참고로 위의 코드에서 사용된 변수 input_image, input_cat, output_cat, situation은
추후에 모델에 적용할 변수명과 동일하게 설정해준 것이다.
코드를 실행시키면 마찬가지로 아래와 같은 결과물이 나온다.
여기에 필요한 내용을 추가하거나
디자인을 좀 더 예쁘게 꾸미면 원하는 웹을 구현할 수 있을 것이다.
3. 실행방법
streamlit run app.py
실행 방법은 간단하다. 터미널에서 위의 코드를 입력해주면 해당 웹으로 자동연결 될 것이다.
여기서 유의할 점은,
앱 실행 코드를 입력하는 위치가 "해당 앱이 설치된 디렉토리"여야 한다는 점이다.
디렉토리를 이동하는 명령어 'cd'와
현 디렉토리에 속한 파일/디렉토리를 확인할 수 있는 명령어 'ls'를 사용하여 확인한 결과,
필자가 구현한 앱은 'project' 디렉토리 내에 'cloth_customization.py'라는 이름으로 저장되어 있었다.
이제 해당 디렉토리(project)에서 'streamlit run cloth_customization.py'라는 코드를 입력해주면
자동으로 해당 앱이 열릴 것이다.
4. 배포
https://docs.streamlit.io/streamlit-community-cloud/deploy-your-app
Streamlit Docs
Join the community Streamlit is more than just a way to make data apps, it's also a community of creators that share their apps and ideas and help each other make their work better. Please come join us on the community forum. We love to hear your questions
docs.streamlit.io
위 링크에 들어가면 앱을 배포하는 방식이 구체적으로 명시되어 있으니 참고 바란다.
5. 결과물
결과물은 아래와 같다.