Streamlit 소개 및 튜토리얼

Streamlit의 장점

1. 다른 조직의 도움 없이 빠르게 웹서비스를 만드는 방법을 사용 가능

2. 다양한 Component를 제공해 대시보드 UI를 구성할 수 있음

 

Streamlit 설치하기

pip install streamlit==1.36.0

 

Streamlit 텍스트 입력하기

import streamlit as st
 
# Streamlit Text 작성
st.title("제목")
st.header("헤더")
st.subheader("서브헤더")
st.write("그냥 글씨")

 

사용자의 입력 받기

## 텍스트 입력받기
text = st.text_input("사용자에게 띄울 메세지") ## ex) 입력해주세요
pw = st.text_input("패스워드 입력", type="password")
 
num = st.number_input("사용자에게 띄울 메세지") ## 숫자 입력 받기
date = st.date_input("사용자에게 띄울 메세지") ## 날짜 입력 받기
time = st.time_input("사용자에게 띄울 메세지") ## 시간 입력 받기
 
st.write(text)

## 파일 업로드 받기
upload_file = st.file_uploader("사용자에게 띄울 메세지", type=["png", "jpg", "csv"]) ## 파일 확장자

## 입력을 그룹화 하여, 한 번에 제출하도록
with st.form(key="입력 form"):
	id = st.text_input("ID")
    pw = st.text_input("password", type="password")
    st.form_submit_button("login")

 

박스, 버튼 등 선택 옵션

# 여러 옵션 중 하나만 선택
## 라디오 버튼
selected_item = st.radio("하나를 골라주세요.", ("A", "B")) ## ("보여줄 메세지", (선택지))

### 선택지에 따라 할 행동
if selected_item == "A": st.write("A")
else : st.write("B")

### 선택 박스
sb = st.selectbox("하나를 골라주세요.", ("A", "B")) ## ("보여줄 메세지", (선택지))

# 여러 옵션 선택 가능
ms = st.multiselect("하나를 골라주세요.", ["A", "B"]) 

# 슬라이더 : 주어진 범위 내에서 값 선택
sl = st.slider("하나를 골라주세요.", 최솟값, 최댓값, 초깃값)

# 체크박스 : T,F로 입력을 받는 경우
check = st.checkbox("동의 시, 선택해주세요", value=False) ## 보여줄 메세지, default값
if check : st.write("동의하셨습니다.") ## 체크가 눌렸을 때, 실행할 것

# 버튼 : 특정 동작을 실행하도록 하는 경우
if st.button("버튼 클릭"):
	## 클릭시, 할 동작

 

st.column_config

: 데이터 표시 및 상호작용을 구성하는 강력한 도구 -> 텍스트, 숫자, 목록, URL, 이미지 등의 다양한 데이터에 맞는 맞춤 메서드 모음 제공

# 일반 column 구성하기
## width : 칼럼 가로폭 -> "small", "medium", "large" 중 하나로 선택
## help : 사용자가 마우스를 column 위에 올리면, 물음표와 말풍선으로 표시될 메세지
Column("열 이름", width="medium", help="")

# text column 구성
## validate : 사용자가 입력한 문자열이 입력한 정규식에 만족하는지 확인
TextColumn("열 이름", max_chars=최대 글자수, validate="정규식")

# number column 구성
## format : 어떤 문자열 형태로 포맷팅 할 지 -> ex)"$%d" => $1000 식으로 표시
NumberColumn("열 이름", min_value=0, format="format 스타일")

# checkbox column 구성
CheckboxColumn("열 이름", help="")

# selectbox column 구성
SelectboxColumn("열 이름", options=["선택지 1", "선택지 2"])

# Multiselect Column 구성
MultiselectColumn("열 이름", options=["선택지 1", "선택지 2"])

# Datetime column 구성
## min_value : 최소 날짜 -> ex) datetime(2023, 6, 1) -> 23년 6월 1일 부터 시작
## format : ex) D MMM YYYY, h:mm a
DatetimeColumn("열 이름t", min_value=datetime(), format="")

# Date column 구성
DateColumn("열 이름", max_value=date(), format="")

# Time column 구성
## min_value : -> ex) time(8, 0, 0)
TimeColumn("열 이름", min_value=time(8, 0, 0), format="")

# JSON column 구성
JSONColumn("열 이름", width="medium")

# List column 구성
ListColumn("열 이름", width="medium")

# Link column 구성
LinkColumn("열 이름", max_chars=100, validate="정규식")

# Image column 구성
ImageColumn("열 이름", help="")

# Area chart column 구성
AreaChartColumn("열 이름" y_min=0, y_max=100)

# Line chart column 구성
LineChartColumn("열 이름" y_min=0, y_max=100)

# Bar chart column 구성
BarChartColumn("열 이름" y_min=0, y_max=100)

# Progress column 구성
ProgressColumn("열 이름", min_value=0, max_value=1000, format="정규식")

 

---

Streamlit tutorial : Get dataframe row-selections from users

위 내용들을 실습 해볼 수 있는 튜토리얼이 공식 페이지에 있습니다 !

아래에 한글 주석을 최대한 꼼꼼히 달아놓았으니 한번씩 해보세요 :)

 

https://docs.streamlit.io/develop/tutorials/elements/dataframe-row-selections

Streamlit Docs

 

 

app.py

import numpy as np
import pandas as pd
import streamlit as st
from faker import Faker # 무작위로 멤버 이름을 생성해야해서

# 회원 데이터 무작위 생성 (number_of_items : 생성할 회원 수)
@st.cache_data ## 캐시된 함수의 출력을 저장해, 동일한 입력으로 다시 호출시,재사용
def get_profile_dataset(number_of_items: int = 20, seed: int = 0) -> pd.DataFrame:
    ## 데이터를 저장하기 위함
    new_data = []

    ## 초기화
    fake = Faker()
    np.random.seed(seed)
    Faker.seed(seed)
    
    ## 반복하면서, 새로운 회원 데이터를 생성하고 new_data 리스트에 저장
    for i in range(number_of_items):
        profile = fake.profile()
        new_data.append(
            {
                "name": profile["name"],
                "daily_activity": np.random.rand(25),
                "activity": np.random.randint(2, 90, size=12),
            }
        )

    ## 생성한 데이터리스트를 데이터프레임으로 바꿔줌
    profile_df = pd.DataFrame(new_data)
    return profile_df

# 다중 열 선택이 가능한 데이터 display
## 칼럼 형태 정의
column_configuration = {
    "name": st.column_config.TextColumn(
        "Name", help="The name of the user", max_chars=100, width="medium"
    ),
    ## 연간활동 -> 꺾은선 그래프
    "activity": st.column_config.LineChartColumn(
        "Activity (1 year)",
        help="The user's activity over the last 1 year",
        width="large",
        y_min=0,
        y_max=100,
    ),
    ## 일별 활동 -> 막대 그래프
    "daily_activity": st.column_config.BarChartColumn(
        "Activity (daily)",
        help="The user's activity in the last 25 days",
        width="medium",
        y_min=0,
        y_max=1,
    ),
}

## 멤버 선택 탭, 선택 멤버의 활동 비교 탭 2개로 분리
select, compare = st.tabs(["멤버 선택", "선택된 멤버의 활동 비교"])

with select: # Add select tab #############################################
    st.header("All members")
    df = get_profile_dataset() ## 멤버 데이터 무작위 생성하는 함수 호출

    # 선택된 멤버 데이터프레임 노출
    ## 사용자의 선택 항목을 저장
    event = st.dataframe(
        df,
        column_config=column_configuration,
        use_container_width=True,
        hide_index=True,
        on_select="rerun", ## 사용자가 선택 시, 즉시 앱 전체를 다시 실행
        selection_mode="multi-row",
    )

    st.header("Selected members")
    people = event.selection.rows ## 선택된 행의 목록
    filtered_df = df.iloc[people] ## 필터링
    ## 선택된 행을 데이터 프레임에 표시함
    st.dataframe(
        filtered_df,
        column_config=column_configuration,
        use_container_width=True,
    )

with compare: # Add compare tab ###########################################
    # 연간 활동 데이터 저장
    activity_df = {}
    for person in people:
        activity_df[df.iloc[person]["name"]] = df.iloc[person]["activity"]
    activity_df = pd.DataFrame(activity_df)

    ## 일간 활동 데이터 저장
    daily_activity_df = {}
    for person in people:
        daily_activity_df[df.iloc[person]["name"]] = df.iloc[person]["daily_activity"]
    daily_activity_df = pd.DataFrame(daily_activity_df)

    ## 선택된 멤버가 있는 경우
    if len(people) > 0:
        st.header("Daily activity comparison")
        st.bar_chart(daily_activity_df) ## 막대 차트
        st.header("Yearly activity comparison")
        st.line_chart(activity_df) ## 꺽은선 그래프
    ## 선택된 멤버가 없는 경우
    else:
        st.markdown("No members selected.")

 

app 실행

streamlit run app.py --server.runOnSave=true

 

 

reference

https://docs.streamlit.io/develop/api-reference/data/st.column_config

https://docs.streamlit.io/develop/quick-reference/cheat-sheet