[대회/데이콘-새싹톤🌱] pre. 챗봇 만들기 학습(5) : 스트림릿을 활용한 LLM 모델 실행 - 스트림릿(Streamlit) 사용법

1. 스트림릿(Streamlit) 소개

1.1. 스트림릿(Streamlit) 이란?

데이터 과학자와 머신러닝 엔지니어를 위해 설계된 오픈소스 파이썬 라이브러리

복잡한 웹 개발 지식 없이 간단한 파이썬 스크립트만으로 예쁘고 인터랙티브한 '데이터를 활용 웹 애플리케이션'을 빠르게 제작 가능

• 간편한 사용 : 파이썬 코드 몇 줄만으로도 바로 웹 애플리케이션 실행 가능
• 빠른 개발 속도 : 데이터 과학자와 개발자가 익숙한 파이썬 언어를 사용해 빠르게 프로토타입을 만들 수 있음

1.2. 개발 환경

Pycharm, VScode 등의 IDE 이용해 작업

** jupyterlab, colab 등의 환경에서는 작업하기 어려울 수 있음

 

스트림릿 설치 전, 파이썬 가상환경 구축 필요

( EX - pyenv, anaconda 등 )

 

> 파이참의 예시

1.3. 스트림릿 설치

터미널에서 pip 명령어 이용해 간단하게 설치

터미널은 파이참 화면의 왼쪽 아래에 버튼 누르면 이용 가능

 

설치 코드

pip install streamlit

 

 

2. Hello world

2.1. 라이브러리 불러오기

파이썬 코드

streamlit은 st로 주로 사용

import streamlit as st

st.title('Hello, world!')
st.write('Welcome to your first Streamlit app.')

 

2.2. 제목과 텍스트 입력

st.title(text)

• 이 함수는 애플리케이션의 가장 큰 상단에 큰 제목을 표시하는데 사용
• 제목을 표시할 때, HTML 의 h1 태그와 유사하게 작동
• 사용방법 : 파라미터에 '제목에 들어갈 내용'을 넣어준다.

st.write(*arg)

• 다양한 형식의 텍스트나 데이터를 화면에 출력하는데 사용
• 다재다능 : 단순 텍스트, 데이터프레임, 마크다운, LaTeX, JSON 등 여러 형식을 지원
• 내부적으로는 입력된 데이터를 적절한 형식으로 변환해 출력

2.3. 실행 방법 (1)

커맨드 창에 아래 명령어 입력

streamlit run app.py

 

2.4. 실행 방법 (2)

1. 파이참 오른쪽 상단 : Run/Debug configuration 을 들어간다
2. 새로운 실행환경을 '+' 버튼 눌러 만든다
3. 아래 그림과 같이 Run 명령어를 입력
4. 입력이 끝난 후, RUN 버튼을 누른다

 

➡️ 실행버튼을 누르면 로컬 PC 에서 웹사이트를 실행

링크 ) http://localhost:8501/

아래와 같은 페이지를 확인하면 성공

 

 

3. 유저 입력

3.1. 유저의 입력 받기

파이썬 코드

유저의 입력을 받고, 버튼을 눌러 입력한 데이터를 처리해보자

import streamlit as st

if st.button('Say Hello'):
    st.write('Hello!')

age = st.slider('나이를 선택하세요', 0, 100, 25)
st.write('나이:', age)

name = st.text_input('이름을 입력하세요')
st.write('안녕하세요,', name, '님!')

option = st.selectbox('옵션을 선택하세요', ['옵션 1', '옵션 2', '옵션 3'])
st.write('선택된 옵션:', option)

 

st.text_input()

• 사용자로부터 텍스트 입력을 받을 수 있는 텍스트 입력 상자를 생성하는데 사용

if st.button('Submit')

• 버튼을 if문과 함께 사용하면, 버튼을 클릭했을 시, if문 내부의 코드를 실행하게 된다

st.slider()

• 슬라이더로, 수치형 변수를 막대를 이용해 유저가 데이터를 입력할 수 있다

st.selectbox()

• 셀렉트박스로, 유저가 미리 설정해 놓은 옵션을 선택할 수 있다

3.2. 실행 결과

실행 결과 화면

 

 

4. 여러가지 텍스트 입력 방법

4.1. 텍스트 함수 설명

파이썬 코드

텍스트 관련 코드 실행

import streamlit as st

st.header('섹션 헤더')
st.subheader('하위 섹션 헤더')
st.markdown('**굵은 텍스트** 및 *기울임 텍스트*')
st.latex(r''' a + ar + ar^2 + ar^3 + \cdots + ar^n = \sum_{k=0}^{n} ar^k ''')
st.code('print("Hello, Streamlit!")', language='python')

 

st.header(text)

• 섹션 헤더를 출력합니다

st.subheader(text)

• 하위 섹션 헤더를 출력합니다

st.markdown(text)

• 마크다운 텍스트를 출력합니다

st.latex(r'ax + b')

• LaTex 문법으로, 수식을 출력합니다

st.code('print("Hello world!")', language='python')

• 코드 블럭을 만들어 줍니다

4.2. 실행 결과

실행 결과 화면

 

 

5. 데이터 시각화

5.1. 데이터 시각화 함수

파이썬 코드

스트림릿은 데이터를 시각화하는 기능을 제공합니다

import streamlit as st
import pandas as pd
import numpy as np

df = pd.DataFrame(
    np.random.randn(10, 5),
    columns=('col %d' % i for i in range(5)))

st.dataframe(df)
st.line_chart(df)

 

st.dataframe(df)

• 데이터프레임을 표 형태로 표현합니다

st.line_chart(df)

• 데이터를 이용해 선 그래프를 그립니다

5.2. 실행 결과

실행 결과 화면

 

 

6. 컬럼 사용

6.1. 컬럼 사용 방법

파이썬 코드

컬럼 레이아웃을 작성합니다

import streamlit as st

# 애플리케이션 제목
st.title('컬럼 레이아웃 예제')

# 세 개의 컬럼 생성
col1, col2, col3 = st.columns(3)

# 컬럼 1: 기본 문구 표시
with col1:
    st.header('첫 번째 컬럼')
    st.write('이곳은 첫 번째 컬럼입니다.')

# 컬럼 2: 기본 문구 표시
with col2:
    st.header('두 번째 컬럼')
    st.write('이곳은 두 번째 컬럼입니다.')

# 컬럼 3: 기본 문구 표시
with col3:
    st.header('세 번째 컬럼')
    st.write('이곳은 세 번째 컬럼입니다.')

 

st.columns 함수를 사용해 컬럼을 만들어준다

col1, col2, col3 = st.columns(3)

 

with col1

: 블록 내부에 코드를 작성해 컬럼에 데이터프레임을 표시

with col1:
	st.header('데이터프레임')

 

6.2. 실행 결과

실행 결과 화면

 

 

7. 사이드바 사용

7.1. 사이드바 설명

파이썬 코드

사이드바 : 화면 한쪽에 공간을 따로 분리하여 사용하는 공간

import streamlit as st
import pandas as pd
import numpy as np


# 사이드바에서 사용자 입력 받기
st.sidebar.subheader('데이터 설정')
rows = st.sidebar.slider('행 수 선택', min_value=10, max_value=100, value=20, step=10)
cols = st.sidebar.multiselect('열 선택', ['A', 'B', 'C', 'D', 'E'], default=['A', 'B'])

st.sidebar.subheader('필터 설정')
filter_value = st.sidebar.number_input('필터 값 (기본 0)', min_value=-100.0, max_value=100.0, value=0.0, step=1.0)

# 데이터 생성
np.random.seed(0)
data = pd.DataFrame(
    np.random.randn(rows, 5),
    columns=['A', 'B', 'C', 'D', 'E']
)

# 선택된 열만 표시
data = data[cols]

# 필터 적용
filtered_data = data[data >= filter_value]

# 데이터프레임 및 통계 정보 표시
st.subheader('생성된 데이터')
st.dataframe(data)

st.subheader('필터 적용된 데이터')
st.dataframe(filtered_data)

st.subheader('기본 통계')
st.write(filtered_data.describe())

 

st.sidebar.title(text)

• 사이드바 제목

st.sidebar.subheader()

• 사이드바의 서브 제목

st.sidebar.slider()

• 사이드바의 슬라이더

st.sidebar.selectbox()

• 사이드바의 셀렉트박스

st.sidebar.multiselect()

• 사이드바의 멀티 셀렉트

st.sidebar.number_input()

• 사이드바의 숫자 입력

7.2. 실행 결과

실행 결과 화면

 

 

8. 이미지, 오디오, 비디오 삽입

8.1. 이미지 삽입

파이썬 코드

이미지 삽입 시, image() 함수를 사용 > 아래는 파라미터 설명

import streamlit as st
from PIL import Image

image = Image.open('path/to/image.jpg')
st.image(image, caption='Sample Image', use_column_width=True)

 

 

image

• 표시할 이미지 파일 경로, URL 또는 PIL 이미지 객체

caption

• 이미지 아래에 표시할 캡션 텍스트. 문자열 형식으로 입력합니다.

use_column_width

• 이미지의 너비를 스트림릿 애플리케이션의 컬럼 너비에 맞출지 여부. True 로 설정하면 이미지가 컬럼 너비에 맞춰진다.

8.2. 오디오 삽입

파이썬 코드

오디오를 불러온다

st.audio(image, format='audio/wav', start_time=0)

 

data

• 오디오 데이터를 지정합니다.
• 파일 경로, URL, BytestIO 객체 등을 사용할 수 있습니다.
• 즉, 딥러닝 모델의 출력이 음성인 경우에도 사용할 수 있습니다.

format

• 오디오 데이터의 형식을 지정합니다.
• 기본값은 'audio/wav' 입니다.

start_time

• 오디오 재생 시작 시간을 초 단위로 지정합니다.
• 기본값은 0입니다.

8.3. 비디오 삽입

파이썬 코드

비디오를 불러온다

st.video(data, format='video/mp4', start_time=0)

 

data

• 비디오 데이터를 지정합니다.
• 파일 경로, URL, BytestIO 객체 등을 사용할 수 있습니다.

format

• 비디오 데이터의 형식을 지정합니다.
• 기본값은 'video/mp4' 입니다.

start_time

• 오디오 재생 시작 시간을 초 단위로 지정합니다.
• 기본값은 0입니다.