docs/project_plan.md

# RAG5_2_ChooseLLM 프로젝트 계획서

## 프로젝트 개요
이 프로젝트는 RAG(Retrieval-Augmented Generation) 기반 검색 챗봇으로, 지식베이스에서 관련 정보를 검색하여 사용자 질의에 답변합니다. 주요 특징으로는 OpenAI와 DeepSeek 등 다양한 LLM을 선택하여 사용할 수 있는 기능과 장치 관리 기능을 제공합니다.

## 주요 기능
1. 지식베이스 관리
   - 문서 업로드 (.txt, .md, .csv 등)
   - 문서 청크 분할 및 벡터 인덱싱
   - 지식베이스 문서 목록 조회

2. LLM 선택
   - OpenAI, DeepSeek 등 다양한 LLM 선택 가능
   - LLM 변경 시 실시간 전환
   - 현재 사용 중인 LLM 정보 표시

3. 챗봇 기능
   - 텍스트 기반 질의응답
   - 음성 인식 및 질의응답 (VITO STT 활용)
   - 검색 결과 정보 출처 표시

4. 장치 관리 기능
   - 로컬 PC와 통신하는 기능
   - 장치 상태 확인 및 장치 목록 조회
   - 프로그램 목록 조회 및 실행

## 기술 스택
- **백엔드:** Flask (Python)
- **프론트엔드:** HTML, CSS, JavaScript
- **LLM 통합:** OpenAI API, DeepSeek API
- **검색 기능:** 벡터 검색, 재순위화
- **STT 서비스:** VITO API
- **통신 프로토콜:** RESTful API

## 완료된 작업
- [X] 프로젝트 기본 구조 설정
- [X] Flask 웹 서버 구현
- [X] 다중 LLM 인터페이스 구현 (OpenAI, DeepSeek)
- [X] 사용자 인증 기능 구현
- [X] 벡터 검색 및 재순위화 기능 구현
- [X] 문서 처리 및 관리 기능 구현
- [X] 웹 인터페이스 구현
- [X] 장치 관리 기능 통합
- [X] 장치 관리 UI 구현
- [X] 장치관리 탭 클릭 이벤트 버그 수정

## 진행해야 할 작업
- [ ] LLM 선택 UI 개선
  - 드롭다운에 아이콘 추가
  - 각 LLM별 상세 모델 정보 표시
- [ ] 응답 내 소스 링크 클릭 시 원문 표시 기능
- [ ] 응답 속도 개선
- [ ] 오류 처리 강화
- [ ] 테스트 케이스 작성 및 유닛 테스트 구현
- [ ] 사용자 가이드 문서 작성

## 통합 구현 내용

### 1. 웹앱 통합
- 단일 웹 애플리케이션에 RAG 검색 챗봇과 장치 관리 기능 통합
- 탭 기반 인터페이스로 기능 분리 (대화, 문서관리, 장치관리)
- Flask를 통한 중앙 집중식 서버 관리

### 2. 장치 관리 기능
- 장치 상태 확인 기능
- 연결된 장치 목록 조회
- 실행 가능한 프로그램 목록 조회 및 실행
- 서버와의 RESTful API 통신

### 3. 프론트엔드 구현
- 직관적인 사용자 인터페이스
- 실시간 상태 업데이트
- 에러 처리 및 사용자 피드백 제공
- 반응형 디자인 적용

## 최근 버그 수정

### 장치관리 탭 작동 문제 해결
**문제 상황:** UI에서 장치관리 버튼이 전혀 작동하지 않는 문제 발생

**원인 분석:**
1. HTML 문제: 
   - `device-style.css` 파일이 HTML에 링크되어 있지 않음
2. JavaScript 문제:
   - `app.js`에서 deviceTab 이벤트 리스너가 제대로 등록되지 않음
   - `app-device.js`와 `app.js` 간의 함수 공유에 문제 발생

**해결 방법:**
1. HTML 수정:
   - `device-style.css` 파일을 HTML의 head 섹션에 링크 추가
   - 장치관리 탭을 위한 직접적인 이벤트 핸들러를 HTML 내부 스크립트로 추가
2. 이벤트 핸들링 개선:
   - 장치관리 탭에 직접 onclick 이벤트 핸들러 추가하여 기존 문제 우회
   - 디버깅용 콘솔 로그 추가로 문제 추적 가능하게 함

**수정 파일:**
- `app/templates/index.html`: CSS 링크 및 직접 이벤트 핸들러 추가
- `docs/project_plan.md`: 문제 해결 과정 문서화

## 파일 구조
```
RAG5_2_ChooseLLM/
├── app/
│   ├── app.py                   # 메인 Flask 애플리케이션
│   ├── app_routes.py            # 기본 라우트 정의
│   ├── app_device_routes.py     # 장치 관리 관련 라우트
│   ├── static/
│   │   ├── css/
│   │   │   ├── style.css        # 기본 스타일시트
│   │   │   └── device-style.css # 장치 관리 스타일시트
│   │   └── js/
│   │       ├── app.js           # 메인 JavaScript
│   │       └── app-device.js    # 장치 관리 JavaScript
│   └── templates/
│       ├── index.html           # 메인 페이지 템플릿 (수정됨)
│       └── login.html           # 로그인 페이지 템플릿
├── data/                        # 업로드된 문서 저장
├── docs/                        # 프로젝트 문서
├── retrieval/                   # 검색 관련 모듈
└── utils/                       # 유틸리티 모듈
```

## 환경 변수 설정
- `ADMIN_USERNAME`: 관리자 사용자명 (기본값: admin)
- `ADMIN_PASSWORD`: 관리자 비밀번호 (기본값: rag12345)
- `DEVICE_SERVER_URL`: 장치 관리 서버 URL (기본값: http://localhost:5050)
- `OPENAI_API_KEY`: OpenAI API 키
- `DEEPSEEK_API_KEY`: DeepSeek API 키
- `VITO_API_KEY`: VITO STT API 키

## 참고 사항
- 장치 관리 서버는 별도로 실행되어야 함 (포트 5050)
- OpenAI, DeepSeek 및 VITO API 키는 .env 파일에 설정해야 함
- 초기 로그인 계정 정보는 환경 변수에 설정하거나 기본값 사용
- 장치관리 탭 클릭 시 콘솔 로그를 확인하여 이벤트 처리 상태 검증 가능