docs/project_plan.md

RAG 챗봇 + LocalPCAgent 통합 프로젝트 계획

프로젝트 개요

기존 RAG 챗봇(Flask 기반)에 LocalPCAgent 제어 기능을 추가하는 통합 작업입니다. Gradio UI 코드의 기능을 Flask+HTML/JS 구조에 이식합니다.

완료된 작업

• 기본 Flask 기반 RAG 챗봇 백엔드 구현
• LocalPCAgent 제어를 위한 API 엔드포인트 추가 (app_device_routes.py)
• Flask 백엔드와 LocalPCAgent 간 통신 로직 구현
• 웹 UI에 LocalPCAgent 제어 화면 추가 (HTML/CSS)
• 웹 UI에서 LocalPCAgent 제어 기능을 위한 JavaScript 로직 구현
• 프로젝트 코드 정리 및 최적화
  • 불필요한 파일 및 코드 제거
  • 모듈화된 코드 구조 개선

프로젝트 구조 정리

• 주요 실행 파일을 확인하고 app_revised.py를 주 파일로 선택
• 애플리케이션 코드를 'app' 패키지로 모듈화:
  • 장치 제어 라우터: app/app_device_routes.py
  • 기본 API 라우터: app/app_routes.py
  • 검색기 초기화: app/init_retriever.py
• 프런트엔드 코드 통합:
  • templates/index.html에 장치 제어 UI 섹션
  • static/js/app-device.js에 장치 제어 JavaScript 코드
  • static/css/device-style.css에 장치 제어 스타일

현재 상태

코드 검토 결과 대부분의 통합 작업이 이미 완료된 상태입니다:

• Flask 백엔드에 LocalPCAgent API 엔드포인트가 구현되어 있습니다 (app_device_routes.py)
• 프론트엔드 UI에 장치 제어 탭이 추가되어 있습니다 (index.html)
• 장치 제어를 위한 JavaScript 로직이 구현되어 있습니다 (app-device.js)
• 기본 기능과 사용자 정의 명령어 실행 기능이 모두 구현되어 있습니다

추가 개발 계획: 장치 목록 조회 기능 추가

개발 목표

로컬PC에 연결된 장치(특히 COM 포트와 USB 장치)를 조회하는 기능을 추가합니다.

구현 요구사항

1. 로컬PC 장치 조회 Python 프로그램 개발

   • COM 포트 및 USB 장치 목록 조회
   • 장치별 상세 정보(제조사, 제품명, 시리얼 번호 등) 수집
   • 멀티 플랫폼 지원(Windows, Linux, macOS)

2. LocalPCAgent API 확장

   • 장치 목록 조회 API 엔드포인트 추가
   • 조회 결과 효율적인 전송 방식 구현

3. UI 확장

   • 장치 제어 탭에 장치 목록 조회 섹션 추가
   • 조회 결과 표시 UI 구현
   • 장치 타입별 필터링 기능 구현

기술 스택

• 백엔드: Python(pyserial, pyusb), Flask
• 프론트엔드: HTML, CSS, JavaScript
• 통신: REST API, JSON 포맷

구현 계획

1. 로컬PC 장치 조회 Python 스크립트 개발

   • scan_devices.py 스크립트 작성
   • 테스트 및 디버깅

2. LocalPCAgent에 통합

   • LocalPCAgent 프로그램 목록에 등록
   • API 엔드포인트 테스트

3. Flask 백엔드 API 확장

   • app_device_routes.py에 장치 조회 API 추가
   • 데이터 포맷 및 오류 처리 구현

4. 프론트엔드 UI 개발

   • index.html에 장치 목록 조회 섹션 추가
   • app-device.js에 장치 조회 관련 함수 추가
   • 필요시 CSS 스타일 추가

남은 작업

• 로컬PC 장치 조회 Python 스크립트 개발
• LocalPCAgent 서버에 장치 조회 기능 통합
• Flask 백엔드 장치 조회 API 구현
• 프론트엔드 UI 확장
• 전체 시스템 테스트 및 디버깅
• 최종 코드 리뷰 및 문서화 보완

파일 구조

• app_revised.py: 메인 Flask 애플리케이션
• app.py: 단순화된 진입점 (app_revised.py 호출)
• app/: 애플리케이션 모듈
  • __init__.py: 패키지 초기화
  • app_device_routes.py: LocalPCAgent 제어 API 라우트
  • app_routes.py: 기본 RAG 챗봇 API 라우트
  • init_retriever.py: RAG 모델 초기화 코드
• static/: 정적 파일
  • css/: 스타일시트
    • style.css: 기본 스타일
    • device-style.css: 장치 제어 스타일
  • js/: JavaScript 파일
    • app.js: 메인 JavaScript
    • app-core.js: 핵심 기능
    • app-device.js: 장치 제어 기능
    • app-docs.js: 문서 관리 기능
    • app-llm.js: LLM 관련 기능
• templates/: HTML 템플릿
  • index.html: 메인 애플리케이션 페이지
  • login.html: 로그인 페이지
  • loading.html: 로딩 페이지
• docs/: 프로젝트 문서
  • project_plan.md: 프로젝트 계획 문서
  • cleanup_plan.md: 코드 정리 계획 문서
• 신규 파일:
  • LocalPCAgent/programs/scan_devices.py: 장치 조회 Python 스크립트

LocalPCAgent 통합 요약

• 백엔드 API: app/app_device_routes.py에 구현

  • /api/device/status: 장치 서버 상태 확인
  • /api/device/connect: 사용자 지정 URL 연결
  • /api/device/list: 장치 목록 조회
  • /api/device/programs: 실행 가능한 프로그램 목록 조회
  • /api/device/programs/<program_id>/execute: 등록된 프로그램 실행
  • /api/device/execute-custom: 사용자 정의 프로그램 실행
  • 추가 예정: /api/device/scan-ports: COM 포트 및 USB 장치 목록 조회

• 프런트엔드: 기능 완성

  • 장치 제어 탭 UI: templates/index.html에 구현
  • JavaScript 로직: static/js/app-device.js에 구현
  • 스타일: static/css/device-style.css에 구현

주의사항

• JavaScript는 직접 LocalPCAgent와 통신하지 않고 Flask 백엔드를 통해 통신
• 모든 장치 관련 API는 인증된 사용자만 접근 가능 (login_required 데코레이터 적용)
• 로깅 코드 유지하여 디버깅 용이하게 함