Streamlit

스트림릿(Streamlit)의 다양한 UI 함수들 (1)

Cong_S 2022. 5. 19. 21:34

스트림릿은 웹 대시보드를 만들기 위한 라이브러리이므로 시각적으로 보여주는데 특화되어 있다.

각종 UI 들을 표현할 수 있는 함수들의 대해 알아보자.

 

0. 시작 전 가장 기본적인 구조

import streamlit as st

# 웹 대시보드 개발 라이브러리인, 스트림릿은
# main 함수가 있어야 한다.

def main() :
    pass
    
if __name__ == '__main__' :
    main() 
    
   ## 터미널에서 실행하기 전에 꼭 저장할 것. HTML에서 매번 저장해서 확인하듯이 

## 웹서버가 도는 동안 터미널엔 입력이 되지 않는다. 그 때 Ctrl + C 누르면 멈추고 명령 입력 가능해진다

def main 함수와 if 문이 가장 기본적인 세트이므로 꼭 외우고 넘어가도록 하자.

pass 부분에 우리가 원하는 함수들을 사용해 UI를 표현할 것이다.

 

1. st.title 함수

import streamlit as st

# 웹 대시보드 개발 라이브러리인, 스트림릿은
# main 함수가 있어야 한다.

def main() :
    st.title('안녕하세요. 웹 대시보드 프로젝트.')
    st.text('Hello. 안녕.')

if __name__ == '__main__' :
    main()

title은 웹 화면에 제목과 같이 큰 글씨를 출력하는 함수이다.

text는 본문과 같이 작은 글씨이다.

2. text , header , subheader , success , warning , info , error

from pandas import value_counts
import streamlit as st

def main():
    st.title('웹 대시보드')                ## 큰 글씨
    st.text('웹 대시보드 개발하기')
   
    name = '홍길동'

    # 제 이름은 홍길동입니다.
    print('제 이름은 {} 입니다.'.format(name))
    # 프린트문은 터미널에 찍힌다.
    st.text('제 이름은 {} 입니다.'.format(name))

    st.header('이 영역은 헤더 영역')
    st.subheader('이 영역은 서브헤더')
    st.success('작업이 성공했을 때 사용하자.')
    st.warning('경고 문구를 보여줘야 할 때 사용하자.')
    st.info('정보를 보여주고 싶을 때')
    st.error('오류가 났을 때')

    # 파이썬의 함수 사용법을 보여주고 싶을 때 
    st.help(sum)
    st.help(len)
    st.help(value_counts)

  • 1번 : 헤더 영역과 서브 헤더 영역을 나눔. header, subheader 함수
  • 2번 : 순서대로 작업이 성공했을때 (success), 경고문구가 필요할 때(warning), 정보를 알려줄 때(info), 오류가 났을 때 (error) 함수이다.
  • 3번 : 파이썬의 함수 사용법을 알려줄 때 사용하는 help함수이다.

 

3. dataframe 함수

import streamlit as st
import pandas as pd


def main():
    df = pd.read_csv('data2/iris.csv')
    st.dataframe(df)
    species = df['species'].unique()
    st.text('아이리스 꽃은 '+species+ '으로 되어있다.')

if __name__ == '__main__':
    main()

데이터프레임을 확인할 수 있는 dataframe 함수이다.

 

4. 각종 체크 박스

from os import stat
from scipy.misc import ascent
from sqlalchemy import asc
import streamlit as st
import pandas as pd


def main():
    df = pd.read_csv('data2/iris.csv')

    # 버튼 만들기 - 버튼을 누르면 데이터가 보이게
    if st.button('데이터보기') :            # button 자체가 0과 1로 값이 나오게 됨.
        st.dataframe(df)                   # 버튼을 누를 때마다 새로 시작됨.

    # '대문자' 버튼을 만들고 버튼을 누르면 
    # species 컬럼의 값들을 대문자로 변경한
    # 데이터 프레임을 보여주세요.
    
    if st.button('대문자') :
        df['species'] = df['species'].str.upper()
        st.dataframe(df)

### 한 번에 여러 줄 주석하기. 드래그로 긁고 컨트롤 슬래쉬
    #  if st.button('대문자') :
    #     st.dataframe(df['species'].str.upper())     
    # 
    # 라디오 버튼 : 여러 개중에 한 개 선택할 때
    my_order = ['오름차순 정렬', '내림차순 정렬']      

    status = st.radio('정렬방법 선택', my_order)  # 라디오 버튼은 1과 0이 아닌 들어가 있는 값을 띄게 된다.

    if status == my_order[0] :
        #petal_length 컬럼을 오름차순으로 정렬하여 보여준다.
        # df.sort_values('petal_length')
        st.dataframe(df.sort_values('petal_length'))
    elif status == my_order[1] :
        #petal_length 컬럼을 내림차순으로 정렬하여 보여준다.
        # df.sort_values('petal_length', ascending= False)
        st.dataframe(df.sort_values('petal_length', ascending=False))

    status = st.radio('정렬방법 선택2', my_order)  # 라디오 버튼은 1과 0이 아닌 들어가 있는 값을 띄게 된다.

    if status == my_order[0] :
        #petal_length 컬럼을 오름차순으로 정렬하여 보여준다.
        df = df.sort_values('petal_length')
        st.dataframe(df)
    elif status == my_order[1] :
        #petal_length 컬럼을 내림차순으로 정렬하여 보여준다.
        df = df.sort_values('petal_length', ascending= False)
        st.dataframe(df)

    # 체크박스 : 체크 해제 / 체크
    if st.checkbox('헤드 5개 보기') : 
        st.dataframe(df.head())
    else :
        st.text('누르면 헤드 나옴')

    # 셀렉트 박스 : 여러 개중에 한 개만 고르는 것
    language = ['Ptyhon','C','Java','Go','PHP']

    my_choice = st.selectbox('좋아하는 언어 선택', language)

    if my_choice == language[0]:
        st.write('파이썬을 좋아하는구나.')
    elif my_choice == language[1]:
        st.write('C 언어를 좋아하는구나.')
    elif my_choice == language[2]:
        st.write('Java를 좋아하는구나.')
    elif my_choice == language[3]:
        st.write('GO를 좋아하는구나.')
    else :
        st.write('PHP를 좋아하는구나.')

    # 멀티셀렉트 박스 : 여러 개를 고를 수 있는 박스

    my_choice = st.multiselect('여러 개 선택 가능', language)
    
    # 멀티셀렉트를 이용해서, 특정 컬럼들만 가져오기
    # 유저에게, iris df 의 컬럼들을 다 보여주고,
    # 유저가 선택한 컬럼들만, 데이터프레임을 화면 보여줄것.

    columns_list = df.columns

    choice_list = st.multiselect('컬럼을 선택하세요', columns_list)

    st.dataframe(df[choice_list])

    # 슬라이더 : 숫자를 조정할 때 유용한 기능
    # 소수점을 나오게 하려면 모든 값을 소수점으로 만들어주어야 함
    # st.slider('나이', 1.0 , 120.0 , 30.0 , 0.1)
    age = st.slider('나이', 0, 120, 20, 1)

    st.text('제 나이는 {} 살 입니다.'.format(age))
    
    # 익스펜더 (확장할 수 있는 영역)
    with st.expander('hello'):
        st.text('안녕하세요.')
        st.dataframe(df)
    

if __name__ == '__main__' :
    main()

button 함수로 만든 데이터보기 버튼
radiobox 를 이용한 선택 박스 petal_length 컬럼을 정렬하는 문장이다.
checkbox 함수로 만든 체크박스
selectbox 함수를 이용한 1개 고르는 선택박스
mulsectbox 로 만든 여러 개를 선택가능한 박스
slider 를 이용한 수치 입력 방법
영역을 확장시킬 수 있는 expander 함수