Streamlit
Python으로 만드는 AI 대시보드 — CCTV 실시간 탐지 · 인터랙티브 그래프
CLICK TO OPEN
Python으로 만드는 AI 대시보드 — CCTV 실시간 탐지 · 인터랙티브 그래프
CLICK TO OPEN
설치 & 기본 함수 · CCTV YOLO 탐지 · 컬럼 레이아웃 + 실시간 그래프
Streamlit 개요 & 설치
Streamlit 개요 & 설치
Streamlit은 Python만으로 웹 앱 뚝딱 만드는 마법 도구, HTML·CSS·JS 몰라도 AI 데모·대시보드·실시간 탐지 화면 즉시 제작, streamlit run 한 줄로 브라우저 실행
설치
앱 실행 방법
주요 st.* 함수
| 함수 | 역할 |
|---|---|
st.set_page_config() | 페이지 레이아웃·제목 설정 |
st.title() | 앱 제목 표시 |
st.empty() | 나중에 내용을 채울 빈 공간 예약 |
st.columns(n) | 화면을 n개 컬럼으로 분할 |
st.warning() | 경고 메시지 출력 |
placeholder.image() | 예약 공간에 이미지(프레임) 갱신 |
placeholder.plotly_chart() | 예약 공간에 Plotly 그래프 갱신 |
기본 CCTV 탐지
기본 CCTV 실시간 탐지 (v20_01_streamlit_basic.py)
CCTV 영상을 AI 눈으로 실시간 감시하는 앱, cv2.VideoCapture로 스트림 연결 → YOLO가 찾은 사람·차량을 빈 액자(st.empty())에 한 장씩 덮어쓰기
쉽게 말하면
CCTV 화면을 빈 액자에 1초에 여러 장씩 갈아끼우는 슬라이드 쇼, 갈아끼우기 직전에 AI가 사진을 보고 사람·차·동물에 네모 박스 그려서 보여주기
단계별 흐름 (6단계 레시피)
① 페이지 설정 → ② 영상 액자 자리 비워두기 → ③ CCTV 연결 → ④ YOLO 모델 불러오기 → ⑤ 프레임마다 탐지·표시 → ⑥ 끝나면 정리
전체 코드
포인트
• st.set_page_config(layout="wide") — 반드시 코드 최상단에 위치해야 동작
• st.empty() — placeholder를 만들고 루프 안에서 .image()로 계속 덮어써 실시간 효과
• channels="BGR" — OpenCV 기본 색상 순서가 BGR이므로 Streamlit에서 올바르게 표시하려면 명시 필요
• st.button()·st.sidebar — 인터랙티브 컨트롤·사이드바 위젯 추가
컬럼 레이아웃 + 실시간 그래프
컬럼 레이아웃 + Plotly 실시간 그래프 (v20_02_streamlit_graph.py)
화면을 좌우 2칸으로 쪼개기, 왼쪽엔 CCTV 영상 + 오른쪽엔 탐지 개수 막대 그래프 동시 표시, Plotly로 매 프레임 그래프 자동 갱신
쉽게 말하면
화면을 책 펼친 모양으로 좌·우 두 페이지 분할, 왼쪽 페이지엔 CCTV 라이브 영상 + 오른쪽 페이지엔 "지금 사람 3명·차 2대" 같은 실시간 카운트 그래프
전체 코드
포인트
• st.columns(2) — 화면을 동일 너비 2개 컬럼으로 분할, with 블록으로 각 컬럼에 위젯 배치
• results[0].boxes.cls — YOLO 탐지 결과에서 클래스 인덱스 추출, model.names[int(c)]로 이름 변환
• value_counts().reset_index(name="Count") — 객체별 등장 횟수를 DataFrame으로 변환
• @st.cache_resource — 무거운 AI 모델 딱 한 번만 불러오기 (매번 새로 읽으면 느려짐 → 캐시에 저장 후 재사용)
• key=f"chart_{time.time()}" — 매 프레임 고유 key를 부여해 Streamlit 위젯 갱신 오류 방지