1. config.toml 파일 정의 및 생성
2. config.toml 파일 설정
오늘은 Streamlit 개발 환경을 설정하는 방법 중 하나인 config.toml 파일에 대해 알아보도록 하겠습니다.
1. config.toml 정의
config.toml 파일은 Streamlit 애플리케이션을 설정하기 위한 파일입니다. 이 파일을 통해 애플리케이션의 외관, 동작 및 기타 설정을 조정할 수 있습니다. 파일의 생성 위치는 .streamlit/config.toml 입니다. 이 파일은 특정한 위치에 있어야만 Streamlit이 그 내용을 인식하므로, 생성 위치에 주의해야 합니다. 프로젝트를 처음 만들게되면 .streamlit 이 없기때문에 이전에 디렉터리를 생성하지 않은 경우 추가해줘야합니다.
2. config.toml 파일 설정
다양한 설정이 가능하지만 제가 이번에 프로젝트를 진행하면서 사용한 설정을 중심으로 다루도록 하겠습니다.
1) toolbarMode
[client] 에서 설정 가능한 항목으로 앱 오른쪽 상단의 옵션 메뉴 및 설정 대화상자 에서 항목의 가시성을 변경합니다.
(1) "auto"
자동으로 설정되는 기본값이며 로컬 호스트, streamlit 커뮤니티 클라우드에서 앱에 액세스하는 경우 개발자 옵션을 표시하고 그렇지 않으면 숨깁니다.
2) "developer"
Deploy와 Clear cache 를 포함한 개발자 옵션을 같이 보여줍니다
3) "viewer"
위에서 나왔떤 개발자 옵션을 제외한 나머지 옵션들만 보여줍니다.
4) "minimal"
st.set_page_config 에서 설정한 옵션만 보여줍니다. 옵션이 있지않다면 메뉴를 숨깁니다.
자세한 설명에 앞서 st.set_page_config에 대해 설명하고 넘어가도록 하겠습니다.
st.set_page_config 는 streamlit에서 제공하는 페이지의 기본 설정을 구성할때 사용합니다. 이는 앱 페이지에서 사용되는 첫 번째 streamlit 명령이어야 하며 페이지당 한 번만 설정해야 합니다. Page_title, icon, layout, menu_items 를 다룰 수 있습니다. 아래는 공식 문서에 있는 예시 코드입니다.
import streamlit as st
st.set_page_config(
page_title="Ex-stream-ly Cool App",
page_icon="🧊",
layout="wide",
initial_sidebar_state="expanded",
menu_items={
'Get Help': 'https://www.extremelycoolapp.com/help',
'Report a bug': "https://www.extremelycoolapp.com/bug",
'About': "# This is a header. This is an *extremely* cool app!"
}우리가 여기서 주목해야 할 점은 menu_items 입니다. 위의 코드를 작성한 후 toolbarMode를 "minimal"로 설정하면 아래 사진과 같은 결과를 얻을 수 있습니다.
기존에 기본으로 제공되던 옵션과 개발자 옵션이 모두 사라지고 st.set_page_config에서 추가한 메뉴들만 반영된 모습을 볼 수 있습니다. 당연히 클릭하면 입력해둔 문구를 띄워주거나 링크로 이동하게 됩니다. 그렇다면 이 menu_items에 아무것도 입력하지 않는다면 어떻게 될까요?
우측 상단에 원래 기본으로 제공되던 옵션이 아에 안보이는 모습을 볼 수 있습니다. 제가 진행중인 프로젝트도 사용자에게 옵션을 제공하지 않기때문에 위와 같은 방법을 적용하였습니다. 추가적으로 제일 상단위 라인이 거슬리는 분들은 css를 사용 적용해서 숨기면됩니다.
st.markdown(
"""
<style>
header[data-testid="stHeader"] {
visibility: hidden;
height: 0%;
}
</style>
""",
unsafe_allow_html=True
)
2) base
[theme] 에서 설정 가능한 항목으로 사용자 정의 테마가 상속하는 미리 설정된 Streamlit 테마입니다. 기본적으로 "light"와 "dark" 두가지를 제공하고 둘 중 하나를 선택 해서 무난하게 사용해도 되지만 자신이 배경을 커스텀 하고 싶다면 "base"가 아니라 "primaryColor", "backgroundColor" 등 [theme] 에서 제공하는 다양한 설정들을 이용하면 됩니다.