1. 프론트엔드 ↔ 백엔드 연결 흐름

1. 사용자 인터랙션

   • index.html → app.js 로딩
   • JavaScript 내 API.analyzeEmotion(formData) 호출

2. Flask 서버 (server.py)

   @app.route('/api/analyze', methods=['POST'])
   @login_required
   def analyze_emotion():
       # 1) 업로드된 이미지 파일 수신
       # 2) PIL로 읽어서 transforms → Tensor
       # 3) 로드된 PyTorch 모델로 추론
       # 4) PAD, VIBE 코드 계산
       # 5) 분석 결과 & 일기 텍스트 생성 → DB 저장
       # 6) JSON으로 반환
   

3. 결과 표시 (app.js)

   • 반환된 JSON(vibe_code, emotions, pad_values, journal_text 등)을 받아
   • DOM 업데이트 → 차트, 카드, 일기 모달 띄움

2. 모델 적용 방법(진행 중)

1. 모델 파일 위치

   • models/ 폴더에 .pth 파일을 넣으세요.
   • server.py 상단의 MODEL_PATH = '/workspace/models/best_face_effnet_smooth.pth' 를 실제 경로로 수정합니다.

2. 모델 로드 로직

   def load_emotion_model():
       # (예)
       model = models.efficientnet_b2(pretrained=False)
       # ↓ classifier 레이어
       model.classifier = nn.Sequential(
           nn.Dropout(0.5),
           nn.Linear(in_features, len(CLASSES))
       )
       # 로드
       model.load_state_dict(torch.load(MODEL_PATH, map_location=DEVICE), strict=False)
       model.to(DEVICE).eval()
       return model
   

   • YOLO 같은 객체 탐지 모델을 추가하려면
     • torch.hub.load('ultralytics/yolov5', 'yolov5s') 등으로 또 하나의 함수(load_face_detector())를 만들고
     • analyze_emotion() 초반부에 detector(image) 로 얼굴만 크롭 → 후속 분류기로 넘기기.

3. API 확장

   • 현재 /api/analyze 하나만 있음
   • YOLO 성능 점검용으로 /api/detect_face 같은 엔드포인트를 추가
   • app.js 의 API 클래스에도 동일하게 메서드 추가하세요.

4. 프론트엔드 변경

   • app.js 에 analyzeEmotion() 호출 직전에

     // ex) 얼굴 탐지 + 분류 흐름일 경우
     await api.detectFace(formData).then(croppedBlob => {
       let fd2 = new FormData();
       fd2.append('file', croppedBlob, 'face.jpg');
       return api.analyzeEmotion(fd2);
     })
     

   • UI 상 버튼 / 로딩 텍스트 등 간단히 조정

3. 요약

• Flask(백엔드)
  • server.py 에서 모델 로드 && /api 엔드포인트 관리
  • static 파일(index.html, app.js, style.css) 자동 서빙
• Static SPA(프론트)
  • app.js 에서 fetch(API) → 결과 시각화
  • Chart.js, Fabric.js 등 활용
• 모델 적용 포인트
  1. models/에 모델 파일 배치
  2. load_emotion_model() 에서 로드 & analyze_emotion() 에서 사용
  3. (선택) YOLO 탐지 등 보조 모델은 별도 함수+엔드포인트로 추가
  4. app.js → API 메서드 확장 & 화면 로직 업데이트