머신러닝 & 딥러닝

 Streamlit

- 프론트엔드 서버: 사용자와 웹 애플리케이션의 인터페이스 역할

• 웹 사이트나 웹 애플리케이션의 사용자 경험을 담당하는 서버

• 주로 사용자가 웹 브라우저를 통해 접속하는 화면이나 UI를 제공

• 사용자의 요청을 백엔드 서버로 전달하는 중요한 중개 역할

 

- 진행 방법

• 사용자가 웹 브라우저에서 프론트엔드 서버로 요청하면, 프론트엔드 서버는 HTML, CSS, JAVASCRIPT 같은 파일을 사용자에게 제공

• 프론트엔드는 주로 사용자에게 데이터를 보여주는 역할을 하며 화면에 표현하는 데이터는 백엔드에 요청해서 받아 옴

 

- Streamlit: 데이터 어플리케이션을 쉽고 빠르게 만들 수 있도록 도와주는 파이썬 기반의 프레임워크

• 자체적으로 프론트엔드 서버 역할을 수행

• 사용자와 상호작용(UI 제공)

• 사용자 입력처리(사용자가 입력한 데이터를 즉시 처리하고 그 결과를 화면에 표시)

• 실시간 데이터 표시

 

- 간단한 함수 설명

• write(): 다양한 유형의 콘텐츠를 표시할 수 있는 함수(텍스트, 데이터 프레임 등)

• write_stream(): 생성기나 스트림을 타자기 효과로 실시간 업데이트하면서 출력

• markdown(): 마크다운 형식으로 텍스트를 표시

• title(): 제목 형식으로 텍스트를 표시

• header(): 헤더 형식으로 텍스트 표시

• subheader(): 서브헤더 형식으로 텍스트 표시

• caption(): 작은 글씨로 텍스트 표시

• code(): 코드 블록을 표시하며, 구문 강조도 지원

• echo(): 코드 블록을 화면에 표시한 후 실행

• latex(): LaTeX 형식으로 수학 표현식을 표시

• text(): 고정 폭의 글꼴로 텍스트를 표시

• divider(): 수평선 표시

• button(): 버튼을 표시하고 클릭 여부를 반환

• download_button(): 파일을 다운로드할 수 있는 버튼 표시

• checkbox(): 체크박스를 표시하고 선택 여부를 반환

• radio(): 라디오 버튼을 표시하고 선택된 항목을 반환

• slider(): 슬라이더를 표시하고 숫자를 선택하게 함

• text_input(): 한 줄짜리 텍스트 입력창을 표시

• image(): 이미지 파일이나 URL을 표시

• audio(): 오디오 파일을 표시

• video(): 비디오 파일을 표시

import streamlit as st

st.set_page_config(
    page_title = 'Hello'
)

st.write('### 안녕하세요 반갑습니다!')

st.sidebar.success('데모 선택')

st.markdown(
"""
Streamlit은 머신 러닝 및 데이터 과학 프로젝트를 위해 특별히 제작된 오픈 소스 앱 프레임워크입니다..
### 자세히 알아보고 싶으신가요?
- streamlit.io](https://streamlit.io)
- [설명서](https://docs.streamlit.io)
- [커뮤니티 포럼](https://discuss.streamlit.io)에서 질문하기
"""
)

st.code('a=123')

name = st.text_input('이름')

print("name", name)

st.write(name)

터미널에 pip install streamlit 입력해서 설치를 먼저 진행한다. 이후 위 코드를 작성하고 streamlit run '해당 코드 파일명'.py 명령어를 입력하면 사이트가 띄워진다.

 

탭 부분에 Hello로 타이틀이 잘 출력되고 있고, 마크다운 형식으로 글자가 적용된 것을 확인할 수 있다.

또한 코드 탭에서 code()에 넣은 문자열이 출력되고 있다. 해당 블록의 오른쪽 상단쪽에 마우스를 대면 복사해서 바로 사용할 수 있는 버튼이 있다.

마지막으로 text_input 창에 이름을 입력하면 이를 그대로 출력시켜주는 기능까지 잘 구현되었다.

일반적인 웹 사이트 구현 방법으로 진행했다면 코드도 길어지고 복잡했을텐데 확실히 간단하게 구현 되는 것을 확인할 수 있다.

import streamlit as st
import os
from openai import OpenAI
from dotenv import load_dotenv

load_dotenv()
OPENAI_API_KEY = os.getenv('OPENAI_API_KEY')

# API 연결
client = OpenAI(api_key = OPENAI_API_KEY)

# 화면 구성, 데이터 처리, api 연동
st.title('ChatGPT')

# 대화 내용의 저장
# messages => []


# openai => GPT 모델 변수로 저장
if 'openai_model' not in st.session_state:     # 저장소
    st.session_state.openai_model = 'gpt-5.2'

# 대화 내용의 저장
# messages => []
# messages 초기 세팅
if 'messages' not in st.session_state:
    st.session_state.messages = []

# 기존 데이터 출력
for msg in st.session_state.messages:
    with st.chat_message(msg['role']):
        st.markdown(msg['content'])

if prompt := st.chat_input('메시지를 입력하세요!') :
    st.session_state.messages.append(
        {
            'role' : 'user',
            'content' : 'prompt'
        }
    )
    with st.chat_message('user'):
        st.markdown(prompt)
    
    with st.chat_message('assistant'):
        stream = client.chat.completions.create(
            model = st.session_state.openai_model,
            messages = [
                {
                    "role" : m['role'],
                    "content" : m['content']
                } 
                for m in st.session_state.messages
            ],
            stream = True
        )

        response = st.write_stream(stream)

        st.session_state.messages.append(
            {
                "role" : "assistant",
                "content" : response
            }
        )

streamlit과 어제 배웠던 openai를 활용해서 아주아주 간단한 chatbot을 만들어보았다.

필요한 라이브러리를 impor하고 api 키를 불러온다. 이후 모델을 정하고 세션 저장 역할을 하는 session_state에 대화 기록을 저장하도록 구현해준다.

이후 prompt := 부분에서 사용자의 입력을 받은 뒤에, 유저 메시지를 대화기록에 저장한다. 그리고 chatgpt api를 호출해서 스트리밍 방식으로 답변을 받는데, 답변이 한 글자씩 화면에 출력되도록 한다.

이런 식으로 코드를 작성하면 아래와 같이 화면이 구성된다.

오늘까지해서 머신러닝과 딥러닝 부분의 강의가 끝이 났는데 OpenAI 모듈을 사용했던 어제, 오늘이 가장 어려웠던 것 같다. 내일은 이 부분을 중점적으로 복습할 예정이다! 플젝도 파이팅!