[Streamlit-04] Streamlit session_state, st.button 예제

안녕하세요. 지난 시간에 session_state에 대해서 알아보았는데요. 이번 시간에는 session_state와 st.button을 활용하여 간단한 웹 계산기를 만들어보고, Streamlit 기본 구조에 대해 좀 더 심도 있게 알아보도록 하겠습니다.

 

Streamlit-04 핵심 API

1. st.session_state

st.session_state는 사용자의 세션 데이터를 저장하고 관리하는 데 사용됩니다. 일반적으로 사용자가 웹 애플리케이션에서 수행하는 일련의 작업이나 상태를 저장하는 데 유용합니다. 예를 들어, 사용자가 입력한 데이터를 저장하거나, 연산 결과를 보존하는 등 다양한 상황에서 활용할 수 있습니다.

2. st.button

st.button은 사용자가 클릭할 수 있는 버튼을 생성합니다. 이 버튼은 사용자의 입력을 받아 특정 기능을 수행하도록 트리거할 수 있습니다. st.button은 반환값으로 True나 False를 제공하여 버튼 클릭 여부를 확인할 수 있습니다.

3. st.columns

st.columns는 Streamlit에서 여러 개의 열을 생성하여 콘텐츠를 가로로 배치할 수 있도록 해주는 기능입니다. 이를 통해 사용자는 직관적이고 깔끔한 레이아웃을 쉽게 만들 수 있습니다. 특히 대화형 대시보드나 애플리케이션에서 컴포넌트를 효과적으로 배치하는 데 유용합니다.

 

간단한 웹 계산기 만들기

아래의 코드들은 Streamlit을 사용하여 간단한 웹 계산기를 구현한 예제입니다. 이 계산기는 사용자가 입력한 수식을 계산하고 결과를 보여줍니다.

1. 계산기를 위한 기본 상태 초기화

import streamlit as st

# 계산기를 위한 기본 상태 초기화
if 'input' not in st.session_state:
    st.session_state.input = ''
if 'result' not in st.session_state:
    st.session_state.result = ''

st.session_state를 사용하여 입력값(input)과 결과값(result)의 기본 상태를 초기화합니다. 사용자가 계산을 수행할 때마다 이 상태가 업데이트됩니다.

2. 버튼 클릭 핸들러 함수

# 버튼 클릭 핸들러 함수
def append_input(value):
    st.session_state.input += str(value)

def clear_input():
    st.session_state.input = ''
    st.session_state.result = ''

def calculate_result():
    try:
        st.session_state.result = str(eval(st.session_state.input))
        st.session_state.input = st.session_state.result  # 결과를 입력으로 설정하여 연속 계산 가능
    except Exception as e:
        st.session_state.result = "오류"

• append_input(value): 사용자가 버튼을 클릭할 때마다 해당 값을 input 문자열에 추가합니다.
• clear_input(): input과 result를 초기화하여 계산을 리셋합니다.
• calculate_result(): 사용자가 = 버튼을 클릭할 때 eval() 함수를 사용하여 현재 input의 수식을 계산하고 결과를 result에 저장합니다.

3. 본문

# UI 구성
st.title("간단한 웹 계산기")
st.header(" ")
st.subheader(" ")
st.write(" ")

# 계산기 버튼 레이아웃 설정
col1, col2, col3, col4 = st.columns(4)

# 숫자 버튼
with col1:
    if st.button("1"): append_input(1)
    if st.button("4"): append_input(4)
    if st.button("7"): append_input(7)
    if st.button("**C**"): clear_input()

with col2:
    if st.button("2"): append_input(2)
    if st.button("5"): append_input(5)
    if st.button("8"): append_input(8)
    if st.button("0"): append_input(0)

with col3:
    if st.button("3"): append_input(3)
    if st.button("6"): append_input(6)
    if st.button("9"): append_input(9)
    if st.button("**=**"): calculate_result()

# 연산자 버튼
with col4:
    if st.button("**+**"): append_input('+')
    if st.button("**-**"): append_input('-')
    if st.button("**X**"): append_input('*')
    if st.button("**/**"): append_input('/')


st.write(" ")
st.write(" ")
st.write(" ")

# 현재 입력 및 결과 표시
st.write("입력:", st.session_state.input)
st.write("결과:", st.session_state.result)

• UI 구성: Streamlit의 레이아웃 기능을 사용하여 계산기 인터페이스를 구성합니다. st.columns를 활용하여 4개의 열을 생성하고, 각 열에 버튼을 배치하여 숫자와 연산자를 입력할 수 있도록 합니다.
• 현재 입력 및 결과 표시: 사용자가 입력한 수식과 그에 대한 결과를 st.write()로 화면에 표시합니다.

참고사항으로 연산기호에 ** ** 표시는 bold체를 의미합니다.

4. 전체코드

import streamlit as st

# 계산기를 위한 기본 상태 초기화
if 'input' not in st.session_state:
    st.session_state.input = ''
if 'result' not in st.session_state:
    st.session_state.result = ''

# 버튼 클릭 핸들러 함수
def append_input(value):
    st.session_state.input += str(value)

def clear_input():
    st.session_state.input = ''
    st.session_state.result = ''

def calculate_result():
    try:
        st.session_state.result = str(eval(st.session_state.input))
        st.session_state.input = st.session_state.result  # 결과를 입력으로 설정하여 연속 계산 가능
    except Exception as e:
        st.session_state.result = "오류"

# UI 구성
st.title("간단한 웹 계산기")
st.header(" ")
st.subheader(" ")
st.write(" ")

# 계산기 버튼 레이아웃 설정
col1, col2, col3, col4 = st.columns(4)

# 숫자 버튼
with col1:
    if st.button("1"): append_input(1)
    if st.button("4"): append_input(4)
    if st.button("7"): append_input(7)
    if st.button("**C**"): clear_input()

with col2:
    if st.button("2"): append_input(2)
    if st.button("5"): append_input(5)
    if st.button("8"): append_input(8)
    if st.button("0"): append_input(0)

with col3:
    if st.button("3"): append_input(3)
    if st.button("6"): append_input(6)
    if st.button("9"): append_input(9)
    if st.button("**=**"): calculate_result()

# 연산자 버튼
with col4:
    if st.button("**+**"): append_input('+')
    if st.button("**-**"): append_input('-')
    if st.button("**X**"): append_input('*')
    if st.button("**/**"): append_input('/')


st.write(" ")
st.write(" ")
st.write(" ")

# 현재 입력 및 결과 표시
st.write("입력:", st.session_state.input)
st.write("결과:", st.session_state.result)

 

5. streamlit run

 

Comment

이번 포스팅에서는 Streamlit의 session_state와 st.button을 활용하여 간단한 웹 계산기를 구현하는 방법을 소개했습니다.  이 예제를 바탕으로 다양한 응용 프로그램을 만들어보세요!

다음 시간에는 내가 만든 streamlit 페이지를 온라인으로 배포하는 방법에 대해서 알아보도록 하겠습니다. 읽어주셔서 감사합니다.