AI MARK 파일 구조 완전분석: 핵심 파일과 역할 정리 + 활용 팁

📋 완전한 파일 구조 분석 보고서 (업데이트)

 

🏗️ CORE (백엔드/엔진) 영역 - 5개 파일

1. chat.py (메인 서버)

 

FastAPI 기반 멀티모달 AI 시스템

MultiModelManager: Bllossom-8B + Qwen2-VL + 감정분석

SSE 스트리밍, 메모리 관리, 세션 관리

브라우저 STT/TTS 전환 완료 (Whisper 제거됨)

 

2. models.py (더미 참조용)

 

안전 기본형 모델 매니저

 

MultiModelManager 사용

 

3. api_routes.py(확장 API)

 

이미지 스트림, 세션 관리, 파일 업로드

/image_stream, /sessions/*, /upload 엔드포인트

 

4. database.py (SQLite 유틸)

 

세션 히스토리, 복구, 복사, 통계 함수

 

5. core_utils.py (공용 유틸)

 

시스템 프롬프트 조합, 웹 검색 함수

 

🎨 UI/UX (프론트엔드) 영역 - 17개 파일

HTML 컴포넌트 (6개):

 

index.html - 메인 레이아웃

sidebar.html - 사이드바 패널

main-toolbar.html - 상단 툴바

chat-messages.html - 메시지 영역

chat-input.html - 입력창

custom-modal.html - 모달

 

CSS 스타일 (5개):

 

sidebar.css - 사이드바 스타일

main-toolbar.css - 툴바 스타일

chat-messages.css - 메시지 버블 스타일

chat-input.css - 입력창 스타일

custom-modal.css - 모달 스타일

 

JavaScript 모듈 (5개):

 

app.js - 엔트리 포인트, 헬스 SSE

chat.js - 채팅 SSE, 메시지 렌더링

session.js - 세션 관리, 파일 처리

ui_voice.js - 브라우저 STT/TTS

bridge.js - 컴포넌트 로더, 이벤트 버스

 

기타 (1개):

 

manifest.json - PWA 매니페스트

 

✅ 완전성 확인

이제 모든 파일이 확인되었습니다!

 

총 22개 파일 (CORE 5개 + UI/UX 17개)

bridge.js 파일도 정상 확인됨

컴포넌트 로딩 시스템 완비

 

🔄 시스템 동작 흐름

1. 초기화 순서:

bridge.js → 컴포넌트 HTML 로드 → Bus.emit('component:ready') → 각 모듈 init()

2. 채팅 흐름:

사용자 입력 → chat.js → SSE(/chat_stream_sse_fetch) → chat.py → 스트리밍 응답

3. 세션 관리:

session.js → API(/sessions/*) → database.py → SQLite 저장

🎯 주요 특징

백엔드:

 

Python FastAPI + SQLite

한국어 특화 (Bllossom-8B)

이미지 이해/생성 (Qwen2-VL + Stable Diffusion)

감정 분석 및 톤 조절

브라우저 음성 기능 (서버 Whisper 제거)

 

프론트엔드:

 

바닐라 JS 컴포넌트 시스템

모듈형 아키텍처 (PKC 네임스페이스)

반응형 디자인 (16px 기본 간격)

SSE 실시간 스트리밍

 

🚀 시스템 상태

완전한 모듈형 AI 챗봇 시스템이 확인되었습니다. 모든 파일이 정상적으로 업로드되어 있고, 의존성도 해결된 상태입니다.