[Streamlit] 위젯 사용하기(streamlit 모든 위젯 모음)

지난 포스팅에서는 streamlit이 무엇인지 알아보았는데요. 오늘은 streamlit의 위젯들을 한번씩 만들어보겠습니다. 

 

그럼 오늘 배워볼 위젯 종류에는 어떤 것이 있는지 간단하게 정리해보고 사용 방법들을 설명드리겠습니다. 

• 버튼(button)
• 다운로드 버튼(download)
• 체크박스(checkbox)
• 라디오(radio)
• 셀렉트박스(selectbox)
• 멀티셀렉트(multiselect)
• 슬라이더(slider)
• 셀렉트 슬라이더(select slider)
• 텍스트입력(text input)
• 숫자 입력(number input)
• 텍스트 영역(text area)
• 날짜 입력(date input)
• 시간 입력(time input)
• 파일 업로더(file uploader)
• 색깔 선택(color picker)

파일 기본세팅 방법

먼저 이 모든 예제를 시작하기전에 파일 기본 세팅 방법을 알려드리겠습니다. 

어려울 건 없고, import streamlit을 해주시면 됩니다. 

 

실행 방법은 정말 간단합니다.

예를 들어 제가 run.py라는 파일을 만들었다고 하면 아래와 같이 실행시켜주시면 됩니다. 

streamlit run run.py

또한 혹시 외부 서버를 열려고 하시는 분은 아래와 같이 설정해주시면 됩니다. 

streamlit run run.py --server.address YOUR_SERVER_IP --server.port 80

 

버튼(button)

버튼은 button으로 바로 사용이 가능합니다. 여기서 write는 print와 같습니다. 

import streamlit as st

if st.button('버튼이당'):
    st.write('눌렸당')
else:
    st.write('아직이당')

st.button으로 버튼 자체가 생성이 되고, 클릭할 경우 True가 됩니다. 

따라서 위의 코드를 바로 실행하면 아래와 같은 화면이 뜹니다. 

버튼을 누를 경우 아래와 같이 멘트가 바뀌는 것을 확인할 수 있습니다. 

 

다운로드 버튼(download)

다운로드 버튼은 말 그대로 클릭시 데이터를 다운로드 받을 수 있는 버튼입니다. 

데이터의 종류는 4가지 정도 되며 코드는 아래와 같습니다. 

import streamlit as st
import pandas as pd

## csv or tsv data
df = pd.DataFrame([["토깽이",16],["냥냥이",10]],columns=['이름','나이'])

def convert_df(df):
    # IMPORTANT: Cache the conversion to prevent computation on every rerun
    return df.to_csv().encode('utf-8')

csv = convert_df(df)

st.download_button(
    label="CSV 파일 다운받기",
    data=csv,
    file_name='sample_df.csv',
    mime='text/csv',
)


## text file
text = "컴공누나입니다."
st.download_button('텍스트 파일 다운받기',text)


## binary file
binary_text = b'컴공누나입니다.'
st.download_button('바이너리 파일 다운받기',binary_text)


## image file
with open("test.png",'rb') as file:
    btn = st.download_button(
        label="이미지 파일 다운받기",
        data=file,
        file_name="test.png",
        mime='image/png'
    )

자 이제 실행시켜보면 아래와 같이 네 개의 버튼이 뜨는데요. 

각각 다운받으면 아래와 같습니다. 

여기는 csv, text파일예시만 넣었습니다. 

 

체크박스(checkbox)

다음으로 체크박스입니다. 체크 박스는 여러개 있을 경우 다중 선택이 가능합니다.

import streamlit as st

check = st.checkbox('Check or Not')

if check:
    st.write('Check!!!')
else:
    st.write('Not!!!')

실행을 시켜 보면 아래와 같습니다. 

버튼과 마찬가지로 체크할 경우 텍스트가 동적으로 바뀝니다. 

 

라디오(radio)

라디오 버튼은 체크 박스와는 다르게 1가지만 선택 가능합니다. 

import streamlit as st

animal = st.radio(
    "좋아하는 동물을 선택해주세요.",
    ('고양이', '강아지', '토끼'))

if animal == '고양이':
    st.write('야옹야옹')
elif animal == '강아지':
    st.write("멍멍")
else:
    st.write("깡총~~")

실행해보면 아래와 같습니다. 

다른 동물을 선택할 때에 텍스트가 동적으로 바뀌는 것을 확인할 수 있습니다. 

 

셀렉트박스(selectbox)

셀렉트박스는 특정리스트의 값을 드롭다운해서 선택하는 위젯입니다. 

import streamlit as st

animal = st.selectbox(
    '좋아하는 동물을 선택해주세요.',
    ('고양이', '강아지', '토끼'))

st.write('당신이 좋아하는 동물은 :', animal)

이제 출력해 보겠습니다. 

셀렉트박스를 클릭하면 아래와 같이 리스트들이 뜹니다. 여기서 선택을 해주시면 됩니다. 

또는 직접 검색도 가능합니다. 

 

멀티셀렉트(multiselect)

말 그대로 여러개의 아이템을 선택 가능합니다. 

import streamlit as st

animal = st.multiselect(
    '좋아하는 동물을 선택해주세요.',
    ('고양이', '강아지', '토끼'))

st.write('당신이 좋아하는 동물은 :', animal)

실행해 보겠습니다. 



여기서 모든 동물을 선택해보도록 하죠.

 

이렇게 모든 동물들이 선택된 것을 확인할 수 있습니다.

 

슬라이더(slider)

슬라이더에도 종류가 여러가지 있는데요. 

먼저 특정 정수를 선택할 수 있는 방법, 범위 내에서 실수를 선택할 수 있는 방법, 시간을 선택할 수 있는 방법, 날짜를 선택할 수 있는 방법입니다. 

import streamlit as st
from datetime import datetime
from datetime import time


## 정수
age = st.slider('몇살인가요?', 0, 130, 25)
st.write(age, '살 입니다.')


## 실수
values = st.slider(
    '값을 선택해주세요.',
    0.0, 100.0, (25.0, 75.0))
st.write('값 : ', values)


## 시간
appointment = st.slider(
     "몇시에 일어났나요?",
    value=(time(9, 30), time(12, 45)))
st.write("일어난 시간 :", appointment)


## 날짜
start_time = st.slider(
    "기분이 좋았던 날은 언제인가요?",
    value=datetime(2023, 6, 16, 9, 30),
    format="MM/DD/YY - hh:mm")
st.write("날짜 :", start_time)

출력 값은 아래와 같습니다. 

 

셀렉트 슬라이더(select slider)

셀렉트 슬라이더는 특정 카테고리 내에 있는 아이템들만 선택할 수 있게 하는 방법입니다. 

하나만 선택할 수도 있고, 범위 설정을 할 수도 있습니다. 

import streamlit as st

## 특정 컬러 선택
color = st.select_slider(
    '컬러를 선택해주세요.',
    options=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])
st.write('선택한 컬러 : ', color)


## 범위 선택
start_color, end_color = st.select_slider(
    '컬러를 선택해주세요.',
    options=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
    value=('red', 'blue'))
st.write('선택한 색상 범위 : ', start_color, ',', end_color)

출력하면 아래와 같습니다. 

 

텍스트입력(text input)

말 그대로 텍스트를 입력받는 곳이죠. 

import streamlit as st

name = st.text_input('이름으 입력해주세요.', 'ex) ComgongNuNa')
st.write('내 이름은 바로 ', name)

출력하면 아래와 같습니다. 

이름을 입력하면 아래와 같이 변경됩니다. 

입력하고 엔터를 누르셔야합니다. 

숫자 입력(number input)

텍스트 입력과 비슷하지만, 우측에 +, -버튼이 추가되어 수치를 증감시킬 수 있습니다. 

여기스 step은 얼마나 증가시킬지를 지정해주는 숫자이며, 따로 적지 않을 경우 0.01입니다.

import streamlit as st

number = st.number_input('숫자를 입력하세요.',step=2)
st.write('현재 숫자 : ', number)

출력은 아래와 같습니다. 

여기서 +를 누르면 2씩 증가됩니다. 

 

텍스트 영역(text area)

텍스트 영역은 텍스트 입력보다는 더 넓은 창이며, 더 많은 문장을 입력할 수 있습니다. 

import streamlit as st

txt = st.text_area('긴 텍스트를 입력하는 창입니다.', '''
    안녕하세요. 컴공누나입니다. 
    앞으로 도움이 되는 포스팅을 많이 할 예정이니, 많은 관심 부탁드려요.
    ''')
st.write('입력된 문장 :', txt)

출력은 아래와 같습니다. 

추가적으로 더 입력하면 아래와같이 입력된 문장이 변합니다. 

 

날짜 입력(date input)

날짜 입력으로 특정 날짜를 선택할 수 있습니다.

import datetime
import streamlit as st

d = st.date_input(
    "당신의 생일은?",
    datetime.date(2023, 6, 16))
st.write('나의 생일 :', d)

출력은 아래와 같습니다. 

날짜를 클릭하면 아래와 같이 달력이 뜨는데요. 여기서 날짜를 선택하시면 됩니다. 

시간 입력(time input)

시간은 알람시계에서 시간 설정하듯 셀렉트 박스로 선택할 수 있습니다. 

여기서 step은 number input처럼 얼마나 시간을 증가시킬지에 대한 정보이며, 기본 값은 datetime.timedelta(minutes=15)입니다.

import datetime
import streamlit as st

t = st.time_input('알람을 설정해주세요.', datetime.time(8, 30), step=datetime.timedelta(minutes=30))
st.write('당신의 알람 시간 : ', t)

출력은 셀렉트 박스와 동일한 형태입니다. 

아래와 같이 셀렉트박스에는 30분 단위의 시간들이 있습니다. 

파일 업로더(file uploader)

파일 업로더는 유저가 서버측에 파일을 올리는 것을 뜻합니다. 

파일 형식에 따라 올리는 방법이 다양하지만 여기서는 csv파일만 테스트로 해보겠습니다. 

import streamlit as st
import pandas as pd

uploaded_file = st.file_uploader("파일을 선택해주세요.")
if uploaded_file is not None:
    dataframe = pd.read_csv(uploaded_file)
    st.write(dataframe)

아래와 같이 출력됩니다. 

여기서 위에서 다운받았던 sample_df.csv를 입력한다면, 아래와 같은 결과를 얻을 수 있습니다. 

 

색깔 선택(color picker)

마치 포토샵에서 색깔을 선택하듯이, 색깔 선택하는 위젯이 있습니다. 

import streamlit as st

color = st.color_picker('색깔을 골라주세요.', '#00f900')
st.write('현재 색깔 : ', color)

출력 결과는 아래와 같습니다. 

색깔을 선택하시면 아래와 같이 창이 뜨는데, 여기서 원하는 색깔을 누르시면 됩니다.

 

오늘은 streamlit의 위젯에 대해서 알아보았는데요. 

더 자세한 내용을 알고싶으시면 streamlit 공식 문서를 참고해주세요.