총정리! Streamlit 설치, 사용법, 주요기능, Colab에서 Stremlit 실행하는법, config 디자인 설정

LLM 대회 준비하며 구현한 챗봇을 서버 띄우는 최종 작업으로 Streamlit을 구성하고 실시간 구동하는 것 까지 완료하였다.

나중에 나를 위한 참고용으로 적어본다.

---

Streamlit 이란?

• Python 프로그래밍 언어로 웹 애플리케이션을 빠르게 만들 수 있는 오픈 소스 라이브러리
• 주로 데이터 분석이나 기계 학습 모델을 웹에서 시각화하고 상호작용할 수 있는 대시보드를 만들 때 사용

Streamlit의 주요 특징:

 

1. 빠르고 직관적:

• Streamlit은 코드를 작성하는 것만으로 웹 애플리케이션을 쉽게 만들 수 있습니다. 복잡한 HTML, CSS, JavaScript를 직접 작성할 필요가 없다.

2. 자동 UI 생성:

• 사용자가 Python 코드로 시각화, 데이터 분석 등을 할 때, Streamlit은 자동으로 UI를 생성하여 사용자와의 상호작용을 처리한다. 예를 들어, 그래프, 테이블, 파일 업로드 기능 등을 쉽게 구현할 수 있다.

3. 실시간 업데이트:

• 코드가 변경될 때마다 자동으로 실시간으로 웹 페이지가 업데이트된다. 이 덕분에 데이터나 모델의 변화에 빠르게 반영할 수 있다.

---

Streamlit 설치

 터미널에서 다음 코드를 입력한다.

pip install streamlit

Streamlit 실행

app.py 이름의 파일로 앱을 만든다고 하자.(일반적으로 app.py라고 이름 설정)

스크립트를 실행하려면 터미널에서 다음 코드를 입력한다.

그럼 브라우저가 뜨면서 로컬 서버에 연결된 app.py Streamlit 앱이 열린다.

streamlit run app.py

---

Streamlit 문법

텍스트, 데이터 표시

• st.write(): 텍스트, 데이터프레임, 마크다운 등을 표시할 수 있는 만능 함수
• st.text(): 간단한 텍스트 표시
• st.markdown(): 마크다운 형식의 텍스트 표시
• st.code(): 코드 블록 표시
• st.latex(): LaTeX 수식 표시

위젯

• st.button() : 버튼
• st.checkbox() : 체크 박스
• st.radio(): 라디오 버튼
• st.selectbox(): 셀렉트 박스
• st.multiselect(): 멀티 셀렉트 박스
• st.slider(): 슬라이더
• st.text_input(): 입력 상자
• st.file_uploader(): 파일 업로드

데이터 표시

• st.dataframe(): 상호작용 가능한 데이터프레임
• st.table(): 정적 테이블
• st.line_chart(), st.bar_chart(), st.area_chart(): 차트 표시
• st.map(): 지도 표시

사이드바

내가 작성했던 코드

with st.sidebar:
    st.subheader("유저 정보")
    st.write(f"**User ID**: {user_id}")  # 고유한 user_id 표시
    st.write("새로운 대화를 시작하려면 아래 버튼을 클릭하세요.")
    st.button("Start New Chat")

# Streamlit 페이지 설정
st.set_page_config(page_title='🍊 PetJJu !')

 

이외에도 많은 구성 기능이 있다.

---

Streamlit 디자인 설정

디자인은 config.toml file을 .streamlit  숨겨진 디렉토리를 하나 생성해서 만들면된다.

 

.streamlit에 config.toml파일 생성하는 명령어

mkdir .streamlit

touch .streamlit/config.toml

 

나는 다음과 같이 설정하였다.

config.toml

---

Streamlit  Colab에서 열기

참가한 대회 시연환경이 colab이라고 해서 colab용으로도 코드를 작성해보았다.

 

1) 필요한 라이브러리 설치 및 Import

!pip install streamlit ngrok
!pip install streamlit localtunnel
!pip install pyngrok
!ngrok config add-authtoken <개인의 토큰 넣으면 됩니다>


from google.colab import drive
drive.mount('/content/drive')


!pip install langchain huggingface-hub
!pip install langchain langchain-huggingface langchain-google-genai transformers torch pinecone-client
# 필요한 라이브러리 설치
!pip install langchain langchain-huggingface langchain-google-genai transformers torch pinecone-client langchain-community

# 필요한 모듈 임포트
import os
import requests
import langchain_huggingface
from langchain.embeddings import HuggingFaceEmbeddings
from langchain.vectorstores import Pinecone
from pinecone import Pinecone as PineconeClient
import pandas as pd
from langchain_google_genai import ChatGoogleGenerativeAI
import torch
from transformers import AutoTokenizer, AutoModel
from langchain.prompts import PromptTemplate
from langchain.schema import HumanMessage

 

 

2) config 설정 및 ngrok 이용하여 브라우저로 Streamlit 실행

주소가 뜨고 주소 클릭하면 새 창 나타나면서 Streamlit 실행된다.

# 필요한 디렉토리 생성
!mkdir -p /content/drive/MyDrive/2024\ 빅콘테스트/.streamlit/

# config.toml 파일 생성
with open("/content/drive/MyDrive/2024 빅콘테스트/.streamlit/config.toml", "w") as f:
    f.write("""
[theme]
primaryColor="#0099CC"
backgroundColor="#DCDCDC" #"#FFE6B6"  #rightside
secondaryBackgroundColor="#FCA804"   #"#E2E2E2"#회색 /      # side bar
textColor="#000000"  # black
font="Open Sans" #"monospace"
    """)
    
    # .streamlit 디렉토리 내의 모든 파일 목록 출력
!ls -la "/content/drive/MyDrive/2024 빅콘테스트/.streamlit/"

from pyngrok import ngrok

# Streamlit을 8501 포트에서 실행합니다.
public_url = ngrok.connect(8501)
print(f"Streamlit public URL: {public_url}")

!streamlit run /content/drive/MyDrive/2024\ 빅콘테스트/app.py --server.port 8501