카테고리 없음

스파르타 AI-8기 TIL(11/28)-Streamlit

kimjunki-8 2024. 11. 28. 23:16

오늘부터 조금 자세히 streamlit에 대해 알아보겠습니다!(시간이 조금 여유로워짐...)

streamlit -> as st = 국룰

처음부터 먼저 일반 텍스트 출력

streamlit --help - 도움 커맨드
streamlit run your_script.py - 파일 실행하기
streamlit hello - Streamlit 예제 앱을 실행하여 Streamlit의 기능을 쉽게 경험할 수 있는 명령어
streamlit config show - 캐쉬 보여주기
streamlit cache clear - 캐쉬 지우기
streamlit docs - Streamlit 문서를 로컬에서 웹 브라우저를 통해 쉽게 열어볼 수 있도록 하는 명령어
streamlit --version - 버전 확인
st.write('Hello World')
화면에 글자 출력
st.title('타이틀') -> 타이틀 출력
st.header('헤더') -> 헤더 출력 (타이틀보다 살짝 크기가 작음)
st.text('일반 텍스트') -> 일반 텍스트 출력 (제일 작음)


마크다운, 수식 지원

st.markdown('마크다운') -> 마크다운 출력
st.latex('수식') -> 수식처럼 보이게 출력


버튼만들기

# 버튼
if st.button('버튼'): if문으로 만약아 누르면 True, 및 밑에 작업 실행
    st.write('안녕') 기억해야 할 점은 print가 아니라 st.write로 써야한다.
    
# 체크박스
agree = st.checkbox('동의')
if agree:
    st.write('동의완료')
    
# 슬라이더
age = st.slider('나이', 0, 100) (이름, 최소 값, 최대 값)
st.write(f'선택한 나이는 {age}입니다.')

내가 예상한 바로는, if를 쓰고 바로 st.button은 작동이 되었지만 나머지 agree, slider는 실시간으로 값이 바뀔 수 있기 때문에, 저렇게 변수에 넣어서 씁니다. 어떻게 아시냐 물어보시면, 이미 해봤고 에러가 났습니다.. 왜냐하면, st은 조금 다르게, 예를 들어 input과 비슷하게 변수에 넣어도 실행이 되며, 자동으로 저렇게 슬라이더가 생성되고, 그렇게 정한 값이 변수에 들어가기 때문입니다. 즉, 슬라이더를 28에 맞추면 자동으로 age변수에 28이라는 값이 들어가게 되는것입니다.

라디오 버튼, 샐렉트 박스

gender = st.radio('성별', ['남자', '여자', '없음']) #선택 사항을 만들 때는 무조건 []로 감싸기
st.write(f'성별은 {gender}입니다')

flower = st.selectbox('꽃', ['1', '2', '3'])

 

하지만 selectbox는 다른 것들과 다르게, 따로 write를 해주지 않아도 저렇게 나옵니다.

flower = st.selectbox('꽃', ['1', '2', '3'])
if flower == '1':
    st.write('1')

이렇게도 할 수 있습니다.

데이터 표시 및 시각화

st.dataframe()
st.container(border = False, height=??) #만약 사이에 공간을 넣고 싶으면 쓰는 것
st.table()


차트 그리기

st.line_chart
st.bar_chart

이렇게 하다간 끝이 없을 것 같다.
처음부터 하나씩 전부 가져왔다.

전부 보자
Display text
 텍스트 출력과 관련된 다양한 함수입니다

st.write("Most objects") # df, err, func, keras!
st.write(["you?", "what?", 442322])
#st.write_stream(my_generator)
#st.write_stream(my_llm_stream)

st.text("text")
st.markdown("_Markdown_")
st.latex(r""" e^{i\pi} + 1 = 0 """)
st.title("My title")
st.header("My header")
st.subheader("My sub")
st.code("for i in range(8): foo()")
st.html("<p>Hi!</p>")​

설명:
st.write("Most objects")
다목적 출력 함수입니다. 텍스트 "Most objects"를 출력합니다.
특징:
다양한 데이터 타입을 출력할 수 있는 범용적인 함수입니다.
문자열, 리스트, 딕셔너리, 데이터프레임 등을 자동으로 처리합니다.
적용 가능한 수식:
텍스트 데이터의 경우, 직접 입력하거나 문자열 변수를 전달할 수 있습니다.
복합 데이터 타입(리스트, 딕셔너리 등)을 사용해 복잡한 내용을 출력할 수도 있습니다.

st.write(["you?", "what?", 442322])
리스트를 출력합니다.
특징:
리스트의 요소를 그대로 출력합니다.
숫자와 문자열이 혼합된 경우에도 자동으로 렌더링됩니다.
적용 가능한 수식:
리스트의 각 요소를 변환하거나 조작한 뒤 출력 가능. 예: st.write([item.upper() if isinstance(item, str) else item for item in my_list])

st.write_stream(my_generator)
my_generator라는 제너레이터에서 생성된 데이터를 스트림 형태로 출력합니다.
특징:
데이터가 점진적으로 생성되는 경우 유용.
스트리밍 데이터를 실시간으로 화면에 출력할 수 있습니다.
적용 가능한 수식:
제너레이터를 사용해 데이터가 실시간으로 출력되도록 설계할 수 있습니다.
여기서 제너레이터(Generator)는 Python의 특별한 함수로, 한 번에 하나의 값을 생성하여 반환하는 객체를 만드는 도구입니다. 일반적인 함수와 달리, 제너레이터는 yield 키워드를 사용하여 순차적으로 값을 생성하고 반환합니다. 값을 생성한 이후에도 함수 상태를 기억하고 다음 호출 시 그 지점에서 다시 실행을 시작합니다. 그리고  Python의 제너레이터는 기본적으로 한 번 실행된 후 끝나면 상태를 잃어버립니다. 즉, yield를 사용해 모든 값을 반환하고 나면 제너레이터는 소진(exhausted) 상태가 되며, 다시 처음부터 값을 생성하지 않습니다.

def my_generator():
    for i in range(10):
        yield f"Item {i}"
st.write_stream(my_generator())


st.write_stream(my_llm_stream)
LLM (Large Language Model)과 같은 스트리밍 데이터를 출력합니다.
특징:
LLM 응답을 실시간으로 렌더링할 때 사용.
ChatGPT 등에서 실시간 출력이 필요한 경우 매우 유용.
적용 가능한 수식:
LLM 스트림 데이터와 통합된 출력 작업에 사용.

def my_llm_stream():
    yield "Response part 1" # 첫 번째 값을 반환하고, 함수는 여기서 일시 중단.
    yield "Response part 2" # 호출자가 다시 요청하면 이 값을 반환.
st.write_stream(my_llm_stream()) # 스트리밍 데이터를 순차적으로 처리.

yield를 더 쉽게 이해하기 위해서 만든 코드
import streamlit as st
def my_llm_stream():
    yield "Response part 1"
    yield "Response part 2"
    
gen = my_llm_stream()
st.write(next(gen)) - 처음 한꺼번에 실행되지 않고 처음 값만 출력하고 멈춤

if st.button('버튼을 눌러주세요'): - 버튼을 누르면 다음 값이 나온다.
    st.write(next(gen))

참고로 yield는 Python의 제너레이터(generator)를 생성하는 데 사용되는 키워드입니다.  제너레이터는 일반적인 함수와 비슷하지만, 값을 반환할 때 return 대신 yield를 사용합니다. 제너레이터는 호출될 때 값을 하나씩 반환하고, 이전 상태를 기억하며 중단된 지점에서 실행을 재개할 수 있습니다. 따라서 메모리 효율적이고, 대량의 데이터를 처리하거나 스트리밍 데이터와 같이 순차적으로 데이터를 다루는 경우 유용합니다.

st.text("Fixed width text")
고정폭 텍스트를 출력합니다.
특징:
폰트가 고정폭으로 설정되어 코드나 로그 데이터를 출력하는 데 적합합니다.
적용 가능한 수식:
텍스트 데이터를 가공하여 코드처럼 출력 가능.

log_message = "INFO: Process completed."
st.text(log_message)


st.markdown("_Markdown_")
Markdown 형식의 텍스트를 렌더링합니다.
특징:
텍스트에 스타일을 추가할 수 있습니다 (굵게, 기울임꼴 등).
HTML과 유사하지만 간단한 문법으로 작성.
적용 가능한 수식:
동적 데이터를 Markdown 형식으로 변환해 출력 가능.

user_name = "Jane"
st.markdown(f"**Welcome, {user_name}!**")


st.latex(r""" e^{i\pi} + 1 = 0 """)
LaTeX 형식으로 수식을 출력합니다.
특징:
수학 및 과학 공식 표현에 적합.
LaTeX 표기법을 사용하여 복잡한 공식도 렌더링 가능.
적용 가능한 수식:
변수를 포함한 동적 수식 출력.

value = 3.14
st.latex(rf""" \pi \approx {value} """)


st.title("My title")
큰 제목을 출력합니다.
특징:
앱 페이지의 주요 제목으로 사용됩니다.
가장 큰 폰트 크기를 가지며 눈에 띕니다.
적용 가능한 수식:
동적으로 제목 생성 가능.

app_name = "Streamlit App"
st.title(f"Welcome to {app_name}")


st.header("My header")
부제목(헤더)을 출력합니다.
특징:
st.title보다 작은 크기이며 섹션을 구분하는 데 유용.
적용 가능한 수식:
섹션별로 동적인 헤더 출력 가능.

section_name = "Data Visualization"
st.header(f"{section_name} Section")


st.subheader("My sub")
서브 헤더를 출력합니다.
특징:
st.header보다 작은 크기로, 더 세부적인 섹션 구분에 적합.
적용 가능한 수식:
서브섹션 제목에 동적인 내용을 포함 가능.

subsection = "Bar Chart"
st.subheader(f"Exploring {subsection}")


st.code("for i in range(8): foo()")
코드를 강조된 형식으로 출력합니다.
특징:
코드 블록 스타일로 렌더링.
파이썬 코드나 다른 언어 코드도 표시 가능.
적용 가능한 수식:
코드 블록을 동적으로 생성 가능.

code = "print('Hello, World!')"
st.code(code)


st.html("<p>Hi!</p>")
HTML 코드가 렌더링됩니다.
특징:
HTML 마크업을 직접 삽입하여 커스텀 스타일을 적용하거나 동적인 웹 요소를 추가 가능.
적용 가능한 수식:
동적으로 HTML 콘텐츠를 생성하여 출력 가능.

html_content = "<h1>Welcome to Streamlit</h1>"
st.html(html_content)

Display data
이 섹션은 데이터프레임, 테이블, JSON, 메트릭 등의 데이터를 출력하는 데 사용됩니다.
#st.dataframe(my_dataframe)
#st.table(data.iloc[0:10])
st.json({"foo":"bar","fu":"ba"})
st.metric("My metric", 42, 6)


st.dataframe(my_dataframe)
pandas.DataFrame 객체를 대화형 테이블로 출력합니다.
특징:
테이블 크기, 열 너비 등을 조정 가능.
데이터 정렬 및 탐색 기능이 포함.
적용 가능한 수식:
데이터프레임을 가공한 후 출력 가능.

filtered_df = df[df['column'] > 10]
st.dataframe(filtered_df)


st.table(data.iloc[0:10])
여기서

iloc는 Pandas 라이브러리에서 데이터프레임이나 시리즈의 행(row)과 열(column)을 정수 기반으로 위치를 기준으로 선택할 수 있게 해주는 속성입니다.

즉, 데이터프레임의 인덱스 숫자를 사용해 특정 데이터에 접근하거나 슬라이싱을 수행할 수 있도록 합니다.

데이터를 정적 테이블로 출력합니다.

특징:
데이터프레임이나 배열, 리스트 등을 테이블 형식으로 표시.
대화형이 아닌 정적 테이블로 출력.
적용 가능한 수식:
특정 데이터만 잘라 출력 가능.

summary = data.describe()
st.table(summary)

iloc 예시 
import pandas as pd
data = pd.DataFrame({'A': [1, 2, 3], 'B': [4, 5, 6]})
# 첫 번째 행 선택 (정수 인덱스 0 사용)
print(data.iloc[0])  # A: 1, B: 4
# 첫 번째 열 선택
print(data.iloc[:, 0])  # 1, 2, 3


st.json({"foo":"bar","fu":"ba"})
JSON 데이터를 구조적으로 출력합니다.
특징:
JSON의 키와 값을 트리 구조로 렌더링.
복잡한 JSON 객체를 시각적으로 탐색 가능.
적용 가능한 수식:
Python 딕셔너리를 JSON 형태로 출력 가능.

import json
st.json(json.loads('{"name": "Alice", "age": 25}'))


st.metric("My metric", 42, 2)
숫자형 데이터를 간단한 메트릭 카드로 표시합니다.
특징:
주요 숫자 값과 변화량을 함께 출력.
대시보드에서 핵심 수치를 강조하는 데 유용.
적용 가능한 수식:
계산 결과를 동적으로 출력 가능.

st.metric("Temperature", "23°C", "-2°C")

Display Media
이미지, 오디오, 비디오 등 미디어 파일을 출력하는 섹션입니다.
st.image("./header.png")
st.audio(data)
st.video(data)
st.video(data, subtitles="./subs.vtt")
st.logo("logo.jpg")

st.image("./header.png")
이미지를 앱에 출력합니다.
특징:
로컬 파일 경로 또는 URL을 통해 이미지 로드 가능.
use_column_width=True를 사용하면 이미지 크기를 자동으로 조정.
적용 가능한 수식:
동적 이미지 URL을 받아 출력 가능.

st.image("https://via.placeholder.com/150", caption="Sample Image")

caption은 이미지 아래에 표시되는 설명 텍스트(캡션)를 나타냅니다. 
st.image를 사용하여 이미지를 Streamlit 앱에 표시할 때, 
캡션은 이미지와 함께 간단한 설명이나 정보를 제공하는 데 사용됩니다.
즉, 이미지 아래에 Sample Image라는 캡션이 나타납니다.


st.audio(data)
오디오 파일을 앱에 출력합니다.
특징:
로컬 오디오 파일, URL, 또는 bytes 데이터를 입력으로 받습니다.
적용 가능한 수식:
사용자로부터 업로드된 오디오 데이터를 재생.

uploaded_file = st.file_uploader("Upload an audio file", type=["mp3", "wav"])
if uploaded_file:
    st.audio(uploaded_file)
    
여기서 wav는 WAV 파일 또는 Waveform Audio File Format을 의미합니다. 
이는 Microsoft와 IBM이 개발한 오디오 파일 형식으로, 
비압축 PCM(펄스 코드 변조) 형식의 오디오 데이터를 저장하는 데 주로 사용됩니다.
게다가 WAV 파일은 대부분 압축되지 않아서 원음 품질을 그대로 유지합니다.


st.video(data)
비디오 파일을 앱에 출력합니다.
특징:
로컬 비디오 파일, URL, 또는 bytes 데이터를 재생.
적용 가능한 수식:
사용자로부터 업로드된 비디오를 출력.

uploaded_file = st.file_uploader("Upload a video file", type=["mp4"])
if uploaded_file:
    st.video(uploaded_file)


st.video(data, subtitles="./subs.vtt")
비디오에 자막을 추가하여 출력합니다.
특징:
.vtt 형식의 자막 파일과 비디오를 함께 렌더링.
적용 가능한 수식:
다국어 자막을 동적으로 로드하여 출력 가능.

st.logo("logo.jpg")
앱에 로고 이미지를 표시합니다.
특징:
브랜딩 요소로 사용 가능.
st.image와 동일한 메커니즘을 사용.


Display Charts
차트 및 그래프를 출력하는 섹션으로, 데이터 시각화를 지원합니다.
st.area_chart(df)
st.bar_chart(df)
st.bar_chart(df, horizontal=True)
st.line_chart(df)
st.map(df)
st.scatter_chart(df)

st.altair_chart(chart)
st.bokeh_chart(fig)
st.graphviz_chart(fig)
st.plotly_chart(fig)
st.pydeck_chart(chart)
st.pyplot(fig)
st.vega_lite_chart(df, spec)

# Work with user selections
event = st.plotly_chart(
    df,
    on_select="rerun"
)
event = st.altair_chart(
    chart,
    on_select="rerun"
)
event = st.vega_lite_chart(
    df,
    spec,
    on_select="rerun"
)


st.area_chart(df)
주어진 데이터프레임(df)을 사용하여 면적 차트를 출력합니다.
특징:
데이터의 변화를 면적으로 표현하여 추세를 시각적으로 나타냅니다.
데이터프레임의 컬럼을 x, y 값으로 사용하여 차트를 만듭니다.
주로 시간에 따른 누적 값을 보여줄 때 유용합니다.
적용 가능한 수식:
데이터프레임의 시계열 데이터를 사용하여 시각화를 할 때 사용됩니다.

st.area_chart(df[['column1', 'column2']])


st.bar_chart(df)
주어진 데이터프레임(df)을 사용하여 세로 막대 차트를 출력합니다.
특징:
각 데이터 항목에 대한 값을 직관적으로 비교할 수 있는 막대 형태로 표시합니다.
숫자형 데이터가 있을 때 자주 사용되며, 각 항목을 세로로 나열하여 값의 크기를 시각적으로 구분할 수 있습니다.
적용 가능한 수식:
데이터프레임의 값들이 카테고리별로 비교될 때 사용됩니다.

st.bar_chart(df[df['value'] > 50])


st.bar_chart(df, horizontal=True)
주어진 데이터프레임(df)을 사용하여 수평 막대 차트를 출력합니다.
특징:
수평으로 데이터를 비교할 수 있게 하여, 긴 카테고리 이름을 표현할 때 유용합니다.
수평 방식으로 가독성을 높이고, 항목이 많을 때 유리합니다.
적용 가능한 수식:
카테고리가 길어지거나 수평 차트로 비교를 원할 때 사용됩니다.

st.bar_chart(df, horizontal=True)



st.line_chart(df)
주어진 데이터프레임(df)을 사용하여 선 차트를 출력합니다.
특징:
연속적인 데이터의 변화를 시각화하는 데 유용합니다.
특히 시간에 따른 트렌드를 시각적으로 확인할 수 있습니다.
적용 가능한 수식:
시간에 따른 데이터 변화나 추세를 나타낼 때 사용됩니다.

st.map(df)
위치 데이터를 지도 위에 표시합니다.
특징:
데이터프레임의 latitude와 longitude 열을 기반으로 표시.
적용 가능한 수식:
데이터에서 특정 지역만 필터링.

st.map(df[df['city'] == 'Seoul'])


st.scatter_chart(df)
데이터를 산점도로 출력합니다.
특징:
두 변수 간의 관계를 시각화.
적용 가능한 수식:
동적으로 범위를 필터링.

st.scatter_chart(df[(df['x'] > 0) & (df['y'] < 100)])


st.altair_chart(chart)
Altair 차트를 렌더링합니다.
특징:
Altair 라이브러리로 생성된 시각화 객체를 표시.
적용 가능한 수식:
Altair API를 사용하여 데이터를 시각화.

import altair as alt
chart = alt.Chart(df).mark_line().encode(x='x', y='y')
st.altair_chart(chart)


st.bokeh_chart(fig)
Bokeh 라이브러리로 생성된 차트를 렌더링합니다.
특징:
Bokeh를 사용하여 상호작용 가능한 차트를 제공.

st.graphviz_chart(fig)
Graphviz 다이어그램을 렌더링합니다.
특징:
네트워크 다이어그램이나 트리 구조를 표시.

st.plotly_chart(fig)
Plotly 라이브러리로 만든 차트를 출력합니다.
특징:
Plotly는 상호작용이 가능한 차트와 시각화를 지원합니다.
고급 그래픽과 인터랙티브 기능이 필요할 때 유용합니다.
적용 가능한 수식:
Plotly 차트 객체를 전달하여 시각화합니다.

st.pydeck_chart(chart)
Pydeck 라이브러리로 만든 지도 기반 차트를 출력합니다.
특징:
지도 시각화를 위한 고급 도구로, 3D 지도 및 레이어 등을 지원합니다.
위치 기반 데이터를 시각화할 때 유용합니다.
적용 가능한 수식:
Pydeck 차트 객체를 전달하여 시각화합니다.

st.pyplot(fig)
Matplotlib로 만든 차트를 출력합니다.
특징:
Matplotlib는 2D 플로팅에 강력한 기능을 제공하며, 복잡한 시각화가 가능합니다.
고급 커스터마이징 및 세부 설정을 할 수 있습니다.
적용 가능한 수식:
Matplotlib 차트 객체를 전달하여 시각화합니다.

st.vega_lite_chart(df, spec)
Vega-Lite 라이브러리로 만든 차트를 출력합니다.
특징:
선언적 차트 시각화 라이브러리로, 간단하고 직관적인 문법으로 차트를 생성할 수 있습니다.
데이터 기반으로 다양한 유형의 시각화를 쉽게 만들 수 있습니다.
적용 가능한 수식:
Vega-Lite 사양을 사용하여 차트를 만들 수 있습니다.

event = st.plotly_chart(df, on_select="rerun")
Plotly 차트에서 사용자가 선택한 항목에 따라 앱을 다시 실행할 수 있게 합니다.
특징:
on_select 이벤트를 사용하여 차트를 클릭하거나 특정 데이터를 선택하면 앱이 다시 실행되도록 할 수 있습니다.
적용 가능한 수식:
Plotly 차트의 선택을 추적하고, 선택된 데이터에 따라 다른 시각화를 표시할 수 있습니다.

event = st.altair_chart(chart, on_select="rerun")
Altair 차트에서 사용자가 선택한 항목에 따라 앱을 다시 실행할 수 있게 합니다.
특징:
Altair 차트에서 선택된 데이터 포인트에 따라 앱을 자동으로 다시 실행합니다.
적용 가능한 수식:
Altair 차트의 데이터 선택을 트리거로 다양한 동작을 구현할 수 있습니다.

event = st.vega_lite_chart(df, spec, on_select="rerun")
Vega-Lite 차트에서 사용자가 선택한 항목에 따라 앱을 다시 실행할 수 있게 합니다.
특징:
Vega-Lite 차트를 이용해 선택된 항목을 기반으로 리렌더링합니다.
적용 가능한 수식:
Vega-Lite 차트를 시각화하고, 사용자의 선택에 따라 동적으로 반응할 수 있습니다.


Add Elements to Sidebar
사이드바에 다양한 UI 요소를 추가하여 사용자와의 상호작용을 구현할 수 있습니다.
# Just add it after st.sidebar:
a = st.sidebar.radio("Select one:", [1, 2])

# Or use "with" notation:
with st.sidebar:
    st.radio("Select one:", [1, 2])

a = st.sidebar.radio("Select one:", [1, 2])
사이드바에 라디오 버튼을 추가하여 사용자 선택을 받을 수 있습니다.
특징:
라디오 버튼으로 선택된 값을 반환합니다.
적용 가능한 수식:
사이드바에서 선택된 값에 따라 다른 동작을 구현할 수 있습니다.

choice = st.sidebar.radio("Pick an option:", ["Option A", "Option B"])
if choice == "Option A":
    st.write("You selected Option A")


with st.sidebar:
이드바 안에 여러 UI 요소를 그룹화하여 추가할 수 있습니다.
특징:
st.sidebar 블록 내에서 여러 요소를 한 번에 정의할 수 있습니다.
적용 가능한 수식:
여러 UI 요소를 하나의 with 블록 안에서 정의하여 코드의 구조를 깔끔하게 유지할 수 있습니다.

with st.sidebar:
    st.radio("Select an option", [1, 2])
    st.slider("Pick a number", 0, 100)

Columns
페이지를 여러 열로 나누어 레이아웃을 구성할 수 있습니다.
# Two equal columns:
col1, col2 = st.columns(2)
col1.write("This is column 1")
col2.write("This is column 2")

# Three different columns:
col1, col2, col3 = st.columns([3, 1, 1])
# col1 is larger.

# Bottom-aligned columns
col1, col2 = st.columns(2, vertical_alignment="bottom")

# You can also use "with" notation:
with col1:
    st.radio("Select one:", [1, 2])


col1, col2 = st.columns(2)
2개의 동등한 크기의 열을 생성하여 콘텐츠를 배치합니다.
특징:
st.columns() 함수를 사용하여 페이지를 수평으로 분할할 수 있습니다.
적용 가능한 수식:
두 열을 사용하여 콘텐츠를 나누어 표시할 수 있습니다.

col1, col2, col3 = st.columns([3, 1, 1])
3개의 열을 정의하고, 각 열의 크기를 다르게 설정합니다.
특징:
열 크기를 비율로 설정하여 레이아웃을 더 세밀하게 조정할 수 있습니다.
적용 가능한 수식:
첫 번째 열을 크게 하고 나머지 열을 작게 설정하여 가변적인 레이아웃을 만들 수 있습니다.

col1, col2, col3 = st.columns([3, 1, 1])
col1.write("Large column")
col2.write("Small column")
col3.write("Small column")

여기서 중요한 점은 3, 1 ,1 = 5/100 즉, 100으로 나눌 때 정확이 비율이 나뉘어져야 하는 숫자가 되야한다는 뜻입니다. 예를 들면 4, 1, 1을 하면 총 크기가 6이 되는데 6은 100으로 정확히 나눌 수 없기 때문에(소수점) 에러가 납니다. 8, 1, 1을 하면 10이 되기에, 정확히 100과 나누어서 정확한 비율을 얻을 수 있음과 같습니다.

col1, col2 = st.columns(2, vertical_alignment="bottom")
두 열을 만들되, 열 내 콘텐츠를 하단 정렬합니다.
특징:
vertical_alignment 옵션을 사용하여 콘텐츠의 수직 정렬 방식을 설정할 수 있습니다.
적용 가능한 수식:
콘텐츠를 하단에 배치하고, 다양한 레이아웃을 실험할 수 있습니다.

col1, col2 = st.columns(2, vertical_alignment="bottom")
col1.write("This is aligned at the bottom")
col2.write("This is also aligned at the bottom")


with col1:
특정 열 안에 UI 요소를 그룹화하여 배치합니다.
특징:
열 내에서 with 블록을 사용하여 요소들을 배치할 수 있습니다.
적용 가능한 수식:
각 열에 다른 입력 위젯을 배치할 수 있습니다.

with col1:
    st.radio("Choose one", [1, 2])

Tabs
탭을 사용하여 다양한 섹션을 나누고, 각 탭에서 다른 콘텐츠를 표시할 수 있습니다.
# Insert containers separated into tabs:
tab1, tab2 = st.tabs(["Tab 1", "Tab2"])
tab1.write("this is tab 1")
tab2.write("this is tab 2")

# You can also use "with" notation:
with tab1:
    st.radio("Select one:", [1, 2])


tab1, tab2 = st.tabs(["Tab 1", "Tab 2"])

두 개의 탭을 만들어 탭 간에 콘텐츠를 분리합니다.
특징:
여러 탭을 사용하여 다양한 콘텐츠를 탭별로 그룹화할 수 있습니다.
적용 가능한 수식:
각각의 탭에 다른 내용을 표시하여 사용자가 탭을 전환하며 정보를 확인할 수 있습니다.

tab1, tab2 = st.tabs(["Tab 1", "Tab 2"])
with tab1:
    st.write("Content of Tab 1")
with tab2:
    st.write("Content of Tab 2")


with tab1:
탭 내에서 UI 요소를 배치하는 데 사용됩니다.
특징:
특정 탭에만 콘텐츠를 배치할 수 있습니다.
적용 가능한 수식:
각 탭에 대한 사용자 인터페이스를 구성할 수 있습니다.

with tab1:
    st.write("This is tab 1 content")

 


Expandable Containers
사용자가 클릭하여 열거나 닫을 수 있는 확장 가능한 컨테이너를 사용하여 콘텐츠를 숨기거나 표시할 수 있습니다.
expand = st.expander("My label", icon=":material/info:")
expand.write("Inside the expander.")
pop = st.popover("Button label")
pop.checkbox("Show all")

# You can also use "with" notation:
with expand:
    st.radio("Select one:", [1, 2])

 


expand = st.expander("My label", icon=":material/info:")
역할: 사용자가 클릭하여 펼칠 수 있는 확장 가능한 컨테이너를 만듭니다.
특징:
st.expander()는 기본적으로 닫힌 상태로 시작하며, 사용자가 클릭하면 내용이 펼쳐집니다.
icon 매개변수를 사용하여 확장기능에 아이콘을 추가할 수 있습니다.
적용 가능한 수식:
내용이 많은 경우 숨기고, 필요할 때만 내용을 보여주어 UI를 깔끔하게 유지할 수 있습니다.
expand = st.expander("Click to expand", icon=":info:")
expand.write("This content is hidden until expanded.")


pop = st.popover("Button label")
팝오버는 버튼을 클릭하여 표시할 수 있는 짧은 팝업 메시지를 만듭니다.
특징:
popover는 버튼을 클릭하여 팝업을 표시하며, 이를 통해 사용자와 상호작용할 수 있습니다.
popover 내에 다양한 UI 요소를 배치할 수 있습니다.
적용 가능한 수식:
버튼 클릭 시 팝업 메시지를 표시하고, 팝업 내에서 체크박스나 버튼 등을 추가하여 상호작용할 수 있습니다.

pop = st.popover("Click me for more info")
pop.checkbox("Show details")


with expand:
expander 내에서 여러 UI 요소를 배치할 수 있습니다.
특징:
with 구문을 사용하여 확장 가능한 영역 내에 다양한 UI 요소를 배치할 수 있습니다.
적용 가능한 수식:
확장 가능한 영역 안에 여러 위젯을 배치하여, 사용자가 필요할 때만 정보를 확인할 수 있도록 할 수 있습니다.

with expand:
    st.radio("Choose one", ["Option 1", "Option 2"])

Control Flow
앱의 흐름을 제어하는 기능들이 포함되어 있습니다. 실행을 멈추거나, 스크립트를 즉시 다시 실행할 수 있습니다.
# Stop execution immediately:
st.stop()
# Rerun script immediately:
st.rerun()
# Navigate to another page:
st.switch_page("pages/my_page.py")

# Define a navigation widget in your entrypoint file
pg = st.navigation(
    st.Page("page1.py", title="Home", url_path="home", default=True)
    st.Page("page2.py", title="Preferences", url_path="settings")
)
pg.run()

# Group multiple widgets:
with st.form(key="my_form"):
    username = st.text_input("Username")
    password = st.text_input("Password")
    st.form_submit_button("Login")

# Define a dialog function
@st.dialog("Welcome!")
def modal_dialog():
    st.write("Hello")

modal_dialog()

# Define a fragment
@st.fragment
def fragment_function():
    df = get_data()
    st.line_chart(df)
    st.button("Update")

fragment_function()

st.stop()
역할: 코드 실행을 즉시 중지합니다.
특징:
이 함수는 스크립트의 실행을 즉시 종료시킵니다. 주로 조건에 따라 더 이상 코드 실행을 이어갈 필요가 없을 때 사용합니다.
적용 가능한 수식:
특정 조건에서 더 이상 실행할 필요가 없을 때 st.stop()을 호출하여 프로세스를 종료할 수 있습니다.
if st.button("Stop execution"):
    st.stop()  # This will stop execution


st.rerun()
스크립트를 즉시 다시 실행합니다.
특징:
이 함수는 현재 실행 중인 스크립트를 다시 실행합니다. st.rerun()을 호출하면 페이지가 새로 고침되어, 모든 상태와 입력 값이 초기화됩니다.
적용 가능한 수식:
사용자가 버튼을 클릭하거나 특정 조건에 맞으면 페이지를 새로 고쳐 새 상태로 다시 시작할 수 있습니다.

if st.button("Rerun"):
    st.rerun()  # This will rerun the script


st.switch_page("pages/my_page.py")
다른 페이지로 이동합니다.
특징:
페이지 전환을 할 수 있습니다. 다양한 페이지로 구성된 애플리케이션에서 페이지 간 이동을 처리합니다.
적용 가능한 수식:
특정 버튼을 클릭하거나 조건에 따라 다른 페이지로 이동하게 할 수 있습니다

if st.button("Go to preferences"):
    st.switch_page("pages/preferences.py")


st.navigation()
여러 페이지가 있는 애플리케이션에서 네비게이션을 처리합니다.
특징:
여러 페이지를 설정하고, 사용자가 원하는 페이지로 이동할 수 있게 해줍니다.
적용 가능한 수식:
여러 페이지를 연결하고, 특정 페이지를 기본 페이지로 설정할 수 있습니다.

pg = st.navigation(
    st.Page("page1.py", title="Home", url_path="home", default=True),
    st.Page("page2.py", title="Preferences", url_path="settings")
)
pg.run()


with st.form(key="my_form"):
사용자로부터 입력을 받을 수 있는 폼을 생성합니다.
특징:
여러 입력 위젯을 하나의 폼으로 묶어 제출할 수 있습니다. 폼 제출 시 한번에 모든 데이터를 처리할 수 있습니다.
적용 가능한 수식:
사용자로부터 여러 항목을 입력받고, 제출 버튼을 누르면 처리하는 방식으로 사용합니다.

@st.dialog("Welcome!")
다이얼로그를 정의하여 사용자와 상호작용할 수 있습니다.
특징:
@st.dialog() 데코레이터를 사용하여 다이얼로그 창을 생성하고, 그 안에 원하는 콘텐츠를 삽입할 수 있습니다.
적용 가능한 수식:
다이얼로그 상자 내에 다양한 UI 요소를 배치할 수 있습니다.

@st.dialog("Welcome!")
def modal_dialog():
    st.write("Hello, welcome to our app!")


@st.fragment
코드 블록을 함수로 분리하여 재사용할 수 있습니다.
특징:
@st.fragment 데코레이터를 사용하여 특정 코드 조각을 재사용할 수 있는 함수로 만들 수 있습니다.
적용 가능한 수식:
데이터 시각화나 버튼 등의 기능을 재사용 가능한 함수로 정의할 수 있습니다.

@st.fragment
def fragment_function():
    df = get_data()
    st.line_chart(df)
    st.button("Update")

Display Interactive Widgets
사용자와의 상호작용을 위한 다양한 위젯들을 제공합니다.
st.button("Click me")
st.download_button("Download file", data)
st.link_button("Go to gallery", url)
st.page_link("app.py", label="Home")
st.data_editor("Edit data", data)
st.checkbox("I agree")
st.feedback("thumbs")
st.pills("Tags", ["Sports", "Politics"])
st.radio("Pick one", ["cats", "dogs"])
st.segmented_control("Filter", ["Open", "Closed"])
st.toggle("Enable")
st.selectbox("Pick one", ["cats", "dogs"])
st.multiselect("Buy", ["milk", "apples", "potatoes"])
st.slider("Pick a number", 0, 100)
st.select_slider("Pick a size", ["S", "M", "L"])
st.text_input("First name")
st.number_input("Pick a number", 0, 10)
st.text_area("Text to translate")
st.date_input("Your birthday")
st.time_input("Meeting time")
st.file_uploader("Upload a CSV")
st.audio_input("Record a voice message")
st.camera_input("Take a picture")
st.color_picker("Pick a color")

# Use widgets' returned values in variables:
for i in range(int(st.number_input("Num:"))):
    foo()
if st.sidebar.selectbox("I:",["f"]) == "f":
    b()
my_slider_val = st.slider("Quinn Mallory", 1, 88)
st.write(slider_val)

# Disable widgets to remove interactivity:
st.slider("Pick a number", 0, 100, disabled=True)

st.button("Click me")
버튼을 생성하여 클릭 이벤트를 처리합니다.
특징:
사용자가 버튼을 클릭하면 지정된 동작을 실행할 수 있습니다.
적용 가능한 수식:
버튼 클릭에 따른 이벤트를 처리합니다.
if st.button("Click me"):
    st.write("You clicked the button!")


st.download_button("Download file", data)
파일 다운로드 버튼을 생성합니다.
특징:
버튼을 클릭하면 파일을 다운로드할 수 있습니다.
적용 가능한 수식:
사용자가 생성된 파일을 다운로드할 수 있게 처리합니다.
적용 가능한 수식:

st.download_button("Download CSV", data=csv_data, file_name="data.csv")


st.link_button(label, url)
역할:
URL로 연결되는 버튼을 생성합니다.
특징:
버튼 클릭 시 사용자가 지정된 URL로 이동합니다.
적용 가능한 수식:

st.link_button("Go to gallery", "https://www.example.com")


st.page_link(url, label)
앱 내에서 다른 페이지로 이동할 수 있는 링크를 만듭니다.
특징:
url: 이동할 페이지의 경로.
label: 링크의 텍스트.
적용 가능한 수식:

st.page_link("app.py", label="Home")


st.data_editor(label, value)
사용자가 데이터를 편집할 수 있도록 허용하는 위젯입니다.
특징:
사용자가 DataFrame을 수정할 수 있게 해줍니다.
적용 가능한 수식:

st.data_editor("Edit data", data)


st.checkbox(label)
체크박스를 생성합니다. 체크박스의 상태를 통해 선택 여부를 확인할 수 있습니다.
특징:
label: 체크박스의 텍스트 레이블.
선택 시 True, 미선택 시 False를 반환합니다.
적용 가능한 수식:

if st.checkbox("I agree"):
    st.write("You agreed!")

st.feedback(type)
사용자에게 피드백을 표시하는 기능을 제공합니다. 예: 좋아요, 싫어요 등의 피드백.
특징:
type: "thumbs" (좋아요/싫어요)를 포함한 다양한 피드백 옵션이 있습니다.
적용 가능한 수식:

st.feedback("thumbs")


st.pills(label, options)
옵션을 탭처럼 선택할 수 있는 "Pills" UI를 생성합니다.
특징:
options: 선택할 수 있는 옵션 목록.
적용 가능한 수식:

st.pills("Tags", ["Sports", "Politics"])

st.radio(label, options)
라디오 버튼을 생성합니다. 여러 옵션 중 하나를 선택할 수 있습니다.
특징:
options: 라디오 버튼으로 선택 가능한 옵션 목록.
적용 가능한 수식:

st.radio("Pick one", ["cats", "dogs"])

st.segmented_control(label, options)
세그먼트 컨트롤을 생성하여 여러 선택 옵션 중 하나를 고를 수 있게 합니다.
특징:
options: 선택할 수 있는 옵션 목록.
적용 가능한 수식:

st.segmented_control("Filter", ["Open", "Closed"])

st.toggle(label)
토글 스위치를 생성합니다. 사용자에게 옵션을 켜거나 끌 수 있게 합니다.
특징:
선택 시 True, 선택하지 않으면 False.
적용 가능한 수식:

st.toggle("Enable")

st.selectbox(label, options)
드롭다운 메뉴에서 하나의 옵션을 선택할 수 있게 합니다.
특징:
options: 드롭다운에서 선택할 수 있는 옵션 목록.
적용 가능한 수식:

st.selectbox("Pick one", ["cats", "dogs"])

st.multiselect(label, options)
다중 선택이 가능한 드롭다운 메뉴를 제공합니다.
특징:
사용자가 여러 항목을 선택할 수 있습니다.
적용 가능한 수식:

st.multiselect("Buy", ["milk", "apples", "potatoes"])

st.slider(label, min, max)
사용자가 특정 범위 내에서 값을 선택할 수 있는 슬라이더를 생성합니다.
특징:
참고로 Streamlit에서 동일한 요소를 여러 번 사용하거나 키 값이 중복되는 경우 에러가 나기에 밑에 처럼 key 값을 줘야함

min, max: 슬라이더의 최소 및 최대 값.
적용 가능한 수식:

slider_value = st.slider("Pick a number", 0, 100, key="unique_slider_1")
st.write("Selected number:", slider_value)

st.select_slider(label, options)
여러 개의 선택 옵션 중 하나를 선택할 수 있는 슬라이더를 생성합니다.
특징:
options: 선택할 수 있는 옵션 목록.
적용 가능한 수식:

st.select_slider("Pick a size", ["S", "M", "L"])


st.text_input(label)
단일 줄 텍스트 입력 필드를 생성합니다.
특징:
사용자가 텍스트를 입력할 수 있습니다.
적용 가능한 수식:

st.text_input("First name")


st.number_input(label, min, max)
숫자 입력 필드를 생성합니다. 지정된 범위 내에서 숫자를 입력할 수 있습니다.
특징:
min, max: 입력 가능한 숫자의 범위.
적용 가능한 수식:


st.text_area(label)
여러 줄 텍스트를 입력할 수 있는 텍스트 영역을 생성합니다.
특징:
긴 텍스트를 입력할 때 유용합니다.
적용 가능한 수식:

st.text_area("Text to translate")


st.date_input(label)
날짜를 선택할 수 있는 입력 필드를 생성합니다.
특징:
날짜를 선택할 수 있는 캘린더 UI를 제공합니다.
적용 가능한 수식:

st.date_input("Your birthday")


st.time_input(label)
시간을 선택할 수 있는 입력 필드를 생성합니다.
특징:
시간을 입력할 수 있습니다.

st.time_input("Meeting time")


st.file_uploader(label)
파일 업로드 기능을 제공합니다.
특징:
사용자가 파일을 업로드할 수 있게 합니다.
적용 가능한 수식:

st.file_uploader("Upload a CSV")


st.audio_input(label)
오디오 입력을 받을 수 있는 기능을 제공합니다.
특징:
오디오를 녹음하거나 업로드할 수 있습니다.
적용 가능한 수식:

st.audio_input("Record a voice message")


st.camera_input(label)
카메라를 통해 사진을 찍을 수 있는 입력을 제공합니다.
특징:
카메라 입력을 받을 수 있습니다.
적용 가능한 수식:

st.camera_input("Take a picture")


st.color_picker(label)
색상을 선택할 수 있는 입력 필드를 제공합니다.
특징:
사용자가 색상을 선택할 수 있습니다.
적용 가능한 수식:

st.color_picker("Pick a color")


st.number_input(label)
사용자가 숫자를 입력할 수 있게 해주는 입력 필드입니다. 숫자 범위와 기본값을 설정할 수 있습니다.
특징:
label: 입력 필드에 표시될 텍스트.
숫자 범위(min, max)와 기본값(value)을 설정할 수 있습니다.
반환 값은 숫자 형식으로 반환됩니다.
적용 가능한 수식:

for i in range(int(st.number_input("Num:"))):
    foo()  # 사용자가 입력한 숫자만큼 반복문 실행


st.sidebar.selectbox(label, options)
사이드바에 드롭다운 메뉴를 생성하여, 사용자가 여러 옵션 중 하나를 선택할 수 있게 합니다.
특징:
label: 드롭다운 메뉴의 제목.
options: 선택 가능한 항목 목록.
선택된 항목을 반환하며, 기본적으로 첫 번째 옵션이 선택됩니다.
적용 가능한 수식:

if st.sidebar.selectbox("I:", ["f"]) == "f":
    b()  # "f"가 선택되면 함수 b() 실행


st.slider(label, min, max)
슬라이더를 생성하여 사용자가 지정된 범위 내에서 숫자를 선택할 수 있게 합니다.
특징:
label: 슬라이더의 텍스트 레이블.
min, max: 슬라이더의 최소값과 최대값.
사용자가 선택한 값은 숫자로 반환됩니다.
적용 가능한 수식:

my_slider_val = st.slider("Quinn Mallory", 1, 88)
st.write(my_slider_val)  # 슬라이더에서 선택한 값 출력


st.slider(label, min, max, disabled=True)
슬라이더를 생성하지만 비활성화하여 사용자와의 상호작용을 막을 수 있습니다.
특징:
disabled=True: 슬라이더를 비활성화하여 값 변경이 불가능하게 만듭니다.
다른 위젯과 동일하게 텍스트 레이블과 범위가 설정됩니다.
적용 가능한 수식:

st.slider("Pick a number", 0, 100, disabled=True)  # 비활성화된 슬라이더


여기까지!