first commit

.gitignore

@@ -0,0 +1,39 @@
+# --- Python ---
+__pycache__/
+*.py[cod]
+*$py.class
+.venv/
+env/
+venv/
+ENV/
+*.log
+
+# --- Node / Next.js ---
+node_modules/
+.next/
+out/
+build/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# --- Environment Secrets ---
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*.pem
+
+# --- OS Specific ---
+.DS_Store
+.DS_Store?
+._*
+Thumbs.db
+
+# --- Model Artifacts (Large Files) ---
+backend/models/
+./backend/models/
+mbti_final.ipynb

Dockerfile

@@ -0,0 +1,24 @@
+# 1. Base 이미지 설정 (Python 3.10 slim 버전 사용)
+FROM python:3.10-slim
+
+# 2. 필수 시스템 패키지 설치
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# 3. 작업 디렉토리 설정
+WORKDIR /app
+
+# 4. 의존성 파일 복사 및 설치
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 5. 소스 코드 및 모델 공유 파일 복사
+COPY backend/ .
+
+# 6. Hugging Face Spaces 포트 설정 (기본 7860)
+ENV PORT=7860
+EXPOSE 7860
+
+# 7. FastAPI 서버 실행
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,76 @@
+---
+title: CommuniKate - MBTI AI Assistant
+emoji: 💬
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: false
+---
+
+# 💬 CommuniKate: MBTI AI 소통 전문가
+
+![Header](https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)
+
+> **"상대방의 마음을 읽고, 최적의 대화를 제안합니다."**  
+> CommuniKate는 정밀한 딥러닝 분석과 최신 LLM 기술을 결합하여 개인화된 MBTI 소통 전략을 제공하는 AI 어시스턴트입니다.
+
+---
+
+## 🚀 주요 기능
+
+- **🎯 메시지 분석:** 상대방의 메시지 속 언어적 습관을 분석하여 가장 유력한 MBTI 성향을 도출합니다.
+- **💡 맞춤형 조언:** 나의 성향과 상대방의 성향을 고려하여 갈등을 피하고 호감을 얻을 수 있는 답변 레시피를 제안합니다.
+- **🎭 실전 대화 시뮬레이션:** 특정 MBTI 성향을 가진 AI와 실시간으로 대화하며 커뮤니케이션 스킬을 연습합니다.
+- **🛡️ 실시간 AI 가이드:** 대화 도중 AI 코치가 상대방의 예상 반응과 최적의 말투를 실시간으로 조언합니다.
+
+## 🛠️ 기술 스택
+
+### **Backend (Analysis Engine)**
+- **Framework:** FastAPI
+- **ML Models:** 4x BERT Axis Ensembles (local), Google Gemma 4 (LLM)
+- **OCR:** Google Vision AI Integration
+
+### **Frontend (Modern Web)**
+- **Framework:** Next.js (App Router)
+- **Styling:** Premium Design System (Vanilla CSS / Tailwind)
+- **Visuals:** Recharts for dynamic personality mapping
+
+---
+
+## 📂 프로젝트 구조
+
+```text
+MBTI/
+├── backend/        # FastAPI 분석 엔진 및 모델 서비스
+├── frontend/       # Next.js 반응형 웹 대시보드
+├── Dockerfile      # Hugging Face 배포를 위한 이미지 설정
+└── README.md       # 통합 가이드 문서
+```
+
+## ⚙️ 시작하기
+
+### **로컬 환경 실행**
+
+**1. 백엔드 설정**
+```bash
+cd backend
+pip install -r requirements.txt
+python main.py
+```
+
+**2. 프론트엔드 설정**
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+---
+
+## 🌐 배포 정보
+
+- **Frontend:** Vercel (Next.js Optimized)
+- **Backend:** Hugging Face Spaces (Dockerized ML Env)
+
+---
+© 2026 CommuniKate Project. All rights reserved.

backend/main.py

@@ -0,0 +1,147 @@
+import os
+from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from typing import List, Dict, Optional
+import uvicorn
+import PIL.Image
+import io
+
+from services.classifier import MBTIClassifier
+from services.llm_service import LLMService
+from schemas import (
+    AnalyzeRequest, AnalyzeResponse, 
+    OCRResponse, 
+    ChatStartRequest, ChatStartResponse, 
+    ChatRequest, ChatResponse,
+    SimulateRequest, SimulateResponse
+)
+
+app = FastAPI(title="CommuniKate API")
+
+# CORS 설정 (Next.js 연동을 위해 필요)
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], # 개발 중에는 모두 허용, 운영 시에는 프론트엔드 도메인으로 제한 권장
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 모델 경로 설정
+BERT_MODEL_DIR = "models/bert_mbti_ver2"
+
+# 싱글톤 패턴으로 서비스 초기화
+classifier = MBTIClassifier(BERT_MODEL_DIR)
+llm_service = LLMService(model_name="gemma4:latest")
+
+@app.post("/api/analyze", response_model=AnalyzeResponse)
+async def analyze(request: AnalyzeRequest):
+    if not request.target_text.strip():
+        raise HTTPException(status_code=400, detail="메시지를 입력해주세요.")
+
+    probs = {}
+    axis_scores = {'I/E': 0, 'S/N': 0, 'T/F': 0, 'P/J': 0}
+    analysis_summary = ""
+    target_mbti = ""
+
+    if request.target_mbti_input == "자동 분석 (AI)":
+        if request.context_detail and request.context_detail.strip():
+            reasoning_result = await llm_service.analyze_mbti_with_reasoning(request.context_detail, request.target_text)
+            target_mbti = "심도 있는 분석 중"
+            analysis_summary = f"### 🧠 AI 정밀 상황 분석 리포트\n{reasoning_result}"
+        else:
+            analysis = classifier.predict(request.target_text)
+            target_mbti = analysis["mbti"]
+            confidence = analysis["confidence"]
+            probs = analysis["probabilities"]
+            analysis_summary = f"### 🎯 메시지 분석 결과: {target_mbti}\n**신뢰도: {confidence*100:.1f}%**"
+            
+            # 축 점수 계산
+            for mbti, p in probs.items():
+                if mbti[0] == 'I': axis_scores['I/E'] += p
+                if mbti[1] == 'S': axis_scores['S/N'] += p
+                if mbti[2] == 'T': axis_scores['T/F'] += p
+                if mbti[3] == 'P': axis_scores['P/J'] += p
+    else:
+        target_mbti = request.target_mbti_input
+        analysis_summary = f"### 👤 지정된 MBTI: {target_mbti}\n**사용자 직접 설정**"
+
+    # 답변 제안 생성
+    advice = await llm_service.generate_response(
+        request.my_mbti, target_mbti, request.situation, 
+        request.relationship, request.vibe, request.target_text
+    )
+
+    # 데이터 기반 분석 근거 추가
+    if request.target_mbti_input == "자동 분석 (AI)":
+        axis_data = ", ".join([f"{k}: {v*100:.1f}%" for k, v in axis_scores.items()])
+        reasoning_result = await llm_service.analyze_mbti_with_reasoning(
+            f"상황: {request.situation}, 관계: {request.relationship}, 분위기: {request.vibe}\n[메시지 분석 데이터] {axis_data}", 
+            request.target_text
+        )
+        analysis_summary += f"\n\n--- \n#### 🛡️ AI 전문가의 성향 분석 가이드\n{reasoning_result}"
+
+    return AnalyzeResponse(
+        analysis_summary=analysis_summary,
+        probabilities=probs,
+        axis_scores=axis_scores,
+        advice=advice
+    )
+
+@app.post("/api/ocr", response_model=OCRResponse)
+async def ocr(file: UploadFile = File(...)):
+    contents = await file.read()
+    image = PIL.Image.open(io.BytesIO(contents))
+    text = await llm_service.extract_text_from_image(image)
+    return OCRResponse(text=text)
+
+@app.post("/api/chat/start", response_model=ChatStartResponse)
+async def chat_start(request: ChatStartRequest):
+    history = []
+    coaching_tip = "대화를 시작했습니다. 메시지를 보내시면 AI 코칭이 시작됩니다."
+    
+    if request.ai_first:
+        greeting = await llm_service.generate_initial_greeting(
+            request.target_mbti, request.relationship, request.situation
+        )
+        history.append({"role": "assistant", "content": greeting})
+        coaching_tip = "AI가 먼저 인사를 건넸습니다. 대화를 이어가 보세요!"
+    
+    return ChatStartResponse(history=history, coaching_tip=coaching_tip)
+
+@app.post("/api/chat", response_model=ChatResponse)
+async def chat(request: ChatRequest):
+    if not request.user_input.strip():
+        return ChatResponse(history=[h.dict() for h in request.history], coaching_tip="메시지를 입력해 주세요.")
+    
+    import asyncio
+    history_dicts = [h.dict() for h in request.history]
+    
+    tasks = [
+        llm_service.chat_with_persona(
+            history_dicts, request.user_input, request.user_mbti, 
+            request.target_mbti, request.relationship, request.situation
+        ),
+        llm_service.get_coaching_tip(request.user_input, request.target_mbti, request.relationship)
+    ]
+    
+    response, coaching_tip = await asyncio.gather(*tasks)
+    
+    new_history = history_dicts + [
+        {"role": "user", "content": request.user_input},
+        {"role": "assistant", "content": response}
+    ]
+    
+    return ChatResponse(history=new_history, coaching_tip=coaching_tip)
+
+@app.post("/api/simulate", response_model=SimulateResponse)
+async def simulate(request: SimulateRequest):
+    reaction = await llm_service.simulate_reaction(
+        request.my_mbti, request.target_mbti_input, 
+        request.situation, request.relationship, request.advice_text
+    )
+    return SimulateResponse(reaction=reaction)
+
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 8000))
+    uvicorn.run(app, host="0.0.0.0", port=port)

backend/requirements.txt

@@ -0,0 +1,14 @@
+fastapi
+uvicorn[standard]
+python-multipart
+pydantic
+httpx
+pillow
+tensorflow
+transformers==4.48.3
+tf-keras
+torch
+numpy<2
+google-genai
+python-dotenv
+scikit-learn

backend/schemas.py

@@ -0,0 +1,58 @@
+from pydantic import BaseModel
+from typing import List, Dict, Optional, Union
+
+class AnalyzeRequest(BaseModel):
+    my_mbti: str
+    target_mbti_input: str
+    situation: str
+    relationship: str
+    vibe: str
+    context_detail: Optional[str] = ""
+    target_text: str
+
+class AnalyzeResponse(BaseModel):
+    analysis_summary: str
+    probabilities: Dict[str, float]
+    # plot_data: Optional[Dict] = None # Plotly data can be complex to send as JSON, better to regenerate in frontend or send as simplified list
+    axis_scores: Dict[str, float]
+    advice: str
+
+class OCRResponse(BaseModel):
+    text: str
+
+class ChatStartRequest(BaseModel):
+    ai_first: bool
+    user_mbti: str
+    target_mbti: str
+    relationship: str
+    situation: str
+
+class ChatStartResponse(BaseModel):
+    history: List[Dict[str, str]]
+    coaching_tip: str
+
+class ChatMessage(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    history: List[ChatMessage]
+    user_input: str
+    user_mbti: str
+    target_mbti: str
+    relationship: str
+    situation: str
+
+class ChatResponse(BaseModel):
+    history: List[ChatMessage]
+    coaching_tip: str
+
+class SimulateRequest(BaseModel):
+    my_mbti: str
+    target_mbti_input: str
+    situation: str
+    relationship: str
+    advice_text: str
+
+class SimulateResponse(BaseModel):
+    reaction: str

backend/services/classifier.py

@@ -0,0 +1,105 @@
+import tensorflow as tf
+import re
+import numpy as np
+import os
+from transformers import AutoTokenizer, TFDistilBertForSequenceClassification
+
+class MBTIClassifier:
+    def __init__(self, base_model_dir):
+        """
+        4개 바이너리 모델을 통합한 하이브리드 MBTI 분류기
+        :param base_model_dir: 4개 모델 폴더(ie, ns, tf, jp)가 들어있는 최상위 디렉토리
+        """
+        print(f"DEBUG: 하이브리드 엔진 통합 가동 중... ({base_model_dir})")
+        
+        # 4개 지표 모델 폴더명 정의
+        self.axis_map = {
+            'ie': 'mbti_model_ie',
+            'ns': 'mbti_model_ns',
+            'tf': 'mbti_model_tf',
+            'jp': 'mbti_model_jp'
+        }
+        self.model_names = list(self.axis_map.keys())
+        self.models = {}
+        
+        # 1. 토크나이저는 하나만 로드하여 공유 (메모리 최적화)
+        # 첫 번째 모델 폴더에서 토크나이저 로드
+        first_model_path = os.path.join(base_model_dir, self.axis_map[self.model_names[0]])
+        self.tokenizer = AutoTokenizer.from_pretrained(first_model_path)
+        
+        # 2. 4개의 독립 모델 로드
+        for name, folder in self.axis_map.items():
+            model_path = os.path.join(base_model_dir, folder)
+            print(f"DEBUG: '{name.upper()}' 전문 모델 로딩... ({model_path})")
+            # Safetensors(PyTorch) 모델을 TF로 로드하기 위해 from_pt=True 적용
+            self.models[name] = TFDistilBertForSequenceClassification.from_pretrained(model_path, from_pt=True)
+            
+        # 3. 지표별 라벨 매핑 (알파벳 순서: 0=Primary, 1=Secondary)
+        # E:0, I:1 / N:0, S:1 / F:0, T:1 / J:0, P:1
+        self.labels = {
+            'ie': ['E', 'I'],
+            'ns': ['N', 'S'],
+            'tf': ['F', 'T'],
+            'jp': ['J', 'P']
+        }
+        
+        # 4. 전체 16가지 유형 리스트 (합성용)
+        self.all_types = [
+            'ENFJ', 'ENFP', 'ENTJ', 'ENTP', 'ESFJ', 'ESFP', 'ESTJ', 'ESTP',
+            'INFJ', 'INFP', 'INTJ', 'INTP', 'ISFJ', 'ISFP', 'ISTJ', 'ISTP'
+        ]
+
+    def _clean_text(self, text):
+        # 텍스트 전처리: 소문자화 및 URL 제거 등
+        text = text.lower()
+        text = re.sub(r'http\S+|www.\S+', '', text)
+        return text
+
+    def predict(self, text):
+        cleaned = self._clean_text(text)
+        inputs = self.tokenizer(
+            [cleaned], 
+            truncation=True, 
+            padding=True, 
+            max_length=256, 
+            return_tensors="tf"
+        )
+        
+        # 1. 4개 모델 각각 예측 수행 및 확률 추출
+        axis_probs = {}
+        result_mbti = ""
+        
+        for name in self.model_names:
+            # DistilBERT는 token_type_ids를 지원하지 않으므로 필터링 후 전달
+            filtered_inputs = {k: v for k, v in inputs.items() if k != 'token_type_ids'}
+            outputs = self.models[name](filtered_inputs)
+            # Softmax를 통해 해당 축의 확률 계산 (예: [P(E), P(I)])
+            # [[logit_0, logit_1]] -> softmax -> [[p_0, p_1]]
+            probs = tf.nn.softmax(outputs.logits, axis=-1).numpy()[0]
+            axis_probs[name] = probs
+            
+            # 더 높은 확률의 문자를 결과에 추가
+            best_idx = np.argmax(probs)
+            result_mbti += self.labels[name][best_idx]
+            
+        # 2. 16유형 확률 합성 (Probabilistic Synthesis)
+        # 개별 축의 확률이 독립적이라고 가정하고 곱함
+        # P(MBTI) = P(Axis1) * P(Axis2) * P(Axis3) * P(Axis4)
+        full_probabilities = {}
+        for mbti in self.all_types:
+            # 각 자리 문자에 해당하는 확률을 찾아 곱함
+            p_ie = axis_probs['ie'][0 if mbti[0]=='E' else 1]
+            p_ns = axis_probs['ns'][0 if mbti[1]=='N' else 1]
+            p_tf = axis_probs['tf'][0 if mbti[2]=='F' else 1]
+            p_jp = axis_probs['jp'][0 if mbti[3]=='J' else 1]
+            
+            full_probabilities[mbti] = float(p_ie * p_ns * p_tf * p_jp)
+            
+        # 3. 최종 신뢰도 (조합된 결과의 확률)
+        confidence = full_probabilities[result_mbti]
+        
+        return {
+            "mbti": result_mbti,
+            "confidence": confidence,
+            "probabilities": full_probabilities
+        }

backend/services/llm_service.py

@@ -0,0 +1,291 @@
+import os
+import re
+import json
+import logging
+import asyncio
+import httpx
+import PIL.Image
+from typing import Optional, List, Union
+from dotenv import load_dotenv
+from google import genai
+from google.genai import types
+
+# 환경 변수 로드
+load_dotenv()
+
+# 로깅 설정
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
+    datefmt="%Y-%m-%d %H:%M:%S"
+)
+logger = logging.getLogger("LLMService")
+
+class LLMService:
+    def __init__(self, model_name: str = "gemma4:latest"):
+        self.provider = os.getenv("LLM_PROVIDER", "ollama").lower()
+        
+        # Ollama 설정
+        self.ollama_url = "http://localhost:11434/api/generate"
+        self.ollama_model = model_name
+        
+        # Google AI 설정
+        self.google_api_key = os.getenv("GOOGLE_API_KEY")
+        self.google_model = os.getenv("GOOGLE_MODEL_NAME", "models/gemma-4-31b")
+        
+        self.client = None
+        if self.provider == "google" and self.google_api_key:
+            try:
+                self.client = genai.Client(api_key=self.google_api_key)
+                logger.info(f"Gemma 4 엔진 초기화 완료 ({self.google_model})")
+            except Exception as e:
+                logger.error(f"Gemma 4 엔진 초기화 실패: {e}")
+                self.provider = "ollama"
+        
+        if self.provider == "ollama":
+            logger.info(f"Ollama 모드로 작동 중 ({self.ollama_model})")
+
+    async def generate_response(self, user_mbti, target_mbti, situation, relationship, vibe, user_input):
+        """상대방의 말에 대한 최적의 답변과 반응 예측 생성"""
+        system_instruction = "너는 MBTI 전문가이자 심리 상담가야. 제공된 상황에 맞춰 상대방과 원활한 대화를 이끌어 나갈 수 있는 전략적 답변을 제안해."
+        
+        prompt = f"""
+        [상황 정보]
+        - 나의 MBTI: {user_mbti}
+        - 상대방의 예상 MBTI: {target_mbti}
+        - 대화 상황: {situation}
+        - 관계 및 호감도: {relationship} (호감도: {vibe})
+        
+        [상대방의 메시지]
+        "{user_input}"
+        
+        [지침]
+        1. 수식 기호나 LaTeX 형식($...$)을 절대 사용하지 마십시오.
+        2. 단계 구분 시 유니코드 기호(→, ➜, ✔)를 사용하십시오.
+        3. {target_mbti} 성향 맞춤형 대화 리드법을 제시하십시오.
+        4. 상대방이 보일 수 있는 구체적인 예상 반응(Reaction) 3가지를 예측하십시오.
+        5. {user_mbti}로서 가장 자연스럽게 호감을 얻을 수 있는 조언을 포함하십시오.
+        6. 바로 사용 가능한 답변 예시를 2-3개 작성하십시오.
+        7. 답변은 마크다운 형식을 활용하되, 강조 기호(예: 강조)는 가독성을 해치므로 절대 사용하지 말고 줄바꿈과 유니코드 기호로만 문단을 구분하십시오.
+        """
+
+        return await self._call_llm(system_instruction, prompt)
+
+    async def analyze_mbti_with_reasoning(self, context, user_input):
+        """상황과 메시지를 분석하여 MBTI 추론"""
+        system_instruction = "너는 예리한 심리학자이자 MBTI 분석 전문가야. 텍스트 단서를 바탕으로 성격 유형을 논리적으로 추론해."
+        
+        prompt = f"""
+        [상세 상황 및 데이터]
+        {context}
+        
+        [상대방의 메시지]
+        "{user_input}"
+        
+        [지침]
+        1. 제공된 [딥러닝 모델 측정값]이 있다면, 해당 수치를 심리학적으로 해석하십시오. (예: I 성향 80%라면 고립된 사고가 아닌 깊은 성찰의 특징으로 해석 등)
+        2. {user_input} 문장에서 해당 MBTI와 일치하는 구체적인 언어적 단서(어미, 단어, 뉘앙스)를 찾아 분석하십시오.
+        3. 최종적으로 가장 확률이 높은 단 하나의 MBTI 유형을 결론으로 내십시오.
+        4. "데이터 분석 결과"와 "언어적 특징 근거" 섹션을 나누어 작성하십시오.
+        5. 마크다운 형식을 사용하되, 강조를 위한 별표(**)는 절대 사용하지 마십시오.
+        """
+        
+        return await self._call_llm(system_instruction, prompt)
+
+    async def extract_text_from_image(self, image_input: Union[str, PIL.Image.Image]) -> str:
+        """이미지(캡처본)에서 대화 텍스트 추출 (Gemma 4 Vision 활용)"""
+        if self.provider != "google" or not self.client:
+            return "OCR 기능은 Gemma 4 API 설정이 필요합니다."
+
+        system_instruction = "너는 텍스트 추출 및 OCR 전문가야. 대화 캡처 이미지에서 대화 내용만 정확하게 추출해."
+        prompt = "이미지 속의 대화 텍스트를 모두 추출해줘. 화자와 메시지 내용을 구분해서 출력해줘. 별도의 설명은 하지 말고 텍스트만 출력해."
+
+        try:
+            # 이미지 로드 (경로일 경�� PIL로 오픈)
+            if isinstance(image_input, str):
+                img = PIL.Image.open(image_input)
+            else:
+                img = image_input
+
+            loop = asyncio.get_event_loop()
+            response = await loop.run_in_executor(
+                None,
+                lambda: self.client.models.generate_content(
+                    model=self.google_model,
+                    contents=[img, prompt],
+                    config={'system_instruction': system_instruction}
+                )
+            )
+            return response.text.strip()
+        except Exception as e:
+            logger.error(f"Image OCR Error: {e}")
+            return f"이미지 분석 중 오류가 발생했습니다: {str(e)}"
+
+    async def simulate_reaction(self, user_mbti, target_mbti, situation, relationship, response_given):
+        """제안된 답변을 보냈을 때 상대방(target_mbti)의 반응 시뮬레이션"""
+        system_instruction = f"너는 {target_mbti} 성향을 가진 사람이야. 상대방의 메시지에 대해 너의 성격대로 반응해봐."
+        
+        prompt = f"""
+        [상황 정보]
+        - 나의 MBTI: {target_mbti} (분석된 성향)
+        - 상대방의 MBTI: {user_mbti}
+        - 우리 관계: {relationship}
+        - 상황: {situation}
+        
+        [상대방이 보낸 메시지]
+        "{response_given}"
+        
+        [지침]
+        1. {target_mbti}의 전형적인 사고 방식과 말투로 응답하십시오.
+        2. 속마음(생각)과 겉으로 하는 말(대화)을 구분해서 보여주십시오.
+        3. 이 메시지를 받았을 때의 감정 변화를 유니코드 기호와 함께 간략히 적어주십시오.
+        4. 마크다운 형식을 사용하되 강조 기호(**)는 사용하지 마십시오.
+        """
+        
+        return await self._call_llm(system_instruction, prompt)
+
+    async def chat_with_persona(self, history, user_input, user_mbti, target_mbti, relationship, situation):
+        """특정 MBTI 페르소나와 대화 수행 (히스토리 포함)"""
+        system_instruction = f"""
+        너는 {target_mbti} 성향을 가진 사람이고, 상대방({user_mbti})과는 {relationship} 관계야.
+        현재 상황은 {situation}이야.
+        
+        [지침]
+        1. {target_mbti}의 전형적인 말투, 단어 선택, 반응 스타일을 완벽하게 모사해.
+        2. 대화의 맥락(History)을 유지하며 자연스럽게 대화해.
+        3. 너무 장황하거나 가르치려 들지 말고, 실제 메신저 대화처럼 간결하고 생동감 있게 대답해.
+        4. 별표(**)와 같은 강조 기호는 가독성을 위해 절대 사용하지 마.
+        5. 수식 기호나 LaTeX 형식($...$)을 사용하지 마.
+        """
+
+        if self.provider == "google" and self.client:
+            try:
+                # Gradio 6+ 히스토리(dict)를 처리하여 텍스트 컨텍스트로 변환
+                full_context = ""
+                for msg in history:
+                    role = msg.get("role")
+                    content = msg.get("content")
+                    if role == "user":
+                        full_context += f"사용자: {content}\n"
+                    elif role == "assistant":
+                        full_context += f"나({target_mbti}): {content}\n"
+                
+                prompt = f"{full_context}사용자: {user_input}\n나({target_mbti}):"
+                
+                return await self._generate_via_google(system_instruction, prompt)
+            except Exception as e:
+                logger.error(f"Chat Error: {e}")
+                return "대화 중 오류가 발생했습니다."
+        else:
+            # Ollama용 히스토리 결합
+            full_context = ""
+            for msg in history:
+                role = msg.get("role")
+                content = msg.get("content")
+                if role == "user":
+                    full_context += f"User: {content}\n"
+                elif role == "assistant":
+                    full_context += f"Assistant: {content}\n"
+            
+            prompt = f"{system_instruction}\n\n{full_context}User: {user_input}\nAssistant:"
+            return await self._generate_via_ollama(prompt)
+
+            prompt = f"{system_instruction}\n\n{full_context}User: {user_input}\nAssistant:"
+            return await self._generate_via_ollama(prompt)
+
+    async def generate_initial_greeting(self, target_mbti, relationship, situation):
+        """설정된 상황에 맞춰 AI가 건넬 첫 인사 생성"""
+        system_instruction = f"너는 {target_mbti} 성향을 가진 사람이고, 상대방과는 {relationship} 관계야."
+        prompt = f"현재 상황은 '{situation}'이야. 이 상황에서 {target_mbti}답게 상대방에게 건넬 수 있는 자연스러운 첫 인사나 말을 한 문장으로 해줘. 별도의 설명이나 인사말 없이 실제 대사만 출력해."
+        return await self._call_llm(system_instruction, prompt)
+
+    async def get_coaching_tip(self, user_input, target_mbti, relationship):
+        """사용자 메시지에 대한 실시간 코칭 팁 생성"""
+        system_instruction = "너는 세계 최고의 커뮤니케이션 전문가이자 심리 상담가야."
+        prompt = f"""
+        [대화 상황]
+        사용자가 {target_mbti} 성향의 사람({relationship} 관계)에게 다음과 같은 메시지를 보냈어:
+        "{user_input}"
+        
+        [분석 및 조언 지침]
+        1. {target_mbti}의 성향을 고려할 때 이 메시지가 상대방에게 어떻게 느껴질지 예리하게 분석하십시오.
+        2. 상대방의 호감을 얻거나 대화를 원활하게 이어가기 위한 구체적인 수정 제안이나 팁을 제시하십시오.
+        3. 아주 정중하고 부드러운 전문 조언자 톤을 유지하십시오.
+        4. 결과는 마크다운 형식을 사용하되, 강조 기호(**)는 절대 사용하지 마십시오. 유니코드 기호(➜, ✔)를 활용하십시오.
+        """
+        return await self._call_llm(system_instruction, prompt)
+
+    async def _call_llm(self, system_text, user_text):
+        """공통 LLM 호출 인터페이스 (비동기)"""
+        if self.provider == "google" and self.client:
+            return await self._generate_via_google(system_text, user_text)
+        else:
+            # Ollama는 시스템 프롬프트를 일반 프롬프트 앞에 결합하여 전송
+            full_prompt = f"{system_text}\n\n{user_text}"
+            return await self._generate_via_ollama(full_prompt)
+
+    async def _generate_via_google(self, system_text, user_text):
+        try:
+            # Google SDK의 비동기 호출 (Thread 사용 혹은 직접 호출)
+            # 현재 SDK 버전에 따라 동기 함수일 경우를 대비해 run_in_executor 사용 가능
+            loop = asyncio.get_event_loop()
+            response = await loop.run_in_executor(
+                None, 
+                lambda: self.client.models.generate_content(
+                    model=self.google_model,
+                    contents=user_text,
+                    config={'system_instruction': system_text}
+                )
+            )
+            return self._clean_response(response.text)
+        except Exception as e:
+            logger.error(f"Gemma 4 호출 에러: {e}")
+            return "서비스 일시 점검 중입니다. (Gemma 4 API Error)"
+
+    async def _generate_via_ollama(self, prompt):
+        payload = {
+            "model": self.ollama_model,
+            "prompt": prompt,
+            "stream": False
+        }
+        try:
+            async with httpx.AsyncClient(timeout=30.0) as client:
+                response = await client.post(self.ollama_url, json=payload)
+                response.raise_for_status()
+                result = response.json().get('response', '')
+                return self._clean_response(result)
+        except Exception as e:
+            logger.error(f"Ollama 호출 에러: {e}")
+            return "로컬 엔진 연결에 실패했습니다. Ollama 실행 여부를 확인하세요."
+
+    def _clean_response(self, text: str) -> str:
+        """응답 데이터 정제 (Regex 활용)"""
+        if not text:
+            return ""
+
+        # 1. 별표(**) 강조 기호 제거 (정규표현식)
+        text = re.sub(r'\*\*', '', text)
+        
+        # 2. LaTeX 및 특수 기호 치환
+        replacements = {
+            r"\$\\rightarrow\$": " → ",
+            r"\\rightarrow": " → ",
+            r"\$\\leftarrow\$": " ← ",
+            r"\\leftarrow": " ← ",
+            r"\$\\Rightarrow\$": " ⇒ ",
+            r"\\Rightarrow": " ⇒ ",
+            r"\$\\checkmark\$": " ✔ ",
+            r"\\checkmark": " ✔ ",
+            r"\\text\{.*?\}": lambda m: m.group(0)[6:-1], # \text{내용} -> 내용
+            r"\\": "" # 남은 백슬래시 제거
+        }
+        
+        for pattern, replacement in replacements.items():
+            if callable(replacement):
+                text = re.sub(pattern, replacement, text)
+            else:
+                text = text.replace(pattern.replace("\\", ""), replacement) if "\\" in pattern else text.replace(pattern, replacement)
+                # 단순 replace 보완을 위해 다시 한번 처리
+                text = re.sub(pattern, replacement, text)
+
+        return text.strip()

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

frontend/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
+    "next": "16.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "recharts": "^3.8.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/src/app/globals.css

@@ -0,0 +1,118 @@
+@import "tailwindcss";
+
+:root {
+  --background: #f8fafc;
+  --foreground: #0f172a;
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --secondary: #10b981;
+  --accent: #f59e0b;
+  --card-bg: rgba(255, 255, 255, 0.8);
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --border: #e2e8f0;
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0f172a;
+    --foreground: #f8fafc;
+    --primary: #6366f1;
+    --card-bg: rgba(30, 41, 59, 0.8);
+    --glass-bg: rgba(15, 23, 42, 0.7);
+    --border: #334155;
+  }
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  overflow-x: hidden;
+}
+
+.premium-gradient {
+  background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
+}
+
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.card {
+  background: var(--card-bg);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.btn-primary {
+  background-color: var(--primary);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+  transform: scale(1.02);
+}
+
+.btn-secondary {
+  background-color: transparent;
+  border: 1px solid var(--border);
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.btn-secondary:hover {
+  background-color: var(--border);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}

frontend/src/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "CommuniKate | MBTI AI 소통 전문가",
+  description: "딥러닝 분석과 AI 코칭을 통한 MBTI 맞춤형 소통 가이드",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

frontend/src/app/page.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+import { useState } from "react";
+import { MessageSquare, BarChart3, Settings2, Sparkles, Send, Image as ImageIcon, Loader2 } from "lucide-react";
+import MbtiChart from "@/components/MbtiChart";
+import { post, uploadImage } from "@/lib/api";
+
+export default function Home() {
+  const [activeTab, setActiveTab] = useState<"analysis" | "chat">("analysis");
+  
+  // Analysis State
+  const [formData, setFormData] = useState({
+    my_mbti: "ENTJ",
+    target_mbti_input: "자동 분석 (AI)",
+    situation: "일상 대화",
+    relationship: "친구",
+    vibe: "호감/긍정적 😊",
+    context_detail: "",
+    target_text: "",
+  });
+  const [analysisResult, setAnalysisResult] = useState<any>(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingStatus, setLoadingStatus] = useState("");
+  const [ocrLoading, setOcrLoading] = useState(false);
+
+  // Chat State
+  const [chatSettings, setChatSettings] = useState({
+    user_mbti: "ENTJ",
+    target_mbti: "INFP",
+    relationship: "직장 동료/상사",
+    situation: "업무 지시를 받는 중이거나 피드백을 요구하는 상황",
+    ai_first: true,
+  });
+  const [chatHistory, setChatHistory] = useState<any[]>([]);
+  const [chatInput, setChatInput] = useState("");
+  const [coachingTip, setCoachingTip] = useState("");
+  const [chatLoading, setChatLoading] = useState(false);
+  const [reactionMsg, setReactionMsg] = useState("");
+
+  const handleAnalysisSubmit = async () => {
+    setLoading(true);
+    setLoadingStatus("메시지 속 성향 분석 중...");
+    try {
+      setTimeout(() => setLoadingStatus("최적의 답변 레시피 생성 중..."), 2000);
+      const result = await post("/analyze", formData);
+      setLoadingStatus("완료!");
+      setAnalysisResult(result);
+    } catch (error: any) {
+      alert(error.message);
+    } finally {
+      setLoading(false);
+      setLoadingStatus("");
+    }
+  };
+
+  const handleImageOCR = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files?.[0]) return;
+    setOcrLoading(true);
+    try {
+      const result = await uploadImage(e.target.files[0]);
+      setFormData({ ...formData, target_text: result.text });
+    } catch (error: any) {
+      alert("이미지 읽기 실패: " + error.message);
+    } finally {
+      setOcrLoading(false);
+    }
+  };
+
+  const startChat = async () => {
+    setChatLoading(true);
+    try {
+      const result = await post("/chat/start", chatSettings);
+      setChatHistory(result.history);
+      setCoachingTip(result.coaching_tip);
+    } catch (error: any) {
+      alert(error.message);
+    } finally {
+      setChatLoading(false);
+    }
+  };
+
+  const sendChatMessage = async () => {
+    if (!chatInput.trim()) return;
+    setChatLoading(true);
+    const userInput = chatInput;
+    setChatInput("");
+    try {
+      const result = await post("/chat", {
+        ...chatSettings,
+        history: chatHistory,
+        user_input: userInput,
+      });
+      setChatHistory(result.history);
+      setCoachingTip(result.coaching_tip);
+    } catch (error: any) {
+      alert(error.message);
+    } finally {
+      setChatLoading(false);
+    }
+  };
+
+  const simulateReaction = async () => {
+    if (!analysisResult?.advice) return;
+    setLoading(true);
+    try {
+      const result = await post("/simulate", {
+        my_mbti: formData.my_mbti,
+        target_mbti_input: analysisResult.analysis_summary.includes("기 분석 결과") ? "자동 분석" : formData.target_mbti_input,
+        situation: formData.situation,
+        relationship: formData.relationship,
+        advice_text: analysisResult.advice,
+      });
+      setReactionMsg(result.reaction);
+    } catch (error: any) {
+      alert(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main className="min-h-screen p-4 md:p-8 max-w-7xl mx-auto">
+      {/* Header */}
+      <header className="premium-gradient rounded-2xl p-8 mb-8 text-white shadow-xl animate-fade-in">
+        <h1 className="text-4xl font-extrabold mb-2 flex items-center gap-3">
+          <Sparkles className="w-8 h-8" />
+          CommuniKate: MBTI 소통 전문가
+        </h1>
+        <p className="text-white/80 text-lg">
+          정밀 성향 분석과 AI 코칭으로 당신의 대화를 최적화합니다.
+        </p>
+      </header>
+
+      {/* Tabs */}
+      <div className="flex gap-4 mb-8 bg-white/50 dark:bg-slate-900/50 p-1 rounded-xl w-fit glass">
+        <button
+          onClick={() => setActiveTab("analysis")}
+          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-bold transition-all ${
+            activeTab === "analysis" ? "bg-white dark:bg-slate-800 shadow-sm text-indigo-600" : "text-slate-500 hover:text-slate-700"
+          }`}
+        >
+          <BarChart3 className="w-5 h-5" />
+          분석 및 조언
+        </button>
+        <button
+          onClick={() => setActiveTab("chat")}
+          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-bold transition-all ${
+            activeTab === "chat" ? "bg-white dark:bg-slate-800 shadow-sm text-indigo-600" : "text-slate-500 hover:text-slate-700"
+          }`}
+        >
+          <MessageSquare className="w-5 h-5" />
+          연습하기 (AI 채팅)
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+        {activeTab === "analysis" ? (
+          <>
+            {/* Analysis Inputs */}
+            <div className="lg:col-span-4 space-y-6">
+              <section className="card space-y-4">
+                <h2 className="text-xl font-bold flex items-center gap-2 border-b pb-2">
+                  <Settings2 className="w-5 h-5 text-indigo-500" />
+                  설정 및 입력
+                </h2>
+                
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1">
+                    <label className="text-xs font-semibold text-slate-500">나의 MBTI</label>
+                    <select 
+                      value={formData.my_mbti}
+                      onChange={(e) => setFormData({...formData, my_mbti: e.target.value})}
+                      className="w-full p-2 rounded-lg border bg-white dark:bg-slate-800 outline-none focus:ring-2 focus:ring-indigo-500"
+                    >
+                      {["ISTJ", "ISFJ", "INFJ", "INTJ", "ISTP", "ISFP", "INFP", "INTP", "ESTP", "ESFP", "ENFP", "ENTP", "ESTJ", "ESFJ", "ENFJ", "ENTJ"].map(type => (
+                        <option key={type} value={type}>{type}</option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-xs font-semibold text-slate-500">상대방 MBTI</label>
+                    <select 
+                      value={formData.target_mbti_input}
+                      onChange={(e) => setFormData({...formData, target_mbti_input: e.target.value})}
+                      className="w-full p-2 rounded-lg border bg-white dark:bg-slate-800 outline-none focus:ring-2 focus:ring-indigo-500"
+                    >
+                      <option value="자동 분석 (AI)">메시지로 분석하기</option>
+                      {["ISTJ", "ISFJ", "INFJ", "INTJ", "ISTP", "ISFP", "INFP", "INTP", "ESTP", "ESFP", "ENFP", "ENTP", "ESTJ", "ESFJ", "ENFJ", "ENTJ"].map(type => (
+                        <option key={type} value={type}>{type}</option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-500">대화 상황</label>
+                  <select 
+                    value={formData.situation}
+                    onChange={(e) => setFormData({...formData, situation: e.target.value})}
+                    className="w-full p-2 rounded-lg border bg-white dark:bg-slate-800 outline-none focus:ring-2 focus:ring-indigo-500"
+                  >
+                    {["처음 만난 사이 (Ice-breaking)", "비즈니스 미팅", "갈등 상황", "호감 표현", "일상 대화"].map(s => (
+                      <option key={s} value={s}>{s}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-500">메시지 내용</label>
+                  <textarea 
+                    value={formData.target_text}
+                    onChange={(e) => setFormData({...formData, target_text: e.target.value})}
+                    placeholder="상대방이 보낸 메시지를 입력하거나 이미지를 업로드하세요."
+                    className="w-full p-3 rounded-lg border bg-white dark:bg-slate-800 outline-none focus:ring-2 focus:ring-indigo-500 h-32 resize-none"
+                  />
+                </div>
+
+                <div className="space-y-3 pt-2">
+                  <button 
+                    onClick={handleAnalysisSubmit}
+                    disabled={loading}
+                    className="w-full btn-primary bg-indigo-600 py-4 shadow-lg shadow-indigo-200 dark:shadow-none"
+                  >
+                    {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : <Sparkles className="w-5 h-5" />}
+                    분석 및 조언 받기
+                  </button>
+                  
+                  <label className="block">
+                    <div className="btn-secondary cursor-pointer flex items-center justify-center gap-2 py-3 border-dashed border-2 hover:border-indigo-400 hover:text-indigo-600 transition-all">
+                      {ocrLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <ImageIcon className="w-4 h-4" />}
+                      대화 캡처본 불러오기
+                    </div>
+                    <input type="file" className="hidden" accept="image/*" onChange={handleImageOCR} />
+                  </label>
+                </div>
+              </section>
+            </div>
+
+            {/* Analysis Results */}
+            <div className="lg:col-span-8 space-y-6 relative">
+              {loading && (
+                <div className="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-2xl animate-fade-in">
+                  <div className="bg-white dark:bg-slate-800 p-8 rounded-2xl shadow-2xl border flex flex-col items-center gap-4">
+                    <Loader2 className="w-12 h-12 text-indigo-600 animate-spin" />
+                    <div className="text-center">
+                      <p className="font-bold text-lg text-slate-800 dark:text-white">{loadingStatus}</p>
+                      <p className="text-sm text-slate-500 mt-1">AI가 최적의 커뮤니케이션 전략을 짜고 있습니다...</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {analysisResult ? (
+                <div className="animate-fade-in space-y-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="card">
+                      <h3 className="text-lg font-bold mb-4 flex items-center gap-2">
+                        <BarChart3 className="w-5 h-5 text-emerald-500" />
+                        분석 리포트
+                      </h3>
+                      <div className="prose prose-sm dark:prose-invert max-w-none mb-4 whitespace-pre-wrap">
+                        {analysisResult.analysis_summary}
+                      </div>
+                      <MbtiChart data={analysisResult.axis_scores} />
+                    </div>
+                    
+                    <div className="card bg-indigo-50/50 dark:bg-indigo-900/10 border-indigo-100 dark:border-indigo-900/50">
+                      <h3 className="text-lg font-bold mb-4 flex items-center gap-2 text-indigo-600 dark:text-indigo-400">
+                        <Sparkles className="w-5 h-5" />
+                        솔루션 조언
+                      </h3>
+                      <div className="prose prose-indigo dark:prose-invert max-w-none whitespace-pre-wrap leading-relaxed">
+                        {analysisResult.advice}
+                      </div>
+                      
+                      <button 
+                        onClick={simulateReaction}
+                        className="mt-6 w-full btn-secondary text-indigo-600 border-indigo-200 bg-white"
+                      >
+                         🎭 상대방 반응 시뮬레이션
+                      </button>
+                    </div>
+                  </div>
+
+                  {reactionMsg && (
+                    <div className="card border-amber-200 bg-amber-50/50 dark:bg-amber-900/10 dark:border-amber-900/50">
+                      <h3 className="text-lg font-bold mb-2 flex items-center gap-2 text-amber-600">
+                        💭 예상 반응 시뮬레이션 결과
+                      </h3>
+                      <div className="whitespace-pre-wrap text-sm leading-relaxed">
+                        {reactionMsg}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="card h-full flex flex-col items-center justify-center text-slate-400 py-20 border-dashed">
+                  <BarChart3 className="w-16 h-16 mb-4 opacity-20" />
+                  <p>왼쪽에서 정보를 입력하고 분석을 시작해보세요.</p>
+                </div>
+              )}
+            </div>
+          </>
+        ) : (
+          <>
+            {/* Chat Settings */}
+            <div className="lg:col-span-3 space-y-6">
+              <section className="card space-y-4">
+                <h2 className="text-xl font-bold border-b pb-2 flex items-center gap-2">
+                  <Settings2 className="w-5 h-5" />
+                  채팅 설정
+                </h2>
+                
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-500">나의 MBTI</label>
+                  <select 
+                    value={chatSettings.user_mbti}
+                    onChange={(e) => setChatSettings({...chatSettings, user_mbti: e.target.value})}
+                    className="w-full p-2 rounded-lg border bg-white dark:bg-slate-800"
+                  >
+                    {["ISTJ", "ISFJ", "INFJ", "INTJ", "ISTP", "ISFP", "INFP", "INTP", "ESTP", "ESFP", "ENFP", "ENTP", "ESTJ", "ESFJ", "ENFJ", "ENTJ"].map(type => (
+                      <option key={type} value={type}>{type}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-500">상대방 MBTI</label>
+                  <select 
+                    value={chatSettings.target_mbti}
+                    onChange={(e) => setChatSettings({...chatSettings, target_mbti: e.target.value})}
+                    className="w-full p-2 rounded-lg border bg-white dark:bg-slate-800"
+                  >
+                    {["ISTJ", "ISFJ", "INFJ", "INTJ", "ISTP", "ISFP", "INFP", "INTP", "ESTP", "ESFP", "ENFP", "ENTP", "ESTJ", "ESFJ", "ENFJ", "ENTJ"].map(type => (
+                      <option key={type} value={type}>{type}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="space-y-1">
+                  <label className="text-xs font-semibold text-slate-500">대화 배경/상황</label>
+                  <textarea 
+                    value={chatSettings.situation}
+                    onChange={(e) => setChatSettings({...chatSettings, situation: e.target.value})}
+                    className="w-full p-2 rounded-lg border bg-white dark:bg-slate-800 h-24 resize-none text-sm"
+                  />
+                </div>
+
+                <button 
+                  onClick={startChat}
+                  className="w-full btn-secondary flex items-center justify-center gap-2"
+                >
+                  <Loader2 className={`w-4 h-4 ${chatLoading ? "animate-spin" : "hidden"}`} />
+                  대화 시작 / 초기화
+                </button>
+              </section>
+            </div>
+
+            {/* Chatbot */}
+            <div className="lg:col-span-6 flex flex-col h-[700px] gap-4">
+              <div className="card flex-1 overflow-hidden flex flex-col p-0">
+                <div className="border-b p-4 bg-slate-50 dark:bg-slate-800/50 flex items-center justify-between">
+                  <span className="font-bold flex items-center gap-2">
+                    <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+                    상대방과 가상 대화 중 ({chatSettings.target_mbti} 성향)
+                  </span>
+                </div>
+                
+                <div className="flex-1 overflow-y-auto p-4 space-y-4">
+                  {chatHistory.length === 0 && (
+                    <div className="text-center text-slate-400 mt-20">
+                      설정을 마치고 '대화 시작'을 눌러주세요.
+                    </div>
+                  )}
+                  {chatHistory.map((msg, i) => (
+                    <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+                      <div className={`max-w-[80%] p-3 rounded-2xl shadow-sm ${
+                        msg.role === "user" 
+                          ? "bg-indigo-600 text-white rounded-br-none" 
+                          : "bg-white dark:bg-slate-800 border rounded-bl-none"
+                      }`}>
+                        <p className="text-sm">{msg.content}</p>
+                      </div>
+                    </div>
+                  ))}
+                  {chatLoading && (
+                    <div className="flex justify-start">
+                      <div className="bg-white dark:bg-slate-800 border p-3 rounded-2xl rounded-bl-none italic text-slate-400 text-sm">
+                        생각 중...
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <div className="p-4 border-t bg-white dark:bg-slate-900">
+                  <form onSubmit={(e) => { e.preventDefault(); sendChatMessage(); }} className="flex gap-2">
+                    <input 
+                      value={chatInput}
+                      onChange={(e) => setChatInput(e.target.value)}
+                      placeholder="메시지 입력..."
+                      className="flex-1 p-3 rounded-xl border bg-slate-50 dark:bg-slate-800 outline-none focus:ring-2 focus:ring-indigo-500"
+                    />
+                    <button type="submit" className="p-3 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition-colors">
+                      <Send className="w-5 h-5" />
+                    </button>
+                  </form>
+                </div>
+              </div>
+            </div>
+
+            {/* Coaching Tip */}
+            <div className="lg:col-span-3 h-[700px]">
+              <section className="card border-amber-200 bg-amber-50/30 h-full flex flex-col overflow-hidden">
+                <h2 className="text-lg font-bold flex items-center gap-2 text-amber-700 mb-4 flex-shrink-0">
+                  <Sparkles className="w-5 h-5" />
+                  AI 실시간 가이드
+                </h2>
+                <div className="flex-1 overflow-y-auto pr-2 custom-scrollbar">
+                  <div className="prose prose-sm prose-amber dark:prose-invert max-w-none whitespace-pre-wrap italic text-slate-700 dark:text-slate-300">
+                    {coachingTip || "대화를 시작하면 이곳에서 실시간 전략 조언을 받으실 수 있습니다."}
+                  </div>
+                </div>
+                <div className="mt-8 pt-4 border-t text-[10px] text-slate-400 leading-relaxed flex-shrink-0">
+                  TIP: ���대방의 MBTI 특성에 맞는 단어 선택이 호감도를 결정합니다. AI 코치의 조언을 참고하여 답변을 수정해 보세요.
+                </div>
+              </section>
+            </div>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}

frontend/src/components/MbtiChart.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Cell, Text } from 'recharts';
+
+interface MbtiChartProps {
+  data: Record<string, number>;
+}
+
+export default function MbtiChart({ data }: MbtiChartProps) {
+  // data format: { 'I/E': 0.8, 'S/N': 0.2, ... }
+  // Transform for Recharts
+  const chartData = [
+    { name: 'I/E', value: data['I/E'] * 100, label: 'I 성향' },
+    { name: 'S/N', value: data['S/N'] * 100, label: 'S 성향' },
+    { name: 'T/F', value: data['T/F'] * 100, label: 'T 성향' },
+    { name: 'P/J', value: data['P/J'] * 100, label: 'P 성향' },
+  ].reverse();
+
+  const colors = ['#4f46e5', '#10b981', '#f59e0b', '#ec4899'];
+
+  return (
+    <div className="h-[300px] w-full mt-4">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          layout="vertical"
+          data={chartData}
+          margin={{ top: 5, right: 30, left: 40, bottom: 5 }}
+        >
+          <XAxis type="number" domain={[0, 100]} hide />
+          <YAxis 
+            dataKey="name" 
+            type="category" 
+            tick={{ fill: 'currentColor', fontSize: 12 }} 
+            width={40}
+          />
+          <Tooltip 
+            cursor={{ fill: 'transparent' }}
+            content={({ active, payload }) => {
+              if (active && payload && payload.length) {
+                return (
+                  <div className="bg-white dark:bg-slate-800 p-2 border border-slate-200 dark:border-slate-700 rounded shadow-sm text-xs">
+                    <p className="font-bold">{payload[0].payload.label}</p>
+                    <p>{`${payload[0].value?.toFixed(1)}%`}</p>
+                  </div>
+                );
+              }
+              return null;
+            }}
+          />
+          <Bar dataKey="value" radius={[0, 4, 4, 0]} barSize={20}>
+            {chartData.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+      <p className="text-[10px] text-center text-slate-500 mt-2">
+        ※ 오른쪽일수록 I / S / T / P 성향이 강함을 의미합니다.
+      </p>
+    </div>
+  );
+}

frontend/src/lib/api.ts

@@ -0,0 +1,32 @@
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000/api";
+
+export async function post(endpoint: string, data: any) {
+  const response = await fetch(`${API_BASE_URL}${endpoint}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.detail || "Something went wrong");
+  }
+  return response.json();
+}
+
+export async function uploadImage(file: File) {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const response = await fetch(`${API_BASE_URL}/ocr`, {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error("OCR failed");
+  }
+
+  return response.json();
+}

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}