[streamlit] Streamlit 기초 개념

https://docs.streamlit.io/get-started/fundamentals/main-concepts

Streamlit Docs

1. Development flow

앱을 업데이트할 때마다 소스 파일을 저장하세요. 이렇게 하면 스트림릿이 변경 사항이 있는지 감지하여 앱을 다시 실행할지 여부를 묻습니다. 소스 코드를 변경할 때마다 앱을 자동으로 업데이트하려면 화면 오른쪽 상단에서 "항상 재실행"을 선택합니다.

코드를 입력하고, 저장하고, 실시간으로 시도한 다음, 결과에 만족할 때까지 코드를 더 입력하고, 저장하고, 시도하는 식으로 빠른 인터랙티브 루프에서 작업할 수 있습니다. 코딩과 결과물 실시간 확인 사이의 이 긴밀한 루프는 Streamlit이 사용자의 삶을 더 쉽게 만드는 방법 중 하나입니다.

2. Data Flow

Streamlit의 아키텍처를 사용하면 일반 Python 스크립트를 작성하는 것과 동일한 방식으로 앱을 작성할 수 있습니다. 이를 위해 Streamlit 앱에는 고유한 데이터 흐름이 있습니다. 화면에서 무언가를 업데이트해야 할 때마다 Streamlit은 전체 Python 스크립트를 위에서 아래로 다시 실행합니다.

이는 두 가지 상황에서 발생할 수 있습니다:

• 앱의 소스 코드를 수정할 때마다.
• 사용자가 앱의 위젯과 상호작용할 때마다. 예를 들어 슬라이더를 드래그하거나 입력 상자에 텍스트를 입력하거나 버튼을 클릭하는 경우 등입니다.

콜백이 on_change(또는 on_click) 매개변수를 통해 위젯에 전달될 때마다 콜백은 항상 스크립트의 나머지 부분보다 먼저 실행됩니다. 콜백 API에 대한 자세한 내용은 세션 상태 API 참조 가이드를 참조하세요.

이 모든 것을 빠르고 원활하게 처리하기 위해 Streamlit은 뒤에서 개발자를 위해 많은 작업을 수행합니다. 개발자가 앱을 재실행할 때 비용이 많이 드는 특정 계산을 건너뛸 수 있게 해주는 @st.cache_data 데코레이터가 바로 그 주인공입니다. 캐싱에 대해서는 이 페이지의 뒷부분에서 다루겠습니다.

3.Display and style data

스트림릿 앱에서 데이터(표, 배열, 데이터 프레임)를 표시하는 방법에는 몇 가지가 있습니다. 아래에서는 텍스트부터 테이블까지 무엇이든 작성하는 데 사용할 수 있는 magic과 st.write()에 대해 소개합니다. 그 다음에는 데이터를 시각화하기 위해 특별히 고안된 메서드에 대해 살펴보겠습니다.

3.1.Use magic

Streamlit 메서드를 호출하지 않고도 앱에 쓸 수 있습니다. Streamlit은 "마법 명령"을 지원하므로 st.write()를 전혀 사용할 필요가 없습니다! 실제로 작동하는 모습을 보려면 이 스니펫을 사용해 보세요:

"""
# My first app
Here's our first attempt at using data to create a table:
"""

import streamlit as st
import pandas as pd
df = pd.DataFrame({
  'first column': [1, 2, 3, 4],
  'second column': [10, 20, 30, 40]
})

df

스트림릿은 자체 줄에서 변수나 리터럴 값을 발견할 때마다 st.write()를 사용하여 자동으로 앱에 해당 값을 씁니다. 자세한 내용은 매직 명령어 문서를 참조하세요.

3.2.Write a data frame

st.write()는 매직 명령어와 함께 스트림릿의 "스위스 아미 나이프"입니다. 텍스트, 데이터, Matplotlib 수치, Altair 차트 등 거의 모든 것을 st.write()에 전달할 수 있습니다. Streamlit이 알아서 올바른 방식으로 렌더링하니 걱정하지 마세요.

import streamlit as st
import pandas as pd

st.write("Here's our first attempt at using data to create a table:")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

데이터를 표시하는 데 사용할 수 있는 st.dataframe() 및 st.table() 같은 다른 데이터 전용 함수도 있습니다. 이러한 기능을 언제 사용하고 데이터 프레임에 색상과 스타일을 추가하는 방법을 이해해 보겠습니다. "왜 항상 st.write()를 사용하지 않을까요?"라고 자문할 수 있습니다. 몇 가지 이유가 있습니다:

1. Magic과 st.write()는 사용자가 전달한 데이터 유형을 검사한 다음 앱에서 가장 잘 렌더링하는 방법을 결정합니다. 때로는 다른 방식으로 그리고 싶을 때가 있습니다. 예를 들어, 데이터 프레임을 대화형 테이블로 그리는 대신 st.table(df)를 사용하여 정적 테이블로 그릴 수 있습니다.
2. 두 번째 이유는 다른 메서드가 데이터를 추가하거나 대체하여 사용 및 수정할 수 있는 객체를 반환하기 때문입니다.
3. 마지막으로, 보다 구체적인 Streamlit 메서드를 사용하는 경우 추가 인수를 전달하여 동작을 사용자 지정할 수 있습니다.

예를 들어, 데이터 프레임을 만들고 판다스 스타일러 객체로 서식을 변경해 보겠습니다. 이 예제에서는 Numpy를 사용하여 무작위 샘플을 생성하고, st.dataframe() 메서드를 사용하여 대화형 테이블을 그려보겠습니다.

import streamlit as st
import numpy as np

dataframe = np.random.randn(10, 20)
st.dataframe(dataframe)

판다스 스타일러 객체를 사용하여 대화형 테이블의 일부 요소를 강조 표시하는 첫 번째 예제를 확장해 보겠습니다.

import streamlit as st
import numpy as np
import pandas as pd

dataframe = pd.DataFrame(
    np.random.randn(10, 20),
    columns=('col %d' % i for i in range(20)))

st.dataframe(dataframe.style.highlight_max(axis=0))

스트림릿에는 정적 테이블 생성을 위한 메서드인 st.table()도 있습니다.

import streamlit as st
import numpy as np
import pandas as pd

dataframe = pd.DataFrame(
    np.random.randn(10, 20),
    columns=('col %d' % i for i in range(20)))
st.table(dataframe)

3.3.Draw charts and maps

Streamlit은 Matplotlib, Altair, deck.gl 등과 같은 여러 인기 데이터 차트 라이브러리를 지원합니다. 이 섹션에서는 막대형 차트, 꺾은선형 차트, 지도를 앱에 추가합니다.

3.3.1.Draw a line chart

st.line_chart()를 사용하여 앱에 라인 차트를 쉽게 추가할 수 있습니다. Numpy를 사용하여 무작위 샘플을 생성한 다음 차트로 만들어 보겠습니다.

import streamlit as st
import numpy as np
import pandas as pd

chart_data = pd.DataFrame(
     np.random.randn(20, 3),
     columns=['a', 'b', 'c'])

st.line_chart(chart_data)

3.3.2.Plot a map

st.map()을 사용하면 데이터 요소를 지도에 표시할 수 있습니다. Numpy를 사용하여 몇 가지 샘플 데이터를 생성하고 샌프란시스코 지도에 그려 보겠습니다.

import streamlit as st
import numpy as np
import pandas as pd

map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
    columns=['lat', 'lon'])

st.map(map_data)

4.Widgets

데이터나 모델을 탐색하려는 상태로 만들었으면 st.slider(), st.button() 또는 st.selectbox()와 같은 위젯을 추가할 수 있습니다. 위젯을 변수로 취급하면 매우 간단합니다:

import streamlit as st
x = st.slider('x')  # 👈 this is a widget
st.write(x, 'squared is', x * x)

처음 실행하면 위의 앱은 "0 제곱은 0입니다"라는 텍스트를 출력해야 합니다. 그런 다음 사용자가 위젯과 상호작용할 때마다 Streamlit은 스크립트를 위에서 아래로 다시 실행하여 위젯의 현재 상태를 프로세스의 변수에 할당하기만 하면 됩니다.

예를 들어 사용자가 슬라이더를 10번 위치로 이동하면 스트림릿은 위의 코드를 다시 실행하고 그에 따라 x를 10으로 설정합니다. 이제 "10의 제곱은 100"이라는 텍스트가 표시됩니다.

위젯의 고유 키로 사용할 문자열을 지정하도록 선택하면 키로 위젯에 액세스할 수도 있습니다:

import streamlit as st
st.text_input("Your name", key="name")

# You can access the value at any point with:
st.session_state.name

키가 있는 모든 위젯은 세션 상태에 자동으로 추가됩니다. 세션 상태, 위젯 상태와의 연결 및 제한 사항에 대한 자세한 내용은 세션 상태 API 참조 가이드를 참조하세요.

4.1.Use checkboxes to show/hide data

체크박스의 한 가지 사용 사례는 앱에서 특정 차트나 섹션을 숨기거나 표시하는 것입니다. st.checkbox()는 위젯 레이블이라는 단일 인수를 받습니다. 이 샘플에서 체크박스는 조건문을 토글하는 데 사용됩니다.

import streamlit as st
import numpy as np
import pandas as pd

if st.checkbox('Show dataframe'):
    chart_data = pd.DataFrame(
       np.random.randn(20, 3),
       columns=['a', 'b', 'c'])

    chart_data

4.2.Use a selectbox for options

st.selectbox를 사용하여 시리즈에서 선택합니다. 원하는 옵션을 입력하거나 배열 또는 데이터 프레임 열을 전달할 수 있습니다. 앞서 만든 df 데이터 프레임을 사용해 보겠습니다.

import streamlit as st
import pandas as pd

df = pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
    })

option = st.selectbox(
    'Which number do you like best?',
     df['first column'])

'You selected: ', option

5.Layout

스트림릿을 사용하면 왼쪽 패널 사이드바에서 st.sidebar를 사용하여 위젯을 쉽게 구성할 수 있습니다. st.sidebar로 전달되는 각 요소는 왼쪽에 고정되므로 사용자는 UI 컨트롤에 계속 액세스하면서 앱의 콘텐츠에 집중할 수 있습니다. 예를 들어 사이드바에 선택 상자와 슬라이더를 추가하려면 st.slider와 st.selectbox 대신 st.sidebar.slider와 st.sidebar.selectbox를 사용하면 됩니다:

import streamlit as st

# Add a selectbox to the sidebar:
add_selectbox = st.sidebar.selectbox(
    'How would you like to be contacted?',
    ('Email', 'Home phone', 'Mobile phone')
)

# Add a slider to the sidebar:
add_slider = st.sidebar.slider(
    'Select a range of values',
    0.0, 100.0, (25.0, 75.0)
)

스트림릿은 사이드바 외에도 앱의 레이아웃을 제어할 수 있는 여러 가지 방법을 제공합니다. st.column을 사용하면 위젯을 나란히 배치할 수 있고, st.expander를 사용하면 큰 콘텐츠를 숨겨서 공간을 절약할 수 있습니다.

import streamlit as st

left_column, right_column = st.columns(2)
# You can use a column just like st.sidebar:
left_column.button('Press me!')

# Or even better, call Streamlit functions inside a "with" block:
with right_column:
    chosen = st.radio(
        'Sorting hat',
        ("Gryffindor", "Ravenclaw", "Hufflepuff", "Slytherin"))
    st.write(f"You are in {chosen} house!")

6. Show progress

앱에 오래 실행되는 계산을 추가할 때 st.progress()를 사용하여 실시간으로 상태를 표시할 수 있습니다. 먼저 시간을 가져와 보겠습니다. time.sleep() 메서드를 사용하여 오래 실행되는 계산을 시뮬레이션하겠습니다:

import time

이제 진행률 표시줄을 만들어 보겠습니다:

import streamlit as st
import time

'Starting a long computation...'

# Add a placeholder
latest_iteration = st.empty()
bar = st.progress(0)

for i in range(100):
  # Update the progress bar with each iteration.
  latest_iteration.text(f'Iteration {i+1}')
  bar.progress(i + 1)
  time.sleep(0.1)

'...and now we\'re done!'