영상 핵심 정리 — Streamlit으로 대시보드 만들기

이 영상은 Streamlit으로 제조 AI 어시스턴트의 사용자 인터페이스를 30분 만에 구성하는 방법을 실습한다. FastAPI 백엔드와 연결해 실시간 진단 결과를 대화형으로 표시하는 대시보드를 만든다.

1. 제조 AI 대시보드 핵심 코드

import streamlit as st
import requests

st.set_page_config(page_title='제조 AI 어시스턴트', layout='wide')

@st.cache_data(ttl=300)
def load_machines():
    return requests.get('http://api:8000/machines').json()

with st.sidebar:
    st.header('설비 선택')
    machines = load_machines()
    machine_id = st.selectbox('설비', machines)
    st.metric('현재 진동', '2.8g', '+0.3g')
    st.metric('온도', '72°C', '-2°C')

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.write(msg['content'])

if prompt := st.chat_input('알람 코드 또는 질문을 입력하세요'):
    st.session_state.messages.append({'role': 'user', 'content': prompt})
    with st.chat_message('assistant'):
        response = requests.post(
            'http://api:8000/diagnose',
            json={'machine_id': machine_id, 'alarm_code': prompt},
            stream=True
        )
        result = st.write_stream(response.iter_content(chunk_size=None))
    st.session_state.messages.append({'role': 'assistant', 'content': result})

2. 대시보드 레이아웃 구성

┌─ 사이드바 ─┬──────── 메인 영역 ──────────┐
│ 설비 선택  │  [탭1: AI 진단 채팅]        │
│ 실시간 KPI │  [탭2: 센서 실시간 차트]    │
│ 알람 목록  │  [탭3: 정비 이력 테이블]    │
└────────────┴────────────────────────────┘

함정 주의: Streamlit은 인터랙션마다 전체 스크립트를 재실행한다. @st.cache_resource 없이 AI 모델이나 DB 연결을 스크립트 최상단에 두면 사용자가 버튼을 클릭할 때마다 모델이 재로드돼 응답이 수십 초 걸린다. 무거운 리소스는 반드시 캐시해야 한다.

다음 task와의 연결

다음 reading 'Docker Compose로 LLM+벡터DB+UI 묶기'에서는 오늘 만든 Streamlit UI, FastAPI 백엔드, Chroma 벡터DB를 Docker Compose 단일 파일로 묶어 한 번에 실행하는 방법을 배운다. 서비스 간 네트워크 연결과 볼륨 마운트가 핵심이다.