[Streamlit] Elements를 활용한 웹 애플리케이션 만들기

💡웹 애플리케이션 구축

---

Streamlit에서 Python 파일을 생성하고, Elements를 활용하여 웹 애플리케이션을 만들어 보도록 하자.

 

Python 파일 생성하기

VS Code에서 py 확장자로 'streamlit_app.py' 파일을 생성한다.

파일이 생성되었으므로 기본 스크립트를 입력하고, run 명령어를 통해 프로젝트를 배포할 수 있다.

 

웹 페이지 실행하기

streamlit run streamlit_app.py

터미널에 streamlit run과 실행할 Python 파일명을 명령어로 입력하면 웹 페이지가 실행된다.

현재 소스 코드를 작성하지 않은 상태이기 때문에 빈 화면이 표시된다.

Scripts\activate.bat

만약 실행되지 않는다면 가상 환경에 접속되지 않은 상태이므로 Scripts 명령어를 실행해 주도록 한다.

 

스크립트 작성하기

import streamlit as st
from PIL import Image

st.title('Hello Title')
st.header('Hello Header')
st.subheader('Hello Subheader')

#PIL 패키지에 이미지 모듈을 통해 이미지 열기
# Image.open('이미지 경로')
chromi_img = Image.open('chromi.png')

# 공간을 2:3으로 분할하여 col1, col2 컬럼 생성
col1,col2 = st.columns([2,3])

# with 구문을 사용하는 방법
with col1 :
  # column 1
  st.title('column1')
with col2 :
  # column 2
  st.title('column2')
  st.checkbox('checkbox1 in col2')

# with 구문을 사용하지 않는 방법
col1.image(chromi_img)
col2.checkbox('checkbox2 in col2') 

# 탭의 이름을 Tab A, Tab B로 표시 
tab1, tab2= st.tabs(['Tab A' , 'Tab B'])

with tab1:
  #Tab A
  st.write('Tab A')
    
with tab2:
  #Tab B
  st.write('Tab B')

#st.sidebar
st.sidebar.title('sidebar')
st.sidebar.checkbox('checkbox')
# 사이드바에 체크박스, 버튼 등 추가 가능

코드를 작성하고 저장하면 기존의 화면에 반영된다. 사진은 py 파일과 같은 폴더 내에 배치하였다.

정적 페이지뿐만 아니라 Drag Drop으로 파일을 올리고 동적으로 화면에 주는 것 또한 가능하다. 더 다양한 Elements를 표시해 보도록 하자.

 

Elements 활용하기

import streamlit as st
from PIL import Image

# 제목과 헤더
st.title('제목')
st.header('헤더')
st.subheader('부제목')

# 이미지 추가
img = Image.open("chromi.png")
st.image(img, caption='크로미', use_column_width=True)

# 텍스트 추가
st.text("안녕하세요, Streamlit!")

# 버튼
if st.button('인사하기'):
    st.write('안녕하세요!')

# 체크박스
agree = st.checkbox('동의합니다')
if agree:
    st.write('좋아요!')

# 라디오 버튼
genre = st.radio(
    "가장 좋아하는 영화 장르는 무엇인가요?",
    ('코미디', '드라마', '다큐멘터리'))

if genre == '코미디':
    st.write('코미디를 선택했습니다.')
elif genre == '드라마':
    st.write('드라마를 선택했습니다.')
else:
    st.write("다큐멘터리를 선택했습니다.")

# 셀렉트 박스
option = st.selectbox(
    '어떤 방법으로 연락을 받고 싶으신가요?',
    ('이메일', '집 전화', '휴대폰'))

st.write('선택한 것:', option)

# 멀티 셀렉트 박스
options = st.multiselect(
    '좋아하는 색깔은 무엇인가요?',
    ['초록', '노랑', '빨강', '파랑'],
    ['노랑', '빨강'])

st.write('선택한 것:', options)

# 슬라이더
age = st.slider('나이는 몇 살인가요?', 0, 130, 25)
st.write("저는 ", age, '살입니다.')

# 프로그레스 바
import time
latest_iteration = st.empty()
bar = st.progress(0)
for i in range(100):
    # 업데이트 메시지와 프로그레스 바 업데이트
    latest_iteration.text(f'진행 상황: {i+1}%')
    bar.progress(i + 1)
    time.sleep(0.1)

# 텍스트 상자
title = st.text_input('이름을 입력하세요', '여기에 입력...')
st.write('안녕하세요:', title)

# 텍스트 영역
txt = st.text_area('분석할 텍스트를 입력하세요', '''어느 때보다도 좋은 시절이었습니다. 어느 때보다도 나쁜 시절이었습니다. 지혜의 시대이자 어리석음의 시대였습니다. 믿음의 시대이자 의심의 시대였습니다. 빛의 계절이었고 어둠의 계절이었습니다. 희망의 봄이었고 절망의 겨울이었습니다.''')
st.write('입력한 내용:', txt)

# 파일 업로드
uploaded_file = st.file_uploader("파일을 선택하세요")
if uploaded_file is not None:
    # 파일을 텍스트로 읽기
    bytes_data = uploaded_file.getvalue()
    st.write(bytes_data)

# 컬럼 레이아웃
left_column, right_column = st.columns(2)
pressed = left_column.button('눌러보세요')
if pressed:
    right_column.write("우와!")

# 확장된 컬럼
expander = st.expander("자주 묻는 질문")
expander.write("여기에 아주 긴 설명을 넣을 수 있습니다...")

# 사이드바
st.sidebar.title('정보')
st.sidebar.info('이것은 Streamlit 튜토리얼입니다.')

Text, Data, Chart, Media, Chat 등의 다양한 Elements를 활용하여 웹 페이지를 생성할 수 있다.

 

https://docs.streamlit.io/

Streamlit Docs

레이아웃과 UI는 공식 홈페이지에서 가져와 사용할 수 있다.

 

참고 자료

[이론5] Streamlit으로 나만의 웹 애플리케이션 만들기, 엘리스코딩, 2024.02.08.

Python Streamlit 패키지를 이용한 대시보드 만들기, Zarathu Blog, 2023.02.01.