streamlit 공식 사이트

• 이번에 침수 예측 시스템을 개발하면서 이를 웹 및 애플리케이션으로 보여줌에 있어, 해당 라이브러리를 사용해보았습니다.

Streamlit

• streamlit 은 2019년에 개발된 머신러닝 프로토타이핑 및 웹 애플리케이션을 위한 오픈 소스 python 라이브러리이다.
• 기존의 웹 개발 경험 없이도 쉽게 데이터 시각화, 텍스트, 이미지, 그래프 등을 쉽게 조합하여 구성할 수 있습니다.

---

프로젝트에 사용한 코드

import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
import time
import matplotlib.colors as colors


def main():
    # streamlit으로 구축한 웹 사이트 해당 이미지 삽입
    st.image('물감자.jpg')

    # CSS 스타일 적용하여 selectbox 오른쪽 정렬 및 크기 조절
    st.markdown("""<style>.stSelectbox {text-align: right;width: 50px; /* 원하는 크기로 조절 */}</style>""", unsafe_allow_html=True)

    # selectbox 생성// streamlit 웹에서 선택 상자를 나타내는 메서드// 시간대를 선택하는 상자를 만들었습니다.
    selected_option = st.selectbox("시간 대를 입력하시오", ["실시간", "1시간 후",'2시간 후','3시간 후'],key='time_selectbox')
    # streamlit의 text_input 메서드를 통해 파이썬의 input 함수처럼 텍스트 데이터의 입력을 받을 수 있습니다.
    title = st.text_input(label='현재 살고 있는 지역은?',placeholder='여기에 입력해주세요')

    for i in df.GU_NAM:
        # 그 후, 기상청 API로 생성된 데이터 프레임의 값 중에서 위에 text_input()을 통해 생성된 이름과 같다면
        if title == i:
            result = df[df.GU_NAM == title]
            col3,col4 = st.columns(2)
            with col4:# column 4 에 담을 내용
                st.markdown("<span style='font-size:20px'> 침수 영향 전망</span>", unsafe_allow_html=True)
                
                st.write(impactive_forecast(result))
            with col3: # column 3 에 담을 내용
                result2 = data[data.GU_NAM == title]
                variable = '침수가 날 확률'# set the range for the choroplethvmin, 
                vmin, vmax = 0, 1
                norm = colors.Normalize(vmin=vmin, vmax=vmax)

                # create figure and axes for Matplotlib
                fig, ax = plt.subplots(1, figsize=(10, 6))
                
                # 전국 시군구 데이터를 가져오고,
                # geopandas를 통해 해당 데이터 프레임에 지리데이터가 포함이 되면 , 지도 시각화에 도움을 주는데,
                # 저희는 서울시의 지리 데이터에 predict_proba를 통해 구한 침수가 날 확률을 컬럼으로 사용 후, streamlit의 pyplot을 통해
                # 지도 시각화를 수행하였습니다.
                result2.plot(column=variable, cmap='Blues', linewidth=0.8, ax=ax, edgecolor='0.8',norm=norm)
                ax.axis('off')

                # add a title
                
                ax.set_title('실시간 '+str(df[df.GU_NAM == title].values[0][0])+' 침수 예측 ', fontdict={'fontsize': '25', 'fontweight': '3'})


                # Create colorbar as a legend
                sm = plt.cm.ScalarMappable(cmap='Blues', norm=plt.Normalize(vmin=vmin, vmax=vmax))
                sm._A = []  # empty array for the data range
                cbar = fig.colorbar(sm)  # add the colorbar to the figure
                st.pyplot(fig)
                
                col1, col2 = st.columns(2)
                if selected_option == '실시간':
                    col1.metric(label='실시간 '+str(df[df.GU_NAM == title].values[0][0]) + ' 강수량',
                            value=str(result.values[0][1]) + 'mm')
                    col2.metric(label='실시간 '+str(df[df.GU_NAM == title].values[0][0]) + ' 침수 확률',
                            value=str(round(result.values[0][6]*100, 4)) + '%')
                elif selected_option == '1시간 후': 
                    col1.metric(label='1시간 후 '+str(df[df.GU_NAM == title].values[0][0]) + ' 강수량',
                            value=str(result.values[0][1]) + 'mm')
                    col2.metric(label='1시간 후 '+str(df[df.GU_NAM == title].values[0][0]) + ' 침수 확률',
                            value=str(round(result.values[0][6]*100, 4)) + '%')
                elif selected_option == '2시간 후':
                    col1.metric(label='2시간 후 '+str(df[df.GU_NAM == title].values[0][0]) + ' 강수량',
                            value=str(result.values[0][1]) + 'mm')
                    col2.metric(label='2시간 후 '+str(df[df.GU_NAM == title].values[0][0]) + ' 침수 확률',
                            value=str(round(result.values[0][6]*100, 4)) + '%')
                else:
                    col1.metric(label='3시간 후 '+str(df[df.GU_NAM == title].values[0][0]) + ' 강수량',
                            value=str(result.values[0][1]) + 'mm')
                    col2.metric(label='3시간 후 '+str(df[df.GU_NAM == title].values[0][0]) + ' 침수 확률',
                            value=str(round(result.values[0][6]*100, 4)) + '%')
                

            if result.values[0][6] > 70:
                st.subheader('ㆍ 위험수준 대응요령')
                st.image('경고.png')
                
            elif result.values[0][6] > 50:
                st.subheader('ㆍ 위험수준 대응요령')
                st.image('주의.png')
            else:
                st.subheader('ㆍ 위험수준 대응요령')
                st.image('관심.png')
                
if __name__ == "__main__":
    main()

---

Streamlit import

• 우선 streamlit을 사용하기 위해서 패키지를 설치해야 한다.
• streamlit에서 추가적으로 지도 시각화하기 위해 folium_static도 import 해야 한다.
• pip install streamlit
• import streamlit as st
• from streamlit_folium import st_folium

Streamlit image

• streamlit에서 st.image를 통해 웹 사이트에 이미지를 삽입 가능
• st.image('이미지경로/이미지이름.jpg')

Streamlit Write

• streamlit에서 st.write를 통해 웹 사이트에 텍스트를 나타낼 수 있음.
• st.write('입력할 내용')

Streamlit selectbox

• streamlit에서는 st.selectbox를 통해 선택상자 생성 가능
• st.selectbox("입력할 내용", [선택할 내용],key='time_selectbox')

Streamlit columns

• streamlit에서는 st.columns를 통해 화면의 레이아웃 설정 가능
• st.columns(생성할 컬럼수)

Streamlit plot

• streamlit에서는 st.pyplot을 통해 시각화한 내용을 웹 사이트에 생성 가능
• st.pyplot(시각화할 데이터)

이와 같이 간단한 문법으로 좋은 웹사이트를 제작할 수 있습니다.