3.1.7 [Python] Streamlit

Streamlit

 

Python 기반의 오픈소스 프레임워크로, 데이터 중심의 웹 애플리케이션을 매우 쉽게 만들고 공유할 수 있는 기능을 제공한다.

# streamlit 설치
pip install streamlit

# 데모 확인 로컬 웹 페이지 확인
streamlit hello

# streamlit 어플리케이션 실행 명령어 (py 파일이 있는 디렉토리 위치에서)
streamlit run [파일명].py

# streamlit 종료는 Ctrl + C

# 2개 py 파일 동시에 띄우기 (포트번호는 현재 사용중이지 않은 걸로)
streamlit run main_page.py --server.port 8502

 

• API Reference

Function signature : Function 호출 방식, 파라미터, 기본값 등을 구조적으로 보여줌

https://docs.streamlit.io/develop/api-reference

API Reference - Streamlit Docs

 

• 화면 현출

• text() : 단순히 텍스트를 화면에 출력
• write() : Streamlit에서 매우 유용한 다목적 함수로, 다양한 종류의 데이터( 문자열, 데이터프레임, 차트, 숫자 등 여러 가지 형식)를 앱에 출력
• title(), header(), subheader(), markdown(), caption(), divider() : 서식을 표현하는 텍스트 출력

import streamlit as st

st.title('자기소개💁🏻‍♀️')

col1, _, col2 = st.columns(3)

with col1:
    nickname = st.text_input('닉네임 입력')
    age = st.number_input('나이 입력', min_value=20, max_value=39)

    options = ['한국', '중국', '일본', '미국', '외계']
    national = st.selectbox('국적', options)

    r_options = ['맛집 탐방', '영화 감상', '음악 감상', '야구 직관']
    hobby = st.radio('취미', r_options)

    is_checked = st.checkbox('개인정보 제공 동의')

with col2:
    if st.button('입력 완료'):
        st.write(f'닉네임: {nickname}')
        st.write(f'나이: {age}')
        st.write(f'국적: {national}')
        st.write(f'취미: {hobby}')
        st.write(f'개인정보 제공 동의: {is_checked}')

col2 내용은 '입력 완료' 버튼 눌렀을 때 나옴

 

• 데이터프레임

• dataframe() : Pandas 데이터프레임 등을 Streamlit 웹 애플리케이션에서 대화형 테이블로 표시
• data_editor() : 사용자가 직접 데이터를 수정할 수 있는 인터랙티브 테이블을 제공
• table() : Streamlit에서 정적 테이블을 표시하며, 인터랙티브 기능 없이 단순하게 데이터를 표로 출력
• metric() : 주요 성과 지표(KPI) 등을 표시할 때 사용

import streamlit as st
import pandas as pd

# 지극히 개인적인 생각입니다
st.title('짱구 캐릭터의 인지도')

data = pd.DataFrame({
    "캐릭터": ["짱구", "맹구", "훈이", "철수", "유리"],
    "선택횟수": [100, 200, 1, 30, 177],
    "승률 (%)": [52, 48, 56, 40, 45],
    "인지도(%)": [40, 45, 1, 14, 30]
})

st.dataframe(data)

st.bar_chart(data.set_index('캐릭터')['선택횟수'])

 

• 데이터 시각화 차트

• Simple Area Chart : 데이터를 영역 차트로 표시하며, 시간에 따른 데이터 추이 또는 범주별 데이터를 시각화하는 데 적합
• Simple Bar Chart : 막대 차트를 통해 범주별 데이터의 크기 비교를 할 수 있으며, 특정 범주에 대한 값을 쉽게 비교 가능
• Simple Line Chart : 선 그래프는 시간이나 연속적인 데이터를 시각화하는 데 사용되며, 데이터의 변화나 추이 노출
• Simple Scatter Chart : 산포도는 두 변수 간의 상관관계를 시각화하는 데 적합하며, 주로 데이터 간의 분포나 패턴 확인
• pyplot : Matplotlib로 생성된 차트를 Streamlit에서 표시할 수 있도록 하며, 고급 시각화를 사용할 때 유용
• altair_chart : Altair 라이브러리를 사용하여 데이터의 상호작용적 시각화를 만드며, 선언형 그래프 생성에 매우 유용

 

• 사용자 입력 요소

• 버튼 입력 : 다운로드 버튼, 피드백 버튼, 폼 제출 버튼, 링크 버튼, 페이지 링크 버튼
• 선택 입력 : 체크박스, 토글, 라디오 버튼, 드롭다운 박스(SelectBox), 다중 드롭다운 박스(MultiSelectBox), 슬라이더
• 텍스트 입력
• 숫자 입력
• 날짜 입력
• 파일 입력
• 특정 메시지 현출 : success, info, warning, error

 

최애 맹구 사진 투표와 현황 집계

 

배운 내용을 활용하여 만들어본 화면입니다! 🫡

import streamlit as st
import pandas as pd

st.title('저랑 같이 맹구 구경하실래요? 😊')
st.write('맹구의 일상 훔쳐보기')

col1, col2, col3 = st.columns(3)
with col1:
    st.image("default.jpg", caption='고백 맹구', width=200)
with col2:
    st.image("wa.png", caption='와앙 맹구', width=200)
with col3:
    st.image("he.jpg", caption='헤헤 맹구', width=200)

st.subheader('최애 맹구를 투표해주세요!')
r_options = ['고백 맹구', '와앙 맹구', '헤헤 맹구']
maeng = st.radio('💚', r_options)

if "count1" not in st.session_state:
    st.session_state.count1 = 0
if "count2" not in st.session_state:
    st.session_state.count2 = 0
if "count3" not in st.session_state:
    st.session_state.count3 = 0

if st.button('이거로 정했어요! 🫶'):
    if maeng == '고백 맹구':
        st.session_state.count1 += 1
    elif maeng == '와앙 맹구':
        st.session_state.count2 += 1
    else:
        st.session_state.count3 += 1

    st.success(f'{maeng}로 집계 완료!', icon="✅")
    st.balloons()
    opinion = st.text_input('또 보고 싶은 맹구가 있으면 자유롭게 의견 적어주세요')

st.subheader('전체 투표 현황')
data = pd.DataFrame({
    "캐릭터": ["고백 맹구", "와앙 맹구", "헤헤 맹구"],
    "선택횟수": [st.session_state.count1
             , st.session_state.count2
             , st.session_state.count3]
})
st.dataframe(data)

st.line_chart(data.set_index('캐릭터')['선택횟수'])

st.divider()

st.write('개발자 응원하기')
selected = st.feedback("thumbs")
if selected is not None:
    st.write(f"Thank You!")

대충 이런 화면