38분
How: KG 시각화 + 문서 관리 페이지 구현
프론트엔드 UI 개발 (Streamlit)
How: KG 시각화 + 문서 관리 페이지 구현
통합 프로젝트 > 프론트엔드 UI 개발 (Streamlit)
학습 목표
- pyvis로 Knowledge Graph를 시각화할 수 있다
- 문서 업로드/관리 페이지를 구현할 수 있다
- 대시보드 페이지를 구현할 수 있다
나머지 3개 페이지 구현
Page 2: Documents (문서 관리)
- st.file_uploader로 PDF/TXT 업로드
- 업로드한 파일만 RAG Service 에 인덱싱 (
rag.load_files)
Page 3: Knowledge Graph
- 입력한 설비 ID 로
kg.find_related를 실제로 호출 - 돌려받은 노드/엣지를 pyvis 로 시각화
Page 4: Dashboard
- 값을 가진 쪽(서비스, settings)에서 직접 읽어 표시
- Plotly로 도구 사용 통계
성공 메시지는 성공한 뒤에만 띄운다
이 세 페이지에서 가장 흔한 실수는 호출을 주석으로 남긴 채 st.success("인덱싱 완료!") 를
띄우는 것이다. 화면은 정상으로 보이는데 아무것도 인덱싱되지 않았으므로, 학습자는 검색이
안 되는 이유를 엉뚱하게 검색 쪽에서 찾는다. 부르지 않았으면 성공을 말하지 않는다.
연결이 없는 상태라면 그 사실을 그대로 화면에 적는 편이 낫다 — KG 페이지가 Neo4j 미연결일
때 경고를 띄우고 문서 검색은 계속 쓸 수 있다고 알리는 것이 그 예다.
하드코딩된 값은 회수 자리를 끊는다
st.session_state.get("doc_count", 0) 은 아무도 그 키를 넣지 않으면 언제나 0을 보여 준다.
"llm_model": "gpt-4o-mini" 처럼 문자열로 박아 두면 설정을 바꿔도 화면은 그대로다.
값을 가진 쪽에서 읽는다 — 청크 수는 rag.document_count, 연결 상태는 kg.is_connected,
모델 이름은 settings.llm_model.
경로와 임시 파일
"/tmp/kg_graph.html" 은 Windows 에서 실패하고, 여러 사람이 동시에 열면 서로 덮어쓴다.
tempfile.TemporaryDirectory() 로 그때그때 만들어 쓰고 버린다.
에디터 로딩 중...
힌트 보기
- • 업로드한 파일만 인덱싱하려면 디렉터리 전체가 아니라 파일 경로 목록을 넘긴다
- • 호출을 주석 처리한 채 st.success를 띄우지 않는다 — 실제로 성공한 뒤에만 알린다
- • pyvis Network를 임시 디렉터리에 저장해 components.html로 표시 (/tmp 하드코딩 금지)
- • 없는 노드로 엣지를 걸면 pyvis가 그 자리에서 죽는다 — 양쪽이 다 있을 때만 건다
- • 대시보드 수치는 session_state가 아니라 서비스와 settings에서 읽는다
- • st.file_uploader에 accept_multiple_files=True로 다중 업로드
정답 보기
에디터 로딩 중...
AI로 학습하기 — 꿀팁
pyvis KG 시각화 + 문서 업로드 페이지 생성AI 학습 팁
AI에게 pyvis Knowledge Graph 시각화 페이지와 문서 업로드/RAG 인덱싱 페이지를 Streamlit 컴포넌트로 생성시키세요.
Streamlit pages/2_Knowledge_Graph.py와 pages/3_Documents.py를 작성해줘. KG 페이지는 Neo4j에서 설비·고장·부품 노드를 조회해 pyvis 그래프로 시각화하고, Documents 페이지는 PDF/텍스트 파일 업로드 시 ChromaDB에 임베딩하고 진행 상태를 progress bar로 보여줘야 해.
이 팁이 도움이 됐나요?