매일 성장하는 PCNC

페이지 설정까지 대략 알아봤으니, 안에 입력할 데이터들을 조금 더 다채롭게 표현해보자. 기존 레이아웃 편에서 작성한 페이지를 기반으로 설명할 예정이니, 기존 페이지를 먼저 참고하는 것도 좋을듯. (https://pcnc.tistory.com/10)

● metric('설명','데이터','변화량')

데이터의 변화량을 색깔로 나타내주는 함수이다. '변화량' 파라미터의 경우 음수는 빨간색 양수는 초록색으로 시각화가 가능하다.

col10, col11, col12 = st.columns(3)
col10.metric('피자가 기존보다 얼만큼 식었나!', '50 °C', '-13.5 °C')
col11.metric('배달원의 속도는 기존보다 빨랐나?', '60 km/h', '-8%')
col12.metric('가격이 올랐는가?', '20,000원', '4%')

다음과 같은 코드셋을 입력하면,

다음과 같은 화면을 작성할 수 있다.

● slider('설명',min_value = 최소값,max_value = 최대값,value = 최초값)

데이터의 범위를 입력하여, 특정 데이터값을 출력할 수 있는 장치이다. 범위로도 지정이 가능하여 수치형 자료에 유용하게 쓰인다.

    st.slider('오늘 피자가 얼만큼 당겨요?', min_value=0, max_value=100, value = 50)
    st.slider('지금 배는 얼만큼 고파요?', min_value = 0, max_value = 100, value = (30,50)

두번째 페이지에 다음과 같은 코드셋을 입력하면

다음과 같은 슬라이더 구성이 가능하다.

● 버튼형 데이터 입력

- button('설명') 

 boolean 값을 반환한다.

- checkbox('설명')

 체크박스를 보여준다.

- radio('설명',(''넣고','싶은','데이터'))

 여러개의 값을 넣고, 선택할 수 있다.

- selectbox('설명',('넣고','싶은','데이터'))

 상 하단에 여러가지 조건을 넣어줄 수 있다.

- st.multiselect('설명',['넣고','싶은','데이터'],['보여줄','기본값'])

 여러가지 리스트들 중 원하는 데이터를 넣어서 보여줄 수 있다.

st.button('파인애플 피자를 먹고싶나요')
st.checkbox('진심인가요')
st.radio('이유가 무엇인가요',('재료를 낭비하고 싶다','고통받는것을 즐긴다','식사과 후식을 동시에 원한다'))
st.selectbox('파인애플 말고 다른 과일도 넣고싶나요',('사과','복숭아','체리','귤'))
st.multiselect('다른 음식을 드세요',['한식','중식','일식','양식'],['한식','일식'])

다음과 같은 코드셋을 3페이지 하단에 넣어보면,

다음과 같은 페이지를 확인할 수 있다.

●  텍스트형 데이터 입력

- text_input('설명','기본값')

 텍스트 입력이 가능하다.

- number_input('설명',min_value = 최소값, max_value = 최대값, value = 기본값, step = 증감수치)

 숫자를 입력할 수 있다. 버튼형으로 수치를 조정하거나, 직접 입력도 가능하다.

- date_input('설명',datetime(최초기본날짜), datetime(마지막기본날짜), value = (datetime(최초선택 시작일자),                                         datetime(마지막선택 기준일자), format = 'YY/MM/DD')

 날짜를 입력할 수 있다. format 파라미터를 통해 변경이 가능하니, 형태가 꼭 YY/MM/DD일 필요는 없다.

menu = st.text_input('최애 브랜드를 입력하세요 ', '파파존스')
st.write('당신이 가장 좋아하는 영화는 :', menu)

number = st.number_input('얼만큼 기대되나요', min_value=1, max_value=10, value=5, step=1)
st.write('당신의 기대도는 :', number)

from datetime import datetime  
date = st.date_input('언제부터 먹고싶었나요',datetime(2000, 9, 6))
st.write('이때부터 당겼군요! :', date)

두번째 페이지에 위같은 코드셋을 입력해 보았다.

다음과 같은 결과를 얻을 수 있다.

알아본 입력 함수들은 전부 write를 통해서도 쓸 수 있고, 변수로 데이터들을 담아올 수 있어 함께 사용하면 강력한 기능구현이 가능하니, 기본적으로 익히고 streamlit을 사용하면 좋을 것이다.

기본적인 입력표현은 여기까지. 추후에 다른 입력함수를 익힌다면, 포스팅 예정이다.

시각화를 위한 툴 답게, Streamlit은 웹의 화면구성을 여러가지 방법으로 표현할 수 있다. 표현 방법에 따라 마치 동적웹페이지의 그것처럼 활용이 가능한데, 해당 기능에 대해 알아보자.

● sidebar

 sidebar는 웹 화면의 사이드에 위치하고, 특정 화면으로 넘어갈 수 있게끔 하는 장치이다.

with st.sidebar.selectbox():    를 통해 작성하고, sidebar안의 구성요소 및 변경 내용을 작성할 수 있다.

import streamlit as st

st.title('Unit 5. Layouts & Containers')  # 제목 생성

with st.sidebar:                          # 사이드바 생성
    st.header('1. Sidebar')

add_selectbox = st.sidebar.selectbox(     # 사이드바에 selectbox 추가가 가능하다.
     '오늘 저녁엔 뭐먹지?',                # selectbox에 대한 설명
     ('pizza', '피자', 'pineapple_pizza') # selectbox 구성요소 입력 가능
)

if add_selectbox == 'pizza':              # if문을 통해 sidebar의 간단한 구성요소를 넣어보자.
    st.sidebar.title('🍕')
    st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1656_10.png')
elif add_selectbox == '피자':
    st.sidebar.title('💛')
    st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1001_10.png')
else :
	st.sidebar.title('😈')
    st.image('m_20220206094252_6Dh8BXkLor.jpg')

이런 코드셋을 입력하면,

다음과 같이 사이드바 selectbox에 따른 웹 구성이 가능하다.

● Columns

한 화면(한 줄)에 여러 구성요소들을 넣고싶을 때, 화면 크기를 잘라서 넣을 수 있도록 하는 기능이다.

col1, col2, col3 = st.columns(n)를 통해 작성이 가능하다.

(x)안에 int형 숫자를 넣으면 숫자 개수만큼 자료를 나눌 수 있고, 리스트 안에 float형 숫자를 넣으면 비율로 나눌 수 있다.

기존 작성했던 페이지에 column을 이용한 작업을 진행해보자.

if add_selectbox == 'pizza':              # if문을 통해 sidebar의 간단한 구성요소를 넣어보자.
    st.sidebar.title('🍕')
    st.header('2. Columns')
    col1, col2, col3 = st.columns(3)      # 개수로 column의 개수 나눠줌
    with col1:
        st.text("John's favorite")
        st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1656_10.png')
    with col2:
        st.text('super papas')
        st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1000_10.png')
    with col3:
        st.text('all meat')
        st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1001_10.png')
elif add_selectbox == '피자':
    st.sidebar.title('💛')
    st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1001_10.png')
else:
    st.sidebar.title('😈')
    col1, col2, col3 = st.columns([0.2,0.15,0.1]) #float형 숫자로 비율 지정
    with col1:
        st.text("John's favorite")
        st.image('cat1.png')
    with col2:
        st.text('super papas')
        st.image('m_20220206094252_6Dh8BXkLor.jpg')
    with col3:
        st.text('all meat')
        st.image('pepe.jpg')

이런 코드셋으로 수정을 진행하면,

다음과 같은 출력이 가능하다.

● Tabs

사이드바가 사이드에서 동적 움직임을 진행했다면, Tab은 위에서 동적 움직임을 가져다 줄 수 있다.

tab1, tab2, tab3 = st.tabs(['넣고싶은','tab의','이름'])을 통해 작성 가능하다.

위에서 작성한 두번째 selectbox에 다음과 같은 코드셋을 작성했다.

elif add_selectbox == '피자':
    st.sidebar.title('💛')
    with tab1:
        st.caption('파파존스')
        st.image('https://imgcdn.pji.co.kr/pc/img/store/brand/220301_icon_company_brand_logo.jpg', width=200)
    with tab2:
        st.caption('도미노')
        st.image('domino.png', width=200)
    with tab3:
        st.caption('피자헛')
        st.image('pizzahut.png', width=200)

이제 다음과 같은 페이지를 확인할 수 있다.

● 응용

관리가 용이하도록, 페이지를 함수화 시켜 딕셔너리 형태에 저장하고, 페이지로 만들 수 있다.

기존 사이드바 형태로 지정했던 페이지를 응용해보자.

import streamlit as st

def main_page():
    st.title('PCNC 블로그')  # 제목 생성
    st.sidebar.title('🍕')
    col1, col2, col3 = st.columns(3)      # 개수로 column의 개수 나눠줌
    with col1:
        st.text("John's favorite")
        st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1656_10.png')
    with col2:
        st.text('super papas')
        st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1000_10.png')
    with col3:
        st.text('all meat')
        st.image('https://imgcdn.pji.co.kr/pc/img/menu/detail/1001_10.png')

def page2():
    st.title('PCNC 블로그')  # 제목 생성
    st.sidebar.title('💛')
    tab1, tab2, tab3 = st.tabs(['파파존스', '도미노', '피자헛']) #나누고 싶은 개수만큼 TAB이름을 입력해주자.
    with tab1:
        st.caption('파파존스')
        st.image('https://imgcdn.pji.co.kr/pc/img/store/brand/220301_icon_company_brand_logo.jpg', width=200)
    with tab2:
        st.caption('도미노')
        st.image('domino.png', width=200)
    with tab3:
        st.caption('피자헛')
        st.image('pizzahut.png', width=200)
        
def page3():
    st.title("PCNC 블로그")
    st.sidebar.title('😈')
    col1, col2, col3 = st.columns([0.2,0.15,0.1]) #float형 숫자로 비율 지정
    with col1:
        st.text("파인애플 피자는")
        st.image('cat1.png')
    with col2:
        st.text('피자가')
        st.image('m_20220206094252_6Dh8BXkLor.jpg')
    with col3:
        st.text('아닙니다')
        st.image('pepe.jpg')

# 딕셔너리 선언 {  ‘selectbox항목’ : ‘페이지명’ …  }
page_names_to_funcs = { "menu": main_page, "brand": page2, "pineapple pizza": page3 }

# 사이드 바에서 selectbox 선언 & 선택 결과 저장
selected_page = st.sidebar.selectbox("오늘 저녁에 뭐먹지(페이지 선택)", page_names_to_funcs.keys())

# 해당 페이지 부르기
page_names_to_funcs[selected_page]()

다음과 같이 기존의 코드셋을 함수화하고 딕셔너리에 입력하게 되면, 결과는 기존과 똑같지만 조금 더 객체지향적인 프로그래밍이 가능하다.

페이지 구성은 여기까지.

분석이나 시각화를 jupyter lab이나, Colab을 통해 진행한다고 해도, 경영진에게 발표를 진행하기에는 무리가 있다. 이를 위해 웹 앱을 손쉽게 만들어주는 Streamlit을 2019년부터 배포중인데, 간단한 사용법을 알아보자.

여기에 없는 내용은 https://docs.streamlit.io/library/api-reference (Streamlit 공식 api 사이트) 에서 확인할 수 있다.

import streamlit as st
#streamlit 의 시작

Streamlit은 기존 파이썬에서 Notebook을 사용하여 한줄씩 실행되던 것과 달리, Python File을 통해 페이지 단위로 실행된다.

또한, 웹 실행을 위해서는 Terminal을 통해 실행을 요한다.

줄마다 작업이 틀렸는지 확인할 수 있었던 notebook과 달리, 조금 더 꼼꼼한 작업을 요할 듯 하다.

● 글쓰기

제목, 캡션, 캡션 등의 글쓰기 기능이 존재한다.

st.title('제목 입력')
st.caption('캡션 입력')
st.header('헤더 입력')
st.subheader('서브헤더 입력')
st.text('텍스트 입력')

이렇게 입력하면,

이렇게 간단한 웹 화면을 만들 수 있다.

(streamlit은 원래 python파일이 저장된 후 매번 'run'을 클릭해줘야 웹 화면 확인이 가능한데, 우측 상단의 Always rerun을 누르면 저장만 해도 재실행이 가능하다.)

● 마크다운

st.markdown('# 제목 마크다운')  #띄어쓰기에 주의하자!
st.markdown('## 헤더 마크다운')
st.markdown('### 서브헤더 마크다운')
st.markdown('마크다운')
st.markdown('**진하게**')
st.markdown('_기울임_')
st.markdown('*기울임*')
st.markdown('_**진하고 기울임**_')
st.markdown('**_진하고 기울임_**')

이렇게 입력하면

이와 같은 형태로 웹이 제작된다.

● 수학식(latex)

내가 정말 싫어하는 수학식을 표현할 수 있다.

st.latex(r'''a + ar + ar^2 + ar^3  \hat{y}''')

이렇게 입력하면

위와같은 수식이 작성된다. 여러 표현 방법이 있겠지만, 추후 알아보자.

● 코드(Code)

입력하는 코드화면 역시 웹상에서 표현이 가능하다.

st.code('a + ar + ar^2 + ar^3')

이와같이 입력하면,

이런 코드셀이 완성된다.

● write

write는 글쓰기지만 글쓰기로 구분하기 어렵다고 생각한다. DataFrame 등 여러가지 개체들이 들어갈 수 있기 때문이다.

Notebook의 print()와 조금 유사한데, DataFrame도 넣을수 있고, 그림이나 음악 등 매체들도 넣을 수 있는 기능이다.

df = pd.DataFrame({'이름':['표챢','표챢남친','둘리'],'성별':['여성','남성','여성']})
st.write('데이터프레임도 write에 넣을 수 있다. 바로',df,'이렇게')

이런식으로 코드셋을 설정하면,

이처럼 문장 사이에 DataFrame을 포함하여 작성이 가능하다.

● 미디어파일 입력하기

st.image('https://images.unsplash.com/photo-1548407260-da850faa41e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1487&q=80', caption='산에서 본 해돋이')
st.audio('../MusicSample.mp3')
st.video('../VideoSample.mp4')

각각 image, audio, video에 경로를 입력하면, 해당 미디어의 파일을 웹상에 업로드할 수 있다.

입력은 여기까지.