[7] streamlit toggle 이용한 form 자동완성

들어가며

🏫 전체 강의 영상

📕 포켓몬 도감 실습 프로젝트

 ▶️  강의 영상

 

유저가 처음 페이지에 진입했을 때, 폼이 텅 비어있으면 어떻게 채워야 할지 당황스럽겠죠? 이번 챕터에서는 streamlit toggle을 이용해서 미리 정의한 데이터로 폼을 자동완성하는 기능을 구현해보겠습니다.

 

데이터 준비

먼저 폼을 자동으로 채워줄 예시 데이터를 준비하겠습니다.

example_pokemon = {
    "name": "알로라 디그다",
    "types": ["땅", "강철"],
    "image_url": "https://storage.googleapis.com/firstpenguine-coding-school/pokemons/alora_digda.webp"
}

 

st.toggle

toggle은 쉽게 말해서 껐다 켰다 할 수 있는 버튼입니다. 켜져 있을 때에는 True, 꺼져있을 때에는 False를 리턴해줍니다.

streamlit toggle 문서: https://docs.streamlit.io/library/api-reference/widgets/st.toggle

포켓몬을 추가하는 폼 바로 위에 자동완성을 적용할지 말지 입력하는 토글을 추가해보겠습니다.

auto_complete = st.toggle("예시 데이터로 채우기")
with st.form(key="form"):
	...

예시 데이터로 폼 채워넣기

form안에 들어있는 text_input, multiselect 같은 위젯들은 기본 값을 지정할 수 있습니다. 이 때, auto_complete가 켜져있을 때에만 기본 값을 갖도록하여 자동완성 기능을 구현할 수 있습니다.

with st.form("form"):
		...
		with col1:
        name = st.text_input(
            label="포켓몬 이름",
            value=example_pokemon["name"] if auto_complete else ""
        )
    with col2:
        types = st.multiselect(
            label="포켓몬 속성",
            options=list(type_emoji_dict.keys()),
            max_selections=2,
            default=example_pokemon["types"] if auto_complete else []
        )
    image_url = st.text_input(
        label="포켓몬 이미지 URL",
        value=example_pokemon["image_url"] if auto_complete else ""
    )

그 다음 예시 데이터로 채우기를 눌러보면 미리 정의해 둔 알로라 디그다의 데이터로 폼이 채워지는 것을 확인할 수 있습니다.

정리

이번 챕터에서는 streamlit toggle을 이용해서 폼 자동완성을 구현해봤습니다. streamlit으로 주로 개발하는 앱들은 유저의 입력을 받아서 데이터 분석 혹은 AI 모델 인퍼런스 결과를 제공하는 것들입니다. 이 때, 폼 자동완성 기능은 상당히 유용하게 사용되므로 잘 익히고 넘어가겠습니다.