How: 메인 앱 진입점 + Chat 페이지 구현
프론트엔드 UI 개발 (Streamlit)
How: 메인 앱 진입점 + Chat 페이지 구현
통합 프로젝트 > 프론트엔드 UI 개발 (Streamlit)
- Streamlit 멀티페이지 앱의 진입점을 구현할 수 있다
- 채팅 페이지를 Agent와 연동하여 구현할 수 있다
- 도구 사용 로그를 UI에 표시할 수 있다
메인 앱 + Chat 페이지 구현
Step 1: core/bootstrap.py (서비스와 세션 상태)
- 서비스 초기화 (@st.cache_resource)
- session_state 기본값
- 페이지 공통 준비 함수 boot()
Step 2: app/main.py (진입점)
- boot() 호출
- 사이드바 구성
Step 3: app/pages/1_Chat.py
- 채팅 UI (st.chat_message + st.chat_input)
- Agent 호출 및 응답 표시
- 도구 사용 로그 (st.expander)
멀티페이지에서 두 번 걸려 넘어지는 자리
하나. 페이지가 main.py 를 import 하면 안 된다.
from app.main import init_services 는 두 가지 이유로 실패한다.
D1 이 만든 구조에서 app/ 에는 __init__.py 가 없어 패키지가 아니고, 설령 import 되더라도
app/main.py 는 모듈 최상단에서 st.set_page_config 를 부른다. 페이지가 자기 것을 먼저
부른 뒤이므로 두 번째 호출에서 StreamlitSetPageConfigMustBeFirstCommandError 가 난다.
서비스 초기화는 core/bootstrap.py 로 내리고 양쪽이 거기서 가져온다. 그러면 의존성이
UI 에서 core 로 한 방향으로만 흐르고, D1 에서 세운 원칙과도 맞는다.
둘. 페이지를 직접 열면 session_state 가 비어 있다.
pages/ 아래 스크립트는 main.py 를 실행하지 않는다. 브라우저에서 Chat 을 먼저 누르면
st.session_state.messages 에 손대는 순간 예외가 난다. 각 페이지가 자기 첫머리에서
초기화를 부르게 해야 한다. 여기서는 boot() 안에 넣어 한 줄로 끝냈다.
대화 이력을 실제로 넘긴다
agent.run(prompt) 만 부르면 매 질문이 첫 질문이 된다. "그 설비의 센서는?" 같은 뒷말이
풀리지 않는다. 화면에 쌓인 session_state.messages 를 LangChain 메시지로 바꿔
history 로 넘겨야 한다. 이때 이번 질문을 목록에 넣기 전에 이력을 만들어야 같은 문장이
두 번 실리지 않는다.
힌트 보기
- • 서비스 초기화는 core/bootstrap.py로 내리고 main.py와 각 페이지가 거기서 가져온다
- • pages/ 스크립트는 main.py를 실행하지 않으므로 각 페이지가 session_state를 직접 초기화해야 한다
- • st.set_page_config는 페이지당 한 번만 부를 수 있다
- • session_state에 messages를 저장해야 페이지 재실행 시 이력 유지
- • history를 agent.run에 넘겨야 앞 턴의 설비를 가리키는 뒷말이 풀린다
- • st.expander로 도구 사용 로그를 접을 수 있게
정답 보기
AI에게 Streamlit 멀티페이지 진입점과 LangGraph Agent를 연동한 채팅 페이지 코드를 한 번에 생성시키세요.
Streamlit 멀티페이지 앱의 app.py 진입점과 pages/1_Chat.py 채팅 페이지를 작성해줘. 채팅 페이지는 st.session_state로 대화 히스토리를 유지하고, 사용자 메시지를 LangGraph Agent에 넘겨 스트리밍 응답을 st.write_stream으로 출력하며, 어떤 도구가 호출됐는지 expander로 보여줘야 해.