240912 TIL #491 AI Tech #29 Streamlit

김춘복·2024년 9월 12일

TIL aitech

TIL : Today I Learned

목록 보기

492/496

Today I Learned

오늘 배운 내용은 python으로 간단하게 프로토타입 웹 애플리케이션을 생성할 수 있는 프레임워크 Streamlit!

강의 복습

Streamlit

Python 기반으로 웹 애플리케이션을 빠르고 간단하게 만들어주는 오픈소스 프레임워크

JS없이 순수 python 코드만으로 간단하게 프로토타입을 개발할 수 있고 데이터 시각화를 interactive하게 만들 수 있다.
jupyter notebook에서 쓴 함수랑 코드들 조금만 수정해서 웹 서비스로 만들 수 있는게 장점
pip install streamlit 명령어로 설치 가능
import streamlit as st로 임포트
터미널에서 streamlit run 파일명 입력시 실행 가능
실행 시 local url과 network url 제공. 일반적으로 8501포트 사용
Ctrl+C누르면 터미널에서 실행 종료
cheat-sheet.streamlit
streamlit API 공식문서

UI Component

기본 출력

import streamlit as st

st.title("타이틀")
st.header("헤더")
st.subheader("서브헤더")
st.write("본문 텍스트")
st.markdown("------------")

st.write()는 문자, 숫자, DataFrame, 차트 등을 다 표시해준다.
st.dataframe()은 dataframe을 interactive하게 보여주고 정렬이나 컬럼 클릭이 가능하다.
st.table()에 dataframe을 넣으면 static하게 나온다.
인자로 넣는 df에 df.style.highlight_max(axis=0)을 사용하면 강조가 된다.
st.metric() : 지표 표시
st.json() : json 데이터 표시
st.code() : 코드 표시
st.latex() : 수식 표시

사용자 입력 input

import streamlit as st

text_input = st.text_input("아래에 텍스트 입력")
st.write(text_input)

password_input = st.text_input("아래에 암호를 입력해주세요", type='password')
st.write(password_input)

number_input = st.number_input("아래에 숫자를 입력해주세요")
st.write(number_input)

st.date_input("아래에 날짜를 입력해주세요")
st.time_input("아래에 시간을 입력해주세요")

파일 업로드

uploaded_file = st.file_uploader("파일을 업로드해주세요", type=["png", "jpeg", "jpg"])

선택버튼 : 라디오버튼과 selectbox가 있다. output을 변수에 저장해서 확인가능하다.
하나만 선택할 수 있고 if로 분기점을 만들어 결과를 처리한다.
여러개를 선택하려면 st.multiselect()를 사용한다.

selected_item = st.radio("radio button", ("1", "2", "3"))

if selected_item == "1":
    st.write("1!")
elif selected_item == "2":
    st.write("2!")
elif selected_item == "3":
    st.write("3!")

option = st.selectbox("하나를 선택 해주세요", ("A", "B", "C"))

st.write(option, "을 선택하셨습니다.")

slider : 주어진 범위에서 값을 선택하게하고 싶은 경우

values = st.slider("범위를 지정해주세요", 0, 10, (2,7))

st.checkbox() : T/F의 boolean값 받고싶을 때
파라미터에 value=True로 주면 디폴트가 체크로 되어있다.
with st.form() : 여러 입력을 그룹화해서 한번에 제출

with st.form("my_form"):
    name = st.text_input("Enter your name:")
    age = st.number_input("Enter your age:", min_value=1, max_value=120)
    feedback = st.text_area("Feedback:")
    
    submitted = st.form_submit_button("Submit")

    if submitted:
        st.write(f"Hello {name}, you are {age} years old.")
        st.write(f"Your feedback: {feedback}")

st.linechart() : 선 그래프
st.map() : 지도 데이터
st.bar_chart() : 막대 그래프
st.scatter_chart() : 산점도
status box

st.success("성공")
st.info("info")
st.warning("경고")
st.error("에러")

layout
st.sidebar.컴포넌트함수 : 사이드바에 컴포넌트 추가
a,b,c,d = st.columns(4) : 레이아웃을 가로로 여러칸 나눠서 컬럼처럼 레이아웃해서 보여줌

Session State

streamlit은 화면에서 뭔가 업데이트되면 전체 코드를 재실행한다.

코드가 수정되거나, 사용자가 streamlit 위젯이랑 상호작용시 전체 코드 재싱행
따라서 상태를 유지하고싶을때는 session state를 사용한다.

import streamlit as st

# 세션 상태 초기화 (없으면 생성)
if 'counter' not in st.session_state:
    st.session_state.counter = 0

# 카운터 값 표시
st.write(f"현재 카운터 값: {st.session_state.counter}")

# 카운터 증가 버튼
if st.button("카운터 증가"):
    st.session_state.counter += 1
    st.write("카운터가 증가했습니다!")

# 카운터 초기화 버튼
if st.button("카운터 초기화"):
    st.session_state.counter = 0
    st.write("카운터가 초기화되었습니다!")

streamlit caching

업데이트되면 전체 코드를 재실행하는 특징때문에 데이터도 계속 읽어오고 객체도 반복해서 생성하게되는데 이를 막기위해 캐싱을 한다.

캐싱을 사용해서 함수 호출 결과는 local에 저장한다. 이러면 모든 사용자가 캐싱 값을 사용할 수 있다.
사용자마다 다르게 접근해야되는 값이면 session state에 저장하는 것이 좋다.
@st.cache_data : 데이터를 불러오거나 response에 사용
@st.cache_resource : DB연결이나 ML모델 load할때 사용

@st.cache_data
def expensive_computation(x):
    time.sleep(2)  # 계산이 오래 걸리는 작업을 가정
    return x * 2

피어세션

다음시점의 target예측을 현재 시점의 데이터로 해야되니 데이터를 한칸씩 밀어서 EDA를 해야되는 것 아니냐는 견해에 따라 아래와 같이 x,y를 제외한 다른 데이터들을 한칸 씩 밀었다.

# ID와 target을 제외한 나머지 열들만 선택
cols_to_shift = df.columns.difference(['ID', 'target'])

# 해당 열들에 대해 한칸씩 아래로 밀기 (shift)
df[cols_to_shift] = df[cols_to_shift].shift(1)